/* ═══════════════════════════════════════════════════════════
   Студия танца «Дисней» — стили
   Палитра взята из логотипа: голубой неон + золотая пыль на ночном небе
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:        #05070d;
  --bg-2:      #080c17;
  --bg-3:      #0b1020;
  --ink:       #eaf4ff;
  --muted:     #92a6bd;
  --dim:       #61748c;

  --cyan:      #3fc9f5;
  --cyan-lt:   #9aeaff;
  --cyan-dk:   #1391c4;

  --gold:      #f2b01e;
  --gold-lt:   #ffd968;
  --gold-dk:   #b8790a;

  --line:      rgba(143,196,232,.14);
  --glass:     rgba(16,26,44,.55);

  --shadow-lg: 0 30px 80px -20px rgba(0,0,0,.8);
  --glow-cyan: 0 0 40px rgba(63,201,245,.35);
  --glow-gold: 0 0 40px rgba(242,176,30,.32);

  --font-d: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-b: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-s: 'Marck Script', 'Cormorant Garamond', cursive;

  --wrap: 1200px;
  --ease: cubic-bezier(.22,.68,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  font-family:var(--font-b);
  font-weight:300;
  font-size:clamp(15px,.4vw + 14px,17px);
  line-height:1.75;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  min-height:100vh;
}

img{ max-width:100%; display:block; height:auto }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }
button,input,select,textarea{ font:inherit; color:inherit }

::selection{ background:rgba(242,176,30,.3); color:#fff }

.container{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* ─────────── ФОН: 3D-небо ─────────── */

#magic-sky{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
}

#magic-dust{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:90;
  pointer-events:none;
}

.aurora{
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  perspective:900px;
}
.aurora__blob{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.5;
  will-change:transform;
}
.aurora__blob--cyan{
  width:60vw; height:60vw; max-width:820px; max-height:820px;
  left:-12vw; top:-8vw;
  background:radial-gradient(circle, rgba(63,201,245,.4), transparent 68%);
  animation:drift1 26s var(--ease) infinite alternate;
}
.aurora__blob--gold{
  width:55vw; height:55vw; max-width:760px; max-height:760px;
  right:-14vw; top:22vh;
  background:radial-gradient(circle, rgba(242,176,30,.3), transparent 68%);
  animation:drift2 32s var(--ease) infinite alternate;
}
.aurora__blob--deep{
  width:70vw; height:70vw; max-width:900px; max-height:900px;
  left:20vw; bottom:-25vw;
  background:radial-gradient(circle, rgba(90,60,200,.26), transparent 70%);
  animation:drift3 38s var(--ease) infinite alternate;
}
@keyframes drift1{ to{ transform:translate3d(8vw,6vh,0) scale(1.18) } }
@keyframes drift2{ to{ transform:translate3d(-9vw,-7vh,0) scale(1.24) } }
@keyframes drift3{ to{ transform:translate3d(-6vw,-9vh,0) scale(1.12) } }

/* виньетка сверху всего фона */
body::after{
  content:'';
  position:fixed; inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%,   transparent 35%, rgba(2,4,9,.55) 100%),
    radial-gradient(ellipse 100% 70% at 50% 100%, transparent 40%, rgba(2,4,9,.7) 100%);
}

/* весь контент — над фоном */
.header,main,.footer,.fab{ position:relative; z-index:10 }

/* ─────────── БАЛЕРИНА ───────────
   Плоский силуэт с логотипа. Спускается по странице вслед за
   прокруткой и разворачивается. Своей анимации нет: стоит
   страница — стоит и фигура. */

.dancer{
  position:fixed; left:0; top:0;
  z-index:65;
  width:clamp(104px, 12vw, 210px);
  transform-origin:50% 50%;
  pointer-events:none;
  opacity:0;
  /* screen: она добавляет свет поверх страницы, а не закрывает текст */
  mix-blend-mode:screen;
  will-change:transform, opacity;
}
.dancer img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 0 22px rgba(63,201,245,.5))
         drop-shadow(0 0 58px rgba(242,176,30,.2));
}

@media (max-width:860px){
  .dancer{ width:clamp(80px, 20vw, 130px) }
}

/* ─────────── ШАПКА ─────────── */

.header{
  position:fixed; top:0; left:0; right:0;
  z-index:80;
  padding:1.15rem 0;
  transition:padding .45s var(--ease), background .45s var(--ease), backdrop-filter .45s;
}
.header::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,7,13,.9), rgba(5,7,13,0));
  opacity:1; transition:opacity .45s;
  pointer-events:none;
}
.header.is-stuck{
  padding:.6rem 0;
  background:rgba(6,9,17,.78);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 1px 0 var(--line), 0 20px 50px -30px rgba(0,0,0,.9);
}
.header.is-stuck::before{ opacity:0 }

.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem }

