/* ===== RESET / BASE ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #0a0a0a;
  font-family: 'Manrope', -apple-system, sans-serif;
  color: #fff;
  min-height: 100vh;
}
img { max-width: 100%; display: block; }

/* ============================================== */
/* ===== HERO — ЕДИНАЯ MOBILE-FIRST ВЁРСТКА ===== */
/* ============================================== */
/* Один источник правды для hero. Никаких отдельных media queries дальше в файле. */

.hero {
  position: relative;
  background: #0a0a0a;
  color: #fff;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.hero-img-side { display: none; }

/* picture-обёртка не должна раздувать grid-строку */
.hero > picture {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  display: block;
  pointer-events: none;
  min-height: 0;
}
/* Картинка модели — на mobile фоном на весь hero, object-position top чтобы голова была видна */
.hero-bg-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 1;
  pointer-events: none;
}
/* Тёмный градиент снизу — для читаемости текста поверх */
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(10,10,10,0.20) 0%,
    rgba(10,10,10,0.45) 45%,
    rgba(10,10,10,0.92) 80%,
    rgba(10,10,10,1)    100%);
  z-index: 2; pointer-events: none;
}

/* Header — всегда абсолютом сверху (mobile + desktop) */
.header {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px;
  background: transparent;
}

.hero-text-side {
  position: relative; z-index: 3;
  flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 22px 9vh;         /* mobile: блок поднят, отступ снизу — половина */
  width: 100%;
}
.hero-text-side .text-zone {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 18px;
  width: 100%; max-width: 480px;
  margin: 0 auto;
}
.hero-text-side .hero-offer { margin: 0; align-items: center; }
.hero-text-side .form-block { width: 100%; }

