:root{
  --fs-hero: clamp(34px, 4.2vw, 54px);
  --fs-h1: clamp(28px,3vw,40px);
  --fs-body: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --e: cubic-bezier(.22,.61,.36,1);
  /* default tokens (night_ops-ish) — JS will swap these */
  --bg0:#000;
  --bg1:#0b0b0b;
  --card:#111;
  --text900:#fafafa;
  --text700:#cfcfcf;
  --accent:#ff3ea5;
  --secondary:#ffd33d;
  --gradientHero: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.92));
  --btnGrad: linear-gradient(90deg,#ff3ea5,#ffd33d);
  --chipBg: rgba(255,255,255,.06);
  --chipBd: rgba(255,255,255,.18);
}

*{box-sizing:border-box}
body{margin:0; background:var(--bg0); color:var(--text900); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif}
.container{max-width:1200px; margin:0 auto; padding:0 16px}

/* HEADER */
.site-header{position:sticky; top:0; height:76px; display:flex; align-items:center; backdrop-filter:saturate(120%) blur(8px); transition: background .3s var(--e), box-shadow .3s var(--e); background: rgba(0,0,0,.28); z-index:50}
.site-header.scrolled{background:rgba(0,0,0,.7); box-shadow:0 6px 24px rgba(0,0,0,.18)}
.brand-title{font-weight:700; letter-spacing:.3px; color:var(--text900); opacity:.92; white-space:nowrap; background:none; border:none; cursor:pointer}
.nav-link{color:var(--text700); padding:10px 12px; border-radius:12px; text-decoration:none; transition: color .18s var(--e), background .18s var(--e); display:inline-block}
.nav-link:hover{color:var(--text900); background:rgba(255,255,255,.06)}
.nav-link.active{color:var(--accent); box-shadow:inset 0 -3px 0 var(--accent)}
.dropdown{position:relative}
.dropdown:hover .dropdown-menu{display:block}
.dropdown-menu{display:none; position:absolute; right:0; top:100%; background:var(--card); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:6px; min-width:240px}

.theme-select{background:var(--card); color:var(--text900); border:1px solid rgba(255,255,255,.12); padding:8px 10px; border-radius:12px}
.btn-primary{background:var(--btnGrad); color:#111; font-weight:800; padding:10px 14px; border:none; border-radius:18px; box-shadow:0 8px 30px rgba(0,0,0,.18); background-size:200% 100%; transition: background-position .18s var(--e), transform .18s var(--e); cursor:pointer}
.btn-primary:hover{background-position:20% 50%; transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--text900); border:1px solid rgba(255,255,255,.25); padding:10px 14px; border-radius:18px; cursor:pointer}
.btn-link{background:none; border:none; color:var(--accent); font-weight:700; cursor:pointer}
.w{width:100%}

/* Logo */
.logo-pulse{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background: radial-gradient(40% 40% at 50% 50%, var(--accent), transparent 70%); animation: pulse 10s infinite}
.logo-mark{width:18px; height:18px; border-radius:4px; background: linear-gradient(90deg, var(--accent), var(--secondary)); box-shadow:0 0 18px var(--accent)}
@keyframes pulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.05)}}

/* HERO */
.hero{position:relative; min-height:72vh; display:grid; align-items:center; overflow:hidden; color:var(--text900); background: var(--gradientHero)}
.hero-bg{position:absolute; inset:-10% -10% -10% -10%; background: radial-gradient(60% 30% at 20% 10%, rgba(255,255,255,.06), transparent 60%); transform: translateY(0); animation: drift 12s linear infinite alternate}
@keyframes drift{from{transform:translateY(0)} to{transform:translateY(8px)}}
.hero-content{position:relative; z-index:2; max-width:720px}
.hero-title{font-weight:900; font-size: var(--fs-hero); letter-spacing:.4px; text-shadow: 0 0 24px rgba(0,0,0,.35)}
.hero-sub{font-size: clamp(18px,1.6vw,22px); opacity:.92; margin-top:6px}
.cta-row{display:flex; gap:12px; margin-top:18px}

/* Snow */
.snow-layer{position:absolute; inset:0; pointer-events:none}
.flake{position:absolute; top:-5%; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.85); filter:blur(0px); opacity:.8; animation: fall var(--spd, 12s) linear infinite}
/* Scatter flakes */
.f0{ left:0%; --spd:8s; animation-delay:0s; }
.f1{ left:37%; --spd:9s; animation-delay:-1s; }
.f2{ left:74%; --spd:10s; animation-delay:-2s; }
.f3{ left:11%; --spd:11s; animation-delay:-3s; }
.f4{ left:48%; --spd:12s; animation-delay:-4s; }
.f5{ left:85%; --spd:13s; animation-delay:-5s; }
.f6{ left:22%; --spd:14s; animation-delay:-6s; }
.f7{ left:59%; --spd:15s; animation-delay:0s; }
.f8{ left:96%; --spd:8s; animation-delay:-1s; }
.f9{ left:33%; --spd:9s; animation-delay:-2s; }
.f10{ left:70%; --spd:10s; animation-delay:-3s; }
.f11{ left:7%; --spd:11s; animation-delay:-4s; }
.f12{ left:44%; --spd:12s; animation-delay:-5s; }
.f13{ left:81%; --spd:13s; animation-delay:-6s; }
.f14{ left:18%; --spd:14s; animation-delay:0s; }
.f15{ left:55%; --spd:15s; animation-delay:-1s; }
.f16{ left:92%; --spd:8s; animation-delay:-2s; }
.f17{ left:29%; --spd:9s; animation-delay:-3s; }
.f18{ left:66%; --spd:10s; animation-delay:-4s; }
.f19{ left:3%; --spd:11s; animation-delay:-5s; }
.f20{ left:40%; --spd:12s; animation-delay:-6s; }
.f21{ left:77%; --spd:13s; animation-delay:0s; }
.f22{ left:14%; --spd:14s; animation-delay:-1s; }
.f23{ left:51%; --spd:15s; animation-delay:-2s; }
@keyframes fall{ from{ transform: translateY(-10%)} to{ transform: translateY(110%)} }

