/* =========================================================
   АВИЛОН — Золотой четверг распродаж
   Методология: БЭМ. Mobile-first. Брейкпоинт десктопа — 1200px.
   ========================================================= */

/* ---------- 0. Fonts (локальные, Raleway Variable 400–700) ---------- */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/raleway-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/raleway-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/raleway-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: "Raleway";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/raleway-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;
}

/* ---------- 1. Tokens ---------- */
:root {
  /* Colors */
  --c-dark:      #191b25;
  --c-black:     #000;
  --c-white:     #fff;
  --c-sec-30:    #bdbfd1;
  --c-sec-50:    #535567;
  --c-sec-70:    #3a3c4e;
  --c-gray:      #5c5e74;
  --c-gold:      #ffae00;
  --c-gold-line: #d3ae5c;
  --c-error:     #ff2c2c;

  --grad-gold: linear-gradient(63.54deg, #e0ab36 10.691%, #f9da87 52.151%, #e0ab36 114.99%);
  --glow-gold: 0 0 15px rgba(242, 206, 115, .56);

  /* Spacing */
  --p-xs: 4px;
  --p-s:  8px;
  --p-m:  16px;
  --p-l:  24px;
  --p-xl: 32px;

  /* Radius */
  --r-s:  4px;
  --r-m:  8px;
  --r-l:  12px;
  --r-xl: 16px;

  /* Typography */
  --ff: "Raleway", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-caption: 12px;
  --fs-small:   16px;
  --fs-medium:  18px;
  --fs-large:   22px;
  --fs-h4:      22px;
  --fs-h3:      40px;
  --fs-h2:      32px;
  --fs-h1:      38px;
  --fs-xxl:     28px;

  /* Layout */
  --gutter: 15px;
  --container: 1440px;
  --header-h: 54px;
}

@media (min-width: 1200px) {
  :root {
    --fs-h4: 28px;
    --fs-h2: 48px;
    --fs-h1: 60px;
    --fs-xxl: 80px;
    --gutter: 32px;
    --header-h: 96px;
  }
}

/* ---------- 2. Reset & base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

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

body,
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }

ul, ol { padding: 0; list-style: none; }

[hidden] { display: none !important; }

img, picture, video, svg { max-width: 100%; }

img, svg { display: block; }

button, input, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: 0; padding: 0; }

a { color: inherit; text-decoration: none; }

.page {
  margin: 0;
  min-height: 100vh;
  background-color: var(--c-dark);
  color: var(--c-white);
  font-family: var(--ff);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1.4;
  font-feature-settings: "lnum" 1, "pnum" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

.page--locked { overflow: hidden; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- 3. Helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  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;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--p-m);
  z-index: 100;
  padding: var(--p-s) var(--p-m);
  background: var(--c-gold);
  color: var(--c-dark);
  border-radius: var(--r-m);
  font-weight: 700;
}
.skip-link:focus { top: var(--p-s); }

.text-gold {
  background-image: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}


.nowrap { white-space: nowrap; }

.br-mobile { display: block; }
@media (min-width: 1200px) { .br-mobile { display: none; } }

/* Иконки через CSS-маску: цвет наследуется от currentColor */
.i {
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
          mask: var(--icon) no-repeat center / contain;
}
.i--arrow       { --icon: url(../img/icon-arrow-right.svg);  width: 18px; height: 18px; }
.i--user        { --icon: url(../img/icon-user.svg); }
.i--alert       { --icon: url(../img/icon-alert-square.svg); }
.i--menu        { --icon: url(../img/icon-menu.svg); }
.i--check       { --icon: url(../img/icon-check.svg);        width: 10px; height: 10px; }
.i--chevron     { --icon: url(../img/icon-chevron-down.svg); width: 18px; height: 18px; }
.i--pin         { --icon: url(../img/icon-pin.svg);          width: 16px; height: 16px; }
.i--phone       { --icon: url(../img/icon-phone.svg);        width: 16px; height: 16px; }
.i--phone-input { --icon: url(../img/icon-phone-input.svg);  width: 18px; height: 18px; }
.i--lock        { --icon: url(../img/icon-lock.svg); }
.i--wrench      { --icon: url(../img/icon-wrench.svg); }
.i--shield      { --icon: url(../img/icon-shield.svg); }
.i--rug         { --icon: url(../img/icon-rug.svg); }
.i--muted       { --icon: url(../img/icon-muted.svg); }
.i--wheel       { --icon: url(../img/icon-wheel.svg); }
.i--shock       { --icon: url(../img/icon-shock.svg); }
.i--like        { --icon: url(../img/icon-like.svg); }

/* В макете эти знаки залиты золотым градиентом, а не цветом текста */
.i--user,
.i--alert,
.i--pin,
.i--phone { background: var(--grad-gold); }

/* Крестик рисуем псевдоэлементами — отдельная иконка не требуется */
.i--close {
  position: relative;
  background-color: transparent;
  -webkit-mask: none;
          mask: none;
}
.i--close::before,
.i--close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background-color: currentColor;
  border-radius: 2px;
}
.i--close::before { transform: translate(-50%, -50%) rotate(45deg); }
.i--close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- 4. Typography blocks ---------- */
.section-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-align: center;
  color: var(--c-white);
}

