:root {
  --ink: #f7fbff;
  --muted: #bad1ff;
  --navy: #04133e;
  --navy-2: #071e61;
  --blue: #1167e8;
  --cyan: #38dcff;
  --violet: #7e4dff;
  --gold: #ffc83d;
  --gold-2: #ff9f1c;
  --panel: rgba(8, 31, 91, .76);
  --line: rgba(137, 198, 255, .22);
  --shadow: 0 26px 70px rgba(0, 5, 36, .48);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 200;
  padding: 10px 14px;
  border-radius: 12px;
  background: #ffe66b;
  color: #071b58;
  font-weight: 700;
}
.skip-link:focus { top: 16px; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--navy);
  font-family: "Fredoka", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
em { color: var(--cyan); font-style: normal; }

#royal-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.page-glow { position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 72% 12%, rgba(38, 121, 255, .28), transparent 32%), radial-gradient(circle at 12% 48%, rgba(90, 44, 203, .18), transparent 31%); }
.section-shell { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }

.site-header {
  position: fixed;
  z-index: 100;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1240px, calc(100% - 36px));
  min-height: 70px;
  padding: 10px 13px 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: rgba(3, 17, 57, .68);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 12px 36px rgba(0, 3, 30, .25);
}
.brand { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.brand img { filter: drop-shadow(0 6px 12px rgba(26,175,255,.34)); }
.site-header nav { display: flex; gap: 34px; }
.site-header nav a { color: #d5e5ff; font-size: 14px; font-weight: 500; transition: color .25s ease; }
.site-header nav a:hover { color: #fff; }
.nav-cta { padding: 14px 24px; border-radius: 16px; color: #07225c; font-weight: 700; background: linear-gradient(180deg, #ffe66b, #ffba1f); box-shadow: inset 0 2px rgba(255,255,255,.7), 0 8px 20px rgba(255, 183, 20, .22); }
.menu-button { display: none; border: 0; background: transparent; width: 44px; height: 44px; }
.menu-button span { display:block; width:22px; height:2px; background:#fff; margin:6px auto; }

.hero { min-height: 100svh; position: relative; display: grid; align-items: center; overflow: hidden; padding: 138px max(7vw, 24px) 84px; }
.hero::after { content:""; position:absolute; inset:auto 0 0; height:26%; background:linear-gradient(transparent, var(--navy)); z-index:1; pointer-events:none; }
.hero-backdrop { position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg, rgba(3,13,52,.96) 0%, rgba(4,20,69,.74) 42%, rgba(6,28,90,.22) 72%), url("assets/backgrounds/splash_night.png") center/cover; filter:saturate(1.2) contrast(1.06); }
.hero-backdrop::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 78% 46%, rgba(30,141,255,.36), transparent 30%), linear-gradient(180deg, rgba(8,12,54,.1), rgba(2,11,42,.52)); }
.hero-copy { width:min(630px, 52vw); position:relative; z-index:4; }
.eyebrow { display:flex; align-items:center; gap:10px; color:#8edfff; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.eyebrow span { display:inline-block; width:28px; height:2px; border-radius:3px; background:linear-gradient(90deg, var(--cyan), transparent); }
.centered .eyebrow { justify-content:center; }
.centered .eyebrow span:last-child { transform:rotate(180deg); }
.hero-logo { width:260px; margin:22px 0 14px; filter:drop-shadow(0 13px 24px rgba(0,14,55,.4)); }
h1,h2,h3,h4,p { margin-top:0; }
h1 { margin-bottom:22px; font-size:clamp(48px, 6vw, 88px); line-height:.96; letter-spacing:-.055em; text-shadow:0 7px 20px rgba(0,10,42,.4); }
h2 { margin-bottom:24px; font-size:clamp(39px, 4.5vw, 68px); line-height:1.02; letter-spacing:-.045em; }
.hero-lede { max-width:590px; color:#c8dcff; font-size:clamp(17px, 1.35vw, 20px); line-height:1.6; }
.store-row { display:flex; gap:12px; margin-top:30px; }
.store-button { min-width:184px; min-height:62px; display:flex; align-items:center; gap:12px; padding:10px 18px; border:1px solid rgba(255,255,255,.26); border-radius:17px; color:#fff; background:linear-gradient(160deg, rgba(18,45,108,.9), rgba(4,14,47,.96)); box-shadow:inset 0 1px rgba(255,255,255,.18), 0 12px 30px rgba(0,5,35,.22); transition:transform .25s ease, border-color .25s ease; }
.store-button:hover { transform:translateY(-4px); border-color:rgba(93,219,255,.7); }
.store-button span:last-child { font-size:18px; font-weight:600; line-height:1.05; }
.store-button small { display:block; margin-bottom:3px; font-size:9px; font-weight:500; letter-spacing:.08em; }
.store-symbol { width:30px; height:30px; display:grid; place-items:center; font-size:18px; }
.store-symbol.apple { font-size:20px; color:#fff; text-shadow:0 -8px 0 #fff; transform:scale(.55); }
.store-symbol.play { color:#69e6ff; text-shadow:8px 0 #ffd652, 3px 7px #ef45be; }
.platform-note { margin:13px 0 0 8px; color:#7fa3dd; font-size:11px; letter-spacing:.08em; }
.hero-stage { position:absolute; z-index:2; right:-1vw; bottom:0; width:55vw; height:90%; }
.hero-stage::before { content:""; position:absolute; width:58%; aspect-ratio:1; left:20%; top:18%; border-radius:50%; background:radial-gradient(circle, rgba(103,222,255,.3), rgba(46,88,226,.07) 50%, transparent 70%); filter:blur(6px); }
.hero-character { position:absolute; bottom:0; object-fit:contain; filter:drop-shadow(0 28px 30px rgba(0,5,37,.54)); }
.hero-astrid { right:12%; width:min(34vw, 560px); max-width:100%; height:86%; z-index:2; }
.hero-bjorn { left:-1%; width:min(27vw, 440px); height:72%; opacity:.68; filter:drop-shadow(0 28px 30px rgba(0,5,37,.6)) saturate(.84); }
.hero-orbit { position:absolute; border:1px solid rgba(115,219,255,.22); border-radius:50%; }
.orbit-one { width:510px; height:510px; right:9%; top:20%; transform:rotate(20deg); }
.orbit-two { width:610px; height:260px; right:0; top:42%; transform:rotate(-18deg); }
.floating-piece { position:absolute; width:80px; z-index:5; filter:drop-shadow(0 12px 16px rgba(0,13,65,.42)); }
.fp-one { right:5%; top:21%; }.fp-two { left:8%; top:27%; width:62px; }.fp-three { right:43%; top:9%; width:54px; }
.scroll-cue { position:absolute; z-index:5; bottom:28px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:7px; color:#88a8dc; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.scroll-cue span { width:22px; height:35px; border:1px solid rgba(255,255,255,.25); border-radius:20px; position:relative; }
.scroll-cue span::after { content:""; position:absolute; width:3px; height:7px; top:7px; left:8px; border-radius:4px; background:#fff; animation:scrollDown 1.7s infinite; }
@keyframes scrollDown { 0%{transform:translateY(0);opacity:0} 30%{opacity:1} 100%{transform:translateY(13px);opacity:0} }

.story { min-height:850px; display:grid; grid-template-columns:1.05fr .95fr; gap:8vw; align-items:center; padding-block:110px; }
.story-art { position:relative; }
.royal-frame { position:relative; border:1px solid rgba(126,203,255,.36); border-radius:44% 44% 28px 28px; padding:10px; background:linear-gradient(150deg, rgba(57,125,255,.32), rgba(76,35,172,.13)); box-shadow:var(--shadow), inset 0 1px rgba(255,255,255,.3); }
.royal-frame::before { content:""; position:absolute; inset:-5px; border-radius:inherit; border:2px solid rgba(255,201,62,.38); z-index:-1; }
.royal-frame img { width:100%; min-height:530px; object-fit:cover; border-radius:calc(44% - 8px) calc(44% - 8px) 21px 21px; }
.frame-shine { position:absolute; inset:10px; overflow:hidden; border-radius:inherit; }
.frame-shine::after { content:""; position:absolute; width:28%; height:140%; left:-45%; top:-20%; transform:rotate(18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent); animation:frameShine 5s infinite 1s; }
@keyframes frameShine { 0%,30%{left:-45%} 75%,100%{left:120%} }
.story-dragon { position:absolute; width:220px; right:-52px; bottom:-52px; filter:drop-shadow(0 20px 20px rgba(0,4,27,.5)); }
.section-copy > p:not(.eyebrow) { color:var(--muted); font-size:17px; line-height:1.7; }
.story-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:36px; }
.story-stats div { padding:18px 8px 16px; text-align:center; border:1px solid var(--line); border-radius:18px; background:rgba(15,55,128,.4); }
.story-stats strong { display:block; color:var(--gold); font-size:30px; }
.story-stats span { color:#a7bee9; font-size:11px; }

.gameplay { padding:110px 0 130px; background:linear-gradient(180deg, rgba(17,66,149,.14), rgba(59,37,150,.13), transparent); }
.section-heading { width:min(760px, calc(100% - 40px)); margin:0 auto 70px; }
.section-heading.centered { text-align:center; }
.section-heading > p:last-child { color:var(--muted); font-size:17px; line-height:1.6; }
.gameplay-layout { display:grid; grid-template-columns:1fr 380px 1fr; align-items:center; gap:34px; }
.feature-stack { display:grid; gap:62px; }
.feature-card { position:relative; min-height:144px; display:grid; grid-template-columns:82px 1fr; align-items:center; gap:18px; padding:22px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(145deg, rgba(18,54,125,.6), rgba(6,26,81,.72)); box-shadow:0 20px 38px rgba(0,5,38,.18); }
.feature-card::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg, rgba(255,255,255,.09), transparent 30%); pointer-events:none; }
.feature-card img { width:78px; height:78px; object-fit:contain; filter:drop-shadow(0 10px 12px rgba(0,7,43,.45)); }
.feature-card h3 { margin-bottom:6px; font-size:20px; }
.feature-card p { margin:0; color:#a9c4ef; font-size:13px; line-height:1.5; }
.feature-number { position:absolute; top:-12px; right:17px; color:rgba(117,198,255,.34); font-size:30px; font-weight:700; }
.phone-wrap { position:relative; }
.phone-glow { position:absolute; inset:14% -18%; background:radial-gradient(circle, rgba(39,171,255,.42), rgba(81,65,224,.13) 48%, transparent 70%); filter:blur(10px); }
.phone { position:relative; padding:20px 17px 19px; min-height:700px; border:7px solid #14265d; border-radius:46px; background:linear-gradient(180deg,#a6e7ff 0%,#d7f3ff 30%,#e5eeff 100%); box-shadow:inset 0 0 0 2px rgba(255,255,255,.45), 0 35px 65px rgba(0,3,35,.55), 0 0 45px rgba(34,149,255,.2); overflow:hidden; }
.phone::before { content:""; position:absolute; inset:0; opacity:.38; background:url("assets/backgrounds/gameplay_garden.png") center/cover; }
.phone > * { position:relative; z-index:2; }
.phone-speaker { width:88px; height:20px; margin:-20px auto 12px; border-radius:0 0 13px 13px; background:#14265d; }
.game-topbar { height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; color:#18458a; border-radius:13px; background:rgba(255,255,255,.84); box-shadow:0 5px 12px rgba(38,81,150,.16); font-size:13px; font-weight:700; }
.game-topbar strong { display:flex; align-items:center; gap:5px; color:#2d66ad; }.game-topbar img{width:28px;height:28px;object-fit:contain}
.goal-row { margin:8px 0 10px; display:flex; align-items:center; justify-content:space-between; gap:5px; color:#3770ae; font-size:10px; font-weight:600; }
.goal-row div { display:flex; align-items:center; gap:2px; padding:4px 8px; border-radius:12px; background:rgba(255,255,255,.75); }.goal-row img{width:26px;height:26px;object-fit:contain}.goal-row b{font-size:12px}
.match-board { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; padding:8px; min-height:390px; border:3px solid rgba(66,98,205,.42); border-radius:18px; background:linear-gradient(150deg,rgba(77,100,209,.75),rgba(70,42,172,.7)); box-shadow:inset 0 5px 15px rgba(21,15,105,.45),0 8px 18px rgba(31,52,132,.2); }
.candy-cell { display:grid; place-items:center; aspect-ratio:1; border:0; padding:1px; border-radius:11px; background:rgba(219,238,255,.14); cursor:pointer; transition:transform .16s ease, background .16s ease; }
.candy-cell:hover { transform:scale(1.12); background:rgba(255,255,255,.27); z-index:2; }.candy-cell img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(14,16,91,.35))}
.candy-cell.pop { animation:candyPop .42s ease; }.candy-cell.burst img{animation:candyBurst .6s ease;}
@keyframes candyPop{50%{transform:scale(.55) rotate(-8deg);filter:brightness(1.6)}80%{transform:scale(1.2)}}
@keyframes candyBurst{45%{transform:scale(1.45) rotate(20deg);filter:brightness(1.8) drop-shadow(0 0 12px #fff)}100%{transform:scale(1)}}
.moves { width:66px;height:66px;margin:-15px auto 0;display:grid;place-content:center;text-align:center;border:4px solid #fff;border-radius:50%;color:#fff;background:linear-gradient(160deg,#ff5ab4,#9a3ee5);box-shadow:0 8px 16px rgba(74,27,164,.35);}.moves span{font-size:9px;text-transform:uppercase}.moves b{font-size:22px}
.booster-dock { display:flex; justify-content:center; gap:14px; margin-top:10px; }.booster-dock button{position:relative;width:62px;height:62px;border:2px solid rgba(255,255,255,.8);border-radius:50%;background:linear-gradient(180deg,#4568c7,#26377f);box-shadow:0 6px 12px rgba(19,31,94,.32);cursor:pointer}.booster-dock img{width:52px;height:52px;object-fit:contain}.booster-dock span{position:absolute;right:-3px;top:-3px;width:21px;height:21px;display:grid;place-items:center;border-radius:50%;color:#523500;background:#ffd54a;font-size:10px;font-weight:700}
.phone-tip { text-align:center;color:#7d9bcf;font-size:11px;margin:15px 0 0;letter-spacing:.05em; }

.characters { padding:120px 0 150px; position:relative; overflow:hidden; }
.characters::before { content:"";position:absolute;inset:12% 0 0;background:radial-gradient(circle at 50% 54%,rgba(33,132,255,.22),transparent 42%);pointer-events:none; }
.character-tabs { display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:30px; }
.character-tabs button { padding:14px 8px;border:1px solid var(--line);border-radius:16px;color:#92aedc;background:rgba(11,39,99,.52);cursor:pointer;transition:.25s ease; }.character-tabs span,.character-tabs small{display:block}.character-tabs span{font-weight:600}.character-tabs small{font-size:9px;margin-top:3px;opacity:.7}.character-tabs button.active{color:#07265e;border-color:#ffd867;background:linear-gradient(180deg,#ffe76f,#ffbd2d);box-shadow:0 9px 25px rgba(255,183,32,.2);transform:translateY(-3px)}
.character-display { min-height:660px;position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;border:1px solid var(--line);border-radius:34px;overflow:hidden;background:linear-gradient(130deg,rgba(20,63,145,.72),rgba(8,26,76,.82));box-shadow:var(--shadow); }
.character-display::before { content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 48%,rgba(2,14,54,.25) 60%); }
.character-halo { position:absolute;width:540px;height:540px;left:2%;top:8%;border-radius:50%;border:1px solid rgba(89,213,255,.2);box-shadow:inset 0 0 60px rgba(51,123,255,.18),0 0 70px rgba(31,109,255,.15); }.character-halo::before,.character-halo::after{content:"";position:absolute;border:1px solid rgba(255,208,72,.15);border-radius:50%;inset:45px}.character-halo::after{inset:110px;border-color:rgba(86,210,255,.16)}
.character-portrait { height:650px;position:relative;z-index:2;align-self:end;display:flex;justify-content:center; }.character-portrait img{height:100%;width:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 25px 25px rgba(0,4,34,.48));}
.character-copy { position:relative;z-index:3;padding:60px 70px 60px 30px; }.character-origin{color:#65dfff;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.character-copy h3{margin-bottom:5px;font-size:clamp(42px,5vw,72px);line-height:1;letter-spacing:-.05em}.character-copy h4{color:var(--gold);font-size:20px;font-weight:500}.character-copy>p:not(.character-origin){color:#bed2f5;font-size:16px;line-height:1.7}.character-skill{display:flex;align-items:center;gap:14px;margin-top:26px;padding:13px 17px;width:max-content;border:1px solid rgba(125,199,255,.22);border-radius:18px;background:rgba(11,42,105,.65)}.character-skill img{width:54px;height:54px;object-fit:contain}.character-skill small,.character-skill strong{display:block}.character-skill small{color:#82a5d9;font-size:9px;text-transform:uppercase;letter-spacing:.13em}.character-skill strong{margin-top:3px}.character-controls{display:flex;align-items:center;gap:15px;margin-top:35px}.character-controls button{width:45px;height:45px;border:1px solid rgba(255,255,255,.24);border-radius:50%;color:#fff;background:rgba(38,88,174,.62);cursor:pointer;transition:.2s}.character-controls button:hover{background:#197ce3;transform:scale(1.06)}.character-controls span{color:#8cabe0;font-size:11px;letter-spacing:.12em}

.powerups { padding:120px 0;display:grid;grid-template-columns:.72fr 1.28fr;gap:8vw;align-items:center; }.text-link{display:inline-flex;gap:10px;align-items:center;margin-top:17px;color:#72ddff;font-size:14px;font-weight:600}.text-link span{transition:transform .2s}.text-link:hover span{transform:translateX(5px)}.power-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.power-grid article{padding:24px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,rgba(20,63,141,.65),rgba(7,27,80,.76));box-shadow:0 18px 35px rgba(0,5,35,.2);transition:transform .25s,border-color .25s}.power-grid article:hover{transform:translateY(-8px);border-color:rgba(99,218,255,.5)}.power-icon{width:92px;height:92px;margin-bottom:15px;display:grid;place-items:center;border-radius:25px;box-shadow:inset 0 2px rgba(255,255,255,.24),0 12px 24px rgba(0,4,38,.3)}.power-icon img{width:82px;height:82px;object-fit:contain;filter:drop-shadow(0 8px 9px rgba(0,6,50,.3))}.power-icon.cyan{background:linear-gradient(145deg,#24c3e4,#176bbd)}.power-icon.violet{background:linear-gradient(145deg,#b447f5,#5b3acb)}.power-icon.gold{background:linear-gradient(145deg,#ffd75f,#ed7d13)}.power-icon.blue{background:linear-gradient(145deg,#4895ff,#2639a7)}.power-grid h3{margin-bottom:7px;font-size:18px}.power-grid p{margin:0;color:#a8c0e9;font-size:12px;line-height:1.5}

.world { min-height:850px;position:relative;padding:120px 0 140px;overflow:hidden; }.world-bg{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--navy),rgba(5,23,72,.38) 20%,rgba(5,24,72,.52) 75%,var(--navy)),url("assets/backgrounds/map_kingdom.png") center/cover;filter:saturate(1.12)}.journey{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:45px;padding-top:45px}.journey-path{position:absolute;top:115px;left:15%;right:15%;height:5px;border-radius:9px;background:rgba(78,147,231,.35)}.journey-path span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--gold));box-shadow:0 0 18px rgba(72,209,255,.75)}.journey-stop{position:relative;z-index:2;padding:32px 25px;text-align:center;border:1px solid rgba(255,255,255,.18);border-radius:27px;background:rgba(5,27,83,.78);backdrop-filter:blur(9px);box-shadow:var(--shadow)}.journey-stop>span{position:absolute;top:15px;left:18px;color:rgba(133,197,255,.45);font-size:22px;font-weight:700}.journey-stop img{width:110px;height:110px;margin:0 auto 14px;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(0,7,50,.4))}.journey-stop h3{margin-bottom:8px}.journey-stop p{margin:0;color:#a7c2ed;font-size:13px;line-height:1.5}

.download { min-height:720px;position:relative;display:grid;place-items:center;overflow:hidden;text-align:center;background:radial-gradient(circle at 50% 45%,rgba(48,155,255,.34),transparent 35%),linear-gradient(145deg,#0f4aa7,#5d2bba 70%,#1a79c9); }.download::before{content:"";position:absolute;inset:22px;border:1px solid rgba(255,225,104,.34);border-radius:45px;box-shadow:inset 0 0 60px rgba(33,219,255,.14)}.download::after{content:"";position:absolute;width:600px;height:600px;border:1px solid rgba(255,255,255,.11);border-radius:50%;}.download-content{position:relative;z-index:4;width:min(720px,calc(100% - 40px))}.download-content>img{width:250px;margin:0 auto 15px}.download-content h2{font-size:clamp(44px,6vw,78px);margin-bottom:17px}.download-content p{color:#d6e5ff;font-size:17px}.centered-stores{justify-content:center}.store-button.light{color:#081c4d;background:#fff;border-color:#fff;box-shadow:0 15px 30px rgba(0,7,54,.25)}.store-button.light .apple{color:#0c1c45;text-shadow:0 -8px 0 #0c1c45}.download-dragon{position:absolute;z-index:3;right:4%;bottom:-4%;width:min(28vw,390px);filter:drop-shadow(0 25px 25px rgba(0,7,50,.38));transform:rotate(-7deg)}
.faq { padding: 90px 0 40px; }
.faq-list { display: grid; gap: 16px; margin-top: 36px; }
.faq-list article { padding: 22px 24px; border: 1px solid var(--line); border-radius: 22px; background: rgba(8, 31, 91, .72); }
.faq-list h3 { margin: 0 0 8px; font-size: 20px; }
.faq-list p { margin: 0; color: #bed2f5; line-height: 1.65; }
.legal-page { padding: 140px 0 80px; max-width: 820px; }
.legal-page h1 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 18px; }
.legal-page p, .legal-page li { color: #bed2f5; line-height: 1.7; }
.legal-page a { color: #72ddff; text-decoration: underline; }
footer { min-height:120px;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:24px max(4vw,28px);color:#7e9bc9;background:#030e32;font-size:11px }footer .brand{color:#d6e5ff}footer nav{display:flex;gap:20px;flex-wrap:wrap}footer a:hover{color:#fff}footer p a{color:#72ddff;text-decoration:underline}

@media (max-width: 1050px) {
  .site-header nav{display:none}.menu-button{display:block}.nav-cta{margin-left:auto;margin-right:8px}.site-header.open nav{display:flex;position:absolute;top:80px;left:0;right:0;flex-direction:column;gap:0;padding:12px;border:1px solid var(--line);border-radius:20px;background:#071b55}.site-header.open nav a{padding:13px}
  .hero-copy{width:58vw}.hero-stage{right:-11vw;width:64vw}.hero-bjorn{display:none}.hero-astrid{width:48vw;right:8%}
  .story{gap:5vw}.story-dragon{width:170px}
  .gameplay-layout{grid-template-columns:1fr 360px}.right-features{display:none}.feature-stack{gap:30px}
  .character-display{grid-template-columns:1fr 1fr}.character-copy{padding-right:35px}.character-portrait{height:590px}
  .powerups{gap:4vw}
}
@media (max-width: 760px) {
  .section-shell{width:min(100% - 30px,1200px)}
  .site-header{top:10px;width:calc(100% - 20px)}.brand span{font-size:16px}.nav-cta{padding:12px 16px;font-size:12px}
  .hero{min-height:940px;align-items:start;padding:120px 20px 60px;text-align:center;overflow:hidden}.hero-copy{width:100%;max-width:100%}.hero .eyebrow{justify-content:center}.hero-logo{width:min(210px,70vw);margin-inline:auto}.hero-lede{font-size:15px;max-width:100%}.hero .store-row{justify-content:center}.hero-stage{width:100%;max-width:100%;height:46%;right:0;left:0;bottom:0;overflow:hidden}.hero-astrid{width:min(78vw,360px);max-width:78%;right:50%;transform:translateX(50%);height:100%;object-fit:contain;object-position:bottom center}.floating-piece{width:58px}.fp-two{left:10%}.fp-one{right:8%}.scroll-cue{display:none}
  .store-button{min-width:0;flex:1;padding:9px 11px}.store-button span:last-child{font-size:14px}
  .story{grid-template-columns:1fr;padding-block:80px;gap:70px}.royal-frame img{min-height:420px}.story-dragon{right:-4px;bottom:-42px;width:150px}.story-stats strong{font-size:24px}
  .gameplay{padding:80px 0}.gameplay-layout{grid-template-columns:1fr}.phone-wrap{order:1;width:min(390px,100%);margin:auto}.left-features{order:2;grid-template-columns:1fr 1fr;gap:12px}.feature-card{grid-template-columns:62px 1fr;padding:15px}.feature-card img{width:58px;height:58px}.phone{min-height:680px}.match-board{min-height:370px}
  .characters{padding:80px 0}.character-tabs{overflow:auto;display:flex;padding-bottom:4px}.character-tabs button{min-width:100px}.character-display{grid-template-columns:1fr;min-height:870px}.character-portrait{height:500px}.character-copy{padding:35px;text-align:center}.character-skill,.character-controls{margin-left:auto;margin-right:auto}.character-display::before{background:linear-gradient(180deg,transparent 35%,rgba(2,14,54,.44) 58%)}.character-halo{width:420px;height:420px;left:50%;transform:translateX(-50%)}
  .powerups{grid-template-columns:1fr;padding-block:80px}.power-grid{margin-top:30px}
  .world{padding:80px 0}.journey{grid-template-columns:1fr}.journey-path{display:none}.journey-stop{display:grid;grid-template-columns:90px 1fr;text-align:left;align-items:center}.journey-stop img{grid-row:1/3;margin:0;width:78px;height:78px}.journey-stop h3{align-self:end}.journey-stop p{align-self:start}
  .download{min-height:660px}.download::before{inset:10px;border-radius:25px}.download-dragon{display:none}
  footer{flex-direction:column;text-align:center;padding-block:35px}
}
@media (max-width: 490px) {
  .site-header .brand span{display:none}.hero{min-height:900px}.hero h1{font-size:48px}.hero .store-row,.centered-stores{flex-direction:column}.store-button{width:210px;margin-inline:auto;flex:none}.left-features{grid-template-columns:1fr}.phone{transform:scale(.94);transform-origin:top center;margin-bottom:-42px}.story-stats{gap:6px}.story-stats div{padding-inline:3px}.story-stats span{font-size:9px}.power-grid{grid-template-columns:1fr}.character-copy h3{font-size:45px}.character-display{min-height:900px}.character-portrait{height:470px}
}
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important} }