:root{
  /* tweakable */
  --bg: #0d1729;
  --bg-2: #1a2540;
  --ink: #f4ebd9;
  --ink-dim: #b9b09e;
  --ink-faint: #6c6657;
  --gold: #d4a559;
  --olive: #8a9b6a;
  --rule: rgba(244,235,217,.12);
  --card: rgba(244,235,217,.04);
  --card-border: rgba(244,235,217,.08);

  --font-display: "Newsreader", "Cormorant Garamond", "GT Sectra", serif;
  --font-body: "Manrope", "Söhne", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --grain-opacity: 0.05;
  --type-scale: 1;
  --hero-depth: 1;
  --accent-intensity: 1;

  /* motion language — one ease vocabulary, used everywhere */
  --ease-out: cubic-bezier(.22, 1, .36, 1);      /* out-quart — premium settle */
  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);  /* out-expo — ambient drift */
  --ease-io: cubic-bezier(.65, 0, .35, 1);       /* breathing in-out */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-weight:300;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;font-feature-settings:'ss01','kern','liga'}
body{font-size:16px;line-height:1.55;letter-spacing:.005em}
h2,h3,h4{text-wrap:balance;font-feature-settings:'dlig','kern','liga'}
.hero h1{text-wrap:balance;font-feature-settings:'dlig','kern','liga'}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img,svg{display:block;max-width:100%}

::selection{background:var(--gold);color:var(--bg)}

/* grain */
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:1000;opacity:var(--grain-opacity);mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.92 0 0 0 0 0.85 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:240px 240px}

/* Display & body type */
.display{font-family:var(--font-display);font-weight:300;letter-spacing:-0.02em;line-height:1.02}
.italic{font-style:italic}
.eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:var(--ink-dim);font-weight:500}
.serif-italic{font-family:var(--font-display);font-style:italic;font-weight:300}

/* layout */
.wrap{max-width:1440px;margin:0 auto;padding:0 48px}
@media(max-width:720px){.wrap{padding:0 24px}}

/* ============ CINEMATIC SCENES ============ */
/* Each .scene is its own opaque chapter. .scene-veil sits above section
   content (z:8), starts fully opaque, and scrubs to transparent only as
   the section's top crosses 90% → 45% of the viewport — so the next
   scene is literally hidden behind a bg-colored curtain until you reach it. */
.scene{position:relative;background:var(--bg);isolation:isolate}
.scene > *{position:relative;z-index:2}
.scene-veil{position:absolute;inset:0;background:var(--bg);opacity:1;pointer-events:none;z-index:8;will-change:opacity}
/* shoulder element — soft fade-to-bg at scene bottom for a clean handoff into the next curtain */
.scene-shoulder{position:absolute;left:0;right:0;bottom:0;height:22vh;background:linear-gradient(180deg,transparent 0%,var(--bg) 100%);pointer-events:none;z-index:7}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:18px 48px;display:flex;align-items:center;justify-content:space-between;transition:background .6s var(--ease-out), backdrop-filter .6s var(--ease-out), border-color .6s var(--ease-out);border-bottom:1px solid transparent}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 75%,transparent);backdrop-filter:blur(20px) saturate(140%);border-bottom-color:var(--rule)}
.nav .brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:22px;letter-spacing:-.01em}
.nav .brand .glyph{width:30px;height:30px;display:inline-block;flex-shrink:0;background:url("../bread 2.png") 48% 49% / 380% auto no-repeat;border-radius:7px;box-shadow:0 4px 12px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.05)}
.nav ul{display:flex;gap:36px;list-style:none;font-size:13px;color:var(--ink-dim)}
.nav ul a{position:relative;padding:6px 0;transition:color .45s var(--ease-out)}
.nav ul a:hover{color:var(--ink)}
.nav ul a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .55s var(--ease-out)}
.nav ul a:hover::after{right:0}
.nav .cta{padding:10px 20px;border:1px solid var(--rule);border-radius:999px;font-size:13px;letter-spacing:.06em;transition:background .5s var(--ease-out), color .5s var(--ease-out), border-color .5s var(--ease-out)}
.nav .cta:hover{background:var(--gold);color:var(--bg);border-color:var(--gold)}
@media(max-width:720px){.nav{padding:14px 20px} .nav ul{display:none}}

