:root{
  --bg:#F5F1EB;
  --bg-soft:#DFD8C7;
  --card:#ffffff;
  --navy:#003548;
  --navy-2:#002633;
  --text:#22323A;
  --muted:#68757B;
  --accent:#4B8881;
  --accent-2:#207286;
  --warm:#F79137;
  --warm-soft:#FCBC7E;
  --line:rgba(0,53,72,.10);
  --shadow:0 18px 42px rgba(0,53,72,.12);
  --shadow-soft:0 12px 30px rgba(0,53,72,.08);
  --radius-xl:32px;
  --radius-lg:26px;
  --radius-md:18px;
  --max:1220px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Mulish",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(213,230,235,.42), transparent 25%),
    radial-gradient(circle at top right, rgba(233,244,229,.52), transparent 22%),
    linear-gradient(180deg, #F5F1EB 0%, #FAF8F4 36%, #ffffff 100%);
}

a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

.container{
  width:min(var(--max), calc(100% - 32px));
  margin:0 auto;
}

/* Header */
.topbar{
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter:blur(14px);
  background:rgba(245,241,235,.84);
  border-bottom:1px solid rgba(0,53,72,.08);
}

.topbar__inner{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--navy);
  font-weight:800;
}

.brand__mark{
  width:48px;
  height:48px;
  border-radius:14px;
  background:linear-gradient(145deg, var(--navy), var(--accent-2));
  box-shadow:0 10px 24px rgba(0,53,72,.22);
  position:relative;
}

.brand__mark::before,
.brand__mark::after{
  content:"";
  position:absolute;
  border:2px solid var(--warm-soft);
  border-top-color:transparent;
  border-left-color:transparent;
  transform:rotate(45deg);
  border-radius:3px;
}

.brand__mark::before{width:16px;height:16px;left:9px;top:11px}
.brand__mark::after{width:10px;height:18px;right:8px;top:10px}

.brand__text{line-height:1.05}
.brand__text span{
  display:block;
  font-size:13px;
  font-weight:600;
  opacity:.78;
}
.brand__text strong{
  display:block;
  font-size:16px;
}

.nav{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
  justify-content:center;
}

.nav a{
  color:var(--navy);
  font-weight:600;
  font-size:14px;
  position:relative;
  padding:8px 0;
}

.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:2px;
  width:100%;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--warm-soft), var(--warm));
  transform:scaleX(0);
  transform-origin:center;
  transition:.22s ease;
}

.nav a:hover::after{transform:scaleX(1)}

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:none;
  cursor:pointer;
  white-space:nowrap;
  border-radius:999px;
  padding:13px 18px;
  font-weight:800;
  font-family:inherit;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease;
}

.btn:hover{transform:translateY(-2px)}

