/* ==========================================================================
   VAK Marketing — основа
   Идея оформления: оптический прибор. Тёмное поле, стекло, тонкие линии,
   крупная лёгкая типографика. Плашек почти нет: всё, что можно показать
   воздухом, показано воздухом.
   ========================================================================== */

/* ---------- шрифты (локальные, внешних запросов нет) ---------- */
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/manrope-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- токены ---------- */
:root{
  --bg:    #06050C;
  --ink:   #F5F3FB;
  /* Второй уровень текста должен читаться уверенно даже на тёмных
     участках сцены, оставаясь спокойнее основного белого. */
  --ink-2: #E0DCEC;
  --ink-3: #B3AEC7;

  --vio:  #7C5CFF;
  --vio-2:#9B84FF;
  --mag:  #FF52B8;
  --cy:   #62E4FF;

  --line:   rgba(255,255,255,.075);
  --line-2: rgba(255,255,255,.15);
  --fill:   rgba(255,255,255,.03);

  --wrap: 1280px;
  --gut:  clamp(20px, 5vw, 64px);
  --nav-h: 76px;

  /* одна вертикальная лестница на весь сайт */
  --sec:  clamp(96px, 11vw, 172px);
  --gap:  clamp(34px, 4.4vw, 68px);   /* заголовок → содержимое */

  --e:     cubic-bezier(.2,.8,.24,1);
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-slat:cubic-bezier(.32,.72,0,1);   /* раскрытие панелей и строк */

  --f: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  /* Полоса прокрутки резервирует место заранее: при переходе между главной
     и динамически собранными страницами услуг шапка не меняет ширину. */
  scrollbar-gutter:stable;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* На сенсорных экранах плавную прокрутку у всего документа выключаем:
   Safari анимирует ею и собственные поправки позиции, когда при смене
   направления пальца появляются и прячутся его панели, — страница
   «прыгала», хотя ползунок стоял на месте. Плавный переход по ссылкам на
   разделы делает main.js. */
@media (hover:none) and (pointer:coarse){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f);
  font-size:clamp(15.5px,.32vw + 14.4px,17px);
  font-weight:420;
  line-height:1.68;
  letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;              /* hidden сломал бы sticky у потомков */
}
body.is-locked{overflow:hidden}

