:root{
  --brand:#1F3A5F; --accent:#6bff81; --ink:#0f172a;
  --muted:#5b6b88; --bg:#f6f8fb; --card:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg) url('assets/img/mesh.png') no-repeat right bottom fixed;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  color:var(--ink)}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
/* Header */
.site-header{background:#fff;border-bottom:1px solid #e6eaf2;position:sticky;top:0;z-index:40}
.site-header .nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{font-weight:800;letter-spacing:.5px;color:var(--brand);text-decoration:none}
.menu-toggle{display:none;background:transparent;border:none;font-size:26px;color:var(--brand)}
.site-header nav{display:flex;gap:18px;align-items:center}
.site-header nav a{padding:8px 2px;text-decoration:none;color:#2b3a55;font-weight:600;position:relative}
.site-header nav a.active,.site-header nav a:hover{color:var(--brand)}
.site-header nav a.active::after,.site-header nav a:hover::after{content:'';position:absolute;left:0;bottom:-6px;width:100%;height:2px;background:var(--accent)}
/* Mobile nav */
@media(max-width:820px){
  .menu-toggle{display:block}
  .site-header .nav{height:auto;padding:10px 0}
  .site-header nav{display:none;flex-direction:column;align-items:flex-start;padding-bottom:10px}
  .site-header nav.open{display:flex}
}
/* Hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:40px 0}
.hero .title{font-size:42px;line-height:1.1;margin:0 0 12px}
.hero .subtitle{font-size:18px;color:var(--muted);margin:0 0 20px}
.btn{display:inline-block;border-radius:14px;padding:12px 18px;font-weight:700;text-decoration:none;transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--brand);color:#fff}
.btn-outline{border:2px solid var(--brand);color:var(--brand)}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0 10px}
.card{background:var(--card);border:1px solid #e6eaf2;border-radius:18px;overflow:hidden;box-shadow:0 4px 24px rgba(31,58,95,.06);transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(31,58,95,.12)}
.card img{display:block;width:100%;height:180px;object-fit:cover}
.card .p{padding:14px 16px;font-weight:700;color:var(--brand)}
/* Two-column */
.twocol{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:start;padding:32px 0}
.sidebar{position:sticky;top:90px}
.sidebar .video-list{background:var(--card);border:1px solid #e6eaf2;border-radius:18px;padding:16px}
.video{display:grid;grid-template-columns:110px 1fr;gap:10px;margin:10px 0;padding:8px;border-radius:12px;border:1px solid #eef2f8;background:#fff}
.video img{width:100%;height:72px;object-fit:cover;border-radius:10px}
.video a{color:var(--ink);text-decoration:none;font-weight:600}
/* Accordion bullets */
.accordion .parent{background:transparent;border:none;width:100%;text-align:left;font-size:20px;font-weight:800;color:var(--brand);padding:8px 0 8px 28px;position:relative;cursor:pointer}
.accordion .parent::before{content:'';position:absolute;left:2px;top:14px;border-left:10px solid var(--brand);border-top:7px solid transparent;border-bottom:7px solid transparent;transform:rotate(90deg);transition:transform .2s ease}
.accordion .parent[aria-expanded="false"]::before{transform:rotate(0)}
.accordion ul{list-style:none;padding-left:18px;margin:0 0 12px}
.accordion li{padding:8px 0 8px 12px;position:relative;color:#1e293b}
.accordion li::before{content:'▸';position:absolute;left:-2px;color:#9fb2cc}
.accordion .children{overflow:hidden;transition:max-height .3s ease}
/* About page */
.about{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start;padding:32px 0}
.profile{background:#fff;border:1px solid #e6eaf2;border-radius:18px;padding:16px;text-align:center}
.profile img{width:100%;border-radius:16px}
.badges{display:grid;gap:12px}
.badges a{display:flex;align-items:center;gap:12px;background:#eef3fb;border:1px solid #dfe7f5;color:#1f2a44;text-decoration:none;padding:12px 14px;border-radius:14px;font-weight:700}
.badges a:hover{background:#e8effc}
.kv{background:#fff;border:1px solid #e6eaf2;border-radius:18px;padding:16px;margin-top:8px}
.kv h4{margin:10px 0 8px;color:var(--brand)}
/* Footer */
.site-footer{margin-top:40px;padding:30px 0;border-top:1px solid #e6eaf2;color:var(--muted);background:#fff}
/* Responsive */
@media(max-width:980px){
  .hero,.twocol{grid-template-columns:1fr}
  .card img{height:160px}
  .card-grid{grid-template-columns:1fr;gap:14px}
  .about{grid-template-columns:1fr}
}