:root { --bg: #0b1220; --card: #0f172a; --text: #e5e7eb; --muted:#9ca3af; --accent:#60a5fa; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:#0a0f1e;color:var(--text);}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.site-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;position:sticky;top:0;background:rgba(10,15,30,.8);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #111827}
.logo{font-weight:800;font-size:1.25rem;color:var(--text)}
.site-header nav a{margin:0 .5rem;color:var(--text);opacity:.9}
.site-header nav a:hover{opacity:1}
.site-footer{padding:2rem 1.25rem;border-top:1px solid #111827;text-align:center;color:var(--muted)}
main{padding:1.5rem}
.hero{display:grid;gap:1rem;place-items:center;margin:1rem auto;max-width:1000px;text-align:center}
.kicker{color:var(--muted);margin-top:.25rem}
.search{display:flex;gap:.5rem;justify-content:center;margin-top:.5rem}
.search input{padding:.75rem 1rem;border-radius:.75rem;border:1px solid #1f2937;background:#0b1220;color:var(--text);min-width:260px}
.search button{padding:.75rem 1rem;border-radius:.75rem;background:var(--accent);color:#0b1220;border:none;font-weight:700;cursor:pointer}
.grid.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;max-width:1100px;margin:2rem auto}
.card{background:var(--card);padding:1rem;border:1px solid #111827;border-radius:1rem;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.card .btn{display:inline-block;margin-top:.5rem;background:#111827;border:1px solid #1f2937;padding:.5rem .75rem;border-radius:.75rem}
.prose{max-width:900px;margin:0 auto;line-height:1.65}
.prose h1,.prose h2,.prose h3{line-height:1.2}
.toc{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0 1rem}
.toc a{background:#111827;border:1px solid #1f2937;padding:.4rem .7rem;border-radius:.6rem}
.faq details{background:#0b1220;border:1px solid #111827;border-radius:.75rem;padding:.75rem;margin:.5rem 0}
.hero-banner{width:100%;height:auto}
.banner-text{font-size:96px;font-weight:800;fill:url(#g);paint-order:stroke;stroke:#60a5fa;stroke-width:2}
.icon{font-size:32px;opacity:.9}
.dash{stroke:#60a5fa;stroke-width:6;stroke-linecap:round;stroke-dasharray:50 10}
.trust ul{max-width:900px;margin:0 auto;list-style:disc;padding-left:1.25rem}
.cta{max-width:900px;margin:2rem auto;text-align:center}
@media (max-width:700px){
  .banner-text{font-size:48px}
}

/* --- Visual Enhancements & Animations --- */
.hero{position:relative;overflow:hidden}
.hero::before, .hero::after{
  content:""; position:absolute; inset:-20%; pointer-events:none; background:conic-gradient(from 90deg at 50% 50%, rgba(96,165,250,.15), rgba(52,211,153,.12), rgba(96,165,250,.15));
  filter:blur(60px); animation:spin 30s linear infinite;
}
.hero::after{ animation-direction:reverse; opacity:.7; }
@keyframes spin{ to{ transform:rotate(360deg);} }

.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; will-change:opacity,transform}
.reveal.in-view{opacity:1; transform:none}

.card{transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-4px) rotateX(1deg) rotateY(-1deg); box-shadow:0 20px 50px rgba(0,0,0,.35)}

.marquee{overflow:hidden; position:relative; border-top:1px solid #111827; border-bottom:1px solid #111827; background:#0b1220; margin:2rem 0}
.marquee__track{display:flex; gap:1.5rem; white-space:nowrap; animation:scroll 22s linear infinite; padding:1rem}
.marquee__item{background:#111827; border:1px solid #1f2937; padding:.5rem .9rem; border-radius:.7rem; font-weight:600; color:#e5e7eb}
@keyframes scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.gallery{max-width:1100px;margin:2rem auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.gallery figure{margin:0;background:var(--card);border:1px solid #111827;border-radius:1rem;overflow:hidden}
.gallery img{width:100%;height:auto;display:block}
.gallery figcaption{padding:.75rem;color:var(--muted)}

.stats{max-width:1100px;margin:2rem auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;text-align:center}
.stat{background:var(--card);border:1px solid #111827;border-radius:1rem;padding:1rem}
.stat .num{font-size:2rem;font-weight:800}

.quote-rotator{max-width:900px;margin:2rem auto;position:relative;min-height:90px}
.quote{position:absolute; inset:0; opacity:0; animation:fade 18s infinite; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 1rem; color:var(--muted)}
.quote:nth-child(1){animation-delay:0s}
.quote:nth-child(2){animation-delay:6s}
.quote:nth-child(3){animation-delay:12s}
@keyframes fade{0%,100%{opacity:0} 10%,30%{opacity:1} 33%,66%{opacity:0}}

.btn.spark{position:relative; overflow:hidden}
.btn.spark:active::after, .btn.spark.clicked::after{
  content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(96,165,250,.25), transparent 40%);
  animation:spark .9s ease;
}
@keyframes spark{ to{ opacity:0; transform:scale(2);} }

.badges{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:1rem auto}
.badge{background:#111827;border:1px solid #1f2937;border-radius:.6rem;padding:.35rem .6rem;color:#9ca3af;font-size:.9rem}