/* ===== DESKTOP: ≥1024px — две колонки, картинка слева, текст справа ===== */
@media (min-width: 1024px) {
  .hero {
    display: block;
    height: clamp(720px, 92svh, 920px);
    min-height: 0;
  }
  .hero > picture {
    position: absolute;
    inset: 0 50% 0 0;       /* левая половина */
    width: auto; height: 100%;
  }
  .hero-bg-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
  }
  .hero::before {
    background: linear-gradient(to right,
      transparent 0%,
      transparent 35%,
      rgba(10,10,10,0.4) 50%,
      rgba(10,10,10,0.95) 65%,
      #0a0a0a 100%);
  }
  .hero .header {
    padding: 28px 5vw;             /* position уже задан в базовом блоке */
  }
  .hero-text-side {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 50%;
    padding: 100px 5vw 40px;
    justify-content: center;
    align-items: flex-start;
    display: flex; flex-direction: column;
    z-index: 3;
  }
  .hero-text-side .text-zone {
    align-items: flex-start; text-align: left;
    max-width: 520px;
    margin: 0;
    gap: 14px;
  }
  .hero-text-side .hero-offer { align-items: flex-start; }
  .hero-text-side .form-block { align-items: stretch; max-width: 460px; }
}
.logo { font-size: 18px; letter-spacing: 4px; font-weight: 700; }
.menu {
  font-size: 12px; color: #ccc; letter-spacing: 1.5px;
  text-decoration: none; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.2s;
}
.menu:hover { color: #d4a574; }
.menu .menu-arr { transition: transform 0.2s; }
.menu:hover .menu-arr { transform: translateX(3px); }
.text-zone { margin-top: 0; max-width: 460px; width: 100%; }
.h1 {
  font-weight: 600; line-height: 1.18; letter-spacing: -0.01em;
  font-size: 38px; margin: 0;
}
.h1 strong { color: #d4a574; font-weight: 700; }
.subhead-hero {
  color: #d4a574; font-weight: 500;
  letter-spacing: 0.3px; line-height: 1.4;
  font-size: 16px; margin-bottom: 32px;
}

/* ===== HERO OFFER — премиум-блок со скидкой ===== */
.hero-offer {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 26px;
  position: relative;
}
.offer-line {
  display: flex; align-items: baseline; gap: 14px;
  position: relative;
}
.offer-line::after {
  content: ''; position: absolute; left: -8px; right: -8px; top: -6px; bottom: -6px;
  background: linear-gradient(110deg, transparent 0%, transparent 38%, rgba(212,165,116,0.16) 50%, transparent 62%, transparent 100%);
  background-size: 220% 100%;
  background-position: 220% 0;
  pointer-events: none;
  animation: offerShimmer 4.5s ease-in-out infinite;
  animation-delay: 1.8s;
}
@keyframes offerShimmer {
  0%   { background-position: 220% 0; }
  40%  { background-position: -120% 0; }
  100% { background-position: -120% 0; }
}
.offer-pct {
  display: inline-flex; align-items: baseline;
  font-weight: 800; line-height: 0.9;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #f1c894 0%, #d4a574 55%, #a87d4f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 14px rgba(212,165,116,0.28));
}
.offer-sign { font-size: 52px; margin-right: 2px; }
.offer-num { font-size: 84px; font-variant-numeric: tabular-nums; }
.offer-percent { font-size: 52px; }
.offer-word {
  font-weight: 800; font-size: 72px; line-height: 0.9;
  letter-spacing: -0.02em; text-transform: uppercase;
  background: linear-gradient(180deg, #f1c894 0%, #d4a574 55%, #a87d4f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 14px rgba(212,165,116,0.28));
}

.offer-gift {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 0; background: transparent; border: none;
  align-self: center;
  margin-bottom: 16px;
}
.offer-gift-text { font-size: 16px; }
.form-block { display: flex; flex-direction: column; width: 100%; align-items: center; }
.form-block .form { width: 100%; }
.offer-gift-box {
  position: relative;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  animation: giftBob 2.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(212,165,116,0.25));
}
.offer-gift-box img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
@keyframes giftBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.offer-gift-text {
  color: #eee; font-size: 13px; line-height: 1.25;
}
.offer-gift-text b { color: #d4a574; font-weight: 700; }
.form {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 20px;
  backdrop-filter: blur(8px);
}
.form-label { font-size: 11px; color: #ccc; margin-bottom: 10px; line-height: 1.4; }
.flag-input {
  display: flex; align-items: center;
  background: #fff; border-radius: 6px;
  padding: 12px 14px; gap: 8px;
}
.flag { font-size: 18px; }
.country-code { color: #1a1a1a; font-weight: 600; font-size: 14px; }
.input {
  flex: 1; border: none; outline: none;
  color: #1a1a1a; font-size: 14px;
  font-family: inherit; background: transparent;
}
.btn {
  width: 100%; margin-top: 12px;
  background: #d4a574; color: #1a1a1a;
  border: none; padding: 16px; border-radius: 6px;
  font-weight: 700; font-size: 13px; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer;
  font-family: inherit; transition: background 0.2s;
}
.btn:hover { background: #e0b687; }
.btn-loading, .cat-submit.btn-loading {
  cursor: default; opacity: 1;
  background: rgba(212,165,116,0.15);
  color: #d4a574;
  position: relative; overflow: hidden;
}
.btn-loading:hover { background: rgba(212,165,116,0.15); }
.btn-bar {
  display: block; width: 100%; height: 4px;
  background: rgba(212,165,116,0.18);
  border-radius: 4px; overflow: hidden;
}
.btn-bar-fill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #d4a574, #e0b687);
  border-radius: 4px;
  transition: width 1.7s cubic-bezier(.2,.7,.2,1);
}
.btn-done {
  background: rgba(212,165,116,0.12) !important;
  color: #d4a574 !important;
  font-size: 18px;
}
/* Success state — после успешной отправки лида */
.btn-success {
  background: #1f7a3a !important;
  color: #fff !important;
  cursor: default;
  pointer-events: none;
  font-size: 17px;
  letter-spacing: 0.3px;
  animation: btnSuccessPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-success:hover { background: #1f7a3a !important; }
.btn-success .check {
  display: inline-block;
  margin-right: 8px;
  font-size: 19px;
  animation: checkPop 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes btnSuccessPop {
  0% { transform: scale(0.96); }
  60% { transform: scale(1.02); }
  100% { transform: scale(1); }
}
@keyframes checkPop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
/* Error state — если /api/lead не ответил */
.btn-error {
  background: #5a1a1a !important;
  color: #f5d4d4 !important;
  font-size: 16px;
}
.consent { margin-top: 14px; font-size: 10px; color: #888; text-align: center; line-height: 1.5; }
.consent a { color: #aaa; }

/* ===== GALLERY ===== */
.gallery { background: #0e0e0e; padding: 80px 60px 90px; }
.gallery-head { text-align: center; margin-bottom: 36px; }
.eyebrow {
  color: #d4a574; font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  font-weight: 600; margin-bottom: 14px;
}
.h2 {
  font-weight: 600; line-height: 1.2;
  letter-spacing: -0.01em; margin-bottom: 14px;
  font-size: 40px;
}
.h2 strong { color: #d4a574; font-weight: 700; }
.subhead-gal {
  color: #bbb; font-weight: 400; line-height: 1.5;
  max-width: 520px; margin: 0 auto;
  font-size: 16px;
}
.grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1200px; margin: 0 auto;
}
.card {
  position: relative; aspect-ratio: 3/4;
  border-radius: 8px; overflow: hidden;
  background: linear-gradient(135deg, #2a2520 0%, #1a1612 100%);
  cursor: pointer; transition: transform 0.2s;
}
.card:hover { transform: translateY(-2px); }
.card-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.c1 .card-img { background-image: url('../img/gallery/gallery-1.webp'); }
.c2 .card-img { background-image: url('../img/gallery/gallery-2.webp'); }
.c3 .card-img { background-image: url('../img/gallery/gallery-3.webp'); }
.c4 .card-img { background-image: url('../img/gallery/gallery-4.webp'); }
.c5 .card-img { background-image: url('../img/gallery/gallery-5.webp'); }
.c6 .card-img { background-image: url('../img/gallery/gallery-6.webp'); }
.c7 .card-img { background-image: url('../img/gallery/gallery-7.webp'); }
.c8 .card-img { background-image: url('../img/gallery/gallery-8.webp'); }
.card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 100%);
}

/* Telegram-style SPOILER */
.card.spoiler .card-img { filter: blur(38px) saturate(1.3); transform: scale(1.25); }
.card.spoiler::before {
  content: ''; position: absolute; inset: 0; z-index: 3;
  background-color: rgba(20,17,13,0.55);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(212,165,116,0.7) 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.6) 1px, transparent 1.5px),
    radial-gradient(circle at 40% 80%, rgba(212,165,116,0.5) 1px, transparent 1.5px),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,0.5) 1px, transparent 1.5px),
    radial-gradient(circle at 10% 70%, rgba(212,165,116,0.6) 1px, transparent 1.5px),
    radial-gradient(circle at 60% 15%, rgba(255,255,255,0.4) 1px, transparent 1.5px),
    radial-gradient(circle at 30% 50%, rgba(212,165,116,0.5) 1px, transparent 1.5px),
    radial-gradient(circle at 90% 85%, rgba(255,255,255,0.5) 1px, transparent 1.5px);
  background-size: 60px 60px, 80px 80px, 70px 70px, 50px 50px, 90px 90px, 65px 65px, 75px 75px, 55px 55px;
  animation: spoilerShimmer 4s linear infinite;
  pointer-events: none;
}
@keyframes spoilerShimmer {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 60px 60px, -80px 80px, 70px -70px, -50px -50px, 90px 90px, -65px 65px, 75px -75px, -55px 55px; }
}
.card.spoiler .card-lock {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; pointer-events: none;
}
.card.spoiler .card-lock-ico {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(212,165,116,0.18);
  border: 1px solid rgba(212,165,116,0.45);
  backdrop-filter: blur(6px);
  color: #d4a574; display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.card.spoiler .card-lock-txt {
  color: rgba(255,255,255,0.85); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.card.spoiler::after { display: none; }
.card.spoiler:hover { transform: translateY(-3px); }

.cta-wrap { text-align: center; margin-top: 36px; }
.cta {
  display: inline-block; background: #d4a574; color: #1a1a1a;
  border: none; padding: 16px 36px; border-radius: 6px;
  font-family: inherit; font-weight: 700; font-size: 13px;
  letter-spacing: 1.5px; text-transform: uppercase;
  cursor: pointer; transition: background 0.2s;
}
.cta:hover { background: #e0b687; }
.cta-hint { color: #777; font-size: 11px; margin-top: 12px; letter-spacing: 0.5px; }

/* ===== STYLIST ===== */
.stylist-block {
  background: linear-gradient(180deg, #14110d 0%, #1f1812 100%);
  color: #fff;
  padding: 90px 60px 100px;
  text-align: center;
  border-top: 1px solid rgba(212, 165, 116, 0.15);
}
.eyebrow-stylist {
  color: #d4a574; font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  font-weight: 600; margin-bottom: 18px;
}
.stylist-h2 {
  font-weight: 600; line-height: 1.2;
  letter-spacing: -0.01em; margin-bottom: 14px;
  font-size: 36px; max-width: 700px;
  margin-left: auto; margin-right: auto;
}
.stylist-h2 strong { color: #d4a574; font-weight: 700; }
.stylist-sub {
  color: #aaa; font-size: 16px; line-height: 1.55;
  max-width: 620px; margin: 0 auto 28px;
  text-align: center;
}
@media (max-width: 767px) {
  .stylist-sub { font-size: 14px; padding: 0 16px; }
}
.cta-stylist {
  background: #d4a574; color: #1a1a1a;
  border: none; padding: 18px 40px;
  border-radius: 6px; font-family: inherit;
  font-weight: 700; font-size: 13px;
  letter-spacing: 1.5px; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 12px 32px rgba(212, 165, 116, 0.25);
}
.cta-stylist:hover { background: #e0b687; transform: translateY(-1px); }
.stylist-perks {
  display: flex; gap: 24px; justify-content: center;
  margin-top: 36px; flex-wrap: wrap;
}
.stylist-perk {
  display: flex; align-items: center; gap: 8px;
  color: #aaa; font-size: 12px;
}

.stylist-inner { max-width: 880px; margin: 0 auto; }

/* === CERTIFICATE ISLAND — светлая карточка-якорь === */
.cert-island {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,165,116,0.12), transparent 60%),
    linear-gradient(180deg, #1a1410 0%, #14100c 100%);
  border: 1px solid rgba(212,165,116,0.18);
  border-radius: 28px;
  padding: 56px 56px 48px;
  margin: 40px auto 56px;
  max-width: 760px;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.5),
    0 12px 32px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.05);
  text-align: center;
  overflow: hidden;
}
.cert-island > * { position: relative; z-index: 1; }
.cert-island-eyebrow {
  color: #d4a574; font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  font-weight: 600; margin-bottom: 24px;
}
.cert-img-frame {
  position: relative; display: inline-block;
  margin: 0 auto 32px;
  animation: certFloat 6s ease-in-out infinite;
}
.cert-img {
  display: block;
  width: 100%; max-width: 480px;
  height: auto; border-radius: 10px;
  box-shadow:
    0 40px 80px rgba(0,0,0,0.6),
    0 16px 32px rgba(0,0,0,0.4),
    0 0 0 1px rgba(212,165,116,0.15);
}
@keyframes certFloat {
  0%,100% { transform: translateY(0) rotate(-0.5deg); }
  50%     { transform: translateY(-6px) rotate(0.5deg); }
}
.cert-island-price {
  display: flex; align-items: baseline; gap: 14px;
  justify-content: center; margin-bottom: 6px;
}
.cert-price-old { color: #888; text-decoration: line-through; font-size: 22px; font-weight: 500; }
.cert-price-arrow { color: #d4a574; font-weight: 700; font-size: 22px; }
.cert-price-new {
  color: #f1c894; font-size: 44px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1;
  background: linear-gradient(180deg, #f1c894 0%, #d4a574 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cert-island-desc { color: #aaa; font-size: 14px; margin-bottom: 28px; }
.cert-island .cta-stylist {
  background: #d4a574; color: #1a1410;
  box-shadow: 0 14px 36px rgba(212,165,116,0.3);
}
.cert-island .cta-stylist:hover { background: #e0b687; }
.cert-island .stylist-perk { color: #999; }
.gift-emoji { display: inline-block; margin-right: 8px; animation: giftBounce 1.6s ease-in-out infinite; }

/* === EXPERT MICRO-BLOCK === */
.stylist-expert {
  display: flex; align-items: center; gap: 18px;
  max-width: 480px; margin: 0 auto;
  padding: 18px 22px;
  background: rgba(212,165,116,0.05);
  border: 1px solid rgba(212,165,116,0.18);
  border-radius: 16px;
  text-align: left;
}
.expert-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #d4a574, #8a6b3f);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.expert-avatar-letter {
  color: #1a1410; font-weight: 700; font-size: 22px;
  letter-spacing: -0.02em;
}
.expert-info { flex: 1; min-width: 0; }
.expert-label {
  font-size: 11px; color: #d4a574;
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 4px;
}
.expert-name {
  font-size: 17px; color: #fff; font-weight: 600;
  margin-bottom: 2px;
}
.expert-meta { font-size: 12px; color: #888; }
@keyframes giftBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ===== REVIEWS (Stories) ===== */
.reviews {
  background: #0a0a0a; color: #fff;
  padding: 90px 0 100px;
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative;
}
.reviews-head { text-align: center; padding: 0 24px; margin-bottom: 32px; }
.reviews-eyebrow {
  color: #d4a574; font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  font-weight: 600; margin-bottom: 14px;
}
.reviews-h2 {
  font-weight: 600; line-height: 1.2;
  letter-spacing: -0.01em; margin-bottom: 10px;
  font-size: 36px;
}
.reviews-h2 strong { color: #d4a574; font-weight: 700; }
.reviews-sub { color: #888; font-size: 13px; }
.reviews-sub b { color: #d4a574; font-weight: 600; }

.stories-rail-wrap { position: relative; max-width: 1480px; margin: 0 auto; }
.stories-rail {
  display: flex; gap: 18px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 60px 22px;
  scrollbar-width: none;
}
.stories-rail::-webkit-scrollbar { display: none; }

.story-card {
  flex: 0 0 auto;
  width: 200px;
  aspect-ratio: 9/16;
  border-radius: 14px; overflow: hidden;
  background: #1a1612;
  position: relative;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
  border: 1px solid rgba(255,255,255,0.06);
}
.story-card img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  pointer-events: none;
}
.story-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(212,165,116,0.18); }
.story-card .sc-ring {
  position: absolute; inset: 0;
  border: 1.5px solid rgba(212,165,116,0.35);
  border-radius: 14px;
  pointer-events: none; z-index: 2;
  transition: border-color 0.25s;
}
.story-card:hover .sc-ring { border-color: #d4a574; }
@media (min-width: 1100px) {
  .story-card { width: 205px; }
}

.stories-fade-l, .stories-fade-r {
  position: absolute; top: 4px; bottom: 22px;
  pointer-events: none; z-index: 3;
  width: 80px;
}
.stories-fade-l { left: 0; background: linear-gradient(90deg, #0a0a0a, transparent); }
.stories-fade-r { right: 0; background: linear-gradient(270deg, #0a0a0a, transparent); }

.stories-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 4; transition: all 0.2s;
  backdrop-filter: blur(6px);
}
.stories-arrow:hover { background: rgba(212,165,116,0.25); border-color: #d4a574; }
.stories-arrow.left { left: 12px; }
.stories-arrow.right { right: 12px; }

/* IG VIEWER MODAL */
.ig-viewer {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: none; z-index: 9999;
  align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none;
}
.ig-viewer.open { display: flex; animation: igFadeIn 0.2s ease; }
@keyframes igFadeIn { from { opacity: 0; } to { opacity: 1; } }

.ig-stage {
  position: relative;
  width: min(420px, 92vw);
  aspect-ratio: 9/16;
  max-height: 92vh;
  background: #000;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.ig-stage img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ig-progress {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; gap: 4px; z-index: 5; pointer-events: none;
}
.ig-segment {
  flex: 1; height: 2.5px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px; overflow: hidden;
}
.ig-segment .ig-fill {
  display: block; width: 0%; height: 100%;
  background: #fff; transition: width 0.06s linear;
}
.ig-segment.done .ig-fill { width: 100% !important; transition: none; }
.ig-tap-l, .ig-tap-r {
  position: absolute; top: 0; bottom: 0;
  width: 35%; z-index: 4; cursor: pointer; background: transparent;
}
.ig-tap-l { left: 0; }
.ig-tap-r { right: 0; }
.ig-close {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  width: 52px; height: 52px;
  border: 2px solid rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.65);
  color: #fff; border-radius: 50%;
  font-size: 28px; font-weight: 300; line-height: 1;
  font-family: -apple-system, system-ui, sans-serif;
  cursor: pointer; z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s, background 0.2s;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  -webkit-tap-highlight-color: transparent;
}
.ig-close:hover, .ig-close:active {
  background: #fff; color: #000;
  transform: scale(1.08); border-color: #fff;
}
.ig-close::after {
  content: 'Закрити';
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); margin-top: 6px;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.85); font-weight: 600;
  background: rgba(0,0,0,0.6); padding: 4px 10px; border-radius: 50px;
  white-space: nowrap;
  animation: igCloseHint 4s ease forwards;
  pointer-events: none;
}
@keyframes igCloseHint {
  0%,70% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100%   { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}
.ig-nav-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5); color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 22px; font-family: inherit;
  cursor: pointer;
  display: none; align-items: center; justify-content: center;
  z-index: 10000; transition: background 0.2s;
}
.ig-nav-arrow:hover { background: rgba(0,0,0,0.8); }
.ig-nav-arrow.prev { left: calc(50% - min(210px, 46vw) - 60px); }
.ig-nav-arrow.next { right: calc(50% - min(210px, 46vw) - 60px); }
@media (min-width: 700px) { .ig-nav-arrow { display: flex; } }
.ig-counter {
  position: absolute; bottom: 18px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 11px; letter-spacing: 1.5px;
  z-index: 10000;
  background: rgba(0,0,0,0.4);
  padding: 6px 14px; border-radius: 50px;
}

/* ===== FINAL DUAL CTA ===== */
.final-cta {
  background: linear-gradient(180deg, #0e0e0e 0%, #14110d 100%);
  color: #fff;
  padding: 100px 60px 110px;
  border-top: 1px solid rgba(212,165,116,0.12);
  position: relative;
}
.final-cta::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, #d4a574, transparent);
}
.final-head { text-align: center; margin-bottom: 44px; max-width: 640px; margin-left: auto; margin-right: auto; }
.final-eyebrow {
  color: #d4a574; font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  font-weight: 600; margin-bottom: 14px;
}
.final-h2 {
  font-weight: 600; line-height: 1.2;
  letter-spacing: -0.01em; margin-bottom: 12px;
  font-size: 36px;
}
.final-h2 strong { color: #d4a574; font-weight: 700; }
.final-sub { color: #999; font-size: 15px; line-height: 1.5; }
.final-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px; max-width: 920px; margin: 0 auto;
  position: relative;
}
.final-or {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: #14110d; border: 1px solid rgba(212,165,116,0.3);
  display: flex; align-items: center; justify-content: center;
  color: #d4a574; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  z-index: 2;
}

/* ===== EDITORIAL SPREAD — magazine-style dual gift block ===== */
.spread {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  max-width: 1100px; margin: 0 auto;
  background: linear-gradient(180deg, #15110d 0%, #1a1410 100%);
  border: 1px solid rgba(212,165,116,0.15);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}
.spread-page {
  padding: 56px 48px 48px;
  display: flex; flex-direction: column;
  position: relative;
}
.spread-page::before {
  /* подложка-тиснение страницы */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(212,165,116,0.06), transparent 60%);
  pointer-events: none;
}
.spread-page > * { position: relative; z-index: 1; }
.spread-num {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 84px; line-height: 1; font-weight: 500;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212,165,116,0.55);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.spread-eyebrow {
  color: #d4a574; font-size: 10px;
  letter-spacing: 3px; text-transform: uppercase;
  font-weight: 700; margin-bottom: 8px;
}
.spread-title {
  font-family: 'Manrope', -apple-system, sans-serif;
  font-size: 24px; font-weight: 600; color: #fff;
  line-height: 1.25; letter-spacing: -0.01em;
  margin-bottom: 22px;
  text-wrap: balance;
}
.spread-img {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 22px;
  background: linear-gradient(135deg, #1f1812, #14100c);
  border: 1px solid rgba(212,165,116,0.12);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.spread-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spread-img-placeholder {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  color: #6a553a; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  text-align: center; padding: 12px;
}
.spread-img-placeholder small {
  margin-top: 8px; font-size: 10px; opacity: 0.7; letter-spacing: 1px; text-transform: none;
}
.spread-img.placeholder .spread-img-placeholder { display: flex; }

/* === LOOKBOOK COLLAGE: editorial preview каталога === */
.lookbook-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 8px;
  aspect-ratio: 4/3.6;
  margin-bottom: 22px;
  padding: 10px;
  background: linear-gradient(135deg, #1f1812, #14100c);
  border: 1px solid rgba(212,165,116,0.18);
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  overflow: hidden;
}
.lookbook-collage .lb-main,
.lookbook-collage .lb-side > * {
  overflow: hidden;
  border-radius: 4px;
  background: #0a0a0a;
  position: relative;
}
.lookbook-collage img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.6s ease;
}
.lookbook-collage:hover img { transform: scale(1.04); }
.lookbook-collage .lb-side {
  display: grid; grid-template-rows: 1fr 1fr; gap: 8px;
}
.lookbook-collage .lb-caption {
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase;
  color: #d4a574;
  background: rgba(20,16,12,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 8px 18px;
  border: 1px solid rgba(212,165,116,0.3);
  border-radius: 999px;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}
.spread-desc {
  color: #aaa; font-size: 14px; line-height: 1.6;
  margin-bottom: 18px; flex-grow: 1;
}
.spread-tags {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.spread-tags li {
  border: 1px solid rgba(212,165,116,0.22);
  color: #d4a574; font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px; letter-spacing: 0.3px;
}
.spread-gift {
  display: inline-flex; align-items: center; gap: 10px;
  color: #d4a574; font-size: 13px; font-weight: 500;
  letter-spacing: 0.2px;
  margin-bottom: 0;
}
.spread-gift-ico {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(212,165,116,0.35); border-radius: 6px;
  color: #d4a574; flex-shrink: 0;
}
.spread-gift-ico svg { width: 16px; height: 16px; }
.spread-price {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  margin: 8px auto 0;
  padding: 18px 24px;
  border-top: 1px solid rgba(212,165,116,0.15);
  border-bottom: 1px solid rgba(212,165,116,0.15);
  text-align: center;
}
.spread-price .sp-label {
  color: #8a7250; font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
}
.spread-price .sp-row {
  display: flex; align-items: baseline; justify-content: center;
  gap: 12px;
}
.spread-price .sp-old { color: #666; text-decoration: line-through; font-size: 18px; }
.spread-price .sp-arr { color: #d4a574; font-weight: 700; font-size: 16px; }
.spread-price .sp-save {
  color: #d4a574; font-size: 11px; font-weight: 600;
  letter-spacing: 0.5px; opacity: 0.85;
}
.spread-price .sp-new {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #f1c894; font-size: 30px; font-weight: 600;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #f1c894, #d4a574);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.spread-cta {
  background: transparent; color: #d4a574;
  border: 1px solid rgba(212,165,116,0.55);
  padding: 14px 22px; border-radius: 6px;
  font-family: inherit; font-weight: 700; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; transition: all 0.25s;
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%;
}
.spread-cta:hover {
  background: #d4a574; color: #1a1410; border-color: #d4a574;
}
.spread-cta .spread-arrow { transition: transform 0.25s; }
.spread-cta:hover .spread-arrow { transform: translateX(4px); }
.spread-hint { color: #666; font-size: 11px; margin-top: 12px; text-align: center; letter-spacing: 0.3px; }

/* корешок журнала с перфорацией и монограммой "або" */
.spread-spine {
  position: relative; width: 1px;
  background: repeating-linear-gradient(180deg,
    rgba(212,165,116,0.35) 0,
    rgba(212,165,116,0.35) 4px,
    transparent 4px,
    transparent 10px);
}
.spread-spine .spine-mark {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: #14110d;
  border: 1px solid rgba(212,165,116,0.4);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
}
.spread-spine .spine-mark span {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 32px; font-weight: 400; line-height: 1;
  color: #d4a574;
  margin-top: -2px;
}

/* === BUNDLE — единый CTA «Хочу все» === */
.spread-bundle {
  max-width: 760px; margin: 36px auto 0;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
}
.bundle-line {
  color: #c9a574; font-size: 12px; letter-spacing: 2.5px;
  text-transform: uppercase; font-weight: 600;
  opacity: 0.85;
}
.bundle-cta {
  background: linear-gradient(180deg, #e6b884 0%, #d4a574 100%);
  color: #14100c;
  border: none;
  padding: 22px 56px; border-radius: 8px;
  font-family: inherit; font-weight: 700; font-size: 13px;
  letter-spacing: 3px; text-transform: uppercase;
  cursor: pointer; transition: all 0.25s;
  display: inline-flex; align-items: center; gap: 14px;
  box-shadow: 0 18px 44px rgba(212,165,116,0.32), 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
}
.bundle-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 52px rgba(212,165,116,0.4), 0 6px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
}
.bundle-cta .spread-arrow { transition: transform 0.25s; font-size: 16px; }
.bundle-cta:hover .spread-arrow { transform: translateX(5px); }

/* === SHIMMER: премиум-блик по бронзовым CTA === */
.btn, .cta, .cta-stylist, .bundle-cta, .qz-submit, .cat-submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn > *, .cta > *, .cta-stylist > *, .bundle-cta > *, .qz-submit > *, .cat-submit > * {
  position: relative; z-index: 2;
}
.btn::after, .cta::after, .cta-stylist::after, .bundle-cta::after, .qz-submit::after, .cat-submit::after {
  content: '';
  position: absolute;
  top: 0; left: -160%;
  width: 110%; height: 100%;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255,255,255,0.0) 30%,
    rgba(255,255,255,0.7) 50%,
    rgba(255,255,255,0.0) 70%,
    transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: btnShine 6.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  z-index: 1;
}
@keyframes btnShine {
  0%   { left: -160%; }
  22%  { left: 220%; }
  100% { left: 220%; }
}
.btn:hover::after, .cta:hover::after, .cta-stylist:hover::after,
.bundle-cta:hover::after, .qz-submit:hover::after, .cat-submit:hover::after {
  animation-duration: 2.4s;
}
@media (prefers-reduced-motion: reduce) {
  .btn::after, .cta::after, .cta-stylist::after, .bundle-cta::after, .qz-submit::after, .cat-submit::after { display: none; }
}

/* === GLOW: бронзовая «лампа» + ambient halo на главных CTA === */
.bundle-cta, .cert-island .cta-stylist {
  box-shadow:
    0 0 0 1px rgba(212,165,116,0.28),
    0 18px 44px rgba(212,165,116,0.32),
    0 0 60px -10px rgba(212,165,116,0.45),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
  transition: box-shadow 0.35s ease, transform 0.25s ease;
}
.bundle-cta::before, .cert-island .cta-stylist::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 90px at 0% 100%,
    #fff2dc 0%,
    #f1c894 22%,
    rgba(212,165,116,0.45) 52%,
    transparent 75%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  animation: glowBreathe 3.2s ease-in-out infinite;
}
@keyframes glowBreathe {
  0%, 100% { opacity: 0.5;  transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.05); }
}
.bundle-cta:hover, .cert-island .cta-stylist:hover {
  box-shadow:
    0 0 0 1px rgba(212,165,116,0.55),
    0 24px 56px rgba(212,165,116,0.5),
    0 0 80px -6px rgba(212,165,116,0.6),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
.bundle-cta:hover::before, .cert-island .cta-stylist:hover::before {
  opacity: 1;
  animation-duration: 1.6s;
}
@media (prefers-reduced-motion: reduce) {
  .bundle-cta::before, .cert-island .cta-stylist::before { animation: none; opacity: 0.6; }
}
.bundle-hint {
  color: #8a7250; font-size: 12px; letter-spacing: 0.5px;
  font-style: italic;
}

/* === MOBILE: stack spread vertically === */
@media (max-width: 880px) {
  .spread {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    max-width: 520px;
    border-radius: 14px;
  }
  .spread-page { padding: 36px 28px 32px; }
  .spread-num { font-size: 64px; margin-bottom: 8px; }
  .spread-title { font-size: 26px; margin-bottom: 16px; }
  .spread-img { margin-bottom: 16px; }
  .spread-desc { font-size: 13px; margin-bottom: 14px; }
  .spread-tags { margin-bottom: 0; }
  .spread-price { margin-bottom: 0; }

  .spread-spine {
    width: auto; height: 1px;
    background: repeating-linear-gradient(90deg,
      rgba(212,165,116,0.35) 0,
      rgba(212,165,116,0.35) 4px,
      transparent 4px,
      transparent 10px);
    margin: 0 28px;
  }
  .spread-spine .spine-mark { width: 48px; height: 48px; }
  .spread-spine .spine-mark span { font-size: 28px; }

  .spread-bundle { margin-top: 28px; padding: 0 16px; }
  .bundle-line { font-size: 10px; letter-spacing: 1.5px; }
  .bundle-cta { padding: 18px 32px; font-size: 12px; letter-spacing: 2px; width: 100%; justify-content: center; }
}
.fc-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 36px 32px;
  display: flex; flex-direction: column;
  transition: all 0.25s;
  position: relative; overflow: hidden;
}
.fc-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #d4a574, transparent);
  opacity: 0; transition: opacity 0.25s;
}
.fc-card:hover {
  background: rgba(212,165,116,0.05);
  border-color: rgba(212,165,116,0.3);
  transform: translateY(-3px);
}
.fc-card:hover::before { opacity: 1; }
.fc-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(212,165,116,0.12);
  border: 1px solid rgba(212,165,116,0.25);
  display: flex; align-items: center; justify-content: center;
  color: #d4a574; font-size: 22px;
  margin-bottom: 18px;
}
.fc-eyebrow {
  color: #d4a574; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700; margin-bottom: 8px;
}
.fc-title {
  font-size: 22px; font-weight: 700;
  line-height: 1.25; letter-spacing: -0.01em;
  margin-bottom: 10px; color: #fff;
}
.fc-desc {
  color: #aaa; font-size: 13px; line-height: 1.55;
  margin-bottom: 18px; flex-grow: 1;
}
.fc-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.fc-tag {
  background: rgba(212,165,116,0.10);
  border: 1px solid rgba(212,165,116,0.22);
  color: #d4a574; font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: 4px; letter-spacing: 0.3px;
}
.fc-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.fc-price-old { color: #666; text-decoration: line-through; font-size: 14px; }
.fc-price-new { color: #d4a574; font-size: 22px; font-weight: 700; }
.fc-price-note { color: #777; font-size: 11px; }
.fc-btn {
  background: #d4a574; color: #1a1a1a;
  border: none; padding: 16px 20px;
  border-radius: 8px; font-family: inherit;
  font-weight: 700; font-size: 12px;
  letter-spacing: 1.3px; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s; width: 100%;
}
.fc-btn:hover { background: #e0b687; }
.fc-btn.ghost {
  background: transparent; color: #d4a574;
  border: 1px solid #d4a574;
}
.fc-btn.ghost:hover { background: rgba(212,165,116,0.1); }
.fc-hint { text-align: center; color: #666; font-size: 11px; margin-top: 10px; letter-spacing: 0.3px; }

/* ===== FIND US ===== */
.findus {
  background: #0a0a0a; color: #fff;
  padding: 100px 60px 110px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.findus-head { text-align: center; margin-bottom: 36px; }
.findus-eyebrow {
  color: #d4a574; font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  font-weight: 600; margin-bottom: 14px;
}
.findus-h2 {
  font-weight: 600; line-height: 1.2;
  letter-spacing: -0.01em; margin-bottom: 10px;
  font-size: 36px;
}
.findus-h2 strong { color: #d4a574; font-weight: 700; }
.findus-sub { color: #999; font-size: 14px; }
.findus-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 18px; max-width: 1080px; margin: 0 auto;
}
.findus-map {
  border-radius: 14px; overflow: hidden;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.08);
  aspect-ratio: 4/3; position: relative;
}
.findus-map iframe { width: 100%; height: 100%; border: 0; filter: invert(0.92) hue-rotate(180deg) saturate(0.6); }
.findus-side { display: flex; flex-direction: column; gap: 14px; }
.findus-card {
  background: rgba(212,165,116,0.05);
  border: 1px solid rgba(212,165,116,0.18);
  border-radius: 14px; padding: 24px;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
}
.fu-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.07);
}
.fu-row:last-child { border-bottom: none; }
.fu-row .ico {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(212,165,116,0.12);
  color: #d4a574;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 14px;
}
.fu-row .txt { flex: 1; line-height: 1.4; }
.fu-row .fu-label { color: #777; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.fu-row .fu-val { color: #fff; font-size: 14px; font-weight: 500; }
.fu-row .fu-val a { color: #d4a574; text-decoration: none; }
.fu-row .fu-val a:hover { text-decoration: underline; }
.fu-actions { display: flex; gap: 10px; margin-top: 14px; }
.fu-btn {
  flex: 1; padding: 14px;
  background: #d4a574; color: #1a1a1a;
  border: none; border-radius: 8px;
  font-family: inherit;
  font-weight: 700; font-size: 11px;
  letter-spacing: 1.3px; text-transform: uppercase;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: all 0.2s;
}
.fu-btn:hover { background: #e0b687; }
.fu-btn.ghost {
  background: transparent; color: #d4a574;
  border: 1px solid rgba(212,165,116,0.4);
}
.fu-btn.ghost:hover { background: rgba(212,165,116,0.08); }
.findus-video {
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, #2a2520 0%, #1a1612 100%);
  aspect-ratio: 16/9; position: relative;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer; transition: all 0.25s;
}
.findus-video:hover { border-color: rgba(212,165,116,0.4); }
.findus-video::before {
  content: '▶'; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(212,165,116,0.95); color: #1a1a1a;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; padding-left: 4px;
  box-shadow: 0 8px 24px rgba(212,165,116,0.3);
  transition: transform 0.2s;
}
.findus-video:hover::before { transform: translate(-50%, -50%) scale(1.1); }
.findus-video::after {
  content: '◌ відео-огляд шоу-руму · 0:30';
  position: absolute; bottom: 12px; left: 14px;
  color: rgba(255,255,255,0.55); font-size: 11px; letter-spacing: 0.5px;
}

/* ===== FOOTER — редакционный, тонкий ===== */
.footer {
  background: #050505;
  border-top: 1px solid rgba(212,165,116,0.08);
  padding: 36px 48px 32px;
  color: #6a6a6a; font-size: 12px;
}
.footer-row {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 32px;
}
.footer-brand { text-align: left; display: flex; flex-direction: column; gap: 4px; }
.footer-logo {
  color: #d4a574; font-weight: 700; font-size: 16px;
  letter-spacing: 4px;
}
.footer-tag { color: #555; font-size: 11px; letter-spacing: 0.8px; }

.footer-contacts {
  text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.footer-contacts a {
  color: #999; text-decoration: none;
  border-bottom: 1px solid rgba(212,165,116,0.15);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.footer-contacts a:hover { color: #d4a574; border-color: rgba(212,165,116,0.55); }
.footer-dot { color: #333; }

.footer-legal {
  text-align: right;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
  font-size: 11px; line-height: 1.5;
}
.footer-legal a {
  color: #777; text-decoration: none;
  border-bottom: 1px solid rgba(212,165,116,0.15);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.footer-legal a:hover { color: #d4a574; border-color: rgba(212,165,116,0.55); }

@media (max-width: 880px) {
  .footer { padding: 28px 24px; }
  .footer-row {
    grid-template-columns: 1fr;
    text-align: center; gap: 18px;
  }
  .footer-brand, .footer-legal { align-items: center; text-align: center; }
}

/* ===== MOBILE STICKY CTA ===== */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.92) 35%, rgba(10,10,10,0.98) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateY(120%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  display: none;
}
.sticky-cta.visible {
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-cta-btn {
  width: 100%;
  background: linear-gradient(180deg, #e6b884 0%, #d4a574 100%);
  color: #14100c; border: none;
  padding: 17px 22px; border-radius: 10px;
  font-family: inherit; font-weight: 700; font-size: 13px;
  letter-spacing: 2.5px; text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  box-shadow: 0 12px 32px rgba(212,165,116,0.35), 0 4px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
  position: relative; overflow: hidden; isolation: isolate;
}
.sticky-cta-btn b { font-weight: 800; color: #14100c; letter-spacing: 1.5px; }
.sticky-cta-btn .sticky-cta-arr { font-size: 16px; transition: transform 0.2s; }
.sticky-cta-btn:active { transform: scale(0.98); }
/* shimmer на sticky тоже */
.sticky-cta-btn::after {
  content: ''; position: absolute; top: 0; left: -160%;
  width: 110%; height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 70%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: btnShine 6.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  z-index: 1;
}
.sticky-cta-btn > * { position: relative; z-index: 2; }

@media (max-width: 767px) {
  .sticky-cta { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta-btn::after { display: none; }
}

/* ===== QUIZ POP-UP ===== */
.quiz-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(12px);
  z-index: 9999; display: none;
  align-items: center; justify-content: center;
  padding: 16px;
}
.quiz-overlay.open { display: flex; }
.quiz-modal {
  background: #0e0e0e; color: #fff;
  border-radius: 20px;
  width: 100%; max-width: 780px;
  min-height: 560px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 0 1px rgba(212,165,116,0.15);
}
.qz-progress { height: 3px; background: rgba(255,255,255,0.08); position: relative; flex-shrink: 0; }
.qz-progress-fill {
  height: 100%; background: linear-gradient(90deg, #d4a574, #f0c98a);
  transition: width 0.5s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 12px rgba(212,165,116,0.6);
}
.qz-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 28px 0; flex-shrink: 0;
}
.qz-brand { font-size: 13px; font-weight: 700; letter-spacing: 3px; color: #d4a574; text-transform: uppercase; }
.qz-close {
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.08);
  border: none; border-radius: 50%; cursor: pointer;
  color: #888; font-size: 18px; line-height: 1;
  transition: all 0.15s; flex-shrink: 0;
}
.qz-close:hover { background: rgba(255,255,255,0.15); color: #fff; }
.qz-steps-wrap { flex: 1; position: relative; overflow: hidden; }
.qz-step {
  position: absolute; inset: 0;
  padding: 28px 32px 16px;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transform: translateX(40px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.qz-step.active { opacity: 1; pointer-events: all; transform: translateX(0); }
.qz-step.leaving { opacity: 0; transform: translateX(-40px); }
.qz-num {
  font-size: 11px; font-weight: 700; letter-spacing: 3px;
  color: rgba(212,165,116,0.6); text-transform: uppercase;
  margin-bottom: 10px;
}
.qz-question {
  font-size: 26px; font-weight: 700; line-height: 1.2;
  margin-bottom: 24px; letter-spacing: -0.02em;
}
.qz-options { display: flex; flex-direction: column; gap: 10px; }
.qz-opt {
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.08);
  padding: 16px 20px;
  border-radius: 12px;
  cursor: pointer; transition: all 0.18s;
  display: flex; align-items: center; gap: 14px;
  font-size: 16px; font-weight: 500; color: #ddd;
  text-align: left; font-family: inherit;
}
.qz-opt:hover { background: rgba(212,165,116,0.08); border-color: rgba(212,165,116,0.4); color: #fff; }
.qz-opt.selected { background: rgba(212,165,116,0.12); border-color: #d4a574; color: #fff; }
.qz-opt.selected .qz-dot { background: #d4a574; box-shadow: 0 0 0 3px rgba(212,165,116,0.25); }
.qz-opt.auto-advance { animation: pulse-select 0.3s ease; }
@keyframes pulse-select {
  0% { transform: scale(1); }
  50% { transform: scale(1.015); }
  100% { transform: scale(1); }
}
.qz-dot {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  flex-shrink: 0; transition: all 0.18s;
  display: flex; align-items: center; justify-content: center;
}
.qz-dot-check { display: none; }
.qz-opt.selected .qz-dot-check {
  display: block; width: 8px; height: 8px;
  background: #fff; border-radius: 50%;
}
.qz-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.qz-card {
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 12px; overflow: hidden;
  cursor: pointer; transition: all 0.18s;
  position: relative;
}
.qz-card:hover { border-color: rgba(212,165,116,0.5); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.qz-card.selected { border-color: #d4a574; background: rgba(212,165,116,0.08); box-shadow: 0 0 0 1px #d4a574, 0 8px 24px rgba(212,165,116,0.15); }
.qz-card.selected::after {
  content: '✓'; position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px;
  background: #d4a574; color: #1a1a1a;
  border-radius: 50%; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.qz-card-img { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; font-size: 36px; }
.cs1 .qz-card-img { background: linear-gradient(135deg, #2a2420, #4a3c2e); }
.cs2 .qz-card-img { background: linear-gradient(135deg, #1e2028, #2e3248); }
.cs3 .qz-card-img { background: linear-gradient(135deg, #2e1e26, #4e2e3e); }
.cs4 .qz-card-img { background: linear-gradient(135deg, #1e1e1e, #282828); }
.cs5 .qz-card-img { background: linear-gradient(135deg, #1e2a1e, #2e4432); }
.cs6 .qz-card-img { background: linear-gradient(135deg, #2a1e2a, #3e2842); }
.qz-card-label { padding: 10px 8px 12px; text-align: center; font-size: 12px; font-weight: 600; color: #ccc; background: rgba(0,0,0,0.3); }
.qz-card.selected .qz-card-label { color: #d4a574; }
.qz-palettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.qz-palette {
  cursor: pointer; padding: 6px;
  border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  transition: all 0.18s; position: relative;
}
.qz-palette:hover { border-color: rgba(212,165,116,0.4); transform: translateY(-2px); }
.qz-palette.selected { border-color: #d4a574; background: rgba(212,165,116,0.08); box-shadow: 0 0 0 1px #d4a574; }
.qz-palette.selected::after {
  content: '✓'; position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px;
  background: #d4a574; color: #1a1a1a;
  border-radius: 50%; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.qz-pal-grid { display: grid; grid-template-columns: 1fr 1fr; border-radius: 8px; overflow: hidden; aspect-ratio: 1; }
.qz-pal-name { text-align: center; font-size: 11px; font-weight: 500; color: #888; margin-top: 6px; padding-bottom: 2px; }
.qz-palette.selected .qz-pal-name { color: #d4a574; }
.qz-skip {
  background: rgba(255,255,255,0.04);
  border: 1.5px dashed rgba(255,255,255,0.15);
  color: #666; padding: 12px 18px;
  border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 13px;
  width: 100%; transition: all 0.18s; margin-top: 4px;
}
.qz-skip:hover { background: rgba(255,255,255,0.07); color: #999; }
.qz-skip.selected { background: rgba(212,165,116,0.08); border-color: #d4a574; border-style: solid; color: #d4a574; }
.qz-multi-note { font-size: 11px; color: #555; margin-top: 10px; font-style: italic; }
.qz-input {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 18px 20px;
  font-family: inherit; font-size: 18px;
  color: #fff; width: 100%; max-width: 380px;
  transition: border-color 0.2s;
}
.qz-input:focus { outline: none; border-color: #d4a574; }
.qz-input::placeholder { color: rgba(255,255,255,0.25); }
.qz-capture-title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.qz-cert-box {
  background: rgba(212,165,116,0.07);
  border: 1px solid rgba(212,165,116,0.2);
  border-radius: 16px; padding: 22px 24px;
  margin-bottom: 18px;
}
.qz-cert-price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.qz-price-free { font-size: 42px; font-weight: 800; color: #d4a574; line-height: 1; letter-spacing: -1px; }
.qz-price-old { font-size: 16px; color: #e63946; text-decoration: line-through; font-weight: 500; }
.qz-cert-info { font-size: 14px; color: #888; margin-bottom: 14px; line-height: 1.5; }
.qz-warn {
  background: rgba(230,57,70,0.08);
  border: 1px solid rgba(230,57,70,0.2);
  border-radius: 8px; padding: 10px 14px;
  font-size: 12px; color: #e07070; line-height: 1.5;
}
.qz-phone-wrap { margin-bottom: 14px; }
.qz-submit {
  width: 100%; background: #d4a574; color: #1a1a1a;
  border: none; padding: 18px; border-radius: 12px;
  font-family: inherit; font-weight: 800;
  font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 8px 24px rgba(212,165,116,0.3);
}
.qz-submit:hover { background: #e0b687; transform: translateY(-1px); }
.qz-submit:active { transform: translateY(0); }
.qz-thanks {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; height: 100%;
  padding: 40px 32px; gap: 16px;
}
.qz-thanks-icon { font-size: 64px; animation: pop-in 0.5s cubic-bezier(.2,1.4,.5,1); }
@keyframes pop-in {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.qz-thanks h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.qz-promo-wrap { position: relative; margin: 8px 0; }
.qz-promo-badge {
  background: linear-gradient(135deg, #1e1810, #2e2418);
  border: 1.5px dashed #d4a574;
  border-radius: 12px; padding: 16px 28px;
  font-size: 24px; font-weight: 800; letter-spacing: 4px;
  color: #d4a574; display: inline-block;
  animation: glow-pulse 2s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 16px rgba(212,165,116,0.2); }
  50% { box-shadow: 0 0 32px rgba(212,165,116,0.5); }
}
.qz-thanks-sub { color: #888; font-size: 14px; line-height: 1.6; }
.qz-thanks-sub b { color: #d4a574; }
.qz-nav {
  padding: 14px 28px 20px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.qz-counter { font-size: 12px; color: #555; font-weight: 500; letter-spacing: 1px; }
.qz-counter b { color: #888; }
.qz-nav-btns { display: flex; gap: 8px; }
.qz-back {
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
  color: #888; border-radius: 10px;
  font-size: 16px; cursor: pointer; transition: all 0.15s;
  font-family: inherit;
}
.qz-back:hover { background: rgba(255,255,255,0.1); color: #fff; }
.qz-next {
  height: 44px; padding: 0 22px;
  background: #d4a574; color: #1a1a1a;
  border: none; border-radius: 10px;
  font-family: inherit; font-weight: 700;
  font-size: 14px; cursor: pointer; transition: all 0.18s;
}
.qz-next:hover { background: #e0b687; }
.qz-next:disabled { background: rgba(255,255,255,0.08); color: #444; cursor: not-allowed; }

/* ============================================== */
/* ===== TABLET / MOBILE: max-width 768px ====== */
/* ============================================== */
@media (max-width: 767px) {
  /* HERO mobile: только размеры шрифтов офера. Layout уже сверху файла. */
  .h1 { font-size: 26px; }
  .offer-line { gap: 10px; }
  .offer-num { font-size: 48px; }
  .offer-sign, .offer-percent { font-size: 30px; }
  .offer-word { font-size: 38px; letter-spacing: -0.02em; }
  .offer-gift-text { font-size: 14px; }
  .offer-gift-box { width: 44px; height: 44px; }
  .logo { font-size: 16px; }
  .menu { font-size: 11px; }

  /* GALLERY */
  .gallery { padding: 25px 16px 50px; }
  .h2 { font-size: 24px; }
  .subhead-gal { font-size: 13px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cta { width: 100%; padding: 16px; font-size: 12px; }

  /* STYLIST */
  .stylist-block { padding: 50px 18px 56px; }
  .stylist-h2 { font-size: 22px; }
  .cta-stylist { width: 100%; padding: 16px; font-size: 12px; }
  .stylist-perks { gap: 12px 18px; margin-top: 24px; }
  .stylist-perk { font-size: 11px; }
  .cert-img { max-width: 320px; margin-bottom: 22px; }
  .cert-meta { font-size: 12px; gap: 6px; margin-bottom: 22px; }
  .cert-meta-old { font-size: 13px; }
  .cert-meta-new { font-size: 18px; }
  .cert-meta-desc { font-size: 11px; width: 100%; margin-left: 0; margin-top: 2px; }

  /* REVIEWS */
  .reviews { padding: 50px 0 56px; }
  .reviews-h2 { font-size: 22px; }
  .stories-rail { gap: 10px; padding: 4px 18px 14px; }
  .story-card { width: 130px; border-radius: 12px; }
  .stories-arrow { display: none; }
  .stories-fade-l, .stories-fade-r { width: 40px; }

  /* FINAL CTA */
  .final-cta { padding: 56px 18px 60px; }
  .final-head { margin-bottom: 28px; }
  .final-h2 { font-size: 22px; }
  .final-sub { font-size: 13px; }
  .final-grid { grid-template-columns: 1fr; gap: 14px; }
  .final-or {
    position: relative; top: auto; left: auto; transform: none;
    margin: 4px auto;
  }
  .fc-card { padding: 24px 22px; border-radius: 14px; }
  .fc-title { font-size: 18px; }
  .fc-desc { font-size: 13px; }

  /* FIND US */
  .findus { padding: 56px 18px 60px; }
  .findus-h2 { font-size: 22px; }
  .findus-grid { grid-template-columns: 1fr; gap: 12px; }
  .findus-card { padding: 18px; }
  .fu-actions { flex-direction: column; }
  .findus-map { aspect-ratio: 1/1; }

  /* QUIZ */
  .quiz-overlay { padding: 0; align-items: flex-end; }
  .quiz-modal { border-radius: 24px 24px 0 0; max-width: 100%; min-height: 88vh; }
  .qz-step { padding: 22px 20px 12px; }
  .qz-question { font-size: 21px; }
  .qz-cards { grid-template-columns: repeat(2, 1fr); }
  .qz-palettes { grid-template-columns: repeat(2, 1fr); }
}

/* ===== TABLET 769–1023 — gallery only (hero — единый блок сверху) ===== */
@media (min-width: 769px) and (max-width: 1023px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .gallery, .stylist-block, .final-cta, .findus { padding-left: 40px; padding-right: 40px; }
}

/* ============= CATALOG POPUP ============= */
.cat-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: none; z-index: 9998;
  align-items: center; justify-content: center;
  padding: 20px;
}
.cat-overlay.open { display: flex; animation: catFadeIn 0.2s ease; }
@keyframes catFadeIn { from { opacity: 0; } to { opacity: 1; } }
.cat-modal {
  position: relative;
  width: 100%; max-width: 460px;
  background: linear-gradient(180deg, #1a1612 0%, #0f0d0a 100%);
  border: 1px solid rgba(212,165,116,0.2);
  border-radius: 18px;
  padding: 44px 36px 36px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  animation: catSlideUp 0.3s ease;
}
@keyframes catSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.cat-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #ccc; border-radius: 50%;
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: all 0.2s;
}
.cat-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.cat-step { display: none; text-align: center; }
.cat-step.active { display: block; }
.cat-eyebrow { color: #d4a574; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 14px; }
.cat-title { font-size: 24px; font-weight: 600; line-height: 1.25; color: #fff; margin-bottom: 12px; letter-spacing: -0.01em; }
.cat-title strong { color: #d4a574; font-weight: 700; }
.cat-sub { color: #aaa; font-size: 14px; line-height: 1.5; margin-bottom: 24px; }
.cat-form { text-align: left; }
.cat-label { display: block; color: #ccc; font-size: 12px; margin-bottom: 8px; letter-spacing: 0.3px; }
.cat-input,
.phone-input {
  width: 100%; height: 52px;
  background: #fff; border: 1px solid #fff;
  border-radius: 10px;
  font-family: inherit; font-size: 15px; color: #1a1a1a;
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.cat-input:focus,
.phone-input:focus { border-color: #d4a574; box-shadow: 0 0 0 3px rgba(212,165,116,0.2); }

/* intl-tel-input — общая стилизация инпута и обёртки */
.iti { display: block; width: 100%; }
.iti--separate-dial-code .iti__selected-dial-code { color: #1a1a1a; font-weight: 600; }
.iti__country-container { background: #fff; border-radius: 10px 0 0 10px; }
.iti--separate-dial-code .iti__country-container { padding: 0 6px 0 12px; }
.iti input.phone-input { padding-left: 60px !important; padding-right: 14px !important; }
.iti.phone-error input,
.phone-error.phone-input,
.phone-error input.phone-input {
  border-color: #e63946 !important;
  box-shadow: 0 0 0 3px rgba(230,57,70,0.18) !important;
  animation: phoneShake 0.4s;
}
@keyframes phoneShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.cat-submit {
  width: 100%; margin-top: 16px;
  background: #d4a574; color: #1a1a1a;
  border: none; padding: 16px;
  border-radius: 10px; font-family: inherit;
  font-weight: 700; font-size: 13px; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer; transition: all 0.2s;
}
.cat-submit:hover { background: #e0b687; transform: translateY(-1px); }
.cat-consent { color: #777; font-size: 11px; line-height: 1.5; margin-top: 14px; text-align: center; }
.cat-consent a { color: #d4a574; }
.cat-thanks-icon {
  width: 64px; height: 64px; margin: 0 auto 20px;
  background: rgba(212,165,116,0.15);
  border: 2px solid #d4a574;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #d4a574; font-size: 32px; font-weight: 300;
}

/* intl-tel-input — тёмная тема под наш стиль */
.iti { width: 100%; }
.iti__country-list {
  background: #1a1612 !important;
  border: 1px solid rgba(212,165,116,0.25) !important;
  color: #eee !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6) !important;
  border-radius: 10px !important;
  max-height: 280px;
}
.iti__country { color: #eee !important; padding: 10px 14px !important; }
.iti__country:hover, .iti__country.iti__highlight { background: rgba(212,165,116,0.15) !important; }
.iti__dial-code { color: #999 !important; }
.iti__divider { border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
.iti__search-input { background: #0f0d0a !important; color: #fff !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; padding: 10px 14px !important; }
.iti--separate-dial-code .iti__selected-dial-code { color: #1a1a1a; }

/* Десктоп: dropdown отвязан от формы (dropdownContainer: body) — поднимаем z-index выше попапов */
.iti--container { z-index: 100000 !important; }

/* Мобила: fullscreen-popup занимает весь экран, чтобы не вылезал из формы */
.iti--fullscreen-popup.iti--container {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(10,8,6,0.92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100000 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px !important;
}
.iti--fullscreen-popup .iti__country-list {
  width: 100% !important;
  max-width: 100% !important;
  max-height: calc(100vh - 80px) !important;
  margin: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
.iti--fullscreen-popup .iti__search-input {
  width: 100% !important;
  font-size: 16px !important;
  padding: 14px 16px !important;
  border-radius: 10px 10px 0 0 !important;
}
.iti--fullscreen-popup .iti__country { padding: 14px 16px !important; font-size: 15px; }

/* === A11y: touch-target ≥44px на тач-устройствах (Apple HIG / Material) === */
@media (hover: none) and (pointer: coarse) {
  .menu,
  .footer-contacts a,
  .footer-legal a,
  .consent a,
  .iti__selected-country {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .footer-contacts { gap: 4px 14px; }
  .footer-legal { gap: 8px; }
}

@media (max-width: 480px) {
  .cat-modal { padding: 36px 22px 26px; border-radius: 14px; }
  .cat-title { font-size: 20px; }
  .cat-sub { font-size: 13px; }
  .cat-input { padding-left: 92px; }
}