.section-subtitle {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-white);
  text-align: center;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--p-m);
  align-items: center;
}

@media (min-width: 1200px) {
  .section-head { gap: var(--p-l); }
  .section-subtitle {
    font-size: var(--fs-medium);
    color: var(--c-sec-30);
  }
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-s);
  min-height: 48px;
  padding-inline: var(--p-l);
  border-radius: var(--r-m);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}

.btn--gold {
  background-image: var(--grad-gold);
  color: var(--c-dark);
}
.btn--gold .btn__icon { color: var(--c-dark); }

.btn:active { transform: translateY(0); box-shadow: none; }

.btn--block { width: 100%; }

.btn__text { display: block; }


/* ---------- 5.1 Состояния наведения ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn--gold:hover {
    filter: brightness(1.07);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px -8px rgba(242, 206, 115, .7);
  }

  .header__phone:hover,
  .mobile-menu__phone:hover,
  .location__phone:hover { filter: brightness(1.15); }

  .nav__link:hover { color: var(--c-white); }

  .footer__link:hover { color: var(--c-gold); }

  .logo:hover { opacity: .85; }

  .burger:hover,
  .mobile-menu__close:hover,
  .modal__close:hover { color: var(--c-gold); }

  .mobile-menu__link:hover { color: var(--c-gold); }

  .brand:hover {
    transform: translateY(-2px);
    border-color: var(--c-gold-line);
    box-shadow: 0 0 12px -2px rgba(242, 206, 115, .45);
  }
  .brand--more:hover { box-shadow: 0 0 18px -2px rgba(242, 206, 115, .7); }

  .gift:hover { background-color: #101219; }

  .location:hover { background-color: #43455a; }

  .terms__toggle:hover { color: var(--c-gold); }

  .check:hover .check__box { border-color: var(--c-gold); }

  .check__link:hover { text-decoration-color: var(--c-white); }

  .input:hover { box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .15), 0 0 0 1px var(--c-gold-line); }

  .slider__dot:hover { background-color: var(--c-sec-30); }
}

.logo,
.header__phone,
.mobile-menu__phone,
.location__phone,
.footer__link,
.burger,
.mobile-menu__close,
.modal__close,
.mobile-menu__link,
.terms__toggle { transition: color .2s ease, opacity .2s ease, filter .2s ease; }

.brand { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.gift,
.location { transition: background-color .2s ease; }
.input { transition: box-shadow .2s ease; }
.check__box { transition: border-color .2s ease; }

/* ---------- 6. Notice pill ---------- */
.notice {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--p-m);
  padding: var(--p-m);
  border-radius: var(--r-m);
  background-color: var(--c-sec-70);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-white);
}
.notice--dark { background-color: var(--c-dark); }


@media (min-width: 1200px) {
  .notice {
    align-items: center;
    gap: var(--p-l);
    min-height: 48px;
    padding: var(--p-s) var(--p-m);
  }
  .notice__text { white-space: nowrap; }
}

/* ---------- 7. Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--c-dark);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-m);
  padding-block: var(--gutter);
}

.logo { display: block; color: var(--c-white); }
.logo__img { width: 128px; height: auto; }

.header__nav { display: none; }

.header__contacts {
  display: flex;
  align-items: center;
  gap: var(--p-s);
}

.header__phone {
  font-size: var(--fs-small);
  font-weight: 700;
  white-space: nowrap;
  background-image: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.header__btn { display: none; }

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--c-white);
}

@media (min-width: 1200px) {
  .header__inner { padding-block: var(--p-l); }
  .logo__img { width: 181px; }

  .header__logo,
  .header__nav,
  .header__contacts { flex: 1 1 0; min-width: 0; }

  .header__logo {
    display: flex;
    align-items: center;
    height: 48px;
  }

  .header__nav { display: block; }
  .nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--p-xl);
  }
  .nav__link {
    color: var(--c-sec-30);
    font-size: var(--fs-small);
    font-weight: 500;
    white-space: nowrap;
    transition: color .2s ease;
  }
  .nav__link:hover { color: var(--c-white); }

  .header__contacts {
    justify-content: flex-end;
    gap: var(--p-m);
  }
  .header__phone { font-size: var(--fs-medium); }
  .header__btn { display: inline-flex; }
  .burger { display: none; }
}

/* ---------- 8. Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0 0 auto;
  height: 450px;
  overflow: hidden;
  z-index: -1;
}

.hero__media picture {
  position: absolute;
  inset: 0;
  display: block;
}

/* Мобильный макет: картинка 842×421 со сдвигом −35px, по высоте контейнер не заполняет */
.hero__bg {
  position: absolute;
  left: -9.33%;
  top: 0;
  width: 224.53%;
  height: auto;
  max-width: none;
}