img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
h1,h2,h3,h4{margin:0;font-weight:340;line-height:1.1;letter-spacing:-.03em}
::selection{background:rgba(124,92,255,.34);color:#fff}
:focus-visible{outline:1.5px solid var(--vio-2);outline-offset:5px;border-radius:4px}

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

.skip-link{position:fixed;top:-70px;left:16px;z-index:300;padding:11px 18px;
  background:var(--vio);color:#fff;border-radius:10px;transition:top .2s}
.skip-link:focus{top:16px}

/* ---------- фон: атмосфера + сцена ---------- */
/* Пятна нарисованы градиентами, а не размытыми кругами. Размытый круг —
   это и есть радиальный градиент, но каждый такой круг стоит отдельной
   поверхности с blur-проходом, а страница поверх них перерисовывается
   каждый кадр. Картинка та же, слоёв на три меньше. */
.atmo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(38vw 38vw at  18% 8%,  rgba(124,92,255,.20), transparent 62%),
    radial-gradient(32vw 32vw at  96% 30%, rgba(255,82,184,.11), transparent 62%),
    radial-gradient(28vw 28vw at  52% 92%, rgba(98,228,255,.055), transparent 62%),
    radial-gradient(120% 80% at 50% 120%, rgba(124,92,255,.10), transparent 60%),
    #06050C;
}
.atmo>i{position:absolute;top:0;left:0;display:block;width:1px;height:1px;border-radius:50%;
  background:currentColor;pointer-events:none;transition:opacity .6s var(--e);animation:atmo-twinkle 14s ease-in-out infinite}
.atmo__a{--atmo-dim:.18;--atmo-bright:.54;color:rgba(245,243,251,.72);animation-delay:-4s;
  box-shadow:
    4vw 13vh, 8vw 74vh, 13vw 31vh, 17vw 90vh, 21vw 8vh, 26vw 55vh, 30vw 21vh, 34vw 82vh,
    39vw 42vh, 43vw 6vh, 47vw 63vh, 52vw 27vh, 57vw 85vh, 61vw 17vh, 66vw 49vh, 70vw 94vh,
    75vw 35vh, 79vw 69vh, 84vw 11vh, 88vw 53vh, 92vw 79vh, 96vw 24vh, 99vw 68vh,
    11vw 47vh, 24vw 67vh, 36vw 13vh, 45vw 89vh, 54vw 46vh, 64vw 73vh, 72vw 5vh,
    81vw 31vh, 90vw 39vh, 2vw 57vh, 58vw 4vh}
.atmo__b{--atmo-dim:.12;--atmo-bright:.42;color:rgba(213,209,228,.7);animation-duration:18s;animation-delay:-11s;
  box-shadow:
    6vw 38vh, 10vw 6vh, 15vw 60vh, 19vw 18vh, 23vw 43vh, 28vw 92vh, 33vw 33vh, 37vw 58vh,
    42vw 76vh, 48vw 16vh, 51vw 52vh, 56vw 10vh, 60vw 38vh, 65vw 66vh, 69vw 29vh, 74vw 81vh,
    78vw 20vh, 82vw 47vh, 87vw 92vh, 91vw 14vh, 95vw 45vh, 98vw 86vh, 1vw 27vh,
    18vw 79vh, 31vw 4vh, 46vw 37vh, 63vw 89vh, 76vw 59vh, 89vw 68vh}
.atmo__c{--atmo-dim:.16;--atmo-bright:.48;width:2px;height:2px;color:rgba(155,132,255,.66);animation-duration:21s;animation-delay:-7s;
  box-shadow:
    7vw 62vh, 16vw 14vh, 25vw 38vh, 35vw 71vh, 44vw 24vh, 53vw 57vh, 62vw 8vh,
    71vw 43vh, 80vw 17vh, 86vw 72vh, 94vw 34vh, 3vw 91vh, 58vw 78vh, 68vw 97vh}
@keyframes atmo-twinkle{0%,100%{opacity:var(--atmo-dim)}50%{opacity:var(--atmo-bright)}}
/* Главная получает собственное звёздное поле из прозрачной WebGL-сцены;
   CSS-слой остаётся её запасным вариантом и фоном страниц услуг. */
.has-webgl .atmo>i{opacity:0;animation:none}
@media (prefers-reduced-motion:reduce){.atmo>i{animation:none;opacity:var(--atmo-bright)}}

.stage{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
  opacity:0;transition:opacity 1.2s ease .15s}
.stage.is-ready{opacity:1}

.nav,main,.foot,.toast{position:relative;z-index:2}

/* ---------- сетка ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec)}

/* ---------- типографика ---------- */
.h2{font-size:clamp(27px,3.1vw,47px);font-weight:340;line-height:1.08;letter-spacing:-.032em;
  max-width:19ch}
.lead{font-size:clamp(18px,1.35vw,23px);font-weight:340;line-height:1.5;letter-spacing:-.016em;
  color:var(--ink)}
em{font-style:italic}

.eyebrow{margin:0 0 14px;font-size:13.5px;font-weight:500;color:var(--vio-2);letter-spacing:.01em}

.head{margin-bottom:var(--gap)}
.head--split{display:grid;gap:clamp(16px,2.4vw,54px);align-items:end;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.head__note{margin:0;color:var(--ink-2);max-width:44ch;padding-bottom:.35em}

/* Там, где прибор разрастается прямо под текстовым блоком (кейсы: масштаб 1.32,
   мы внутри тубуса), замер по холсту дал под подписью яркость L=0.228 при её
   собственной L=0.372 — контраст 1.5:1, то есть текст почти совпадает с фоном.
   Мягкая подложка снимает пересвет и растворяется к краям, поэтому читается
   виньеткой объектива, а не плашкой под текстом. */
.head--veil{position:relative}
.head--veil > *{position:relative;z-index:1}
.head--veil::before{content:'';position:absolute;z-index:0;pointer-events:none;
  inset:-58px calc(var(--gut) * -1.4) -48px;
  background:radial-gradient(84% 152% at 50% 50%,
    rgba(6,5,12,.9) 0%,rgba(6,5,12,.76) 40%,rgba(6,5,12,0) 100%)}
@media (max-width:860px){
  .head--split{grid-template-columns:1fr}
  .head__note{padding-bottom:0}
}


/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  height:50px;padding:0 26px;border-radius:100px;font-size:15px;font-weight:500;
  letter-spacing:-.008em;white-space:nowrap;position:relative;isolation:isolate;
  transition:transform .35s var(--e),box-shadow .35s var(--e),background .35s var(--e),
             border-color .35s var(--e),color .35s var(--e)}
.btn--primary{color:#fff;background:linear-gradient(101deg,#7C5CFF,#B44BFF 52%,#FF52B8);
  box-shadow:0 8px 30px -12px rgba(150,70,255,.85)}
.btn--primary::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:linear-gradient(101deg,#8E72FF,#C462FF 52%,#FF6FC6);opacity:0;transition:opacity .35s}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 38px -12px rgba(150,70,255,.95)}
.btn--primary:hover::after{opacity:1}
.btn--ghost{border:1px solid var(--line-2);color:var(--ink);background:rgba(255,255,255,.02)}
.btn--ghost:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.055);
  transform:translateY(-2px)}
