/* Лендинг AI Engineer с нуля — подача по референсу karpov.courses/ml-start, цвета и шрифты KAI.
   Тёмная зона KAI #080b16, синий #014baa (кнопки, обводки), мягкий #79a0d7 (акценты на тёмном), светлый #edf1f6 (заголовки). */
@font-face {
  font-family: 'PT Root UI VF';
  src: url('/lp-assets/fonts/pt-root-ui.woff2') format('woff2-variations'), url('/lp-assets/fonts/pt-root-ui.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
:root {
  --bg: #080b16; --bg2: #0e1426; --bg3: #131b31; --line: #22304f;
  --blue: #014baa; --blue-dark: #003a86; --soft: #79a0d7; --tint: #dfebf9;
  --head: #edf1f6; --text: #c3cddd; --muted: #8592a8;
  --font: 'PT Root UI VF', 'PT Root UI', Arial, sans-serif;
  --mono: 'PT Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --r: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font: 400 15px/1.6 var(--mono); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--soft); }
[hidden] { display: none !important; }
.wrap { width: min(1200px, 100% - 32px); margin: 0 auto; }

h1, h2, h3 { font-family: var(--font); color: var(--head); text-transform: uppercase; line-height: 1.08; letter-spacing: .005em; }
h1 { font-size: clamp(40px, 6.2vw, 76px); font-weight: 700; }
h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; margin-bottom: 36px; max-width: 900px; }
h3 { font-size: 17px; font-weight: 700; line-height: 1.25; }
.mk { color: var(--soft); font-family: var(--mono); font-weight: 400; letter-spacing: -.08em; white-space: nowrap; }
.mk[data-mk]::before { content: attr(data-mk); }
.acc { color: var(--soft); }
section { padding: 72px 0; position: relative; }

/* кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 26px; border-radius: 8px;
  font: 700 15px var(--font); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  background: var(--blue); color: #fff; border: 1px solid var(--blue); transition: background .2s, border-color .2s; }
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn.ghost { background: transparent; color: var(--head); border-color: var(--soft); }
.btn.ghost:hover { background: rgba(121, 160, 215, .12); }
.btn.sm { min-height: 42px; padding: 10px 18px; font-size: 13px; }
.nowa { background: none; border: 0; padding: 4px 0; font: 400 13px var(--mono); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.nowa:hover { color: var(--soft); }

/* шапка */
.top { position: sticky; top: 0; z-index: 40; background: rgba(8, 11, 22, .9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(34, 48, 79, .6); }
.bar { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.logo img { filter: brightness(0) invert(1); width: 96px; height: auto; }
.top nav { display: flex; gap: 26px; margin-left: auto; }
.top nav a { color: var(--text); text-decoration: none; font: 500 15px var(--font); }
.top nav a:hover { color: var(--soft); }

/* первый экран */
.hero { padding: 64px 0 0; overflow: hidden; border-bottom: 1px solid var(--line);
  background: radial-gradient(60% 70% at 78% 30%, rgba(1, 75, 170, .38), transparent 70%), var(--bg); }
.orb { position: absolute; right: -4%; top: 0; width: 56%; height: 100%; opacity: .95; pointer-events: none; }
.hero .wrap { position: relative; display: grid; gap: 22px; justify-items: start; }
.badge { border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; font-size: 12px; text-transform: uppercase; color: var(--text); background: rgba(14, 20, 38, .7); }
.hero h1 { max-width: 760px; }
.sub { max-width: 560px; font-size: 16px; color: var(--text); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: 26px 40px; padding: 44px 0 52px; margin-top: 18px;
  width: 100%; border-top: 1px solid var(--line); }
.facts li { display: flex; gap: 14px; align-items: center; }
.facts .ic { width: 46px; height: 46px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--soft); flex: none; background: rgba(14, 20, 38, .8); }
.facts b { display: block; font: 700 14px var(--font); color: var(--head); text-transform: uppercase; }
.facts span { display: block; font: 700 13px var(--font); color: var(--soft); text-transform: uppercase; }

/* карточки */
.card { background: var(--bg2); border-radius: var(--r); padding: 28px; position: relative; }
.card.o { border: 1px solid var(--blue); background: var(--bg2); }
.card.o::before { content: ''; position: absolute; inset: 0; border: 1px solid rgba(121, 160, 215, .28); border-radius: inherit; transform: translate(-7px, 7px); z-index: -1; }
.card.dash { border: 1px dashed var(--soft); background: transparent; }
.card p + p { margin-top: 14px; }
.card h3 + p, .card h3 + ul { margin-top: 12px; }
.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gt, .dots { list-style: none; display: grid; gap: 10px; }
.gt li { padding-left: 20px; position: relative; }
.gt li::before { content: '>'; position: absolute; left: 0; color: var(--soft); }
.dots li { padding-left: 18px; position: relative; }
.dots li::before { content: ''; position: absolute; left: 2px; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--soft); }
.isolate { isolation: isolate; }
#about .wrap, #for .wrap, #project .wrap, #how .wrap, #career .wrap, #who .wrap { isolation: isolate; }

/* чем занимается */
.about { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.need { margin-top: -10px; }
.need h3 { color: var(--soft); }

/* рынок */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 28px; }
.stat b { display: block; font: 700 clamp(30px, 3.4vw, 44px)/1.05 var(--font); color: var(--soft); text-transform: uppercase; }
.stat p { margin-top: 8px; }
.stat small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.salary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 24px; }
.s-note { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.s-note .big { font: 700 22px/1.2 var(--font); color: var(--soft); text-transform: uppercase; }
.chart { padding: 24px; overflow: hidden; min-height: 340px; }
.ch-t { max-width: 280px; position: relative; z-index: 1; }
.chart svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72%; }
.grades { position: absolute; inset: 0; }
.gr { position: absolute; display: grid; gap: 6px; justify-items: start; width: 160px; }
.gr small { font-size: 12px; line-height: 1.35; color: var(--head); }
.pill { border: 1px solid var(--soft); background: var(--bg); color: var(--head); border-radius: 999px; padding: 4px 12px; font: 700 15px var(--font); white-space: nowrap; }
.gr0 { left: 6%; bottom: 8%; } .gr1 { left: 30%; bottom: 24%; } .gr2 { left: 54%; bottom: 40%; }
.gr3 { right: 4%; bottom: 66%; justify-items: end; text-align: right; }
.src { margin-top: 14px; font-size: 12px; color: var(--muted); }

/* чему научитесь */
.tile { background: var(--bg2); border-radius: var(--r); padding: 22px 22px 34px; font: 700 15px/1.35 var(--font); color: var(--head); text-transform: uppercase; min-height: 150px;
  background-image: radial-gradient(120% 90% at 100% 100%, rgba(1, 75, 170, .35), transparent 60%); }
.tile .n { color: var(--soft); margin-right: 6px; }

/* проект */
.project { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.totals h3 { color: var(--soft); margin-bottom: 14px; }
.totals ul { list-style: none; display: grid; gap: 14px; }
.totals li { display: grid; grid-template-columns: minmax(64px, auto) 1fr; align-items: center; gap: 10px; }
.totals b { font: 700 30px var(--font); color: var(--soft); text-align: right; white-space: nowrap; }
.totals span { font: 700 14px var(--font); text-transform: uppercase; color: var(--head); }

/* как учиться, помощь */
#how h3, #for h3 { color: var(--soft); }
.help { border-left: 3px solid var(--blue); }
.help h3 { color: var(--soft); }

/* документы */
.docs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; overflow: hidden;
  background-image: radial-gradient(70% 120% at 85% 50%, rgba(1, 75, 170, .45), transparent 70%); }
.docs .gt { font-size: 17px; gap: 18px; }
.cert { justify-self: end; width: min(340px, 100%); aspect-ratio: 1.41; background: var(--tint); color: #1d2433; border-radius: 10px; padding: 20px; display: grid; align-content: start; gap: 6px;
  transform: rotate(-3deg); box-shadow: 0 0 0 8px rgba(223, 235, 249, .08); }
.cert img { margin-bottom: 10px; }
.cert b { font: 700 22px var(--font); text-transform: uppercase; color: var(--blue); }
.cert span { font: 700 16px var(--font); }
.cert i { display: block; height: 6px; border-radius: 3px; background: rgba(1, 75, 170, .18); width: 80%; }
.cert i + i { width: 55%; }
.cert small { margin-top: auto; font-size: 11px; color: #4a5568; }

/* карьера */
.c-lead { max-width: 640px; margin: -18px 0 28px; font-size: 16px; color: var(--soft); }
.career { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.c-items { display: grid; gap: 22px; }
.c-items h3 { color: var(--soft); }
.cv h3 { color: var(--soft); margin-bottom: 18px; }
.cv-in { display: flex; gap: 16px; align-items: center; padding: 16px; background: var(--bg3); border-radius: 10px; }
.ava { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font: 700 18px var(--font); flex: none; }
.cv-in b { font: 700 19px var(--font); color: var(--head); }
.lbl { margin-top: 18px; margin-bottom: 8px; font-size: 12px; text-transform: uppercase; color: var(--muted); }
.stack { display: flex; flex-wrap: wrap; gap: 8px; }
.stack span { border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px; font-size: 13px; color: var(--head); }
.honest { margin-top: 22px; font-size: 13px; color: var(--muted); max-width: 820px; }

/* программа */
.intro { max-width: 900px; margin: -14px 0 30px; }
.prog { display: grid; gap: 14px; }
.lesson { background: var(--bg2); border-radius: var(--r); }
.lesson summary { list-style: none; cursor: pointer; padding: 22px 26px; display: grid; grid-template-columns: 1fr auto; gap: 14px 20px; }
.lesson summary::-webkit-details-marker { display: none; }
.lesson h3 { color: var(--soft); font-size: 18px; }
.ml { display: block; font: 400 12px var(--mono); color: var(--muted); margin-bottom: 6px; letter-spacing: .02em; }
.lesson.gate { background: transparent; border: 1px dashed var(--line); }
.arr { color: var(--soft); font-size: 22px; line-height: 1; transition: transform .2s; }
.lesson[open] .arr { transform: rotate(-90deg); }
.lesson dl { grid-column: 1 / -1; display: flex; gap: 48px; }
.lesson dt { font-size: 12px; text-transform: uppercase; color: var(--muted); }
.lesson dd { color: var(--soft); }
.lesson > p { padding: 0 26px 24px; max-width: 900px; }

/* преподаватели */
.teacher { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: start; }
.photo { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font: 700 52px var(--font); color: var(--head);
  background: radial-gradient(90% 90% at 30% 20%, #1a5fc4, var(--blue) 45%, #022a63); }
.teacher h3 { font-size: 22px; }
.teacher .acc { margin: 8px 0 14px; font-size: 14px; }

/* стоимость */
.tariffs { align-items: stretch; }
.tariff { display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--line); }
.tariff.on { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.tariff h3 { font-size: 24px; color: var(--soft); }
.tag { font-size: 13px; text-transform: uppercase; color: var(--muted); margin-top: -8px; }
.hot { position: absolute; top: -13px; right: 22px; background: var(--blue); color: #fff; font: 700 12px var(--font); text-transform: uppercase; padding: 4px 12px; border-radius: 999px; }
.price { padding: 14px 0 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.price small { font-size: 12px; text-transform: uppercase; color: var(--muted); }
.price b { font: 700 32px/1.2 var(--font); color: var(--soft); margin-bottom: 8px; }
.price span { font: 700 20px var(--font); color: var(--head); }
.tariff .btn { width: 100%; margin-top: auto; }
.notes { margin-top: 24px; }
.note h3 { color: var(--soft); font-size: 15px; }
.note p { font-size: 14px; }
.oferta { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* почему KAI */
.why { display: grid; }
.why-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px; padding: 28px 0; border-top: 1px solid var(--line); }
.why-row:last-child { border-bottom: 1px solid var(--line); }
.why-row h3 { font-size: 22px; color: var(--head); }
.why-row h3::first-line { color: var(--head); }
.why-row p { font-size: 16px; }

/* вопросы */
.faq { display: grid; max-width: 900px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; color: var(--head); font-size: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { color: var(--soft); font-size: 22px; line-height: 1; transition: transform .2s; }
.faq details[open] summary span { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; max-width: 760px; }

/* финал */
.fin { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 28px; align-items: center; padding: 44px;
  background: radial-gradient(70% 140% at 100% 50%, rgba(1, 75, 170, .55), transparent 70%), var(--bg2); }
.fin h2 { margin-bottom: 14px; }
.fin-act { display: grid; gap: 12px; }

/* подвал */
footer { padding: 36px 0 40px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; align-items: flex-start; }
.legal { display: grid; gap: 4px; }
.legal b { color: var(--text); }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* липкая кнопка (мобильные) */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(8, 11, 22, .94); backdrop-filter: blur(10px); border-top: 1px solid var(--line); display: none; }
.sticky .btn { width: 100%; }

/* запасная форма */
.fb { border: 1px solid var(--blue); padding: 0; border-radius: var(--r); width: min(440px, calc(100vw - 32px)); max-width: none; background: var(--bg2); color: var(--text); margin: auto; }
.fb::backdrop { background: rgba(0, 0, 0, .6); }
.fb-in { position: relative; padding: 26px 24px 22px; display: grid; gap: 12px; }
.fb-in h3 { font-size: 20px; padding-right: 30px; }
.fb-x { position: absolute; right: 12px; top: 10px; background: none; border: 0; font-size: 30px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.fb-l { font-size: 13px; color: var(--muted); }
.fb-in input[type=tel] { font: 400 20px var(--mono); padding: 13px 16px; border: 1px solid var(--line); border-radius: 8px; width: 100%; background: var(--bg); color: var(--head); }
.fb-in input[type=tel]:focus { outline: 2px solid var(--soft); border-color: var(--soft); }
.fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fb-err { color: #ff8a8a; font-size: 13px; }
.fb-ok { color: #7fd6a0; font-weight: 600; }
.fb-legal { font-size: 12px; color: var(--muted); }
.fb-send { width: 100%; }
.fb-send[disabled] { opacity: .6; cursor: progress; }

/* адаптив */
@media (max-width: 1020px) {
  .top nav { display: none; }
  .bar .btn { margin-left: auto; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orb { width: 80%; right: -30%; opacity: .55; }
}
@media (max-width: 760px) {
  section { padding: 52px 0; }
  h2 { margin-bottom: 26px; }
  .g2, .g3, .about, .project, .salary, .stats, .career, .docs, .why-row, .fin, .teacher { grid-template-columns: minmax(0, 1fr); }
  .need { margin-top: 0; }
  .sticky.show { display: block; }
  footer { padding-bottom: 110px; }
  .hero { padding-top: 26px; }
  .hero .wrap { gap: 16px; }
  .hero h1 { font-size: 40px; }
  .orb { width: 120%; right: -55%; top: -10%; opacity: .45; }
  .actions { width: 100%; }
  .actions .btn { flex: 1 1 100%; }
  .actions .ghost:not(.lead) { display: none; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 26px 0 34px; margin-top: 8px; }
  .facts .ic { width: 40px; height: 40px; padding: 8px; }
  .chart { min-height: 400px; }
  .gr { width: 140px; }
  .gr0 { left: 5%; bottom: 6%; } .gr1 { left: auto; right: 5%; bottom: 20%; justify-items: end; text-align: right; }
  .gr2 { left: 5%; bottom: 40%; } .gr3 { right: 5%; bottom: 60%; }
  .teacher .photo { width: 120px; font-size: 38px; }
  .cert { justify-self: center; }
  .fin { padding: 28px 22px; }
  .lesson summary { padding: 18px 18px; }
  .lesson > p { padding: 0 18px 20px; }
  .lesson dl { gap: 28px; }
  .card { padding: 22px; }
  .card.o::before { transform: translate(-5px, 5px); }
  .wrap { width: min(1200px, 100% - 32px); }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 34px; }
  .sub { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 420px) {
  .bar { gap: 12px; }
  .bar .btn.sm { white-space: nowrap; font-size: 12px; padding: 8px 12px; min-height: 38px; letter-spacing: .02em; }
  .bar .btn.sm svg { width: 16px; height: 16px; }
  .logo img { width: 84px; }
}

/* форма заявки (окно #fallback): слева предложение, справа поля — как попап референса */
.fb.lf { width: min(760px, calc(100vw - 32px)); overflow: hidden; }
.lf .fb-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; }
.lf-side { padding: 34px 30px; display: grid; align-content: start; gap: 14px;
  background: radial-gradient(120% 90% at 0% 100%, rgba(1, 75, 170, .75), transparent 65%), var(--bg3); }
.lf-side h3 { font-size: 26px; padding-right: 0; }
.lf-side p { color: var(--text); }
.lf-form { padding: 34px 26px 24px; display: grid; gap: 10px; align-content: start; }
.lf .fb-x { z-index: 2; }
.fb-in input[type=text] { font: 400 17px var(--mono); padding: 13px 16px; border: 1px solid var(--line); border-radius: 8px; width: 100%; background: var(--bg); color: var(--head); }
.fb-in input[type=text]:focus { outline: 2px solid var(--soft); border-color: var(--soft); }
.fb-in input:disabled { opacity: .6; }
.lf .fb-send { margin-top: 6px; }
button.btn { font-family: var(--font); }
@media (max-width: 640px) {
  .lf .fb-in { grid-template-columns: minmax(0, 1fr); }
  .lf-side { padding: 26px 22px 18px; }
  .lf-side h3 { font-size: 21px; padding-right: 30px; }
  .lf-form { padding: 18px 22px 22px; }
}

/* блоки страниц линейки (23.10): боли-цитаты, «кому не подойдёт», экраны курса, один тариф */
.pain h3 { text-transform: none; font-size: 19px; line-height: 1.3; color: var(--head); }
.notfor { margin-top: 24px; }
.notfor h3 { color: var(--soft); margin-bottom: 14px; }
.notfor b { color: var(--head); font-weight: 400; }
.grid + .src { margin-top: 16px; }
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.shot-ph { background: var(--bg2); border-radius: var(--r); padding: 12px; display: grid; gap: 12px; align-content: start; }
.shot-ph img { width: 100%; height: auto; border-radius: 10px; }
.shot-ph figcaption { font-size: 13px; color: var(--text); }
.g1 { grid-template-columns: minmax(0, 1fr); }
.tariffs.one { max-width: 640px; }
.extra { display: grid; gap: 8px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
.extra small { font-size: 12px; text-transform: uppercase; }
@media (max-width: 1020px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pain h3 { font-size: 17px; } }