*,*::before,*::after{padding:0;box-sizing:border-box}
:root{
  --bg:#060a14;--bg2:#0c1222;--bg3:#111b30;
  --cyan:#00ccff;--purple:#8855ff;--gold:#ffcc33;--green:#44ff88;--red:#ff4466;--pink:#ff66aa;--orange:#ff8844;
  --text:#f0e8ff;--muted:#8899bb;--border:#1e2d48;
}
html{scroll-behavior:smooth;margin:0}
body{font-family:'Space Grotesk',sans-serif;background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden;margin:0}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
img{display:block;max-width:100%}
h1,h2,h3{font-family:'Orbitron',sans-serif;letter-spacing:.08em;margin:0}
p{margin:0}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--cyan),var(--purple));border-radius:3px}

/* ---- HERO ---- */
.hero{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:2rem;position:relative;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 50% 60% at 30% 80%,rgba(255,60,20,.12) 0%,transparent 50%),
    radial-gradient(ellipse 40% 50% at 70% 70%,rgba(255,100,30,.08) 0%,transparent 50%),
    radial-gradient(ellipse 100% 50% at 50% 0%,rgba(0,40,100,.2) 0%,transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 20%,rgba(80,30,160,.1) 0%,transparent 50%);
}
.hero>*{position:relative;z-index:1}
.hero-earth{position:absolute;bottom:-40px;left:10%;width:180px;opacity:.12;image-rendering:pixelated;z-index:0;filter:hue-rotate(10deg) brightness(1.3)}
.hero-planet{position:absolute;top:10%;right:8%;width:220px;opacity:.08;image-rendering:pixelated;z-index:0;animation:drift 12s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(2deg)}}
.hero-title{display:block;max-width:650px;width:90vw;margin:0 auto 1.5rem;image-rendering:pixelated;filter:drop-shadow(0 0 40px rgba(0,204,255,.35))}
.hero-story{font-size:clamp(.95rem,2.2vw,1.15rem);color:var(--muted);max-width:580px;margin:0 auto 1rem;line-height:1.9}
.hero-story em{color:var(--orange);font-style:normal}
.hero-story strong{color:var(--text);font-weight:500}
.hero-tagline{font-family:'Orbitron',sans-serif;font-size:clamp(.8rem,1.8vw,.95rem);color:var(--cyan);letter-spacing:.15em;margin:1.5rem 0 2rem;opacity:.8}
.hero-cta{
  display:inline-block;padding:.9rem 3rem;
  background:linear-gradient(135deg,var(--cyan),var(--purple));
  color:#fff;font-family:'Orbitron',sans-serif;font-size:.85rem;letter-spacing:.15em;
  border-radius:50px;border:none;cursor:pointer;
  transition:transform .2s,box-shadow .2s;text-decoration:none;
}
.hero-cta:hover{transform:scale(1.05);box-shadow:0 0 30px rgba(0,204,255,.4);text-decoration:none}

/* ---- STORY BEATS ---- */
.story{padding:0;position:relative}
.beat{padding:4rem 2rem;position:relative;overflow:hidden}
.beat-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:3rem}
.beat:nth-child(even) .beat-inner{flex-direction:row-reverse}
.beat-text{flex:1;min-width:250px}
.beat-text h2{font-size:clamp(1.1rem,2.5vw,1.4rem);margin-bottom:.6rem;line-height:1.4}
.beat-text p{color:var(--muted);font-size:.95rem;line-height:1.8}
.beat-text p strong{color:var(--text);font-weight:500}
.beat-visual{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;align-items:center;max-width:250px}
.beat-visual img{image-rendering:pixelated;filter:drop-shadow(0 0 10px rgba(0,204,255,.2));transition:transform .3s}
.beat-visual img:hover{transform:scale(1.25)}
.beat-visual .big{width:72px;height:72px}
.beat-visual .med{width:56px;height:56px}
.beat-visual .sm{width:40px;height:40px}

/* Beat backgrounds */
.beat-crash{background:linear-gradient(135deg,var(--bg2) 50%,rgba(255,68,68,.04))}
.beat-crash h2{color:var(--red)}
.beat-build{background:linear-gradient(135deg,rgba(0,204,255,.03),var(--bg) 60%)}
.beat-build h2{color:var(--cyan)}
.beat-farm{background:linear-gradient(135deg,var(--bg2) 50%,rgba(68,255,136,.04))}
.beat-farm h2{color:var(--green)}
.beat-animals{background:linear-gradient(135deg,rgba(136,85,255,.04),var(--bg) 60%)}
.beat-animals h2{color:var(--purple)}
.beat-explore{background:linear-gradient(135deg,var(--bg2) 50%,rgba(255,204,51,.04))}
.beat-explore h2{color:var(--gold)}
.beat-terraform{background:linear-gradient(135deg,rgba(255,136,68,.04),var(--bg2) 60%)}
.beat-terraform h2{color:var(--orange)}

