/* VapeMarket — «Оптова передовиця»: редакционная тёмная тема, один акцент */

/* ---------- Шрифты (self-hosted, subset latin+cyrillic) ---------- */
@font-face{
  font-family:'Inter Variable';
  font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/inter-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Inter Variable';
  font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono Variable';
  font-style:normal;font-weight:100 800;font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'JetBrains Mono Variable';
  font-style:normal;font-weight:100 800;font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}

/* ---------- Токены ---------- */
:root{
  --bg:#0B0F16;
  --surface:#111722;
  --surface-2:#18202E;
  --rule:rgba(235,240,248,.14);
  --rule-strong:rgba(235,240,248,.30);
  --text:#F4F7FB;
  --text-2:#AAB6C6;
  --text-3:#7C8B9E;
  --accent:#34D99C;          /* фон кнопок CTA — одинаков в обеих темах */
  --accent-fg:#34D99C;       /* акцент как ЦВЕТ ТЕКСТА/иконок/фокуса — в светлой теме темнее */
  --accent-ink:#06251A;
  --link:#52E0AC;
  --blue:#6FB1FF;
  --amber:#FFC44D;
  --amber-ink:#201503;
  --danger:#FF8A7A;
  --font-sans:'Inter Variable',Inter,-apple-system,system-ui,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono Variable','JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --page-accent:var(--accent-fg);     /* на странице поставщика цифры/бейджи синие */
  --wrap:1120px;
  color-scheme:dark;
}
@supports (color: oklch(50% 0.1 180)){
  :root{
    --bg:oklch(17% 0.02 255);
    --accent:oklch(79% 0.15 163);
  }
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#FAF9F6;
    --surface:#FFFFFF;
    --surface-2:#F1EFE9;
    --rule:rgba(16,20,24,.14);
    --rule-strong:rgba(16,20,24,.32);
    --text:#14181D;
    --text-2:#4C5560;
    --text-3:#5C6873;
    --accent-fg:#0B7A56;
    --link:#0B7A56;
    --blue:#1D5FD0;
    --amber:#FFEDBE;
    --amber-ink:#6B4E00;
    --danger:#B3261E;
    color-scheme:light;
  }
}

/* ---------- База ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{
  font-family:var(--font-sans);
  font-size:16px;line-height:1.6;
  color:var(--text);background:var(--bg);
  min-height:100vh;
}
img,svg{display:block;max-width:100%}
a{color:var(--link);text-decoration:none}
p a,li a{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .2s}
p a:hover,li a:hover{background-size:100% 1px}
:focus-visible{outline:2px solid var(--accent-fg);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent);color:var(--accent-ink)}
input::placeholder{color:var(--text-3)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 60px var(--surface) inset;
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
}

h1,h2,h3{font-weight:750;letter-spacing:-.02em;text-wrap:balance}
.display{font-size:clamp(40px,8.5vw,76px);line-height:1.04;letter-spacing:-.03em;font-weight:800}
h1,.h1{font-size:clamp(36px,6vw,56px);line-height:1.08;letter-spacing:-.03em;font-weight:800}
h2,.h2{font-size:clamp(28px,4vw,40px);line-height:1.12}
h3,.h3{font-size:24px;line-height:1.25;font-weight:700}
.lead{font-size:19px;line-height:1.55;color:var(--text-2)}
.small{font-size:14px}
.mono{font-family:var(--font-mono);line-height:1.45}
.eyebrow{
  font-family:var(--font-mono);font-size:13px;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;color:var(--page-accent);
}
.num{font-variant-numeric:tabular-nums}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:20px}
@media (min-width:960px){.wrap{padding-inline:32px}}

/* ---------- Masthead ---------- */
.mast{
  position:sticky;top:0;z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--rule);
}
@supports (backdrop-filter: blur(10px)){
  .mast{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px)}
}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.logo{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.logo b{color:var(--accent);font-weight:800}
.mast-r{display:flex;align-items:center;gap:12px}
.lang{display:flex;gap:2px;border:1px solid var(--rule);border-radius:8px;padding:3px}
.lang-btn{
  border:none;background:transparent;color:var(--text-3);cursor:pointer;
  font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:.04em;
  padding:9px 12px;border-radius:6px;min-height:38px;
}
.lang-btn[aria-pressed="true"]{background:var(--surface-2);color:var(--text)}
.mast .mast-cta{display:none}
@media (min-width:640px){.mast .mast-cta{display:inline-flex}}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;cursor:pointer;border-radius:8px;
  font-family:var(--font-sans);font-size:16px;font-weight:600;line-height:1;
  padding:15px 24px;min-height:48px;
  transition:background .15s,border-color .15s,transform .1s,filter .15s;
  text-decoration:none;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--rule-strong)}