.btn--primary{
  background:linear-gradient(180deg, #0B4A5E, var(--navy));
  color:#fff;
  box-shadow:0 12px 24px rgba(0,53,72,.24);
}

.btn--navy{
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#fff;
  box-shadow:0 12px 24px rgba(32,114,134,.20);
}

.btn--ghost{
  background:rgba(255,255,255,.88);
  color:var(--navy);
  border:1px solid var(--line);
  box-shadow:0 10px 22px rgba(0,53,72,.06);
}

.btn--ghost:hover{background:#fff}

/* Layout */
.home-wrap{padding:18px 0 36px}
section.block{padding:28px 0 36px}

.section-head{
  text-align:center;
  margin-bottom:22px;
}

.section-head h2{
  margin:0 0 10px;
  color:var(--navy);
  font-size:clamp(28px, 3vw, 42px);
  line-height:1.08;
  letter-spacing:-.03em;
}

.section-head p{
  margin:0 auto;
  max-width:820px;
  color:var(--muted);
  line-height:1.65;
  font-size:16px;
}

/* Hero */
.hero{padding:22px 0 48px}

.hero-lux{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:24px;
  align-items:stretch;
}

.browser-frame{
  height:100%;
  display:flex;
  flex-direction:column;
  border-radius:32px;
  overflow:hidden;
  box-shadow:0 24px 55px rgba(0,53,72,.14);
  background:linear-gradient(135deg, #002633 0%, #003548 58%, #207286 100%);
  border:1px solid rgba(255,255,255,.08);
}

.browser-top{
  height:22px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 14px;
  background:rgba(0,0,0,.16);
}

.browser-dot{
  width:10px;
  height:10px;
  border-radius:50%;
}
.browser-dot.red{background:#ff6b5f}
.browser-dot.yellow{background:#ffbf49}
.browser-dot.green{background:#5ed06b}

.browser-inner{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:18px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.08), transparent 20%),
    radial-gradient(circle at 80% 14%, rgba(255,255,255,.05), transparent 18%),
    linear-gradient(135deg, rgba(0,38,51,.97), rgba(0,53,72,.94));
}

.mini-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  margin-bottom:20px;
}

.mini-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-weight:800;
  font-size:14px;
}

.mini-brand .mark{
  width:36px;
  height:36px;
  border-radius:11px;
  background:linear-gradient(145deg, #003548, #207286);
  position:relative;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.mini-brand .mark::before,
.mini-brand .mark::after{
  content:"";
  position:absolute;
  border:2px solid #FCBC7E;
  border-top-color:transparent;
  border-left-color:transparent;
  transform:rotate(45deg);
  border-radius:3px;
}

.mini-brand .mark::before{width:13px;height:13px;left:7px;top:9px}
.mini-brand .mark::after{width:8px;height:15px;right:7px;top:8px}

.mini-links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.86);
  font-size:13px;
  font-weight:600;
}

.hero-copy{
  color:#fff;
  padding:8px 4px 0;
  display:flex;
  flex-direction:column;
  flex:1;
}

.hero-copy h1{
  margin:0 0 14px;
  font-size:clamp(34px, 4.4vw, 48px);
  line-height:1.02;
  letter-spacing:-.04em;
  text-wrap:balance;
}

.hero-copy p{
  margin:0 0 20px;
  color:rgba(255,255,255,.84);
  font-size:17px;
  line-height:1.6;
  max-width:560px;
}

.hero-actions2{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.stat-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.stat-card{
  border-radius:18px;
  padding:14px 14px 13px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
}

.stat-card strong{
  display:block;
  color:#fff;
  font-size:20px;
  margin-bottom:4px;
  line-height:1.15;
}

.stat-card span{
  display:block;
  color:rgba(255,255,255,.76);
  font-size:13px;
  line-height:1.45;
}

.hero-traits{
  margin-top:14px;
  padding:16px;
  border-radius:22px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
}

.hero-traits__head{
  color:#fff;
  font-weight:800;
  margin-bottom:10px;
  font-size:17px;
}

.hero-traits__grid{
  display:grid;
  gap:8px;
}

.hero-trait{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
}

.hero-trait__ico{
  width:38px;
  height:38px;
  border-radius:12px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(75,136,129,.18), rgba(75,136,129,.08));
  color:#fff;
  font-weight:900;
}

.hero-trait strong{
  display:block;
  color:#fff;
  font-size:13px;
  margin-bottom:3px;
}

.hero-trait span{
  display:block;
  color:rgba(255,255,255,.76);
  font-size:12px;
  line-height:1.4;
}

.hero-bottom-card{
  margin-top:14px;
  padding:16px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.12);
}

.hero-bottom-card strong{
  display:block;
  color:#fff;
  font-size:15px;
  margin-bottom:6px;
}

.hero-bottom-card span{
  display:block;
  color:rgba(255,255,255,.76);
  line-height:1.5;
  font-size:13px;
}

.sidebar-stack{
  display:grid;
  gap:18px;
}

.feature-stack,
.right-gallery{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(0,53,72,.10);
  border-radius:28px;
  box-shadow:0 16px 35px rgba(0,53,72,.08);
  padding:18px;
}

.feature-mini-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.mini-feature{
  background:#fff;
  border-radius:18px;
  padding:14px 12px;
  border:1px solid rgba(0,53,72,.10);
  box-shadow:0 10px 24px rgba(0,53,72,.05);
  min-height:140px;
}

.mini-feature .ico{
  width:50px;
  height:50px;
  border-radius:18px;
  display:grid;
  place-items:center;
  margin-bottom:10px;
  background:linear-gradient(180deg, rgba(75,136,129,.12), rgba(75,136,129,.06));
  border:1px solid rgba(75,136,129,.18);
  color:var(--accent);
  font-size:22px;
}

.mini-feature h3{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.15;
  color:var(--navy);
}

.mini-feature p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

.right-gallery h2{
  margin:0 0 14px;
  text-align:center;
  color:var(--navy);
  font-size:28px;
  line-height:1.08;
  letter-spacing:-.03em;
}

.right-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.rbox{
  min-height:128px;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 12px 26px rgba(15,39,71,.10);
}

.rbox::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.16), transparent 18%),
    radial-gradient(circle at 76% 28%, rgba(255,255,255,.10), transparent 16%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.08));
}