.header__brand{ display:flex; align-items:center; flex-shrink:0 }
.header__logo{
  width:clamp(118px,13vw,158px);
  filter:drop-shadow(0 0 14px rgba(63,201,245,.4));
  transition:transform .5s var(--ease-out), filter .5s, width .45s var(--ease);
}
.header.is-stuck .header__logo{ width:clamp(100px,10vw,124px) }
.header__brand:hover .header__logo{
  transform:scale(1.05);
  filter:drop-shadow(0 0 22px rgba(63,201,245,.7));
}

.nav{ display:flex; align-items:center; gap:2rem }
.nav__link{
  position:relative;
  font-size:.855rem; font-weight:400; letter-spacing:.055em;
  color:var(--muted);
  transition:color .3s;
  padding:.25rem 0;
}
.nav__link::after{
  content:'';
  position:absolute; left:0; bottom:-2px;
  width:100%; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:scaleX(0); transform-origin:center;
  transition:transform .45s var(--ease-out);
}
.nav__link:hover, .nav__link.is-active{ color:var(--ink) }
.nav__link:hover::after, .nav__link.is-active::after{ transform:scaleX(1) }

.nav__phone{
  font-size:.855rem; font-weight:500; letter-spacing:.03em;
  color:var(--gold-lt);
  padding:.5rem 1.1rem;
  border:1px solid rgba(242,176,30,.35);
  border-radius:100px;
  white-space:nowrap;
  transition:.4s var(--ease);
}
.nav__phone:hover{
  background:rgba(242,176,30,.12);
  border-color:var(--gold);
  box-shadow:var(--glow-gold);
  transform:translateY(-1px);
}

.burger{
  display:none;
  width:44px; height:44px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:6px;
}
.burger span{
  display:block; width:24px; height:1.5px;
  background:var(--ink); border-radius:2px;
  transition:.4s var(--ease-out);
}
.burger.is-open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg) }
.burger.is-open span:nth-child(2){ opacity:0; transform:scaleX(0) }
.burger.is-open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg) }

/* ─────────── КНОПКИ ─────────── */

.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem;
  padding:1.05rem 2.2rem;
  border:0; border-radius:100px;
  font-family:var(--font-b);
  font-size:.86rem; font-weight:600;
  letter-spacing:.06em;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  transform-style:preserve-3d;
}
.btn span{ position:relative; z-index:2 }

.btn--gold{
  color:#170e00;
  background:linear-gradient(100deg, var(--gold-lt), var(--gold) 45%, var(--gold-dk));
  box-shadow:0 10px 32px -8px rgba(242,176,30,.55), inset 0 1px 0 rgba(255,255,255,.45);
}
/* бегущий блик */
.btn--gold::before{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .9s var(--ease-out);
}
.btn--gold:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 18px 46px -10px rgba(242,176,30,.7), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn--gold:hover::before{ transform:translateX(120%) }
.btn--gold:active{ transform:translateY(-1px) scale(.99) }

.btn--ghost{
  color:var(--ink);
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.btn--ghost:hover{
  border-color:rgba(63,201,245,.5);
  background:rgba(63,201,245,.08);
  box-shadow:var(--glow-cyan);
  transform:translateY(-3px);
}

.btn--sm{ padding:.85rem 1.7rem; font-size:.8rem }
.btn--wide{ width:100%; padding:1.15rem 2rem }

/* ─────────── ГЛАВНЫЙ ЭКРАН (3D-сцена) ─────────── */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:7.5rem 0 4.5rem;
  perspective:1150px;
  perspective-origin:50% 46%;
  overflow:hidden;
}

/* колода, которую поворачивает курсор */
.hero__deck{
  position:relative;
  width:100%;
  transform-style:preserve-3d;
  will-change:transform;
}

/* Каждый .layer держит ТОЛЬКО глубину.
   Анимации живут на детях — иначе transform перебивает translateZ. */
.layer{ transform-style:preserve-3d }
.layer--ribbons{
  position:absolute; inset:-18%;
  transform:translateZ(-340px) scale(1.55);
  pointer-events:none;
}
.layer--halo{
  position:absolute; inset:0;
  transform:translateZ(-165px) scale(1.2);
  pointer-events:none;
}
/* Глубина увеличивает элемент (перспектива), поэтому каждый слой
   компенсируем масштабом (1150 - Z) / 1150 — размер остаётся честным,
   а параллакс при наклоне сцены никуда не девается. */
.layer--logo { transform:translateZ(72px)  scale(.9374) }
.layer--copy { transform:translateZ(26px)  scale(.9774) }
.layer--stats{ transform:translateZ(10px)  scale(.9913) }
.layer--front{ transform:translateZ(128px) scale(.8887) }

.hero__inner{
  position:relative;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
  transform-style:preserve-3d;
}
.hero__inner > .layer{
  width:100%;
  display:flex; flex-direction:column; align-items:center;
}
.hero__inner > .layer--halo{ display:block }

