:root { --bg:#0B1412; --bg2:#13261F; --text:#F4EFE4; --dim:rgba(244,239,228,.74); --faint:rgba(244,239,228,.46); --gold:#E5C27A; --line:rgba(255,255,255,.1); --card:rgba(255,255,255,.04); }
@media (prefers-color-scheme: light) { :root { --bg:#F6F1E7; --bg2:#EBE2CC; --text:#1C2723; --dim:rgba(28,39,35,.76); --faint:rgba(28,39,35,.5); --gold:#8C6A1E; --line:rgba(28,39,35,.12); --card:rgba(28,39,35,.04); } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html { background:var(--bg); }
body { margin:0; min-height:100vh; background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 60%,var(--bg) 100%); color:var(--text); font:17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
main { max-width:1040px; margin:0 auto; padding:20px 20px 56px; }
main.doc { max-width:720px; }
a { color:var(--gold); }
h1, h2 { font-family: Georgia, "Times New Roman", serif; line-height:1.2; }
h1 { font-size:clamp(32px, 5vw, 50px); margin:0 0 18px; }
h2 { font-size:clamp(24px, 3vw, 30px); margin:0 0 10px; }
p, li { color:var(--dim); }

.top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0 28px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:600; font-size:20px; }
.brand img { width:40px; height:40px; border-radius:10px; }
.lang { font-size:15px; color:var(--faint); }
.lang a { color:var(--faint); text-decoration:none; padding:4px 2px; }
.lang a[aria-current="page"] { color:var(--text); font-weight:600; }

.hero { display:grid; grid-template-columns: 1.1fr .9fr; gap:48px; align-items:center; padding:24px 0 40px; }
.lead { font-size:clamp(18px, 2.2vw, 21px); }
.badges { margin:28px 0 8px; display:flex; flex-wrap:wrap; gap:10px; }
.badge { display:inline-block; border:1px solid var(--line); background:var(--card); border-radius:14px; padding:12px 18px; color:var(--text); font-weight:600; font-size:15px; }
.note { font-size:14px; color:var(--faint); }

.phone { margin:0; justify-self:center; width:min(300px, 78vw); aspect-ratio: 390 / 844; border-radius:42px; padding:10px; background:#000; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset; }
.phone img { display:block; width:100%; height:100%; object-fit:cover; border-radius:33px; }

.quote { margin:16px auto 56px; max-width:720px; text-align:center; font-family: Georgia, serif; font-style:italic; font-size:clamp(20px, 2.6vw, 26px); color:var(--text); }
.quote cite { display:block; margin-top:10px; font-style:normal; font-family: inherit; font-size:15px; color:var(--gold); letter-spacing:.04em; }

.intro { max-width:640px; margin:0 auto 48px; text-align:center; }
.feature { display:grid; grid-template-columns: .9fr 1.1fr; gap:56px; align-items:center; padding:36px 0; border-top:1px solid var(--line); }
.feature.flip .phone { order:2; }
.feature p { font-size:18px; }
.extras { text-align:center; max-width:640px; margin:48px auto 0; font-size:18px; color:var(--text); }

.doc h2 { font-size:22px; margin-top:32px; }
.updated { color:var(--faint); font-size:15px; }

footer { border-top:1px solid var(--line); margin-top:56px; padding-top:20px; font-size:14px; color:var(--faint); display:flex; gap:18px; flex-wrap:wrap; }
footer a { color:var(--faint); }

@media (max-width: 760px) {
  .hero, .feature { grid-template-columns: 1fr; gap:28px; text-align:left; }
  .feature.flip .phone { order:0; }
  .hero .phone { order:2; }
}

/* ------------------------------------------------------------ landing story */
.landing .top { position:fixed; top:0; left:0; right:0; z-index:10; padding:18px max(20px, calc((100vw - 1040px) / 2)); background:linear-gradient(180deg, var(--bg), transparent); }
.story { position:relative; }
.stage { position:relative; }
.scene { display:none; }
.kicker { display:inline-block; font-size:13px; letter-spacing:.18em; color:var(--gold); margin-bottom:14px; font-weight:600; }
.step h2 { font-size:clamp(30px, 4vw, 46px); margin-bottom:14px; }
.step p { font-size:clamp(17px, 1.6vw, 20px); max-width:30em; }
.dots, .hint { display:none; }
.after { padding-top:40px; }

/* Live (WebGL) mode: the stage is pinned while the story scrolls under it. */
.live .story { height: calc(var(--steps) * 100vh + 30vh); }
.live .stage { position:sticky; top:0; height:100vh; overflow:hidden; }
.live .scene { display:block; position:absolute; inset:0; width:100%; height:100%; }
.live .steps { position:absolute; inset:0; pointer-events:none; }
.live .step { position:absolute; left:max(24px, calc((100vw - 1040px) / 2)); top:50%; width:min(46vw, 520px);
  transform:translateY(calc(-50% + 28px)); opacity:0; filter:blur(6px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .7s ease; }
.live .step.active { opacity:1; transform:translateY(-50%); filter:none; pointer-events:auto; }
.live .step-shot { display:none; }
.live .dots { display:flex; flex-direction:column; gap:10px; position:absolute; right:max(18px, calc((100vw - 1100px) / 2)); top:50%; transform:translateY(-50%); }
.live .dots span { width:6px; height:6px; border-radius:3px; background:var(--faint); transition: height .4s ease, background .4s ease; }
.live .dots span.active { height:22px; background:var(--gold); }
.live .hint { display:block; position:absolute; left:50%; bottom:28px; transform:translateX(-50%); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); transition:opacity .5s; }
.live .hint::after { content:""; display:block; width:1px; height:34px; margin:10px auto 0; background:linear-gradient(var(--gold), transparent); animation: hint 1.8s ease-in-out infinite; }
.live.scrolled .hint { opacity:0; }
@keyframes hint { 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; } }

@media (max-width: 760px) {
  .live .step { left:20px; right:20px; width:auto; top:96px; transform:translateY(24px); }
  .live .step.active { transform:none; }
  .live .step h1 { font-size:30px; }
  .live .step h2 { font-size:28px; }
  .live .step p { font-size:16px; }
  .live .step .badges { display:none; }
  .live .dots { right:10px; }
  .live .hint { display:none; }
}

/* Static mode (no WebGL / reduced motion): a plain stacked page. */
.static .story { padding-top:90px; }
.static .step { max-width:1040px; margin:0 auto; padding:32px 20px; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; border-top:1px solid var(--line); }
.static .step:first-child { border-top:0; }
.static .step > :not(img) { grid-column:1; }
.static .step-shot { grid-column:2; grid-row:1 / span 6; justify-self:center; width:min(280px, 74vw); border-radius:34px; border:10px solid #000; box-shadow:0 30px 80px rgba(0,0,0,.4); }
@media (max-width: 760px) { .static .step { grid-template-columns:1fr; } .static .step-shot { grid-column:1; grid-row:auto; } }

/* ------------------------------------------------------------------ loader */
.loader { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background:var(--bg); transition: opacity .6s ease, visibility .6s; }
.loader img { width:64px; height:64px; border-radius:16px; animation: pulse 1.6s ease-in-out infinite; }
.loader .bar { width:140px; height:2px; border-radius:2px; background:var(--line); overflow:hidden; }
.loader .bar i { display:block; height:100%; width:8%; background:var(--gold); transition: width .3s ease; }
.ready .loader { opacity:0; visibility:hidden; }
@keyframes pulse { 0%, 100% { opacity:.55; transform:scale(.96); } 50% { opacity:1; transform:scale(1); } }
/* Nothing of the story shows until the scene is ready. */
.live:not(.ready) .stage > :not(.scene) { opacity:0; }
.static .step-shot { border-radius:52px; border:12px solid #2b2a28; outline:2px solid #6f6a63; }