.rbox::after{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  color:#fff;
  font-weight:700;
  font-size:13px;
  text-shadow:0 2px 10px rgba(0,0,0,.22);
}

.r1{background-image:url("img/rbox-r1.jpeg")}
.r2{background-image:url("img/luch.png")}
.r3{background-image:url("img/ucheb.jpeg")}
.r4{background-image:url("img/pedsostav.jpeg")}
.r5{background-image:url("img/nomera.jpeg")}
.r6{background-image:url("img/vsyasemya.jpeg")}

.r1::after{content:"Актовый зал"}
.r2::after{content:"С учителем"}
.r3::after{content:"Учебный процесс"}
.r4::after{content:"Наш педсостав"}
.r5::after{content:"Выступления"}
.r6::after{content:"Школа - праздник"}

.cta-polish{
  margin-top:18px;
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(90deg, rgba(0,38,51,.96), rgba(0,53,72,.92), rgba(32,114,134,.80));
  color:#fff;
  box-shadow:0 18px 42px rgba(0,53,72,.12);
  position:relative;
}

.cta-polish::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.10), transparent 20%),
    radial-gradient(circle at 20% 70%, rgba(255,255,255,.08), transparent 16%);
}

.cta-polish-inner{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:22px;
  align-items:center;
  padding:28px;
}

.doc-photo{
  min-height:220px;
  border-radius:22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.05)),
    linear-gradient(135deg, rgba(0,0,0,.08), rgba(0,0,0,.02)),
    url("img/XL.webp") center/cover no-repeat;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}

.doc-photo::before{
  content:"2026/2027";
  position:absolute;
  left:18px;
  top:18px;
  color:#fff;
  font-weight:900;
  font-size:11px;
  letter-spacing:.12em;
  background:rgba(0,53,72,.6);
  padding:8px 10px;
  border-radius:10px;
}

.doc-photo::after{
  content:"";
  position:absolute;
  width:220px;
  height:280px;
  right:10px;
  bottom:-64px;
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.06)),
    url("img/diplom.jpg") center/cover no-repeat;
  box-shadow:0 20px 50px rgba(0,0,0,.2);
  transform:rotate(12deg);
}

/* Audience cards */
.audience-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.audience-card{
  background:rgba(255,255,255,.90);
  border:1px solid rgba(0,53,72,.08);
  border-radius:28px;
  padding:26px;
  box-shadow:0 14px 32px rgba(0,53,72,.08);
  position:relative;
  overflow:hidden;
}

.audience-card::before{
  content:"";
  position:absolute;
  inset:auto -40px -40px auto;
  width:180px;
  height:180px;
  border-radius:50%;
  opacity:.08;
  background:var(--accent);
}

.audience-card--parent::before{
  background:var(--warm);
}

.audience-card__top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
  position:relative;
  z-index:1;
}

.audience-card__icon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(75,136,129,.12), rgba(75,136,129,.06));
  border:1px solid rgba(75,136,129,.18);
  color:var(--accent);
  font-size:22px;
  font-weight:900;
  flex:0 0 auto;
}

.audience-card h3{
  margin:0;
  color:var(--navy);
  font-size:24px;
  line-height:1.15;
}

.audience-card p{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.65;
  position:relative;
  z-index:1;
}

.audience-card ul{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:8px;
  color:var(--navy);
  line-height:1.55;
  position:relative;
  z-index:1;
}

.audience-card li::marker{
  color:var(--warm);
}

/* Panels / features */
.features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.feature{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(0,53,72,.08);
  border-radius:24px;
  padding:22px;
  box-shadow:var(--shadow-soft);
  min-height:160px;
}

.feature__icon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:var(--accent);
  background:linear-gradient(180deg, rgba(75,136,129,.12), rgba(75,136,129,.06));
  border:1px solid rgba(75,136,129,.18);
  margin-bottom:14px;
  font-size:24px;
}

