/* ============================================================
       HERO
       ============================================================ */
    #hero {
      background: linear-gradient(135deg, #08173A 0%, #0044AA 55%, #1565D8 100%);
      padding: var(--sp-120) 0 0;
      position: relative;
      overflow-x: clip; /* clip вместо hidden — не обрезает дочерние элементы по Y */
    }
    #hero::after {
      content: '';
      position: absolute; inset: 0;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='30' fill='none' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'/%3E%3C/svg%3E");
      pointer-events: none;
    }
    .hero-layout {
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: var(--sp-64);
      align-items: flex-start;
      position: relative; z-index: 1;
    }
    .hero-badge-row { margin-bottom: var(--sp-20); }
    h1.hero-h1 {
      font-size: clamp(28px, 4.5vw, 52px);
      font-weight: 600;
      line-height: 1.1;
      color: var(--c-white);
      margin-bottom: var(--sp-20);
    }
    h1.hero-h1 em { font-style: normal; color: #93C5FD; }
    .hero-desc {
      font-size: clamp(17px, 2vw, 20px);
      color: rgba(255,255,255,0.85);
      line-height: 1.7;
      margin-bottom: var(--sp-24);
      max-width: 540px;
    }
    .hero-checks { display: flex; flex-direction: column; gap: var(--sp-12); margin-bottom: var(--sp-32); }
    .hero-check { display: flex; align-items: center; gap: 10px; font-size: 17px; color: rgba(255,255,255,0.9); }
    .hero-check svg { width: 18px; height: 18px; flex-shrink: 0; }
    .hero-btns { display: flex; gap: var(--sp-12); flex-wrap: wrap; margin-bottom: var(--sp-44); }
    .hero-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--sp-24);
      padding: var(--sp-24) 0;
      border-top: 1px solid rgba(255,255,255,0.15);
    }
    .hero-stat-num { font-size: 32px; font-weight: 600; color: var(--c-white); line-height: 1; }
    .hero-stat-label { font-size:16px; color: rgba(255,255,255,0.75); margin-top: 5px; line-height: 1.4; }

    /* Hero Form Card */
    .hero-form-card {
      background: var(--c-white);
      border-radius: 20px;
      padding: var(--sp-32);
      box-shadow: var(--shadow-dialog);
      position: sticky;
      top: 80px;
    }
    .hero-form-title { font-size: 22px; font-weight: 600; color: var(--c-navy); margin-bottom: var(--sp-4); }
    .hero-form-sub { font-size:16px; color: var(--c-slate); margin-bottom: var(--sp-20); }
    .form-policy { font-size:16px; color: var(--c-gray-500); margin-top: var(--sp-12); text-align: center; line-height: 1.5; }
    .form-policy a { color: var(--c-blue); }
    .form-trust-row { display: flex; align-items: center; justify-content: center; gap: var(--sp-16); margin-top: var(--sp-16); }
    .form-trust-item { display: flex; align-items: center; gap: 5px; font-size:16px; color: var(--c-slate); }

    /* Hero bottom bar */
    .hero-bottom {
      position: relative; z-index: 1;
      margin-top: var(--sp-44);
      padding: var(--sp-20) 0;
      border-top: 1px solid rgba(255,255,255,0.12);
      display: flex;
      align-items: center;
      gap: var(--sp-24);
      flex-wrap: wrap;
    }
    .hero-partners-label { font-size:16px; color: rgba(255,255,255,0.6); white-space: nowrap; }
    .partner-pill {
      padding: 5px 16px;
      border-radius: var(--r-circle);
      background: rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.8);
      font-size:16px;
      font-weight: 600;
      white-space: nowrap;
    }

    /* ============================================================
       TRUST BAR
       ============================================================ */
    #trust-bar {
      background: var(--c-white);
      border-bottom: 1px solid var(--c-gray-200);
      padding: var(--sp-16) 0;
    }
    .trust-bar-list { display: flex; align-items: flex-start; justify-content: center; gap: var(--sp-24); flex-wrap: wrap; }
    .trust-bar-item { display: flex; align-items: center; gap: 10px; }
    .trust-bar-icon {
      width: 40px; height: 40px;
      background: var(--c-gray-55);
      border-radius: var(--r-btn);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .trust-bar-icon svg { width: 20px; height: 20px; color: var(--c-blue); }
    .trust-bar-text strong { font-size:18px; font-weight: 600; display: block; color: var(--c-navy); }
    .trust-bar-text span { font-size:16px; color: var(--c-slate); }
    .trust-bar-sep { display: none; }

    /* ============================================================
       SECTION HEADER
       ============================================================ */
    .section-header { margin-bottom: var(--sp-44); }
    .section-header--centered { text-align: center; }
    .section-title { margin-bottom: var(--sp-12); }
    .section-lead { font-size: 18px; color: var(--c-slate); line-height: 1.65; max-width: 640px; }
    .section-header--centered .section-lead { margin: 0 auto; }

    /* ============================================================
       AUDIENCE TABS
       ============================================================ */
    .tabs-nav { display: flex; gap: var(--sp-8); flex-wrap: wrap; margin-bottom: var(--sp-32); }
    .tab-btn {
      padding: var(--sp-8) var(--sp-20);
      border-radius: var(--r-circle);
      border: 1px solid var(--c-gray-200);
      font-family: var(--font-primary);
      font-size: var(--text-body-xs);
      font-weight: 600;
      color: var(--c-slate);
      cursor: pointer;
      transition: border-color var(--t), color var(--t), background var(--t);
      background: transparent;
    }
    .tab-btn:hover { border-color: var(--c-blue); color: var(--c-blue); }
    .tab-btn.is-active { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-white); }

    .tab-panel { display: none; }
    .tab-panel.is-active { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-48); align-items: center; }

    .tab-img {
      border-radius: var(--r-card);
      overflow: hidden;
      aspect-ratio: 16/9;
      background: var(--c-gray-50);
    }
    .tab-img img { width: 100%; height: 100%; object-fit: cover; }
    .tab-img-placeholder {
      width: 100%; height: 100%;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-12);
      padding: var(--sp-32);
    }
    .tab-img-placeholder svg { width: 56px; height: 56px; color: var(--c-gray-300); }
    .tab-img-placeholder p { font-size: var(--text-body-xs); color: var(--c-gray-400); font-weight: 600; text-align: center; }
    .tab-img-placeholder code { font-size: var(--text-caption); color: var(--c-gray-300); }

    .tab-text h3 { font-size: 26px; font-weight: 600; margin-bottom: var(--sp-12); color: var(--c-navy); }
    .tab-text p { font-size:18px; color: var(--c-slate); line-height: 1.7; margin-bottom: var(--sp-20); }
    .check-list { display: flex; flex-direction: column; gap: var(--sp-12); margin-bottom: var(--sp-24); }
    .check-item { display: flex; align-items: flex-start; gap: var(--sp-8); font-size:18px; color: var(--c-charcoal); }
    .check-dot {
      width: 20px; height: 20px; border-radius: 50%;
      background: var(--c-green); display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-top: 1px;
    }
    .check-dot svg { width: 11px; height: 11px; stroke: #fff; fill: none; stroke-width: 3; }

    /* Expert Quote Block */
    .expert-block {
      background: var(--c-gray-55);
      border-left: 3px solid var(--c-blue);
      border-radius: 0 var(--r-btn) var(--r-btn) 0;
      padding: var(--sp-16) var(--sp-20);
      margin-top: var(--sp-32);
    }
    .expert-block-label { font-size:16px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-blue); margin-bottom: var(--sp-8); }
    .expert-block-title { font-size: 17px; font-weight: 600; color: var(--c-navy); margin-bottom: var(--sp-8); }
    .expert-block-body { font-size:16px; color: var(--c-slate); line-height: 1.7; }
    .expert-quote-text { font-size:18px; font-style: italic; color: var(--c-charcoal); line-height: 1.7; border-left: 2px solid var(--c-gray-200); padding-left: var(--sp-16); margin-top: var(--sp-12); }
    .expert-quote-author { font-size: var(--text-body-xs); font-weight: 600; color: var(--c-blue); font-style: normal; margin-top: var(--sp-8); }

    /* ============================================================
       FORMATS
       ============================================================ */
    .formats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-20); }
    .format-card { padding: var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-12); margin-top: 16px; }
    .format-card.featured { background: var(--c-blue); border-color: var(--c-blue); }
    .format-card.featured .h4,
    .format-card.featured .format-desc { color: rgba(255,255,255,0.95); }
    .format-card.featured .format-tag { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.9); }
    .format-card.featured .badge { background: rgba(255,255,255,0.2); color: var(--c-white); }
    .format-icon {
      width: 48px; height: 48px;
      border-radius: var(--r-btn);
      background: var(--c-gray-55);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .format-card.featured .format-icon { background: rgba(255,255,255,0.2); }
    .format-icon svg { width: 24px; height: 24px; color: var(--c-blue); stroke: currentColor; fill: none; stroke-width: 2; }
    .format-card.featured .format-icon svg { color: var(--c-white); }
    .format-desc { font-size:16px; color: var(--c-slate); line-height: 1.65; }
    .format-tags { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
    .format-tag {
      font-size:16px;
      font-weight: 600;
      padding: 4px 10px;
      background: var(--c-gray-50);
      border-radius: var(--r-circle);
      color: var(--c-slate);
    }
    .format-wide { grid-column: span 2; }
    .format-wide-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-32); align-items: center; }
    .week-visual { background: var(--c-gray-50); border-radius: var(--r-btn); padding: var(--sp-20); }
    .week-label { font-size: var(--text-body-xs); font-weight: 700; color: var(--c-navy); margin-bottom: var(--sp-16); }
    .week-row { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-8); }
    .week-day { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size:16px; font-weight: 700; flex-shrink: 0; }
    .week-day.active { background: var(--c-blue); color: #fff; }
    .week-day.passive { background: var(--c-gray-300); color: #fff; }
    .week-bar { flex: 1; height: 8px; border-radius: var(--r-circle); }
    .week-bar.offline { background: var(--c-blue); }
    .week-bar.online { background: #93C5FD; }
    .week-mode { font-size:16px; font-weight: 600; width: 60px; flex-shrink: 0; }
    .week-mode.offline { color: var(--c-blue); }
    .week-mode.online  { color: var(--c-slate); }
    .week-note { font-size:16px; color: var(--c-slate); margin-top: var(--sp-12); }

    /* ============================================================
       STEPS TIMELINE
       ============================================================ */
    .steps-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      position: relative;
      margin-top: var(--sp-44);
    }
    .steps-grid::before {
      content: '';
      position: absolute;
      top: 35px; left: 10%; right: 10%;
      height: 2px;
      background: var(--c-gray-200);
      z-index: 0;
    }
    .step-item { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; }
    .step-num {
      width: 70px; height: 70px;
      border-radius: 50%;
      background: var(--c-blue);
      color: var(--c-white);
      font-size: 24px; font-weight: 600;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: var(--sp-16);
      box-shadow: 0 0 0 6px var(--c-gray-55);
    }
    .step-title { font-size:18px; font-weight: 600; margin-bottom: var(--sp-8); color: var(--c-navy); }
    .step-desc { font-size:16px; color: var(--c-slate); line-height: 1.6; padding: 0 var(--sp-8); }

    /* Compare block redesign */
.compare-board {
  margin-top: var(--sp-64);
  background: var(--c-gray-50);
  border-radius: 24px;
  padding: var(--sp-44);
  border: 1px solid var(--c-gray-200);
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.compare-title { font-size: var(--text-h3); font-weight: 800; text-align: center; margin-bottom: var(--sp-44); color: var(--c-navy); }

.compare-board-cols {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  gap: 20px;
  margin-bottom: 16px;
  padding: 0 20px;
}
.compare-col-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.compare-col-title.bad { color: #dc2626; }
.compare-col-title.good { color: #059669; }

.compare-pair {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  gap: 20px;
  margin-bottom: 16px;
}
.compare-pair:last-child { margin-bottom: 0; }

.compare-card {
  padding: 20px;
  border-radius: 16px;
  border: 1px solid;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-charcoal);
  transition: transform 0.2s ease, background 0.2s ease;
  height: 100%;
}
.compare-card.bad {
  background: #fef2f2;
  border-color: #fecaca;
  color: #7f1d1d;
}
.compare-card.good {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #14532d;
}
.compare-card.good:hover {
  transform: translateY(-2px);
  background: #dcfce7;
}

.compare-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.compare-icon.bad { color: #ef4444; }
.compare-icon.good { color: #10b981; }

.compare-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gray-300);
}

.compare-mobile-label { display: none; }

@media (max-width: 768px) {
  .compare-board { padding: 24px 16px; }
  .compare-board-cols { display: none; }
  .compare-pair {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 32px;
  }
  .compare-connector {
    transform: rotate(90deg);
    height: 24px;
  }
  .compare-mobile-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
  }
  .compare-mobile-label.bad { color: #ef4444; }
  .compare-mobile-label.good { color: #10b981; }
}


    /* ============================================================
       TRUST DARK SECTION
       ============================================================ */
    .trust-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-20); margin-top: var(--sp-44); }
    .trust-dc { padding: var(--sp-24); }
    .trust-dc-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(0, 86, 210, 0.08); display: flex; align-items: center; justify-content: center; color: var(--c-blue); margin-bottom: var(--sp-16); flex-shrink: 0; }
    .trust-dc-icon svg { width: 24px; height: 24px; stroke-width: 2px; }
    .trust-dc-title { font-size: 18px; font-weight: 600; color: var(--c-navy); margin-bottom: var(--sp-8); }
    .trust-dc-body { font-size:16px; color: var(--c-slate); line-height: 1.7; }

    .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-20); margin-top: var(--sp-44); }
    .stat-box { padding: var(--sp-24); text-align: center; }
    .stat-num { font-size: 40px; font-weight: 600; color: #93C5FD; line-height: 1; display: block; }
    .stat-label { font-size:16px; color: rgba(255,255,255,0.75); margin-top: var(--sp-8); }

    /* ============================================================
       TEACHERS
       ============================================================ */
    .teachers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-20); }
    .teacher-card { overflow: hidden; transition: box-shadow var(--t), transform var(--t); }
    .teacher-card:hover { box-shadow: var(--shadow-floating); transform: translateY(-3px); }
    .teacher-photo { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--c-gray-50); }
    .teacher-photo img { width: 100%; height: 100%; object-fit: cover; }
    .teacher-photo-placeholder {
      width: 100%; height: 100%;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-8); padding: var(--sp-16);
    }
    .teacher-photo-placeholder svg { width: 44px; height: 44px; color: var(--c-gray-300); }
    .teacher-photo-placeholder span { font-size:16px; color: var(--c-gray-400); text-align: center; }
    .teacher-badge {
      position: absolute; bottom: var(--sp-12); left: var(--sp-12);
      background: var(--c-blue); color: var(--c-white);
      border-radius: var(--r-circle);
      padding: 3px 10px;
      font-size:16px; font-weight: 600;
    }
    .teacher-info { padding: var(--sp-16); }
    .teacher-name { font-size: 17px; font-weight: 600; color: var(--c-navy); margin-bottom: 3px; }
    .teacher-spec { font-size:16px; color: var(--c-blue); font-weight: 600; margin-bottom: var(--sp-4); }
    .teacher-exp { font-size:16px; color: var(--c-slate); }
    .teacher-tags { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }
    .teacher-tag { font-size:16px; padding: 4px 10px; background: var(--c-gray-50); border-radius: var(--r-circle); color: var(--c-slate); }

    /* ============================================================
       GROUPS TABLE
       ============================================================ */
    .table-wrap { overflow-x: auto; margin-top: var(--sp-32); border-radius: var(--r-card); border: 1px solid var(--c-gray-200); }
    table.groups { width: 100%; border-collapse: collapse; font-size:16px; }
    .groups thead th {
      background: var(--c-navy); color: var(--c-white);
      padding: 14px var(--sp-16); text-align: left;
      font-size:16px; font-weight: 600; letter-spacing: 0.5px;
      white-space: nowrap;
    }
    .groups thead th:first-child { border-radius: var(--r-card) 0 0 0; }
    .groups thead th:last-child  { border-radius: 0 var(--r-card) 0 0; }
    .groups tbody td { padding: 14px var(--sp-16); border-bottom: 1px solid var(--c-gray-50); vertical-align: middle; }
    .groups tbody tr:last-child td { border-bottom: none; }
    .groups tbody tr:hover td { background: var(--c-gray-50); }
    .level-pill {
      display: inline-block;
      padding: 4px 11px; border-radius: var(--r-circle);
      font-size:16px; font-weight: 600;
    }
    .lv-a1  { background: #D1FAE5; color: #065F46; }
    .lv-a2  { background: var(--c-gray-100); color: var(--c-blue); }
    .lv-b1  { background: #FEF3C7; color: #92400E; }
    .lv-b2  { background: #FCE7F3; color: #9D174D; }
    .seats { display: flex; align-items: center; gap: var(--sp-8); }
    .seats-dots { display: flex; gap: 3px; }
    .seat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-gray-200); }
    .seat-dot.on { background: var(--c-blue); }
    .seat-dot.warn { background: var(--c-gold); }
    .seats-count { font-size:16px; font-weight: 600; }
    .seats-count.warn { color: var(--c-gold); }

    /* Map + Branches */
    .map-section { display: grid; grid-template-columns: 1fr 360px; gap: var(--sp-24); margin-top: var(--sp-44); }
    .map-box {
      background: var(--c-gray-50); border-radius: var(--r-card); min-height: 300px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: var(--sp-12); border: 2px dashed var(--c-gray-200);
    }
    .map-box svg { width: 44px; height: 44px; color: var(--c-gray-300); }
    .branches { display: flex; flex-direction: column; gap: var(--sp-12); }
    .branches h3 { font-size: var(--text-h4); font-weight: 600; margin-bottom: var(--sp-16); }
    .branch {
      background: var(--c-gray-50); border-radius: var(--r-card); padding: var(--sp-16);
      border: 1px solid var(--c-gray-200); display: flex; align-items: flex-start; gap: var(--sp-12);
    }
    .branch-metro { width: 36px; height: 36px; background: #e53e3e; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size:18px; flex-shrink: 0; }
    .branch-info strong { font-size:18px; font-weight: 700; display: block; color: var(--c-navy); }
    .branch-info span { font-size:16px; color: var(--c-slate); line-height: 1.55; }

    /* ============================================================
       QUIZ CTA
       ============================================================ */
    .quiz-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-48); align-items: center; }
    .quiz-perks { display: flex; gap: var(--sp-16); margin-top: var(--sp-20); flex-wrap: wrap; }
    .quiz-perk { display: flex; align-items: center; gap: 6px; font-size:16px; color: var(--c-slate); }
    .quiz-perk svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--c-green); }

    .quiz-card {
      background: var(--c-white);
      border-radius: var(--r-card);
      padding: var(--sp-24);
      box-shadow: var(--shadow-modal);
      border: 1px solid var(--c-gray-200);
    }
    .quiz-q { font-size: 17px; font-weight: 600; color: var(--c-navy); margin-bottom: var(--sp-16); }
    .quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
    .quiz-opt {
      padding: 12px 14px;
      border: 2px solid var(--c-gray-200);
      border-radius: var(--r-btn);
      font-family: var(--font-primary);
      font-size:16px;
      font-weight: 500;
      cursor: pointer;
      text-align: center;
      transition: border-color var(--t), color var(--t), background var(--t);
      color: var(--c-charcoal);
      background: transparent;
    }
    .quiz-opt:hover { border-color: var(--c-blue); color: var(--c-blue); }
    .quiz-opt.selected { border-color: var(--c-blue); background: var(--c-blue); color: var(--c-white); }
    .quiz-prog-bar { height: 5px; background: var(--c-gray-100); border-radius: var(--r-circle); overflow: hidden; margin-top: var(--sp-20); }
    .quiz-prog-fill { height: 100%; background: var(--c-blue); border-radius: var(--r-circle); width: 20%; transition: width 0.5s ease; }
    .quiz-prog-text { font-size: var(--text-caption); color: var(--c-slate); margin-top: 5px; }

    /* ============================================================
       PRICING
       ============================================================ */
    .pricing-toggle {
      display: flex;
      background: var(--c-gray-100);
      border-radius: var(--r-circle);
      padding: 4px;
      width: fit-content;
      margin: var(--sp-32) auto var(--sp-44);
    }
    .ptoggle-btn {
      padding: 9px var(--sp-24);
      border-radius: var(--r-circle);
      font-family: var(--font-primary);
      font-size: var(--text-body-xs);
      font-weight: 600;
      cursor: pointer;
      transition: background var(--t), color var(--t), box-shadow var(--t);
      background: transparent;
      color: var(--c-slate);
      border: none;
    }
    .ptoggle-btn.active { background: var(--c-white); color: var(--c-blue); box-shadow: var(--shadow-raised); }

    .pricing-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-20); }
    .pricing-card { padding: var(--sp-32); display: flex; flex-direction: column; position: relative; margin-top: 16px; }
    .pricing-card.popular { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(0,86,210,0.1); }
    .popular-badge {
      position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
      background: var(--c-blue); color: var(--c-white);
      border-radius: var(--r-circle); padding: 4px var(--sp-16);
      font-size: var(--text-caption); font-weight: 700; white-space: nowrap;
    }
    .pricing-tier { font-size:16px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-slate); margin-bottom: var(--sp-12); }
    .pricing-amount { font-size: 38px; font-weight: 600; color: var(--c-navy); line-height: 1; margin-bottom: 4px; }
    .pricing-amount span { font-size: var(--text-h4); font-weight: 600; }
    .pricing-period { font-size:16px; color: var(--c-slate); margin-bottom: var(--sp-24); }
    .pricing-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-12); margin-bottom: var(--sp-24); flex: 1; }
    .pricing-list li { display: flex; align-items: flex-start; gap: var(--sp-8); font-size:16px; color: var(--c-charcoal); }
    .pricing-list li svg { width: 15px; height: 15px; color: var(--c-green); flex-shrink: 0; margin-top: 2px; }
    .pricing-note { font-size:16px; color: var(--c-slate); text-align: center; margin-top: var(--sp-12); }
    .pricing-extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-16); margin-top: var(--sp-32); }
    .pricing-extra {
      background: var(--c-white); border: 1px solid var(--c-gray-200);
      border-radius: var(--r-card); padding: var(--sp-20); text-align: center;
    }
    .pricing-extra-icon { font-size: 26px; margin-bottom: var(--sp-8); }
    .pricing-extra-title { font-size:18px; font-weight: 600; margin-bottom: var(--sp-4); color: var(--c-navy); }
    .pricing-extra-text { font-size:16px; color: var(--c-slate); line-height: 1.55; }

    /* ============================================================
       REVIEWS
       ============================================================ */
    .reviews-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--sp-44); }
    .rating-big { font-size: 52px; font-weight: 600; color: var(--c-navy); line-height: 1; }
    .stars { font-size: 18px; color: var(--c-gold); }
    .rating-info { font-size:16px; color: var(--c-slate); margin-top: var(--sp-4); }
    .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-20); }
    .review-card { padding: var(--sp-24); position: relative; background: var(--c-gray-50); border: 1px solid var(--c-gray-200); }
    .review-card::before {
      content: '"'; position: absolute; top: 14px; right: var(--sp-16);
      font-size: 56px; line-height: 1; font-family: serif; font-weight: 900;
      color: var(--c-gray-200);
    }
    .review-stars { color: var(--c-gold); font-size:16px; margin-bottom: var(--sp-8); }
    .review-goal { font-size:16px; font-weight: 600; color: var(--c-blue); margin-bottom: var(--sp-12); }
    .review-text { font-size:16px; color: var(--c-charcoal); line-height: 1.7; margin-bottom: var(--sp-16); }
    .reviewer { display: flex; align-items: center; gap: var(--sp-12); }
    .reviewer-ava {
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--c-blue); color: var(--c-white);
      display: flex; align-items: center; justify-content: center;
      font-size: var(--text-body-sm); font-weight: 600; flex-shrink: 0;
    }
    .reviewer-name { font-size:16px; font-weight: 600; }
    .reviewer-sub  { font-size:16px; color: var(--c-slate); }
    .platforms { display: flex; align-items: center; justify-content: center; gap: var(--sp-16); margin-top: var(--sp-32); flex-wrap: wrap; }
    .platform {
      display: flex; align-items: center; gap: var(--sp-8);
      padding: 10px var(--sp-20); border: 1px solid var(--c-gray-200);
      border-radius: var(--r-circle); font-size:16px; font-weight: 600;
      transition: box-shadow var(--t), border-color var(--t);
    }
    .platform:hover { border-color: var(--c-blue); box-shadow: var(--shadow-raised); }

    /* ============================================================
       FAQ
       ============================================================ */
    .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); margin-top: var(--sp-44); }
    .faq-item { background: var(--c-white); border: 1px solid var(--c-gray-200); border-radius: var(--r-card); overflow: hidden; transition: border-color var(--t); }
    .faq-item.open { border-color: var(--c-blue); }
    .faq-btn {
      width: 100%; padding: var(--sp-20); text-align: left;
      background: none; border: none; font-family: var(--font-primary);
      font-size:18px; font-weight: 600; color: var(--c-navy);
      cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12);
      transition: color var(--t);
    }
    .faq-btn:hover { color: var(--c-blue); }
    .faq-btn svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--c-slate); transition: transform var(--t), color var(--t); }
    .faq-item.open .faq-btn svg { transform: rotate(180deg); color: var(--c-blue); }
    .faq-answer { padding: 0 var(--sp-20); max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; }
    .faq-item.open .faq-answer { max-height: 320px; padding: 0 var(--sp-20) var(--sp-20); }
    .faq-answer p { font-size:16px; color: var(--c-slate); line-height: 1.7; }
    .faq-cta-box {
      text-align: center; margin-top: var(--sp-44);
      padding: var(--sp-32); background: var(--c-white);
      border-radius: var(--r-card); border: 1px solid var(--c-gray-200);
    }
    .faq-cta-box h3 { font-size: var(--text-h4); font-weight: 600; margin-bottom: var(--sp-8); }
    .faq-cta-box p { font-size:18px; color: var(--c-slate); margin-bottom: var(--sp-20); }
    .faq-cta-btns { display: flex; gap: var(--sp-12); justify-content: center; flex-wrap: wrap; }

    /* ============================================================
       HOW-TO ADVICE
       ============================================================ */
    .advice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-20); margin-top: var(--sp-44); }
    .advice-card { padding: var(--sp-24); }
    .advice-num { font-size: 44px; font-weight: 600; color: var(--c-gray-200); line-height: 1; margin-bottom: var(--sp-8); }
    .advice-title { font-size: 17px; font-weight: 600; color: var(--c-navy); margin-bottom: var(--sp-8); }
    .advice-text { font-size:16px; color: var(--c-slate); line-height: 1.65; }

    /* ============================================================
       FINAL CTA
       ============================================================ */
    #final-cta {
      background: linear-gradient(135deg, #08173A 0%, #0044AA 100%);
      padding: var(--sp-120) 0;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    #final-cta::before { content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: rgba(255,255,255,0.04); top: -220px; right: -100px; }
    #final-cta::after  { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: rgba(255,255,255,0.04); bottom: -160px; left: -80px; }
    .final-cta-inner { position: relative; z-index: 1; }
    .final-cta-title { font-size: clamp(26px, 5vw, 44px); font-weight: 600; color: var(--c-white); margin-bottom: var(--sp-16); }
    .final-cta-sub { font-size: 19px; color: rgba(255,255,255,0.8); margin-bottom: var(--sp-44); max-width: 540px; margin-left: auto; margin-right: auto; }
    .final-cta-btns { display: flex; gap: var(--sp-16); justify-content: center; flex-wrap: wrap; }
    .final-cta-btns .btn-white { background: var(--c-white); color: var(--c-blue); font-weight: 600; }
    .final-cta-btns .btn-white:hover { background: var(--c-gray-50); }
    .final-reassure { display: flex; align-items: center; justify-content: center; gap: var(--sp-24); margin-top: var(--sp-32); flex-wrap: wrap; }
    .final-re-item { display: flex; align-items: center; gap: var(--sp-8); font-size:16px; color: rgba(255,255,255,0.75); }
    .final-re-item svg { width: 15px; height: 15px; flex-shrink: 0; }

    /* ============================================================
       FOOTER
       ============================================================ */
    footer {
      background: var(--c-navy);
      color: rgba(255,255,255,0.65);
      padding: var(--sp-64) 0 var(--sp-32);
    }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-44); margin-bottom: var(--sp-48); }
    .footer-brand p { font-size:16px; margin-top: var(--sp-16); line-height: 1.7; }
    .footer-legal-note { font-size: var(--text-caption); color: rgba(255,255,255,0.3); margin-top: var(--sp-8); line-height: 1.5; }
    .social-row { display: flex; gap: var(--sp-8); margin-top: var(--sp-16); }
    .social-a { width: 36px; height: 36px; border-radius: var(--r-btn); background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); font-size: var(--text-body-xs); font-weight: 700; transition: background var(--t), color var(--t); }
    .social-a:hover { background: var(--c-blue); color: var(--c-white); }
    .footer-col h4 { font-size:16px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--c-white); margin-bottom: var(--sp-16); }
    .footer-col ul { display: flex; flex-direction: column; gap: var(--sp-8); }
    .footer-col ul a { font-size:16px; color: rgba(255,255,255,0.6); transition: color var(--t); }
    .footer-col ul a:hover { color: var(--c-white); }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: var(--sp-24); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-12); }
    .footer-bottom p { font-size:16px; }
    .footer-links { display: flex; gap: var(--sp-20); flex-wrap: wrap; align-items: center; }
    .footer-links a { font-size:16px; color: rgba(255,255,255,0.45); }
    .footer-links a:hover { color: var(--c-white); }
    .footer-link-muted { font-size:13px !important; color: rgba(255,255,255,0.25) !important; }
    .footer-link-muted:hover { color: rgba(255,255,255,0.55) !important; }

    /* ============================================================
       STICKY MOBILE CTA
       ============================================================ */
    .sticky-mob {
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
      padding: 12px var(--sp-16);
      background: var(--c-white);
      border-top: 1px solid var(--c-gray-200);
      box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
      gap: var(--sp-8);
    }

    /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media (max-width: 1024px) {
      .container { padding: 0 var(--sp-24); }
      .hero-layout { grid-template-columns: 1fr; }
      .hero-form-card { position: static; max-width: 500px; }
      .hero-stats { grid-template-columns: repeat(2, 1fr); }
      .teachers-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .steps-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-24); }
      .steps-grid::before { display: none; }
    }
    @media (max-width: 768px) {
      .container { padding: 0 var(--sp-16); }
      .section { padding: var(--sp-48) 0; }
      #hero { padding: var(--sp-48) 0 0; }
      #final-cta { padding: var(--sp-64) 0; }
      .site-nav { display: none; }
      .burger { display: flex; }
      .header-actions .btn { display: none; }
      .formats-grid { grid-template-columns: 1fr; }
      .format-wide { grid-column: span 1; }
      .format-wide-inner { grid-template-columns: 1fr; }
      .tab-panel.is-active { grid-template-columns: 1fr; }
      .trust-cards-grid { grid-template-columns: 1fr; }
      .teachers-grid { grid-template-columns: repeat(2, 1fr); }
      .pricing-cards { grid-template-columns: 1fr; }
      .pricing-extras { grid-template-columns: 1fr; }
      .reviews-grid { grid-template-columns: 1fr; }
      .faq-grid { grid-template-columns: 1fr; }
      .advice-grid { grid-template-columns: 1fr; }
      .quiz-layout { grid-template-columns: 1fr; }
      .map-section { grid-template-columns: 1fr; }
      .interactive-map-wrapper { display: none; }
      .stats-row { grid-template-columns: repeat(2, 1fr); }
      .compare-cols { grid-template-columns: 1fr; }
      .compare-vs { padding: var(--sp-8) 0; }
      .trust-bar-list { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--sp-16); }
      .trust-bar-sep { display: none; }
      .steps-grid { grid-template-columns: 1fr; gap: var(--sp-24); }
      .reviews-top { flex-direction: column; align-items: flex-start; gap: var(--sp-16); }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
      .sticky-mob { display: flex; }
      h1.hero-h1 { font-size: 26px; }
    }
    @media (max-width: 480px) {
      .teachers-grid { grid-template-columns: 1fr; }
      .hero-btns { flex-direction: column; }
      .hero-btns .btn { width: 100%; justify-content: center; }
      .final-cta-btns { flex-direction: column; align-items: center; }
      .final-cta-btns .btn { width: 100%; max-width: 320px; }
      .quiz-opts { grid-template-columns: 1fr; }
      .faq-cta-btns { flex-direction: column; align-items: center; }
    }

    /* ============================================================
       STEP 6: PRODUCTION-READY HEADER, NAV, MOBILE MENU, MODAL
       ============================================================ */

    /* Nav links with icons */
    .nav-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size:16px;
      font-weight: 500;
      color: var(--c-charcoal);
      white-space: nowrap;
      transition: color var(--t);
      text-decoration: none;
      padding: 4px 2px;
    }
    .nav-link:hover, .nav-link.active { color: var(--c-blue); }
    .nav-link.active { font-weight: 600; }
    .nav-icon {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      color: var(--c-slate);
      transition: color var(--t);
    }
    .nav-link:hover .nav-icon,
    .nav-link.active .nav-icon { color: var(--c-blue); }
    .nav-label { flex-shrink: 0; }

    /* Nav dropdown */
    .nav-dropdown { position: relative; }
    .nav-chevron { margin-left: 2px; transition: transform 0.2s ease; }
    .nav-dropdown:hover .nav-chevron { transform: rotate(180deg); }
    .nav-dropdown-menu {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(8px);
      min-width: 220px;
      background: #fff;
      border: 1px solid var(--c-gray-100);
      border-radius: 12px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.12);
      padding: 8px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
      z-index: 1000;
    }
    .nav-dropdown:hover .nav-dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
    .nav-dropdown-link {
      display: block;
      padding: 10px 14px;
      font-size: 14px;
      font-weight: 500;
      color: var(--c-charcoal);
      text-decoration: none;
      border-radius: 8px;
      transition: background 0.15s ease, color 0.15s ease;
      white-space: nowrap;
    }
    .nav-dropdown-link:hover {
      background: var(--c-gray-50);
      color: var(--c-blue);
    }

    
    /* Mobile nav accordion styles */
    .mob-sub-menu { display: none; }
    .mob-sub-menu.show { display: block; }
    .mob-chevron.rotate { transform: rotate(180deg); }
    .mob-nav .mob-nav-link,
    .mob-nav a.mob-nav-link { display: flex !important; }
    /* Mobile sub-links */
    .mob-nav-sub {
      padding-left: 52px;
      font-size: 15px;
      color: var(--c-slate);
    }


    /* Header phone */
    .header-phone {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size:16px;
      font-weight: 600;
      color: var(--c-charcoal);
      white-space: nowrap;
      flex-shrink: 0;
      transition: color var(--t);
      text-decoration: none;
    }
    .header-phone:hover { color: var(--c-blue); }
    .header-cta { white-space: nowrap; flex-shrink: 0; font-size:16px; }

    /* Scrolled header */
    #site-header.scrolled {
      box-shadow: 0 4px 16px rgba(0,0,0,0.10);
      backdrop-filter: blur(8px);
    }

    /* Burger animation */
    .burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; border-radius: var(--r-btn); background: none; border: none; cursor: pointer; padding: 0; }
    .burger-line { display: block; width: 22px; height: 2px; background: var(--c-navy); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; transform-origin: center; }
    .burger.is-open .burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .burger.is-open .burger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .burger.is-open .burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Mobile nav items */
    .mob-nav-link {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      font-size:16px;
      font-weight: 500;
      color: var(--c-navy);
      text-decoration: none;
      border-radius: var(--r-btn);
      transition: background var(--t), color var(--t);
      white-space: nowrap;
    }
    .mob-nav-link:hover { background: var(--c-gray-50); color: var(--c-blue); }
    .mob-nav-link:active { background: var(--c-gray-100); }
    .mob-nav-icon { display: flex; align-items: center; color: var(--c-slate); flex-shrink: 0; }
    .mob-nav-link:hover .mob-nav-icon { color: var(--c-blue); }

    .mob-actions {
      padding: 20px 24px 24px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      border-top: 1px solid var(--c-gray-100);
      margin-top: auto;
    }

    /* Breadcrumbs */
    .breadcrumbs { padding: 14px 0; border-bottom: 1px solid var(--c-gray-100); background: var(--c-white); }
    .breadcrumbs-list { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size:16px; }
    .breadcrumbs-item { display: flex; align-items: center; gap: 6px; }
    .breadcrumbs-item a { color: var(--c-blue); text-decoration: none; }
    .breadcrumbs-item a:hover { text-decoration: underline; }
    .breadcrumbs-current { color: var(--c-slate); }
    .breadcrumbs-sep { color: var(--c-gray-200); font-size:18px; }

    /* ── MODAL v2 ──────────────────────────────────────────── */
    .modal-overlay {
      position: fixed; inset: 0; z-index: 999;
      background: rgba(8,23,58,0.6);
      display: flex; align-items: center; justify-content: center;
      padding: 16px;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      animation: fadeIn 0.2s ease;
    }
    .modal-overlay[hidden] { display: none !important; }
    @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

    .modal-box {
      background: var(--c-white);
      border-radius: 20px;
      box-shadow: 0 24px 64px rgba(0,0,0,0.2);
      width: 100%;
      max-width: 480px;
      max-height: 90dvh;
      overflow-y: auto;
      padding: 32px;
      position: relative;
      animation: slideUp 0.25s ease;
    }
    @keyframes slideUp { from { transform: translateY(20px); opacity:0; } to { transform: translateY(0); opacity:1; } }

    .modal-close {
      position: absolute; top: 16px; right: 16px;
      width: 36px; height: 36px;
      border-radius: 50%;
      background: var(--c-gray-100);
      border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--c-slate);
      transition: background var(--t), color var(--t);
    }
    .modal-close:hover { background: var(--c-gray-200); color: var(--c-navy); }
    .modal-close:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }

    .modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding-right: 32px; }
    .modal-icon {
      width: 48px; height: 48px; border-radius: 12px;
      background: linear-gradient(135deg, var(--c-blue) 0%, #1976D2 100%);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .modal-title { font-size: 20px; font-weight: 700; color: var(--c-navy); margin: 0; }
    .modal-sub { font-size:16px; color: var(--c-slate); margin: 4px 0 0; }

    /* Contact tabs */
    .contact-tabs {
      display: flex;
      background: var(--c-gray-50);
      border-radius: 10px;
      padding: 4px;
      margin-bottom: 24px;
      gap: 4px;
    }
    .contact-tab {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 9px 12px;
      border-radius: 8px;
      font-family: var(--font-primary);
      font-size:16px;
      font-weight: 600;
      color: var(--c-slate);
      background: transparent;
      border: none;
      cursor: pointer;
      transition: background var(--t), color var(--t), box-shadow var(--t);
      white-space: nowrap;
    }
    .contact-tab.active {
      background: var(--c-white);
      color: var(--c-blue);
      box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    }
    .contact-tab:hover:not(.active) { color: var(--c-navy); }

    /* Messenger selector */
    .messenger-select {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 8px;
    }
    .msg-option {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border: 2px solid var(--c-gray-200);
      border-radius: var(--r-btn);
      font-family: var(--font-primary);
      font-size:16px;
      font-weight: 600;
      color: var(--c-charcoal);
      background: var(--c-white);
      cursor: pointer;
      transition: border-color var(--t), color var(--t), background var(--t);
      white-space: nowrap;
    }
    .msg-option:hover { border-color: var(--c-blue); color: var(--c-blue); }
    .msg-option.active { border-color: var(--c-blue); background: rgba(0,86,210,0.06); color: var(--c-blue); }
    .msg-option:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }

    /* Form extras */
    .form-optional { font-size:16px; font-weight: 400; color: var(--c-slate); }
    .form-required { color: var(--c-red, #E53935); font-size:16px; }
    .form-error { display: block; font-size:16px; color: var(--c-red, #E53935); margin-top: 5px; min-height: 18px; }
    .form-input.input-error { border-color: var(--c-red, #E53935); }
    .form-input.input-error:focus { box-shadow: 0 0 0 3px rgba(229,57,53,0.15); }
    .form-policy { font-size:16px; color: var(--c-slate); text-align: center; margin-top: 12px; }
    .form-policy a { color: var(--c-blue); }

    .modal-success-box { max-width: 400px; }

    /* Focus styles */
    :focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; border-radius: 4px; }

    /* ── RESPONSIVE header v2 ─────────────────────────────── */
    @media (max-width: 1100px) {
      .site-nav { display: none; }
      .header-phone span { display: none; }
      .header-phone { padding: 8px; border-radius: var(--r-btn); background: var(--c-gray-50); }
      .burger { display: flex; }
    }
    @media (max-width: 820px) {
      .header-phone { display: none; }
      .header-cta { display: none; }
    }
    @media (max-width: 480px) {
      .logo-sub { display: none; }
    }

    /* ── Modal mobile ─────────────────────────────────────── */
    @media (max-width: 600px) {
      .modal-overlay { padding: 0; align-items: flex-end; }
      .modal-box {
        border-radius: 20px 20px 0 0;
        max-height: 95dvh;
        padding: 24px 20px 32px;
      }
      .messenger-select { flex-direction: column; }
      .msg-option { justify-content: center; }
    }
    @media (max-width: 390px) {
      .contact-tab { font-size:16px; padding: 8px 8px; }
      .modal-box { padding: 20px 16px 28px; }
    }


/* ============================================================
   QA FIXES — Step 21
   ============================================================ */

/* FIX 1: max-height:320px в accordion может обрезать длинные ответы.
   Увеличиваем до 800px — достаточно для любого FAQ-ответа. */
.faq-item.open .faq-answer { max-height: 800px; }

/* FIX 2: scroll-margin-top для всех якорных секций —
   учитываем sticky header ~70px + запас 16px. */
[id] { scroll-margin-top: 88px; }
/* Для якорей внутри юридических страниц */
.legal-section { scroll-margin-top: 100px; }

/* FIX 3: overflow-wrap для предотвращения разрыва длинных слов
   (длинные email, URL, слова) в тексте секций. */
p, li, td, th, .body-md, .body, .body-sm {
  overflow-wrap: break-word;
  word-break: normal;
}

/* FIX 4: hero form card — на мобайле добавляем отступ снизу
   чтобы sticky-mob не перекрывал кнопку отправки. */
@media (max-width: 768px) {
  .hero-form-card { margin-bottom: 80px; }
}

/* FIX 5: sticky-mob z-index должен быть выше fab-callback (900),
   но ниже modal overlay (999). Устанавливаем 950. */
.sticky-mob { z-index: 950; }

/* FIX 6: Footer grid на мобайле — добавляем отступ снизу
   чтобы sticky-mob не перекрывал копирайт. */
@media (max-width: 768px) {
  footer { padding-bottom: 80px; }
}

/* FIX 7: Таблицы на страницах — обёртка для горизонтального scroll */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-card);
}

/* FIX 8: На 320px контейнер не должен давать горизонтальный overflow */
@media (max-width: 360px) {
  .container { padding: 0 12px; }
  h1.hero-h1 { font-size: 24px; }
  .hero-stat-num { font-size: 24px; }
  .hero-stat-label { font-size:16px; }
  .hero-btns { flex-direction: column; }
  .hero-btns .btn { width: 100%; justify-content: center; }
}

/* FIX 9: mob-menu overflow — меню должно прокручиваться на маленьких экранах */
.mob-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.mob-nav {
  overflow-y: auto;
  flex: 1;
  padding: 8px 16px;
}

/* FIX 10: modal на очень маленьких экранах (320px) */
@media (max-width: 360px) {
  .modal-box { padding: 16px 12px 24px; }
  .modal-title { font-size: 17px; }
  .contact-tab { font-size:16px; padding: 7px 6px; }
  .messenger-select { flex-direction: column; }
  .msg-option { justify-content: center; }
}

/* FIX 11: prefers-reduced-motion — отключаем тяжёлые анимации */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fab-callback { animation: none; }
}

/* FIX 12: img responsive defaults — исправляем возможное растяжение */
img { max-width: 100%; height: auto; }

/* FIX 13: FAB z-index выше sticky-mob но ниже modal */
.fab-callback { z-index: 940 !important; }

/* FIX 14: footer-bottom на мобайле — адаптируем flex layout */
@media (max-width: 480px) {
  .footer-bottom {
    gap: 12px;
  }
  .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size:16px;
  }
  .footer-links a { white-space: normal; }
}

/* FIX 15: hero-partners-label и pill — на 360px переносим */
@media (max-width: 400px) {
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-partners-label { white-space: normal; }
}

/* FIX 16: legal-layout на планшете */
@media (max-width: 960px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-nav { display: none; }
}
/* ============================================================
   HERO MOBILE FIX — Step 21 cosmetic
   ============================================================ */

/* Убираем overflow на всём hero чтобы badge/pills не вылезали */
#hero { overflow-x: hidden; }

/* hero-badge — разрешаем перенос, убираем nowrap */
.hero-badge-row .badge,
.hero-badge-row [class*="badge"] {
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}

@media (max-width: 768px) {
  /* hero-layout — одна колонка, убираем лишний gap */
  .hero-layout { gap: var(--sp-32); }

  /* hero-check — разрешаем перенос длинных строк */
  .hero-check { white-space: normal; font-size:16px; }

  /* hero-desc — убираем max-width чтобы на 100% не обрезалось */
  .hero-desc { max-width: 100%; font-size:18px; }

  /* hero-bottom — pills переносятся */
  .hero-bottom { gap: var(--sp-12); }
  .hero-partners-label { white-space: normal; }
  .partner-pill { white-space: normal; }

  /* hero-stats 2×2 уже есть на 1024, убеждаемся */
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-16); }
  .hero-stat-num { font-size: 26px; }
}