.btn-ghost:hover{background:var(--surface);border-color:var(--text-3)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn-sm{padding:11px 16px;min-height:44px;font-size:14px}
.btn .ic{width:18px;height:18px;flex-shrink:0}

/* ---------- Секции ---------- */
.sect{padding-block:56px}
@media (min-width:960px){.sect{padding-block:96px}}
.sect-head{border-top:1px solid var(--rule-strong);padding-top:16px;margin-bottom:32px}
.sect-label{
  font-family:var(--font-mono);font-size:13px;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);
}
.sect-head h2{margin-top:12px}

/* ---------- Hero ---------- */
.hero{padding-block:48px 56px}
@media (min-width:960px){.hero{padding-block:80px 96px}}
.hero-grid{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.hero-grid{grid-template-columns:7fr 5fr}}
.hero .eyebrow{margin-bottom:16px}
.hero h1{margin-bottom:16px}
.hero .lead{max-width:56ch;margin-bottom:32px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Bento ---------- */
.bento{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.bento{grid-template-columns:repeat(12,1fr)}
  .sp4{grid-column:span 4}.sp5{grid-column:span 6}.sp6{grid-column:span 6}.sp7{grid-column:span 6}.sp12{grid-column:span 12}}
@media (min-width:960px){
  .sp4{grid-column:span 4}.sp5{grid-column:span 5}.sp6{grid-column:span 6}.sp7{grid-column:span 7}.sp12{grid-column:span 12}}
.b-card{
  background:var(--surface);border:1px solid var(--rule);border-radius:16px;
  padding:24px;transition:transform .15s,border-color .15s;
}
@media (min-width:960px){.b-card{padding:32px}}
.b-card:hover{transform:translateY(-2px);border-color:var(--rule-strong)}
.b-card h3{margin-bottom:8px}
.b-card p{color:var(--text-2)}
.b-ic{
  width:40px;height:40px;border-radius:12px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--page-accent) 10%,transparent);
  color:var(--page-accent);
}
.b-ic svg{width:22px;height:22px}

/* ---------- Счётчик ---------- */
.counter{display:flex;flex-direction:column;justify-content:center}
.cnum{
  font-family:var(--font-mono);font-weight:700;font-size:clamp(40px,5vw,56px);
  line-height:1.1;color:var(--page-accent);font-variant-numeric:tabular-nums;
  display:flex;align-items:center;gap:14px;
}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--page-accent);flex-shrink:0;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.cnum-lbl{font-size:14px;color:var(--text-2);margin-top:8px}
/* заглушка, пока заявок меньше порога (или без JS) */
.cnum-soon{display:flex;align-items:flex-start;gap:12px;font-size:24px;font-weight:700;line-height:1.25;color:var(--text);text-wrap:balance}
.cnum-soon .pulse{margin-top:11px}

/* ---------- Шаги ---------- */
.steps{display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:640px){.steps{grid-template-columns:repeat(3,1fr);gap:32px}}
.step-num{
  font-family:var(--font-mono);font-size:64px;font-weight:700;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--rule-strong);
  margin-bottom:16px;
}
.step h3{margin-bottom:8px}
.step p{color:var(--text-2)}

/* ---------- Редакционная таблица ---------- */
.table-ed{border-top:1px solid var(--rule-strong)}
.trow{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:16px 0;border-bottom:1px solid var(--rule);
}
.trow .k{color:var(--text-2)}
.trow .v{font-weight:600;text-align:right}
.trow .v.mono{font-family:var(--font-mono);font-weight:600}
.trow-title{font-weight:700;font-size:24px;color:var(--text)}

/* ---------- Бейджи и чипы ---------- */
.badge{
  display:inline-block;background:var(--amber);color:var(--amber-ink);
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  padding:5px 10px;border-radius:8px;
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:var(--font-mono);font-size:13px;color:var(--text-2);
  border:1px solid var(--rule);border-radius:999px;padding:8px 16px;
}

/* ---------- Бегущая строка брендов ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--rule);padding-block:20px}
.marquee-track{
  display:flex;gap:48px;width:max-content;
  font-family:var(--font-mono);font-size:14px;letter-spacing:.08em;color:var(--text-3);
  white-space:nowrap;animation:marquee 45s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Мокап каталога ---------- */
