/* ========= ТЕМА И БАЗА ========= */
: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: #ffc107;   /* жёлтый/оранжевый */
    --info:    #17a2b8;   /* бирюзовый */
    --mint:    #31C5B7;   /* мятный */
    --rose:    #FF6FA1;   /* розовый */
    --lavender:#B39DFF;   /* сиреневый */
    --sun:     #FFC73A;   /* солнечный */
  
    --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.2;
    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);
  }
  
  /* ========= УТИЛИТЫ ========= */
  .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-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-small{ padding:10px 16px; font-size:14px; border-radius: var(--radius-sm); }
  
  /* Доп. «весёлые» вариации */
  .btn-sun{ background: var(--clr-sun); color:#3b2b00; }
  .btn-sun:hover{ background: #FFB700; }
  .btn-mint{ background: var(--clr-mint); color:#072e2a; }
  .btn-mint:hover{ background: #28B5A7; }
  .btn-rose{ background: var(--clr-rose); color:#3a0b1a; }
  .btn-rose:hover{ background:#FF5A90; }
  
  /* ========= HEADER ========= */
  .header{
    background: #fff;
    box-shadow: var(--shadow-sm);

  }
  .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); }
  
  /* ========= HERO ========= */
  .hero{
    /* мягкий градиент: персик → мята → василёк */
    background: linear-gradient(135deg, color-mix(in srgb, var(--clr-sun) 90%, #fff) 0%, color-mix(in srgb, var(--clr-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-top: clamp(26px, 5vw, 60px);
  }
  .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; }
  
  .age-groups{
    display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px;
  }
  .age-link{
    background: #F3F6FF;
    color: #2c3d7a;
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration:none;
    font-size:14px;
    border:1px solid #E3E9FF;
    transition: background .15s ease, color .15s ease, transform .15s ease;
  }
  .age-link:hover{ background: var(--primary); color:#fff; transform: translateY(-2px); }
  
  .available-sets{ display:flex; flex-wrap:wrap; gap:8px; }
  .set-tag{
    background: var(--success);
    color:#fff;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight:700;
  }
  
  /* ========= СТРАНИЦА ПРОГРАММЫ ========= */
  .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 img{
    width:100%; height:200px; object-fit:cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  
  /* ========= ОБНОВЛЕНИЯ МАТЕРИАЛОВ ========= */
  .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(--clr-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: 12px;
    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: 60px; 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-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%; }
  
  /* ========= КАБИНЕТ ========= */
  .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; }
  .form-help{ font-size:14px; color: var(--clr-text-muted); margin-top: 6px; }
  
  .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  { border-left: 6px solid var(--warning); padding: 12px 16px; }
  .info     { border-left: 6px solid var(--info);    padding: 12px 16px; }
  .mint     { border-left: 6px solid var(--mint);    padding: 12px 16px; }
  .rose     { border-left: 6px solid var(--rose);    padding: 12px 16px; }
  .lavender { border-left: 6px solid var(--lavender);padding: 12px 16px; }
  .sun      { border-left: 6px solid var(--sun);     padding: 12px 16px; }

  .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 КАБИНЕТА ========= */
  .cabinet-cta{
    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;
  }
  .cta-content h3{ font-size: clamp(20px, 4vw, 28px); margin-bottom: 12px; }
  .cta-content p{ margin-bottom: 24px; opacity:.95; }
  
  /* ========= 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;
  }

/* ========= СКИДКИ ========= */
.discount-info {
   background: #E8F5E8;
   padding: 12px 16px;
   border-radius: var(--radius-md);
   margin-bottom: 12px;
   border: 1px solid #C8E6C8;
}

.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;
}
  
  /* ========= ALERTS ========= */
  .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; }
  
  /* ========= АДАПТИВ ========= */
  @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){
    .benefits{ grid-template-columns: 1fr; }
    .program-cards{ grid-template-columns: 1fr; }
    .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; }
    .btn{ padding: 16px 20px; } /* крупнее тапы */
  }
  @media (max-width: 480px){
    :root{ --gutter: 18px; }
    .hero{ padding: 44px 0; }
    .benefit-item, .program-card, .login-form, .result-card{ padding: 20px; }
    .age-link{ padding: 8px 12px; }
  }