/* ============================================================
   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:#010205;
  --bg-1:#030408;
  --bg-2:#06080d;
  --bg-3:#0a0d14;
  /* 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. */
  /* exposure pass 2026-07-20 (founder: site reads blurry-dark on his laptop, wants a
     SIGNIFICANT visibility raise). Blueprint grid + hairlines lifted (thin lines don't
     wash), secondary inks raised well past AA.
     FLATTENED 2026-07-23 to the founder-approved brightness (was a live 4-level picker;
     level 3 is now the sole design). Contrast vs #080c16: ink-2 14.98:1, ink-3 13.22:1,
     ink-faint 9.76:1. Primary ink + true blacks + glow discipline untouched. */
  --grid:rgba(140,182,248,.37);
  --grid-strong:rgba(146,188,250,.63);
  --hair:rgba(160,200,254,.78);
  --hair-soft:rgba(160,200,254,.53);
  /* Light / ink (secondary inks at the approved brightness: ink-2 14.98:1, ink-3 13.22:1, ink-faint 9.76:1 vs ground) */
  --ink:#e9eff9;
  --ink-2:#dae2ee;
  --ink-3:#ccd5e4;
  --ink-faint:#adb8ca;
  /* Luminous accent — light is the hero */
  --lum-core:#ffffff;
  --lum-1:#dcefff;
  --lum-2:#8fc6ff;
  --lum-3:#4a9dff;
  --lum-glow:rgba(88,168,255,.60);
  --lum-glow-soft:rgba(88,168,255,.27);
  /* 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(12,15,22,.88),rgba(4,6,10,.94));
  --glass-bg-hot:linear-gradient(180deg,rgba(15,19,28,.9),rgba(6,8,13,.95));
  --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(9,11,17,.92),rgba(4,6,10,.94) 45%,rgba(10,13,20,.92));
  --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);
  /* Component borders (directive 8 2026-07-24): card / tab / pill edges get more
     presence — thicker but MORE elegant. 1px -> 1.5px with a slightly lower alpha
     than --hair-soft(.53), so the line reads crisper and more present without adding
     heaviness. Structural hairlines (grid, dims, rails, section dividers, ledger rows,
     nav/footer) stay 1px — only foreground components use these. --edge = rest,
     --edge-strong = hover/lit. */
  --bw:1.5px;
  --edge:rgba(160,200,254,.42);
  --edge-strong:rgba(160,200,254,.72);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink);
  background:radial-gradient(110% 74% at 52% -16%,#0b0f17 0%,#05070b 46%,#020306 100%);
  font-family:var(--sans);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Declutter preview: keep the deep luminous ground, but let it stay visually quiet. */
body::before{
  content:none;
}
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(62% 42% at 72% 6%,rgba(102,153,214,.055),transparent 62%),
    radial-gradient(46% 34% at 12% 2%,rgba(174,211,255,.028),transparent 64%);
}
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;
  /* O-clip fix 2026-07-23: line-height raised .98 -> 1.0 so the line box is >= the
     em box. With .lum painting via background-clip:text, a line box tighter than the
     em box sliced round-glyph overshoot (hero "O"/"G") at certain DPI/zoom rasters on
     the founder's panel. 1.0 keeps the em box intact; hero rhythm shift is ~2%. */
  letter-spacing:-.044em; line-height:1.0; 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;
}
.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:var(--bw) solid var(--edge-strong);
  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)}

/* ---------- 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(3,4,7,.82); backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.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}
.brand .lockup{height:42px; width:auto; display:block}
.nav-links{display:flex; gap:28px; align-items:center}
.nav-links a{
  font-size:.9rem; color:rgba(218,226,238,.60); letter-spacing:-.01em;
  position:relative; padding:4px 0;
  transition:color var(--dur-quick) var(--ease-precision), text-shadow var(--dur-quick) var(--ease-precision);
}
.nav-links a::after{content:none}
.nav-links a:hover{color:rgba(233,239,249,.88)}
.nav-links a[aria-current="page"]{
  color:rgba(248,250,252,.98);
  text-shadow:0 0 18px rgba(143,198,255,.07);
}
.nav-cta{display:flex; align-items:center; gap:14px}
.nav .btn{padding:.6em 1.05em; font-size:.88rem}
@media(min-width:821px){
  .nav{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .brand{justify-self:start}
  .nav-links{justify-self:center}
  .nav-cta{justify-self:end}
}
@media(max-width:820px){ .nav-links{gap:16px} .nav-links a{font-size:.82rem} .nav .btn{display:none} }
@media(max-width:480px){ .nav-links{gap:12px} .nav-links a[href="index.html"]{display:none} .brand .co{display:none} .brand .lockup{height:34px} }

/* ---------- 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:.72}
.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;
}
/* directive 7 (2026-07-24): center the core with a 50%/translate transform + an EVEN
   4px size, not inset. inset:2.5px is mathematically centered at DPR 1 but rounds
   asymmetrically at the founder's fractional display scaling (1.25/1.5), so the dot
   read off-center. transform-origin at the box center rounds symmetrically at any DPR. */
.sig-node::after{content:""; position:absolute; top:50%; left:50%; width:4px; height:4px; transform:translate(-50%,-50%); 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)}
a.lrow:hover .stat{color:var(--lum-2)}
a.lrow:hover .name{color:var(--lum-1)}
@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:var(--bw) solid var(--edge); 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}
.legal-links{display:flex; align-items:center; gap:18px}
.legal-links a{color:var(--ink-faint); transition:color var(--dur-quick) var(--ease-precision)}
.legal-links a:hover,.legal-links a[aria-current="page"]{color:var(--ink-2)}
.legal-links a:focus-visible{outline:1px solid var(--lum-2); outline-offset:5px; border-radius:2px}

/* ---------- 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}
}