/* Ленты — фон, а не помеха: маска убирает их из-под текстового блока */
.hero__ribbons{
  position:absolute; inset:0;
  opacity:.42;
  --ribbon-mask:radial-gradient(ellipse 62% 52% at 50% 68%,
      transparent 34%, rgba(0,0,0,.22) 64%, #000 94%);
  -webkit-mask-image:var(--ribbon-mask);
  mask-image:var(--ribbon-mask);
}
.hero__ribbons svg{ width:100%; height:100% }
.ribbon{
  stroke-dasharray:2400;
  stroke-dashoffset:2400;
  animation:draw 5s var(--ease-out) forwards, sway 14s ease-in-out 5s infinite alternate;
  filter:drop-shadow(0 0 8px rgba(242,176,30,.35));
}
.ribbon--2{ animation-delay:.5s, 5.5s; filter:drop-shadow(0 0 8px rgba(63,201,245,.35)) }
.ribbon--3{ animation-delay:1s, 6s }
@keyframes draw{ to{ stroke-dashoffset:0 } }
@keyframes sway{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(-2.5%,1.8%,0) }
}

.hero__halo{
  position:absolute;
  top:-4%; left:50%;
  width:min(92vw,920px); aspect-ratio:1;
  transform:translate(-50%,0);
  background:
    radial-gradient(circle, rgba(63,201,245,.22) 0%, transparent 58%),
    radial-gradient(circle, rgba(242,176,30,.15) 20%, transparent 62%);
  filter:blur(32px);
  animation:breathe 8s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.72; transform:translate(-50%,0) scale(1) }
  50%    { opacity:1;   transform:translate(-50%,0) scale(1.1) }
}

.hero__logo{
  width:min(62vw, 430px);
  height:auto;
  filter:drop-shadow(0 0 50px rgba(63,201,245,.42)) drop-shadow(0 0 100px rgba(242,176,30,.25));
  animation:logoIn 1.5s var(--ease-out) both, float 7s ease-in-out 1.5s infinite;
  will-change:transform;
}
@keyframes logoIn{
  from{ opacity:0; transform:translate3d(0,34px,0) scale(.88) }
  to  { opacity:1; transform:none }
}
@keyframes float{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg) }
  50%    { transform:translate3d(0,-16px,0) rotate(.5deg) }
}

.hero__script{
  font-family:var(--font-s);
  font-size:clamp(1.35rem,3vw,2rem);
  color:var(--gold-lt);
  margin-top:.5rem;
  text-shadow:0 0 26px rgba(242,176,30,.55);
  opacity:0;
  animation:riseIn 1s var(--ease-out) 1.15s forwards;
}

.hero__title{
  /* тот же рукописный шрифт, что и в подвале */
  font-family:var(--font-s);
  font-weight:400;
  font-size:clamp(2.4rem,6.4vw,4.6rem);
  line-height:1.2;
  text-shadow:0 2px 26px rgba(3,6,14,.9);
  letter-spacing:.005em;
  margin-top:1.2rem;
}
.hero__title span{
  display:inline-block; opacity:0;
  animation:riseIn .95s var(--ease-out) forwards;
}
.hero__title span:nth-child(1){ animation-delay:1.15s }
.hero__title span:nth-child(2){ animation-delay:1.27s }
.hero__title b{
  display:inline-block; opacity:0; font-weight:400;
  background:linear-gradient(100deg, var(--cyan-lt) 10%, var(--cyan) 40%, var(--gold-lt) 78%, var(--gold));
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:riseIn .95s var(--ease-out) 1.39s forwards, shimmer 7s linear 2.6s infinite;
  filter:drop-shadow(0 0 28px rgba(63,201,245,.3));
}
@keyframes shimmer{ to{ background-position:220% center } }
@keyframes riseIn{
  from{ opacity:0; transform:translate3d(0,26px,0) rotateX(-24deg) }
  to  { opacity:1; transform:none }
}

.hero__lead{
  max-width:56ch;
  margin-top:1.1rem;
  color:var(--muted);
  font-size:clamp(.92rem,1.1vw,1.02rem);
  text-shadow:0 2px 18px rgba(3,6,14,.95);
  opacity:0;
  animation:riseIn 1s var(--ease-out) 1.6s forwards;
}

.hero__actions{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;
  margin-top:2.4rem;
  opacity:0;
  animation:riseIn 1s var(--ease-out) 1.8s forwards;
}