.hero__glow { display: none; }

.hero__fade { position: absolute; left: 0; right: 0; }
.hero__fade--top { display: none; }
.hero__fade--bottom {
  bottom: 0;
  height: 333px;
  background-image: linear-gradient(to top, var(--c-dark) 14.9%, rgba(25, 27, 37, .59) 66.83%, rgba(25, 27, 37, 0) 100%);
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
}

.hero__head {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--p-s);
  min-height: 450px;
  padding-block: var(--p-l);
  text-align: center;
}

.hero__title {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.hero__subtitle {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-white);
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-s);
}

.stat {
  flex: 1 1 130px;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p-s);
  padding: var(--p-m) var(--p-l);
  border: 1px solid var(--c-white);
  border-radius: var(--r-m);
  background-color: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  text-align: center;
}

.stat__value {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.stat__value--gold {
  background-image: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.stat__label {
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-sec-30);
  white-space: nowrap;
}

.hero__note {
  padding-bottom: var(--p-l);
  padding-top: var(--p-s);
  font-size: var(--fs-medium);
  color: var(--c-sec-30);
  text-align: center;
}

@media (min-width: 1200px) {
  .hero__media { height: 760px; }
  /* Десктоп: 1440×720 по центру контейнера 607px — эквивалент cover center */
  .hero__bg {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .hero__glow {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 863px;
    max-width: none;
    height: auto;
    transform: translate(-50%, -46%);
    pointer-events: none;
  }

  .hero__fade--top {
    display: block;
    top: 0;
    height: 91px;
    background-image: linear-gradient(to bottom, var(--c-dark), rgba(25, 27, 37, 0));
  }
  .hero__fade--bottom {
    height: 80px;
    background-image: linear-gradient(to top, var(--c-dark), rgba(25, 27, 37, .59) 33.65%, rgba(25, 27, 37, 0));
  }

  .hero__inner {
    align-items: center;
    min-height: 760px;
    padding-bottom: 25px;
  }

  .hero__head {
    min-height: 0;
    gap: var(--p-m);
    padding-block: 0;
    padding-top: 207px;
  }
  .hero__subtitle { max-width: 349px; margin-inline: auto; }

  .stats {
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 35px;
  }
  .stat {
    flex: 0 0 186px;
    width: 186px;
    min-width: 0;
    padding: var(--p-l);
  }

  .hero__note { padding: 10px 0 0; }
}

/* ---------- 9. Lead band ---------- */
.lead-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p-m);
  padding-block: var(--p-l);
}

.lead-band__row {
  display: flex;
  flex-direction: column;
  gap: var(--p-s);
  width: 100%;
}

.lead-band__note {
  font-size: var(--fs-small);
  color: var(--c-sec-50);
  text-align: center;
}

@media (min-width: 1200px) {
  .lead-band__inner {
    gap: var(--p-m);
    padding: 64px 148px 80px;
  }
  .lead-band__row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    width: auto;
  }
  .lead-band__note { max-width: 464px; }
}

/* ---------- 10. Cards / «Ваш день» ---------- */
.day {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.day__decor {
  position: absolute;
  z-index: -1;
  width: 275px;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.day__decor--left {
  left: -157px;
  top: 19px;
  transform: rotate(-25.58deg);
}

.day__inner {
  display: flex;
  flex-direction: column;
  gap: var(--p-m);
  padding-block: var(--p-l);
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--p-xl);
  padding: var(--p-l);
  border-radius: var(--r-xl);
  background-color: var(--c-sec-70);
}

.card--accent {
  border: 2px solid transparent;
  background-color: var(--c-dark);
  background-image: linear-gradient(var(--c-dark), var(--c-dark)), var(--grad-gold);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--p-s);
}

.card__figure {
  font-size: 60px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--p-xs) var(--p-s);
  border-radius: var(--r-s);
  background-image: var(--grad-gold);
  color: var(--c-dark);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.card__title {
  font-size: var(--fs-large);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-white);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--p-s);
}

.card__kicker {
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.card__text {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-sec-30);
}

