/* Coriq — styles. Tokens at the top. */
/* Layout: one fixed WebGL stage (head + spine) behind a tall scroll of panels that alternate sides; camera descends the spine as you scroll. Dark-first with a light theme: tokens below, light values under prefers-color-scheme:light and [data-theme=light]. */
:root{
  --bg:#05070b;
  --bg-2:#0a0e15;
  --fg:#dbe5ee;
  --dim:#7f8d9c;
  --ice:#8be9ff;
  --copper:#e38a4c;
  --line:rgba(139,233,255,.16);
  --panel:rgba(6,9,14,.62);
  --panel-m:rgba(6,9,14,.78);
  --text-2:#b9c6d2;
  --ink:#041016;
  --ice-hover:#c2f4ff;
  --btn-bg:rgba(6,9,14,.5);
  --field-bg:rgba(6,9,14,.65);
  --bar:rgba(5,7,11,.85);
  --bar-0:rgba(5,7,11,0);
  --vignette:rgba(0,0,0,.65);
  --scan:rgba(255,255,255,.018);
  --tick:rgba(139,233,255,.35);
  --glow-bg:#10202b;
  --scene:dark;
  --f-display:"Chakra Petch","Eurostile","Arial Narrow",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#e8edf2;
  --bg-2:#dde4eb;
  --fg:#0c1722;
  --dim:#56636f;
  --ice:#06789e;
  --copper:#b4561a;
  --line:rgba(6,120,158,.22);
  --panel:rgba(242,246,249,.72);
  --panel-m:rgba(242,246,249,.88);
  --text-2:#2b3946;
  --ink:#ffffff;
  --ice-hover:#0a8fbb;
  --btn-bg:rgba(255,255,255,.55);
  --field-bg:rgba(255,255,255,.8);
  --bar:rgba(232,237,242,.9);
  --bar-0:rgba(232,237,242,0);
  --vignette:rgba(150,165,180,.45);
  --scan:rgba(0,20,40,.025);
  --tick:rgba(6,120,158,.35);
  --glow-bg:#ffffff;
  --scene:light;
  color-scheme:light;
}}
:root[data-theme="light"]{
  --bg:#e8edf2;
  --bg-2:#dde4eb;
  --fg:#0c1722;
  --dim:#56636f;
  --ice:#06789e;
  --copper:#b4561a;
  --line:rgba(6,120,158,.22);
  --panel:rgba(242,246,249,.72);
  --panel-m:rgba(242,246,249,.88);
  --text-2:#2b3946;
  --ink:#ffffff;
  --ice-hover:#0a8fbb;
  --btn-bg:rgba(255,255,255,.55);
  --field-bg:rgba(255,255,255,.8);
  --bar:rgba(232,237,242,.9);
  --bar-0:rgba(232,237,242,0);
  --vignette:rgba(150,165,180,.45);
  --scan:rgba(0,20,40,.025);
  --tick:rgba(6,120,158,.35);
  --glow-bg:#ffffff;
  --scene:light;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.6;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.no-webgl{background:radial-gradient(ellipse at 50% 20%,var(--glow-bg) 0%,var(--bg) 60%)}
a{color:inherit}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px}

/* stage */
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.veil{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse at center,transparent 45%,var(--vignette) 100%),
    repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px)}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
header{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:18px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));
  background:linear-gradient(to bottom,var(--bar),var(--bar-0))}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{width:28px;height:28px}
