/* GoGo Capital — Professional build (2025) */
:root{
  --bg-0:#13223b;
  --bg-1:#162a4d;
  --bg-2:#1a355f;
  --panel: rgba(255,255,255,.08);
  --border: rgba(180,205,255,.28);
  --text:#eaf2ff;
  --muted:#d2e0f6;
  --heading:#ffffff;
  --primary-1:#0a84ff;
  --primary-2:#58b4ff;
  --accent:#12d4c7;
  --shadow: 0 10px 28px rgba(2,6,23,.35);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  color:var(--text);
  background:
    radial-gradient(1100px 800px at 75% -10%, rgba(10,132,255,.32), transparent 60%),
    radial-gradient(900px 700px at 0% 0%, rgba(18,212,199,.28), transparent 55%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 55%, var(--bg-0) 100%);
  min-height:100vh;
  line-height:1.7;
}

/* Typography */
h1,h2,h3{font-family:'Playfair Display', serif; color:var(--heading); margin:.2rem 0 .6rem}
p{margin:.2rem 0 1rem}
.small{font-size:.95rem; color:var(--muted)}

/* Layout */
.container{width:min(1200px, 92vw); margin:0 auto}
.section{padding: clamp(4rem, 7vw, 6rem) 0}
.grid-2{display:grid; gap:1.25rem; grid-template-columns: 1.05fr 1fr}
@media (max-width: 980px){ .grid-2{ grid-template-columns: 1fr }}

/* Header */
header{
  position:sticky; top:0; z-index:40;
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(10,15,25,.85), rgba(10,15,25,.55));
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding: .9rem 0}
.brand{font-weight:900; letter-spacing:.5px; font-size:1.6rem; color:var(--heading); text-decoration:none;}
.brand:hover{color:#fff;}
nav{ display:flex; align-items:center; justify-content:flex-end; gap:.25rem; flex:1 1 auto; flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; }
nav::-webkit-scrollbar{ display:none }
nav a{
  color:var(--muted);
  padding:.45rem .65rem; border-radius:12px; text-decoration:none; font-weight:600; font-size:.92rem;
  transition: all .2s ease;
}
nav a:hover{ color:var(--text); background: rgba(255,255,255,.06)}
nav a.active{ color:var(--text); background: linear-gradient(180deg, rgba(10,132,255,.32), rgba(18,212,199,.12))}

/* Mobile nav */
.menu-btn{display:none; background:none; border:1px solid var(--border); color:var(--text); padding:.5rem .7rem; border-radius:12px}
@media (max-width: 900px){
  .menu-btn{display:inline-flex}
  nav{ display:none; position:absolute; top:60px; right:0; background:rgba(10,15,25,.98); border:1px solid var(--border); border-radius:14px; padding:.4rem; box-shadow:var(--shadow); white-space:normal; overflow-x:visible }
  nav.open{ display:grid }
  nav a{ margin:.15rem 0; min-width: 220px }
}

/* Hero */
.hero{
  padding: clamp(5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(1400px 900px at 65% -10%, rgba(10,132,255,.32), transparent 60%),
    radial-gradient(1200px 900px at 10% -10%, rgba(18,212,199,.28), transparent 60%);
}
.kicker{ color: var(--primary-2); font-weight:800; letter-spacing:.18em; text-transform:uppercase; font-size:.85rem}
.display{
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  font-weight:900; letter-spacing:-.35px; line-height:1.06;
  background: linear-gradient(90deg, #eaf2ff, #cfe8ff 60%, #b6fff2);
  -webkit-background-clip:text; background-clip:text; color:transparent
}
.sub{ color:#cfe0ff; font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 68ch}

/* Components */
.card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.h{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem}
.h p{color:#cfe0ff; max-width: 70ch}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.6rem; font-weight:800; text-decoration:none;
  padding:.85rem 1.15rem; border-radius:14px; border:1px solid rgba(255,255,255,.1); transition:transform .2s ease, box-shadow .2s ease, background .2s ease;}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-primary{ background: linear-gradient(135deg, var(--primary-1), var(--accent)); color:#031322}
.btn-ghost{ background: rgba(255,255,255,.06); color:var(--text)}

/* Lists */
.tick{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem}
.tick li{ display:flex; gap:.6rem; align-items:flex-start}
.tick li:before{ content:"▸"; color: var(--primary-2); margin-top:.2rem}

/* Figure */
.figure{
  background: linear-gradient(180deg, rgba(10,132,255,.08), rgba(0,214,209,.06));
  border:1px solid var(--border);
  border-radius: 14px; padding: 1rem;
}
.caption{ color:#b9c9e6; font-size:.92rem; margin-top:.5rem}

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

/* Footer */
footer{ padding: 3.5rem 0 4rem; border-top:1px solid var(--border); color:#c6d7f1}