/* ════════════════════════════════════════════════════════════
     * TRACK HERO — Python Backend + ML
     *
     * Принципы (наследуем v4):
     *   • H1 cap 56px (чуть меньше главного hero, чтобы не конкурировать)
     *   • Eyebrow supertag — Geist Mono, accent цвет
     *   • Grid 7/5: copy + stack-panel (Linear-style file tree)
     *   • Stats trio — hairline divided, под subtitle
     *   • Dual CTA: primary (filled) + secondary (link с arrow)
     *   • Subtle accent halo сверху-слева (как в главном hero)
     * ════════════════════════════════════════════════════════════ */

    .q-track-hero {
      position: relative;
      padding: var(--q-s-4) 0 var(--q-s-9);
      clip-path: inset(0 -100vw);
    }

    .q-track-hero::before {
      content: "";
      position: absolute;
      top: -200px;
      left: -200px;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(94, 106, 210, 0.10), transparent 60%);
      pointer-events: none;
      z-index: 0;
    }

    .q-track-hero__bg-art {
      position: absolute;
      top: -80px;
      left: -240px;
      width: 720px;
      height: 560px;
      object-fit: cover;
      opacity: 0.26;
      mix-blend-mode: screen;
      -webkit-mask-image: radial-gradient(ellipse at 15% 50%, black 14%, transparent 58%);
              mask-image: radial-gradient(ellipse at 15% 50%, black 14%, transparent 58%);
      pointer-events: none;
      user-select: none;
      z-index: 0;
    }

    :root[data-theme="light"] .q-track-hero__bg-art {
      mix-blend-mode: multiply;
      opacity: 0.18;
    }

    .q-track-hero__grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      gap: var(--q-s-10);
      align-items: start;
    }

    .q-track-hero__copy {
      display: flex;
      flex-direction: column;
      gap: var(--q-s-6);
    }

    /* ─── Supertag pill ─── */
    .q-track-hero__supertag {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      padding: 6px 12px;
      border: 1px solid var(--q-line);
      border-radius: 999px;
      background: color-mix(in srgb, var(--q-bg-1) 60%, transparent);
      font: 500 12px/1 "Geist Mono", monospace;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--q-text-mid);
    }

    /* ─── H1 ─── */
    .q-track-hero__title {
      margin: 0;
      font-family: "Inter Variable", "Inter", system-ui, sans-serif;
      font-weight: 600;
      font-size: clamp(36px, 5.2vw, 56px);
      line-height: 1.04;
      letter-spacing: -0.032em;
      color: var(--q-text-hi);
      max-width: 22ch;
    }
    .q-track-hero__title em {
      font-style: normal;
      color: var(--q-accent);
    }

    /* ─── Subtitle ─── */
    .q-track-hero__subtitle {
      margin: 0;
      font-family: "Inter Variable", "Inter", system-ui, sans-serif;
      font-weight: 400;
      font-size: 18px;
      line-height: 1.5;
      color: var(--q-text-mid);
      max-width: 56ch;
    }

    /* ─── Stats trio ─── */
    .q-track-hero__stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      margin-top: var(--q-s-2);
      border-top: 1px solid var(--q-line-soft);
      border-bottom: 1px solid var(--q-line-soft);
    }
    .q-track-hero__stat {
      padding: var(--q-s-4) var(--q-s-3) var(--q-s-4) 0;
      border-right: 1px solid var(--q-line-soft);
    }
    .q-track-hero__stat:last-child { border-right: none; }
    .q-track-hero__stat:not(:first-child) {
      padding-left: var(--q-s-4);
    }
    .q-track-hero__stat__value {
      font-family: "Inter Variable", "Inter", system-ui, sans-serif;
      font-weight: 600;
      font-size: 28px;
      line-height: 1;
      letter-spacing: -0.02em;
      color: var(--q-text-hi);
    }
    .q-track-hero__stat__label {
      margin-top: 8px;
      font: 500 11px/1.3 "Geist Mono", monospace;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--q-text-low);
    }

    /* ─── Stack manifesto (под stats trio) ─────────────────────────
     * Закрывает пустоту в левой колонке.
     * Логика: "ИИ не заменит инженера, который сам его строит."
     * + строка production-стека 2026 mono caps · разделитель.
     * ──────────────────────────────────────────────────────────── */
    .q-track-hero__stack {
      display: flex;
      flex-direction: column;
      gap: var(--q-s-3);
      padding-top: var(--q-s-2);
    }
    .q-track-hero__stack__eyebrow {
      font: 500 11px/1 "Geist Mono", monospace;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--q-text-low);
    }
    .q-track-hero__stack__title {
      margin: 0;
      font-family: "Inter Variable", "Inter", system-ui, sans-serif;
      font-weight: 500;
      font-size: clamp(20px, 2vw, 24px);
      line-height: 1.25;
      letter-spacing: -0.02em;
      color: var(--q-text-hi);
      max-width: 32ch;
    }
    .q-track-hero__stack__title em {
      font-style: normal;
      color: var(--q-accent);
    }
    .q-track-hero__stack__sub {
      margin: 0;
      font-size: 15px;
      line-height: 1.55;
      color: var(--q-text-mid);
      max-width: 54ch;
    }
    .q-track-hero__stack__chips {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: var(--q-s-2);
      font: 500 11px/1.7 "Geist Mono", monospace;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--q-text-low);
    }
    .q-track-hero__stack__chips span {
      white-space: nowrap;
    }
    .q-track-hero__stack__chips span:not(:last-child)::after {
      content: "·";
      margin: 0 var(--q-s-3);
      color: var(--q-text-dim);
    }

    /* ════════════════════════════════════════════════════════════
     * LEAD PANEL — video preview (Module 1 lesson) + form
     *
     * Принципы (наш v4-канон, не Skypro purple/poison-green):
     *   • Surface: --q-bg-1 88% + hairline --q-line-mid + radius 14px
     *   • Video preview = MOCKUP of LMS Player (chrome + code background +
     *     play-button), а не случайный talking-head — честнее по смыслу
     *   • Inputs: hairline-bottom (а не Skypro pill-rounded)
     *   • CTA: indigo --q-accent-9, full-width
     *   • Чекбоксы: тот же flat hairline + indigo-fill из contact-form
     *   • Foot: операционный сигнал (поток / поток нет scarcity-таймера)
     * ════════════════════════════════════════════════════════════ */
    .q-track-hero__lead {
      position: relative;
      border: 1px solid var(--q-line);
      border-radius: 14px;
      background: color-mix(in srgb, var(--q-bg-1) 88%, transparent);
      overflow: hidden;
      backdrop-filter: blur(6px);
      box-shadow: 0 1px 2px rgba(0,0,0,0.20), 0 16px 40px -16px rgba(0,0,0,0.45);
    }

    /* ─── VIDEO PREVIEW — LMS-mockup ─── */
    .q-track-hero__video {
      position: relative;
      aspect-ratio: 16 / 9;
      background:
        radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--q-accent) 14%, transparent), transparent 60%),
        linear-gradient(135deg, var(--q-bg-3), var(--q-bg-1));
      border-bottom: 1px solid var(--q-line-soft);
      overflow: hidden;
    }
    .q-track-hero__video__chrome {
      position: absolute;
      top: 0; left: 0; right: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      background: color-mix(in srgb, var(--q-bg-0) 65%, transparent);
      border-bottom: 1px solid var(--q-line-soft);
      font: 500 10.5px/1 "Geist Mono", monospace;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--q-text-low);
      z-index: 2;
    }
    .q-track-hero__video__dots { display: flex; gap: 5px; }
    .q-track-hero__video__dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: color-mix(in srgb, var(--q-text-low) 50%, transparent);
    }
    .q-track-hero__video__title { flex: 1; }
    .q-track-hero__video__time { color: var(--q-text-mid); }

    .q-track-hero__video__code {
      position: absolute;
      inset: 32px 16px 16px;
      margin: 0;
      font: 400 10.5px/1.55 "Geist Mono", monospace;
      color: var(--q-text-low);
      opacity: 0.42;
      white-space: pre;
      user-select: none;
      pointer-events: none;
      mask-image: linear-gradient(180deg, black 30%, transparent 90%);
    }

    .q-track-hero__video__play {
      position: absolute;
      top: 56%; left: 50%;
      transform: translate(-50%, -50%);
      width: 56px; height: 56px;
      border-radius: 50%;
      background: var(--q-accent);
      border: none;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow:
        0 0 0 6px color-mix(in srgb, var(--q-accent) 16%, transparent),
        0 12px 32px -10px color-mix(in srgb, var(--q-accent) 80%, transparent);
      transition: background var(--q-dur-fast) var(--q-ease);
      z-index: 2;
    }
    .q-track-hero__video__play:hover { background: var(--q-accent-hover); }
    .q-track-hero__video__play svg {
      width: 16px; height: 16px;
      fill: currentColor;
      margin-left: 2px;
    }

    /* ─── FORM ─── */
    .q-track-hero__form {
      padding: 22px 22px 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin: 0;
    }
    .q-track-hero__form__title {
      margin: 0;
      font: 600 19px/1.25 "Inter Variable", "Inter", sans-serif;
      letter-spacing: -0.018em;
      color: var(--q-text-hi);
    }
    .q-track-hero__form__sub {
      margin: -6px 0 4px;
      font: 400 13px/1.5 "Inter Variable", sans-serif;
      color: var(--q-text-mid);
    }

    .q-track-hero__field {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .q-track-hero__field__label {
      font: 500 10px/1 "Geist Mono", monospace;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--q-text-low);
    }
    .q-track-hero__field__label span { color: var(--q-accent); margin-left: 2px; }
    .q-track-hero__field__input {
      border: none;
      background: transparent;
      border-bottom: 1px solid var(--q-line);
      padding: 7px 0 9px;
      font: 400 14px/1.4 "Inter Variable", sans-serif;
      color: var(--q-text-hi);
      transition: border-color var(--q-dur-fast) var(--q-ease);
      width: 100%;
    }
    .q-track-hero__field__input::placeholder { color: var(--q-text-low); }
    .q-track-hero__field__input:focus {
      outline: none;
      border-bottom-color: var(--q-accent);
    }

    .q-track-hero__form__submit {
      margin-top: 6px;
      width: 100%;
      padding: 13px 18px;
      background: var(--q-accent);
      color: #fff;
      border: none;
      border-radius: 10px;
      font: 500 14px/1 "Inter Variable", sans-serif;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background var(--q-dur-fast) var(--q-ease);
    }
    .q-track-hero__form__submit:hover { background: var(--q-accent-hover); }
    .q-track-hero__form__submit__arrow {
      display: inline-block;
      transition: transform var(--q-dur-fast) var(--q-ease);
    }
    .q-track-hero__form__submit:hover .q-track-hero__form__submit__arrow {
      transform: translateX(3px);
    }

    /* ─── Custom checkbox (наследуем из contact-form блока 16) ─── */
    .q-track-hero__check {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      cursor: pointer;
      user-select: none;
      position: relative;
    }
    .q-track-hero__check__input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .q-track-hero__check__box {
      flex-shrink: 0;
      width: 18px; height: 18px;
      border: 1px solid var(--q-line-strong);
      border-radius: 4px;
      margin-top: 1px;
      position: relative;
      transition: border-color var(--q-dur-fast) var(--q-ease),
                  background var(--q-dur-fast) var(--q-ease);
    }
    .q-track-hero__check__input:checked + .q-track-hero__check__box {
      background: var(--q-accent);
      border-color: var(--q-accent);
    }
    .q-track-hero__check__input:checked + .q-track-hero__check__box::after {
      content: "";
      position: absolute;
      inset: 4px;
      background: #fff;
      border-radius: 1px;
    }
    .q-track-hero__check__input:focus-visible + .q-track-hero__check__box {
      outline: 2px solid var(--q-accent);
      outline-offset: 2px;
    }
    .q-track-hero__check__text {
      font: 400 12px/1.45 "Inter Variable", sans-serif;
      color: var(--q-text-mid);
    }
    .q-track-hero__check__text > .q-req { color: var(--q-accent); margin-right: 2px; }
    .q-track-hero__check__text a {
      color: var(--q-text-hi);
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-color: var(--q-line-strong);
    }

    /* ─── Lead-confirm state (после submit) ─── */
    .q-track-hero__form.is-sent .q-track-hero__form__title,
    .q-track-hero__form.is-sent .q-track-hero__form__sub,
    .q-track-hero__form.is-sent .q-track-hero__field,
    .q-track-hero__form.is-sent .q-track-hero__form__submit,
    .q-track-hero__form.is-sent .q-track-hero__check { display: none; }
    .q-track-hero__form__sent {
      display: none;
      padding: 10px 0 4px;
    }
    .q-track-hero__form.is-sent .q-track-hero__form__sent { display: block; }
    .q-track-hero__form__sent__title {
      font: 600 17px/1.25 "Inter Variable", sans-serif;
      color: var(--q-text-hi);
      margin: 0 0 6px;
    }
    .q-track-hero__form__sent__sub {
      font: 400 13px/1.5 "Inter Variable", sans-serif;
      color: var(--q-text-mid);
      margin: 0;
    }