/* ============================================================
   ADEPT — aarmtec.com redesign
   Brutalist-industrial × Teenage-Engineering minimal
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  /* warm near-black / paper */
  --ink:        oklch(0.165 0.006 70);
  --ink-2:      oklch(0.205 0.007 70);
  --ink-3:      oklch(0.255 0.008 72);
  --paper:      oklch(0.955 0.008 86);
  --paper-2:    oklch(0.905 0.010 86);
  --line:       oklch(0.34 0.010 72);
  --line-soft:  oklch(0.28 0.008 72);
  --line-paper: oklch(0.80 0.012 86);
  --muted:      oklch(0.66 0.010 78);
  --muted-d:    oklch(0.52 0.012 80);

  /* playhead LEDs — semantic product colors */
  --orange: oklch(0.71 0.195 47);
  --yellow: oklch(0.855 0.155 92);
  --blue:   oklch(0.66 0.165 256);

  /* primary UI accent */
  --accent: rgb(70, 146, 245);

  --maxw: 1280px;
  --pad: clamp(20px, 5vw, 64px);

  --f-disp: 'Archivo', system-ui, sans-serif;
  --f-mono: 'Space Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--f-disp);
  background:var(--ink);
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

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

/* ---- shared atoms ---------------------------------------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

.kicker, .sec-tag, .mono{
  font-family:var(--f-mono);
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:12px;
}

.sec-head{ margin-bottom:clamp(36px,5vw,64px); }
.sec-tag{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--muted);
  margin-bottom:22px;
}
.sec-tag::before{
  content:""; width:30px; height:2px; background:currentColor; display:inline-block;
}
.sec-head h2{
  font-size:clamp(34px, 5.4vw, 68px);
  line-height:0.98;
  font-weight:900;
  font-stretch:125%;
  letter-spacing:-0.02em;
  text-wrap:balance;
}
.sec-head p{
  margin-top:22px; max-width:56ch;
  color:var(--muted); font-size:clamp(16px,1.5vw,19px); line-height:1.5;
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono);
  text-transform:uppercase; letter-spacing:0.12em; font-size:13px; font-weight:700;
  padding:15px 22px; border:2px solid var(--paper);
  transition:transform .12s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
  cursor:pointer; white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn--solid{ background:var(--paper); color:var(--ink); }
.btn--solid:hover{ box-shadow:6px 6px 0 0 var(--blue); transform:translate(-2px,-2px); }
.btn--ghost{ background:transparent; color:var(--paper); }
.btn--ghost:hover{ background:var(--paper); color:var(--ink); }
.btn--kick{
  background:var(--accent); color:var(--ink); border-color:var(--accent);
}
.btn--kick:hover{ box-shadow:5px 5px 0 0 var(--ink); transform:translate(-2px,-2px); }
.btn--lg{ padding:19px 30px; font-size:14px; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in oklab, var(--ink) 86%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:2px solid var(--line);
  transition:border-color .2s ease;
}
.nav__in{
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--pad);
  height:66px; display:flex; align-items:center; gap:28px;
}
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--f-disp); font-weight:900; font-stretch:125%; letter-spacing:0.02em; font-size:17px; }
.brand__mark{
  width:27px; height:23px; flex:none; display:block;
  fill:currentColor; color:inherit;
}
.nav__links{ display:flex; gap:26px; margin-left:14px; }
.nav__links a{
  font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--muted); padding:6px 0; position:relative;
}
.nav__links a:hover{ color:var(--paper); }
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--paper);
  transition:right .2s ease;
}
.nav__links a:hover::after{ right:0; }
.nav__cta{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.nav__cta .btn{ padding:11px 18px; }
.nav__burger{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  border-bottom:2px solid var(--line);
  min-height:clamp(540px, 82vh, 800px);
  display:flex; flex-direction:column;
}
/* full-bleed sequencer backdrop */
.hero__seq{
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:flex-end; gap:6px;
  padding:clamp(70px,11vh,150px) var(--pad) 0;
}
.hero__seq i{
  flex:1; display:block; min-height:6px;
  background:var(--ink-3); border:1px solid var(--line-soft); border-bottom:0;
}
.hero__ph{
  position:absolute; top:0; bottom:0; width:3px; margin-left:-1.5px; z-index:2;
  mix-blend-mode:screen; pointer-events:none;
}
.hero__ph::before{ content:""; position:absolute; inset:0; background:currentColor; box-shadow:0 0 12px 0 currentColor; opacity:0.9; }
.hero__ph::after{
  content:""; position:absolute; top:clamp(66px,10.5vh,146px); left:50%; transform:translateX(-50%);
  width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid currentColor;
}
.hero__ph.o{ color:var(--orange); left:60%; }
.hero__ph.y{ color:var(--yellow); left:73%; }
.hero__ph.b{ color:var(--blue);   left:86%; }
.hero__scrim{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(180deg, color-mix(in oklab,var(--ink),transparent 22%) 0%, color-mix(in oklab,var(--ink),transparent 55%) 30%, color-mix(in oklab,var(--ink),transparent 55%) 44%, color-mix(in oklab,var(--ink),transparent 0%) 84%);
}
.hero__inner{
  position:relative; z-index:4; width:100%; flex:1 1 auto;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  padding-block:clamp(22px,4vh,40px);
  display:flex; flex-direction:column; gap:24px;
}
.hero__legend{ align-self:flex-end; display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.hero__legend i{
  font-style:normal; font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted); display:inline-flex; align-items:center; gap:9px;
  border:1.5px solid var(--line); background:color-mix(in oklab,var(--ink),transparent 18%); padding:7px 11px;
}
.hero__legend i .sw{ width:12px; height:12px; flex:none; }
.hero__copy{ margin-top:auto; max-width:780px; }
.hero__copy .kicker{ color:var(--muted); display:block; margin-bottom:20px; }
.hero__title{
  font-size:clamp(46px, 8.4vw, 116px);
  font-weight:900; font-stretch:122%;
  line-height:0.88; letter-spacing:-0.025em;
}
.hero__title .dot{ color:var(--accent); }
.hero__sub{
  max-width:54ch; color:var(--paper); margin-top:22px;
  font-size:clamp(16px,1.6vw,20px); line-height:1.5;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }

/* stat strip below hero */
.statband{ border-bottom:2px solid var(--line); background:var(--ink); }
.statband ul{
  max-width:var(--maxw); margin-inline:auto; list-style:none;
  display:grid; grid-template-columns:repeat(4,1fr); padding-inline:var(--pad);
}
.statband li{ padding:18px clamp(14px,1.6vw,22px); border-right:2px solid var(--line); }
.statband li:first-child{ padding-left:0; }
.statband li:last-child{ border-right:0; padding-right:0; }
.statband b{ display:block; font-size:30px; font-weight:900; font-stretch:115%; line-height:1; }
.statband span{ font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.14em; color:var(--muted); display:block; margin-top:8px; }

/* status bar */
.status{
  border-top:2px solid var(--line);
  background:var(--ink-2);
}
.status__in{
  max-width:var(--maxw); margin-inline:auto; padding:13px var(--pad);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.14em;
}
.status .led{ width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 var(--accent); animation:pulse 1.8s infinite; flex:none; }
.status .sep{ color:var(--line); }
.status b{ color:var(--accent); }
.status .right{ margin-left:auto; color:var(--muted); }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in oklab,var(--accent),transparent 30%);} 70%{ box-shadow:0 0 0 9px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  border-bottom:2px solid var(--line);
  background:var(--paper); color:var(--ink);
  overflow:hidden; white-space:nowrap; display:flex;
}
.marquee__track{
  display:inline-flex; align-items:center; gap:0; padding:11px 0;
  animation:scroll 38s linear infinite; will-change:transform;
}
.marquee__track span{ font-family:var(--f-mono); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.1em; padding:0 26px; display:inline-flex; align-items:center; gap:26px; }
.marquee__track span::after{ content:"◆"; font-size:8px; color:var(--blue); }
@keyframes scroll{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* ============================================================
   SECTIONS — generic
   ============================================================ */
section.band{ padding:clamp(64px,9vw,128px) 0; }
.band--paper{ background:var(--paper); color:var(--ink); }
.band--paper .sec-tag{ color:var(--muted-d); }
.band--paper .sec-head p{ color:var(--muted-d); }

/* ---- snapshot 01/02/03 ----------------------------------- */
.snap-grid{ display:grid; grid-template-columns:repeat(3,1fr); border:2px solid var(--line); }
.snap{
  padding:clamp(28px,3vw,40px); border-right:2px solid var(--line);
  position:relative; min-height:300px; display:flex; flex-direction:column;
}
.snap:last-child{ border-right:0; }
.snap__num{ font-family:var(--f-mono); font-size:13px; letter-spacing:0.1em; color:var(--muted); }
.snap__led{ width:34px; height:8px; margin:20px 0 26px; }
.snap:nth-child(1) .snap__led{ background:var(--orange); }
.snap:nth-child(2) .snap__led{ background:var(--yellow); }
.snap:nth-child(3) .snap__led{ background:var(--blue); }
.snap h3{ font-size:26px; font-weight:800; font-stretch:115%; letter-spacing:-0.01em; margin-bottom:14px; }
.snap p{ color:var(--muted); font-size:15.5px; line-height:1.55; }
.snap:hover{ background:var(--ink-2); }

/* ============================================================
   CONCEPT — animated 3-playhead sequencer
   ============================================================ */
.concept{ background:var(--ink); }
.seq{
  border:2px solid var(--line); background:var(--ink-2);
  display:grid; grid-template-columns:1fr;
}
.seq__bar{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:16px clamp(18px,2.4vw,28px); border-bottom:2px solid var(--line);
  font-family:var(--f-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.14em; color:var(--muted);
}
.seq__bar .play{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  border:2px solid var(--line); padding:8px 14px; color:var(--paper); background:var(--ink-3);
}
.seq__bar .play:hover{ border-color:var(--paper); }
.seq__bar .play .ico{ width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent; }
.seq__bar .play.is-on .ico{ width:9px;height:11px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor; }
.seq__bar .legend{ display:flex; gap:18px; margin-left:auto; flex-wrap:wrap; }
.seq__bar .legend i{ display:inline-flex; align-items:center; gap:8px; font-style:normal; }
.seq__bar .legend .sw{ width:14px; height:14px; flex:none; }

.seq__stage{ position:relative; padding:clamp(20px,3vw,38px) clamp(18px,2.4vw,28px); }
.seq__grid{
  position:relative; display:grid; grid-template-columns:repeat(16,1fr); gap:6px;
  height:clamp(150px,22vw,230px);
}
.cell{
  position:relative; border:1.5px solid var(--line-soft); background:var(--ink);
  align-self:stretch; min-height:0; transition:background .08s linear, border-color .08s linear;
}
.cell .barv{
  position:absolute; left:0; right:0; bottom:0; min-height:4px;
  background:oklch(0.36 0.012 80);
  transition:background .08s linear, box-shadow .08s linear;
}
.cell.hit-o{ border-color:var(--orange); }
.cell.hit-o .barv{ background:var(--orange); box-shadow:0 0 18px -2px var(--orange); }
.cell.hit-y{ border-color:var(--yellow); }
.cell.hit-y .barv{ background:var(--yellow); box-shadow:0 0 18px -2px var(--yellow); }
.cell.hit-b{ border-color:var(--blue); }
.cell.hit-b .barv{ background:var(--blue); box-shadow:0 0 18px -2px var(--blue); }

.playhead{
  position:absolute; top:0; bottom:0; width:3px; margin-left:-1.5px;
  pointer-events:none; z-index:5; mix-blend-mode:screen;
}
.playhead::before{ content:""; position:absolute; inset:0; background:currentColor; }
.playhead::after{
  content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid currentColor;
}
.ph-o{ color:var(--orange); }
.ph-y{ color:var(--yellow); }
.ph-b{ color:var(--blue); }

.seq__rails{ display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--line); }
.rail{ padding:18px clamp(18px,2.2vw,24px); border-right:2px solid var(--line); }
.rail:last-child{ border-right:0; }
.rail__h{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.rail__h .sw{ width:16px; height:16px; flex:none; }
.rail__h b{ font-size:15px; font-weight:800; }
.rail__h .dir{ margin-left:auto; font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.rail__routes{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; border:1.5px solid var(--line); padding:5px 9px; color:var(--muted); }
.rail.o .sw{ background:var(--orange); } .rail.y .sw{ background:var(--yellow); } .rail.b .sw{ background:var(--blue); }

/* ============================================================
   KICKSTARTER block
   ============================================================ */
.kick{ background:var(--accent); color:var(--ink); border-block:2px solid var(--ink); }
.kick__in{ max-width:var(--maxw); margin-inline:auto; padding:clamp(56px,7vw,104px) var(--pad);
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(36px,5vw,72px); align-items:center; }
.kick .sec-tag{ color:color-mix(in oklab,var(--ink),transparent 35%); }
.kick h2{ font-size:clamp(36px,6vw,76px); font-weight:900; font-stretch:125%; line-height:0.96; letter-spacing:-0.02em; }
.kick p{ margin-top:22px; max-width:52ch; font-size:clamp(16px,1.6vw,19px); line-height:1.5; color:color-mix(in oklab,var(--ink),transparent 12%); }
.kick__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.kick .btn--solid{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.kick .btn--solid:hover{ box-shadow:6px 6px 0 0 var(--paper); transform:translate(-2px,-2px); }
.kick .btn--ghost{ color:var(--ink); border-color:var(--ink); }
.kick .btn--ghost:hover{ background:var(--ink); color:var(--paper); }

.price{ border:2px solid var(--ink); background:color-mix(in oklab,var(--accent),white 8%); }
.price__row{ display:flex; align-items:baseline; gap:14px; padding:20px 24px; border-bottom:2px solid var(--ink); }
.price__row:last-child{ border-bottom:0; }
.price__row .lbl{ font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.14em; }
.price__row .amt{ margin-left:auto; font-size:34px; font-weight:900; font-stretch:115%; line-height:1; }
.price__row.is-best{ background:var(--ink); color:var(--paper); }
.price__row.is-best .amt{ color:var(--accent); }
.price__row small{ display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; opacity:.7; margin-top:6px; }
.price__row .amt s{ font-size:18px; opacity:.5; font-weight:700; }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.shot{ border:2px solid var(--line-paper); background:var(--paper-2); position:relative; overflow:hidden; }
.shot img{ width:100%; height:100%; object-fit:cover; }
.shot.big{ grid-column:span 7; aspect-ratio:16/11; }
.shot.tall{ grid-column:span 5; aspect-ratio:auto; }
.shot.half{ grid-column:span 6; aspect-ratio:16/10; }
.shot__cap{
  position:absolute; left:0; bottom:0; right:0;
  padding:14px 16px; background:linear-gradient(transparent, color-mix(in oklab,var(--ink),transparent 6%));
  color:var(--paper);
}
.shot__cap b{ display:block; font-size:15px; font-weight:800; }
.shot__cap span{ font-family:var(--f-mono); font-size:11px; letter-spacing:0.06em; color:color-mix(in oklab,var(--paper),transparent 28%); margin-top:4px; display:block; line-height:1.45; }

/* ---- features grid --------------------------------------- */
.feat{ display:grid; grid-template-columns:repeat(4,1fr); border:2px solid var(--line-paper); }
.feat > div{ padding:clamp(26px,2.6vw,36px); border-right:2px solid var(--line-paper); }
.feat > div:last-child{ border-right:0; }
.feat h3{ font-size:22px; font-weight:800; font-stretch:110%; letter-spacing:0.02em; text-transform:uppercase; margin-bottom:14px; }
.feat p{ color:var(--muted-d); font-size:15px; line-height:1.55; }
.feat .fnum{ font-family:var(--f-mono); font-size:11px; color:var(--muted-d); letter-spacing:0.14em; display:block; margin-bottom:18px; }

/* ============================================================
   SPEC sheet
   ============================================================ */
.spec{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:2px solid var(--line); }
.spec__row{ display:flex; align-items:center; gap:16px; padding:16px clamp(18px,2.2vw,26px); border-bottom:2px solid var(--line); }
.spec__col:nth-child(1) .spec__row{ border-right:2px solid var(--line); }
.spec__row .k{ font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.12em; color:var(--muted); }
.spec__row .v{ margin-left:auto; font-weight:800; font-size:17px; font-stretch:110%; }
.spec__row .v.hl{ color:var(--accent); }

/* ============================================================
   WEB EDITOR preview
   ============================================================ */
.editor{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(36px,5vw,64px); align-items:center; }
.editor-preview{
  --preview-green:oklch(0.74 0.17 150);
  border:2px solid var(--line);
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
}
.editor-preview__topbar{
  min-height:60px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 18px;
  background:var(--ink-2);
  border-bottom:2px solid var(--line);
}
.editor-preview__brand{ display:flex; align-items:center; gap:11px; min-width:0; }
.editor-preview__brand .brand__mark{ width:28px; height:24px; flex:none; fill:var(--paper); }
.editor-preview__brand span{ font-weight:900; font-stretch:125%; letter-spacing:0.04em; font-size:16px; line-height:1; }
.editor-preview__brand small{ display:block; font-family:var(--f-mono); font-weight:400; font-size:9.5px; letter-spacing:0.2em; color:var(--muted); margin-top:4px; }
.editor-preview__device{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-left:18px;
  border-left:2px solid var(--line);
}
.editor-preview__device span,
.editor-preview__project span{
  font-family:var(--f-mono);
  font-size:9.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.editor-preview__device b{ font-family:var(--f-mono); font-size:12px; letter-spacing:0.06em; color:var(--paper); }
.editor-preview__connection{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:2px solid color-mix(in oklab, var(--preview-green), transparent 40%);
  padding:9px 14px;
  color:var(--preview-green);
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  white-space:nowrap;
}
.editor-preview__connection i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--preview-green);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--preview-green), transparent 78%);
}
.editor-preview__connection b{ color:var(--preview-green); }
.editor-preview__body{ display:grid; grid-template-columns:minmax(190px,248px) minmax(0,1fr); min-height:420px; }
.editor-preview__sidebar{
  background:var(--ink-2);
  border-right:2px solid var(--line);
  display:flex;
  flex-direction:column;
  min-width:0;
}
.editor-preview__project{ padding:14px 16px 16px; border-bottom:2px solid var(--line); }
.editor-preview__project strong{
  display:inline-block;
  margin-top:8px;
  font-size:22px;
  font-weight:900;
  font-stretch:120%;
  letter-spacing:-0.01em;
}
.editor-preview__project em{
  margin-left:8px;
  color:var(--preview-green);
  font-family:var(--f-mono);
  font-size:11px;
  font-style:normal;
  letter-spacing:0.08em;
}
.editor-preview__nav{ display:flex; flex-direction:column; gap:3px; padding:12px; flex:1; }
.editor-preview__nav span{
  display:flex;
  align-items:center;
  gap:13px;
  padding:11px 12px;
  border:2px solid transparent;
  color:var(--muted);
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.13em;
  text-transform:uppercase;
}
.editor-preview__nav b{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border:1.5px solid currentColor;
  font-size:10px;
  letter-spacing:0.06em;
  flex:none;
}
.editor-preview__nav .is-on{ color:var(--paper); border-color:var(--line); background:var(--ink-3); }
.editor-preview__nav .is-on b{ color:var(--ink); background:var(--preview-green); border-color:var(--preview-green); }
.editor-preview__save{
  margin:12px;
  height:38px;
  display:grid;
  place-items:center;
  border:2px solid var(--preview-green);
  background:var(--preview-green);
  color:var(--ink);
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.editor-preview__main{
  min-width:0;
  padding:26px clamp(18px,2.6vw,34px) 30px;
  background:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px),
    var(--ink);
  background-size:54px 54px;
  background-position:-1px -1px;
}
.editor-preview__head{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:2px solid var(--line);
}
.editor-preview__head span{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
}
.editor-preview__head span::before{ content:""; width:26px; height:2px; background:var(--preview-green); }
.editor-preview__head h3{ font-size:clamp(30px,3vw,42px); font-weight:900; font-stretch:122%; line-height:0.95; letter-spacing:-0.02em; }
.editor-preview__head p{ color:var(--muted); font-size:14px; line-height:1.5; max-width:56ch; }
.editor-preview__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.editor-preview__card{ border:2px solid var(--line); background:var(--ink-2); min-width:0; }
.editor-preview__cardbar{
  padding:13px 16px;
  border-bottom:2px solid var(--line);
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
.editor-preview__card label{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:14px 16px 0;
  color:var(--muted);
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
.editor-preview__card label span{
  min-height:38px;
  display:flex;
  align-items:center;
  border:2px solid var(--line);
  background:var(--ink);
  padding:0 12px;
  color:var(--paper);
  font-size:13px;
  letter-spacing:0.04em;
}
.editor-preview__buttons{ display:flex; flex-wrap:wrap; gap:10px; padding:16px; }
.editor-preview__buttons span{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--line);
  background:var(--ink-3);
  padding:0 14px;
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--paper);
}
.editor-preview__tracks{ display:grid; grid-template-columns:1fr; border-top:0; }
.editor-preview__tracks span{
  min-height:48px;
  display:grid;
  grid-template-columns:46px 1fr;
  align-items:center;
  gap:12px;
  padding:8px 14px;
  border-bottom:2px solid var(--line);
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.06em;
}
.editor-preview__tracks span:last-child{ border-bottom:0; }
.editor-preview__tracks b{
  height:32px;
  display:grid;
  place-items:center;
  background:var(--preview-green);
  border:2px solid var(--preview-green);
  color:var(--ink);
}
.editor-preview__playheads{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:18px; }
.editor-preview__playheads div{ border:2px solid var(--line); background:var(--ink-2); padding:14px; min-width:0; }
.editor-preview__playheads i{ width:16px; height:16px; display:block; margin-bottom:12px; }
.editor-preview__playheads .o{ background:var(--orange); }
.editor-preview__playheads .y{ background:var(--yellow); }
.editor-preview__playheads .b{ background:var(--blue); }
.editor-preview__playheads b{ display:block; font-size:17px; font-weight:900; font-stretch:115%; letter-spacing:0.01em; }
.editor-preview__playheads span{ display:block; margin-top:5px; color:var(--muted); font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; }
.editor-preview__console{
  height:42px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 16px;
  border-top:2px solid var(--line);
  background:var(--ink);
  color:var(--muted);
}
.editor-preview__console span{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
.editor-preview__console em{ font-family:var(--f-mono); font-size:10px; font-style:normal; color:var(--muted-d); }
.editor-preview__console b{ margin-left:auto; color:var(--muted); font-size:13px; line-height:1; }

/* ============================================================
   CLOSING CTA + FOOTER
   ============================================================ */
.cta{ background:var(--ink); border-top:2px solid var(--line); text-align:center; }
.cta__in{ max-width:var(--maxw); margin-inline:auto; padding:clamp(72px,10vw,150px) var(--pad); }
.cta h2{ font-size:clamp(44px,9vw,140px); font-weight:900; font-stretch:125%; line-height:0.88; letter-spacing:-0.03em; }
.cta h2 .dot{ color:var(--accent); }
.cta p{ color:var(--muted); max-width:48ch; margin:26px auto 0; font-size:clamp(16px,1.6vw,19px); line-height:1.5; }
.cta__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:40px; }

footer{ border-top:2px solid var(--line); background:var(--ink-2); }
footer .wrap{ display:flex; flex-wrap:wrap; gap:20px 40px; align-items:center; padding-block:30px; }
footer .brand{ font-size:15px; }
footer nav{ display:flex; gap:24px; flex-wrap:wrap; margin-left:auto; }
footer nav a{ font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.14em; color:var(--muted); }
footer nav a:hover{ color:var(--paper); }
footer .copy{ width:100%; font-family:var(--f-mono); font-size:11px; color:var(--muted-d); letter-spacing:0.08em; padding-top:8px; border-top:2px solid var(--line); margin-top:6px; }

/* ---- image placeholder fallback -------------------------- */
.ph{
  background:
    repeating-linear-gradient(45deg, var(--ink-3) 0 11px, transparent 11px 22px),
    var(--ink-2);
  position:relative;
}
.band--paper .ph, .shot.ph{
  background:
    repeating-linear-gradient(45deg, var(--paper-2) 0 11px, transparent 11px 22px),
    var(--paper);
}
.ph::after{
  content:attr(data-ph); position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);
  text-align:center; padding:20px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1020px){
  .kick__in, .editor{ grid-template-columns:1fr; }
  .nav__links{ display:none; }
  .statband li{ min-width:50%; }
}
@media (max-width:780px){
  .snap-grid{ grid-template-columns:1fr; }
  .snap{ border-right:0; border-bottom:2px solid var(--line); }
  .snap:last-child{ border-bottom:0; }
  .seq__rails{ grid-template-columns:1fr; }
  .rail{ border-right:0; border-bottom:2px solid var(--line); }
  .rail:last-child{ border-bottom:0; }
  .spec{ grid-template-columns:1fr; }
  .spec__col:nth-child(1) .spec__row{ border-right:0; }
  .feat{ grid-template-columns:1fr 1fr; }
  .feat > div{ border-bottom:2px solid var(--line-paper); }
  .feat > div:nth-child(odd){ border-right:2px solid var(--line-paper); }
  .feat > div:nth-child(even){ border-right:0; }
  .gallery{ grid-template-columns:1fr; }
  .shot.big,.shot.tall,.shot.half{ grid-column:1/-1; aspect-ratio:16/10; }
  .editor-preview__topbar{ height:auto; flex-wrap:wrap; padding-block:12px; }
  .editor-preview__device{ display:none; }
  .editor-preview__connection{ margin-left:0; }
  .editor-preview__body{ grid-template-columns:1fr; min-height:0; }
  .editor-preview__sidebar{ display:none; }
  .editor-preview__grid,
  .editor-preview__playheads{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .feat{ grid-template-columns:1fr; }
  .feat > div{ border-right:0 !important; }
  .seq__grid{ grid-template-columns:repeat(8,1fr); }
  .hero__seq{ gap:4px; }
  .hero__legend{ display:none; }
  .statband ul{ grid-template-columns:repeat(2,1fr); }
  .statband li:nth-child(2){ border-right:0; padding-right:0; }
  .statband li:nth-child(3){ padding-left:0; }
  .statband li:nth-child(1),.statband li:nth-child(2){ border-bottom:2px solid var(--line); padding-bottom:18px; }
}

/* ============================================================
   HERO — light variant (off-white bg, black text)
   matches the off-white (--paper) used in the lower sections
   ============================================================ */
.hero{ background:var(--paper); color:var(--ink); border-bottom:2px solid var(--line-paper); }
.hero__seq i{ background:oklch(0.885 0.010 86); border-color:var(--line-paper); }
.hero__scrim{
  background:linear-gradient(180deg,
    color-mix(in oklab,var(--paper),transparent 8%) 0%,
    color-mix(in oklab,var(--paper),transparent 16%) 30%,
    color-mix(in oklab,var(--paper),transparent 16%) 58%,
    color-mix(in oklab,var(--paper),transparent 86%) 92%);
}
/* playhead markers: drop the screen-glow (invisible on light) → solid lines */
.hero__ph{ mix-blend-mode:normal; }
.hero__ph::before{ box-shadow:none; opacity:0.92; }
.hero__legend i{
  color:var(--muted-d); border-color:var(--line-paper);
  background:color-mix(in oklab,var(--paper),transparent 8%);
}
.hero__copy .kicker{ color:var(--muted-d); }
.hero__title{ color:var(--ink); }
.hero__sub{ color:oklch(0.40 0.012 80); }
.hero .btn--ghost{ color:var(--ink); border-color:var(--ink); }
.hero .btn--ghost:hover{ background:var(--ink); color:var(--paper); }
/* Kickstarter-live status bar inside the hero */
.hero .status{ position:relative; z-index:5; background:var(--accent); border-top:2px solid var(--ink); color:var(--ink); }
.hero .status b{ color:var(--ink); }
.hero .status .sep{ color:color-mix(in oklab,var(--ink),transparent 50%); }
.hero .status .right{ color:color-mix(in oklab,var(--ink),transparent 18%); }
/* stat strip — carry the light top through */
.statband{ background:var(--paper); color:var(--ink); border-bottom:2px solid var(--line-paper); }
.statband li{ border-right-color:var(--line-paper); }
.statband span{ color:var(--muted-d); }
@media (max-width:520px){
  .statband li:nth-child(1),.statband li:nth-child(2){ border-bottom-color:var(--line-paper); }
}