.hero__stats{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(1.4rem,4.5vw,3.4rem);
  margin-top:2.3rem;
  padding-top:1.8rem;
  border-top:1px solid var(--line);
  width:min(100%,760px);
  opacity:0;
  animation:riseIn 1s var(--ease-out) 2s forwards;
}
.ministat{ display:flex; flex-direction:column; align-items:center; gap:.15rem }
.ministat b{
  font-family:var(--font-d); font-weight:600;
  font-size:clamp(1.7rem,3.4vw,2.5rem);
  line-height:1;
  background:linear-gradient(160deg, var(--gold-lt), var(--gold) 60%, var(--gold-dk));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.ministat i{
  font-style:normal; font-size:.7rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}

.hero__scroll{
  position:absolute; left:50%; bottom:2.2rem;
  transform:translateX(-50%);
  opacity:0; z-index:5;
  animation:fadeIn 1s var(--ease-out) 2.3s forwards;
}
@keyframes fadeIn{ to{ opacity:1 } }
.hero__mouse{
  display:block; width:24px; height:38px;
  border:1px solid rgba(143,196,232,.35);
  border-radius:14px;
  position:relative;
  transition:border-color .4s;
}
.hero__mouse::after{
  content:'';
  position:absolute; left:50%; top:8px;
  width:3px; height:7px; margin-left:-1.5px;
  background:var(--gold);
  border-radius:2px;
  box-shadow:0 0 10px var(--gold);
  animation:wheel 2s ease-in-out infinite;
}
.hero__scroll:hover .hero__mouse{ border-color:var(--gold) }
@keyframes wheel{
  0%,100%{ transform:translateY(0); opacity:1 }
  55%    { transform:translateY(13px); opacity:.2 }
}

/* ─────────── ОБЩЕЕ ДЛЯ СЕКЦИЙ ─────────── */

.section{ position:relative; padding:clamp(5rem,10vw,8.5rem) 0 }
.section--alt::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent, rgba(11,16,32,.55) 22%, rgba(11,16,32,.55) 78%, transparent);
  pointer-events:none;
}
.section > .container{ position:relative; z-index:2 }

.section__head{ text-align:center; max-width:70ch; margin:0 auto clamp(3rem,5vw,4.5rem) }

.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.68rem; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.1rem;
}
.eyebrow::before,.eyebrow::after{
  content:''; width:34px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow::after{ background:linear-gradient(90deg, var(--gold), transparent) }

.section__title{
  font-family:var(--font-d);
  font-weight:500;
  font-size:clamp(1.9rem,4.6vw,3.3rem);
  line-height:1.14;
  background:linear-gradient(170deg, #fff 5%, var(--cyan-lt) 55%, var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section__sub{ margin-top:1rem; color:var(--muted); font-size:1rem }

/* когда у раздела нет крупного заголовка, роль h2 играет надзаголовок */
.eyebrow--head{
  font-size:.82rem; letter-spacing:.32em;
  margin-bottom:.2rem;
}

/* появление в 3D */
.reveal{
  opacity:0;
  transform:perspective(1000px) translate3d(0,46px,-70px) rotateX(11deg);
  filter:blur(6px);
  transition:opacity .95s var(--ease-out), transform 1.05s var(--ease-out), filter .95s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.reveal.is-in{ opacity:1; transform:none; filter:none }

/* ─────────── О СТУДИИ ─────────── */

.about{
  display:grid;
  grid-template-columns:1.15fr .95fr;
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:start;
}
.about__text p{ color:var(--muted); margin-bottom:1.15rem }
.about__lead{ color:var(--ink) !important; font-size:1.1rem; font-weight:400 }

.quote{
  position:relative;
  margin:2.2rem 0;
  padding:1.6rem 1.6rem 1.6rem 2.6rem;
  border-radius:4px 20px 20px 4px;
  background:linear-gradient(100deg, rgba(63,201,245,.07), transparent 70%);
  border-left:2px solid transparent;
  border-image:linear-gradient(180deg, var(--cyan), var(--gold)) 1;
}
.quote::before{
  content:'“';
  position:absolute; left:.55rem; top:-.4rem;
  font-family:var(--font-d); font-size:4.5rem; line-height:1;
  color:rgba(242,176,30,.3);
}
.quote p{
  font-family:var(--font-d);
  font-size:clamp(1.05rem,1.7vw,1.3rem);
  font-style:italic;
  line-height:1.55;
  color:var(--ink) !important;
  margin:0 !important;
}

.about__cards{
  display:grid; grid-template-columns:1fr 1fr;
  gap:1rem;
  perspective:1000px;
}
.acard{
  position:relative;
  padding:1.7rem 1.4rem;
  border-radius:18px;
  background:linear-gradient(165deg, rgba(20,32,54,.7), rgba(9,14,26,.65));
  border:1px solid var(--line);
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .6s var(--ease-out), border-color .6s, box-shadow .6s;
}
.acard::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(63,201,245,.16), transparent 45%);
  opacity:0; transition:opacity .5s;
  pointer-events:none;
}
.acard:hover{
  transform:translateY(-7px) rotateX(6deg) rotateY(-4deg);
  border-color:rgba(63,201,245,.35);
  box-shadow:var(--shadow-lg), 0 0 40px -10px rgba(63,201,245,.35);
}
.acard:hover::before{ opacity:1 }
.acard__icon{
  display:grid; place-items:center;
  width:46px; height:46px;
  border-radius:13px;
  background:linear-gradient(150deg, rgba(63,201,245,.18), rgba(242,176,30,.12));
  border:1px solid rgba(63,201,245,.22);
  color:var(--cyan-lt);
  margin-bottom:1rem;
  transform:translateZ(30px);
}
.acard__icon svg{ width:22px; height:22px }
.acard h3{
  font-family:var(--font-d); font-weight:600;
  font-size:1.16rem; margin-bottom:.4rem;
  color:var(--ink);
  transform:translateZ(18px);
}
.acard p{ font-size:.85rem; color:var(--dim); line-height:1.6; transform:translateZ(10px) }

/* ─────────── НАПРАВЛЕНИЯ (3D tilt) ─────────── */

.dirs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.4rem;
  perspective:1300px;
}
.dir{
  position:relative;
  padding:2rem 1.9rem 2.1rem;
  border-radius:22px;
  background:linear-gradient(165deg, rgba(19,30,52,.72), rgba(8,13,24,.72));
  border:1px solid var(--line);
  overflow:hidden;
  transform-style:preserve-3d;
  will-change:transform;
  transition:box-shadow .6s var(--ease-out), border-color .6s;
}
/* золотая рамка-свечение */
.dir::after{
  content:'';
  position:absolute; inset:-1px;
  border-radius:22px;
  padding:1px;
  background:linear-gradient(140deg, var(--cyan), transparent 35%, transparent 65%, var(--gold));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .55s;
  pointer-events:none;
}
/* блик, следующий за курсором */
.dir::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%), rgba(154,234,255,.14), transparent 42%);
  opacity:0; transition:opacity .45s;
  pointer-events:none;
}
.dir:hover{ box-shadow:var(--shadow-lg), 0 0 60px -18px rgba(63,201,245,.5) }
.dir:hover::after,.dir:hover::before{ opacity:1 }

