:root{
  --navy:#0A192F;
  --navy-2:#101f3b;
  --gold:#FFD166;
  --text:#e6eefb;
  --muted:#9fb0c9;
  --card:#0f1d36a6;
  --glass: rgba(255,255,255,0.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--navy);color:var(--text);font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;}

a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1200px;margin:0 auto;padding:0 20px}

header{
  position:fixed;top:0;left:0;right:0;height:64px;
  display:flex;align-items:center;z-index:1000;
  backdrop-filter: saturate(140%) blur(8px);
  background: linear-gradient(180deg, rgba(10,25,47,0.9), rgba(10,25,47,0.5));
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:36px;height:36px}
.brand .title{font-weight:700;letter-spacing:0.2px}
.brand .dot{color:var(--gold)}

nav{margin-left:auto}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{padding:8px 10px;border-radius:8px;color:var(--text);opacity:0.9}
.nav-links a.cta{background:var(--gold);color:#0a0a0a;font-weight:700;box-shadow:0 6px 20px rgba(255,209,102,0.25)}
.nav-links a:hover{background:var(--glass)}

.hamburger{display:none; margin-left:auto; width:40px; height:40px; border-radius:12px; border:1px solid rgba(255,255,255,0.1); align-items:center; justify-content:center; cursor:pointer}
.hamburger span, .hamburger::before, .hamburger::after{
  content:""; display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .2s ease;
}
.hamburger::before{transform:translateY(-6px)}
.hamburger::after{transform:translateY(6px)}

.mobile-menu{
  position:fixed; inset:auto 0 0 0; top:64px; background:rgba(10,25,47,0.96);
  transform:translateY(100%); transition:transform .35s ease; z-index:999; border-top:1px solid rgba(255,255,255,0.06);
}
.mobile-menu .links{display:flex; flex-direction:column; padding:16px}
.mobile-menu .links a{padding:14px 10px; border-bottom:1px solid rgba(255,255,255,0.06); color:var(--text)}

.nav-open .mobile-menu{transform:translateY(0)}
.nav-open .hamburger span{opacity:0}
.nav-open .hamburger::before{transform:translateY(0) rotate(45deg)}
.nav-open .hamburger::after{transform:translateY(0) rotate(-45deg)}

.hero{
  min-height:84vh; display:flex; align-items:center; justify-content:center; text-align:center;
  background:url('assets/hero-bg.svg') center/cover no-repeat;
  padding-top:64px;
}
.hero .badge{display:inline-block; padding:6px 12px; border:1px solid rgba(255,255,255,0.18); border-radius:999px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; color:var(--muted); background:rgba(255,255,255,0.03)}
.hero h1{font-size: clamp(36px, 6vw, 72px); margin:8px 0 10px; line-height:1.05}
.hero h1 .gold{color:var(--gold)}
.hero p{max-width:760px; margin:0 auto 26px; color:#cfd9ea; font-size: clamp(16px, 2.5vw, 20px)}
.actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{padding:12px 18px; border-radius:12px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); color:var(--text); font-weight:600; cursor:pointer}
.btn:hover{background:rgba(255,255,255,0.08)}
.btn.primary{background:var(--gold); color:#0b0b0b; box-shadow:0 10px 30px rgba(255,209,102,0.25)}

.section{padding:64px 0; border-top:1px solid rgba(255,255,255,0.06)}
.section h2{font-size:28px; margin:0 0 16px}
.section p.lead{color:#cbd6ea; max-width:880px}

.grid{display:grid; gap:18px}
.grid.cards{grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));}
.card{background:var(--card); border:1px solid rgba(255,255,255,0.08); padding:16px; border-radius:16px; backdrop-filter: blur(6px)}
.card img{width:100%; height:160px; object-fit:cover; border-radius:12px; margin-bottom:10px}
.card h3{margin:6px 0 2px; font-size:18px}
.card .meta{color:var(--muted); font-size:13px}

.partners{display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap:16px}
.partner{
  background:rgba(255,255,255,0.03); border:1px dashed rgba(255,255,255,0.12); border-radius:12px; padding:18px; text-align:center; color:#b8c7e6
}
.partner:hover{background:rgba(255,255,255,0.06)}

.map-cta{
  display:flex; gap:18px; flex-wrap:wrap; align-items:center; justify-content:space-between; background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08); padding:18px; border-radius:16px;
}
.map-cta img{width:100%; max-width:520px; border-radius:12px; border:1px solid rgba(255,255,255,0.08)}
.map-cta .copy{flex:1; min-width:260px}