.feature h3{
  margin:0 0 10px;
  color:var(--navy);
  font-size:20px;
  line-height:1.15;
}

.feature p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
  font-size:15px;
}

.split{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:24px;
  align-items:stretch;
}

.panel{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(0,53,72,.08);
  border-radius:28px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.panel__inner{padding:28px}

.panel__title{
  margin:0 0 12px;
  color:var(--navy);
  font-size:30px;
  line-height:1.1;
  letter-spacing:-.02em;
}

.panel__text{
  margin:0 0 18px;
  color:var(--muted);
  line-height:1.7;
  font-size:16px;
}

.bullets{
  display:grid;
  gap:12px;
  margin-top:16px;
}

.bullet{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(180deg, #fff, rgba(255,255,255,.72));
  border:1px solid rgba(0,53,72,.08);
}

.bullet__mark{
  width:12px;
  height:12px;
  border-radius:50%;
  margin-top:5px;
  background:linear-gradient(180deg, var(--warm-soft), var(--warm));
  box-shadow:0 0 0 6px rgba(247,145,55,.12);
  flex:0 0 auto;
}

.bullet strong{
  display:block;
  color:var(--navy);
  margin-bottom:3px;
}

.bullet span{
  display:block;
  color:var(--muted);
  line-height:1.55;
  font-size:14px;
}

.photo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.photo-slot{
  min-height:160px;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 12px 28px rgba(15,39,71,.12);
}

.photo-slot::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.18), transparent 18%),
    radial-gradient(circle at 76% 28%, rgba(255,255,255,.10), transparent 16%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.08));
}

.photo-slot__label{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  color:#fff;
  font-weight:700;
  font-size:13px;
  text-shadow:0 2px 12px rgba(0,0,0,.28);
}

.photo-slot--light{
  background:linear-gradient(135deg, #fff, #dceef8);
}
.photo-slot--light .photo-slot__label{color:var(--navy)}

.p1{background-image:url("img/class1.webp")}
.p2{background-image:url("img/class2.webp")}
.p3{background-image:url("img/class3.webp")}
.p4{background-image:url("img/class4.webp")}
.p5{background-image:url("img/class5.webp")}
.p6{background-image:url("img/class6.webp")}

/* Programs */
.programs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.program{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(0,53,72,.08);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 14px 32px rgba(15,39,71,.06);
  display:flex;
  flex-direction:column;
}

.program__img{
  min-height:220px;
  border-radius:18px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.prog1{background-image:url("img/oge-ege.webp")}
.prog2{background-image:url("img/summer-club.webp")}
.prog3{background-image:url("img/neuro.webp")}
.prog4{background-image:url("img/ovz.webp")}
.prog5{background-image:url("img/school-study.webp")}
.prog6{background-image:url("img/individual.webp")}

.program__body{padding:18px}

.program h3{
  margin:0 0 8px;
  color:var(--navy);
  font-size:22px;
}

.program p{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.6;
}

.program ul{
  margin:0;
  padding-left:18px;
  color:var(--navy);
  line-height:1.7;
}

/* CTA */
.cta{
  padding:10px 0 34px;
}

.cta__box{
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(90deg, rgba(0,38,51,.96), rgba(0,53,72,.92), rgba(32,114,134,.80));
  color:#fff;
  box-shadow:var(--shadow);
  position:relative;
}

.cta__box::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 80% 32%, rgba(255,255,255,.10), transparent 18%),
    radial-gradient(circle at 20% 72%, rgba(255,255,255,.08), transparent 18%);
}

.cta__inner{
  position:relative;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
  align-items:center;
  padding:28px;
}

.cta h2{
  margin:0 0 10px;
  font-size:clamp(28px, 3vw, 40px);
  line-height:1.08;
  text-wrap:balance;
}

.cta p{
  margin:0 0 18px;
  color:rgba(255,255,255,.84);
  line-height:1.65;
  max-width:620px;
}

.cta__media{
  min-height:260px;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.12)),
    url("img/new-school.webp") center/cover no-repeat;
  overflow:hidden;
}

/* Testimonials */
.testimonial-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.arrow-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(0,53,72,.10);
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.92);
  color:var(--navy);
  box-shadow:0 10px 22px rgba(0,53,72,.08);
}

