:root{
  --bg:#020617;
  --text:#ffffff;
  --muted:#cbd5e1;
  --muted-2:#94a3b8;
  --green:#22c55e;
  --orange:#fb923c;
  --blue:#38bdf8;
  --hospital:#60a5fa;
  --border:rgba(255,255,255,0.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);background:
radial-gradient(circle at 15% 15%, rgba(34,197,94,0.06), transparent 22%),
radial-gradient(circle at 85% 10%, rgba(251,146,60,0.06), transparent 20%),
linear-gradient(180deg,#020617 0%, #07101d 100%);font-family:Arial, Helvetica, sans-serif;overflow-x:hidden;-webkit-text-size-adjust:100%;position:relative}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
.container{max-width:1120px;margin:0 auto;padding:0 24px;width:100%}
.nav{position:sticky; top:0; z-index:10; backdrop-filter:blur(18px); background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)), rgba(7,17,31,0.84); border-bottom:1px solid rgba(255,255,255,0.14); box-shadow:0 14px 34px rgba(0,0,0,0.20)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:20px}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand img{max-height:42px; width:auto; opacity:0.95; flex-shrink:0; object-fit:contain}
.brand-title{font-weight:700; font-size:15px}
.brand-sub{font-size:11px; color:var(--muted-2)}
.nav-links{display:flex; gap:16px; font-size:13px; color:var(--muted)}
.top-social-strip{position:relative; z-index:2; background:linear-gradient(180deg, rgba(7,17,31,0.92), rgba(8,18,36,0.82)); border-bottom:1px solid rgba(255,255,255,0.10); box-shadow:0 8px 22px rgba(0,0,0,0.14)}
.top-social-inner{min-height:46px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap}
.top-social-inner a{display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:0 10px; border-radius:999px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.10); color:#ffffff; font-size:13px; font-weight:700}
.top-social-inner a:hover{background:rgba(255,255,255,0.12)}

.ambient-orbs{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0}
.orb{position:absolute; border-radius:999px; filter:blur(40px); opacity:0.12; animation:floatOrb 14s ease-in-out infinite}
.orb-one{width:220px; height:220px; background:rgba(34,197,94,0.28); top:12%; left:6%}
.orb-two{width:260px; height:260px; background:rgba(251,146,60,0.22); top:40%; right:8%; animation-delay:-5s}
.orb-three{width:180px; height:180px; background:rgba(96,165,250,0.18); bottom:12%; left:18%; animation-delay:-9s}
@keyframes floatOrb{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-18px,0)}}

html, body{
  min-height:100%;
  background-color:#091224 !important;
  background-image:
    linear-gradient(rgba(6,14,28,0.36), rgba(7,16,31,0.54)),
    url('assets/bg_desktop_v32.png') !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;
  background-size:100% auto !important;
  background-attachment:scroll !important;
  color:#ffffff !important;
}

