/* ============================================================
   NEXTGEN-LAB — стиль CodaKid: ярко, смело, «игрово»
   ============================================================ */
:root{
  --navy:#14213d;        /* тёмный текст и футер */
  --blue:#2d6fb5;
  --teal:#2ea595;
  --yellow:#f5b81c;
  --red:#e8552f;
  --orange:#ff8a00;      /* главные кнопки */
  --gray:#f5f7fa;
  --muted:#5a6675;
  --r:18px;              /* скругление */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--navy);line-height:1.6;background:#fff}
img{max-width:100%;display:block}
a{text-decoration:none;color:var(--blue)}
h2{font-size:clamp(1.7rem,3.5vw,2.4rem);font-weight:800;text-align:center}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:760px}

/* ---------- КНОПКИ ---------- */
.btn{display:inline-block;background:var(--orange);color:#fff;font-weight:800;border-radius:999px;transition:.2s;border:none;cursor:pointer}
.btn:hover{background:#e57400;transform:translateY(-2px)}
.btn-big{padding:16px 36px;font-size:1.05rem}
.btn-small{padding:9px 20px;font-size:.9rem}
.btn-invert{background:#fff;color:var(--red)}
.btn-invert:hover{background:#ffe9d9}

/* ---------- ШАПКА ---------- */
header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.07)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-size:1.45rem;font-weight:900;color:var(--navy)}
.logo span{color:var(--orange)}
nav ul{display:flex;gap:28px;list-style:none;align-items:center}
nav ul a{color:var(--navy);font-weight:700;font-size:.95rem}
nav ul a:hover{color:var(--orange)}
.burger{display:none;background:none;border:none;font-size:1.7rem;cursor:pointer;color:var(--navy)}

/* ---------- HERO ---------- */
.hero{background:linear-gradient(180deg,#fff8ef 0%,#fff 100%);padding:70px 0}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center}
.eyebrow{font-weight:700;color:var(--teal);margin-bottom:14px}
.hero h1{font-size:clamp(1.8rem,3.2vw,2.7rem);font-weight:900;line-height:1.15}
.hl{color:var(--orange)}
.sub{margin-top:18px;font-size:1.15rem;color:var(--muted);max-width:520px}
.hero .btn-big{margin-top:28px}
.stars{margin-top:16px;color:var(--yellow);font-weight:700}
.stars span{color:var(--muted);font-weight:400;font-size:.9rem}
.hero-media img{border-radius:var(--r);box-shadow:0 20px 50px rgba(20,33,61,.18)}

/* ---------- ЦИФРЫ ---------- */
.trustbar{background:var(--navy);color:#fff;padding:26px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.trust-grid b{display:block;font-size:1.7rem;color:var(--yellow)}
.trust-grid span{font-size:.88rem;color:#c8d2e8}

/* ---------- СЕКЦИИ ---------- */
.block{padding:85px 0}
.block-gray{background:var(--gray)}
.block-sub{text-align:center;color:var(--muted);max-width:620px;margin:14px auto 50px}
.block h2 + .cards,.block h2 + .steps,.block h2 + .quotes{margin-top:50px}

/* ---------- КАРТОЧКИ КУРСОВ ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:26px}
.card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 6px 24px rgba(20,33,61,.10);transition:.2s}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(20,33,61,.16)}
.card img{height:180px;width:100%;object-fit:cover}
.card-body{padding:22px}
.card h3{margin:10px 0 8px;font-size:1.15rem}
.card p{color:var(--muted);font-size:.94rem}
.tag{display:inline-block;font-size:.78rem;font-weight:800;padding:4px 14px;border-radius:999px;color:#fff}
.tag-blue{background:var(--blue)}
.tag-teal{background:var(--teal)}
.tag-red{background:var(--red)}
.tag-yellow{background:var(--yellow);color:var(--navy)}

/* ---------- ШАГИ ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;text-align:center}
.num{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 14px;border-radius:50%;color:#fff;font-size:1.4rem;font-weight:900}
.n1{background:var(--blue)}.n2{background:var(--teal)}.n3{background:var(--yellow);color:var(--navy)}.n4{background:var(--red)}
.step h3{font-size:1.05rem;margin-bottom:6px}
.step p{color:var(--muted);font-size:.92rem}

/* ---------- ОТЗЫВЫ ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.quote{background:#fff;border-radius:var(--r);padding:28px;box-shadow:0 6px 24px rgba(20,33,61,.10);text-align:center}
.quote img{width:76px;height:76px;border-radius:50%;object-fit:cover;margin:0 auto 16px}
blockquote{font-style:italic;color:var(--navy)}
figcaption{margin-top:12px;font-size:.88rem;color:var(--muted);font-weight:700}

/* ---------- FAQ ---------- */
details{background:#fff;border-radius:12px;margin-top:14px;box-shadow:0 3px 14px rgba(20,33,61,.08);overflow:hidden}
summary{padding:18px 22px;font-weight:800;cursor:pointer;list-style:none;position:relative}
summary::after{content:"+";position:absolute;right:22px;font-size:1.3rem;color:var(--orange)}
details[open] summary::after{content:"–"}
details p{padding:0 22px 18px;color:var(--muted)}
#faq h2{margin-bottom:26px}

/* ---------- CTA-БАННЕР ---------- */
.banner{background:linear-gradient(120deg,var(--red),var(--orange));color:#fff;text-align:center;padding:75px 24px}
.banner p{margin:14px auto 28px;max-width:520px;color:#ffe9d9}

/* ---------- ФОРМА ---------- */
form{display:flex;flex-direction:column;gap:14px;margin-top:10px}
input,textarea{padding:15px 18px;border-radius:12px;border:2px solid #e3e9f2;font-size:1rem;font-family:inherit}
input:focus,textarea:focus{outline:none;border-color:var(--orange)}
textarea{min-height:110px;resize:vertical}
.form-note{font-size:.8rem;color:var(--muted);text-align:center}

/* ---------- LEGAL ---------- */
.legal{display:none;padding:70px 0;background:#fff}
.legal:target{display:block}
.legal h2{text-align:left;margin-bottom:16px}
.legal p{color:var(--muted);margin-bottom:12px}

/* ---------- ФУТЕР ---------- */
footer{background:var(--navy);color:#c8d2e8;padding:30px 0;font-size:.9rem}
.footer-flex{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
footer a{color:#c8d2e8;margin-left:22px}
footer a:hover{color:var(--yellow)}

/* ---------- ТЕЛЕФОНЫ ---------- */
@media(max-width:820px){
  nav ul{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;padding:20px;gap:18px;box-shadow:0 10px 20px rgba(0,0,0,.1)}
  nav ul.open{display:flex}
  .burger{display:block}
  .hero{padding:40px 0}
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
}