.day__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p-s);
}
.day__note {
  font-size: var(--fs-small);
  color: var(--c-sec-30);
  text-align: center;
}
.day__footer .btn { width: 100%; }

@media (min-width: 1200px) {
  .day__decor {
    width: 308px;
    left: -168px;
    top: 439px;
  }
  .day__inner {
    gap: 44px;
    padding-block: 0 100px;
  }
  .day__grid.slider__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 230px auto;
    gap: var(--p-m);
    overflow: visible;
  }
  .day__cell { height: 100%; scroll-snap-align: none; }
  .day__cell:nth-child(1) { grid-area: 1 / 2; }
  .day__cell:nth-child(2) { grid-area: 1 / 1; }
  .day__cell:nth-child(3) { grid-area: 1 / 3; }
  .day__cell:nth-child(4) { grid-area: 2 / 1; }
  .day__cell:nth-child(5) { grid-area: 2 / 2; }
  .day__cell:nth-child(6) { grid-area: 2 / 3; }

  .card__title { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -.01em; }

  .day__footer { gap: var(--p-l); margin-inline: auto; }
  .day__note { font-size: var(--fs-medium); white-space: nowrap; }
  .day__footer .btn { width: auto; }
}

/* ---------- 11. Slider (mobile) ---------- */
.slider { position: relative; }

.slider__track {
  display: flex;
  gap: var(--p-m);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  /* Запас под свечение карточек: overflow обрезал бы тень по краям.
     Отрицательные поля компенсируют отступы, позиции слайдов не меняются. */
  padding: 16px 12px;
  margin: -16px -12px;
  scroll-padding-inline: 12px;
}
.slider__track::-webkit-scrollbar { display: none; }

.slider__slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.slider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-s);
  margin-top: var(--p-m);
}

.slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--c-sec-50);
  transition: background-color .2s ease;
}
.slider__dot--active { background-image: var(--grad-gold); background-color: transparent; }

.slider__track:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 4px; border-radius: var(--r-m); }

@media (min-width: 1200px) {
  .slider__dots { display: none; }
  .slider__track { overflow: visible; scroll-snap-type: none; padding: 0; margin: 0; }
  .slider__track:focus-visible { outline: none; }
  .slider__slide { flex: initial; }
}

.day__cell { width: 300px; max-width: 300px; }
@media (min-width: 1200px) {
  .day__cell { width: auto; max-width: none; }
}

/* ---------- 12. Panel (brands + gifts) ---------- */
.panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--c-sec-70);
  padding-block: var(--p-xl);
}

.panel__decor {
  position: absolute;
  z-index: -1;
  width: 210px;
  height: auto;
  left: 231px;
  top: 235px;
  transform: rotate(-18.29deg);
  pointer-events: none;
}

.brands__inner {
  display: flex;
  flex-direction: column;
  gap: var(--p-m);
  padding-block: var(--p-l);
}

.brands__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--p-xs);
  width: 100%;
}

.brand {
  flex: 1 1 90px;
  min-width: 90px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-white);
  border-radius: var(--r-m);
  background-color: var(--c-sec-50);
}

.brand__logo {
  width: calc(var(--mw) * 1px);
  height: calc(var(--mh) * 1px);
}

.brand__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8.923px;
}
/*.brand__label { display: none; }*/

.brand--more {
  border-color: var(--c-gold-line);
  filter: drop-shadow(0 0 7.5px rgba(242, 206, 115, .56));
}
.brand__more {
  display: block;
  width: 100%;
  padding: 0 var(--p-s);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  text-align: center;
  color: var(--c-white);
}
.brand--more { padding: 0; cursor: pointer; }

.brands__footer {
  display: flex;
  flex-direction: column;
  gap: var(--p-s);
}
.brands__footer .btn { width: 100%; }

@media (min-width: 1200px) {
  .panel { padding-block: 80px; }
  .panel__decor {
    width: 391px;
    left: auto;
    right: -139px;
    top: 85px;
    transform: rotate(-25.58deg);
  }
  .brands__inner { gap: 44px; padding-block: 0; }
  .brands__head { max-width: 807px; margin-inline: auto; }
  .brands__grid { gap: var(--p-xs); }
  .brand {
    flex: 0 0 272px;
    width: 272px;
    min-width: 231px;
    max-width: 286px;
    padding: var(--p-l);
    border-radius: var(--r-xl);
  }
  .brand__logo { width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); }
  .brand__label { display: block; }
  .brand__more { font-size: var(--fs-large); }
  .brands__footer {
    align-items: center;
    gap: var(--p-m);
  }
  .brands__footer .btn { width: auto; }
}

/* ---------- 13. Gifts ---------- */
.gifts__inner {
  display: flex;
  flex-direction: column;
  gap: var(--p-m);
  padding-block: var(--p-l);
}