@media (max-width: 480px) {
  /* На маленьких — однострочный hero stats */
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .hero-stat-num { font-size: 22px; }
  .hero-stat-label { font-size:16px; }
  /* Кнопки в столбик уже сделаны выше, убеждаемся */
  .hero-btns .btn { width: 100%; justify-content: center; max-width: 100%; }
  /* hero паддинг поменьше */
  #hero { padding-top: var(--sp-44); }
}

/* ============================================================
   MOB-MENU ACTIONS compact
   ============================================================ */
@media (max-width: 768px) {
  .mob-actions {
    padding: 16px 16px 20px;
    gap: 8px;
  }
  /* Иконка SVG в mob-nav-link меньше */
  .mob-nav-icon svg { width: 17px; height: 17px; }

  /* mob-panel-top компактнее */
  .mob-panel-top {
    padding: 14px 16px;
  }
}
/* ============================================================
   HERO FORM MOBILE: скрыть форму, оставить кнопки-модалки
   ============================================================ */
@media (max-width: 1023px) {
  /* Форма скрыта — заменяется модалкой пробного урока */
  #hero-form, .hero-form-card { display: none !important; }
  /* hero-layout — одна колонка без gap под форму */
  .hero-layout { grid-template-columns: 1fr !important; gap: 0 !important; }
}
/* ============================================================
   BUTTON CLIPPING FIX — мобайл
   ============================================================ */
