/* Layout: sky-gradient hero band like the app's home screen, then calm content bands on a cool-white ground. */
:root{
  --sky-1:#86D3FE; --sky-2:#62BCFB; --sky-3:#6E8CF0; --sky-4:#7C6BE8;
  --star:#FFD84D;
  --bg:#F5F8FF; --surface:#FFFFFF; --line:#DCE3F5;
  --ink:#1E2350; --muted:#535A85; --accent:#4B5BDB; --accent-ink:#FFFFFF;
  --ok:#1F7A4D; --err:#B3261E;
  --display:"Nunito","Arial Rounded MT Bold","Helvetica Neue",Arial,sans-serif;
  --body:"Nunito Sans","Helvetica Neue",Arial,sans-serif;
  --r-lg:28px; --r-md:18px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#11142B; --surface:#1A1F3D; --line:#2C3360;
    --ink:#EEF1FF; --muted:#AEB5DD; --accent:#9AA6FF; --accent-ink:#11142B;
    --ok:#7FD6A6; --err:#FF9C94; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#11142B; --surface:#1A1F3D; --line:#2C3360;
  --ink:#EEF1FF; --muted:#AEB5DD; --accent:#9AA6FF; --accent-ink:#11142B;
  --ok:#7FD6A6; --err:#FF9C94; color-scheme:dark;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body)}
img{max-width:100%;display:block}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--star);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:900;line-height:1.1;text-wrap:balance;margin:0}
h2{font-size:clamp(28px,4vw,40px)}
h3{font-size:20px}
p{margin:0}