.gifts__group {
  display: flex;
  flex-direction: column;
  gap: var(--p-s);
  flex: 0 0 100%;
  width: 100%;
}

.gift {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--p-m);
  border-radius: var(--r-xl);
  background-color: var(--c-dark);
}

.gift__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 500px;
  background-image: var(--grad-gold);
  color: var(--c-dark);
}

.gift__text {
  font-size: var(--fs-medium);
  font-weight: 700;
  color: var(--c-white);
}

.gift--secret {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  height: 222px;
  padding: var(--p-m) var(--p-m) var(--p-l);
  filter: drop-shadow(0 0 7.5px rgba(242, 206, 115, .56));
}
/* Кадрирование фото — точные проценты из макета (мобильный / десктоп) */
.gift__bg {
  position: absolute;
  z-index: -2;
  left: -25.37%;
  top: -24.32%;
  width: 150.73%;
  height: 124.15%;
  max-width: none;
  object-fit: fill;
}
.gift--secret::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(to bottom, rgba(25, 27, 37, 0) 56.6%, rgba(25, 27, 37, .79) 82.4%, var(--c-dark) 100%);
}
.gift__secret-text {
  font-size: var(--fs-medium);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--c-white);
}

.gift--wide { justify-content: center; }

@media (min-width: 1200px) {
  .gifts { margin-top: 80px; }
  .gifts__inner { gap: 44px; padding-block: 0; }

  .gifts__layout.slider__track {
    display: grid;
    grid-template-columns: 352fr 656fr 165fr 179fr;
    grid-template-rows: 80px 80px 80px auto;
    gap: var(--p-s);
  }
  .gifts__group { display: contents; }

  .gifts__a { grid-area: 1 / 1; }
  .gifts__b { grid-area: 2 / 1; }
  .gifts__c { grid-area: 3 / 1; }
  .gifts__secret { grid-area: 1 / 2 / span 3 / span 1; height: auto; }
  .gifts__d { grid-area: 1 / 3; }
  .gifts__e { grid-area: 1 / 4; }
  .gifts__f { grid-area: 2 / 3 / span 1 / span 2; }
  .gifts__g { grid-area: 3 / 3 / span 1 / span 2; }
  .gifts__wide { grid-area: 4 / 1 / span 1 / span 4; justify-content: center; }

  .gift { min-width: 0; }
  .gift__text { white-space: normal; }
  .gifts__wide .gift__text { white-space: nowrap; }
  .gifts__wide { filter: drop-shadow(0 0 7.5px rgba(242, 206, 115, .56)); }
  .gift--secret { padding: var(--p-m) var(--p-m) var(--p-l); }
  .gift__bg { left: 0; top: -26.95%; width: 100%; height: 135.8%; }
  .gift--secret::after {
    background-image: linear-gradient(to bottom, rgba(25, 27, 37, 0) 62.7%, rgba(25, 27, 37, .63) 79.6%, var(--c-dark) 100%);
  }
}

/* ---------- 14. Countdown ---------- */
.countdown {
  position: relative;
}

.countdown__decor {
  position: absolute;
  z-index: 0;
  width: 345px;
  height: auto;
  pointer-events: none;
}
.countdown__decor--left { display: none; }
.countdown__decor--right {
  left: 10px;
  max-width: calc(100% - 20px);
  top: 218px;
  transform: rotate(-3.2deg);
}

.countdown__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p-m);
  padding-block: var(--p-l);
}

.countdown__timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-s);
}

.countdown__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 65.2px;
  height: 65.2px;
  text-align: center;
}

.countdown__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.countdown__value {
  position: relative;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--c-white);
}

.countdown__label {
  position: relative;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-sec-30);
}

.countdown__sep {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

@media (max-width: 359px) {
  .countdown__timer { gap: var(--p-xs); }
  .countdown__item { width: 56px; height: 56px; }
  .countdown__value,
  .countdown__sep { font-size: 22px; }
}

@media (min-width: 1200px) {
  .countdown__decor { width: 476px; }
  .countdown__decor--left {
    display: block;
    left: max(-120px, calc(50% - 689px));
    top: 275px;
    transform: rotate(180deg);
  }
  .countdown__decor--right {
    left: calc(50% + 210px);
    max-width: calc(50% - 210px);
    top: 458px;
    transform: none;
  }
  .countdown__inner {
    gap: 44px;
    max-width: 784px;
    padding-block: 80px;
  }
  .countdown__timer { gap: 10px; }
  .countdown__item { width: 150px; height: 150px; gap: var(--p-xs); }
  .countdown__value { font-size: var(--fs-xxl); line-height: 1; }
  .countdown__label { font-size: var(--fs-caption); }
  .countdown__sep { font-size: var(--fs-xxl); line-height: 1; }
}

/* ---------- 15. Catalog banner ---------- */
.catalog { padding-block: var(--p-l); }

.catalog__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--p-m);
  min-height: 330px;
  gap: 0;
  padding: var(--p-m);
  border-radius: var(--r-l);
  background-color: var(--c-black);
}