/* MISSION STRIP */
.mission-strip{background: rgba(255,255,255,.04); color:var(--text700); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}
.marquee{white-space:nowrap; overflow:hidden; display:block; padding:12px 0; position:relative}
.marquee span{display:inline-block; padding-right:24px; animation: scroll 40s linear infinite}
@keyframes scroll{ from{ transform:translateX(0)} to{ transform:translateX(-50%) } }

/* COMMON */
.section{padding:64px 0}
.section-title{font-size: var(--fs-h1); font-weight:900; letter-spacing:.3px; margin:0 0 6px}
.section-sub{opacity:.85; margin:0 0 18px}
.grid{display:grid}
.card{background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-2xl); box-shadow:0 2px 10px rgba(0,0,0,.12); overflow:hidden}
.p-5{padding:20px}
.py-10{padding-top:40px; padding-bottom:40px}
.gap-6{gap:24px}
.md\:grid-cols-2{grid-template-columns:1fr}
.xl\:grid-cols-3{grid-template-columns:1fr}
@media(min-width:768px){ .md\:grid-cols-2{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1280px){ .xl\:grid-cols-3{grid-template-columns:repeat(3,1fr)} }

.feature-media{height:160px; background: linear-gradient(120deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); transform: scale(1); animation: kenburns 10s linear infinite alternate}
@keyframes kenburns{from{transform:scale(1)} to{transform:scale(1.06)}}
.feature-title{font-size:20px; font-weight:800; color:var(--text900)}
.feature-desc{opacity:.85; color:var(--text700)}
.chip{display:inline-block; font-size:12px; padding:6px 10px; border-radius:999px; background:var(--chipBg); border:1px solid var(--chipBd); color:var(--text900)}
.quote-block{padding:56px 0; background: rgba(255,255,255,.03)}
.quote{font-size: var(--fs-h1); font-weight:700; text-align:center; color:var(--text900)}
.page-title{font-size: var(--fs-h1); font-weight:900; margin:24px 0}
.list{margin:8px 0 0 0; padding:0 0 0 0; color:var(--text700)}
.list li{margin:6px 0}
.list.tight li{margin:4px 0}

/* FAMILY */
.fam-grid{grid-template-columns:1fr}
@media(min-width:900px){ .fam-grid{grid-template-columns:repeat(3,1fr)} }
.fam-card .fam-photo{height:180px; background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); filter:grayscale(100%); transition:filter .2s var(--e)}
.fam-card:hover .fam-photo{filter:grayscale(0%)}

/* FORMS */
.form{display:grid; gap:12px}
.form label{display:grid; gap:6px; color:var(--text700); font-size:14px}
.form input, .form select, .form textarea{background:var(--bg1); color:var(--text900); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:10px 12px}

/* MAP */
.map-mock{position:relative; min-height:280px}
.map-mock.tall{min-height:420px}
.map-grid{position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 2px, transparent 2px, transparent 20px), repeating-linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 2px, transparent 2px, transparent 20px)}
.map-pin{position:absolute; width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent), 0 0 0 3px rgba(255,255,255,.85) inset}

/* Donate */
.donate-wrap{display:grid; gap:24px; grid-template-columns:1fr;}
@media(min-width:1000px){ .donate-wrap{grid-template-columns:1.2fr .8fr} }
.heart-line{height:40px; background:linear-gradient(90deg, transparent, var(--accent), transparent); -webkit-mask: linear-gradient(90deg, rgba(0,0,0,.0), rgba(0,0,0,1), rgba(0,0,0,.0)); mask: linear-gradient(90deg, rgba(0,0,0,.0), rgba(0,0,0,1), rgba(0,0,0,.0)); opacity:.6; margin-bottom:14px}
.donate-opts{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
.donate-pill{background:rgba(255,255,255,.1); color:var(--text900); border:1px solid rgba(255,255,255,.25); padding:10px 12px; border-radius:999px; cursor:pointer}
.donate-input{grid-column: span 3; background:rgba(255,255,255,.06); color:var(--text900); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:10px}
.donate-toggle{grid-column: span 3; display:flex; gap:8px; align-items:center}
.big{padding:12px 16px; font-size:18px}

/* Carousel */
.carousel{display:grid; gap:16px}
.story{display:grid; grid-template-columns:1fr}
@media(min-width:900px){ .story{grid-template-columns:1.1fr 1.4fr} }
.story-img{background:linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); min-height:180px}
.story-copy{padding:20px}

/* Partners */
.partner{position:relative; overflow:hidden}
.badge{position:absolute; top:10px; right:-40px; transform:rotate(18deg); background:var(--accent); color:#111; font-weight:900; padding:6px 40px; border-radius:12px; opacity:.9}
.partner-logo{height:120px; background:radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.14), transparent)}

/* Footer */
.footer{background:var(--bg1); color:var(--text700); border-top:1px solid rgba(255,255,255,.08); position:relative; overflow:hidden}
.footer-inner{padding:28px 16px; position:relative}
.watermark{position:absolute; right:-10%; bottom:10px; font-weight:800; letter-spacing:6px; opacity:.06; transform:rotate(-12deg); white-space:nowrap}

/* Mascot */
.mascot{position:absolute; right:24px; bottom:24px; width:18px; height:18px; border-radius:4px; background: linear-gradient(90deg, var(--accent), var(--secondary)); box-shadow: 0 0 14px var(--accent)}