.mockup{
  background:var(--surface);border:1px solid var(--rule);border-radius:16px;
  padding:20px;position:relative;
}
.mockup-label{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:16px;
  display:flex;justify-content:space-between;align-items:center;gap:8px;
}
.m-filters{display:flex;gap:8px;margin-bottom:16px}
.m-filter{height:28px;border:1px solid var(--rule);border-radius:999px;flex:1;background:var(--surface-2)}
.m-filter:first-child{flex:1.6}
.m-card{
  display:flex;align-items:center;gap:14px;
  border:1px solid var(--rule);border-radius:12px;padding:14px;margin-bottom:10px;
  background:var(--bg);
}
.m-card:last-child{margin-bottom:0}
.m-thumb{width:44px;height:44px;border-radius:10px;background:var(--surface-2);flex-shrink:0}
.m-body{flex:1;min-width:0}
.m-name{display:block;font-size:14px;font-weight:600}
.m-meta{display:block;font-family:var(--font-mono);font-size:12px;color:var(--text-3);margin-top:2px}
.m-price{
  font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:6px;flex-shrink:0;
}
.m-price .val{filter:blur(6px);user-select:none}
.m-price svg{width:14px;height:14px;color:var(--page-accent)}
.mockup-note{
  font-size:14px;color:var(--text-2);margin-top:16px;display:flex;gap:8px;align-items:center;
}
.mockup-note svg{width:16px;height:16px;color:var(--page-accent);flex-shrink:0}

/* ---------- Баннер розыгрыша ---------- */
.banner{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  border-block:1px solid var(--rule);padding-block:20px;
}
.banner p{color:var(--text-2)}
.banner .attr{font-size:12px;color:var(--text-3);width:100%}

/* ---------- Карточка розыгрыша BMW ---------- */
.giveaway{
  display:flex;align-items:center;gap:32px;
  background:var(--surface);border:1px solid var(--rule);border-radius:16px;
  padding:24px;
}
@media (min-width:960px){.giveaway{padding:32px}}
.gv-body{flex:1;min-width:0}
.gv-body h3{margin:12px 0 8px}
.gv-body p{color:var(--text-2)}
.gv-links{display:flex;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap}
.gv-attr{font-size:12px;color:var(--text-3)}
.gv-photo{width:280px;max-width:40%;height:auto;border-radius:12px;flex-shrink:0}
@media (max-width:639px){
  .giveaway{flex-direction:column;align-items:stretch;text-align:left}
  .gv-photo{width:100%;max-width:100%}
}

