:root{
    --primary:#060644;        /* Deep Navy */
    --secondary:#274C77;      /* Steel Blue */
    --accent:#D4AF37;         /* Royal Gold */
    --light:#F9F7F4;          /* Porcelain */
    --dark:#03032B;           /* Midnight */
    --gray:#6B7280;           /* Slate */
    --border:#E5E7EB;         /* Border Gray */
    --ring:0 12px 28px rgba(3,3,43,.12);
    --ring-strong:0 18px 48px rgba(3,3,43,.18);
    --radius:16px; --radius-sm:12px; --radius-lg:22px;
    --container:1200px; --g1:8px; --g2:12px; --g3:16px; --g4:20px; --g5:28px; --g6:40px; --g7:64px;
    --trans:all .25s ease;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif; color:var(--dark); background:linear-gradient(180deg, #ffffff 0%, #fcfbf8 100%);} 
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.875rem 1.1rem; border-radius:14px; border:1px solid transparent; font-weight:600; cursor:pointer; transition:var(--trans)}
.btn-primary{background:var(--primary); color:#fff; box-shadow:var(--ring)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:var(--ring-strong)}
.btn-ghost{background:#fff; color:var(--primary); border-color:var(--border)}
.badge{font-size:.5rem; padding:.15rem .25rem; border-radius:999px; border:1px solid var(--border); color:var(--gray); background:#fff}
.badge-live{color:#0a7a3d; border-color:#a9e0c3; background:#eafaf1}
.badge-beta{color:#9c6a00; border-color:#ffebb2; background:#fff7dd}
.badge-soon{color:#7a0a0a; border-color:#f2c5c5; background:#fff1f1}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--border); backdrop-filter:saturate(180%) blur(6px)}
.site-header__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:.75rem}
.brand__logo{width:34px; height:34px; border-radius:10px; background:radial-gradient(120% 120% at 20% 20%, var(--accent) 0%, #f7e7b2 35%, #fff7d6 60%, #ffffff 100%); box-shadow:inset 0 0 0 2px rgba(212,175,55,.25)}
.brand__name{font-weight:800; letter-spacing:.2px; color:var(--primary)}
.nav{display:flex; align-items:center; gap:18px}
.nav a{padding:10px 12px; border-radius:10px; color:var(--dark)}
.nav a:is(:hover,:focus){background:#f8f9fb}
.nav .dim{opacity:.65}
.nav .with-badge{display:inline-flex; align-items:center; gap:8px}

/* Mobile Nav */
.hamburger{display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--border); background:#fff}
.mobile-panel{display:none; position:fixed; inset:64px 0 0 0; background:#fff; border-top:1px solid var(--border); padding:var(--g5) var(--g4)}
.mobile-panel a{display:block; padding:12px 14px; border-radius:12px}
.mobile-panel a + a{margin-top:6px}

/* Hero */
.hero{position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-20% -40% auto -40%; height:90%; background:radial-gradient(900px 600px at 85% -10%, rgba(109,168,255,.20), transparent 60%), radial-gradient(1200px 700px at -20% -30%, rgba(212,175,55,.12), transparent 60%);} 
.hero__inner{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--g6); align-items:center; padding:var(--g7) 0}
.hero h1{font-size:clamp(2rem, 3.6vw, 3.2rem); line-height:1.05; color:var(--primary); margin:0 0 var(--g3)}
.hero p.lead{font-size:clamp(1rem, 1.2vw, 1.15rem); color:#3c3d56; max-width:60ch; margin:0 0 var(--g5)}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px}
.hero-fig{position:relative; aspect-ratio:4/3; background:linear-gradient(160deg, #ffffff 0%, #f6f7fb 60%, #f1f3f8 100%); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--ring)}
.hero-badge{position:absolute; left:16px; top:16px; padding:10px 12px; border-radius:12px; background:#fff; border:1px solid var(--border); box-shadow:var(--ring); font-weight:600; color:var(--primary)}

/* Stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--g4); margin:var(--g6) 0}
.stat{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:var(--g5); box-shadow:var(--ring)}
.stat strong{display:block; font-size:clamp(1.6rem, 2.6vw, 2.1rem); color:var(--primary)}
.stat span{color:var(--gray)}

/* Search */
.search{background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--ring); padding:var(--g4); display:flex; gap:12px; align-items:center}
.search input{flex:1; border:1px solid var(--border); border-radius:12px; padding:14px 14px; font-size:1rem}

/* Pillars */
.section{padding:var(--g7) 0}
.section-title{display:flex; align-items:center; gap:10px; margin-bottom:var(--g5)}
.section-title .dot{width:10px; height:10px; border-radius:999px; background:var(--accent); box-shadow:0 0 0 6px rgba(212,175,55,.18)}
.grid{display:grid; gap:var(--g4)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}

.card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--ring); padding:var(--g5); display:flex; flex-direction:column; gap:12px; min-height:100%}
.card h3{margin:0; font-size:1.15rem; color:var(--primary)}
.card p{margin:0; color:#3e4157}
.card .actions{margin-top:auto; display:flex; gap:10px; flex-wrap:wrap}

.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; background:#fff; border:1px solid var(--border); border-radius:999px; color:var(--gray); font-weight:600}

/* Spotlight lists */
.list{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--g3)}
.list a{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#fff}
.list a:hover{transform:translateY(-1px); box-shadow:var(--ring); border-color:#d9dee6}

/* Newsletter & CTA */
.cta{background:linear-gradient(180deg, #ffffff 0%, #f8f6f0 100%); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--g6); box-shadow:var(--ring)}
.cta h2{margin:0 0 var(--g3); color:var(--primary)}
.cta .row{display:grid; grid-template-columns:1fr 1fr; gap:var(--g5); align-items:center}

/* Footer */
.site-footer{margin-top:var(--g7); padding:var(--g6) 0; border-top:1px solid var(--border); background:#fff}
.site-footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--g6)}
.site-footer h4{margin:0 0 10px; color:var(--primary)}
.site-footer a{color:#3d4162}
.copyright{margin-top:var(--g5); color:var(--gray); font-size:.92rem}

/* Responsive */
@media (max-width: 960px){
    .hero__inner{grid-template-columns:1fr}
    .stats{grid-template-columns:repeat(2,1fr)}
    .grid.cols-3{grid-template-columns:1fr}
    .grid.cols-4{grid-template-columns:repeat(2,1fr)}
    .cta .row{grid-template-columns:1fr}
    .nav{display:none}
    .hamburger{display:inline-flex; align-items:center; justify-content:center}
    .mobile-panel{display:block; transform:translateY(-8px); opacity:0; pointer-events:none; transition:var(--trans)}
    .mobile-panel.open{transform:translateY(0); opacity:1; pointer-events:auto}
}
    /* News / Learn / AI preview styles */
.kicker{font-weight:800; letter-spacing:.5px; font-size:.78rem; color:var(--secondary); text-transform:uppercase}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{padding:6px 10px; background:#fff; border:1px solid var(--border); border-radius:999px; font-weight:600; color:#233}
.teaser-list{display:grid; gap:10px}
.teaser-list a{padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#fff}
.teaser-list a:hover{box-shadow:var(--ring)}
.news-grid .card{min-height:auto}

.learn-tracks .card ul{margin:0; padding-left:18px; color:#3e4157}
.learn-tracks .card li{margin:.25rem 0}

.ai-box{display:grid; grid-template-columns:1.2fr .8fr; gap:var(--g5); align-items:center}
.ai-demo{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:var(--g5); box-shadow:var(--ring)}
.ai-demo input{width:100%; padding:14px; border:1px solid var(--border); border-radius:12px; margin-bottom:10px}
.ai-demo .hint{font-size:.92rem; color:#667}
.features{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}

@media (max-width:960px){
    .ai-box{grid-template-columns:1fr}
    .features{grid-template-columns:1fr}
}

/* Make the hero decoration non-interactive and behind content */
.hero { position: relative; }
.hero::before {
  z-index: 0;
  pointer-events: none;     /* <-- important */
}

/* Ensure real content sits above the decoration */
.hero__inner,
.hero .container,
.hero .hero-copy,
.hero .stats,
.hero .search {
  position: relative;
  z-index: 1;
}