.testimonials{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.quote{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,53,72,.08);
  border-radius:22px;
  box-shadow:0 14px 30px rgba(15,39,71,.06);
  padding:20px;
  min-height:220px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.quote p{
  margin:0;
  color:var(--navy);
  line-height:1.65;
}

.quote__author{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:auto;
}

.avatar{
  width:72px;
  height:72px;
  border-radius:16px;
  object-fit:cover;
  display:block;
  border:2px solid rgba(75,136,129,.22);
  box-shadow:0 8px 20px rgba(15,39,71,.12);
  flex:0 0 auto;
}

.quote__who strong{
  display:block;
  color:var(--navy);
  margin-bottom:2px;
}

.quote__who span{
  display:block;
  color:var(--muted);
  font-size:14px;
}

/* News */
.list-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

.list-card{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(0,53,72,.08);
  border-radius:22px;
  padding:20px;
  box-shadow:0 12px 28px rgba(15,39,71,.06);
}

.list-card h3{
  margin:0 0 8px;
  color:var(--navy);
  font-size:21px;
}

.list-card p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.list-card .meta{
  margin-top:12px;
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(247,145,55,.12);
  color:#9B520C;
  font-weight:700;
  font-size:13px;
}

.news{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
}

.news-card{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(0,53,72,.08);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 14px 35px rgba(15,39,71,.06);
  display:flex;
  flex-direction:column;
}

.news-card__cover{
  height:210px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
}

.news-card__cover::after{
  content:"Новый набор";
  position:absolute;
  left:18px;
  bottom:18px;
  color:#fff;
  font-weight:800;
  font-size:14px;
  text-shadow:0 2px 12px rgba(0,0,0,.28);
}

.news-cover-1{
  background-image:
    linear-gradient(135deg, rgba(0,53,72,.45), rgba(0,53,72,.20)),
    url("img/news1.webp");
}

.news-card__body{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.news-card__body h3{
  margin:0;
  color:var(--navy);
  font-size:22px;
  line-height:1.15;
}

.news-card__body p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
}

.news-list{
  display:grid;
  gap:14px;
}

.news-mini{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(0,53,72,.08);
  border-radius:22px;
  padding:16px;
  display:grid;
  gap:8px;
  box-shadow:0 14px 35px rgba(15,39,71,.05);
}

.news-mini span{
  color:var(--warm);
  font-weight:800;
  font-size:13px;
}

.news-mini strong{
  color:var(--navy);
  font-size:18px;
  line-height:1.2;
}

.news-mini p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

/* Contacts */
.contacts{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:18px;
}

.contact-box{
  background:linear-gradient(180deg, #fff, rgba(255,255,255,.90));
  border:1px solid rgba(0,53,72,.08);
  border-radius:28px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.contact-box__inner{padding:26px}

.contact-grid{
  display:grid;
  gap:14px;
  margin-top:16px;
}

.contact-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:16px;
  border-radius:18px;
  background:rgba(0,53,72,.03);
  border:1px solid rgba(0,53,72,.06);
}

.contact-item__ico{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(75,136,129,.16), rgba(75,136,129,.08));
  color:var(--accent);
  font-weight:900;
  flex:0 0 auto;
}

.contact-item strong{
  display:block;
  color:var(--navy);
  margin-bottom:4px;
}

.contact-item span,
.contact-item a{
  color:var(--muted);
  line-height:1.5;
}

.contact-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.map-slot{
  min-height:240px;
  border-radius:20px;
  overflow:hidden;
  background:#DCDAD4;
}

.map-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Footer */
footer{
  margin-top:28px;
  background:linear-gradient(180deg, #003548, #002633);
  color:#fff;
  border-top-left-radius:28px;
  border-top-right-radius:28px;
  overflow:hidden;
}

.footer{padding:28px 0 18px}

.footer-grid{
  display:grid;
  grid-template-columns:1.15fr .8fr .8fr 1fr;
  gap:18px;
}

.footer h4{
  margin:0 0 12px;
  font-size:18px;
}

.footer p,
.footer li,
.footer a{
  color:rgba(255,255,255,.80);
  line-height:1.7;
  font-size:14px;
}

.footer ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}

.subscribe{
  display:flex;
  gap:10px;
  margin-top:10px;
}

.subscribe input{
  flex:1;
  min-width:0;
  border:none;
  outline:none;
  border-radius:14px;
  padding:12px 14px;
  background:rgba(255,255,255,.96);
}

.footer-bottom{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.70);
  font-size:13px;
}