.hero, .section, .footer{position:relative; z-index:1; background:transparent !important}
.hero{padding:82px 0 58px !important}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,0.7fr); gap:24px; align-items:start}
.hero-copy{background:linear-gradient(180deg, rgba(8,18,36,0.70), rgba(8,18,36,0.56)); border:1px solid rgba(255,255,255,0.10); border-radius:24px; padding:28px; box-shadow:0 18px 44px rgba(0,0,0,0.24); backdrop-filter:blur(10px)}
.pill,.signal-chip,.btn.secondary{background:linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08)) !important; border:1px solid rgba(255,255,255,0.18) !important; color:#ffffff !important}
.pill{display:inline-block; padding:7px 12px; border-radius:999px; font-size:11px; font-weight:700}
.hero h1{font-size:clamp(40px, 6vw, 64px) !important; line-height:0.98 !important; margin:14px 0 12px; max-width:900px; color:#ffffff !important; text-shadow:0 10px 26px rgba(0,0,0,0.40) !important; letter-spacing:-0.02em}
.lead,.schedule-copy,.hook-line,.section-head p,.glass p,.info-card p,.preview-card p,.right-now-copy p,.right-now-card span,.mission-copy p,.community-card p,.empty-card p,.mission-note,.progress-label,.sponsor-copy span,.footer-links,.footer-inner{color:#f2f8ff !important}
.lead,.schedule-copy{max-width:640px; font-size:16px; line-height:1.7}
.hook-line{margin:14px 0 0; font-size:18px; line-height:1.55; font-weight:700; max-width:640px; color:#f7fbff !important; text-shadow:0 4px 16px rgba(0,0,0,0.38) !important}
.schedule-copy{margin-top:14px}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin:24px 0 0}
.signal-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.signal-chip{display:inline-flex; min-height:34px; align-items:center; padding:0 12px; border-radius:999px; font-size:12px; font-weight:700}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:12px; font-weight:700; font-size:14px; text-align:center}
.btn.primary,.sponsor-btn{background:linear-gradient(90deg, #5ee7ff, #60a5fa) !important; color:#071221 !important; border:none !important; box-shadow:0 18px 34px rgba(94,231,255,0.22) !important}
.inline-link{color:#ffd0a6; font-weight:700; font-size:14px}
.glass,.info-card,.preview-card,.sponsor-card,.empty-card,.recent-card,.mission-card,.progress-card,.live-shell,.community-shell,.community-card,.right-now-shell,.right-now-card{
  background:linear-gradient(180deg, rgba(8,18,36,0.88), rgba(10,20,40,0.90)) !important;
  border:1px solid rgba(255,255,255,0.16) !important;
  border-radius:22px !important;
  box-shadow:0 18px 44px rgba(0,0,0,0.24) !important;
  backdrop-filter:blur(16px) !important;
}
.hero-panel{display:grid; gap:12px}
.glass{padding:18px}
.panel-title{font-weight:700; margin-bottom:8px; font-size:15px}
.section{padding:64px 0}
.section::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 12% 18%, rgba(94,231,255,0.04), transparent 18%), radial-gradient(circle at 88% 28%, rgba(96,165,250,0.04), transparent 18%) !important}
.section-head{max-width:780px; margin:0 auto 22px; position:relative}
.section-head.center{text-align:center}
.small-head{margin-bottom:16px}
.eyebrow{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#eafcff !important; font-weight:700; margin-bottom:8px; text-shadow:0 0 12px rgba(94,231,255,0.16), 0 2px 8px rgba(0,0,0,0.18)}
.section-head h3,.right-now-copy h3,.closing-copy h3{font-size:clamp(24px, 3.2vw, 34px); margin:0 0 8px; color:#ffffff !important; text-shadow:0 8px 22px rgba(0,0,0,0.32) !important; letter-spacing:-0.02em}
.card-grid{display:grid; gap:16px}
.card-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.info-card{padding:20px}
.card-kicker{font-size:11px; font-weight:700; margin-bottom:8px}
.card-kicker.green{color:#b7ffd0}
.card-kicker.orange{color:#ffd0a6}
.card-kicker.silver{color:#d9e2ec}
.info-card h4,.community-card h4,.merch-card h4{font-size:20px; margin:0 0 8px}
.live-shell{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,0.95fr); gap:16px; padding:18px}
.live-copy h3{font-size:clamp(22px, 3.2vw, 30px); margin:0 0 10px}
.live-copy p,.preview-card p{line-height:1.65; font-size:14px}
.status-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:16px}
.status-badge{display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border-radius:999px; background:rgba(251,146,60,0.12); border:1px solid rgba(251,146,60,0.30); color:#ffd0a6; font-weight:700; font-size:13px}
.preview-card{padding:18px}
.preview-title{font-weight:700; margin-bottom:8px; font-size:15px}
.recent-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start}
.empty-card{min-height:220px; padding:20px; display:flex; flex-direction:column; justify-content:center; text-align:left}
.empty-card strong{font-size:16px; margin-bottom:8px}
.recent-card{padding:14px; display:flex; align-items:flex-start; justify-content:center; overflow:hidden; background:linear-gradient(180deg, rgba(10,19,34,0.96), rgba(8,14,27,0.88))}
.recent-card .tiktok-embed{margin:0 !important; min-width:0 !important; width:100% !important; max-width:100% !important}
.recent-card iframe,.recent-card blockquote{width:100% !important; max-width:100% !important; border-radius:14px !important; overflow:hidden}
.mission-bridge-section{padding:18px 0 8px}
.mission-bridge-card{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px,0.8fr); gap:18px; align-items:center; padding:24px; border-radius:22px; background:linear-gradient(180deg, rgba(8,18,36,0.90), rgba(10,20,40,0.92)); border:1px solid rgba(255,255,255,0.16); box-shadow:0 18px 44px rgba(0,0,0,0.24); backdrop-filter:blur(14px)}
.mission-bridge-copy h3{margin:0 0 10px; color:#ffffff; font-size:clamp(28px, 3.8vw, 40px); line-height:1.05; text-shadow:0 8px 22px rgba(0,0,0,0.30)}
.mission-bridge-copy p{margin:0; color:#f2f8ff; font-size:15px; line-height:1.7}
.mission-bridge-actions{display:grid; gap:12px}
.mission-bridge-actions .btn{width:100%}
.right-now-section{padding-top:10px}
.right-now-shell{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,0.9fr); gap:18px; padding:22px}
.right-now-copy,.closing-copy{background:linear-gradient(180deg, rgba(8,18,36,0.40), rgba(8,18,36,0.26)); border-radius:16px; padding:10px 12px}
.right-now-copy p,.closing-copy p{margin:0; line-height:1.7; font-size:15px}
.right-now-points{display:grid; gap:12px}
.right-now-card{padding:16px; display:flex; flex-direction:column; gap:6px}
.right-now-card strong{font-size:15px}
.mission-section{background:radial-gradient(circle at 14% 18%, rgba(94,231,255,0.10), transparent 18%), radial-gradient(circle at 84% 24%, rgba(103,168,255,0.08), transparent 18%), linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)) !important}
.sgc-button-wrap{display:flex; justify-content:center; margin:14px 0 16px}
.mission-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch}
.mission-card{padding:20px; display:flex; flex-direction:column; height:100%; min-width:0; overflow:hidden}
.mission-logo-wrap{width:100%; min-height:112px; max-height:112px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; padding:14px; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)) !important; border:1px solid rgba(255,255,255,0.10) !important; overflow:hidden}
.mission-logo{max-width:100%; width:auto; height:auto; object-fit:contain; flex:0 1 auto}
.sgc-logo{max-height:56px}
.extra-logo{max-height:42px}
.hospital-logo{max-height:52px}
.mission-copy{display:flex; flex-direction:column; gap:10px; min-width:0}
.mission-kicker{font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#b7ffd0}
.mission-kicker.blue{color:#bdeafe}.mission-kicker.hospital{color:#bfdbfe}
.mission-copy h4{font-size:22px; margin:0; word-break:break-word}
.mission-copy p{margin:0; line-height:1.7; font-size:14px}
.mission-note{margin-top:18px; text-align:center; color:var(--muted-2); font-size:13px; line-height:1.6}
.progress-wrap{margin-top:28px}
.progress-card{padding:18px; max-width:760px; margin:0 auto}
.progress-stats{display:flex; justify-content:space-between; gap:20px; margin-bottom:14px; flex-wrap:wrap}
.progress-label{display:block; color:var(--muted-2); font-size:12px; margin-bottom:4px}
.progress-stats strong{font-size:22px}
.progress-bar{width:100%; height:14px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden}
.progress-fill{width:0%; height:100%; background:linear-gradient(90deg, #5ee7ff, #60a5fa, #fbbf24) !important; border-radius:999px}
.progress-actions{margin-top:16px; display:flex; justify-content:center}
.community-section{padding-top:34px !important}
.community-shell{border-radius:22px; padding:24px}
.community-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.community-card{background:rgba(255,255,255,0.03); padding:18px}
.cta-card{display:flex; flex-direction:column; gap:12px; justify-content:flex-start}
.cta-card .btn{width:100%}
.merch-section{position:relative; padding-top:56px !important}
.merch-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px}
.merch-card{position:relative; overflow:hidden; min-height:300px; display:flex; flex-direction:column; border-radius:22px; border:1px solid rgba(255,255,255,0.14); background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)), linear-gradient(180deg, rgba(8,18,36,0.90), rgba(10,20,40,0.92)); box-shadow:0 20px 42px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.08); backdrop-filter:blur(14px); transform:translateY(0); transition:transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease}
.merch-card:hover{transform:translateY(-4px); box-shadow:0 24px 52px rgba(0,0,0,0.26), 0 0 24px rgba(94,231,255,0.08)}
.merch-glow{position:absolute; inset:-30% auto auto -10%; width:220px; height:220px; border-radius:999px; filter:blur(34px); opacity:0.22; pointer-events:none}
.merch-glow-cyan{background:rgba(94,231,255,0.55)} .merch-glow-pink{background:rgba(244,114,182,0.48)} .merch-glow-gold{background:rgba(251,191,36,0.44)}
.merch-image-wrap{position:relative; z-index:1; padding:18px 18px 0 18px}
.merch-image{width:100%; height:260px; object-fit:contain; display:block; border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)}
.merch-content{position:relative; z-index:1; padding:24px; padding-top:16px !important; display:flex; min-height:auto !important; flex-direction:column; justify-content:space-between; gap:16px}
.merch-kicker{display:inline-flex; width:max-content; min-height:28px; align-items:center; padding:0 10px; border-radius:999px; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.12); color:#ffffff; font-size:12px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase}
.merch-card h4{margin:0; color:#ffffff; font-size:24px; line-height:1.15}
.merch-card p{margin:0; color:#edf7ff; line-height:1.7; font-size:15px}
.merch-footer{margin-top:20px; display:flex; justify-content:center}
.reveal-on-scroll{opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease}
.reveal-on-scroll.is-visible{opacity:1; transform:translateY(0)}
.sponsor-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.sponsor-card{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:12px 14px}
.sponsor-card img{width:56px; height:auto}
.sponsor-copy strong{font-size:15px}
.sponsor-copy span{font-size:13px}
.sponsor-btn{display:inline-flex; align-items:center; justify-content:center; min-width:68px; min-height:36px; border-radius:10px; font-weight:700; font-size:13px}
.footer{border-top:1px solid var(--border); padding:18px 0; background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)), linear-gradient(180deg, rgba(9,18,36,0.92), rgba(9,18,36,0.98)) !important}
.footer-inner{display:flex; justify-content:space-between; gap:18px; align-items:center; font-size:14px; flex-wrap:wrap}
.footer-links{display:flex; gap:12px; flex-wrap:wrap}
.closing-section{padding-top:18px; padding-bottom:28px !important}
.closing-copy{text-align:center}
.closing-copy h3{margin:0 0 10px; font-size:30px}
.closing-copy p{margin:0 auto; max-width:760px}
.panel.glass,.info-card,.social-card,.sponsor-card,.community-card,.progress-card,.mission-card,.preview-card{transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease}
.panel.glass:hover,.info-card:hover,.sponsor-card:hover,.community-card:hover,.mission-card:hover,.preview-card:hover{transform:translateY(-2px); border-color:rgba(255,255,255,0.16); box-shadow:0 16px 36px rgba(0,0,0,0.22)}