/* Connector line between beats */
.beat::after{
  content:'';position:absolute;bottom:0;left:50%;width:1px;height:40px;
  background:linear-gradient(180deg,transparent,var(--border));transform:translateX(-50%);
}
.beat:last-child::after{display:none}

/* ---- CREW SECTION ---- */
.crew{padding:4rem 2rem;text-align:center;background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.crew h2{font-size:clamp(1.1rem,2.5vw,1.3rem);margin-bottom:.4rem;color:var(--cyan)}
.crew .sub{color:var(--muted);margin-bottom:2rem;font-size:.9rem}
.crew-row{display:flex;flex-wrap:wrap;justify-content:center;gap:1.75rem}
.crew-member{text-align:center;transition:transform .3s}
.crew-member:hover{transform:translateY(-5px)}
.crew-member img{width:40px;height:56px;image-rendering:pixelated;margin:0 auto .4rem;filter:drop-shadow(0 2px 8px rgba(0,204,255,.2))}
.crew-member span{font-size:.65rem;color:var(--muted);display:block}

/* ---- SHOWCASE GRID ---- */
.showcase{padding:5rem 2rem;background:var(--bg)}
.showcase h2{text-align:center;font-size:clamp(1.1rem,2.5vw,1.3rem);color:var(--pink);margin-bottom:.5rem}
.showcase .sub{text-align:center;color:var(--muted);margin-bottom:2.5rem;font-size:.9rem}
.showcase-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;max-width:1000px;margin:0 auto}
.s-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:10px;
  padding:1rem .6rem;text-align:center;
  transition:all .3s;cursor:default;position:relative;overflow:hidden;
}
.s-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--purple));opacity:0;transition:opacity .3s}
.s-card:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,204,255,.1)}
.s-card:hover::before{opacity:1}
.s-card img{width:48px;height:48px;margin:0 auto .6rem;image-rendering:pixelated;filter:drop-shadow(0 0 6px rgba(0,204,255,.15));transition:transform .3s}
.s-card:hover img{transform:scale(1.15)}
.s-card h3{font-size:.7rem;margin-bottom:.2rem;letter-spacing:.04em}
.s-card p{font-size:.65rem;color:var(--muted);line-height:1.3}

/* ---- PLANETS ---- */
.planets{padding:4rem 2rem;text-align:center;background:var(--bg2);border-top:1px solid var(--border)}
.planets h2{font-size:clamp(1.1rem,2.5vw,1.3rem);color:var(--gold);margin-bottom:.4rem}
.planets .sub{color:var(--muted);margin-bottom:2rem;font-size:.9rem}
.planet-row{display:flex;flex-wrap:wrap;justify-content:center;gap:1.75rem;max-width:800px;margin:0 auto}
.planet-card{text-align:center;transition:transform .3s}
.planet-card:hover{transform:scale(1.12)}
.planet-card img{width:64px;height:64px;image-rendering:pixelated;margin:0 auto .4rem;filter:drop-shadow(0 0 10px rgba(255,204,51,.12))}
.planet-card span{font-size:.65rem;color:var(--muted);display:block;font-family:'Orbitron',sans-serif;letter-spacing:.04em}

/* ---- BOTTOM CTA ---- */
.cta-bottom{padding:5rem 2rem;text-align:center;background:linear-gradient(180deg,var(--bg),var(--bg2))}
.cta-bottom h2{font-size:clamp(1.2rem,3vw,1.6rem);margin-bottom:.6rem}
.cta-bottom p{color:var(--muted);margin-bottom:2rem;max-width:400px;margin-left:auto;margin-right:auto;font-size:.95rem}

/* ---- FOOTER ---- */
.footer{text-align:center;padding:1.5rem;color:var(--muted);font-size:.7rem;border-top:1px solid var(--border)}

/* ---- FADE IN ---- */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}
.fade-in.visible{opacity:1;transform:none}

/* ---- RESPONSIVE ---- */
@media(max-width:768px){
  .beat-inner,.beat:nth-child(even) .beat-inner{flex-direction:column;text-align:center}
  .beat-visual{max-width:none}
  .hero-earth,.hero-planet{display:none}
  .beat::after{display:none}
}
@media(max-width:480px){
  .showcase-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .crew-row{gap:1rem}
  .crew-member img{width:32px;height:44px}
}