﻿
    :root{
      --bg:#0b1020;
      --panel:#121a2f;
      --muted:#95a3c6;
      --text:#ebf1ff;
      --brand:#6aa2ff;
      --brand2:#7ef6c9;
      --ok:#36d399;
      --warn:#ffdd66;
      --radius:16px;
      --shadow:0 18px 46px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    body{margin:0;background:radial-gradient(1200px 600px at 10% -10%,#1b2a57 0%,rgba(27,42,87,0) 60%),radial-gradient(1200px 600px at 100% 10%,#3b2a74 0%,rgba(59,42,116,0) 55%),var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
    a{color:inherit;text-decoration:none}

    .wrap{max-width:1120px;margin:0 auto;padding:24px}

    header{display:flex;justify-content:space-between;align-items:center;padding:8px 0}
    .brand{display:flex;gap:10px;align-items:center}
    .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:var(--shadow)}
    .brand h1{margin:0;font-size:18px;font-weight:800;letter-spacing:.2px}
    .chip{font-size:12px;color:#a9c6ff;background:#182a52;border:1px solid #2c4b8a;padding:4px 10px;border-radius:999px}

    .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center;margin-top:18px}
    .card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);box-shadow:var(--shadow)}
    .hero .left{padding:28px}
    .title{font-size:34px;line-height:1.2;margin:0 0 12px;font-weight:900}
    .sub{color:var(--muted);font-size:16px;margin:0 0 16px}
    .bullets{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 22px}
    .tag{font-size:13px;background:#0e1a36;border:1px solid #233978;color:#cfe0ff;padding:6px 10px;border-radius:10px}

    .cta-row{display:flex;gap:12px;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 18px;border-radius:12px;font-weight:800;cursor:pointer;transition:transform .08s ease}
    .btn:active{transform:translateY(1px)}
    .btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#001329;box-shadow:0 12px 24px rgba(106,162,255,.25)}
    .btn-ghost{border:1px solid rgba(255,255,255,.18);color:#d6e6ff;background:transparent}

    .media{min-height:360px;display:flex;align-items:center;justify-content:center;padding:16px}
    .placeholder{width:100%;max-width:520px;aspect-ratio:16/10;border-radius:18px;border:1px dashed rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;color:#a8b6da}
    .placeholder small{opacity:.9}
    .placeholder img{max-width:100%;max-height:100%;border-radius:16px;object-fit:contain}

    .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0}
    .item{padding:18px}
    .item h3{margin:0 0 8px;font-size:16px}
    .item p{margin:0;color:var(--muted);font-size:14px}

    .syllabus{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:10px}
    .row{padding:16px}
    .row b{color:var(--ok)}
    .note{font-size:12px;color:#aab7d7;margin-top:8px}

    .testi{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
    .bubble{padding:16px;border-left:3px solid var(--brand);font-size:14px;color:#dfe7ff}

    .faq{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .qa{padding:18px}
    .qa h4{margin:0 0 6px}
    .disclaimer{padding:18px;color:#cbd7ff;font-size:13px}

    footer{margin:40px 0 90px;color:#9fb0d3;font-size:13px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}

    /* Floating CTA */
    .floating-cta{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#001329;font-weight:800;text-align:center;padding:16px;font-size:16px;box-shadow:0 -4px 18px rgba(0,0,0,.35);z-index:9999}

    @media (max-width:980px){
      .hero{grid-template-columns:1fr}
      .grid3{grid-template-columns:1fr}
      .syllabus{grid-template-columns:1fr}
      .testi{grid-template-columns:1fr}
      .faq{grid-template-columns:1fr}
      .title{font-size:28px}
    }
