:root{
    /* Ink & Signal palette — deep instrument navy, amber-out / cyan-in */
    --ink:#080E1A;
    --ink-2:#0D1626;
    --porcelain:#EDF1F7;
    --mute:#8A99B0;
    --emit:#F0B24A;      /* warm amber — signals going OUT (primary accent, CTAs) */
    --emit-2:#F7C976;
    --return:#46D6CE;    /* cool cyan — intelligence coming BACK (secondary accent) */
    --return-2:#7BE9E2;

    /* semantic surfaces */
    --bg:var(--ink);
    --bg-2:var(--ink-2);
    --panel:#0F1B30;
    --panel-2:#142440;
    /* boundaries created by light, not hard lines — kept low-contrast on purpose */
    --line:rgba(138,153,176,.12);
    --line-2:rgba(138,153,176,.20);
    --text:var(--porcelain);
    --muted:var(--mute);
    --muted-2:#66768F;

    /* back-compat aliases (existing rules recolor automatically) */
    --green:var(--emit);
    --green-2:var(--return);
    --green-dim:rgba(240,178,74,.14);
    --green-soft:rgba(240,178,74,.32);

    --display:"Space Grotesk",sans-serif;
    --body:"IBM Plex Sans",sans-serif;
    --mono:"IBM Plex Mono",monospace;

    --gut:clamp(20px,5vw,76px);
    --maxw:1240px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  html{background:var(--bg)}

  /* ---- GLOBAL ARTWORK BACKGROUND ---- */
  body::before{
    content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:url("bg-artwork.jpg") no-repeat 52% 44%;
    background-size:140vw auto;
    opacity:.55;
    -webkit-mask-image:radial-gradient(ellipse 82% 78% at 52% 44%,#000 12%,rgba(0,0,0,.4) 40%,transparent 68%);
    mask-image:radial-gradient(ellipse 82% 78% at 52% 44%,#000 12%,rgba(0,0,0,.4) 40%,transparent 68%);
  }
  body::after{
    content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(ellipse 100% 80% at 50% 40%,transparent 40%,rgba(5,9,17,.55) 100%);
  }
  /* ensure all content layers above the fixed artwork */
  main{position:relative;z-index:1}
  footer{position:relative;z-index:1}
  body{
    position:relative;z-index:0;background:transparent;color:var(--text);font-family:var(--body);
    line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--green);color:#0A1220}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);position:relative}

  .mono{font-family:var(--mono)}
  .label{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
  .green{color:var(--green)}

  /* ---------- nav ---------- */
  header.nav{position:sticky;top:0;z-index:40;
    background:rgba(8,13,24,.94);
    backdrop-filter:blur(18px) saturate(1.2);border-bottom:none;border-top:none;margin-top:0;padding-top:0}
  .nav-in{max-width:var(--maxw);margin:0 auto;padding:14px var(--gut);
    display:flex;align-items:center;justify-content:space-between;gap:20px}
  .brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;letter-spacing:.04em;font-size:16px}
  .brand .nub{width:9px;height:9px;border-radius:2px;background:var(--green);box-shadow:0 0 12px var(--green-soft)}
  .nav-links{display:flex;gap:30px;position:relative}
  .nav-links a{font-family:var(--mono);font-size:15px;color:var(--muted);transition:color .3s;position:relative;padding-bottom:10px}
  .nav-links a:hover{color:var(--text)}
  .nav-links a.nav-active{color:var(--emit)}
  .nav-underline{
    position:absolute;bottom:0;height:2px;width:0;
    background:var(--emit);border-radius:2px;
    opacity:0;pointer-events:none;
    transition:left .4s cubic-bezier(.16,1,.3,1),width .4s cubic-bezier(.16,1,.3,1),opacity .3s ease;
  }
  .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:14px;
    padding:10px 18px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s}
  .btn-green{background:var(--green);color:#0A1220;box-shadow:0 0 0 0 var(--green-soft)}
  .btn-green:hover{transform:translateY(-2px);box-shadow:0 8px 26px -10px var(--green-soft)}
  .btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
  .btn-ghost:hover{border-color:var(--green);color:var(--green)}
  .btn .ar{font-family:var(--mono);transition:transform .25s}
  .btn:hover .ar{transform:translateX(3px)}
  @media(max-width:780px){.nav-links{display:none}}

  /* ---------- hero ---------- */
  .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:transparent}
  /* the artwork IS the background — masked so its edges dissolve into the page (no rectangle) */
  /* legibility bed on the left + top/bottom blend into the page */
  .hero-fx{position:absolute;inset:0;z-index:2;pointer-events:none}
  .hero-in{position:relative;z-index:10;max-width:var(--maxw);margin:0 auto;padding:clamp(48px,6vw,90px) var(--gut) clamp(48px,5.5vw,72px);
    display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,4vw,56px);align-items:center;min-height:clamp(540px,76vh,760px)}

  /* mobile fallback nav — sidebar hides under 768px */
  .mobile-bar{display:none}
  @media (max-width:768px){
    .mobile-bar{
      display:flex;align-items:center;justify-content:space-between;
      position:sticky;top:0;z-index:40;padding:12px var(--gut);
      background:rgba(8,13,24,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
    .mobile-bar .brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;letter-spacing:.04em;font-size:16px;color:var(--text);text-decoration:none}
    .mobile-bar .brand .nub{width:9px;height:9px;border-radius:2px;background:var(--green);box-shadow:0 0 12px var(--green-soft)}
    .mobile-bar .m-links{display:flex;gap:16px}
    .mobile-bar .m-links a{font-family:var(--mono);font-size:12px;color:var(--muted);text-decoration:none}
  }

  .eyebrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:32px}
  .eyebrow .hi{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.04em}
  .sel{position:relative;font-family:var(--mono);font-size:13px;color:var(--green);
    border:1px dashed var(--green-soft);padding:4px 10px;border-radius:3px;letter-spacing:.02em}
  .sel i{position:absolute;width:6px;height:6px;background:var(--green);border-radius:1px}
  .sel i:nth-child(1){left:-3px;top:-3px}.sel i:nth-child(2){right:-3px;top:-3px}
  .sel i:nth-child(3){left:-3px;bottom:-3px}.sel i:nth-child(4){right:-3px;bottom:-3px}

  h1{font-family:var(--display);font-weight:700;font-size:clamp(38px,6.4vw,82px);line-height:1.0;
    letter-spacing:-.025em;margin-bottom:28px}
  h1 .out{color:transparent;-webkit-text-stroke:1.3px var(--muted-2);text-stroke:1.3px var(--muted-2)}
  .lede{font-size:clamp(15px,1.45vw,18px);color:var(--muted);max-width:52ch;line-height:1.7}
  .cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:clamp(28px,3.5vw,38px)}
  .cta-row .btn{padding:13px 22px;font-size:15px;border-radius:9px}

  .social{display:flex;gap:10px;margin-top:30px}
  .social a{width:40px;height:40px;border:1px solid var(--line-2);border-radius:9px;
    display:grid;place-items:center;color:var(--muted);transition:all .2s;background:var(--panel)}
  .social a:hover{color:var(--green);border-color:var(--green);transform:translateY(-2px)}
  .social svg{width:17px;height:17px;fill:currentColor}

  /* robot / AI head behind-left */
  .robot{position:absolute;z-index:1;left:clamp(-90px,-4vw,-30px);bottom:-30px;width:clamp(220px,26vw,360px);
    opacity:.5;pointer-events:none}
  @media(max-width:980px){.robot{opacity:.5;width:230px;left:-70px}}

  /* portrait (right) */
  .portrait-wrap{position:relative;align-self:stretch;display:flex;align-items:flex-end;justify-content:flex-end;min-height:340px}
  .p-grid{position:absolute;right:8%;top:8%;width:230px;height:230px;z-index:0;opacity:.28;
    background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
    background-size:26px 26px;
    -webkit-mask-image:linear-gradient(135deg,#000,transparent 75%);mask-image:linear-gradient(135deg,#000,transparent 75%)}
  .sq{display:none}

  .portrait{position:relative;z-index:2;width:min(100%,300px);aspect-ratio:4/5;overflow:visible}
  .portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.9;filter:contrast(1.05) brightness(1.03);
    -webkit-mask-image:radial-gradient(150% 128% at 56% 52%,#000 74%,transparent 100%);
    mask-image:radial-gradient(150% 128% at 56% 52%,#000 74%,transparent 100%)}
  .portrait img.missing{display:none}
  .portrait .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
    background:repeating-linear-gradient(135deg,var(--panel) 0 12px,var(--panel-2) 12px 24px);color:var(--muted-2)}
  .portrait .ph svg{width:84px;height:84px;stroke:var(--muted-2);fill:none;stroke-width:1.4}
  .portrait .ph span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
  .portrait img:not(.missing) + .ph{display:none}
  .p-tag{position:absolute;z-index:3;bottom:18px;right:18px;font-family:var(--mono);font-size:11px;
    letter-spacing:.14em;color:var(--muted);background:color-mix(in srgb,var(--bg) 70%,transparent);
    border:1px solid var(--line-2);padding:6px 10px;border-radius:6px}
  .p-tag b{color:var(--green);font-weight:500}

  @media(max-width:880px){
    .hero-in{grid-template-columns:1fr;min-height:0}
    .portrait-wrap{justify-content:flex-start;margin-top:8px}
    .portrait{-webkit-mask-image:none;mask-image:none;border-left:none;border:1px solid var(--line-2);border-radius:12px;width:min(100%,360px)}
    .robot{position:relative;left:0;bottom:0;width:200px;opacity:.8;margin-top:24px}
  }

  /* ---------- stats ---------- */
  .stats{border-bottom:1px solid var(--line);background:rgba(8,14,26,.4)}
  .stats-in{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,5vw,64px) var(--gut);
    display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)}
  .stat{position:relative;overflow:hidden;padding:clamp(24px,3.2vw,36px) clamp(18px,2vw,28px);
    border:1px solid var(--line-2);border-radius:14px;
    background:linear-gradient(160deg,rgba(20,30,50,.55),rgba(10,16,28,.45));
    backdrop-filter:blur(8px);
    box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -30px rgba(0,0,0,.9);
    transition:border-color .3s,transform .3s,box-shadow .3s}
  .stat:hover{border-color:var(--green-soft);transform:translateY(-4px);
    box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 22px 48px -24px var(--green-soft)}
  .stat .n{position:relative;z-index:1;font-family:var(--display);font-weight:700;font-size:clamp(30px,4.4vw,52px);letter-spacing:-.02em;line-height:1;display:flex;align-items:center}
  .stat .n em{font-style:normal;color:var(--green)}
  .stat .t{position:relative;z-index:1;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:12px;letter-spacing:.06em}
  /* fill layer — 100% card */
  .stat .fill{position:absolute;left:0;top:0;bottom:0;width:100%;transform:scaleX(0);transform-origin:left;
    background:linear-gradient(90deg,var(--green-dim),var(--green-soft));z-index:0;
    transition:transform 1s cubic-bezier(.2,.7,.2,1);pointer-events:none}
  .stat.is-fill:hover .fill{transform:scaleX(1)}
  /* sun → moon toggle — 24/7 card */
  .sm{position:relative;display:inline-block;width:22px;height:22px;margin-left:11px;overflow:hidden;border-radius:50%;flex:0 0 auto}
  .sm-track{position:absolute;left:0;top:0;width:100%;height:200%;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
  .stat:hover .sm-track{transform:translateY(-50%)}
  .sm-ico{width:22px;height:22px;display:grid;place-items:center}
  .sm-ico svg{width:16px;height:16px;display:block}
  .sm-sun{color:var(--green)}
  .sm-moon{color:var(--green-2)}
  @media(max-width:680px){.stats-in{grid-template-columns:1fr}}

  /* ---------- section frame ---------- */
  section{position:relative}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
    padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:8px}
  .sec-head h2{font-family:var(--display);font-weight:700;font-size:clamp(24px,3.4vw,40px);letter-spacing:-.02em}
  .sec-head .eb{display:flex;align-items:center;gap:9px;margin-bottom:14px}
  .sec-head .eb .nub{width:7px;height:7px;border-radius:2px;background:var(--green)}

  /* works */
  .works{padding:clamp(60px,9vw,110px) 0;background:rgba(8,14,26,.6)}
  .row{display:grid;grid-template-columns:58px 1.7fr 1fr;gap:clamp(16px,3vw,40px);
    padding:clamp(26px,3.4vw,38px) 6px;border-bottom:1px solid var(--line);position:relative;isolation:isolate}
  /* soft, edgeless oblong glow on hover — replaces the vertical bar + panel fill */
  .row .rowglow{position:absolute;inset:-16% -2%;z-index:-1;pointer-events:none;opacity:0;border-radius:48px;
    background:radial-gradient(56% 130% at 32% 50%,color-mix(in srgb,var(--emit) 14%,transparent),transparent 72%);
    filter:blur(28px);transition:opacity .45s ease}
  .row:hover .rowglow{opacity:1}
  .row .idx{font-family:var(--mono);font-size:13px;color:var(--green);padding-top:5px}
  .row .cat{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px}
  .row .name{font-family:var(--display);font-weight:600;font-size:clamp(19px,2vw,25px);letter-spacing:-.01em;margin-bottom:11px;line-height:1.18}
  .row .desc{font-size:14.5px;color:var(--muted);line-height:1.64;max-width:48ch}
  .row .wf{font-family:var(--mono);font-size:11px;color:var(--muted-2);margin-top:13px;line-height:1.7;word-break:break-word}
  .row .meta{display:flex;flex-direction:column;gap:13px;padding-top:4px}
  .row .stack{display:flex;flex-wrap:wrap;gap:7px}
  .chip{font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line-2);
    border-radius:5px;padding:4px 9px;background:var(--panel)}
  .status{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
  .status.live{color:var(--green);display:inline-flex;align-items:center;gap:8px}
  .status.live .d{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 var(--green-soft);animation:pulse 2.4s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 var(--green-soft)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
  @media(max-width:720px){.row{grid-template-columns:1fr;gap:12px;padding:30px 6px}}
  /* perimeter light-trail on hover */
  .row .rowtrace{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .28s ease;z-index:2}
  .row:hover .rowtrace{opacity:1}
  .row .rowtrace svg{width:100%;height:100%;overflow:visible;display:block}
  .row .rowtrace rect{fill:none;stroke:var(--emit);stroke-width:2.6;vector-effect:non-scaling-stroke;
    stroke-linecap:round;stroke-dasharray:0.4 99.6;
    filter:drop-shadow(0 0 3px var(--emit)) drop-shadow(0 0 7px var(--emit)) drop-shadow(0 0 13px var(--green-soft));
    animation:rowtrace 5s linear infinite}
  @keyframes rowtrace{to{stroke-dashoffset:-100}}

  /* approach */
  .approach{padding:clamp(56px,8vw,100px) 0;background:rgba(13,22,38,.75);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(34px,5vw,52px);border-radius:12px;overflow:hidden}
  .principle{background:var(--bg-2);padding:clamp(26px,3vw,38px)}
  .principle .pn{font-family:var(--mono);font-size:13px;color:var(--green);margin-bottom:24px}
  .principle h3{font-family:var(--display);font-weight:600;font-size:19px;margin-bottom:12px;letter-spacing:-.01em}
  .principle p{font-size:14px;color:var(--muted);line-height:1.66}
  @media(max-width:820px){.principles{grid-template-columns:1fr}}

  /* contact */
  .contact{padding:clamp(64px,9vw,120px) 0}
  .c-card{position:relative;overflow:hidden;border:1px solid var(--line-2);border-radius:16px;
    padding:clamp(36px,6vw,72px);background:
      radial-gradient(120% 140% at 88% 12%,var(--green-dim),transparent 56%),var(--panel)}
  .c-card .glowline{position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--green),transparent);opacity:.6}
  .c-card h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,4.4vw,46px);letter-spacing:-.02em;
    line-height:1.08;margin:16px 0 16px;max-width:20ch}
  .c-card p{color:var(--muted);max-width:52ch;line-height:1.7;font-size:clamp(14px,1.4vw,16px)}
  .c-card .cta-row{margin-top:clamp(28px,4vw,40px)}

  /* footer */
  footer{border-top:1px solid var(--line);padding:36px 0 56px}
  .foot-in{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
  .foot-meta{font-family:var(--mono);font-size:11.5px;color:var(--muted-2);letter-spacing:.06em;display:flex;gap:22px;flex-wrap:wrap}

  a:focus-visible,.btn:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
  .reveal{opacity:0;transform:translateY(48px)}
  .is-in{opacity:1;transform:none;transition:opacity 1.4s cubic-bezier(.16,1,.3,1),transform 1.4s cubic-bezier(.16,1,.3,1)}
  .is-in.r1{transition-delay:.1s}
  .is-in.r2{transition-delay:.22s}
  .is-in.r3{transition-delay:.34s}
  .is-in.r4{transition-delay:.46s}
  .is-in.r5{transition-delay:.58s}

  /* robot internal animations */
  .r-eye{animation:eye 3.4s ease-in-out infinite}
  @keyframes eye{0%,100%{opacity:1}48%{opacity:.55}52%{opacity:.55}}
  .r-core{transform-box:fill-box;transform-origin:center;animation:core 4s ease-in-out infinite}
  @keyframes core{0%,100%{opacity:.5}50%{opacity:1}}
  .flow{stroke-dasharray:3 9;animation:flow 1.6s linear infinite}
  @keyframes flow{to{stroke-dashoffset:-24}}
  .blink{animation:blink 3s ease-in-out infinite}
  .blink.b2{animation-delay:-1.1s}.blink.b3{animation-delay:-2.2s}
  @keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}

  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .reveal{opacity:1;transform:none}
  }
  .lead{max-width:62ch;color:var(--muted);font-size:clamp(15px,1.5vw,18px);line-height:1.7;margin-top:22px}
  .arc{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin-top:clamp(28px,4vw,40px)}
  .arc-step{flex:1 1 140px;min-width:120px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);padding:15px 16px 17px;display:flex;flex-direction:column;gap:6px}
  .arc-step.on{border-color:var(--green);background:var(--green-dim)}
  .arc-n{font-family:var(--mono);font-size:11px;color:var(--green);letter-spacing:.1em}
  .arc-t{font-family:var(--display);font-weight:600;font-size:16px}
  .arc-d{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.02em}
  .arc-ar{align-self:center;color:var(--muted-2);font-family:var(--mono);font-size:16px}
  @media(max-width:760px){.arc-ar{display:none}.arc-step{flex-basis:100%}}


  .cps-w, .cps-w *{box-sizing:border-box;margin:0;padding:0}
  .cps-w{
    --cps-emerald:#1B4D3E;
    --cps-emerald-2:#22624F;
    --cps-sage:#A8BFA0;
    --cps-champagne:#D9C3A0;
    --cps-ivory:#F6F3EC;
    --cps-charcoal:#2C302E;
    --cps-font:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
    position:fixed;right:22px;bottom:22px;z-index:2147483000;
    font-family:var(--cps-font);
  }
  /* launcher bubble */
  .cps-launch{
    width:60px;height:60px;border:none;border-radius:50%;cursor:pointer;
    background:var(--cps-emerald);
    box-shadow:0 10px 30px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.04) inset;
    display:flex;align-items:center;justify-content:center;
    transition:transform .25s cubic-bezier(.19,1,.22,1),box-shadow .25s;
    position:relative;
  }
  .cps-launch:hover{transform:translateY(-2px) scale(1.04)}
  .cps-launch:focus-visible{outline:2px solid var(--cps-champagne);outline-offset:3px}
  .cps-launch svg{width:30px;height:30px}
  .cps-dot{
    position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;
    background:var(--cps-champagne);border:2px solid var(--cps-emerald);
  }
  .cps-launch.cps-open{transform:scale(.9);opacity:0}
  /* panel */
  .cps-panel{
    position:absolute;right:0;bottom:0;width:380px;max-width:calc(100vw - 44px);
    height:560px;max-height:calc(100vh - 44px);
    background:var(--cps-ivory);border-radius:18px;overflow:hidden;
    display:flex;flex-direction:column;
    box-shadow:0 24px 60px rgba(0,0,0,.40),0 0 0 1px rgba(0,0,0,.06);
    opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;
    transition:opacity .26s cubic-bezier(.19,1,.22,1),transform .26s cubic-bezier(.19,1,.22,1);
  }
  .cps-panel.cps-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
  /* header */
  .cps-head{
    background:var(--cps-emerald);color:var(--cps-ivory);
    padding:15px 16px;display:flex;align-items:center;gap:11px;flex-shrink:0;
  }
  .cps-avatar{
    width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .cps-avatar svg{width:22px;height:22px}
  .cps-head-meta{flex:1;min-width:0}
  .cps-head-name{font-weight:600;font-size:15px;letter-spacing:.01em}
  .cps-head-status{font-size:12px;color:var(--cps-sage);display:flex;align-items:center;gap:5px;margin-top:1px}
  .cps-pulse{width:7px;height:7px;border-radius:50%;background:#5fd39a;box-shadow:0 0 0 0 rgba(95,211,154,.6);animation:cps-pulse 2s infinite}
  @keyframes cps-pulse{0%{box-shadow:0 0 0 0 rgba(95,211,154,.5)}70%{box-shadow:0 0 0 6px rgba(95,211,154,0)}100%{box-shadow:0 0 0 0 rgba(95,211,154,0)}}
  .cps-close{background:none;border:none;color:var(--cps-ivory);cursor:pointer;opacity:.7;font-size:20px;line-height:1;padding:4px;transition:opacity .2s}
  .cps-close:hover{opacity:1}
  /* messages */
  .cps-body{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px;background:var(--cps-ivory)}
  .cps-body::-webkit-scrollbar{width:6px}
  .cps-body::-webkit-scrollbar-thumb{background:var(--cps-sage);border-radius:3px}
  .cps-msg{max-width:84%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;animation:cps-rise .3s cubic-bezier(.19,1,.22,1)}
  @keyframes cps-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  .cps-msg.cps-bot{background:#fff;color:var(--cps-charcoal);align-self:flex-start;border-bottom-left-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
  .cps-msg.cps-user{background:var(--cps-emerald);color:var(--cps-ivory);align-self:flex-end;border-bottom-right-radius:5px}
  .cps-typing{align-self:flex-start;background:#fff;padding:13px 16px;border-radius:14px;border-bottom-left-radius:5px;display:flex;gap:4px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
  .cps-typing span{width:7px;height:7px;border-radius:50%;background:var(--cps-sage);animation:cps-blink 1.4s infinite both}
  .cps-typing span:nth-child(2){animation-delay:.2s}
  .cps-typing span:nth-child(3){animation-delay:.4s}
  @keyframes cps-blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
  /* input */
  .cps-foot{flex-shrink:0;padding:12px;background:var(--cps-ivory);border-top:1px solid rgba(0,0,0,.07)}
  .cps-inrow{display:flex;align-items:flex-end;gap:8px;background:#fff;border:1px solid rgba(0,0,0,.10);border-radius:13px;padding:6px 6px 6px 14px;transition:border-color .2s}
  .cps-inrow:focus-within{border-color:var(--cps-emerald)}
  .cps-input{flex:1;border:none;outline:none;resize:none;font-family:var(--cps-font);font-size:14px;line-height:1.4;color:var(--cps-charcoal);background:transparent;max-height:96px;padding:6px 0}
  .cps-send{width:38px;height:38px;border:none;border-radius:10px;background:var(--cps-emerald);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s,transform .15s}
  .cps-send:hover{background:var(--cps-emerald-2)}
  .cps-send:active{transform:scale(.92)}
  .cps-send:disabled{opacity:.4;cursor:default}
  .cps-send svg{width:18px;height:18px}
  .cps-tag{text-align:center;font-size:11px;color:var(--cps-charcoal);opacity:.5;margin-top:8px;letter-spacing:.02em}
  .cps-tag b{color:var(--cps-emerald);opacity:1;font-weight:600}
  @media (max-width:440px){
    .cps-w{right:14px;bottom:14px}
    .cps-panel{width:calc(100vw - 28px);height:calc(100vh - 90px)}
  }

  /* side nav — primary navigation rail */
  .side-nav{
    position:fixed;left:0;top:0;bottom:0;z-index:90;
    width:78px;
    display:flex;flex-direction:column;
    align-items:center;
    background:linear-gradient(90deg,rgba(8,13,24,.7),rgba(8,13,24,.2));
    backdrop-filter:blur(10px);
    border:none;
    padding:26px 0;
    opacity:1;
  }
  .side-brand{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;flex-shrink:0;
  }
  .side-brand .nub{width:11px;height:11px;border-radius:2px;background:var(--green);box-shadow:0 0 14px var(--green-soft)}
  .side-links{
    flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    position:relative;
  }
  .side-links a{
    font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--muted);text-decoration:none;white-space:nowrap;
    display:flex;align-items:center;justify-content:center;
    width:78px;flex:1;max-height:150px;
    position:relative;
    transform:rotate(-90deg);
    transition:color .35s ease;
  }
  .side-links a.active{color:var(--emit)}
  .side-links a:hover{color:var(--text)}
  .side-indicator{
    position:absolute;right:0;width:2px;height:0;
    background:var(--emit);border-radius:2px 0 0 2px;
    box-shadow:0 0 12px var(--emit);
    opacity:0;
    transition:top .4s cubic-bezier(.16,1,.3,1),height .4s cubic-bezier(.16,1,.3,1),opacity .3s ease;
  }
  .hire-float{
    position:fixed;top:24px;right:32px;z-index:95;
    display:inline-flex;align-items:center;justify-content:center;
    font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.06em;text-transform:uppercase;
    color:#0A1220;background:linear-gradient(135deg,var(--emit),var(--green));
    padding:13px 28px;border-radius:10px;text-decoration:none;
    box-shadow:0 6px 24px -8px rgba(216,180,100,.5);
    transition:box-shadow .3s ease,transform .25s ease;
  }
  .hire-float:hover{transform:translateY(-2px);box-shadow:0 14px 36px -10px rgba(216,180,100,.55)}
  @media (max-width:768px){
    .side-nav{display:none}
    .hire-float{top:auto;bottom:18px;right:18px}
  }

  /* ========== SYSTEMS CONTROL CENTER ========== */

  /* --- Module States --- */
  .sys-module{cursor:pointer;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
  .sys-module .sys-state{
    font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--muted-2);opacity:.6;margin-top:6px;display:inline-flex;align-items:center;gap:6px;
    transition:color .4s ease,opacity .4s ease;
  }
  .sys-module .sys-state::before{
    content:'';width:6px;height:6px;border-radius:50%;
    background:var(--muted-2);
    transition:background .4s ease,box-shadow .4s ease;
  }
  .sys-module .sys-action{
    font-family:var(--mono);font-size:11px;letter-spacing:.06em;
    color:var(--emit);opacity:0;transform:translateY(6px);
    transition:opacity .35s ease,transform .35s ease;
    margin-top:8px;
  }

  /* --- Hover: Idle → Ready --- */
  .sys-module:hover{transform:translateY(-2px)}
  .sys-module:hover .sys-state{color:var(--emit);opacity:1}
  .sys-module:hover .sys-state::before{background:var(--emit);box-shadow:0 0 8px var(--emit)}
  .sys-module:hover .sys-action{opacity:1;transform:translateY(0)}

  /* Sequential chip illumination */
  .sys-module .chip{transition:border-color .3s ease,color .3s ease,box-shadow .3s ease}
  .sys-module:hover .chip:nth-child(1){border-color:var(--emit);color:var(--emit);transition-delay:0s}
  .sys-module:hover .chip:nth-child(2){border-color:var(--emit);color:var(--emit);transition-delay:.08s}
  .sys-module:hover .chip:nth-child(3){border-color:var(--emit);color:var(--emit);transition-delay:.16s}
  .sys-module:hover .chip:nth-child(4){border-color:var(--emit);color:var(--emit);transition-delay:.24s}
  .sys-module:hover .chip:nth-child(5){border-color:var(--emit);color:var(--emit);transition-delay:.32s}

  /* Name glow on hover */
  .sys-module:hover .name{color:var(--text);text-shadow:0 0 20px rgba(216,180,100,.12)}

  /* Siblings fade when one is active/clicked */
  .works:has(.sys-module.sys-active) .sys-module:not(.sys-active){opacity:.35;pointer-events:none;transition:opacity .5s ease}
  .sys-module.sys-active{z-index:5}

  /* --- Deployment Overlay --- */
  .deploy-overlay{
    position:fixed;inset:0;z-index:200;
    display:none;align-items:center;justify-content:center;
    background:rgba(5,9,17,.88);backdrop-filter:blur(20px);
    opacity:0;transition:opacity .4s ease;
  }
  .deploy-overlay.open ~ .side-nav,
  .deploy-overlay.open ~ .hire-float,
  .deploy-overlay.open ~ .mobile-bar{display:none}
  body.sys-entering .side-nav,
  body.sys-entering .hire-float,
  body.sys-entering .mobile-bar,
  body.sys-entering .cps-w{display:none!important}
  .deploy-overlay.open{display:flex}
  .deploy-overlay.visible{opacity:1}

  /* Portal transition: console expands outward */
  .deploy-overlay.portal .deploy-console{
    transform:scale(1.8);opacity:0;
    transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s ease;
  }
  .deploy-overlay.portal{
    background:rgba(5,9,17,.98);
    transition:background .6s ease;
  }

  /* --- ACCESS GRANTED screen --- */
  .access-screen{
    position:absolute;inset:0;z-index:10;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
    opacity:0;pointer-events:none;
    transition:opacity .5s ease;
  }
  .access-screen.show{opacity:1}
  .access-text{
    font-family:var(--mono);font-size:clamp(28px,5vw,52px);font-weight:700;
    letter-spacing:.35em;text-transform:uppercase;
    color:var(--emit);
    text-shadow:0 0 30px rgba(216,180,100,.4),0 0 60px rgba(216,180,100,.15);
    animation:accessPulse 1.6s ease-in-out;
  }
  @keyframes accessPulse{
    0%{opacity:0;transform:scale(.92);filter:blur(8px)}
    30%{opacity:1;transform:scale(1);filter:blur(0)}
    70%{opacity:1;transform:scale(1);filter:blur(0)}
    100%{opacity:1;transform:scale(1);filter:blur(0)}
  }
  .access-sub{
    font-family:var(--mono);font-size:13px;letter-spacing:.15em;
    color:var(--muted);opacity:0;
    animation:accessSubIn .6s ease .8s forwards;
  }
  @keyframes accessSubIn{to{opacity:1}}
  .access-line{
    width:min(400px,60vw);height:1px;
    background:linear-gradient(90deg,transparent,var(--emit),transparent);
    opacity:0;
    animation:accessLineIn .8s ease .3s forwards;
  }
  @keyframes accessLineIn{to{opacity:.5}}

  /* --- Traversal video --- */
  .net-video{
    position:absolute;inset:0;z-index:5;
    width:100%;height:100%;object-fit:cover;
    opacity:0;pointer-events:none;
    transition:opacity .5s ease;
  }
  .net-video.show{opacity:1}
  .deploy-console{
    width:min(520px,90vw);
    background:rgba(12,18,32,.95);border:1px solid var(--line);border-radius:16px;
    padding:32px 36px;
    box-shadow:0 40px 80px -20px rgba(0,0,0,.7);
  }
  .deploy-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
  .deploy-title{font-family:var(--display);font-weight:600;font-size:18px;color:var(--text)}
  .deploy-close{background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;padding:4px;transition:color .2s}
  .deploy-close:hover{color:var(--text)}
  .deploy-steps{display:flex;flex-direction:column;gap:14px}
  .deploy-step{
    font-family:var(--mono);font-size:13px;letter-spacing:.04em;
    color:var(--muted-2);display:flex;align-items:center;gap:10px;
    opacity:0;transform:translateY(8px);
    transition:opacity .35s ease,transform .35s ease,color .35s ease;
  }
  .deploy-step.active{opacity:1;transform:translateY(0);color:var(--muted)}
  .deploy-step.done{opacity:1;transform:translateY(0);color:var(--green)}
  .deploy-step.final{opacity:1;transform:translateY(0);color:var(--emit);font-weight:600}
  .deploy-step::before{
    content:'';width:8px;height:8px;border-radius:50%;flex-shrink:0;
    border:1.5px solid var(--line);background:transparent;
    transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
  }
  .deploy-step.active::before{border-color:var(--emit);background:var(--emit);box-shadow:0 0 8px var(--emit)}
  .deploy-step.done::before{border-color:var(--green);background:var(--green)}
  .deploy-step.final::before{border-color:var(--emit);background:var(--emit);box-shadow:0 0 12px var(--emit)}

  /* --- System Page Shell --- */
  .sys-page{
    position:fixed;inset:0;z-index:190;
    background:var(--bg);overflow-y:auto;
    display:none;opacity:0;
    transform:scale(.96);
    transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
  }
  .sys-page.open{display:block}
  .sys-page.visible{opacity:1;transform:scale(1)}
  .sys-page-header{
    position:sticky;top:0;z-index:10;
    display:flex;align-items:center;justify-content:space-between;
    padding:16px var(--gut);
    background:rgba(8,13,24,.94);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
  }
  .sys-back{
    font-family:var(--mono);font-size:13px;color:var(--muted);
    background:none;border:none;cursor:pointer;padding:0;
    transition:color .2s;
  }
  .sys-back:hover{color:var(--text)}
  .sys-page-status{
    font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
    color:var(--emit);display:flex;align-items:center;gap:8px;
  }
  .sys-page-status::before{
    content:'';width:7px;height:7px;border-radius:50%;background:var(--emit);
    box-shadow:0 0 8px var(--green-soft);animation:sysPulse 2.4s ease-in-out infinite;
  }
  @keyframes sysPulse{0%,100%{opacity:1}50%{opacity:.4}}
  .sys-page-body{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) clamp(48px,6vw,80px)}
  .sys-page-sections{display:flex;flex-direction:column;gap:clamp(20px,3vw,32px)}

  /* ── HERO BANNER ── */
  .sys-hero{
    padding:clamp(48px,7vw,88px) 0 clamp(32px,4vw,48px);
    border-bottom:1px solid var(--line);margin-bottom:clamp(20px,3vw,32px);
  }
  .sys-page-title{
    font-family:var(--display);font-weight:700;font-size:clamp(28px,4.5vw,52px);
    letter-spacing:-.03em;margin-bottom:12px;
  }
  .sys-hero-sub{
    font-family:var(--body);font-size:clamp(15px,1.6vw,18px);color:var(--muted);
    line-height:1.5;max-width:640px;
  }

  /* ── SHARED SECTION ── */
  .sys-sec{
    padding:clamp(20px,2.5vw,32px);
    border:1px solid var(--line);border-radius:12px;
    background:rgba(15,27,48,.35);
  }
  .sys-sec h3{
    font-family:var(--display);font-weight:600;font-size:14px;
    text-transform:uppercase;letter-spacing:.1em;
    margin-bottom:16px;color:var(--muted);
  }
  .sys-selling,.sys-compare,.sys-dual,.sys-gallery-sec{position:relative}
  .sys-selling::before,.sys-compare::before,.sys-dual::before,.sys-gallery-sec::before{
    content:'';position:absolute;top:0;left:24px;right:24px;height:2px;
    background:linear-gradient(90deg,var(--emit),rgba(70,214,206,.4),transparent);
    border-radius:2px;
  }

  /* ── BEFORE / AFTER ── */
  .sys-compare{
    display:grid;grid-template-columns:1fr auto 1fr;gap:0;
    padding:0;overflow:hidden;
  }
  .sys-col{padding:clamp(20px,2.5vw,32px)}
  .sys-col--before{background:rgba(255,90,90,.03)}
  .sys-col--after{background:rgba(70,214,206,.03)}
  .sys-col-divider{width:1px;background:var(--line)}
  .sys-col-label{
    display:inline-block;font-family:var(--mono);font-size:11px;
    letter-spacing:.14em;text-transform:uppercase;
    padding:4px 10px;border-radius:4px;margin-bottom:16px;
  }
  .sys-col-label--before{background:rgba(255,90,90,.1);color:#ff6b6b}
  .sys-col-label--after{background:rgba(70,214,206,.1);color:var(--return)}
  .sys-pain-list{list-style:none;display:flex;flex-direction:column;gap:10px}
  .sys-pain-list li{
    font-family:var(--body);font-size:13px;color:var(--muted);
    line-height:1.55;padding-left:20px;position:relative;
  }
  .sys-col--before .sys-pain-list li::before{
    content:'✕';position:absolute;left:0;color:#ff6b6b;font-size:11px;top:2px;
  }
  .sys-col--after .sys-pain-list li::before{
    content:'✓';position:absolute;left:0;color:var(--return);font-size:12px;top:1px;font-weight:700;
  }

  /* ── ARCHITECTURE & WORKFLOW — two-column ── */
  .sys-arch,.sys-wf{
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);
    align-items:start;
  }
  .sys-arch-desc,.sys-wf-steps p{
    font-family:var(--body);font-size:14px;color:var(--muted);line-height:1.65;
  }
  .sys-steps-list{
    list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:14px;
  }
  .sys-steps-list li{
    counter-increment:step;position:relative;padding-left:32px;
    font-family:var(--body);font-size:13px;color:var(--muted);line-height:1.55;
  }
  .sys-steps-list li::before{
    content:counter(step);position:absolute;left:0;top:0;
    width:22px;height:22px;border-radius:6px;
    background:rgba(240,178,74,.1);color:var(--emit);
    font-family:var(--mono);font-size:11px;font-weight:600;
    display:grid;place-items:center;
  }

  /* ── SELLING POINTS ── */
  .sys-selling{padding:clamp(20px,2.5vw,28px) clamp(20px,2.5vw,32px)}
  .sys-selling-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;
  }
  .sys-sell-card{
    padding:20px;border-radius:8px;
    border:1px solid var(--line);background:rgba(15,27,48,.25);
    transition:border-color .25s,box-shadow .25s;
  }
  .sys-sell-card:hover{
    border-color:rgba(240,178,74,.25);
    box-shadow:0 0 20px rgba(240,178,74,.06);
  }
  .sys-sell-icon{
    font-size:22px;margin-bottom:10px;display:block;
    color:var(--emit);width:22px;height:22px;
  }
  .sys-sell-icon svg{display:block}
  .sys-sell-title{
    font-family:var(--display);font-weight:600;font-size:15px;
    color:var(--text);margin-bottom:6px;
  }
  .sys-sell-desc{
    font-family:var(--body);font-size:13px;color:var(--muted);line-height:1.55;
  }

  /* ── HOW IT WORKS (plain English) ── */
  .sys-how-steps{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;
    counter-reset:howstep;
  }
  .sys-how-card{
    padding:18px;border-radius:8px;
    border:1px solid var(--line);background:rgba(15,27,48,.2);
    counter-increment:howstep;position:relative;padding-top:42px;
    transition:border-color .25s,box-shadow .25s;
  }
  .sys-how-card:hover{
    border-color:rgba(240,178,74,.2);
    box-shadow:0 0 16px rgba(240,178,74,.05);
  }
  .sys-how-card::before{
    content:counter(howstep);position:absolute;top:14px;left:18px;
    width:22px;height:22px;border-radius:6px;
    background:rgba(240,178,74,.1);color:var(--emit);
    font-family:var(--mono);font-size:11px;font-weight:600;
    display:grid;place-items:center;
  }
  .sys-how-card p{
    font-family:var(--body);font-size:13px;color:var(--muted);line-height:1.55;
  }

  /* ── WORKFLOW GALLERY GRID ── */
  .sys-gallery-intro{
    font-family:var(--body);font-size:13px;color:var(--muted-2);
    margin-bottom:16px;line-height:1.5;
  }
  .sys-gallery{
    display:grid;grid-template-columns:1fr 1fr;gap:16px;
  }
  .sys-gallery-item{display:flex;flex-direction:column;gap:0}
  .sys-gallery-item.sys-gallery-hero{grid-column:span 1}
  .sys-gallery-item .sys-device{border-radius:8px 8px 0 0}
  .sys-gallery-label{
    font-family:var(--mono);font-size:11px;color:var(--muted-2);
    letter-spacing:.06em;padding:8px 12px;
    background:rgba(15,27,48,.5);border:1px solid var(--line);border-top:0;
    border-radius:0 0 8px 8px;
  }
  .sys-gallery-thumbs{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;
    grid-column:1 / -1;
  }
  .sys-gallery-thumbs .sys-device{border-radius:6px 6px 0 0}
  .sys-gallery-thumbs .sys-gallery-label{font-size:10px;padding:6px 10px;border-radius:0 0 6px 6px}

  @media(max-width:700px){
    .sys-gallery{grid-template-columns:1fr}
    .sys-gallery-thumbs{grid-template-columns:1fr 1fr}
  }

  /* ── DUAL PANEL ── */
  .sys-dual{padding:clamp(20px,2.5vw,28px) clamp(20px,2.5vw,32px)}
  .sys-dual-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .sys-dual-panel{
    padding:20px;border-radius:10px;
    border:1px solid var(--line);background:rgba(15,27,48,.25);
    display:flex;flex-direction:column;gap:14px;
    transition:border-color .25s,box-shadow .25s;
  }
  .sys-dual-panel:hover{
    border-color:rgba(240,178,74,.2);
    box-shadow:0 0 20px rgba(240,178,74,.05);
  }
  .sys-dual-tag{
    display:inline-block;font-family:var(--mono);font-size:10px;
    letter-spacing:.14em;text-transform:uppercase;
    padding:3px 8px;border-radius:4px;width:fit-content;
  }
  .sys-dual-tag--react{background:rgba(240,178,74,.1);color:var(--emit)}
  .sys-dual-tag--prevent{background:rgba(70,214,206,.1);color:var(--return)}
  .sys-dual-title{
    font-family:var(--display);font-weight:600;font-size:16px;color:var(--text);
  }
  .sys-dual-desc{
    font-family:var(--body);font-size:13px;color:var(--muted);line-height:1.55;
  }
  .sys-dual-panel .sys-device{margin-top:auto}
  @media(max-width:700px){.sys-dual-grid{grid-template-columns:1fr}}

  /* ── DEVICE MOCKUP FRAME ── */
  .sys-device{
    border:1px solid var(--line-2);border-radius:10px;overflow:hidden;
    background:var(--ink-2);cursor:pointer;
    transition:border-color .25s,transform .25s,box-shadow .25s;
  }
  .sys-device:hover{
    border-color:var(--emit);transform:scale(1.01);
    box-shadow:0 4px 24px rgba(0,0,0,.3);
  }
  .sys-device-bar{
    display:flex;gap:6px;padding:10px 14px;
    background:rgba(15,27,48,.6);border-bottom:1px solid var(--line);
  }
  .sys-device-bar span{
    width:9px;height:9px;border-radius:50%;
  }
  .sys-device-bar span:nth-child(1){background:rgba(255,95,87,.35)}
  .sys-device-bar span:nth-child(2){background:rgba(255,189,46,.3)}
  .sys-device-bar span:nth-child(3){background:rgba(39,201,63,.3)}
  .sys-device img{display:block;width:100%;height:auto;box-shadow:inset 0 1px 4px rgba(0,0,0,.15)}

  /* ── TECH STACK ── */
  .sys-stack-sec{padding:clamp(20px,2.5vw,28px) clamp(20px,2.5vw,32px)}
  .sys-stack-chips{display:flex;flex-wrap:wrap;gap:8px}
  .sys-chip-logo{display:inline-flex;align-items:center;gap:6px}
  .sys-chip-logo svg{flex-shrink:0}

  /* ── RELIABILITY STAT CARDS ── */
  .sys-stat-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;
  }
  .sys-stat-card{
    padding:16px 18px;border-radius:8px;
    border:1px solid var(--line);background:rgba(15,27,48,.3);
    transition:border-color .25s,box-shadow .25s;
  }
  .sys-stat-card:hover{
    border-color:rgba(70,214,206,.2);
    box-shadow:0 0 16px rgba(70,214,206,.06);
  }
  .sys-stat-icon{
    font-size:18px;margin-bottom:8px;display:block;
    color:var(--return);width:20px;height:20px;
  }
  .sys-stat-icon svg{display:block}
  .sys-stat-val{
    font-family:var(--display);font-weight:700;font-size:22px;
    color:var(--emit);margin-bottom:2px;
  }
  .sys-stat-label{
    font-family:var(--mono);font-size:11px;color:var(--muted-2);
    text-transform:uppercase;letter-spacing:.08em;
  }

  /* ── LIVE DEMO CTA ── */
  .sys-demo{
    background:linear-gradient(135deg,rgba(240,178,74,.06),rgba(70,214,206,.04));
    border-color:rgba(240,178,74,.18);text-align:center;
    padding:clamp(32px,4vw,48px);
  }
  .sys-demo h3{color:var(--text);font-size:16px;letter-spacing:.06em}
  .sys-demo-desc{
    font-family:var(--body);font-size:14px;color:var(--muted);
    margin-bottom:20px;max-width:480px;margin-inline:auto;
  }
  .sys-demo-cta{
    font-family:var(--display);font-weight:600;font-size:14px;
    padding:12px 32px;border-radius:8px;border:none;cursor:pointer;
    background:var(--emit);color:var(--ink);
    transition:transform .15s,box-shadow .15s;
  }
  .sys-demo-cta:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 24px rgba(240,178,74,.25);
  }

  /* ── DEPLOYMENT STATUS ROW ── */
  .sys-deploy-row{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    padding:14px clamp(20px,2.5vw,32px);
  }
  .sys-deploy-badge{
    font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    padding:4px 12px;border-radius:5px;
    border:1px solid var(--emit);color:var(--emit);
  }
  .sys-deploy-env{
    font-family:var(--mono);font-size:11px;color:var(--muted-2);
    letter-spacing:.08em;text-transform:uppercase;
  }
  .sys-deploy-dot{
    width:6px;height:6px;border-radius:50%;background:var(--return);
    box-shadow:0 0 6px rgba(70,214,206,.4);
  }
  .sys-deploy-uptime{
    font-family:var(--mono);font-size:11px;color:var(--return);
    letter-spacing:.06em;
  }

  /* ── SCROLL REVEAL ── */
  .sys-reveal{
    opacity:0;transform:translateY(18px);
    transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
  }
  .sys-reveal.visible{opacity:1;transform:translateY(0)}

  /* ── LIGHTBOX ── */
  .sys-lightbox{
    position:fixed;inset:0;z-index:300;
    background:rgba(5,9,17,.92);backdrop-filter:blur(12px);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .3s;
  }
  .sys-lightbox.open{opacity:1;pointer-events:auto}
  .sys-lightbox-img{
    max-width:92vw;max-height:88vh;border-radius:8px;
    box-shadow:0 8px 48px rgba(0,0,0,.5);
  }
  .sys-lightbox-close{
    position:absolute;top:20px;right:24px;
    font-size:24px;color:var(--muted);background:none;border:none;
    cursor:pointer;transition:color .2s;z-index:2;
  }
  .sys-lightbox-close:hover{color:var(--text)}

  /* ── MOBILE RESPONSIVE ── */
  @media(max-width:700px){
    .sys-compare{grid-template-columns:1fr;gap:0}
    .sys-col-divider{width:auto;height:1px;background:var(--line)}
    .sys-arch,.sys-wf{grid-template-columns:1fr}
    .sys-wf .sys-device{order:-1}
  }

  /* Reduced motion */
  @media(prefers-reduced-motion:reduce){
    .sys-module,.sys-module .chip,.sys-module .sys-state,.sys-module .sys-action,
    .deploy-step,.deploy-overlay,.sys-page{transition:none!important}
  }


  /* ============================================================
     LIQUID GLASS — clear-pane treatment (DEC-018 hybrid, DEC-019 clear)
     Everything scoped to body.has-webgl so the fallback (shader off,
     texture failed, WebGL missing) is the site EXACTLY as before.
     PRV-022: .has-webgl is only added by effects.js after the
     background texture is confirmed loaded.
     ============================================================ */

  /* Shader canvas — between fixed artwork (z:-1) and content (z:1) */
  #glass-canvas{
    position:fixed;inset:0;z-index:0;
    width:100%;height:100%;pointer-events:none;
    display:none;
  }
  body.has-webgl #glass-canvas{display:block}

  /* Shader owns the background when active — CSS artwork hides */
  body.has-webgl::before,
  body.has-webgl::after{display:none}

  /* Tilt/lift transition lives on the panel (glass + text = one element) */
  .liquid-glass{
    transform-style:preserve-3d;
    will-change:transform;
  }
  body.has-webgl .liquid-glass{
    transition:transform .3s cubic-bezier(.22,1,.36,1),
               border-color .3s,box-shadow .3s,background .3s;
  }

  /* Clear glass pane — flat 2% film, 3px blur, quiet edge (DEC-019) */
  body.has-webgl .liquid-glass{
    background:rgba(255,255,255,.02)!important;
    backdrop-filter:blur(3px) saturate(1.08)!important;
    -webkit-backdrop-filter:blur(3px) saturate(1.08)!important;
    border:1px solid rgba(255,255,255,.18)!important;
    box-shadow:0 10px 30px -12px rgba(0,0,0,.5)!important;
    border-radius:14px;
  }

  /* Hover — teal edge glow (3 layers) + lift shadow */
  body.has-webgl .liquid-glass:hover{
    background:rgba(255,255,255,.04)!important;
    border-color:rgba(93,222,207,.85)!important;
    box-shadow:0 0 12px -2px rgba(70,214,206,.55),
               0 0 32px -6px rgba(70,214,206,.35),
               0 0 64px -12px rgba(70,214,206,.18),
               0 24px 48px -14px rgba(0,0,0,.65)!important;
  }

  /* Text contrast inside glass — white headings, porcelain body,
     dark text-shadow so copy stays crisp over bright bokeh */
  body.has-webgl .liquid-glass .name,
  body.has-webgl .liquid-glass h2,
  body.has-webgl .liquid-glass h3,
  body.has-webgl .liquid-glass .n{
    color:#FFFFFF!important;
    text-shadow:0 2px 10px rgba(4,8,16,.9),0 1px 3px rgba(4,8,16,.85);
  }
  body.has-webgl .liquid-glass .desc,
  body.has-webgl .liquid-glass p,
  body.has-webgl .liquid-glass .t{
    color:rgba(237,241,247,.92)!important;
    text-shadow:0 1px 8px rgba(4,8,16,.9),0 1px 2px rgba(4,8,16,.8);
  }
  body.has-webgl .liquid-glass .cat,
  body.has-webgl .liquid-glass .status,
  body.has-webgl .liquid-glass .pn,
  body.has-webgl .liquid-glass .label{
    color:rgba(237,241,247,.75)!important;
    text-shadow:0 1px 6px rgba(4,8,16,.9);
  }

  /* Reduced motion — no tilt transition */
  @media(prefers-reduced-motion:reduce){
    body.has-webgl .liquid-glass{transition:none!important}
  }

  /* ── Glass extension: arc steps, deploy console, sys-page sections ── */

  /* Preserve the amber "active" arc step state under the glass override */
  body.has-webgl .arc-step.on.liquid-glass{
    border-color:rgba(240,178,74,.65)!important;
    background:rgba(240,178,74,.07)!important;
  }
  body.has-webgl .arc-step.on.liquid-glass:hover{
    border-color:rgba(240,178,74,.85)!important;
    box-shadow:0 0 12px -2px rgba(240,178,74,.45),
               0 0 32px -6px rgba(240,178,74,.25),
               0 24px 48px -14px rgba(0,0,0,.65)!important;
  }

  /* Sys-page sections + deploy console: glass visual without hover glow —
     they're reading surfaces / a modal, not interactive cards */
  body.has-webgl .sys-sec.liquid-glass,
  body.has-webgl .deploy-console.liquid-glass{
    border-radius:16px;
  }
  body.has-webgl .sys-sec.liquid-glass:hover,
  body.has-webgl .deploy-console.liquid-glass:hover{
    background:rgba(255,255,255,.02)!important;
    border-color:rgba(255,255,255,.18)!important;
    box-shadow:0 10px 30px -12px rgba(0,0,0,.5)!important;
  }

  /* ── System page: per-system background layer ──
     Lives OUTSIDE .sys-page because sys-page has a transform,
     which breaks position:fixed for its descendants (they pin to
     the scrolled content instead of the viewport). This layer sits
     at z-index 189, just under sys-page (190), which goes
     transparent when the shader is active so the layer shows through. */
  .sys-bg-layer{
    position:fixed;inset:0;z-index:189;display:none;
    background-color:#080D18;
    background-image:linear-gradient(rgba(8,13,24,.55),rgba(8,13,24,.7)),var(--sys-bg,none);
    background-size:cover,cover;
    background-position:center,center;
    background-repeat:no-repeat,no-repeat;
  }
  .sys-bg-layer.on{display:block}
  body.has-webgl .sys-page{background:transparent}

  /* Glass sections on the system page — blur the real background layer */
  body.has-webgl .sys-page .sys-sec.liquid-glass{
    background:rgba(255,255,255,.02)!important;
    backdrop-filter:blur(12px) saturate(1.1)!important;
    -webkit-backdrop-filter:blur(12px) saturate(1.1)!important;
    border:1px solid rgba(255,255,255,.14)!important;
    box-shadow:0 10px 30px -12px rgba(0,0,0,.5)!important;
  }
  /* Text contrast on system-page glass */
  body.has-webgl .sys-page .sys-sec h2,
  body.has-webgl .sys-page .sys-sec h3,
  body.has-webgl .sys-page .sys-sec .sys-col-label{
    text-shadow:0 2px 10px rgba(4,8,16,.9),0 1px 3px rgba(4,8,16,.85);
  }
  body.has-webgl .sys-page .sys-sec li,
  body.has-webgl .sys-page .sys-sec p{
    text-shadow:0 1px 8px rgba(4,8,16,.85);
  }

  /* ══════════════════════════════════════════════════
     ROUND 2 — Outcomes · FAQ · CTA strips · Next steps
     ══════════════════════════════════════════════════ */

  /* ── Mid-page CTA strip ── */
  .cta-strip{
    display:flex;align-items:center;justify-content:space-between;
    gap:clamp(16px,3vw,32px);flex-wrap:wrap;
    margin-top:clamp(36px,5vw,56px);
    padding:clamp(20px,3vw,28px) clamp(20px,3vw,32px);
    border:1px solid var(--line-2);border-radius:14px;
    background:linear-gradient(100deg,rgba(240,178,74,.05),rgba(70,214,206,.04));
  }
  .cta-strip-text{
    font-family:var(--display);font-weight:600;
    font-size:clamp(15px,1.5vw,19px);color:var(--porcelain);
    letter-spacing:-.01em;margin:0;
  }
  @media(max-width:640px){
    .cta-strip{flex-direction:column;align-items:stretch;text-align:center}
    .cta-strip .btn{justify-content:center}
  }

  /* ── Business Outcomes ── */
  .outcomes{padding:clamp(56px,8vw,100px) 0;position:relative;z-index:1}
  .outcome-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:clamp(12px,1.6vw,18px);
    margin-top:clamp(28px,4vw,44px);
  }
  .outcome-card{padding:clamp(22px,3vw,32px);border:1px solid var(--line);border-radius:12px}
  .outcome-card h3{
    font-family:var(--display);font-weight:600;font-size:clamp(15px,1.5vw,18px);
    letter-spacing:-.01em;margin-bottom:10px;color:var(--porcelain);
  }
  .outcome-card p{font-size:14px;color:var(--mute);line-height:1.66;margin:0}
  @media(max-width:900px){.outcome-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:640px){.outcome-grid{grid-template-columns:1fr}}

  /* ── FAQ ── */
  .faq{padding:clamp(56px,8vw,100px) 0;position:relative;z-index:1}
  .faq-list{
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(10px,1.4vw,14px);
    margin-top:clamp(28px,4vw,44px);
    align-items:start;
  }
  .faq-item{
    border:1px solid var(--line);border-radius:11px;
    padding:clamp(16px,2vw,20px) clamp(18px,2.2vw,24px);
  }
  .faq-item summary{
    font-family:var(--display);font-weight:600;
    font-size:clamp(14px,1.35vw,16px);color:var(--porcelain);
    letter-spacing:-.005em;cursor:pointer;list-style:none;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    transition:color .2s;
  }
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{
    content:'+';font-family:var(--mono);font-size:17px;font-weight:400;
    color:var(--emit);flex-shrink:0;transition:transform .25s;
  }
  .faq-item[open] summary::after{transform:rotate(45deg)}
  .faq-item summary:hover{color:var(--emit)}
  .faq-item p{
    font-size:14px;color:var(--mute);line-height:1.68;
    margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);
  }
  @media(max-width:820px){.faq-list{grid-template-columns:1fr}}

  /* ── What happens next ── */
  .next-steps{
    display:flex;align-items:stretch;justify-content:center;
    gap:clamp(8px,1.2vw,14px);flex-wrap:wrap;
    margin:clamp(24px,3.5vw,36px) 0 clamp(28px,4vw,40px);
  }
  .next-step{
    flex:1 1 190px;max-width:250px;text-align:left;
    padding:clamp(16px,2vw,20px);
    border:1px solid var(--line-2);border-radius:11px;
    background:rgba(15,27,48,.35);
    display:flex;flex-direction:column;gap:6px;
  }
  .next-n{font-family:var(--mono);font-size:11px;color:var(--emit);letter-spacing:.1em}
  .next-t{
    font-family:var(--display);font-weight:600;font-size:14px;
    color:var(--porcelain);letter-spacing:-.005em;
  }
  .next-d{font-size:12.5px;color:var(--mute);line-height:1.5}
  .next-ar{
    align-self:center;color:var(--line-2);font-size:15px;flex-shrink:0;
  }
  @media(max-width:720px){
    .next-steps{flex-direction:column;align-items:stretch}
    .next-step{max-width:none}
    .next-ar{transform:rotate(90deg);margin:2px 0}
  }

  /* Glass treatment for the new panels */
  body.has-webgl .outcome-card.liquid-glass,
  body.has-webgl .faq-item.liquid-glass{border-radius:12px}