.catalog__texture {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.catalog__texture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog__decor {
  position: absolute;
  z-index: -1;
  height: auto;
  pointer-events: none;
}
/* Раскладка макета: «%» слева под датой, замок — у правого края.
   Замок привязан к правому краю, чтобы кадрирование не плыло на узких экранах. */
.catalog__decor--percent {
  width: 151px;
  left: 43px;
  top: 161px;
  transform: rotate(-22.46deg);
}
.catalog__decor--coin {
  width: 148px;
  right: -38px;
  top: 77px;
}

.catalog__title {
  font-size: var(--fs-large);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-white);
}

.catalog__row { display: contents; }
.catalog__date { margin-top: var(--p-s); }
.catalog__row .btn {
  margin-top: auto;
  padding-inline: 12px;
  white-space: nowrap;
}

.catalog__date {
  font-size: var(--fs-large);
  font-weight: 700;
  /* Плотный набор из макета: строки 0.8 и отбивка 11px между ними */
  line-height: .8;
}
.catalog__date-br {
  display: block;
  height: 11px;
}

/* Заголовок должен укладываться в три строки, как в макете:
   на четвёртой строке дата наезжает на золотой знак «%». */
@media (max-width: 374px) { .catalog__title { font-size: 20px; } }
@media (max-width: 339px) { .catalog__title { font-size: 18px; } }

.catalog__row .btn { width: 100%; }

@media (min-width: 1200px) {
  .catalog { padding-block: 0; }
  .catalog__card {
    gap: var(--p-xl);
    justify-content: flex-start;
    min-height: 0;
    padding: var(--p-l);
  }
  .catalog__decor--percent {
    width: 311px;
    left: 506px;
    top: 17px;
    transform: none;
  }
  .catalog__decor--coin {
    width: 274px;
    right: auto;
    left: 830px;
    top: -86px;
  }
  .catalog__title {
    max-width: 397px;
    font-size: var(--fs-h4);
    line-height: 1.2;
    letter-spacing: -.01em;
  }
  .catalog__row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .catalog__date { margin-top: 0; }
  .catalog__row .btn { margin-top: 0; padding-inline: var(--p-l); }
  .catalog__date { line-height: 1.4; }
  .catalog__date-br { display: inline; height: auto; }
  .catalog__row .btn { width: auto; }
}

/* ---------- 16. Locations ---------- */
.locations {
  padding-block: var(--p-l);
}

.locations__subtitle { max-width: 744px; }

.locations__map {
  position: relative;
  isolation: isolate;
  height: 300px;
  margin-top: var(--p-m);
  overflow: hidden;
}

.locations__map-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Интерактивная карта Яндекса поверх статичной подложки */
.locations__ymap {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.locations__ymap:empty { pointer-events: none; }

/* Когда карта поднялась — подложка и декоративные метки из макета не нужны */
.locations__map--live .locations__map-media,
.locations__map--live .locations__pin { display: none; }

/* Схема карты раскрашена штатной кастомизацией API 3.0 (см. MAP_STYLE в main.js).
   Фон — на случай, пока тайлы ещё грузятся. */
.locations__ymap { background-color: #3a4455; }

/* Метка на карте — тот же знак, что и в макете */
.ymap-pin {
  width: 44px;
  height: 44px;
  background: url(../img/icon-pin-fill.svg) no-repeat center / contain;
  transform: translate(-50%, -100%);
  cursor: pointer;
  transition: transform .2s ease;
}
@media (min-width: 1200px) {
  .ymap-pin { width: 64px; height: 64px; }
}
@media (hover: hover) and (pointer: fine) {
  .ymap-pin:hover { transform: translate(-50%, -100%) scale(1.08); }
}
.locations__map-media picture,
.locations__map-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.locations__map-media img { object-fit: cover; object-position: center bottom; }

.locations__map-fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(25, 27, 37, 0) 50%, rgba(25, 27, 37, .7) 100%);
}

.locations__pin {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
}
.locations__pin--1 { left: 56.8%;  top: 48.6%; }
.locations__pin--2 { left: 53.87%; top: 5.6%; }
.locations__pin--3 { left: 46.13%; top: 52.26%; }
.locations__pin--4 { left: 69.33%; top: 58.93%; }

.locations__slider { margin-top: var(--p-l); }