.btn--wide{width:100%;height:54px}
.btn:active{transform:translateY(0)}

.link-arrow{display:inline-flex;align-items:center;gap:.6em;font-size:15px;font-weight:500;
  color:var(--ink);padding-block:4px;transition:color .3s}
.link-arrow i{width:22px;height:1px;background:currentColor;position:relative;opacity:.6;
  transition:width .35s var(--e-out),opacity .3s}
.link-arrow i::after{content:'';position:absolute;right:0;top:-2.5px;width:6px;height:6px;
  border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg)}
.link-arrow:hover{color:var(--vio-2)}
.link-arrow:hover i{width:34px;opacity:1}

.rnd{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;font-size:19px;line-height:1;color:var(--ink-2);
  transition:.3s var(--e)}
.rnd:hover:not(:disabled){color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.05)}
.rnd:disabled{opacity:.3;cursor:default}

/* ---------- стекло ---------- */
/* Стекло собрано слоями фона, без backdrop-filter. Размытие подложки —
   самая дорогая вещь на странице: элемент с ним пересчитывается каждый
   кадр, пока за ним что-то движется, а за ним движется вся сцена. Плотная
   подложка заодно держит контраст текста там, где прибор проходит вплотную.
   Единственное исключение — панель формы: она одна, стоит на месте и там
   этот эффект действительно виден (см. ниже). */
.card{position:relative;border-radius:22px;padding:clamp(24px,2.6vw,38px);
  border:1px solid var(--line);
  background:
    linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.016) 46%,rgba(255,255,255,.038)),
    linear-gradient(180deg,rgba(22,17,42,.80),rgba(12,9,24,.86));
  box-shadow:0 30px 70px -46px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07)}
/* Форма — единственная панель с настоящим размытием подложки: прибор
   возвращается точно за неё, и это лучший кадр на странице. */
.form.card{
  background:
    linear-gradient(155deg,rgba(255,255,255,.062),rgba(255,255,255,.014) 46%,rgba(255,255,255,.03)),
    linear-gradient(180deg,rgba(18,13,34,.34),rgba(10,8,20,.42));
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%)}
.card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90% 60% at 12% 0%,rgba(155,132,255,.16),transparent 62%)}

/* ---------- шапка ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .4s var(--e),backdrop-filter .4s,border-color .4s}
.nav::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--line);opacity:0;transition:opacity .4s}
.nav.is-stuck,.nav.is-open{background:rgba(9,7,17,.72);backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%)}
.nav.is-open{background:rgba(9,7,17,.94)}
.nav.is-stuck::after{opacity:1}

.nav__bar{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  height:var(--nav-h);display:flex;align-items:center;gap:clamp(14px,2.4vw,40px)}

/* Рукописный логотип VAK (светлая версия для тёмного фона). Ведёт на главную;
   на самой главной main.js плавно поднимает страницу наверх. */
.brand{display:inline-flex;align-items:center;flex:0 0 auto}
.brand__logo{display:block;width:auto;height:clamp(34px,2.6vw,40px);
  transition:transform .45s var(--e-out),filter .45s var(--e)}
.brand:hover .brand__logo{transform:translateY(-1px) rotate(-2deg);filter:drop-shadow(0 0 14px rgba(193,37,162,.38))}
.foot__brand .brand__logo{height:44px}

.nav__links{display:flex;align-items:center;gap:clamp(12px,1.5vw,26px);margin-inline:auto}
.nav__links > a,.nav__services>summary{position:relative;font-size:14.5px;color:rgba(245,243,251,.96);font-weight:520;
  padding-block:6px;transition:color .3s,text-shadow .3s}
