/* Zeus landing — site layer on top of tokens.css + zeus-ui.css */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--void); }
body { margin: 0; background: var(--void); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 28px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1200px, 100% - 48px); margin: 0 auto; }

/* type */
.eyebrow { font-family: var(--font-inscription); font-size: 12px; line-height: 16px; letter-spacing: .38em; text-transform: uppercase; color: var(--ink-muted); }
.eyebrow b { color: var(--ink); font-weight: 400; text-shadow: var(--text-glow); }
.display { font-family: var(--font-display); font-weight: 300; line-height: 1.02; letter-spacing: -.005em; margin: 0; text-shadow: var(--text-glow); }
.display em { color: var(--aether); }
.lead { color: var(--ink-muted); font-size: 19px; line-height: 30px; }

/* buttons (site sized) */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 500; font-size: 15px; letter-spacing: .01em; border: 1px solid transparent; cursor: pointer; transition: box-shadow .24s cubic-bezier(.2,.8,.2,1), background-color .24s, transform .12s; font-family: var(--font-sans); white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--halo); color: var(--on-halo); box-shadow: var(--glow-md); }
.btn-primary:hover { box-shadow: 0 0 2px #fff, 0 0 48px #ffffff70; }
.btn-glass { background: #ffffff0d; color: var(--ink); border-color: var(--line-control); box-shadow: var(--rim); backdrop-filter: blur(var(--blur-glass)); }
.btn-glass:hover { background: #ffffff17; box-shadow: var(--rim), var(--glow-sm); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* nav */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s, box-shadow .3s; }
.nav.scrolled { background: #050506cc; backdrop-filter: blur(var(--blur-glass)); box-shadow: inset 0 -1px 0 var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav-logo img { height: 26px; width: auto; }
.nav-links { display: flex; gap: 34px; font-size: 14px; color: var(--ink-muted); }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; gap: 12px; align-items: center; }
.nav .btn { height: 42px; padding: 0 20px; font-size: 14px; }
.icon-link { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-control); color: var(--ink-muted); }
.icon-link:hover { color: var(--ink); box-shadow: var(--glow-sm); }
.icon-link svg { width: 16px; height: 16px; fill: currentColor; }

/* hero */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 120px 0 80px; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 45%, #05050600, #050506 85%), linear-gradient(180deg, #05050600 60%, #050506); pointer-events: none; }
.hero .wrap { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero h1 { font-size: clamp(56px, 9vw, 128px); margin-top: 22px; }
.hero .lead { max-width: 620px; margin: 26px auto 0; }
.hero-cta { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }
.hero-meta { margin-top: 56px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--ink-faint); }

/* sections */
section { position: relative; padding: 130px 0; }
.sec-head { max-width: 760px; margin-bottom: 56px; }
.sec-head h2 { font-size: clamp(40px, 5vw, 68px); margin-top: 18px; }
.sec-head p { margin-top: 20px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* film */
.film-frame { position: relative; border-radius: 28px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--rim), 0 40px 120px #000, 0 0 140px #cfd8e614; background: #000; }
.film-frame video { width: 100%; aspect-ratio: 16/9; }

/* pains */
.pains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pain { padding: 28px; border-radius: var(--radius-lg); background: var(--obsidian); box-shadow: var(--rim); border: 1px solid var(--line); }
.pain .q { font-family: var(--font-display); font-size: 27px; line-height: 32px; font-weight: 300; }
.pain .a { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.pain .a b { font-family: var(--font-inscription); font-weight: 400; letter-spacing: .24em; font-size: 12px; color: var(--ink); display: block; margin-bottom: 4px; }

/* preview */
.preview-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px; border-radius: 999px; background: var(--graphite); border: 1px solid var(--line); width: max-content; max-width: 100%; margin-bottom: 22px; }
.preview-tabs button { all: unset; cursor: pointer; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 8px; }
.preview-tabs button small { font-family: var(--font-inscription); font-size: 10px; letter-spacing: .2em; opacity: .7; }
.preview-tabs button[aria-selected="true"] { background: var(--ink); color: var(--on-halo); box-shadow: var(--glow-sm); }
.preview-tabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.preview-shell { position: relative; border-radius: 26px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--rim), 0 40px 120px #000; background: var(--void); }
.preview-bar { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 18px; background: var(--obsidian); box-shadow: inset 0 -1px 0 var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.preview-bar .dots { display: flex; gap: 6px; }
.preview-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--smoke); }
.preview-badge { display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid #e9c37f59; color: var(--signal-warn); font-size: 11px; letter-spacing: .08em; }
.preview-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.preview-viewport { position: relative; overflow: hidden; }
.preview-stage { position: absolute; left: 0; top: 0; width: 1440px; transform-origin: 0 0; }
.preview-stage input { pointer-events: none; }
.preview-note { margin-top: 18px; font-size: 14px; color: var(--ink-faint); text-align: center; }
.toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 80; display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 22px; border-radius: 999px; background: #131316ee; border: 1px solid var(--line-strong); box-shadow: var(--rim), var(--depth), 0 0 40px #ffffff14; backdrop-filter: blur(20px); transition: opacity .25s, transform .25s; font-size: 15px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast .btn { height: 38px; padding: 0 16px; font-size: 13px; }

/* tech */
.tech { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tech-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--obsidian); border: 1px solid var(--line); box-shadow: var(--rim); }
.tech-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.tech-card .body { padding: 24px 28px 28px; }
.tech-card h3 { margin: 0; font-size: 21px; line-height: 28px; font-weight: 500; }
.tech-card p { margin: 8px 0 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.tag-building { display: inline-block; margin-left: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--ink-faint); border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 8px; vertical-align: middle; }

/* roadmap */
.road { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.phase { position: relative; padding: 26px 22px 30px; border-radius: 22px; background: var(--obsidian); border: 1px solid var(--line); box-shadow: var(--rim); min-height: 300px; }
.phase.now { border-color: #ffffffcc; box-shadow: 0 0 50px #ffffff26, var(--rim); background: radial-gradient(90% 50% at 50% 0%, #cfd8e622, var(--obsidian) 70%); }
.phase .k { font-family: var(--font-inscription); font-size: 11px; letter-spacing: .3em; color: var(--ink-muted); }
.phase h3 { font-family: var(--font-display); font-weight: 300; font-size: 34px; line-height: 38px; margin: 14px 0 18px; }
.phase ul { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 27px; color: var(--ink-muted); }

/* story teaser */
.story-teaser { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.quote { font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.18; margin: 0; }
.quote em { color: var(--aether); }
.orb { position: relative; aspect-ratio: 1; max-width: 460px; margin-left: auto; }
.orb::before { content: ""; position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(closest-side, #ffffff26, #cfd8e60d 55%, #05050600); }
.orb img { position: relative; width: 100%; height: 100%; }

/* final cta */
.final { text-align: center; padding: 160px 0; overflow: hidden; }
.final::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1100px; height: 700px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, #cfd8e61f, #05050600); pointer-events: none; }
.final h2 { font-size: clamp(48px, 7vw, 96px); }
.final .btn { margin-top: 44px; }

/* footer */
footer { border-top: 1px solid var(--line); padding: 44px 0 56px; font-size: 13px; line-height: 22px; color: var(--ink-faint); }
footer .wrap { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
footer .links { display: flex; gap: 22px; color: var(--ink-muted); }
footer .links a:hover { color: var(--ink); }
footer .legal { max-width: 560px; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1), filter .9s; }
.reveal.in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; filter: none; transition: none; } html { scroll-behavior: auto; } }

/* story page */
.article { width: min(720px, 100% - 48px); margin: 0 auto; padding: 170px 0 120px; }
.article h1 { font-size: clamp(52px, 7vw, 88px); margin: 20px 0 14px; }
.article .byline { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: 60px; }
.article p { font-size: 20px; line-height: 34px; color: #dedcd6; margin: 0 0 26px; }
.article p.big { font-family: var(--font-display); font-size: 34px; line-height: 42px; color: var(--ink); font-weight: 300; }
.article ul.checks { list-style: none; padding: 0; margin: 0 0 30px; border-left: 1px solid var(--line-strong); }
.article ul.checks li { padding: 8px 0 8px 22px; font-size: 19px; line-height: 28px; color: var(--ink-muted); }
.article ul.checks li b { color: var(--ink); font-weight: 500; }
.article ul.checks li.never b { color: var(--signal-danger); }
.article .ahyes { font-family: var(--font-display); font-style: italic; font-size: 40px; line-height: 48px; color: var(--aether); text-shadow: var(--text-glow); margin: 40px 0; }
.article .end { margin-top: 70px; padding-top: 40px; border-top: 1px solid var(--line); display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .nav-links { display: none; }
  .pains { grid-template-columns: 1fr 1fr; }
  .tech { grid-template-columns: 1fr; }
  .road { grid-template-columns: 1fr 1fr; }
  .phase { min-height: 0; }
  .story-teaser { grid-template-columns: 1fr; }
  .orb { margin: 0 auto; max-width: 320px; }
  section { padding: 96px 0; }
}
@media (max-width: 600px) {
  .pains, .road { grid-template-columns: 1fr; }
  .nav .btn span { display: none; }
  .hero h1 { font-size: 54px; }
  .preview-tabs button small { display: none; }
}
.preview-badge { white-space: nowrap; }
@media (max-width: 600px) { .preview-url { display: none; } .preview-note::after { content: " Best viewed on desktop."; } }