:root {
  --ink: #071a3f;
  --ink-2: #0c2b68;
  --blue: #0878e8;
  --blue-2: #03bdf4;
  --cyan: #61e8ff;
  --cream: #fff5d6;
  --gold: #f6c64c;
  --gold-2: #fff0a0;
  --violet: #5f38d7;
  --pink: #ff4aa4;
  --green: #59db2e;
  --red: #ff3f55;
  --paper: #fffaf0;
  --surface: rgba(255,255,255,.10);
  --line: rgba(255,255,255,.20);
  --shadow-xl: 0 30px 90px rgba(0,15,55,.28);
  --shadow-md: 0 18px 45px rgba(0,22,73,.20);
  --radius-xl: 34px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --container: 1200px;
  --ease: cubic-bezier(.22,.8,.2,1);
  --header-h: 78px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #041331; }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--ink); font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: linear-gradient(#f8fbff,#eef8ff 44%,#fff8e6); line-height: 1.55; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 4px solid #ffe66b; outline-offset: 4px; }
.sr-only { position: absolute!important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 999; transform: translateY(-160%); background: #fff; color: #081d48; padding: 10px 14px; border-radius: 10px; font-weight: 800; transition: transform .2s; }
.skip-link:focus { transform: none; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { position: relative; padding: clamp(80px, 9vw, 132px) 0; }
.eyebrow { margin: 0 0 12px; color: #0a68cc; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 900; }
.section-heading { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.section-heading h2, .gameplay-copy h2, .story-copy h2, .systems-copy h2, .gallery-head h2, .collection-copy h2, .faq-intro h2, .download-copy h2 { margin: 0; font-family: "Fredoka", system-ui, sans-serif; font-size: clamp(2.4rem, 5vw, 4.65rem); line-height: .98; letter-spacing: -.035em; color: #092457; text-wrap: balance; }
.section-heading h2 span, .gameplay-copy h2 span, .story-copy h2 span, .systems-copy h2 span, .gallery-head h2 span, .collection-copy h2 span, .faq-intro h2 span, .download-copy h2 span { color: #0a86ef; }
.section-heading > p:last-child { margin: 20px auto 0; max-width: 660px; color: #52617f; font-size: 1.05rem; }
.reveal { opacity: 0; transform: translateY(28px) scale(.99); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.scroll-progress { position: fixed; z-index: 200; left: 0; top: 0; width: 100%; height: 3px; pointer-events: none; }
.scroll-progress span { display: block; width: 100%; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg,var(--cyan),var(--gold),var(--pink)); }

/* Header */
.site-header { position: fixed; z-index: 150; left: 0; top: 0; width: 100%; padding: 12px 0; transition: background .3s, box-shadow .3s, padding .3s; }
.site-header.scrolled { padding: 8px 0; background: rgba(4,20,55,.84); box-shadow: 0 10px 30px rgba(0,0,0,.16); backdrop-filter: blur(16px); }
.nav-shell { width: min(calc(100% - 32px), 1240px); min-height: 58px; margin: auto; display: flex; align-items: center; gap: 24px; padding: 6px 10px 6px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; background: rgba(7,29,74,.48); box-shadow: 0 12px 32px rgba(0,15,45,.16); backdrop-filter: blur(12px); }
.brand { width: 104px; height: 46px; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; }
.brand img { width: 104px; transform: scale(1.24); }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a { color: rgba(255,255,255,.88); text-decoration: none; padding: 9px 12px; font-size: .91rem; font-weight: 800; border-radius: 10px; transition: background .2s,color .2s; }
.nav-links a:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav-cta { text-decoration: none; color: #08204d; background: linear-gradient(#ffe77b,#f5b92c); border: 2px solid rgba(255,255,255,.45); border-radius: 13px; padding: 10px 16px; font-family: "Fredoka",sans-serif; font-weight: 700; box-shadow: inset 0 2px rgba(255,255,255,.55),0 7px 18px rgba(0,0,0,.16); }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255,255,255,.10); }
.nav-toggle span:not(.sr-only) { display: block; width: 21px; height: 2px; margin: 4px auto; background: #fff; border-radius: 4px; }

/* Hero */
.hero { min-height: max(760px, 100svh); position: relative; display: flex; align-items: center; overflow: hidden; color: #fff; isolation: isolate; background: #041c55; padding: 130px 0 74px; }
.hero-bg { position: absolute; inset: 0; z-index: -4; background: linear-gradient(90deg,rgba(3,17,51,.92) 0%,rgba(4,30,79,.72) 42%,rgba(4,37,85,.25) 75%), url('../images/hero-lobby.webp') center/cover no-repeat; transform: scale(1.03); }
.hero::before { content:""; position:absolute; inset:0; z-index:-3; background: radial-gradient(circle at 76% 38%,rgba(0,218,255,.22),transparent 36%), radial-gradient(circle at 50% 104%,rgba(255,184,47,.22),transparent 32%), linear-gradient(180deg,transparent 75%,#071a47 100%); }
.hero::after { content:""; position:absolute; left:-12%; bottom:-22%; z-index:-2; width:70%; aspect-ratio:1; border-radius:50%; background:rgba(55,216,255,.1); filter:blur(80px); }
.hero-content { display: grid; grid-template-columns: minmax(0,.92fr) minmax(520px,1.08fr); align-items: center; gap: 28px; }
.hero-copy { position: relative; z-index: 5; max-width: 650px; }
.hero-copy .eyebrow { color: #93efff; }
.hero-logo { width: min(490px, 90%); margin: -20px 0 -34px -26px; filter: drop-shadow(0 20px 28px rgba(0,0,0,.26)); }
.hero h1 { margin: 0; font-family: "Fredoka",sans-serif; font-size: clamp(3.2rem, 6.2vw, 6.6rem); line-height: .88; letter-spacing: -.055em; text-shadow: 0 8px 28px rgba(0,0,0,.28); }
.hero h1 span { display: block; color: #ffd84f; }
.hero-lead { max-width: 610px; margin: 24px 0; color: rgba(255,255,255,.86); font-size: clamp(1rem,1.4vw,1.17rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 18px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 15px; text-decoration: none; font-family: "Fredoka",sans-serif; font-weight: 700; transition: transform .22s var(--ease), box-shadow .22s; }
.button:hover { transform: translateY(-3px); }
.button-primary { color: #0b2b5d; background: linear-gradient(180deg,#a6ff4c,#4dd51e); border: 2px solid #dfff7c; box-shadow: inset 0 2px 0 rgba(255,255,255,.65), 0 10px 24px rgba(43,177,21,.28); }
.button-glass { color: #fff; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px); }
.store-row { display: flex; flex-wrap: wrap; gap: 10px; }
.store-button { min-width: 164px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.28); border-radius: 13px; background: rgba(1,11,34,.72); box-shadow: inset 0 1px rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.14); transition: transform .2s,border-color .2s; }
.store-button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.55); }
.store-button svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.store-button span { display:block; line-height:1.05; }
.store-button small { display:block; font-size:.62rem; opacity:.75; }
.store-button strong { font-size:.95rem; }
.store-note { margin: 10px 0 0; font-size: .7rem; color: rgba(255,255,255,.55); }
.hero-visual { position: relative; min-height: 670px; z-index: 2; }
.hero-orb { position: absolute; width: 540px; height: 540px; border-radius: 50%; right: 2%; top: 9%; background: radial-gradient(circle,#36ddff22 0 30%,#0069ff16 32% 52%,transparent 54%), conic-gradient(from 0deg,#70eaff22,#ffd35122,#f850a622,#70eaff22); filter: blur(.2px); animation: orbSpin 16s linear infinite; }
.hero-cast { position:absolute; z-index:3; width:min(720px,83%); right: 0; bottom: 16px; filter: drop-shadow(0 28px 30px rgba(0,8,28,.36)); transform-origin: center bottom; }
.phone-card { position:absolute; z-index:2; top:36px; right: -30px; width:225px; padding:7px; border-radius:30px; background:linear-gradient(160deg,#45dfff,#0878e8 54%,#064598); border:2px solid #8df2ff; box-shadow:0 26px 50px rgba(0,12,48,.35); transform:rotate(5deg); overflow:hidden; }
.phone-card img { border-radius:24px; width:100%; }
.phone-label { position:absolute; z-index:2; left:50%; top:12px; transform:translateX(-50%); width:max-content; max-width:90%; font-size:.62rem; font-weight:900; color:#fff; background:rgba(5,22,57,.78); padding:5px 8px; border-radius:20px; }
.floating-tile { position:absolute; z-index:5; width:76px; filter:drop-shadow(0 14px 16px rgba(0,0,0,.28)); animation:floaty 4.4s ease-in-out infinite; }
.tile-a { left:2%; top:25%; transform:rotate(-12deg); }
.tile-b { right:11%; bottom:7%; width:68px; animation-delay:-1.2s; }
.tile-c { right:33%; top:3%; width:60px; animation-delay:-2.1s; }
.hero-stars { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hero-star { position:absolute; width:4px; height:4px; border-radius:50%; background:#fff6c5; box-shadow:0 0 12px #fff6c5; animation:twinkle var(--duration,3s) ease-in-out infinite; opacity:.7; }
.hero-scroll { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:8; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.7); text-decoration:none; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.hero-scroll span { width:24px; height:38px; border:1px solid rgba(255,255,255,.34); border-radius:14px; position:relative; }
.hero-scroll span::after { content:""; position:absolute; width:4px; height:7px; border-radius:4px; background:#fff; left:9px; top:7px; animation:mouse 1.8s infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-15px) rotate(6deg)} }
@keyframes orbSpin { to{transform:rotate(360deg)} }
@keyframes twinkle { 50%{opacity:.15;transform:scale(.5)} }
@keyframes mouse { 0%{opacity:0;transform:translateY(0)} 35%{opacity:1} 100%{opacity:0;transform:translateY(14px)} }

/* Features */
.features { background: radial-gradient(circle at 12% 20%,#dffbff 0,transparent 22%), radial-gradient(circle at 85% 35%,#fff2c8 0,transparent 26%), linear-gradient(180deg,#f8fcff,#fffaf0); }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.feature-card { position:relative; overflow:hidden; min-height:390px; display:flex; flex-direction:column; padding:26px; border-radius:var(--radius-lg); background:rgba(255,255,255,.76); border:1px solid rgba(31,90,168,.12); box-shadow:var(--shadow-md); transform-style:preserve-3d; }
.feature-card::before { content:""; position:absolute; inset:auto -20% -40% -20%; height:70%; background:radial-gradient(circle at 50% 0,#0daeff20,transparent 66%); }
.feature-card img { position:relative; width:155px; height:155px; object-fit:contain; margin:0 auto 18px; filter:drop-shadow(0 16px 18px rgba(0,29,82,.18)); }
.feature-card:nth-child(3) img { border-radius:26px; object-fit:cover; }
.feature-card h3 { margin:3px 0 7px; font:700 1.35rem/1.05 "Fredoka",sans-serif; color:#0a2b67; }
.feature-card p { margin:0; color:#60708e; font-size:.92rem; }
.feature-card .card-kicker { color:#087bdc; text-transform:uppercase; letter-spacing:.08em; font-size:.68rem; font-weight:900; }

/* Gameplay */
.gameplay-section { overflow:hidden; background:linear-gradient(135deg,#092a6e 0,#073f91 55%,#0f78bb 100%); color:#fff; }
.gameplay-section::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 25%,#55e5ff1f,transparent 30%),radial-gradient(circle at 80% 68%,#ffca4617,transparent 24%); }
.gameplay-layout { position:relative; z-index:1; display:grid; grid-template-columns:.82fr 1.18fr; gap:70px; align-items:center; }
.gameplay-copy .eyebrow { color:#8eeeff; }
.gameplay-copy h2 { color:#fff; }
.gameplay-copy h2 span { color:#ffda56; }
.gameplay-copy > p:not(.eyebrow) { color:rgba(255,255,255,.76); max-width:620px; }
.play-steps { list-style:none; padding:0; margin:30px 0; display:grid; gap:12px; }
.play-steps li { display:grid; grid-template-columns:auto 1fr; column-gap:10px; padding:15px 16px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(255,255,255,.06); }
.play-steps strong { color:#fff4b1; }
.play-steps span { grid-column:2; color:rgba(255,255,255,.68); font-size:.88rem; }
.power-copy { display:flex; flex-wrap:wrap; gap:8px; color:#fff; font-size:.84rem; }
.power-copy span { width:100%; color:#8eeeff; font-weight:800; }
.power-copy i { opacity:.35; }
.demo-shell { padding:18px; border-radius:32px; background:linear-gradient(160deg,#0a83ee,#00c7e9 42%,#0871d7); border:2px solid rgba(156,246,255,.7); box-shadow:0 36px 80px rgba(0,12,52,.34), inset 0 2px rgba(255,255,255,.28); }
.demo-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#fff; font-size:.78rem; margin-bottom:12px; }
.demo-topline > div:first-child { display:flex; align-items:center; gap:7px; }
.demo-dot { width:9px;height:9px;border-radius:50%;background:#7cff6d;box-shadow:0 0 12px #7cff6d; }
.demo-score { padding:6px 10px;border-radius:10px;background:rgba(6,27,70,.22); }
.demo-goal { display:grid; grid-template-columns:auto 1fr; gap:0 10px; align-items:center; margin-bottom:12px; padding:11px 14px; border-radius:16px; color:#0a2a5c; background:linear-gradient(#fff9df,#ffe7a8); box-shadow:inset 0 2px #fff; }
.demo-goal span { grid-row:1/3; padding:5px 9px;border-radius:10px;background:#0e79d8;color:#fff;font:700 .78rem "Fredoka",sans-serif; }
.demo-goal strong { font-size:.9rem; }
.demo-goal small { font-size:.7rem;opacity:.68; }
.puzzle-board { aspect-ratio:1; display:grid; grid-template-columns:repeat(6,1fr); gap:6px; padding:9px; border-radius:22px; background:linear-gradient(#081d52,#0a2d70); border:2px solid #f7ce5a; box-shadow:inset 0 0 35px rgba(0,0,0,.25); }
.puzzle-tile { min-width:0; border:0; padding:0; border-radius:14px; background:#0c306d; overflow:hidden; cursor:pointer; transition:transform .16s var(--ease),filter .16s,opacity .24s; }
.puzzle-tile:hover { transform:scale(1.05); filter:brightness(1.08); }
.puzzle-tile img { width:100%;height:100%;object-fit:cover; }
.puzzle-tile.pop { animation:tilePop .45s var(--ease) forwards; }
.puzzle-tile.shake { animation:tileShake .32s ease; }
@keyframes tilePop { 45%{transform:scale(1.2) rotate(5deg);filter:brightness(1.6)} 100%{transform:scale(.2);opacity:0} }
@keyframes tileShake { 25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }
.demo-hint { text-align:center;margin:12px 0 8px;color:rgba(255,255,255,.8);font-size:.78rem; }
.demo-reset { display:block;margin:0 auto;border:1px solid rgba(255,255,255,.22);background:rgba(3,28,76,.36);color:#fff;border-radius:12px;padding:9px 14px;font-weight:800;cursor:pointer; }

/* World progression */
.world-section { overflow:hidden; color:#fff; isolation:isolate; }
.world-bg { position:absolute; inset:0; z-index:-2; background:linear-gradient(rgba(3,16,50,.62),rgba(3,19,61,.87)), url('../images/story-lobby.webp') center/cover fixed; transform:scale(1.02); }
.world-section::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#06214a22,#00132b9a); }
.section-heading.light h2 { color:#fff; }
.section-heading.light h2 span { color:#75eaff; }
.section-heading.light .eyebrow { color:#ffd861; }
.section-heading.light > p:last-child { color:rgba(255,255,255,.74); }
.floor-track { display:grid; grid-template-columns:repeat(7,minmax(190px,1fr)); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 22px; scrollbar-width:thin; }
.floor-track article { scroll-snap-align:start; min-height:190px; padding:22px; border:1px solid rgba(255,255,255,.18); border-radius:20px; background:linear-gradient(145deg,rgba(9,53,121,.78),rgba(1,18,48,.70)); backdrop-filter:blur(10px); box-shadow:0 18px 40px rgba(0,0,0,.16); }
.floor-track article::before { content:"";display:block;width:12px;height:12px;border-radius:50%;margin-bottom:24px;background:#ffd352;box-shadow:0 0 18px #ffd352; }
.floor-track small { color:#75eaff;text-transform:uppercase;letter-spacing:.08em;font-weight:900; }
.floor-track strong { display:block;margin:8px 0 4px;font:700 1.35rem "Fredoka",sans-serif;color:#fff; }
.floor-track span { color:rgba(255,255,255,.62);font-size:.85rem; }

/* Story door */
.story-section { background:radial-gradient(circle at 85% 38%,#d9f8ff 0,transparent 29%),linear-gradient(#fffdf8,#f3f8ff); }
.story-grid { display:grid;grid-template-columns:1fr .82fr;gap:70px;align-items:center; }
.story-copy > p:not(.eyebrow) { color:#5c6881;font-size:1.02rem; }
.story-copy strong { color:#0b58ad; }
.story-copy blockquote { margin:26px 0 0;padding:20px 22px;border-left:4px solid #0f88ed;border-radius:0 16px 16px 0;background:#eaf6ff;color:#0b2f6a;font:700 1.06rem/1.55 "Fredoka",sans-serif; }
.story-copy blockquote span { color:#677797; }
.door-stage { position:relative; min-height:610px; display:grid;place-items:center; perspective:1100px; }
.story-key { position:absolute;z-index:1;left:-6%;top:4%;width:170px;filter:drop-shadow(0 20px 26px rgba(0,64,119,.2));transform:rotate(-18deg);animation:floaty 4.5s ease-in-out infinite; }
.mystery-door { position:relative; width:min(360px,78vw);aspect-ratio:.62;border:11px solid #e6bd55;border-radius:160px 160px 24px 24px;background:linear-gradient(90deg,#102d70,#0a4aa0 42%,#0a2a6a);box-shadow:inset 0 0 0 8px #06194d,inset 0 0 40px rgba(0,0,0,.35),0 35px 70px rgba(0,42,99,.28);cursor:pointer;transform-origin:left center;transition:transform .8s var(--ease),box-shadow .8s; }
.mystery-door::before { content:"";position:absolute;inset:26px;border:3px solid rgba(255,216,88,.65);border-radius:130px 130px 16px 16px; }
.door-number { position:absolute;top:31%;left:50%;transform:translateX(-50%);font:700 4rem "Fredoka",sans-serif;color:#ffe277;text-shadow:0 4px #744800,0 0 26px rgba(255,211,82,.38); }
.door-glow { position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle,#9bffff 0,#3d8cff66 30%,transparent 70%);filter:blur(18px);opacity:.2;transition:opacity .4s; }
.door-knob { position:absolute;right:48px;top:58%;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6b0,#e0a928 48%,#7b4b05);box-shadow:0 5px 10px rgba(0,0,0,.3); }
.door-copy { position:absolute;bottom:34px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#aeefff;font-weight:900;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase; }
.mystery-door.open { transform:rotateY(-54deg) translateX(-3%);box-shadow:inset 0 0 0 8px #06194d,inset 0 0 40px rgba(0,0,0,.35),42px 35px 90px rgba(0,42,99,.2); }
.mystery-door.open .door-glow { opacity:1; }
.door-stage::before { content:"";position:absolute;width:320px;height:520px;border-radius:140px 140px 16px 16px;background:radial-gradient(circle at 50% 40%,#e5ffff,#53c9ff 35%,#3a32b8 80%);box-shadow:0 0 80px #5feaff88; }
.door-secret { position:absolute;z-index:2;right:0;bottom:40px;padding:12px 15px;border-radius:14px;background:#082c6c;color:#fff;box-shadow:var(--shadow-md);opacity:0;transform:translateY(12px);transition:.35s var(--ease);pointer-events:none; }
.door-secret strong,.door-secret span { display:block; }
.door-secret span { color:#8cecff;font-size:.8rem; }
.door-secret.show { opacity:1;transform:none; }

/* Crew */
.crew-section { background:linear-gradient(180deg,#eaf7ff,#fff8ea);overflow:hidden; }
.crew-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:18px; }
.crew-card { min-width:0;border-radius:28px;overflow:hidden;background:#fff;border:1px solid #dae9f8;box-shadow:var(--shadow-md);transform-style:preserve-3d; }
.crew-image { height:350px;overflow:hidden;display:grid;place-items:end center;background:radial-gradient(circle at 50% 72%,#fff 0 25%,#d8f7ff 80%); }
.crew-image img { max-height:100%;width:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 22px 18px rgba(0,44,88,.12)); }
.crew-card.milo .crew-image { background:radial-gradient(circle at 50% 70%,#ffe7f2,#e6d8ff 80%); }
.crew-card.luna .crew-image { background:radial-gradient(circle at 50% 70%,#fff,#bffaff 80%); }
.crew-card.nib .crew-image { background:radial-gradient(circle at 50% 70%,#ffe0d4,#e2d9ff 80%); }
.crew-copy { padding:22px; }
.crew-copy small { color:#0a80df;text-transform:uppercase;font-size:.66rem;letter-spacing:.08em;font-weight:900; }
.crew-copy h3 { margin:2px 0 8px;font:700 2rem "Fredoka",sans-serif;color:#0a2d68; }
.crew-copy p { margin:0;color:#63718a;font-size:.9rem; }

/* Systems */
.systems-section { background:#061d4e;color:#fff;overflow:hidden; }
.systems-section::before { content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 40%,#113f9d 0,transparent 28%),radial-gradient(circle at 85% 20%,#0f85aa55,transparent 25%); }
.systems-grid { position:relative;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center; }
.systems-art { position:relative; }
.systems-art img { width:100%;border-radius:38px;box-shadow:0 35px 70px rgba(0,0,0,.34); }
.art-chip { position:absolute;padding:8px 11px;border:1px solid rgba(255,255,255,.22);border-radius:20px;background:rgba(4,18,52,.76);backdrop-filter:blur(8px);font-size:.75rem;font-weight:900;box-shadow:0 10px 24px rgba(0,0,0,.2); }
.chip-one { left:-16px;top:18%; }
.chip-two { right:-10px;top:53%; }
.chip-three { left:17%;bottom:-14px; }
.systems-copy .eyebrow { color:#86edff; }
.systems-copy h2 { color:#fff; }
.systems-copy h2 span { color:#ffd551; }
.system-list { display:grid;gap:8px;margin-top:30px; }
.system-list article { display:grid;grid-template-columns:48px 1fr;gap:14px;padding:15px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05); }
.system-list article > span { width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(#16a7f5,#075fc2);color:#fff;font-family:"Fredoka",sans-serif;font-weight:700;box-shadow:inset 0 1px rgba(255,255,255,.3); }
.system-list h3 { margin:0 0 4px;color:#fff4b0;font:700 1.1rem "Fredoka",sans-serif; }
.system-list p { margin:0;color:rgba(255,255,255,.62);font-size:.84rem; }

/* Gallery */
.gallery-section { background:linear-gradient(#f7fbff,#eaf7ff);overflow:hidden; }
.gallery-head { display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:38px; }
.gallery-head > div:first-child { max-width:730px; }
.gallery-head .eyebrow { margin-bottom:10px; }
.gallery-controls { display:flex;gap:8px; }
.gallery-controls button { width:48px;height:48px;border:1px solid #bad9f5;border-radius:50%;background:#fff;color:#0b5eb4;font-size:1.2rem;cursor:pointer;box-shadow:0 8px 18px rgba(0,48,102,.08); }
.gallery-rail { display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px max(20px,calc((100vw - min(100vw - 40px,var(--container)))/2)) 30px;margin-inline:calc(-1 * max(20px,calc((100vw - min(100vw - 40px,var(--container)))/2)));scrollbar-width:none; }
.gallery-rail::-webkit-scrollbar { display:none; }
.gallery-card { flex:0 0 min(330px,80vw);scroll-snap-align:center;margin:0; }
.device-frame { padding:10px;border-radius:34px;background:linear-gradient(160deg,#20d9ff,#0575dd 48%,#053477);box-shadow:0 25px 50px rgba(0,50,114,.18),inset 0 2px rgba(255,255,255,.35);transform:perspective(900px) rotateY(-2deg);transition:transform .25s var(--ease); }
.gallery-card:hover .device-frame { transform:perspective(900px) rotateY(2deg) translateY(-4px); }
.device-frame img { width:100%;border-radius:26px; }
.gallery-card figcaption { padding:14px 6px 0; }
.gallery-card figcaption strong { display:block;font:700 1.2rem "Fredoka",sans-serif;color:#0b2b68; }
.gallery-card figcaption span { color:#6b7892;font-size:.82rem; }

/* Collection */
.collection-band { background:radial-gradient(circle at 8% 50%,#ffe7fa 0,transparent 28%),radial-gradient(circle at 89% 28%,#fff0bb 0,transparent 30%),#fffaf1; }
.collection-layout { display:grid;grid-template-columns:1fr .9fr;gap:60px;align-items:center; }
.collection-copy > p:not(.eyebrow) { color:#65728a; }
.rarity-row { list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:8px; }
.rarity-row li { padding:7px 11px;border-radius:999px;font-size:.72rem;font-weight:900;color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.25); }
.rarity-row li:nth-child(1){background:#2eb875}.rarity-row li:nth-child(2){background:#2689db}.rarity-row li:nth-child(3){background:#7b52d5}.rarity-row li:nth-child(4){background:#e7477b}.rarity-row li:nth-child(5){background:#d99a1f}
.collection-card { overflow:hidden;border-radius:30px;background:#fff;border:1px solid #f0d9a5;box-shadow:var(--shadow-xl); }
.collection-card img { width:100%; }
.collection-card > div { padding:18px 20px; }
.collection-card small { display:block;color:#9f6a00;text-transform:uppercase;letter-spacing:.08em;font-weight:900; }
.collection-card strong { display:block;margin-top:3px;font:700 1.2rem "Fredoka",sans-serif;color:#0b2e6c; }

/* FAQ */
.faq-section { background:linear-gradient(150deg,#071d4d,#0b3b83);color:#fff; }
.faq-grid { display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;align-items:start; }
.faq-intro .eyebrow { color:#8eeeff; }
.faq-intro h2 { color:#fff; }
.faq-intro h2 span { color:#ffd65a; }
.faq-intro p:not(.eyebrow) { color:rgba(255,255,255,.65); }
.faq-intro img { width:230px;border-radius:50px;margin-top:24px;box-shadow:0 20px 45px rgba(0,0,0,.25);transform:rotate(-4deg); }
.faq-list { display:grid;gap:10px; }
.faq-list details { border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.06);overflow:hidden; }
.faq-list summary { position:relative;cursor:pointer;list-style:none;padding:18px 52px 18px 18px;font:700 1.03rem "Fredoka",sans-serif;color:#fff; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:#86eaff; }
.faq-list details[open] summary::after { content:"–"; }
.faq-list p { margin:0;padding:0 18px 18px;color:rgba(255,255,255,.67);font-size:.9rem; }

/* Download */
.download-section { position:relative;overflow:hidden;isolation:isolate;padding:100px 0 86px;background:#041b4a;color:#fff; }
.download-bg { position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(3,17,52,.95),rgba(4,28,75,.63) 48%,rgba(4,21,60,.36)),url('../images/splash-art.webp') center/cover;filter:saturate(1.04); }
.download-section::before { content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 80% 50%,#1acbff30,transparent 32%); }
.download-grid { display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center; }
.download-copy > img { width:340px;margin:-40px 0 -48px -20px;filter:drop-shadow(0 20px 25px rgba(0,0,0,.2)); }
.download-copy .eyebrow { color:#8cf0ff; }
.download-copy h2 { color:#fff; }
.download-copy h2 span { color:#ffd95a; }
.download-copy > p:not(.eyebrow):not(.store-note) { color:rgba(255,255,255,.72);max-width:580px; }
.store-row.large .store-button { min-width:180px; }
.download-art { position:relative;min-height:470px; }
.download-icon { position:absolute;z-index:3;right:2%;top:0;width:235px;border-radius:55px;box-shadow:0 30px 60px rgba(0,0,0,.35);transform:rotate(7deg); }
.download-cast { position:absolute;z-index:2;right:9%;bottom:-55px;width:720px;max-width:100%;filter:drop-shadow(0 30px 25px rgba(0,0,0,.28)); }
.anchor-target { position:absolute;top:0; }

/* Footer */
.site-footer { background:#03122f;color:rgba(255,255,255,.7);padding:36px 0 max(36px,env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.08); }
.footer-grid { display:grid;grid-template-columns:auto 1fr auto;gap:24px 34px;align-items:center; }
.footer-brand { width:105px; }
.footer-copy strong,.footer-copy span,.footer-copy small { display:block; }
.footer-copy strong { color:#fff;font-family:"Fredoka",sans-serif; }
.footer-copy span { color:#8deaff;font-size:.84rem; }
.footer-copy small { margin-top:4px;max-width:520px;font-size:.67rem;color:rgba(255,255,255,.42); }
.footer-links,.footer-legal { display:flex;flex-wrap:wrap;gap:13px; }
.footer-links a,.footer-legal a { color:inherit;text-decoration:none;font-size:.78rem;font-weight:800; }
.footer-legal { grid-column:2/4;justify-content:flex-end;opacity:.65; }
.back-top { position:fixed;z-index:90;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:#0877db;color:#fff;box-shadow:0 14px 28px rgba(0,35,90,.22);opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s;cursor:pointer; }
.back-top.show { opacity:1;transform:none;pointer-events:auto; }
.global-noscript { position:fixed;z-index:999;left:10px;right:10px;bottom:10px;background:#fff3b4;color:#382700;padding:12px;border-radius:12px;font-weight:700; }

/* Responsive */
@media (max-width: 1080px) {
  .hero-content { grid-template-columns:.9fr 1.1fr; }
  .hero-visual { min-height:600px; }
  .hero-cast { width:92%; }
  .phone-card { width:190px;right:-10px; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .crew-grid { grid-template-columns:repeat(2,1fr); }
  .systems-grid,.story-grid { gap:42px; }
}
@media (max-width: 860px) {
  :root { --header-h:68px; }
  .container { width:min(calc(100% - 28px),var(--container)); }
  .nav-toggle { display:block; }
  .nav-cta { display:none; }
  .nav-links { position:absolute;left:16px;right:16px;top:76px;margin:0;padding:10px;display:grid;gap:4px;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:rgba(4,20,55,.96);box-shadow:0 22px 44px rgba(0,0,0,.22);backdrop-filter:blur(16px);opacity:0;transform:translateY(-8px);pointer-events:none;transition:.22s; }
  .nav-links.open { opacity:1;transform:none;pointer-events:auto; }
  .nav-links a { padding:12px 14px; }
  .hero { padding-top:105px;min-height:auto; }
  .hero-content { grid-template-columns:1fr;gap:10px; }
  .hero-copy { text-align:center;margin-inline:auto; }
  .hero-logo { margin:-22px auto -38px; }
  .hero-lead { margin-inline:auto; }
  .hero-actions,.store-row { justify-content:center; }
  .hero-visual { min-height:610px;max-width:720px;width:100%;margin:auto; }
  .hero-cast { left:50%;right:auto;transform:translateX(-50%);width:88%; }
  .phone-card { right:4%;top:55px;width:185px; }
  .tile-a { left:7%;top:20%; }
  .tile-c { right:39%; }
  .hero-scroll { display:none; }
  .gameplay-layout,.story-grid,.systems-grid,.collection-layout,.faq-grid,.download-grid { grid-template-columns:1fr; }
  .gameplay-layout,.story-grid,.systems-grid,.collection-layout,.faq-grid { gap:48px; }
  .demo-shell { max-width:680px;margin:auto; }
  .story-copy { order:1; }
  .door-stage { order:2;min-height:560px; }
  .systems-art { max-width:680px;margin:auto; }
  .faq-intro { text-align:center; }
  .faq-intro img { margin:24px auto 0; }
  .download-copy { text-align:center; }
  .download-copy > img { margin:-42px auto -48px; }
  .download-art { min-height:430px; }
  .download-cast { left:50%;right:auto;transform:translateX(-50%);width:700px; }
  .download-icon { right:5%;width:180px; }
}
@media (max-width: 620px) {
  .section { padding:72px 0; }
  .section-heading { margin-bottom:36px; }
  .nav-shell { width:calc(100% - 20px);border-radius:16px; }
  .brand { width:88px; }
  .brand img { width:90px; }
  .hero { padding:95px 0 48px; }
  .hero-bg { background-position:58% center; }
  .hero-copy .eyebrow { max-width:260px;margin:0 auto 6px; }
  .hero-logo { width:320px;max-width:95%; }
  .hero h1 { font-size:clamp(3.15rem,17vw,5rem); }
  .hero-lead { font-size:.94rem; }
  .hero-actions { display:grid;grid-template-columns:1fr;max-width:360px;margin-inline:auto; }
  .button { width:100%; }
  .store-button { min-width:0;flex:1 1 155px;max-width:180px; }
  .hero-visual { min-height:470px; }
  .hero-cast { width:115%;max-width:none;bottom:-5px; }
  .phone-card { width:145px;right:-5px;top:45px;border-radius:22px; }
  .phone-card img { border-radius:17px; }
  .floating-tile { width:55px; }
  .tile-b { width:50px; }
  .tile-c { width:46px;right:42%; }
  .hero-orb { width:380px;height:380px;right:-20%;top:5%; }
  .feature-grid,.crew-grid { grid-template-columns:1fr; }
  .feature-card { min-height:0;display:grid;grid-template-columns:105px 1fr;gap:16px;align-items:center;padding:20px; }
  .feature-card img { width:105px;height:105px;margin:0; }
  .feature-card h3 { font-size:1.2rem; }
  .feature-card p { font-size:.85rem; }
  .gameplay-copy h2,.story-copy h2,.systems-copy h2,.gallery-head h2,.collection-copy h2,.faq-intro h2,.download-copy h2,.section-heading h2 { font-size:clamp(2.25rem,12vw,3.5rem); }
  .play-steps li { grid-template-columns:1fr; }
  .play-steps span { grid-column:1;margin-top:3px; }
  .puzzle-board { gap:4px;padding:6px;border-radius:18px; }
  .puzzle-tile { border-radius:10px; }
  .demo-shell { padding:11px;border-radius:24px; }
  .floor-track { grid-template-columns:repeat(7,78vw); }
  .world-bg { background-attachment:scroll; }
  .story-key { width:120px;left:0; }
  .door-stage { min-height:500px; }
  .mystery-door { width:min(290px,76vw); }
  .door-stage::before { width:260px;height:420px; }
  .door-number { font-size:3.4rem; }
  .crew-image { height:330px; }
  .systems-art img { border-radius:25px; }
  .art-chip { font-size:.65rem; }
  .gallery-head { align-items:start; }
  .gallery-controls { display:none; }
  .gallery-card { flex-basis:78vw; }
  .rarity-row { gap:5px; }
  .faq-intro img { width:180px; }
  .download-section { padding:70px 0 50px; }
  .download-art { min-height:330px; }
  .download-cast { width:600px;max-width:125%;bottom:-32px; }
  .download-icon { width:120px;right:1%;top:5px;border-radius:30px; }
  .footer-grid { grid-template-columns:auto 1fr; }
  .footer-links { grid-column:1/3; }
  .footer-legal { grid-column:1/3;justify-content:flex-start; }
}
@media (max-width: 380px) {
  .hero-visual { min-height:430px; }
  .phone-card { width:128px; }
  .feature-card { grid-template-columns:88px 1fr; }
  .feature-card img { width:88px;height:88px; }
  .demo-topline { align-items:flex-start;flex-direction:column; }
  .mystery-door { width:250px; }
  .door-stage::before { width:220px;height:380px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important; }
  .reveal { opacity:1;transform:none; }
  .world-bg { background-attachment:scroll; }
}