/* Home page only. Tokens, header, footer and store buttons come from shared.css. */

.container{max-width:1180px; margin:0 auto; padding:0 28px;}
section{position:relative;}
.kicker{font-size:.8rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--terra);}
.section-head{max-width:720px; margin:0 auto 54px; text-align:center;}
.section-head h2{font-size:clamp(2.1rem,4.6vw,3.3rem); line-height:1.05; margin:14px 0 16px;}
.section-head p{font-size:1.12rem; color:var(--ink-2); margin:0;}

/* ---------- phone frames + UI chips ---------- */
.phone{position:relative; width:var(--w,260px); padding:9px; border-radius:calc(var(--w,260px)*.17); background:#0F1117; box-shadow:0 0 0 2px #2B2E38 inset, 0 50px 80px rgba(20,32,51,.3), 0 14px 28px rgba(20,32,51,.2);}
.phone img{width:100%; height:auto; border-radius:calc(var(--w,260px)*.145); background:#fff;}
.phone::before{content:""; position:absolute; top:calc(var(--w,260px)*.034); left:50%; width:30%; height:calc(var(--w,260px)*.066); margin-left:-15%; border-radius:99px; background:#07080B; z-index:2;}
.chip{position:absolute; border-radius:22px; border:5px solid #fff; background:#fff; box-shadow:0 30px 50px rgba(0,0,0,.28), 0 8px 16px rgba(0,0,0,.18); overflow:hidden; z-index:5;}
.chip img{width:100%;}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--r,0deg));}50%{transform:translateY(-12px) rotate(var(--r,0deg));}}
.float{animation:float 6s ease-in-out infinite; transform:rotate(var(--r,0deg));}
.float.d2{animation-delay:-2s;} .float.d3{animation-delay:-4s;}

/* ---------- hero ---------- */
.hero{padding:72px 0 96px; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.02fr 1fr; gap:36px; align-items:center;}
.eyebrow{display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 16px 8px 10px; font-size:.86rem; font-weight:700; text-decoration:none; box-shadow:0 6px 16px rgba(20,32,51,.08);}
.eyebrow b{background:var(--mauve); color:#fff; border-radius:999px; padding:4px 10px; font-size:.7rem; letter-spacing:.1em;}
.hero h1{font-size:clamp(2.9rem,6.6vw,5.2rem); line-height:.98; margin:26px 0 22px; letter-spacing:-.035em;}
.hero h1 em{font-style:italic; color:var(--terra);}
.lede{font-size:1.22rem; line-height:1.55; color:var(--ink-2); max-width:520px; margin:0 0 32px;}
.store-row{display:flex; flex-wrap:wrap; gap:14px;}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:34px; font-size:.92rem; color:var(--muted);}
.hero-meta span{display:inline-flex; align-items:center; gap:8px;}
.hero-meta i{width:8px; height:8px; border-radius:50%; background:var(--terra);}
.hero-meta span:nth-child(2) i{background:var(--teal);}
.hero-meta span:nth-child(3) i{background:var(--mauve);}

.cluster{position:relative; height:640px;}
.cluster .phone{position:absolute;}
.cluster .p1{--w:250px; --r:-7deg; left:0; top:70px;}
.cluster .p2{--w:270px; --r:0deg; left:calc(50% - 135px); top:6px; z-index:3;}
.cluster .p3{--w:250px; --r:7deg; right:0; top:84px;}
.cluster .chip.c1{width:250px; left:-26px; top:430px; --r:-5deg;}
.cluster .chip.c2{width:230px; right:-14px; top:34px; --r:6deg;}
.cluster .chip.c3{width:200px; left:22%; top:560px; --r:3deg; z-index:6;}
.hero-glow{position:absolute; inset:auto -10% -10% auto; width:70%; height:70%; background:radial-gradient(closest-side, rgba(217,83,47,.22), transparent); filter:blur(30px); z-index:0; pointer-events:none;}