/* ============ HERO ============ */
.hero{position:relative;min-height:100vh;display:grid;place-items:center;padding:140px 0 80px;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-bg .vignette{position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 40%, transparent 0%, var(--bg) 100%)}
.hero-bg .glow{position:absolute;left:50%;top:50%;width:900px;height:900px;transform:translate(-50%,-50%);background:radial-gradient(closest-side, color-mix(in srgb,var(--gold) calc(18% * var(--accent-intensity)), transparent) 0%, transparent 70%)}
.hero-bg .glow-2{position:absolute;left:18%;top:75%;width:560px;height:560px;background:radial-gradient(closest-side, color-mix(in srgb,var(--olive) calc(14% * var(--accent-intensity)), transparent), transparent 70%);opacity:.6;pointer-events:none}
.hero-bg .grid-lines{position:absolute;inset:0;background-image:linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);background-size:120px 120px;opacity:.28;mask-image:radial-gradient(55% 55% at 50% 45%, #000 30%, transparent 85%);-webkit-mask-image:radial-gradient(55% 55% at 50% 45%, #000 30%, transparent 85%)}
.hero-bg .light-shaft{position:absolute;left:50%;top:-20%;width:60%;height:140%;transform:translateX(-50%) rotate(8deg);background:linear-gradient(180deg, color-mix(in srgb,var(--gold) 8%, transparent), transparent 70%);pointer-events:none;mix-blend-mode:screen;opacity:.7}

.hero-inner{position:relative;z-index:2;text-align:center;max-width:1200px;padding:0 40px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:36px;padding:8px 14px;border:1px solid var(--rule);border-radius:999px;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);background:rgba(244,235,217,.02)}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--olive);box-shadow:0 0 12px var(--olive)}
.hero h1{font-size:calc(clamp(36px, 7vw, 100px) * var(--type-scale));font-weight:300;letter-spacing:-0.034em;line-height:1.08}
/* Padding + negative margin on .word extends the overflow-clip box around the
   text so italic ascenders and slanted right-edges aren't sliced. Layout is
   neutralized by the matching negative margin. The 130% translate keeps the
   inner span fully hidden in its initial state now that the wrapper is taller. */