.nav__links > a::after,.nav__services>summary::after{content:'';position:absolute;left:0;right:100%;bottom:2px;height:1px;
  background:linear-gradient(90deg,var(--vio-2),var(--mag));transition:right .4s var(--e-out)}
.nav__links > a:hover,.nav__services>summary:hover{color:#fff;text-shadow:0 0 16px rgba(216,205,255,.24)}
.nav__links > a:hover::after,.nav__services>summary:hover::after{right:0}

/* Услуги раскрываются рядом с навигацией, а не отдельной тяжёлой панелью.
   Native details остаётся доступным с клавиатуры и без JavaScript. */
.nav__services{position:relative;list-style:none}
.nav__services::before{content:'';position:absolute;z-index:4;top:100%;left:-18px;right:-18px;height:18px}
.nav__services>summary{display:flex;align-items:center;gap:7px;list-style:none;cursor:pointer}
.nav__services>summary::-webkit-details-marker{display:none}
.nav__services>summary i,.menu__services summary i{display:block;width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.78;transition:transform .35s var(--e-out),opacity .3s}
.nav__services[open]>summary i,.menu__services[open] summary i{transform:translateY(2px) rotate(225deg);opacity:1}
.nav__services[open]>summary::after{right:0}
.nav__services-menu{position:absolute;z-index:5;top:calc(100% + 14px);left:-17px;width:max-content;min-width:226px;
  display:grid;gap:1px;padding:9px;border:1px solid rgba(226,218,255,.16);border-radius:16px;
  background:linear-gradient(145deg,rgba(30,24,50,.96),rgba(10,8,20,.98));box-shadow:0 28px 64px -34px rgba(0,0,0,.96),0 0 34px -20px rgba(150,117,255,.36);
  backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);
  opacity:0;visibility:hidden;pointer-events:none;filter:blur(4px);transform:translate3d(0,-8px,0) scale(.975);transform-origin:15% 0;
  transition:opacity .28s ease,transform .52s var(--e-out),filter .32s ease,visibility 0s linear .52s}
.nav__services-menu::before{content:'';position:absolute;top:0;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,rgba(209,194,255,.5),transparent);opacity:.72}
.nav__services-menu a{padding:9px 11px;border-radius:10px;color:var(--ink-2);font-size:13.5px;font-weight:500;line-height:1.3;opacity:0;transform:translateX(-5px);
  transition:color .25s,background .25s,opacity .3s ease,transform .42s var(--e-out)}
.nav__services[open] .nav__services-menu{opacity:1;visibility:visible;pointer-events:auto;filter:none;transform:none;transition-delay:0s}
.nav__services[open] .nav__services-menu a{opacity:1;transform:none}
.nav__services[open] .nav__services-menu a:nth-child(1){transition-delay:.04s}
.nav__services[open] .nav__services-menu a:nth-child(2){transition-delay:.07s}
.nav__services[open] .nav__services-menu a:nth-child(3){transition-delay:.1s}
.nav__services[open] .nav__services-menu a:nth-child(4){transition-delay:.13s}
.nav__services[open] .nav__services-menu a:nth-child(5){transition-delay:.16s}
.nav__services[open] .nav__services-menu a:nth-child(6){transition-delay:.19s}
.nav__services-menu a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav__services-course{display:block;margin:7px 2px 2px;padding:10px 10px 8px;border-top:1px solid rgba(226,218,255,.12);
  color:rgba(202,193,234,.62);font-size:12px;font-weight:560;line-height:1.35;letter-spacing:-.008em;cursor:default}

.nav__side{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px);flex:0 0 auto}
.lang{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500}
.lang__b{color:var(--ink-3);letter-spacing:.02em;transition:color .3s}
.lang__b[aria-pressed="true"]{color:var(--ink)}
.lang__b:hover{color:var(--vio-2)}
.lang__sep{width:1px;height:12px;background:var(--line-2)}
.nav__cta{height:42px;padding:0 20px;font-size:14px}

.burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);
  position:relative}
.burger span{position:absolute;left:12px;right:12px;height:1px;background:var(--ink);
  transition:.35s var(--e)}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:23px}
.burger[aria-expanded="true"] span:nth-child(1){top:20.5px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){top:20.5px;transform:rotate(-45deg)}

.menu{padding:8px var(--gut) 34px;background:rgba(9,7,17,.94);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--line)}
.menu__links{display:flex;flex-direction:column}
.menu__links > a{padding:14px 0;font-size:20px;font-weight:360;letter-spacing:-.02em;
  border-bottom:1px solid var(--line)}