.location {
  width: 300px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--p-l);
  padding: var(--p-l);
  border-radius: var(--r-xl);
  background-color: var(--c-sec-70);
}

.location__name {
  font-size: var(--fs-medium);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-white);
}

.location__info {
  display: flex;
  flex-direction: column;
  gap: var(--p-s);
}

.location__row {
  display: flex;
  align-items: flex-start;
  gap: var(--p-s);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-white);
}
.location__icon { margin-top: 3px; }
.location__row:last-child .location__icon { margin-top: 2px; }
.location__phone { white-space: nowrap; }

@media (min-width: 1200px) {
  .locations { padding: 100px 0 80px; }
  .locations__map {
    height: 680px;
    margin-top: 44px;
    margin-bottom: -212px;
    padding-inline: var(--p-xl);
  }
  .locations__map-fade {
    background-image: linear-gradient(to bottom, rgba(25, 27, 37, 0) 49.9%, rgba(25, 27, 37, .7) 100%);
  }
  .locations__pin { width: 64px; height: 64px; }
  .locations__pin--1 { left: 54.44%; top: 37.5%; }
  .locations__pin--2 { left: 54.44%; top: 6.18%; }
  .locations__pin--3 { left: 50%;    top: 38.24%; }
  .locations__pin--4 { left: 59.37%; top: 46.32%; }

  .locations__slider {
    position: relative;
    z-index: 2;
    margin-top: 0;
    padding-bottom: var(--p-xl);
  }
  .locations__list { gap: var(--p-m); }
  .location {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    height: 180px;
  }
}

/* ---------- 17. Invite form ---------- */
.invite { padding-block: var(--p-l); }

.invite__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--p-m);
  padding: var(--p-m);
  border-radius: var(--r-l);
  background-color: var(--c-black);
}

.invite__texture {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.invite__texture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.invite__row {
  display: flex;
  flex-direction: column;
  gap: var(--p-m);
}

.invite__text {
  display: flex;
  flex-direction: column;
  gap: var(--p-m);
  text-align: center;
}

.invite__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.invite__desc {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-sec-30);
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p-m);
  width: 100%;
}

.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.btn--loading {
  opacity: .7;
  cursor: progress;
  pointer-events: none;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--p-xs);
  width: 100%;
}

.input {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-s);
  height: 48px;
  padding-inline: var(--p-m);
  border-radius: var(--r-m);
  background-color: var(--c-sec-50);
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .15);
  overflow: hidden;
}

.input__control {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--c-white);
  font-size: var(--fs-small);
  font-weight: 500;
}
.input__control::placeholder { color: transparent; }

.input__ph {
  position: absolute;
  top: 50%;
  left: var(--p-m);
  transform: translateY(-50%);
  pointer-events: none;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-white);
}
.input__req { color: var(--c-error); }
.input__control:not(:placeholder-shown) ~ .input__ph { display: none; }
.input__control:focus { outline: none; }
.input:focus-within { box-shadow: 0 0 0 2px var(--c-gold); }
.input__icon { color: var(--c-white); }

.input--invalid { box-shadow: 0 0 0 2px var(--c-error); }

.form__error {
  font-size: var(--fs-caption);
  line-height: 1.2;
  color: var(--c-error);
}

.form .btn { width: 100%; }

.check {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--p-s);
  cursor: pointer;
}
.check__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.check__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  padding: 2px;
  border: 1px solid var(--c-gold-line);
  border-radius: var(--r-s);
  color: var(--c-dark);
}
.check__input:checked + .check__box {
  background-image: var(--grad-gold);
  border-color: transparent;
}
.check__input:not(:checked) + .check__box .i { opacity: 0; }
.check__input:focus-visible + .check__box { outline: 2px solid var(--c-gold); outline-offset: 2px; }

.check__text {
  font-size: var(--fs-caption);
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-sec-30);
}
.check__link {
  background-image: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-decoration: underline;
  text-decoration-color: #e0ab36;
  text-underline-position: from-font;
}

.invite__benefits {
  display: flex;
  flex-direction: column;
  gap: var(--p-xs);
  padding-top: var(--p-m);
  border-top: 1px solid var(--c-gray);
}
.invite__benefit {
  display: flex;
  align-items: center;
  gap: var(--p-s);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-white);
}
/* В мобильном макете иконки золотые, а «Количество приглашений» идёт первым */
.invite__benefit:nth-child(3) { order: -1; }

