:root{
  --sol-a:#9945FF; --sol-b:#19A8FF; --sol-c:#14F195;
  --ink:#eaf2ff; --gold:#ffd86b; --bg:#050816;
  --phantom:#6e56cf; --jupiter-a:#00e0a4; --jupiter-b:#6b8cff; --tg:#229ED9;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#050816;color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Arial,sans-serif;}

#stars,#comets{position:fixed; inset:0; z-index:0; pointer-events:none;}
.satellite{position:fixed; left:-200px; top:12vh; width:200px; z-index:1; opacity:.9;
  filter: drop-shadow(0 12px 24px rgba(124,249,255,.25)); animation: sat 120s linear infinite;}
@keyframes sat{ 0%{ transform: translateX(0) translateY(0) rotate(0deg) } 50%{ transform: translateX(120vw) translateY(12vh) rotate(180deg) } 100%{ transform: translateX(0) translateY(0) rotate(360deg) } }

.hero{position:relative; z-index:1; text-align:center; padding:9vh 16px 2vh;}
.hero-bg{position:absolute; inset:0; background: url('assets/background.jpg') center/cover no-repeat; opacity:.34; filter:saturate(1.15) brightness(.98)}
.title{margin:0 0 6px; font-size: clamp(40px, 9vw, 84px); letter-spacing:.06em; font-weight:900}
.solana{background: linear-gradient(90deg, var(--sol-a), var(--sol-b), var(--sol-c)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 20px rgba(100,180,255,.25);}
.solana-sm{background: linear-gradient(90deg, var(--sol-a), var(--sol-b), var(--sol-c)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.tagline{font-size:clamp(16px, 2.2vw, 22px); margin:10px 0 6px;}
.powered{display:flex; gap:10px; justify-content:center; align-items:center; margin:4px 0 10px;}
.solana-logo{width:120px; filter: drop-shadow(0 6px 16px rgba(153,69,255,.25));}
.subhead{max-width:1100px; margin:8px auto 0; padding:0 16px; line-height:1.45; font-size: clamp(14px, 2vw, 18px);}
.yellow{color: var(--gold); text-shadow:0 0 18px rgba(255,214,102,.35);}
.twinkle{ animation: tw 2.2s ease-in-out infinite; }
@keyframes tw { 0%,100%{ filter:brightness(1)} 50%{ filter:brightness(1.35)} }

.info-tabs{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding:12px 16px; margin-top:10px;}
.info-tab{border:1px solid rgba(160,200,255,.25); background: rgba(10,14,40,.45); border-radius:12px; padding:10px 14px; box-shadow: inset 0 0 18px rgba(120,180,255,.12), 0 4px 18px rgba(0,0,0,.35); display:flex; gap:14px; align-items:center;}
.info-tab span{opacity:.85; font-size:13px}
.info-tab strong{font-size:18px}
.copy-btn{border:0; border-radius:8px; padding:8px 10px; cursor:pointer; background:#1c2448; color:#fff;}

.cta-row{z-index:1; position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; padding:20px; max-width:1100px; margin:0 auto;}
.btn{display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 18px; border-radius:14px; text-decoration:none; color:#fff; font-weight:800; box-shadow:0 10px 28px rgba(0,0,0,.35), inset 0 0 18px rgba(255,255,255,.06); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;}
.btn:hover{ transform: translateY(-3px); filter:brightness(1.08); }
.btn-phantom{ background: radial-gradient(120% 120% at 20% 20%, #7a3cff, #4b0fcc 60%); }
.btn-solana{ background: linear-gradient(90deg, var(--sol-a), var(--sol-b), var(--sol-c)); color:#08121f}
.btn-jupiter{ background: linear-gradient(90deg, var(--jupiter-a), var(--jupiter-b)); color:#08121f}
.btn-telegram{ background: linear-gradient(90deg, var(--tg), #7ed8ff); }

/* Split CTA */
.btn-split{ display:flex; align-items:stretch; gap:8px; padding:6px; border-radius:16px; background: rgba(20,24,50,.35); border:1px solid rgba(160,200,255,.25); box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 0 18px rgba(255,255,255,.06); }
.pill{ display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; text-decoration:none; color:#fff; font-weight:800; }
.pill-phantom{ background: radial-gradient(120% 120% at 20% 20%, #7a3cff, #4b0fcc 60%); }
.pill-jupiter{ background: linear-gradient(90deg, var(--jupiter-a), var(--jupiter-b)); color:#08121f }
.pill strong{ font-weight:900 }
.pill:hover{ filter:brightness(1.08); transform: translateY(-2px); transition: all .2s ease }
.slash{ align-self:center; opacity:.9; font-weight:900; color:#dfe7ff }
.sol-mini{ width:18px; height:auto; filter: drop-shadow(0 3px 10px rgba(153,69,255,.35)); }

.floaters{ position:relative; height: 68vh; margin-top:10px; overflow:hidden;}
.floater{ position:absolute; width:110px; height:110px; object-fit:contain; border-radius:16px; box-shadow:0 6px 26px rgba(0,0,0,.45), 0 0 24px rgba(120,180,255,.18); animation: float 12s ease-in-out infinite; opacity:.98;}
.floater:nth-child(odd){ animation-duration: 10s}
.floater:nth-child(3n){ animation-duration: 9s}
.floater:nth-child(5n){ animation-duration: 11s}
@keyframes float{ 0%{ transform:translate(0,0)} 50%{ transform:translate(22px,-26px)} 100%{ transform:translate(0,0)} }

.gallery{ padding:7vh 5vw}
.gallery h2{ text-align:center; margin-bottom:18px; font-size: clamp(24px, 3.5vw, 36px); background: linear-gradient(90deg, var(--sol-a), var(--sol-b), var(--sol-c)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 18px rgba(144,205,255,.35); }
.gallery .grid{ display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gallery img{ width:100%; height:auto; border-radius:14px; border:1px solid rgba(160,200,255,.25); display:block }

.socials{ padding:6vh 5vw 6vh; text-align:center}
.socials h2{ margin-bottom:14px}
.socials .icons{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap }
.socials .icon{ width:84px; height:84px; display:grid; place-items:center; background:#0d1236; border:1px solid #2d3b79; border-radius:22px; box-shadow:0 0 12px rgba(153,69,255,.2), 0 0 24px rgba(20,241,149,.15); text-decoration:none; color:#cfe3ff; transition: transform .25s ease, box-shadow .25s ease; position:relative;}
.socials .icon img{ width:44px; height:44px; object-fit:contain; }
.socials .icon:hover{ transform: translateY(-4px) scale(1.04) }
.socials .icon span{ position:absolute; bottom:-22px; font-size:12px; opacity:.85 }

.tos{ padding: 30px 5vw 80px; text-align:center; color:#cdd9ff; opacity:.9}
.tos h3{ margin: 0 0 8px; font-size: 18px; letter-spacing:.08em }
.tos p{ margin: 6px 0 }

@media (max-width: 860px){
  .floater{ width:88px; height:88px }
  .solana-logo{ width:100px }
}
@media (max-width: 560px){
  .floater{ width:72px; height:72px }
  .title{ font-size: 36px }
  .solana-logo{ width:86px }
}


/* === Sound Toggle === */
#sound-toggle{
  position: fixed; right: 18px; bottom: 18px; z-index: 10;
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid rgba(160,200,255,.25);
  background: radial-gradient(120% 120% at 20% 20%, #10163a, #0b0f2a 60%);
  color: #eaf2ff; cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 18px rgba(153,69,255,.28);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
#sound-toggle .icon{ font-size: 22px }
#sound-toggle:hover{ transform: translateY(-2px); filter: brightness(1.08) }
#sound-toggle.on{
  background: linear-gradient(135deg, var(--sol-a), var(--sol-b), var(--sol-c));
  color: #06101b; box-shadow: 0 0 30px rgba(20,241,149,.35), 0 0 18px rgba(153,69,255,.25) inset;
}


/* Keep the Solana-gradient toggle styles (already present). If not, defaults below: */
#sound-toggle{ position: fixed; right: 18px; bottom: 18px; z-index: 10;
  width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(160,200,255,.25);
  background: radial-gradient(120% 120% at 20% 20%, #10163a, #0b0f2a 60%); color: #eaf2ff; cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 18px rgba(153,69,255,.28);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }
#sound-toggle .icon{ font-size: 22px }
#sound-toggle.on{ background: linear-gradient(135deg, var(--sol-a), var(--sol-b), var(--sol-c));
  color: #06101b; box-shadow: 0 0 30px rgba(20,241,149,.35), 0 0 18px rgba(153,69,255,.25) inset; }


/* === Pulsing cosmic glow for sound toggle when ON === */
#sound-toggle.on{
  position: fixed;
  isolation: isolate;
  animation: pulseGlow 2.2s ease-in-out infinite;
}
#sound-toggle.on::after{
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(20,241,149,.28), rgba(25,168,255,.18) 40%, rgba(153,69,255,.14) 70%, transparent 78%);
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
}
@keyframes pulseGlow{
  0%,100%{ box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 18px rgba(153,69,255,.28) }
  50%{    box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 28px rgba(20,241,149,.40), 0 0 18px rgba(25,168,255,.32) }
}


/* Continuous Solana glow for sound toggle */
#sound-toggle{
  position: fixed; right: 18px; bottom: 18px; z-index: 10;
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid rgba(160,200,255,.25);
  background: radial-gradient(120% 120% at 20% 20%, #10163a, #0b0f2a 60%);
  color: #eaf2ff; cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 18px rgba(153,69,255,.28);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
#sound-toggle .icon{ font-size: 22px }
#sound-toggle.on{
  background: linear-gradient(135deg, var(--sol-a), var(--sol-b), var(--sol-c));
  color: #06101b; box-shadow: 0 0 30px rgba(20,241,149,.35), 0 0 18px rgba(153,69,255,.25) inset;
  animation: pulseGlow 2.2s ease-in-out infinite;
}
#sound-toggle.on::after{
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(20,241,149,.28), rgba(25,168,255,.18) 40%, rgba(153,69,255,.14) 70%, transparent 78%);
  filter: blur(6px); z-index: -1; pointer-events: none;
}
@keyframes pulseGlow{
  0%,100%{ box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 18px rgba(153,69,255,.28) }
  50%{    box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 28px rgba(20,241,149,.40), 0 0 18px rgba(25,168,255,.32) }
}


/* Tiny tip bubble for enabling sound on autoplay-restricted browsers */
#sound-tip{
  position: fixed; right: 86px; bottom: 26px; z-index: 11;
  padding: 8px 12px; border-radius: 12px;
  background: rgba(10,14,40,.85); color: #eaf2ff; font-size: 12px;
  border: 1px solid rgba(160,200,255,.25); box-shadow: 0 4px 14px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: all .25s ease;
}
#sound-tip.show{ opacity: 1; transform: translateY(0); }


/* Centered enable-sound overlay (hidden once audio is active) */
#sound-overlay{
  position: fixed; inset: 0; z-index: 999;
  display: none; place-items: center;
  background: radial-gradient(1000px 700px at 50% -180px, rgba(8,10,26,.9), rgba(4,6,18,.88) 60%);
  backdrop-filter: blur(2px);
}
#sound-overlay.show{ display: grid; }
#sound-overlay .bubble{
  border: 1px solid rgba(160,200,255,.25);
  border-radius: 16px;
  padding: 14px 18px;
  background: rgba(10,14,40,.5);
  color: #eaf2ff;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 22px rgba(20,241,149,.28);
}
#sound-overlay .txt{ font-weight: 800; letter-spacing: .04em }


/* === Rocket + White Misty Smoke + Glow Trail === */



/* subtle light trail */
.rocket::after{
  content:""; position:absolute; left:50%; bottom:-6px; width:2px; height:120px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(140,220,255,.2) 55%, rgba(255,255,255,0));
  filter: blur(1px);
  opacity:.8;
  animation: trailFade 2.2s ease-out infinite;
}
@keyframes trailFade{ 0%{ height:120px; opacity:.8 } 100%{ height:0; opacity:0 } }


  10%  { transform: translate(-50%, 0)     rotate(-2deg); opacity:1 }
  60%  { transform: translate(-50%, -60vh) rotate(-3deg) }
  100% { transform: translate(-50%, -110vh) rotate(-6deg); opacity:0 }
}

/* White misty smoke plumes */


  60%  { transform: translate(-6px, -28px) scale(1.2); opacity:.45 }
  100% { transform: translate(-14px, -60px) scale(1.6); opacity:0 }
}



/* === Meme Emoji Atmosphere === */
#emoji-layer{ position:fixed; inset:0; pointer-events:none; z-index:4; }
.meme-emoji{
  position:absolute; font-size: 20px; will-change: transform, opacity;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
  animation: emojiFloat 8s linear forwards;
  opacity:.95;
}
@keyframes emojiFloat{
  0%   { transform: translateY(0) rotate(0deg) scale(0.9); opacity:.0 }
  10%  { opacity:.95 }
  50%  { transform: translateY(-40vh) rotate(180deg) scale(1.05) }
  100% { transform: translateY(-85vh) rotate(360deg) scale(1.1); opacity:0 }
}

/* Rocket wobble (meme mode) — layered with ascend */

  20%{ transform: translate(calc(-50% - 6px), -6px) rotate(6deg) }
  40%{ transform: translate(calc(-50% + 5px), -14px) rotate(-6deg) }
  60%{ transform: translate(calc(-50% - 4px), -22px) rotate(8deg) }
  80%{ transform: translate(calc(-50% + 6px), -34px) rotate(-8deg) }
  100%{ transform: translate(-50%, -44px) rotate(10deg) }
}
/* Compose both animations via shorthand in JS (ascend + wobble) */



/* === Calm Night Background (no static image) === */
body{ background:#000000; }
.hero-bg{ position:absolute; inset:0; background: radial-gradient(120% 60% at 50% 40%, rgba(255,255,255,0.02), rgba(0,0,0,0.0) 60%) no-repeat; opacity:1; filter:none; }
/* Horizontal Solana mist across the middle */
.hero-bg::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:18vh; transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(153,69,255,.18), rgba(25,168,255,.18), rgba(20,241,149,.18));
  filter: blur(28px) saturate(110%);
  pointer-events:none;
  opacity:.9;
}
/* Faint nebula shimmer behind the band */
.hero-bg::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 40% at 30% 52%, rgba(120,80,200,.10), transparent 60%),
              radial-gradient(50% 40% at 70% 50%, rgba(20,241,149,.08), transparent 58%);
  filter: blur(22px);
  opacity:.9; pointer-events:none;
}



/* ---- Socials Grid (merged) ---- */
.socials-section { max-width: 1100px; margin: 40px auto 0; padding: 0 16px; }
.socials-section .section-title { text-align: center; font-size: clamp(22px, 3.5vw, 32px); letter-spacing: 0.02em; margin: 8px 0 14px; 
  text-shadow: 0 0 12px rgba(120,255,255,0.25); }
.social-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(140px,1fr)); justify-items: center; }
@media (min-width: 540px){ .social-grid{ grid-template-columns: repeat(3, minmax(160px,1fr)); } }
@media (min-width: 900px){ .social-grid{ grid-template-columns: repeat(4, minmax(180px,1fr)); } }
.social-card { width: 100%; max-width: 240px; padding: 18px 14px; background: rgba(14,18,28,0.6);
  border-radius: 22px; box-shadow: 0 0 24px rgba(64,132,255,0.18), inset 0 0 0 1px rgba(255,255,255,0.05);
  display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.icon-wrap { width: 96px; height: 96px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.12));
  display: grid; place-items: center; margin-bottom: 12px; box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
.icon-wrap img { width: 84px; height: 84px; object-fit: contain; border-radius: 18px; filter: drop-shadow(0 0 8px rgba(0,255,204,0.15)); }
.label { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; text-align: center; 
  color: #b7c7ff; text-shadow: 0 0 16px rgba(86,161,255,0.25), 0 0 6px rgba(0,0,0,0.6); }
.social-card:hover .icon-wrap img { transform: translateY(-1px) scale(1.02); transition: transform 140ms ease; }



/* ===== Centered TOS with Solana glow (injected) ===== */
.mx-tos-sol{
  max-width: 1100px;
  margin: 18px auto 54px;
  padding: 0 18px;
  text-align: center;
}
.mx-tos-sol h2{
  margin: 10px 0 8px;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 900;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #7b61ff, #03e1ff, #14f195);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 14px rgba(20,241,149,.28), 0 0 18px rgba(123,97,255,.22);
}
.mx-tos-sol p{ margin: 6px 0; color: #dfe8ff; opacity: .92; }
.mx-tos-sol .copy{
  max-width: 920px; margin: 0 auto; line-height: 1.6; opacity: .88;
}
.mx-sep{
  height: 1px;
  max-width: 860px;
  margin: 12px auto 14px;
  background: linear-gradient(90deg, rgba(123,97,255,.0), rgba(123,97,255,.35), rgba(20,241,149,.35), rgba(3,225,255,.35), rgba(123,97,255,.0));
  box-shadow: 0 0 18px rgba(20,241,149,.18);
  filter: blur(.2px);
}