/* ============ tokens — deliberate dark instrument palette ============ */
  :root{
    --ground:   #0B0E12;   /* near-black, faint blue bias */
    --surface:  #12171E;
    --surface-2:#171F29;
    --line:     #253039;   /* hairline / technical rule */
    --line-hi:  #37454F;
    --ink:      #E6EBF1;    /* cool white */
    --ink-dim:  #8B98A7;
    --ink-faint:#5A6774;
    --accent:   #E8B24C;    /* signal amber — radio-dial lineage, used once per view */
    --accent-hi:#F2C877;
    --cool:     #5FAAB8;    /* desaturated teal — secondary technical call-outs only */
    --live:     #7FC8A6;    /* status: in development */

    --maxw: 1140px;
    --gutter: clamp(18px, 5vw, 52px);
    --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px;

    --f-display:"IBM Plex Sans Condensed","Arial Narrow",system-ui,sans-serif;
    --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

    color-scheme: dark;
  }

  *,*::before,*::after{ box-sizing:border-box; }

  body{
    margin:0;
    background:var(--ground);
    color:var(--ink);
    font-family:var(--f-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }

  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

  a{ color:inherit; }
  img{ max-width:100%; }

  :focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
    border-radius:1px;
  }

  .wrap{
    max-width:var(--maxw);
    margin-inline:auto;
    padding-inline:var(--gutter);
  }

  /* ============ type scale ============ */
  .eyebrow{
    font-family:var(--f-mono);
    font-size:.72rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin:0;
  }
  h1,h2,h3{ font-family:var(--f-display); font-weight:700; text-wrap:balance; margin:0; }
  h1{
    font-size:clamp(2.5rem, 7vw, 4.15rem);
    line-height:1.0;
    letter-spacing:-.02em;
  }
  h2{
    font-size:clamp(1.6rem, 3.6vw, 2.25rem);
    line-height:1.08;
    letter-spacing:-.01em;
  }
  h3{ font-size:1.06rem; font-weight:600; letter-spacing:0; }
  .lead{
    font-size:clamp(1.04rem, 1.9vw, 1.22rem);
    color:var(--ink-dim);
    max-width:60ch;
    margin:0;
  }
  .mono{ font-family:var(--f-mono); }

  /* ============ top bar ============ */
  .bar{
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
    padding:0 var(--gutter);
    height:58px;
    background:color-mix(in srgb, var(--ground) 84%, transparent);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .brand{
    display:flex; align-items:baseline; gap:.55rem;
    text-decoration:none;
    white-space:nowrap;
  }
  .brand__name{
    font-family:var(--f-mono); font-weight:500;
    font-size:1.05rem; letter-spacing:.02em; color:var(--ink);
  }
  .brand__dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--accent);
    align-self:center;
    box-shadow:0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
  }
  .brand__sub{
    font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-faint);
  }
  .bar__right{ display:flex; align-items:center; gap:var(--s2); }

  select#lang{
    appearance:none;
    background:transparent;
    color:var(--ink-dim);
    border:1px solid var(--line);
    border-radius:2px;
    font-family:var(--f-mono);
    font-size:.74rem;
    letter-spacing:.08em;
    padding:7px 26px 7px 10px;
    cursor:pointer;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
      linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
    background-position:
      calc(100% - 14px) 50%,
      calc(100% - 9px) 50%;
    background-size:5px 5px, 5px 5px;
    background-repeat:no-repeat;
  }
  select#lang:hover{ color:var(--ink); border-color:var(--line-hi); }
  select#lang option{ background:var(--surface); color:var(--ink); }

  /* ============ buttons ============ */
  .btn{
    display:inline-flex; align-items:center; gap:.5rem;
    font-family:var(--f-mono);
    font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
    text-decoration:none;
    padding:11px 20px;
    border-radius:2px;
    border:1px solid transparent;
    transition:background-color .15s ease, border-color .15s ease, color .15s ease;
  }
  .btn--store{
    background:var(--accent); color:#0B0E12; font-weight:500;
    padding:9px 16px;
  }
  .btn--store:hover{ background:var(--accent-hi); }
  .btn--primary{
    background:var(--accent); color:#0B0E12; font-weight:500;
    padding:14px 24px; font-size:.82rem;
  }
  .btn--primary:hover{ background:var(--accent-hi); }
  .btn--ghost{
    background:transparent; color:var(--ink); border-color:var(--line-hi);
    padding:14px 22px; font-size:.82rem;
  }
  .btn--ghost:hover{ border-color:var(--ink-dim); background:var(--surface); }

  /* ============ section frame ============ */
  .section{
    padding-block:clamp(64px, 12vh, 116px);
    border-top:1px solid var(--line);
  }
  .section--hero{ border-top:0; padding-block:clamp(52px, 9vh, 92px) clamp(64px,12vh,110px); }
  .section__head{ display:flex; flex-direction:column; gap:var(--s2); margin-bottom:var(--s5); }

  /* ============ hero ============ */
  .hero__grid{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:clamp(var(--s4), 6vw, var(--s6));
    align-items:center;
  }
  .hero__copy{ display:flex; flex-direction:column; gap:var(--s3); }
  .hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s2); }
  .hero__visual{
    position:relative;
    display:grid; place-items:center;
    min-height:340px;
  }
  .hero__wave{
    position:absolute; inset:0;
    width:100%; height:100%;
    opacity:.55;
    pointer-events:none;
    -webkit-mask-image:radial-gradient(120% 90% at 60% 50%, #000 30%, transparent 78%);
    mask-image:radial-gradient(120% 90% at 60% 50%, #000 30%, transparent 78%);
  }
  .hero__device{ position:relative; width:min(230px, 62vw); height:auto; }

  .device-line{ fill:none; stroke:var(--ink-dim); stroke-width:2; }
  .device-fill{ fill:var(--surface-2); stroke:var(--ink-dim); stroke-width:2; }
  .device-dim{ fill:none; stroke:var(--line-hi); stroke-width:1.5; }
  .device-led{ fill:var(--accent); }
  .device-hole{ fill:var(--ink-faint); }

  /* ============ stage / exploded assembly ============ */
  .stage__inner{ display:flex; flex-direction:column; gap:var(--s4); }
  .assembly-wrap{
    position:relative;
    display:grid; place-items:center;
  }
  .assembly{
    width:min(680px, 92vw);
    height:auto;
    overflow:visible;
  }
  #asm{ transition:none; }
  .part{ transform-box:fill-box; transform-origin:center; }
  .stage:not(.is-anim) .part{ transform:translate(var(--ex-x,0px), var(--ex-y,0px)); }
  .part-line{ fill:none; stroke:var(--ink-dim); stroke-width:2; }
  .part-fill{ fill:var(--surface); stroke:var(--ink-dim); stroke-width:2; }
  .part-soft{ fill:var(--surface-2); stroke:var(--line-hi); stroke-width:1.5; }
  .part-hole{ fill:var(--ink-faint); }
  .part-led{ fill:var(--accent); }
  .trace{ fill:none; stroke:var(--accent); stroke-width:1.4; opacity:.5; }
  #chip rect.chip-body{ fill:var(--surface-2); stroke:var(--cool); stroke-width:2; }
  .chip-pin{ stroke:var(--cool); stroke-width:1.6; }
  #chipGlow{ fill:var(--accent); opacity:0; }
  .assembly.is-zoomed #chip rect.chip-body{ stroke:var(--accent); }
  .assembly.is-zoomed .chip-pin{ stroke:var(--accent); }

  .lbl text{
    font-family:var(--f-mono);
    font-size:12px;
    letter-spacing:.04em;
    fill:var(--ink-dim);
  }
  .lbl line{ stroke:var(--line-hi); stroke-width:1; }
  .lbl--key text{ fill:var(--accent); }
  .lbl--key line{ stroke:var(--accent); opacity:.6; }

  /* captions */
  .caps{ position:relative; min-height:132px; }
  .cap{
    display:flex; flex-direction:column; gap:.4rem;
    max-width:44ch;
  }
  .cap__k{
    font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em;
    text-transform:uppercase; color:var(--ink-faint);
  }
  .cap__t{ font-family:var(--f-display); font-weight:700; font-size:1.5rem; color:var(--ink); }
  .cap p{ margin:0; color:var(--ink-dim); }
  .cap strong{ color:var(--accent); font-weight:500; }

  /* animated mode: sticky scroll stage */
  .stage.is-anim{
    padding-block:0;
    height:340vh;
    position:relative;
  }
  .stage.is-anim .stage__inner{
    position:sticky; top:0;
    min-height:100vh;
    justify-content:center;
    padding-block:72px;
    overflow:hidden;
  }
  .stage.is-anim .lbl{ opacity:0; }
  .stage.is-anim .caps{
    position:absolute;
    left:var(--gutter); right:var(--gutter);
    bottom:9vh;
  }
  .stage.is-anim .cap{
    position:absolute; left:0; bottom:0;
    opacity:0; transform:translateY(8px);
    transition:opacity .4s ease, transform .4s ease;
  }
  .stage.is-anim .cap.is-on{ opacity:1; transform:none; }
  .scroll-hint{
    position:absolute; left:50%; bottom:5vh; transform:translateX(-50%);
    font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em;
    text-transform:uppercase; color:var(--ink-faint);
    transition:opacity .3s ease;
  }
  .stage:not(.is-anim) .scroll-hint{ display:none; }

  /* static mode: stacked caption sequence */
  .stage:not(.is-anim) .caps{
    display:flex; flex-direction:column; gap:var(--s3);
    border-top:1px solid var(--line);
    padding-top:var(--s3);
  }
  .stage:not(.is-anim) .cap{ position:static; }

  /* ============ media slot ============ */
  .media__frame{
    position:relative;
    border:1px solid var(--line);
    border-radius:3px;
    background:
      repeating-linear-gradient(45deg, transparent 0 11px, color-mix(in srgb,var(--surface) 60%, transparent) 11px 12px),
      var(--ground);
    aspect-ratio:16/7;
    max-width:100%;
    display:grid; place-items:center;
  }
  .media__play{
    width:0; height:0;
    border-top:13px solid transparent;
    border-bottom:13px solid transparent;
    border-left:20px solid var(--ink-dim);
    margin-left:6px;
  }
  .media__cap{
    position:absolute; left:16px; bottom:12px;
    font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
    color:var(--ink-faint);
  }

  /* ============ products ============ */
  .cards{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:var(--s3);
  }
  .card{
    display:flex; flex-direction:column; gap:var(--s2);
    padding:var(--s3);
    border:1px solid var(--line);
    border-radius:3px;
    background:var(--surface);
  }
  .card--lead{ border-color:var(--line-hi); }
  .card__top{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2); }
  .card__name{ font-family:var(--f-mono); font-size:1.02rem; color:var(--ink); }
  .card__form{ font-family:var(--f-mono); font-size:.74rem; color:var(--ink-faint); }
  .card__use{ color:var(--ink-dim); font-size:.95rem; margin:0; flex:1; }
  .chip-status{
    align-self:flex-start;
    font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em;
    text-transform:uppercase;
    padding:4px 9px; border-radius:2px;
    border:1px solid var(--line-hi);
    color:var(--ink-dim);
  }
  .chip-status[data-tone="dev"]{ color:var(--live); border-color:color-mix(in srgb,var(--live) 45%, var(--line)); }

  /* ============ specs ============ */
  .specs{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:0 var(--s5);
  }
  .spec-row{
    display:grid;
    grid-template-columns:9.5rem 1fr;
    gap:var(--s2);
    padding:14px 0;
    border-bottom:1px solid var(--line);
    font-family:var(--f-mono);
    font-size:.86rem;
  }
  .spec-row dt{ color:var(--ink-faint); letter-spacing:.06em; text-transform:uppercase; font-size:.74rem; align-self:center; }
  .spec-row dd{ margin:0; color:var(--ink); }

  /* ============ roadmap ============ */
  .road{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--s3);
  }
  .road__item{
    display:flex; flex-direction:column; gap:.5rem;
    padding:var(--s3);
    border:1px dashed var(--line-hi);
    border-radius:3px;
  }
  .road__tag{ font-family:var(--f-mono); font-size:.95rem; color:var(--cool); letter-spacing:.04em; }
  .road__item p{ margin:0; color:var(--ink-dim); font-size:.95rem; }

  /* ============ buy ============ */
  .buy__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:var(--s4);
    align-items:center;
  }

  /* ============ footer ============ */
  .foot{
    border-top:1px solid var(--line);
    padding-block:var(--s5);
    display:flex; flex-direction:column; gap:var(--s3);
  }
  .foot__brand{ font-family:var(--f-mono); font-size:.8rem; color:var(--ink-dim); letter-spacing:.03em; }
  .foot__row{ display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; }
  .foot__row a{
    font-family:var(--f-mono); font-size:.76rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink-faint); text-decoration:none;
  }
  .foot__row a:hover{ color:var(--ink); }
  .foot__rights{ font-family:var(--f-mono); font-size:.72rem; color:var(--ink-faint); }

  /* ============ responsive ============ */
  @media (max-width: 900px){
    .hero__grid{ grid-template-columns:1fr; gap:var(--s5); }
    .hero__visual{ order:-1; min-height:300px; }
    .specs{ grid-template-columns:1fr; gap:0; }
    .cards{ grid-template-columns:1fr; }
    .road{ grid-template-columns:1fr; }
    .buy__grid{ grid-template-columns:1fr; gap:var(--s3); align-items:start; }
  }
  @media (max-width: 560px){
    .brand__sub{ display:none; }
    .bar{ gap:var(--s2); }
    .spec-row{ grid-template-columns:1fr; gap:2px; }
    .spec-row dd{ font-size:.92rem; }
  }

  @media (prefers-reduced-motion: reduce){
    .cap{ transition:none !important; }
  }