/* Critical Above-the-Fold Styles: header, menu, first section */
@layer critical {
    /* Ensure immediate painting and reserve space */
    .header,
    .navigation-menu,
    .hero-section {
        content-visibility: visible;
        contain: layout paint style;
    }

/* Mobile: hide review arrows */
@media (max-width: 768px){
  .arrow-btn{ display: none !important; }
}

/* =========================
   HERO — Mobile layout per new order
   Title → Subtitle → List → CTA → Photo (centered)
   Taller section height on mobile
   ========================= */
@media (max-width: 768px){
  .hero-section{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 24px 20px 0 !important;
    min-height: 920px !important; /* make section taller */
  }
  
  /* Floating scroll-to-top button */
  .scroll-to-top{
    position: fixed;
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    border: 1px solid rgba(0,0,0,0.08);
    display: grid;
    place-items: center;
    z-index: 2000;
    transition: opacity .2s ease, transform .2s ease;
    opacity: 0;
    transform: translateY(8px);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .scroll-to-top--visible{ opacity: 1; transform: translateY(0); }
  .scroll-to-top:active{ transform: translateY(1px); }
  .scroll-to-top svg{ display:block; width:24px; height:24px; }

  /* Content first */
  .hero-content{
    order: 1 !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    max-width: 640px !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
  /* Photo under the button, centered */
  .left-image-container{
    order: 2 !important;
    position: absolute !important;
    top: 478px !important;
    left: 40% !important;
    transform: translateX(-50%) !important;
    width: clamp(680px, 70vw, 420px) !important;
    height: auto !important;
    margin: 8px auto 16px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .left-image{ 
    width: 100% !important; 
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Hide decorative star to avoid overlap on small screens */
  .star1-image{ display: none !important; }

  /* Ensure background stretches with increased height */
  .hero-background, .background-image{ height: 100% !important; }
}

/* Base fallback styles for scroll-to-top (low specificity, outside media) */
:where(.scroll-to-top){
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.08);
  display: grid;
  place-items: center;
  z-index: 2000;
  transition: opacity .2s ease, transform .2s ease;
  opacity: 0;
  transform: translateY(8px);
}

:where(.scroll-to-top--visible){ opacity: 1; transform: translateY(0); }

/* Hide on desktop widths */
@media (min-width: 769px){
  .scroll-to-top{ display: none !important; }
}


/* ===== Mobile header spacing tweaks: logo/text closer left, menu inset from right ===== */
@media (max-width: 768px){
  .header-container{
    padding-left: clamp(8px, 2vw, 16px) !important;
    padding-right: clamp(16px, 6vw, 32px) !important;
    column-gap: clamp(4px, 2vw, 12px) !important;
  }

  /* Лого у левого края */
  .header .logo,
  .header-logo,
  .brand-logo{
    margin-left: 0 !important;
  }

  /* Текст ближе к лого и выравнивание влево в средней колонке */
  .brand,
  .brand-title,
  .logo-text,
  .header-title,
  .site-title,
  .header-logo-text{
    margin-left: clamp(4px, 1.5vw, 10px) !important;
    justify-self: start !important;
  }

  /* Бургер отодвигаем от правого края */
  .burger,
  .burger-btn,
  .hamburger{
    margin-right: calc(max(env(safe-area-inset-right), 0px) + clamp(12px, 4vw, 28px)) !important;
  }
}


/* ===== FAQ — Mobile hardening ===== */
@media (max-width: 768px){
  .faq-section{ 
    content-visibility: visible !important;
    min-height: auto !important;
    padding: 24px 16px !important;
    overflow: visible !important;
    background-size: cover !important;
  }
  .faq-container{ 
    padding: 24px 16px 0 !important;
    gap: 8px !important;
  }
  .faq-title{ 
    width: 100% !important; max-width: none !important; 
    font-size: 24px !important; margin-bottom: 16px !important; 
    line-height: 1.2 !important;
  }
  .faq-items{ max-width: 100% !important; gap: 4px !important; }
  .faq-item{ width: 100% !important; border-radius: 14px !important; }
  .faq-question{ 
    width: 100% !important; min-height: 56px !important; 
    padding: 14px 16px !important; border-radius: 14px !important; 
  }
  .faq-text{ font-size: 16px !important; line-height: 1.4 !important; width: 100% !important; }
  .faq-star{ width: 20px !important; height: 20px !important; }
  .faq-answer{ 
    width: 100% !important; padding: 16px !important; margin-top: 8px !important; 
    border-radius: 14px !important; height: auto !important; 
    max-height: none !important; overflow: visible !important; 
    opacity: 1; visibility: visible; /* позволит контенту не обрезаться при раскладке */
  }
  .faq-answer-content p, .faq-answer-content li { font-size: 16px !important; line-height: 150% !important; }
  /* Схлопывать/раскрывать через класс .active */
  .faq-item:not(.active) .faq-answer{ 
    opacity: 0; 
    visibility: hidden; 
    /* важно: убираем все минимальные/резервные размеры, чтобы не было больших разрывов */
    max-height: 0 !important; 
    min-height: 0 !important; 
    height: 0 !important; 
    margin-top: 0 !important; 
    padding: 0 !important; 
    overflow: hidden !important; 
  }
  .faq-item.active .faq-answer{ 
    opacity: 1 !important; visibility: visible !important; 
    max-height: none !important; padding: 16px !important; 
  }
}

/* FAQ mobile: larger cells, tighter spacing */
@media (max-width: 768px){
  .faq-items{ gap: 4px !important; }
  .faq-item{ border-radius: 16px !important; }
  .faq-question{ min-height: 68px !important; padding: 18px 18px !important; border-radius: 16px !important; }
  .faq-text{ font-size: 18px !important; }
}

    /* Reserve height to avoid layout shift before full styles apply */
    .header { min-height: var(--header-height); background-color: #4F4CB0; }
    .navigation-menu {
        min-height: var(--nav-height);
        background-color: #FFFFFF;
        border-top: 2px solid #4F4CB0;
        box-shadow: 0 0 14px rgba(0, 0, 0, 0.25);
    }
    .hero-section {
        min-height: 600px;
        contain-intrinsic-size: 767px;
        background-color: #FFFFFF;
    }
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CSS Variables for Responsive Scaling */
:root {
    /* Base scale factor - will be calculated by JavaScript */
    --scale-factor: 1;
    
    /* Base dimensions for 1920x1080 */
    --base-width: 1920px;
    --base-height: 1080px;
    
    /* Responsive dimensions */
    --header-height: calc(100px * var(--scale-factor));
    --logo-width: calc(59.38px * var(--scale-factor));
    --logo-height: calc(75.25px * var(--scale-factor));
    --brand-font-size: calc(54.87px * var(--scale-factor));
    --contact-font-size: calc(22.56px * var(--scale-factor));
    --social-icon-size: calc(24px * var(--scale-factor));
    
    /* Navigation */
    --nav-height: calc(83px * var(--scale-factor));
    --menu-item-width: calc(200px * var(--scale-factor));
    --menu-font-size: calc(29.89px * var(--scale-factor));
    
    /* Hero section */
    --hero-height: calc(1080px * var(--scale-factor));
    --hero-title-font: calc(120px * var(--scale-factor));
    --hero-subtitle-font: calc(40px * var(--scale-factor));
    --hero-button-width: calc(577px * var(--scale-factor));
    --hero-button-height: calc(112px * var(--scale-factor));
    --hero-button-font: calc(18px * var(--scale-factor));
    
    /* Left image positioning */
    --left-image-top: calc(-135px * var(--scale-factor));
    --left-image-left: calc(-66px * var(--scale-factor));
    --left-image-width: calc(1050px * var(--scale-factor));
    --left-image-height: calc(1050px * var(--scale-factor));
    --star1-top: calc(185px * var(--scale-factor));
    --star1-left: calc(200px * var(--scale-factor));
    --star1-size: calc(192.68px * var(--scale-factor));
    
    /* Course cards */
    --card-width: calc(339px * var(--scale-factor));
    --card-height: calc(339px * var(--scale-factor));
    --card-title-font: calc(29.89px * var(--scale-factor));
    --card-price-font: calc(22.56px * var(--scale-factor));
    
    /* FAQ section */
    --faq-section-height: calc(946px * var(--scale-factor));
    --faq-title-width: calc(716px * var(--scale-factor));
    --faq-title-height: calc(45px * var(--scale-factor));
    --faq-title-font: calc(40.47px * var(--scale-factor));
    --faq-item-width: calc(1385px * var(--scale-factor));
    --faq-item-height: calc(83px * var(--scale-factor));
    --faq-item-radius: calc(20px * var(--scale-factor));
    --faq-text-width: calc(1241px * var(--scale-factor));
    --faq-text-height: calc(53px * var(--scale-factor));
    --faq-text-font: calc(29.89px * var(--scale-factor));
    --faq-star-size: calc(30px * var(--scale-factor));
    --faq-answer-width: calc(1385px * var(--scale-factor));
    --faq-answer-height: calc(264px * var(--scale-factor));
    --faq-answer-content-width: calc(1279px * var(--scale-factor));
    --faq-answer-content-height: calc(220px * var(--scale-factor));
    --faq-answer-font: calc(24.89px * var(--scale-factor));
    
    /* Footer */
    --footer-height: calc(600px * var(--scale-factor));
    --contact-card-width: calc(755px * var(--scale-factor));
    --contact-card-height: calc(334px * var(--scale-factor));
    --contact-title-font: calc(29.89px * var(--scale-factor));
    --contact-text-font: calc(22.56px * var(--scale-factor));
    
    /* Spacing */
    --section-padding: calc(40px * var(--scale-factor));
    --element-gap: calc(20px * var(--scale-factor));
    --border-radius: calc(25px * var(--scale-factor));
}

/* Progressive rendering: avoid rendering offscreen sections until needed */
.course-selection,
.course-program,
.new-section,
.reviews-section,
/* Avoid lazy layout on anchor targets to keep geometry stable for scrolling */
.application-section,
.reviews-section,
#footer-section {
    content-visibility: visible !important;
}

/* FAQ must render fully to allow expansion animations */
.faq-section {
    content-visibility: visible;
    contain-intrinsic-size: auto;
}

body {
    font-family: 'Century Gothic', Arial, sans-serif;
    line-height: 1.6;
    padding-top: calc(var(--header-height) + var(--nav-height));
}

/* Provide consistent anchor offsets when using scrollIntoView */
/* Compensates for sticky/fixed header and nav without JS math */
#hero-section,
#course-selection,
#reviews-section,
#footer-section,
#application {
  scroll-margin-top: calc(var(--header-height) + var(--nav-height) + 16px);
}

/* Header Styles */
.header {
    background: #4F4CB0;
    width: 100%;
    min-height: var(--header-height);
    padding: calc(20px * var(--scale-factor)) 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.header-container {
    max-width: 100vw;
    margin: 0 auto;
    padding: 0 calc(20px * var(--scale-factor));
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* Контейнер для контактов и соцсетей */
.contacts-socials-container {
    display: flex;
    align-items: center;
    gap: calc(30px * var(--scale-factor));
    margin-right: calc(80px * var(--scale-factor));
}

/* Logo Section */
.logo-section {
    display: flex;
    align-items: center;
    gap: calc(20px * var(--scale-factor));
    margin-left: calc(80px * var(--scale-factor));
}

.logo {
    width: var(--logo-width);
    height: var(--logo-height);
    opacity: 1;
}

.brand-name {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    font-style: bold;
    font-size: var(--brand-font-size);
    line-height: 112%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: white;
    vertical-align: bottom;
}

/* Contact Section */
.contact-section {
    display: flex;
    flex-direction: row;
    gap: calc(30px * var(--scale-factor));
    align-items: center;
    margin-right: 0;
}

.email {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 400;
    font-style: regular;
    font-size: var(--contact-font-size);
    line-height: 112%;
    letter-spacing: 0%;
    text-align: left;
    vertical-align: middle;
    color: white;
}

.phones {
    display: flex;
    flex-direction: column;
    gap: calc(5px * var(--scale-factor));
    text-align: right;
}

.phone {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 400;
    font-style: regular;
    font-size: var(--contact-font-size);
    line-height: 132%;
    letter-spacing: 0%;
    text-align: right;
    vertical-align: middle;
    color: white;
}

/* Social Section */
.social-section {
    display: flex;
    gap: calc(20px * var(--scale-factor));
    align-items: center;
}

.social-link {
    display: block;
    transition: opacity 0.3s ease;
}

.social-link:hover {
    opacity: 0.8;
}

.social-icon {
    width: calc(62.77px * var(--scale-factor));
    height: calc(62.15px * var(--scale-factor));
    opacity: 1;
}

/* Navigation Menu Styles */
.navigation-menu {
    background: #FFFFFF;
    width: 100%;
    height: var(--nav-height);
    box-shadow: 0px 0px calc(13.5px * var(--scale-factor)) 0px rgba(0, 0, 0, 0.25);
    border-top: calc(2px * var(--scale-factor)) solid #4F4CB0;
    position: fixed;
    top: var(--header-height);
    left: 0;
    z-index: 999;
}

.menu-container {
    max-width: 100vw;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 calc(20px * var(--scale-factor));
}

.menu-item {
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.menu-link {
    text-decoration: none;
    color: #333;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 500;
    font-size: calc(22.56px * var(--scale-factor));
    padding: calc(150px * var(--scale-factor));
    height: 100%;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
    margin-top: calc(10px * var(--scale-factor));  /* Опустит текст */
}

.menu-link:hover {
    color: #4F4CB0;
}

/* Search Button */
.search-item {
    width: calc(65.4px * var(--scale-factor));
    height: calc(65.4px * var(--scale-factor));
}

.search-button {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.search-button:hover {
    background-color: transparent;
}

.search-icon {
    width: var(--social-icon-size);
    height: var(--social-icon-size);
    color: #333;
    transition: color 0.3s ease;
}

.search-button:hover .search-icon {
    color: #4F4CB0;
}

/* Hero Section Styles */
.hero-section {
    width: 100%;
    max-width: 1920px;
    height: calc(767px * var(--scale-factor));
    max-height: 1000px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin: 0 auto;
    transition: all 0.3s ease;
}

/* Background */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(767px * var(--scale-factor));
    max-height: 1000px;
    z-index: 1;
    transition: all 0.3s ease;
}

.background-image {
    width: 100%;
    height: 95%;
    object-fit: cover;
    transition: all 0.3s ease;
}

/* Left Side Image (Students + Big Star) */
.left-image-container {
    position: absolute;
    top: var(--left-image-top);
    left: var(--left-image-left);
    width: var(--left-image-width);
    height: var(--left-image-height);
    z-index: 10;
    transition: all 0.3s ease;
}

.left-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* Star 1 above students */
.star1-image{
    position: absolute;/* НА 30px ВЫШЕ фото */
    left: 50%;                   /* по центру фото */
    transform: translateX(-1116%);
    width: clamp(48px, 10vw, 192px);
    height: auto;
    z-index: 15;
    object-fit: contain;
    transition: transform .3s ease;
    margin-top: 110px;
}

/* Hero Content */
.hero-content {
    position: absolute;
    top: calc(100px * var(--scale-factor));
    right: calc(300px * var(--scale-factor));
    max-width: calc(500px * var(--scale-factor));
    color: white;
    z-index: 20;
    transition: all 0.3s ease;
}

.hero-title {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    font-style: bold;
    font-size: calc(30px * var(--scale-factor));
    line-height: 112%;
    letter-spacing: 0%;
    text-transform: uppercase;
    margin-bottom: calc(30px * var(--scale-factor));
}

.hero-subtitle {
    display: block;
    font-size: calc(25px * var(--scale-factor));
    line-height: 161%;
    margin-top: calc(15px * var(--scale-factor));
}

.hero-features {
    margin-bottom: calc(40px * var(--scale-factor));
}

.hero-features ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hero-features li {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 400;
    font-style: regular;
    font-size: calc(30px * var(--scale-factor));
    line-height: 120%;
    letter-spacing: 0%;
    margin-bottom: calc(15px * var(--scale-factor));
    position: relative;
    padding-left: calc(25px * var(--scale-factor));
}

.hero-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(8px * var(--scale-factor));
    width: calc(8px * var(--scale-factor));
    height: calc(8px * var(--scale-factor));
    background-color: white;
    border-radius: 50%;
}

/* Hero Buttons */
.hero-buttons {
    display: flex;
    gap: calc(20px * var(--scale-factor));
    align-items: center;
}

/* New Complex CTA Button */
.hero-cta-button {
    position: relative;
    width: var(--hero-button-width);
    height: var(--hero-button-height);
    border-radius: var(--border-radius);
    border: calc(4px * var(--scale-factor)) solid #FFFFFF;
    background: linear-gradient(90deg, #FFFFFF 50%, transparent 50%);
    cursor: pointer;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    padding: calc(11px * var(--scale-factor)) calc(62px * var(--scale-factor));
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-cta-button:hover {
    background: #FFFFFF;
    transform: scale(1.02);
}



.hero-cta-button:hover .button-slider {
    transform: translateX(100%);
}

.hero-cta-button:hover .cta-text {
    color: #4F4CB0; /* Purple text on hover */
    transform: translateX(0); /* Center the text */
    width: 100%;
    text-align: center;
    align-items: center;
}

.hero-cta-button:hover .price-text {
    opacity: 0; /* Hide price text on hover */
    transform: translateX(0);
}

.button-content {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    z-index: 3;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 20px;
}

.cta-text {
    color: #484848; /* Black text on white background */
    font-size: calc(30px * var(--scale-factor));
    line-height: 1.2;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: normal;
    text-align: center;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-left: calc(-50px * var(--scale-factor));
}

.price-text {
    color: #FFFFFF; /* White text on transparent background */
    line-height: 1.2;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: normal;
    text-align: center;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: calc(2px * var(--scale-factor));
    margin-right: calc(-40px * var(--scale-factor));
}

.price-amount {
    font-size: calc(28px * var(--scale-factor));
    font-weight: 700;
    margin-bottom: calc(2px * var(--scale-factor));
}

.price-period {
    font-size: calc(20px * var(--scale-factor));
    font-weight: 400;
}

.button-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: #FFFFFF;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* Star animation on hover */
.hero-cta-button::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    background: url('images/звезда1.svg') no-repeat center;
    background-size: contain;
    opacity: 0;
    transform: scale(0) rotate(0deg);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
}

.hero-cta-button:hover::before {
    opacity: 1;
    transform: scale(1) rotate(360deg);
}

/* Course Selection Section */
.course-selection {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    background: #FFFFFF;
}

.course-container {
    max-width: 1920px;
    margin: 0 auto;
    text-align: center;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Section Title */
.course-title {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    font-style: bold;
    font-size: 40.47px;
    line-height: 112%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #484848;
    margin-bottom: 40px;
}

/* Class Selector */
.class-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F0F0F0;
    border-radius: 50px;
    padding: 5px;
    margin-bottom: 60px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.class-tab {
    width: 233px;
    height: 45px;
    border: none;
    border-radius: 50px;
    background: transparent;
    color: #484848;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 112%;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 2px;
}

.class-tab:hover {
    background: #E0E0E0;
}

.class-tab.active {
    background: #4F4CB0;
    color: #FFFFFF;
}

/* Subjects Grid */
.subjects-grid {
    display: flex;
    flex-wrap: wrap;                         /* перенос строк */
    justify-content: center;                 /* центрировать КАЖДУЮ строку */
    gap: calc(30px * var(--scale-factor));   /* расстояния как было */
    /* 4 карточки + 3 промежутка — ширина на 1920.
       Можно оставить и 1200px, но так аккуратнее: */
    max-width: calc((261px * 4 + 30px * 3) * var(--scale-factor));
    margin: 0 auto;
  }

  /* Footer contact card mobile height override (final) */
  @media (max-width: 768px){
    .map-container, .yandex-map{ height: 300px !important; margin: 0 !important; }
    .contact-info-card{ height: 300px !important; }
  }

  /* Kill extra gap between application section and footer on mobile */
  @media (max-width: 768px){
    .application-section{ margin-bottom: 0 !important; padding-bottom: 8px !important; display: block !important; }
    .footer-section{ margin-top: 0 !important; padding-top: 0 !important; }
    .map-container{ top: 0 !important; margin-top: 0 !important; }
  }

  /* ===== Application section — mobile layout and sizing ===== */
  @media (max-width: 768px){
    .application-section{ 
      position: relative !important;
      width: 100% !important; max-width: 100% !important;
      padding: 24px 20px !important; margin: 0 auto 8px !important; /* tighter bottom gap */
      overflow: visible !important; text-align: center !important;
    }
    .application-container{ 
      width: 100% !important; max-width: 100% !important;
      display: flex !important; flex-direction: column !important;
      align-items: center !important; justify-content: flex-start !important;
      gap: 20px !important; padding: 0 12px !important;
    }
    .application-left{ 
      align-items: center !important; text-align: center !important; gap: 12px !important;
      margin-top: 0 !important; width: 100% !important; max-width: 560px !important;
    }
    .application-title{ 
      width: 100% !important; max-width: 540px !important; height: auto !important;
      font-size: 24px !important; line-height: 120% !important; text-align: center !important;
    }
    .application-description{ 
      width: 100% !important; max-width: 560px !important; height: auto !important;
      font-size: 18px !important; line-height: 150% !important; text-align: center !important;
    }
    .application-right{ width: 100% !important; }
    .application-form{ width: 100% !important; max-width: 360px !important; gap: 14px !important; margin: 0 auto !important; }
    .form-field{ width: 100% !important; height: 54px !important; }
    .form-field input{ font-size: 16px !important; border-radius: 16px !important; padding: 10px 16px !important; }
    .application-submit-btn{ 
      width: 100% !important; max-width: 320px !important; height: 54px !important;
      font-size: 18px !important; margin: 8px auto 6px !important; display: block !important;
    }
    .application-disclaimer,
    .application-disclaimer-non-interactive{ 
      width: 100% !important; max-width: 480px !important; font-size: 13px !important; line-height: 1.4 !important;
      text-align: center !important; margin: 6px auto 0 !important;
    }
  }



  /* ===== Mobile fixes for Reviews section (ensure visible on phones) ===== */
  @media (max-width: 768px) {
    .reviews-section{ 
      content-visibility: visible !important;
      padding: 20px var(--gutter) !important;
      overflow: visible !important;
      z-index: 3 !important;
    }
    .reviews-carousel{
      display: block !important;
      overflow: visible !important;
    }
    .arrow-btn{ display: none !important; }
    .review-card{
      width: 100% !important;
      max-width: 600px !important;
      height: auto !important;
      min-height: 360px !important;
      margin: 0 auto !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .review-content{
      position: static !important;
      inset: auto !important;
      padding: 16px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
    }
    .review-top-section{
      flex-direction: column !important;
      align-items: center !important;
      gap: 12px !important;
      margin-bottom: 12px !important;
    }
    .student-photo{ width: 120px !important; height: 120px !important; margin: 0 auto !important; }
    .student-info{ align-items: center !important; text-align: center !important; margin-top: 0 !important; }
    .student-name{ font-size: 22px !important; }
    .student-course{ font-size: 18px !important; }
    .review-text p{ font-size: 16px !important; line-height: 150% !important; text-align: center !important; }
    .review-star{ width: 60px !important; height: 60px !important; top: 12px !important; right: 12px !important; }
    .pagination-dots{ margin-top: 12px !important; }
  }

.subject-card {
    width: calc(261px * var(--scale-factor));
    height: calc(261px * var(--scale-factor));
    border-radius: calc(35px * var(--scale-factor));
    background: linear-gradient(260.8deg, #7A2B8A 3.17%, #0E8BB3 95.08%);
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.subject-card:hover {
    transform: translateY(calc(-5px * var(--scale-factor)));
    box-shadow: 0 calc(10px * var(--scale-factor)) calc(30px * var(--scale-factor)) rgba(0, 0, 0, 0.3);
}

.subject-card:hover .card-info {
    opacity: 1;
}

.subject-card:hover .card-content {
    transform: translateY(calc(-60px * var(--scale-factor)));
}

/* Card Background Pattern */
.card-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    mix-blend-mode: overlay;
}

/* Card Content */
.card-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: calc(26px * var(--scale-factor));
    color: #FFFFFF;
    transition: transform 0.3s ease;
    text-align: center;
}

.card-title {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    font-size: calc(24px * var(--scale-factor));
    line-height: 112%;
    text-transform: uppercase;
    margin-bottom: calc(10px * var(--scale-factor));
}

.card-subtitle {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 400;
    font-size: calc(24px * var(--scale-factor));
    line-height: 112%;
    text-transform: lowercase;
}

/* Card Info (appears on hover) */
.card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    color: #FFFFFF;
    padding: calc(20px * var(--scale-factor)) calc(26px * var(--scale-factor));
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 0 0 calc(35px * var(--scale-factor)) calc(35px * var(--scale-factor));
}

.card-info-text {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 400;
    font-size: calc(29.89px * var(--scale-factor));
    line-height: 112%;
    margin-bottom: calc(5px * var(--scale-factor));
    color: #FFFFFF;
}

.card-info-price {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 400;
    font-size: calc(20px * var(--scale-factor));
    line-height: 112%;
    color: #FFFFFF;
}

.price-crossed {
    text-decoration: line-through;
    opacity: 0.7;
    color: #FFFFFF;
}

/* Course Program Section */
.course-program {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 60px 10px;
    background: #FFFFFF;
}

.program-container {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.program-title {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    font-style: bold;
    font-size: 40.47px;
    line-height: 112%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #484848;
    margin-bottom: 20px;
}

.program-grid{
    display: grid;
    /* 2 колонки, которые могут сжиматься до 460px, но не больше 667px */
    grid-template-columns: repeat(2, minmax(460px, 667px));
    column-gap: 30px;     /* горизонтальный интервал */
    row-gap: 20px;        /* вертикальный интервал */
    justify-content: center;  /* центрируем сетку в контейнере */
    max-width: 1400px;    /* как и было */
    margin: 0 auto;
      /* вычисляем высоту под 2 строки текста + паддинги карточки */
  --fs: 24px;          /* размер шрифта текста в карточке */
  --lh: 1.46;          /* line-height */
  --pad: 12px;         /* вертикальные паддинги карточки */
  grid-auto-rows: calc(2 * var(--fs) * var(--lh) + 2 * var(--pad)); /* ≈ 94px */
  }

.program-card{
  height: 100%;        /* растягиваем карточку на высоту ряда */
  min-height: 0;       /* убираем возможные авто-ограничения */
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 25px rgba(0,0,0,.25);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  overflow: hidden;    /* чтобы ничего не выползало при clamp */
}

  .program-icon{ width:57px; height:57px; flex-shrink:0; }
  .program-icon img{ width:100%; height:100%; object-fit:contain; }
  .program-text{ font-size:24px; line-height:146%; }

.program-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.program-text {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 400;
    font-style: regular;
    font-size: 24px;
    line-height: 146%;
    letter-spacing: 0%;
    color: #000000;
    text-align: left;
    flex: 1;
    overflow:hidden;
}
@media (max-width:1439px){
    .program-text{ font-size:22px; }
  }

/* Course Modal */
.course-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    border-radius: 20px;
    padding: 4px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    /* Hide native scrollbars while keeping scroll */
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* IE/Edge */
    overscroll-behavior: contain;    /* stop scroll chaining to body */
}

/* Course modal centering fixes (works across breakpoints) */
.course-modal{ align-items: center; justify-content: center; }
/* If JS toggles to block, force flex to enable centering */
.course-modal[style*="display: block"]{ display: flex !important; }

@media (max-width: 768px){
  /* Ensure overlay uses flex centering on mobile */
  .course-modal{ padding: 16px !important; }
  .course-modal .modal-content{
    position: relative; top: auto; left: auto; transform: none;
    margin: 0; width: 92%; max-width: 600px;
  }
}

.modal-content::-webkit-scrollbar {  /* Chrome/Safari */
    width: 0;
    height: 0;
}

/* Inner wrapper for stable paddings in course modals */
.modal-body{
    padding: 24px 28px 28px 32px; /* top right bottom left — больше слева */
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: #484848;
}

.modal-title {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: #484848;
    margin: 0 0 20px 0; /* фиксируем отступ сверху как на русском */
    text-align: center;
}

.modal-description {
    margin-bottom: 20px;
    color: #666;
}

.modal-pricing {
    margin-bottom: 30px;
    text-align: center;
    font-size: 24px;
    color: #4F4CB0;
}

.modal-btn {
    width: 100%;
    height: 60px;
    background: #4F4CB0;
    color: #FFFFFF;
    border: none;
    border-radius: 25px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-btn:hover {
    background: #6f42c1;
    transform: translateY(-2px);
}

.modal-details {
    margin: 20px 0;
    max-height: none;
    overflow: visible;
}

.modal-section {
    margin-bottom: 25px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #4F4CB0;
}

.modal-section h4 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

.modal-section p {
    margin: 8px 0;
    line-height: 1.5;
    color: #555;
}

.modal-section ul, .modal-section ol {
    margin: 10px 0;
    padding-left: 20px;
}

.modal-section li {
    margin: 5px 0;
    line-height: 1.4;
    color: #555;
}

.modal-section strong {
    color: #333;
    font-weight: 600;
}

.modal-section em {
    color: #666;
    font-style: italic;
}

/* Main Content Area */
.main-content {
    min-height: 100vh;
    padding: 20px;
}

/* New Section with Background */
.new-section {
    width: 100%;
    max-width: 1920px;
    height: 680px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    background: #FFFFFF;
}

.new-section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.new-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.new-section-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(262.86deg, #9D3AB0 37.76%, #16B3E6 62.35%);
    z-index: 2;
    opacity: 0.8;
    mix-blend-mode: overlay;
}

.new-section-content{
    display: grid;
    grid-template-columns: minmax(480px,520px) 1fr;
    align-items: center;
    gap: clamp(20px,3vw,40px);
    padding: 0 clamp(16px,4vw,80px);
    height: 100%;
    position: relative;
    z-index: 3;
  }
  /* Разрешаем колонкам ужиматься внутри грида */
.new-section-left,
.new-section-right { min-width: 0; }
/* Левый список не фиксированной ширины */
.payment-item{ width: 100%; }
.payment-item::after{ width: 100%; } /* линия тянется по строке */

.new-section-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
}

.payment-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.payment-item {
    width: 520px;
    height: 53px;
    display: flex;
    align-items: center;
    background: transparent;
    padding: 0;
    position: relative;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.payment-item:hover {
    transform: translateX(10px);
}

.payment-item:active {
    transform: translateX(5px);
}

.payment-text {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    font-style: bold;
    font-size: 29.89px;
    line-height: 176%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #FFFFFF;
}

.payment-item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 100%;
    height: 1px;
    background: #FFFFFF;
}

.new-section-right {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.photo-container {
    position: relative;
    border-radius: 20px;
    padding: 0;
    background: transparent;
    width: 800px;
    height: 468px;
    top: 0;
    overflow: hidden;
}

/* Само изображение — BLEED + мягкий зум без видимого шва */
.right-photo{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 55% 50%;            /* подкорректируй, чтобы лица были в центре */
    transform: scale(1.02);              /* небольшой запас по краям в покое */
    transition: transform .45s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
  }
  .photo-container:hover .right-photo{
    transform: scale(1.04);              /* зум при ховере, шва не видно */
  }

/* Apply Button Section */
.apply-button-section {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 92px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
}

.apply-button {
    width: 461px;
    height: 67px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(270deg, #9D3AB0 0%, #16B3E6 100%);
    color: #FFFFFF;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    font-style: bold;
    font-size: 40.47px;
    line-height: 112%;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 11px 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.apply-button:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Video Section - TEMPORARILY HIDDEN - WILL BE RESTORED LATER */
/*
.video-section {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 80px 20px;
    background: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

/* Video Frame */
.video-frame {
    width: 1253px;
    height: 738px;
    border-radius: 42px;
    position: relative;
    overflow: hidden;
    background: #FFFFFF;
    padding: 4px;
    background: linear-gradient(180deg, #9D3AB0 19.71%, #16B3E6 79.33%);
}

.video-frame::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background: #FFFFFF;
    border-radius: 38px;
    z-index: 1;
}

/* Video Placeholder */
.video-placeholder {
    width: 1177.4px;
    height: 660px;
    position: absolute;
    top: 39px;
    left: 38px;
    border-radius: 42px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}

.video-placeholder:hover {
    transform: scale(1.02);
}

/* Blur Background */
.video-blur {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #9D3AB0 0%, #16B3E6 100%);
    filter: blur(20px);
    opacity: 0.8;
}

/* Play Button */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.play-button:hover {
    background: rgba(255, 255, 255, 1);
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
}

.play-button svg {
    width: 32px;
    height: 32px;
    margin-left: 4px;
}

/* Video Player */
.video-player {
    width: 1177.4px;
    height: 660px;
    position: absolute;
    top: 39px;
    left: 38px;
    border-radius: 42px;
    overflow: hidden;
    z-index: 2;
}

.video-player iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Text Label */
.video-label {
    position: absolute;
    top: -17px;
    left: -66px;
    width: 434px;
    height: 112px;
    border-radius: 25px;
    background: #FFFFFF;
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.25);
    padding: 11px 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.label-text {
    width: 310px;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.label-line {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    font-style: bold;
    font-size: 40.47px;
    line-height: 112%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #484848;
    margin: 0;
}
*/

/* Reviews Section */
.reviews-section {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 80px 20px 120px 20px;
    background: #FFFFFF;
}

.reviews-container {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

/* Section Title */
.reviews-title {
    margin-bottom: 60px;
}

.reviews-title h2 {
    width: 716px;
    height: 45px;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    font-style: bold;
    font-size: 40.47px;
    line-height: 112%;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
    color: #484848;
    margin: 0 auto;
}

/* Reviews Carousel */
.reviews-carousel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

/* Review Card */
.review-card {
    width: 1385px;
    height: 599px;
    border-radius: 40px;
    background: #FFFFFF;
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

/* Star Icon */
.review-star {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 131.57px;
    height: 131px;
    z-index: 2;
}

.review-star img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Review Content */
    .review-content {
        width: right;
        height: auto;
        border-radius: 40px;
        position: absolute;
        top: 40px;
        left: 34px;
        right: 34px;
        bottom: 120px;
        display: flex;
        flex-direction: column;
        padding: 10px 45px 30px 10px; /* Increased bottom padding to 30px */
    }

/* Top section with photo and info */
.review-top-section {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 15px;
}

/* Student Photo */
.student-photo {
    width: 237px;
    height: 237px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    margin-top: 20px;
}

.student-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Student Info */
.student-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 15px;
    margin-top: 70px;
}

.student-name {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    font-style: bold;
    font-size: 40.47px;
    line-height: 112%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #484848;
    margin: 0;
    text-align: left;
}

.student-course {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 400;
    font-style: regular;
    font-size: 29.89px;
    line-height: 176%;
    letter-spacing: 0%;
    color: #4F4CB0;
    margin: 0;
    text-align: left;
}

/* Review Text */
.review-text {
    width: 100%;
    display: flex;
    align-items: flex-start;
}

.review-text p {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 400;
    font-style: regular;
    font-size: 29.89px;
    line-height: 176%;
    letter-spacing: 0%;
    color: #484848;
    margin: 0 0 20px 0;
    text-align: left;
    width: 100%;
}

/* Arrow Buttons */
.arrow-btn {
    width: 80.1px;
    height: 80.4px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.arrow-left {
    left: -120px;
}

.arrow-right {
    right: -120px;
}

.arrow-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* Arrow button states are now handled by JavaScript with image swapping */

/* Pagination Dots */
.pagination-dots {
    width: 215px;
    height: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    margin-bottom: 32px; /* опционально */
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #E0E0E0;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.dot.active {
    background: #4F4CB0;
}

.dot:hover {
    background: #C0C0C0;
}

/* Add Review Modal */
/*.add-review-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
}

.add-review-modal .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    border-radius: 20px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.modal-header h3 {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: #484848;
    margin: 0;
}

.add-review-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #484848;
}

.form-group input,
.form-group textarea {
    padding: 12px;
    border: 2px solid #E0E0E0;
    border-radius: 10px;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #4F4CB0;
}

.photo-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-top: 10px;
    border: 2px dashed #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.form-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-top: 20px;
}

.submit-btn,
.cancel-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn {
    background: #4F4CB0;
    color: #FFFFFF;
}

.submit-btn:hover {
    background: #3A3A8A;
}

.cancel-btn {
    background: #E0E0E0;
    color: #484848;
}

.cancel-btn:hover {
    background: #C0C0C0;
}  

/* Add Review Button */
/*.add-review-btn-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.add-review-btn {
    width: 200px;
    height: 50px;
    background: #4F4CB0;
    color: #FFFFFF;
    border: none;
    border-radius: 25px;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.add-review-btn:hover {
    background: #3A3A8A;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
*/
/* FAQ Section - Rewritten from scratch */
.faq-section {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    min-height: clamp(520px, 60vh, 640px);
    position: relative;
    overflow: visible;
    background-size: cover;
}

.faq-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.faq-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.faq-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(262.86deg, #9D3AB0 37.76%, #16B3E6 62.35%);
    z-index: 2;
    opacity: 1;
    mix-blend-mode: hard-light;
}

.faq-container {
    position: relative;
    z-index: 3;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 80px 20px 60px;
    gap: calc(5px * var(--scale-factor));
}

/* FAQ Title */
.faq-title {
    width: var(--faq-title-width);
    height: var(--faq-title-height);
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    font-style: bold;
    font-size: var(--faq-title-font);
    line-height: 112%;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0 0 calc(60px * var(--scale-factor)) 0;
}

/* FAQ Items */
.faq-items {
    display: flex;
    flex-direction: column;
    gap: calc(2px * var(--scale-factor));
    max-width: var(--faq-item-width);
    width: 100%;
}

/* FAQ Item */
.faq-item {
    width: var(--faq-item-width);
    height: auto;
    background: transparent;
    border-radius: var(--faq-item-radius);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.faq-item:hover {
    transform: translateY(calc(-2px * var(--scale-factor)));
    box-shadow: 0 calc(5px * var(--scale-factor)) calc(15px * var(--scale-factor)) rgba(0, 0, 0, 0.1);
}

.faq-item:active {
    transform: translateY(0);
    box-shadow: 0 calc(2px * var(--scale-factor)) calc(8px * var(--scale-factor)) rgba(0, 0, 0, 0.15);
}

/* FAQ Question */
.faq-question {
    width: var(--faq-item-width);
    height: var(--faq-item-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(15px * var(--scale-factor)) calc(55.25px * var(--scale-factor));
    background: #FFFFFF;
    border-radius: var(--faq-item-radius);
    position: relative;
    z-index: 2;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background-color: #f8f8f8;
}

.faq-text {
    width: var(--faq-text-width);
    height: var(--faq-text-height);
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 400;
    font-style: regular;
    font-size: var(--faq-text-font);
    line-height: 176%;
    letter-spacing: 0%;
    color: #484848;
    display: flex;
    align-items: center;
}

.faq-star {
    width: var(--faq-star-size);
    height: var(--faq-star-size);
    transition: transform 0.3s ease;
}

/* FAQ Answer */
.faq-answer {
    width: var(--faq-answer-width);
    height: var(--faq-answer-height);
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--faq-item-radius);
    margin-top: calc(-83px * var(--scale-factor));
    padding: calc(89px * var(--scale-factor)) calc(53px * var(--scale-factor)) 0;
    opacity: 0;
    max-height: 0;
    overflow: clip;
    transition: all 0.3s ease;
    visibility: hidden;
    position: relative;
    z-index: 1;
}

.faq-answer-content {
    width: var(--faq-answer-content-width);
    height: var(--faq-answer-content-height);
}

.faq-answer-content p {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 400;
    font-style: regular;
    font-size: var(--faq-answer-font);
    line-height: 176%;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

/* FAQ Answer Lists */
.faq-answer-content ul {
    list-style: disc;
    padding-left: calc(30px * var(--scale-factor));
    margin: 0;
    color: #FFFFFF;
}

.faq-answer-content li {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 400;
    font-style: regular;
    font-size: calc(var(--faq-answer-font) * 1.1);
    line-height: 176%;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin-bottom: calc(8px * var(--scale-factor));
}

.faq-answer-content a {
    color: #FFFFFF;
    text-decoration: underline;
}

/* Active FAQ Item */
.faq-item.active .faq-question {
    border-radius: var(--faq-item-radius) var(--faq-item-radius) 0 0;
}

.faq-item.active .faq-answer {
    opacity: 1 !important;
    max-height: var(--faq-answer-height) !important;
    margin-top: calc(-83px * var(--scale-factor)) !important;
    visibility: visible !important;
    overflow: visible !important;
    padding-top: calc(89px * var(--scale-factor)) !important;
}

.faq-item.active .faq-star {
    transform: rotate(45deg);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .header-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .contacts-socials-container {
        flex-direction: column;
        gap: 20px;
        margin-right: 0;
        align-items: center;
    }
    
    .contact-section {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .phones {
        text-align: center;
    }
    
    .brand-name {
        font-size: 40px;
    }
    
    /* Navigation Menu Responsive */
    .menu-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    
    .menu-item {
        min-width: 120px;
    }
    
    /* Hero Section Responsive */
    .hero-section {
        height: auto;
        min-height: calc(600px * var(--scale-factor));
        padding: calc(40px * var(--scale-factor)) calc(20px * var(--scale-factor));
    }
    
    .hero-content {
        position: relative;
        top: auto;
        right: auto;
        max-width: 100%;
        text-align: center;
    }
    
    .left-image-container {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: calc(500px * var(--scale-factor));
        margin: 0 auto calc(30px * var(--scale-factor));
    }
    
    .hero-title {
        font-size: 30px;
    }
    
    .hero-subtitle {
        font-size: 25px;
    }
    
    .hero-features li {
        font-size: 30px;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-cta-button {
        width: 100%;
        max-width: 400px;
        height: 100px;
        padding: 10px 40px;
    }
    
    .cta-text {
        font-size: 18px;
    }
    
    .price-text {
        font-size: 14px;
    }
    
    /* Course Selection Responsive */
    .course-selection {
        padding: 40px 20px;
    }
    
    .course-title {
        font-size: 32px;
    }
    
    .class-selector {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .class-tab {
        width: 196px;
        height: 38px;
        font-size: 16px;
    }
    
    .subjects-grid {
        gap: 20px;
        justify-content: center;
    }
    
    .subject-card {
        width: 216px;
        height: 216px;
    }
    
    .card-title {
        font-size: 24px;
    }
    
    .card-subtitle {
        font-size: 24px;
    }
    
    /* Course Program Responsive */
    .course-program {
        padding: 40px 20px;
    }
    
    .program-title {
        font-size: 32px;
        margin-bottom: 40px;
    }
    
    .program-grid {
        gap: 15px;
    }
    
    .program-card {
        width: 100%;
        max-width: 480px;
        height: auto;
        min-height: 65px;
        padding: 10px;
    }
    
    .program-icon {
        width: 40px;
        height: 40px;
    }
    
    .program-text {
        font-size: 16px;
    }
    
    /* New Section Tablet */
    .new-section {
        height: 500px;
    }
    
    .new-section-content {
        padding: 0 40px;
    }
    
    .payment-item {
        width: 400px;
        height: 45px;
        padding: 0;
    }
    
    .payment-text {
        font-size: 24px;
    }
    
    .payment-item::after {
        width: 420px;
    }
    
    .photo-container {
        width: 720px;
        height: 420px;
        top: 0;
        overflow: hidden;
    }
    
    /* Apply Button Tablet */
    .apply-button-section {
        padding: 60px 0;
    }
    
    .apply-button {
        width: 400px;
        height: 60px;
        font-size: 32px;
        padding: 10px 50px;
    }

         /* FAQ Section Tablet */
     .faq-section {
         height: auto;
         min-height: calc(420px * var(--scale-factor));
         padding: calc(60px * var(--scale-factor)) calc(20px * var(--scale-factor));
     }
    
    .faq-container {
        padding: calc(60px * var(--scale-factor)) calc(20px * var(--scale-factor)) 0;
    }
    
    .faq-title {
        width: 100%;
        max-width: calc(600px * var(--scale-factor));
        font-size: calc(36px * var(--scale-factor));
        margin-bottom: calc(50px * var(--scale-factor));
    }
    
         .faq-items {
         gap: calc(5px * var(--scale-factor));
         max-width: calc(480px * var(--scale-factor));
     }
     
     .faq-item {
         width: 100%;
         max-width: calc(480px * var(--scale-factor));
     }
    
    .faq-question {
        width: 100%;
        height: auto;
        min-height: calc(70px * var(--scale-factor));
        padding: calc(15px * var(--scale-factor)) calc(30px * var(--scale-factor));
    }
    
    .faq-text {
        width: 100%;
        height: auto;
        font-size: calc(24px * var(--scale-factor));
        line-height: 140%;
    }
    
    .faq-star {
        width: calc(22px * var(--scale-factor));
        height: calc(22px * var(--scale-factor));
    }
    
         .faq-answer {
         width: 100%;
         height: auto;
         min-height: calc(132px * var(--scale-factor));
         padding: calc(30px * var(--scale-factor));
     }
    
    .faq-answer-content {
        width: 100%;
        height: auto;
    }
    
         .faq-answer-content p {
         font-size: calc(20px * var(--scale-factor));
         line-height: 160%;
     }

     /* Application Section Tablet */
.application-section {
    height: auto;
    min-height: 500px;
    padding: 60px 40px;
    margin-bottom: 15px; /* ← ОТСТУП ОТ ПОДВАЛА ДЛЯ ПЛАНШЕТОВ */
}
     
     .application-container {
         gap: 60px;
         padding: 0 40px;
     }
     
     .application-left {
         gap: 25px;
     }
     
     .application-header {
         gap: 8px;
     }
     
     .application-star {
         width: 55px;
         height: 54px;
     }
     
     .application-title {
         width: 100%;
         max-width: 500px;
         font-size: 28px;
         height: auto;
         min-height: 60px;
         line-height: 120%;
     }
     
     .application-description {
         width: 100%;
         max-width: 500px;
         font-size: 24px;
     }
     
     .application-form {
         width: 100%;
         max-width: 400px;
     }
     
     .form-field {
         width: 100%;
         height: 60px;
     }
     
     .form-field input {
         font-size: 17px;
     }
     
     .application-submit-btn {
         width: 100%;
         height: 60px;
         font-size: 22px;
         padding: 10px 50px;
     }
     
     .application-disclaimer {
         width: 100%;
         font-size: 16px;
         text-align: left;
     }
     
     .application-disclaimer-non-interactive {
         width: 100%;
         font-size: 16px;
         text-align: left;
         opacity: 0.7;
     }

 }

@media (max-width: 768px) {
    .brand-name {
        font-size: 30px;
    }
    
    .contacts-socials-container {
        flex-direction: column;
        gap: 15px;
        margin-right: 0;
        align-items: center;
    }
    
    .email, .phone {
        font-size: 18px;
    }
    
    .logo {
        width: 50px;
        height: 63px;
    }
    
    .social-icon {
        width: 50px;
        height: 50px;
    }
    
    /* Navigation Menu Mobile */
    .navigation-menu {
        height: auto;
        min-height: 65px;
    }
    
    .menu-container {
        flex-direction: column;
        padding: 10px;
    }
    
    .menu-item {
        width: 100%;
        height: 50px;
        min-width: auto;
    }
    
    .search-item {
        width: 50px;
        height: 50px;
        align-self: flex-end;
    }
    
    /* Hero Section Mobile */
    .hero-section {
        height: calc(778px * var(--scale-factor));
        min-width: calc(500px * var(--scale-factor));
        padding: calc(20px * var(--scale-factor));
    }
    
    .left-image-container {
        width: 1422.5771484375;
        height: 1437.87646484375;
        opacity: 1;
        top: -11.55px;
        left: -7.53px;
        max-width: calc(1422.5771484375px * var(--scale-factor));
        margin-bottom: calc(20px * var(--scale-factor));
    }
    
    .hero-title {
        font-size: 30px;
    }
    
    .hero-subtitle {
        font-size: 25px;
    }
    
    .hero-features li {
        font-size: 30px;
    }
    
    .hero-cta-button {
        height: 80px;
        padding: 10px 30px;
    
    }
    
    .cta-text {
        font-size: 16px;
    }
    
    .price-text {
        font-size: 12px;
    }
    
    /* Course Selection Mobile */
    .course-selection {
        padding: 20px;
    }
    
    .course-title {
        font-size: 28px;
        margin-bottom: 30px;
    }
    
    .class-selector {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;                     /* требуемый отступ */
        width: 100%;
        max-width: 681px;               /* макетная ширина */
        min-height: 150px;              /* макетная высота */
        padding: 10px;                  /* внутренний отступ контейнера */
        background: transparent;        /* убираем серый фон у контейнера */
        border-radius: 33px;            /* требуемый радиус */
        margin: 0 auto 40px auto;       /* центрируем блок */
        box-sizing: border-box;
    }
    
    .class-tab {
        width: 100%;                    /* занимает колонку грида */
        max-width: none;
        height: 60px;                   /* визуальная высота кнопки */
        border-radius: 33px;            /* скругление как у контейнера */
        font-size: 16px;
        background: #F0F0F0;            /* серые кнопки */
    }
    
    .class-tab.active {                 /* активная кнопка */
        background: #4F4CB0;
        color: #FFFFFF;
    }
    
    .subjects-grid {
        gap: 16px;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    
    .subject-card {
        width: 100%;
        max-width: 782px;            /* ширина по макету */
        height: 270px;               /* высота по макету */
        border-radius: 33px;         /* скругление */
        margin: 0 auto;
        opacity: 1;                  /* полная непрозрачность */
    }
    
    .subject-card:hover .card-content { transform: none; }
    .subject-card:hover .card-info { opacity: 1; }
    
    .card-content {
        align-items: flex-start;
        justify-content: center;
        padding: 24px;
        text-align: left;
    }
    
    .card-title { font-size: 22px; margin-bottom: 10px; }
    .card-subtitle { display: none; }
    
    .card-info {
        position: static;            /* переносим в поток */
        opacity: 1;                  /* всегда видно на мобиле */
        padding: 0;
        background: transparent;
    }
    
    .card-title {
        font-size: 20px;
    }
    
    .card-subtitle {
        font-size: 20px;
    }
    
    .card-info-text,
    .card-info-price {
        font-size: 18px;
    }
    
    .modal-content {
        padding: 20px;
        margin: 20px;
    }
    
    .modal-title {
        font-size: 24px;
    }
    
    /* Course Program Mobile */
    .course-program {
        padding: 20px;
    }
    
    .program-title {
        font-size: 28px;
        margin-bottom: 30px;
    }
    
    .program-card {
        max-width: 100%;
        min-height: 64px;
        padding: 10px;
        gap: 12px;
    }
    
    .program-icon {
        width: 32px;
        height: 32px;
    }
    
    .program-text {
        font-size: 13px;
        line-height: 130%;
    }
    
    /* New Section Mobile */
    .new-section {
        height: 400px;
    }
    
    .new-section-content {
        flex-direction: column;
        padding: 0 20px;
        gap: 30px;
    }
    
    .payment-options {
        gap: 12px;
    }
    
    .payment-item {
        width: 300px;
        height: 40px;
        padding: 0;
    }
    
    .payment-text {
        font-size: 18px;
        line-height: 130%;
    }
    
    .payment-item::after {
        width: 320px;
    }
    
    .photo-container {
        width: 100%;
        max-width: 480px;
        height: 300px;
        top: 0;
        overflow: hidden;
    }
    
         /* Apply Button Mobile */
     .apply-button-section {
         padding: 40px 20px;
     }
     
     .apply-button {
         width: 100%;
         max-width: 350px;
         height: 55px;
         font-size: 24px;
         padding: 8px 40px;
     }
     
         /* Video Section Mobile - TEMPORARILY HIDDEN - WILL BE RESTORED LATER */
    /*
    .video-section {
        padding: 20px;
    }
    
    .video-frame {
        width: 100%;
        max-width: 600px;
        height: auto;
        aspect-ratio: 1253/738;
        padding: 2px;
    }
    
    .video-frame::before {
        top: 2px;
        left: 2px;
        right: 2px;
        bottom: 2px;
        border-radius: 30px;
    }
    
    .video-placeholder,
    .video-player {
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        top: 20px;
        left: 20px;
    }
    
    .video-label {
        width: 250px;
        height: 70px;
        top: -5px;
        left: -20px;
        padding: 6px 30px;
        z-index: 50;
    }
    
    .label-text {
        width: 190px;
        height: 58px;
    }
    
    .label-line {
        font-size: 20px;
    }
    
    .play-button {
        width: 50px;
        height: 50px;
    }
    
    .play-button svg {
        width: 20px;
        height: 20px;
    }
    
    /* Video Section Responsive */
    .video-section {
        padding: 40px 20px;
    }
    
    .video-frame {
        width: 100%;
        max-width: 800px;
        height: auto;
        aspect-ratio: 1253/738;
        padding: 3px;
    }
    
    .video-frame::before {
        top: 3px;
        left: 3px;
        right: 3px;
        bottom: 3px;
        border-radius: 35px;
    }
    
    .video-placeholder,
    .video-player {
        width: calc(100% - 76px);
        height: calc(100% - 78px);
        top: 39px;
        left: 38px;
    }
    
    .video-label {
        width: 300px;
        height: 80px;
        top: -10px;
        left: -30px;
        padding: 8px 40px;
        z-index: 50;
    }
    
    .label-text {
        width: 220px;
        height: 64px;
    }
    
    .label-line {
        font-size: 28px;
    }
    
    .play-button {
        width: 60px;
        height: 60px;
    }
    
    .play-button svg {
        width: 24px;
        height: 24px;
    }
    */
     
     .label-line {
         font-size: 28px;
     }
     
     .play-button {
         width: 60px;
         height: 60px;
     }
     
          .play-button svg {
         width: 24px;
         height: 24px;
     }
     
     /* Reviews Section Responsive */
     .reviews-section {
         padding: 40px 20px;
     }
     
     .reviews-title h2 {
         width: 100%;
         max-width: 500px;
         font-size: 32px;
     }
     
     .review-card {
         width: 100%;
         max-width: 800px;
         height: auto;
         min-height: 500px;
     }
     
     .review-content {
         width: 100%;
         height: auto;
         flex-direction: column;
         gap: 20px;
         padding: 20px;
     }
     
     .review-top-section {
         flex-direction: column;
         align-items: center;
         gap: 20px;
         margin-bottom: 20px;
     }
     
     .student-photo {
         width: 150px;
         height: 150px;
         margin: 0 auto;
     }
     
     .student-info {
         width: 100%;
         text-align: center;
         align-items: center;
     }
     
     .student-name {
         width: 100%;
         font-size: 28px;
         text-align: center;
     }
     
     .student-course {
         width: 100%;
         font-size: 24px;
         text-align: center;
     }
     
     .review-text {
         width: 100%;
         height: auto;
     }
     
     .review-text p {
         font-size: 20px;
         text-align: center;
     }
     
     .arrow-btn {
         width: 60px;
         height: 60px;
     }
     
     .arrow-left {
         left: -80px;
     }
     
     .arrow-right {
         right: -80px;
     }
     
     .review-star {
         width: 80px;
         height: 80px;
         top: 20px;
         right: 20px;
     }
     
     /* Reviews Section Mobile */
     .reviews-section {
         padding: 20px;
     }
     
     .reviews-title h2 {
         font-size: 28px;
         margin-bottom: 30px;
     }
     
     .review-card {
         max-width: 600px;
         min-height: 400px;
     }
     
     .review-content {
         padding: 15px;
         gap: 15px;
     }
     
     .review-top-section {
         flex-direction: column;
         align-items: center;
         gap: 15px;
         margin-bottom: 15px;
     }
     
     .student-photo {
         width: 120px;
         height: 120px;
         margin: 0 auto;
     }
     
     .student-info {
         align-items: center;
     }
     
     .student-name {
         font-size: 24px;
         text-align: center;
     }
     
     .student-course {
         font-size: 20px;
         text-align: center;
     }
     
     .review-text p {
         font-size: 16px;
         line-height: 150%;
     }
     
     .arrow-btn {
         width: 50px;
         height: 50px;
     }
     
     .arrow-left {
         left: -60px;
     }
     
     .arrow-right {
         right: -60px;
     }
     
     .review-star {
         width: 60px;
         height: 60px;
         top: 15px;
         right: 15px;
     }
     
     .add-review-btn {
         width: 150px;
         height: 40px;
         font-size: 14px;
     }
 
           /* FAQ Section Mobile */
      .faq-section {
          height: auto;
          min-height: calc(360px * var(--scale-factor));
          padding: calc(10px * var(--scale-factor)) calc(10px * var(--scale-factor));
      }
     
     .faq-container {
         padding: calc(10px * var(--scale-factor)) calc(10px * var(--scale-factor)) 0;
     }
     
     .faq-title {
         width: 100%;
         max-width: calc(500px * var(--scale-factor));
         font-size: calc(28px * var(--scale-factor));
         margin-bottom: calc(40px * var(--scale-factor));
     }
     
           .faq-items {
          gap: calc(4px * var(--scale-factor));
      }
      
      .faq-item {
          width: 100%;
          max-width: calc(600px * var(--scale-factor));
      }
     
     .faq-question {
         width: 100%;
         height: auto;
         min-height: calc(30px * var(--scale-factor));
         padding: calc(10px * var(--scale-factor)) calc(20px * var(--scale-factor));
     }
     
     .faq-text {
         width: 100%;
         height: auto;
         font-size: calc(18px * var(--scale-factor));
         line-height: 130%;
     }
     
     .faq-star {
         width: calc(20px * var(--scale-factor));
         height: calc(20px * var(--scale-factor));
         flex-shrink: 0;
     }
     
           .faq-answer {
          width: 100%;
          height: auto;
          min-height: calc(120px * var(--scale-factor));
          padding: calc(20px * var(--scale-factor));
      }
     
     .faq-answer-content {
         width: 100%;
         height: auto;
     }
     
           .faq-answer-content p {
          font-size: calc(16px * var(--scale-factor));
          line-height: 150%;
      }

      /* Application Section Mobile */
.application-section {
    height: auto;
    min-height: 400px;
    padding: 40px 20px;
    margin-bottom: 10px; /* ← ОТСТУП ОТ ПОДВАЛА ДЛЯ МОБИЛЬНЫХ */
}
      
      .application-container {
          flex-direction: column;
          gap: 40px;
          padding: 0 20px;
      }
      
      .application-left {
          align-items: center;
          text-align: center;
          gap: 20px;
      }
      
      .application-header {
          flex-direction: column;
          gap: 15px;
      }
      
      .application-star {
          width: 50px;
          height: 49px;
      }
      
      .application-title {
          width: 100%;
          max-width: 350px;
          font-size: 24px;
          text-align: center;
          height: auto;
          min-height: 80px;
          line-height: 120%;
      }
      
      .application-description {
          width: 100%;
          max-width: 400px;
          font-size: 20px;
          text-align: center;
      }
      
      .application-form {
          width: 100%;
          max-width: 350px;
      }
      
      .form-field {
          width: 100%;
          height: 55px;
      }
      
      .form-field input {
          font-size: 16px;
      }
      
      .application-submit-btn {
          width: 100%;
          height: 55px;
          font-size: 20px;
          padding: 8px 40px;
      }
      
      .application-disclaimer {
          width: 100%;
          font-size: 14px;
          text-align: left;
      }
      
      .application-disclaimer-non-interactive {
          width: 100%;
          font-size: 14px;
          text-align: left;
          opacity: 0.7;
      }

  }

/* Application Section */
.application-section {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    height: auto !important;
    margin-bottom: calc(-950px * var(--scale-factor));
    background: #FFFFFF;
    display: block;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 80px;
    position: relative; /* ensure above footer map overlay */
    z-index: 5;
}

.application-container {
    width: 100%;
    max-width: 1920px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(100px * var(--scale-factor));
    padding: 0 calc(80px * var(--scale-factor));
}

/* Left Side - Text Content */
.application-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    margin-top: -80px; /* Опускаем левую часть немного ниже */
}

.application-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.application-star {
    width: 62px;
    height: 61px;
    border-radius: 40px;
}

.application-title {
    width: 600px;
    height: 80px;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    font-style: bold;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #484848;
    margin: 0;
    display: flex;
    align-items: center;
    text-align: left;
    word-wrap: break-word;
    white-space: normal;
}

.application-description {
    width: 684px;
    height: 159px;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 400;
    font-style: regular;
    font-size: 29.89px;
    line-height: 176%;
    letter-spacing: 0%;
    color: #484848;
    margin: 0;
}

/* Right Side - Form */
.application-right {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.application-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 486px;
}

/* Required note text under the form intro */
.application-required-note{
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
    color: #ff4d4f;
}

/* Red asterisk for required fields */
.form-field.required{ position: relative; }
.form-field.required::after{
    content: "*";
    position: absolute;
    right: 12px;
    top: 8px;
    color: #ff4d4f;
    font-weight: 700;
}

/* Inline popup message for form status */
.form-message{
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.3;
    opacity: 0; transition: opacity .25s ease;
}
.form-message.show{ opacity: 1; }
.form-message.error{ background: #fff3f3; color: #c0392b; border: 1px solid #f5c6cb; }
.form-message.success{ background: #f3fff6; color: #1e7e34; border: 1px solid #c3e6cb; }

.form-field {
    width: 486px;
    height: 67px;
}

.form-field input {
    width: 100%;
    height: 100%;
    border-radius: 25px;
    border: 2px solid #E0E0E0;
    padding: 10px 20px;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-size: 18px;
    color: #484848;
    background: #F8F8F8;
    transition: all 0.3s ease;
}

.form-field input::placeholder {
    color: #999;
}

.form-field input:focus {
    outline: none;
    border-color: #4F4CB0;
    background: #FFFFFF;
}

.application-submit-btn {
    width: 461px;
    height: 67px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(270deg, #9D3AB0 0%, #16B3E6 100%);
    color: #FFFFFF;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    font-style: bold;
    font-size: 24px;
    line-height: 112%;
    letter-spacing: 0%;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 11px 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.application-submit-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.consent-row{
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-size: 16px;
    color: #484848;
}

.consent-row input[type="checkbox"]{
    width: 18px;
    height: 18px;
    accent-color: #4F4CB0;
}

.application-disclaimer {
    width: 466.91px;
    height: 44px;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 400;
    font-style: regular;
    font-size: 18.43px;
    line-height: 122%;
    letter-spacing: 0%;
    color: #484848;
    margin: 0;
    text-align: left;
    pointer-events: auto; /* ensure clickable */
}

.application-disclaimer-non-interactive {
    width: 466.91px;
    height: 44px;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 400;
    font-style: regular;
    font-size: 18.43px;
    line-height: 122%;
    letter-spacing: 0%;
    color: #484848;
    margin: 0;
    text-align: left;
    opacity: 0.7;
}

/* Privacy Policy Modal */
.privacy-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3000;
    backdrop-filter: blur(5px);
}

.privacy-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    border-radius: 20px;
    padding: 40px;
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.privacy-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: #484848;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.privacy-modal-close:hover {
    background: #f0f0f0;
    color: #4F4CB0;
}

.privacy-modal-content h3 {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: #484848;
    margin: 0 0 30px 0;
    text-align: center;
}

.privacy-content {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #484848;
}

.privacy-content p {
    margin-bottom: 15px;
}

.privacy-content ul {
    margin: 15px 0;
    padding-left: 20px;
}

.privacy-content li {
    margin-bottom: 8px;
}

.privacy-content strong {
    color: #4F4CB0;
}

/* Enhanced Application Button Animations */
.application-submit-btn {
    width: 461px;
    height: 67px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(270deg, #9D3AB0 0%, #16B3E6 100%);
    color: #FFFFFF;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    font-style: bold;
    font-size: 24px;
    line-height: 112%;
    letter-spacing: 0%;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 11px 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.application-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.application-submit-btn:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.application-submit-btn:hover::before {
    left: 100%;
}

.application-submit-btn:active {
    transform: scale(1.02) translateY(0);
    box-shadow: 0 8px 25px rgba(157, 58, 176, 0.3);
}

/* Enhanced Form Field Animations */
.form-field input {
    width: 100%;
    height: 100%;
    border-radius: 25px;
    border: 2px solid #E0E0E0;
    padding: 10px 20px;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-size: 18px;
    color: #484848;
    background: #F8F8F8;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.form-field input::placeholder {
    color: #999;
    transition: color 0.3s ease;
}

.form-field input:focus {
    outline: none;
    border-color: #4F4CB0;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(79, 76, 176, 0.1);
    transform: translateY(-1px);
}

.form-field input:focus::placeholder {
    color: #4F4CB0;
    opacity: 0.7;
}

/* Enhanced Disclaimer Link */
.application-disclaimer {
    width: 466.91px;
    height: 44px;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 400;
    font-style: regular;
    font-size: 18.43px;
    line-height: 122%;
    letter-spacing: 0%;
    color: #484848;
    margin: 0;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
}

.application-disclaimer:hover {
    color: #4F4CB0;
    text-decoration: underline;
}

/* Loading State for Form Submission */
.application-submit-btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

.application-submit-btn.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top: 2px solid #FFFFFF;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Success/Error Messages */
.form-message {
    padding: 15px;
    border-radius: 10px;
    margin-top: 15px;
    font-family: 'Century Gothic', Arial, sans-serif;
    font-size: 16px;
    text-align: center;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.form-message.show {
    opacity: 1;
    transform: translateY(0);
}

.form-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Footer Section */
.footer-section{
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    height: var(--footer-height);
    position: relative;
    background: #fff;
    overflow: hidden;              /* ВАЖНО: режем карту по краям секции */
  }

.footer-container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Яндекс Карты */
.map-container {
    width: 100%;
    max-width: 1920px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    top: 0;
    left: 50%;
    transform: translateX(-50%);   /* центрируем по горизонтали */
    /* ширина больше контейнера → при широкой странице режется ПО ОБОИМ БОКАМ */
    width: max(100%, 1920px);      /* не уже «эталона» 1920, но может быть шире */
    height: 100%;
}

.yandex-map {
    width: 100%;
    max-width: 1920px;
    height: 100%;
    border-radius: 0;
    position: absolute;
    top: 0;
    width: max(100%, 1920px);      /* не уже «эталона» 1920, но может быть шире */
    height: 100%;
}

/* Контактная информация */
.contact-info-card {
    position: absolute;
    display: block;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    align-items: center;
    top: calc(180px * var(--scale-factor));
    left: 25%;
    transform: translateX(-50%);
    width: var(--contact-card-width);
    height: var(--contact-card-height);
    background: #484848;
    border-radius: var(--border-radius);
    padding: calc(24px * var(--scale-factor));
    padding-bottom: calc(50px * var(--scale-factor));
    z-index: 10;
}

.contact-title {
    width: calc(413px * var(--scale-factor));
    height: calc(53px * var(--scale-factor));
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    font-style: bold;
    font-size: var(--contact-title-font);
    line-height: 176%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0 0 calc(20px * var(--scale-factor)) 0;
    display: block;
    align-items: center;
}

.contact-details {
    width: calc(693px * var(--scale-factor));
    height: calc(140px * var(--scale-factor));
    display: block;
    flex-direction: column;
    gap: calc(5px * var(--scale-factor));
}

.contact-address,
.contact-phone,
.contact-email {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 400;
    font-style: regular;
    font-size: var(--contact-text-font);
    line-height: 155%;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.contact-phone {
    cursor: pointer;
    transition: color 0.3s ease;
}

.contact-phone:hover {
    color: #9D3AB0;
}

.contact-email {
    cursor: pointer;
    transition: color 0.3s ease;
}

.contact-email:hover {
    color: #9D3AB0;
}

/* Социальные сети */
.social-links {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.social-links .social-link {
    display: block;
    transition: transform 0.3s ease;
}

.social-links .social-link:hover {
    transform: scale(1.1);
}

.contact-info-card .social-icon {
    width: calc(48px * var(--scale-factor));
    height: calc(48px * var(--scale-factor));
    border-radius: 10px;
}

.social-links .social-icon {
    :root{ --social-icon-size: 50px; }
    .social-links .social-icon{
      width: var(--social-icon-size);
      height: var(--social-icon-size);
      border-radius: 10px;
    }
    background: transparent;
    padding: 0;

}



/* Additional Responsive Rules */
@media (max-width: 1600px) {
  :root {
    --scale-factor: 0.9;
  }
}

@media (max-width: 1366px) {
  :root {
    --scale-factor: 0.8;
  }
}

@media (max-width: 1024px) {
  :root {
    --scale-factor: 0.7;
  }
}

/* Ensure minimum usability on very small screens */
@media (max-width: 800px) {
  :root {
    --scale-factor: 0.6;
  }

  .hero-content {
    right: calc(50px * var(--scale-factor)) !important;
    max-width: calc(400px * var(--scale-factor)) !important;
  }

  .star1-image {
    left: calc(50px * var(--scale-factor)) !important;
  }
}

/* Force responsive behavior for critical elements */
.header-container,
.menu-container,
.course-container,
.application-container,
.footer-section,
.reviews-section {
  max-width: 100vw !important;
  width: 100% !important;
}

/* Ensure left image maintains positioning relative to background */
.hero-section {
  max-width: 100vw !important;
  width: 100% !important;
  overflow: hidden !important;
}

.left-image-container {
  position: absolute !important;
  z-index: 10 !important;
}

.left-image {
  object-fit: contain !important;
  transition: all 0.3s ease !important;
}

.star1-image {
  position: absolute !important;
  z-index: 15 !important;
  transition: all 0.3s ease !important;
}

/* Better responsive text sizing - ensure readability */
.hero-title {
  font-size: max(calc(var(--scale-factor) * 50px), 24px) !important;
}

.hero-subtitle {
  font-size: max(calc(var(--scale-factor) * 35px), 18px) !important;
}

.brand-name {
  font-size: max(calc(var(--scale-factor) * 54.87px), 20px) !important;
}

.contact-title {
  font-size: max(calc(var(--scale-factor) * 22.56px), 14px) !important;
}

.faq-text {
  font-size: max(calc(var(--scale-factor) * 29.89px), 16px) !important;
}

.student-name {
  font-size: max(calc(var(--scale-factor) * 40.47px), 18px) !important;
}

.student-course {
  font-size: max(calc(var(--scale-factor) * 29.89px), 16px) !important;
}

.review-text p {
  font-size: max(calc(var(--scale-factor) * 29.89px), 16px) !important;
}

/* Ensure buttons remain clickable with reasonable minimum sizes */
.hero-cta-button,
.menu-link,
.class-tab,
.subject-card {
  min-width: max(calc(var(--scale-factor) * 50px), 40px) !important;
  min-height: max(calc(var(--scale-factor) * 30px), 25px) !important;
}

/* Improved review carousel positioning */
.reviews-carousel {
  position: relative !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: calc(40px * var(--scale-factor)) !important;
}

/* Better arrow button positioning - relative to carousel container */
.arrow-btn {
  position: relative !important;
  z-index: 100 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  width: max(calc(var(--scale-factor) * 80.1px), 50px) !important;
  height: max(calc(var(--scale-factor) * 80.1px), 50px) !important;
  flex-shrink: 0 !important;
}

/* Remove fixed positioning that can push buttons off-screen */
.arrow-left {
  left: auto !important;
  right: auto !important;
}

.arrow-right {
  left: auto !important;
  right: auto !important;
}

/* Ensure review card maintains proper sizing */
.review-card {
  max-width: 100% !important;
  width: max(calc(var(--scale-factor) * 1385px), 300px) !important;
  height: auto !important;
  min-height: max(calc(var(--scale-factor) * 599px), 400px) !important;
  flex-shrink: 0 !important;
}

    /* Ensure review content scales properly */
    .review-content {
      width: 100% !important;
      height: auto !important;
      bottom: max(calc(var(--scale-factor) * 40px), 20px) !important;
    }

/* Ensure student photo scales properly */
.student-photo {
  width: max(calc(var(--scale-factor) * 237px), 80px) !important;
  height: max(calc(var(--scale-factor) * 237px), 80px) !important;
}

/* Ensure review star scales properly */
.review-star {
  width: max(calc(var(--scale-factor) * 131.57px), 60px) !important;
  height: max(calc(var(--scale-factor) * 131.57px), 60px) !important;
}

/* Mobile Menu Styles */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  flex-direction: column;
  gap: 4px;
  z-index: 1000;
}

.hamburger-line {
  width: 25px;
  height: 3px;
  background-color: #333;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 924px;
  height: 890.5830078125px;
  background-color: #FFFFFF;
  border-left: 2px solid #4F4CB0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 40px;
  box-sizing: border-box;
}

.mobile-menu-overlay.active .mobile-menu-container {
  opacity: 1;
  visibility: visible;
}

/* Hide search icon in mobile menu */
.mobile-menu-search {
  display: none !important;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E0E0E0;
}

.mobile-menu-title {
  font-family: 'Century Gothic', Arial, sans-serif;
  font-size: 32px;
  font-weight: 600;
  color: #4F4CB0;
  margin: 0;
}

.mobile-menu-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 32px;
  color: #666;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

.mobile-menu-close:hover {
  color: #4F4CB0;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 40px;
}

.mobile-menu-link {
  text-decoration: none;
  color: #333;
  font-family: 'Century Gothic', Arial, sans-serif;
  font-size: 24px;
  font-weight: 500;
  padding: 20px 0;
  border-bottom: 1px solid #E0E0E0;
  transition: color 0.3s ease;
}

.mobile-menu-link:hover {
  color: #4F4CB0;
}

.mobile-menu-search {
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E0E0E0;
}

.mobile-search-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-search-icon {
  width: 24px;
  height: 24px;
  color: #333;
}

.mobile-menu-contacts {
  margin-top: auto;
}

.mobile-phones {
  margin-bottom: 20px;
}

.mobile-phone {
  font-family: 'Century Gothic', Arial, sans-serif;
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
  display: block;
  text-decoration: none;
}

.mobile-email {
  font-family: 'Century Gothic', Arial, sans-serif;
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
}

/* Ensure email link looks like text (gray, no underline) */
.mobile-email a,
.mobile-email-link {
  color: #333 !important;
  text-decoration: none;
}

.mobile-socials {
  display: flex;
  gap: 15px;
}

.mobile-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transition: opacity 0.3s ease;
}

.mobile-social-link:hover {
  opacity: 0.7;
}

.mobile-social-icon {
  width: 100%;
  height: 100%;
}

/* Mobile Responsive Styles */
@media (max-width: 1024px) {
  /* Mobile header styling */
  .header {
    background: #FFFFFF;
  }
  
  /* Mobile logo and brand name styling */
  .brand-name {
    color: #4F4CB0;
  }
  
  /* Mobile logo styling - change SVG fill color */
  .logo svg {
    fill: #4F4CB0;
  }
  
  .logo svg path {
    fill: #4F4CB0;
  }
  
  .mobile-menu-toggle {
    display: flex;
  }
  
  .contacts-socials-container {
    display: none;
  }
  
  .navigation-menu {
    display: none;
  }
  
  /* Adjust body padding for mobile - only header is visible */
  body {
    padding-top: var(--header-height);
  }
  
  .mobile-menu-container {
    width: 100%;
    max-width: 400px;
    height: 100%;
  }
}

@media (max-width: 768px) {
  .mobile-menu-container {
    max-width: 100%;
  }
  
  .mobile-menu-title {
    font-size: 28px;
  }
  
  .mobile-menu-link {
    font-size: 20px;
    padding: 15px 0;
  }
  
  .mobile-phone,
  .mobile-email {
    font-size: 16px;
  }
}

/* Payment Options Modal Styles */
.payment-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3000;
    backdrop-filter: blur(5px);
}

.payment-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    border-radius: 25px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.payment-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 30px;
    color: #999;
    cursor: pointer;
    transition: color 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-modal-close:hover {
    color: #4F4CB0;
}

.payment-modal-content h3 {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: #4F4CB0;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.payment-modal-content p {
    font-family: 'Century Gothic', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #484848;
    margin: 0;
}

/* Mobile responsive for payment modals */
@media (max-width: 768px) {
    .payment-modal-content {
        padding: 30px 20px;
        margin: 20px;
    }
    
    .payment-modal-content h3 {
        font-size: 24px;
    }
    
    .payment-modal-content p {
        font-size: 16px;
    }
    
    .payment-modal-close {
        top: 10px;
        right: 15px;
        font-size: 24px;
    }
}


/* — базовая компоновка двух половин — */
.button-content{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    padding: 0 20px;
  }
  
  /* обе колонки занимают по 50% до ховера */
  .cta-text,
  .price-text{
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;                /* убрали отрицательные маргины */
    padding: 0;
  }
  /* расстояние между колонками в неактивном состоянии */
  .cta-text{ padding-right: calc(94px * var(--scale-factor)); }
  .price-text{ padding-left: calc(94px * var(--scale-factor)); white-space: nowrap; }
  /* на ховере центрируем, убирая внутренний отступ слева */
  .hero-cta-button:hover .cta-text{ padding-right: 0; }
  
  /* текст «Оставить заявку» — всегда в две строки */
  :root{ --cta-two-lines: 14ch; }      /* подгони 13–15ch по вкусу */
  .cta-text{
    color: #484848;
    font-size: calc(30px * var(--scale-factor));
    line-height: 1.18;
    white-space: normal;
    max-width: var(--cta-two-lines);   /* держим две строки */
    text-wrap: balance;                /* красиво балансирует перенос (хром/эдж) */
  }
  
  /* правая половина с ценой (как было) */
  .price-amount{ font-size: calc(28px * var(--scale-factor)); font-weight:700; margin-bottom: calc(2px * var(--scale-factor)); }
  .price-period{ font-size: calc(18px * var(--scale-factor)); }
  
  /* — поведение при ховере — */
  .hero-cta-button:hover{
    background: #fff;
    transform: scale(1.02);
  }
  
  /* сдвигаем «слайдер» вправо, как и было */
  .hero-cta-button:hover .button-slider{ transform: translateX(100%); }
  
  /* схлопываем правую колонку в ноль, чтобы она не занимала место */
  .hero-cta-button:hover .price-text{
    opacity: 0;
    flex-basis: 0;
    max-width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
  
  /* центрируем оставшийся текст и оставляем его в две строки */
  .hero-cta-button:hover .button-content{ justify-content: center; }
  .hero-cta-button:hover .cta-text{
    color: #4F4CB0;
    max-width: var(--cta-two-lines);   /* по-прежнему 2 строки */
  }
  
  
 /* ===== Full-bleed backgrounds + clamped content (≤1900px) ===== */
:root{
  --page-max: 1900px;
  --gutter: clamp(16px, 4vw, 80px);
}

/* 1) Секции — фуллблид (фон тянется на весь вьюпорт) */
:where(.hero-section,
       .new-section,
       .faq-section,
       .course-selection,
       .course-program,
       .reviews-section,
       .apply-button-section){
  max-width: none !important;
  width: 100vw !important;
  /* фуллблид даже если секция вложена в центрирующий контейнер */
  margin-inline: calc(50% - 50vw) !important;
  position: relative;      /* база для абсолютных фонов */
  overflow: hidden;        /* чтобы фоны не давали горизонтальный скролл */
}

/* 2) Внутренние контейнеры — не шире 1900px и по центру */
:where(.new-section-content,
       .course-container,
       .program-container,
       .reviews-container,
       .faq-container){
  max-width: var(--page-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--gutter) !important;
  box-sizing: border-box !important;
}

/* 3) Контент в .new-section — не распихивает грид */
.new-section-content{
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr) !important;
}
.new-section-left,
.new-section-right{ min-width: 0 !important; }

/* Левый список — тянется, но не шире 520 */
.payment-item{ width: 100% !important; max-width: 520px !important; }
.payment-item::after{ width: 100% !important; }

/* Фото справа — «резиновое» до 800px, сохраняем пропорции */
.photo-container{
  width: clamp(360px, 42vw, 800px) !important;
  aspect-ratio: 800 / 468 !important;
  height: auto !important;
  overflow: hidden !important;
}

/* 4) Фоны и градиенты остаются на всю секцию */
:where(.hero-background,
       .new-section-background,
       .new-section-gradient){
  position: absolute !important;
  inset: 0 !important;             /* растягиваем на весь фуллблид-секшен */
  z-index: 1;
}
:where(.new-section-content,
       .course-container,
       .program-container,
       .reviews-container,
       .faq-container){ z-index: 3; }

/* 5) Подстраховка от горизонтального скролла из-за 100vw и округлений */
html, body{ overflow-x: clip !important; }


/* ===== HEADER + HERO: full-bleed bg, clamped content (≤1900px) ===== */
:root{
    --page-max: 1900px;
    /* «безопасные» поля по краям, когда экран шире 1900 */
    --safe-gutter: max((100vw - var(--page-max)) / 2, 0px);
  }
  
  /* ───────── HEADER ───────── */
  /* фон шапки и меню — на 100vw */
  .header{ width:100vw !important; margin-inline: calc(50% - 50vw) !important; }
  .navigation-menu{ width:100vw !important; margin-inline: calc(50% - 50vw) !important; }
  
  /* внутренние контейнеры — не шире 1900 и по центру */
  .header-container,
  .menu-container{
    max-width: var(--page-max) !important;
    margin-inline: auto !important;
    padding-inline: clamp(16px,4vw,40px) !important;
    box-sizing: border-box !important;
  }
  

/* ===== HERO: горизонтальная коррекция без изменения вертикали ===== */
:root{
    --page-max: 1900px;                                       /* предел контента */
    --safe-gutter: max((100vw - var(--page-max)) / 2, 0px);   /* «коридор» слева/справа */
    --hero-pad-x: clamp(16px, 4vw, 64px);                     /* внутренние поля секции */
    --hero-gap: clamp(24px, 3.5vw, 80px);                     /* желаемый зазор по центру */
  
    --hero-left-min: 320px;   --hero-left-max: 820px;         /* рамки левого блока */
    --hero-right-min: 360px;  --hero-right-max: 640px;        /* рамки правого блока */
  }

  /* Правый элемент (тексты/кнопки): только горизонтальные ограничения */
.hero-content{
    /* ограничиваем ширину, чтобы не врезаться в левый блок */
    max-width: clamp(var(--hero-right-min), 32vw, var(--hero-right-max)) !important;
  
    /* сохраняем ваш исходный right, но не даём уйти за «безопасную» границу */
    right: max(calc(var(--safe-gutter) + var(--hero-pad-x)), var(--hero-content-right, 0px)) !important;
  
    /* вертикаль не меняем */
    z-index: 2;
  }


  
/* ===== Final mobile hardening to prevent overlaps and ensure fit ===== */
@media (max-width: 600px) {
    html, body { overflow-x: hidden !important; }

    /* Hero: stack and auto-size */
    .hero-section { height: auto !important; min-height: 0 !important; padding: 20px var(--gutter) !important; }
    .hero-background, .background-image { height: 100% !important; }
    .left-image-container { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; height: auto !important; margin: 0 auto 16px !important; }
    .left-image { width: 100% !important; height: auto !important; }
    .hero-content { position: relative !important; top: auto !important; right: auto !important; max-width: 100% !important; margin: 0 auto !important; text-align: center !important; }
    .hero-buttons { flex-direction: column !important; gap: 12px !important; }
    .hero-cta-button { width: 100% !important; max-width: none !important; }

    /* Subjects grid: 2 columns */
    .subjects-grid { max-width: none !important; gap: 16px !important; }
    .subject-card { width: calc(50% - 8px) !important; height: auto !important; aspect-ratio: 1 / 1 !important; }

    /* Course program: single column */
    .course-program { padding: 20px var(--gutter) !important; }
    .program-grid { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; }
    .program-card { min-height: auto !important; height: auto !important; }

    /* New section: stack */
    .new-section { height: auto !important; }
    .new-section-content { grid-template-columns: 1fr !important; }
    .payment-item { width: 100% !important; }
    .photo-container { width: 100% !important; aspect-ratio: 800 / 468 !important; height: auto !important; }

    /* Apply button */
    .apply-button-section { padding: 32px 20px !important; }
    .apply-button { width: 100% !important; max-width: 100% !important; }

    /* FAQ: auto heights */
    .faq-section { height: auto !important; }
    .faq-items { max-width: 100% !important; }
    .faq-item { width: 100% !important; }
    .faq-question { min-height: 56px !important; }
    .faq-answer { width: 100% !important; max-height: none !important; height: auto !important; margin-top: 8px !important; padding: 20px !important; overflow: visible !important; }

    /* Reviews: fluid */
    .reviews-section { padding: 20px var(--gutter) !important; }
    .review-card { width: 100% !important; min-height: 0 !important; height: auto !important; }
    .reviews-carousel { gap: 16px !important; }

    /* Application vs Footer: remove negative overlap, stack */
    .application-section { margin-bottom: 0 !important; padding-bottom: 20px !important; overflow: visible !important; }
    .application-container { flex-direction: column !important; gap: 24px !important; padding: 0 20px !important; }

    /* Footer & map */
    .footer-section { height: auto !important; }
    .map-container, .yandex-map { position: relative !important; top: auto !important; left: auto !important; transform: none !important; width: 100% !important; height: 360px !important; }
    .contact-info-card { position: relative !important; top: auto !important; left: auto !important; transform: none !important; width: calc(100% - 40px) !important; height: auto !important; margin: 16px auto 0 !important; }
}

@media (max-width: 420px) {
    /* Subjects: single column */
    .subject-card { width: 100% !important; max-width: none !important; }

    /* Tighter hero text if needed */
    .hero-title { font-size: 24px !important; }
    .hero-subtitle { font-size: 18px !important; }
    .cta-text { font-size: calc(26px * var(--scale-factor)) !important; }
    .price-amount { font-size: calc(24px * var(--scale-factor)) !important; }
    .price-period { font-size: calc(16px * var(--scale-factor)) !important; }

    .mobile-menu-container { max-width: 100% !important; }
}

/* =========================
   MOBILE HEADER (<= 768px)
   full-width bar, auto scaling, safe-area support
   ========================= */
   @media (max-width: 768px){

    :root{
      --m-header-h: clamp(64px, 16vw, 141px);      /* итоговая высота шапки */
      --m-pad-x: max(env(safe-area-inset-left), clamp(12px, 4vw, 24px));
      --m-gap: clamp(8px, 3vw, 16px);
      --m-brand-fs: clamp(18px, 6vw, 28px);        /* размер #PRE.UNECON */
      --m-icon-w: clamp(44px, 16vw, 64px);         /* ширина области кнопки меню */
    }
  
    /* Полоса шапки (фон на всю ширину, тень, фикс сверху) */
    .header{
      position: sticky;
      top: 0;
      z-index: 1000;
      width: 100vw !important;
      margin-inline: calc(50% - 50vw) !important;
      height: var(--m-header-h);
      background: #FFFFFF;
      box-shadow: 0 4px 25px 0 #00000040;
    }
  
    /* Внутренний контейнер — трёхколоночная сетка: лого | текст | бургер */
    .header-container{
      max-width: none !important;
      height: 100%;
      padding-inline: var(--m-pad-x);
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      column-gap: var(--m-gap);
      box-sizing: border-box;
    }
  
    /* ЛОГО (svg/png). Ограничиваем по высоте шапки, ширина — авто */
    .header .logo,
    .header-logo,
    .brand-logo{
      display: block;
      height: min(75px, calc(var(--m-header-h) * 0.56));
      width: auto;
      background-image: url('images/лого моб.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
    /* Если логотип внутри <img> */
    .header img[src*="лого моб.png"]{
      height: inherit;
      width: auto;
      display: block;
    }
  
    /* Текст #PRE.UNECON */
    .brand,
    .brand-title,
    .logo-text,
    .header-title,
    .site-title,
    .header-logo-text{
      font-family: "Century Gothic", Arial, sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      color: #4F4CB0;
      font-size: var(--m-brand-fs);
      line-height: 1.12;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  
    /* Кнопка меню (бургер). Показываем только её, скрываем десктоп-навигацию */
    .burger,
    .burger-btn,
    .hamburger{
      display: grid !important;
      place-items: center;
      width: var(--m-icon-w);
      height: var(--m-header-h);
      margin-right: max(env(safe-area-inset-right), 0px);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
  
    /* если иконка построена на span-линиях — масштабируем их */
    .burger span, .burger-btn span, .hamburger span{
      display: block;
      width: min(28px, calc(var(--m-icon-w) * 0.6));
      height: 3px;
      background: #4F4CB0;
      border-radius: 2px;
    }
    .burger span + span,
    .burger-btn span + span,
    .hamburger span + span{ margin-top: 5px; }
  
    /* Десктопные меню прячем на мобиле */
    .navigation-menu,
    .menu-container,
    .menu-list,
    .desktop-nav,
    .menu-links{ display: none !important; }
  }
  

  /* =========================
   MOBILE HEADER — FIXED & CONSISTENT (<= 768px)
   - без белой полосы сверху (safe-area)
   - лого корректно рендерится
   - текст не налезает на кнопку меню
   - одинаково на разных телефонах
   ========================= */

@media (max-width: 768px){
    :root{
      --m-header-h: clamp(72px, 18vw, 141px);     /* итоговая высота шапки */
      --m-pad-x: clamp(12px, 4vw, 24px);          /* горизонтальные поля */
      --m-gap: clamp(8px, 3vw, 16px);             /* зазор между зонами */
      --m-brand-fs: clamp(18px, 6vw, 28px);       /* размер #PRE.UNECON */
      --m-icon-w: clamp(48px, 14vw, 64px);        /* зона бургер-меню */
    }
  
    /* Убираем возможный «белый отступ» браузера */
    html, body{ margin: 0; padding: 0; overflow-x: clip; background: #fff; }
  
    /* Полоса шапки: full width, без артефактов сверху */
    .header{
      position: sticky;
      top: 0;
      z-index: 1000;
      width: 100%;                 /* вместо 100vw — без горизонтального сдвига */
      height: calc(var(--m-header-h) + env(safe-area-inset-top, 0px));
      padding-top: env(safe-area-inset-top, 0px); /* заливаем область выреза */
      background: #FFFFFF;
      box-shadow: 0 4px 25px 0 #00000040;
      transform: translateZ(0);     /* анти-1px-щель на некоторых вебвью */
    }
  
    /* Внутри — трёхколоночная сетка: лого | текст | бургер */
    .header-container{
      height: var(--m-header-h);
      max-width: none !important;
      padding-inline: var(--m-pad-x);
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto; /* центр растяжим, без переполнения */
      align-items: center;
      column-gap: var(--m-gap);
      box-sizing: border-box;
    }
  
    /* Текст #PRE.UNECON — не переносится и не наезжает, обрезается троеточием */
    .brand,
    .brand-title,
    .logo-text,
    .header-title,
    .site-title,
    .header-logo-text{
      font-family: "Century Gothic", Arial, sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      color: #4F4CB0;
      font-size: var(--m-brand-fs);
      line-height: 1.12;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0; /* позволяет ellipsis в колонке minmax(0,1fr) */
    }
  
    /* Бургер-кнопка — фиксированная зона справа */
    .burger, .burger-btn, .hamburger{
      display: grid !important;
      place-items: center;
      width: var(--m-icon-w);
      height: var(--m-header-h);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .burger span, .burger-btn span, .hamburger span{
      display:block;
      width: min(28px, calc(var(--m-icon-w) * 0.6));
      height: 3px;
      background:#4F4CB0;
      border-radius: 2px;
    }
    .burger span+span, .burger-btn span+span, .hamburger span+span{ margin-top:5px; }
  
    /* Прячем любые десктоп-меню в мобильном режиме */
    .navigation-menu, .menu-container, .menu-list, .desktop-nav, .menu-links{
      display: none !important;
    }
  }
  
  @media (max-width: 768px) {
    .subject-card {
        width: 100% !important;
        height: 160px !important;
        max-width: 782px !important;
        border-radius: 33px !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        overflow: hidden !important;
        opacity: 1 !important;
    }

    .subject-card .card-pattern { display: none !important; }

    .subjects-grid .subject-card:nth-child(1)  { background-image: url('images/mobile/Русский.png') !important; }
    .subjects-grid .subject-card:nth-child(2)  { background-image: url('images/mobile/Математика.png') !important; }
    .subjects-grid .subject-card:nth-child(3)  { background-image: url('images/mobile/Обществознание .png') !important; }
    .subjects-grid .subject-card:nth-child(4)  { background-image: url('images/mobile/Английский.png') !important; }
    .subjects-grid .subject-card:nth-child(5)  { background-image: url('images/mobile/История.png') !important; }
    .subjects-grid .subject-card:nth-child(6)  { background-image: url('images/mobile/Информатика.png') !important; }
    .subjects-grid .subject-card:nth-child(7)  { background-image: url('images/mobile/Комплекс.png') !important; }
    .subjects-grid .subject-card:nth-child(8)  { background-image: url('images/mobile/Экономика.png') !important; }
    .subjects-grid .subject-card:nth-child(9)  { background-image: url('images/mobile/Олимпиада Вернадского.png') !important; }
    .subjects-grid .subject-card:nth-child(10) { background-image: url('images/mobile/Олимпиада Кондратьева.png') !important; }

    .subject-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}
  
  @media (max-width: 768px) {
    /* Плашка со сроком и ценой внизу каждой карточки (мобайл) */
    .subjects-grid .subject-card { position: relative !important; }
    .subjects-grid .subject-card::after {
      content: '6 месяцев\Aот 3 300 руб/мес'; /* базовое значение */
      white-space: pre-line;
      position: absolute;
      left: 60px;  /* из макета ~59.98px */
      bottom: 18px;
      width: 593px; /* из макета ~592.84px */
      color: #FFFFFF;
      font-family: 'Century Gothic', Arial, sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 1.3;
      letter-spacing: 0;
      text-align: left;
      text-shadow: 0 2px 8px rgba(0,0,0,.35);
      pointer-events: none;
    }

    /* Олимпиадные карточки с другими условиями */
    .subjects-grid .subject-card:nth-child(8)::after { content: '6 месяцев\Aот 4 000 руб/мес'; }
    .subjects-grid .subject-card:nth-child(9)::after { content: 'март 2026 г.\A5 200 руб'; }
    .subjects-grid .subject-card:nth-child(10)::after { content: 'март 2026 г.\A5 200 руб'; }
  }
  
  @media (max-width: 768px) {
    /* Чуть левее и ниже позиция плашки срока и цены */
    .subjects-grid .subject-card::after {
      left: 25px;
      bottom: 12px;
    }
}
  
  /* Disable fixed mobile overlay price to show dynamic DOM price */
  @media (max-width: 768px) {
    .subjects-grid .subject-card::after {
      content: none !important;
    }
  }
  
  /* Mobile: show dynamic duration and price from DOM at bottom of card */
  @media (max-width: 768px) {
    .subjects-grid .subject-card .card-info {
      position: absolute !important;
      left: 26px !important;
      bottom: 12px !important;
      opacity: 1 !important;
      background: transparent !important;
      padding: 0 !important;
      z-index: 3 !important;
      text-align: left !important;
      justify-content: flex-start !important;
      align-items: flex-start !important;
    }
  }
    .subjects-grid .subject-card .card-info-text,
    .subjects-grid .subject-card .card-info-price {
      font-size: 16px !important;
      line-height: 1.3 !important;
      color: #FFFFFF !important;
      text-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
    }
    /* Ensure content layer stays below price */
    .subjects-grid .subject-card .card-content {
      z-index: 1 !important;
    }
  
  @media (max-width: 768px) {
    /* PAYMENT BUTTONS (mobile): 3 сверху, 2 снизу; без линий; обводка */
    .payment-options {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 10px !important;
      justify-items: start !important;    /* элементы от левого края ячейки */
      align-items: center !important;
      justify-content: start !important;  /* сетка от левого края секции */
      grid-auto-rows: minmax(73px, auto) !important;   /* строки растут под контент */
      margin-top: clamp(16px, 4vw, 32px) !important; /* отступ сверху */
    }

    .payment-item {
      width: 100% !important;
      max-width: 384px !important;
      height: auto !important;            /* высота под контент */
      min-height: 73px !important;        /* не ниже базовой */
      padding: 1px 1px !important;     /* небольшой внутренний отступ для текста */
      border-radius: 20px !important;
      border: 2px solid #FFFFFF !important; /* тоньше границы */
      background: transparent !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-sizing: border-box !important;
      min-width: 0 !important;            /* чтобы текст мог переноситься */
    }

    /* Убираем линии между пунктами */
    .payment-item::after { display: none !important; }

    .payment-text {
      color: #FFFFFF !important;
      font-family: 'Century Gothic', Arial, sans-serif !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
      font-size: clamp(12px, 3.2vw, 16px) !important; /* поменьше, чтобы всегда влезало */
      line-height: 1.12 !important;
      text-align: center !important;
      width: 100% !important;
      padding: 0 4px !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important; /* разрешаем перенос длинных слов */
      word-break: break-word !important;            /* красивый перенос где поддерживается */                 /* перенос по слогам при поддержке */
    }

    /* Раскладка: три сверху, две снизу; всё начинается от левого края */
    .payment-options .payment-item:nth-child(4) { grid-column: 1; justify-self: start; }
    .payment-options .payment-item:nth-child(5) { grid-column: 2; justify-self: start; }
  }
  


    /* ===== Footer contact card: full-bleed band like map on mobile ===== */
    @media (max-width: 768px){
        .footer-section{ width: 100% !important; max-width: 100% !important; overflow: hidden !important; }
        /* Make mobile footer full height (taller) */
        .map-container, .yandex-map{ height: 360px !important; margin: 0 !important; }
        .contact-info-card{ 
          position: relative !important;
          top: auto !important; left: auto !important; transform: none !important;
          width: 100vw !important; max-width: none !important;
          margin-inline: calc(50% - 50vw) !important; /* full-bleed */
          height: 360px !important; /* same as map */
          border-radius: 0 !important;
          padding: 20px !important; margin-top: 0 !important;
          display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important;
          box-sizing: border-box !important; z-index: 2 !important;
        }
        .contact-details, .contact-title{ width: 100% !important; text-align: left !important; }
        .contact-title{ margin-left: 20px !important; }
        .contact-details{ padding: 0 20px !important; }
        .social-links{ justify-content: flex-start !important; }
      }
    
      @media (max-width: 320px){
        .application-title{ font-size: 20px !important; }
        .application-description{ font-size: 16px !important; }
        .application-form{ max-width: 320px !important; gap: 12px !important; }
        .form-field{ height: 50px !important; }
        .form-field input{ font-size: 15px !important; border-radius: 14px !important; }
        .application-submit-btn{ max-width: 300px !important; height: 50px !important; font-size: 16px !important; }
        .application-disclaimer,
        .application-disclaimer-non-interactive{ font-size: 12px !important; }
      }

/* =============================
   FIX: Remove gap after Application section
   Cause: empty .main-content reserves space (min-height:100vh + CIS 1000px) and
          .application-section relies on negative margin to overlap next block.
   Solution: neutralize placeholder sizing and negative overlap universally.
   ============================= */
.main-content,
.main-content:empty{
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
}

.application-section{
    margin-bottom: 0 !important;
    padding-bottom: 40px !important;
}

.footer-section{
    margin-top: 0 !important;
}

/* =========================
   MOBILE FOOTER CONTACT STRIP — shrink height
   (вставить в самый низ CSS)
   ========================= */
@media (max-width: 768px){
  /* уменьшаем высоту блока с картой */
  .map-section,
  .footer-section{
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .map-section .map-container,
  .map-section .yandex-map{
    position: relative !important;
    display: block !important;
    height: clamp(180px, 32vh, 240px) !important; /* было ~300px */
    margin: 0 !important;
  }

  /* карточка с контактами — компактная и авто-высоты */
  .contact-info-card{
    position: absolute;        /* остаётся поверх карты */
    bottom: max(env(safe-area-inset-bottom, 0px), 0px) !important; /* убрать белую щель снизу */
    left: clamp(8px, 4vw, 16px);
    right: auto;
    width: min(92%, 420px);
    padding: clamp(10px, 3.5vw, 16px) !important;

    height: auto !important;   /* вместо фиксированных значений */
    min-height: unset !important;
    max-height: none !important;

    box-sizing: border-box !important;
    margin: 0 !important; /* гарантируем отсутствие внешних отступов */
    padding-bottom: 0 !important; /* переносим нижний отступ на блок соц.иконок */
  }

  /* Группа иконок: смещение вправо и симметричные вертикальные отступы */
  .contact-info-card .social-links{
    margin-left: clamp(8px, 4vw, 16px) !important;
    margin-top: clamp(32px, 3.5vw, 20px) !important;
    margin-bottom: clamp(12px, 3.5vw, 20px) !important;
    align-items: center !important;
  }

}

/* =========================
   FINAL OVERRIDE: FAQ mobile — collapse inactive answers
   Ensures no extra gaps between items on small screens
   ========================= */
@media (max-width: 768px){
  .faq-item:not(.active) .faq-answer{
    opacity: 0 !important;
    visibility: hidden !important;
    max-height: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}