/* SlavaSwim Dubai Academy - стили сайта. Токены из Figma «SLAVASWIM перенос». */
/* =====================================================================
1. ТОКЕНЫ
Все значения взяты из макета Figma SLAVASWIM (node 42-132).
===================================================================== */
:root{
/* --- палитра (переменные Figma) --- */
--blue-50:#F0F7FF; --blue-600:#4A5E8A; --blue-800:#263656; --blue-900:#172440; --blue-950:#0B1426; /* синий, на тон светлее исходного */
--neutral-50:#F9F7F3; --neutral-100:#F4F2EE; --neutral-200:#E7E6E3; --neutral-300:#D3D1D0;
--neutral-400:#9FA0A1; --neutral-500:#707277; --neutral-600:#50535A; --neutral-800:#252832;
--gold-300:#E6C78A; --gold-400:#D3BA8A; --gold-500:#C3A56D; --gold-600:#AA8647;
--slate-50:#F8FAFC; --slate-800:#1E293B; --tw-blue-50:#EFF6FF;
--white:#FFFFFF;
/* --- производные цвета эффектов (заливки/обводки с прозрачностью из макета) --- */
--glass-05:rgba(226,232,240,.05); /* slate-200 · 5% */
--glass-10:rgba(226,232,240,.10); /* slate-200 · 10% */
--stroke-glass:rgba(240,247,255,.20); /* синий/50 · 20% */
--stroke-glass-grad:linear-gradient(180deg,rgba(240,247,255,.20) 0%,rgba(66,84,124,.20) 100%); /* обводка стекла: синий/50 → синий/600, 20%, внутрь */
--nav-active:rgba(36,48,68,.80); /* slate-800 · 80% */
--stroke-gold:rgba(180,121,43,.26);
--grad-gold:radial-gradient(121% 290% at -9% 85%,#B4792B 0%,#C79241 25%,#DAAA57 50%,#FFDB83 100%); /* золото текста: цифры, кавычки */
/* золото кнопок: те же 4 цвета макета, мягкие пятна вразнобой без резких переходов */
--grad-gold-btn:
radial-gradient(70% 190% at 84% 18%,rgba(255,219,131,.5) 0%,rgba(255,219,131,0) 100%),
radial-gradient(56% 170% at 20% 6%,rgba(232,190,110,.6) 0%,rgba(232,190,110,0) 100%),
radial-gradient(64% 210% at 52% 112%,rgba(180,121,43,.4) 0%,rgba(180,121,43,0) 100%),
radial-gradient(52% 200% at -2% 100%,rgba(180,121,43,.34) 0%,rgba(180,121,43,0) 100%),
#D2A65A;
--stroke-gold-btn:rgba(180,121,43,.14); /* обводка кнопки по макету: #B4792B · 14%, 2px внутрь */
--grad-title-light:linear-gradient(82.32deg,var(--tw-blue-50) 46.79%,rgba(248,250,252,.33) 99.82%);
--grad-title-dark:linear-gradient(82.32deg,var(--neutral-800) 40%,var(--neutral-500) 100%); /* в макете заливка текстурой - заменена градиентом той же тональности */
--white-90:rgba(255,255,255,.90);
--stroke-ring:rgba(226,232,240,.30);
--veil-teal:linear-gradient(180deg,rgba(24,89,110,0) 1.73%,#18596E 100%);
--shadow-card:0 2px 20px rgba(0,0,0,.15);
--dcard-shadow:none; /* ТЕСТ: тень карточек направлений выключена. Откат: --dcard-shadow:var(--shadow-card) */
--white-80:rgba(255,255,255,.80);
--badge-bg:rgba(38,52,80,.70);
--map-sea:#121C33; --map-label:rgba(240,247,255,.24);
--header-bg:rgba(21,31,52,.80); /* синий/900 · 80% - подложка элементов шапки при прокрутке */ /* синий/800 · 70% */
--white-20:rgba(255,255,255,.20);
--white-10:rgba(255,255,255,.10);
--white-05:rgba(255,255,255,.05);
--white-40:rgba(255,255,255,.40);
--grad-photo:linear-gradient(180deg,#1F3157 0%,#111D33 100%); /* подложка портретов */
--grad-ava:linear-gradient(180deg,#4D6BAB 0%,var(--blue-800) 100%);
/* --- типографика --- */
--font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px; --fs-28:28px; --fs-32:32px;
--fs-40:40px; --fs-48:48px; --fs-52:52px; --fs-56:56px; --fs-64:64px;
--lh-tight:1.1; --lh-snug:1.2; --lh-list:1.3; --lh-text:1.4;
--ls-tight:-0.02em; /* -1.04px при 52, -0.32px при 16 */
--fw-regular:400; --fw-medium:500;
/* --- адаптивная типографика: ступени из той же шкалы 14/16/18/20/24/32/40/48/52/56/64 --- */
--t-h1:var(--fs-52); --t-64:var(--fs-64); --t-48:var(--fs-48); --t-40:var(--fs-40);
--t-32:var(--fs-32); --t-24:var(--fs-24); --t-20:var(--fs-20); --t-18:var(--fs-18);
/* --- скругления --- */
--r-4:4px; --r-8:8px; --r-16:16px; --r-24:24px; --r-32:32px; --r-64:64px; --r-pill:999px;
/* --- отступы --- */
--sp-4:4px; --sp-6:6px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-20:20px; --sp-24:24px;
--sp-32:32px; --sp-48:48px; --sp-64:64px; --sp-80:80px; --sp-120:120px; --sp-160:160px;
/* --- размеры элементов --- */
--h-40:40px; --h-44:44px; --h-48:48px; --icon-16:16px; --icon-20:20px; --icon-32:32px;
--blur-10:5px; /* background blur 10 в Figma */
--blur-15:7.5px; /* background blur 15 в Figma */
/* --- сетка --- */
--container:1600px;
--gutter:var(--sp-160);
--header-top:70px;
--water-fade:280px; /* растушёвка воды сверху и снизу зоны */ /* по макету */
--hero-h:1078px; /* по макету */
--hero-overlap:97px; /* светлый лист наезжает на hero: 1078 - 981 */
--sheet-max:1888px; /* ширина светлого листа */
--sheet-inset:var(--sp-16); /* (1920 - 1888) / 2 */
--sheet-r:var(--r-64);
--sheet-pt:var(--sp-80); --sheet-pb:var(--sp-120);
--block-gap:var(--sp-120); /* между крупными частями блока */
--fs-h2:var(--fs-56);
--zone-pt:200px;
--stack-gap:var(--sp-80); /* между блоками внутри тёмной зоны: 3496 - 3417 */
--coach-h:598px;
--inc-row:252px;
--method-pt:var(--sp-160); /* 171 в макете */
--dial:411px;
--price-card-w:592px; --price-card-h:462px;
--price-num:var(--fs-64); /* цена крупнее общего токена: 64 до 1200, 56 на планшете, 48 на телефоне */
--areas-h:1045px; --areas-r:var(--r-64);
--rv-media-h:789px; /* высота плашки «Что входит» (520 / 2 строки) */
--zone-gap:var(--sp-120); /* крупный отступ внутри зоны (128 в макете) и до следующего листа */ /* от светлого листа до первого блока тёмной зоны: 2643 - 2442 */
color-scheme:dark;
box-sizing:border-box;
padding-top:env(safe-area-inset-top,0px);
padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="light"],:root[data-theme="dark"]{color-scheme:dark}
/* брейкпоинты сетки */
@media (max-width:1679px){:root{--gutter:var(--sp-80);--fs-h2:var(--fs-48);--t-h1:var(--fs-48);--t-64:var(--fs-48);--t-48:var(--fs-40);--t-40:var(--fs-32);--t-32:var(--fs-24);--t-24:var(--fs-20);--t-20:var(--fs-18)}}
@media (max-width:1439px){:root{--fs-h2:var(--fs-40);--t-64:var(--fs-40)}}
@media (max-width:1199px){:root{--price-num:var(--fs-56)}}
@media (max-width:767px){:root{--price-num:var(--fs-48)}}
@media (max-width:1199px){:root{--gutter:var(--sp-48);--header-top:var(--sp-32);--sheet-pt:var(--sp-64);--sheet-pb:var(--sp-80);--block-gap:var(--sp-80);--fs-h2:var(--fs-40);--t-h1:var(--fs-40);--t-18:var(--fs-16);--t-32:var(--fs-20);--t-64:var(--fs-40);--zone-pt:var(--sp-120);--zone-gap:var(--sp-80);--method-pt:var(--sp-120)}}
@media (max-width:767px){:root{--gutter:var(--sp-24);--header-top:var(--sp-16);--sheet-inset:0px;--sheet-r:var(--r-32);--sheet-pt:var(--sp-48);--sheet-pb:var(--sp-64);--block-gap:var(--sp-48);--water-fade:160px;--fs-h2:var(--fs-28);--t-h1:var(--fs-32);--t-64:var(--fs-32);--t-48:var(--fs-32);--t-32:var(--fs-20);--t-24:var(--fs-18);--t-20:var(--fs-16);--zone-pt:var(--sp-80);--zone-gap:var(--sp-64);--method-pt:var(--sp-80)}}
@media (max-width:389px){:root{--gutter:var(--sp-16)}}
/* =====================================================================
2. БАЗА
===================================================================== */
*,*::before,*::after{box-sizing:inherit;-webkit-tap-highlight-color:transparent}
:focus:not(:focus-visible){outline:none}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--blue-800);color:var(--white);font-family:var(--font);font-size:var(--fs-16);line-height:var(--lh-text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p{margin:0;font-weight:var(--fw-regular)}
b,strong{font-weight:var(--fw-medium)} /* загружены только 400 и 500 - без искусственного жирного */
:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;border-radius:var(--r-16)}
.container{width:min(var(--container),calc(100% - 2*var(--gutter)));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* =====================================================================
3. КОМПОНЕНТЫ
===================================================================== */
/* --- текстовые стили --- */
.t-gold{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-title-light{background:var(--grad-title-light);-webkit-background-clip:text;background-clip:text;color:transparent}
/* --- стекло --- */
.glass{position:relative;background:var(--glass-05);backdrop-filter:blur(var(--blur-10));-webkit-backdrop-filter:blur(var(--blur-10))}
/* градиентная обводка 1px внутрь, без влияния на прозрачную заливку */
/* обводка и подложка пилюль: проявляются плавно при прокрутке вниз, а наверху исчезают сразу - без мелькания линии */
.logo.ring-grad::before{opacity:0;transition:none}
.header.is-scrolled .logo.ring-grad::before{opacity:1;transition:opacity .3s ease .05s}
.glass::before,.ring-grad::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--stroke-glass-grad);pointer-events:none;
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.glass--10{background:var(--glass-10)}
.glass--blur15{backdrop-filter:blur(var(--blur-15));-webkit-backdrop-filter:blur(var(--blur-15))}
/* --- стекло карточек (Figma «SLAVASWIM перенос», node 5:85) --- */
.glass--card{background:rgba(15,29,47,.50);backdrop-filter:blur(var(--blur-10));-webkit-backdrop-filter:blur(var(--blur-10));box-shadow:0 0 15px rgba(0,0,0,.25)}
/* обводка 2px внутрь - линейный градиент из макета: #FFF 59% → #F0F7FF 13% → #293D58 88% → #8C9AAC 37%, слой целиком 15% */
.glass--card::before{padding:2px;opacity:.15;background:linear-gradient(171deg,rgba(255,255,255,.59) 0%,rgba(240,247,255,.13) 27%,rgba(41,61,88,.88) 76%,rgba(140,154,172,.37) 100%)}
.coach .btn--soft{background:var(--white-05)}
.coach .btn--soft:hover{background:var(--white-10)}
/* --- группа-пилюля (навигация, контакты) --- */
.pill-group{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-4);border-radius:var(--r-pill);transition:background-color .4s ease,backdrop-filter .4s ease}
.burger{transition:background-color .4s ease,backdrop-filter .4s ease}
/* --- кнопки --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);border-radius:var(--r-pill);white-space:nowrap;font-size:var(--fs-16);font-weight:var(--fw-regular);line-height:normal;transition:background-color .2s ease,filter .2s ease,transform .2s ease}
.btn--sm{height:var(--h-40);padding:0 var(--sp-16);font-size:var(--fs-14)}
.btn--md{height:var(--h-48);padding:0 var(--sp-24)}
.btn--md44{height:var(--h-44);padding:0 var(--sp-24)}
.btn--ghost:hover{background:var(--nav-active)}
.btn--active{background:var(--nav-active)}
.header.is-scrolled .header__nav .btn--ghost:hover{background:var(--white-05)}
.header.is-scrolled .header__nav .btn--active,.header.is-scrolled .header__nav .btn--active:hover{background:var(--white-10)} /* в капсуле - чуть светлее фона */
.btn--gold{background:var(--grad-gold-btn);border:0;box-shadow:inset 0 0 0 2px var(--stroke-gold-btn);color:var(--white);font-weight:var(--fw-medium);text-shadow:0 1px 2px rgba(120,78,24,.25);overflow:hidden} /* обводка тенью: без светлого пикселя по краю */
.btn--gold:hover{filter:brightness(1.06)}
/* золотые кнопки: мягкий блик при наведении, стрелка поворачивается, при нажатии утапливается */
.btn--gold{position:relative;isolation:isolate}
.btn--gold::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg);transition:left .8s ease;pointer-events:none}
.btn--gold:hover::after{left:120%}
.btn--gold .btn__icon svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn--gold:hover .btn__icon svg{transform:rotate(45deg)}
.btn--gold:active{transform:scale(.97)}
.btn--gold:hover{filter:none}
@media (prefers-reduced-motion:reduce){.btn--gold::after{display:none}}
.btn--icon{padding-left:var(--sp-16);padding-right:var(--sp-6);justify-content:space-between;gap:var(--sp-16)}
.btn--block{width:100%}
.btn--soft{background:var(--white-10);font-weight:var(--fw-medium);color:var(--white)}
.btn--soft:hover{background:var(--white-20)}
.btn--icon-lg{padding-left:var(--sp-24);gap:var(--sp-24)}
.btn--block .btn__label{flex:1;text-align:center}
.btn--icon .btn__label{flex:1;text-align:center} /* текст на всю доступную ширину, по центру */
.btn__icon{width:var(--icon-32);height:var(--icon-32);flex:none;border-radius:var(--r-pill);background:var(--white);display:grid;place-items:center}
.btn__icon svg{width:var(--icon-20);height:var(--icon-20)}
.btn:active{transform:translateY(1px)}
/* --- чип --- */
.chip{display:inline-flex;align-items:center;justify-content:center;padding:var(--sp-8) var(--sp-24);border-radius:var(--r-pill);background:var(--glass-10);font-size:var(--fs-16);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);white-space:nowrap}
/* --- заголовки секций --- */
.h2{font-size:var(--fs-h2);line-height:var(--lh-snug)}
.t-title-dark{background:var(--grad-title-dark);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:var(--t-18);line-height:var(--lh-text);color:var(--neutral-500)}
/* --- светлый лист --- */
.sheet{position:relative;z-index:2;width:calc(100% - 2*var(--sheet-inset));max-width:var(--sheet-max);margin-inline:auto;background:var(--neutral-50);color:var(--neutral-800);border-radius:var(--sheet-r);padding:var(--sheet-pt) 0 var(--sheet-pb)}
.sheet--overlap{margin-top:calc(-1*var(--hero-overlap))}
.sheet .container,.areas .container{width:min(var(--container),calc(100% - 2*(var(--gutter) - var(--sheet-inset))))} /* края контента внутри листа совпадают с шапкой и остальными блоками */
/* --- круглая кнопка-стрелка на карточках --- */
.ring{width:var(--h-40);height:var(--h-40);flex:none;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--stroke-ring);display:grid;place-items:center;transition:transform .25s ease}
.ring svg{width:var(--icon-20);height:var(--icon-20)}
/* --- светлая плашка --- */
.tile{background:var(--neutral-100);border-radius:var(--r-32);padding:var(--sp-24)}
.tile__title{font-size:var(--t-24);font-weight:var(--fw-medium);line-height:var(--lh-snug);color:var(--neutral-800)}
.tile__text{font-size:var(--t-18);line-height:var(--lh-text);color:var(--neutral-500)}
/* --- бейдж на фото --- */
.badge{display:inline-flex;align-items:center;padding:var(--sp-8) var(--sp-16);border-radius:var(--r-16);background:var(--badge-bg);backdrop-filter:blur(var(--blur-15));-webkit-backdrop-filter:blur(var(--blur-15));font-size:var(--fs-16);line-height:var(--lh-text);letter-spacing:var(--ls-tight);white-space:nowrap}
/* --- шапка секции: заголовок слева, текст справа --- */
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-32)}
.sec-head__text{font-size:var(--t-20);line-height:var(--lh-text);letter-spacing:var(--ls-tight)}
/* --- нумерованные шаги с линиями --- */
.steps{display:flex;flex-direction:column;gap:var(--sp-32)}
.steps hr{width:100%;height:2px;margin:0;border:0;background:var(--white-20)}
.step{display:flex;align-items:center;gap:var(--sp-48)}
.step__n{flex:none;width:40px;text-align:center;font-size:var(--t-48);line-height:var(--lh-text);letter-spacing:var(--ls-tight)}
.step__title{flex:none;width:280px;font-size:var(--t-24);font-weight:var(--fw-medium);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);color:var(--slate-50)}
.step__text{flex:1;min-width:0;font-size:var(--t-18);line-height:var(--lh-text);letter-spacing:var(--ls-tight);color:var(--white-80)}
/* --- стеклянный список с разделителями --- */
.glass-list{display:flex;flex-direction:column;gap:var(--sp-20);padding:var(--sp-24);border-radius:var(--r-32)}
.glass-list p{font-size:var(--t-18);line-height:var(--lh-list);letter-spacing:var(--ls-tight)}
.glass-list hr{width:100%;height:2px;margin:0;border:0;background:var(--white-10)} /* как линии в таблице цен */
/* --- тёмная зона с фоном-бассейном --- */
.zone{position:relative;padding-top:var(--zone-pt);padding-bottom:var(--zone-gap)}
.zone>.water-box{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 60%,transparent 100%)}
.zone>*:not(.water-box):not(.zone__water){position:relative;z-index:1}
/* --- анимированная вода в тёмных зонах (каустика по методу CAUSTIC//LITE, MIT) --- */
.zone>.zone__water{position:absolute;inset:0;z-index:0;pointer-events:none;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--water-fade),#000 calc(100% - var(--water-fade)),transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 var(--water-fade),#000 calc(100% - var(--water-fade)),transparent 100%)}
.zone__sticky{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden}
.zone__sticky canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.zone>*:not(.zone__water){position:relative;z-index:1}
/* --- плейсхолдер «вода» для больших фоновых зон (анимация будет отдельно) --- */
.water-box{position:absolute;inset:0;pointer-events:none;background-color:var(--blue-800);
background-image:linear-gradient(var(--stroke-glass) 1px,transparent 1px),linear-gradient(90deg,var(--stroke-glass) 1px,transparent 1px);
background-size:var(--sp-64) var(--sp-64);opacity:.35}
/* =====================================================================
4. ШАПКА
===================================================================== */
.header{position:fixed;inset:0 0 auto;z-index:50;padding-top:calc(env(safe-area-inset-top,0px) + var(--header-top));transition:padding .3s ease,background-color .3s ease}
.header__row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16)}
.header.is-scrolled{padding-top:calc(env(safe-area-inset-top,0px) + var(--sp-16))}
.header__row{position:relative}
.logo{border-radius:var(--r-pill);transition:padding .5s cubic-bezier(.4,0,.2,1),background-color .5s ease}
.header.is-scrolled .logo,.header.is-scrolled .header__nav,.header.is-scrolled .header__contacts,.header.is-scrolled .burger{background:var(--header-bg);backdrop-filter:blur(var(--blur-15));-webkit-backdrop-filter:blur(var(--blur-15))}
.header.is-scrolled .logo{position:relative;padding:var(--sp-8) var(--sp-16)}
.logo svg{transition:width .5s cubic-bezier(.4,0,.2,1),height .5s cubic-bezier(.4,0,.2,1)} /* плавнее, но без затяжки */
.header.is-scrolled .logo svg{width:123px;height:32px} /* 8 + 32 + 8 = высота пилюль 48 */
.logo{display:block;flex:none}
.logo svg{width:193px;height:50px} /* 193.1 × 50 по макету */
.header__contacts .wa svg{width:var(--icon-16);height:var(--icon-16)}
.burger{display:none;width:var(--h-48);height:var(--h-48);border-radius:var(--r-pill);place-items:center}
.burger svg{width:var(--icon-20);height:var(--icon-20)}
/* мобильное меню: сверху лого и крестик, по центру разделы, снизу кнопки */
.menu{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;gap:var(--sp-32);padding:calc(env(safe-area-inset-top,0px) + var(--header-top)) var(--gutter) calc(env(safe-area-inset-bottom,0px) + var(--sp-24));background:var(--blue-900);overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.menu.is-open{opacity:1;visibility:visible}
.menu__top{flex:none;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-16)}
.menu__close{flex:none;width:var(--h-48);height:var(--h-48);border-radius:var(--r-pill);display:grid;place-items:center}
.menu__close svg{width:var(--icon-20);height:var(--icon-20)}
.menu__nav{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:var(--sp-8)}
.menu__nav a{padding:var(--sp-12) 0;border-bottom:1px solid var(--white-10);font-size:var(--fs-24);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);transition:color .2s}
.menu__nav a:last-child{border-bottom:0}
.menu__nav a:hover,.menu__nav a.is-active{color:var(--gold-400)}
.menu__foot{flex:none;display:flex;flex-direction:column;gap:var(--sp-12)}
.btn__wa{width:var(--icon-20);height:var(--icon-20);flex:none}
/* =====================================================================
5. HERO
===================================================================== */
.hero{position:relative;height:calc(100vh + var(--hero-overlap));height:calc(100svh + var(--hero-overlap));min-height:calc(640px + var(--hero-overlap));overflow:hidden;background:var(--blue-800)} /* ровно экран + заход листа: следующий блок не виден при загрузке */
.hero__bg{position:absolute;inset:0;background:url(../../assets/img/photos/hero-day.webp?v=2611021231) center/cover no-repeat}
/* градиенты поверх фото - точная копия из макета */
.hero__shade{position:absolute;inset:0;pointer-events:none;background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg,rgba(30,50,86,0) 54.29%,rgb(30,50,86) 100%);
background-size:100% 100%}
.hero__inner{position:relative;z-index:1;height:100%;display:flex;align-items:flex-end;padding-bottom:calc(var(--hero-overlap) + var(--sp-80))}
.hero__row{width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-32)}
.hero__text{display:flex;flex-direction:column;gap:var(--sp-32);min-width:0}
.hero__title{max-width:720px;font-size:var(--t-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
.hero__chips{display:flex;flex-wrap:wrap;gap:var(--sp-12)}
.hero__card{width:419px;flex:none;display:flex;flex-direction:column;gap:var(--sp-24);padding:var(--sp-12);border-radius:var(--r-24)}
.hero__card p{font-size:var(--fs-16);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);color:var(--slate-50)}
/* --- анимация hero при прокрутке: лист наезжает, hero уменьшается и размывается --- */
.hero-stage{position:relative}
.hero{position:sticky;top:0;z-index:0}
.hero__fx{position:absolute;inset:0;overflow:hidden}
/* картинка заранее увеличена: к концу уменьшения она всё ещё больше экрана (1.02), края не видны */
.hero__media{position:absolute;inset:0;transform:scale(calc(1.10 - .08*var(--p,0)));filter:blur(calc(6px*var(--p,0)));transform-origin:50% 40%;will-change:transform,filter}
.hero__inner{transform:scale(calc(1 - .08*var(--p,0)));filter:blur(calc(4px*var(--p,0)));opacity:calc(1 - .6*var(--p,0));transform-origin:50% 100%;will-change:transform,filter,opacity}
.hero__fx::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--blue-800);opacity:var(--p,0)} /* к концу hero растворяется ровно в цвет фона - без стыка под листом */
@media (prefers-reduced-motion:reduce){.hero__media{transform:none;filter:none}.hero__inner{transform:none;filter:none;opacity:1}.hero__fx::after{opacity:0}}
/* --- пловец всегда по центру и не перекрыт ---
от 1440: фото на весь блок, пловец выше текста (заголовок 2 строки, чипы в 1 строку);
до 1439: фото занимает верхнюю часть блока, контент - под пловцом */
@media (max-width:1439px){
.hero__bg{bottom:auto;height:66%;background-position:50% 42%;
-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
}
@media (max-width:1439px) and (min-width:1200px){
.hero__row{flex-direction:row;align-items:flex-end}
}
/* =====================================================================
5.2 НАПРАВЛЕНИЯ
===================================================================== */
.dirs__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-32)}
.dirs__head .h2{white-space:nowrap}
.dirs__head .lead{max-width:719px}
.dirs__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-16);margin-top:var(--sp-48)}
.dcard{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:523/421;border-radius:var(--r-32);box-shadow:var(--dcard-shadow);padding:var(--sp-32);display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;color:var(--white)}
.dcard__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.dcard__veil{position:absolute;z-index:-1;top:63.92%;left:-5.4%;right:-5.4%;bottom:-2.06%;filter:blur(3.45px)}
.dcard__veil::before{content:"";position:absolute;inset:0;background:var(--veil-teal);backdrop-filter:blur(var(--blur-10));-webkit-backdrop-filter:blur(var(--blur-10))}
.dcard__text{width:100%;display:flex;flex-direction:column;gap:var(--sp-8)}
.dcard__title{font-size:var(--t-24);font-weight:var(--fw-medium);line-height:var(--lh-snug)}
.dcard__desc{font-size:var(--t-18);line-height:var(--lh-text);letter-spacing:var(--ls-tight);color:var(--white-90)}
.dcard:hover .dcard__img{transform:scale(1.04)}
.dcard:hover .ring{transform:rotate(45deg)}
.dask{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--sp-32);padding:var(--sp-24)}
.dask__title{font-size:var(--t-32);line-height:var(--lh-snug);color:var(--neutral-800);max-width:441px}
.dask__text{margin-top:var(--sp-8);font-size:var(--t-18);font-weight:var(--fw-medium);line-height:var(--lh-text);letter-spacing:var(--ls-tight);color:var(--neutral-500)}
.dask .btn--icon{gap:var(--sp-12)}
.dirs__feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-16);margin-top:var(--block-gap)}
.feat{min-height:183px;display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-24)} /* 183 по макету */
/* =====================================================================
5.3 ОСНОВАТЕЛЬ
===================================================================== */
.founder{display:flex;align-items:center;gap:var(--sp-48)} /* 47 в макете */
.founder__photo{position:relative;flex:none;width:628px;aspect-ratio:628/774;border-radius:var(--r-32);overflow:hidden;background:var(--grad-photo)}
.founder__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.founder__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-64)} /* 69 в макете */
.founder__top{display:flex;flex-direction:column;gap:var(--sp-16)}
.founder__label{font-size:var(--fs-16);line-height:var(--lh-list)}
.founder__name{margin-top:var(--sp-4);font-size:var(--fs-h2);line-height:normal}
.founder__quote{font-size:var(--t-20);line-height:var(--lh-text);letter-spacing:var(--ls-tight);color:var(--white-90);quotes:none}
.founder__acts{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
/* =====================================================================
5.4 ТРЕНЕРЫ
===================================================================== */
.coaches{margin-top:var(--stack-gap)}
.coaches .h2{max-width:581px;line-height:normal}
.coaches .sec-head__text{max-width:550px}
.coaches__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-16);margin-top:var(--sp-32)} /* 34 в макете */
.coach{height:var(--coach-h);display:flex;flex-direction:column;gap:var(--sp-24);padding:var(--sp-12);border-radius:var(--r-32)}
.coach__photo{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:var(--r-24);background:var(--grad-photo);padding:var(--sp-12);display:flex;align-items:flex-end}
.coach__photo{background:radial-gradient(90% 75% at 50% 38%,#3E66A8 0%,#2A4677 38%,var(--blue-800) 72%,var(--blue-900) 100%)} /* свой фон: тренер вырезан и стоит на градиенте палитры */
.coach__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 8%} /* портрет заполняет фото, голова всегда сверху в кадре */
.coach__photo .badge{position:relative;white-space:normal;max-width:100%}
.coach__text{display:flex;flex-direction:column;gap:var(--sp-8)}
.coach__name{font-size:var(--t-20);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);color:var(--slate-50)}
.coach__desc{font-size:var(--fs-16);line-height:var(--lh-text);letter-spacing:var(--ls-tight);color:var(--white-80)}
/* появление по очереди снизу вверх (общий компонент: класс .stagger на контейнере) */
@media (prefers-reduced-motion:no-preference){
.stagger.is-ready>*{opacity:0;transform:translateY(var(--sp-48));transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.stagger.is-ready>:nth-child(2){transition-delay:.12s}
.stagger.is-ready>:nth-child(3){transition-delay:.24s}
.stagger.is-ready>:nth-child(4){transition-delay:.36s}
.stagger.is-ready>:nth-child(5){transition-delay:.48s}
.stagger.is-ready>:nth-child(6){transition-delay:.6s}
.stagger.is-in>*{opacity:1;transform:none}
}
/* =====================================================================
5.5 ЗАПИСЬ ЧЕРЕЗ ДИАГНОСТИКУ
===================================================================== */
.join{display:flex;align-items:flex-start;gap:96px;margin-top:var(--zone-gap)} /* 96 по макету */
.join__left{flex:none;width:569px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-32)}
.join__head{display:flex;flex-direction:column;gap:var(--sp-16)}
.join__text{font-size:var(--t-20);line-height:var(--lh-text);letter-spacing:var(--ls-tight);color:var(--white-80)}
.join .steps{flex:1;min-width:0}
/* =====================================================================
5.6 ЧТО ВХОДИТ В ЗАНЯТИЕ
===================================================================== */
.inc .h2{text-align:center;line-height:normal}
.inc__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:var(--inc-row);gap:var(--sp-16);margin-top:var(--sp-64)}
.inc__item{display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-24)}
.inc__icon{width:var(--sp-48);height:var(--sp-48);color:var(--gold-600)}
.inc__item .tile__text{margin-top:var(--sp-12)}
/* =====================================================================
5.7 МЕТОДИКА · 30 МИНУТ
===================================================================== */
.zone--method{padding-top:var(--method-pt)}
.m-head{display:flex;align-items:center;gap:var(--sp-16)}
.m-head .h2{flex:1}
.m-head .sec-head__text{flex:none;width:396px;color:var(--white-80)}
.m-panel{display:flex;gap:var(--sp-16);margin-top:var(--sp-48)}
.m-dial{flex:none;display:flex;flex-direction:column;gap:var(--sp-48);padding:var(--sp-32);border-radius:var(--r-32)}
.dial{width:var(--dial);height:var(--dial);display:block}
.legend{display:flex;flex-direction:column;gap:var(--sp-8)}
.legend__row{display:flex;align-items:center;gap:var(--sp-16);font-size:var(--t-18);line-height:var(--lh-text)}
.legend__bar{flex:none;width:var(--sp-32);height:var(--sp-8);border-radius:var(--r-pill)}
.m-chart{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-24);padding:var(--sp-32);border-radius:var(--r-32);overflow:hidden}
.m-chart__title{font-size:var(--t-24);font-weight:var(--fw-medium);line-height:var(--lh-snug)}
.curve{width:100%;height:auto;display:block;overflow:visible}
.m-chart__note{display:none;align-items:center;gap:var(--sp-8);font-size:var(--fs-14);line-height:var(--lh-text);color:var(--white-80)}
.m-chart__note i{width:var(--sp-12);height:var(--sp-12);flex:none;border-radius:var(--r-pill);background:var(--gold-300);box-shadow:0 0 0 4px rgba(230,199,138,.2)}
.m-foot{display:flex;gap:96px;margin-top:var(--sp-48)} /* 101 в макете */
.m-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-24);font-size:var(--t-18);line-height:var(--lh-text);letter-spacing:var(--ls-tight);color:var(--white-80)} /* 25 в макете */
.m-text .is-accent{color:var(--gold-300)}
.m-rows{flex:none;width:924px;display:flex;flex-direction:column;gap:var(--sp-16)}
.m-row{display:flex;align-items:center;gap:var(--sp-48);padding:var(--sp-24);border-radius:var(--r-24)}
.m-row__dot{flex:none;width:var(--sp-16);height:var(--sp-16);border-radius:var(--r-pill);background:var(--gold-300)}
.m-row__title{flex:none;width:240px;font-size:var(--t-24);font-weight:var(--fw-medium);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);color:var(--slate-50)}
.m-row__text{flex:1;min-width:0;font-size:var(--t-18);line-height:var(--lh-text);letter-spacing:var(--ls-tight);color:var(--white-80)}
@media (prefers-reduced-motion:no-preference){
.dial .grow{stroke-dasharray:100;stroke-dashoffset:100}
.dial.is-in .grow{transition:stroke-dashoffset 1.6s cubic-bezier(.4,.1,.2,1);stroke-dashoffset:0}
.dial.is-in .g2{transition-delay:1.4s;transition-duration:.6s}
.curve .c-line{stroke-dasharray:1000;stroke-dashoffset:1000}
.curve .c-area,.curve .c-pt,.curve .c-tag,.curve .c-q{opacity:0}
.curve.is-in .c-line{transition:stroke-dashoffset 1.4s cubic-bezier(.4,.1,.2,1);stroke-dashoffset:0}
.curve.is-in .c-line2{transition-delay:1.3s;transition-duration:.6s}
.curve.is-in .c-line3{transition-delay:1.9s}
.curve.is-in .c-area{transition:opacity .9s ease .5s;opacity:1}
.curve.is-in .c-pt{transition:opacity .4s ease 1.2s;opacity:1}
.curve.is-in .c-tag{transition:opacity .5s ease 1.5s;opacity:1}
.curve.is-in .c-q{transition:opacity .6s ease 2.4s;opacity:1}
}
/* появление строк методики по очереди: справа налево, когда колонка сбоку; снизу вверх, когда под текстом */
@media (prefers-reduced-motion:no-preference){
.m-rows.is-ready .m-row{opacity:0;transform:translateX(var(--sp-64));transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.m-rows.is-ready .m-row:nth-child(2){transition-delay:.15s}
.m-rows.is-ready .m-row:nth-child(3){transition-delay:.3s}
.m-rows.is-in .m-row{opacity:1;transform:none}
}
@media (prefers-reduced-motion:no-preference) and (max-width:1199px){
.m-rows.is-ready .m-row{transform:translateY(var(--sp-24))}
.m-rows.is-in .m-row{transform:none}
}
/* =====================================================================
5.8 СТОИМОСТЬ
===================================================================== */
.price{margin-top:var(--zone-pt)}
.price .h2{line-height:normal}
.price__row{display:flex;gap:var(--sp-16);margin-top:var(--sp-48)} /* 57 в макете */
.price__card{flex:none;width:var(--price-card-w);height:var(--price-card-h);display:flex;flex-direction:column;justify-content:space-between;padding:var(--sp-24);border-radius:var(--r-32)}
.price__title{font-size:var(--t-24);line-height:var(--lh-snug)}
.price__amount{display:flex;align-items:baseline;gap:var(--sp-4);line-height:var(--lh-snug)}
.price__amount b{font-size:var(--price-num);font-weight:var(--fw-regular)}
.price__amount span{font-size:var(--t-32);color:var(--gold-300)}
.price__sub{font-size:var(--t-24);line-height:var(--lh-snug);margin-bottom:var(--sp-32)}
.price__table{flex:1;min-width:0;display:flex;flex-direction:column;padding:var(--sp-16) var(--sp-32) var(--sp-24);border-radius:var(--r-32)}
.ptable{width:100%;border-collapse:collapse;table-layout:fixed}
.ptable th:first-child{width:52%}
.ptable th{padding:var(--sp-8) 0 var(--sp-16);font-size:var(--fs-16);font-weight:var(--fw-regular);text-align:left;color:var(--neutral-400)}
.ptable td{vertical-align:middle;padding:var(--sp-12) 0;border-top:2px solid var(--white-10);font-size:var(--t-18);line-height:var(--lh-text);letter-spacing:var(--ls-tight)}
.ptable th:nth-child(2),.ptable td:nth-child(2){width:20%;text-align:center}
.ptable th:last-child,.ptable td:last-child{width:28%;text-align:right}
.ptable td:last-child{color:var(--gold-300)}
.ptable tr.is-sep td{border-top-color:var(--white-20)}
.ptable tbody tr:last-child td{border-bottom:2px solid var(--white-10)} /* линия и после последней строки */
.price__note{margin-top:auto;padding-top:var(--sp-16);font-size:var(--fs-16);color:var(--neutral-400)}
/* =====================================================================
5.9 ГДЕ МЫ РАБОТАЕМ (карта)
===================================================================== */
.areas{position:relative;width:calc(100% - 2*var(--sheet-inset));max-width:var(--sheet-max);margin:var(--sp-32) auto 0;height:var(--areas-h);border-radius:var(--areas-r);overflow:hidden;background:var(--map-sea);display:flex;align-items:center}
.areas__mapbox{position:absolute;inset:0}
.areas__map,.areas__live{position:absolute;inset:0;width:100%;height:100%}
.areas__live{opacity:0;transition:opacity .6s ease;background:var(--map-sea)}
.areas.is-live .areas__live{opacity:1}
.areas.is-live .areas__map{visibility:hidden}
.areas__live .maplibregl-ctrl-attrib{background:rgba(17,29,52,.7)!important;color:var(--neutral-400)!important;font-size:var(--fs-14)}
.areas__live .maplibregl-ctrl-attrib a{color:var(--gold-300)!important}
.areas__live .maplibregl-ctrl-group{background:var(--header-bg)!important;border-radius:var(--r-16)}
.areas__live .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1)}
.areas::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(21,31,52,.72) 0%,rgba(21,31,52,.42) 24%,rgba(21,31,52,0) 44%);opacity:0;transition:opacity .6s}
.areas.is-live::after{opacity:1}
/* HTML-метки живой карты */
.lpin{display:flex;align-items:center;gap:var(--sp-8);white-space:nowrap;cursor:pointer}
.lpin.is-left{flex-direction:row-reverse}
.lpin__dot{width:22px;height:22px;border-radius:50%;flex:none;background:radial-gradient(circle,var(--gold-300) 0 5px,rgba(230,199,138,.3) 6px 11px);transition:transform .25s}
.lpin__lbl{padding:var(--sp-4) var(--sp-12);border-radius:var(--r-pill);background:rgba(17,29,52,.92);border:1px solid rgba(230,199,138,.6);font-size:var(--fs-14);font-weight:var(--fw-medium);color:var(--white);transition:background-color .2s,color .2s}
.lpin.is-on .lpin__dot{transform:scale(1.45)}
.lpin.is-on .lpin__lbl{background:var(--gold-300);color:var(--neutral-800);border-color:var(--gold-300)}
.areas__panel{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-120)}
.areas__top{width:626px;max-width:100%;display:flex;flex-direction:column;gap:var(--sp-32)}
.areas__top .h2{line-height:normal}
.areas__text{margin-top:var(--sp-16);max-width:398px;font-size:var(--t-18);line-height:var(--lh-text);color:var(--white-80)}
.chips-light{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.areas__cta-bottom{display:none}
.chip-light{height:var(--h-44);padding:0 var(--sp-24);border-radius:var(--r-pill);background:var(--neutral-100);border:1px solid var(--neutral-200);color:var(--neutral-800);font-size:var(--fs-16);transition:background-color .2s,border-color .2s}
.chip-light:hover,.chip-light.is-on{background:var(--gold-300);border-color:var(--gold-300)}
/* элементы карты */
.map-city{font:500 38px var(--font);fill:var(--map-label);letter-spacing:-.02em}
.map-sea{font:500 12.5px var(--font);fill:var(--map-label);letter-spacing:.5em}
.shd rect{fill:#111D33;stroke:var(--gold-300);stroke-opacity:.35}
.shd text{font:500 9px var(--font);fill:var(--gold-300);fill-opacity:.75;text-anchor:middle}
.area{fill:var(--gold-300);fill-opacity:.07;stroke:var(--gold-300);stroke-opacity:.45;stroke-width:1.2;stroke-dasharray:4 4;transition:fill-opacity .25s,stroke-opacity .25s}
.area.is-on{fill-opacity:.2;stroke-opacity:.9;stroke-dasharray:none}
.pin{cursor:pointer}
.pin .halo{fill:var(--gold-300);fill-opacity:.25;transition:r .25s,fill-opacity .25s}
.pin .dot{fill:var(--gold-300);stroke:#111D33;stroke-width:2}
.pin rect{fill:#111D33;fill-opacity:.92;stroke:var(--gold-300);stroke-opacity:.6;transition:fill .2s}
.pin text{font:500 12.4px var(--font);fill:var(--white)}
.pin.is-on .halo{r:16;fill-opacity:.4}
.pin.is-on rect{fill:var(--gold-300);fill-opacity:1}
.pin.is-on text{fill:var(--neutral-800)}
/* =====================================================================
5.10 РЕЗУЛЬТАТЫ И ОТЗЫВЫ (файл «SLAVASWIM перенос», node 1:601)
===================================================================== */
.sheet--gap{margin-top:var(--sp-64)} /* 66 в макете */
.rv-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-32)}
.rv-head .h2{line-height:normal}
.rv-nav{display:flex;align-items:center;gap:var(--sp-32)}
.rv-count{display:flex;gap:var(--sp-12);font-size:var(--t-24);color:var(--neutral-400);white-space:nowrap;font-variant-numeric:tabular-nums}
.rv-count b{font-weight:var(--fw-regular);color:var(--neutral-600)}
.rv-arrows{display:flex;gap:var(--sp-8)}
.rv-btn{width:var(--h-48);height:var(--h-48);border-radius:var(--r-pill);display:grid;place-items:center;background:var(--neutral-100);border:1px solid var(--neutral-200);color:var(--neutral-800);transition:background-color .2s,color .2s,border-color .2s}
.rv-btn svg{width:24px;height:24px}
.rv-btn:hover{background:var(--neutral-800);border-color:var(--neutral-800);color:var(--white)}
.rv-main{display:grid;grid-template-columns:954fr 618fr;gap:var(--sp-24);margin-top:var(--sp-48)} /* 28 в макете */
.rv-media{position:relative;height:var(--rv-media-h);border-radius:var(--r-32);overflow:hidden;background:var(--blue-900);display:flex;align-items:flex-end;padding:var(--sp-32)}
.rv-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .7s ease,transform 1.4s ease}
.rv-media img.is-on{opacity:1;transform:none}
.rv-media__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,52,80,.18) 72.18%,rgba(9,16,30,.9) 100%)}
.rv-play{position:absolute;left:50%;top:50%;width:120px;height:120px;transform:translate(-50%,-50%);border-radius:var(--r-pill);display:grid;place-items:center;background:rgba(255,255,255,.3);backdrop-filter:blur(var(--blur-15));-webkit-backdrop-filter:blur(var(--blur-15));transition:transform .25s}
.rv-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.rv-play svg{width:40px;height:40px;margin-left:var(--sp-6)}
.rv-media__cap{position:relative;display:flex;flex-direction:column;gap:var(--sp-8);color:var(--white)}
.rv-media__label{font-size:var(--t-18);line-height:var(--lh-text)}
.rv-media__title{font-size:var(--t-32);font-weight:var(--fw-medium);line-height:var(--lh-snug)}
.rv-quote{display:flex;flex-direction:column;gap:var(--sp-48);padding:var(--sp-24);border-radius:var(--r-32);background:var(--neutral-100);transition:opacity .35s ease}
.rv-quote.is-fade{opacity:0}
.rv-quote__top{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-32)}
.rv-mark{width:58px;height:44px}
.rv-text{font-size:var(--t-32);line-height:var(--lh-list);color:var(--neutral-800)}
.rv-who{display:flex;align-items:center;gap:var(--sp-16)}
.rv-ava{width:var(--sp-64);height:var(--sp-64);flex:none;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--grad-ava);color:var(--gold-400);font-size:var(--fs-32)}
.rv-name{font-size:var(--t-24);color:var(--neutral-800)}
.rv-meta{margin-top:var(--sp-4);font-size:var(--t-18);color:var(--neutral-500)}
.rv-res{display:flex;flex-direction:column;gap:var(--sp-24)}
.rv-res hr{width:100%;height:1px;margin:0;border:0;background:var(--neutral-300)}
.rv-res__row{display:flex;align-items:center;gap:var(--sp-24)}
.rv-res__num{flex:none;font-size:var(--t-64);font-weight:var(--fw-regular);line-height:var(--lh-list);white-space:nowrap}
.rv-res__text{font-size:var(--t-20);color:var(--neutral-500)}
.rv-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-16);margin-top:var(--sp-48)}
.rv-tab{display:flex;align-items:center;gap:var(--sp-24);padding:var(--sp-12) var(--sp-48) var(--sp-12) var(--sp-12);border-radius:var(--r-32);background:var(--neutral-100);border:2px solid transparent;text-align:left;transition:border-color .25s}
.rv-tab img{width:120px;height:120px;flex:none;border-radius:var(--r-24);object-fit:cover}
.rv-tab__name{display:block;font-size:var(--t-24);color:var(--neutral-800)}
.rv-tab__meta{display:block;margin-top:var(--sp-4);font-size:var(--t-18);color:var(--neutral-500)}
.rv-tab:hover,.rv-tab.is-on{border-color:var(--neutral-200)}
/* =====================================================================
5.11 ЧАСТЫЕ ВОПРОСЫ (файл «SLAVASWIM перенос», node 1:656)
===================================================================== */
.zone--faq{padding-top:var(--sp-80)} /* 83 в макете */
.faq .h2{text-align:center}
.faq__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-12);margin-top:var(--sp-64);align-items:start}
.faq__col{display:flex;flex-direction:column;gap:var(--sp-12)}
.qa{border-radius:var(--r-16);padding:var(--sp-16) var(--sp-16) var(--sp-16) var(--sp-24)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);font-size:var(--t-20);font-weight:var(--fw-medium);line-height:var(--lh-snug);color:var(--white)}
.qa summary::-webkit-details-marker{display:none}
.qa__pm{flex:none;width:var(--icon-32);height:var(--icon-32);border-radius:var(--r-8);display:grid;place-items:center;background:var(--grad-gold-btn);box-shadow:inset 0 0 0 2px var(--stroke-gold-btn);transition:background .2s}
.qa__pm{color:var(--blue-800)}
.qa__pm svg{width:24px;height:24px;transition:transform .3s ease}
.qa[open] .qa__pm{color:var(--white)}
.qa[open] .qa__pm{background:var(--white-10)}
.qa[open] .qa__pm svg{transform:rotate(45deg)}
.qa.is-closing .qa__pm{background:var(--grad-gold-btn);color:var(--blue-800)}
.qa.is-closing .qa__pm svg{transform:none}
.qa__body{overflow:hidden}
.qa__a{padding-top:var(--sp-12);font-size:var(--fs-16);line-height:var(--lh-text);letter-spacing:-.01em;color:var(--white-80)}
/* =====================================================================
5.12 ЗАЯВКА НА ДИАГНОСТИКУ (файл «SLAVASWIM перенос», node 1:725)
===================================================================== */
.zone--faq{padding-bottom:var(--sp-48)} /* 56 в макете */
.apply{display:flex;gap:var(--sp-16);align-items:stretch;margin-top:var(--zone-pt)} /* 192 в макете */
.apply__left{flex:none;width:584px;display:flex;flex-direction:column;gap:var(--sp-24)} /* 21 в макете */
.apply__card{display:flex;flex-direction:column;gap:var(--sp-48);padding:var(--sp-24);border-radius:var(--r-32)}
.apply__head{display:flex;flex-direction:column;gap:var(--sp-16)}
.apply__title{font-size:var(--t-40);line-height:var(--lh-snug)}
.apply__text{font-size:var(--t-18);line-height:var(--lh-text);letter-spacing:var(--ls-tight);color:var(--white-80)}
.form{display:flex;flex-direction:column;gap:var(--sp-12)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12)}
.field{display:flex;flex-direction:column;gap:var(--sp-12)}
.field__label{font-size:var(--fs-16);line-height:var(--lh-text);letter-spacing:var(--ls-tight)}
.field__input{width:100%;height:var(--h-48);padding:0 var(--sp-12);border-radius:var(--r-16);background:var(--white-05);border:1px solid transparent;color:var(--white);font:inherit;font-size:var(--fs-16);letter-spacing:var(--ls-tight);appearance:none;-webkit-appearance:none;transition:border-color .2s}
.field__input::placeholder{color:var(--white)}
.field__input:focus{outline:none;border-color:var(--gold-300)}
select.field__input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--sp-12) center;padding-right:var(--sp-48)}
select.field__input option{color:var(--neutral-800)}
.consent{display:flex;align-items:flex-start;gap:var(--sp-16);margin-top:var(--sp-48);font-size:var(--fs-14);line-height:var(--lh-text);cursor:pointer}
.consent input{flex:none;width:20px;height:20px;margin:0;border-radius:var(--r-4);background:var(--white-10);border:1px solid transparent;appearance:none;-webkit-appearance:none;cursor:pointer;display:grid;place-items:center}
.consent input:checked{background:var(--grad-gold-btn);border-color:var(--stroke-gold-btn)}
.consent input:checked::after{content:"";width:10px;height:6px;border:2px solid var(--white);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.consent a{text-decoration:underline;text-underline-offset:2px}
.form .btn{margin-top:var(--sp-48)}
.apply__alt{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16)}
.apply__alt p{font-size:var(--fs-16);line-height:var(--lh-text)}
.btn--soft .wa svg,.btn .btn__wa{width:var(--icon-20);height:var(--icon-20)}
.apply__photo{flex:1;min-width:0;border-radius:var(--r-32);overflow:hidden;background:var(--blue-900)}
.apply__photo img{width:100%;height:100%;object-fit:cover}
/* поля: подпись над полем (десктоп), на телефоне - подпись внутри и всплывает при вводе */
.field{display:flex;flex-direction:column}
.field>.field__label{order:-1}
.dd__lab{display:none}
.dd__txt{display:flex;flex-direction:column;min-width:0}
@media (max-width:767px){
.field--float{position:relative}
.field--float>.field__label{position:absolute;left:var(--sp-12);top:50%;transform:translateY(-50%);font-size:var(--fs-16);color:var(--white-80);pointer-events:none;transition:top .2s ease,font-size .2s ease,transform .2s ease}
.field--float .field__input{height:56px;padding:var(--sp-20) var(--sp-12) var(--sp-4)}
.field--float .field__input:not(:focus)::placeholder{color:transparent}
.field--float .field__input::placeholder{color:var(--white-40)}
.field--float .field__input:focus+.field__label,.field--float .field__input:not(:placeholder-shown)+.field__label{top:var(--sp-6);transform:none;font-size:var(--fs-14)}
/* район */
.field--dd>.field__label{display:none}
.field--dd .dd__btn{height:56px;padding:var(--sp-6) var(--sp-12)}
.dd__lab{display:block;font-size:var(--fs-16);color:var(--white-80);transition:font-size .2s ease}
.dd__val.is-empty{display:none}
.dd.has-val .dd__lab{font-size:var(--fs-14)}
.form{gap:var(--sp-8)}
.form__row{gap:var(--sp-8)}
}
/* --- выпадающий список района (вместо системного) --- */
.dd{position:relative}
.dd__native{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.dd__btn{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);text-align:left;cursor:pointer}
.dd__btn svg{width:var(--icon-20);height:var(--icon-20);flex:none;transition:transform .25s ease}
.dd__val.is-empty{color:var(--white-80)}
.dd.is-open .dd__btn{border-color:var(--gold-300)}
.dd.is-open .dd__btn svg{transform:rotate(180deg)}
.dd.is-error .dd__btn{border-color:#E38B8B}
.dd__list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + var(--sp-8));margin:0;padding:var(--sp-6);list-style:none;max-height:288px;overflow-y:auto;
border-radius:var(--r-16);background:var(--blue-900);border:1px solid var(--stroke-glass);backdrop-filter:blur(var(--blur-15));-webkit-backdrop-filter:blur(var(--blur-15));
box-shadow:0 24px 48px -16px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s;scrollbar-width:thin;scrollbar-color:var(--white-20) transparent}
.dd.is-open .dd__list{opacity:1;visibility:visible;transform:none}
.dd__opt{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);padding:var(--sp-12);border-radius:var(--r-8);font-size:var(--fs-16);line-height:var(--lh-snug);color:var(--white);cursor:pointer}
.dd__opt.is-active{background:var(--white-10)}
.dd__opt[aria-selected="true"]{color:var(--gold-300)}
.dd__opt svg{width:var(--icon-20);height:var(--icon-20);flex:none;opacity:0;color:var(--gold-300)}
.dd__opt[aria-selected="true"] svg{opacity:1}
.dd__opt--other{margin-top:var(--sp-4);border-top:1px solid var(--white-10);border-radius:0 0 var(--r-8) var(--r-8)}
/* =====================================================================
5.13 ПОДВАЛ (node 1:766)
===================================================================== */
.footer{background:var(--blue-900);border-radius:var(--r-64) var(--r-64) 0 0;padding:var(--sp-48) 0}
.footer__row{display:flex;align-items:stretch;justify-content:space-between;gap:var(--sp-32)}
.footer__main{display:flex;flex-direction:column;gap:var(--sp-32)} /* 36 в макете */
.footer__top{display:flex;align-items:center;gap:var(--sp-80)} /* 78 в макете */
.footer__top .logo svg{width:193px;height:50px}
.footer__text{width:367px;font-size:var(--fs-16);line-height:var(--lh-text);letter-spacing:var(--ls-tight);color:var(--white-80)}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-32)}
.footer__nav{border-radius:var(--r-32);background:var(--glass-05);backdrop-filter:blur(var(--blur-10));-webkit-backdrop-filter:blur(var(--blur-10))}
.footer__nav .btn{font-size:var(--fs-14)}
.footer__nav .btn--ghost:hover{background:var(--white-10)} /* на тёмном подвале подсветка светлая - тёмная не видна */
.footer__nav .btn--ghost:active{background:var(--white-20)}
.btn--round{width:68px;height:var(--h-48);padding:0;justify-content:center}
.footer__legal{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;gap:var(--sp-24);text-align:right;font-size:var(--fs-16);font-weight:var(--fw-medium)}
.footer__links{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-16);color:var(--white-80)} /* 14 в макете */
.footer__links a:hover{color:var(--white)}
.footer__copy{color:var(--white-40)}
/* --- анимации иконок «Что входит»: при наведении на плашку и один раз при появлении --- */
.inc__icon *{transform-box:fill-box;transform-origin:center}
.inc__icon .ia-hand{transform-box:view-box;transform-origin:20px 20px}
.inc__icon .ia-key{transform-origin:50% 30%}
@media (prefers-reduced-motion:no-preference){
.inc__item.ia-go .ia-head{animation:iaNod .6s ease}
.inc__item.ia-go .ia-badge{animation:iaPop .5s cubic-bezier(.3,1.6,.5,1) .1s both}
.inc__item.ia-go .ia-draw{stroke-dasharray:1;animation:iaDraw .5s ease .25s both}
.inc__item.ia-go .ia-d2{animation-delay:.6s}
.inc__item.ia-go .ia-play{animation:iaPulse .7s ease 2}
.inc__item.ia-go .ia-dot{animation:iaSlide 1.2s ease-in-out}
.inc__item.ia-go .ia-hand{animation:iaSpin 1.1s cubic-bezier(.4,0,.2,1)}
.inc__item.ia-go .ia-key{animation:iaTurn .8s ease}
.inc__item.ia-go .ia-shield{animation:iaShield .8s ease}
.inc__item.ia-go .ia-p1{animation:iaHop .45s ease}
.inc__item.ia-go .ia-kid{animation:iaHop .45s ease .15s}
.inc__item.ia-go .ia-p2{animation:iaHop .45s ease .3s}
}
@keyframes iaNod{40%{transform:translateY(-1.5px)}}
@keyframes iaPop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes iaDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes iaPulse{50%{transform:scale(1.25)}}
@keyframes iaSlide{50%{transform:translateX(12px)}}
@keyframes iaSpin{to{transform:rotate(360deg)}}
@keyframes iaTurn{35%{transform:rotate(-35deg)}70%{transform:rotate(15deg)}}
@keyframes iaShield{35%{transform:scale(1.06)}}
@keyframes iaHop{45%{transform:translateY(-3px)}}
/* --- появление заголовков: блоки - буквы волной, главный экран - из размытия --- */
.split-ttl{background:none!important;perspective:600px}
.split-ttl .ch{display:inline-block;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:pre}
.split-ttl .wd{display:inline-block;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
.split-ttl .ch{opacity:0;transform:translateY(.6em) rotateX(-60deg);transform-origin:50% 100%;transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*22ms)}
.split-ttl.is-in .ch{opacity:1;transform:none}
.hero__title.h-blur{opacity:0;filter:blur(14px);transform:scale(.97);transform-origin:0 100%;transition:opacity .9s ease,filter 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.hero__title.h-blur.is-in{opacity:1;filter:blur(0);transform:none}
}
.footer__brand{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16)}
.footer__wa-m{display:none}
@media (max-width:767px){
.footer__brand{align-self:stretch}
.footer .footer__top .footer__wa-m{display:inline-flex;flex:none;width:var(--h-48);padding:0}
.footer__wa{display:none}
}
/* подсказка защиты карты от перехвата прокрутки */
.areas .maplibregl-cooperative-gesture-screen{background:rgba(21,31,52,.72);color:var(--white);font:var(--fw-medium) var(--fs-16)/var(--lh-text) var(--font);padding:var(--sp-24);text-align:center}
/* телефоны и планшеты: у вопросов FAQ стекло без размытия фона - сплошная тонированная заливка того же тона.
Размытие под 9 карточками, которые сдвигаются при раскрытии, - главная причина подтормаживания */
@media (max-width:1199px),(pointer:coarse){
.qa.glass--card{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(17,29,52,.86)}
.qa{contain:layout paint}
}
/* --- направления: каждая карточка выезжает снизу, когда сама доходит до экрана (на телефоне - по одной);
«Не знаешь, с чего начать?» - строки по очереди выплывают слева --- */
@media (prefers-reduced-motion:no-preference){
.dirs__grid.is-ready .dcard{opacity:0;transform:translateY(var(--sp-48));transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.dirs__grid.is-ready .dcard.is-in{opacity:1;transform:none}
.dirs__grid.is-ready .dask>div>*,.dirs__grid.is-ready .dask>.btn{opacity:0;transform:translateX(calc(-1*var(--sp-24)));transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.dirs__grid.is-ready .dask__title{transition-delay:calc(var(--d,0ms) + 0ms)}
.dirs__grid.is-ready .dask__text{transition-delay:calc(var(--d,0ms) + 150ms)}
.dirs__grid.is-ready .dask>.btn{transition-delay:calc(var(--d,0ms) + 300ms),calc(var(--d,0ms) + 300ms),0s}
.dirs__grid.is-ready .dask.is-in>div>*,.dirs__grid.is-ready .dask.is-in>.btn{opacity:1;transform:none}
}
/* стоимость: до 1439 - карточка и таблица друг под другом; карточка широкая - заголовок слева, цена и кнопка справа */
@media (max-width:1439px){
.price__row{flex-direction:column}
/* широкая карточка: заголовок слева внизу, цена с кнопкой справа (выравнивание влево);
не помещается в строку - переносится столбиком, всё по левому краю */
.price__card{width:100%;height:auto;flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-32)}
.price__title{flex:0 1 auto}
.price__card>div{text-align:left;display:flex;flex-direction:column;align-items:flex-start}
.price__sub{margin-bottom:var(--sp-24)}
}
@media (max-width:767px){
.price__card{flex-direction:column;align-items:stretch;gap:var(--sp-48)}
.price__card>div{align-items:stretch}
}
#reviews{overflow:hidden;overflow:clip} /* слайдер вкладок не вылезает за лист */
/* отзывы на планшете (768-1199) - та же схема, что на телефоне: вкладки-слайдер под заголовком, видео и отзыв друг под другом */
@media (max-width:1199px){
#reviews .container{display:flex;flex-direction:column;gap:var(--sp-32)}
#reviews .rv-head{order:1;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-16);min-width:0}
#reviews .rv-tabs{order:2;display:flex;gap:var(--sp-16);margin:calc(-1*var(--sp-16)) calc(-1*(var(--gutter) - var(--sheet-inset))) 0;padding:0 calc(var(--gutter) - var(--sheet-inset));overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:calc(var(--gutter) - var(--sheet-inset));scrollbar-width:none}
#reviews .rv-tabs::-webkit-scrollbar{display:none}
#reviews .rv-tab{flex:0 0 auto;min-height:0;gap:var(--sp-16);padding:var(--sp-8) var(--sp-24) var(--sp-8) var(--sp-8);border-radius:var(--r-24);scroll-snap-align:start}
#reviews .rv-tab img{width:var(--sp-64);height:var(--sp-64);border-radius:var(--r-16)}
#reviews .rv-tab__name,#reviews .rv-tab__meta{white-space:nowrap}
#reviews .rv-main{order:3;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-16);margin-top:0;min-width:0}
#reviews .rv-media{height:auto;min-height:0;aspect-ratio:16/9;border-radius:var(--r-24)}
#reviews .rv-quote{border-radius:var(--r-24)}
}
@media (min-width:768px) and (max-width:1199px){
#reviews .rv-head .h2{max-width:none}
}
/* иконки «Что входит»: появляются увеличенными и плавно уменьшаются до обычного размера (при каждом появлении на экране) */
@media (prefers-reduced-motion:no-preference){
.inc__item.ia-ready .inc__icon{opacity:0;transform:scale(1.6);transition:opacity .45s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.inc__item.ia-ready.ia-in .inc__icon{opacity:1;transform:none}
}
/* --- попап с формой заявки --- */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:var(--sp-24);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
.modal.is-open{opacity:1;visibility:visible}
.modal__overlay{position:absolute;inset:0;background:rgba(9,16,30,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal__box{position:relative;display:flex;flex-direction:column;width:min(584px,100%);max-height:calc(100dvh - 2*var(--sp-24) - var(--h-40) - var(--sp-12));margin-top:calc(var(--h-40) + var(--sp-12));border-radius:var(--r-32);transform:translateY(var(--sp-24)) scale(.98);transition:transform .4s cubic-bezier(.2,.7,.2,1);scrollbar-width:none}
.modal__scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;border-radius:inherit}
.modal__scroll::-webkit-scrollbar{display:none}
.modal.is-open .modal__box{transform:none}
.modal__slot .apply__card{background:rgba(21,31,52,.82);backdrop-filter:blur(var(--blur-15));-webkit-backdrop-filter:blur(var(--blur-15))} /* слегка прозрачная */
.modal__close{position:absolute;z-index:3;top:calc(-1*(var(--h-40) + var(--sp-12)));right:0;width:var(--h-40);height:var(--h-40);border-radius:var(--r-pill);display:grid;place-items:center} /* крестик над попапом */
.modal__close svg{width:var(--icon-16);height:var(--icon-16)}
.modal__slot .apply__title{padding-right:0}
.apply__left.is-empty{min-height:var(--apply-h,auto)}
@media (max-width:767px){
.modal{padding:0;place-items:end center}
.modal__box{width:100%;max-height:calc(100dvh - var(--sp-80));margin-top:0;border-radius:var(--r-32) var(--r-32) 0 0;transform:translateY(100%)}
.modal__slot .apply__card{border-radius:var(--r-32) var(--r-32) 0 0;padding-bottom:calc(var(--sp-24) + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.modal,.modal__box{transition:none}}
.modal__alt{margin-top:var(--sp-8);padding:var(--sp-16) var(--sp-16) var(--sp-16) var(--sp-24);border-radius:var(--r-32);background:rgba(21,31,52,.82);backdrop-filter:blur(var(--blur-15));-webkit-backdrop-filter:blur(var(--blur-15))}
@media (max-width:767px){
.modal__slot .apply__card{border-radius:var(--r-32) var(--r-32) var(--r-24) var(--r-24);padding-bottom:var(--sp-24)}
.modal__alt{border-radius:var(--r-24);margin-top:var(--sp-8);padding:var(--sp-16) var(--sp-16) calc(var(--sp-16) + env(safe-area-inset-bottom,0px))}
.modal__box{border-radius:var(--r-32) var(--r-32) 0 0}
.modal__close{right:var(--sp-16)}
}
/* главный экран: пилюли по очереди падают сверху, карточка с текстом и кнопкой выходит снизу (CSS-анимация при загрузке) */
@media (prefers-reduced-motion:no-preference){
.js .hero__chips .chip,.js .hero__card{opacity:0;animation:heroSafe 0s 4s forwards} /* страховка: если скрипт не сработал, через 4 с всё видно */
.hero.h-go .hero__chips .chip{animation:heroChip .6s cubic-bezier(.2,.7,.2,1) both}
.hero.h-go .hero__chips .chip:nth-child(1){animation-delay:.45s}
.hero.h-go .hero__chips .chip:nth-child(2){animation-delay:.57s}
.hero.h-go .hero__chips .chip:nth-child(3){animation-delay:.69s}
.hero.h-go .hero__card{animation:heroCard .9s cubic-bezier(.2,.7,.2,1) .75s both}
}
@keyframes heroSafe{to{opacity:1}}
@keyframes heroChip{from{opacity:0;transform:translateY(calc(-1*var(--sp-16)))}to{opacity:1;transform:none}}
@keyframes heroCard{from{opacity:0;transform:translateY(var(--sp-48))}to{opacity:1;transform:none}}
/* подсказка «нажми, чтобы двигать карту» (телефон, живая карта) */
.map-hint{display:none;position:absolute;z-index:4;left:50%;top:var(--sp-16);transform:translateX(-50%);height:var(--h-40);padding:0 var(--sp-16);border:0;border-radius:var(--r-pill);background:rgba(21,31,52,.82);backdrop-filter:blur(var(--blur-10));-webkit-backdrop-filter:blur(var(--blur-10));color:var(--white);font:var(--fw-medium) var(--fs-14)/1 var(--font);white-space:nowrap;cursor:pointer}
.areas.is-live .map-hint{display:block}
.areas__mapbox.is-active .map-hint{background:var(--gold-300);color:var(--blue-900)}
.areas__mapbox.is-active{box-shadow:inset 0 0 0 2px var(--gold-300)}
/* --- облегчённый режим для слабых устройств (включается автоматически по замеру плавности, см. скрипт perf) ---
меньше размытие, чуть плотнее заливка - на глаз почти то же, но в разы легче для видеокарты */
.perf-lite .glass,.perf-lite .badge,.perf-lite .chip,.perf-lite .header__nav,.perf-lite .header__contacts,.perf-lite .burger{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.perf-lite .glass{background:rgba(226,232,240,.09)}
.perf-lite .glass--card{background:rgba(15,29,47,.68);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.perf-lite .qa.glass--card{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(17,29,52,.86)}
.perf-lite .header.is-scrolled .logo,.perf-lite .header.is-scrolled .pill-group,.perf-lite .header.is-scrolled .burger{background:rgba(21,31,52,.9)}
.perf-lite .modal__overlay{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(9,16,30,.82)}
.perf-lite .modal__slot .apply__card,.perf-lite .modal__alt{background:rgba(21,31,52,.94);backdrop-filter:none;-webkit-backdrop-filter:none}
.perf-lite .dd__list,.perf-lite .map-hint{backdrop-filter:none;-webkit-backdrop-filter:none}
/* =====================================================================
6. АДАПТИВ
===================================================================== */
@media (max-width:1679px){
:root{--rv-media-h:600px}
.rv-mark{width:44px;height:34px}
.rv-ava{width:var(--sp-48);height:var(--sp-48);font-size:var(--fs-24)}
.rv-tab{gap:var(--sp-16);padding-right:var(--sp-24)}
.rv-tab img{width:96px;height:96px}
.apply__left{width:44%}
.footer__row{flex-direction:column}
.footer__main{width:100%}
.footer__top{gap:var(--sp-48);justify-content:space-between}
.footer__legal{flex-direction:row;align-items:flex-end;text-align:left}
.footer__links{flex-direction:row;gap:var(--sp-24)}
:root{--coach-h:520px;--dial:340px;--price-card-w:40%;--areas-h:auto}
.areas{width:calc(100% - 2*var(--sheet-inset));flex-direction:column;align-items:stretch;padding:var(--sp-80) 0 0}
.areas__mapbox{position:relative;inset:auto;aspect-ratio:977/560;order:2;margin-top:var(--sp-48)}
.areas::after{display:none}
.areas__panel{gap:var(--sp-32)}
.areas__top{width:100%}
.m-foot{gap:var(--sp-64)}
.m-rows{width:56%}
.m-row{gap:var(--sp-32)}
.m-row__title{width:200px}
.join{gap:var(--sp-64)}
.join__left{width:40%}
.step{gap:var(--sp-32)}
.step__title{width:200px}
.founder__photo{width:40%}
.founder__body{gap:var(--sp-48)}
.dcard{padding:var(--sp-24)}
.dcard__veil{top:48%}
}
@media (max-width:1439px){
}
@media (max-width:1199px){
.apply{flex-direction:column-reverse}
.apply__left{width:100%}
.apply__photo{aspect-ratio:16/9;flex:none}
.footer__top{flex-wrap:wrap}
.footer__text{width:auto;flex:1;min-width:280px}
.footer__bottom{flex-wrap:wrap;gap:var(--sp-16)}
.footer__legal{flex-direction:column;align-items:flex-start}
.faq__cols{grid-template-columns:1fr;margin-top:var(--sp-48)}
.rv-main{grid-template-columns:1fr 1fr}
.rv-quote{gap:var(--sp-24)}
.rv-play{width:80px;height:80px}
.rv-play svg{width:var(--icon-32);height:var(--icon-32)}
.rv-tab{padding:var(--sp-8) var(--sp-16) var(--sp-8) var(--sp-8);gap:var(--sp-16);border-radius:var(--r-24)} /* внешнее скругление = внутреннее 16 + отступ 8 */
.rv-tab{min-height:80px}
.rv-tab img{width:var(--sp-64);height:var(--sp-64);border-radius:var(--r-16)}
:root{--rv-media-h:auto}
.rv-media{min-height:400px}
:root{--coach-h:560px;--inc-row:auto;--dial:300px;--price-card-w:44%;--price-card-h:auto}
:root{--areas-r:var(--r-32)}
.areas__mapbox{aspect-ratio:827/620}
.price__card{gap:var(--sp-48)}
.price__table{padding:var(--sp-8) var(--sp-24) var(--sp-24)}
.ptable th:first-child{width:46%}
.ptable th:nth-child(2),.ptable td:nth-child(2){width:24%}
.ptable th:last-child{width:30%}
.m-head{flex-direction:column;align-items:flex-start}
.m-head .sec-head__text{width:auto}
.m-panel{flex-direction:column}
.m-dial{flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap}
.m-foot{flex-direction:column;gap:var(--sp-32)}
.m-rows{width:100%}
.m-row__title{width:240px}
.inc__grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--sp-48)}
.inc__item{min-height:220px}
.join{flex-direction:column;gap:var(--sp-48)}
.join__left{width:100%}
.join .steps{width:100%}
.step__title{width:280px}
.sec-head{flex-direction:column;align-items:flex-start;gap:var(--sp-16)}
.coaches .h2{max-width:none}
.coaches__list{grid-template-columns:repeat(2,minmax(0,1fr))}
.founder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-32);row-gap:var(--sp-32);align-items:center}
.founder__body{display:contents}
.founder__photo{width:100%;grid-column:1;grid-row:1}
.founder__top{grid-column:2;grid-row:1}
.founder .glass-list,.founder__acts{grid-column:1/-1}
.founder__name{font-size:var(--fs-32)}
.dirs__head{flex-direction:column;align-items:flex-start;gap:var(--sp-16)}
.dirs__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dirs__feats{grid-template-columns:repeat(2,minmax(0,1fr))}
.header__nav{display:none}
.burger{display:grid}
.hero__row{flex-direction:column;align-items:flex-start;gap:var(--sp-48)}
.hero__card{width:min(419px,100%)}
}
@media (max-width:767px){
.apply__card{gap:var(--sp-32)}
.form__row{grid-template-columns:1fr}
.consent,.form .btn{margin-top:var(--sp-24)}
.apply__alt{flex-direction:column;align-items:stretch;text-align:center}
.apply__photo{aspect-ratio:4/3}
.footer{border-radius:var(--r-32) var(--r-32) 0 0}
.footer__top{flex-direction:column;align-items:flex-start;gap:var(--sp-24)}
.footer__top .btn{width:100%}
.footer__nav{flex-wrap:wrap;border-radius:var(--r-24)}
.footer__bottom{flex-direction:column;align-items:stretch}
.footer__bottom .btn--round{width:100%}
.footer__legal{flex-direction:column;align-items:flex-start}
.footer__links{flex-direction:column;align-items:flex-start;gap:var(--sp-12)}
:root{--coach-h:520px;--dial:min(300px,100%);--rv-media-h:300px;--price-card-w:100%}
.faq__cols{margin-top:var(--sp-32)}
.qa{padding:var(--sp-12) var(--sp-12) var(--sp-12) var(--sp-16)}
.rv-media{min-height:0}
.price__row{flex-direction:column}
.rv-main{grid-template-columns:1fr}
/* отзывы на телефоне по макету (Figma 5:196) */
#reviews .container{display:flex;flex-direction:column;gap:var(--sp-32)}
#reviews .rv-head{order:1;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--sp-16)}
#reviews .rv-head .h2{max-width:190px}
.rv-nav{flex-direction:column;align-items:center;gap:var(--sp-8)}
.rv-count{gap:var(--sp-8);font-size:var(--fs-18)}
.rv-btn{width:var(--h-40);height:var(--h-40)}
.rv-btn svg{width:var(--icon-20);height:var(--icon-20)}
#reviews .rv-tabs{order:2}
#reviews .rv-main{order:3;gap:var(--sp-16);margin-top:0;min-width:0;grid-template-columns:minmax(0,1fr)}
#reviews .rv-head{min-width:0}
.rv-media{padding:var(--sp-24)}
.rv-play{width:80px;height:80px}
.rv-play svg{width:var(--icon-32);height:var(--icon-32)}
.rv-res__row{gap:var(--sp-16)}
.rv-mark{width:32px;height:24px}
#reviews .rv-tabs{display:flex;gap:var(--sp-16);margin:calc(-1*var(--sp-16)) calc(-1*(var(--gutter) - var(--sheet-inset))) 0;padding:0 calc(var(--gutter) - var(--sheet-inset));overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:calc(var(--gutter) - var(--sheet-inset));scrollbar-width:none}
#reviews .rv-tabs::-webkit-scrollbar{display:none}
#reviews .rv-tab{flex:0 0 auto;max-width:calc(100% - var(--sp-32));min-height:0;gap:var(--sp-16);padding:var(--sp-8) var(--sp-24) var(--sp-8) var(--sp-8);border-radius:var(--r-24);scroll-snap-align:start}
#reviews .rv-tab__name,#reviews .rv-tab__meta{white-space:nowrap}
#reviews .rv-tab img{width:var(--sp-64);height:var(--sp-64);border-radius:var(--r-16)}
#reviews .rv-tab__name{font-size:var(--fs-16)}
#reviews .rv-tab__meta{font-size:var(--fs-14)}
#reviews .rv-media{height:332px;aspect-ratio:auto;min-height:0;border-radius:var(--r-24);padding:var(--sp-24)}
#reviews .rv-media__label{font-size:var(--fs-16)}
#reviews .rv-media__title{font-size:var(--fs-20);font-weight:var(--fw-medium)}
#reviews .rv-quote{border-radius:var(--r-24);padding:var(--sp-24);gap:var(--sp-32)}
#reviews .rv-text{font-size:var(--fs-16);line-height:1.3}
#reviews .rv-name{font-size:var(--fs-18)}
#reviews .rv-meta{font-size:var(--fs-16)}
#reviews .rv-res__num{font-size:var(--fs-40)}
#reviews .rv-res__text{font-size:var(--fs-16)}
.areas__mapbox{aspect-ratio:1/1}
/* мобильный блок карты по макету (Figma 5:132), цвета из палитры сайта */
.areas{background:var(--blue-900);padding-top:var(--sheet-pt);border-radius:var(--r-32)} /* верхний отступ как у листа «Результаты и отзывы» */
.areas__panel{gap:var(--sp-32)}
.areas__top{gap:var(--sp-32)}
.areas__text{font-size:var(--fs-18);color:var(--white-80)}
.areas__mapbox{margin-top:var(--sp-16);aspect-ratio:400/391;border-radius:var(--r-32) var(--r-32) 0 0;overflow:hidden;min-height:420px}
.areas__cta{display:none}
.areas__cta-bottom{display:block;position:absolute;left:0;right:0;bottom:var(--sp-16);z-index:3}
.chip-light{background:var(--blue-800);border-color:var(--blue-800);color:var(--white);height:var(--h-44);padding:0 var(--sp-24);font-size:var(--fs-16)}
.chip-light.is-on{background:var(--gold-300);border-color:var(--gold-300);color:var(--blue-900)}
.chip-light:hover{background:var(--blue-800)}
.chip-light.is-on:hover{background:var(--gold-300)}
/* районы - слайдер в одну строку */
.chips-light{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent 100%)}
.chips-light::-webkit-scrollbar{display:none}
.chip-light{flex:none;scroll-snap-align:start}
.price__row{margin-top:var(--sp-32)}
.price__card .btn{width:100%;justify-content:space-between}
.price__table{padding:var(--sp-8) var(--sp-16) var(--sp-16)}
.ptable th{font-size:var(--fs-14)}
.ptable{table-layout:fixed}
.ptable th:first-child{width:40%}
.ptable th:nth-child(2),.ptable td:nth-child(2){width:28%;padding-inline:var(--sp-8)}
.ptable th:last-child{width:32%}
.price__note{font-size:var(--fs-14)}
.header__row{gap:var(--sp-8)}
.header.is-scrolled .logo{padding:calc((52px - 31px)/2) var(--sp-16)}
.header.is-scrolled .logo svg{width:120px;height:31px} /* логотип крупнее, капсула по-прежнему 52 */
/* пилюли шапки на телефоне чуть крупнее: 52 вместо 48 */
.header__contacts .btn{height:var(--h-44);padding:0 var(--sp-20);font-size:var(--fs-16)}
.burger{width:calc(var(--h-44) + var(--sp-8));height:calc(var(--h-44) + var(--sp-8))}
.burger svg{width:22px;height:22px}
.m-dial{flex-direction:column;padding:var(--sp-24);gap:var(--sp-32)}
.dial{height:auto}
.m-chart{padding:var(--sp-24)}
.curve text{font-size:22px} /* в единицах графика: ~11px на экране телефона */
.curve .c-q,.curve .c-tag{display:none}
.m-chart__note{display:flex}
.m-row{flex-wrap:wrap;gap:var(--sp-8) var(--sp-16);padding:var(--sp-16) var(--sp-24)}
.m-row__title{width:auto;flex:1}
.m-row__text{flex-basis:100%}
.inc__grid{grid-template-columns:1fr;margin-top:var(--sp-32)}
.inc__item{min-height:0;gap:var(--sp-32)}
.inc__icon{width:var(--sp-32);height:var(--sp-32)}
.join .btn--icon-lg{width:100%;justify-content:space-between}
.steps{gap:var(--sp-24)}
.step{flex-wrap:wrap;gap:var(--sp-8) var(--sp-16)}
.step__n{width:auto;text-align:left}
.step__title{width:auto;flex:1}
.step__text{flex-basis:100%}
.coaches__list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none;margin-top:var(--sp-24)}
.coaches__list::-webkit-scrollbar{display:none}
.coach{flex:0 0 86%;scroll-snap-align:start;height:auto} /* край следующей карточки виден */
.coach__photo{flex:none;width:100%;aspect-ratio:auto;height:clamp(240px,calc((86vw - 24px) * .9),calc(100svh - 330px))} /* фото не сжимается: пропорция вместо остатка высоты */
.coaches .sec-head{gap:var(--sp-12)}
.coaches .sec-head__text{font-size:var(--fs-16)}
.btn{max-width:100%}
.btn--icon .btn__label{white-space:normal;line-height:1.2;min-width:0} /* узкие экраны: подпись переносится, а не вылезает */
.coach__photo .badge{font-size:var(--fs-14);padding:var(--sp-6) var(--sp-12);border-radius:var(--r-8)}
.founder{grid-template-columns:1fr;row-gap:var(--sp-32)}
.founder__photo,.founder__top{grid-column:1;grid-row:auto}
.glass-list{padding:var(--sp-16);gap:var(--sp-16)}
.founder__acts{flex-direction:column;align-items:stretch;width:100%}
.founder__acts .btn{width:100%}
.founder__acts .btn--icon-lg{justify-content:space-between}
.dirs__head .h2{white-space:normal}
.dirs__grid{grid-template-columns:1fr;margin-top:var(--sp-32)}
.dcard__veil{top:42%}
.dask{padding:var(--sp-24) 0}
.dirs__feats{grid-template-columns:1fr}
.feat{min-height:0}
.header .logo{flex:0 1 auto;min-width:0}
.logo svg{width:170px;height:44px}
.header .logo svg{width:100%;max-width:170px;height:auto;aspect-ratio:194/50} /* крупнее, но уступает место пилюлям на узких экранах */
.header__contacts .wa{display:none}
.hero{height:auto;min-height:calc(100svh + var(--hero-overlap))}
.hero__fx{position:relative;min-height:inherit}
.hero__inner{min-height:inherit;padding-top:calc(var(--header-top) + var(--h-48) + var(--sp-48));padding-bottom:calc(var(--hero-overlap) + var(--sp-32))}
.hero__bg{height:60%;background-position:50% 45%}
.hero__text{gap:var(--sp-24)}
.hero__chips{gap:var(--sp-8)}
.chip{font-size:var(--fs-14);padding:var(--sp-8) var(--sp-16)}
.hero__row{gap:var(--sp-32)}
.hero__card{width:100%}
}
@media (max-width:429px){
.header__contacts .btn{padding:0 var(--sp-16)}
}
@media (max-width:409px){
.header__contacts .btn{padding:0 var(--sp-12)}
.header__row{gap:var(--sp-6)}
}
@media (max-width:389px){
.header__contacts{display:none}
}
/* =====================================================================
ПРАВКИ 13.10 · шапка с логотипом по центру, направления в формате «фото + кнопка»
===================================================================== */
/* шапка: слева разделы (на телефоне - бургер), по центру логотип, справа разделы и контакты */
.header__row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
.header__side{display:flex;align-items:center;gap:var(--sp-8);min-width:0}
.header__side--r{justify-content:flex-end}
.header__row>.logo{justify-self:center}
/* все разделы слева: капсула компактнее, на ноутбуках уже 1440 - бургер, как на планшете */
.header__nav{gap:0}
.header__nav .btn{padding:0 var(--sp-12)}
@media (max-width:1279px){
.header__nav{display:none}
.burger{display:grid}
}
@media (max-width:767px){
.header__contacts .btn--gold{display:none}
.header__contacts .wa{display:inline-flex;width:var(--h-44);height:var(--h-44);padding:0}
.header__contacts .wa svg{width:var(--icon-20);height:var(--icon-20)}
.wa__lbl{display:none}
.header .logo svg{max-width:min(170px,calc(100vw - 2*var(--gutter) - 2*60px))}
.header.is-scrolled .logo svg{max-width:none}
}
@media (max-width:389px){.header__contacts{display:flex}}
/* направления: фото на всю карточку, снизу затемнение, название и тонкая кнопка во всю ширину */
.dcard{--dc-r:var(--r-32);--dc-p:var(--sp-24);border-radius:var(--dc-r);padding:var(--dc-p);justify-content:flex-end;align-items:stretch;gap:var(--sp-24)}
.dcard::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(13,24,42,0) 38%,rgba(13,24,42,.28) 62%,rgba(13,24,42,.78) 100%)}
.dcard__text{gap:var(--sp-6)}
.dcard__title{font-size:var(--t-32);text-shadow:0 1px 12px rgba(0,0,0,.25)}
.dcard__desc{color:var(--white-80)}
.dcard__more{display:flex;align-items:center;justify-content:center;height:var(--h-44);border:1px solid rgba(255,255,255,.75);border-radius:calc(var(--dc-r) - var(--dc-p));font-size:var(--fs-16);font-weight:var(--fw-regular);line-height:normal;letter-spacing:normal;text-transform:none;color:var(--white);transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.dcard:hover .dcard__more{background:var(--white);border-color:var(--white);color:var(--neutral-800)}
@media (max-width:767px){
/* как на референсе: карточки встык от края до края экрана */
.dirs__grid{gap:var(--sp-8)}
.dcard{--dc-r:var(--r-24);--dc-p:var(--sp-16);aspect-ratio:342/300}
.dcard__title{font-size:var(--fs-24)}
}
/* районы: дневная карта - светлая суша, бирюзовое море, тёмный текст */
:root{--map-sea:#96B0E2;--map-label:rgba(38,54,86,.5)}
.areas__text{color:var(--neutral-600)}
.areas::after{background:linear-gradient(90deg,rgba(247,244,238,.9) 0%,rgba(247,244,238,.6) 26%,rgba(247,244,238,0) 46%)}
.areas__live .maplibregl-ctrl-attrib{background:rgba(255,255,255,.75)!important;color:var(--neutral-500)!important}
.areas__live .maplibregl-ctrl-attrib a{color:var(--neutral-800)!important}
.areas__live .maplibregl-ctrl-group{background:rgba(255,255,255,.9)!important}
.areas__live .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:none}
.shd rect{fill:#FFFFFF;stroke:var(--gold-500,#C9A25A);stroke-opacity:.6}
.shd text{fill:#8A6A2E;fill-opacity:1}
.area{fill:#C9A25A;stroke:#B08940}
@media (max-width:767px){
.areas{background:var(--neutral-50,#F7F4EE)}
.areas__text{color:var(--neutral-600)}
.chip-light{background:var(--neutral-100);border-color:var(--neutral-200);color:var(--neutral-800)}
.chip-light:hover{background:var(--neutral-100)}
.chip-light.is-on,.chip-light.is-on:hover{background:var(--gold-300);border-color:var(--gold-300);color:var(--neutral-800)}
}
/* направления: чуть плотнее затемнение под текстом */
.dcard::after{background:linear-gradient(180deg,rgba(13,24,42,0) 30%,rgba(13,24,42,.35) 58%,rgba(13,24,42,.82) 100%)}
.areas{background:var(--neutral-50)}
/* первый экран: бассейн с видом на Бурдж-Халифа (светлое фото).
Фото опущено под шапку, небо продолжено цветом неба; сверху мягкая синяя дымка под белую шапку, снизу затемнение под текст */
.hero__media{background:linear-gradient(90deg,#5E8DAC 0%,#7C9FB8 30%,#9DB5C8 70%,#B6C5D2 100%)} /* сверху цвет неба, ниже - цвет фона сайта */
@media (min-width:1440px){:root{--hero-photo-top:120px}}
.hero__bg{top:var(--hero-photo-top,110px);background-image:url(../../assets/img/photos/hero-day.webp?v=2611021231);background-position:50% 0;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 70px);mask-image:linear-gradient(180deg,transparent 0,#000 70px)}
.hero__shade{background-image:
linear-gradient(180deg,rgba(21,37,64,.32) 0%,rgba(21,37,64,.08) 14%,rgba(21,37,64,0) 24%),
linear-gradient(180deg,rgba(30,50,86,0) 55%,rgba(30,50,86,.4) 78%,rgba(30,50,86,.85) 100%);background-size:100% 100%}
@media (max-width:1439px){
.hero__bg{bottom:auto;height:calc(66% - var(--hero-photo-top,110px));background-position:50% 0;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 70px,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 70px,#000 72%,transparent 100%)}
}
@media (max-width:767px){
:root{--hero-photo-top:84px}
.hero__bg{height:calc(62% - var(--hero-photo-top));background-position:50% 0}
}
/* фото прижато к низу: обрезается небо, а не бассейн */
.hero__bg{background-position:50% 100%}
@media (max-width:1439px){.hero__bg{background-position:50% 100%}}
@media (max-width:767px){.hero__bg{background-image:url(../../assets/img/photos/hero-day-m.webp?v=2611021231);background-position:50% 100%}}
/* шапка: правая капсула той же ширины, что и левая с разделами - симметрия вокруг логотипа */
.header__contacts .wa{flex:1}
@media (min-width:1440px){.hero__bg{bottom:var(--hero-overlap)}} /* фото заканчивается у нижнего края экрана, под листом ничего не прячется */
@media (min-width:1440px){.hero__bg{background-position:50% 18%}} /* на широких экранах шпиль не уходит под шапку, низ обрезается */
/* при слабом затемнении: карточка на плотнее стекле, заголовок с мягкой тенью - читаются на светлом фото */
.hero__card{background:rgba(21,37,64,.42);backdrop-filter:blur(var(--blur-15));-webkit-backdrop-filter:blur(var(--blur-15))}
.hero__text{filter:drop-shadow(0 2px 18px rgba(10,22,42,.35))}
/* =====================================================================
ШАПКА БЕЛАЯ · два варианта: .hdr-bar - полоса во всю ширину, .hdr-island - один белый остров
===================================================================== */
.hdr-bar .header,.hdr-island .header,.hdr-tab .header{color:var(--blue-900)}
.hdr-bar .header :is(.pill-group,.burger,.logo),.hdr-island .header :is(.pill-group,.burger,.logo),.hdr-tab .header :is(.pill-group,.burger,.logo){background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.hdr-bar .header :is(.pill-group,.burger,.logo)::before,.hdr-island .header :is(.pill-group,.burger,.logo)::before,.hdr-tab .header :is(.pill-group,.burger,.logo)::before{display:none}
.hdr-bar .header .logo,.hdr-island .header .logo,.hdr-tab .header .logo{padding:0!important}
.hdr-bar .header .logo svg,.hdr-island .header .logo svg,.hdr-tab .header .logo svg{fill:var(--blue-900);width:150px;height:39px;max-width:none}
.hdr-bar .header .burger svg,.hdr-island .header .burger svg,.hdr-tab .header .burger svg{stroke:var(--blue-900)}
.hdr-bar .header .wa svg,.hdr-island .header .wa svg,.hdr-tab .header .wa svg{fill:var(--blue-900)}
.hdr-bar .header .btn--ghost,.hdr-island .header .btn--ghost,.hdr-tab .header .btn--ghost{color:var(--blue-900)}
.hdr-bar .header .btn--ghost:hover,.hdr-island .header .btn--ghost:hover,.hdr-tab .header .btn--ghost:hover,
.hdr-bar .header .btn--active,.hdr-island .header .btn--active,.hdr-tab .header .btn--active{background:var(--neutral-100)!important}
.hdr-bar .header__contacts,.hdr-island .header__contacts,.hdr-tab .header__contacts{min-width:0!important}
.hdr-bar .header__contacts .wa,.hdr-island .header__contacts .wa,.hdr-tab .header__contacts .wa{flex:none}
.hdr-bar .header .pill-group,.hdr-island .header .pill-group,.hdr-tab .header .pill-group{padding:0}
/* полоса */
.hdr-bar .header{padding-top:env(safe-area-inset-top,0px);background:#fff;box-shadow:0 1px 0 rgba(24,38,64,.08)}
.hdr-bar .header.is-scrolled{padding-top:env(safe-area-inset-top,0px);box-shadow:0 6px 24px rgba(24,38,64,.10)}
.hdr-bar .header__row{height:76px}
.hdr-bar{--hero-photo-top:76px}
/* остров */
.hdr-island .header__row{height:60px;padding:0 var(--sp-8) 0 var(--sp-16);background:#fff;border-radius:var(--r-pill);box-shadow:0 10px 34px rgba(14,30,60,.14)}
.hdr-island .header .logo svg{width:132px;height:34px}
/* фото первого экрана под белой шапкой: верхняя дымка больше не нужна */
.hdr-bar .hero__shade,.hdr-island .hero__shade,.hdr-tab .hero__shade{background-image:linear-gradient(180deg,rgba(30,50,86,0) 55%,rgba(30,50,86,.4) 78%,rgba(30,50,86,.85) 100%)}
.hdr-bar .hero__bg{-webkit-mask-image:none;mask-image:none}
@media (min-width:1440px){.hdr-bar{--hero-photo-top:76px}}
@media (max-width:1439px){.hdr-bar .hero__bg{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%)}}
@media (max-width:767px){
.hdr-bar .header__row{height:64px}
.hdr-bar{--hero-photo-top:64px}
.hdr-island .header__row{height:56px;padding:0 var(--sp-4)}
.hdr-bar .header .logo svg,.hdr-island .header .logo svg{width:124px;height:32px}
.hdr-bar .header .burger,.hdr-island .header .burger,.hdr-bar .header__contacts .wa,.hdr-island .header__contacts .wa{width:44px;height:44px}
}
@media (min-width:2561px){.hero__bg{background-image:url(../../assets/img/photos/hero-day-wide.webp?v=2611021231);background-position:50% 100%}} /* шире 2K - широкий кадр, бассейн не уходит за край */
/* шапка-вкладка: белая, прилипла к верхнему краю, скругления только снизу */
.hdr-tab .header{padding-top:0!important}
.hdr-tab .header__row{height:72px;padding:0 var(--sp-12) 0 var(--sp-20);background:#fff;border-radius:0 0 var(--r-24) var(--r-24);box-shadow:0 10px 30px rgba(14,30,60,.14)}
.hdr-tab .header.is-scrolled .header__row{box-shadow:0 8px 24px rgba(14,30,60,.16)}
.hdr-tab .header .logo svg{fill:url(#logoGold);width:140px;height:36px}
.hdr-tab .header__contacts{gap:var(--sp-8)}
.hdr-tab .header__contacts .wa{background:var(--neutral-100)!important;padding:0 var(--sp-16)}
.hdr-tab .header__contacts .wa:hover{background:var(--neutral-200)!important}
.hdr-tab .header .btn--gold{background:var(--blue-800);box-shadow:none;text-shadow:none}
.hdr-tab .header .btn--gold:hover{background:#33497A;filter:none}
.hdr-tab .header .btn--gold::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent)}
.hdr-tab{--hero-photo-top:72px}
.hdr-tab .hero__shade{background-image:linear-gradient(180deg,rgba(30,50,86,0) 55%,rgba(30,50,86,.4) 78%,rgba(30,50,86,.85) 100%)}
.hdr-tab .hero__bg{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40px);mask-image:linear-gradient(180deg,transparent 0,#000 40px)}
@media (min-width:1440px){.hdr-tab{--hero-photo-top:72px}}
@media (max-width:1439px){.hdr-tab .hero__bg{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40px,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 40px,#000 72%,transparent 100%)}}
@media (max-width:767px){
.hdr-tab .header__row{height:60px;padding:0 var(--sp-8);border-radius:0 0 var(--r-16) var(--r-16)}
.hdr-tab{--hero-photo-top:60px}
.hdr-tab .header .logo svg{width:120px;height:31px}
.hdr-tab .header .burger,.hdr-tab .header__contacts .wa{width:44px;height:44px;padding:0}
}
/* шапка-вкладка v2: ширина и цвет как у светлых листов, равные отступы, скругление по правилу (внешний = внутренний + отступ) */
.hdr-tab{--hdr-p:var(--sp-16);--hdr-btn:var(--h-40)}
.hdr-tab .header__row{width:calc(100% - 2*var(--sheet-inset));max-width:var(--sheet-max);margin-inline:auto;height:calc(var(--hdr-btn) + 2*var(--hdr-p));padding:var(--hdr-p);
background:var(--neutral-50);border-radius:0 0 calc(var(--hdr-btn)/2 + var(--hdr-p)) calc(var(--hdr-btn)/2 + var(--hdr-p))}
.hdr-tab .header .logo svg{width:155px;height:40px}
.hdr-tab .header__contacts .wa{background:#ECEAE4!important}
.hdr-tab .header__contacts .wa:hover{background:#E3E1DA!important}
.hdr-tab .header .btn--active,.hdr-tab .header .btn--ghost:not(.wa):hover{background:#ECEAE4!important}
.hdr-tab{--hero-photo-top:72px}
@media (max-width:767px){
.hdr-tab{--hdr-p:var(--sp-10,10px);--hdr-btn:var(--h-44);--hero-photo-top:64px}
.hdr-tab .header__row{padding:var(--hdr-p)}
.hdr-tab .header .logo svg{width:132px;height:34px}
}
/* шапка v3: белая; пункты и WhatsApp на светло-сером #F4F2EE, при наведении темнее; между пунктами зазор 8, как справа */
.hdr-tab .header__row{background:#fff}
.hdr-tab .header__nav{gap:var(--sp-8)}
.hdr-tab .header .header__nav .btn--ghost,.hdr-tab .header__contacts .wa{background:#F4F2EE!important;padding:0 var(--sp-16)}
.hdr-tab .header .header__nav .btn--ghost:hover,.hdr-tab .header__contacts .wa:hover,.hdr-tab .header .header__nav .btn--active{background:#E8E5DF!important}
@media (max-width:767px){.hdr-tab .header .burger{background:#F4F2EE!important}.hdr-tab .header__contacts .wa{padding:0}}
/* карта: дороги и подписи контрастнее */
.shd rect{stroke-opacity:.9}
.area{fill-opacity:.12;stroke-opacity:.8}
/* =====================================================================
ШАПКА ПО МАКЕТУ (Figma 62:65): белая полоса во всю ширину, скругление снизу,
контент до 1700, элементы 44, логотип строго по центру.
?header=fig1700 - сама полоса шириной 1700; ?header=burger - бургер на всех экранах
===================================================================== */
.hdr-fig{--hero-photo-top:68px}
.hdr-fig .header{background:#fff;border-radius:0 0 var(--r-24) var(--r-24);box-shadow:0 8px 28px rgba(15,25,50,.10)}
.hdr-fig .header__row{width:min(1700px,calc(100% - 2*var(--gutter) + 2*var(--sp-16)));max-width:none;height:68px;padding:12px 0;background:transparent;border-radius:0;box-shadow:none!important}
.hdr-fig .header .btn--sm{height:44px;font-size:var(--fs-14)}
.hdr-fig .header__nav{gap:var(--sp-8)}
.hdr-fig .header .header__nav .btn--ghost{background:transparent!important;color:#6B707C;padding:0 var(--sp-16);transition:background-color .2s,color .2s}
.hdr-fig .header .header__nav .btn--ghost:hover{background:#F4F2EE!important;color:#1E2433}
.hdr-fig .header .header__nav .btn--active{background:transparent!important;color:#1E2433}
.hdr-fig .header__contacts .wa{background:#F4F2EE!important;color:#1E2433;padding:0 var(--sp-16)}
.hdr-fig .header__contacts .wa:hover{background:#E8E5DF!important}
.hdr-fig .header .logo svg{width:170px;height:44px}
.hdr-fig .header .burger{width:44px;height:44px;background:#F4F2EE!important}
.hdr-fig .header .burger:hover{background:#E8E5DF!important}
/* вариант: полоса шириной 1700 (на экранах уже - с отступом 16 от краёв), отступы внутри равные */
.hdr-fig1700 .header{background:transparent;box-shadow:none;border-radius:0}
.hdr-fig1700 .header__row{width:min(1700px,calc(100% - 2*var(--sheet-inset)));padding:12px;background:#fff;border-radius:0 0 34px 34px;box-shadow:0 8px 28px rgba(15,25,50,.10)!important}
/* вариант: бургер на всех экранах */
.hdr-burger .header .header__nav{display:none!important}
.hdr-burger .header .burger{display:grid!important}
@media (max-width:1279px){.hdr-fig .header .burger{display:grid}}
@media (max-width:767px){
.hdr-fig{--hero-photo-top:64px}
.hdr-fig .header{border-radius:0 0 var(--r-24) var(--r-24)}
.hdr-fig .header__row{height:64px;padding:10px 0}
.hdr-fig1700 .header__row{width:100%;padding:10px;border-radius:0 0 32px 32px}
.hdr-fig .header .logo svg{width:140px;height:36px}
.hdr-fig .header__contacts .wa{width:44px;padding:0}
}
/* первый экран по макету (Figma 62:45): заголовок почти белый без серого ухода, плашка плотнее */
.hero__title{background:linear-gradient(90deg,#FFFFFF 0%,#F4F2F2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__card{background:rgba(38,52,82,.74)}
/* вода: холст всегда неподвижен относительно экрана (без рывков при быстрой прокрутке),
зона обрезает его по своим границам, движение дна целиком считает шейдер */
.zone>.zone__water{clip-path:inset(0)}
.zone__sticky{position:fixed;inset:0;height:100vh;height:100lvh}
/* плашка на первом экране - размытие сильнее */
.hero__card{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
/* заголовок первого экрана крупнее */
.hero__title{font-size:clamp(56px,4.3vw,76px);max-width:none}
@media (max-width:1199px){.hero__title{font-size:48px}}
@media (max-width:767px){.hero__title{font-size:clamp(32px,9.4vw,40px)}}
/* заголовок: две строки жёстко, как в макете */
.hero__title .hl{display:block;white-space:nowrap}
@media (max-width:389px){.hero__title .hl{white-space:normal}}
.hero__title.t-title-light,.hero__title{background:linear-gradient(90deg,#FFFFFF 0%,#F4F2F2 100%)!important;-webkit-background-clip:text!important;background-clip:text!important}
/* плашка темнее, как в макете, размытие сильнее */
.hero__card{background:rgba(32,44,70,.84)!important;backdrop-filter:blur(36px)!important;-webkit-backdrop-filter:blur(36px)!important}
/* телефон: фото ниже, сверху дорисованное небо; заголовок всегда помещается в свой блок */
@media (max-width:767px){
.hdr-fig{--hero-photo-top:120px}
.hero__bg{top:var(--hero-photo-top)!important;height:calc(66% - var(--hero-photo-top))!important;background-position:50% 100%!important;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 76%,transparent 100%)!important;mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 76%,transparent 100%)!important}
.hero__media{background:linear-gradient(90deg,#6E98B4 0%,#86A8BF 45%,#A9BCCB 100%)}
.hero__title{font-size:calc((100vw - 2*var(--gutter)) / 10.2)!important}
}
/* низ первого экрана уходит в цвет фона сайта (как под водой) */
.hero__shade,.hdr-tab .hero__shade{background-image:linear-gradient(180deg,rgba(38,54,86,0) 50%,rgba(38,54,86,.55) 76%,rgb(38,54,86) 100%)!important}
@media (max-width:767px){
.hero__media{background:linear-gradient(180deg,#86A8BF 0%,#9DB4C6 30%,#263656 62%)!important}
.hero__shade,.hdr-tab .hero__shade{background-image:linear-gradient(180deg,rgba(38,54,86,0) 40%,rgba(38,54,86,.7) 58%,rgb(38,54,86) 72%)!important}
}
.tile__sub{display:block;margin-top:var(--sp-4);font-size:var(--fs-14);font-weight:var(--fw-regular);letter-spacing:.02em;color:var(--gold-600)}
/* направления: скругления меньше (правило: радиус кнопки = радиус карточки - отступ) */
.dcard{--dc-r:var(--r-24);--dc-p:var(--sp-20)}
@media (max-width:767px){.dcard{--dc-r:20px;--dc-p:var(--sp-16)}}
/* карточки направлений: скругление 8, у кнопки 4 */
.dcard{--dc-r:var(--r-8)}
@media (max-width:767px){.dcard{--dc-r:var(--r-8)}}
.dcard__more{border-radius:var(--r-4)}
/* ночной режим первого экрана: подсвеченные Бурдж-Халифа и бассейн, небо сверху продолжено */
.is-night .hero__media{background:linear-gradient(90deg,#06111F 0%,#081A2E 50%,#0A2440 100%)!important}
.is-night .hero__bg{background-image:url(../../assets/img/photos/hero-night.webp?v=2611021231)!important}
@media (min-width:2561px){.is-night .hero__bg{background-image:url(../../assets/img/photos/hero-night-wide.webp?v=2611021231)!important}}
@media (max-width:767px){
.is-night .hero__media{background:linear-gradient(180deg,#07142A 0%,#0A1E38 30%,#263656 62%)!important}
.is-night .hero__bg{background-image:url(../../assets/img/photos/hero-night-m.webp?v=2611021231)!important}
}
.is-night .hero__bg{background-position:50% 100%!important}
@media (min-width:1600px){.is-night .hero__bg{background-image:url(../../assets/img/photos/hero-night-wide.webp?v=2611021231)!important}}
@media (max-width:767px){.is-night .hero__bg{top:64px!important;height:calc(64% - 64px)!important}}
/* =====================================================================
ПЕРВЫЙ ЭКРАН · одинаковая геометрия дня и ночи
оба кадра одного размера, небо сверху дорисовано, фото прижато к низу
===================================================================== */
.hero__bg{top:68px!important;bottom:var(--hero-overlap)!important;height:auto!important;background-image:url(../../assets/img/photos/hero-day.webp?v=2611021231)!important;background-position:50% 100%!important;background-size:cover!important;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40px)!important;mask-image:linear-gradient(180deg,transparent 0,#000 40px)!important}
.hero__media{background:linear-gradient(90deg,#4C7590 0%,#7792AA 50%,#A8ACAF 100%)!important}
.is-night .hero__media{background:linear-gradient(90deg,#040E19 0%,#06142A 50%,#071B2D 100%)!important}
.is-night .hero__bg{background-image:url(../../assets/img/photos/hero-night.webp?v=2611021231)!important}
@media (min-width:1600px){
.hero__bg{background-image:url(../../assets/img/photos/hero-day-wide.webp?v=2611021231)!important}
.is-night .hero__bg{background-image:url(../../assets/img/photos/hero-night-wide.webp?v=2611021231)!important}
}
@media (max-width:1439px){
.hero__bg{bottom:auto!important;height:calc(66% - 68px)!important;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40px,#000 74%,transparent 100%)!important;mask-image:linear-gradient(180deg,transparent 0,#000 40px,#000 74%,transparent 100%)!important}
}
@media (max-width:767px){
.hero__bg{top:64px!important;height:calc(64% - 64px)!important;background-image:url(../../assets/img/photos/hero-day-m.webp?v=2611021231)!important}
.is-night .hero__bg{top:64px!important;height:calc(64% - 64px)!important;background-image:url(../../assets/img/photos/hero-night-m.webp?v=2611021231)!important}
.hero__media{background:linear-gradient(180deg,#5E8199 0%,#7F96AA 30%,#263656 62%)!important}
.is-night .hero__media{background:linear-gradient(180deg,#050F1D 0%,#0A1E38 30%,#263656 62%)!important}
}
/* мягкое погружение: фото медленно уходит вверх и чуть приближается к воде, потом наезжает лист */
.hero-dive{height:45vh;height:45svh}
@media (max-width:767px){.hero-dive{height:35svh}}
.hero__media{transform-origin:50% 90%;transform:translateY(calc(-9%*var(--p,0))) scale(calc(1.02 + .22*var(--p,0)));filter:blur(calc(4px*max(0,var(--p,0) - .7)/.3))}
.hero__inner{opacity:calc(1 - 1.8*var(--p,0));filter:blur(calc(5px*var(--p,0)));transform:translateY(calc(-30px*var(--p,0)))}
.hero__fx::after{opacity:calc(max(0,var(--p,0) - .6)/.4)}
@media (max-width:1439px){.hero__media{transform-origin:50% 60%}}
@media (prefers-reduced-motion:reduce){.hero-dive{height:0}.hero__media,.hero__inner{transform:none;filter:none}}
/* =====================================================================
НОЧНАЯ ТЕМА (19:00-6:00 по Дубаю, ?night=1): весь сайт в цвете ночного неба
светлые листы становятся тёмными, нейтральная шкала переворачивается
===================================================================== */
.is-night{--blue-600:#3A4F78;--blue-800:#0D1A30;--blue-900:#081325;--blue-950:#040A16;
--header-bg:rgba(8,19,37,.85)}
.is-night body{background:var(--blue-800)}
.is-night :is(.sheet,.areas,.modal__box){
--neutral-50:#111F38;--neutral-100:#182A47;--neutral-200:#22365A;--neutral-300:#30466D;
--neutral-400:#7F8DA8;--neutral-500:#9FAAC0;--neutral-600:#BAC3D4;--neutral-800:#EEF2F8;
--grad-title-dark:linear-gradient(82.32deg,#F4F6FA 40%,#9FAAC0 100%)}
.is-night .sheet{box-shadow:inset 0 0 0 1px rgba(240,247,255,.06)}
.is-night .tile,.is-night .rv-quote{box-shadow:inset 0 0 0 1px rgba(240,247,255,.05)}
/* шапка ночью - тёмная */
.is-night .hdr-fig .header,.is-night.hdr-fig .header,.is-night.hdr-fig1700 .header__row{background:#0F1E38!important;box-shadow:0 8px 28px rgba(0,0,0,.35)!important}
.is-night.hdr-fig1700 .header{background:transparent!important;box-shadow:none!important}
.is-night .hdr-fig .header .header__nav .btn--ghost,.is-night.hdr-fig .header .header__nav .btn--ghost{color:#9FAAC0}
.is-night.hdr-fig .header .header__nav .btn--ghost:hover{background:#1B2D4D!important;color:#fff}
.is-night.hdr-fig .header .header__nav .btn--active{color:#fff}
.is-night.hdr-fig .header__contacts .wa,.is-night.hdr-fig .header .burger{background:#1B2D4D!important;color:#fff}
.is-night.hdr-fig .header__contacts .wa:hover,.is-night.hdr-fig .header .burger:hover{background:#25395E!important}
.is-night.hdr-fig .header .wa svg{fill:#fff}
.is-night.hdr-fig .header .burger svg{stroke:#fff}
.is-night.hdr-fig .header .btn--gold{background:var(--grad-gold-btn);box-shadow:inset 0 0 0 2px var(--stroke-gold-btn);color:#fff}
/* карта ночью */
.is-night .areas{--map-sea:#0B2A4A;--map-label:rgba(240,247,255,.35)}
.is-night .areas__text{color:#BAC3D4}
.is-night .areas::after{background:linear-gradient(90deg,rgba(17,31,56,.92) 0%,rgba(17,31,56,.6) 26%,rgba(17,31,56,0) 46%)}
.is-night #sea stop{stop-color:#0B2A4A}
.is-night #landG stop{stop-color:#13223D}
.is-night .areas__map [fill="#DCE3D9"]{fill:#172C40}
.is-night .areas__map [fill="#C9A25A"]{fill:#C9A25A;fill-opacity:.45}
.is-night .areas__map g[stroke]{stroke:#F0F7FF;stroke-opacity:.04}
.is-night .shd rect{fill:#0D1A30}
.is-night .shd text{fill:#E6C78A}
.is-night .area{fill:#E6C78A;stroke:#E6C78A}
.is-night .areas__live .maplibregl-ctrl-group{background:rgba(17,31,56,.9)!important}
.is-night .areas__live .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1)}
.is-night .areas__live .maplibregl-ctrl-attrib{background:rgba(8,19,37,.7)!important;color:#7F8DA8!important}
/* первый экран ночью - низ уходит в ночной фон */
.is-night .hero__shade{background-image:linear-gradient(180deg,rgba(13,26,48,0) 50%,rgba(13,26,48,.55) 76%,rgb(13,26,48) 100%)!important}
.is-night .hero__fx::after{background:var(--blue-800)}
.is-night .hero__card{background:rgba(13,26,48,.82)!important}
@media (max-width:767px){.is-night .hero__media{background:linear-gradient(180deg,#050F1D 0%,#0A1E38 30%,#0D1A30 62%)!important}
.is-night .hero__shade{background-image:linear-gradient(180deg,rgba(13,26,48,0) 40%,rgba(13,26,48,.7) 58%,rgb(13,26,48) 72%)!important}}
/* Бурдж-Халифа выше: фото чуть крупнее, привязано к низу - башня растёт вверх, бассейн на месте */
@media (min-width:1440px){.hero__bg{background-size:114% auto!important}}
@media (max-width:767px){.hero__bg{background-size:auto 122%!important}}
@media (min-width:1440px) and (max-width:1599px){.hero__bg{background-size:106% auto!important}}
/* =====================================================================
ПРАВКИ 20.10
===================================================================== */
/* переключатель темы в шапке */
.theme-tg{width:44px;padding:0!important;color:#1E2433}
.theme-tg svg{width:20px;height:20px}
.theme-tg .i-sun{display:none}
.is-night .theme-tg .i-sun{display:block}.is-night .theme-tg .i-moon{display:none}
.hdr-fig .header__contacts .theme-tg{background:#F4F2EE!important}
.hdr-fig .header__contacts .theme-tg:hover{background:#E8E5DF!important}
.is-night.hdr-fig .header__contacts .theme-tg{background:#1B2D4D!important;color:#E6C78A}
.is-night.hdr-fig .header__contacts .theme-tg:hover{background:#25395E!important}
.theme-anim,.theme-anim *{transition:background-color .6s ease,color .6s ease,border-color .6s ease,fill .6s ease!important}
.theme-anim .hero__bg{transition:none!important}
/* шапка: стекло, как просил клиент (пример - кнопки iOS) */
.hdr-fig1700 .header__row{background:rgba(255,255,255,.62)!important;backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
box-shadow:0 8px 28px rgba(15,25,50,.10),inset 0 0 0 1px rgba(255,255,255,.55),inset 0 1px 0 rgba(255,255,255,.8)!important}
.hdr-fig .header__contacts :is(.wa,.theme-tg),.hdr-fig .header .burger{background:rgba(255,255,255,.55)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.hdr-fig .header__contacts :is(.wa,.theme-tg):hover,.hdr-fig .header .burger:hover{background:rgba(255,255,255,.85)!important}
.is-night.hdr-fig1700 .header__row{background:rgba(13,26,48,.55)!important;box-shadow:0 8px 28px rgba(0,0,0,.35),inset 0 0 0 1px rgba(240,247,255,.10),inset 0 1px 0 rgba(240,247,255,.12)!important}
.is-night.hdr-fig .header__contacts :is(.wa,.theme-tg),.is-night.hdr-fig .header .burger{background:rgba(240,247,255,.08)!important;box-shadow:inset 0 0 0 1px rgba(240,247,255,.12)}
.is-night.hdr-fig .header__contacts :is(.wa,.theme-tg):hover,.is-night.hdr-fig .header .burger:hover{background:rgba(240,247,255,.16)!important}
.perf-lite.hdr-fig1700 .header__row{background:rgba(255,255,255,.92)!important}
.perf-lite.is-night.hdr-fig1700 .header__row{background:rgba(13,26,48,.92)!important}
/* лист «Направления»: верх - матовое стекло, сквозь него проступает фото, ниже плотный */
.sheet--overlap{background:linear-gradient(180deg,rgba(249,247,243,.66) 0,rgba(249,247,243,.9) 160px,var(--neutral-50) 320px);
backdrop-filter:blur(26px) saturate(1.4);-webkit-backdrop-filter:blur(26px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.is-night .sheet--overlap{background:linear-gradient(180deg,rgba(17,31,56,.6) 0,rgba(17,31,56,.88) 160px,var(--neutral-50) 320px);box-shadow:inset 0 1px 0 rgba(240,247,255,.12)}
.perf-lite .sheet--overlap{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--neutral-50)}
/* правка 6: стеклянные плашки с иконками под первым экраном */
.hero__inner{flex-direction:column;justify-content:flex-end;align-items:stretch;gap:var(--sp-32)}
.hero__perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-16)}
.perk{display:flex;align-items:center;gap:var(--sp-16);padding:var(--sp-16) var(--sp-20);border-radius:var(--r-16);
background:rgba(13,26,48,.42);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
box-shadow:inset 0 0 0 1px rgba(240,247,255,.14),inset 0 1px 0 rgba(240,247,255,.18)}
.perk__ic{flex:none;width:44px;height:44px;border-radius:var(--r-8);display:grid;place-items:center;background:rgba(230,199,138,.14);color:var(--gold-300)}
.perk__ic svg{width:22px;height:22px}
.perk__t{font-size:var(--fs-18);line-height:1.25;color:var(--white)}
.perk__t b{font-weight:var(--fw-medium);color:var(--gold-300);white-space:nowrap}
.hero__perks .perk{opacity:calc(1 - 1.8*var(--p,0))}
@media (max-width:1199px){.perk{padding:var(--sp-12) var(--sp-16);gap:var(--sp-12)}.perk__t{font-size:var(--fs-16)}}
@media (max-width:767px){
.hero__inner{gap:var(--sp-16)}
.hero__perks{gap:var(--sp-8)}
.perk{flex-direction:column;align-items:flex-start;gap:var(--sp-8);padding:var(--sp-12);border-radius:var(--r-12,12px)}
.perk__ic{width:32px;height:32px}.perk__ic svg{width:18px;height:18px}
.perk__t{font-size:var(--fs-14)}
}
/* город выше: фото заканчивается над плашками, ниже уходит в фон */
@media (min-width:1440px){
.hero__bg{bottom:calc(var(--hero-overlap) + 140px)!important;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40px,#000 calc(100% - 120px),transparent 100%)!important;mask-image:linear-gradient(180deg,transparent 0,#000 40px,#000 calc(100% - 120px),transparent 100%)!important}
}
@media (min-width:1440px) and (max-width:1599px){.hero__bg{background-size:cover!important}}
@media (min-width:1600px){.hero__bg{background-size:cover!important}}
@media (max-width:1439px){.hero__bg{height:calc(60% - 68px)!important}}
@media (max-width:767px){.hero__bg{height:calc(56% - 64px)!important;background-size:auto 116%!important}}
/* 20.10 v2 ----------------------------------------------------------- */
/* плашки - отдельной полосой сразу под первым экраном, перед «Направлениями» */
.hero__inner{gap:0}
.hero__perks{position:relative;z-index:2;margin-top:calc(-1*var(--hero-overlap));padding:var(--sp-16) 0 var(--sp-32)}
.hero__perks .perk{opacity:1}
.sheet--overlap{margin-top:0!important}
.perk{background:rgba(12,24,40,.5);backdrop-filter:blur(var(--blur-10));-webkit-backdrop-filter:blur(var(--blur-10));box-shadow:0 0 15px rgba(0,0,0,.25);position:relative}
.perk::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;opacity:.15;pointer-events:none;
background:linear-gradient(171deg,rgba(255,255,255,.59) 0%,rgba(240,247,255,.13) 27%,rgba(41,61,88,.88) 76%,rgba(140,154,172,.37) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media (min-width:1440px){.hero__bg{bottom:calc(var(--hero-overlap) + 40px)!important}}
/* шапка - лёгкое стекло, почти плотная */
.hdr-fig1700 .header__row{background:rgba(255,255,255,.86)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.is-night.hdr-fig1700 .header__row{background:rgba(13,26,48,.82)!important}
.hdr-fig .header__contacts :is(.wa,.theme-tg),.hdr-fig .header .burger{background:#F4F2EE!important;box-shadow:none}
.hdr-fig .header__contacts :is(.wa,.theme-tg):hover,.hdr-fig .header .burger:hover{background:#E8E5DF!important}
.is-night.hdr-fig .header__contacts :is(.wa,.theme-tg),.is-night.hdr-fig .header .burger{background:#1B2D4D!important;box-shadow:none}
.hero-dive{height:25vh;height:25svh}
@media (max-width:767px){.hero-dive{height:15svh}}
/* фото крупнее: низ у края экрана, сам кадр увеличен */
@media (min-width:1440px){.hero__bg{bottom:var(--hero-overlap)!important;background-size:122% auto!important;background-position:50% 100%!important;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40px)!important;mask-image:linear-gradient(180deg,transparent 0,#000 40px)!important}}
@media (min-width:1440px) and (max-width:1599px){.hero__bg{background-size:114% auto!important}}
@media (max-width:1439px){.hero__bg{height:calc(68% - 68px)!important;background-size:auto 112%!important}}
@media (max-width:767px){.hero__bg{height:calc(66% - 64px)!important;background-size:auto 108%!important}}
/* плашки под первым экраном - крупнее */
.perk{padding:var(--sp-24) var(--sp-24);gap:var(--sp-20);min-height:104px;border-radius:var(--r-24)}
.perk__ic{width:56px;height:56px;border-radius:var(--r-16)}
.perk__ic svg{width:26px;height:26px}
.perk__t{font-size:var(--fs-20)}
@media (max-width:1199px){.perk{padding:var(--sp-16);min-height:0}.perk__ic{width:44px;height:44px}.perk__t{font-size:var(--fs-18)}}
@media (max-width:767px){.perk{padding:var(--sp-12);border-radius:var(--r-16)}.perk__ic{width:36px;height:36px;border-radius:var(--r-8)}.perk__ic svg{width:20px;height:20px}.perk__t{font-size:var(--fs-14)}}
/* «Направления» - без белого фона: тёмное стекло, как у карточек в нижних блоках */
#directions{background:rgba(12,24,40,.5)!important;backdrop-filter:blur(var(--blur-10))!important;-webkit-backdrop-filter:blur(var(--blur-10))!important;
box-shadow:0 0 15px rgba(0,0,0,.25)!important;color:var(--white);
--neutral-50:transparent;--neutral-100:rgba(255,255,255,.05);--neutral-200:rgba(255,255,255,.1);
--neutral-400:rgba(240,247,255,.55);--neutral-500:rgba(240,247,255,.72);--neutral-600:rgba(240,247,255,.8);--neutral-800:#F4F6FA;
--grad-title-dark:var(--grad-title-light)}
#directions::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;opacity:.15;pointer-events:none;
background:linear-gradient(171deg,rgba(255,255,255,.59) 0%,rgba(240,247,255,.13) 27%,rgba(41,61,88,.88) 76%,rgba(140,154,172,.37) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
#directions .tile{background:rgba(12,24,40,.5);position:relative}
#directions .tile::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;opacity:.15;pointer-events:none;
background:linear-gradient(171deg,rgba(255,255,255,.59) 0%,rgba(240,247,255,.13) 27%,rgba(41,61,88,.88) 76%,rgba(140,154,172,.37) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
#directions .h2,#directions .dask__title{color:var(--white)}
.perf-lite #directions{backdrop-filter:blur(3px)!important;background:rgba(17,26,45,.85)!important}
/* стекло прозрачнее (все стеклянные элементы одинаково) */
.glass--card,.perk,#directions .tile{background:rgba(12,24,40,.28)!important;backdrop-filter:blur(4px) saturate(1.4)!important;-webkit-backdrop-filter:blur(4px) saturate(1.4)!important}
.hero__card{background:rgba(13,26,48,.32)!important;backdrop-filter:blur(4px) saturate(1.4)!important;-webkit-backdrop-filter:blur(4px) saturate(1.4)!important}
#directions{background:rgba(12,24,40,.3)!important;backdrop-filter:blur(5px) saturate(1.4)!important;-webkit-backdrop-filter:blur(5px) saturate(1.4)!important}
.glass--card::before,.perk::before,#directions::before,#directions .tile::before{opacity:.28!important}
.perf-lite :is(.glass--card,.perk,.hero__card,#directions .tile){background:rgba(12,24,40,.6)!important}
/* кнопка «Подробнее» в направлениях: при наведении белая подложка, текст тёмный */
.dcard:hover .dcard__more,.dcard .dcard__more:hover{background:#fff!important;border-color:#fff!important;color:#1E2433!important}
.hero__media{transform:translateY(calc(-24%*var(--p,0))) scale(calc(1.02 + .22*var(--p,0)))!important} /* при прокрутке фото заметнее уходит вверх */
@media (prefers-reduced-motion:reduce){.hero__media{transform:none!important}}
#directions{background:rgba(12,24,40,.14)!important}
.hero__media{transform:translateY(calc(-40%*var(--p,0))) scale(calc(1.02 + .22*var(--p,0)))!important}
@media (prefers-reduced-motion:reduce){.hero__media{transform:none!important}}
/* под первым экраном - та же анимированная вода, что ниже: фото плавно уходит в неё градиентом */
.hero-stage{position:relative;isolation:isolate}
.hero-water{position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - var(--water-fade)),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - var(--water-fade)),transparent 100%)}
.hero{background:transparent!important}
.hero__fx{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 96%);mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 96%)}
.hero__fx::after{opacity:0!important}
.hero__shade,.hdr-tab .hero__shade,.is-night .hero__shade{background-image:linear-gradient(180deg,rgba(38,54,86,0) 55%,rgba(38,54,86,.35) 80%,rgba(38,54,86,0) 100%)!important}
.hero__media,.is-night .hero__media{background:transparent!important}
@media (max-width:767px){.hero__fx{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 70%);mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 70%)}
.hero__media,.is-night .hero__media{background:transparent!important}}
/* растворяется только фото, текст и карточка остаются чёткими */
.hero__fx{-webkit-mask-image:none!important;mask-image:none!important}
.hero__media{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 64%,transparent 94%);mask-image:linear-gradient(180deg,#000 0,#000 64%,transparent 94%)}
@media (max-width:767px){.hero__media{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 48%,transparent 68%);mask-image:linear-gradient(180deg,#000 0,#000 48%,transparent 68%)}}
/* вода начинается только под фото, на саму картинку не заходит */
.hero-water{top:72svh!important;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 220px,#000 calc(100% - var(--water-fade)),transparent 100%)!important;mask-image:linear-gradient(180deg,transparent 0,#000 220px,#000 calc(100% - var(--water-fade)),transparent 100%)!important}
.hero-stage{background:var(--blue-800)}
.hero__media{background:linear-gradient(180deg,#7792AA 0,#8EA6BA 40%,rgba(119,146,170,0) 92%)!important}
.is-night .hero__media{background:linear-gradient(180deg,#06142A 0,#081A30 40%,rgba(6,20,42,0) 92%)!important}
@media (max-width:767px){.hero-water{top:52svh!important}
.hero__media{background:linear-gradient(180deg,#7F96AA 0,#8EA6BA 30%,rgba(119,146,170,0) 66%)!important}
.is-night .hero__media{background:linear-gradient(180deg,#050F1D 0,#0A1E38 30%,rgba(6,20,42,0) 66%)!important}}
/* фото не просвечивает водой: снизу оно уходит в сплошной синий, вода начинается уже под фото */
.hero__media{-webkit-mask-image:none!important;mask-image:none!important}
.hero__shade,.hdr-tab .hero__shade{background-image:linear-gradient(180deg,rgba(38,54,86,0) 55%,rgba(38,54,86,.55) 80%,rgb(38,54,86) 100%)!important}
.is-night .hero__shade{background-image:linear-gradient(180deg,rgba(13,26,48,0) 55%,rgba(13,26,48,.55) 80%,rgb(13,26,48) 100%)!important}
.hero__media{background:linear-gradient(180deg,#7792AA 0,#8EA6BA 40%,#263656 92%)!important}
.is-night .hero__media{background:linear-gradient(180deg,#06142A 0,#081A30 40%,#0D1A30 92%)!important}
.hero-water{top:calc(100svh - 20px)!important;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 160px,#000 calc(100% - var(--water-fade)),transparent 100%)!important;mask-image:linear-gradient(180deg,transparent 0,#000 160px,#000 calc(100% - var(--water-fade)),transparent 100%)!important}
@media (max-width:767px){
.hero__shade,.hdr-tab .hero__shade{background-image:linear-gradient(180deg,rgba(38,54,86,0) 40%,rgba(38,54,86,.7) 58%,rgb(38,54,86) 72%)!important}
.is-night .hero__shade{background-image:linear-gradient(180deg,rgba(13,26,48,0) 40%,rgba(13,26,48,.7) 58%,rgb(13,26,48) 72%)!important}
.hero__media{background:linear-gradient(180deg,#7F96AA 0,#8EA6BA 30%,#263656 62%)!important}
.is-night .hero__media{background:linear-gradient(180deg,#050F1D 0,#0A1E38 30%,#0D1A30 62%)!important}
.hero-water{top:calc(100svh - 20px)!important}}
/* незаметный переход: фото растворяется в синий фон, вода проявляется из того же синего медленно */
.hero__media{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 100%)!important;mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 100%)!important}
.hero-water{top:calc(100svh + 40px)!important;-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.4) 200px,#000 420px,#000 calc(100% - var(--water-fade)),transparent 100%)!important;mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.4) 200px,#000 420px,#000 calc(100% - var(--water-fade)),transparent 100%)!important}
.is-night .hero-stage{background:var(--blue-800)}
@media (max-width:767px){.hero__media{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 72%)!important;mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 72%)!important}}
/* сверху без перехода: фото (с дорисованным небом) идёт прямо от верхнего края под шапку */
.hero__bg{top:0!important;-webkit-mask-image:none!important;mask-image:none!important}
@media (max-width:1439px){.hero__bg{height:68%!important}}
@media (max-width:767px){.hero__bg{height:66%!important}}
/* первый экран больше не «прилипает»: уезжает вместе со страницей, фото внутри мягко отстаёт (параллакс) - без остановки */
.hero{position:relative!important}
.hero-dive{height:0!important}
.hero__perks{margin-top:calc(-1*var(--hero-overlap) - 40px)}
.hero__media{transform:translateY(calc(18%*var(--p,0))) scale(calc(1.02 + .1*var(--p,0)))!important}
/* стекло «Направлений» не усиливает цвет воды под ним - только лёгкое размытие */
#directions{backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important}
.glass--card,.perk,#directions .tile,.hero__card{backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important}
/* низ первого экрана всегда мягко растворяется (маска на неподвижной рамке, а не на сдвигаемом фото) */
.hero__fx{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 170px),transparent 100%)!important;mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 170px),transparent 100%)!important}
.hero__media{-webkit-mask-image:none!important;mask-image:none!important}
@media (max-width:767px){.hero__media{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 72%)!important;mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 72%)!important}}
/* телефон: плашки в столбик - иконка слева, текст в строку, стрелка-указатель не нужна */
@media (max-width:767px){
.hero__perks{grid-template-columns:1fr!important;gap:var(--sp-8)!important}
.perk{flex-direction:row!important;align-items:center!important;gap:var(--sp-16)!important;padding:var(--sp-12) var(--sp-16)!important;min-height:64px;border-radius:var(--r-16)!important}
.perk__ic{width:40px!important;height:40px!important;border-radius:var(--r-12,12px)!important}
.perk__ic svg{width:20px!important;height:20px!important}
.perk__t{font-size:var(--fs-16)!important}
}
/* ===== попап «Подробнее» у направлений: текст клиента ===== */
.dmodal{z-index:79}
.dmodal .modal__box{width:min(720px,100%)}
.dsheet{padding:40px 40px var(--sp-32);border-radius:var(--r-32);background:rgba(21,31,52,.88);backdrop-filter:blur(var(--blur-15));-webkit-backdrop-filter:blur(var(--blur-15));color:#fff;display:flex;flex-direction:column}
.dsheet__title{font-size:36px;line-height:1.1;letter-spacing:-.02em;font-weight:500;margin:0 0 var(--sp-24)}
.dsheet__body{font-size:16px;line-height:1.55;color:rgba(255,255,255,.78)}
.dsheet__body>*{margin:0}
.dsheet__body>*+*{margin-top:var(--sp-12)}
.dsheet__body h4{font-size:var(--t-18);line-height:1.35;font-weight:500;color:#fff;margin-top:var(--sp-24)}
.dsheet__body>h4:first-child{margin-top:0}
.dsheet__body h4+*{margin-top:var(--sp-12)}
.dsheet__body ol,.dsheet__body ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--sp-8)}
.dsheet__body ol{counter-reset:n}
.dsheet__body li{position:relative;padding-left:28px}
.dsheet__body ol>li{counter-increment:n}
.dsheet__body ol>li::before{content:counter(n) ")";position:absolute;left:0;top:0;color:#E2BC78;font-weight:500}
.dsheet__body ul>li::before{content:"";position:absolute;left:6px;top:.68em;width:6px;height:6px;border-radius:50%;background:#E2BC78}
.dsheet__acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:var(--sp-12);margin-top:var(--sp-32)}.dsheet__acts .btn{width:100%;justify-content:center}
@media (max-width:767px){
.dsheet{padding:var(--sp-24) var(--sp-24) calc(var(--sp-24) + env(safe-area-inset-bottom,0px));border-radius:var(--r-32) var(--r-32) 0 0}
.dsheet__title{font-size:26px;margin-bottom:var(--sp-16)}
.dsheet__body{font-size:15px}
}
.perf-lite .dsheet{background:rgba(21,31,52,.96);backdrop-filter:none;-webkit-backdrop-filter:none}
/* прайс: строка про пропущенные занятия под форматом */
.ptable__sub{display:block;margin-top:2px;font-size:var(--fs-14);line-height:1.35;letter-spacing:0;color:var(--neutral-400)}
@media (max-width:767px){.ptable th:first-child{width:48%!important}.ptable th:nth-child(2),.ptable td:nth-child(2){width:20%}.ptable th:last-child,.ptable td:last-child{width:32%}.ptable__sub{font-size:12px}}
/* прайс по группам */
.ptable .ptable__grp th{padding:var(--sp-24) 0 var(--sp-8);font-size:var(--fs-14);font-weight:var(--fw-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-300);text-align:left;border:0}
.ptable tbody:first-of-type .ptable__grp th{padding-top:var(--sp-8)}
.ptable .ptable__grp+tr td{border-top-color:var(--white-20)}
.ptable tbody tr:last-child td{border-bottom:0}
.ptable tbody:last-of-type tr:last-child td{border-bottom:2px solid var(--white-10)}
/* прайс на десктопе: пробное занятие широкой плашкой над таблицей, без пустоты сбоку */
@media (min-width:1440px){
.price__row{flex-direction:column}
.price__card{width:100%;height:auto;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-48);padding:var(--sp-32) var(--sp-32) var(--sp-32) var(--sp-32)}
.price__card>div{display:grid;grid-template-columns:auto auto;column-gap:var(--sp-64);align-items:center}
.price__card .price__amount{grid-column:1;grid-row:1}
.price__card .price__sub{grid-column:1;grid-row:2;margin-bottom:0}
.price__card .btn{grid-column:2;grid-row:1/3}
}
/* меню из 7 разделов: на ноутбуках пункты плотнее, чтобы не наезжать на логотип */
@media (max-width:1799px){.hdr-fig .header__nav{gap:2px}.hdr-fig .header .header__nav .btn--ghost{padding:0 10px}}
@media (max-width:1439px){.hdr-fig .header .header__nav .btn--ghost{padding:0 8px;font-size:13px}}
/* тренерский состав: две широкие карточки, фото слева, регалии справа */
.coaches__list--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.coach--wide{height:auto;flex-direction:row;align-items:stretch;gap:var(--sp-24);padding:var(--sp-12)}
.coach--wide .coach__photo{flex:0 0 44%;min-height:420px;padding:0}
.coach--wide .coach__photo img{object-position:50% 18%}
.coach__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-24);padding:var(--sp-16) var(--sp-12) var(--sp-12) 0}
.coach__label{font-size:var(--fs-14);color:var(--gold-300);letter-spacing:.02em}
.coach--wide .coach__name{font-size:var(--t-32);line-height:1.1}
.coach__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;flex:1}
.coach__list li{padding:var(--sp-12) 0;border-top:1px solid var(--white-10);font-size:var(--fs-16);line-height:var(--lh-text);color:var(--white-90)}
.coach__list li:first-child{border-top:0;padding-top:0}
.coach__acts{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8)}
.coach__acts .btn{justify-content:center;padding-inline:var(--sp-12)}
@media (max-width:1279px){
.coaches__list--two{grid-template-columns:1fr}
}
@media (max-width:767px){
.coaches__list--two{display:grid;grid-template-columns:1fr;overflow:visible;margin-inline:0;padding-inline:0}
.coach--wide{flex:none;flex-direction:column}
.coach--wide .coach__photo{flex:none;height:auto;aspect-ratio:4/4.4;min-height:0}
.coach__body{padding:var(--sp-4) var(--sp-8) var(--sp-8)}
.coach--wide .coach__name{font-size:var(--fs-24,24px)}
}
/* контакты в подвале */
.footer__contacts{display:flex;flex-wrap:wrap;gap:var(--sp-12) var(--sp-32)}
.fcontact{display:flex;align-items:center;gap:var(--sp-16)}
.fcontact__who{display:flex;flex-direction:column;gap:2px}
.fcontact__name{font-size:var(--fs-14);color:var(--white-60,rgba(255,255,255,.6))}
.fcontact__tel{font-size:var(--fs-16);color:#fff;text-decoration:none;white-space:nowrap}
.fcontact__acts{display:flex;gap:var(--sp-8)}
.fcontact__btn{width:var(--h-40,40px);padding:0;justify-content:center}
/* под графиком: две таблицы с планом занятия */
.m-foot--plan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-16)}
.m-plan{padding:var(--sp-32);border-radius:var(--r-32);display:flex;flex-direction:column;gap:var(--sp-16)}
.m-plan__title{font-size:var(--t-24);font-weight:var(--fw-medium);line-height:var(--lh-snug);color:var(--gold-300)}
.m-plan__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.m-plan__list li{display:flex;flex-direction:column;gap:4px;padding:var(--sp-12) 0;border-top:1px solid var(--white-10)}
.m-plan__list b{font-weight:var(--fw-medium);font-size:var(--fs-16);color:#fff}
.m-plan__list span{font-size:var(--fs-16);line-height:var(--lh-text);color:var(--white-80)}
@media (max-width:1023px){.m-foot--plan{grid-template-columns:1fr}}
@media (max-width:767px){.m-plan{padding:var(--sp-24) var(--sp-16);border-radius:var(--r-24)}.m-plan__title{font-size:20px}}
/* выбор контакта WhatsApp */
.wapick{position:fixed;z-index:200;width:240px;padding:var(--sp-8);border-radius:var(--r-24);background:rgba(21,31,52,.96);backdrop-filter:blur(var(--blur-15));-webkit-backdrop-filter:blur(var(--blur-15));box-shadow:0 12px 40px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.08);color:#fff}
.wapick[hidden]{display:none}
.wapick__t{padding:var(--sp-8) var(--sp-12) var(--sp-4);font-size:var(--fs-14);color:var(--white-80)}
.wapick__i{display:flex;flex-direction:column;gap:2px;padding:var(--sp-12);border-radius:var(--r-16);transition:background-color .2s}
.wapick__i:hover{background:var(--white-10)}
.wapick__i b{font-weight:var(--fw-medium);font-size:var(--fs-16)}
.wapick__i span{font-size:var(--fs-14);color:var(--white-80)}
/* прайс: без линии после последней строки */
.ptable tbody:last-of-type tr:last-child td{border-bottom:0!important}
/* «Что входит в занятие»: иконки крупнее */
.inc__icon{width:64px;height:64px}
@media (max-width:767px){.inc__icon{width:48px;height:48px}}
/* плашка «Сайт обновился» */
.upd-bar{position:fixed;z-index:300;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);transform:translateX(-50%);display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-20);border-radius:var(--r-pill);background:rgba(21,31,52,.96);box-shadow:0 12px 40px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.08);color:#fff;font-size:var(--fs-14);white-space:nowrap}
.upd-bar__x{width:32px;height:32px;border-radius:50%;color:var(--white-80);font-size:20px;line-height:1}
.upd-bar__x:hover{background:var(--white-10)}