/* Ни иконок, ни номеров: карточку открывает название,
   а золотой штрих над ним держит ритм сетки. */
.dir h3::before{
  content:'';
  display:block; width:38px; height:1px;
  margin-bottom:1rem;
  background:linear-gradient(90deg, var(--gold), transparent);
  transform:translateZ(46px);
  transition:width .6s var(--ease-out);
}
.dir:hover h3::before{ width:74px }

.dir h3{
  font-family:var(--font-d); font-weight:600;
  font-size:1.45rem; line-height:1.2;
  margin-bottom:.6rem;
  transform:translateZ(34px);
  color:var(--ink);
  transform-style:preserve-3d;
}
.dir p{
  font-size:.87rem; color:var(--muted); line-height:1.65;
  transform:translateZ(20px);
}

.dirs__note{
  text-align:center; margin-top:2.8rem;
  color:var(--muted); font-size:.94rem;
}
.dirs__note a{
  color:var(--gold-lt); font-weight:500;
  border-bottom:1px solid rgba(242,176,30,.35);
  transition:.3s;
}
.dirs__note a:hover{ color:#fff; border-color:var(--gold) }

/* ─────────── ПЕДАГОГИ ─────────── */

.photo-ph{
  position:relative;
  width:100%; height:100%;
  min-height:220px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.6rem;
  background:
    repeating-linear-gradient(-45deg, rgba(63,201,245,.022) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, rgba(24,38,62,.8), rgba(9,14,26,.8));
  color:var(--dim);
  overflow:hidden;
}
.photo-ph::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 35%, rgba(154,234,255,.09) 50%, transparent 65%);
  transform:translateX(-100%);
  animation:sweep 3.6s var(--ease) infinite;
}
@keyframes sweep{ 60%,100%{ transform:translateX(100%) } }
.photo-ph__star{ font-size:1.9rem; color:rgba(242,176,30,.5); animation:twinkle 3s ease-in-out infinite }
@keyframes twinkle{ 0%,100%{ opacity:.4; transform:scale(.9) } 50%{ opacity:1; transform:scale(1.15) } }
.photo-ph__mono{
  font-family:var(--font-d); font-size:3rem; font-weight:600;
  letter-spacing:.06em;
  background:linear-gradient(160deg, var(--cyan-lt), var(--cyan-dk));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.photo-ph__hint{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase }

.lead-teacher{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:clamp(1.8rem,4vw,3.2rem);
  align-items:center;
  padding:clamp(1.6rem,3vw,2.6rem);
  border-radius:26px;
  background:linear-gradient(140deg, rgba(20,33,56,.68), rgba(8,13,24,.68));
  border:1px solid var(--line);
  margin-bottom:2.6rem;
  position:relative;
  overflow:hidden;
}
.lead-teacher::before{
  content:'';
  position:absolute; left:-30%; top:-60%;
  width:60%; height:220%;
  background:radial-gradient(ellipse, rgba(63,201,245,.13), transparent 65%);
  pointer-events:none;
}
.lead-teacher__photo{
  border-radius:20px; overflow:hidden;
  aspect-ratio:3/4;
  border:1px solid rgba(63,201,245,.2);
  box-shadow:var(--shadow-lg);
}
.lead-teacher__photo img{ width:100%; height:100%; object-fit:cover }
.lead-teacher__body{ position:relative }
.lead-teacher__role{
  display:inline-block;
  font-size:.66rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold);
  padding:.35rem .9rem;
  border:1px solid rgba(242,176,30,.3);
  border-radius:100px;
  margin-bottom:1rem;
}
.lead-teacher__name{
  font-family:var(--font-d); font-weight:600;
  font-size:clamp(1.6rem,3.2vw,2.3rem);
  line-height:1.15;
  color:var(--ink);
}
.lead-teacher__pos{
  color:var(--cyan); font-size:.9rem; font-weight:400;
  margin:.35rem 0 1.1rem;
}
.lead-teacher__body > p{ color:var(--muted); font-size:.95rem }
.lead-teacher__tel{
  display:inline-flex; align-items:center; gap:.6rem;
  margin-top:1.4rem;
  font-size:1.05rem; font-weight:500;
  color:var(--gold-lt);
  transition:.35s;
}
.lead-teacher__tel svg{ width:19px; height:19px }
.lead-teacher__tel:hover{ color:#fff; text-shadow:0 0 18px rgba(242,176,30,.7) }

.teachers{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.4rem;
  perspective:1200px;
}
.tcard{
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(165deg, rgba(19,30,52,.65), rgba(8,13,24,.65));
  border:1px solid var(--line);
  transform-style:preserve-3d;
  transition:transform .6s var(--ease-out), border-color .6s, box-shadow .6s;
}
.tcard:hover{
  transform:translateY(-8px) rotateX(5deg);
  border-color:rgba(242,176,30,.32);
  box-shadow:var(--shadow-lg), 0 0 50px -18px rgba(242,176,30,.4);
}
.tcard__photo{ aspect-ratio:4/5; overflow:hidden }
.tcard__photo img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out) }
.tcard:hover .tcard__photo img{ transform:scale(1.06) }
.tcard__name{
  font-family:var(--font-d); font-weight:600; font-size:1.25rem;
  padding:1.3rem 1.4rem 0;
  color:var(--ink);
}
.tcard__dir{
  padding:.15rem 1.4rem 0;
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold);
}
.tcard__text{ padding:.8rem 1.4rem 1.6rem; font-size:.85rem; color:var(--dim); line-height:1.6 }

