/* ====== Base / Theme ====== */
:root{
    --bg: #0b1220;
    --panel: #0f172a;
    --muted: #9aa4b2;
    --text: #e6eaf0;
    --brand: #7c3aed; /* purple */
    --brand-2: #22d3ee; /* cyan */
    --radius: 18px;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background: radial-gradient(1200px 600px at 15% -10%, rgba(124,58,237,.25), transparent 60%),
                radial-gradient(1200px 600px at 90% 10%, rgba(34,211,238,.20), transparent 60%),
                var(--bg);
    color: var(--text);
    font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  }
  
  /* ====== Layout ====== */
  .container{max-width: 980px; margin: 0 auto; padding: 28px 22px;}
  .section{margin: 28px 0}
  
  /* ====== Header / Nav ====== */
  .nav{
    position: sticky; top:0; z-index: 10;
    backdrop-filter: blur(10px);
    background: rgba(15,23,42,.6);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .nav-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;}
  .brand{
    display:flex; gap:10px; align-items:center; font-weight:700; letter-spacing:.3px;
  }
  .brand-badge{
    width:28px; height:28px; display:grid; place-items:center;
    border-radius:10px; background: linear-gradient(135deg,var(--brand),var(--brand-2));
    box-shadow: var(--shadow); color:white; font-size:14px; font-weight:800;
  }
  .nav a{color:var(--text); text-decoration:none; opacity:.9}
  .nav a:hover{opacity:1}
  .nav-links{display:flex; gap:16px}
  
  /* ====== Hero ====== */
  .hero{
    margin-top: 22px;
    padding: 36px;
    border-radius: var(--radius);
    background:
      linear-gradient(180deg, rgba(124,58,237,.22), rgba(124,58,237,.08) 30%, rgba(34,211,238,.06)),
      linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02)),
      var(--panel);
    box-shadow: var(--shadow);
  }
  .kicker{color: var(--muted); text-transform: uppercase; letter-spacing: .18em; font-size: .8rem}
  .hero h1{margin: 8px 0 6px 0; font-size: clamp(1.6rem, 3.5vw, 2.2rem); line-height:1.25}
  .hero p{color: #d2d8e3; margin: 6px 0 0 0}
  
  /* ====== Cards / Grid ====== */
  .grid{display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));}
  .card{
    background: linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02)), var(--panel);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
  }
  .card h3{margin:0 0 6px; font-size:1.05rem}
  .muted{color: var(--muted); font-size:.94rem}
  
  /* ====== Buttons ====== */
  .btn{
    display:inline-block; padding:10px 14px; border-radius:12px;
    color:#0b1220; background: linear-gradient(135deg,var(--brand),var(--brand-2));
    text-decoration:none; font-weight:700; letter-spacing:.3px;
    border: none;
  }
  .btn:hover{filter:brightness(1.06)}
  
  /* ====== Content helpers ====== */
  .prose h2{margin: 12px 0 6px}
  .prose table{width:100%; border-collapse: collapse; border-radius:12px; overflow:hidden}
  .prose table td,.prose table th{border:1px solid rgba(255,255,255,.08); padding:10px}
  .prose table th{background: rgba(255,255,255,.04)}
  img.hero-img{
    width:100%; height:auto; border-radius:var(--radius); box-shadow: var(--shadow); display:block;
  }
  
  /* ====== Footer ====== */
  .footer{margin: 24px 0 40px; text-align:center; color:var(--muted); font-size:.9rem}
  .footer a{color:inherit}