/* Responsive */
@media (max-width:1080px){
  .hero-lux,
  .cta-polish-inner,
  .split,
  .contacts,
  .footer-grid,
  .news{
    grid-template-columns:1fr;
  }

  .features,
  .testimonials,
  .programs,
  .list-cards,
  .audience-grid{
    grid-template-columns:1fr;
  }

  .feature-mini-grid,
  .right-grid,
  .stat-strip{
    grid-template-columns:1fr;
  }

  .nav{display:none}
  .hero__visual{min-height:380px}
  .hero__photo{width:min(100%, 480px)}
}

@media (max-width:720px){
  .topbar__inner{min-height:68px}
  .header-actions{display:none}
  .hero__panel{border-radius:24px}
  .hero__inner{padding:22px}
  .panel__inner{padding:20px}
  .cta__inner{padding:20px}
  .footer{padding-top:22px}
  .btn{width:100%}
  .hero-actions2,
  .contact-actions,
  .subscribe{
    flex-direction:column;
  }
  .contact-box__inner{padding:20px}
  .hero-copy h1{
    font-size:clamp(30px, 8vw, 42px);
  }
}

/* === НАЧАЛО СТИЛЕЙ ДЛЯ МОБИЛЬНОГО МЕНЮ === */
@media (max-width: 720px) {
    /* Скрываем десктопные элементы */
    .nav a,
    .header-actions--mobile-hidden a.btn {
        display: none !important; /* Убираем лишние кнопки */
    }

    /* Делаем кнопку видимой */
    .menu-toggle {
        width: 36px;
        height: 36px;
        border: none;
        background: transparent;
        cursor: pointer;
        outline: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--navy); /* Цвет иконки под ваши цвета */
    }

    .menu-toggle svg path {
        stroke: currentColor;
    }

    /* Показываем только мобильные ссылки при нажатии */
    .nav ul {
        list-style: none;
        padding-left: 0;
        margin-top: 0;
        background-color: rgba(0,53,72,.9);
        border-radius: 16px;
        box-shadow: 0 12px 24px rgba(0,0,0,.12);
        position: absolute;
        left: 0;
        right: 0;
        z-index: 100;
        transform: translateY(-100%); /* Изначально спрятано вверху */
        transition: transform 0.3s ease-in-out;
    }

    .nav.is-open ul {
        transform: translateY(0); /* Меню открыто */
    }

    .nav ul li {
        text-align: center;
        font-size: 1.125rem;
        line-height: 1.5;
        color: #fff;
        padding: 1.25rem 0;
        white-space: nowrap;
    }
}
/* === КОНЕЦ СТИЛЕЙ ДЛЯ МОБИЛЬНОГО МЕНЮ === */

/* === ФИКС ДЛЯ ВЫПАДАЮЩЕГО МЕНЮ === */
@media (max-width: 720px) {
    .nav ul {
        list-style: none;
        padding-left: 0;
        margin-top: 0;
        background-color: rgba(0,53,72,.9);
        border-radius: 16px;
        box-shadow: 0 12px 24px rgba(0,0,0,.12);
        position: absolute;
        left: 0;
        right: 0; /* Важно! Меню будет по всей ширине экрана */
        z-index: 100;
        transform: translateY(-100%); /* Изначально спрятано вверху */
        transition: transform 0.3s ease-in-out;
    }

    .nav.is-open ul {
        transform: translateY(0); /* Меню открыто */
    }

    .nav ul li a {
        display: block;
        text-align: center;
        font-size: 1.125rem;
        line-height: 1.5;
        color: #fff;
        padding: 1.25rem 0;
        white-space: nowrap;
    }
}
/* === КОНЕЦ ФИКСА === */

/* ===== BURGER MENU ===== */

.burger-btn{
  display:none;
  width:46px;
  height:46px;
  border:none;
  border-radius:14px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,53,72,.10);
  box-shadow:0 10px 22px rgba(0,53,72,.08);
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
  position:relative;
  z-index:220;
}

.burger-btn span,
.burger-btn::before,
.burger-btn::after{
  content:"";
  position:absolute;
  width:20px;
  height:2px;
  border-radius:2px;
  background:var(--navy);
  transition:.25s ease;
}