/* ---------- games ---------- */
.games{padding:30px 0 110px;}
.game{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center; min-height:560px; border-radius:48px; padding:56px 64px 0; margin-bottom:28px; overflow:hidden; color:#fff; background:var(--c);}
.game.math{--c:var(--terra);} .game.word{--c:var(--teal);} .game.hunt{--c:var(--mauve);}
.game::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 35%, rgba(0,0,0,.24)); pointer-events:none;}
.game .glyph{position:absolute; font-family:var(--display); font-weight:700; color:rgba(255,255,255,.1); line-height:1; pointer-events:none; white-space:nowrap;}
.game .glyph.dk{color:rgba(0,0,0,.1);}
.game .copy{position:relative; z-index:3; padding-bottom:56px;}
.game .tag{display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:8px 16px; border-radius:999px; background:rgba(255,255,255,.18);}
.game .tag.new{background:#fff; color:var(--mauve);}
.game h3{font-size:clamp(2.2rem,4.4vw,3.4rem); line-height:1.02; margin:22px 0 16px;}
.game h3 em{font-style:italic; color:var(--cream-hi);}
.game p{font-size:1.1rem; line-height:1.6; color:rgba(255,255,255,.9); max-width:460px; margin:0 0 20px;}
.game ul{list-style:none; padding:0; margin:0; display:grid; gap:10px; font-weight:500;}
.game li{display:flex; align-items:center; gap:12px; color:#fff; font-size:1rem;}
.game li::before{content:""; flex:none; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat;}
.game .art{position:relative; z-index:2; align-self:end; height:100%; display:flex; justify-content:center; align-items:flex-end;}
.game .art .phone{--w:330px; margin-bottom:-120px; transform:rotate(var(--r,0deg));}
.game .art .chip{z-index:6;}
.game.flip .copy{order:2;} .game.flip .art{order:1;}

/* ---------- features ---------- */
.features{padding:20px 0 110px;}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.card{background:var(--paper-2); border:1px solid var(--line); border-radius:30px; padding:34px 30px 32px; transition:transform .25s, box-shadow .25s;}
.card:hover{transform:translateY(-4px); box-shadow:0 24px 44px rgba(20,32,51,.1);}
.card .ico{width:54px; height:54px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:var(--t,#D9532F); margin-bottom:22px;}
.card .ico svg{width:28px; height:28px; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.card h3{font-size:1.4rem; margin:0 0 10px;}
.card p{margin:0; color:var(--ink-2); line-height:1.6; font-size:1rem;}
.card:nth-child(2) .ico{--t:var(--teal);} .card:nth-child(3) .ico{--t:var(--mauve);}
.card:nth-child(4) .ico{--t:var(--mauve);} .card:nth-child(5) .ico{--t:var(--terra);} .card:nth-child(6) .ico{--t:var(--teal);}

/* ---------- league split ---------- */
.league{padding:0 0 110px;}
.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; background:var(--paper-2); border:1px solid var(--line); border-radius:48px; padding:64px 64px 0; overflow:hidden;}
.split h2{font-size:clamp(2rem,4vw,3rem); line-height:1.05; margin:14px 0 18px;}
.split p{font-size:1.1rem; color:var(--ink-2); line-height:1.6; margin:0 0 24px;}
.stats{display:grid; grid-template-columns:repeat(3,auto); gap:26px; justify-content:start; margin-bottom:56px;}
.stat b{display:block; font-family:var(--display); font-size:2.6rem; line-height:1; color:var(--terra);}
.stat span{font-size:.88rem; color:var(--muted);}
.split .art{position:relative; display:flex; justify-content:center; align-items:flex-end; height:560px;}
.split .art .phone{--w:300px; margin-bottom:-90px;}
.split .art .chip{width:250px; right:-10px; top:90px; --r:5deg;}
.split .art .chip.b{width:230px; left:-6px; top:330px; right:auto; --r:-5deg;}

/* ---------- steps ---------- */
.steps{padding:0 0 110px;}
.step-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:s;}
.step{border-top:3px solid var(--ink); padding-top:26px;}
.step b{font-family:var(--display); font-size:4.4rem; line-height:1; color:var(--terra); display:block; margin-bottom:14px; font-style:italic;}
.step h3{font-size:1.5rem; margin-bottom:10px;}
.step p{margin:0; color:var(--ink-2); line-height:1.6; font-size:1.02rem; max-width:340px;}

/* ---------- faq ---------- */
.faq{padding:0 0 110px;}
.faq-list{max-width:820px; margin:0 auto; display:grid; gap:12px;}
details{background:var(--paper-2); border:1px solid var(--line); border-radius:22px; padding:0 26px;}
summary{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; font-family:var(--display); font-size:1.2rem; font-weight:700;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+"; flex:none; width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:1.4rem; font-weight:500; transition:transform .25s, background .25s;}
details[open] summary::after{transform:rotate(45deg); background:var(--terra);}
details p{margin:0 0 24px; color:var(--ink-2); line-height:1.65; font-size:1.02rem;}

/* ---------- download ---------- */
.download{padding:0 0 110px;}
.cta{position:relative; overflow:hidden; border-radius:56px; background:var(--terra); color:#fff; text-align:center; padding:96px 28px 92px;}
.cta::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40%, rgba(0,0,0,.22)); pointer-events:none;}
.cta .glyph{position:absolute; font-family:var(--display); font-weight:700; color:rgba(255,255,255,.11); line-height:1; pointer-events:none;}
.cta>*{position:relative; z-index:2;}
.cta h2{font-size:clamp(2.6rem,6vw,4.8rem); line-height:1; margin:0 0 18px;}
.cta h2 em{font-style:italic; color:var(--cream-hi);}
.cta p{font-size:1.2rem; color:rgba(255,255,255,.92); margin:0 0 34px;}
.cta .store-row{justify-content:center;}
.tiles{display:flex; justify-content:center; gap:10px; margin-bottom:34px;}
.tiles span{width:58px; height:68px; border-radius:16px; background:#fff; color:var(--terra); font-family:var(--display); font-weight:700; font-size:2rem; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 0 rgba(0,0,0,.12), 0 20px 30px rgba(0,0,0,.2); animation:hop 1.6s ease-in-out infinite;}
@keyframes hop{0%,100%{transform:translateY(0);}40%{transform:translateY(-14px);}}
.tiles span:nth-child(2){animation-delay:.12s;} .tiles span:nth-child(3){animation-delay:.24s;} .tiles span:nth-child(4){animation-delay:.36s;} .tiles span:nth-child(5){animation-delay:.48s;}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero{padding:44px 0 70px;}
  .hero-grid{grid-template-columns:1fr; gap:60px;}
  .lede{max-width:none;}
  .cluster{height:560px; max-width:560px; margin:0 auto; width:100%;}
  .cluster .p1,.cluster .p3{--w:210px;} .cluster .p2{--w:230px; left:calc(50% - 115px);}
  .cluster .chip.c1{width:200px; top:380px; left:-10px;} .cluster .chip.c2{width:190px; right:-6px;} .cluster .chip.c3{display:none;}
  .game{grid-template-columns:1fr; padding:44px 30px 0; min-height:0; border-radius:36px; gap:0;}
  .game .copy{padding-bottom:36px;} .game.flip .copy,.game.flip .art{order:initial;}
  .game .art{height:400px;} .game .art .phone{--w:270px; margin-bottom:-100px;}
  .grid,.step-grid{grid-template-columns:1fr 1fr;}
  .split{grid-template-columns:1fr; padding:44px 30px 0; border-radius:36px; gap:30px;}
  .stats{margin-bottom:10px;} .split .art{height:480px;}
}
@media (max-width:620px){
  .container{padding:0 20px;}
  .grid,.step-grid{grid-template-columns:1fr;}
  .cluster{height:480px;}
  .cluster .p1,.cluster .p3{--w:170px;} .cluster .p2{--w:190px; left:calc(50% - 95px);}
  .cluster .chip{display:none;}
  .cta{border-radius:36px; padding:64px 20px;}
  .tiles span{width:46px; height:56px; font-size:1.6rem;}
  .stats{grid-template-columns:repeat(3,1fr); gap:12px;} .stat b{font-size:2rem;}
  .split .art .chip{display:none;}
  .game .art .chip{display:none;}
}