/* ─────────── ГАЛЕРЕЯ ─────────── */

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  grid-auto-rows:230px;
  gap:1rem;
  perspective:1400px;
}
.gcard{
  position:relative;
  border-radius:20px; overflow:hidden;
  border:1px solid var(--line);
  transform-style:preserve-3d;
  transition:transform .65s var(--ease-out), box-shadow .65s, border-color .65s;
}
.gcard--wide{ grid-column:span 2 }
.gcard--tall{ grid-row:span 2 }
.gcard img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-out) }
.gcard .photo-ph{ min-height:100% }
.gcard:hover{
  transform:translateZ(45px) rotateX(4deg);
  border-color:rgba(63,201,245,.4);
  box-shadow:var(--shadow-lg), 0 0 60px -20px rgba(63,201,245,.5);
  z-index:3;
}
.gcard:hover img{ transform:scale(1.08) }

.gallery__note{
  text-align:center; margin-top:2.4rem;
  color:var(--muted); font-size:.94rem;
}
.gallery__note a{
  color:var(--cyan-lt);
  border-bottom:1px solid rgba(63,201,245,.3);
  transition:.3s;
}
.gallery__note a:hover{ color:#fff; border-color:var(--cyan) }

/* ─────────── ЗАПИСЬ + КОНТАКТЫ ─────────── */

.signup__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(1.6rem,3.5vw,3rem);
  align-items:start;
}

