:root{
  --bg:#0b1020;
  --ink:#0e1a2b;
  --panel:#101a31;
  --text:#eff6ff;
  --muted:#b6c3d6;
  --brand:#4f46e5;
  --brand-2:#22c55e;
  --card:#0f172a;
  --ring: rgba(79,70,229,.45);
}

.hero{
  background: radial-gradient(80vw 50vw at 80% -10%, rgba(79,70,229,.25), transparent 60%),
              radial-gradient(60vw 40vw at -10% 10%, rgba(34,197,94,.20), transparent 60%),
              var(--bg);
  color: var(--text);
  padding: clamp(2rem, 5vw, 5rem) 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero__inner{
  max-width: 1120px; margin: 0 auto;
  display: grid; gap: 2rem;
  grid-template-columns: 1.2fr 1fr;
}
@media (max-width: 900px){ .hero__inner{ grid-template-columns: 1fr; } }

.hero__copy h1{
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.1; margin: 0 0 .75rem;
}
.hero__copy p{
  color: var(--muted); font-size: 1.05rem; max-width: 50ch;
}
.hero__actions{ margin-top: 1rem; display: flex; gap: .75rem; flex-wrap: wrap; }

.btn{
  display:inline-block; padding:.8rem 1.1rem; border-radius: .75rem;
  text-decoration:none; font-weight:600; border:1px solid transparent;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn:focus-visible{ outline: 3px solid var(--ring); outline-offset: 2px; }
.btn--primary{ background: linear-gradient(135deg, var(--brand), #6d28d9); color:white; }
.btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 8px 24px -8px var(--ring); }
.btn--ghost{ background: transparent; color: var(--text); border-color: rgba(255,255,255,.15);}
.btn--ghost:hover{ border-color: rgba(255,255,255,.35); transform: translateY(-1px); }

.trust-badges{ margin: 1rem 0 0; padding: 0; list-style: none; display:flex; gap:1rem; flex-wrap:wrap; color:var(--muted); font-size:.95rem;}
.trust-badges li::before{ content:"✓ "; color: var(--brand-2); }

.hero__art{ position: relative; min-height: 320px; }
.orb{ position:absolute; border-radius:50%; filter: blur(20px); opacity:.65; }
.orb--1{ width:180px; height:180px; background: rgba(79,70,229,.55); top: 8%; left: 14%; animation: float 8s ease-in-out infinite; }
.orb--2{ width:120px; height:120px; background: rgba(34,197,94,.55); bottom: 12%; right: 10%; animation: float 10s ease-in-out infinite reverse; }
.orb--3{ width:90px; height:90px; background: rgba(59,130,246,.45); top: 55%; right: 35%; animation: float 12s ease-in-out infinite; }
@keyframes float { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

.mascot{ position:absolute; inset:auto 0 0 auto; right: 8%; bottom: 8%; width: 220px; height: 220px; background: var(--panel);
         border-radius: 24px; border:1px solid rgba(255,255,255,.06); box-shadow: 0 10px 40px -12px rgba(0,0,0,.5); }
.mascot__head{ position:absolute; width:150px; height:110px; background:#1f2a44; border-radius: 60% 60% 45% 45%/ 60% 60% 40% 40%; top: 28px; left: 35px; }
.mascot__eye{ position:absolute; width:16px; height:16px; background:white; border-radius:50%; top: 68px; }
.mascot__eye--left{ left: 70px; }
.mascot__eye--right{ left: 110px; }
.mascot__smile{ position:absolute; width:54px; height:24px; border-bottom: 4px solid #22c55e; border-radius: 0 0 54px 54px; top: 98px; left: 83px; }

.features{ background: linear-gradient(180deg, var(--bg), #0b1225 60%, #0b1225); color: var(--text); padding: 3rem 1.25rem; }
.features h2, .topics h2, .cta h2{ text-align:center; font-size: clamp(1.6rem, 2.5vw, 2.2rem); margin: 0 0 1.25rem; }
.features__grid{ max-width: 1120px; margin: 0 auto; display:grid; gap:1rem; grid-template-columns: repeat(4,1fr); }
@media (max-width: 1000px){ .features__grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .features__grid{ grid-template-columns: 1fr;} }

.card{ background: var(--card); border: 1px solid rgba(255,255,255,.06); border-radius: 16px; padding: 1rem; }
.card h3{ margin:.2rem 0 .4rem; font-size:1.1rem; }
.card p{ color: var(--muted); font-size:.98rem; line-height:1.45; }

.topics{ background: #0b1225; padding: 2.5rem 1.25rem; }
.topics__grid{ max-width: 1120px; margin:0 auto; display:grid; gap:.75rem; grid-template-columns: repeat(6,1fr);}
@media (max-width: 1100px){ .topics__grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 560px){ .topics__grid{ grid-template-columns: repeat(2,1fr);} }

.topic{ background: var(--panel); color:var(--text); padding:.9rem 1rem; border-radius:12px; text-decoration:none; border:1px solid rgba(255,255,255,.06);}
.topic:hover{ border-color: rgba(255,255,255,.22); transform: translateY(-1px); transition: .15s ease; }

.cta{ background: linear-gradient(180deg, #0b1225, var(--bg)); color: var(--text); padding: 3rem 1.25rem 4rem; text-align:center; }
.cta p{ color: var(--muted); margin: .25rem auto 1rem; max-width: 60ch; }
.cta__actions{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }

/* Mascot image */
.hero__art { position: relative; min-height: 320px; display:flex; align-items:center; justify-content:center; }
.hero__mascot{ width: min(280px, 80%); height:auto; z-index:1; filter: drop-shadow(0 12px 28px rgba(0,0,0,.35)); }

/* Parents section */
.parents{ background:#081022; color:var(--text); padding: 2.8rem 1.25rem; border-top:1px solid rgba(255,255,255,.06); }
.parents__inner{ max-width:1120px; margin:0 auto; }
.parents h2{ text-align:center; font-size: clamp(1.6rem, 2.5vw, 2.2rem); margin: 0 0 1.25rem; }
.parents__grid{ display:grid; gap:1rem; grid-template-columns: repeat(3,1fr); }
@media (max-width: 1000px){ .parents__grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .parents__grid{ grid-template-columns: 1fr;} }
.p-card{ background: var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:1rem; }
.p-card h3{ margin:.2rem 0 .35rem; font-size:1.05rem; }
.p-card p{ color:var(--muted); line-height:1.5; }
.parents__footnote{ color: var(--muted); text-align:center; margin-top: .8rem; font-size:.95rem; }

body{ opacity:0; transition:opacity .4s ease; }
body.loaded{ opacity:1; }

/* ==== HERO — mobile/tablet polish (last-wins overrides) ==== */

/* Never sideways scroll on small screens */
html, body, .app-shell { overflow-x: hidden; }

/* Tablet and down */
@media (max-width: 900px){
  .hero{
    padding-top: calc(1rem + env(safe-area-inset-top,0px));
    padding-bottom: 1.75rem;
    padding-left: 1rem; padding-right: 1rem;
  }
  .hero__inner{
    grid-template-columns: 1fr;     /* stack */
    gap: 1rem;
  }
  .hero__copy h1{
    font-size: clamp(1.8rem, 5.6vw, 2.3rem);
    line-height: 1.15;
    margin: 0 0 .5rem;
    letter-spacing: .1px;
  }
  .hero__copy p{
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 .75rem;
    max-width: 48ch;
  }
  .hero__actions{ gap: .5rem; }
  .btn{ padding: .7rem 1rem; }

  /* art quieter/smaller */
  .hero__art{ min-height: 210px; margin-top: .25rem; }
  .hero__mascot{ width: 220px; max-width: 70%; }
  .orb--1{ width:140px; height:140px; }
  .orb--2{ width:100px; height:100px; }
  .orb--3{ display:none; }

  /* badges wrap neatly */
  .trust-badges{ font-size: .95rem; gap: .6rem .9rem; }
}

/* Phones */
@media (max-width: 560px){
  .hero{
    padding-top: calc(.85rem + env(safe-area-inset-top,0px));
    padding-bottom: 1.25rem;
  }
  .hero__copy h1{
    font-size: clamp(1.55rem, 7.2vw, 1.9rem);
    margin-bottom: .4rem;
  }
  .hero__copy p{ font-size: .98rem; }
  .hero__actions{
    flex-direction: column;         /* full-width tap targets */
    align-items: stretch;
  }
  .btn{ width: 100%; text-align: center; }
  .trust-badges{ font-size: .9rem; }
  .hero__art{ min-height: 180px; }
  .hero__mascot{ width: 190px; max-width: 64%; }
}

/* Very small phones */
@media (max-width: 380px){
  .hero{ padding-top: calc(.65rem + env(safe-area-inset-top,0px)); }
  .hero__copy h1{ font-size: 1.45rem; }
  .hero__copy p{ font-size: .95rem; }
  .trust-badges{ display: grid; grid-template-columns: 1fr; gap: .4rem; }
}

/* Reduce GPU work on low-end devices */
@media (max-width: 560px), (prefers-reduced-motion: reduce){
  .orb{ animation: none; filter: blur(14px); opacity: .55; }
}