.burger-btn span{transform:translateY(0)}
.burger-btn::before{transform:translateY(-6px)}
.burger-btn::after{transform:translateY(6px)}

.burger-btn.open span{opacity:0}
.burger-btn.open::before{transform:rotate(45deg)}
.burger-btn.open::after{transform:rotate(-45deg)}

.burger-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,38,51,.42);
  backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
  z-index:190;
}

.burger-overlay.open{
  opacity:1;
  pointer-events:auto;
}

.burger-panel{
  position:fixed;
  top:0;
  right:0;
  width:min(86vw, 360px);
  height:100vh;
  background:linear-gradient(180deg, #fff, #F5F1EB);
  box-shadow:-18px 0 40px rgba(0,53,72,.18);
  transform:translateX(102%);
  transition:.28s ease;
  z-index:200;
  display:flex;
  flex-direction:column;
  padding:18px;
}

.burger-panel.open{
  transform:translateX(0);
}

.burger-panel__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.burger-panel__title{
  font-weight:900;
  color:var(--navy);
  font-size:18px;
}

.burger-panel nav{
  display:grid;
  gap:8px;
}

.burger-panel nav a{
  padding:14px 14px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(0,53,72,.08);
  color:var(--navy);
  font-weight:700;
}

.burger-panel .burger-actions{
  margin-top:auto;
  display:grid;
  gap:10px;
  padding-top:18px;
}

.burger-panel .burger-actions .btn{
  width:100%;
}

@media (max-width: 1080px){
  .nav,
  .header-actions{
    display:none !important;
  }

  .burger-btn{
    display:inline-flex;
  }

  .topbar__inner{
    justify-content:space-between;
  }
}

/* ===== BURGER MENU ===== */

.burger-btn{
  display:none;
  width:46px;
  height:46px;
  border:none;
  border-radius:14px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,53,72,.10);
  box-shadow:0 10px 22px rgba(0,53,72,.08);
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
  position:relative;
  z-index:220;
}

.burger-btn span,
.burger-btn::before,
.burger-btn::after{
  content:"";
  position:absolute;
  width:20px;
  height:2px;
  border-radius:2px;
  background:var(--navy);
  transition:.25s ease;
}

.burger-btn span{transform:translateY(0)}
.burger-btn::before{transform:translateY(-6px)}
.burger-btn::after{transform:translateY(6px)}

.burger-btn.open span{opacity:0}
.burger-btn.open::before{transform:rotate(45deg)}
.burger-btn.open::after{transform:rotate(-45deg)}

.burger-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,38,51,.42);
  backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
  z-index:190;
}

.burger-overlay.open{
  opacity:1;
  pointer-events:auto;
}

.burger-panel{
  position:fixed;
  top:0;
  right:0;
  width:min(86vw, 360px);
  height:100vh;
  background:linear-gradient(180deg, #fff, #F5F1EB);
  box-shadow:-18px 0 40px rgba(0,53,72,.18);
  transform:translateX(102%);
  transition:.28s ease;
  z-index:200;
  display:flex;
  flex-direction:column;
  padding:18px;
}

.burger-panel.open{
  transform:translateX(0);
}

.burger-panel__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.burger-panel__title{
  font-weight:900;
  color:var(--navy);
  font-size:18px;
}

.burger-panel__nav{
  display:grid;
  gap:8px;
}

.burger-panel__nav a{
  padding:14px 14px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(0,53,72,.08);
  color:var(--navy);
  font-weight:700;
}

.burger-actions{
  margin-top:auto;
  display:grid;
  gap:10px;
  padding-top:18px;
}

.burger-actions .btn{
  width:100%;
}

@media (max-width: 1080px){
  .nav,
  .header-actions{
    display:none !important;
  }

  .burger-btn{
    display:inline-flex;
  }

  .topbar__inner{
    justify-content:space-between;
  }
}

<link rel="stylesheet" href="style.css?v=20260807">

/* ===== ASK DIRECTOR POPUP ===== */

.director-popup-overlay{
  position:fixed;
  inset:0;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,38,51,.44);
  backdrop-filter:blur(8px);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}

.director-popup-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}