.menu__services{border-bottom:1px solid var(--line)}
.menu__services summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:55px;
  color:#fff;font-size:20px;font-weight:360;letter-spacing:-.02em;list-style:none;cursor:pointer}
.menu__services summary::-webkit-details-marker{display:none}
.menu__services-links{display:grid;gap:1px;padding:0 0 12px 18px}
.menu__services-links a{display:block;padding:9px 0;color:var(--ink-2);font-size:16px;font-weight:470;line-height:1.35}
.menu__services-links a:hover{color:#fff}
.menu__services-course{display:block;margin-top:7px;padding:10px 0 3px;border-top:1px solid var(--line);
  color:rgba(202,193,234,.66);font-size:14px;font-weight:560;line-height:1.4;cursor:default}
.menu .btn{margin-top:22px;width:100%}

@media (max-width:1080px){
  .nav__links,.nav__cta{display:none}
  .burger{display:block}
  .nav__side{margin-left:auto}
}

/* На тач-экране переключатель языка остаётся компактным по виду, но получает
   полноценную зону нажатия. Меню живёт внутри фиксированной шапки: собственный
   скролл нужен на коротком landscape-экране, иначе нижние ссылки недоступны
   при заблокированной странице. */
@media (max-width:1080px){
  .nav__side{gap:6px}
  .nav .brand{min-height:44px}
  .lang{gap:0}
  .lang__b{display:inline-grid;place-items:center;min-width:40px;min-height:44px;
    padding:0;border-radius:999px;touch-action:manipulation}
  .lang__b:active{background:rgba(255,255,255,.06)}
  .lang__sep{margin-inline:-1px}
  .burger{width:44px;height:44px}
  .burger span:nth-child(1){top:19px}
  .burger span:nth-child(2){top:24px}
  .burger[aria-expanded="true"] span:nth-child(1),.burger[aria-expanded="true"] span:nth-child(2){top:21.5px}
  .menu{max-height:calc(100svh - var(--nav-h));overflow-y:auto;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;
    padding-bottom:max(28px,env(safe-area-inset-bottom))}
}
@media (max-width:380px){
  .nav__bar{gap:8px}
  .brand__logo{height:31px}
  .lang__b{min-width:36px}
}
@media (max-width:900px) and (max-height:560px) and (orientation:landscape){
  :root{--nav-h:64px}
  .menu{padding-top:0;padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .menu__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .menu__links > a,.menu__services summary{padding-block:10px;font-size:18px;line-height:1.35}
  .menu .btn{height:46px;margin-top:14px}
}

/* ---------- формы ---------- */
.form{display:flex;flex-direction:column;gap:20px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:560px){.f-row{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:7px;min-width:0}
.f>span{font-size:13px;color:var(--ink-3);letter-spacing:-.002em}
.f input,.f select{width:100%;height:44px;padding:0 2px;color:var(--ink);
  background:none;border:0;border-bottom:1px solid var(--line-2);
  font-size:16px;font-family:inherit;border-radius:0;
  transition:border-color .3s,box-shadow .3s}
.f select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:24px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 11px) 20px,calc(100% - 6px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.f select option{background:#14101f;color:var(--ink)}
.f input::placeholder{color:rgba(255,255,255,.22)}
.f input:focus,.f select:focus{outline:none;border-color:var(--vio-2);
  box-shadow:0 1px 0 var(--vio-2)}
.f input[aria-invalid="true"]{border-color:#FF6B8A;box-shadow:0 1px 0 #FF6B8A}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__note{margin:0;min-height:1.2em;font-size:13.5px;color:var(--ink-2)}
.form__note.is-ok{color:var(--cy)}
.form__note.is-err{color:#FF8FA3}

/* ---------- тост ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,18px);z-index:200;
  padding:12px 20px;border-radius:100px;font-size:14px;
  background:rgba(20,16,32,.92);border:1px solid var(--line-2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;pointer-events:none;transition:.4s var(--e)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- появление при прокрутке ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--e-out) var(--d,0s),transform .9s var(--e-out) var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .stage{transition:none}
  .nav__services>summary i,.nav__services-menu,.nav__services-menu a{transition:none!important}
}

/* Переход между страницами сайта — короткое плавное перетекание вместо
   белой вспышки (Safari 18.2+, Chrome 126+; остальные просто открывают
   страницу как раньше). */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.26s;animation-timing-function:ease}
}
html{background:#06050C}