:root{ --bg0:#0a0a0a; --bg1:#121212; --card:#1a1a1a; --text900:#ffffff; --text700:#d7d7d7;
  --accent:#ff3ea5; --secondary:#ffd33d; --buttonBg: linear-gradient(90deg, var(--accent), var(--secondary));
  --radius:28px; --pad:20px; }
*{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}

/* Cinematic intro */
.intro-overlay{position:fixed; inset:0; background:#000; display:grid; place-items:center; z-index:9999; pointer-events:none; animation:intro-out 3.8s 2.4s forwards}
.intro-words{position:absolute; top:48%; left:50%; transform:translate(-50%,-50%); text-align:center; font-weight:900; letter-spacing:.1em}
.w{display:block; font-size:clamp(18px,2.6vw,28px); opacity:0; transform:translateY(10px) scale(.98)}
.w1{animation:word-in .45s .2s forwards, word-explode .6s 1.0s forwards}
.w2{animation:word-in .45s .6s forwards, word-explode .6s 1.4s forwards}
.w3{animation:word-in .45s 1.0s forwards, word-explode .6s 1.8s forwards}
.w4{animation:word-in .45s 1.4s forwards, word-explode .6s 2.2s forwards}
.intro-logo{font-size: clamp(64px, 12vw, 200px); font-weight:900; opacity:0; transform:scale(.8);
  background:linear-gradient(90deg, var(--accent), var(--secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:logo-in .8s 2.6s forwards}
@keyframes word-in{to{opacity:1; transform:translateY(0) scale(1)}}
@keyframes word-explode{to{opacity:0; filter:blur(6px); transform:translateY(-8px) scale(1.06)}}
@keyframes logo-in{to{opacity:1; transform:scale(1)}}
@keyframes intro-out{to{opacity:0; visibility:hidden}}

/* Header */
.topbar{background:#0f0f0f; color:var(--text700); font-size:14px; border-bottom:1px solid rgba(255,255,255,.08)}
.topbar-inner{display:flex; justify-content:space-between; align-items:center; padding:8px 0}
.tb-cta{color:var(--accent); text-decoration:none}
.site-header{position:sticky; top:0; background:rgba(0,0,0,.28); backdrop-filter:saturate(120%) blur(8px); z-index:50}
.site-header.scrolled{background:rgba(0,0,0,.7); box-shadow:0 6px 24px rgba(0,0,0,.18)}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text900)}
.logo-mark{width:20px; height:20px; border-radius:4px; background:linear-gradient(90deg, var(--accent), var(--secondary)); box-shadow:0 0 14px var(--accent)}
.brand-title{font-weight:900; letter-spacing:.3px}
.nav .menu{display:flex; gap:8px; list-style:none; margin:0; padding:0}
.nav-link{color:var(--text700); padding:10px 12px; border-radius:12px; text-decoration:none}
.nav-link:hover{background:rgba(255,255,255,.06); color:var(--text900)}
.btn-primary{background: var(--buttonBg); color:#111; font-weight:900; padding:10px 14px; border:none; border-radius:18px; box-shadow:0 8px 30px rgba(0,0,0,.18); cursor:pointer}
.btn-ghost{background:transparent; color:var(--text900); border:1px solid rgba(255,255,255,.25); padding:10px 14px; border-radius:18px; cursor:pointer}

/* Hero */
.hero{position:relative; min-height:82vh; display:grid; align-items:center; overflow:hidden; color:var(--text900)}
.hero-video-wrap{position:absolute; inset:0; overflow:hidden; z-index:0}
.hero-video{width:100%; height:100%; object-fit:cover; filter: saturate(1.05) contrast(1.02) brightness(.9)}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.6) 40%, rgba(0,0,0,.75)); z-index:1}
.hero-content{position:relative; z-index:2; max-width:920px; padding:80px 0}
.slashtag{position:relative; line-height:1.05; font-weight:900; font-size: clamp(36px,4.8vw,64px); letter-spacing:.2px}
.slashtag:after{content: attr(data-slashtag); position:absolute; left:0; right:0; top:0; bottom:0;
  -webkit-text-fill-color: transparent; background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.96) 50%, transparent 60%);
  -webkit-background-clip: text; background-clip: text; mix-blend-mode: screen;
  transform: translateX(-120%); animation: slash-sweep 3.6s .8s ease-in-out infinite;}
@keyframes slash-sweep{ 0%{transform:translateX(-120%)} 45%{transform:translateX(5%)} 55%{transform:translateX(-5%)} 100%{transform:translateX(120%)} }

/* Common */
.section{padding:64px 0}
.section-title{font-size: clamp(28px,3vw,40px); font-weight:900; margin:0 0 12px}
.lead{opacity:.9}
.grid{display:grid}
.md2{grid-template-columns:1fr}
@media(min-width:900px){ .md2{grid-template-columns:1.2fr .8fr} }
.feature-grid{display:grid; gap:24px; grid-template-columns:1fr}
@media(min-width:900px){ .feature-grid{grid-template-columns:repeat(3,1fr)} }
.card{background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); box-shadow:0 2px 10px rgba(0,0,0,.12); overflow:hidden}
.p-5{padding:var(--pad)}
.chips .chip{display:inline-block; font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); margin-right:8px}
.list li{margin:6px 0}
.alt{background: rgba(255,255,255,.03)}
.why-grid{display:grid; grid-template-columns:1fr; gap:16px}
@media(min-width:900px){ .why-grid{grid-template-columns:repeat(4,1fr)} }
.roadside-wrap{display:grid; grid-template-columns:1fr; gap:24px}
@media(min-width:1000px){ .roadside-wrap{grid-template-columns:1.2fr .8fr} }
.form label{display:block; margin-bottom:10px; font-weight:700}
.form input, .form select, .form textarea{width:100%; background:rgba(255,255,255,.06); color:var(--text900); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:10px}
.map-mock{position:relative; min-height:280px}
.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); 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; grid-auto-flow:column; grid-auto-columns: minmax(280px, 1fr); gap:16px; overflow-x:auto; padding-bottom:8px}
.carousel::-webkit-scrollbar{height:8px}
.carousel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1); border-radius:8px}
.story-img{background:linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); min-height:180px}
.story-copy{padding:20px}

/* Footer */
.footer{background:var(--bg1); color:var(--text700); border-top:1px solid rgba(255,255,255,.08); margin-top:40px}
.footer-grid{display:grid; grid-template-columns:1fr; gap:16px; padding:28px 0}
@media(min-width:900px){ .footer-grid{grid-template-columns:1.2fr 1fr 1fr 1fr} }
.footer-logo{font-weight:900; letter-spacing:.5px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08); padding:12px 0; text-align:center; opacity:.9}

/* Kids Corner basics */
#kidsCorner .game{margin-top:12px}
#kidsMemory{display:grid; grid-template-columns:repeat(4,60px); gap:8px}
.memTile{width:60px; height:60px; background:#222; border:1px solid rgba(255,255,255,.2); border-radius:8px; display:grid; place-items:center; cursor:pointer}
.memTile.revealed{background:#444}

/* Mascot for easter egg */
.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)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .intro-overlay{animation:none; display:none}
  .w1,.w2,.w3,.w4,.intro-logo{animation:none; opacity:1}
  .slashtag:after{animation:none; display:none}
}