/* ============================================================
   KTISIS ARC — LUMEN register, 4-page site mock (2026-07-15)
   Shared layer: tokens, ground, type, nav, footer, reveal system,
   light-continuity trace, micro-interactions.
   Luminous dark: light is the hero on a deep engineered ground.
   ============================================================ */

:root{
  /* Ground */
  --bg-0:#060910;
  --bg-1:#080c16;
  --bg-2:#0b111e;
  --bg-3:#0e1626;
  /* Blueprint line — exposure pass 2026-07-16 (founder: detail crushed on dim
     panels, pale on bright ones). Floors lifted out of the 8-bit crush zone:
     --hair is the primary informational datum (1px borders/rails/dims) at
     blended Y=.108 (~10% relative luminance); grid + soft lines 3-4x their old
     luminance, still ground-weighted. True blacks and glow discipline untouched. */
  --grid:rgba(126,170,240,.17);
  --grid-strong:rgba(132,176,246,.30);
  --hair:rgba(146,188,250,.45);
  --hair-soft:rgba(146,188,250,.26);
  /* Light / ink (secondary inks lifted: ink-3 6.6:1, ink-faint 4.1:1 vs ground) */
  --ink:#e9eff9;
  --ink-2:#aeb9ce;
  --ink-3:#8b97ae;
  --ink-faint:#66738c;
  /* Luminous accent — light is the hero */
  --lum-core:#ffffff;
  --lum-1:#dcefff;
  --lum-2:#8fc6ff;
  --lum-3:#4a9dff;
  --lum-glow:rgba(74,157,255,.45);
  --lum-glow-soft:rgba(74,157,255,.18);
  /* Rare violet-blue escalation — spent ONCE per site (the "own" arrival on Home) */
  --lum-viol:#9a8cff;
  --lum-viol-glow:rgba(122,108,255,.42);
  /* Warm survives in tone only — a single restrained ember highlight */
  --ember:#ffc79a;
  --ok:#39d98a;
  /* ---- LUMEN material system (three surfaces; recipes consumed by page CSS) ----
     A. Etched technical glass  — foreground instruments (cards, tiers, panels):
        --noise etch + --glass-bg + 1px top light + deep soft drop; NO backdrop blur.
     B. Dark anodized structure — structural bands (rungs, care-line, ledgers):
        --noise etch + --anod-bg sheen, hairline edge, shallow inset only, never glows.
     C. Emissive linework       — .sig-hair/.sig-node/route/sparks: the ONLY glowing
        material; white-hot core, narrow cool halo, restrained bloom. */
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.75 0 0 0 0 0.85 0 0 0 0 1 0 0 0 0.05 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  --glass-bg:linear-gradient(180deg,rgba(16,25,43,.84),rgba(8,12,22,.9));
  --glass-bg-hot:linear-gradient(180deg,rgba(21,33,56,.88),rgba(11,18,32,.92));
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.45);
  --glass-drop:0 34px 90px -52px rgba(0,0,0,.85);
  --anod-bg:linear-gradient(94deg,rgba(13,19,33,.88),rgba(9,14,24,.88) 45%,rgba(14,21,36,.88));
  --anod-edge:inset 0 1px 0 rgba(255,255,255,.028);
  /* Type */
  --sans:"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
  /* Motion (MOTION.md palette) */
  --dur-instant:120ms; --dur-quick:240ms; --dur-base:420ms; --dur-slow:760ms;
  --ease-expressive:cubic-bezier(.16,1,.3,1);
  --ease-overshoot:cubic-bezier(.34,1.56,.64,1);
  --ease-precision:cubic-bezier(.2,0,0,1);
  /* Layout */
  --maxw:1200px;
  --gutter:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg-1); color:var(--ink);
  font-family:var(--sans);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Deep engineered ground: hairline blueprint grid + soft luminous vignette */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:56px 56px, 56px 56px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 40%,transparent 100%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  /* exposure pass: page-wide haze halved so content never sits on a grey wash
     on bright panels (depth attenuation stays on true background planes only) */
  background:
    radial-gradient(60% 45% at 72% 8%,rgba(74,157,255,.12),transparent 60%),
    radial-gradient(50% 40% at 12% 4%,rgba(143,198,255,.06),transparent 60%);
}
main,header,footer{position:relative; z-index:1}
/* AMBIENT fork: the living field (canvas, JS-created; one system).
   Sits above the blueprint grid, below all content. */
.ambient-field{position:fixed; inset:0; z-index:0; pointer-events:none}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer}
::selection{background:rgba(74,157,255,.32); color:var(--lum-core)}
:focus-visible{outline:2px solid var(--lum-2); outline-offset:3px}