.brand span{font-family:var(--f-display);font-weight:600;font-size:20px;letter-spacing:.32em}
nav{display:flex;gap:28px;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
nav a{text-decoration:none;color:var(--dim);transition:color .2s}
nav a:hover{color:var(--ice)}

/* HUD */
.hud{position:fixed;z-index:4;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;pointer-events:none}
.hud-bl{left:max(24px,env(safe-area-inset-left,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));display:grid;gap:4px}
.hud-bl b{color:var(--ice);font-weight:500}
.hud-bl .row{display:flex;gap:10px}
.hud-bl .k{width:72px}

/* spine index */
.index{position:fixed;z-index:4;right:max(22px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.index::before{content:"";position:absolute;right:5px;top:0;bottom:0;width:1px;background:var(--line)}
.index a{position:relative;display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:transparent;height:8px}
.index a i{display:block;width:11px;height:1px;background:var(--tick);transition:all .3s}
.index a.named{color:var(--dim)}
.index a.named i{width:11px;height:3px;background:var(--dim)}
.index a.on{color:var(--ice)}
.index a.on i{background:var(--copper);width:18px;box-shadow:0 0 10px var(--copper)}
.index a.cur i{background:var(--ice);width:16px}

/* content */
main{position:relative;z-index:3}
section{min-height:120vh;display:flex;align-items:center;
  padding-block:16vh;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(64px,env(safe-area-inset-right,0px))}
section.r{justify-content:flex-end;padding-right:max(230px,env(safe-area-inset-right,0px))}
section.l{justify-content:flex-start}
.app{min-height:85vh}
.panel .btn{justify-self:start}
.ver{color:var(--dim)}

.hero{min-height:100vh;align-items:flex-end;padding-bottom:14vh}
.hero-inner{max-width:620px;display:grid;gap:22px}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ice);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--ice)}
h1{font-family:var(--f-display);font-weight:600;font-size:clamp(38px,5.2vw,70px);line-height:.95;letter-spacing:-.01em;margin:0;text-wrap:balance;text-transform:uppercase}
h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--ice)}
.lede{font-size:clamp(16px,1.6vw,19px);color:var(--text-2);max-width:52ch;margin:0}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.btn{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:14px 20px;border:1px solid var(--line);color:var(--fg);background:var(--btn-bg);transition:all .25s;display:inline-flex;gap:10px;align-items:center}
.btn:hover{border-color:var(--ice);color:var(--ice)}
.btn.primary{background:var(--ice);color:var(--ink);border-color:var(--ice);font-weight:500}
.btn.primary:hover{background:var(--ice-hover);color:var(--ink)}

.panel{position:relative;max-width:460px;width:100%;padding:34px 32px 30px;background:var(--panel);
  backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid var(--line);display:grid;gap:18px;min-width:0}
.panel::before,.panel::after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--ice)}
.panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.seg{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.seg b{font-weight:500;color:var(--copper)}
h2{font-family:var(--f-display);font-weight:600;font-size:clamp(34px,4.2vw,52px);line-height:1;margin:0;letter-spacing:.01em}
h2 small{display:block;font-size:.36em;font-weight:500;letter-spacing:.06em;color:var(--ice);margin-top:12px;text-transform:none;line-height:1.3}
.panel p{margin:0;color:var(--text-2)}
ul.gain{list-style:none;margin:0;padding:0;display:grid;gap:12px}
ul.gain li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:15px;color:var(--fg)}
ul.gain li::before{content:"";width:9px;height:9px;margin-top:8px;border:1px solid var(--ice);transform:rotate(45deg)}
.readout{font-family:var(--f-mono);font-size:12px;border-top:1px dashed var(--line);padding-top:14px;display:grid;gap:5px;color:var(--dim);font-variant-numeric:tabular-nums;min-width:0}
.readout .h{display:flex;justify-content:space-between;color:var(--dim);letter-spacing:.12em;text-transform:uppercase;font-size:10px;margin-bottom:4px}
.readout .ln{display:flex;justify-content:space-between;gap:12px}
.readout .ln span:last-child{color:var(--fg);white-space:nowrap}
.readout .ln.tot{border-top:1px solid var(--line);padding-top:6px;margin-top:4px}
.readout .ln.tot span:last-child{color:var(--ice)}
.tag{justify-self:start;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--copper);color:var(--copper)}

.contact{justify-content:center;text-align:center;min-height:110vh}
.contact .panel{max-width:620px;text-align:left}
.mail{font-family:var(--f-display);font-size:clamp(24px,3.4vw,38px);font-weight:500;color:var(--ice);word-break:break-all;user-select:all}

footer{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  padding-block:28px calc(28px + env(safe-area-inset-bottom,0px));padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));
  border-top:1px solid var(--line);background:var(--bar)}

.loader{position:fixed;inset:0;z-index:20;background:var(--bg);display:grid;place-items:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;color:var(--dim);transition:opacity .8s}
.loader.done{opacity:0;pointer-events:none}

