/* ===== Theme: Cyberpunk — design study. Loaded only on cyberpunk.html, after theme-sv.css.
   Roles: cyan = structure + accent, pink = problems / "before", volt = calls to action only. ===== */
:root{
  color-scheme:dark;
  --bg:#07060E; --surface:#0D0B19; --band:#0A0915; --white:#110E20; --panel:#171130;
  --line:rgba(var(--cy-rgb),.13); --line-2:rgba(var(--cy-rgb),.30);
  --navy:#F3F1FF; --navy-2:#FFFFFF; --ink:#FFFFFF;
  --text:#D5D2EA; --muted:#A3A0C2; --muted-2:#716D96;
  --brass:#00F0FF; --brass-2:#7CF8FF; --brass-soft:rgba(var(--cy-rgb),.12);
  --rust:#FF2E88; --rust-soft:rgba(var(--pk-rgb),.12);
  --volt:#FCEE0A; --ok:#3DFFA2;
  --display:'Chakra Petch','Instrument Sans',system-ui,sans-serif;
  --body:'IBM Plex Sans','Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:0px;
  --notch:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  --cy-rgb:0,240,255; --pk-rgb:255,46,136;
  --card:rgba(17,14,32,.86); --field:#0B0A18; --tint:rgba(255,255,255,.035); --tint2:rgba(255,255,255,.08);
  --hdr-bg:rgba(7,6,14,.80); --alt-bg:rgba(10,9,21,.6); --sunk:rgba(7,6,14,.55); --ftr-bg:#05040B;
  --aura:radial-gradient(1200px 600px at 50% -10%,rgba(124,40,255,.16),transparent 70%); --scan-o:.55;
}
body.cy{background:
  linear-gradient(rgba(var(--cy-rgb),.035) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,rgba(var(--cy-rgb),.035) 1px,transparent 1px) 0 0/48px 48px,
  var(--aura),
  var(--bg);color:var(--text);font-family:var(--body)}