/* ---------- Typographic scale (typography IS the art direction) ----------
   Decisive display sizes, tight shaping, balanced rag, controlled measures.
   Numerals: every price/stat runs tabular lining figures for optical columns. */
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.02em; line-height:1.05}
.display{
  font-size:clamp(2.35rem,7.2vw,5.7rem); font-weight:650;
  letter-spacing:-.044em; line-height:.98; text-wrap:balance;
}
.display-2{font-size:clamp(2rem,5.4vw,4.1rem); font-weight:650; letter-spacing:-.038em; line-height:1.0; text-wrap:balance}
.h2{font-size:clamp(1.7rem,3.4vw,2.7rem); letter-spacing:-.028em; text-wrap:balance}
.tnum,.prices,.amt,.oprice,.cnum,.pstamp{font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1}
.lum{
  color:transparent; background:linear-gradient(180deg,#ffffff 0%,#cfe6ff 55%,#8fc6ff 100%);
  -webkit-background-clip:text; background-clip:text;
  text-shadow:0 0 34px rgba(143,198,255,.28);
}
.eyebrow{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--lum-2);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:linear-gradient(90deg,var(--lum-3),transparent);
  display:inline-block;
}
.lede{font-size:clamp(1.02rem,1.5vw,1.22rem); color:var(--ink-2); line-height:1.55; max-width:52ch}
.muted{color:var(--ink-3)}
.mono{font-family:var(--mono)}
.tag{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3);
}
/* Measured technical callout: mono annotation behaving like an instrument label,
   not a decorative caption — hairline datum + tick, consistent everywhere. */
.callout{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); display:inline-flex; align-items:baseline; gap:.9em;
  border-left:1px solid var(--hair-soft); padding-left:12px; position:relative;
}
.callout::before{content:""; position:absolute; left:-3px; top:.35em; width:7px; height:1px; background:var(--hair)}

/* ---------- Shell ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
section{padding-block:clamp(72px,11vh,132px)}
.section-head{margin-bottom:clamp(32px,5vh,56px); max-width:64ch}
.section-head .h2{margin-top:14px}
.section-head p{margin:16px 0 0}

/* ---------- Buttons ---------- */
.btn{
  --b:var(--lum-3);
  display:inline-flex; align-items:center; gap:.6em;
  padding:.86em 1.35em; border-radius:9px;
  font-weight:560; font-size:.96rem; letter-spacing:-.01em;
  background:linear-gradient(180deg,#eaf4ff,#bfe0ff);
  color:#08111f; border:1px solid rgba(255,255,255,.4);
  box-shadow:0 0 0 1px rgba(74,157,255,.22), 0 7px 22px -12px var(--lum-glow), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform var(--dur-quick) var(--ease-expressive), box-shadow var(--dur-quick) var(--ease-expressive);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(74,157,255,.36),0 11px 30px -14px var(--lum-glow), inset 0 1px 0 rgba(255,255,255,.8)}
.btn:active{transform:translateY(0); transition-duration:var(--dur-instant)}
.btn-ghost{
  background:transparent; color:var(--ink); border:1px solid var(--hair);
  box-shadow:none; border-radius:9px; padding:.86em 1.2em; font-weight:520; font-size:.95rem;
  transition:border-color var(--dur-quick) var(--ease-precision), background var(--dur-quick) var(--ease-precision), transform var(--dur-quick) var(--ease-expressive);
}
.btn-ghost:hover{border-color:var(--lum-2); background:rgba(74,157,255,.06); transform:translateY(-1px)}
.arrow{transition:transform var(--dur-quick) var(--ease-expressive); display:inline-block}
.btn:hover .arrow,.btn-ghost:hover .arrow,.seelink:hover .arrow{transform:translateX(3px)}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:14px var(--gutter);
  background:rgba(8,12,22,.62); backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--hair-soft);
}
.brand{display:flex; align-items:center; gap:11px; font-weight:600; letter-spacing:.02em}
.brand .glyph{width:24px; height:24px; position:relative; flex:0 0 auto}
.brand .glyph svg{display:block}
.brand b{font-weight:640; letter-spacing:.14em; font-size:.92rem}
.brand .co{font-family:var(--mono); font-size:.62rem; letter-spacing:.22em; color:var(--ink-3); text-transform:uppercase}
.nav-links{display:flex; gap:28px; align-items:center}
.nav-links a{font-size:.9rem; color:var(--ink-2); letter-spacing:-.01em; position:relative; padding:4px 0}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--lum-2); transition:width var(--dur-base) var(--ease-expressive)}
.nav-links a:hover{color:var(--ink)} .nav-links a:hover::after{width:100%}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::before{
  content:""; position:absolute; left:-11px; top:50%; margin-top:-2.5px; width:5px; height:5px; border-radius:50%;
  background:var(--lum-3); box-shadow:0 0 9px var(--lum-glow);
}
.nav-links a[aria-current="page"]::after{width:100%; background:linear-gradient(90deg,var(--lum-2),transparent)}
.nav-cta{display:flex; align-items:center; gap:14px}
.nav .btn{padding:.6em 1.05em; font-size:.88rem}
@media(max-width:820px){ .nav-links{gap:16px} .nav-links a{font-size:.82rem} .nav-links a[aria-current="page"]::before{left:-8px} .nav .btn{display:none} }
@media(max-width:480px){ .nav-links{gap:12px} .nav-links a[href="index.html"]{display:none} .brand .co{display:none} }