/* Кнопки не обрезаются по правому краю */
.hero-btns .btn,
.hero-btns button.btn {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .hero-btns {
    flex-direction: column;
    gap: 10px;
  }
  .hero-btns .btn,
  .hero-btns button.btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  /* Кнопки в секциях тоже не должны обрезаться */
  .btn {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Блок с trust-bar не обрезается */
  .trust-bar-list { overflow-x: hidden; }
}
/* ===== Teacher cards for SEO pages (shared) ===== */
.teacher-card-adv{background:#fff;border:1px solid var(--c-gray-100);border-radius:20px;overflow:hidden;transition:box-shadow .2s,transform .2s}
.teacher-card-adv:hover{box-shadow:0 12px 40px rgba(0,0,0,.10);transform:translateY(-4px)}
.teacher-card-adv-photo{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--c-gray-50)}
.teacher-card-adv-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .3s}
.teacher-card-adv:hover .teacher-card-adv-photo img{transform:scale(1.03)}
.teacher-card-adv-badge{position:absolute;top:12px;left:12px;padding:5px 12px;border-radius:20px;font-size:16px;font-weight:700;color:#fff;white-space:nowrap}
.teacher-card-adv-body{padding:20px 20px 16px}
.teacher-card-adv-name{font-size:18px;font-weight:800;color:var(--c-navy);margin-bottom:3px}
.teacher-card-adv-role{font-size:16px;color:var(--c-blue);font-weight:600;margin-bottom:10px}
.teacher-card-adv-meta{display:flex;gap:14px;font-size:16px;color:var(--c-slate);margin-bottom:12px;flex-wrap:wrap}
.teacher-card-adv-about{font-size:16px;color:var(--c-charcoal);line-height:1.6;margin-bottom:16px}
.btn-full{width:100%;justify-content:center}

/* ===== Cross-links section (shared across all SEO pages) ===== */
.cross-links-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cross-link-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #E2E8F0;border-radius:16px;padding:20px;text-decoration:none;transition:all .2s;color:inherit}
.cross-link-card:hover{border-color:#1E3A8A;box-shadow:0 4px 20px rgba(30,58,138,.12);transform:translateY(-2px)}
.cross-link-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.cross-link-text strong{display:block;font-size:16px;font-weight:700;color:#0A1628}
.cross-link-text span{font-size:16px;color:#64748B;display:block}
@media(max-width:1024px){.cross-links-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.cross-links-grid{grid-template-columns:1fr}}

/* ===== GLOBAL MOBILE SAFETY RULES ===== */
/* Предотвращаем горизонтальный overflow во всех секциях */
.section > .container > * { min-width: 0; }
/* Таблицы внутри overflow-x:auto — всегда с min-width */
[style*="overflow-x:auto"] table,
[style*="overflow-x: auto"] table { min-width: 280px; }
/* Любые flex/grid-дети не должны выходить за родителя */
.card, .card-pad, [class*="-card"] { min-width: 0; }

/* Shared Grid for Teachers and Reviews */
.biz-teachers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.biz-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

@media(max-width: 1024px) {
  .biz-teachers-grid { grid-template-columns: repeat(2, 1fr); }
  .biz-reviews-grid { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width: 640px) {
  .biz-teachers-grid { grid-template-columns: 1fr; }
  .biz-reviews-grid { grid-template-columns: 1fr; }
}

/* Shared Styles for Reviews */
.review-biz { background: #fff; border: 1px solid #F1F5F9; border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.review-biz-stars { color: #F59E0B; font-size: 18px; }
.review-biz-text { font-size: 18px; color: #334155; line-height: 1.7; font-style: italic; }
.review-biz-author { font-size: 16px; font-weight: 700; color: #0A1628; }
.review-biz-detail { font-size: 16px; color: #64748B; }





/* ADDED FOR GENERATED IMAGES FIX */
.format-card-photo { margin: -24px -24px 20px; aspect-ratio: 16/9; overflow: hidden; border-radius: 12px 12px 0 0; }
.format-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reviewer-ava-img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center top; flex-shrink: 0; }
.team-photo-block { border-radius: 20px; overflow: hidden; margin-top: 40px; margin-bottom: 40px; }
.team-photo-block img { width: 100%; height: 320px; object-fit: cover; object-position: center 20%; display: block; }
.success-story-photo { float: right; margin: 0 0 12px 20px; width: 150px; height: 150px; border-radius: 16px; object-fit: cover; object-position: top; }
@media(max-width: 600px) { .success-story-photo { float: none; width: 100%; height: 200px; margin: 0 0 16px; } }
.how-to-choose-visual { border-radius: 20px; overflow: hidden; margin-bottom: 40px; max-height: 280px; }
.how-to-choose-visual img { width: 100%; height: 280px; object-fit: cover; display: block; }

/* Layering effect for format cards */
.format-card:has(.format-card-photo) .format-card-photo { order: 1; margin-bottom: 0; }
.format-card:has(.format-card-photo) .format-tags { 
    order: 2; 
    margin-top: -36px; 
    z-index: 2; 
    position: relative; 
}
.format-card:has(.format-card-photo) .format-tag {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    color: #1e293b;
    border: 1px solid rgba(0,0,0,0.05);
}
.format-card:has(.format-card-photo) .h4 { order: 3; margin-top: 12px; }
.format-card:has(.format-card-photo) .format-desc { order: 4; }


/* --- HOW WE TEACH PARALLAX GLASSMORPHISM --- */
.london-parallax-bg {
    background-image: url('../images/london-bg.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}
.london-parallax-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 0;
}
.london-parallax-bg .container {
    position: relative;
    z-index: 1;
}
.london-parallax-bg .section-header .overline { color: rgba(255,255,255,0.9); }
.london-parallax-bg .section-header .section-title { color: #ffffff; text-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.london-parallax-bg .section-header .section-lead { color: rgba(255,255,255,0.95); text-shadow: 0 2px 8px rgba(0,0,0,0.3); }






/* --- SECTION BLUE --- */
.section--blue {
    background-color: var(--c-blue);
}
.section--blue .overline { color: rgba(255,255,255,0.8); }
.section--blue .section-title { color: #ffffff; text-shadow: none; }
.section--blue .section-lead { color: rgba(255,255,255,0.95); text-shadow: none; }

/* --- TEACHER SELECTION BANNER --- */
.teacher-selection-banner {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    margin: 40px 0;
    min-height: 400px;
    display: flex;
    align-items: center;
    background: var(--c-slate);
}
.ts-banner-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.ts-banner-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: right 30%;
}
.ts-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--c-blue) 0%, rgba(21,101,216, 0.9) 45%, rgba(21,101,216, 0) 100%);
}
.ts-banner-content {
    position: relative;
    z-index: 2;
    padding: 60px 40px;
    max-width: 700px;
}
.ts-banner-content.expert-block {
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 0;
}
@media (max-width: 992px) {
    .ts-banner-overlay {
        background: linear-gradient(90deg, var(--c-blue) 0%, rgba(21,101,216, 0.95) 60%, rgba(21,101,216, 0.4) 100%);
    }
}
@media (max-width: 768px) {
    .ts-banner-overlay {
        background: linear-gradient(0deg, var(--c-blue) 0%, rgba(21,101,216, 0.95) 65%, rgba(21,101,216, 0.3) 100%);
    }
    .teacher-selection-banner {
        align-items: flex-end;
        min-height: 500px;
    }
    .ts-banner-content {
        padding: 40px 24px;
    }
}

/* --- TRUST BLOCK 3D ICONS & STATS --- */

#trust .stat-box {
    background: var(--c-blue);
    border: none;
    box-shadow: 0 12px 32px rgba(21, 101, 216, 0.25);
    transition: transform 0.3s ease;
}
#trust .stat-box:hover {
    transform: translateY(-4px);
}
#trust .stat-num { color: #ffffff; }
#trust .stat-label { color: rgba(255,255,255,0.9); }


/* ===== PD Consent checkbox (all forms, v2026-09-21) ===== */
.form-consent { margin-bottom: 14px; }
.form-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.form-consent-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--c-blue, #0056D2);
  cursor: pointer;
}
.form-consent-row label {
  font-size: 12px;
  line-height: 1.42;
  color: var(--c-slate, #6B7280);
  cursor: pointer;
  user-select: none;
}
.form-consent-row label a {
  color: var(--c-blue, #0056D2);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.form-consent-row label a:hover { opacity: .8; }
.form-consent-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--c-blue, #0056D2);
  outline-offset: 2px;
  border-radius: 2px;
}
.consent-err {
  display: block;
  font-size: 11px;
  color: #DC2626;
  margin-top: 5px;
  padding-left: 27px;
  line-height: 1.35;
}
.consent-err[hidden] { display: none !important; }
@media (max-width: 480px) {
  .form-consent-row label { font-size: 11px; line-height: 1.38; }
  .form-consent-row label a { white-space: normal; }
}