/* Студия танца «Вариация». Один файл стилей на все страницы.
   Цвета меняются здесь, в :root. */

:root{
  --ink:#ffffff; --muted:#a9a6b3; --bg:#0b0b0f; --surface:#141318; --surface2:#1b1a21;
  --line:rgb(255 255 255/.08); --line-2:rgb(255 255 255/.15);
  --accent:#8f2da6; --accent2:#d61fb0; --pink:#ff6fd8; --lime:#c6ff3d;
  --grad:linear-gradient(120deg,#8f2da6,#d61fb0);
  --dark:#111016; --dark2:#08080b; --black:#000;
  --soft:#f3a9e6; --soft-rgb:255 111 216; --glow:214 31 176; --hero-rgb:8 8 11;
  --em:linear-gradient(120deg,#f3a9e6,#ff6fd8,#c6ff3d); --em2:linear-gradient(120deg,#f3a9e6,#ff6fd8);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Manrope',system-ui,sans-serif;color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;
  background-color:var(--bg);position:relative}
body:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E")}
body:after{content:'';position:fixed;left:50%;bottom:-30vh;width:120vw;height:60vh;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center, rgb(var(--glow)/.10), transparent 60%)}

/* Чередующиеся секции: полупрозрачный белый со стеклом и косыми полосками */
.alt{background:rgb(255 255 255/.025);border-block:1px solid var(--line);position:relative}
.alt>.wrap{position:relative}

/* Декоративное слово на фоне секции: <section class="deco" data-word="ТАНЦУЙ"> */
.deco{position:relative;overflow:hidden}
.deco:before{content:attr(data-word);position:absolute;right:-1%;top:-.12em;z-index:0;pointer-events:none;user-select:none;
  font:800 clamp(6rem,17vw,13rem)/1 'Unbounded',sans-serif;letter-spacing:-.03em;color:transparent;
  -webkit-text-stroke:1.5px rgb(255 255 255/.07);white-space:nowrap}
.deco.left:before{right:auto;left:-1%}
.deco.bottom:before{top:auto;bottom:-.18em}
.deco:after{content:'';position:absolute;z-index:0;pointer-events:none;width:480px;height:480px;border-radius:50%;
  right:-160px;bottom:-220px;background:radial-gradient(circle, rgb(var(--glow)/.12), transparent 68%);filter:blur(30px);
  animation:blob 16s ease-in-out infinite alternate}
.deco.left:after{right:auto;left:-180px}
@keyframes blob{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.12)}100%{transform:translate(30px,-20px) scale(.95)}}
.deco>.wrap{position:relative;z-index:1}
h1,h2,h3{font-family:'Unbounded',sans-serif;line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(1.6rem,4.5vw,2.4rem);margin-top:.5rem}
h3{font-size:1.15rem}
p{margin-top:.8rem}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:64rem;margin:0 auto;padding:0 1.25rem}
section{padding:3.5rem 0}
.eyebrow{display:inline-block;font-weight:800;color:var(--pink);letter-spacing:.08em;
  text-transform:uppercase;font-size:.8rem}
.lead{margin-top:1.2rem;font-size:1.15rem;color:var(--muted);max-width:36rem}
.muted{color:var(--muted)}