@media (min-width: 1600px){
  html, body{background-position:center top !important; background-size:cover !important}
}
@media (min-width: 1025px) and (max-width: 1599px){
  html, body{background-position:center top !important; background-size:cover !important}
}
@media (max-width: 1024px){
  html, body{
    background-image:linear-gradient(rgba(6,14,28,0.42), rgba(7,16,31,0.58)), url('assets/bg_mobile_v32.png') !important;
    background-position:center top !important;
    background-size:100% auto !important;
    background-attachment:scroll !important
  }
  .hero-grid,.live-shell,.mission-bridge-card,.right-now-shell{grid-template-columns:1fr}
  .card-grid.three,.recent-grid,.mission-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .community-grid,.merch-grid{grid-template-columns:1fr}
  .merch-card,.merch-content{min-height:unset}
}
@media (max-width: 900px){
  .mission-bridge-card{grid-template-columns:1fr}
}
@media (max-width: 820px){
  .ambient-orbs{display:none}
  .nav-links{display:none}
  .container{padding:0 18px}
  .mission-grid,.card-grid.three,.sponsor-row,.recent-grid{grid-template-columns:1fr}
  .hero{padding:64px 0 42px !important}
  .section{padding:52px 0 !important}
  .top-social-inner{gap:10px; padding:8px 0}
  .hero-copy{padding:20px; border-radius:18px}
  .right-now-copy h3{font-size:24px}
  .mission-card{padding:18px}
  .mission-logo-wrap{min-height:84px; max-height:84px; margin-bottom:12px; padding:10px}
  .sgc-logo{max-height:44px}
  .extra-logo{max-height:34px}
  .hospital-logo{max-height:40px}
  .mission-copy{gap:8px}
  .mission-copy h4{font-size:19px; line-height:1.25}
  .mission-copy p{font-size:13px; line-height:1.55}
  .mission-note{margin-top:14px; font-size:12px; line-height:1.5}
  .progress-card{padding:16px}
  .progress-stats strong{font-size:20px}
  .community-grid{grid-template-columns:1fr}
}
@media (max-width: 560px){
  html, body{
    background-image:linear-gradient(rgba(6,14,28,0.48), rgba(7,16,31,0.64)), url('assets/bg_mobile_v32.png') !important;
    background-size:100% auto !important;
    background-position:center top !important
  }
  .container{padding:0 14px}
  .top-social-inner{
    justify-content:center;
    overflow-x:visible;
    flex-wrap:wrap;
    padding:8px 0;
    gap:10px;
    scrollbar-width:none
  }
  .top-social-inner::-webkit-scrollbar{display:none}
  .top-social-inner a{flex:0 0 auto; min-height:34px; padding:0 12px}
  .hero{padding:48px 0 28px}
  .hero-copy{padding:16px}
  .hero h1{font-size:32px !important; line-height:1.02 !important}
  .lead,.schedule-copy,.section-head p{font-size:14px !important; line-height:1.6}
  .hook-line{font-size:16px !important}
  .sponsor-btn,.btn{width:100%}
  .cta-row{display:grid; grid-template-columns:1fr}
  .mission-bridge-section{padding:14px 0 6px}
  .mission-bridge-card{padding:18px; border-radius:18px}
  .mission-bridge-copy h3{font-size:26px}
  .right-now-shell{padding:16px; border-radius:18px}
  .right-now-card{padding:14px}
  .mission-card{padding:16px; border-radius:14px}
  .mission-logo-wrap{min-height:72px; max-height:72px; padding:8px; border-radius:10px}
  .sgc-logo{max-height:36px}
  .extra-logo{max-height:28px}
  .hospital-logo{max-height:34px}
  .mission-copy h4{font-size:18px}
  .mission-copy p{font-size:13px}
  .merch-image-wrap{padding:16px 16px 0 16px}
  .merch-image{height:220px}
  .footer-inner{flex-direction:column; align-items:flex-start}
  .sponsor-card{grid-template-columns:1fr; text-align:center; padding:14px}
  .sponsor-card img{margin:0 auto; width:48px}
  .closing-copy h3{font-size:24px}
}


.join-team-button {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 0 12px rgba(0,0,0,0.4);
  transition: 0.3s ease;
}
.join-team-button:hover {
  transform: scale(1.05);
}


/* FORCE BACKGROUND FIX */
body {
  background: url("assets/stream_scene.jpg") no-repeat center center fixed !important;
  background-size: cover !important;
}

@media (min-width: 768px) {
  body {
    background: url("assets/bg_desktop_v32.png") no-repeat center center fixed !important;
    background-size: cover !important;
  }
}

@media (max-width: 767px) {
  body {
    background: url("assets/bg_mobile_v32.png") no-repeat center center fixed !important;
    background-size: cover !important;
  }
}