/* ---------- Форма ---------- */
.form-split{display:grid;gap:40px}
@media (min-width:960px){.form-split{grid-template-columns:5fr 7fr;gap:64px}}
.form-aside h2{margin-bottom:24px}
.trust{list-style:none;display:grid;gap:16px;margin-bottom:32px}
.trust li{display:flex;gap:12px;align-items:flex-start;color:var(--text-2)}
.trust svg{width:20px;height:20px;color:var(--accent-fg);flex-shrink:0;margin-top:3px}
.form-card{
  background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:24px;
}
@media (min-width:960px){.form-card{padding:32px}}
form{display:grid;gap:16px}
.field{display:grid;gap:6px}
.field label{font-size:14px;color:var(--text-2)}
.field input{
  width:100%;min-height:48px;padding:13px 14px;
  font-family:var(--font-sans);font-size:16px;color:var(--text);
  background:rgba(255,255,255,.03);border:1px solid var(--rule);border-radius:8px;
  transition:border-color .12s;
}
@media (prefers-color-scheme: light){.field input{background:#fff}}
.field input:hover{border-color:var(--rule-strong)}
.field input:focus{outline:none;border-color:var(--accent-fg)}
.field.err input{border-color:var(--danger)}
.field .field-err{display:none;font-size:14px;color:var(--danger)}
.field.err .field-err{display:block}
.hp{position:absolute;left:-9999px;top:-9999px}

.form-alert{
  display:none;font-size:14px;color:var(--danger);
  border:1px solid var(--danger);border-radius:8px;padding:12px 14px;
}
.form-alert.show{display:block;animation:shake .25s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

.spinner{
  width:16px;height:16px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--accent-ink);border-top-color:transparent;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.success{text-align:left;display:grid;gap:16px}
.success .ok-ic{width:56px;height:56px;color:var(--accent-fg)}
.success .ok-ic path{stroke-dasharray:80;stroke-dashoffset:80;animation:draw .35s ease-out .1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.success h3{color:var(--text)}
.success p{color:var(--text-2)}
.success .btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Sticky CTA (mobile) ---------- */
.sticky-cta{
  position:fixed;inset-inline:0;bottom:0;z-index:40;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--rule);
  transform:translateY(110%);visibility:hidden;
  transition:transform .25s,visibility .25s;
}
@supports (backdrop-filter: blur(10px)){
  .sticky-cta{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px)}
}
.sticky-cta.show{transform:translateY(0);visibility:visible}
.sticky-cta .btn{width:100%}
@media (min-width:640px){.sticky-cta{display:none}}
/* липкий бар не должен навсегда закрывать юридические строки футера */
@media (max-width:639px){.foot{padding-bottom:104px}}

/* ---------- 18+ гейт ---------- */
.agegate{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  display:none;align-items:center;justify-content:center;padding:24px;
}
.agegate.open{display:flex}
.ag-in{max-width:420px;text-align:center}
.ag-num{
  font-family:var(--font-mono);font-weight:700;
  font-size:clamp(64px,18vw,110px);line-height:1;color:var(--accent-fg);
  margin-bottom:24px;
}
.ag-in p{color:var(--text-2);margin-bottom:32px;font-size:19px}
.ag-btns{display:grid;gap:12px}
@media (min-width:480px){.ag-btns{grid-template-columns:1fr 1fr}}
body.ag-lock{overflow:hidden}

/* ---------- Панели ролей (главная) ---------- */
.roles{display:grid;gap:16px;margin-block:48px}
@media (min-width:640px){.roles{grid-template-columns:1fr 1fr}}
.role{
  display:block;background:var(--surface);border:1px solid var(--rule);border-radius:16px;
  padding:32px 24px;color:var(--text);
  transition:transform .15s,border-color .15s;
}
@media (min-width:960px){.role{padding:40px 32px}}
.role:hover{transform:translateY(-2px);border-color:var(--rule-strong)}
.role .cnum{margin-bottom:16px;font-size:clamp(36px,4.5vw,48px)}
.role.role-blue .cnum{color:var(--blue)}
.role.role-blue .pulse{background:var(--blue)}
.role h2{font-size:24px;margin-bottom:8px}
.role p{color:var(--text-2);margin-bottom:16px}
.role-go{font-weight:600;color:var(--link);display:inline-flex;align-items:center;gap:6px}
.role-go svg{width:18px;height:18px;transition:transform .15s}
.role:hover .role-go svg{transform:translateX(4px)}

/* ---------- Футер ---------- */
.foot{border-top:1px solid var(--rule-strong);padding-block:40px 48px;margin-top:56px}
.foot-grid{display:grid;gap:32px}
@media (min-width:640px){.foot-grid{grid-template-columns:repeat(3,1fr)}}
.foot h3{font-size:14px;font-family:var(--font-mono);font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:16px}
.foot ul{list-style:none;display:grid;gap:10px}
.foot a{color:var(--text-2)}
.foot a:hover{color:var(--text)}
.foot-legal{margin-top:40px;padding-top:24px;border-top:1px solid var(--rule);font-size:14px;color:var(--text-2);display:grid;gap:6px}

/* ---------- Документные страницы ---------- */
.doc{max-width:72ch;padding-block:48px 64px}
.doc h1{margin-bottom:8px}
.doc .doc-date{font-family:var(--font-mono);font-size:13px;color:var(--text-3);margin-bottom:32px}
.doc h2{font-size:24px;margin:32px 0 12px}
.doc p,.doc li{color:var(--text-2);margin-bottom:12px}
.doc ul{padding-left:20px}

/* ---------- Появление hero при загрузке ---------- */
.rise{opacity:0;transform:translateY(12px);animation:rise .4s cubic-bezier(.2,.7,.2,1) forwards}
.rise:nth-child(2){animation-delay:.06s}
.rise:nth-child(3){animation-delay:.12s}
.rise:nth-child(4){animation-delay:.18s}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

/* ---------- Появление при скролле (progressive enhancement) ----------
   Анимируем translate (а не transform), чтобы hover-подъём карточек
   (transform:translateY) не перебивался fill:forwards анимации. */
@supports (animation-timeline: view()){
  .reveal{
    opacity:0;translate:0 16px;
    animation:reveal linear forwards;
    animation-timeline:view();
    animation-range:entry 0% entry 30%;
  }
  @keyframes reveal{to{opacity:1;translate:0 0}}
}

/* ---------- Переходы между страницами ---------- */
@view-transition{navigation:auto}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rise,.reveal{opacity:1;transform:none;translate:none}
  .marquee-track{animation:none;width:auto;white-space:normal}
  .marquee-track span+span{display:none} /* без анимации второй прогон брендов не нужен */
  .success .ok-ic path{stroke-dashoffset:0} /* галочка успеха видима и без анимации */
}