:root{
  --primary:#1A237E; --neutral:#E0E0E0; --success:#4CAF50; --warning:#FFC107; --ink:#111827;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter, Roboto, ui-sans-serif, system-ui;color:var(--ink);background:#fff;line-height:1.5}
.container{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.85);backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid #eee}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav a{color:#374151;text-decoration:none;font-weight:500;margin-left:24px}.nav a:hover{color:#111827}
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:16px;padding:.6rem 1rem;border:1px solid var(--primary);color:var(--primary);font-weight:600}

/* HERO uses CSS background, not <img> to avoid layering issues */
.hero{
  position:relative;
  color:#fff;
  background:#0B1A44 url('./assets/hero-evening-wide.png') no-repeat top center / contain;
  overflow:hidden;
}
.hero .wrap{padding:6rem 0 28rem;position:relative;z-index:2}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(20,40,100,.75) 0%, rgba(20,40,100,.45) 40%, rgba(20,40,100,0) 100%)}
.badge{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.25rem .75rem;font-size:.75rem;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08)}
h1{font-size:clamp(2rem,3.5vw,3.75rem);line-height:1.15;margin:.8rem 0 0;color:#fff}
.hero p{opacity:.92;margin:1rem 0 0;font-size:clamp(1rem,1.4vw,1.125rem);max-width:60ch;color:#fff}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}
.cta-primary{background:var(--success);color:#fff;border:none}
.cta-secondary{color:#fff;border:1px solid rgba(255,255,255,.4);background:transparent}

/* Cards under hero */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:-96px;position:relative;z-index:2}
.card{background:#fff;border:1px solid #eee;border-radius:16px;padding:1.25rem;box-shadow:0 6px 24px rgba(0,0,0,.08);text-align:center}
.card .icon{width:40px;height:40px;color:#525252;margin:0 auto}

/* Trust strip */
.trust{border-top:1px solid #eee}
.trust .bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2rem;padding:2rem 0}
.trust .bar img{opacity:.7;height:32px}
.trust .bar img.solana{height:40px}
.divider{width:1px;height:24px;background:#e5e5e5}

/* Why-tokenize section */
.section{border-top:1px solid #eee;background:#fafafa}
.section .cards3{margin-top:0;padding:2rem 0}
.section .card{text-align:left}

/* Contact */
.contact{border-top:1px solid #eee;background:#fff;padding:2rem 0}
.form{display:grid;gap:.75rem;border:1px solid #eee;border-radius:16px;padding:1.25rem;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.input,.select,.textarea{border:1px solid #e5e5e5;border-radius:12px;padding:.8rem;font-size:.9rem}
.submit{background:var(--success);color:#fff;border:none;border-radius:16px;padding:.8rem 1rem;font-weight:700}

/* Footer */
.footer{border-top:1px solid #eee}
.footer .row{display:flex;align-items:center;justify-content:space-between;padding:2rem 0;color:#6b7280;font-size:.9rem}
.footer img{height:16px;opacity:.7}

@media (max-width:900px){
  .cards3{grid-template-columns:1fr}
}
@media (max-width: 768px) {
  .nav a {
    margin-left: 12px;
  }
  .nav a:nth-child(3), .nav a:nth-child(4) {
    display: none;
  }
  .contact .container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hero .wrap {
    padding-bottom: 24rem;
  }
  .hero-ctas {
    flex-direction: column;
    width: 100%;
  }
  .footer .row {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  .footer .row div {
    flex-direction: column;
    gap: .25rem;
  }
}