.director-popup{
  width:min(100%, 520px);
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-xl);
  background:
    radial-gradient(circle at 12% 12%, rgba(252,188,126,.22), transparent 24%),
    radial-gradient(circle at 88% 8%, rgba(75,136,129,.18), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #FAF8F4 100%);
  border:1px solid rgba(0,53,72,.10);
  box-shadow:0 28px 70px rgba(0,53,72,.26);
  transform:translateY(18px) scale(.96);
  opacity:0;
  transition:transform .32s ease, opacity .32s ease;
}

.director-popup-overlay.is-open .director-popup{
  transform:translateY(0) scale(1);
  opacity:1;
}

.director-popup::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 82% 82%, rgba(32,114,134,.10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.45), transparent);
}

.director-popup__inner{
  position:relative;
  z-index:1;
  padding:28px;
}

.director-popup__close{
  position:absolute;
  top:16px;
  right:16px;
  z-index:2;
  width:42px;
  height:42px;
  border:none;
  border-radius:14px;
  cursor:pointer;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(0,53,72,.10);
  box-shadow:0 10px 22px rgba(0,53,72,.08);
  color:var(--navy);
  transition:transform .2s ease, background .2s ease;
}

.director-popup__close:hover{
  transform:translateY(-2px);
  background:#fff;
}

.director-popup__close::before,
.director-popup__close::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:2px;
  border-radius:2px;
  background:var(--navy);
}

.director-popup__close::before{
  transform:translate(-50%, -50%) rotate(45deg);
}

.director-popup__close::after{
  transform:translate(-50%, -50%) rotate(-45deg);
}

.director-popup__badge{
  width:max-content;
  max-width:calc(100% - 54px);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(247,145,55,.13);
  color:#9B520C;
  font-size:13px;
  font-weight:900;
}

.director-popup__badge span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(180deg, var(--warm-soft), var(--warm));
  box-shadow:0 0 0 6px rgba(247,145,55,.12);
  flex:0 0 auto;
}

.director-popup__top{
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin-bottom:16px;
}

.director-popup__icon{
  width:64px;
  height:64px;
  flex:0 0 auto;
  border-radius:22px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:28px;
  font-weight:900;
  background:linear-gradient(145deg, var(--navy), var(--accent-2));
  box-shadow:0 14px 28px rgba(0,53,72,.22);
  position:relative;
  overflow:hidden;
}

.director-popup__icon::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
}

.director-popup h2{
  margin:0 42px 8px 0;
  color:var(--navy);
  font-size:clamp(26px, 4vw, 34px);
  line-height:1.08;
  letter-spacing:-.035em;
}

.director-popup p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
  font-size:16px;
}

.director-popup__note{
  margin-top:16px;
  padding:15px 16px;
  border-radius:20px;
  background:rgba(0,53,72,.035);
  border:1px solid rgba(0,53,72,.07);
  color:var(--navy);
  line-height:1.55;
  font-size:14px;
}

.director-popup__note strong{
  display:block;
  margin-bottom:4px;
  color:var(--navy);
}

.director-popup__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
}

.director-popup__actions .btn{
  min-height:50px;
}

.director-popup__secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  padding:13px 18px;
  font-weight:800;
  font-family:inherit;
  cursor:pointer;
  white-space:nowrap;
  background:rgba(255,255,255,.88);
  color:var(--navy);
  border:1px solid var(--line);
  box-shadow:0 10px 22px rgba(0,53,72,.06);
  transition:transform .2s ease, background .2s ease;
}

.director-popup__secondary:hover{
  transform:translateY(-2px);
  background:#fff;
}

.director-popup__bottom{
  margin-top:16px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.director-popup__bottom::before{
  content:"✓";
  width:26px;
  height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:rgba(75,136,129,.12);
  color:var(--accent);
  font-weight:900;
}

@media (max-width:720px){
  .director-popup-overlay{
    align-items:flex-end;
    padding:14px;
  }

  .director-popup{
    border-radius:26px;
  }

  .director-popup__inner{
    padding:24px 20px 20px;
  }

  .director-popup__top{
    gap:12px;
  }

  .director-popup__icon{
    width:56px;
    height:56px;
    border-radius:18px;
    font-size:24px;
  }

  .director-popup h2{
    margin-right:40px;
  }

  .director-popup__actions{
    display:grid;
  }

  .director-popup__actions .btn,
  .director-popup__secondary{
    width:100%;
  }
}