@media (min-width: 1200px) {
  .invite { padding-block: 0; }
  .invite__card {
    gap: var(--p-l);
    padding: var(--p-xl) var(--p-xl) var(--p-m);
    border-radius: var(--r-xl);
    background-color: var(--c-sec-70);
  }
  .invite__row {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--p-m);
  }
  .invite__text {
    flex: 0 0 880px;
    max-width: 880px;
    gap: var(--p-l);
    text-align: left;
  }
  .invite__title { font-size: var(--fs-h3); }
  .invite__desc { max-width: 484px; font-size: var(--fs-medium); }

  .invite__form {
    flex: 1 1 0;
    min-width: 0;
    gap: var(--p-s);
  }
  .form { gap: var(--p-s); }

  .invite__benefits {
    flex-direction: row;
    gap: var(--p-xs);
  }
  .invite__benefit {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
  }
  .invite__benefit:nth-child(3) { order: 0; }
}

/* ---------- 18. Outro ---------- */
.outro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--p-l);
}

.outro__decor {
  position: absolute;
  z-index: -1;
  width: 204px;
  height: auto;
  left: -79px;
  top: 158px;
  transform: rotate(105.31deg);
  pointer-events: none;
}

.outro__subtitle { max-width: 301px; }

.outro__picture { display: block; margin-top: var(--p-m); }
.outro__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--r-xl);
}

@media (min-width: 1200px) {
  .outro { padding: 80px 0 0; }
  .outro__decor { width: 476px; left: -196px; top: 13px; transform: rotate(114.29deg); }
  .outro__subtitle { max-width: 942px; }
  .outro__picture { margin-top: 44px; }
  .outro__img { height: 630px; }
}

/* ---------- 19. Footer ---------- */
.footer { padding-block: var(--p-l) 0; }

.footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--p-m);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-white);
}
.footer__link { transition: color .2s ease; }
.footer__link:hover { color: var(--c-gold); }

.footer__terms {
  margin-top: var(--p-l);
  padding-block: var(--p-l);
  border-top: 1px solid var(--c-sec-70);
}

.terms__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--p-s);
  color: var(--c-white);
  font-size: var(--fs-small);
  font-weight: 700;
}
.terms__icon { transition: transform .25s ease; }
.terms__toggle[aria-expanded="true"] .terms__icon { transform: rotate(180deg); }

.terms__body {
  display: grid;
  gap: var(--p-s);
  margin-top: var(--p-l);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-sec-30);
}

@media (min-width: 1200px) {
  .footer { padding-top: 44px; }
  .footer__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--p-m);
    white-space: nowrap;
  }
}

/* ---------- 20. Mobile menu ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background-color: var(--c-dark);
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-m);
  padding: 15px;
}
.mobile-menu__controls {
  display: flex;
  align-items: center;
  gap: var(--p-s);
}
.mobile-menu__phone {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-gold);
  white-space: nowrap;
}
.mobile-menu__phone--lg { font-size: var(--fs-large); }
.mobile-menu__close {
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: var(--c-white);
}

.mobile-menu__nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p-xl);
}
.mobile-menu__link {
  font-size: var(--fs-large);
  font-weight: 700;
  color: var(--c-white);
}

.mobile-menu__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p-l);
  padding: var(--p-xl) 15px;
}

@media (min-width: 1200px) {
  .mobile-menu { display: none !important; }
}

/* ---------- 21. Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}
.modal[hidden] { display: none; }

.modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(25, 27, 37, .8);
}

.modal__dialog {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 448px;
  display: flex;
  flex-direction: column;
  gap: var(--p-m);
  padding: var(--p-m);
  border-radius: var(--r-l);
  background-color: var(--c-black);
  animation: modal-in .25s ease;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.modal__texture {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.modal__texture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  color: var(--c-white);
}

.modal__head {
  display: flex;
  flex-direction: column;
  gap: var(--p-m);
  text-align: center;
}

.modal__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.modal__desc {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-sec-30);
}

@media (min-width: 1200px) {
  .modal__dialog {
    gap: var(--p-l);
    padding: var(--p-xl);
    border-radius: var(--r-xl);
    background-color: var(--c-sec-70);
  }
  .modal__close { top: 13.5px; right: 14px; }
  .modal__title { font-size: var(--fs-h3); }
  .modal__desc { font-size: var(--fs-medium); }
}

/* ---------- 22. Policy page ---------- */
.policy { padding-block: var(--p-l); }
.policy__inner {
  display: flex;
  flex-direction: column;
  gap: var(--p-l);
}
.policy__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.policy__body {
  display: grid;
  gap: var(--p-s);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-sec-30);
}

@media (min-width: 1200px) {
  .policy { padding-block: 44px 0; }
  .policy__title { font-size: var(--fs-h3); }
}

/* ---------- 23. Print ---------- */
@media print {
  .header, .footer__terms, .mobile-menu, .modal, .hero__media,
  .day__decor, .panel__decor, .countdown__decor, .outro__decor { display: none !important; }
  .page { background: #fff; color: #000; }
}