.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.band{padding-block:72px}
.lead{color:var(--muted);font-size:19px;max-width:60ch}
.eyebrow{font:800 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--bg)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
.brand{font:900 20px/1 var(--display);color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.brand span{color:var(--accent)}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a{font:700 15px/1 var(--display);color:var(--ink);text-decoration:none;padding:10px 14px;border-radius:999px}
.nav a:hover{background:var(--line)}

/* hero */
.hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(165deg,var(--sky-1) 0%,var(--sky-2) 38%,var(--sky-3) 72%,var(--sky-4) 100%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding-block:72px 0}
.hero-copy{display:grid;gap:22px;padding-bottom:72px;min-width:0}
.app-id{display:flex;align-items:center;gap:18px}
.app-id img{width:88px;height:88px;border-radius:22%;box-shadow:0 14px 30px rgba(40,40,140,.35)}
.hero h1{font-size:clamp(46px,7vw,80px);letter-spacing:-.02em;text-shadow:0 4px 0 rgba(70,60,190,.3)}
.hero h1 span{color:var(--star)}
.tagline{font:800 clamp(20px,2.4vw,26px)/1.3 var(--display)}
.hero p.sub{font-size:19px;max-width:44ch;opacity:.96}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:999px;font:800 16px/1 var(--display);text-decoration:none}
.pill-solid{background:#fff;color:#2E3A9E}
.pill-ghost{color:#fff;border:2.5px solid rgba(255,255,255,.7)}
.pill-ghost:hover{background:rgba(255,255,255,.15)}
.hero-shots{position:relative;align-self:end;height:520px;min-width:0}
.hero-shots .ipad{position:absolute;right:20px;bottom:-40px;width:320px;border-radius:30px;border:10px solid #fff;box-shadow:0 30px 60px rgba(30,25,120,.4);transform:rotate(3deg)}
.hero-shots .iphone{position:absolute;z-index:2;left:-10px;bottom:40px;width:360px;border-radius:22px;border:8px solid #fff;box-shadow:0 24px 50px rgba(30,25,120,.45);transform:rotate(-4deg)}
.cloud{position:absolute;background:#fff;opacity:.2;border-radius:999px;pointer-events:none}

/* donate */
.hero .donate-hero{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:20px;padding-block:72px}
.donate-hero .sub{max-width:52ch}
.donate-icon{width:96px;height:96px;border-radius:22%;box-shadow:0 14px 30px rgba(40,40,140,.35)}
.pill-coffee{background:var(--star);color:#3A2A00;min-height:56px;padding:14px 30px;font-size:18px;box-shadow:0 10px 24px rgba(40,30,120,.3)}
.pill-coffee:hover{filter:brightness(1.05)}
.fine{font-size:14px;opacity:.9}

/* promises */
.promises{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.promise{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px;display:grid;gap:8px;align-content:start}
.promise svg{width:30px;height:30px;color:var(--accent)}
.promise p{color:var(--muted);font-size:15px}

/* games */
.ages{display:grid;gap:40px;margin-top:36px}
.age-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.age-tag{font:900 15px/1 var(--display);background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:999px}
.age-head span.count{color:var(--muted);font-size:15px}
.games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.game{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px}
.game i{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#fff;font:900 18px/1 var(--display);font-style:normal}
.game h3{font-size:18px}
.game p{color:var(--muted);font-size:15px;line-height:1.5}
.g-pink{background:linear-gradient(160deg,#FF5FA2,#E0307B)}.g-blue{background:linear-gradient(160deg,#5C8BFF,#3D5BE0)}.g-orange{background:linear-gradient(160deg,#FF8A5C,#F05A3A)}
.g-red{background:linear-gradient(160deg,#FF7A59,#E8432E)}.g-green{background:linear-gradient(160deg,#3FD39A,#159C70)}.g-sky{background:linear-gradient(160deg,#3DC2FF,#1C8FE6)}
.g-purple{background:linear-gradient(160deg,#B26BFF,#7C3BE6)}.g-peach{background:linear-gradient(160deg,#FFA25C,#F5683A)}.g-mint{background:linear-gradient(160deg,#34D3A0,#12A57C)}.g-gold{background:linear-gradient(160deg,#FFC94A,#F29A1A)}

/* gallery */
.gallery{display:flex;gap:18px;overflow-x:auto;padding-block:8px 20px;scroll-snap-type:x mandatory;margin-top:28px}
.gallery figure{margin:0;flex:0 0 auto;scroll-snap-align:start;display:grid;gap:8px}
.gallery img{height:400px;width:auto;border-radius:22px;border:1px solid var(--line)}
.gallery figcaption{font:700 14px/1.2 var(--display);color:var(--muted)}

/* devices */
.devices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.fact{border-top:3px solid var(--accent);padding-top:14px;display:grid;gap:6px}
.fact b{font:900 18px/1.2 var(--display)}
.fact span{color:var(--muted);font-size:15px}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.contact-grid > div{min-width:0}
form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:grid;gap:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:6px;min-width:0}
label{font:800 14px/1.2 var(--display)}
input,select,textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;width:100%}
textarea{min-height:150px;resize:vertical}
.hp{position:absolute;left:-9999px}
button.send{justify-self:start;min-height:48px;padding:12px 26px;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:900 16px/1 var(--display);cursor:pointer}
button.send[disabled]{opacity:.6;cursor:wait}
.status{font-size:15px;font-weight:700}
.status.ok{color:var(--ok)} .status.err{color:var(--err)}

/* policy page */
.policy{max-width:720px}
.policy h1{font-size:clamp(36px,5vw,52px)}
.policy .date{color:var(--muted);margin-top:10px}
.policy h2{font-size:26px;margin-top:40px;margin-bottom:12px}
.policy p,.policy li{max-width:65ch}
.policy p + p{margin-top:12px}
.policy ul{padding-left:22px;display:grid;gap:8px;margin:0}

/* footer */
.site-foot{border-top:1px solid var(--line);padding-block:32px;color:var(--muted);font-size:15px}
.site-foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-foot nav{display:flex;gap:18px;flex-wrap:wrap}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:12px}
  .hero-copy{padding-bottom:12px}
  .hero-shots{height:400px}
  .hero-shots .ipad{width:250px;right:4%;bottom:-30px}
  .hero-shots .iphone{width:270px;bottom:60px}
  .promises{grid-template-columns:repeat(2,1fr)}
  .games{grid-template-columns:repeat(2,minmax(0,1fr))}
  .devices{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:520px){
  .band{padding-block:52px}
  .promises{grid-template-columns:1fr}
  .games{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .hero-shots{height:330px}
  .hero-shots .ipad{width:190px;right:0}
  .hero-shots .iphone{width:220px;left:0;bottom:50px}
  .gallery img{height:320px}
  form{padding:20px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}