/* Ice Vape, Ейск. Палитра снята с логотипа: чёрный фон, белый
   гротеск, фиолетовый дым #6536BA. Тема одна — тёмная, как у бренда. */

:root {
  color-scheme: dark;

  --bg: #07070C;
  --panel: #101018;
  --panel-2: #16161F;
  --line: #24242F;
  --line-strong: #3A3A4A;

  --ink: #F4F4F7;
  --ink-soft: #C3C3CE;
  --muted: #9494A4;

  /* заливочный фиолетовый с лого; на нём белый текст даёт 5.9:1 */
  --violet: #6536BA;
  --violet-hi: #7B45D9;
  /* для текста и ссылок на чёрном — светлее, иначе проваливается */
  --violet-ink: #B79CFF;
  --violet-wash: #1A1230;

  --on-violet: #FFFFFF;

  --sans: 'Montserrat', system-ui, 'Segoe UI', Roboto, sans-serif;
  --text: 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;

  --maxw: 1160px;
  --gutter: 20px;
  --radius: 14px;
  --radius-sm: 10px;

  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px;
  --s5: 32px; --s6: 48px; --s7: 72px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--text);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 6.5vw, 68px); text-transform: uppercase; }
h2 { font-size: clamp(26px, 3.6vw, 40px); text-transform: uppercase; }
h3 { font-size: 20px; font-weight: 700; }

p { margin: 0 0 var(--s3); }

a { color: var(--violet-ink); text-underline-offset: .18em; }
a:hover { color: #D3C2FF; }

:focus-visible {
  outline: 3px solid var(--violet-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.vh {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--violet); color: #fff;
  padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ───────────────  Кнопки  ─────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 50px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 700 16px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn svg { width: 19px; height: 19px; }
.btn--primary { background: var(--violet); color: var(--on-violet); }
.btn--primary:hover { background: var(--violet-hi); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--violet-ink); color: var(--ink); background: var(--violet-wash); }
.btn--full { width: 100%; }

/* ───────────────  Возрастной барьер  ─────────────── */

/* Продажа и демонстрация никотинсодержащей продукции — только
   совершеннолетним (ФЗ-15). Барьер закрывает сайт до подтверждения. */
.gate {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  place-items: center;
  padding: var(--gutter);
  background: rgba(4, 4, 8, .96);
  backdrop-filter: blur(6px);
}
.gate.is-on { display: grid; }
.gate__box {
  width: min(460px, 100%);
  padding: var(--s5) var(--s4);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
}
.gate__logo { width: 128px; margin: 0 auto var(--s4); border-radius: 12px; }
.gate__box h2 { font-size: 26px; margin-bottom: var(--s2); }
.gate__box p { color: var(--ink-soft); font-size: 15px; }
.gate__row { display: grid; gap: var(--s2); margin-top: var(--s4); }
.gate__note {
  margin-top: var(--s4);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.gate__deny {
  display: none;
  margin-top: var(--s3);
  color: #FCA5A5;
  font-size: 14.5px;
}
.gate__deny.is-on { display: block; }

body.is-locked { overflow: hidden; }

/* ───────────────  Шапка  ─────────────── */

.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(7, 7, 12, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__in {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.brand img { width: 40px; height: 40px; border-radius: 9px; }
.brand span {
  font: 800 19px/1 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nav { margin-left: auto; display: flex; gap: 2px; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  text-decoration: none;
  font: 600 15px/1 var(--sans);
}
.nav a:hover { background: var(--panel-2); color: var(--ink); }
.nav a[aria-current='page'] { color: var(--violet-ink); }

.header__cta { flex: none; display: flex; gap: var(--s2); align-items: center; }
.header__phone {
  font: 700 16px/1 var(--sans);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.burger {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
}
.burger svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .header__cta .btn { display: none; }
  .nav.is-open {
    display: grid;
    position: absolute;
    top: 100%; left: 0; right: 0;
    padding: var(--s2) var(--gutter) var(--s4);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open a { min-height: 50px; padding: 0 12px; font-size: 16px; }
}
@media (max-width: 560px) {
  .header__phone { display: none; }
}

/* ───────────────  Первый экран  ─────────────── */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* прижимаем к правому краю: слева на исходнике сам логотип, и он
     дублировал бы заголовок, а нужен только дым */
  background-position: 100% 50%;
  opacity: .55;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--bg) 22%, rgba(7, 7, 12, .55) 62%, rgba(7, 7, 12, .2));
}
/* max-width здесь не ставим: .hero__in висит на том же элементе, что и
   .wrap, и перебивал бы его 1160px — первый экран оказывался уже
   остальных секций. Ширину ограничиваем у текста внутри. */
.hero__in {
  position: relative;
  z-index: 2;
  padding: var(--s7) 0;
}
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  margin-bottom: var(--s4);
  background: var(--violet-wash);
  border: 1px solid var(--violet);
  border-radius: 999px;
  font: 700 12.5px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violet-ink);
}
.hero p.lead {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 36rem;
  margin-bottom: var(--s5);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--line-strong);
}
.hero__stats b {
  display: block;
  font: 800 clamp(26px, 4vw, 38px)/1 var(--sans);
  color: var(--violet-ink);
}
.hero__stats span { font-size: 13.5px; color: var(--muted); }

@media (max-width: 620px) {
  .hero__bg { opacity: .3; }
  .hero__in { padding: var(--s6) 0; }
}

/* ───────────────  Секции  ─────────────── */

.section { padding: var(--s7) 0; }
.section--panel { background: var(--panel); border-block: 1px solid var(--line); }
.section__head { margin-bottom: var(--s5); max-width: 46rem; }
.section__head p { color: var(--muted); margin: var(--s2) 0 0; }

.grid { display: grid; gap: var(--s3); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.card {
  padding: var(--s4);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.section--panel .card { background: var(--bg); }
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: var(--s3);
  background: var(--violet-wash);
  border: 1px solid var(--violet);
  border-radius: 11px;
  color: var(--violet-ink);
}
.card__icon svg { width: 23px; height: 23px; }
.card h3 { margin-bottom: 6px; }
.card p { color: var(--muted); font-size: 15px; margin: 0; }

/* карточка с картинкой сверху */
.card--img { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card--img > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}
.card--img .card__body { padding: var(--s4); }
.card--img .card__icon {
  position: relative;
  margin: -46px 0 var(--s3) var(--s4);
  background: var(--violet);
  border-color: var(--violet-hi);
  color: #fff;
}
.card--img .card__body > h3 { margin-top: 0; }

/* ───────────────  Витрина  ─────────────── */

.storefront {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--s5);
  align-items: center;
}
@media (max-width: 820px) { .storefront { grid-template-columns: 1fr; } }

.storefront img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.storefront ul { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); }
.storefront li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  color: var(--ink-soft);
  font-size: 15.5px;
}
.storefront li svg { width: 20px; height: 20px; color: var(--violet-ink); flex: none; margin-top: 2px; }

