/* =========================================================
   ТЕМА / БАЗА / УТИЛИТЫ
   ========================================================= */

/* ---------- Тема и переменные ---------- */
:root{
  /* Палитра */
  --clr-peach: #FF8F70;
  --clr-mint: #31C5B7;
  --clr-cornflower: #7F9DFF;
  --clr-lavender: #B39DFF;
  --clr-sun: #FFC73A;
  --clr-rose: #FF6FA1;

  --clr-bg: #FFFBF7;
  --clr-surface: #FFFFFF;
  --clr-text: #2A2A2A;
  --clr-text-muted: #5C6270;
  --clr-border: #EDE8E1;

  --primary: var(--clr-cornflower);
  --primary-600: #6A86F5;
  --primary-700: #596EE6;

  --success: #32C27A;
  --error: #FF5D5D;
  --warning: #FFC73A;
  --info:    #17A2B8;
  --mint:    var(--clr-mint);
  --rose:    var(--clr-rose);
  --lavender:var(--clr-lavender);
  --sun:     var(--clr-sun);

  /* Радиусы/тени/контейнер */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --shadow-sm: 0 4px 14px rgba(0,0,0,.06);
  --shadow-md: 0 10px 30px rgba(0,0,0,.08);

  --container: 1200px;
  --gutter: 24px;
}

/* Снижаем анимации по системной настройке */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ---------- Reset / База ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height:1.5;
  color:var(--clr-text);
  background: var(--clr-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }


/* ---------- Планы ---------- */


.catalog-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  font-weight: 500;
}

.highlight-icon {
  font-size: 1.5rem;
}

.package-types-overview {
  margin-bottom: 60px;
}

.package-types-overview h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #2c3e50;
}

.package-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.package-type-card {
  background: white;
  border: 2px solid #ecf0f1;
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  transition: all 0.3s ease;
}

.package-type-card:hover {
  border-color: #3498db;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(52, 152, 219, 0.1);
}

.package-type-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.package-type-header h3 {
  font-size: 1.5rem;
  color: #2c3e50;
  margin: 0;
}

.package-count {
  background: #3498db;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.programs-catalog {
  margin-bottom: 60px;
}

.programs-catalog h2 {
  text-align: center;
  margin-bottom: 40px;
  color: #2c3e50;
}

.program-section {
  margin-bottom: 50px;
}

.program-header {
  
  margin-bottom: 30px;
}

.program-header h3 {
  font-size: 2rem;
  color: #34495e;
  margin-bottom: 10px;
}

.program-desc {
  color: #7f8c8d;
  font-size: 1.1rem;
}

.age-groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.age-group-card {
  background: white;
  border: 2px solid #ecf0f1;
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
}

.age-group-card:hover {
  border-color: #7F9DFF;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(231, 76, 60, 0.1);
}

.age-group-info h4 {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.package-info {
  color: #7f8c8d;
  font-size: 0.95rem;
}

.age-group-actions .btn {
  padding: 12px 25px;
  font-weight: 600;
}

.catalog-info {
  margin-bottom: 60px;
}

.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.info-card {
  padding: 30px;
  border-radius: 15px;
  text-align: center;
}

.info-card.success {
  background: #d5f4e6;
  border: 2px solid #27ae60;
}

.info-card.warning {
  background: #fef9e7;
  border: 2px solid #f39c12;
}

.info-card.info {
  background: #ebf3fd;
  border: 2px solid #3498db;
}

.info-icon {
  font-size: 3rem;
  margin-bottom: 15px;
  display: block;
}

.info-card h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.quick-navigation h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #2c3e50;
}

.quick-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.quick-nav-item {
  display: block;
  padding: 20px;
  background: white;
  border: 2px solid #ecf0f1;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease;
}

.quick-nav-item:hover {
  border-color: #9b59b6;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(155, 89, 182, 0.1);
}

.nav-age {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  color: #9b59b6;
  margin-bottom: 5px;
}

.nav-desc {
  color: #7f8c8d;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .catalog-highlights {
      grid-template-columns: 1fr;
  }
  
  .package-types-grid {
      grid-template-columns: 1fr;
  }
  
  .age-groups-grid {
      grid-template-columns: 1fr;
  }
  
  .info-cards {
      grid-template-columns: 1fr;
  }
  
  .quick-nav-grid {
      grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Утилиты ---------- */


.visually-hidden{ position:absolute !important; width:1px;height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
.card{
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--clr-border);
}

/* =========================================================
   КОМПОНЕНТЫ (кнопки, алерты, формы, теги)
   ========================================================= */

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 14px 22px;
  border:none; border-radius: var(--radius-md);
  text-decoration:none; text-align:center; font-weight:600; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  font-size: clamp(14px, 1.8vw, 16px);
  box-shadow: var(--shadow-sm);
  line-height:1;
}
.btn:focus-visible{ outline: 3px solid color-mix(in srgb, var(--primary) 40%, white); outline-offset: 2px; }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none !important; }
.btn-small{ padding:10px 16px; font-size:14px; border-radius: var(--radius-sm); }

