/* MoodMatch landing page visual system. Replace brand colors here first. */
:root{
  --ink:#25204a;
  --ink-soft:#5d5a7a;
  --violet:#5936d6;
  --violet-dark:#37208e;
  --violet-2:#7b54ff;
  --sky:#27b9ff;
  --sky-2:#68d7ff;
  --blue:#1687ff;
  --blue-deep:#1356c9;
  --pink:#ff4fa7;
  --orange:#ff9a2f;
  --yellow:#ffd84a;
  --green:#58d95d;
  --red:#ff554d;
  --purple:#9c57e8;
  --cream:#fff6e7;
  --white:#fff;
  --card:#ffffffd9;
  --line:#ffffff94;
  --shadow:0 24px 70px rgba(50,31,122,.20);
  --shadow-soft:0 18px 45px rgba(50,31,122,.14);
  --radius-xl:38px;
  --radius-lg:28px;
  --radius-md:20px;
  --container:min(1180px, calc(100% - 36px));
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;overflow-x:hidden;background:#f6f9ff;color:var(--ink);font-family:"Nunito",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block;object-fit:contain}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
::selection{background:#ffd84a;color:#31215f}

.skip-link{position:fixed;left:12px;top:12px;z-index:9999;padding:10px 14px;border-radius:12px;background:#fff;color:#221a54;transform:translateY(-150%);box-shadow:var(--shadow-soft)}
.skip-link:focus{transform:none}

.shell{width:var(--container);margin-inline:auto}
.section{padding:clamp(76px,9vw,132px) 0}
.kicker{margin:0 0 12px;font-size:.78rem;font-weight:900;letter-spacing:.18em;color:var(--violet);text-transform:uppercase}
.kicker.light{color:#dcd4ff}
h1,h2,h3{font-family:"Fredoka",system-ui,sans-serif;line-height:1.05;margin:0;color:var(--ink)}
h1{font-size:clamp(3rem,6.4vw,6rem);letter-spacing:-.055em}
h2{font-size:clamp(2.3rem,4.6vw,4.4rem);letter-spacing:-.045em}
h3{font-size:clamp(1.25rem,2vw,1.65rem);letter-spacing:-.025em}
p{margin:0;color:var(--ink-soft)}
.section-lede{font-size:clamp(1.05rem,1.5vw,1.22rem);max-width:62ch}
.centered{text-align:center;margin-inline:auto}
.centered>p:last-child{max-width:720px;margin:18px auto 0}

.scroll-progress{position:fixed;left:0;right:0;top:0;height:4px;z-index:1000;background:transparent;pointer-events:none}
.scroll-progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--sky),var(--violet));box-shadow:0 0 16px rgba(87,58,222,.42)}

.site-header{position:fixed;top:0;left:0;right:0;z-index:900;padding:14px 0;transition:background .25s ease,box-shadow .25s ease,backdrop-filter .25s ease}
.site-header.scrolled{background:rgba(245,248,255,.84);backdrop-filter:blur(18px);box-shadow:0 8px 35px rgba(48,33,112,.08)}
.nav-wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
.brand{width:118px;display:block}
.brand img{width:100%;height:auto;aspect-ratio:420/309;object-fit:contain}
.site-nav{justify-self:center;display:flex;gap:28px;align-items:center;font-weight:800;color:#393060}
.site-nav a{position:relative;padding:8px 0}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:3px;border-radius:4px;background:linear-gradient(90deg,var(--pink),var(--orange));transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.site-nav a:hover::after,.site-nav a:focus-visible::after{transform:scaleX(1)}
.mini-cta{padding:12px 20px;border-radius:999px;background:linear-gradient(180deg,#6dea68,#3ecb52);color:#fff;font-weight:900;box-shadow:inset 0 -5px 0 rgba(22,128,55,.23),0 10px 24px rgba(48,185,74,.22);border:2px solid rgba(255,255,255,.75)}
.nav-toggle{display:none;width:46px;height:46px;border:0;border-radius:15px;background:#fff;box-shadow:var(--shadow-soft);padding:11px}
.nav-toggle span{display:block;height:3px;border-radius:5px;background:var(--violet-dark);margin:4px 0;transition:transform .2s ease,opacity .2s ease}

.hero{position:relative;min-height:100svh;padding:145px 0 110px;background:radial-gradient(circle at 70% 16%,#fff 0 7%,transparent 8%),radial-gradient(circle at 12% 30%,#fff7 0 3%,transparent 3.5%),linear-gradient(180deg,#8cdfff 0%,#d5f0ff 44%,#eaf6ff 100%);overflow:hidden}
.hero::before{content:"";position:absolute;inset:auto -8% 0;height:40%;background:radial-gradient(circle at 20% 100%,#83d55b 0 8%,transparent 9%),radial-gradient(circle at 75% 100%,#78cd57 0 9%,transparent 10%),linear-gradient(180deg,transparent,#c8efb0 72%,#79ca55 73%,#6ab44f);opacity:.86}
.hero-grid{position:relative;z-index:4;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.95fr);align-items:center;gap:36px}
.hero-copy{padding-top:8px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:0 10px 32px rgba(76,68,137,.1);font-size:.82rem;font-weight:900;color:#4b3a8f;text-transform:uppercase;letter-spacing:.08em}
.eyebrow-dot{width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 5px rgba(255,79,167,.13)}
.hero-logo{width:min(470px,72vw);height:auto;aspect-ratio:900/662;object-fit:contain;margin:18px 0 -24px -18px;filter:drop-shadow(0 18px 18px rgba(70,39,155,.14))}
.hero h1 span{background:linear-gradient(90deg,#5534d7,#0a9ee7);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-lede{margin-top:22px;max-width:640px;font-size:clamp(1.05rem,1.5vw,1.23rem);font-weight:700;color:#565278}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:13px 24px;border-radius:18px;border:2px solid transparent;font-weight:900;transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s ease;box-shadow:0 14px 34px rgba(64,43,151,.16)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.mini-cta:focus-visible,.store-btn:focus-visible,.gallery-btn:focus-visible,.mood-bubble:focus-visible,.nav-toggle:focus-visible{outline:4px solid rgba(255,216,74,.85);outline-offset:3px}
.btn-primary{background:linear-gradient(180deg,#65e96a 0%,#36c64e 100%);border-color:#b8ffb9;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.08);box-shadow:inset 0 -5px 0 rgba(16,126,49,.24),0 18px 36px rgba(47,177,69,.27)}
.btn-secondary{background:linear-gradient(180deg,#fff 0%,#eef4ff 100%);border-color:#fff;color:#3f2a9f;box-shadow:inset 0 -4px 0 rgba(104,112,169,.10),0 16px 34px rgba(64,43,151,.14)}
.store-note{margin-top:12px;font-size:.8rem;font-weight:700;color:#7b7892}
.hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.hero-pills span{padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.64);border:1px solid rgba(255,255,255,.8);font-size:.78rem;font-weight:900;color:#514a78}

.hero-stage{position:relative;min-height:720px;display:grid;place-items:center;isolation:isolate;overflow:visible}
.phone{position:relative;border-radius:38px;padding:9px;background:linear-gradient(150deg,#fff,#d4ddf8 42%,#8795cb);box-shadow:0 36px 90px rgba(41,35,105,.28),inset 0 0 0 2px rgba(255,255,255,.72);overflow:hidden}
.phone::after{content:"";position:absolute;inset:9px;border-radius:29px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);pointer-events:none}
.phone img{border-radius:29px;width:100%;height:auto;aspect-ratio:760/1350;object-fit:cover;object-position:top center;display:block}
.phone-speaker{position:absolute;z-index:3;left:50%;top:16px;transform:translateX(-50%);width:72px;height:7px;border-radius:10px;background:rgba(24,24,60,.64);box-shadow:0 1px 0 rgba(255,255,255,.35)}
.phone-hero{width:min(340px,58vw);transform:rotate(2deg);z-index:4}
.float-char{position:absolute;z-index:3;height:auto;object-fit:contain;filter:drop-shadow(0 25px 22px rgba(47,31,98,.22));pointer-events:none;will-change:transform}
.float-char-red{width:170px;aspect-ratio:420/440;left:-2%;bottom:4%;transform:rotate(-9deg)}
.float-char-blue{width:148px;aspect-ratio:420/504;right:-2%;bottom:2%;transform:rotate(5deg)}
.float-char-purple{width:118px;aspect-ratio:420/630;right:-4%;top:2%;transform:rotate(5deg)}
.spark{position:absolute;width:18px;height:18px;background:#ffd84a;clip-path:polygon(50% 0,61% 35%,100% 50%,61% 65%,50% 100%,39% 65%,0 50%,39% 35%);filter:drop-shadow(0 5px 6px rgba(255,177,0,.3));animation:twinkle 2.4s ease-in-out infinite}
.spark-1{left:3%;top:18%;animation-delay:.3s}.spark-2{right:8%;top:38%;width:26px;height:26px;animation-delay:1s}.spark-3{left:14%;bottom:10%;width:15px;height:15px;animation-delay:1.6s}
.hero-glow{position:absolute;border-radius:50%;filter:blur(12px);opacity:.34}
.hero-glow-a{width:430px;height:430px;background:#fff56e;right:-120px;top:120px}
.hero-glow-b{width:330px;height:330px;background:#b783ff;left:-140px;top:300px}
.hero-cloud{position:absolute;width:260px;height:80px;border-radius:999px;background:rgba(255,255,255,.75);filter:blur(.2px)}
.hero-cloud::before,.hero-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}.hero-cloud::before{width:90px;height:90px;left:38px;top:-35px}.hero-cloud::after{width:120px;height:120px;right:35px;top:-55px}
.hero-cloud-a{right:8%;top:10%;transform:scale(.7);opacity:.7}.hero-cloud-b{left:-2%;top:40%;transform:scale(.5);opacity:.44}
.hero-wave{position:absolute;left:-5%;right:-5%;bottom:-1px;height:70px;background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0;z-index:3}

.intro{background:#fff}
.intro-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:start;margin-bottom:48px}
.intro-copy{display:grid;gap:14px;font-size:1.08rem}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature-card{position:relative;padding:30px;border-radius:var(--radius-lg);background:linear-gradient(180deg,#fff,#f7f5ff);border:1px solid #ebe8ff;box-shadow:var(--shadow-soft);overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.feature-card:hover{box-shadow:0 24px 60px rgba(69,47,151,.18)}
.feature-card h3{margin:18px 0 10px}.feature-card p{font-size:.98rem}
.feature-icon{width:74px;height:74px;border-radius:22px;background:linear-gradient(145deg,#fff,#d7eaff);box-shadow:inset 0 -6px 0 rgba(44,92,185,.08),0 12px 25px rgba(68,61,150,.12);position:relative}
.icon-match{display:flex;align-items:center;justify-content:center;gap:0}.icon-match span{width:27px;height:27px;border-radius:50%;margin-left:-4px;box-shadow:inset 0 4px 4px #fff8}.icon-match span:nth-child(1){background:var(--red);margin-left:0}.icon-match span:nth-child(2){background:var(--blue)}.icon-match span:nth-child(3){background:var(--purple)}
.icon-world::before{content:"";position:absolute;inset:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 6%,transparent 7%),linear-gradient(145deg,#57d868 0 43%,#2ea1ff 44% 100%);box-shadow:inset -6px -8px 0 rgba(45,53,147,.10)}
.icon-boost::before{content:"";position:absolute;inset:18px;background:#ffd84a;clip-path:polygon(50% 0,61% 34%,96% 34%,68% 55%,78% 91%,50% 69%,22% 91%,32% 55%,4% 34%,39% 34%);filter:drop-shadow(0 4px 0 #ffad18)}

.gameplay-section{background:linear-gradient(180deg,#edf6ff,#f7f4ff 80%,#fff)}
.gameplay-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.gameplay-device{display:grid;place-items:center;position:relative}
.phone-gameplay{width:min(420px,82vw);transform:rotate(-2deg)}
.shot-line{position:absolute;z-index:5;width:6px;height:180px;border-radius:8px;background:repeating-linear-gradient(to top,#1687ff 0 10px,transparent 10px 20px);bottom:33%;left:51%;transform:rotate(-7deg);opacity:.55;pointer-events:none}
.gameplay-copy .section-lede{margin-top:18px}
.steps{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px}
.steps li{display:grid;grid-template-columns:62px 1fr;gap:14px;padding:16px 18px;border-radius:20px;background:#ffffffc9;border:1px solid #e5e9ff;box-shadow:0 10px 25px rgba(70,50,138,.07)}
.steps li>span{width:50px;height:50px;border-radius:16px;background:linear-gradient(145deg,#6f53ef,#4e2cb8);display:grid;place-items:center;color:#fff;font-family:"Fredoka";font-weight:700;box-shadow:inset 0 -5px 0 rgba(38,19,112,.22)}
.steps h3{font-size:1.15rem;margin:1px 0 4px}.steps p{font-size:.94rem}

.booster-section{background:linear-gradient(180deg,#fff6e8,#fff 80%);position:relative;overflow:hidden}
.booster-section::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,#ffd84a55,transparent 65%);right:-180px;top:-120px}
.booster-shell{position:relative;z-index:2}
.booster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:42px}
.booster-card{padding:26px 22px;border-radius:26px;background:#fff;border:1px solid #f1e5d0;box-shadow:0 18px 38px rgba(126,83,30,.10);text-align:center;transition:transform .2s var(--ease)}
.booster-card h3{margin:18px 0 8px}.booster-card p{font-size:.92rem}
.booster-orb{width:88px;height:88px;margin:auto;border-radius:28px;position:relative;box-shadow:inset 0 -8px 0 rgba(40,20,100,.12),inset 0 5px 8px #fff9,0 13px 25px rgba(69,47,151,.15)}
.orb-rainbow{background:conic-gradient(from 45deg,#f44 0 16%,#ffb51d 16% 32%,#ffe853 32% 48%,#49d659 48% 64%,#30baff 64% 80%,#a858eb 80%)}
.orb-target{background:#f4f6ff}.orb-target::before,.orb-target::after,.orb-target span{content:"";position:absolute;border-radius:50%;inset:14px;border:10px solid #ef315a}.orb-target::after{inset:32px;border-width:0;background:#4f48d3}.orb-target span{inset:7px auto auto 58px;width:8px;height:55px;border:0;border-radius:6px;background:#6b4f3c;transform:rotate(38deg);transform-origin:bottom}
.orb-hammer{background:linear-gradient(145deg,#39a9ff,#2567d8)}.orb-hammer::before{content:"";position:absolute;width:45px;height:26px;border-radius:8px;background:linear-gradient(#ffc44e,#f19823);left:20px;top:20px;transform:rotate(-28deg);box-shadow:inset 0 -5px 0 rgba(150,85,15,.18)}.orb-hammer::after{content:"";position:absolute;width:12px;height:45px;border-radius:8px;background:#f7bc43;left:43px;top:36px;transform:rotate(-28deg)}
.orb-magic{background:radial-gradient(circle at 50% 35%,#ffd855 0 8%,transparent 9%),radial-gradient(circle at 35% 60%,#fff 0 4%,transparent 5%),linear-gradient(145deg,#b756f1,#6535d8)}.orb-magic::before{content:"";position:absolute;inset:23px;background:#ffd84a;clip-path:polygon(50% 0,61% 35%,100% 50%,61% 65%,50% 100%,39% 65%,0 50%,39% 35%);filter:drop-shadow(0 3px 0 #f3a71b)}

.characters-section{background:linear-gradient(180deg,#f8f3ff,#eef8ff)}
.character-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.character-card{border-radius:34px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.9)}
.character-card>div:last-child{padding:26px 28px 30px;background:rgba(255,255,255,.90);backdrop-filter:blur(10px)}
.character-card h3{margin:10px 0 8px}.character-card p{font-size:.95rem}
.character-art{height:360px;display:grid;place-items:end center;position:relative;overflow:hidden}
.character-art::before{content:"";position:absolute;width:250px;height:250px;border-radius:50%;filter:blur(1px);opacity:.55}
.character-art img{position:relative;z-index:2;max-height:96%;max-width:88%;width:auto;height:auto;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 24px 20px rgba(33,26,84,.18))}
.character-art-red{background:linear-gradient(180deg,#ffd8c9,#ffb78f)}.character-art-red::before{background:#ff795e}
.character-art-blue{background:linear-gradient(180deg,#d8efff,#acd9ff)}.character-art-blue::before{background:#64bfff}
.character-art-purple{background:linear-gradient(180deg,#eee0ff,#d7c1ff)}.character-art-purple::before{background:#ae76ff}
.character-art-purple img{max-height:100%}
.mood-chip{display:inline-block;padding:6px 10px;border-radius:999px;background:#efecff;color:#5d43c6;font-size:.72rem;font-weight:900;letter-spacing:.12em}

.progression-section{background:#fff}
.progression-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:74px}
.progression-copy .section-lede{margin:18px 0 26px}
.progress-cards{display:grid;gap:13px}
.progress-card{display:grid;grid-template-columns:54px 1fr;gap:15px;align-items:start;padding:17px 18px;border:1px solid #eae8f8;border-radius:20px;background:#fbfbff}
.progress-num{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#ffb63f,#ff7f45);color:#fff;font-family:"Fredoka";font-size:1.2rem;font-weight:700;box-shadow:inset 0 -5px 0 rgba(173,67,24,.15)}
.progress-card h3{font-size:1.08rem;margin:1px 0 4px}.progress-card p{font-size:.92rem}
.progression-visual{display:grid;place-items:center;position:relative}
.phone-progress{width:min(420px,82vw);transform:rotate(2deg)}
.floating-ticket{position:absolute;left:-8%;bottom:18%;z-index:4;padding:14px 18px;border-radius:18px;background:#fff7e7;border:2px solid #fff;box-shadow:0 16px 36px rgba(76,47,120,.16);transform:rotate(-4deg)}
.floating-ticket strong,.floating-ticket span{display:block}.floating-ticket strong{font-family:"Fredoka";color:#5736c5}.floating-ticket span{font-size:.76rem;color:#756b86;margin-top:2px}

.screenshots-section{background:linear-gradient(180deg,#eef9ff,#fff 70%)}
.gallery-controls{display:flex;justify-content:flex-end;gap:10px;margin:24px 0 16px}
.gallery-btn{width:50px;height:50px;border-radius:16px;border:1px solid #e4e6f6;background:#fff;color:#4b34b4;font-size:1.35rem;font-weight:900;box-shadow:0 10px 24px rgba(62,47,135,.10)}
.screenshot-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(270px,340px);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px max(4px,calc((100vw - min(1180px,calc(100vw - 36px)))/2)) 34px;scrollbar-width:thin;scrollbar-color:#a594ee transparent;margin-inline:calc((100vw - min(1180px,calc(100vw - 36px)))/-2);overscroll-behavior-inline:contain}
.shot-card{scroll-snap-align:center;margin:0;display:grid;gap:14px}
.shot-frame{padding:8px;border-radius:32px;background:linear-gradient(150deg,#fff,#dce7ff 55%,#8d9acb);box-shadow:0 22px 54px rgba(41,35,105,.18)}
.shot-frame img{border-radius:25px;width:100%;height:auto;aspect-ratio:760/1350;object-fit:cover;object-position:top center;display:block}
.shot-card figcaption{font-weight:800;color:#585273;font-size:.9rem;text-align:center}

.mood-demo-section{background:linear-gradient(145deg,#4425b7,#643dd9 54%,#1e83df);color:#fff;position:relative;overflow:hidden}
.mood-demo-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,#ff4fa733,transparent 22%),radial-gradient(circle at 86% 70%,#4ee8ff33,transparent 24%)}
.mood-demo-grid{position:relative;z-index:2;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:70px}
.mood-demo-section h2{color:#fff}.mood-demo-section p{color:#ded9ff}.mood-demo-section .btn-secondary{margin-top:24px}
.mini-board{position:relative;min-height:440px;padding:44px;border-radius:38px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 24px 60px rgba(31,17,98,.26);display:grid;grid-template-columns:repeat(3,1fr);place-items:center;gap:20px;backdrop-filter:blur(15px)}
.mood-bubble{width:96px;height:96px;border:0;border-radius:50%;color:#fff;font-family:"Fredoka";font-size:2rem;font-weight:800;box-shadow:inset 0 8px 10px rgba(255,255,255,.42),inset 0 -10px 16px rgba(54,30,112,.20),0 15px 25px rgba(31,19,88,.24);transition:transform .16s var(--ease),opacity .24s ease,filter .16s ease}
.mood-bubble:hover{transform:translateY(-4px) scale(1.04);filter:brightness(1.05)}
.mood-bubble.popped{opacity:0;transform:scale(.2) rotate(20deg);pointer-events:none}
.mood-bubble.red{background:radial-gradient(circle at 35% 25%,#ff918a,#ff4c4a 58%,#d63136)}
.mood-bubble.blue{background:radial-gradient(circle at 35% 25%,#8dd8ff,#369cf8 58%,#1d69d0)}
.mood-bubble.purple{background:radial-gradient(circle at 35% 25%,#d5a2ff,#9858e8 58%,#6b31c6)}
.mood-bubble.yellow{background:radial-gradient(circle at 35% 25%,#fff69a,#ffd33d 58%,#f2a21e);color:#8d5f00}
.mood-bubble.green{background:radial-gradient(circle at 35% 25%,#b8ff9a,#62d955 58%,#2ba341)}
.demo-message{grid-column:1/-1;color:#fff;font-weight:900;text-align:center;background:rgba(20,13,75,.24);padding:9px 13px;border-radius:999px;min-width:200px}

.faq-section{background:#fff}
.faq-shell{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;align-items:start}
.faq-list{display:grid;gap:12px}
details{border:1px solid #e8e7f5;border-radius:20px;background:#fbfbff;padding:0 20px;box-shadow:0 8px 20px rgba(47,41,104,.05)}
summary{list-style:none;cursor:pointer;padding:20px 36px 20px 0;font-family:"Fredoka";font-size:1.08rem;font-weight:700;color:#34305a;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:10px;background:#eeeaff;display:grid;place-items:center;color:#5d43c7;font-family:"Nunito";font-weight:900;transition:transform .2s ease}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{padding:0 0 20px;max-width:70ch}

.final-cta{position:relative;overflow:hidden;padding:110px 0;background:linear-gradient(145deg,#4321af,#5835d6 52%,#257bd8);text-align:center}
.final-cta::before{content:"";position:absolute;left:-4%;right:-4%;top:-50px;height:100px;background:#fff;border-radius:0 0 50% 50%/0 0 100% 100%}
.final-bg{position:absolute;border-radius:50%;filter:blur(4px);opacity:.22}.final-bg-a{width:420px;height:420px;background:#ff4fa7;left:-140px;bottom:-130px}.final-bg-b{width:500px;height:500px;background:#40ddff;right:-180px;top:-130px}
.final-inner{position:relative;z-index:2;display:grid;justify-items:center}
.final-logo{width:250px;height:auto;aspect-ratio:420/309;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(30,17,91,.18));margin-bottom:-10px}
.final-cta h2{color:#fff;max-width:800px}.final-cta p{color:#ded8ff;max-width:710px;margin-top:16px;font-size:1.05rem}.store-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.store-btn{min-width:200px;padding:11px 22px;border-radius:18px;background:#fff;color:#2f255e;text-align:left;box-shadow:inset 0 -4px 0 #d9def3,0 16px 34px rgba(25,15,84,.22);transition:transform .18s var(--ease)}
.store-btn:hover{transform:translateY(-2px)}.store-btn small,.store-btn strong{display:block}.store-btn small{font-size:.72rem;font-weight:700;color:#77718e}.store-btn strong{font-family:"Fredoka";font-size:1.12rem}
.placeholder-copy{font-size:.78rem!important;color:#c7c0ea!important;margin-top:13px!important}.placeholder-anchor{position:absolute;pointer-events:none}

.site-footer{background:#21194d;color:#fff;padding:44px 0 50px}
.footer-grid{display:grid;grid-template-columns:1fr auto auto;gap:42px;align-items:start}.footer-brand{font-family:"Fredoka";font-weight:700;font-size:1.8rem}.site-footer p{color:#aeadcc;max-width:430px;margin-top:8px}.footer-links,.footer-meta{display:grid;gap:9px}.footer-links a,.footer-meta a{color:#e6e2ff;font-weight:800}.footer-meta{font-size:.84rem;color:#9895bc}
.powered-by{display:inline-flex;align-items:center;gap:12px;margin-top:18px;padding:8px 12px;border-radius:16px;background:#fff;color:#2f255e;font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.powered-by img{width:148px;height:auto;max-height:44px;object-fit:contain;object-position:left center}
.back-top{position:fixed;right:18px;bottom:18px;z-index:800;width:48px;height:48px;border:0;border-radius:16px;background:#fff;color:#4d32ba;font-weight:900;box-shadow:0 14px 30px rgba(39,31,87,.2);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}.back-top.visible{opacity:1;transform:none;pointer-events:auto}.noscript{position:fixed;left:12px;right:12px;bottom:12px;z-index:1000;background:#fff4c6;color:#5d4910;padding:12px 14px;border-radius:12px;text-align:center;font-weight:800}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
@keyframes twinkle{0%,100%{transform:scale(.75) rotate(0deg);opacity:.55}50%{transform:scale(1.16) rotate(35deg);opacity:1}}

@media (max-width: 1020px){
  .site-nav{gap:17px;font-size:.9rem}.brand{width:100px}.mini-cta{padding:10px 16px}
  .hero-grid{grid-template-columns:1fr 1fr;gap:12px}.hero-stage{min-height:640px}.phone-hero{width:min(300px,52vw)}.float-char-red{width:140px;left:-6%}.float-char-blue{width:122px;right:-4%}.float-char-purple{width:100px;right:-6%}
  .booster-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid,.character-grid{gap:15px}.character-art{height:320px}
  .progression-grid{gap:42px}
}

@media (max-width: 820px){
  :root{--container:min(calc(100% - 28px),720px)}
  .site-header{padding:10px 0}.nav-wrap{grid-template-columns:auto auto 1fr}.brand{width:92px}.mini-cta{justify-self:end}
  .nav-toggle{display:block;justify-self:end;grid-column:3}.mini-cta{display:none}
  .site-nav{position:absolute;left:14px;right:14px;top:72px;display:grid;gap:2px;padding:14px;border-radius:22px;background:rgba(255,255,255,.97);box-shadow:0 22px 60px rgba(41,31,91,.16);transform:translateY(-10px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.site-nav.open{opacity:1;transform:none;pointer-events:auto}.site-nav a{padding:12px 14px;border-radius:12px}.site-nav a:hover{background:#f4f2ff}.site-nav a::after{display:none}
  .hero{padding-top:120px}.hero-grid{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-logo{margin:16px auto -18px}.hero-lede{margin-inline:auto}.hero-actions,.hero-pills{justify-content:center}.hero-stage{min-height:580px;margin-top:4px}.phone-hero{width:min(280px,58vw)}.float-char-red{left:0;width:28vw;max-width:130px;bottom:2%}.float-char-blue{right:0;width:24vw;max-width:118px;bottom:1%}.float-char-purple{right:2%;top:0;width:20vw;max-width:96px}
  .intro-grid,.gameplay-grid,.progression-grid,.mood-demo-grid,.faq-shell{grid-template-columns:1fr;gap:38px}.intro-grid{margin-bottom:34px}.feature-grid{grid-template-columns:1fr}.feature-card{display:grid;grid-template-columns:74px 1fr;column-gap:18px}.feature-card h3{margin:3px 0 7px}.feature-card p{grid-column:2}
  .gameplay-device{order:2}.gameplay-copy{order:1}.shot-line{display:none}
  .character-grid{grid-template-columns:1fr}.character-card{display:grid;grid-template-columns:.78fr 1fr}.character-art{height:330px}.character-card>div:last-child{display:flex;flex-direction:column;justify-content:center}
  .progression-visual{order:2}.floating-ticket{left:4%;bottom:12%}
  .footer-grid{grid-template-columns:1fr 1fr}.footer-meta{grid-column:1/-1}
}

@media (max-width: 560px){
  :root{--container:calc(100% - 22px);--radius-xl:30px}
  .section{padding:74px 0}.hero{padding:105px 0 88px}.hero h1{font-size:clamp(2.7rem,15vw,4.15rem)}.eyebrow{font-size:.68rem}.hero-logo{width:78vw}.hero-stage{min-height:470px}.phone-hero{width:58vw;max-width:260px}.float-char-red{width:26vw;max-width:110px;left:0;bottom:2%}.float-char-blue{width:22vw;max-width:96px;right:0;bottom:1%}.float-char-purple{width:18vw;max-width:80px;right:0;top:0}.spark-2{right:2%}
  .hero-actions{display:grid}.hero-actions .btn{width:100%}.hero-pills span{font-size:.7rem}.store-note{font-size:.74rem}
  .feature-card{grid-template-columns:64px 1fr;padding:22px}.feature-icon{width:64px;height:64px}.feature-card p{grid-column:1/-1;margin-top:8px}
  .booster-grid{grid-template-columns:1fr 1fr;gap:12px}.booster-card{padding:20px 14px}.booster-orb{width:72px;height:72px;border-radius:22px}.booster-card h3{font-size:1.15rem}.booster-card p{font-size:.82rem}.orb-target::before,.orb-target::after,.orb-target span{inset:12px;border-width:8px}.orb-target::after{inset:28px;border-width:0}.orb-target span{inset:5px auto auto 47px;height:46px}
  .character-card{display:block}.character-art{height:310px}.character-card>div:last-child{padding:22px}
  .phone-gameplay,.phone-progress{width:82vw}.floating-ticket{font-size:.82rem;padding:10px 14px}.progress-card{grid-template-columns:46px 1fr;padding:14px}.progress-num{width:42px;height:42px}
  .screenshot-track{grid-auto-columns:78vw;gap:16px}.gallery-controls{justify-content:center}.shot-card figcaption{font-size:.82rem}
  .mini-board{padding:24px 18px;min-height:380px;gap:12px;border-radius:28px}.mood-bubble{width:22vw;max-width:82px;height:22vw;max-height:82px;font-size:1.5rem}
  .final-cta{padding:92px 0 82px}.final-logo{width:210px}.store-buttons{display:grid;width:100%;max-width:320px}.store-btn{width:100%;text-align:center}
  .footer-grid{grid-template-columns:1fr}.footer-meta{grid-column:auto}.site-footer{text-align:center}.site-footer p{margin-inline:auto}.footer-links,.footer-meta{justify-items:center}
}

@media (max-width: 360px){
  .brand{width:82px}.nav-toggle{width:43px;height:43px}.hero-stage{min-height:420px}.phone-hero{width:56vw}.float-char-red{width:24vw}.float-char-blue{width:21vw}.float-char-purple{width:16vw}.booster-grid{grid-template-columns:1fr}.mini-board{padding:18px 12px;gap:8px}.mood-bubble{width:24vw;height:24vw}.steps li{grid-template-columns:50px 1fr;padding:14px}.steps li>span{width:44px;height:44px}
}

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