.hero h1 .word{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0.14em 0.08em 0.18em;margin:-0.14em -0.08em -0.18em}
.hero h1 .word > span{display:inline-block;transform:translateY(130%)}
.hero h1 .accent{color:var(--gold);font-style:italic;font-weight:300}
.hero h1 .accent2{color:var(--olive);font-style:italic}
.hero h1 .strike{position:relative;display:inline-block}
.hero h1 .strike::after{content:"";position:absolute;left:-4%;right:-4%;top:55%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;animation:strike 1.2s 2.4s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes strike{to{transform:scaleX(1)}}

.hero-sub{max-width:560px;margin:44px auto 0;color:var(--ink-dim);font-size:clamp(15px,1.15vw,17px);line-height:1.65;font-weight:300;opacity:0;transform:translateY(22px);animation:fadeUp 1.6s 2.05s var(--ease-out-soft) forwards}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

.hero-cta{margin-top:44px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;opacity:0;transform:translateY(22px);animation:fadeUp 1.2s 2.3s var(--ease-out-soft) forwards}
.btn{position:relative;padding:15px 30px;border-radius:999px;font-size:13.5px;letter-spacing:.06em;font-weight:500;transition:background .55s var(--ease-out), color .55s var(--ease-out), border-color .55s var(--ease-out);display:inline-flex;align-items:center;gap:12px;will-change:transform}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{background:var(--gold);color:var(--bg)}
.btn-ghost{border:1px solid var(--rule);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn .arrow{transition:transform .55s var(--ease-out)}
.btn:hover .arrow{transform:translateX(5px)}

/* phone + orbits */
.stage{position:relative;margin:80px auto 0;width:min(1100px, 92vw);aspect-ratio: 16/10;display:grid;place-items:center}
.stage-3d{position:absolute;inset:0;display:grid;place-items:center;perspective:1400px}

/* faked 3D book */
.book{position:relative;width:520px;height:360px;transform-style:preserve-3d;transform:rotateX(18deg) rotateY(-20deg);opacity:.85;will-change:transform}
.book .page{position:absolute;inset:0;border-radius:6px 14px 14px 6px;background:linear-gradient(135deg, #f4ebd9, #e6d8b8);box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.05);transform-origin:left center}
.book .page.p1{transform:translateZ(-14px) rotateY(-2deg);background:linear-gradient(135deg,#d6c8a8,#b7a682)}
.book .page.p2{transform:translateZ(-7px) rotateY(-1deg);background:linear-gradient(135deg,#e8dcbe,#cfbf99)}
.book .page.p3{transform:translateZ(0px)}
.book .spine{position:absolute;left:-2px;top:0;bottom:0;width:18px;background:linear-gradient(90deg,#9b7a3a, #6c5424);border-radius:6px 0 0 6px;transform:translateZ(-7px)}
.book .gild{position:absolute;left:38%;top:50%;transform:translate(-50%,-50%);font-family:var(--font-display);color:#9b7a3a;font-size:14px;letter-spacing:.4em;text-transform:uppercase;opacity:.7}
.book .gild2{position:absolute;left:38%;top:62%;transform:translate(-50%,-50%);font-family:var(--font-display);color:#9b7a3a;font-size:11px;letter-spacing:.3em;opacity:.5}
.book .ribbon{position:absolute;left:62%;top:-10px;width:14px;height:120px;background:linear-gradient(180deg,#a72a2a,#6e1b1b);box-shadow:0 6px 12px rgba(0,0,0,.3)}
.book .glow{position:absolute;inset:-60px;background:radial-gradient(closest-side, color-mix(in srgb, var(--gold) 30%, transparent), transparent 70%);filter:blur(20px);z-index:-1}

/* device frame instead of literal iphone */
.device{position:relative;width:300px;height:610px;border-radius:48px;background:linear-gradient(180deg,#1c1a17,#0a0a0a);padding:14px;box-shadow:0 60px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.04);z-index:5;transform:translateZ(60px)}
.device::after{content:"";position:absolute;left:50%;top:18px;transform:translateX(-50%);width:96px;height:28px;background:#0a0a0a;border-radius:14px;z-index:3}
.screen{width:100%;height:100%;border-radius:36px;background:linear-gradient(180deg,#fdf7ea,#f3e8cf);overflow:hidden;position:relative;color:#2a241a;font-family:var(--font-body);display:flex;flex-direction:column}
.screen .status{display:flex;justify-content:space-between;align-items:center;padding:14px 24px 0;font-size:12px;font-weight:500}
.screen .greet{padding:36px 24px 8px;font-family:var(--font-display);font-size:26px;line-height:1.05;letter-spacing:-.02em;color:#2a241a}
.screen .greet em{font-style:italic;color:#a07d3a}
.screen .streak{margin:18px 24px;padding:18px;border-radius:20px;background:linear-gradient(160deg,#fff8e6,#f0debf);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.screen .streak .row{display:flex;justify-content:space-between;align-items:end}
.screen .streak .num{font-family:var(--font-display);font-size:54px;line-height:1;color:#a07d3a;font-weight:300}
.screen .streak .label{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:#8a7c5a}
.screen .streak .flame{font-size:20px}
.screen .heat{margin:8px 24px 0;display:grid;grid-template-columns:repeat(14,1fr);gap:4px}
.screen .heat span{aspect-ratio:1;border-radius:3px;background:#e2d2ad}
.screen .heat span.h1{background:#d6bd83}
.screen .heat span.h2{background:#bc9b53}
.screen .heat span.h3{background:#9c7a30}
.screen .heat span.h4{background:#7a5a17}
.screen .read{margin:18px 24px;padding:16px;border-radius:18px;background:#2a241a;color:#f4ebd9}
.screen .read .ref{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#d4a559;margin-bottom:8px}
.screen .read .verse{font-family:var(--font-display);font-size:15px;line-height:1.35;font-style:italic}
.screen .tabs{margin-top:auto;display:flex;justify-content:space-around;padding:14px 24px 28px;border-top:1px solid rgba(0,0,0,.08)}
.screen .tabs span{width:24px;height:24px;border-radius:8px;background:#d6c8a8}
.screen .tabs span.active{background:#a07d3a}

/* orbiting cards */
.orbit{position:absolute;background:color-mix(in srgb,var(--ink) 6%, transparent);backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%);border:1px solid var(--card-border);border-radius:18px;padding:14px 16px;font-size:12px;color:var(--ink);box-shadow:0 24px 48px -12px rgba(0,0,0,.5), inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);z-index:6;will-change:transform;transition:border-color .6s, background .6s, box-shadow .6s}
.orbit:hover{border-color:color-mix(in srgb, var(--gold) 38%, var(--card-border));background:color-mix(in srgb,var(--ink) 9%, transparent);box-shadow:0 30px 64px -12px rgba(0,0,0,.55), 0 0 24px color-mix(in srgb,var(--gold) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent)}
.orbit .h{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:8px}
.orbit .v{font-family:var(--font-display);font-size:22px;letter-spacing:-.01em}
.orbit .small{font-size:11px;color:var(--ink-dim);margin-top:4px}

.orbit-1{top:8%;left:4%}
.orbit-2{top:18%;right:6%;width:200px}
.orbit-3{bottom:22%;left:2%;width:210px}
.orbit-4{bottom:8%;right:4%}
.orbit-5{top:48%;right:-2%}
.orbit-6{top:50%;left:-4%}

.mini-heat{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin-top:6px}
.mini-heat span{width:8px;height:8px;border-radius:2px;background:rgba(244,235,217,.12)}
.mini-heat span.on{background:var(--gold)}
.mini-heat span.med{background:color-mix(in srgb,var(--gold) 50%,transparent)}

@media(max-width:900px){
  .stage{aspect-ratio:auto;height:auto;margin-top:60px}
  .book{transform:scale(.7) rotateX(18deg) rotateY(-20deg)}
  .orbit-5,.orbit-6{display:none}
  .orbit{font-size:11px;padding:10px 12px}
  .orbit-1{top:0;left:-2%}
  .orbit-2{top:6%;right:-2%;width:160px}
  .orbit-3{bottom:8%;left:-2%;width:170px}
  .orbit-4{bottom:0;right:-2%}
  .device{width:240px;height:490px}
}

/* scroll cue */
.scroll-cue{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-dim);display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;animation:fadeUp 1.2s 2.9s var(--ease-out-soft) forwards}
.scroll-cue .line{width:1px;height:46px;background:linear-gradient(180deg,var(--ink-dim) 0%,transparent 100%);transform-origin:top center;animation:cueline 2.8s var(--ease-io) infinite}
@keyframes cueline{0%{transform:scaleY(.15);opacity:.35}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.15);opacity:.35}}

/* ============ MARQUEE INTRO ============ */
.marquee{padding:80px 0;overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%)}
.marquee-track{display:inline-flex;gap:80px;align-items:center;animation:marquee 68s linear infinite;font-family:var(--font-display);font-size:64px;font-style:italic;font-weight:300;color:var(--ink-faint)}
.marquee-track span{display:inline-flex;align-items:center;gap:80px}
.marquee-track .sep{font-family:var(--font-body);font-style:normal;font-size:20px;color:var(--gold)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============ FEATURES (pinned scroll) ============ */
.features{position:relative;padding:160px 0 80px}
.section-head{display:grid;grid-template-columns:1fr 2fr;gap:80px;padding:0 48px;margin-bottom:120px;align-items:end}
.section-head h2{font-size:calc(clamp(38px,5.3vw,80px) * var(--type-scale));font-weight:300;letter-spacing:-.032em;line-height:1.0}
.section-head h2 em{font-style:italic;color:var(--gold)}
.section-head p{color:var(--ink-dim);font-size:17px;line-height:1.6;max-width:520px}
@media(max-width:900px){.section-head{grid-template-columns:1fr;padding:0 24px;gap:32px}}

/* sticky storytelling */
.feature-track{position:relative}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:60px 48px;align-items:center;min-height:80vh;border-top:1px solid var(--rule)}
.feature-row:last-child{border-bottom:1px solid var(--rule)}
.feature-row.flip .ftext{order:2}
.feature-num{font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;color:var(--gold);margin-bottom:24px}
.feature-row h3{font-family:var(--font-display);font-size:calc(clamp(34px,4.4vw,62px) * var(--type-scale));font-weight:300;letter-spacing:-.028em;line-height:1.02;margin-bottom:28px}
.feature-row h3 em{font-style:italic;color:var(--gold)}
.feature-row p{color:var(--ink-dim);font-size:clamp(15px,1.2vw,18px);line-height:1.65;max-width:460px}
.feature-row .meta{margin-top:36px;display:flex;gap:24px;flex-wrap:wrap}
.feature-row .meta div{border-left:1px solid var(--rule);padding-left:14px}
.feature-row .meta .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px}
.feature-row .meta .v{font-family:var(--font-display);font-size:22px;letter-spacing:-.01em}

.vis{position:relative;aspect-ratio:5/6;border-radius:28px;background:linear-gradient(160deg, color-mix(in srgb,var(--bg-2) 65%,var(--bg)), var(--bg));border:1px solid var(--card-border);overflow:hidden;display:grid;place-items:center;padding:40px;transition:border-color .8s var(--ease-out), transform .9s var(--ease-out-soft), box-shadow .8s var(--ease-out)}
.vis::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 40% at 70% 25%, color-mix(in srgb,var(--gold) calc(12% * var(--accent-intensity)), transparent), transparent);pointer-events:none}
.vis::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.25));pointer-events:none}
.feature-row:hover .vis{border-color:color-mix(in srgb,var(--gold) 22%, var(--card-border));box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
@media(max-width:900px){.feature-row{grid-template-columns:1fr;padding:60px 24px;gap:40px;min-height:0}.feature-row.flip .ftext{order:0}.vis{aspect-ratio:4/5}}

/* feature viz 1: streak ring */
.ring{position:relative;width:80%;aspect-ratio:1;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring .core{position:relative;text-align:center}
.ring .core .n{font-family:var(--font-display);font-size:clamp(72px,10vw,128px);font-weight:300;color:var(--ink);letter-spacing:-.03em;line-height:1}
.ring .core .l{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--ink-dim);text-transform:uppercase;margin-top:8px}
.ring .core .best{margin-top:14px;font-family:var(--font-display);font-style:italic;color:var(--gold);font-size:14px}

/* feature viz 2: heatmap */
.heatmap{width:100%;display:grid;grid-template-columns:repeat(20,1fr);gap:5px}
.heatmap span{aspect-ratio:1;border-radius:3px;background:rgba(244,235,217,.06)}
.heatmap span.l1{background:color-mix(in srgb,var(--olive) 40%, transparent)}
.heatmap span.l2{background:color-mix(in srgb,var(--olive) 70%, transparent)}
.heatmap span.l3{background:var(--olive)}
.heatmap span.l4{background:var(--gold)}
.heatmap-cap{margin-top:24px;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--ink-dim);text-transform:uppercase;width:100%}

/* feature viz 3: chapter grid */
.chapters{width:100%;display:flex;flex-direction:column;gap:14px;max-height:520px;overflow:hidden;mask-image:linear-gradient(180deg,#000 70%,transparent)}
.chap-row{display:flex;align-items:center;gap:10px}
.chap-row .name{font-family:var(--font-display);font-size:13px;color:var(--ink);width:90px;font-style:italic}
.chap-row .cells{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px}
.chap-row .cells span{height:14px;border-radius:2px;background:rgba(244,235,217,.08)}
.chap-row .cells span.on{background:var(--gold)}
.chap-row .cells span.partial{background:color-mix(in srgb,var(--gold) 40%, transparent)}

/* feature viz 4: verse note */
.verse-card{width:100%;max-width:380px;padding:28px;border-radius:20px;background:linear-gradient(160deg,#1f2a44,#141e36);box-shadow:0 30px 60px rgba(0,0,0,.4);border:1px solid var(--card-border);position:relative}
.verse-card .ref{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--gold);text-transform:uppercase;margin-bottom:14px}
.verse-card .text{font-family:var(--font-display);font-size:20px;line-height:1.4;font-style:italic;color:var(--ink)}
.verse-card .text::before{content:"\201C";font-size:48px;line-height:0;vertical-align:-20px;color:var(--gold);margin-right:6px}
.note-card{margin-top:-16px;margin-left:36px;max-width:340px;padding:22px;border-radius:18px;background:color-mix(in srgb,var(--ink) 5%, transparent);border:1px dashed var(--rule)}
.note-card .nh{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px}
.note-card .nh .dot{width:6px;height:6px;border-radius:50%;background:var(--olive)}
.note-card .body{font-family:var(--font-display);font-size:15px;line-height:1.5;color:var(--ink);font-style:italic}

/* feature viz 5: light/dark split */
.split{position:relative;width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.split .pane{border-radius:24px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;min-height:380px}
.split .light{background:linear-gradient(180deg,#fdf7ea,#efe1c2);color:#2a241a}
.split .dark{background:linear-gradient(180deg,#0a1224,#0d1729);color:#f4ebd9;border:1px solid var(--card-border)}
.split .pane .h{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.split .pane .g{font-family:var(--font-display);font-size:28px;line-height:1.05;letter-spacing:-.02em}
.split .pane .g em{font-style:italic;color:var(--gold)}
.split .pane .meta{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}

/* feature viz 6: lock */
.lockwrap{position:relative;width:100%;display:grid;place-items:center}
.lockwrap svg{width:60%;max-width:240px}
.lock-badge{margin-top:30px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--gold);border-radius:999px;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);box-shadow:0 0 30px color-mix(in srgb,var(--gold) 30%, transparent)}
.lock-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ============ PRIVACY MANIFESTO ============ */
.privacy{position:relative;padding:120px 0 96px;background:linear-gradient(180deg,var(--bg), color-mix(in srgb,var(--bg-2) 70%, var(--bg)));overflow:hidden}
.privacy::before{content:"";position:absolute;left:50%;top:34%;width:760px;height:760px;transform:translateX(-50%);background:radial-gradient(closest-side, color-mix(in srgb,var(--gold) 9%, transparent), transparent 70%);pointer-events:none;opacity:.5}
.privacy::after{content:"";position:absolute;right:-10%;bottom:0;width:520px;height:520px;background:radial-gradient(closest-side, color-mix(in srgb,var(--olive) 7%, transparent), transparent 70%);pointer-events:none}
.priv-headline{padding:0 48px;text-align:center;max-width:880px;margin:0 auto 72px;position:relative}
.priv-headline h2{font-family:var(--font-display);font-size:calc(clamp(34px,5vw,72px) * var(--type-scale));font-weight:300;letter-spacing:-.03em;line-height:1.04}
.priv-headline h2 em{font-style:italic;color:var(--gold)}

/* editorial timeline */
.priv-list{position:relative;max-width:860px;margin:0 auto;padding:0 48px}
.priv-list::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent, var(--rule) 8%, var(--rule) 92%, transparent);transform:translateX(-.5px)}
.priv-item{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:start;padding:26px 0;gap:56px}
.priv-item:nth-child(even) .priv-body{grid-column:2;text-align:left}
.priv-item:nth-child(even) .priv-aside{grid-column:1;text-align:right;justify-self:end}
.priv-item:nth-child(odd) .priv-body{grid-column:1;text-align:right}
.priv-item:nth-child(odd) .priv-aside{grid-column:2;text-align:left;justify-self:start}
.priv-dot{position:absolute;left:50%;top:38px;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:var(--bg);border:1px solid color-mix(in srgb,var(--gold) 60%, var(--rule));box-shadow:0 0 0 5px var(--bg), 0 0 14px color-mix(in srgb,var(--gold) 40%, transparent);transition:transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s}
.priv-item:hover .priv-dot{transform:translateX(-50%) scale(1.3);box-shadow:0 0 0 5px var(--bg), 0 0 22px color-mix(in srgb,var(--gold) 70%, transparent)}
.priv-body{max-width:380px}
.priv-item:nth-child(odd) .priv-body{justify-self:end}
.priv-num{font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px;display:block}
.priv-no{font-family:var(--font-display);font-style:italic;font-weight:300;color:var(--gold);font-size:clamp(22px,2.6vw,32px);line-height:1;letter-spacing:-.02em;display:inline-block;margin-right:10px;vertical-align:baseline;opacity:.95}
.priv-h{font-family:var(--font-display);font-size:clamp(20px,2.4vw,30px);font-weight:300;letter-spacing:-.022em;line-height:1.08;display:inline}
.priv-p{color:var(--ink-dim);font-size:clamp(13px,.95vw,15px);line-height:1.6;margin-top:12px;max-width:340px}
.priv-item:nth-child(odd) .priv-p{margin-left:auto}
.priv-aside{align-self:center;color:var(--ink-faint);font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;max-width:210px;line-height:1.65;opacity:.5;transition:opacity .6s, color .6s}
.priv-item:hover .priv-aside{opacity:.85;color:var(--ink-dim)}
.priv-aside .k{display:block;color:var(--gold);font-style:normal;font-family:var(--font-display);text-transform:none;letter-spacing:-.01em;font-size:13px;font-style:italic;margin-bottom:4px;opacity:.9}

@media(max-width:780px){
  .priv-list{padding:0 24px;max-width:520px}
  .priv-list::before{left:14px}
  .priv-item{grid-template-columns:1fr;gap:10px;padding:24px 0 24px 36px}
  .priv-item:nth-child(odd) .priv-body,.priv-item:nth-child(even) .priv-body{grid-column:1;text-align:left;justify-self:start;max-width:none}
  .priv-item:nth-child(odd) .priv-aside,.priv-item:nth-child(even) .priv-aside{grid-column:1;text-align:left;justify-self:start;margin-top:4px}
  .priv-item:nth-child(odd) .priv-p{margin-left:0}
  .priv-dot{left:14px;top:34px}
}

.priv-badge-row{margin-top:56px;display:flex;justify-content:center}
.priv-badge{display:inline-flex;align-items:center;gap:14px;padding:18px 28px;border:1px solid var(--gold);border-radius:999px;background:color-mix(in srgb,var(--gold) 6%, transparent);box-shadow:0 0 60px color-mix(in srgb,var(--gold) 24%, transparent)}
.priv-badge .glow-dot{width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold);animation:pulse 2s ease-in-out infinite}
.priv-badge .t{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ============ DOWNLOAD CTA ============ */
.download{position:relative;padding:200px 0 160px;text-align:center;overflow:hidden}
.download::before{content:"";position:absolute;left:50%;top:50%;width:1000px;height:1000px;transform:translate(-50%,-50%);background:radial-gradient(closest-side, color-mix(in srgb,var(--gold) 14%, transparent), transparent 70%);filter:blur(20px);pointer-events:none}
.download .eyebrow{margin-bottom:32px}
.download h2{font-family:var(--font-display);font-size:calc(clamp(44px,6.8vw,104px) * var(--type-scale));font-weight:300;letter-spacing:-.034em;line-height:1.02;max-width:1100px;margin:0 auto;position:relative}
.download h2 em{font-style:italic;color:var(--gold)}
.download p{color:var(--ink-dim);max-width:540px;margin:32px auto 0;font-size:17px;line-height:1.6;position:relative}
.download .actions{margin-top:48px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;position:relative}

.download .bigbtn{padding:22px 40px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:14.5px;font-weight:500;letter-spacing:.06em;display:inline-flex;align-items:center;gap:16px;transition:background .55s var(--ease-out), color .55s var(--ease-out)}
.download .bigbtn:hover{background:var(--gold)}
.download .bigbtn .apple{width:18px;height:18px}

.download .meta{margin-top:56px;display:flex;justify-content:center;gap:48px;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);position:relative;flex-wrap:wrap}
.download .meta div{display:flex;align-items:center;gap:8px}
.download .meta .dot{width:6px;height:6px;border-radius:50%;background:var(--olive)}

/* ============ FOOTER ============ */
footer{position:relative;border-top:1px solid var(--rule);padding:80px 48px 36px;overflow:hidden}
.footer-wordmark{font-family:var(--font-display);font-size:clamp(120px,22vw,360px);font-weight:300;letter-spacing:-.04em;line-height:.85;color:var(--ink);opacity:.95}
.footer-wordmark em{font-style:italic;color:var(--gold)}
.footer-row{margin-top:40px;display:grid;grid-template-columns:1fr 2fr 1fr;gap:40px;align-items:end}
.footer-row .tag{font-family:var(--font-display);font-style:italic;font-size:20px;color:var(--ink-dim);max-width:320px;line-height:1.3}
.footer-row .links{display:flex;justify-content:center;gap:32px;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.footer-row .links a{color:var(--ink-dim);transition:color .3s}
.footer-row .links a:hover{color:var(--gold)}
.footer-row .copyright{text-align:right;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.footer-rule{margin-top:48px;height:1px;background:var(--rule)}
.footer-meta{margin-top:24px;display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
@media(max-width:900px){footer{padding:60px 24px 36px} .footer-row{grid-template-columns:1fr;text-align:left} .footer-row .links{justify-content:flex-start} .footer-row .copyright{text-align:left}}

/* ============ TWEAKS PANEL ============ */
.tweaks-toggle-fab{display:none}
.tweaks{position:fixed;right:24px;bottom:24px;width:320px;max-height:calc(100vh - 48px);background:rgba(13,23,41,.88);backdrop-filter:blur(28px) saturate(140%);border:1px solid var(--card-border);border-radius:20px;padding:18px;z-index:1001;color:var(--ink);font-family:var(--font-body);font-size:13px;box-shadow:0 30px 80px rgba(0,0,0,.6);overflow-y:auto;display:none}
.tweaks.open{display:block}
.tweaks h3{font-family:var(--font-display);font-size:18px;font-weight:400;letter-spacing:-.01em;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center}
.tweaks h3 .x{cursor:pointer;font-size:18px;color:var(--ink-dim);padding:4px 8px;line-height:1}
.tweaks .sub{font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
.tweaks .section{padding:14px 0;border-top:1px solid var(--rule)}
.tweaks .section:first-of-type{border-top:none;padding-top:6px}
.tweaks .label{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px}
.tweaks .swatches{display:flex;gap:8px;flex-wrap:wrap}
.tweaks .sw{width:36px;height:36px;border-radius:10px;cursor:pointer;border:2px solid transparent;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;overflow:hidden;transition:transform .2s}
.tweaks .sw:hover{transform:scale(1.08)}
.tweaks .sw.active{border-color:var(--gold)}
.tweaks .sw i{display:block}
.tweaks .pick{display:flex;gap:6px;flex-wrap:wrap}
.tweaks .pick button{padding:8px 12px;border-radius:10px;border:1px solid var(--rule);font-size:12px;transition:all .2s}
.tweaks .pick button.active{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.tweaks .pick button:hover{border-color:var(--ink)}
.tweaks .slider{display:flex;align-items:center;gap:10px}
.tweaks input[type=range]{flex:1;accent-color:var(--gold)}
.tweaks .val{font-family:var(--font-mono);font-size:11px;color:var(--ink-dim);min-width:36px;text-align:right}
.tweaks .toggle{display:flex;justify-content:space-between;align-items:center}
.tweaks .switch{position:relative;width:38px;height:22px;border-radius:999px;background:var(--rule);cursor:pointer;transition:background .25s}
.tweaks .switch.on{background:var(--gold)}
.tweaks .switch::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--ink);transition:left .25s}
.tweaks .switch.on::after{left:19px;background:var(--bg)}