.btn-primary{ background: var(--primary); color:#fff; }
.btn-primary:hover{ background: var(--primary-600); transform: translateY(-2px); }
.btn-primary:active{ background: var(--primary-700); }

.btn-outline{ background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn-outline:hover{ background: var(--primary); color:#fff; transform: translateY(-2px); }

/* Весёлые вариации */
.btn-sun{ background: var(--sun); color:#3b2b00; } .btn-sun:hover{ background:#FFB700; }
.btn-mint{ background: var(--mint); color:#072e2a; } .btn-mint:hover{ background:#28B5A7; }
.btn-rose{ background: var(--rose); color:#3a0b1a; } .btn-rose:hover{ background:#FF5A90; }

/* ---------- Алерты ---------- */
.alert{ padding:14px 18px; border-radius:var(--radius-md); margin-bottom:16px; }
.alert-success{ background:#EAF9F1; color:#0F6F42; border:1px solid #CFEFDE; }
.alert-error{   background:#FFECEC; color:#7A1D1D; border:1px solid #FFD2D2; }

/* ---------- Чипы / бейджи ---------- */
.set-tag{
  background: var(--success); color:#fff; padding:6px 12px; border-radius:999px;
  font-size:12px; font-weight:700;
}
.age-groups{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.age-link, .age-button, .age-card{
  background:#F3F6FF; color:#2c3d7a; padding:8px 14px; border-radius:var(--radius-md);
  text-decoration:none; font-size:14px; border:1px solid #E3E9FF;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.age-link:hover, .age-button:hover, .age-card:hover{ background: var(--primary); color:#fff; transform: translateY(-2px); }

/* ---------- Формы ---------- */
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; margin-bottom:8px; font-weight:600; }
.form-group input[type="email"], .login-form input[type="text"]{
  width:100%; padding:14px 12px; border:2px solid #EDEFF5; border-radius:var(--radius-md);
  font-size:16px; background:#fff;
}
.form-group input[type="email"]:focus,
.login-form input[type="text"]:focus{
  outline:none; border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}
.checkbox-label{ display:flex; align-items:center; gap:10px; font-size:14px; }
.payment-buttons{ display:flex; flex-direction:column; gap:10px; }
.btn-payment{ width:100%; }

/* =========================================================
   ЛЕЙАУТЫ (Header / Footer / общие блоки)
   ========================================================= */

/* ---------- Header ---------- */
.header{
  background:#fff;
  background-image: url('/assets/img/bg-osen.png?ver=3');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow:var(--shadow-sm);
  position: relative;
}

.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 1;
}

.header .header-content {
  position: relative;
  z-index: 2;
}

.header-celebration {
  flex: 1;
  text-align: center;
  margin: 0 20px;
}

.header-celebration h2 {
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 700;
  color: #AD5251;
  margin: 0;
  background: var(--primary);
  -webkit-background-clip: text;
  background-clip: text;
}
.header-content{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; }
.logo a{ font-size:clamp(20px, 2.6vw, 26px); font-weight:800; color:var(--primary); text-decoration:none; letter-spacing:.3px; line-height:1; }
.main-nav ul{ display:flex; list-style:none; gap:clamp(16px, 3vw, 34px); }
.main-nav a{ color:var(--clr-text); text-decoration:none; font-weight:600; transition: color .15s ease; }
.main-nav a:hover{ color:var(--primary); }

/* ---------- Footer ---------- */
.footer{ background:#2B2F3A; color:#fff; }
.footer-bottom{ padding:44px 0 26px; }
.footer-content{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:26px; margin-bottom:24px; }
.footer-column h4{ margin-bottom:14px; color:#fff; }
.footer-column p, .footer-column li{ margin-bottom:8px; color:#cfd3dd; }
.footer-column ul{ list-style:none; }
.footer-column a{ color:#dfe4f2; text-decoration:none; }
.footer-column a:hover{ color:#fff; }
.payment-methods{ display:flex; flex-direction:column; gap:6px; }
.payment-method{ display:block; font-size:14px; }
.footer-copyright{ text-align:center; padding-top:22px; border-top:1px solid #3A3F4C; color:#cfd3dd; }

/* =========================================================
   СЕКЦИИ (Hero, преимущества, каталоги, страницы)
   ========================================================= */

/* ---------- HERO ---------- */
.hero{
  background: url('/assets/img/AutumnGirl.png?ver=5') bottom right no-repeat, linear-gradient(135deg,
    color-mix(in srgb, var(--sun) 90%, #fff) 0%,
    color-mix(in srgb, var(--mint) 85%, #fff) 55%,
    color-mix(in srgb, var(--clr-cornflower) 80%, #fff) 100%);
  color:#1c2033; padding:clamp(48px, 8vw, 96px) 0; text-align:center; position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:auto -20% -40% -20%; height:60%;
  background: radial-gradient(closest-side, rgba(255,255,255,.35), transparent 70%);
  filter: blur(24px); pointer-events:none;
}
.hero h1{ font-size:clamp(28px, 6vw, 52px); font-weight:800; margin-bottom:14px; letter-spacing:.2px; }
.hero-subtitle{ font-size:clamp(16px, 2.6vw, 20px); margin-bottom:clamp(28px, 6vw, 44px); opacity:.95; }

/* ---------- Преимущества ---------- */
.benefits{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:clamp(18px, 3.5vw, 36px);
  margin: clamp(26px,5vw,60px) 0 40px;
}
.benefit-item{
  text-align:center; background:#fff; border-radius:var(--radius-lg);
  padding:clamp(16px, 4vw, 26px); box-shadow:var(--shadow-sm); border:1px solid var(--clr-border);
}
.benefit-icon{ font-size:clamp(34px, 6vw, 48px); margin-bottom:12px; }
.benefit-item h3{ font-size:clamp(18px, 3vw, 22px); margin-bottom:8px; }
.benefit-item p{ font-size:15px; color:var(--clr-text-muted); }

/* ---------- Фильтр/каталог программ ---------- */
.programs-filter{ padding:clamp(48px, 8vw, 80px) 0; background:#FEFDFB; }
.programs-filter h2{
  text-align:center; font-size:clamp(22px, 4.8vw, 36px); margin-bottom:clamp(26px, 6vw, 50px); color:var(--clr-text);
}
.program-cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:clamp(16px, 3vw, 30px);
}
.program-card{
  background:#fff; border-radius:var(--radius-lg); padding:clamp(18px, 4vw, 28px);
  box-shadow:var(--shadow-sm); border:1px solid var(--clr-border);
  transition: transform .2s ease, box-shadow .2s ease;
}
.program-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.program-card h3{ color:var(--primary); font-size:clamp(18px, 3.4vw, 24px); margin-bottom:8px; }
.program-card p{ color:var(--clr-text-muted); margin-bottom:16px; }
.available-sets{ display:flex; flex-wrap:wrap; gap:8px; }

/* ---------- Страница программы ---------- */
.program-page{ padding:40px 0; }
.breadcrumb{ margin-bottom:14px; color:var(--clr-text-muted); } .breadcrumb a{ color:var(--primary); text-decoration:none; }
.program-header{ margin-bottom:28px; }
.program-header h1{ font-size:clamp(22px, 4.6vw, 36px); margin-bottom:10px; color:var(--clr-text); }
.program-description{ font-size:clamp(16px, 2.6vw, 18px); color:var(--clr-text-muted); margin-bottom:22px; }
.program-highlights{ display:flex; flex-wrap:wrap; gap:12px; }
.highlight-item{
  display:flex; align-items:center; gap:10px; background:#F7FBFF; padding:12px 16px;
  border-radius:var(--radius-md); border:1px solid #E8F1FF;
}
.highlight-icon{ font-size:20px; }
.program-content{ display:grid; gap:clamp(20px, 4vw, 40px); grid-template-columns: 2fr 1fr; }

/* ---------- Галерея скриншотов + модалка ---------- */
.screenshots{ margin-bottom:30px; }
.screenshots h2{ margin-bottom:14px; color:var(--clr-text); }
.screenshot-gallery{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:14px; }
.screenshot-item{ position:relative; cursor:pointer; transition: transform .3s ease, box-shadow .3s ease; }
.screenshot-item:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.screenshot-item img{ width:100%; height:200px; object-fit:cover; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); transition: all .3s ease; }
.screenshot-item::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(127,157,255,.15) 0%, rgba(49,197,183,.15) 50%, rgba(255,143,112,.15) 100%);
  border-radius:var(--radius-md); opacity:.7; pointer-events:none; transition:opacity .3s ease;
}
.screenshot-item:hover::after{ opacity:.9; }

.screenshot-modal{
  display:none; position:fixed; z-index:9999; inset:0; background:rgba(0,0,0,.9);
  justify-content:center; align-items:center; padding:20px;
}
.screenshot-modal.active{ display:flex; }
.modal-content{ position:relative; max-width:90vw; max-height:90vh; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.5); }
.modal-image{ width:100%; height:auto; display:block; }
.modal-close, .modal-prev, .modal-next{
  position:absolute; background:rgba(255,255,255,.9); border:none; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--clr-text); transition:all .3s ease; z-index:10000;
}
.modal-close{ top:15px; right:20px; width:40px; height:40px; font-size:20px; }
.modal-prev, .modal-next{ top:50%; transform:translateY(-50%); width:50px; height:50px; font-size:24px; }
.modal-prev{ left:20px; } .modal-next{ right:20px; }
.modal-close:hover{ background:#fff; transform:scale(1.1); }
.modal-prev:hover, .modal-next:hover{ background:#fff; transform:translateY(-50%) scale(1.1); }

/* ---------- Обновления материалов / Пакеты / Заказ ---------- */
.materials-update{ margin-bottom:32px; }
.materials-update h2{ margin-bottom:12px; color:var(--clr-text); }
.materials-update ul{ padding-left:20px; } .materials-update li{ margin-bottom:8px; }

.package-details h2{ margin-bottom:16px; color:var(--clr-text); }
.package-description{
  background:#FFF8EB; padding:18px; border-radius:var(--radius-md); margin-bottom:16px; border:1px solid #FFE6B2;
}
.package-description h3{ color:var(--sun); margin-bottom:8px; }
.package-samples{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }

.order-form-container{ position:sticky; top:90px; }
.order-form{ background:#fff; border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm); border:1px solid var(--clr-border); }
.order-form h2{ margin-bottom:18px; color:var(--clr-text); }
.package-option{ margin-bottom:12px; }
.package-checkbox{
  display:flex; align-items:center; gap:5px; padding:14px; border:2px solid #EFF2F6; border-radius:var(--radius-md);
  cursor:pointer; transition: all .15s ease; background:#FCFDFE;
}
.package-checkbox:hover{ border-color:var(--primary); background:#F4F7FF; }
.package-checkbox input[type="checkbox"]{ width:22px; height:22px; accent-color:var(--primary); }
.package-info{ flex:1; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.package-name{ font-weight:600; }
.package-price{ font-weight:700; color:var(--success); min-width:65px; text-align:right; }
.single-package-info{ padding:14px; border:2px solid var(--primary); border-radius:var(--radius-md); background:#F4F7FF; }
.single-package-info .package-info{ margin:0; }
.order-total{ background:#F8FAFF; padding:16px; border-radius:var(--radius-md); margin:16px 0; border:1px solid #E8EEFF; }
.total-line{ display:flex; justify-content:space-between; align-items:center; font-size:clamp(16px, 3vw, 18px); font-weight:700; }
.customer-info{ margin:18px 0; }
.form-help{ font-size:14px; color:var(--clr-text-muted); margin-top:6px; }

/* ---------- Кабинет / Покупки ---------- */
.cabinet-page{ padding:40px 0; min-height:60vh; }
.login-form-container{ display:flex; justify-content:center; align-items:center; min-height:50vh; }
.login-form{
  background:#fff; border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-sm);
  max-width:520px; width:100%; border:1px solid var(--clr-border);
}
.login-form h1{ text-align:center; margin-bottom:8px; color:var(--clr-text); }
.login-form p{ text-align:center; color:var(--clr-text-muted); margin-bottom:22px; }
.login-help{ margin-top:24px; padding-top:16px; border-top:1px solid #EFF2F6; }
.login-help h3{ margin-bottom:10px; color:var(--clr-text); }
.login-help ul{ padding-left:20px; } .login-help li{ margin-bottom:8px; }

.cabinet-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.user-info{ display:flex; align-items:center; gap:16px; }
.purchases-list h2{ margin-bottom:22px; color:var(--clr-text); }
.purchase-card{ background:#fff; border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm); margin-bottom:24px; border:1px solid var(--clr-border); }
.purchase-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.purchase-meta{ display:flex; gap:16px; font-size:14px; color:var(--clr-text-muted); }
.purchase-details{ margin-bottom:16px; padding:14px; background:#F8FAFF; border-radius:var(--radius-md); border:1px solid #E8EEFF; }
.download-section h4{ margin-bottom:12px; color:var(--clr-text); }
.files-list{ margin-bottom:16px; }
.file-item{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px; background:#F8FAFF; border-radius:var(--radius-md); margin-bottom:10px; border:1px solid #E8EEFF;
}
.file-info{ display:flex; flex-direction:column; gap:4px; }
.file-name{ font-weight:600; } .file-package{ font-size:14px; color:var(--clr-text-muted); }
.download-all{ text-align:center; padding-top:18px; border-top:1px solid #EFF2F6; }
.cabinet-actions{ display:flex; justify-content:center; gap:16px; margin-top:28px; flex-wrap:wrap; }
.empty-state{ text-align:center; padding:48px 18px; }
.empty-state h2{ margin-bottom:10px; color:var(--clr-text); }
.empty-state p{ margin-bottom:22px; color:var(--clr-text-muted); }

/* ---------- Результат оплаты ---------- */
.payment-result{ padding:48px 0; min-height:60vh; display:flex; align-items:center; }
.result-card{
  background:#fff; border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-sm);
  text-align:center; max-width:620px; margin:0 auto; border:1px solid var(--clr-border);
}
.result-icon{ font-size:64px; margin-bottom:16px; }
.result-card h1{ margin-bottom:22px; color:var(--clr-text); }
.success{ border-left:6px solid var(--success); }
.error{   border-left:6px solid var(--error); }
.warning, .info, .mint, .rose, .lavender, .sun{
  padding:12px 16px; border-left:6px solid transparent;
}
.warning{  border-left-color:var(--warning); }
.info{     border-left-color:var(--info); }
.mint{     border-left-color:var(--mint); }
.rose{     border-left-color:var(--rose); }
.lavender{ border-left-color:var(--lavender); }
.sun{      border-left-color:var(--sun); }
.access-info, .next-steps, .email-info, .error-info, .support-info{
  margin:22px 0; padding:16px; background:#F8FAFF; border-radius:var(--radius-md); text-align:left; border:1px solid #E8EEFF;
}
.token-display{
  display:flex; align-items:center; gap:10px; background:#fff; padding:12px; border-radius:var(--radius-md); border:2px solid #EDEFF5; margin:12px 0;
}
.token-display code{ flex:1; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:14px; word-break:break-all; }
.btn-copy{ background:none; border:none; cursor:pointer; font-size:18px; padding:6px; }

/* ---------- Отзывы / слайдер ---------- */
.reviews-section{ background:#F8FAFF; padding:50px 0; color:var(--clr-text); }
.reviews-section h2{ text-align:center; margin-bottom:28px; }
.reviews-slider{ position:relative; max-width:880px; margin:0 auto; }
.review-slide{ display:none; text-align:center; padding:28px; }
.review-slide.active{ display:block; }
.review-content p{ font-size:18px; font-style:italic; margin-bottom:18px; color:var(--clr-text-muted); }
.review-author strong{ display:block; margin-bottom:4px; color:var(--clr-text); }
.review-author span{ color:var(--clr-text-muted); font-size:14px; }
.slider-controls{ display:flex; justify-content:center; align-items:center; gap:14px; margin-top:20px; }
.slider-prev, .slider-next{
  background:var(--primary); color:#fff; border:none; border-radius:50%; width:42px; height:42px; cursor:pointer; font-size:18px;
}
.slider-dots{ display:flex; gap:10px; }
.dot{ width:10px; height:10px; border-radius:50%; background:#D6DBF8; cursor:pointer; border:2px solid transparent; }
.dot.active{ background:var(--primary); }

/* ---------- CTA кабinета / общие CTA ---------- */
.cabinet-cta,
.cta-section, .cta-age-group, .cta-2025{
  background: linear-gradient(135deg, color-mix(in srgb, var(--clr-lavender) 86%, #fff), color-mix(in srgb, var(--clr-peach) 78%, #fff));
  color:#1c2033; padding:52px 0; text-align:center; border-radius:var(--radius-lg);
}
.cta-content{ max-width:800px; margin:0 auto; }
.cabinet-cta .cta-content h3, .cta-content h2{ font-size: clamp(20px, 4vw, 28px); margin-bottom:12px; color:var(--clr-text); }
.cabinet-cta .cta-content p, .cta-content p{ margin-bottom:24px; opacity:.95; }
.cta-buttons{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.btn-large{ padding:18px 32px; font-size:18px; }
.cta-benefits, .age-benefits, .early-age-benefits{
  display:flex; justify-content:center; gap:20px; margin:30px 0; flex-wrap:wrap;
}
.benefit-card{
  display:flex; align-items:center; gap:8px; background:#fff; padding:12px 20px; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); border:1px solid var(--clr-border);
}
.guarantee, .graduation-note, .comfort-note{
  margin-top:30px; display:flex; align-items:center; justify-content:center; gap:8px; font-style:italic; color:var(--clr-text-muted);
}
.guarantee-icon, .graduation-icon, .comfort-icon{ font-size:20px; }

/* ---------- Скидки ---------- */
.discount-info{ margin-bottom:12px; }
.originalAmount{ text-decoration: line-through; }
.discount-line{
  display:flex; justify-content:space-between; align-items:center; font-size:14px; margin-bottom:6px; color:var(--clr-text-muted);
}
.discount-line:last-child{ margin-bottom:0; }
.discount-highlight{ color:var(--success) !important; font-weight:600; }
.discount-highlight span:last-child{ font-weight:700; }

/* =========================================================
   НОВЫЕ СТРАНИЦЫ / КАТАЛОГИ / FAQ / ТЕМЫ / КАЛЕНДАРИ
   ========================================================= */

/* Общие контейнеры страниц */
.programs-catalog-page, .ktp-page, .year-2025-2026-page, .age-group-page{ padding:40px 0; }

/* Заголовки страниц */
.page-header{ margin-bottom:40px; padding:40px 0; border-radius:var(--radius-lg); position:relative; }
.page-header h1{ font-size:clamp(24px, 5vw, 42px); font-weight:800; color:var(--primary); margin-bottom:12px; }
.page-subtitle{ font-size:clamp(16px, 2.8vw, 20px); color:var(--clr-text-muted); margin-bottom:30px; }
.age-badge, .year-badge{
  display:inline-block; background:var(--primary); color:#fff; padding:8px 20px; border-radius:999px; font-weight:600; font-size:14px; margin-bottom:20px;
}
.year-badge-large{ font-size:24px; padding:12px 30px; font-weight:800; }

/* Хайлайты */
.page-highlights, .age-highlights{
  display:flex; flex-wrap:wrap; gap:16px; margin-top:30px;
}
.highlight-item{ display:flex; gap:8px; background:#fff; padding:12px 20px; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); border:1px solid var(--clr-border); }
.highlight-icon{ font-size:20px; }

/* Описания/характеристики */
.programs-description, .ktp-description, .age-characteristics{ margin-bottom:50px; }
.description-content, .characteristics-content{ max-width:1000px; margin:0 auto; }
.description-content h2, .characteristics-content h2{ text-align:center; font-size:clamp(22px, 4vw, 32px); margin-bottom:20px; color:var(--clr-text); }
.description-content p{ font-size:18px; line-height:1.6; color:var(--clr-text-muted); text-align:center; margin-bottom:30px; }

/* Сетки особенностей / бенефитов (унифицировано) */
.features-grid, .program-features, .ktp-benefits, .development-areas{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:24px; margin-top:30px;
}
.feature-card, .feature-item, .benefit-card, .development-card{
  background:#fff; padding:24px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--clr-border); text-align:center;
}
.feature-card:hover{ transform: translateY(-5px); transition: transform .3s ease; }
.feature-card.highlight{ border:2px solid var(--primary);  }
.feature-icon, .benefit-icon{ font-size:40px; margin-bottom:16px; display:block; }
.feature-item h3, .development-card h3{ color:var(--primary); margin-bottom:16px; font-size:20px; }
.feature-item ul, .development-card ul{ text-align:left; padding-left:0; list-style:none; }
.feature-item li, .development-card li{
  padding:8px 0; border-bottom:1px solid #f0f0f0; color:var(--clr-text-muted);
}
.feature-item li:last-child, .development-card li:last-child{ border-bottom:none; }

/* Каталоги */
.programs-catalog, .ktp-catalog, .available-programs{ margin-bottom:60px; }
.programs-catalog h2, .ktp-catalog h2, .available-programs h2{
  text-align:center; font-size:clamp(24px, 4.5vw, 36px); margin-bottom:40px; color:var(--clr-text);
}
.programs-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(350px,1fr)); gap:30px; }
.program-header{ margin-bottom:20px; }
.program-header h3{ color:var(--primary); font-size:22px; margin-bottom:8px; }
.program-description{ color:var(--clr-text-muted); margin-bottom:16px; line-height:1.5; }
.program-stats{ margin-bottom:16px; }
.age-groups-count{ background:var(--success); color:#fff; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:600; }
.age-groups-list{ margin-bottom:20px; }
.age-groups-list h4{ margin-bottom:12px; color:var(--clr-text); font-size:16px; }
.program-advantages ul{ list-style:none; padding:0; }
.program-advantages li{ padding:6px 0; color:var(--clr-text-muted); font-size:14px; }
.age-range-badge{ background:var(--mint); color:#fff; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:600; }
.program-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* FAQ */
.faq-section, .faq-age-group, .faq-2025{ padding:50px 0; margin:60px 0; }
.faq-section h2, .faq-age-group h2{ text-align:center; font-size:clamp(24px, 4.5vw, 36px); margin-bottom:40px; color:var(--clr-text); }
.faq-list{ max-width:800px; margin:0 auto; }
.faq-item{ background:#fff; margin-bottom:16px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--clr-border); }
.faq-item h3{
  padding:20px; margin:0; background:#F8FAFF; color:var(--clr-text); cursor:pointer; transition: background .3s ease; border-bottom:1px solid var(--clr-border);
}
.faq-item h3:hover{ background:#EEF4FF; }
.faq-item h3.active{ background:var(--primary); color:#fff; }
.faq-item p{ padding:20px; margin:0; color:var(--clr-text-muted); line-height:1.6; display:none; }

/* Testimonials */
.testimonials-section, .testimonials-2025{ background:#F8FAFF; padding:60px 0; margin:60px 0; }
.testimonials-section h2{ text-align:center; font-size:clamp(24px, 4.5vw, 36px); margin-bottom:40px; color:var(--clr-text); }
.testimonials-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:30px; }
.testimonial-item, .testimonial-card{
  background:#fff; padding:30px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--clr-border);
}
.testimonial-content p{ font-style:italic; color:var(--clr-text-muted); line-height:1.6; margin-bottom:20px; }
.testimonial-author strong{ display:block; color:var(--clr-text); margin-bottom:4px; }
.testimonial-author span{ color:var(--clr-text-muted); font-size:14px; }
.purchase-date{ font-size:12px; color:var(--clr-text-muted); margin-top:8px; }

/* Статистика */
.materials-stats, .graduation-stats, .cta-stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:20px; margin:30px 0;
}
.stat-card, .stat-item{
  background:#fff; padding:20px; border-radius:var(--radius-md); text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--clr-border);
}
.stat-number{ font-size:32px; font-weight:800; color:var(--primary); display:block; margin-bottom:8px; }
.stat-label{ font-size:14px; color:var(--clr-text-muted); }

/* Календарные блоки */
.calendar-features, .calendar-info{ margin:50px 0; }
.calendar-info{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:30px; }
.calendar-block{
  background:#fff; padding:30px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--clr-border);
}
.calendar-block h3{ color:var(--primary); margin-bottom:20px; font-size:20px; }
.calendar-block ul{ list-style:none; padding:0; }
.calendar-block li{ padding:8px 0; border-bottom:1px solid #f0f0f0; color:var(--clr-text-muted); }
.calendar-block li:last-child{ border-bottom:none; }

/* Бейджи/обновления */
.update-info{ margin-top:30px; }
.update-badge{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--success); color:#fff; padding:12px 24px; border-radius:var(--radius-md); margin-bottom:16px; font-weight:600;
}
.update-icon{ font-size:18px; }
.benefit-tag{
  background:var(--mint); color:#fff; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; margin-right:8px; margin-bottom:8px; display:inline-block;
}
.updated-badge{
  background:var(--warning); color:#3b2b00; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:600; display:block; margin-top:4px;
}

/* Возрастные периоды */
.development-periods{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(400px,1fr)); gap:30px; margin-top:30px;
}
.period-card{
  background:#fff; padding:30px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--clr-border);
}
.period-card h3{ color:var(--primary); margin-bottom:20px; font-size:22px; }
.period-features h4{ color:var(--clr-text); margin:20px 0 12px 0; font-size:16px; }
.period-features ul{ list-style:none; padding:0; margin-bottom:20px; }
.period-features li{
  padding:6px 0; color:var(--clr-text-muted); position:relative; padding-left:20px;
}
.period-features li:before{ content:"•"; color:var(--primary); position:absolute; left:0; }

/* Адаптация / готовность к школе */
.adaptation, .school-preparation, .school-readiness{ margin:50px 0; }
.adaptation-stages, .readiness-components, .readiness-criteria{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:24px; margin-top:30px;
}
.stage-card, .readiness-card, .criteria-block{
  background:#fff; padding:24px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--clr-border);
}
.stage-card h3, .readiness-card h3, .criteria-block h3{ color:var(--primary); margin-bottom:16px; font-size:18px; }
.adaptation-factors{ margin-top:40px; }
.factors-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:20px; margin-top:20px; }
.factor-item{
  display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px; background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
}
.factor-icon{ font-size:32px; margin-bottom:12px; }

/* Критерии */
.criteria-list{ list-style:none; padding:0; }
.criterion{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid #f0f0f0; }
.criterion:last-child{ border-bottom:none; }
.criterion-name{ color:var(--clr-text); font-weight:500; }
.criterion-level{ color:var(--success); font-weight:600; font-size:14px; }

/* Тематическое планирование */
.themes-planning, .themes-examples{ margin:50px 0; }
.themes-calendar, .themes-examples{ margin-top:30px; }
.month-themes, .theme-month{
  background:#fff; padding:30px; margin-bottom:30px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--clr-border);
}
.month-themes h3, .theme-month h3{ color:var(--primary); margin-bottom:20px; font-size:22px; }
.weekly-themes{ display:grid; gap:12px; }
.week-theme{
  display:flex; align-items:center; gap:16px; padding:12px 16px; background:#F8FAFF; border-radius:var(--radius-md); border:1px solid #E8F1FF;
}
.week-number{
  background:var(--primary); color:#fff; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap;
}
.theme-name{ color:var(--clr-text); font-weight:500; }

/* Режим дня */
.daily-schedule, .daily-routine{ margin:50px 0; }
.schedule-container, .routine-content{
  background:#fff; padding:30px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--clr-border);
}
.schedule-table, .schedule-items{ margin-top:30px; }
.schedule-item{
  display:flex; justify-content:space-between; align-items:center; padding:16px; border-bottom:1px solid #f0f0f0; gap:20px;
}
.schedule-item:last-child{ border-bottom:none; }
.schedule-item.highlight{ background:#F8FAFF; border-radius:var(--radius-md); border:1px solid var(--primary); }
.time{ font-weight:600; color:var(--primary); white-space:nowrap; min-width:120px; }
.activity{ color:var(--clr-text); flex:1; }
.routine-comparison{ display:grid; grid-template-columns:repeat(auto-fit, minmax(400px,1fr)); gap:30px; margin-top:30px; }
.routine-block{
  background:#fff; padding:30px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--clr-border);
}
.routine-block h3{ color:var(--primary); margin-bottom:20px; font-size:20px; }

/* Образовательная деятельность */
.educational-process, .educational-organization, .educational-activities{ margin:50px 0; }
.process-features, .organization-blocks, .activities-blocks{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:24px; margin-top:30px;
}
.feature-block, .org-block, .activity-block{
  background:#fff; padding:24px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--clr-border);
}
.feature-block h3, .org-block h3, .activity-block h3{ color:var(--primary); margin-bottom:16px; font-size:18px; }

/* Развивающая среда */
.learning-environment{ margin:50px 0; }
.environment-zones{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:20px; margin-top:30px;
}
.zone-card{
  background:#fff; padding:20px; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); border:1px solid var(--clr-border); text-align:center;
}
.zone-card h3{ color:var(--primary); margin-bottom:12px; font-size:16px; }
.zone-card p{ color:var(--clr-text-muted); font-size:14px; line-height:1.5; }

/* Возрастные варианты */
.age-variants{ margin:20px 0; }
.age-variants h4{ margin-bottom:12px; color:var(--clr-text); font-size:16px; }
.age-buttons, .ages-grid{ display:flex; gap:8px; flex-wrap:wrap; }
.age-range{ font-weight:600; margin-bottom:4px; }
.age-years{ font-size:12px; opacity:.8; }

/* Showcase программ */
.programs-showcase{ margin-bottom:40px; }
.program-showcase{
  background:#fff; padding:30px; margin-bottom:30px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--clr-border);
}
.program-info h3{ color:var(--primary); margin-bottom:12px; font-size:24px; }
.program-benefits{ display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; }

/* Что включено */
.whats-included{ margin:50px 0; }
.included-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:24px; margin-top:30px; }
.included-item{
  background:#fff; padding:24px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--clr-border);
}
.included-item h3{ color:var(--primary); margin-bottom:16px; font-size:18px; }

/* =========================================================
   СПЕЦСТРАНИЦЫ (вебинары/тесты, оферта, 404)
   ========================================================= */

/* Вебинары / тесты */
.webinars-page, .tests-page{ padding:2rem 0; }
.page-description{ font-size:1.1rem; color:var(--clr-text-muted); max-width:800px; margin:0 auto; }
.webinars-intro{ margin-bottom:3rem; text-align:center; }
.highlight{
  background: linear-gradient(135deg, var(--primary), var(--mint)); color:#fff; padding:1.5rem; border-radius:8px; font-weight:500; display:inline-block; max-width:800px;
}
.webinars-section h2, .tests-section h2{ color:var(--primary); margin-bottom:2rem; text-align:center; }
.webinars-list, .tests-list{ display:grid; gap:1.5rem; }
.webinar-item, .test-item{
  background:#fff; padding:1.5rem; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,.1);
  display:flex; justify-content:space-between; align-items:center; gap:1rem; border-left:4px solid var(--primary);
}
.test-item{ border-left-color:var(--mint); }
.webinar-item h3, .test-item h3{ margin:0; color:var(--clr-text); flex:1; font-size:1.1rem; }
.webinar-item .btn, .test-item .btn{ white-space:nowrap; flex-shrink:0; }

/* Оферта */
.oferta-content{
  max-width:800px; margin:0 auto; padding:40px 20px; line-height:1.6; color:var(--clr-text);
}
.oferta-content h1{
  text-align:center; color:var(--primary); margin-bottom:10px; font-size:2.5em;
}
.oferta-content .date{ text-align:center; font-size:1.1em; margin-bottom:30px; color:var(--clr-text-muted); }
.oferta-content h2{
  color:var(--clr-text); margin-top:40px; margin-bottom:20px; font-size:1.5em; border-bottom:2px solid var(--primary); padding-bottom:10px;
}
.oferta-content h3{ color:#34495e; margin-top:25px; margin-bottom:15px; font-size:1.2em; }
.oferta-content p{ margin-bottom:15px; text-align:justify; }
.oferta-content ul{ margin:15px 0; padding-left:30px; }
.oferta-content ul li{ margin-bottom:8px; }
.company-details{
  background:#f8f9fa; padding:20px; border-radius:8px; border-left:4px solid var(--primary); margin-top:30px;
}
.company-details p{ margin-bottom:8px; text-align:left; }

/* 404 */
.error-page{ padding:4rem 0; text-align:center; min-height:60vh; }
.error-content{ max-width:800px; margin:0 auto; }
.error-number{ font-size:8rem; font-weight:800; color:var(--primary); margin-bottom:1rem; line-height:1; }
.error-page h1{ color:var(--clr-text); margin-bottom:1.5rem; font-size:2.5rem; }
.error-description{ font-size:1.1rem; color:var(--clr-text-muted); margin-bottom:3rem; line-height:1.6; }
.error-actions{ display:flex; gap:1rem; justify-content:center; margin-bottom:4rem; flex-wrap:wrap; }
.popular-sections{ text-align:left; margin-top:3rem; padding-top:3rem; border-top:1px solid #eee; }
.popular-sections h2{ text-align:center; color:var(--primary); margin-bottom:2rem; }
.sections-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:2rem; }
.section-card{
  background:#fff; padding:1.5rem; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,.1); border-left:4px solid var(--mint);
}
.section-card h3{ color:var(--primary); margin-bottom:1rem; font-size:1.2rem; }
.section-links{ display:flex; flex-direction:column; gap:.5rem; }
.section-links a{
  color:var(--clr-text-muted); text-decoration:none; padding:.25rem 0; border-bottom:1px solid transparent; transition: all .3s ease;
}
.section-links a:hover{ color:var(--primary); border-bottom-color:var(--mint); }

/* =========================================================
   МЕДИА-ЗАПРОСЫ (адаптив в одном месте)
   ========================================================= */

@media (max-width: 1024px){
  .header-content{ padding:12px 0; }
  .main-nav ul{ gap:18px; }
  .program-content{ grid-template-columns:1fr; }
  .order-form-container{ position: static; }
}

@media (max-width: 768px){
  :root{ --gutter: 20px; }

  .header-celebration {
    margin: 0 10px;
  }

  .header-celebration h2 {
    font-size: 16px;
  }

  /* Общие */
  .benefits, .program-cards{ grid-template-columns:1fr; }
  .btn{ padding:16px 20px; }

  /* Кабинет/файлы */
  .purchase-header{ flex-direction:column; align-items:flex-start; gap:10px; }
  .file-item{ flex-direction:column; align-items:flex-start; gap:12px; }
  .action-buttons{ flex-direction:column; }
  .cabinet-header{ flex-direction:column; align-items:flex-start; gap:16px; }
  .user-info{ flex-direction:column; align-items:flex-start; gap:10px; }

  /* Модалка */
  .modal-content{ max-width:95vw; max-height:85vh; }
  .modal-close{ top:10px; right:15px; width:35px; height:35px; font-size:18px; }
  .modal-prev, .modal-next{ width:45px; height:45px; font-size:20px; }
  .modal-prev{ left:15px; } .modal-next{ right:15px; }

  /* Новые страницы */
  .page-highlights, .age-highlights{ flex-direction:column; align-items:center; }
  .program-features, .development-areas, .features-grid{ grid-template-columns:1fr; }
  .programs-grid{ grid-template-columns:1fr; }
  .cta-benefits, .age-benefits{ flex-direction:column; align-items:center; }
  .materials-stats, .graduation-stats{ grid-template-columns:repeat(2,1fr); }
  .calendar-info{ grid-template-columns:1fr; }
  .development-periods, .routine-comparison{ grid-template-columns:1fr; }

  /* Вебинары/тесты */
  .webinar-item, .test-item{ flex-direction:column; align-items:stretch; text-align:center; }
  .webinar-item .btn, .test-item .btn{ width:100%; }

  /* Оферта/404 */
  .oferta-content{ padding:20px 15px; }
  .oferta-content h1{ font-size:2em; }
  .oferta-content h2{ font-size:1.3em; }
  .error-number{ font-size:5rem; }
  .error-page h1{ font-size:2rem; }
  .error-actions{ flex-direction:column; align-items:center; }
  .error-actions .btn{ width:200px; }
}

@media (max-width: 480px){
  :root{ --gutter:18px; }

  .header-celebration h2 {
    font-size: 14px;
  }

  .hero{ padding:44px 0; }
  .benefit-item, .program-card, .login-form, .result-card{ padding:20px; }
  .age-link{ padding:8px 12px; }

  .page-header{ padding:30px 0; }
  .cta-buttons{ flex-direction:column; align-items:center; }
  .btn-large{ width:100%; max-width:300px; }

  .schedule-item{ flex-direction:column; align-items:flex-start; gap:8px; }
  .time{ min-width:auto; }
}

/* =========================================================
   ЕДИНЫЙ ВИД ДЛЯ НОВЫХ СТРАНИЦ / АЛИАСЫ КЛАССОВ
   (поддержка новых PHP страниц без правок их верстки)
   ========================================================= */

/* Базовый отступ для страниц с классом .page */
.page{ padding:40px 0; }

/* Алиас: .highlights = .page-highlights (выравниваем блоки хайлайтов) */
.highlights{
  display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:30px;
}

/* КТП: сетка структуры (aliased к features-grid визуально) */
.structure-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:24px; margin-top:30px;
}
.structure-item{
  background:#fff; padding:24px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--clr-border);
}
.structure-item h3{ color:var(--primary); margin-bottom:16px; font-size:18px; }
.structure-item ul{ list-style:none; padding:0; margin:0; }
.structure-item li{ padding:8px 0; border-bottom:1px solid #f0f0f0; color:var(--clr-text-muted); }
.structure-item li:last-child{ border-bottom:none; }

/* КТП: фильтр и список возрастов */
.catalog-filter{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.catalog-filter label{ font-weight:600; }
.catalog-filter select{
  padding:10px 12px; border:2px solid #EDEFF5; border-radius:var(--radius-md); background:#fff;
}
.age-groups-ktp h4{ margin-bottom:12px; color:var(--clr-text); font-size:16px; }
.age-groups-ktp .age-groups{ display:flex; flex-wrap:wrap; gap:10px; }
.ktp-available{ display:block; font-size:10px; opacity:.8; margin-top:4px; }

/* Темы/календарь: алиасы под существующие стили (themes-examples/month-themes/weekly-themes/week-theme) */
.themes-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:24px; margin-top:30px;
}
.theme-card{
  background:#fff; padding:24px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--clr-border);
}
.theme-card h3{ color:var(--primary); margin-bottom:16px; font-size:20px; }
.theme-weeks .week-item{
  display:flex; gap:8px; padding:8px 0; border-bottom:1px solid #f0f0f0; color:var(--clr-text-muted);
}
.theme-weeks .week-item:last-child{ border-bottom:none; }

/* Общая мелочь */
.main-content{ min-height:60vh; }

/* Адаптив */
@media (max-width: 768px){
  .structure-grid, .themes-grid{ grid-template-columns:1fr; }
  .catalog-filter{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* =========================================================
   ДОПОЛНИТЕЛЬНЫЕ УНИФИКАЦИИ КОМПОНЕНТОВ
   ========================================================= */

/* Единая группа кнопок действий (используется на разных страницах) */
.action-buttons{
  display:flex; gap:16px; justify-content:center; align-items:center; flex-wrap:wrap;
}

/* Шапка CTA-блоков (2025-2026 и др.) */
.cta-header{ text-align:center; margin-bottom:20px; }

/* =========================================================
   FIX: Вертикальные отступы и ритм карточек/секций
   (исправляет «кривые» элементы и плотные блоки)
   ========================================================= */

/* Отступы ключевых секций на возрастных страницах */
.age-group-page .page-header{ margin-bottom:32px; }
.age-group-page .available-programs,
.age-group-page .age-characteristics,
.age-group-page .themes-planning,
.age-group-page .learning-environment,
.age-group-page .educational-process,
.age-group-page .faq-age-group{
  margin-top:36px;
}

/* Единые внутренние отступы карточек (без изменения существующих стилей) */
.program-card,
.age-group-card,
.theme-card,
.structure-item,
.included-item,
.feature-block,
.org-block,
.activity-block,
.period-card,
.zone-card{
  padding:24px;
}

/* Заголовки и контент внутри карточек */
.program-card .program-header{ margin-bottom:12px; }
.program-card .program-description{ margin-bottom:12px; }
.program-actions{ margin-top:12px; }

/* Списки внутри карточек — корректные маркеры и отступы */
.program-card ul{ list-style:disc; margin:8px 0 0 1.1rem; padding:0; }
.program-card li{ margin:4px 0; }

/* Заголовки внутри различных карточек — убрать лишние верхние отступы */
.feature-card h3,
.structure-item h3,
.included-item h3,
.theme-card h3,
.feature-block h3,
.org-block h3,
.activity-block h3{
  margin:0 0 10px;
}

/* Заголовки секций — нормализуем нижний отступ */
.available-programs h2,
.age-characteristics h2,
.themes-planning h2,
.learning-environment h2,
.educational-process h2{
  margin-bottom:16px;
}

/* Пилюли возраста не растягиваются на всю ширину */
.age-range-badge{ display:inline-block; white-space:nowrap; }

/* Убираем потенциальное «двойное» пространство сверху заголовков в page-header */
.page-header h1, .page-header h2{ margin-top:0; }

/* Мобильные корректировки */
@media (max-width: 768px){
  .program-card,
  .age-group-card,
  .theme-card,
  .structure-item,
  .included-item,
  .feature-block,
  .org-block,
  .activity-block,
  .period-card,
  .zone-card{
    padding:20px;
  }
  .program-card ul{ margin-left:1rem; }
}

/* =========================================================
   FIX 2: Выравнивание отступов и высоты карточек
   ========================================================= */

/* Растягиваем карточки по высоте строки сетки и прижимаем кнопки вниз */
.programs-grid,
.age-groups-grid{
  align-items:stretch;
}
.programs-grid > .program-card,
.age-groups-grid > .age-group-card{
  display:flex; flex-direction:column; height:100%;
}
.program-card .program-header{ margin-bottom:12px; }
.program-card .program-description,
.age-group-card .program-desc{ margin-bottom:12px; line-height:1.5; }
.program-actions{ margin-top:auto; display:flex; gap:12px; flex-wrap:wrap; }

/* Унификация вертикальных отступов между секциями на возрастных страницах */
.age-group-page .available-programs + .themes-planning,
.age-group-page .themes-planning + .educational-process,
.age-group-page .educational-process + .learning-environment,
.age-group-page .learning-environment + .faq-age-group,
.age-group-page .faq-age-group + .cta-age-group{
  margin-top:40px;
}

/* Списки внутри карточек — одинаковые отступы и высота строки */
.program-card ul,
.feature-block ul,
.org-block ul,
.activity-block ul{
  list-style:disc; margin:8px 0 0 1.1rem; padding:0; line-height:1.5;
}
.program-card li,
.feature-block li,
.org-block li,
.activity-block li{ margin:4px 0; }

/* Мелкие визуальные огрехи */
.page-header .page-subtitle{ margin-bottom:18px; }
.program-header h3{ margin-bottom:8px; }

/* =========================================================
   FIX 3: Карточки и CTA — выравнивание по высоте и отступам
   ========================================================= */

/* Растягиваем возрастные карточки и прижимаем кнопки вниз */
.age-groups-grid > .age-group-card{
  display:flex; flex-direction:column; height:100%;
}
.age-group-card .age-group-info{ margin-bottom:12px; }
.age-group-actions{ margin-top:auto; display:flex; gap:12px; flex-wrap:wrap; }

/* Секция доступных программ — единый нижний отступ */
.available-programs{ margin-bottom:40px; }

/* Заголовки в карточках — плотный верхний край, ровный низ */
.age-group-card h4,
.program-card h3{ margin:0 0 10px; line-height:1.25; }

/* Абзацы-описания в карточках */
.age-group-card .program-description,
.program-card .program-description{ margin:0 0 12px; }

/* Списки в карточках — одинаковая сетка маркеров */
.age-group-card ul{ list-style:disc; margin:8px 0 0 1.1rem; padding:0; line-height:1.5; }
.age-group-card li{ margin:4px 0; }

/* =========================================================
   HOTFIX: rollback для каталога программ (padding/list)
   ========================================================= */

/* Возвращаем исходные отступы карточек каталога программ */
.program-card{ padding:clamp(18px, 4vw, 28px) !important; }
.program-card .program-header{ margin-bottom:8px !important; }
.program-card .program-description{ margin-bottom:16px !important; }

/* Убираем маркеры у списков внутри карточек каталога программ */
.program-card ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
.program-card li{ margin:6px 0 !important; }

/* Конкретно блок преимуществ в карточке — без маркеров */
.program-advantages ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
.program-advantages li{ margin:6px 0 !important; }

/* =========================================================
   UX TWEAKS по фидбеку (кнопки, списки, FAQ full-bleed, отзывы)
   ========================================================= */

/* 1) Кнопки по центру */
.age-group-actions{ justify-content:center; }
.program-actions{ justify-content:center; }

/* 2) Маркерованные списки внутри карточек особенностей — ровный левый край */
.features-grid .feature-card ul{ list-style:disc; padding-left:1.25rem; margin:0; }
.features-grid .feature-card li{ margin:6px 0; }

/* 3) FAQ: контент на всю ширину контейнера + поддержка фона на всю ширину */
.faq-section .faq-list,
.faq-age-group .faq-list{ max-width:100%; }

/* 4) Фон секций (FAQ/Отзывы) на всю ширину — без ломания контейнера */
.full-bleed{ position:relative; }
.full-bleed::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:100vw; top:0; bottom:0; background:inherit; z-index:-1;
}

/* Явный фон для отзывов (если задан в секции) */
.testimonials-section{ background:#F8FAFF; }

/* =========================================================
   UX TWEAKS #2 (центр кнопок, списки, выравнивание сверху)
   ========================================================= */

/* 1) Кнопки строго по центру во всех карточках */
.age-group-actions,
.program-actions{ justify-content:center !important; }

/* 2) Маркерованные списки — корректные отступы и выравнивание */
.features-grid .feature-card ul{
  list-style: disc;
  list-style-position: outside;
  padding-left: 1.25rem;
  margin: 0;
}
.features-grid .feature-card li{ margin: 6px 0; }
.features-grid .feature-card ul ul{
  list-style: circle;
  padding-left: 1.15rem;
  margin: 4px 0 0;
}

/* 3) FAQ — контент на всю ширину контейнера (без max-width) */
.faq-section .faq-list,
.faq-age-group .faq-list,
.faq-2025 .faq-list{ max-width:100% !important; }

/* 4) Full-bleed фона для секций с классом .full-bleed уже есть в CSS */

/* 5) Выровнять карточки по верхнему краю на возрастных страницах (без прижатия кнопок вниз) */
.age-group-page .programs-grid{ align-items: start !important; }
.age-group-page .programs-grid > .program-card{ display: block !important; }
.age-group-page .programs-grid .program-actions{ margin-top: 12px !important; }

/* =========================================================
   HOTFIX: списки развития (возрастные страницы) и выравнивание
   ========================================================= */

/* Списки в карточках развития — ровный левый край, без линий */
.development-areas .development-card ul{
  list-style: disc;
  list-style-position: outside;
  margin: 6px 0 0 1.25rem;
  padding: 0;
}
.development-areas .development-card li{
  margin: 4px 0;
  padding: 2px 0 !important;
  border: none !important;
  color: var(--clr-text);
}
.development-areas .development-card h3{ margin: 0 0 10px; }

/* На всякий случай — центровка кнопок в карточках программ внутри возрастных страниц */
.age-group-page .program-card .program-actions{ justify-content: center !important; }

/* =========================================================
   FIX PACK (full-width blocks, outline contrast, bullets)
   ========================================================= */

/* 1,3) Внутренние контейнеры описаний/характеристик — на всю ширину .container */
.description-content,
.characteristics-content{
  max-width:100% !important;
}

/* 2) Контраст кнопки-обводки на градиентных CTA */
.cta-section .btn-outline,
.cta-age-group .btn-outline{
  color:#fff !important;
  border-color:#fff !important;
}
.cta-section .btn-outline:hover,
.cta-age-group .btn-outline:hover{
  background:rgba(255,255,255,.15) !important;
  color:#fff !important;
}

/* 5) Маркеры в разделе "Что включено" (2025-2026) — корректный левый отступ */
.included-item ul{
  list-style:disc;
  list-style-position:outside;
  padding-left:1.25rem;
  margin:0;
}
.included-item li{ margin:6px 0; }