@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root {
  --dark-bg:#0f0d1f;
  --dark-surface:#1a1730;
  --light-text:#f5f3fa;
  --muted-text:#b9adef;
  --accent-violet:#7060cf;
  --accent-forest:#2ba875;
  --accent-pirate:#0fd4ff;
  --accent-space:#8f6bff;
  --accent-dino:#f4c76e;
  --line:rgba(245,243,250,.12);
  --ink:#15122d;
  --paper:#f8f4ec;
  --lavender:#ded6ff;
  --violet:#7060cf;
  --moss:#3b765f;
  --coral:#ed8877;
  --sun:#f4c76e;
  --muted:#69657c;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--light-text); background:var(--dark-bg); font-family:"DM Sans",system-ui,sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1200px,calc(100% - 48px)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:10; width:100%; background:rgba(15,13,31,.8); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav { min-height:80px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:11px; font-weight:700; letter-spacing:-.03em; font-size:.95rem; }
.brand img { border-radius:12px; box-shadow:0 5px 16px rgba(112,96,207,.25); }
.nav-right { display:flex; align-items:center; gap:20px; }
.nav-cta { padding:10px 18px; border:1px solid var(--line); border-radius:99px; font-size:.84rem; font-weight:600; background:rgba(112,96,207,.08); color:var(--accent-violet); transition:all .2s; }
.nav-cta:hover { background:rgba(112,96,207,.16); border-color:var(--accent-violet); }
.nav-cta span { margin-left:6px; opacity:.7; }
.hero { min-height:750px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8vw; padding-top:80px; padding-bottom:80px; }
.kicker { display:flex; align-items:center; gap:8px; margin:0 0 20px; font-family:"DM Mono",monospace; font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; color:var(--accent-violet); }
.kicker span { width:20px; height:1px; background:currentColor; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { letter-spacing:-.04em; line-height:1.05; }
h1 { max-width:500px; margin-bottom:24px; font-size:clamp(2.8rem,5.2vw,5.2rem); font-weight:600; }
h1 em,h2 em { color:var(--accent-violet); font-family:"Playfair Display",serif; font-weight:700; }
.intro { max-width:520px; color:var(--muted-text); font-size:1.05rem; line-height:1.7; margin-bottom:32px; }
.hero-actions { display:flex; gap:20px; align-items:center; margin-top:28px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:99px; padding:13px 24px; font-weight:700; font-size:.9rem; border:none; cursor:pointer; transition:all .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:#fff; background:var(--accent-violet); box-shadow:0 12px 28px rgba(112,96,207,.3); }
.button-primary:hover { background:#8575e0; box-shadow:0 15px 35px rgba(112,96,207,.4); }
.text-link { font-size:.9rem; font-weight:700; color:var(--accent-violet); border-bottom:1px solid rgba(112,96,207,.5); padding-bottom:2px; transition:all .2s; }
.text-link:hover { border-bottom-color:var(--accent-violet); }
.text-link span { margin-left:6px; }
.platform-note { margin-top:24px; color:var(--muted-text); font-size:.78rem; opacity:.85; }
.hero-preview { position:relative; width:min(100%,470px); height:570px; justify-self:end; }
.phone { position:absolute; overflow:hidden; border:8px solid #0a0a14; border-radius:38px; background:var(--dark-surface); box-shadow:0 30px 80px rgba(0,0,0,.5); }
.phone img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.phone-primary { z-index:2; width:290px; height:630px; right:105px; top:-15px; transform:rotate(-3deg); }
.phone-secondary { z-index:1; width:235px; height:510px; right:-15px; top:55px; transform:rotate(7deg); opacity:.9; }
.trust-strip { background:linear-gradient(135deg, rgba(112,96,207,.1), rgba(43,168,117,.1)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-items { display:grid; grid-template-columns:repeat(4,1fr); }
.trust-items p { margin:0; padding:28px 10px; text-align:center; color:var(--muted-text); font-size:.8rem; border-left:1px solid var(--line); }
.trust-items p:last-child { border-right:0; }
.trust-items strong { color:var(--light-text); font-size:1.2rem; font-weight:600; display:block; margin-bottom:6px; }
.how { padding-top:140px; padding-bottom:140px; }
.section-heading { text-align:left; }
.section-heading h2 { max-width:600px; font-size:clamp(2.2rem,4vw,4rem); font-weight:600; margin-bottom:20px; }
.section-heading > p:last-child { max-width:540px; color:var(--muted-text); font-size:.98rem; line-height:1.7; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:60px; }
.step { }
.step-number { font:12px "DM Mono",monospace; letter-spacing:.08em; color:var(--accent-violet); font-weight:600; margin-bottom:16px; }
.step h3 { font-size:1.2rem; margin-bottom:12px; color:var(--light-text); }
.step > p { color:var(--muted-text); font-size:.94rem; line-height:1.65; }
.step-art { position:relative; height:300px; margin:20px 0; border-radius:8px; overflow:hidden; background:var(--dark-surface); }
.step-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.worlds { padding:140px 0; background:linear-gradient(180deg, #0f0d1f 0%, #1a1730 100%); border-top:1px solid var(--line); }
.centered { text-align:center; }
.centered .kicker { justify-content:center; }
.centered h2 { margin-inline:auto; }
.centered > p:last-child { max-width:540px; margin:18px auto 0; color:var(--muted-text); }
.world-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:54px; }
.world-card { position:relative; min-height:280px; padding:24px; border-radius:8px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid var(--line); transition:all .3s; }
.world-card::before { content:""; position:absolute; z-index:2; inset:0; background:linear-gradient(transparent 25%, rgba(15,13,31,.88) 100%); }
.world-card > img { position:absolute; z-index:1; inset:0; width:100%; height:100%; object-fit:cover; }
.world-card p,.world-card h3 { position:relative; z-index:3; }
.world-card:hover { border-color:var(--accent-violet); transform:translateY(-4px); }
.world-card p { margin:0 0 8px; font:10px "DM Mono",monospace; letter-spacing:.11em; color:rgba(255,255,255,.6); font-weight:600; }
.world-card h3 { font-size:1.35rem; line-height:1.1; font-family:"Playfair Display",serif; letter-spacing:-.02em; color:var(--light-text); }
.inside-app { padding-top:140px; padding-bottom:140px; }
.screenshot-rail { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:54px; }
.screenshot-rail figure { margin:0; }
.screenshot-rail img { display:block; width:100%; aspect-ratio:700/1521; object-fit:cover; object-position:top; border:6px solid #0a0a14; border-radius:28px; box-shadow:0 18px 38px rgba(0,0,0,.3); }
.screenshot-rail figure:nth-child(2),.screenshot-rail figure:nth-child(4) { transform:translateY(26px); }
.screenshot-rail figcaption { margin-top:13px; text-align:center; font-size:.85rem; font-weight:700; color:var(--muted-text); }
.reader-first { display:grid; grid-template-columns:1fr 1fr; gap:10vw; align-items:center; padding-top:140px; padding-bottom:140px; }
.reader-art { position:relative; height:380px; background:linear-gradient(135deg, #2ba875 0%, #1f5c4a 100%); border-radius:20px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.reader-copy { }
.reader-copy h2 { font-size:clamp(2.2rem,3.8vw,4rem); font-weight:600; margin-bottom:24px; }
.reader-copy > p:not(.kicker) { max-width:520px; color:var(--muted-text); font-size:1.02rem; line-height:1.7; }
.reader-copy ul { padding:0; margin:24px 0 0; list-style:none; }
.reader-copy li { margin:12px 0; padding-left:24px; font-size:.95rem; color:var(--light-text); }
.reader-copy li::before { content:"✦"; margin-left:-24px; margin-right:10px; color:var(--accent-violet); }
.final-cta { padding:120px 40px; background:linear-gradient(135deg, #2ba875 0%, #1f5c4a 100%); text-align:center; border-top:1px solid var(--line); }
.final-inner > img { border-radius:20px; box-shadow:0 15px 40px rgba(0,0,0,.3); margin-bottom:28px; max-width:120px; }
.final-inner .kicker { justify-content:center; }
.final-inner h2 { font-size:clamp(2.5rem,4.5vw,4.2rem); font-weight:600; margin-bottom:20px; }
.final-inner > p:not(.kicker) { color:rgba(255,255,255,.9); margin-bottom:28px; font-size:1rem; }
.button-light { background:rgba(255,255,255,.15); color:var(--light-text); border:1px solid rgba(255,255,255,.3); }
.button-light:hover { background:rgba(255,255,255,.25); border-color:rgba(255,255,255,.5); }
.footer { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:100px; color:var(--muted-text); font-size:.8rem; border-top:1px solid var(--line); padding-top:30px; padding-bottom:30px; }
.footer p { margin:0; }
.footer > a:last-child { text-decoration:underline; text-underline-offset:3px; color:var(--muted-text); transition:color .2s; }
.footer > a:last-child:hover { color:var(--light-text); }
.footer .brand { color:var(--light-text); font-size:.9rem; }
@media (max-width:900px) {
  .shell { width:min(100% - 36px, 600px); }
  .hero { grid-template-columns:1fr; gap:50px; padding-top:100px; padding-bottom:60px; min-height:auto; }
  .hero-preview { justify-self:center; height:565px; }
  .trust-items { grid-template-columns:repeat(2,1fr); }
  .trust-items p:nth-child(n+3) { border-left:0; }
  .how { padding-top:100px; padding-bottom:100px; }
  .steps { grid-template-columns:1fr; gap:40px; }
  .worlds { padding:100px 0; }
  .world-grid { grid-template-columns:repeat(2,1fr); gap:16px; }
  .inside-app { padding-top:100px; padding-bottom:100px; }
  .screenshot-rail { grid-template-columns:repeat(2,1fr); }
  .screenshot-rail figure:nth-child(2),.screenshot-rail figure:nth-child(4) { transform:none; }
  .reader-first { grid-template-columns:1fr; gap:50px; padding-top:100px; padding-bottom:100px; }
  .reader-art { height:320px; }
  .footer { flex-wrap:wrap; justify-content:center; }
  .footer p { order:3; width:100%; text-align:center; }
}
@media (max-width:500px) {
  .brand span { font-size:.85rem; }
  .nav-cta { font-size:.7rem; padding:8px 12px; }
  .hero-actions { flex-direction:column; align-items:flex-start; gap:16px; }
  .hero-preview { height:505px; }
  .phone { border-width:6px; border-radius:30px; }
  .phone-primary { width:235px; height:510px; right:75px; }
  .phone-secondary { width:190px; height:413px; right:8px; }
  .world-grid { grid-template-columns:1fr; }
  .screenshot-rail { display:flex; gap:16px; overflow-x:auto; margin-inline:-18px; padding:0 18px 18px; scroll-snap-type:x mandatory; }
  .screenshot-rail figure { flex:0 0 74vw; scroll-snap-align:center; }
  .screenshot-rail img { border-width:4px; border-radius:24px; }
  .button { padding:12px 20px; font-size:.85rem; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .button, .world-card, .nav-cta { transition:none; }
}