:root{
  --bg:#040713;
  --panel:#0b1430;
  --panel2:#101b3c;
  --text:#f7f8ff;
  --muted:#b9c2dc;
  --gold:#ffc52f;
  --orange:#ff8a1f;
  --purple:#b15cff;
  --green:#54d68c;
  --blue:#3aa7ff;
  --border:#2f3d67;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  background:
    radial-gradient(circle at 20% 10%,rgba(118,42,255,.18),transparent 32%),
    radial-gradient(circle at 85% 16%,rgba(0,145,255,.16),transparent 30%),
    linear-gradient(180deg,#030611,#081020 55%,#030611);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
.stars{
  position:fixed;inset:0;z-index:-1;opacity:.62;
  background-image:
    radial-gradient(circle,#fff 1px,transparent 1px),
    radial-gradient(circle,#62c0ff 1px,transparent 1px),
    radial-gradient(circle,#ffe07a 1px,transparent 1px);
  background-size:120px 120px,190px 190px,270px 270px;
  animation:twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle{to{opacity:.88}}
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px clamp(18px,5vw,72px);
  background:rgba(3,6,17,.84);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
}
.logo{font-family:"Space Grotesk";font-weight:700}
.logo span{color:var(--gold);font-size:1.45rem}
.topbar nav{display:flex;gap:24px}
.topbar nav a{color:#dbe3f5;font-size:.92rem}
.small{padding:9px 14px}
.gold,.outline{
  border-radius:999px;padding:12px 18px;font-weight:800;cursor:pointer
}
.gold{
  border:0;color:#121008;
  background:linear-gradient(90deg,var(--gold),var(--orange));
  box-shadow:0 10px 28px rgba(255,176,29,.24)
}
.outline{
  background:transparent;color:white;border:1px solid var(--gold)
}
.hero{
  position:relative;min-height:790px;display:grid;place-items:center;
  padding:100px 24px 85px;overflow:hidden
}
.hero::after{
  content:"";position:absolute;width:135%;height:340px;left:-17.5%;bottom:-230px;
  border-radius:50%;border-top:4px solid rgba(70,184,255,.92);
  box-shadow:0 -24px 80px rgba(0,127,255,.45);
  background:radial-gradient(ellipse at top,rgba(0,80,170,.68),transparent 70%)
}
.sun{
  position:absolute;width:340px;height:340px;left:-145px;top:130px;border-radius:50%;
  background:radial-gradient(circle at 70% 50%,#fffbd2 0 4%,#ffc943 12%,#ff7a18 30%,#b21b00 58%,transparent 69%);
  filter:drop-shadow(0 0 50px #ff8a1f);animation:float 7s ease-in-out infinite
}
.planet{
  position:absolute;width:92px;height:92px;right:9%;top:145px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#89ccff,#294678 45%,#071022 80%);
  box-shadow:inset -12px -12px 25px #0009,0 0 30px #2e94ff55;animation:float 8s ease-in-out infinite
}
.rocket{
  position:absolute;right:9%;top:30%;font-size:4rem;
  filter:drop-shadow(0 0 14px #3d8fff);animation:rocket 9s ease-in-out infinite
}
@keyframes float{50%{transform:translateY(-15px)}}
@keyframes rocket{50%{transform:translate(-28px,-22px) rotate(-6deg)}}
.hero-inner{position:relative;z-index:2;max-width:1020px;text-align:center}
.eyebrow{color:var(--gold);font-weight:800;letter-spacing:.15em;font-size:.83rem}
.eyebrow.purple{color:#d689ff}
.eyebrow.green{color:#75eba9}
.eyebrow.orange{color:#ff7435}
h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif}
h1{
  margin:.2em 0 0;font-size:clamp(3.1rem,7vw,6.7rem);
  line-height:.95;letter-spacing:-.055em
}
.hero h2{
  margin:.15em 0 .55em;font-size:clamp(2rem,4vw,3.8rem);
  color:transparent;background:linear-gradient(90deg,var(--gold),var(--orange));
  -webkit-background-clip:text;background-clip:text
}
.hero-copy{max-width:760px;margin:auto;color:var(--muted);font-size:1.1rem;line-height:1.7}
.hero-question{margin-top:40px}
.hero-question>p{font-size:1.3rem;font-weight:800}
.hero-actions{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:16px;margin-top:18px
}
.hero-actions>*{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:22px 16px;border-radius:20px;cursor:pointer;
  color:white;border:1px solid #405387;
  background:linear-gradient(145deg,#101b3d,#09132d);
  transition:.2s
}
.hero-actions>*:hover{transform:translateY(-6px);border-color:var(--gold)}
.hero-actions span{font-size:2.2rem}
.hero-actions small{color:var(--muted)}
.panel{
  width:min(1160px,calc(100% - 34px));
  margin:0 auto 28px;padding:48px 28px;
  border:1px solid var(--border);border-radius:24px;
  background:linear-gradient(180deg,rgba(13,23,52,.95),rgba(7,16,37,.97));
  box-shadow:0 20px 70px rgba(0,0,0,.28)
}
.section-heading{text-align:center;margin-bottom:28px}
.section-heading h2{font-size:clamp(2rem,4vw,3.2rem);margin:.2em 0}
.section-heading>p:last-child{color:var(--muted)}
.sol-guide{
  max-width:900px;margin:auto;
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;
  padding:22px;border-radius:20px;
  border:1px solid #5267a8;
  background:linear-gradient(135deg,#111d42,#0a1532)
}
.sol-orb{
  width:105px;height:105px;border-radius:50%;
  display:grid;place-items:center;font-size:3rem;
  background:radial-gradient(circle,#fff5b8,#ffc52f 35%,#ff7b1a 68%);
  box-shadow:0 0 35px rgba(255,181,32,.45);
  animation:orbPulse 2.8s ease-in-out infinite
}
@keyframes orbPulse{50%{transform:scale(1.04);box-shadow:0 0 55px rgba(255,181,32,.7)}}
.sol-guide h3{margin:0 0 5px}
.sol-guide p{margin:0 0 10px;color:#d8e0f5}
.listen-prompt{
  border:1px solid var(--gold);border-radius:999px;padding:9px 13px;
  background:#17120a;color:#ffe48c;font-weight:800;cursor:pointer
}
.input-shell{position:relative;max-width:900px;margin:18px auto 0}
.input-shell textarea{
  width:100%;min-height:150px;padding:20px 86px 20px 20px;
  border-radius:18px;border:1px solid #51659d;
  background:#081329;color:white;resize:vertical;outline:none
}
.mic-button{
  position:absolute;right:17px;top:50%;transform:translateY(-50%);
  width:58px;height:58px;border-radius:50%;border:2px solid #d38aff;
  background:linear-gradient(145deg,#9c3cff,#187cff);color:white;
  font-size:1.8rem;cursor:pointer;box-shadow:0 0 25px rgba(118,70,255,.6)
}
.mic-button.listening{animation:listenPulse .75s ease-in-out infinite alternate;background:linear-gradient(145deg,#ff477e,#ff8a1f)}
@keyframes listenPulse{to{transform:translateY(-50%) scale(1.08);box-shadow:0 0 45px rgba(255,98,80,.9)}}
.status{text-align:center;color:#ffe082;font-weight:700;min-height:24px;margin:9px 0}
.audience-grid{
  max-width:900px;margin:15px auto 0;
  display:flex;justify-content:center;flex-wrap:wrap;gap:10px
}
.audience-grid button{
  padding:11px 14px;border-radius:999px;border:1px solid #52618e;
  background:#111b3a;color:white;cursor:pointer;font-weight:700
}
.audience-grid button.active{border-color:var(--gold);background:#34260b;color:#fff4bd}
.builder-actions{
  max-width:900px;margin:20px auto 0;display:flex;justify-content:flex-end;gap:12px
}
.builder-actions select{
  border-radius:999px;padding:11px 15px;
  background:#111b3a;color:white;border:1px solid #4d5d89
}
.roadmap{
  max-width:900px;margin:24px auto 0;padding:24px;
  border-radius:18px;background:#101c3d;border:1px solid #4c65a3
}
.roadmap h3{color:var(--gold);margin-top:0}
.roadmap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.step{
  padding:18px;border-radius:14px;
  background:#0a1430;border:1px solid #334476
}
.step strong{color:white}
.step p{color:var(--muted);line-height:1.55}
.hidden{display:none}
.garden-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px
}
.seed-card{
  border:1px solid #35507d;border-radius:18px;overflow:hidden;
  background:#0b1530
}
.seed-art{
  height:150px;display:grid;place-items:center;font-size:4rem;
  background:linear-gradient(135deg,#173f4d,#224f2c)
}
.seed-body{padding:18px}
.seed-body p{color:var(--muted);line-height:1.55}
.seed-meta{font-size:.8rem;color:#85e2ac}
.garden-actions{text-align:center;margin-top:24px}
.mission,.promise{
  display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center
}
.mission-icon,.promise-icon{
  width:110px;height:110px;border-radius:50%;
  display:grid;place-items:center;font-size:4rem;font-weight:800
}
.mission-icon{color:var(--gold);border:1px solid #806b22;background:#1d1a13}
.promise{background:linear-gradient(120deg,#fff5de,#ffe2aa);color:#222}
.promise-icon{border:2px solid #f28527;background:white}
.mission h2,.promise h2{font-size:clamp(2rem,4vw,3.1rem);margin:.15em 0}
.mission h2 span{color:var(--gold)}
.big-question{font-size:1.2rem;font-weight:800}
.north-star{text-align:center}
.north-star h2{font-size:2.5rem}
.north-star p{font-size:1.15rem}
footer{text-align:center;padding:55px 24px 80px;color:#c8d0e9}
.tagline{color:var(--gold);letter-spacing:.3em;font-weight:800}
.legal{max-width:850px;margin:16px auto;color:#909bb8;font-size:.9rem;line-height:1.6}
.footer-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.footer-links a{color:var(--gold)}
dialog{border:0;background:transparent}
.modal{
  width:min(470px,90vw);padding:28px;border-radius:22px;
  background:#0b1430;color:white;border:1px solid #3d4f82;
  box-shadow:0 28px 90px #000a
}
.modal label{display:grid;gap:7px;margin:14px 0;color:#d8e0f6}
.modal input,.modal textarea,.modal select{
  width:100%;padding:13px;border-radius:12px;
  border:1px solid #465987;background:#071025;color:white
}
.close{float:right;background:none;border:0;color:white;font-size:1.8rem;cursor:pointer}
.wide{width:100%}
@media(max-width:850px){
  .topbar nav{display:none}
  .hero-actions{grid-template-columns:1fr}
  .garden-grid{grid-template-columns:1fr 1fr}
  .roadmap-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .topbar{padding:14px 16px}
  .topbar .small{display:none}
  .hero{min-height:760px;padding-top:85px}
  .sun{width:230px;height:230px;left:-135px}
  .planet{width:58px;height:58px;right:4%}
  .rocket{font-size:2.5rem;right:3%}
  .panel{padding:34px 18px}
  .sol-guide{grid-template-columns:1fr;text-align:center}
  .sol-orb{margin:auto}
  .builder-actions{flex-direction:column}
  .builder-actions>*{width:100%}
  .garden-grid{grid-template-columns:1fr}
  .mission,.promise{grid-template-columns:1fr}
}