@media (max-width:820px){
  nav{display:none}
  .index{display:none}
  section,section.r,section.l,section.hero{justify-content:center;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .panel{background:var(--panel-m);padding:26px 22px 24px}
  .hud-bl{display:none}
  header{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- contact form (v2) ---------- */
.cform{display:grid;gap:14px;margin-top:4px;min-width:0}
.cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform .f{display:grid;gap:6px;min-width:0}
.cform label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.cform label i{font-style:normal;color:var(--copper)}
.cform input,.cform select,.cform textarea{width:100%;font:inherit;font-family:var(--f-body);font-size:15px;color:var(--fg);
  background:var(--field-bg);border:1px solid var(--line);border-radius:0;padding:12px 13px;outline:none;transition:border-color .2s}
.cform textarea{min-height:120px;resize:vertical}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--ice)}
.cform input:user-invalid,.cform textarea:user-invalid{border-color:var(--copper)}
.cform .actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.cform button.btn{cursor:pointer}
.cform .status{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--ice);min-height:1.4em}
.cform .status.err{color:var(--copper)}
/* traps for bots: kept in the DOM and "visible" to parsers, but off-screen for people */
.cform .trap{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
.cform.sent .f,.cform.sent .row2,.cform.sent .actions button{opacity:.4;pointer-events:none}
@media (max-width:820px){.cform .row2{grid-template-columns:1fr}}

/* ---------- theme toggle (v3) ---------- */
.hdr-r{display:flex;align-items:center;gap:28px}
.theme{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);background:transparent;border:1px solid var(--line);padding:7px 11px;cursor:pointer;transition:color .2s,border-color .2s}
.theme:hover{color:var(--ice);border-color:var(--ice)}
.theme svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.theme .sun,.theme .l-sun{display:none}
:root[data-theme="light"] .theme .sun,:root[data-theme="light"] .theme .l-sun{display:inline}
:root[data-theme="light"] .theme .moon,:root[data-theme="light"] .theme .l-moon{display:none}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .theme .sun,:root:not([data-theme="dark"]) .theme .l-sun{display:inline}
  :root:not([data-theme="dark"]) .theme .moon,:root:not([data-theme="dark"]) .theme .l-moon{display:none}}
.brand svg .s1{stroke:var(--ice)}.brand svg .f1{fill:var(--ice)}.brand svg .s2{stroke:var(--copper)}

/* ---------- wordmark with the robot as the "i" (v4) ---------- */
.wm{display:inline-flex;gap:0;align-items:baseline;font-family:var(--f-display);font-weight:600;font-size:22px;letter-spacing:.3em;line-height:1;color:var(--fg)}
.wm .ibot{width:.79em;height:1.75em;margin:0 .06em 0 0;position:relative;top:.59em;overflow:visible;flex:none}
.ibot .stem{stroke:var(--fg);stroke-width:2.6;stroke-linecap:square}
.ibot .v{stroke:var(--copper);stroke-width:1.8}
.ibot .head{stroke:var(--ice);stroke-width:1.7;fill:none}
.ibot .eye{fill:var(--ice);transform-box:fill-box;transform-origin:center;animation:ibot-blink 6s infinite}
@keyframes ibot-blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@media (prefers-reduced-motion:reduce){.ibot .eye{animation:none}}
.wm span{font-size:inherit;letter-spacing:inherit;font-weight:inherit}
.wm .tight{letter-spacing:.04em}

/* ---------- wordmark placements (v8) ---------- */
.wm-hero{font-size:clamp(34px,4.6vw,58px);margin-bottom:.95em}
.wm-load{font-size:clamp(34px,6vw,60px)}
.wm-foot{font-size:15px;color:var(--dim)}
.wm-foot .ibot .stem{stroke:var(--dim)}
.loader-in{display:grid;justify-items:center;gap:3.4em}
.loader .ibot .v{stroke-dasharray:12;stroke-dashoffset:12;animation:ibot-draw 1.2s .2s ease-out forwards}
@keyframes ibot-draw{to{stroke-dashoffset:0}}
footer{align-items:center}
footer .wm-foot{margin-bottom:.9em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hud{transition:opacity .3s}.hud.away{opacity:0}

/* ---------- language switch (same look as the theme toggle) ---------- */
.theme.lang{text-decoration:none}