/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem 2rem;
  border:0;border-radius:999px;font:inherit;font-weight:800;color:#fff;background:var(--grad);
  cursor:pointer;text-decoration:none;box-shadow:0 14px 34px rgb(var(--glow)/.28);transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn-ghost{background:none;color:#fff;border:2px solid rgb(255 255 255/.7);box-shadow:none}
.btn-ghost:hover{background:rgb(255 255 255/.08)}
.btn-lime{background:var(--lime);color:#141220;box-shadow:none}

/* Шапка */
.topbar{background:var(--black);color:#cfcbd8;font-size:.84rem;font-weight:600;border-bottom:1px solid var(--line)}
.topbar a{color:#fff}
.topbar .wrap{display:flex;justify-content:space-between;gap:1rem;padding-top:.45rem;padding-bottom:.45rem}
.topbar a{text-decoration:none;white-space:nowrap}
.topbar span+span{margin-left:1.2rem}
@media(max-width:899px){.topbar .hours{display:none}}
@media(max-width:600px){.topbar .addr{display:none}.topbar .wrap{justify-content:center}}
header{position:sticky;top:0;z-index:10;background:rgb(var(--hero-rgb)/.85);color:#fff;
  backdrop-filter:blur(12px);border-bottom:1px solid rgb(255 255 255/.08)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.logo{font-family:'Philosopher','Georgia',serif;font-style:italic;font-weight:400;font-size:1.05rem;text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.55rem;letter-spacing:.01em}
.logo svg,.logo img{width:42px;height:42px;flex:0 0 auto;border-radius:50%}
.logo small{display:block;font:italic 400 .78rem/1 'Philosopher','Georgia',serif;letter-spacing:.08em;opacity:.85;margin-top:.15rem}
.logo .lt{display:block;line-height:1.05}
.logo em{font-style:italic;font-weight:700;font-size:1.3rem;background:var(--em2);-webkit-background-clip:text;background-clip:text;color:transparent}
.bar nav{display:none;gap:1rem;font-weight:600;font-size:.88rem}
.bar nav a{text-decoration:none;white-space:nowrap}
.bar .tel{font-weight:800;white-space:nowrap;text-decoration:none;display:none}
.burger{display:inline-flex;border:0;background:none;font-size:1.6rem;cursor:pointer;line-height:1}
@media(min-width:1024px){.bar nav{display:flex}.burger{display:none}}
.bar nav a.active{color:var(--soft)}
.mnav{display:none;flex-direction:column;gap:.2rem;padding:.4rem 0 1rem;border-top:1px solid rgb(255 255 255/.1)}
.mnav.open{display:flex}
.mnav a{padding:.6rem 0;text-decoration:none;font-weight:600}
@media(min-width:1024px){.mnav.open{display:none}}

/* Хлебные крошки */
.crumbs{font-size:.88rem;color:var(--muted);padding:1rem 0 0}
.crumbs a{color:#d9cfe8}
.crumbs a{text-decoration:none}

/* Первый экран: сцена с софитами */
.hero{position:relative;overflow:hidden;padding-top:2.5rem;background:var(--dark2);color:#fff;isolation:isolate}
.hero .lead{color:#d9cfe8}
.hero .btn-ghost{color:#fff;border-color:rgb(255 255 255/.7)}
.hero .btn-ghost:hover{background:rgb(255 255 255/.08)}
.hero .fact{background:rgb(255 255 255/.06);border-color:rgb(255 255 255/.12);backdrop-filter:blur(6px)}
.hero .fact span{color:#c9bfd8}
.hero .chip{background:rgb(255 255 255/.08);border-color:rgb(255 255 255/.16);color:#fff}
.hero .crumbs{color:#b9add0;padding:0 0 .6rem}
.hero .crumbs a{color:#d9cfe8}
.stage{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(ellipse 34% 60% at 18% -8%, rgb(255 255 255/.14), transparent 70%),
    radial-gradient(ellipse 30% 55% at 50% -10%, rgb(255 255 255/.10), transparent 70%),
    radial-gradient(ellipse 34% 60% at 84% -8%, rgb(var(--glow)/.22), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgb(255 255 255/.05), transparent 70%)}
.stage.photo{background-size:cover;background-position:center}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.stage.photo:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgb(var(--hero-rgb)/.78),rgb(var(--hero-rgb)/.55) 50%,rgb(var(--hero-rgb)/.94))}
.stage .beam{position:absolute;top:-20%;width:26vw;min-width:220px;height:140%;
  background:linear-gradient(180deg,rgb(255 255 255/.16),rgb(255 255 255/.03) 60%,transparent);
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);filter:blur(6px);transform-origin:50% 0;opacity:.7}
.stage .beam.b1{left:6%;animation:beam 9s ease-in-out infinite alternate}
.stage .beam.b2{left:41%;animation:beam 12s ease-in-out infinite alternate-reverse;background:linear-gradient(180deg,rgb(255 255 255/.12),transparent 65%)}
.stage .beam.b3{right:4%;animation:beam 10s ease-in-out infinite alternate}
@keyframes beam{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.stage .lamp{position:absolute;top:0;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 18px 6px rgb(255 255 255/.55)}
.stage .spark{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;opacity:0;animation:spark 6s linear infinite}
@keyframes spark{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.9}100%{transform:translateY(-140px) scale(1.1);opacity:0}}
.hero .stage:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 120%, transparent 30%, rgb(var(--hero-rgb)/.6) 80%)}
.hero{border-bottom:1px solid var(--line)}
.tagline{display:inline-block;font-family:'Unbounded',sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--soft);margin-top:.9rem}
.hero .wrap{position:relative}
.tag{display:inline-block;background:var(--lime);color:#141220;border-radius:999px;padding:.35rem 1rem;
  font-weight:800;font-size:.85rem}
.hero h1{font-size:clamp(2.1rem,7vw,4rem);margin-top:1rem}
.hero h1 em{font-style:normal;background:var(--em);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.facts{display:grid;gap:1rem;margin-top:2.5rem}
@media(min-width:640px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.1rem}
.fact b{display:block;font-family:'Unbounded',sans-serif;font-size:1.5rem}
.fact span{font-size:.9rem;color:var(--muted)}

/* Внутренний первый экран (страницы направлений) */
.hero-in{padding-top:1.2rem;padding-bottom:2.8rem}
.grid2{display:grid;gap:1.5rem;align-items:center}
.hero-in .grid2{margin-top:1.5rem}
@media(min-width:800px){.grid2{grid-template-columns:1.1fr .9fr}}
.hero-in h1{font-size:clamp(1.9rem,5.5vw,3rem)}
.visual{aspect-ratio:4/3;border-radius:22px;position:relative;overflow:hidden;border:1px solid var(--line-2);
  display:flex;align-items:flex-end;padding:1.2rem;color:#fff;font-weight:800;font-family:'Unbounded',sans-serif;text-transform:uppercase;
  background-color:#17161d;
  background-image:radial-gradient(ellipse 70% 55% at 80% 0%, rgb(255 255 255/.12), transparent 70%),
                   radial-gradient(ellipse 60% 50% at 10% 100%, rgb(var(--glow)/.25), transparent 70%)}
.visual.b{background-color:#14161f;background-image:radial-gradient(ellipse 70% 55% at 80% 0%, rgb(120 160 255/.2), transparent 70%),radial-gradient(ellipse 60% 50% at 10% 100%, rgb(var(--glow)/.18), transparent 70%)}
.visual.c{background-color:#1c1519;background-image:radial-gradient(ellipse 70% 55% at 80% 0%, rgb(var(--soft-rgb)/.25), transparent 70%),radial-gradient(ellipse 60% 50% at 10% 100%, rgb(255 255 255/.06), transparent 70%)}
.visual.d{background-color:#141a17;background-image:radial-gradient(ellipse 70% 55% at 80% 0%, rgb(198 255 61/.16), transparent 70%),radial-gradient(ellipse 60% 50% at 10% 100%, rgb(var(--glow)/.18), transparent 70%)}
.visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.chip{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;
  font-size:.9rem;font-weight:600}

/* Карточки */
.grid{display:grid;gap:1rem;margin-top:2rem}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid{grid-template-columns:repeat(4,1fr)}}
.grid.three{grid-template-columns:1fr}
@media(min-width:640px){.grid.three{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid.three{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  transition:transform .15s;display:block;text-decoration:none}
a.card:hover{transform:translateY(-4px)}
.ph{aspect-ratio:4/4.6;display:flex;align-items:flex-end;padding:1.1rem;color:#fff;font-weight:800;
  background-size:cover;background-position:center;position:relative;
  background-color:#17161d;
  background-image:radial-gradient(ellipse 70% 55% at 80% 0%, rgb(255 255 255/.10), transparent 70%),
                   radial-gradient(ellipse 60% 50% at 10% 100%, rgb(var(--glow)/.22), transparent 70%)}
.ph:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgb(12 7 20/.05) 35%,rgb(12 7 20/.85))}
.ph.b{background-color:#14161f;background-image:radial-gradient(ellipse 70% 55% at 80% 0%, rgb(120 160 255/.18), transparent 70%),radial-gradient(ellipse 60% 50% at 10% 100%, rgb(var(--glow)/.16), transparent 70%)}
.ph.c{background-color:#1c1519;background-image:radial-gradient(ellipse 70% 55% at 80% 0%, rgb(var(--soft-rgb)/.22), transparent 70%),radial-gradient(ellipse 60% 50% at 10% 100%, rgb(255 255 255/.06), transparent 70%)}
.ph.d{background-color:#141a17;background-image:radial-gradient(ellipse 70% 55% at 80% 0%, rgb(198 255 61/.14), transparent 70%),radial-gradient(ellipse 60% 50% at 10% 100%, rgb(var(--glow)/.16), transparent 70%)}
.ph>span{position:relative;font-family:'Unbounded',sans-serif;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.1;text-transform:uppercase;letter-spacing:-.01em}
.ph .age{position:absolute;left:1rem;top:1rem;background:var(--grad);color:#fff;font-family:'Unbounded',sans-serif;font-weight:800;
  font-size:.85rem;padding:.3rem .65rem;border-radius:8px;box-shadow:0 6px 18px rgb(var(--glow)/.4)}
.ph .fig{position:absolute;right:-6%;bottom:-4%;width:62%;opacity:.16;pointer-events:none}
.ph.img .fig{display:none}
.card .in{padding:1rem 1.1rem 1.2rem}
.card .in b{display:none}
.card .in p{font-size:.9rem;color:var(--muted);margin-top:0}
.price{font-weight:800;margin-top:.6rem;color:var(--pink);font-size:.9rem}
.box{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.4rem}
.box h3{margin-bottom:.4rem}
.box p{color:var(--muted);font-size:.95rem}
.box.lime{background:var(--lime);border:0;color:#141220}
.box.lime p,.box.lime h3{color:#141220}

/* Таблицы */
.scroll{overflow-x:auto;margin-top:1.5rem;border-radius:16px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;background:var(--surface);font-size:.95rem}
th,td{padding:.8rem .9rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{white-space:nowrap}
td{white-space:normal;font-size:.93rem}
td:first-child{white-space:nowrap}
th{background:rgb(255 255 255/.06);font-weight:800}
tr:last-child td{border-bottom:0}
td.sum{font-weight:800}

/* Список "что даёт" */
.checks{list-style:none;margin-top:1rem}
.checks li{padding:.5rem 0 .5rem 1.8rem;position:relative;border-bottom:1px solid var(--line)}
.checks li:last-child{border-bottom:0}
.checks li:before{content:'';position:absolute;left:0;top:.95rem;width:10px;height:10px;border-radius:50%;background:var(--grad)}

/* Педагоги */
.team{display:grid;gap:1rem;margin-top:2rem}
@media(min-width:640px){.team{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.team{grid-template-columns:repeat(3,1fr)}}
.person{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.2rem;
  display:flex;gap:.9rem;align-items:center}
.ava{width:56px;height:56px;border-radius:50%;background:var(--grad);flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;color:#fff;font-weight:800;overflow:hidden}
.ava img{width:100%;height:100%;object-fit:cover;object-position:top}
.ava.big{width:100%;height:auto;aspect-ratio:4/5;border-radius:16px;margin-bottom:.9rem}
.tcard b{display:block;font-family:'Unbounded',sans-serif;font-size:1rem}
.person b{display:block}
.person span{font-size:.88rem;color:var(--muted)}

/* Шаги */
.steps{display:grid;gap:1rem;margin-top:2rem;counter-reset:s}
@media(min-width:800px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.2rem;counter-increment:s}
.step:before{content:counter(s);display:inline-flex;width:32px;height:32px;border-radius:50%;
  background:var(--lime);color:#141220;font-weight:800;align-items:center;justify-content:center;margin-bottom:.6rem}
.step p{font-size:.92rem;color:var(--muted);margin-top:.3rem}

/* Вопросы */
details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;margin-top:.7rem}
summary{font-weight:800;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
details p{color:var(--muted);font-size:.95rem}

/* Баннер звания */
.award{display:grid;gap:1.2rem;align-items:center;margin-top:2rem;padding:1.6rem;border-radius:22px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,rgb(255 255 255/.06),rgb(255 255 255/.02));border:1px solid rgb(var(--soft-rgb)/.3);
  box-shadow:0 0 0 1px rgb(255 255 255/.03) inset,0 20px 60px rgb(0 0 0/.4)}
@media(min-width:700px){.award{grid-template-columns:auto 1fr auto}}
.award .star{width:74px;height:74px;flex:0 0 auto}
.award .lbl{display:inline-block;border:1px solid rgb(var(--soft-rgb)/.6);color:var(--pink);border-radius:999px;padding:.25rem .8rem;
  font-family:'Unbounded',sans-serif;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.award h3{font-size:clamp(1.1rem,2.4vw,1.5rem);text-transform:uppercase;margin-top:.6rem;line-height:1.15}
.award h3 em{font-style:normal;color:var(--pink)}
.award p{color:#d9cfe8;font-size:.95rem;margin-top:.4rem}
.award .glow{position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle, rgb(var(--soft-rgb)/.25), transparent 65%);filter:blur(20px);pointer-events:none}
.award .spk{position:absolute;width:6px;height:6px;background:#fff;border-radius:50%;box-shadow:0 0 12px 3px rgb(255 255 255/.8);animation:pulse 2.4s ease-in-out infinite}

/* Карта */
.map{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line-2);background:var(--surface);margin-top:1.5rem}
.map .pin a{color:var(--accent)}
.map iframe{display:block;width:100%;height:380px;border:0}
.map .pin{position:absolute;left:1rem;top:1rem;background:#fff;color:#141220;border-radius:14px;padding:.9rem 1.1rem;
  box-shadow:0 10px 30px rgb(20 18 32/.18);max-width:18rem;font-size:.92rem}
.map .pin b{display:block;font-family:'Unbounded',sans-serif;font-size:.85rem;margin-bottom:.2rem}
@media(max-width:600px){.map .pin{position:static;border-radius:0;box-shadow:none;max-width:none;border-bottom:1px solid var(--line)}}

/* Видео */
.video{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:var(--dark);margin-top:1.5rem}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vgrid{display:grid;gap:1rem;margin-top:1.5rem}
@media(min-width:700px){.vgrid{grid-template-columns:repeat(2,1fr)}}
.vgrid .video{margin-top:0;border-radius:16px}

/* Галерея-заглушка */
.gal{display:grid;gap:.7rem;margin-top:1.5rem;grid-template-columns:repeat(2,1fr)}
.vgrid+.gal,.gal+.vgrid{margin-top:1rem}
@media(min-width:700px){.gal{grid-template-columns:repeat(4,1fr)}}
.gal div{aspect-ratio:1;border-radius:14px;background:rgb(255 255 255/.04);border:1px solid var(--line)}
.gal div:nth-child(3n){background:rgb(255 255 255/.06)}

/* Тёмный блок с формой */
.dark{background:var(--black);color:#fff;position:relative;overflow:hidden;border-block:1px solid var(--line)}
.dark:before{content:'';position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle, rgb(var(--glow)/.2), transparent 68%);filter:blur(20px);pointer-events:none}
.dark .wrap{position:relative}
.dark h2{color:#fff}
.dark .lead{color:#c9c0dd}
.dark .eyebrow{color:var(--lime)}
.form{background:rgb(255 255 255/.05);border:1px solid var(--line-2);backdrop-filter:blur(8px);color:var(--ink);border-radius:22px;padding:1.6rem;max-width:34rem;margin-top:1.6rem}
label{display:block;font-weight:800;font-size:.9rem;margin-top:.9rem}
input,textarea,select{width:100%;margin-top:.35rem;padding:.85rem 1rem;border:1px solid var(--line-2);border-radius:12px;font:inherit;background:rgb(0 0 0/.25);color:#fff}
input::placeholder,textarea::placeholder{color:#7d7190}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgb(var(--soft-rgb)/.2)}
.note{font-size:.78rem;color:var(--muted);margin-top:.8rem}
.err{display:none;color:#ff8aa8;font-weight:600;margin-top:.8rem}
.ok-msg{display:none;background:rgb(198 255 61/.12);border:1px solid rgb(198 255 61/.4);color:var(--ink);border-radius:14px;padding:1.2rem;font-weight:800;text-align:center;max-width:34rem;margin-top:1.6rem}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* Подвал */
footer{padding:2.5rem 0;background:var(--black);color:#9c98a8;font-size:.9rem;border-top:1px solid var(--line)}
footer .logo{color:#fff}
footer .soc{display:flex;gap:.6rem;margin-top:.9rem}
footer .soc a{width:36px;height:36px;border-radius:50%;background:rgb(255 255 255/.08);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;color:#fff}
footer .soc a:hover{background:var(--accent)}
.fgrid{display:grid;gap:1.5rem;margin-top:1.2rem}
@media(min-width:700px){.fgrid{grid-template-columns:1.2fr 1fr 1fr}}
footer h4{color:#fff;margin-bottom:.5rem;font-size:.95rem}
footer ul{list-style:none}
footer li{margin:.3rem 0}
footer a{text-decoration:none}
footer a:hover{color:#fff}
.copy{margin-top:1.8rem;padding-top:1rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between}

/* ---------- Эффекты ---------- */

/* Появление при прокрутке */
.rv,.rv-kids>*{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.on,.rv-kids>.on{opacity:1;transform:none}


/* Переливающийся градиентный текст */
.hero h1 em,.logo em{background-size:200% 100%;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% 0}}

/* Кнопка с бликом */
.btn{position:relative;overflow:hidden}
.btn:not(.btn-ghost):not(.btn-lime):after{content:'';position:absolute;top:0;left:-70%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgb(255 255 255/.45),transparent);transform:skewX(-20deg);transition:left .5s}
.btn:hover:after{left:130%}

/* Карточки: подсветка рамки градиентом при наведении, наклон за курсором */
.card,.box,.person,.step{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
a.card:hover,.tilt:hover{box-shadow:0 18px 40px rgb(123 47 247/.16);border-color:transparent}
.tilt{will-change:transform}

/* Шапка сжимается */
header{transition:box-shadow .3s}
header.small{box-shadow:0 6px 24px rgb(20 18 32/.08)}
header.small .bar{padding:.45rem 0}
header.small .logo small{display:none}
.bar{transition:padding .3s}

/* Бегущая строка */
.marquee{overflow:hidden;background:var(--black);color:#fff;padding:.9rem 0;font-family:'Unbounded',sans-serif;font-weight:800;
  font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;border-block:1px solid #2a2440}
.marquee .track{display:inline-block;animation:marquee 38s linear infinite}
.marquee span{display:inline-block;padding:0 1.4rem}
.marquee span:after{content:'✦';color:var(--soft);margin-left:2.8rem}
.marquee{border-block:1px solid var(--line)}
.marquee:hover .track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Подбор по возрасту */
.age-pick{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.age-btn{font:inherit;font-weight:800;padding:.6rem 1.1rem;border-radius:999px;border:2px solid var(--line-2);background:var(--surface);color:#fff;
  cursor:pointer;transition:all .2s}
.age-btn:hover{border-color:var(--pink)}
.age-btn.active{background:var(--lime);color:#141220;border-color:var(--lime)}
#age-hint{margin-top:.8rem;font-size:.95rem;color:var(--muted);min-height:1.4em}
[data-ages]{transition:opacity .35s,transform .35s,filter .35s}
[data-ages].dim{opacity:.32;filter:grayscale(.6)}
.card[data-ages].hit{transform:translateY(-4px);box-shadow:0 18px 40px rgb(123 47 247/.18)}
tr[data-ages].hit td{background:rgb(var(--glow)/.14)}

/* Видео с обложкой и кнопкой */
.video[data-src]{cursor:pointer;background:var(--grad) center/cover}
.video[data-src][style]{background-size:cover;background-position:center}
.video video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.video[data-src]:before{content:attr(data-title);position:absolute;left:1.2rem;bottom:1.1rem;color:#fff;font-weight:800;
  font-family:'Unbounded',sans-serif;font-size:.95rem;text-shadow:0 2px 12px rgb(0 0 0/.4)}
.play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:0;
  background:#fff;cursor:pointer;box-shadow:0 10px 30px rgb(0 0 0/.3);transition:transform .2s}
.play span{position:absolute;left:31px;top:24px;border-left:22px solid var(--accent2);border-top:14px solid transparent;border-bottom:14px solid transparent}
.video:hover .play{transform:scale(1.08)}
.play:before{content:'';position:absolute;inset:-10px;border-radius:50%;border:2px solid rgb(255 255 255/.6);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.4);opacity:0}}

/* Липкая кнопка записи на телефоне */
#sticky-cta{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:30;transform:translateY(120%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
#sticky-cta.show{transform:none}
#sticky-cta .btn{width:100%;box-shadow:0 14px 34px rgb(20 18 32/.3)}
@media(min-width:900px){#sticky-cta{display:none}}
@media(max-width:899px){body{padding-bottom:4.6rem}}

/* Таймлайн занятия */
.tl{list-style:none;margin-top:1.5rem;position:relative;padding-left:2rem}
.tl:before{content:'';position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tl li{position:relative;padding:.5rem 0 .9rem}
.tl li:before{content:'';position:absolute;left:-2rem;top:.85rem;width:20px;height:20px;border-radius:50%;background:var(--grad);
  box-shadow:0 0 0 4px var(--bg)}
.tl b{display:block}
.tl span{color:var(--muted);font-size:.93rem}
.tl small{display:inline-block;background:var(--lime);color:#141220;border-radius:999px;padding:.1rem .6rem;font-weight:800;margin-left:.4rem;font-size:.78rem}

/* Уровни */
.levels{display:grid;gap:.8rem;margin-top:1.5rem}
@media(min-width:700px){.levels{grid-template-columns:repeat(3,1fr)}}
.level{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.1rem;position:relative;overflow:hidden}
.level:before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--grad)}
.level:nth-child(2):before{background:linear-gradient(#2f7bf7,#2fd8f7)}
.level:nth-child(3):before{background:linear-gradient(#f7802f,#f7c52f)}
.level b{display:block;font-family:'Unbounded',sans-serif;font-size:.95rem}
.level p{font-size:.92rem;color:var(--muted);margin-top:.3rem}

/* Педагог на странице направления */
.teacher{display:flex;gap:1.2rem;align-items:center;background:var(--surface2);border:1px solid var(--line-2);color:#fff;border-radius:22px;padding:1.4rem;margin-top:1.5rem}
.teacher .ava{width:72px;height:72px;font-size:1.2rem}
.teacher b{display:block;font-family:'Unbounded',sans-serif}
.teacher span{color:var(--muted);font-size:.92rem}

/* Лайтбокс */
.lightbox{position:fixed;inset:0;background:rgb(15 12 26/.92);display:flex;align-items:center;justify-content:center;
  z-index:50;opacity:0;pointer-events:none;transition:opacity .25s;padding:2rem}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:100%;max-height:100%;border-radius:12px}
.lb-close{position:absolute;top:1rem;right:1rem;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#141220;font-size:1.6rem;cursor:pointer}
.gal-item{display:block;overflow:hidden;border-radius:14px}
.gal-item img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;transition:transform .4s}
.gal-item:hover img{transform:scale(1.06)}

/* Заглушки фото шевелятся, пока нет настоящих */
.gal div{position:relative;overflow:hidden}
.gal div:after{content:'фото';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#5e5272;font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.visual:after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgb(255 255 255/.18) 50%,transparent 70%);
  background-size:200% 100%;animation:shine 4s linear infinite}

/* Числа в hero пульсируют один раз при появлении */
.fact b{background:var(--em2);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .fact b{background:var(--em2);-webkit-background-clip:text;background-clip:text;color:transparent}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .rv,.rv-kids>*{opacity:1;transform:none}
}




/* ---------- Варианты оформления для выбора заказчиком ----------
   Переключатель внизу слева, выбор запоминается в браузере.
   Когда Мария выберет: THEME_PICKER = False и DEFAULT_THEME в data.py. */

/* БОРДО: бордовый фон, пудрово-розовый, крем. Как у студий пилатеса */
[data-theme="bordo"]{--bg:#3b1020;--surface:#4b1629;--surface2:#571a30;--ink:#fff5f0;--muted:#e3bcc8;
  --line:rgb(255 255 255/.10);--line-2:rgb(255 255 255/.18);
  --accent:#8a2440;--accent2:#d2527c;--grad:linear-gradient(120deg,#8a2440,#d2527c);
  --pink:#f2c9d3;--soft:#f2c9d3;--soft-rgb:242 201 211;--lime:#f6d6a8;--glow:210 82 124;
  --dark:#2c0a17;--dark2:#2c0a17;--black:#240812;--hero-rgb:44 10 23;
  --em:linear-gradient(120deg,#f2c9d3,#ffb3c7,#f6d6a8);--em2:linear-gradient(120deg,#f2c9d3,#ffb3c7)}
[data-theme="bordo"] body:before{opacity:.35}
[data-theme="bordo"] .alt{background:rgb(0 0 0/.12)}
[data-theme="bordo"] .ph,[data-theme="bordo"] .visual{background-color:#571a30}
[data-theme="bordo"] .ph:before{background:linear-gradient(180deg,rgb(44 10 23/.05) 35%,rgb(44 10 23/.88))}
[data-theme="bordo"] .box.lime,[data-theme="bordo"] .tag,[data-theme="bordo"] .age-btn.active,[data-theme="bordo"] .step:before,[data-theme="bordo"] .tl small{color:#3b1020}
[data-theme="bordo"] .theme-pick{background:rgb(36 8 18/.9)}

/* ПЕСОК: бежевый фон, тёмная тёплая шапка, коралловый акцент, оливковые метки. Как у студий йоги */
[data-theme="sand"]{--bg:#ebe3d4;--surface:#faf6ee;--surface2:#f3ecdd;--ink:#26231f;--muted:#6f685d;
  --line:rgb(38 35 31/.10);--line-2:rgb(38 35 31/.20);
  --accent:#d9572b;--accent2:#e6853f;--grad:linear-gradient(120deg,#d9572b,#e6853f);
  --pink:#b8471f;--soft:#ffd9b8;--soft-rgb:217 87 43;--lime:#d8dd9a;--glow:217 87 43;
  --dark:#2c241c;--dark2:#2c241c;--black:#2c241c;--hero-rgb:44 36 28;
  --em:linear-gradient(120deg,#ffd9b8,#ffb08a,#d8dd9a);--em2:linear-gradient(120deg,#ffb08a,#e6853f)}
[data-theme="sand"] body:before{opacity:.3}
[data-theme="sand"] body:after{background:radial-gradient(ellipse at center, rgb(var(--glow)/.08), transparent 60%)}
[data-theme="sand"] .alt{background:#f5efe3}
[data-theme="sand"] .deco:before{-webkit-text-stroke:1.5px rgb(38 35 31/.10)}
[data-theme="sand"] .deco:after{background:radial-gradient(circle, rgb(var(--glow)/.10), transparent 68%)}
[data-theme="sand"] .btn-ghost{color:var(--ink);border-color:var(--ink)}
[data-theme="sand"] .btn-ghost:hover{background:rgb(38 35 31/.06)}
[data-theme="sand"] .hero .btn-ghost{color:#fff;border-color:rgb(255 255 255/.7)}
[data-theme="sand"] .crumbs a{color:var(--accent)}
[data-theme="sand"] .fact b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="sand"] .hero .fact b{background:var(--em2);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="sand"] .age-btn{color:var(--ink);border-color:var(--line-2)}
[data-theme="sand"] .age-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}
[data-theme="sand"] th{background:#efe6d6}
[data-theme="sand"] tr[data-ages].hit td{background:#fbe6d6}
[data-theme="sand"] .card,[data-theme="sand"] .box,[data-theme="sand"] .person,[data-theme="sand"] .step,[data-theme="sand"] details,[data-theme="sand"] .level{box-shadow:0 6px 24px rgb(38 35 31/.06)}
[data-theme="sand"] a.card:hover,[data-theme="sand"] .tilt:hover{box-shadow:0 18px 40px rgb(217 87 43/.16)}
[data-theme="sand"] .ph,[data-theme="sand"] .visual{background-color:#3a3128}
[data-theme="sand"] .award{background:#faf6ee;border-color:rgb(217 87 43/.3);box-shadow:0 20px 60px rgb(217 87 43/.08)}
[data-theme="sand"] .award p{color:var(--muted)}
[data-theme="sand"] .award .lbl{color:var(--accent);border-color:rgb(217 87 43/.5)}
[data-theme="sand"] .award h3 em{color:var(--accent)}
[data-theme="sand"] .gal div{background:#f1eadc;border-color:var(--line)}
[data-theme="sand"] .gal div:after{color:#b3a894}
[data-theme="sand"] .price{color:var(--accent)}
[data-theme="sand"] .tl li:before{box-shadow:0 0 0 4px var(--bg)}
[data-theme="sand"] .topbar{color:#d9cfc0}
[data-theme="sand"] .marquee{color:#f5efe3}
[data-theme="sand"] .marquee span:after{color:#ffb08a}
[data-theme="sand"] .step:before,[data-theme="sand"] .tl small,[data-theme="sand"] .age-btn.active,[data-theme="sand"] .box.lime,[data-theme="sand"] .tag{color:#26231f}
[data-theme="sand"] .box.lime{background:var(--lime)}
[data-theme="sand"] .theme-pick{background:rgb(44 36 28/.92)}


/* ФИОЛЕТОВЫЙ: как первая выкладка на Cloudflare. Глубокий фиолетовый фон со свечениями,
   градиентная полоска адреса и бегущая строка, малиновые софиты */
[data-theme="purple"]{--bg:#0f0a18;--surface:#181025;--surface2:#1f1530;--ink:#fff;--muted:#b3a7c6;
  --line:rgb(255 255 255/.09);--line-2:rgb(255 255 255/.16);
  --accent:#8f2da6;--accent2:#d61fb0;--grad:linear-gradient(120deg,#8f2da6,#d61fb0);
  --pink:#ff6fd8;--soft:#f3a9e6;--soft-rgb:255 111 216;--lime:#c6ff3d;--glow:214 31 176;
  --dark:#1a0e24;--dark2:#0c0714;--black:#0c0714;--hero-rgb:18 8 24;
  --em:linear-gradient(120deg,#f3a9e6,#ff6fd8,#c6ff3d);--em2:linear-gradient(120deg,#f3a9e6,#ff6fd8)}
[data-theme="purple"] body{background-image:
    radial-gradient(ellipse 60% 45% at 100% 10%, rgb(143 45 166/.22), transparent 70%),
    radial-gradient(ellipse 55% 40% at 0% 60%, rgb(214 31 176/.14), transparent 70%),
    radial-gradient(ellipse 50% 35% at 60% 100%, rgb(143 45 166/.16), transparent 70%)}
[data-theme="purple"] body:before{display:none}
[data-theme="purple"] .topbar{background:var(--grad);color:#fff;border:0}
[data-theme="purple"] header{background:rgb(26 14 36/.9)}
[data-theme="purple"] .marquee{background:var(--grad);border:0}
[data-theme="purple"] .marquee span:after{color:var(--lime)}
[data-theme="purple"] .stage{background:
    radial-gradient(ellipse 34% 60% at 18% -8%, rgb(255 255 255/.13), transparent 70%),
    radial-gradient(ellipse 30% 55% at 50% -10%, rgb(214 31 176/.38), transparent 70%),
    radial-gradient(ellipse 34% 60% at 84% -8%, rgb(143 45 166/.5), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgb(143 45 166/.25), transparent 70%)}
[data-theme="purple"] .stage .beam.b2{background:linear-gradient(180deg,rgb(255 180 240/.2),transparent 65%)}
[data-theme="purple"] .ph,[data-theme="purple"] .visual{background-color:#1c1130;
  background-image:radial-gradient(ellipse 70% 55% at 80% 0%, rgb(214 31 176/.45), transparent 70%),radial-gradient(ellipse 60% 50% at 10% 100%, rgb(143 45 166/.5), transparent 70%)}
[data-theme="purple"] .ph:before{background:linear-gradient(180deg,rgb(18 8 24/.05) 35%,rgb(18 8 24/.85))}
[data-theme="purple"] .dark{background:linear-gradient(160deg,#2a1240,#12081a 60%);border:0}
[data-theme="purple"] .dark:before{background:radial-gradient(circle, rgb(214 31 176/.35), transparent 68%)}
[data-theme="purple"] .award{background:linear-gradient(120deg,rgb(143 45 166/.35),rgb(214 31 176/.15) 60%,rgb(12 7 20/.2));border-color:rgb(255 111 216/.35);box-shadow:0 20px 60px rgb(214 31 176/.15)}
[data-theme="purple"] .teacher{background:var(--grad);border:0}
[data-theme="purple"] .teacher span{color:#fbe3f6}
[data-theme="purple"] .teacher .ava{background:#fff;color:var(--accent)}
[data-theme="purple"] footer{background:#0c0714}
[data-theme="purple"] .deco:before{-webkit-text-stroke:2px rgb(255 255 255/.09)}
[data-theme="purple"] .deco:after{background:radial-gradient(circle, rgb(214 31 176/.28), transparent 68%)}
[data-theme="purple"] .theme-pick{background:rgb(26 14 36/.9)}

/* Переключатель */
.theme-pick{position:fixed;left:1rem;bottom:1rem;z-index:40;display:flex;gap:.3rem;padding:.35rem;border-radius:999px;
  background:rgb(20 18 32/.85);backdrop-filter:blur(10px);border:1px solid rgb(255 255 255/.15);box-shadow:0 10px 30px rgb(0 0 0/.35)}
.theme-pick span{align-self:center;color:#cfcbd8;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:0 .5rem}
.theme-pick button{font:inherit;font-size:.82rem;font-weight:800;color:#fff;background:none;border:0;border-radius:999px;padding:.45rem .8rem;cursor:pointer}
.theme-pick button.on{background:#fff;color:#141220}
.theme-pick .tp-link{align-self:center;color:#c6ff3d;font-size:.78rem;font-weight:800;text-decoration:none;padding:0 .8rem 0 .5rem;border-left:1px solid rgb(255 255 255/.2);margin-left:.2rem}
@media(max-width:899px){.theme-pick{bottom:5.2rem;left:.6rem}.theme-pick span{display:none}}

/* Расписание: вкладки дней, легенда, сетка залы × время, список на телефоне */
.tt-stats{display:flex;gap:1.6rem;flex-wrap:wrap;margin:1.4rem 0 .4rem}
.tt-stats div{display:flex;align-items:baseline;gap:.45rem}
.tt-stats b{font:800 1.6rem/1 'Unbounded',sans-serif;background:var(--em);-webkit-background-clip:text;background-clip:text;color:transparent}
.tt-stats span{color:var(--muted);font-size:.85rem}
.tt{margin-top:1.4rem}
.tt-tabs{display:flex;gap:.5rem;flex-wrap:wrap}
.tt-tab{font:inherit;padding:.5rem .9rem;border-radius:16px;border:1px solid var(--line-2);background:var(--surface);color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;min-width:96px;text-align:left;transition:border-color .2s,transform .2s,background .2s;position:relative}
.tt-tab b{font-size:1.05rem;font-weight:800}
.tt-tab span{font-size:.7rem;font-weight:600;color:var(--muted);margin-top:.2rem}
.tt-tab em{font-style:normal;font-size:.66rem;color:var(--muted);margin-top:.15rem}
.tt-tab:hover{border-color:var(--pink);transform:translateY(-2px)}
.tt-tab.active{background:var(--lime);border-color:var(--lime);color:#141220}
.tt-tab.active span,.tt-tab.active em{color:#141220}
.tt-tab.today:before{content:'сегодня';position:absolute;top:-.55rem;right:.6rem;font-size:.58rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--pink);color:#141220;padding:.1rem .4rem;border-radius:999px}
.tt-legend{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:1rem 0}
.tt-leg{font:inherit;font-size:.8rem;font-weight:700;padding:.35rem .7rem;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;transition:color .2s,border-color .2s,background .2s}
.tt-leg i{width:10px;height:10px;border-radius:50%;background:var(--cat);box-shadow:0 0 10px var(--cat)}
.tt-leg:hover{color:#fff;border-color:var(--cat)}
.tt-leg.active{color:#141220;background:var(--cat);border-color:var(--cat)}
.tt-leg.active i{background:#141220;box-shadow:none}
.tt-hint{font-size:.72rem;color:var(--muted);margin-left:.2rem}
.baby{--cat:#c6ff3d}.kids{--cat:#ff6fd8}.teen{--cat:#d61fb0}.adult{--cat:#f3a9e6}.ens{--cat:#8f2da6}
.tt-day{display:none}.tt-day.active{display:block;animation:ttin .35s ease}
@keyframes ttin{from{opacity:0;transform:translateY(8px)}}
.tt-grid{display:grid;grid-template-columns:54px repeat(4,1fr);background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:.6rem .6rem .8rem;position:relative}
.tt-hd{grid-row:1;font-size:.74rem;font-weight:800;color:var(--muted);text-align:center;padding:.3rem 0 .6rem;letter-spacing:.06em;text-transform:uppercase}
.tt-t{grid-column:1;font-size:.72rem;font-weight:700;color:var(--muted);padding-right:.6rem;text-align:right;transform:translateY(-.6em)}
.tt-c{border-top:1px dashed rgb(255 255 255/.06);border-left:1px solid rgb(255 255 255/.05)}
.tt-c.h{border-top:1px solid rgb(255 255 255/.12)}
.tt-gap{grid-column:1/-1;display:flex;align-items:center;gap:.6rem;font-size:.66rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;padding:0 .2rem}
.tt-gap:before,.tt-gap:after{content:'';flex:1;border-top:1px dashed var(--line-2)}
.tt-l{margin:2px 3px;border-radius:9px;padding:.4rem .55rem;background:color-mix(in srgb,var(--cat) 24%,var(--surface2));border-left:3px solid var(--cat);font-size:.74rem;line-height:1.2;overflow:hidden;color:#fff;transition:opacity .25s,transform .2s,box-shadow .2s;cursor:pointer;z-index:1;position:relative}
.tt-l b{display:block;font-size:.82rem;font-weight:800}
.tt-l i{font-style:normal;color:var(--cat);font-weight:700;font-size:.7rem}
.tt-l span{display:block;color:var(--muted);font-size:.68rem;margin-top:.15rem}
.tt-l:hover,.tt-l:focus-visible{transform:scale(1.03);z-index:3;outline:none;box-shadow:0 12px 30px rgb(0 0 0/.45),0 0 0 1px var(--cat)}
.tt-l.dim,.tt-item.dim{opacity:.15;filter:grayscale(1)}
.tt-l.now,.tt-item.now{box-shadow:0 0 0 2px var(--lime);animation:ttnow 1.8s ease-in-out infinite}
@keyframes ttnow{50%{box-shadow:0 0 0 5px rgb(198 255 61/.3)}}
.tt-now{position:absolute;left:54px;right:.6rem;height:0;border-top:2px solid var(--lime);z-index:2;pointer-events:none}
.tt-now:before{content:'';position:absolute;left:-6px;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.tt-now span{position:absolute;right:0;top:-1.3rem;font-size:.62rem;font-weight:800;color:#141220;background:var(--lime);padding:.05rem .45rem;border-radius:999px}
.tt-rest{padding:1.6rem;border:1px dashed var(--line-2);border-radius:18px;background:var(--surface)}
.tt-rest b{display:block;margin-bottom:.3rem}.tt-rest span{color:var(--muted);font-size:.92rem}
.tt-list{display:none}
.tt-item{display:flex;gap:.9rem;padding:.8rem .9rem;border:1px solid var(--line);border-left:4px solid var(--cat);border-radius:14px;background:var(--surface);margin-bottom:.6rem;transition:opacity .25s;cursor:pointer}
.tt-item .t{font-weight:800;min-width:52px;line-height:1.1}
.tt-item .t small{display:block;color:var(--muted);font-weight:600;font-size:.78rem}
.tt-item b{display:block}
.tt-item .age{font-style:normal;color:var(--cat);font-weight:700;font-size:.85rem}
.tt-item span{display:block;color:var(--muted);font-size:.85rem;margin-top:.15rem}
.form input.flash{box-shadow:0 0 0 2px var(--lime);transition:box-shadow .3s}
@media(max-width:720px){.tt-grid{display:none}.tt-list{display:block}.tt-tab{min-width:0;padding:.45rem .7rem}.tt-tab span{display:none}.tt-stats{gap:1rem}.tt-stats b{font-size:1.3rem}}

/* Таблицы на телефоне: каждая строка становится карточкой, без прокрутки вбок.
   Подписи колонок берутся из data-label, их ставит site.js по заголовкам th */
@media(max-width:720px){
  .scroll{overflow:visible;border:0;border-radius:0}
  .scroll table,.scroll tbody{display:block;background:none}
  .scroll tr{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.6rem .9rem;margin-bottom:.6rem}
  .scroll tr:first-child{display:none}
  .scroll td{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border:0;white-space:normal;text-align:right;font-size:.92rem}
  .scroll td:first-child{display:block;text-align:left;font-weight:800;font-size:1rem;padding-bottom:.45rem;border-bottom:1px solid var(--line);margin-bottom:.2rem}
  .scroll td:first-child a{text-decoration:none}
  .scroll td:not(:first-child):before{content:attr(data-label);color:var(--muted);font-weight:600;text-align:left;flex:0 0 auto}
  tr[data-ages].hit td{background:none}
  tr[data-ages].hit{border-color:var(--pink);box-shadow:0 0 0 2px rgb(var(--soft-rgb)/.25)}
}

/* Почему «Вариация»: 12 карточек с номерами */
.why{display:grid;gap:1rem;margin-top:2rem}
@media(min-width:640px){.why{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.why{grid-template-columns:repeat(3,1fr)}}
.why .box{position:relative;padding-top:1.3rem}
.why .box i{position:absolute;right:1.1rem;top:.9rem;font:800 1.6rem/1 'Unbounded',sans-serif;font-style:normal;background:var(--em2);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.55}
.why .box h3{font-size:1.02rem;padding-right:2.6rem}