:root{
    --sig:#37B34A;
    --steel:#6D6F73;
    --ink:#111111;
    --accent:#2563EB;
    --coal:#1F1F1F;
    --mist:#E5E5E5;

    /* derived from the brand green — no invented hues */
    --sig-lift: color-mix(in oklab, var(--sig) 72%, #FFFFFF);
    --sig-deep: color-mix(in oklab, var(--sig) 62%, var(--ink));
    --sig-glow: color-mix(in oklab, var(--sig) 26%, transparent);

    /* Brand green is only 2.9:1 on white. Darkened toward brand black for use
       as an accent colour ON light surfaces (~6:1). Dark surfaces use --sig. */
    --sig-ink: color-mix(in oklab, var(--sig) 74%, var(--ink));

    /* brand grey mixed toward brand mist for legible text on dark surfaces */
    --muted: color-mix(in oklab, var(--steel) 42%, var(--mist));  /* ~7.2:1 on #111 */
    --tag-ink: color-mix(in oklab, var(--steel) 68%, var(--mist)); /* ~5.2:1 on #111 */

    /* depth layering: base -> elevated -> floating */
    --surface-base:     #111111;
    --surface-elevated: #171717;
    --surface-floating: #1F1F1F;

    --hairline: rgba(229,229,229,.11);
    --hairline-strong: rgba(229,229,229,.2);

    /* spacing tokens */
    --gap-xs:.5rem; --gap-s:1rem; --gap-m:1.5rem; --gap-l:2.5rem; --gap-xl:4rem; --gap-2xl:7rem;

    --ease-spring: cubic-bezier(.16,1,.3,1);
    --ease-out:    cubic-bezier(.22,.61,.36,1);
  }

  *{ -webkit-font-smoothing:antialiased; }

  html{ scroll-behavior:smooth; }

  /* keep anchored sections clear of the fixed 76px header */
  section[id]{ scroll-margin-top:76px; }

  body{
    background:var(--surface-base);
    color:var(--mist);
    font-family:Inter, sans-serif;
    line-height:1.7;
    overflow-x:hidden;
  }

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

  h1,h2,h3,h4,.font-display{ font-family:"Space Grotesk", sans-serif; line-height:1.02; }
  h1,h2{ letter-spacing:-.035em; }
  h3{ letter-spacing:-.02em; line-height:1.12; }

  /* ── Eyebrow / instrument label ───────────────────────────── */
  .eyebrow{
    font-family:"Space Grotesk", sans-serif;
    font-weight:500;
    font-size:.6875rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--sig);
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    line-height:1;
  }
  .eyebrow::before{
    content:'';
    width:22px; height:1px;
    background:currentColor;
    opacity:.55;
    flex:none;
  }
  .eyebrow--muted{ color:var(--steel); }

  .tag{
    font-family:"IBM Plex Mono", monospace;
    font-size:.6875rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--tag-ink);
  }

  .num{ font-variant-numeric:tabular-nums; }

  /* ── Atmosphere: engineering grid, glow, grain ────────────── */
  .grid-field{
    position:absolute; inset:0;
    background-image:
      linear-gradient(to right, rgba(229,229,229,.038) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(229,229,229,.038) 1px, transparent 1px);
    background-size:72px 72px;
    -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
            mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
    pointer-events:none;
  }
  .grid-field--fine{ background-size:24px 24px; opacity:.5; }

  .glow{
    position:absolute;
    border-radius:9999px;
    filter:blur(90px);
    pointer-events:none;
  }

  .grain{
    position:fixed; inset:0;
    z-index:60;
    pointer-events:none;
    opacity:.4;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  }

  /* ── Registration-mark card (the signature motif) ─────────── */
  .panel{
    position:relative;
    background:var(--surface-elevated);
    border:1px solid var(--hairline);
    transition:border-color .5s var(--ease-out), background-color .5s var(--ease-out), transform .5s var(--ease-spring);
  }
  .panel::before,
  .panel::after{
    content:'';
    position:absolute;
    width:11px; height:11px;
    border:1px solid var(--sig);
    opacity:0;
    transition:opacity .45s var(--ease-out), transform .45s var(--ease-spring);
    pointer-events:none;
  }
  .panel::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; transform:translate(4px,4px); }
  .panel::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; transform:translate(-4px,-4px); }
  .panel:hover{
    background:var(--surface-floating);
    border-color:var(--hairline-strong);
    transform:translateY(-3px);
  }
  .panel:hover::before,
  .panel:hover::after{ opacity:1; transform:translate(0,0); }

  .panel--light{ background:#FFFFFF; border-color:rgba(17,17,17,.1); }
  .panel--light:hover{ background:#FFFFFF; border-color:rgba(17,17,17,.22); }

  /* ── Buttons ──────────────────────────────────────────────── */
  .btn{
    position:relative;
    display:inline-flex; align-items:center; gap:.6rem;
    font-family:"Space Grotesk", sans-serif;
    font-weight:600;
    font-size:.9375rem;
    letter-spacing:-.01em;
    padding:.9rem 1.6rem;
    border:1px solid transparent;
    transition:background-color .35s var(--ease-out), color .35s var(--ease-out),
               border-color .35s var(--ease-out), transform .35s var(--ease-spring),
               box-shadow .35s var(--ease-out);
    cursor:pointer;
  }
  .btn:focus-visible{ outline:2px solid var(--sig-lift); outline-offset:3px; }
  .btn:active{ transform:translateY(1px) scale(.99); }

  .btn-primary{
    background:var(--sig);
    color:var(--ink);
    box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 12px 30px -12px var(--sig-glow);
  }
  .btn-primary:hover{
    background:var(--sig-lift);
    transform:translateY(-2px);
    box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 20px 42px -14px var(--sig-glow);
  }

  .btn-ghost{
    color:var(--mist);
    border-color:var(--hairline-strong);
    background:transparent;
  }
  .btn-ghost:hover{
    border-color:var(--sig);
    color:#FFFFFF;
    transform:translateY(-2px);
    background:rgba(55,179,74,.07);
  }

  .btn-dark{
    background:var(--ink); color:#FFFFFF;
  }
  .btn-dark:hover{ background:var(--coal); transform:translateY(-2px); }

  .btn .arrow{ transition:transform .4s var(--ease-spring); }
  .btn:hover .arrow{ transform:translateX(4px); }

  /* ── Nav ──────────────────────────────────────────────────── */
  .nav-link{
    position:relative;
    font-size:.875rem;
    color:var(--muted);
    font-weight:500;
    padding:.4rem 0;
    transition:color .3s var(--ease-out);
  }
  .nav-link::after{
    content:'';
    position:absolute; left:0; bottom:0;
    height:1px; width:100%;
    background:var(--sig);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .45s var(--ease-spring);
  }
  .nav-link:hover{ color:#FFFFFF; }
  .nav-link:hover::after{ transform:scaleX(1); }
  .nav-link:focus-visible{ outline:2px solid var(--sig); outline-offset:4px; color:#fff; }

  #siteNav{
    transition:background-color .5s var(--ease-out), border-color .5s var(--ease-out),
               backdrop-filter .5s var(--ease-out);
  }
  #siteNav.is-stuck,
  #siteNav.menu-open{
    background:rgba(17,17,17,.86);
    backdrop-filter:blur(16px) saturate(1.2);
    border-bottom-color:var(--hairline);
  }

  /* ── Mobile menu ──────────────────────────────────────────── */
  .burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px;
    border:1px solid var(--hairline-strong);
    align-items:center;
    transition:border-color .35s var(--ease-out), background-color .35s var(--ease-out);
  }
  .burger:hover{ border-color:var(--sig); background:rgba(55,179,74,.07); }
  .burger:focus-visible{ outline:2px solid var(--sig); outline-offset:3px; }
  .burger span{
    display:block; width:17px; height:1.5px; background:var(--mist);
    transition:transform .4s var(--ease-spring), opacity .25s var(--ease-out);
  }
  .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  #mobileMenu{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .55s var(--ease-spring);
    border-top:1px solid transparent;
  }
  #mobileMenu > div{ overflow:hidden; }
  #mobileMenu.open{ grid-template-rows:1fr; border-top-color:var(--hairline); }

  .m-link{
    display:flex; align-items:center; justify-content:space-between;
    padding:1.05rem .25rem;
    font-family:"Space Grotesk", sans-serif;
    font-size:1.0625rem; font-weight:500;
    color:var(--mist);
    border-bottom:1px solid var(--hairline);
    transition:color .3s var(--ease-out), padding-left .35s var(--ease-spring);
  }
  .m-link:hover,.m-link:focus-visible{ color:var(--sig); padding-left:.75rem; outline:none; }
  .m-link span{ font-family:"IBM Plex Mono", monospace; font-size:.6875rem; color:var(--tag-ink); }

  /* Brand lockup — the supplied mark is a light-background asset,
     lifted here so the grey reads on the dark surfaces. */
  .brandmark{
    filter:brightness(1.62) contrast(.94) saturate(.9);
    transition:filter .4s var(--ease-out), transform .4s var(--ease-spring);
  }
  a:hover > .brandmark{ filter:brightness(1.85) contrast(.94) saturate(1); }

  /* ── Live indicator ───────────────────────────────────────── */
  .live-dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--sig);
    position:relative; flex:none;
  }
  .live-dot::after{
    content:'';
    position:absolute; inset:-4px;
    border-radius:50%;
    border:1px solid var(--sig);
    opacity:0;
    animation:ping 2.4s var(--ease-out) infinite;
  }
  @keyframes ping{
    0%{ transform:scale(.6); opacity:.9; }
    70%{ transform:scale(1.9); opacity:0; }
    100%{ opacity:0; }
  }

  /* ── Hero telemetry instrument ────────────────────────────── */
  .trace{
    stroke-dasharray:2400;
    stroke-dashoffset:2400;
    animation:draw 3.4s var(--ease-out) .5s forwards;
  }
  .trace--alt{ animation-duration:4s; animation-delay:.9s; }
  @keyframes draw{ to{ stroke-dashoffset:0; } }

  .trace-fill{ opacity:0; animation:fadeIn 1.6s var(--ease-out) 2.4s forwards; }
  @keyframes fadeIn{ to{ opacity:1; } }

  .scanline{
    position:absolute; top:0; bottom:0; width:1px;
    background:linear-gradient(to bottom, transparent, var(--sig), transparent);
    opacity:.5;
    animation:scan 7s linear 3.6s infinite;
  }
  @keyframes scan{
    0%{ transform:translateX(0); opacity:0; }
    8%{ opacity:.55; }
    92%{ opacity:.55; }
    100%{ transform:translateX(var(--scan-w,560px)); opacity:0; }
  }

  .anomaly{ opacity:0; animation:popIn .8s var(--ease-spring) 3.5s forwards; }
  @keyframes popIn{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }

  /* ── Protocol marquee ─────────────────────────────────────── */
  .marquee{
    display:flex; width:max-content;
    animation:slide 44s linear infinite;
  }
  .marquee-wrap:hover .marquee{ animation-play-state:paused; }
  @keyframes slide{ to{ transform:translateX(-50%); } }

  /* ── Pipeline diagram ─────────────────────────────────────── */
  .flow-dot{
    offset-path:path("M 40 60 H 940");
    animation:flow 4.2s linear infinite;
  }
  @keyframes flow{ from{ offset-distance:0%; } to{ offset-distance:100%; } }

  .dash-move{
    stroke-dasharray:6 8;
    animation:dashmove 1.6s linear infinite;
  }
  @keyframes dashmove{ to{ stroke-dashoffset:-28; } }

  /* ── Reveal on scroll ─────────────────────────────────────── */
  .reveal{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .9s var(--ease-out), transform .9s var(--ease-spring);
  }
  .reveal.in{ opacity:1; transform:none; }

  /* ── Dashboard mock (LARA) ────────────────────────────────── */
  .bar{
    transform-origin:bottom;
    transform:scaleY(0);
    transition:transform 1.1s var(--ease-spring);
  }
  .in .bar{ transform:scaleY(1); }

  .donut-ring{
    stroke-dasharray:1 999;
    transition:stroke-dasharray 1.6s var(--ease-out) .3s;
  }
  .in .donut-ring{ stroke-dasharray:213 302; }

  /* ── Misc ─────────────────────────────────────────────────── */
  .rule{ height:1px; background:var(--hairline); border:0; }
  .rule-light{ height:1px; background:rgba(17,17,17,.12); border:0; }

  .link-underline{
    background-image:linear-gradient(currentColor,currentColor);
    background-size:0% 1px;
    background-position:0 100%;
    background-repeat:no-repeat;
    transition:background-size .45s var(--ease-spring);
  }
  .link-underline:hover{ background-size:100% 1px; }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
      scroll-behavior:auto !important;
    }
    .reveal{ opacity:1; transform:none; }
    .trace{ stroke-dashoffset:0; }
    .trace-fill,.anomaly{ opacity:1; }
  }