/*
 * Hard Coding — общие стили лендингов (/7days/, /pro/).
 * Источник дизайна: docs/product/HARDCODING_UI_UX_SKILL.md.
 * Палитра — канонические токены; --hc-muted-text добавлен ради контраста AA:
 * #69707D на #111318 даёт 3.7:1, для мелкого текста нужно ≥ 4.5:1.
 */

@font-face {
  font-family: 'Montserrat Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/montserrat-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/montserrat-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(fonts/jetbrains-mono-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --hc-bg: #111318;
  --hc-text: #F3EFE6;
  --hc-accent: #FFB300;
  --hc-surface: #232833;
  --hc-muted: #69707D;
  --hc-muted-text: #9AA1AD;
  --hc-line: rgba(243, 239, 230, .12);
  --hc-line-strong: rgba(243, 239, 230, .28);

  --font-display: 'Montserrat Variable', Montserrat, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 6px;
  --section-y: 112px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--hc-bg);
  color: var(--hc-text);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 450;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 3px solid var(--hc-accent); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 100; background: var(--hc-accent); color: var(--hc-bg); padding: 12px 16px; min-height: 44px; border-radius: var(--radius); font-weight: 700; }

.wrap { width: min(100% - 32px, 1200px); margin-inline: auto; }
.measure { max-width: 720px; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--hc-muted-text); }
.accent { color: var(--hc-accent); }
.nowrap { white-space: nowrap; }

/* ------------------------------------------------------------- шапка */

.top {
  position: sticky; top: 0; z-index: 50;
  background: var(--hc-bg);
  border-bottom: 1px solid var(--hc-line);
}
.top-inner { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-block; padding: 10px 0; line-height: 24px; font-weight: 800; letter-spacing: -.02em; font-size: 18px; text-decoration: none; white-space: nowrap; }
.brand b { color: var(--hc-accent); font-weight: 800; }
.top-nav { display: flex; align-items: center; gap: 24px; }
.top-link { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--hc-muted-text); padding: 12px 0; }
.top-link:hover { color: var(--hc-text); }
.top .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
@media (max-width: 720px) { .top-link { display: none; } }

/* ----------------------------------------------------------- кнопки */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px;
  border-radius: var(--radius);
  font: 700 17px/1.2 var(--font-display);
  text-decoration: none; text-align: center;
  border: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-primary { background: var(--hc-accent); color: var(--hc-bg); }
.btn-primary:hover { background: #ffc23a; }
.btn-ghost { border-color: var(--hc-line-strong); color: var(--hc-text); }
.btn-ghost:hover { border-color: var(--hc-text); }
.btn .arrow { transition: transform .18s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.action-note { font-family: var(--font-mono); font-size: 13px; color: var(--hc-muted-text); margin-top: 16px; }
@media (max-width: 520px) {
  .btn { padding: 0 18px; font-size: 16px; }
  .actions .btn { width: 100%; }
}

/* ------------------------------------------------------- типографика */

.label {
  display: block; margin-bottom: 20px;
  font: 500 13px/1.4 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--hc-muted-text);
}
.label b { color: var(--hc-accent); font-weight: 600; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); }
h1 {
  font-size: clamp(38px, 6.2vw, 76px);
  font-weight: 800; line-height: 1.02; letter-spacing: -.035em;
  margin-bottom: 28px;
  text-wrap: balance;
}
h2 {
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 750; line-height: 1.08; letter-spacing: -.025em;
  margin-bottom: 24px;
  text-wrap: balance;
}
h3 { font-size: clamp(20px, 2vw, 24px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 10px; }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--hc-text); max-width: 640px; margin-bottom: 36px; }
.sub { color: var(--hc-muted-text); max-width: 640px; }

/* ---------------------------------------------------------- секции */

.block { padding: var(--section-y) 0; border-top: 1px solid var(--hc-line); }
.block-head { margin-bottom: 56px; }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
@media (max-width: 900px) {
  :root { --section-y: 80px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .block-head { margin-bottom: 40px; }
}

/* ------------------------------------------------------------- hero */

.hero { padding: 88px 0 var(--section-y); }
.hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 72px; align-items: start; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font: 500 13px/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--hc-muted-text); margin-bottom: 28px;
}
.hero-meta span:first-child { color: var(--hc-accent); }
@media (max-width: 960px) {
  .hero { padding-top: 56px; }
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
}

/* Рельс: дни практикума / цикл разработки. Последний пункт — акцент. */
.rail { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--hc-text); }
.rail li {
  display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--hc-line);
}
.rail .n { font: 600 13px/1.4 var(--font-mono); color: var(--hc-muted-text); letter-spacing: .04em; }
.rail .t { font-weight: 650; font-size: 17px; line-height: 1.35; }
.rail .t small { display: block; margin-top: 4px; font-weight: 450; font-size: 15px; color: var(--hc-muted-text); }
.rail li.is-goal .n, .rail li.is-goal .t { color: var(--hc-accent); }
.rail-caption { margin-top: 16px; font: 500 12px/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hc-muted-text); }

