:root{
  --navy:#1A1F71; --orange:#F26A21; --cream:#F7F4EE; --ink:#0E1238; --muted:rgba(255,255,255,.6);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:#fff; background:linear-gradient(180deg, #0B0F34 0%, #0E1238 100%);
}
img{max-width:100%;display:block}
.container{width:min(1200px, 92%); margin:0 auto}
.section{position:relative; padding:96px 0}
.section-title{font-family:'Space Grotesk', sans-serif; font-size:40px; margin:0 0 24px}
.lead{font-size:20px; color:var(--muted); max-width:820px}

/* Header */
.site-header{position:fixed; top:0; left:0; right:0; z-index:50; background:linear-gradient(180deg, rgba(11,15,52,0.85), rgba(11,15,52,0))}
.site-header .nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0}
.logo{width:40px; height:40px; border-radius:8px; background:var(--orange); display:grid; place-items:center; font-weight:800; color:#0B0F34}
.primary-nav a{color:#fff; text-decoration:none; margin-left:20px}
.primary-nav .btn{margin-left:24px}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:16px; top:16px; background:#000; color:#fff; padding:8px 12px}

/* Buttons */
.btn{display:inline-block; padding:12px 18px; border-radius:999px; border:1px solid transparent; font-weight:600}
.btn-orange{background:var(--orange); color:#0B0F34}
.btn-orange:hover{filter:brightness(1.05)}

/* Hero */
.hero{min-height:100vh; display:grid; place-items:center; text-align:center; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:-1}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.6) contrast(1.05)}
.hero-gradient{position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 40%, rgba(26,31,113,.5), transparent)}
#waveCanvas{position:absolute; bottom:-2px; left:0; width:100%; height:180px; opacity:.35}
.hero .display{font-family:'Space Grotesk', sans-serif; font-size:56px; line-height:1.05; margin:0 0 16px}
.hero .lead{margin:0 auto 28px}

/* Grid */
.grid-2{display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:center}
.media img{border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.45)}

/* Stats */
.stats{display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; margin-top:24px}
.stat{background:rgba(255,255,255,.06); padding:16px; border-radius:12px; border:1px solid rgba(255,255,255,.08)}
.stat .num{font-family:'Space Grotesk'; font-size:28px; display:block}
.stat .label{color:var(--muted); font-size:14px}

/* Solution */
.solution-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px}
.card{background:rgba(255,255,255,.06); padding:24px; border-radius:16px; border:1px solid rgba(255,255,255,.08)}
.card h3{margin-top:0}

/* Technology */
.tech-cards{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
.tech-card{background:rgba(255,255,255,.06); padding:20px; border-radius:14px; border:1px solid rgba(255,255,255,.08)}
.schematic{margin-top:28px}
.schematic img{width:100%; border-radius:16px; opacity:.9}

/* Impact */
.columns{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:12px}
.col{background:rgba(255,255,255,.06); padding:20px; border-radius:14px; border:1px solid rgba(255,255,255,.08)}
.quote{margin-top:28px; font-size:22px; color:var(--muted); border-left:4px solid var(--orange); padding-left:16px}

/* Roadmap */
.timeline{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:12px}
.timeline li{background:rgba(255,255,255,.06); padding:16px; border-radius:14px; border:1px solid rgba(255,255,255,.08)}
.timeline .phase{display:inline-block; background:var(--orange); color:#0B0F34; font-weight:700; padding:4px 8px; border-radius:999px; margin-right:8px}

/* About */
.team{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:12px}
.member{background:rgba(255,255,255,.06); padding:20px; border-radius:14px; border:1px solid rgba(255,255,255,.08)}
.avatar{width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg, var(--orange), #FFAA71)}

/* Contact */
.contact-card{background:rgba(255,255,255,.06); padding:20px; border-radius:14px; border:1px solid rgba(255,255,255,.08); font-style:normal}

/* Footer */
.site-footer{padding:36px 0; border-top:1px solid rgba(255,255,255,.08); color:var(--muted)}

/* Reveal animations */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1; transform:none}

/* Responsive */
@media (max-width: 1024px){
  .grid-2{grid-template-columns:1fr}
  .solution-grid{grid-template-columns:1fr 1fr}
  .tech-cards{grid-template-columns:1fr 1fr}
  .columns{grid-template-columns:1fr}
  .team{grid-template-columns:1fr 1fr}
  .hero .display{font-size:44px}
}
@media (max-width: 640px){
  .solution-grid{grid-template-columns:1fr}
  .tech-cards{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
}