/* ============================================================
   LOGOVO LABS — Technical Brand Landing
   White + acid green. Grotesque / mono / serif system.
   ============================================================ */

:root {
  --bg: #F4F5F2;
  --bg-warm: #EFEFEA;
  --surface: #FFFFFF;
  --ink: #0E1216;
  --ink-soft: #2A3038;
  --muted: #8A93A0;        /* slate from DESIGN.md */
  --muted-2: #B4BBC4;
  --line: #DEE1DC;
  --line-strong: #C7CBC4;
  --acid: #C6F500;         /* acid green */
  --acid-deep: #ABD400;
  --acid-ink: #1A2400;     /* readable text on acid */

  --r: 24px;               /* DESIGN.md radius family */
  --r-sm: 12px;
  --pad: 32px;             /* DESIGN.md spacing scale */

  --ff-grotesk: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-mono: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  --ff-serif: "Newsreader", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--ff-grotesk);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

::selection { background: var(--acid); color: var(--acid-ink); }

.mono {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shell { width: 100%; padding-inline: clamp(16px, 3.2vw, 48px); }

/* ---- reveal animation base ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none;} }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  height: 64px;
  background: rgba(244,245,242,.72);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.nav__brand {
  display: flex; align-items: center; gap: 14px;
  padding-inline: clamp(16px, 3vw, 32px);
  border-right: 1px solid var(--line);
}
.brand-mark {
  width: 26px; height: 26px; position: relative; flex: none;
}
.brand-mark::before, .brand-mark::after{
  content:""; position:absolute; inset:0;
  border:2px solid var(--ink);
}
.brand-mark::after{ transform: translate(5px,5px); border-color: var(--acid-deep); background: var(--acid); mix-blend-mode: multiply; }
.brand-name {
  font-weight: 800; font-size: 15px; letter-spacing: -0.01em;
  text-transform: uppercase;
}
.brand-name b { color: var(--ink); }

.nav__links {
  display: flex; align-items: center; gap: 6px;
  padding-inline: 22px;
}
.nav__links a {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 7px 12px; border-radius: 999px;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.nav__links a:hover { background: var(--ink); color: #fff; }
.nav__links .dot { width:5px; height:5px; border-radius:50%; background: var(--acid-deep); }

.nav__right { display: flex; align-items: stretch; border-left: 1px solid var(--line); }
.nav__lang { display: flex; align-items: center; gap: 4px; padding-inline: 14px; }
.lang-btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: none; cursor: pointer;
  font-family: var(--ff-mono); font-size: 10px; font-weight: 700; color: var(--ink-soft);
  transition: all .35s var(--ease);
}
.lang-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-2px); }
.lang-btn.active { background: var(--acid); border-color: var(--acid); color: var(--acid-ink); }
.nav__cta {
  display: flex; align-items: center; gap: 10px;
  padding-inline: clamp(16px, 2vw, 26px);
  background: var(--ink); color: #fff;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.nav__cta:hover { background: var(--acid); color: var(--acid-ink); }
.nav__cta .arr { transition: transform .4s var(--ease); }
.nav__cta:hover .arr { transform: translate(3px,-3px); }

@media (max-width: 900px){
  .nav__links { display: none; }
}

/* ============================================================
   HERO  (1.png technical rects + 2.png brutalist type)
   ============================================================ */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding-top: 64px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* full-bleed, fixed dot-matrix field behind the entire page */
#dots {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; opacity: .42; pointer-events: none;
}
/* generative graphics canvas over the photo (per 9.png) */
.hero__gfx {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;
  opacity: .92;
}
/* 6.png city photo as the hero background */
.hero__photo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/city-photo2.png") center 32% / cover no-repeat;
  opacity: .52;
  filter: grayscale(.5) brightness(1.06) contrast(.98);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, #000 26%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, #000 26%, #000 84%, transparent 100%);
}
/* faint blueprint grid lines like 1.png */
.hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(14,18,22,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,18,22,.045) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 35%, #000 40%, transparent 92%);
          mask-image: radial-gradient(120% 100% at 50% 35%, #000 40%, transparent 92%);
}

