/* ScreenGuard landing page, "Dusk". No dependencies. */
@font-face { font-family:"SG Serif"; src:url(assets/fonts/source-serif-4.woff2) format("woff2"); font-weight:200 900; font-style:normal; font-display:swap; }
@font-face { font-family:"SG Serif"; src:url(assets/fonts/source-serif-4-italic.woff2) format("woff2"); font-weight:200 900; font-style:italic; font-display:swap; }
:root {
  --canvas:#F3EFE7; --surface:#FFFCF6; --surface-low:#FBF6EC; --inset:#EEE8DD; --rule:#E3DACB;
  --ink:#1B1934; --pencil:#5D596B; --accent:#342A9E; --accent-fill:#342A9E; --brass:#86621F;
  --sky-top:#1D1A4D; --sky-mid:#2E2A78; --sky-low:#4B3A82; --lamp:#F4D59A;
  --cream:#F6F0E5; --cream-soft:#C9C2E2; --brass-light:#E9C783; --night-ink:#1D1A4D;
  --shadow:42,36,112;
  /* Serif everywhere, like the app: New York on Apple devices (ui-serif), Source Serif 4 elsewhere (OFL, assets/fonts) */
  --serif: ui-serif, "New York", "SG Serif", Georgia, serif;
  --ease: cubic-bezier(.2,.7,.2,1);
  --gutter: clamp(20px, 5vw, 48px);
  --hh: max(100svh, 620px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas:#0F1226; --surface:#181C36; --surface-low:#151831; --inset:#242845; --rule:#2B3051;
    --ink:#EEE9DF; --pencil:#A9A8C0; --accent:#ADA7FA; --accent-fill:#5048C8; --brass:#DDB66B;
    --sky-top:#15143D; --sky-mid:#252170; --sky-low:#3A2E78; --shadow:0,0,0;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--sky-top); color:var(--ink); font:17px/1.6 var(--serif); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--accent); text-underline-offset:3px; }
h1, h2, h3 { font-family:var(--serif); font-weight:600; letter-spacing:-.012em; margin:0; text-wrap:balance; }
p { margin:0; text-wrap:pretty; }
ul, ol { margin:0; padding:0; list-style:none; }
:focus-visible { outline:2px solid var(--brass-light); outline-offset:3px; border-radius:6px; }

.wrap { width:100%; max-width:1160px; margin:0 auto; padding:0 var(--gutter); }
.narrow { max-width:760px; margin-inline:auto; }
.center { text-align:center; }
.small { font-size:15px; color:var(--pencil); }

.kicker { font:600 12px/1 var(--serif); letter-spacing:.16em; text-transform:uppercase; color:var(--brass); margin-bottom:18px; }
.display { font-size:clamp(34px, 5.2vw, 60px); line-height:1.06; }
.body-l { font-size:clamp(18px, 1.7vw, 21px); line-height:1.55; color:var(--pencil); margin-top:22px; }
.rule { width:34px; height:2px; background:var(--brass-light); border-radius:2px; margin:0 0 22px; }
.center .rule { margin-inline:auto; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 30px; border-radius:999px; font:600 17px/1 var(--serif); text-decoration:none; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; white-space:nowrap; }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0) scale(.98); }
.btn-cream { background:var(--cream); color:var(--night-ink); box-shadow:0 10px 30px rgba(10,8,40,.35), inset 0 -2px 0 rgba(29,26,77,.08); }
.btn-cream:hover { box-shadow:0 16px 40px rgba(10,8,40,.45), 0 0 0 6px rgba(244,213,154,.14); }
.btn-small { min-height:38px; padding:0 18px; font-size:14px; background:var(--cream); color:var(--night-ink); }