/* ---------- Page-load light trace (site continuity motif) ---------- */
.pagetrace{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:60; pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,var(--lum-2) 35%,var(--lum-core) 50%,var(--lum-2) 65%,transparent 100%);
  background-size:36% 100%; background-repeat:no-repeat; background-position:-40% 0;
  opacity:0;
  filter:drop-shadow(0 0 6px var(--lum-glow));
}
.anim-on .pagetrace{animation:pagetrace 1.15s var(--ease-precision) .05s 1 both}
@keyframes pagetrace{
  0%{opacity:0; background-position:-40% 0}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0; background-position:140% 0}
}

/* ---------- Corner ticks ---------- */
.ticks{position:absolute; inset:0; pointer-events:none; z-index:0}
.tick{position:absolute; width:9px; height:9px; opacity:.5}
.tick::before,.tick::after{content:""; position:absolute; background:var(--hair)}
.tick::before{left:0; top:4px; width:9px; height:1px}
.tick::after{left:4px; top:0; width:1px; height:9px}
.tick.tl{left:calc(var(--gutter) - 5px); top:22px}
.tick.tr{right:calc(var(--gutter) - 5px); top:22px}

/* ---------- Sub-page header band ---------- */
.pagehead{padding-top:clamp(44px,7vh,88px); padding-bottom:clamp(10px,2vh,24px); position:relative}
.pagehead .eyebrow{margin-bottom:20px}
.pagehead h1{margin:0 0 18px}
.pagehead .lede{margin:0}

/* ---------- Signature light: shared spark + ignition targets ----------
   Disciplined light physics: hard white-hot core (to 26%), narrow cool halo,
   two-stage restrained bloom (tight bright + wide faint), nothing muddy. */
