/* ============ TOKENS ============ */
:root{
  --bg:            #05080D;
  --bg-raised:     #0A0F17;
  --line:          #1B2432;
  --line-soft:     #12192480;
  --text:          #E8ECF2;
  --text-muted:    #8695A8;
  --text-faint:    #4E5A6C;
  --cyan:          #4FE3C6;
  --cyan-dim:      #4FE3C625;
  --amber:         #FF7A50;
  --amber-dim:     #FF7A5022;

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

  --wrap: 1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans-body);
  font-size: 16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

a{ color:inherit; text-decoration:none; }
::selection{ background:var(--cyan-dim); color:var(--text); }
:focus-visible{ outline: 1.5px solid var(--cyan); outline-offset: 3px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 32px; position:relative; z-index:2; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

/* ---- full-viewport fixed background (subtle, shared by every page) ---- */
#field{ position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:0; pointer-events:none; display:block; }
.veil{ position:fixed; inset:0; z-index:1; pointer-events:none; background: linear-gradient(180deg, #05080D00 0%, #05080D55 60%, #05080D 100%); }

/* ---- scroll reveal, varied per type ---- */
.rise, .draw, .grow{ position:relative; z-index:2; }
.js .rise, .js .draw, .js .grow{ opacity:0; }
.js .rise{ transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.js .draw{ transform:translateX(-24px); transition:opacity .6s ease, transform .6s ease; }
.js .grow{ transform:scale(0.96); transition:opacity .6s ease, transform .6s ease; }
.in.rise{ opacity:1; transform:translateY(0); }
.in.draw{ opacity:1; transform:translateX(0); }
.in.grow{ opacity:1; transform:scale(1); }
.stagger > *{ transition-delay: calc(var(--i, 0) * 70ms); }

.eyebrow{ font-family: var(--mono-data); font-size:12.5px; letter-spacing:0.06em; color: var(--cyan); }

h1,h2,h3{ font-family: var(--serif-display); font-weight:500; letter-spacing:-0.01em; line-height:1.12; }
h2{ font-size: clamp(28px, 3.6vw, 42px); }
h3{ font-size: 19px; font-weight:600; }
p.lede{ font-size: 17.5px; color: var(--text-muted); max-width: 58ch; line-height:1.65; }

.section{ padding: 120px 0; border-bottom: 1px solid var(--line-soft); position:relative; z-index:2; }
@media (max-width:780px){ .section{ padding:80px 0; } }
.section:last-of-type{ border-bottom:none; }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 13px 22px; font-size: 14.5px; font-weight:500;
  border-radius: 3px; border:1px solid transparent;
  cursor:pointer; transition: transform .25s cubic-bezier(.34,1.56,.64,1), border-color .18s ease, background .18s ease, box-shadow .25s ease;
}
.btn-primary{ background: var(--cyan); color: #041210; }
.btn-primary:hover{ box-shadow: 0 0 28px -6px var(--cyan); transform:translateY(-2px); }
.btn-ghost{ border-color: var(--line); color: var(--text); background:transparent; }
.btn-ghost:hover{ border-color: var(--text-muted); transform:translateY(-2px); }
.btn:active{ transform: scale(0.96) !important; }

/* ============ NAV — identical on every page ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  backdrop-filter: blur(10px); background: #05080Dcc;
  border-bottom: 1px solid var(--line-soft);
}
.nav-progress{ position:absolute; bottom:-1px; left:0; height:1px; width:0%; background: var(--cyan); transition: width .1s linear; }
.nav-inner{ max-width:var(--wrap); margin:0 auto; padding:14px 32px; display:flex; align-items:center; justify-content:space-between; }
.brand-block{ display:flex; flex-direction:column; gap:2px; line-height:1; }
.wordmark{ display:flex; align-items:baseline; gap:2px; }
.wordmark .name{ font-family: var(--serif-display); font-size:19px; font-weight:600; letter-spacing:0.01em; }
.wordmark .dot{ color: var(--cyan); font-size:22px; line-height:0; position:relative; top:2px; animation: blink 2.4s ease-in-out infinite; }
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.brand-sub{ font-family:var(--mono-data); font-size:9.5px; letter-spacing:0.12em; color:var(--text-faint); }
@media (max-width:560px){ .brand-sub{ display:none; } }

.nav-links{ display:flex; gap:34px; font-family:var(--mono-data); font-size:11px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); }
.nav-links a{ position:relative; padding:4px 0; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--cyan); transition:width .25s ease; }
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ width:100%; }
.nav-links a.current{ color:var(--text); }
.nav-links a.current::after{ width:100%; }
@media (max-width:780px){
  .nav-inner{ padding:12px 20px 10px; flex-wrap:wrap; gap:10px; }
  .nav-links{ display:flex; order:2; width:100%; justify-content:space-between; gap:0; font-size:10px; }
  .hero{ padding-top:130px; }
  .page-header{ padding-top:150px; }
}

/* ============ HERO (home) ============ */
.hero{ position:relative; min-height: 100vh; display:flex; align-items:center; padding-top: 90px; border-bottom: 1px solid var(--line-soft); }
.hero-inner{ position:relative; z-index:3; max-width:var(--wrap); margin:0 auto; padding:0 32px; width:100%; }
.hero-tag{ font-family:var(--mono-data); font-size:12.5px; color:var(--cyan); letter-spacing:0.08em; margin-bottom:22px; }
.hero h1{ font-size: clamp(34px, 4.2vw, 54px); max-width: 18ch; margin-bottom:26px; }
.hero h1 .accent{ color: var(--cyan); }
.hero p.lede{ margin-bottom:40px; font-size:18px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono-data); font-size:11px; color:var(--text-faint); z-index:2;
}
.scroll-cue i{ width:1px; height:26px; background:linear-gradient(var(--cyan), transparent); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ============ PAGE HEADER (Ephemra / Vision) ============ */
.page-header{ padding: 170px 0 56px; border-bottom:1px solid var(--line-soft); position:relative; z-index:2; }
.page-header h1{ font-size: clamp(32px,5vw,52px); max-width:18ch; margin-top:14px; }
.page-header p.lede{ margin-top:18px; }

/* ============ PROBLEM / SOLUTION (home) ============ */
.problem-close{ font-family:var(--serif-display); font-size: clamp(22px,2.8vw,32px); line-height:1.4; color:var(--text); max-width:26ch; }
.problem-close em{ font-style:normal; color:var(--cyan); }

.concept-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background: var(--line); border:1px solid var(--line); margin-top:52px; perspective: 900px; }
@media (max-width:820px){ .concept-grid{ grid-template-columns:1fr; } }
.concept{ background: var(--bg); padding: 36px 30px; transition: background .2s ease, transform .15s ease; transform-style:preserve-3d; }
.concept:hover{ background: var(--bg-raised); }
.concept-index{ font-family:var(--mono-data); font-size:12px; color:var(--cyan); margin-bottom:22px; display:block; }
.concept h3{ margin-bottom:10px; }
.concept p{ font-size:14.5px; color:var(--text-muted); }

/* ============ TECHNOLOGY (Ephemra page) ============ */
.tech-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1px 48px; margin-top:52px; }
@media (max-width:700px){ .tech-grid{ grid-template-columns:1fr; } }
.tech-row{ padding:26px 0; border-top:1px solid var(--line); display:flex; gap:20px; }
.tech-num{ font-family:var(--mono-data); font-size:13px; color:var(--text-faint); padding-top:3px; min-width:28px; }
.tech-row h3{ margin-bottom:8px; font-size:17px; }
.tech-row p{ font-size:14.5px; color:var(--text-muted); }

/* ============ CONJUNCTION (Ephemra page) ============ */
.conj-wrap{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; margin-top:20px; }
@media (max-width:820px){ .conj-wrap{ grid-template-columns:1fr; gap:36px; } }
.conj-disclaimer{ margin-top:28px; padding:14px 16px; border-left:2px solid var(--amber); background: var(--amber-dim); font-size:13.5px; color:var(--text-muted); position:relative; z-index:2; }

/* ============ VISION GRID ============ */
.vision-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:52px; }
@media (max-width:820px){ .vision-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .vision-grid{ grid-template-columns:1fr; } }
.vision-cell{ background:var(--bg); padding:30px 24px; }
.vision-cell h3{ font-size:16px; margin-bottom:10px; }
.vision-cell p{ font-size:14px; color:var(--text-muted); }

/* ============ PHASES (vision page) ============ */
.phase-track{ margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
@media (max-width:820px){ .phase-track{ grid-template-columns:1fr; } }
.phase{ padding:28px 28px 28px 0; border-right:1px solid var(--line); }
.phase:last-child{ border-right:none; }
@media (max-width:820px){ .phase{ border-right:none; border-bottom:1px solid var(--line); padding:28px 0; } }
.phase-badge{ display:inline-block; font-family:var(--mono-data); font-size:11px; letter-spacing:0.04em; padding:4px 9px; border-radius:2px; margin-bottom:18px; }
.badge-done{ color:var(--cyan); background:var(--cyan-dim); }
.badge-current{ color:var(--amber); background:var(--amber-dim); }
.badge-future{ color:var(--text-faint); background:#12192480; }
.phase h3{ margin-bottom:16px; }
.phase ul{ list-style:none; }
.phase li{ font-size:14px; color:var(--text-muted); padding:8px 0 8px 16px; border-top:1px solid var(--line-soft); position:relative; }
.phase li::before{ content:"–"; position:absolute; left:0; color:var(--text-faint); }

/* ============ FOUNDER HERO (split, portrait) ============ */
.founder-hero{ position:relative; min-height:100vh; display:flex; align-items:center; padding-top:90px; border-bottom:1px solid var(--line-soft); }
.founder-hero .wrap{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:64px; align-items:center; }
.founder-hero-text-only .wrap{ grid-template-columns:1fr; }
@media (max-width:820px){ .founder-hero .wrap{ grid-template-columns:1fr; gap:36px; } .founder-hero{ padding-bottom:60px; } }
.portrait-frame{ position:relative; width:100%; max-width:320px; }
.portrait-frame::before{
  content:""; position:absolute; inset:-22px; border:1px dashed #2A3644;
  border-radius:6px; animation: spin 40s linear infinite;
}
@keyframes spin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
.portrait-photo{ position:relative; aspect-ratio: 4/5; border-radius:4px; overflow:hidden; border:1px solid var(--line); background:var(--bg-raised); z-index:2; }
.portrait-photo img{ width:100%; height:100%; object-fit:cover; display:block; filter: grayscale(0.15) contrast(1.02); }
.founder-kicker{ font-family:var(--mono-data); font-size:12px; letter-spacing:0.08em; color:var(--cyan); margin-bottom:16px; }
.founder-hero h1{ font-size: clamp(34px,5.2vw,58px); margin-bottom:10px; }
.founder-role{ font-family:var(--mono-data); font-size:13.5px; color:var(--text-muted); margin-bottom:30px; }
.founder-quote{ font-family:var(--serif-display); font-size: clamp(19px,2vw,24px); line-height:1.5; color:var(--text); max-width:32ch; margin-bottom:26px; padding-left:18px; border-left:2px solid var(--cyan); }
.founder-tags{ font-family:var(--mono-data); font-size:12.5px; color:var(--text-faint); letter-spacing:0.04em; }

/* ============ STORY (founder page) ============ */
.story p{ font-size:17px; color:var(--text-muted); max-width:60ch; margin-bottom:22px; line-height:1.7; }
.story .ask{ font-family:var(--serif-display); font-size: clamp(21px,2.6vw,28px); color:var(--text); max-width:22ch; margin: 30px 0; }
.story .closer{ font-family:var(--serif-display); font-size: clamp(28px,4vw,44px); color:var(--text); margin-top:44px; }

.contact-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
.contact-link{
  display:flex; align-items:center; gap:10px; padding:12px 18px;
  border:1px solid var(--line); font-family:var(--mono-data); font-size:13.5px; color:var(--text);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.contact-link:hover{ border-color:var(--cyan); background:var(--cyan-dim); transform:translateY(-2px); }
.contact-link .ico{ color:var(--cyan); }

/* ============ GLOBAL FOOTER — identical on every page ============ */
footer{ padding: 64px 0 40px; position:relative; z-index:2; }
.foot-grid{ display:grid; grid-template-columns: 1fr; gap:40px; margin-bottom:56px; }
@media (max-width:700px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
.foot-brand p{ font-family:var(--mono-data); font-size:12px; color:var(--text-faint); margin-top:6px; }
.foot-col h4{ font-size:12.5px; color:var(--text-faint); font-weight:500; margin-bottom:16px; letter-spacing:0.02em; }
.foot-col a{ display:block; font-size:14px; color:var(--text-muted); padding:6px 0; transition:color .2s ease; }
.foot-col a:hover{ color:var(--text); }
.foot-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px; border-top:1px solid var(--line); font-family:var(--mono-data); font-size:12px; color:var(--text-faint); }

.tick{ font-variant-numeric: tabular-nums; }