body.cy::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.18) 2px 3px);mix-blend-mode:multiply;opacity:var(--scan-o)}
.cy ::selection{background:var(--rust);color:#fff}
.cy h1,.cy h2,.cy h3{font-family:var(--display);color:var(--ink)}
.cy :focus-visible{outline:2px solid var(--volt);outline-offset:3px}

/* ---------- header + HUD ---------- */
.cy .hdr{background:var(--hdr-bg);border-bottom:1px solid var(--line)}
.cy .hdr.is-stuck{border-bottom-color:var(--line-2);box-shadow:0 1px 0 rgba(var(--cy-rgb),.18),0 10px 30px -18px rgba(var(--cy-rgb),.35)}
.cy .logo{color:var(--ink)}
.cy .logo .name{font-family:var(--display);font-weight:700;letter-spacing:.14em;font-size:18px}
.cy .logo .by{font-family:var(--mono);color:var(--brass);letter-spacing:.14em;text-transform:uppercase;font-size:10.5px}
.cy .logo .mark{filter:drop-shadow(0 0 5px rgba(var(--cy-rgb),.6))}
.cy .logo .mark .gear-body{fill:var(--brass);stroke:none}
.cy .logo .mark .gear-hub{fill:var(--bg);stroke:none}
.cy .logo .mark .gear-pin{fill:var(--rust)}
.cy .nav{gap:2px}
.cy .nav a{color:var(--text);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;border-radius:0;white-space:nowrap;padding:10px 10px}
.cy .logo .by{white-space:nowrap}
.cy .nav a:hover{color:var(--brass);background:rgba(var(--cy-rgb),.06)}
.cy .nav .nav-alt{color:var(--volt)}
.cy .nav .nav-alt[aria-current]{box-shadow:inset 0 -2px 0 var(--volt)}
.cy .mnav{background:var(--bg)}
.cy .mnav a{color:var(--ink);font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:14px}
.hud{border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.hud .wrap{display:flex!important;height:30px!important;align-items:center;gap:22px;justify-content:space-between;overflow:hidden;white-space:nowrap}
.hud span{display:inline-flex;align-items:center;gap:8px}
.hud b{color:var(--brass);font-weight:500}
.hud .ok::before{content:"";width:6px;height:6px;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:cy-blink 1.6s steps(2) infinite}
.hud .grow{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
@media (max-width:900px){.hud .hide-s{display:none}}

/* ---------- buttons + links ---------- */
.cy .btn{background:var(--volt);color:#07060E;border:0;border-radius:0;clip-path:var(--notch);font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:14px;padding:15px 24px 15px 22px;box-shadow:none}
.cy .btn:hover{background:#FFF45C;transform:translateY(-1px);box-shadow:none;text-shadow:1.5px 0 var(--rust),-1.5px 0 var(--brass)}
.cy .btn.sm{padding:11px 18px 11px 16px;font-size:12.5px}
.cy .btn.ghost{background:transparent;color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}
.cy .btn.ghost:hover{background:var(--brass-soft);text-shadow:none}
.cy .link{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);font-weight:500}
.cy .link::after{color:var(--volt)}
.cy .pk-in .btn{background:var(--volt);color:#07060E}

/* ---------- type: headline white, subheading cyan, body lavender ---------- */
.cy .eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);font-weight:500}
.cy .hero3 h1{font-family:var(--display);font-weight:700;letter-spacing:-.005em;line-height:1.14;max-width:22ch;color:var(--ink);text-shadow:0 0 28px rgba(var(--cy-rgb),.22);position:relative}
.cy .hero3 .lead{color:var(--brass-2);font-family:var(--body);font-weight:400}
.cy .sec-title{font-family:var(--display);font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.cy .sec-sub{color:var(--brass);font-family:var(--body);font-weight:500}
.cy .sec-note,.cy .body-p,.cy .center-p,.cy .ps{color:var(--muted)}
.cy main{counter-reset:fold}
.cy .sec{counter-increment:fold;border-top:1px solid var(--line);background:linear-gradient(var(--brass),var(--brass)) 50% 0/140px 1px no-repeat}
.cy .sec.alt{background:linear-gradient(var(--brass),var(--brass)) 50% 0/140px 1px no-repeat,var(--alt-bg)}
.cy .sec-head::before{content:"// " counter(fold,decimal-leading-zero) " ——";display:block;font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--muted-2);margin-bottom:14px}

/* hero glitch: idle most of the time, short bursts */
/* every heading carries the signal: coloured ghosts tear behind crisp text */
.cy .hero3 h1[data-text],.cy .sec-title[data-text]{position:relative;isolation:isolate}
.cy .hero3 h1[data-text]::before,.cy .hero3 h1[data-text]::after,
.cy .sec-title[data-text]::before,.cy .sec-title[data-text]::after{
  content:attr(data-text);position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  padding:inherit;margin:0;text-shadow:none;text-wrap:inherit;letter-spacing:inherit;line-height:inherit}
.cy .hero3 h1[data-text]::before,.cy .sec-title[data-text]::before{color:var(--brass);animation:head-tear-a 4s steps(1) infinite var(--gd,1.2s)}
.cy .hero3 h1[data-text]::after,.cy .sec-title[data-text]::after{color:var(--rust);animation:head-tear-b 4s steps(1) infinite var(--gd,1.2s)}
.cy .hero3 h1[data-text]::before{animation-duration:3.4s}
.cy .hero3 h1[data-text]::after{animation-duration:3.4s}
@keyframes head-tear-a{
  0%,84%,100%{opacity:0;clip-path:inset(0 0 100% 0);transform:none}
  85%{opacity:1;clip-path:inset(6% 0 66% 0);transform:translate(-6px,-1px)}
  87%{opacity:1;clip-path:inset(44% 0 30% 0);transform:translate(5px,1px)}
  89%{opacity:1;clip-path:inset(74% 0 6% 0);transform:translate(-4px,0)}
  91%{opacity:0}}
@keyframes head-tear-b{
  0%,84.5%,100%{opacity:0;clip-path:inset(0 0 100% 0);transform:none}
  85.5%{opacity:.95;clip-path:inset(20% 0 52% 0);transform:translate(6px,1px)}
  87.5%{opacity:.95;clip-path:inset(58% 0 18% 0);transform:translate(-5px,-1px)}
  89.5%{opacity:.95;clip-path:inset(2% 0 84% 0);transform:translate(3px,0)}
  91.5%{opacity:0}}
@keyframes cy-blink{50%{opacity:.25}}

/* hero floor grid */
.cy .hero3{position:relative;overflow:hidden}
.cy .hero3::before{content:"";position:absolute;left:-30%;right:-30%;bottom:-2px;height:46%;pointer-events:none;z-index:0;
  background:linear-gradient(rgba(var(--cy-rgb),.22) 1px,transparent 1px) 0 0/100% 44px,linear-gradient(90deg,rgba(var(--cy-rgb),.16) 1px,transparent 1px) 50% 0/64px 100%;
  transform:perspective(420px) rotateX(62deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%);animation:cy-floor 3.2s linear infinite}
@keyframes cy-floor{to{background-position:0 44px,50% 0}}
.cy .hero3 .wrap{position:relative;z-index:1}

/* ---------- HUD bracket frame (shared) ---------- */
.cy .hero3 .bens-row li,.cy .pcard,.cy .pk-diag,.cy .ind-panel,.cy .build-col,.cy .step-c,.cy .stat,.cy .fcard,.cy .form,.cy .ba,.cy .sec-diagram,.cy .fl,.cy .stack,.cy .bench,.cy .mech-stage{
  --bc:rgba(var(--cy-rgb),.75);border:1px solid var(--line);border-radius:0;box-shadow:none;
  background:
   linear-gradient(var(--bc),var(--bc)) 0 0/12px 1px no-repeat,linear-gradient(var(--bc),var(--bc)) 0 0/1px 12px no-repeat,
   linear-gradient(var(--bc),var(--bc)) 100% 0/12px 1px no-repeat,linear-gradient(var(--bc),var(--bc)) 100% 0/1px 12px no-repeat,
   linear-gradient(var(--bc),var(--bc)) 0 100%/12px 1px no-repeat,linear-gradient(var(--bc),var(--bc)) 0 100%/1px 12px no-repeat,
   linear-gradient(var(--bc),var(--bc)) 100% 100%/12px 1px no-repeat,linear-gradient(var(--bc),var(--bc)) 100% 100%/1px 12px no-repeat,
   var(--card)}
/* pointer spotlight (set by cyber.js) */
.cy .pcard,.cy .step-c,.cy .build-col,.cy .stat,.cy .bens-row li{position:relative}
.cy .pcard::before,.cy .step-c::before,.cy .build-col::before,.cy .bens-row li::before{content:"";display:block;position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(var(--cy-rgb),.10),transparent 70%);mix-blend-mode:screen}
.cy .pcard:hover::before,.cy .step-c:hover::before,.cy .build-col:hover::before,.cy .bens-row li:hover::before{opacity:1}

/* ---------- gears (default = wireframe cyan) ---------- */
.cy .gear-body{fill:var(--bg);stroke:rgba(var(--cy-rgb),.8)}
.cy .gear-ring,.cy .gear-spoke{stroke:rgba(var(--cy-rgb),.45)}
.cy .gear-hub{fill:var(--bg);stroke:rgba(var(--cy-rgb),.8)}
.cy .gear-pin{fill:var(--rust)}
/* small solid icon gears */
.cy .bens .gear-body,.cy .step-c .gear-body,.cy .faqs summary .gear-body,.cy .step.on .gear-body,.cy .fl.on .gear-body{fill:var(--brass);stroke:var(--brass)}
.cy .bens .gear-hub,.cy .step-c .gear-hub,.cy .faqs summary .gear-hub,.cy .step.on .gear-hub,.cy .fl.on .gear-hub{fill:var(--bg);stroke:var(--brass)}
.cy .bens .gear-pin,.cy .step-c .gear-pin,.cy .faqs summary .gear-pin,.cy .step.on .gear-pin,.cy .fl.on .gear-pin{fill:var(--brass)}
.cy .bens i,.cy .step-c i,.cy .faqs summary i{filter:drop-shadow(0 0 4px rgba(var(--cy-rgb),.55))}
.cy .step .gear-body,.cy .step .gear-hub{fill:var(--bg);stroke:var(--line-2)}.cy .step .gear-pin{fill:var(--line-2)}
.cy .step.done .gear-body,.cy .step.done .gear-hub{fill:rgba(var(--cy-rgb),.35);stroke:rgba(var(--cy-rgb),.35)}.cy .step.done .gear-pin{fill:var(--bg)}

/* ---------- 01 hero machine ---------- */
.cy .machine svg{filter:drop-shadow(0 0 5px rgba(var(--cy-rgb),.28))}
.cy .m2-axis{stroke:var(--brass);stroke-opacity:.35}
.cy .m2-wall{stroke:var(--brass);stroke-opacity:.28}
.cy .m2-train .gear-body{fill:var(--field);stroke:var(--brass);stroke-width:1.6}
.cy .m2-train .gear-ring,.cy .m2-train .gear-spoke{stroke:rgba(var(--cy-rgb),.5)}
.cy .m2-train .gear-hub{fill:var(--field);stroke:var(--brass)}
.cy .m2-train .gear-pin{fill:var(--brass)}
.cy .m2-train .gear.m2-brass .gear-body{fill:rgba(var(--pk-rgb),.12);stroke:var(--rust);stroke-width:2}
.cy .m2-train .gear.m2-brass .gear-ring,.cy .m2-train .gear.m2-brass .gear-spoke{stroke:var(--rust)}
.cy .m2-train .gear.m2-brass .gear-hub{fill:var(--rust);stroke:var(--rust)}
.cy .m2-train .gear.m2-brass .gear-pin{fill:#07060E}
.cy .m2-name{fill:var(--ink);font-family:var(--display);font-weight:700;letter-spacing:.02em}
.cy .m2-verb{fill:var(--muted)}
.cy .m2-step-n{fill:#07060E}
.cy .m2-step-dot{fill:var(--brass)}
.cy .m2-step-t{fill:var(--text);fill-opacity:1}
.cy .m2-count-k{fill:var(--muted)}
.cy .m2-count-v{fill:var(--ink);font-family:var(--display)}
.cy .m2-lock-bg{fill:var(--field);stroke:var(--brass)}
.cy .m2-lock-body{fill:var(--brass)}
.cy .m2-lock-shackle{stroke:var(--brass)}
.cy .m2-tok rect{fill:var(--volt)}
.cy .m2-tok text{fill:#07060E}
.cy .hero3 .bens-row li b{color:var(--ink);font-family:var(--display)}
.cy .hero3 .bens-row li span{color:var(--muted)}

/* ---------- 02 problems checklist ---------- */
.cy .pk-list label{background:var(--card);border:1px solid var(--line);border-radius:0;color:var(--text)}
.cy .pk-list label:hover{border-color:var(--line-2)}
.cy .pk-list label.on{border-color:var(--rust);box-shadow:inset 0 0 0 1px var(--rust),0 0 26px -10px rgba(var(--pk-rgb),.7)}
.cy .pk-list i{border:1.5px solid var(--line-2);border-radius:0;background:transparent}
.cy .pk-list label.on i{background:var(--rust);border-color:var(--rust)}
.cy .pk-list .tag{color:var(--rust);font-family:var(--mono);letter-spacing:.06em}
.cy .pk-hd{color:var(--ink);border-bottom-color:var(--line);font-family:var(--display)}
.cy .pk-hd span{color:var(--muted);font-family:var(--mono)}
.cy .pk-meter i{background:var(--tint2);border-radius:0}
.cy .pk-meter i.on{background:var(--brass);box-shadow:0 0 8px rgba(var(--cy-rgb),.6)}
.cy .pk-meter i.hot{background:var(--rust);box-shadow:0 0 8px rgba(var(--pk-rgb),.7)}
.cy .pk-cause{border-color:var(--line);border-radius:0;color:var(--muted-2)}
.cy .pk-cause.on{color:var(--text);border-color:var(--line-2);background:rgba(var(--cy-rgb),.05)}
.cy .pk-p{background:transparent;border-color:var(--line);color:var(--muted-2);border-radius:0;font-family:var(--mono)}
.cy .pk-cause.on .pk-p{background:var(--brass);color:#07060E;border-color:var(--brass)}
.cy .pk-in{background:var(--panel);color:var(--text);border-top:1px solid var(--rust)}
.cy .pk-in b{color:var(--ink);font-family:var(--display)}
.cy .pk-in p{color:var(--muted)}
.cy .pk-photo{background:#000}
.cy .pk-photo img,.cy .ind-photo img,.cy .photo img{filter:saturate(.75) contrast(1.12) brightness(.82)}
.cy .pk-photo::after{background:linear-gradient(135deg,rgba(var(--cy-rgb),.16),rgba(var(--pk-rgb),.20)),linear-gradient(180deg,rgba(7,6,14,0) 38%,rgba(7,6,14,.88))}
.cy .pk-photo span{color:#fff;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em}

/* ---------- 03 products ---------- */
.cy .train-ribbon svg{filter:drop-shadow(0 0 5px rgba(var(--cy-rgb),.3))}
.cy .train-ribbon .lbl{fill:var(--ink);font-family:var(--display);font-weight:700;letter-spacing:.04em}
.cy .train-ribbon .lbl.on{fill:var(--brass)}
.cy .train-ribbon .lbl2{fill:var(--muted);font-family:var(--mono);letter-spacing:.08em}
.cy .train-ribbon .gear.on .gear-body{fill:var(--brass);stroke:var(--brass)}
.cy .train-ribbon .gear.on .gear-hub{fill:#07060E;stroke:var(--brass)}
.cy .train-ribbon .gear.on .gear-ring,.cy .train-ribbon .gear.on .gear-spoke{stroke:#07060E}
.cy .train-ribbon .gear.on .gear-pin{fill:var(--rust)}
.cy .train-ribbon .gear:hover .gear-body{fill:var(--brass-soft)}
.cy .train-ribbon .gear.on:hover .gear-body{fill:var(--brass)}
.cy .train-ribbon .shaft{stroke:rgba(var(--cy-rgb),.22)}
.cy .train-ribbon .shaft2{stroke:var(--bg)}
.cy .pcard .k{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;color:var(--brass)}
.cy .pcard h3{color:var(--ink)}
.cy .pcard p{color:var(--muted)}
.cy .pcard.on{--bc:var(--volt);border-color:var(--line-2);box-shadow:inset 0 0 0 1px rgba(var(--cy-rgb),.55),0 0 30px -10px rgba(var(--cy-rgb),.45)}
.cy .ba-head{border-bottom-color:var(--line)}
.cy .ba-tabs{background:transparent;border:1px solid var(--line);border-radius:0}
.cy .ba-tab{color:var(--muted);border-radius:0;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.cy .ba-tab:hover{color:var(--brass)}
.cy .ba-tab.on{background:var(--brass);color:#07060E}
.cy .sw{color:var(--muted);font-family:var(--mono)}
.cy .sw i{background:var(--tint2);border-radius:0}
.cy .sw i::after{border-radius:0;background:#fff;box-shadow:none}
.cy .sw input:checked+i{background:var(--brass)}
.cy .sw input:checked+i::after{background:#07060E}
.cy .ba-before{background:repeating-linear-gradient(45deg,rgba(var(--pk-rgb),.06) 0 10px,transparent 10px 20px),var(--surface);color:var(--text)}
.cy .ba-after{background:var(--panel);color:var(--text)}
.cy .ba .lbl{color:var(--muted)}
.cy .ba-before .lbl b{color:var(--rust)}
.cy .ba-after .lbl b{color:var(--brass)}
.cy .ba-list li,.cy .ba-cols div,.cy .ba-diff{background:var(--tint);border-color:var(--line);border-radius:0;color:var(--muted)}
.cy .ba-list li em,.cy .ba-cols div strong,.cy .ba-diff .del{color:var(--rust)}
.cy .ba-after .ba-list li em,.cy .ba-after .ba-cols div strong,.cy .ba-diff .add{color:var(--ok)}
.cy .ba-cols div b,.cy .ba-diff .meta{color:var(--muted-2)}
.cy .ba-line{background:var(--brass);box-shadow:0 0 12px var(--brass)}
.cy .ba-line::after{background:var(--brass);color:#07060E;border-radius:0;box-shadow:0 0 16px rgba(var(--cy-rgb),.6)}
.cy .ba-line::before{border-radius:0}
.cy .ba-hint{background:var(--panel);color:var(--ink);border:1px solid var(--line-2);border-radius:0;box-shadow:none;font-family:var(--mono);letter-spacing:.06em}
.cy .ba-hint span{color:var(--brass)}
.cy .hint{color:var(--muted-2);font-family:var(--mono)}

/* ---------- 04 build board ---------- */
.cy .build-hd{color:var(--ink);border-bottom-color:var(--line);font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:12.5px}
.cy .build .dot{border-radius:0;box-shadow:0 0 8px currentColor;color:var(--brass)}
.cy .build .dot.des{background:var(--muted-2);color:transparent}
.cy .build .dot.live{background:var(--ok);color:var(--ok)}
.cy .build-item{border-bottom-color:var(--line)}
.cy .build-item b{color:var(--ink)}
.cy .build-item span{color:var(--muted)}
.cy .build-item i{background:transparent;border-color:var(--line-2);color:var(--brass);border-radius:0;font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.cy .build-empty{color:var(--text)}
.cy .build-foot{color:var(--muted);border-top-color:var(--line-2)}

/* ---------- 05 industries ---------- */
.cy .ind-hint{color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:11.5px}
.cy .ind-list{border-top-color:var(--line)}
.cy .ind-list .ind{color:var(--text);border-bottom-color:var(--line)}
.cy .ind-list .ind:hover{background:rgba(var(--cy-rgb),.05);color:var(--brass)}
.cy .ind-list .ind.on{background:rgba(var(--cy-rgb),.08);color:var(--ink)}
.cy .ind-list .ind::before{background:var(--brass);box-shadow:0 0 10px var(--brass)}
.cy .ind-head{border-bottom-color:var(--line)}
.cy .ind-head h3{color:var(--ink)}
.cy .ind-head .live{color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:11px}
.cy .ind-head .live i{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.cy .ind-photo{position:relative;border-radius:0;background:#000}
.cy .ind-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(var(--cy-rgb),.14),rgba(var(--pk-rgb),.18));pointer-events:none}
.cy .ind-k{color:var(--brass);font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.cy .feeds li{background:var(--tint);border-color:var(--line);border-radius:0;color:var(--text)}
.cy .feeds li::before{background:var(--ok);border-radius:0;box-shadow:0 0 6px var(--ok)}
.cy .feeds li em{color:var(--muted)}
.cy .ind-bottom{background:var(--sunk);border-top-color:var(--line)}
.cy .ind-start{color:var(--ink);font-family:var(--display)}
.cy .ind-startv{color:var(--muted)}
.cy .ind-rem{color:var(--text)}

/* ---------- where it runs ---------- */
.cy .sec-diagram svg{filter:drop-shadow(0 0 4px rgba(var(--cy-rgb),.22))}
.cy .dg-perim-fill{fill:rgba(var(--cy-rgb),.04)}
.cy .dg-perim{stroke:var(--brass)}
.cy .dg-txt{fill:var(--muted);font-family:var(--mono)}
.cy .dg-h{fill:var(--ink);font-family:var(--display)}
.cy .dg-sm{fill:var(--muted)}
.cy .dg-tag{fill:var(--field);stroke:var(--line-2)}
.cy .dg-lock{stroke:var(--brass)}
.cy .dg-cut{stroke:var(--rust)}
.cy [data-diagram] text[style*="0B1D36"]{fill:var(--text)!important}
.cy [data-diagram] rect[stroke="#B8902F"]{stroke:var(--brass)}
.cy [data-diagram] circle[fill="#FFFDF8"]{fill:var(--field);stroke:var(--brass)}
.cy [data-diagram] rect[fill="#0B1D36"]{fill:var(--brass)}
.cy [data-diagram] rect[fill="#0B1D36"][width="100"]{fill:rgba(var(--pk-rgb),.16);stroke:var(--rust)}
.cy [data-diagram] line[stroke="#0B1D36"]{stroke:var(--rust)}
.cy [data-diagram] circle[stroke="#B8902F"]{stroke:var(--rust)}
.cy [data-diagram] circle[fill="#F6F1E6"]{fill:var(--field)}
.cy .ticks li{color:var(--text)}
.cy .ticks li b{color:var(--ink)}
.cy .ticks li::before{background:var(--brass);border-radius:0}

/* ---------- lifecycle ---------- */
.cy .step-c b{color:var(--ink);font-family:var(--display)}
.cy .step-c p{color:var(--muted)}

/* ---------- team ---------- */
.cy .stat b{color:var(--ink);font-family:var(--display);font-weight:700}
.cy .stat b small{color:var(--brass)}
.cy .stat>span{color:var(--muted)}
.cy .fcard .k{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:11px;color:var(--brass)}
.cy .fcard h3{color:var(--ink)}
.cy .fcard p{color:var(--muted)}
.cy .photo{border-radius:0}
.cy .photo .ph{background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(var(--cy-rgb),.07) 9px 10px),var(--field);color:var(--muted)}
.cy .photo .ph b{color:var(--ink)}
.cy .photo .ph .face{border-color:rgba(var(--cy-rgb),.45)}
.cy .photo .ph .face::before,.cy .photo .ph .face::after{background:rgba(var(--cy-rgb),.25)}
.cy .photo figcaption{background:linear-gradient(180deg,transparent,rgba(7,6,14,.85));color:#fff}

/* ---------- form ---------- */
.cy .step{border-color:var(--line);border-radius:0;color:var(--muted-2)}
.cy .step.on{border-color:var(--brass);color:var(--brass);background:transparent}
.cy .step.done{color:var(--muted)}
.cy .q{color:var(--ink);font-family:var(--display)}
.cy .lab{color:var(--muted)}
.cy .help{color:var(--muted-2)}
.cy .opt{border-color:var(--line);border-radius:0;color:var(--muted)}
.cy .opt:hover{border-color:var(--line-2);background:rgba(var(--cy-rgb),.04)}
.cy .opt.on{border-color:var(--brass);color:var(--ink);background:rgba(var(--cy-rgb),.07)}
.cy .opt i{border-radius:0;background:transparent;border-color:var(--line-2)}
.cy .opt i::after{border-color:#07060E}
.cy .opt.on i{background:var(--brass);border-color:var(--brass)}
.cy .rad{background:transparent;border-color:var(--line);border-radius:0;color:var(--muted)}
.cy .rad.on{border-color:var(--brass);color:var(--ink);background:rgba(var(--cy-rgb),.07)}
.cy .rad i{border-radius:0}
.cy .rad.on i{border-color:var(--brass);background:radial-gradient(circle,var(--brass) 45%,transparent 50%)}
.cy .field input{background:var(--field);border-color:var(--line-2);border-radius:0;color:var(--ink);font-family:var(--mono)}
.cy .field input::placeholder{color:var(--muted-2)}
.cy .field input:focus{border-color:var(--brass);box-shadow:0 0 0 3px rgba(var(--cy-rgb),.15)}
.cy .back{color:var(--muted);font-family:var(--mono)}
.cy .done-state h4{color:var(--ink);font-family:var(--display)}
.cy .meet{color:var(--muted)}
.cy .meet b{color:var(--ink)}
.cy .meet .photo{border-color:var(--bg);box-shadow:none}

/* ---------- FAQ ---------- */
.cy .faqs details{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0}
.cy .faqs details[open]{border-color:var(--line-2)}
.cy .faqs summary{color:var(--ink);font-family:var(--display);font-weight:600}
.cy .faqs summary:hover,.cy .faqs details[open] summary{color:var(--brass)}
.cy .faqs details p{color:var(--muted)}

/* ---------- footer ---------- */
.cy .ftr{background:var(--ftr-bg);border-top:1px solid var(--line-2);color:var(--muted)}
.cy .ftr .brand .logo{color:var(--ink)}
.cy .ftr .brand .logo .by{color:var(--brass)}
.cy .ftr .brand .logo .mark .gear-body{fill:var(--brass)}
.cy .ftr .brand .logo .mark .gear-hub{fill:var(--ftr-bg)}
.cy .ftr .brand p{color:var(--muted)}
.cy .ftr b{color:var(--brass);font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.cy .ftr .cols a,.cy .ftr .cols span{color:var(--text)}
.cy .ftr .cols a:hover{color:var(--brass);text-decoration-color:var(--rust)}
.cy .ftr .base{border-top-color:var(--line);color:var(--muted-2)}

@media (prefers-reduced-motion:reduce){
  .cy .hero3::before,.cy .hero3 h1[data-text]::before,.cy .hero3 h1[data-text]::after,
  .cy .sec-title[data-text]::before,.cy .sec-title[data-text]::after,.hud .ok::before{animation:none}
}

/* =====================================================================
   LIGHT BASES — html.cyl, set before paint from ?base=white|creme.
   Neon cyan can't be read on a light ground, so text accents go deep
   teal / magenta; true neon survives only on the black blocks (HUD,
   buttons, footer, the diagnosis reveal).
   ===================================================================== */
html.cyl{
  color-scheme:light;
  --bg:#FFFFFF; --surface:#F2F4F7; --band:#F7F8FA; --white:#FFFFFF; --panel:#E4F5F7;
  --line:rgba(10,10,18,.11); --line-2:rgba(10,10,18,.24);
  --navy:#0A0A12; --navy-2:#000000; --ink:#0A0A12;
  --text:#2A2838; --muted:#57546E; --muted-2:#85829A;
  --brass:#00889B; --brass-2:#006B7A; --brass-soft:rgba(0,136,155,.10);
  --rust:#D90F69; --ok:#00855A; --volt:#FCEE0A;
  --cy-rgb:0,136,155; --pk-rgb:217,15,105;
  --card:#FFFFFF; --field:#FFFFFF; --tint:rgba(10,10,18,.03); --tint2:rgba(10,10,18,.09);
  --hdr-bg:rgba(255,255,255,.86); --alt-bg:#F7F8FA; --sunk:#F2F4F7; --ftr-bg:#0B0B14;
  --aura:radial-gradient(1100px 520px at 50% -12%,rgba(0,200,220,.10),transparent 70%); --scan-o:.12;
  --blk:#0B0B14; --neon:#00F0FF; --neon-pk:#FF2E88;
}
html.cyl[data-base="creme"]{
  --bg:#F3EDE1; --surface:#EAE2D2; --band:#EFE8DB; --white:#FBF8F1; --panel:#E1EEE8;
  --line:rgba(46,34,12,.12); --line-2:rgba(46,34,12,.26);
  --text:#2E2A33; --muted:#5C5664; --muted-2:#8B8490;
  --card:#FBF8F1; --field:#FFFDF8; --tint:rgba(46,34,12,.035); --tint2:rgba(46,34,12,.09);
  --hdr-bg:rgba(243,237,225,.88); --alt-bg:#EEE7D9; --sunk:#EAE2D2;
  --aura:radial-gradient(1100px 520px at 50% -12%,rgba(217,15,105,.07),transparent 70%);
}
/* glow filters read as smudges on light grounds */
html.cyl .cy .logo .mark,html.cyl .cy .machine svg,html.cyl .cy .train-ribbon svg,html.cyl .cy .sec-diagram svg,
html.cyl .cy .bens i,html.cyl .cy .step-c i,html.cyl .cy .faqs summary i{filter:none}
html.cyl .cy .hero3 h1{text-shadow:none}
html.cyl .cy .hdr.is-stuck{box-shadow:0 1px 0 var(--line-2)}
/* black blocks keep real neon */
html.cyl .cy .btn{background:var(--blk);color:var(--volt)}
html.cyl .cy .btn:hover{background:var(--volt);color:var(--blk);text-shadow:none}
html.cyl .cy .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
html.cyl .cy .btn.ghost:hover{background:var(--volt)}
html.cyl .cy .link::after{color:var(--rust)}
html.cyl .cy .nav .nav-alt{color:var(--rust)}
html.cyl .cy .nav .nav-alt[aria-current]{box-shadow:inset 0 -2px 0 var(--rust)}
html.cyl .cy .pcard.on{--bc:var(--rust)}
html.cyl .cy .m2-tok rect{stroke:var(--blk);stroke-width:1}
html.cyl .cy [data-diagram] text[style*="E9E3D3"]{fill:var(--rust)!important}
html.cyl .hud{background:var(--blk);border-top:0;color:#8A87A8}
html.cyl .hud b{color:var(--neon)}
html.cyl .hud .ok::before{background:#3DFFA2;box-shadow:0 0 8px #3DFFA2}
html.cyl .hud .grow{background:linear-gradient(90deg,rgba(0,240,255,.45),transparent)}
html.cyl .cy .pk-in{background:var(--blk);border-top-color:var(--neon-pk)}
html.cyl .cy .pk-in b{color:#fff}
html.cyl .cy .pk-in p{color:#A9A6C2}
html.cyl .cy .pk-in .btn{background:var(--volt);color:var(--blk)}
html.cyl .cy .ftr{background:var(--blk);border-top:0;color:#A9A6C2}
html.cyl .cy .ftr .brand .logo{color:#fff}
html.cyl .cy .ftr .brand .logo .by,html.cyl .cy .ftr b{color:var(--neon)}
html.cyl .cy .ftr .brand .logo .mark .gear-body{fill:var(--neon)}
html.cyl .cy .ftr .brand p{color:#A9A6C2}
html.cyl .cy .ftr .cols a,html.cyl .cy .ftr .cols span{color:#D5D2EA}
html.cyl .cy .ftr .cols a:hover{color:var(--neon);text-decoration-color:var(--neon-pk)}
html.cyl .cy .ftr .base{border-top-color:rgba(0,240,255,.15);color:#716D96}

/* base switch (HUD) */
.base-sw{gap:4px!important}
.base-sw button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--muted-2);padding:3px 7px;border:1px solid transparent;line-height:1}
.base-sw button:hover{color:var(--brass)}
.base-sw button[aria-pressed="true"]{color:#07060E;background:var(--brass);border-color:var(--brass)}
html.cyl .base-sw button{color:#8A87A8}
html.cyl .base-sw button:hover{color:var(--neon)}
html.cyl .base-sw button[aria-pressed="true"]{color:var(--blk);background:var(--neon);border-color:var(--neon)}

/* home page styles menu */
.cy .nav button{color:var(--text);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;border-radius:0;white-space:nowrap;padding:10px 10px}
.cy .nav button:hover,.cy .nav li:focus-within>button{color:var(--brass);background:rgba(var(--cy-rgb),.06)}
.cy .nav button.nav-alt{color:var(--volt)}
html.cyl .cy .nav button.nav-alt{color:var(--rust)}
.cy .nav svg{color:currentColor}
.cy .menu{background:var(--field);border:1px solid var(--line-2);border-radius:0;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.cy .menu a{border-radius:0;text-transform:none;letter-spacing:0;font-family:var(--body);white-space:normal}
.cy .menu a:hover{background:rgba(var(--cy-rgb),.07)}
.cy .menu a span{color:var(--ink);font-family:var(--display)}
.cy .menu a small{color:var(--muted)}

/* ---------- platform pages ---------- */
.cy .isnot>div{border-radius:0;border:1px solid var(--line);background:var(--tint)}
.cy .isnot .is{background:rgba(var(--cy-rgb),.07);border-color:var(--line-2)}
.cy .isnot .cs-lbl{font-family:var(--mono);letter-spacing:.14em;font-weight:500}
.cy .isnot .is .cs-lbl{color:var(--brass)}
.cy .isnot .isnt .cs-lbl{color:var(--muted)}
.cy .isnot li{color:var(--text)}
.cy .isnot .is li::before{background:var(--brass)}
.cy .isnot .isnt li::before{background:var(--muted-2)}
.cy .fl{border-radius:0}
.cy .fl.on{opacity:1;border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}
.cy .fl b{color:var(--ink)}
.cy .fl span{color:var(--muted)}
.cy .stack .cs-lbl{color:var(--brass);font-family:var(--mono);letter-spacing:.14em;font-weight:500}
.cy .stack-l{color:var(--ink);font-family:var(--mono)}
.cy .stack-n{color:var(--muted);border-top-color:var(--line-2)}
.cy .bench-n{color:var(--ink);font-family:var(--display);font-weight:700}
.cy .bench-t{color:var(--text)}
.cy .bench-s{color:var(--muted)}
.cy .cta-card{background:var(--panel);border-color:var(--line-2)}
.cy .cta-card .k{color:var(--brass)}
.cy .cta-card h3,.cy .cta-card .link{color:var(--ink)}
.cy .lp-next .pcard h3{color:var(--ink)}
.cy .mech-note{color:var(--muted-2);font-family:var(--mono);font-size:12.5px}
.cy .mech-stage svg text{font-family:var(--mono)}
html.cyl .cy .cta-card h3,html.cyl .cy .cta-card .link{color:var(--ink)}
.cy .benefit{color:var(--ink);font-family:var(--display);font-weight:700}
.cy .walk li{color:var(--text)}
.cy .walk li::before{color:var(--brass)}
.cy .walk-note{color:var(--muted-2);border-top-color:var(--line-2)}
.cy .pk-verdict{color:var(--muted);border-top-color:var(--line)}
.cy .pk-verdict b{color:var(--ink)}
.cy .practice .build-col{max-width:none}
.cy .ticks.who b{color:var(--ink)}
.cy .nav a[aria-current]{color:var(--brass);box-shadow:inset 0 -2px 0 var(--brass)}
.cy .field textarea{background:var(--field);border-color:var(--line-2);border-radius:0;color:var(--ink);font-family:var(--mono);font-size:14px}
.cy .field textarea::placeholder{color:var(--muted-2)}
.cy .field textarea:focus{border-color:var(--brass);box-shadow:0 0 0 3px rgba(var(--cy-rgb),.15)}

/* ---------- photography: no frames, edges dissolved into the page ---------- */
.cy .photo,.cy .ind-photo,.cy .pk-photo{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.cy .photo:not(.round){aspect-ratio:auto}
.cy .photo::before,.cy .photo::after,.cy .hudshot .corner,.cy .hudshot .meta,
.cy .hudshot::before,.cy .hudshot::after,.cy .pk-photo::after{display:none}
.cy .photo:not(.round) img,.cy .ind-photo img,.cy .pk-photo img{
  width:100%;height:auto;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);
          mask-composite:intersect}
.cy .photo.r169 img{aspect-ratio:16/9;object-fit:cover}
.cy .photo.r45 img{aspect-ratio:4/5;object-fit:cover}
.cy .pk-photo{aspect-ratio:auto}
.cy .pk-photo img{aspect-ratio:16/8;object-fit:cover}
.cy .ind-photo{aspect-ratio:auto;min-height:0}
.cy .ind-photo img{aspect-ratio:3/4;object-fit:cover}
/* captions step out of the picture and sit under it */
.cy .photo figcaption,.cy .pk-photo span{position:static;inset:auto;background:none;text-shadow:none;
  display:block;padding:12px 2px 0;color:var(--muted);font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;text-align:left}
.cy .pk-photo span{padding:12px 22px 0}
.cy .photo:hover img{transform:none}
/* placeholders keep their footprint until the photograph arrives */
.cy .photo.is-missing:not(.round){min-height:230px;position:relative}
.cy .photo.is-missing .ph{position:absolute;inset:0}
.cy .ind-photo.is-missing{min-height:260px}
@media (max-width:900px){.cy .ind-photo img{aspect-ratio:16/7}}

/* ---------- phones ---------- */
@media (max-width:640px){
  .cy .build-item{grid-template-columns:1fr;gap:4px}
  .cy .build-item i{grid-column:1;grid-row:auto;justify-self:start;margin-top:4px}
  .cy .sec-head::before{margin-bottom:10px}
  .cy .hud .wrap{gap:10px}
  .cy .base-sw button{padding:3px 8px}
  .cy .photo figcaption,.cy .pk-photo span{font-size:12px;padding-top:10px}
  .cy .pk-photo span{padding-left:18px;padding-right:18px}
  .cy .stack-chips span{font-size:11.5px;padding:4px 8px}
  .cy .badges b{font-size:9px;padding:3px 7px}
  .cy .isnot>div{padding:20px 18px}
  .cy .ticks li,.cy .isnot li{font-size:15px}
}
/* grid children must be allowed to shrink, or the scroller sets the page width */
.cy .ind-layout,.cy .ind-side,.cy .ind-panel,.cy .ind-list,.cy .ind-body,.cy .g2,.cy .g3,.cy .g4{min-width:0}
.cy .ind-list{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cy .ind-list::-webkit-scrollbar{display:none}
@media (max-width:480px){
  .cy .hud .base-sw{font-size:0}          /* drop the word, keep the control */
  .cy .hud .base-sw button{font-size:9px;padding:3px 7px}
  .cy .hud .wrap{gap:8px}
}
@media (max-width:640px){
  .cy .ba-hint{font-size:10.5px;white-space:normal;max-width:calc(100% - 28px);text-align:center;padding:7px 10px}
  .cy .ba-body{height:340px}
  .cy .ba-after,.cy .ba-before{padding:18px 16px}
}

/* ---------- founder portraits: CRT signal ---------- */
.cy [data-photo^="founder-"]{position:relative;background:#05070a;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-composite:intersect}
.cy [data-photo^="founder-"] img{aspect-ratio:4/5;object-fit:cover;-webkit-mask-image:none;mask-image:none;
  animation:crt-hold 3.1s steps(1) infinite;will-change:transform,filter}
/* scanlines, rolling */
.cy [data-photo^="founder-"]::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;display:block;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.32) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;opacity:.65;
  animation:crt-roll 1.8s linear infinite}
/* a bright band sweeping the signal */
.cy [data-photo^="founder-"]::after{content:"";position:absolute;left:0;right:0;height:24%;z-index:4;pointer-events:none;display:block;
  background:linear-gradient(180deg,transparent,rgba(0,136,155,.22),transparent);animation:crt-sweep 5.5s linear infinite}
.cy .fcard:nth-child(2) [data-photo^="founder-"]::after{animation-delay:1.9s}
.cy .fcard:nth-child(2) [data-photo^="founder-"] img{animation-delay:1.05s}
.cy .fcard:nth-child(3) [data-photo^="founder-"]::after{animation-delay:3.7s}
.cy .fcard:nth-child(3) [data-photo^="founder-"] img{animation-delay:2.1s}
/* hover locks the signal: the person comes back in full colour */
.cy [data-photo^="founder-"]:hover img{animation:none;filter:none;transform:none}
.cy [data-photo^="founder-"]:hover::before{opacity:.18}
.cy [data-photo^="founder-"]:hover::after{opacity:0}
@keyframes crt-roll{to{background-position:0 9px}}
@keyframes crt-sweep{0%{top:-24%}100%{top:100%}}
@keyframes crt-hold{
  0%,83%{filter:grayscale(1) contrast(1.2) brightness(.95) sepia(.35) hue-rotate(140deg) saturate(2.2);transform:none}
  84%{filter:grayscale(1) contrast(1.4) brightness(1.12) sepia(.5) hue-rotate(140deg) saturate(3.2);transform:translateX(-5px) skewX(-.6deg)}
  86%{filter:grayscale(1) contrast(1.2) brightness(.92) sepia(.65) hue-rotate(300deg) saturate(3.4);transform:translateX(4px)}
  88%{filter:grayscale(1) contrast(1.5) brightness(1.06) sepia(.35) hue-rotate(140deg) saturate(2.6);transform:translateX(-2px) skewX(.4deg)}
  90%{filter:grayscale(1) contrast(1.2) brightness(.95) sepia(.35) hue-rotate(140deg) saturate(2.2);transform:translateX(1px)}
  91%,100%{filter:grayscale(1) contrast(1.2) brightness(.95) sepia(.35) hue-rotate(140deg) saturate(2.2);transform:none}}
@media (prefers-reduced-motion:reduce){
  .cy [data-photo^="founder-"] img{animation:none;filter:grayscale(1) contrast(1.2) brightness(.95) sepia(.35) hue-rotate(140deg) saturate(2.2)}
  .cy [data-photo^="founder-"]::before,.cy [data-photo^="founder-"]::after{animation:none}
  .cy [data-photo^="founder-"]::after{display:none}}
/* the small round faces stay simple */
.cy .photo.round{background:transparent;-webkit-mask-image:none;mask-image:none}
.cy .photo.round img{filter:grayscale(1) contrast(1.1);animation:none}