/* ----------------------------------------------------------- цифры */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--hc-text); }
.stat { padding: 28px 24px 8px 0; border-right: 1px solid var(--hc-line); margin-right: 24px; }
.stat:last-child { border-right: 0; margin-right: 0; }
.stat .v { font: 700 clamp(36px, 4.4vw, 56px)/1 var(--font-mono); letter-spacing: -.03em; color: var(--hc-accent); }
.stat .v small { font-size: .42em; color: var(--hc-muted-text); letter-spacing: 0; font-weight: 500; }
.stat .l { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--hc-muted-text); }
.stats-note { margin-top: 28px; font-size: 14px; color: var(--hc-muted-text); max-width: 720px; }
@media (max-width: 900px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--hc-line); padding: 24px 16px 24px 0; }
}

/* ---------------------------------------------------- было / стало */

.contrast { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--hc-text); }
.contrast > div { padding: 32px 32px 8px 0; }
.contrast > div + div { padding-left: 32px; border-left: 1px solid var(--hc-line); }
.contrast h3 { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hc-muted-text); margin-bottom: 20px; }
.contrast > div + div h3 { color: var(--hc-accent); }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { padding: 12px 0 12px 28px; border-bottom: 1px solid var(--hc-line); position: relative; }
.ticks li::before { content: '—'; position: absolute; left: 0; color: var(--hc-muted); }
.contrast > div + div .ticks li::before { content: '→'; color: var(--hc-accent); }
@media (max-width: 720px) {
  .contrast { grid-template-columns: 1fr; }
  .contrast > div { padding: 28px 0 8px; }
  .contrast > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--hc-line); margin-top: 24px; }
}

/* -------------------------------------------------- программа по дням */

.days { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--hc-text); }
.days li { display: grid; grid-template-columns: 140px 1fr 1fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--hc-line); }
.days .d { font: 600 14px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hc-accent); }
.days .d small { display: block; color: var(--hc-muted-text); font-weight: 500; margin-top: 4px; }
.days h3 { margin-bottom: 0; }
.days p { color: var(--hc-muted-text); }
@media (max-width: 900px) {
  .days li { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------------------------------------------------------- списки */

.cols { columns: 2; column-gap: 48px; list-style: none; margin: 0; padding: 0; }
.cols li { break-inside: avoid; padding: 12px 0; border-bottom: 1px solid var(--hc-line); display: flex; gap: 16px; }
.cols .k { font: 500 13px/1.9 var(--font-mono); color: var(--hc-muted-text); min-width: 28px; }
@media (max-width: 720px) { .cols { columns: 1; } }

/* ------------------------------------------------------------ кейсы */

.cases-title { margin: 80px 0 24px; }
.after-list { margin-top: 32px; }

.cases { border-top: 2px solid var(--hc-text); }
.case { display: grid; grid-template-columns: 3fr 3fr 4fr 4fr; gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--hc-line); }
.case .who strong { display: block; font-size: 19px; font-weight: 700; }
.case .who span { color: var(--hc-muted-text); font-size: 15px; }
.case .k { display: block; margin-bottom: 8px; font: 600 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hc-muted-text); }
.case .after .k { color: var(--hc-accent); }
.case p { font-size: 16px; }
.case .ev { margin-top: 12px; font: 500 14px/1.5 var(--font-mono); }
.case .ev a { color: var(--hc-accent); text-underline-offset: 3px; }
@media (max-width: 960px) {
  .case { grid-template-columns: 1fr; gap: 16px; }
}

/* ----------------------------------------------------------- тарифы */

.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.plan { border: 1px solid var(--hc-line-strong); border-radius: var(--radius); padding: 36px; display: flex; flex-direction: column; }
.plan.is-main { border-top: 3px solid var(--hc-accent); }
.plan .name { font: 600 13px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hc-muted-text); margin-bottom: 16px; }
.plan .price { font: 700 clamp(36px, 4vw, 48px)/1.05 var(--font-mono); letter-spacing: -.03em; margin: 0; }
.plan .term { color: var(--hc-muted-text); margin: 8px 0 28px; }
.plan .ticks { margin-bottom: 32px; flex: 1; }
.plan .btn { width: 100%; }
.plan .fine { margin-top: 14px; font-size: 14px; color: var(--hc-muted-text); }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } .plan { padding: 28px 20px; } }

/* Строка-оффер без карточки: участие бесплатно / запись за 990 */
.offer { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--hc-text); }
.offer > div { padding: 32px 32px 0 0; }
.offer > div + div { padding-left: 32px; border-left: 1px solid var(--hc-line); }
.offer .price { font: 700 clamp(40px, 5vw, 60px)/1 var(--font-mono); letter-spacing: -.03em; margin: 8px 0 16px; }
.offer .price.accent { color: var(--hc-accent); }
@media (max-width: 720px) {
  .offer { grid-template-columns: 1fr; }
  .offer > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--hc-line); margin-top: 32px; }
}