.sparkfly{
  position:absolute; left:0; top:0; width:16px; height:16px; margin:-8px 0 0 -8px;
  border-radius:50%; pointer-events:none; z-index:5; opacity:0;
  background:radial-gradient(circle,#ffffff 0%,#ffffff 26%,#dcefff 38%,rgba(143,198,255,.42) 56%,rgba(143,198,255,0) 74%);
  filter:drop-shadow(0 0 6px rgba(220,239,255,.85)) drop-shadow(0 0 20px rgba(74,157,255,.32));
}
/* Ignition targets: GSAP owns these (no .reveal class on them). Hidden only when JS runs. */
html.js .sig-hide{opacity:0}
@media(prefers-reduced-motion:reduce){ html.js .sig-hide{opacity:1 !important; transform:none !important; filter:none !important} }
.sig-hair{
  height:1px; width:100%; transform-origin:left center;
  background:linear-gradient(90deg,var(--lum-2),var(--hair) 55%,transparent 100%);
}
.sig-node{
  width:10px; height:10px; border-radius:50%; flex:0 0 auto;
  border:1px solid var(--lum-2); background:var(--bg-1); position:relative;
}
.sig-node::after{content:""; position:absolute; inset:2.5px; border-radius:50%; background:var(--lum-core); opacity:0; transition:opacity var(--dur-quick) var(--ease-precision)}
.sig-node.lit{box-shadow:0 0 14px -2px var(--lum-glow)}
.sig-node.lit::after{opacity:1}

/* ---------- Content reveal system (IO + CSS; one system for content) ----------
   AMBIENT fork: gentler weather — slow warmth arrivals, small travel,
   diffused delays instead of hard staggers. Variants keep their intent.
   Gated behind .anim-on (JS present + motion allowed). */
.anim-on .reveal{opacity:.001; transform:translateY(10px); transition:opacity 1.15s var(--ease-expressive), transform 1.15s var(--ease-expressive)}
.anim-on .reveal.rv-left{transform:translateX(-16px)}
.anim-on .reveal.rv-right{transform:translateX(16px)}
.anim-on .reveal.rv-blur{transform:translateY(8px); filter:blur(6px); transition:opacity 1.25s var(--ease-expressive), transform 1.25s var(--ease-expressive), filter 1.25s var(--ease-precision)}
.anim-on .reveal.in{opacity:1; transform:none; filter:none}
.anim-on .reveal.d1{transition-delay:.12s} .anim-on .reveal.d2{transition-delay:.26s}
.anim-on .reveal.d3{transition-delay:.4s} .anim-on .reveal.d4{transition-delay:.54s}
/* hairline that draws itself (slower, weather-paced) */
.rv-line{height:1px; background:linear-gradient(90deg,var(--hair),var(--hair-soft) 70%,transparent); transform-origin:left center}
.anim-on .rv-line{transform:scaleX(0); transition:transform 1.4s var(--ease-precision)}
.anim-on .rv-line.in{transform:scaleX(1)}
.anim-on .rv-line.d1{transition-delay:.12s} .anim-on .rv-line.d2{transition-delay:.26s} .anim-on .rv-line.d3{transition-delay:.4s}
/* mono annotation types itself on (clip-path steps; compositor-friendly) */
.anim-on .rv-type{clip-path:inset(0 100% 0 0); transition:clip-path 1.2s steps(26,end)}
.anim-on .rv-type.in{clip-path:inset(0 -2% 0 0)}
.anim-on .rv-type.d1{transition-delay:.18s} .anim-on .rv-type.d2{transition-delay:.36s} .anim-on .rv-type.d3{transition-delay:.54s}

/* ---------- Ledger rows (work lists, cross-links) ---------- */
.ledger{display:flex; flex-direction:column}
.lrow{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:clamp(14px,3vw,36px); align-items:baseline;
  padding:18px 4px; border-bottom:1px solid var(--hair-soft); position:relative;
  transition:background var(--dur-quick) var(--ease-precision), padding-left var(--dur-quick) var(--ease-precision);
}
.lrow:first-child{border-top:1px solid var(--hair-soft)}
.lrow .idx{font-family:var(--mono); font-size:.68rem; color:var(--ink-faint); letter-spacing:.14em}
.lrow .name{font-size:1.02rem; font-weight:600; letter-spacing:-.01em}
.lrow .meta{font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); text-align:right}
.lrow .stat{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:var(--ink-faint); text-align:right}
.lrow:hover{background:rgba(74,157,255,.03)}
@media(max-width:640px){ .lrow{grid-template-columns:auto 1fr; row-gap:4px} .lrow .meta,.lrow .stat{grid-column:2; text-align:left} }

/* ---------- Calm price line (material B: dark anodized structure) ---------- */
.care-line{
  margin-top:20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border:1px solid var(--hair-soft); border-radius:12px; padding:16px 22px;
  background:var(--noise),var(--anod-bg); background-size:140px 140px,auto;
  box-shadow:var(--anod-edge); font-size:.95rem; color:var(--ink-2);
}
.care-line b{color:var(--ink); font-weight:600}
.care-line .prices{font-family:var(--mono); letter-spacing:.04em; color:var(--lum-2)}

/* ---------- CTA band ---------- */
.ctaband{border-top:1px solid var(--hair-soft); background:rgba(74,157,255,.02)}
.ctaband .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.ctaband .h2{max-width:24ch}
.seelink{font-size:.92rem; color:var(--ink-2); display:inline-flex; align-items:center; gap:.5em; letter-spacing:-.01em}
.seelink:hover{color:var(--ink)}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--hair-soft); padding:44px var(--gutter); position:relative; z-index:1}
.foot-grid{max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; gap:26px; flex-wrap:wrap; align-items:center}
.foot-links{display:flex; gap:22px; flex-wrap:wrap}
.foot-links a{font-size:.86rem; color:var(--ink-3); transition:color var(--dur-quick) var(--ease-precision)} .foot-links a:hover{color:var(--ink)}
.foot-legal{width:100%; max-width:var(--maxw); margin:26px auto 0; padding-top:20px; border-top:1px solid var(--hair-soft); font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--ink-faint); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* ---------- Shared pulse ---------- */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* ---------- Frame-capture determinism gate (frame_step_capture.mjs) ----------
   The tool's init script defines __fsSetTime before page scripts run; page JS then
   stamps html.fs-capture. Content reveals go final instantly so the GSAP signature
   is the only motion in the captured frames (real-time setTimeout safety nets are
   skipped in JS under the same flag). */
html.fs-capture .reveal,html.fs-capture .rv-line,html.fs-capture .rv-type{opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; transition:none !important}
html.fs-capture .pagetrace{animation:none; opacity:0}

/* ---------- Reduced motion: content-complete, no entrances ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .reveal,.rv-line,.rv-type{opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important}
  .pagetrace{display:none}
}