:root{--bg:#eef7f3;--fg:#0f1d19;--muted:#5b7d70;--primary:#e74f3a;--accent:#1aa885;--card:#ffffff;--border:#dde8e2;--shadow:0 10px 30px rgba(0,0,0,0.06);--space:20px}
.theme-dark{--bg:#0b1e22;--fg:#e3f0ec;--muted:#8fb1a4;--primary:#e74f3a;--accent:#1aa885;--card:#0e2a2f;--border:#193b40;--shadow:0 12px 36px rgba(0,0,0,0.35)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.nav{position:sticky;top:0;z-index:50;background:rgba(0,0,0,0.04);backdrop-filter:saturate(180%) blur(8px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:60px;gap:var(--space)}
.brand{font-weight:700}
.menu{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space);white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.menu::-webkit-scrollbar{display:none}
.menu a{text-decoration:none;color:var(--fg)}
.actions{display:flex;align-items:center;gap:var(--space);margin-left:150px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);text-decoration:none;color:var(--fg);background:var(--card);font-size:14px;line-height:1;font-weight:600;transition:transform .15s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease}
.btn.primary{background:linear-gradient(180deg,#e74f3a,#d84533);color:#fff;border:none;box-shadow:0 8px 20px rgba(231,79,58,.26)}
.btn.primary:hover{background:#ef5b46;box-shadow:0 10px 24px rgba(231,79,58,.32);transform:translateY(-1px)}
.btn.primary:active{transform:translateY(0);box-shadow:0 6px 16px rgba(231,79,58,.22)}
.btn.ghost{background:transparent}
.btn-equal{min-width:160px;justify-content:center;height:42px}
.icon-only{width:42px;height:42px;padding:0;justify-content:center}
.icon-avatar{width:20px;height:20px;border-radius:999px;background:linear-gradient(135deg,#b9e2d6,#89cbb9);display:flex;align-items:center;justify-content:center;color:#0b4b3a;animation:float 3s ease-in-out infinite}
.icon-avatar svg{width:13px;height:13px}
.icon.plus svg{width:14px;height:14px}
.icon.sun svg,.icon.moon svg{width:18px;height:18px}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-2px)}100%{transform:translateY(0)}}
.hero{position:relative;padding:96px 0;background:linear-gradient(160deg,rgba(9,30,36,0.85),rgba(18,58,50,0.85)), radial-gradient(1200px 600px at 20% 0%, rgba(26,168,133,0.25), transparent), radial-gradient(1000px 500px at 80% 0%, rgba(231,79,58,0.18), transparent);border-bottom:1px solid var(--border)}
.hero .badge{display:inline-flex;align-items:center;gap:8px;background:var(--card);color:var(--fg);border-radius:999px;padding:8px 14px;box-shadow:var(--shadow);border:1px solid var(--border)}
.hero .badge .icon.star{color:#f5bb00}
.hero h1{font-size:56px;line-height:1.1;margin:20px 0}
.hero p{color:var(--muted);font-size:18px}
.hero .cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.chips{display:flex;gap:10px;margin:18px 0;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;background:var(--card);border:1px solid var(--border);border-radius:999px;box-shadow:var(--shadow);color:var(--fg)}
.bg-dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(26,168,133,0.28) 1.5px, transparent 1.5px);background-size:24px 24px;mask-image:linear-gradient(to bottom,rgba(0,0,0,0.05),rgba(0,0,0,0.9))}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px}
.metric{padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--card);text-align:center;box-shadow:var(--shadow)}
.metric-icon{width:64px;height:64px;border-radius:999px;background:linear-gradient(135deg,#b9e2d6,#89cbb9);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;color:#0b4b3a}
.metric-icon svg{width:32px;height:32px}
.metric-value{font-size:24px;font-weight:700;color:var(--accent)}
.metric-label{color:var(--muted)}
.instructors{padding:64px 0}
.instructors h2{font-size:28px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.card{padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--card);text-align:center;box-shadow:var(--shadow)}
.avatar{width:64px;height:64px;border-radius:999px;background:linear-gradient(135deg,#b9e2d6,#89cbb9);margin:0 auto 12px}
.card-title{font-weight:700}
.card-sub{color:var(--muted);font-size:14px}
.card-rating{color:#f5bb00;margin-top:6px}
.faq{padding:64px 0}
.faq h2{font-size:28px}
.accordion{list-style:none;padding:0;margin:16px 0}
.accordion-item{border:1px solid var(--border);border-radius:12px;background:var(--card);overflow:hidden;margin-bottom:10px}
.accordion-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px;background:transparent;color:var(--fg);border:none;font-size:16px}
.accordion-body{padding:0 16px;max-height:0;overflow:hidden;transition:max-height .25s ease}
.accordion-item.active .accordion-body{padding:16px;max-height:180px}
.footer{padding:32px 0;color:var(--muted)}
.cookiebar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:14px;max-width:860px;width:calc(100% - 32px);z-index:60}
.cookie-text{color:var(--muted);margin-bottom:10px}
.cookie-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:768px){
  .hero h1{font-size:36px}
  .metrics{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
}

.nav .btn.btn-equal{min-width:150px;height:40px}
.nav .btn.primary.btn-equal{padding:8px 18px;border-radius:8px;box-shadow:0 4px 12px rgba(231,79,58,.24)}
.nav .btn.primary.btn-equal:hover{box-shadow:0 6px 16px rgba(231,79,58,.28);transform:translateY(-1px)}