.hero__stage {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column;
}
.hero__top {
  position: relative; flex: 1;
  display: grid; grid-template-columns: 1fr; align-items: end;
  min-height: 58vh;
  padding-top: clamp(40px, 9vh, 96px);
}

/* floating technical rectangles */
.field { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.rect {
  position: absolute;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.5);
  border-radius: 4px;
  will-change: transform;
}
.rect.fill { background: linear-gradient(135deg, #f1f2ee, #e7e9e3); }
.rect .dim {
  position: absolute; font-family: var(--ff-mono); font-size: 9.5px;
  color: var(--muted); letter-spacing: .02em; white-space: nowrap;
}
.rect .dim.top { top: -16px; left: 0; }
.rect .dim.left { left: -6px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }
.rect.acc { border-color: var(--acid-deep); box-shadow: inset 0 0 0 1px rgba(198,245,0,.5); }
.rect.acc::after{ content:""; position:absolute; inset:6px; background: var(--acid); opacity:.35; border-radius:2px; }

/* corner brackets framing the hero stage */
.brackets { position:absolute; inset: clamp(16px,3vw,40px); z-index: 1; pointer-events:none; }
.brackets i { position:absolute; width:18px; height:18px; border:2px solid var(--ink); opacity:.5; }
.brackets i.tl{ top:0; left:0; border-right:0; border-bottom:0; }
.brackets i.tr{ top:0; right:0; border-left:0; border-bottom:0; }
.brackets i.bl{ bottom:0; left:0; border-right:0; border-top:0; }
.brackets i.br{ bottom:0; right:0; border-left:0; border-top:0; }

/* hero kicker labels (like 1.png corner annotations) */
.hero__label {
  position: absolute; z-index: 3;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft); line-height: 1.7;
}
.hero__label .sub { color: var(--muted); }
.hero__label.a { top: clamp(28px,6vh,56px); left: clamp(20px,4vw,52px); }
.hero__label.b { top: clamp(28px,6vh,56px); right: clamp(20px,4vw,52px); text-align: right; }

/* concentric oval line art (right side, like 2.png) */
.oval-art {
  position: absolute; right: clamp(-60px,-2vw,0px); top: 50%; transform: translateY(-52%);
  width: clamp(260px, 30vw, 520px); aspect-ratio: 3/4; z-index: 1; opacity: .8;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
          mask-image: linear-gradient(to left, #000 55%, transparent 100%);
}
.oval-art svg { width: 100%; height: 100%; display: block; }

/* forms & figures layered OVER the city (from 2.png) */
.hero__forms { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__forms .portal {
  position: absolute; right: 5%; top: 50%; transform: translateY(-55%);
  width: clamp(300px, 37vw, 600px); aspect-ratio: 3/4; height: auto; opacity: .6;
  -webkit-mask-image: linear-gradient(to left, #000 60%, transparent 100%);
          mask-image: linear-gradient(to left, #000 60%, transparent 100%);
}
.hero__forms .moon {
  position: absolute; left: 12%; top: 27%; width: 52px; height: 52px; border-radius: 50%;
  background: #DBD5C8; box-shadow: inset -7px -7px 0 rgba(0,0,0,.05), 0 1px 0 rgba(0,0,0,.03);
}
.hero__forms .plus { color: var(--ink-soft); opacity: .5; font-size: 16px; }

/* sparkles */
.spark { position:absolute; z-index:2; color: var(--ink); opacity:.55; font-size: 18px; }
.spark.s2{ color: var(--acid-deep); opacity: 1; }

/* center kicker block */
.hero__intro {
  position: relative; z-index: 4;
  justify-self: start; max-width: 540px;
  margin-left: clamp(20px, 4vw, 52px);
  margin-top: clamp(40px, 8vh, 90px);
  margin-bottom: clamp(18px, 4vh, 40px);
}
.hero__intro::before {
  content: ""; position: absolute; z-index: -1;
  left: -14%; top: -16%; width: 128%; height: 140%;
  background: radial-gradient(58% 60% at 30% 52%, rgba(244,245,242,.9) 0%, rgba(244,245,242,.5) 48%, transparent 78%);
  pointer-events: none;
}
.hero__intro p { text-shadow: 0 1px 10px rgba(244,245,242,.9); }
.hero__intro .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft);
  border: 1px solid var(--line-strong); background: var(--surface);
  padding: 7px 12px; border-radius: 999px;
}
.hero__intro .eyebrow .led { width:7px; height:7px; border-radius:50%; background: var(--acid); box-shadow: 0 0 0 3px rgba(198,245,0,.25); }
.hero__intro p {
  margin-top: 18px; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.5;
  color: var(--ink-soft); max-width: 420px; text-wrap: pretty;
}

/* marquee strips */
.marquee {
  position: relative; z-index: 5;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  background: var(--surface);
  overflow: hidden; white-space: nowrap;
  height: 46px; display: flex; align-items: center;
}
.marquee.acid { background: var(--acid); border-color: var(--acid-ink); }
.marquee__track { display: inline-flex; align-items: center; gap: 0; will-change: transform; animation: scrollx 34s linear infinite; }
.marquee.rev .marquee__track { animation-direction: reverse; animation-duration: 40s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  font-family: var(--ff-mono); font-size: 13px; letter-spacing: .02em;
  padding-inline: 22px; display: inline-flex; align-items: center; gap: 22px;
}
.marquee .x { color: var(--acid-deep); font-weight: 700; }
.marquee.acid .x { color: var(--acid-ink); }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* GIANT hero headline */
.hero__big {
  position: relative; z-index: 5; background: var(--surface);
  padding: clamp(10px, 2vh, 26px) 0 clamp(14px, 2.4vh, 30px);
  border-bottom: 1px solid var(--line);
}
.hero__big h1 {
  font-weight: 900; line-height: .82; letter-spacing: -0.03em;
  font-size: clamp(58px, 9.1vw, 230px);
  text-transform: uppercase; white-space: nowrap;
  text-align: center; color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: .12em;
}
.hero__big h1 .star { color: var(--acid-deep); -webkit-text-stroke: 0; font-size: .62em; transform: translateY(-.04em); }
.hero__big .ghost { color: var(--ink); -webkit-text-stroke: 1.5px var(--ink); }

@media (max-width: 720px){
  .hero__big h1 { font-size: 16vw; }
  .hero__intro { margin-top: 24px; }
}

/* ============================================================
   SECTION CHROME
   ============================================================ */
.section { position: relative; z-index: 1; }
.sec-head {
  display: flex; align-items: stretch; border-bottom: 1px solid var(--ink);
}
.sec-head__tag {
  display: flex; align-items: center; gap: 10px;
  padding: 14px clamp(16px,3vw,32px);
  font-family: var(--ff-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: .03em; font-weight: 700;
  border-right: 1px solid var(--ink);
}
.sec-head__tag .pin { width:8px; height:8px; border-radius:50%; background: var(--acid); box-shadow: 0 0 0 3px rgba(198,245,0,.3); }
.sec-head__sub {
  display:flex; align-items:center; gap:8px;
  padding: 14px clamp(16px,3vw,32px);
  font-family: var(--ff-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(14,18,22,.05) 6px 7px);
  flex: 1;
}

/* ============================================================
   MISSION  (3.png — serif + KZ + acid gantt timeline)
   ============================================================ */
.mission { background: rgba(239,239,234,.80); padding-bottom: clamp(40px,7vh,96px); }
.mission__intro {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px;
  align-items: start;
  padding: clamp(48px,9vh,110px) clamp(16px,3vw,48px) clamp(40px,6vh,80px);
}
.mission__intro h2 {
  font-family: var(--ff-serif); font-weight: 500;
  font-size: clamp(46px, 7vw, 116px); line-height: .92; letter-spacing: -0.02em;
}
.mission__intro h2 em { font-style: italic; color: var(--acid-deep); }
.mission__copy { padding-top: 10px; }
.mission__copy .kicker {
  display:flex; align-items:center; gap: 10px; margin-bottom: 16px;
  font-family: var(--ff-mono); font-size: 12px; text-transform: uppercase; letter-spacing:.04em;
}
.mission__copy .kicker .flag {
  font-size: 11px; font-weight:700; padding: 4px 9px; border-radius: 999px;
  background: var(--ink); color: #fff;
}
.mission__copy p {
  font-family: var(--ff-mono); font-size: clamp(13px,1.05vw,14.5px); line-height: 1.7;
  color: var(--ink-soft); max-width: 460px; text-wrap: pretty;
}
.mission__copy p + p { margin-top: 16px; color: var(--muted); }

/* stat row */
.mission__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
  margin: 0 clamp(16px,3vw,48px);
}
.mstat { padding: 22px 4px 22px 0; }
.mstat + .mstat { padding-left: 24px; border-left: 1px solid var(--line); }
.mstat .n { font-weight: 900; font-size: clamp(30px,3.6vw,48px); letter-spacing: -0.02em; line-height: 1; }
.mstat .n .u { color: var(--acid-deep); }
.mstat .l { margin-top: 8px; font-family: var(--ff-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* gantt timeline */
.timeline {
  position: relative; margin: clamp(40px,6vh,72px) clamp(16px,3vw,48px) 0;
  padding-top: 36px;
}
.timeline__axis { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6,1fr); pointer-events:none; }
.timeline__axis span { border-left: 1px solid var(--line); position: relative; }
.timeline__axis span::before {
  content: attr(data-y); position: absolute; top: 0; left: 8px;
  font-family: var(--ff-mono); font-size: 10.5px; color: var(--muted); letter-spacing: .04em;
}
.gantt { display: flex; flex-direction: column; gap: 30px; position: relative; }
.bar { position: relative; }
.bar__track {
  position: relative; height: 64px; border-radius: 4px; overflow: hidden;
  width: 0; transition: width 1.1s var(--ease);
}
.bar.in .bar__track { width: var(--w); }
.bar__solid { position: absolute; inset: 0; }
/* pixel-dither trailing edge */
.bar__dither {
  position: absolute; top: 0; right: 0; bottom: 0; width: 42%;
  background:
    repeating-conic-gradient(var(--c) 0 25%, transparent 0 50%) 0 0 / 9px 9px;
  -webkit-mask-image: linear-gradient(to right, #000, transparent);
          mask-image: linear-gradient(to right, #000, transparent);
  opacity: .85;
}
.bar__label {
  position: absolute; top: 9px; left: 12px; z-index: 2;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--acid-ink);
}
.bar__desc {
  margin-top: 12px; font-family: var(--ff-mono); font-size: 11px; line-height: 1.7;
  text-transform: uppercase; letter-spacing: .02em; color: var(--muted);
}
.bar__desc b { color: var(--ink-soft); font-weight: 700; }

@media (max-width: 820px){
  .mission__intro { grid-template-columns: 1fr; }
  .mission__stats { grid-template-columns: repeat(2,1fr); }
  .mstat:nth-child(3){ border-left: 0; }
}

/* ============================================================
   PRODUCTS  (4.png — hatched cards + line art)
   ============================================================ */
.products { background: rgba(244,245,242,.80); position: relative; overflow: hidden; }
.products > *:not(.products__bg) { position: relative; z-index: 1; }
.products__bg {
  position: absolute; left: 0; right: 0; top: -12%; height: 124%; z-index: 0; pointer-events: none;
  /* background: url("assets/city-photo.png") center / cover no-repeat; */
  opacity: .12; filter: grayscale(.6) brightness(1.05) contrast(.98);
  will-change: transform;
  -webkit-mask-image: radial-gradient(130% 100% at 50% 50%, #000 42%, transparent 92%);
          mask-image: radial-gradient(130% 100% at 50% 50%, #000 42%, transparent 92%);
}
.products__head {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px;
  padding: clamp(48px,8vh,96px) clamp(16px,3vw,48px) clamp(36px,5vh,64px);
  align-items: end;
  position: relative; overflow: hidden;
}
.products__head-bg {
  position: absolute; inset: -30%; z-index: 0; pointer-events: none;
  background: url("assets/city-photo2.png") center / cover no-repeat;
  opacity: .14; filter: grayscale(.4) brightness(1.1) contrast(.95);
  will-change: transform;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 40%, transparent 90%);
          mask-image: radial-gradient(120% 100% at 50% 50%, #000 40%, transparent 90%);
}
.products__head > *:not(.products__head-bg) { position: relative; z-index: 1; }
.products__head h2 {
  font-weight: 500; font-size: clamp(30px,4.2vw,60px); line-height: 1.05; letter-spacing: -0.02em;
  max-width: 14ch; text-wrap: balance;
}
.products__head .lead {
  font-family: var(--ff-mono); font-size: 12.5px; line-height: 1.7; color: var(--muted);
  text-transform: none; letter-spacing: .01em; max-width: 42ch;
}
.products__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
}
.pcard {
  position: relative; padding: 26px clamp(18px,2vw,28px) 28px;
  border-right: 1px solid var(--line);
  transition: background .5s var(--ease);
}
.pcard:last-child { border-right: 0; }
.pcard:hover { background: var(--surface); }
.pcard__top { display: flex; align-items: baseline; justify-content: space-between; }
.pcard__top h3 { font-size: clamp(20px,1.8vw,26px); font-weight: 700; letter-spacing: -0.01em; }
.pcard__num { font-family: var(--ff-mono); font-size: 12px; color: var(--muted-2); }
.pcard__kind { margin-top: 4px; font-family: var(--ff-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--acid-deep); }

/* hatched placeholder window with line-art */
.plot {
  position: relative; margin: 22px 0 20px; aspect-ratio: 1 / 1;
  border: 1px solid var(--line-strong);
  background:
    repeating-linear-gradient(45deg, rgba(14,18,22,.05) 0 1px, transparent 1px 7px);
  overflow: hidden;
}
.plot__br { position:absolute; width:14px; height:14px; border:1px solid var(--ink-soft); opacity:.45; }
.plot__br.tl{top:8px;left:8px;border-right:0;border-bottom:0;}
.plot__br.tr{top:8px;right:8px;border-left:0;border-bottom:0;}
.plot__br.bl{bottom:8px;left:8px;border-right:0;border-top:0;}
.plot__br.br{bottom:8px;right:8px;border-left:0;border-top:0;}
.plot svg { position:absolute; inset:0; margin:auto; width:62%; height:62%; overflow: visible; }
.plot svg circle, .plot svg line, .plot svg polygon, .plot svg polyline, .plot svg path, .plot svg rect {
  stroke: var(--ink-soft); fill: none; vector-effect: non-scaling-stroke; stroke-width: 1;
}
.plot canvas.mesh { position:absolute; inset:0; width:100%; height:100%; }
.pcard:hover .plot { background:
    repeating-linear-gradient(45deg, rgba(171,212,0,.16) 0 1px, transparent 1px 7px); }
.pcard:hover .plot svg .accent { stroke: var(--acid-deep); }
.pcard:hover .plot svg .accentfill { fill: var(--acid); }

/* card motion (per 5.png) */
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2.4px)} }
.plot .layer { transform-box: fill-box; transform-origin:center; animation: bob 3.4s var(--ease) infinite; }
@keyframes corepulse { 0%,100%{transform:translateY(0); opacity:1} 50%{transform:translateY(-3.2px); opacity:.5} }
.plot .core { transform-box: fill-box; transform-origin:center; animation: corepulse 3.4s var(--ease) infinite; }
.plot .rotc { transform-box: fill-box; transform-origin:50% 50%; animation: spin 46s linear infinite; }
@media (prefers-reduced-motion: reduce){ .plot .layer,.plot .core,.plot .rotc{animation:none;} }

.spin { transform-origin: center; animation: spin 26s linear infinite; }
.spin-rev { transform-origin: center; animation: spin 30s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.breathe { transform-origin: center; animation: breathe 6s var(--ease) infinite; }
@keyframes breathe { 0%,100%{transform:scale(1);opacity:.9} 50%{transform:scale(1.06);opacity:1} }
@media (prefers-reduced-motion: reduce){ .spin,.spin-rev,.breathe{animation:none;} }

.pcard__body { font-family: var(--ff-mono); font-size: 12px; line-height: 1.7; color: var(--ink-soft); }
.pcard__meta {
  margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line-strong);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pcard__meta span {
  font-family: var(--ff-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px;
}

@media (max-width: 920px){
  .products__head { grid-template-columns: 1fr; gap: 22px; }
  .products__grid { grid-template-columns: 1fr; }
  .pcard { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* CTA band */
.cta {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
  padding: clamp(40px,6vh,72px) clamp(16px,3vw,48px);
  border-top: 1px solid var(--ink); background: var(--surface);
}
.cta h3 { font-weight: 800; font-size: clamp(26px,3.4vw,46px); letter-spacing: -0.02em; line-height: 1.02; }
.cta h3 em { font-style: normal; color: var(--acid-deep); }
.cta__btn {
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  background: var(--ink); color: #fff; padding: 18px 26px; border-radius: 999px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 14px;
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.cta__btn:hover { background: var(--acid); color: var(--acid-ink); transform: translateY(-2px); }
.cta__btn .arr { transition: transform .4s var(--ease); }
.cta__btn:hover .arr { transform: translate(3px,-3px); }
@media (max-width: 720px){ .cta { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--ink); color: #E7EAE4; position: relative; z-index: 1; overflow: hidden; }
.footer__grid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 36px;
  padding: clamp(48px,7vh,88px) clamp(16px,3vw,48px) 36px;
}
.footer__brand .bm {
  display:flex; align-items:center; gap: 12px; margin-bottom: 18px;
}
.footer__brand .bm .brand-mark::before{ border-color:#fff; }
.footer__brand .bm .brand-mark::after{ background: var(--acid); border-color: var(--acid); }
.footer__brand .bm b { font-weight:800; font-size:16px; text-transform:uppercase; }
.footer__brand p {
  font-family: var(--ff-mono); font-size: 12px; line-height: 1.7; color: var(--muted);
  max-width: 36ch; text-transform: none;
}
.footer__brand .badge {
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-family: var(--ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:8px 13px;
}
.footer__brand .badge .led{ width:7px;height:7px;border-radius:50%;background:var(--acid); box-shadow:0 0 0 3px rgba(198,245,0,.25); }
.fcol h4 {
  font-family: var(--ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted-2); margin-bottom: 16px; font-weight: 700;
}
.fcol a, .fcol .li {
  display: block; font-size: 14px; padding: 7px 0; color: #D5D9D1;
  transition: color .35s var(--ease), padding .35s var(--ease);
}
.fcol a:hover { color: var(--acid); padding-left: 6px; }

.footer__word {
  position: relative; padding: 0 clamp(16px,3vw,48px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.footer__word h2 {
  font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: .9;
  font-size: clamp(64px, 12vw, 320px); color: transparent;
  -webkit-text-stroke: 3.6px rgba(255,255,255,.26);
  padding: clamp(20px,4vh,52px) 0 clamp(4px,1vh,12px);
  white-space: nowrap; text-align: center;
}
.footer__word h2 span { color: #fff; -webkit-text-stroke: 0; }
.footer__bar {
  display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between; align-items:center;
  padding: 20px clamp(16px,3vw,48px) 30px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-family: var(--ff-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted);
}
.footer__bar a:hover { color: var(--acid); }
.footer__bar .right { display:flex; gap: 18px; }

@media (max-width: 820px){
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}