/* ── Nav ── */
.nav { position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; gap:24px; padding:12px var(--gutter); padding-top:max(12px, env(safe-area-inset-top)); transition:background .35s, box-shadow .35s, color .35s; color:var(--cream); }
.nav nav { display:flex; gap:28px; margin-left:auto; }
.nav nav a { color:inherit; text-decoration:none; font-size:15px; opacity:.86; transition:opacity .2s; }
.nav nav a:hover { opacity:1; }
.brand { display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font:600 18px/1 var(--serif); }
.brand img { border-radius:22%; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.nav.solid { background:color-mix(in srgb, var(--canvas) 82%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(18px); backdrop-filter:saturate(1.4) blur(18px); box-shadow:0 1px 0 var(--rule); color:var(--ink); }
.nav.solid .btn-small { background:var(--accent-fill); color:#fff; }
@media (max-width:760px) { .nav nav { display:none; } .nav .btn-small { margin-left:auto; } }

/* ── Hero ── */
.hero { position:relative; height:var(--hh); overflow:hidden; background:var(--sky-top); color:var(--cream); --hp:0; }
.scene { position:absolute; bottom:0;
  --sw: max(100vw, calc(var(--hh) * 1.3808));
  width:var(--sw); height:max(var(--hh), calc(100vw / 1.3808));
  left:min(0px, calc(50vw - var(--sw) * .172));
  transform:translate3d(0, calc(var(--hp) * 90px), 0) scale(calc(1 + var(--hp) * .05)); transform-origin:17% 80%; will-change:transform; }
.scene-art { width:100%; height:100%; object-fit:cover; }
.scene-front { pointer-events:none; transform:translate3d(0, calc(var(--hp) * 40px), 0); }
.lamp { position:absolute; width:16%; aspect-ratio:1; border-radius:50%; translate:-50% -50%; background:radial-gradient(circle, rgba(244,213,154,.42), rgba(244,213,154,.12) 38%, transparent 68%); mix-blend-mode:screen; animation:flicker 5.5s ease-in-out infinite; }
.lamp-a { left:2.9%; top:42%; }
.lamp-b { left:31.2%; top:42%; animation-delay:-2.3s; }
@keyframes flicker { 0%,100% { opacity:.75; scale:1; } 42% { opacity:1; scale:1.06; } 47% { opacity:.82; } 53% { opacity:1; } 78% { opacity:.7; scale:.97; } }

.gardi { position:absolute; left:17.2%; bottom:13.5%; height:41%; aspect-ratio:756/1329; translate:-50% 0; padding:0; border:0; background:none; cursor:pointer; pointer-events:auto; -webkit-tap-highlight-color:transparent; filter:drop-shadow(0 18px 14px rgba(8,6,30,.45)); transition:scale .3s var(--ease); }
.gardi:hover { scale:1.02; }
.gardi picture, .gardi img { width:100%; height:100%; object-fit:contain; }

.hero::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(21,18,60,.55) 0%, rgba(21,18,60,0) 34%), linear-gradient(0deg, rgba(21,18,60,.55) 0%, rgba(21,18,60,0) 22%); }
.hero-inner { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; gap:34px; padding:96px var(--gutter) 64px; margin-left:auto; width:min(56%, 720px); margin-right:max(0px, calc((100vw - 1260px) / 2));
  opacity:calc(1 - var(--hp) * 1.5); transform:translate3d(0, calc(var(--hp) * -70px), 0); }
.hero h1 { font-size:clamp(44px, 6.3vw, 86px); line-height:1.02; text-shadow:0 2px 30px rgba(15,12,50,.5); }
.lede { font-size:clamp(18px, 1.9vw, 23px); color:var(--cream); font-weight:500; margin-top:22px; max-width:28ch; text-shadow:0 1px 2px rgba(15,12,50,.9), 0 0 18px rgba(15,12,50,.85), 0 0 40px rgba(15,12,50,.6); }
.hero-note { font-size:14px; color:var(--cream-soft); margin-top:16px; letter-spacing:.01em; }
.hero-copy > *, .hero-cta > * { animation:rise 1s var(--ease) both; }
.hero-copy h1 { animation-delay:.12s; } .hero-copy .lede { animation-delay:.24s; }
.hero-cta > :first-child { animation-delay:.4s; } .hero-cta > :last-child { animation-delay:.5s; }
@keyframes rise { from { opacity:0; transform:translateY(22px); } }

.scroll-cue { position:absolute; z-index:3; left:50%; bottom:22px; width:26px; height:42px; translate:-50% 0; border:1.5px solid rgba(246,240,229,.5); border-radius:14px; opacity:calc(1 - var(--hp) * 6); }
.scroll-cue span { position:absolute; left:50%; top:8px; width:3px; height:8px; margin-left:-1.5px; border-radius:2px; background:var(--cream); animation:cue 2s var(--ease) infinite; }
@keyframes cue { 0% { opacity:0; transform:translateY(0); } 30% { opacity:1; } 100% { opacity:0; transform:translateY(14px); } }

@media (max-width:860px) {
  .hero-inner { width:100%; margin:0; justify-content:space-between; text-align:center; padding:92px var(--gutter) calc(40px + max(22px, env(safe-area-inset-bottom))); }
  .hero-copy .rule { margin-inline:auto; }
  .lede { margin-inline:auto; }
  .hero h1 { font-size:clamp(38px, 10.4vw, 60px); }
  .gardi { height:37%; bottom:19%; }
  .scroll-cue { display:none; }
  .hero-cta .btn { width:100%; max-width:360px; }
  .hero::after { background:linear-gradient(180deg, rgba(21,18,60,.82) 0%, rgba(21,18,60,.7) 30%, rgba(21,18,60,0) 50%), linear-gradient(0deg, rgba(21,18,60,.8) 0%, rgba(21,18,60,0) 26%); }
}

/* ── Paper sections ── */
.paper { background:var(--canvas); position:relative; padding:clamp(72px, 11vw, 140px) 0; }
.promise { border-radius:32px 32px 0 0; margin-top:-32px; z-index:3; }
.paper + .paper { padding-top:0; }
.dusk + .paper { padding-top:clamp(72px, 11vw, 140px); }

.chips { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:34px; }
.chips li { padding:9px 18px; border-radius:999px; background:var(--surface); border:1px solid var(--rule); font:600 14px/1.2 var(--serif); color:var(--accent); box-shadow:0 2px 8px rgba(var(--shadow),.05); }

.ticks { margin-top:22px; display:grid; gap:12px; }
.ticks li { position:relative; padding-left:30px; color:var(--pencil); }
.ticks li::before { content:""; position:absolute; left:2px; top:.42em; width:14px; height:8px; border-left:2px solid var(--brass); border-bottom:2px solid var(--brass); transform:rotate(-45deg) scale(.8); transform-origin:center; }
.ticks strong, .faq strong { color:var(--ink); }
.plain { margin-top:26px; display:grid; gap:14px; }
.plain li { padding-left:20px; position:relative; color:var(--cream-soft); }
.plain li::before { content:""; position:absolute; left:0; top:.68em; width:6px; height:6px; border-radius:50%; background:var(--brass-light); }

/* ── Phone ── */
.phone { --pw:280px; width:var(--pw); margin:0; padding:calc(var(--pw) * .032); border-radius:calc(var(--pw) * .175); background:linear-gradient(145deg, #2b2850, #0e0c22 60%); position:relative; flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 40px 70px -20px rgba(var(--shadow),.45), 0 18px 30px -12px rgba(var(--shadow),.3); }
.phone img, .screens { width:100%; aspect-ratio:1320/2868; border-radius:calc(var(--pw) * .145); object-fit:cover; background:var(--sky-top); }
.phone::after { content:""; position:absolute; left:50%; top:calc(var(--pw) * .058); width:27%; height:calc(var(--pw) * .078); translate:-50% 0; background:#000; border-radius:999px; }
.screens { position:relative; overflow:hidden; }
.screens img { position:absolute; inset:0; height:100%; border-radius:0; opacity:0; transform:scale(1.04); transition:opacity .6s var(--ease), transform .9s var(--ease); }
.screens img.on { opacity:1; transform:none; }

/* ── Tour ── */
.tour-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(32px, 6vw, 96px); }
.chapter { min-height:92vh; display:flex; flex-direction:column; justify-content:center; max-width:500px; opacity:.28; transition:opacity .5s var(--ease); }
.chapter.on { opacity:1; }
.chapter h2 { font-size:clamp(32px, 4.2vw, 52px); line-height:1.08; }
.chapter > p:not(.kicker) { font-size:19px; color:var(--pencil); margin-top:18px; }
.phone.inline { display:none; }
.stage-pin { position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; gap:28px; }
.stage-glow { position:absolute; width:min(520px, 90%); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(244,213,154,.5), rgba(210,167,90,.14) 45%, transparent 70%); filter:blur(10px); }
.phone.big { --pw:clamp(250px, 36vh, 340px); }
.pips { display:grid; gap:10px; position:relative; }
.pips li { width:6px; height:6px; border-radius:6px; background:var(--rule); transition:height .4s var(--ease), background .4s; }
.pips li.on { height:26px; background:var(--accent-fill); }
@media (max-width:860px) {
  .tour-grid { grid-template-columns:1fr; }
  .stage { display:none; }
  .chapter { min-height:0; opacity:1; max-width:none; padding:0 0 84px; align-items:center; text-align:center; }
  .chapter:last-child { padding-bottom:0; }
  .chapter .ticks { text-align:left; }
  .phone.inline { display:block; margin-top:36px; --pw:min(270px, 72vw); }
}

/* ── Dusk sections ── */
.dusk { position:relative; color:var(--cream); padding:clamp(80px, 12vw, 150px) 0; overflow:hidden;
  background:radial-gradient(90% 60% at 70% 105%, rgba(244,213,154,.34), transparent 60%), linear-gradient(180deg, var(--sky-top), var(--sky-mid) 55%, var(--sky-low)); }
.dusk::before { content:""; position:absolute; inset:0; opacity:.7; pointer-events:none;
  background-image:radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 9%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 46% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 81% 26%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 92% 8%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 7% 38%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 72% 40%, #fff 50%, transparent 51%); }
.dusk .wrap { position:relative; }
.dusk .body-l { color:var(--cream-soft); }

.split { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); align-items:center; gap:clamp(32px, 6vw, 90px); }
.split.rev .split-copy { order:2; }
.duo { position:relative; height:clamp(500px, 62vw, 660px); --p:.5; }
.duo .phone { position:absolute; top:50%; left:50%; --pw:clamp(220px, 25vw, 290px); transform:translate(-50%, calc(-50% + (var(--p) - .5) * -40px)) rotate(-3deg); }
.island-card { position:absolute; left:50%; top:50%; width:clamp(250px, 30vw, 360px); aspect-ratio:4/1; border-radius:999px; background:#000 url(assets/screen-island.webp) 50% 35.6% / 100% auto no-repeat; box-shadow:0 0 0 1px rgba(255,255,255,.1) inset, 0 30px 50px -16px rgba(8,6,30,.7);
  transform:translate(calc(-50% + 16% + var(--p) * 14%), calc(-50% - 60% + (var(--p) - .5) * -120px)) rotate(4deg); }
@media (max-width:860px) {
  .split { grid-template-columns:1fr; text-align:center; }
  .split .rule { margin-inline:auto; }
  .split .plain, .split .ticks { text-align:left; max-width:480px; margin-inline:auto; }
  .split.rev .split-copy { order:0; }
  .duo { height:500px; }
  .duo .phone { --pw:210px; }
  .island-card { width:250px; }
}

/* ── Themes fan ── */
.themes { overflow:hidden; padding-bottom:0 !important; --p:.5; }
.fan { position:relative; height:clamp(430px, 60vw, 660px); margin-top:56px; }
.fan .phone { position:absolute; left:50%; top:0; --pw:clamp(200px, 26vw, 300px); transition:transform .15s linear; }
.fan-c { transform:translateX(-50%) translateY(calc(40px - var(--p) * 60px)); z-index:2; }
.fan-l { transform:translateX(calc(-50% - var(--p) * 108%)) translateY(calc(60px + var(--p) * 30px)) rotate(calc(var(--p) * -7deg)); }
.fan-r { transform:translateX(calc(-50% + var(--p) * 108%)) translateY(calc(60px + var(--p) * 30px)) rotate(calc(var(--p) * 7deg)); }
.themes::after { content:""; position:absolute; inset:auto 0 0 0; height:140px; background:linear-gradient(0deg, var(--canvas), transparent); z-index:3; pointer-events:none; }

/* ── iPad ── */
.ipad-sec { padding-top:clamp(72px, 11vw, 140px) !important; }
.ipad { margin:0 auto; width:min(420px, 82vw); padding:14px; border-radius:36px; background:linear-gradient(145deg, #2b2850, #0e0c22 60%); box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 50px 80px -24px rgba(var(--shadow),.45), 0 18px 30px -12px rgba(var(--shadow),.3); }
.ipad img { border-radius:23px; }

/* ── Cards ── */
.cards { display:grid; gap:20px; margin-top:52px; }
.cards.three { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.cards.two { grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:860px; margin-inline:auto; }
.card { background:linear-gradient(180deg, var(--surface), var(--surface-low)); border:1px solid var(--rule); border-radius:24px; padding:30px 28px; box-shadow:0 1px 2px rgba(var(--shadow),.04), 0 14px 34px -14px rgba(var(--shadow),.16); }
.card h3 { font-size:22px; line-height:1.2; }
.card p { color:var(--pencil); margin-top:12px; font-size:16px; }
.privacy .small, .faq .small { margin-top:34px; }
@media (max-width:860px) { .cards.three, .cards.two { grid-template-columns:1fr; } }

.plan h3 { font-size:28px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.plan-sub { margin-top:8px !important; }
.plan .ticks li { font-size:16px; }
.plan-pro { color:var(--cream); border-color:transparent; background:radial-gradient(120% 80% at 85% 110%, rgba(244,213,154,.3), transparent 60%), linear-gradient(160deg, var(--sky-top), var(--sky-mid) 60%, var(--sky-low)); box-shadow:0 30px 60px -24px rgba(42,36,112,.6); }
.plan-pro p, .plan-pro .ticks li { color:var(--cream-soft); }
.plan-pro .ticks li::before { border-color:var(--brass-light); }
.plan-pro .btn { margin-top:28px; width:100%; }
.badge { font:600 12px/1 var(--serif); letter-spacing:.02em; padding:7px 11px; border-radius:999px; background:var(--brass-light); color:var(--night-ink); }
.fine { max-width:860px; margin:34px auto 0; font-size:13px; line-height:1.6; color:var(--pencil); }

/* ── FAQ ── */
.faq .display { margin-bottom:36px; }
details { background:linear-gradient(180deg, var(--surface), var(--surface-low)); border:1px solid var(--rule); border-radius:18px; padding:0 22px; margin:12px 0; box-shadow:0 8px 22px -14px rgba(var(--shadow),.16); }
summary { list-style:none; cursor:pointer; padding:19px 34px 19px 0; position:relative; font:600 18px/1.35 var(--serif); }
summary::-webkit-details-marker { display:none; }
summary::after { content:""; position:absolute; right:4px; top:50%; width:9px; height:9px; margin-top:-7px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); transition:transform .3s var(--ease); }
details[open] summary::after { transform:rotate(225deg); margin-top:-2px; }
details p { color:var(--pencil); padding-bottom:20px; }

/* ── Final ── */
.final { padding-bottom:clamp(90px, 12vw, 150px); }
.final-gardi { height:clamp(200px, 28vw, 280px); width:auto; margin:0 auto 10px; filter:drop-shadow(0 0 60px rgba(244,213,154,.35)) drop-shadow(0 16px 12px rgba(8,6,30,.4)); }
.quote { font:italic 400 20px/1.4 var(--serif); color:var(--brass-light); margin-bottom:14px; }
.final .btn { margin-top:36px; }

/* ── Footer ── */
.foot { background:#121030; color:var(--cream-soft); padding:44px 0 max(40px, env(safe-area-inset-bottom)); font-size:14px; }
.foot-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 28px; padding-bottom:26px; margin-bottom:26px; border-bottom:1px solid rgba(201,194,226,.16); }
.foot .brand { color:var(--cream); }
.foot nav { display:flex; flex-wrap:wrap; gap:10px 24px; }
.foot nav a { color:var(--cream-soft); text-decoration:none; }
.foot nav a:hover { color:var(--cream); text-decoration:underline; }
.legal { font-size:12.5px; line-height:1.6; color:rgba(201,194,226,.72); margin-top:12px; max-width:920px; }

/* ── Scroll reveal ── */
.js .reveal { opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d, 0s); }
.js .reveal.in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .js .reveal { opacity:1; transform:none; }
  .scene, .scene-front, .hero-inner { transform:none !important; opacity:1 !important; }
  .chapter { opacity:1; }
}

/* ── Language switch, 404 ── */
.langs { display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 18px; font-size:14px; }
.langs a { color:var(--cream-soft); text-decoration:none; }
.langs a:hover { color:var(--cream); text-decoration:underline; }
.langs a[aria-current="page"] { color:var(--cream); font-weight:600; }
.notfound { min-height:100svh; display:flex; align-items:center; }
.notfound .display { margin-top:4px; }
.notfound .btn { margin-top:34px; }