*{box-sizing:border-box}html,body{margin:0;padding:0}
:root{
  --bg:#0f1220; --bg-alt:#11152a; --text:#e8eaf6; --muted:#a6accd;
  --brand:#49c; --brand2:#8df; --card:#1a1f3c; --shadow:rgba(0,0,0,.25);
  --sand:#f2d9a0; --sea:#2aa7c9; --sea2:#1787ad; --sky:#7ecbff;
}
.light{
  --bg:#ffffff; --bg-alt:#f6f7fb; --text:#1a1a1a; --muted:#555;
  --brand:#0066ff; --brand2:#4db3ff; --card:#ffffff; --shadow:rgba(0,0,0,.12);
  --sand:#ffe6b3; --sea:#3cc3e2; --sea2:#1aa3c8; --sky:#a9dfff;
}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
a{color:var(--brand);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.flex{display:flex;gap:16px}
.between{justify-content:space-between}
.center-v{align-items:center}
.site-header{position:sticky;top:0;background:rgba(15,18,32,.7);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06);z-index:10}
.light .site-header{background:rgba(255,255,255,.75)}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;color:var(--text)}
.brand-logo{width:36px;height:36px;object-fit:cover;border-radius:8px;box-shadow:0 4px 12px var(--shadow)}
.brand-name{letter-spacing:.5px}
.nav a{margin:0 10px;color:var(--text);opacity:.9}
#themeToggle{background:transparent;border:1px solid rgba(255,255,255,.2);padding:8px 10px;border-radius:10px;color:var(--text);cursor:pointer}
.hero{padding:64px 0 32px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;position:relative;z-index:1}
.hero-copy h1{font-size:44px;margin:0 0 10px}
.lead{font-size:18px;opacity:.95}
.grad{background:linear-gradient(90deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-row{display:flex;gap:12px;margin:18px 0}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;font-weight:700;border:1px solid transparent;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#001a2b}
.btn.ghost{border-color:rgba(255,255,255,.25);color:var(--text)}
.socials{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap}
.social.disabled{opacity:.6;pointer-events:none}
.hero-media img{width:100%;border-radius:18px;box-shadow:0 16px 40px var(--shadow)}
.section{padding:64px 0}
.section.alt{background:var(--bg-alt)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.rounded{border-radius:16px}
.shadow{box-shadow:0 10px 28px var(--shadow)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:20px}
.card{background:var(--card);padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,.06)}
.note,.muted{color:var(--muted);font-size:14px}
.checklist li{margin:8px 0}
.steps li{margin:10px 0}
.embed{background:var(--card);border-radius:16px;padding:10px;border:1px dashed rgba(255,255,255,.2)}
.embed-inner{padding:24px;border-radius:12px;text-align:center}
.social-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:18px 0}
.socard{background:var(--card);padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,.06);display:block}
.socard.disabled{opacity:.7;pointer-events:none}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.site-footer{padding:28px 0;border-top:1px solid rgba(255,255,255,.08)}
.countdown{font-size:28px;font-weight:800}

/* BEACH ANIMATION using provided background */
.beach-bg{position:relative;overflow:hidden}
.beach-bg::before{
  content:'';position:absolute;inset:0;background:url('assets/bg_beach.jpg') center/cover no-repeat;
  transform:scale(1.05);
  filter:saturate(1.05);
  z-index:0;
  animation:parallax 18s ease-in-out infinite alternate;
}
@keyframes parallax{from{transform:scale(1.05)}to{transform:scale(1.1) translateY(-6px)}}

/* Mini dog sprite */
#miniDog{
  position:fixed; top:140px; left:20px; width:72px; height:72px; z-index:9;
  background-image:url('assets/ewok_cartoon.jpg'); background-size:cover; background-position:center;
  border-radius:50%; box-shadow:0 8px 18px var(--shadow); transition:transform .25s ease, top .4s ease, left .4s ease;
  cursor:pointer; outline:2px solid rgba(255,255,255,.25);
}
#miniDog.jump{transform:translateY(-10px) rotate(-6deg)}
#miniDog:active{transform:scale(.95)}

/* Rocket scene */
.rocket-scene .sky{
  position:relative; height:420px; border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,var(--sky), var(--sand));
}
.rocket-scene .bg-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; filter:saturate(1.05)}
.rocket-scene .horizon{position:absolute; left:0; right:0; bottom:0; height:35%; background:linear-gradient(180deg,transparent, rgba(0,0,0,.05)), linear-gradient(180deg,#ffffff00 0,#00000022 60%, #00000055 100%)}
.rocket{position:absolute; left:calc(50% - 20px); bottom:10px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; transform-origin:center}
.rocket .ship{font-size:32px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.rocket .pilot{position:absolute; width:22px; height:22px; border-radius:50%; left:-18px; top:6px; box-shadow:0 2px 6px rgba(0,0,0,.4)}
.rocket .flame{position:absolute; bottom:-8px; left:12px; width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #ffd200, #ff6b00 60%, transparent 62%); filter:blur(0.3px); animation:flame .2s infinite alternate}
@keyframes flame{from{transform:scale(.9)}to{transform:scale(1.2)}}
.launching .sky{background:radial-gradient(800px 300px at 50% -30%, #ffffff, transparent 30%), linear-gradient(180deg,#0b0f2a,#000014 70%); transition:background 2s ease}
.launching .rocket{animation:fly 4.2s ease-in forwards}
@keyframes fly{
  0%{transform:translate(0,0) rotate(0)}
  30%{transform:translate(-60px,-80px) rotate(-10deg)}
  60%{transform:translate(40px,-260px) rotate(8deg)}
  100%{transform:translate(0,-520px) rotate(0)}
}
/* Space stars appear */
.space-stars{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 1s ease; background-image:radial-gradient(2px 2px at 20% 30%, #fff, #fff0), radial-gradient(2px 2px at 70% 60%, #fff, #fff0), radial-gradient(1.5px 1.5px at 40% 80%, #fff, #fff0), radial-gradient(2px 2px at 80% 20%, #fff, #fff0)}
.launching .space-stars{opacity:1}
/* Twitter video overlay */
.moon-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; border:0;}

.controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.controls input{padding:10px 12px; min-width:280px; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:transparent; color:var(--text)}

@media (max-width: 900px){
  .hero-grid,.two-col,.cards,.social-cards,.gallery-grid{grid-template-columns:1fr}
  .nav{display:none}
  .hero-copy h1{font-size:36px}
}

/* Force social link visibility on beach hero */
.hero .socials a{color:#000 !important; text-shadow:0 1px 2px rgba(255,255,255,.6)}
.hero .socials a:hover{opacity:.85}