.founder{
  display:grid; grid-template-columns: 120px 1fr; gap:16px; align-items:center;
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); padding:18px; border-radius:16px;
}
.founder .avatar{width:100px; height:100px; border-radius:50%; background:#0d1c34; border:2px solid rgba(255,255,255,0.12);
  background-image: radial-gradient(circle at 30% 30%, rgba(255,209,102,0.3), transparent 60%);
}

footer{padding:40px 0; color:#9db0cf; font-size:14px; border-top:1px solid rgba(255,255,255,0.06); background:linear-gradient(180deg, rgba(10,25,47,0.3), rgba(10,25,47,0.8))}

@media (max-width: 880px){
  .nav-links{display:none}
  .hamburger{display:flex}
}

/* ==== Mobile Menu Styles ==== */
.hamburger {
  display:flex; flex-direction:column; justify-content:space-between;
  width:28px; height:20px; background:none; border:none; cursor:pointer;
  position:absolute; right:20px; top:22px; z-index:1100;
}
.hamburger span {
  display:block; height:3px; background:#FFD166; border-radius:2px;
  transition:all .3s ease;
}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px);}

.mobile-nav {
  position:fixed; top:0; right:0; width:250px; height:100%;
  background:rgba(10,25,47,0.95); backdrop-filter:blur(10px);
  box-shadow:-2px 0 12px rgba(255,209,102,0.2);
  transform:translateX(100%); transition:transform .3s ease, opacity .3s ease;
  opacity:0; z-index:1000; display:flex; flex-direction:column;
  padding-top:80px; padding-left:30px; gap:20px;
}
.mobile-nav.show {transform:translateX(0); opacity:1;}
.mobile-nav a {color:#e6eefb; font-size:18px; text-decoration:none;}
.mobile-nav a.cta {color:#FFD166;}
@media (min-width:900px){.hamburger,.mobile-nav{display:none;}}
/* ==== Warm-Gold Shimmer for Mobile Menu ==== */
.mobile-nav::before {
  content:"";
  position:absolute;
  top:0; right:0; bottom:0;
  width:3px;
  background:linear-gradient(180deg,
    rgba(255,209,102,0) 0%,
    rgba(255,209,102,0.5) 50%,
    rgba(255,209,102,0) 100%);
  opacity:0.2;
  animation: shimmerEdge 10s infinite ease-in-out;
  pointer-events:none;
  border-radius:2px;
  box-shadow:0 0 10px rgba(255,209,102,0.3);
}

@keyframes shimmerEdge {
  0%,100% {opacity:0.2; filter:blur(0);}
  50% {opacity:0.7; filter:blur(1px);}
}
/* ==== Hero Headline Fade-in Glow ==== */
.hero h1 {
  opacity: 0;
  transform: translateY(15px);
  animation: headlineFade 2s ease-out forwards;
}

.hero h1 .gold {
  text-shadow: 0 0 8px rgba(255,209,102,0.3);
  animation: goldPulse 6s infinite ease-in-out;
}

@keyframes headlineFade {
  from {opacity:0; transform:translateY(15px);}
  to   {opacity:1; transform:translateY(0);}
}

@keyframes goldPulse {
  0%,100% {text-shadow:0 0 6px rgba(255,209,102,0.3);}
  50% {text-shadow:0 0 14px rgba(255,209,102,0.6);}
}