/* -------------------------------------------------------- об авторе */

.author { display: grid; grid-template-columns: 4fr 7fr; gap: 64px; align-items: start; }
.author img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); filter: grayscale(1) contrast(1.05); }
.facts { list-style: none; margin: 32px 0; padding: 0; border-top: 1px solid var(--hc-line); }
.facts li { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hc-line); }
.facts .v { font: 700 18px/1.4 var(--font-mono); color: var(--hc-accent); }
.facts .l { color: var(--hc-muted-text); }
.text-link { color: var(--hc-accent); font-weight: 600; text-underline-offset: 4px; }
@media (max-width: 900px) {
  .author { grid-template-columns: 1fr; gap: 32px; }
  .author img { max-width: 360px; }
  .facts li { grid-template-columns: 1fr; gap: 2px; }
}

/* --------------------------------------------------------------- FAQ */

.faq { border-top: 2px solid var(--hc-text); }
.faq details { border-bottom: 1px solid var(--hc-line); }
.faq summary {
  list-style: none; cursor: pointer;
  min-height: 64px; padding: 18px 48px 18px 0; position: relative;
  font-size: 18px; font-weight: 650; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font: 400 26px/1 var(--font-mono); color: var(--hc-accent);
}
.faq details[open] summary::after { content: '−'; }
.faq details > div { padding: 0 0 24px; color: var(--hc-muted-text); max-width: 760px; }

/* ------------------------------------------------------- финальный CTA */

.final { padding: var(--section-y) 0; border-top: 2px solid var(--hc-accent); }
.final h2 { max-width: 900px; }

/* ------------------------------------------------------------- подвал */

.foot { border-top: 1px solid var(--hc-line); padding: 40px 0 56px; font-size: 14px; color: var(--hc-muted-text); }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; }
.foot a { color: var(--hc-muted-text); text-underline-offset: 3px; display: inline-block; padding: 12px 0; }
.foot a:hover { color: var(--hc-text); }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* ------------------------------------------- программа по дням: тело дня */
.day-body p { margin: 0 0 10px; }
.day-body p:last-child { margin-bottom: 0; }
.day-body b { color: var(--hc-text); font-weight: 650; }
.kit-title { margin: 0 0 8px; }

/* ------------------------------------------------- форма регистрации */
.reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .reg-grid { grid-template-columns: 1fr; gap: 32px; } }
.reg { display: grid; gap: 16px; padding: 28px; background: var(--hc-surface); border: 1px solid var(--hc-line-strong); border-radius: var(--radius); }
.reg .field { display: grid; gap: 6px; }
.reg label { font-weight: 600; font-size: 15px; }
.reg .opt { font-weight: 450; color: var(--hc-muted-text); font-size: 13px; }
.reg input[type=text], .reg input[type=tel], .reg input[type=email] {
  min-height: 48px; padding: 0 14px; border-radius: var(--radius);
  border: 1px solid var(--hc-line-strong); background: var(--hc-bg); color: var(--hc-text);
  font: 500 16px/1.2 var(--font-display); width: 100%;
}
.reg input::placeholder { color: var(--hc-muted); }
.reg input:focus { border-color: var(--hc-accent); outline: none; box-shadow: 0 0 0 3px rgba(255, 179, 0, .25); }
.reg input[aria-invalid=true] { border-color: #ff6b5b; }
.reg .check { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-weight: 450; font-size: 14px; line-height: 1.5; color: var(--hc-muted-text); cursor: pointer; }
.reg .check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--hc-accent); }
.reg .check a { color: var(--hc-text); text-underline-offset: 3px; }
.reg .btn { width: 100%; }
.reg .btn[disabled] { opacity: .6; cursor: progress; }
.reg-status { margin: 0; min-height: 1.5em; font-size: 14px; }
.reg-status.is-error { color: #ff8a7d; }
.reg .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.reg-done { padding: 28px; background: var(--hc-surface); border: 1px solid var(--hc-accent); border-radius: var(--radius); }
.reg-done h3 { margin-top: 0; }

/* --------------------------------------- анимация первого экрана (Remotion) */
.hero-anim { margin: 0; }
.hero-anim video { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--radius); border: 1px solid var(--hc-line); background: var(--hc-bg); }
.hero-anim figcaption { margin-top: 12px; }
.hero-anim { position: relative; }
.hero-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; transform: translate(-50%, -50%); border-radius: 50%; border: 0; background: var(--hc-accent); color: var(--hc-bg); font-size: 28px; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.hero-anim--wide { grid-column: 1 / -1; margin-top: 8px; }
.hero-anim--wide video { aspect-ratio: 16 / 9; }
.block .hero-anim--wide + .contrast { margin-top: 48px; }