/* Magical PinPanion — home page. The app's Midnight night sky, gold, Fredoka / Figtree / Pacifico. */
@font-face { font-family:"Material Design Icons"; font-display:block;
  src:url("/fonts/mdi-subset.woff2") format("woff2"); }
:root { --sky1:#11183E; --sky2:#24336A; --sky3:#46317F; --gold:#C9A227; --gold-hi:#F4DA7A; --ink:#fff; --soft:#C8CFEE; --card:rgba(255,255,255,.07); --line:rgba(255,255,255,.14); }
* { box-sizing:border-box; }
html { background:var(--sky1); }
body { margin:0; min-height:100vh; color:var(--ink); font:17px/1.6 Figtree, system-ui, -apple-system, "Segoe UI", sans-serif; overflow-x:hidden; }
/* The sky stays put while the page scrolls (works on iPhone too, unlike background-attachment: fixed) */
body::before { content:""; position:fixed; inset:0; z-index:-1;
  background:radial-gradient(1200px 700px at 85% -10%, rgba(140,110,220,.45), transparent 60%), linear-gradient(165deg, var(--sky1) 0%, var(--sky2) 55%, var(--sky3) 100%); }
h1, h2, h3 { font-family:Fredoka, system-ui, sans-serif; font-weight:600; line-height:1.15; margin:0 0 10px; }
.mdi { font-family:"Material Design Icons"; font-style:normal; line-height:1; }
.spark { color:var(--gold-hi); }

/* Twinkling stars (placed by landing.js) and two shooting stars */
.stars { position:fixed; inset:0; pointer-events:none; z-index:0; }
.stars i { position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:.3; animation:tw 3.2s ease-in-out infinite; }
.stars i.big { width:3px; height:3px; box-shadow:0 0 6px 1px rgba(255,255,255,.8); }
.stars b { position:absolute; color:var(--gold-hi); font-size:14px; font-weight:400; animation:tw 2.6s ease-in-out infinite; text-shadow:0 0 8px rgba(244,218,122,.9); }
@keyframes tw { 0%,100% { opacity:.2; transform:scale(.8); } 50% { opacity:1; transform:scale(1.15); } }
.shoot { position:fixed; top:12%; left:-10%; width:140px; height:2px; z-index:0; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, transparent, #fff); border-radius:2px; transform:rotate(18deg); animation:shoot 9s linear infinite 2s; }
.shoot.two { top:34%; animation-delay:6.5s; animation-duration:11s; }
@keyframes shoot { 0% { transform:translate(0,0) rotate(18deg); opacity:0; } 2% { opacity:1; } 12% { transform:translate(120vw, 38vw) rotate(18deg); opacity:0; } 100% { opacity:0; } }
.burst { position:fixed; z-index:5; pointer-events:none; color:var(--gold-hi); font-size:16px; text-shadow:0 0 10px rgba(244,218,122,.9); animation:burst .9s ease-out forwards; }
@keyframes burst { to { transform:translate(var(--dx), var(--dy)) scale(.3) rotate(90deg); opacity:0; } }

/* Hero */
.hero { position:relative; z-index:1; text-align:center; padding:56px 20px 10px; max-width:980px; margin:0 auto; }
.logo { width:min(460px, 86vw); height:auto; filter:drop-shadow(0 6px 18px rgba(10,12,40,.55)); animation:float 6s ease-in-out infinite; }
@keyframes float { 50% { transform:translateY(-6px); } }
.tag { font-family:Pacifico, cursive; font-size:clamp(22px, 4vw, 30px); margin:10px 0 6px;
  background:linear-gradient(95deg, #E9C45A, #FFF3C4 45%, #E2B640 70%, #FFF3C4); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 rgba(10,12,40,.45)); padding:0 6px 6px; }
.lead { color:var(--soft); font-size:19px; max-width:600px; margin:0 auto 26px; }
.stores { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.store { display:inline-flex; align-items:center; gap:12px; min-width:218px; padding:12px 24px 12px 20px; border-radius:999px; text-decoration:none; text-align:left;
  transition:transform .15s, box-shadow .15s; box-shadow:0 8px 24px rgba(5,8,30,.35); }
.store .mdi { font-size:30px; }
.store small { display:block; font-size:12px; opacity:.85; line-height:1.1; }
.store b { display:block; font:600 21px/1.15 Fredoka, sans-serif; }
.store.apple { background:#000; color:#fff; border:1px solid rgba(255,255,255,.25); }
.store.play { background:var(--gold); color:#241B00; }
.store:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(5,8,30,.45), 0 0 0 3px rgba(244,218,122,.35); }
.free { color:var(--soft); font-size:15px; margin:18px 0 0; }
.free .spark { margin:0 6px; }

/* Phone */
.phone { width:270px; height:540px; margin:44px auto 0; border-radius:46px; padding:10px; background:#0B0F26; position:relative;
  box-shadow:0 0 0 2px rgba(255,255,255,.12), 0 30px 70px rgba(4,6,24,.6), 0 0 90px rgba(140,110,220,.35); transform:rotate(-3deg); }
.screen { position:relative; height:100%; border-radius:38px; overflow:hidden; padding:34px 16px 0; text-align:left;
  background:linear-gradient(170deg, #1B2553, #131830 60%); }
.notch { position:absolute; top:10px; left:50%; width:90px; height:22px; margin-left:-45px; border-radius:14px; background:#0B0F26; }
.mymark { display:flex; align-items:baseline; justify-content:center; gap:6px; margin:6px 0 10px; }
.mymark .st { color:#F2C230; font-size:11px; }
.mymark .my, .mymark .pp { background:linear-gradient(95deg, #E9C45A, #FFF3C4 45%, #E2B640 70%, #FFF3C4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mymark .my { font-family:Pacifico, cursive; font-size:24px; }
.mymark .pp { font:700 22px Fredoka, sans-serif; letter-spacing:-.4px; }
.counters { display:grid; grid-template-columns:repeat(3,1fr); background:#1E2544; border:1px solid #2E375F; border-radius:18px; padding:8px 0; }
.counters div { text-align:center; } .counters b { display:block; font:600 20px Fredoka, sans-serif; } .counters i { font-style:normal; font-size:11px; color:#A4AACA; }
.bar { height:7px; border-radius:9px; background:#262E52; margin:12px 4px; overflow:hidden; } .bar i { display:block; width:64%; height:100%; background:linear-gradient(90deg, var(--gold), var(--gold-hi)); }
.row-title { font:600 14px Fredoka, sans-serif; margin:4px 2px 8px; }
.pins { display:flex; justify-content:space-between; margin-bottom:12px; }
.disc { width:50px; height:50px; border-radius:50%; display:grid; place-items:center; border:3px solid var(--gold); box-shadow:inset 0 0 0 2px var(--gold-hi), 0 3px 6px rgba(0,0,0,.35); }
.disc .mdi { font-size:22px; color:#fff; }
.c1 { background:#E08A1E; } .c2 { background:#2B8FD6; } .c3 { background:#1C9C92; } .c4 { background:#8E44AD; }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tile { background:#1E2544; border:1px solid #2E375F; border-radius:16px; padding:10px; font:600 12px Figtree, sans-serif; display:flex; flex-direction:column; gap:4px; }
.tile .mdi { font-size:20px; color:var(--gold-hi); }
.tabbar { position:absolute; left:10px; right:10px; bottom:14px; display:flex; justify-content:space-around; background:#1E2544; border:1px solid #2E375F; border-radius:999px; padding:7px 4px;
  font-family:"Material Design Icons"; font-size:18px; color:#A4AACA; }
.tabbar .on { color:#fff; background:#262E52; border-radius:999px; padding:2px 12px; }

/* Features */
.features { position:relative; z-index:1; max-width:1040px; margin:0 auto; padding:70px 20px 20px; }
.features h2 { text-align:center; font-size:clamp(26px, 4vw, 34px); margin-bottom:26px; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.grid article { background:var(--card); border:1px solid var(--line); border-radius:26px; padding:22px 22px 18px; backdrop-filter:blur(6px);
  transition:transform .2s, border-color .2s; }
.grid article:hover { transform:translateY(-4px); border-color:rgba(244,218,122,.5); }
.grid .ic { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:rgba(201,162,39,.16); color:var(--gold-hi); font-size:26px; margin-bottom:12px; }
.grid h3 { font-size:20px; } .grid p { margin:0; color:var(--soft); font-size:15.5px; }
.indie { margin:34px auto 0; max-width:720px; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:26px; padding:20px 24px; }
.indie p { margin:0; color:var(--soft); font-size:15px; }
.foot { position:relative; z-index:1; text-align:center; font-size:14px; color:var(--soft); padding:40px 20px 50px; }
.foot a { color:var(--soft); margin:0 10px; }
.foot .copy { margin-top:10px; opacity:.7; }

@media (prefers-reduced-motion: reduce) { .stars i, .stars b, .shoot, .logo, .burst { animation:none !important; } .shoot { display:none; } }