:root{
  --bg:#0b0b0e; --border:rgba(0,0,0,.08);
  --indigo:#4f46e5; --indigo-100:#e0e7ff; --indigo-700:#4338ca;
  --muted:#6b7280; --card:rgba(255,255,255,.82);
  --radius:22px; --radius-sm:14px; --container:1200px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial;
     color:#0f172a; background:#f6f7fb; line-height:1.55; opacity:0; transition:opacity .35s ease}
body.ready{opacity:1}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 20px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 20px; border-radius:var(--radius);
     font-weight:700; font-size:14px; border:0; cursor:pointer; transition:.2s}
.btn-primary{background:var(--indigo); color:#fff; box-shadow:0 10px 25px rgba(2,6,23,.15)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.25)}
.btn-plain{background:#fff; border:1px solid var(--indigo-100); color:#4338ca; padding:10px 14px; border-radius:14px; font-weight:600; cursor:pointer}
.badge{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#eef2ff; color:#4338ca; font-size:12px}

header.site{position:sticky; top:0; z-index:40; backdrop-filter:saturate(1.2) blur(8px); background:rgba(17,24,39,.9); color:#fff; border-bottom:1px solid rgba(255,255,255,.08)}
header .nav{display:flex; gap:22px}
header .nav a{color:#e5e7eb; font-size:14px}
header .nav a:hover{color:#fff; text-decoration:underline}

footer{background:#fff; border-top:1px solid var(--border)}
footer .cols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px}
@media(max-width:900px){footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:620px){footer .cols{grid-template-columns:1fr}}

.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 10px 25px rgba(2,6,23,.08)}

.section-title{text-align:center; margin:0 0 28px}
.section-title h2{font-size:32px; margin:6px 0 0}
.section-title p{color:var(--muted); font-size:14px; margin:8px auto 0; max-width:640px}

.promo{position:sticky; top:0; z-index:50; background:rgba(2,6,23,.9); color:#fff; border-bottom:1px solid rgba(255,255,255,.08)}
.promo .row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 0}
.progress{width:140px; height:8px; border-radius:999px; background:rgba(255,255,255,.2); overflow:hidden}
.progress > i{display:block; height:100%; background:#fff; width:0}

.hero{position:relative; color:#fff; background:url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=2060&auto=format&fit=crop') center/cover no-repeat}
.hero::before{content:""; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.7),rgba(0,0,0,.5), #0b0b0e)}
.hero .inner{position:relative; padding:110px 0 80px}
.hero h1{font-size:44px; line-height:1.1; margin:8px 0}
.hero p{color:#e5e7eb; font-size:18px; max-width:560px}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.hero .links{margin-top:8px; display:flex; gap:10px; font-size:12px; color:#cbd5e1}

.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}}

.catalog{background:linear-gradient(#fafafa,#ffffff)}
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.cards{grid-template-columns:1fr}}
.course{overflow:hidden}
.course .cover{position:relative; height:190px}
.course .cover img{width:100%; height:100%; object-fit:cover}
.course .cover::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.6),transparent)}
.course .chips{position:absolute; left:14px; top:14px; display:flex; gap:8px; z-index:2}
.chip{background:rgba(0,0,0,.5); color:#fff; border:1px solid rgba(255,255,255,.25); padding:6px 10px; border-radius:999px; font-size:12px}
.course .body{padding:18px}
.price{display:flex; justify-content:space-between; align-items:center}
.price .was{font-size:12px; color:#6b7280; text-decoration:line-through}
.price .now{font-size:20px; font-weight:800}
.btn-line{display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:6px}

.video-section{background:#0b0b0e; color:#fff; border-top:1px solid rgba(255,255,255,.08)}
.video{width:100%; max-width:900px; aspect-ratio:16/9; margin:0 auto; overflow:hidden; border-radius:var(--radius); border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04)}
.video video{width:100%; height:100%; object-fit:cover}

.field{display:flex; flex-direction:column; gap:6px}
.input{padding:12px 14px; border-radius:14px; border:1px solid #e5e7eb; outline:0}

.modal{position:fixed; inset:0; display:none; place-items:center; z-index:60}
.modal.open{display:grid}
.modal .dim{position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px)}
.modal .box{position:relative; z-index:1; width:min(460px,90vw); background:#fff; border-radius:20px; padding:22px; box-shadow:0 10px 25px rgba(2,6,23,.2)}

.center{text-align:center}
.muted{color:var(--muted)}
.tabular{font-variant-numeric:tabular-nums}
.mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px} .mt-6{margin-top:24px} .mt-8{margin-top:32px}
.py-16{padding:64px 0} .py-14{padding:56px 0}