.form{
  padding:clamp(1.6rem,3vw,2.4rem);
  border-radius:26px;
  background:linear-gradient(160deg, rgba(20,33,56,.7), rgba(8,13,24,.7));
  border:1px solid var(--line);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow-lg);
}
.field{ margin-bottom:1.1rem }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.field label{
  display:block;
  font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
  margin-bottom:.5rem;
}
.field label i{ font-style:normal; text-transform:none; letter-spacing:.02em; opacity:.7 }
.field input,.field select,.field textarea{
  width:100%;
  padding:.9rem 1.1rem;
  background:rgba(4,8,16,.6);
  border:1px solid var(--line);
  border-radius:13px;
  font-size:.92rem; font-weight:300;
  transition:border-color .35s, box-shadow .35s, background .35s;
  resize:vertical;
}
.field select{ cursor:pointer; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 19px) 55%, calc(100% - 14px) 55%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.field select option{ background:#0b1020; color:var(--ink) }
.field input::placeholder,.field textarea::placeholder{ color:#48586d }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:rgba(63,201,245,.55);
  background:rgba(63,201,245,.05);
  box-shadow:0 0 0 3px rgba(63,201,245,.1);
}
.field.has-error input,.field.has-error select{ border-color:rgba(255,90,90,.6) }

.form__policy{ font-size:.72rem; color:var(--dim); text-align:center; margin-top:.9rem; line-height:1.5 }
.form__status{
  margin-top:.9rem; text-align:center;
  font-size:.86rem; font-weight:500;
  min-height:1.2em;
}
.form__status.ok{ color:var(--cyan-lt) }
.form__status.err{ color:#ff8080 }

.contacts{
  padding:clamp(1.6rem,3vw,2.2rem);
  border-radius:26px;
  background:linear-gradient(160deg, rgba(16,26,44,.5), rgba(8,13,24,.5));
  border:1px solid var(--line);
}
.contacts__title{
  font-family:var(--font-d); font-weight:600;
  font-size:1.4rem; margin-bottom:1.3rem;
  color:var(--ink);
}

.contact,.soc{
  display:flex; align-items:center; gap:1rem;
  padding:.95rem 1.1rem;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(4,8,16,.35);
  margin-bottom:.7rem;
  transition:transform .45s var(--ease-out), border-color .45s, background .45s, box-shadow .45s;
}
.contact:hover,.soc:hover{
  transform:translateX(5px);
  border-color:rgba(63,201,245,.4);
  background:rgba(63,201,245,.07);
  box-shadow:0 10px 30px -12px rgba(63,201,245,.45);
}
.contact__ico,.soc__ico{
  display:grid; place-items:center;
  width:42px; height:42px; flex-shrink:0;
  border-radius:12px;
  background:linear-gradient(150deg, rgba(63,201,245,.18), rgba(242,176,30,.1));
  border:1px solid rgba(63,201,245,.2);
  color:var(--cyan-lt);
}
.contact__ico svg,.soc__ico svg{ width:20px; height:20px }
.contact__body,.soc__body{ display:flex; flex-direction:column; line-height:1.35; min-width:0 }
.contact__body b,.soc__body b{ font-size:1rem; font-weight:500; color:var(--ink) }
.contact__body i,.soc__body i{
  font-style:normal; font-size:.76rem; color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.contact--phone .contact__ico{
  background:linear-gradient(150deg, rgba(242,176,30,.25), rgba(242,176,30,.08));
  border-color:rgba(242,176,30,.32);
  color:var(--gold-lt);
}
.contact--phone .contact__body b{ font-size:1.18rem; color:var(--gold-lt) }

.contacts__socials{ margin-top:1.3rem }

/* ── филиалы ── */
.branches{
  margin-top:1.4rem; padding-top:1.4rem;
  border-top:1px solid var(--line);
}
.branches__title{
  font-size:.68rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.9rem;
}
.branch{
  display:flex; align-items:flex-start; gap:.85rem;
  padding:.8rem .9rem;
  border-radius:14px;
  border:1px solid transparent;
  margin-bottom:.5rem;
  transition:transform .45s var(--ease-out), border-color .45s, background .45s;
}
.branch:hover{
  transform:translateX(4px);
  border-color:rgba(242,176,30,.28);
  background:rgba(242,176,30,.06);
}
.branch__pin{
  display:grid; place-items:center;
  width:32px; height:32px; flex-shrink:0;
  border-radius:10px;
  background:rgba(242,176,30,.12);
  border:1px solid rgba(242,176,30,.24);
  color:var(--gold-lt);
}
.branch__pin svg{ width:17px; height:17px }
.branch__body{ display:flex; flex-direction:column; gap:.15rem; line-height:1.4 }
.branch__body b{ font-size:.9rem; font-weight:500; color:var(--ink) }
.branch__body i{ font-style:normal; font-size:.78rem; color:var(--dim) }
.branches__note{
  font-size:.8rem; color:var(--dim); line-height:1.6;
  margin-top:.8rem; padding-left:.9rem;
  border-left:1px solid rgba(242,176,30,.25);
}

/* ─────────── ПОДВАЛ ─────────── */

.footer{
  padding:4rem 0 2rem;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, transparent, rgba(3,5,10,.85));
}
.footer__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:2.5rem;
  align-items:center;
}
.footer__brand{ display:flex; flex-direction:column; gap:.5rem }
.footer__logo{ width:150px; filter:drop-shadow(0 0 20px rgba(63,201,245,.3)) }
.footer__tag{ font-family:var(--font-s); font-size:1.05rem; color:var(--gold) }

.footer__nav{ display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:center }
.footer__nav a{ font-size:.85rem; color:var(--muted); transition:color .3s }
.footer__nav a:hover{ color:var(--gold-lt) }

.footer__contacts{ display:flex; flex-direction:column; align-items:flex-end; gap:.9rem }
.footer__phone{
  font-size:1.2rem; font-weight:500; color:var(--gold-lt);
  transition:.35s;
}
.footer__phone:hover{ color:#fff; text-shadow:0 0 18px rgba(242,176,30,.6) }
.footer__addr{
  font-size:.78rem; color:var(--dim); line-height:1.7;
  text-align:right;
}
.footer__socials{ display:flex; gap:.6rem }
.footer__socials a{
  display:grid; place-items:center;
  width:38px; height:38px;
  border-radius:11px;
  border:1px solid var(--line);
  color:var(--muted);
  transition:.4s var(--ease-out);
}
.footer__socials a svg{ width:18px; height:18px }
.footer__socials a:hover{
  color:var(--gold-lt);
  border-color:rgba(242,176,30,.45);
  transform:translateY(-3px) rotate(-4deg);
  box-shadow:0 10px 24px -10px rgba(242,176,30,.6);
}

/* строка юридических документов над копирайтом */
.footer__docs{
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem;
  justify-content:center;
  margin-top:2.4rem;
}
.footer__docs:empty{ display:none }
.footer__docs a{
  font-size:.8rem; color:var(--dim);
  border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.footer__docs a:hover{ color:var(--gold-lt); border-color:rgba(242,176,30,.4) }

.footer__bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  margin-top:1.6rem; padding-top:1.6rem;
  border-top:1px solid var(--line);
  font-size:.76rem; color:var(--dim);
}

/* ─────────── ПЛАВАЮЩАЯ КНОПКА ЗВОНКА ─────────── */

.fab{
  position:fixed; right:1.2rem; bottom:1.2rem;
  z-index:70;
  display:none;
  place-items:center;
  opacity:0; visibility:hidden;
  transform:translateY(14px) scale(.85);
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out), visibility .45s;
  width:56px; height:56px;
  border-radius:50%;
  color:#170e00;
  background:linear-gradient(150deg, var(--gold-lt), var(--gold) 55%, var(--gold-dk));
  box-shadow:0 12px 34px -8px rgba(242,176,30,.7);
  animation:pulseRing 2.6s ease-out infinite;
}
.fab.is-shown{ opacity:1; visibility:visible; transform:none }
.fab svg{ width:24px; height:24px }
@keyframes pulseRing{
  0%  { box-shadow:0 12px 34px -8px rgba(242,176,30,.7), 0 0 0 0 rgba(242,176,30,.5) }
  70% { box-shadow:0 12px 34px -8px rgba(242,176,30,.7), 0 0 0 18px rgba(242,176,30,0) }
  100%{ box-shadow:0 12px 34px -8px rgba(242,176,30,.7), 0 0 0 0 rgba(242,176,30,0) }
}

/* ─────────── АДАПТИВ ─────────── */

@media (max-width:1000px){
  .about{ grid-template-columns:1fr }
  .signup__grid{ grid-template-columns:1fr }
  .lead-teacher{ grid-template-columns:220px 1fr }
  .footer__inner{ grid-template-columns:1fr; text-align:center; justify-items:center }
  .footer__brand{ align-items:center }
  .footer__contacts{ align-items:center }
  .footer__addr{ text-align:center }
}

@media (max-width:860px){
  .burger{ display:flex }
  .header__logo{ width:104px }
  .header.is-stuck .header__logo{ width:88px }
  .nav{
    position:fixed; inset:0 0 0 auto;
    width:min(84vw,340px);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:1.8rem;
    padding:2rem 2.2rem;
    background:rgba(6,10,20,.96);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border-left:1px solid var(--line);
    transform:translateX(100%);
    transition:transform .55s var(--ease-out);
    z-index:75;
  }
  .nav.is-open{ transform:none }
  .nav__link{ font-size:1.25rem; font-family:var(--font-d); color:var(--ink) }
  .nav__phone{ margin-top:.6rem }
  .burger{ position:relative; z-index:78 }
  .fab{ display:grid }
  .lead-teacher{ grid-template-columns:1fr; text-align:center; justify-items:center }
  .lead-teacher__photo{ width:220px }
  .lead-teacher__tel{ justify-content:center }
}

@media (max-width:640px){
  .about__cards{ grid-template-columns:1fr }
  .field--row{ grid-template-columns:1fr }
  .gallery{ grid-auto-rows:180px }
  .gcard--wide{ grid-column:span 2 }
  .gcard--tall{ grid-row:span 1 }
  .hero{ padding:6.5rem 0 4rem }
  .hero__stats{ gap:1.4rem 2rem }
  .hero__actions{ flex-direction:column; width:min(100%,340px) }
  .hero__actions .btn{ width:100% }
  .hero__lead{ font-size:.92rem }
  /* строка юридических документов над копирайтом */
.footer__docs{
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem;
  justify-content:center;
  margin-top:2.4rem;
}
.footer__docs:empty{ display:none }
.footer__docs a{
  font-size:.8rem; color:var(--dim);
  border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.footer__docs a:hover{ color:var(--gold-lt); border-color:rgba(242,176,30,.4) }

.footer__bottom{ justify-content:center; text-align:center }
}

@media (max-width:420px){
  .gallery{ grid-template-columns:1fr 1fr; grid-auto-rows:140px }
  .btn{ padding:.95rem 1.5rem; font-size:.8rem }
}

/* ─────────── БЕРЕЖНЫЙ РЕЖИМ ─────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; filter:none }
  .hero__title span,.hero__title b,.hero__lead,
  .hero__actions,.hero__stats,.hero__scroll,.hero__logo{ opacity:1 }
  .layer{ transform:none !important }
  #magic-sky,#magic-dust,.aurora,.dancer{ display:none }
}