/* AstroMilk shared styles: colour tokens, type, top bar, stars, buttons and chips.
   Used by /pages/astromilk/ and /pages/invest/. Page-specific styles stay inline in each page. */
:root{
  --space:#141a4a; --space-2:#232b6e; --nebula:#7b4fd6; --sky:#5ec8f2;
  --sun:#fcc83a; --sun-deep:#f5a524; --berry:#d23f6b; --berry-soft:#fde3ea;
  --choc:#6b4130; --choc-soft:#f3e6dc; --vanilla:#2f3a8f; --vanilla-soft:#e6e9fb;
  --green:#22b45a; --green-soft:#dff6e7; --amber:#f5a524; --red:#e5484d;
  --ink:#1b1f3b; --muted:#59607f; --paper:#fffaf0; --card:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Nunito,system-ui,sans-serif;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:Fredoka,Nunito,sans-serif;line-height:1.1;margin:0 0 .4em}
h2{font-size:clamp(2rem,4.5vw,3rem)}
h3{font-size:1.35rem}
p{margin:0 0 1em}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(20,26,74,.92);backdrop-filter:blur(8px);color:#fff}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.topbar .brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;letter-spacing:.02em}
.topbar .brand img{height:44px;width:auto}
.topbar nav{display:flex;gap:20px;align-items:center;font-weight:700;font-size:.95rem}
.topbar nav a{text-decoration:none;opacity:.9}
.topbar nav a:hover{opacity:1;color:var(--sun)}
.topbar .pill{background:var(--sun);color:var(--space);padding:8px 16px;border-radius:999px;opacity:1}
.topbar .pill:hover{color:var(--space);background:#ffd95e}
@media (max-width:720px){.topbar nav a:not(.pill){display:none}}
.stars,.stars::after{position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 20px 30px,#fff,transparent),
    radial-gradient(1.5px 1.5px at 120px 80px,#fff,transparent),
    radial-gradient(1px 1px at 200px 150px,#fff,transparent),
    radial-gradient(2px 2px at 320px 60px,#ffe9a8,transparent),
    radial-gradient(1px 1px at 260px 220px,#fff,transparent),
    radial-gradient(1.5px 1.5px at 60px 200px,#bfe9ff,transparent);
  background-size:360px 260px;opacity:.8}
.stars::after{content:"";background-size:520px 380px;background-position:90px 40px;opacity:.6;animation:twinkle 4s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.2}to{opacity:.85}}
.btn{display:inline-block;text-decoration:none;font-weight:800;padding:14px 26px;border-radius:999px;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.btn-sun{background:var(--sun);color:var(--space);box-shadow:0 8px 24px rgba(252,200,58,.35)}
.eyebrow{display:inline-block;font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;padding:6px 14px;border-radius:999px;margin-bottom:14px}
footer{background:#0b0e2c;color:rgba(255,255,255,.7);font-size:.85rem;padding:28px 0;text-align:center}
footer a{color:var(--sun)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}