/* ==========================================================================
   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;
}
@font-face{
  font-family:'Cormorant';font-style:italic;font-weight:300;font-display:swap;
  src:url(../fonts/cormorant-it-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Cormorant';font-style:italic;font-weight:300;font-display:swap;
  src:url(../fonts/cormorant-it-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:'Cormorant';font-style:italic;font-weight:300;font-display:swap;
  src:url(../fonts/cormorant-it-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:   #EFEDF7;
  --ink-2: #A6A0C2;
  --ink-3: #6B6688;

  --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;
  --f-d: 'Cormorant', Georgia, serif;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
}
@media (prefers-reduced-motion:reduce){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:400;
  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:300;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;
}

.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:200;line-height:1.08;letter-spacing:-.032em;
  max-width:19ch}
.lead{font-size:clamp(18px,1.35vw,23px);font-weight:300;line-height:1.5;letter-spacing:-.016em;
  color:var(--ink)}
em{font-family:var(--f-d);font-style:italic;font-weight:300;letter-spacing:0}

.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}
}

.pull{font-family:var(--f-d);font-style:italic;font-weight:300;
  font-size:clamp(22px,2.2vw,32px);line-height:1.28;letter-spacing:0;
  color:var(--ink);margin:0 0 1.1em}

/* ---------- кнопки ---------- */
.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)}

.brand{display:inline-flex;align-items:center;gap:11px;flex:0 0 auto}
.brand__mark{width:29px;height:29px;color:var(--vio-2);
  transition:transform .6s var(--e-out),color .4s}
.brand:hover .brand__mark{transform:rotate(180deg);color:var(--mag)}
.brand__text{font-size:15.5px;font-weight:600;letter-spacing:-.018em;white-space:nowrap}
.brand__text b{font-weight:300;color:var(--ink-2)}

.nav__links{display:flex;align-items:center;gap:clamp(12px,1.5vw,26px);margin-inline:auto}
.nav__links a{position:relative;font-size:14.5px;color:var(--ink-2);padding-block:6px;
  transition:color .3s}
.nav__links a::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{color:var(--ink)}
.nav__links a:hover::after{right:0}

.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:300;letter-spacing:-.02em;
  border-bottom:1px solid var(--line)}
.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}
}

/* ---------- формы ---------- */
.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}
}