/* ───────────────  Магазины  ─────────────── */

.shops { display: grid; gap: var(--s3); }
.shop {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s4);
  align-items: center;
  padding: var(--s4);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.section--panel .shop { background: var(--bg); }
.shop__no {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: var(--violet);
  border-radius: 11px;
  font: 800 18px/1 var(--sans);
  color: var(--on-violet);
}
.shop__addr { font: 700 18px/1.3 var(--sans); margin: 0 0 4px; }
.shop__city { font-size: 14.5px; color: var(--muted); margin: 0; }
.shop__go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font: 600 14.5px/1 var(--sans);
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.shop__go:hover { border-color: var(--violet-ink); background: var(--violet-wash); color: var(--ink); }
.shop__go svg { width: 17px; height: 17px; }

@media (max-width: 680px) {
  .shop { grid-template-columns: auto minmax(0, 1fr); }
  .shop__go { grid-column: 1 / -1; justify-content: center; }
}

/* ───────────────  Контакты  ─────────────── */

.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 700px) { .contact { grid-template-columns: 1fr; } }

.contact a.card { text-decoration: none; color: var(--ink); display: block; }
.contact a.card:hover { border-color: var(--violet-ink); }
.contact b { display: block; font: 700 20px/1.25 var(--sans); margin-bottom: 4px; }

.socials { display: flex; gap: var(--s2); flex-wrap: wrap; }
.socials a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font: 700 15px/1 var(--sans);
}
.socials a:hover { border-color: var(--violet-ink); background: var(--violet-wash); color: var(--ink); }
.socials svg { width: 20px; height: 20px; }

/* ───────────────  Подвал  ─────────────── */

.footer {
  padding: var(--s6) 0 var(--s6);
  background: #040408;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--muted);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--s5) var(--s4);
  margin-bottom: var(--s5);
}
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h3 {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s3);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.footer li a { display: block; padding: 7px 0; min-height: 36px; color: var(--muted); text-decoration: none; }
.footer li a:hover { color: var(--ink); }

/* Предупреждение обязательно и по закону, и по-человечески */
.warning {
  padding: var(--s3) var(--s4);
  background: var(--violet-wash);
  border: 1px solid var(--violet);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}
.warning b { color: var(--ink); }

.footer__legal {
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
  margin-top: var(--s5);
  font-size: 13px;
  display: grid;
  gap: var(--s2);
}