/* AYUSOMA — Components (Ver.2)
   Emil design-eng principles:
   · Animate only transform + opacity (compositor-only)
   · Specific transition props, never "all"
   · IntersectionObserver-driven .visible class
   · rAF-throttled parallax
   · @media (prefers-reduced-motion) guard
   ─────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,700;1,400&family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;1,200;1,400&family=Cormorant+SC:wght@400;500&display=swap');
@import './tokens.css';

/* ── RESET ───────────────────────────────── */

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

html {
  scrollbar-width: none;
  scroll-behavior: smooth;
}
html::-webkit-scrollbar { display: none; }

body {
  background: var(--color-bg);
  color: var(--color-primary);
  font-family: var(--font-body);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a   { text-decoration: none; color: inherit; }
button { border: none; cursor: pointer; background: none; }

/* ── NAV ─────────────────────────────────── */

.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 32px 32px 90px;
  transition: background 0.4s ease, padding 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease;
}

.nav__left-group {
  display: flex;
  align-items: center;
  gap: 108px;
}

.nav__right-group {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav.scrolled {
  background: rgba(14, 11, 8, 0.35);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: 16px;
}

.nav__links {
  display: flex;
  gap: 28px;
  list-style: none;
}

.nav__links--right { justify-content: flex-end; }

/* nav__right-group defined near .nav above */

.nav__link {
  font-family: var(--font-body);
  font-size: var(--text-body-l);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s ease;
  cursor: pointer;
}

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

.nav__link--cta {
  color: var(--color-white);
  opacity: 0.9;
}

.nav__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-weight: 200;
  font-size: 28px;
  letter-spacing: 4px;
  color: var(--color-white);
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.nav.scrolled .nav__logo {
  opacity: 1;
  pointer-events: auto;
}

/* Burger — hidden on desktop */
.nav__burger {
  display: none;
}

/* Mobile dropdown — hidden on desktop, positioned below nav */
.nav__mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  background: rgba(10, 8, 6, 0.96);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 200;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.nav__mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
}


/* ── HERO ────────────────────────────────── */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__bg img {
  position: absolute;
  width: 100%;
  height: 214.93%;
  left: 0;
  top: -75.69%;
  will-change: transform;
}

/* Logo mark — top center, 304px from top */
.hero__logo-mark {
  position: absolute;
  left: 50%;
  top: 304px;
  transform: translateX(-50%);
  width: 127px;
  height: 130px;
  z-index: 2;
  object-fit: contain;
}

/* AYUSOMA — centered */
.hero__brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: var(--font-heading);
  font-weight: 200;
  font-size: 88px;
  line-height: 92.4px;
  letter-spacing: -1.08px;
  color: var(--color-white);
  white-space: nowrap;
}

/* Botanical Elixirs — left: 561.5px centered (29.24% of 1920) */
.hero__sub {
  position: absolute;
  left: 29.24%;
  top: 64.7%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: 3.5px;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}

/* Bottom row wrapper — fades on scroll */
.hero__footer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* "(I) Euphoria · (II) Vitae" — bottom left */
.hero__products-line {
  position: absolute;
  left: 39px;
  top: 1028px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 1.76px;
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
  pointer-events: auto;
}

/* Scroll indicator line — centered bottom edge */
.hero__scroll-line {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.4);
}

/* ── TICKER ──────────────────────────────── */

.ticker {
  overflow: hidden;
  padding: 14px 0;
}

.ticker--cream { background: var(--color-ticker-bg); }

.ticker--light {
  background: var(--color-bg);
  margin: -1px var(--pad-x) 0;     /* -1px top closes sub-pixel gap; 80px sides per Figma */
  border-top: var(--border-divider);
  border-bottom: var(--border-divider);
}

.ticker__track {
  display: flex;
  gap: 0;
  will-change: transform;
  animation: ticker-scroll 36s linear infinite;
  width: max-content;
}

.ticker__item {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  letter-spacing: 2.42px;
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
  padding: 0 24px;
  opacity: 0.65;
}

/* C/Ticker: olive-green text per Figma rgba(68,73,50,0.7) */
.ticker--light .ticker__item {
  color: rgba(68, 73, 50, 0.7);
  opacity: 1;
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── B/HERO ──────────────────────────────── */

/* ── B/HERO ──────────────────────────────── */

.section-bhero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.section-bhero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.section-bhero__bg img {
  position: absolute;
  width: 100%;
  height: 225.68%;
  top: -9.57%;
  object-fit: cover;
  object-position: center;
}

/* AYUSOMA heading */
.section-bhero__brand {
  position: absolute;
  z-index: 2;
  left: 34.688vw;      /* 666/1920 */
  top: calc(50% - 353px);
  width: 28.646vw;     /* 550/1920 */
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 3.333vw;  /* 64/1920 */
  line-height: 1.563vw;/* 30/1920 */
  letter-spacing: 2.2px;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
}

/* · БОТАНИЧЕСКИЕ — bullet list */
.section-bhero__sub-botanical {
  position: absolute;
  z-index: 2;
  left: 46.979vw;      /* 902/1920 */
  top: calc(50% - 252px);
  transform: translateX(-50%);
  list-style: disc;
  padding-left: 2.188vw; /* 42/1920 */
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.458vw;  /* 28/1920 */
  line-height: 1.667vw;/* 32/1920 */
  letter-spacing: 3.5px;
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase;
  text-align: center;
  width: 28.646vw;     /* 550/1920 */
}

/* ЭЛИКСИРЫ */
.section-bhero__sub-elixirs {
  position: absolute;
  z-index: 2;
  left: 50.599vw;      /* 971.5/1920 */
  top: calc(50% - 204px);
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.458vw;  /* 28/1920 */
  line-height: 1.667vw;/* 32/1920 */
  letter-spacing: 3.5px;
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase;
  text-align: center;
  width: 15.469vw;     /* 297/1920 */
}

/* Editorial text block */
.section-bhero__editorial {
  position: absolute;
  z-index: 2;
  left: 23.958vw;      /* 460/1920 */
  top: calc(50% - 143px);
  width: 28.802vw;     /* 553/1920 */
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.25vw;   /* 24/1920 */
  line-height: 1.667vw;/* 32/1920 */
  letter-spacing: 3.5px;
  color: rgba(255, 255, 255, 0.6);
  text-align: justify;
}

.section-bhero__editorial p + p {
  margin-top: 1.667vw; /* 32/1920 */
}

/* Stats row — left 56.3vw, top 631px */
.section-bhero__stats-row {
  position: absolute;
  z-index: 2;
  left: 56.302vw;      /* 1081/1920 */
  top: 631px;
  display: flex;
  align-items: center;
  gap: 1.719vw;        /* 33/1920 */
}

.section-bhero__stat-divider {
  width: 11.979vw;     /* 230/1920 */
  height: 2px;
  background: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.section-bhero__stat-item {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.833vw;  /* 16/1920 */
  line-height: 1.042vw;/* 20/1920 */
  letter-spacing: 1.76px;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  white-space: nowrap;
}

/* fade-up composited transforms */
.section-bhero__brand.fade-up         { transform: translateY(20px); }
.section-bhero__brand.fade-up.visible { transform: translateY(0); }

.section-bhero__sub-botanical.fade-up         { transform: translateX(-50%) translateY(20px); }
.section-bhero__sub-botanical.fade-up.visible { transform: translateX(-50%) translateY(0); }

.section-bhero__sub-elixirs.fade-up         { transform: translateX(-50%) translateY(20px); }
.section-bhero__sub-elixirs.fade-up.visible { transform: translateX(-50%) translateY(0); }

/* ── PILLARS ─────────────────────────────── */
/* All dimensions in vw (÷1920×100) or % of column — scales to any viewport */

.section-pillars {
  margin-top: -1px;
  border-top: 1px solid rgba(239, 230, 211, 0.55);
  padding: 2.135vw 0 2.083vw; /* 41px top, 0 horizontal, 40px bottom */
  background: var(--color-bg);
  overflow: hidden;
}

.pillars__container {
  position: relative;
  display: flex;
  gap: 2.083vw; /* 40px @ 1920px */
  align-items: flex-start;
}

/* ── Left column ── */
.pillars__col--left {
  position: relative;
  flex: 1;
  height: 58.177vw;   /* 1117/1920 */
  overflow: hidden;
}

.pillars__bg--left {
  position: absolute;
  inset: 0;
  overflow: hidden;
  filter: blur(2px);
}

.pillars__bg--left img {
  position: absolute;
  width: 180.51%;
  height: 181.39%;
  left: -11.06%;
  top: -13.35%;
  max-width: none;
  object-fit: fill;
}

.pillars__overlay--left {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 52.04vw; /* 999.14/1920 — bleeds into right col, clipped by overflow:hidden */
  z-index: 1;
  background: linear-gradient(to right,
    transparent 0%,
    transparent 60%,
    rgba(252, 250, 245, 0.55) 85%,
    rgba(252, 250, 245, 0.95) 100%
  );
}

.pillars__heading {
  position: absolute;
  z-index: 2;
  left: 2.87%;        /* 27px / 940px — calc(50%-443px) at col-width 940 */
  top: 51.75%;        /* 578/1117 */
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 3.333vw; /* 64/1920 */
  line-height: normal;
  letter-spacing: 0.104vw; /* 2/1920 */
  color: #59831b;
  width: 60.96%; /* 573/940 */
}

/* ── Right column ── */
.pillars__col--right {
  position: relative;
  flex: 1;
  height: 58.177vw;   /* 1117/1920 */
  overflow: hidden;
}

.pillars__bg--right {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -45px;
  overflow: hidden;
  filter: blur(2px);
  opacity: 0.95;
}

.pillars__bg--right img {
  position: absolute;
  width: 104.03%;
  height: 107.14%;
  left: -2.36%;
  top: -8.75%;
  max-width: none;
  object-fit: fill;
}

.pillars__overlay--right {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ── Text items ── */
.pillars__item {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.625vw; /* 12/1920 */
}

/* Группа 1: 526/940=55.96%, 75/1117=6.71%, width 355/940=37.77% */
.pillars__item--1 { left: 55.96%; top: 6.71%; width: 37.77%; }

/* Группа 2 */
.pillars__label-2 {
  position: absolute; z-index: 2;
  left: 58.62%; /* 551px / 940px right edge 871px, translateX(-100%) */
  top: 67.858%;  /* 758/1117 */
  width: 34.04%; /* 320/940 */
  text-align: right;
}
.pillars__body-2 {
  position: absolute; z-index: 2;
  left: 38.51%; /* 362/940 */
  top: 76.45%;  /* 854/1117 */
  width: 55.85%; /* 525/940 */
}

/* Группа 3 */
.pillars__label-3 {
  position: absolute; z-index: 2;
  left: 27.55%;   /* 259/940 — translateX(-100%) → visually right edge at 259px */
  top: 6.71%;     /* 75/1117 */
  transform: translateX(-100%);
  width: 22.55%; /* 212/940 */
}
.pillars__body-3 {
  position: absolute; z-index: 2;
  left: 10.96%; /* 103/940 */
  top: 10.39%;  /* 116/1117 */
  width: 35.43%; /* 333/940 */
}

.pillars__item-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.042vw;   /* 20/1920 */
  line-height: 1.302vw; /* 25/1920 */
  letter-spacing: 0.126vw; /* 2.42/1920 */
  color: #ffffff;
  text-transform: uppercase;
  text-align: right;
}

.pillars__item-body {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.25vw;    /* 24/1920 */
  line-height: 1.667vw; /* 32/1920 */
  letter-spacing: 0.182vw; /* 3.5/1920 */
  color: rgba(255, 255, 255, 0.6);
  text-align: justify;
}

/* fade-up override: label-3 uses translateX(-100%) for positioning */
.pillars__label-3.fade-up         { transform: translateX(-100%) translateY(20px); }
.pillars__label-3.fade-up.visible { transform: translateX(-100%) translateY(0); }

/* ─── Block 4 · Ingredients ─────────────────── */
/* Figma 266:463 · 1920 × 1241 px               */
/* All lengths: px ÷ 1920 × 100 = vw            */

.s4 {
  position: relative;
  width: 100%;
  height: 64.635vw;  /* 1241 / 1920 */
  overflow: hidden;
  background: #f5f2ec;
}

.s4__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.s4__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.s4__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0)   35%,
    rgba(0,0,0,0.55) 100%
  );
  z-index: 1;
}

/* "Архитектура состава" — 266:465               */
/* left 1400 · top 441 · w 487                   */
/* Montserrat Light 300 · 48px · lh 78 · ls -2  */
.s4__title {
  position: absolute;
  z-index: 2;
  left: 72.917vw;   /* 1400 / 1920 */
  top: 21.927vw;    /*  421 / 1920 */
  width: 25.365vw;  /*  487 / 1920 */
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 2.5vw;      /* 48 / 1920 */
  line-height: 4.063vw;  /* 78 / 1920 */
  letter-spacing: -2px;
  color: #fff;
}

/* Intro — 266:466                                */
/* left 1400 · top 535 · w 493                   */
/* Montserrat SemiBold 600 · 24px · lh 32        */
/* ls 3.5 · justify                              */
.s4__lead {
  position: absolute;
  z-index: 2;
  left: 72.917vw;   /* 1400 / 1920 */
  top: 26.823vw;    /*  515 / 1920 */
  width: 25.677vw;  /*  493 / 1920 */
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.25vw;     /* 24 / 1920 */
  line-height: 1.667vw;  /* 32 / 1920 */
  letter-spacing: 3.5px;
  color: #fff;
  text-align: justify;
}

/* Dark olive band — 266:468                      */
/* top 737 · h 420                               */
.s4__band {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  top: 38.385vw;    /* 737 / 1920 */
  height: 21.875vw; /* 420 / 1920 */
  pointer-events: none;
}
.s4__band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

/* Bottom separator — 266:486                     */
/* top 1157 · rgba(14,11,8,.12)                  */
.s4__sep {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  top: 60.26vw;     /* 1157 / 1920 */
  height: 1px;
  background: rgba(14, 11, 8, 0.12);
}

/* ── Ingredient cards ──────────────────────── */

.s4-card {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.s4-c1 { left:  4.167vw; }  /*   80 / 1920 */
.s4-c2 { left: 29.167vw; }  /*  560 / 1920 */
.s4-c3 { left: 54.167vw; }  /* 1040 / 1920 */
.s4-c4 { left: 79.167vw; }  /* 1520 / 1920 */

.s4-r1 { top: 40.885vw; }   /*  785 / 1920 */
.s4-r2 { top: 51.146vw; }   /*  982 / 1920 */

/* Montserrat Medium 500 · 22px · ls -0.2 */
.s4-card__name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 1.146vw;  /* 22 / 1920 */
  line-height: normal;
  letter-spacing: -0.2px;
  color: #fff;
  white-space: nowrap;
}

/* Montserrat Regular 400 · 10px · uppercase · ls 1.2 */
.s4-card__origin {
  margin-top: 0.156vw;  /* 3px */
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 0.521vw;   /* 10 / 1920 */
  line-height: normal;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fff;
  width: 19.792vw;      /* 380 / 1920 */
}

/* 280px · 1px · rgba(255,255,255,.2) */
.s4-card__rule {
  margin-top: 0.521vw;  /* 10px */
  width: 14.583vw;      /* 280 / 1920 */
  height: 1px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
}

/* Montserrat Regular 400 · 13px · lh 20 · ls 0.1 */
.s4-card__desc {
  margin-top: 0.729vw;  /* 14px */
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 0.677vw;   /* 13 / 1920 */
  line-height: 1.042vw; /* 20 / 1920 */
  letter-spacing: 0.1px;
  color: #fff;
  width: 18.75vw;       /* 360 / 1920 */
}

/* ── ELIXIRS ─────────────────────────────── */

/* ── ELIXIRS (Slide 5 — node 229:151) ──────── */

.section-elixirs {
  position: relative;
  width: 100%;
  height: 72.135vw; /* 1385/1920 */
  margin-top: -1px;
  background: #fffffc;
  border-top: var(--border-section);
  overflow: hidden;
}

/* Flanking divider lines */
.elixirs__div {
  position: absolute;
  top: 6.719vw;    /* 129/1920 */
  height: 1px;
  background: rgba(239, 230, 211, 0.18);
  pointer-events: none;
}
.elixirs__div--l { left: 4.01vw; width: 41.406vw; }  /* 77/1920, 795/1920 */
.elixirs__div--r { left: 54.479vw; width: 41.406vw; } /* 1046/1920 */

/* "Two states." */
.elixirs__display {
  position: absolute;
  left: 38.281vw;   /* 735/1920 */
  top: 2.708vw;     /* 52/1920 */
  font-family: var(--font-heading);
  font-weight: 200;
  font-size: 4.583vw;   /* 88/1920 */
  line-height: 4.813vw; /* 92.4/1920 */
  letter-spacing: -1.08px;
  color: #2a2520;
  white-space: nowrap;
}

/* "One ritual." */
.elixirs__sub {
  position: absolute;
  left: 53.906vw;   /* 1035/1920 */
  top: 7.188vw;     /* 138/1920 */
  font-family: var(--font-heading);
  font-weight: 200;
  font-style: italic;
  font-size: 1.458vw;   /* 28/1920 */
  line-height: 2.188vw; /* 42/1920 */
  color: #2a2520;
  white-space: nowrap;
}

/* Cards */
.elixir-card {
  position: absolute;
  top: 12.76vw;     /* 245/1920 */
  width: 50vw;      /* 960/1920 */
  height: 56.146vw; /* 1078/1920 */
  overflow: hidden;
}

.elixir-card--vitae {
  left: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 252, 0.7), rgba(172, 172, 170, 0.7));
}

.elixir-card--euphoria {
  left: 50vw;
  top: 12.813vw;    /* 246/1920 */
}

/* Photo background — Euphoria */
.elixir-card__photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.62;
}
.elixir-card__photo-bg img {
  position: absolute;
  width: 162.6%;
  height: 144.8%;
  left: 0;
  top: -26.47%;
  max-width: none;
}

/* "(II)" badge */
.elixir-card__badge {
  position: absolute;
  left: 44.219vw;   /* 849/1920 */
  top: 1.667vw;     /* 32/1920 */
  font-family: var(--font-heading);
  font-weight: 200;
  font-size: 1.458vw;
  line-height: 2.188vw;
  color: rgba(139, 128, 115, 0.5);
  white-space: nowrap;
  z-index: 2;
}

/* Bottle placeholder */
.elixir-card__bottle-placeholder {
  position: absolute;
  left: 20.573vw;   /* 395/1920 */
  top: 4.115vw;     /* 79/1920 */
  width: 8.854vw;   /* 170/1920 */
  height: 23.958vw; /* 460/1920 */
  background: rgba(239, 230, 211, 0.60);
  border: 1px solid rgba(239, 230, 211, 0.8);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.elixir-card__bottle-label {
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: center;
}

/* Horizontal separator inside card */
.elixir-card__sep {
  position: absolute;
  left: 4.01vw;     /* 77/1920 */
  top: 30.208vw;    /* 580/1920 */
  width: 41.979vw;  /* 806/1920 */
  height: 1px;
  background: rgba(239, 230, 211, 0.18);
  z-index: 2;
}

/* "elixir · vital" / "elixir · slow" */
.elixir-card__tag {
  position: absolute;
  left: 4.01vw;     /* 77/1920 */
  top: 31.927vw;    /* 613/1920 */
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 2.42px;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
  z-index: 2;
}

/* "Vitae" / "Euphoria" */
.elixir-card__name {
  position: absolute;
  left: 4.01vw;     /* 77/1920 */
  top: 33.333vw;    /* 640/1920 */
  font-family: var(--font-heading);
  font-weight: 200;
  font-size: 3.75vw;    /* 72/1920 */
  line-height: 3.375vw; /* 64.8/1920 */
  letter-spacing: -1.08px;
  color: #2a2520;
  white-space: nowrap;
  z-index: 2;
}

/* Description */
.elixir-card__desc {
  position: absolute;
  left: 4.01vw;     /* 77/1920 */
  top: 38.646vw;    /* 742/1920 */
  width: 24.531vw;  /* ~471px — Vitae 3-line block */
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-muted);
  text-align: justify;
  z-index: 2;
}

.elixir-card__desc--wide {
  width: 25.417vw;  /* 488/1920 — Euphoria 2-line block */
  top: 38.438vw;    /* 738/1920 */
}

/* Specs table */
.elixir-card__specs {
  position: absolute;
  left: 30vw;       /* 576/1920 */
  top: 43.594vw;    /* 837/1920 */
  width: 13.49vw;   /* 259/1920 */
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 0;
  z-index: 2;
}

.spec-term {
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-muted);
  align-self: center;
  padding: 3px 0;
}

.spec-value {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #2a2520;
  text-align: right;
}

/* Ghost outline (Euphoria) */
.elixir-card__order-outline {
  position: absolute;
  left: 4.01vw;     /* 77/1920 */
  top: 46.979vw;    /* 902/1920 */
  width: 11.979vw;  /* 230/1920 */
  height: 2.5vw;    /* 48/1920 */
  border: 1px solid rgba(239, 230, 211, 0.18);
  z-index: 2;
}

/* "Пред-заказ" button */
.elixir-card__btn {
  position: absolute;
  left: 32.708vw;   /* 628/1920 */
  top: 49.844vw;    /* 957/1920 */
  width: 10.417vw;  /* 200/1920 */
  height: 2.5vw;    /* 48/1920 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 2.42px;
  text-transform: uppercase;
  color: #ffffff;
  border: none;
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.elixir-card__btn:hover { opacity: 0.82; }

.elixir-card__btn--vitae   { background: rgba(75, 26, 35, 0.7); }
.elixir-card__btn--euphoria { background: #714f55; }

/* ── BUTTON ──────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-btn);
  letter-spacing: 2.4px;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid;
  width: fit-content;
  transition: opacity 0.2s ease, transform 0.2s ease;
  user-select: none;
}

.btn:hover  { opacity: 0.82; transform: translateY(-1px); }
.btn:active { opacity: 1;    transform: translateY(0);    }

.btn--dark {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.btn--accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}

.btn__arrow {
  display: block;
  width: 14px;
  height: 1px;
  background: currentColor;
  position: relative;
  flex-shrink: 0;
}

.btn__arrow::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -4.5px;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ── BAR ─────────────────────────────────── */

/* ── BAR (Slide 6 — node 229:203) ──────────── */

.section-bar {
  position: relative;
  width: 100%;
  height: 51.875vw; /* 996/1920 */
  margin-top: -1px;
  background: var(--color-bg);
  border-top: var(--border-section);
  overflow: hidden;
}

/* Botanical background */
.bar__photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
  overflow: hidden;
}
.bar__photo-bg img {
  position: absolute;
  left: 9.37%;
  top: 0;
  width: 81.25%;
  height: 93.98%;
  max-width: none;
  object-fit: cover;
}

/* Decorative rules */
.bar__rule {
  position: absolute;
  width: 21.25vw;  /* 408/1920 */
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 1;
  pointer-events: none;
}

/* "НАПИТКИ AYUSOMA" */
.bar__heading {
  position: absolute;
  left: 2.344vw;   /* 45/1920 */
  top: 5.833vw;    /* 112/1920 */
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 2.5vw; /* 48/1920 */
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #8b8073;
  white-space: nowrap;
  z-index: 2;
}

/* "для мероприятий и эликсир-бара" */
.bar__sub {
  position: absolute;
  left: 8.281vw;    /* 159/1920 */
  top: 11.927vw;    /* 229/1920 */
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.042vw; /* 20/1920 */
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #8b8073;
  white-space: nowrap;
  z-index: 2;
}

/* "[ BOTANICAL PHOTO ]" placeholder */
.bar__photo-label {
  position: absolute;
  left: 74.74vw;   /* 1435/1920 */
  top: 27.708vw;   /* 532/1920 */
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.2);
  white-space: nowrap;
  z-index: 2;
}

/* Cards */
.bar-card {
  position: absolute;
  top: 29.167vw;    /* 560/1920 */
  width: 21.25vw;   /* 408/1920 */
  height: 14.583vw; /* 280/1920 */
  border-radius: 6px;
  overflow: hidden;
  z-index: 2;
}

.bar-card--lavender { left: 4.167vw;  background: rgba(145, 104, 54, 0.5); }
.bar-card--nojito   { left: 27.344vw; background: rgba(79,  87,  59, 0.6); }
.bar-card--rosella  { left: 50.521vw; background: rgba(72,  16,  16, 0.6); }
.bar-card--cacao    { left: 73.698vw; background: rgba(79,  50,  28, 0.5); }

/* Top accent strip (16px) */
.bar-card__topbar {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0.833vw; /* 16/1920 */
}
.bar-card--lavender .bar-card__topbar { background: rgba(145, 104, 54, 0.5); }
.bar-card--nojito   .bar-card__topbar { background: rgba(14,  11,   8, 0.4); }
.bar-card--rosella  .bar-card__topbar { background: rgba(72,  16,  16, 0.6); }
.bar-card--cacao    .bar-card__topbar { background: #594d3b; }

/* Card title */
.bar-card__title {
  position: absolute;
  left: 1.25vw;    /* 24/1920 */
  top: 9.115vw;    /* (735-560)/1920 */
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 11px;
  line-height: 17px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #ffffff;
}

/* Thin separator */
.bar-card__sep {
  position: absolute;
  left: 1.25vw;
  top: 11.198vw;   /* (775-560)/1920 */
  width: 18.75vw;  /* 360/1920 */
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

/* Subtitle */
.bar-card__subtitle {
  position: absolute;
  left: 1.25vw;
  top: 11.719vw;   /* (785-560)/1920 */
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

/* Ingredients */
.bar-card__ingr {
  position: absolute;
  left: 1.25vw;
  top: 12.448vw;   /* (799-560)/1920 */
  width: 18.75vw;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.35);
}

/* Category */
.bar-card__cat {
  position: absolute;
  left: 1.25vw;
  top: 13.385vw;   /* (817-560)/1920 */
  width: 18.75vw;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.25);
}

/* ── PHOTO BREAK ─────────────────────────── */

/* ── PHOTO BREAK (Slide 7 — node 229:243) ──── */

.section-photo-break {
  position: relative;
  width: 100%;
  height: 54.792vw; /* 1052/1920 */
  margin-top: -1px;
  border-top: var(--border-section);
  overflow: hidden;
}

/* Background image */
.pb__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.8;
}
.pb__bg img {
  position: absolute;
  left: -44.31%;
  top: 0.01%;
  width: 145.36%;
  height: 159.18%;
  max-width: none;
  object-fit: cover;
}

/* "State / ritual" — Cormorant SC */
.pb__title {
  position: absolute;
  left: 17.552vw;   /* 337/1920 */
  top: calc(50% - 14.844vw); /* calc(50% - 285/1920) */
  font-family: 'Cormorant SC', serif;
  font-weight: 400;
  font-size: 6.667vw;  /* 128/1920 */
  line-height: 3.333vw; /* 64/1920 */
  color: rgba(255, 255, 255, 0.7);
  white-space: pre-wrap;
  z-index: 2;
}

/* Shared text style */
.pb__label, .pb__bullet, .pb__body {
  position: absolute;
  font-family: var(--font-heading);
  font-size: 1.667vw;  /* 32/1920 */
  color: rgba(20, 16, 12, 0.45);
  letter-spacing: 2px;
  text-align: justify;
  z-index: 2;
}

/* Labels (SemiBold) */
.pb__label { font-weight: 600; white-space: nowrap; }

/* Bullets */
.pb__bullet {
  font-weight: 400;
  font-size: 1.667vw;
}

/* Body text (Regular) */
.pb__body { font-weight: 400; }

/* Row 1 — y=312 */
.pb__label--1 { left: 48.073vw; top: 16.25vw; }   /* 923/1920, 312/1920 */
.pb__bullet--1 { left: 68.125vw; top: 16.25vw; }  /* 1308/1920 */
.pb__body--1 {
  left: 72.188vw;  /* 1386/1920 */
  top: 16.25vw;
  width: 23.49vw;  /* 451/1920 */
  font-weight: 600;
}

/* Row 2 — y=486 */
.pb__label--2 { left: 57.188vw; top: 25.313vw; }  /* 1098/1920, 486/1920 */
.pb__bullet--2 { left: 68.542vw; top: 25.365vw; } /* 1316/1920, 487/1920 */
.pb__body--2 {
  left: 72.188vw;
  top: 25.313vw;
  width: 25.625vw;  /* 492/1920 */
  font-weight: 400;
}

/* Row 3 — y=782 */
.pb__label--3 { left: 53.75vw; top: 40.729vw; }   /* 1032/1920, 782/1920 */
.pb__bullet--3 { left: 67.917vw; top: 40.729vw; } /* 1304/1920 */
.pb__body--3 {
  left: 71.771vw;  /* 1378/1920 */
  top: 40.729vw;
  width: 25.625vw;
  font-weight: 400;
}

/* ── RITUAL CENTER (node 229:255) ─────────── */

.section-ritual-center {
  position: relative;
  width: 100%;
  height: 42.708vw; /* 820/1920 */
  margin-top: -1px;
  overflow: hidden;
  background: var(--color-bg);
}

.rc__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
  pointer-events: none;
}

/* Green leaf panel — right half */
.rc__panel {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 0;
  width: 27.135vw; /* 521/1920 */
  height: 94.146%;  /* 772/820 */
  background: url('../images/green2.png') center/cover no-repeat;
  opacity: 0.9;
  pointer-events: none;
}

/* Text block */
.rc__text {
  position: absolute;
  z-index: 2;
  left: calc(50% + 2.917vw); /* +32px ещё правее */
  top: 50%;
  transform: translateY(-50%);
  width: 18.698vw; /* ~359/1920 */
  display: flex;
  flex-direction: column;
  gap: 2.083vw; /* ~40px */
}

.rc__green {
  display: none; /* hidden on desktop — panel uses green2 as bg */
}

.rc__p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 1.042vw;  /* 20/1920 */
  line-height: 1.667vw; /* 32/1920 */
  letter-spacing: 3.5px;
  color: rgba(255, 255, 255, 0.6);
  text-align: justify;
  margin: 0;
}


/* ── MANIFESTO (node 229:265, 1920×1080) ─── */

.section-manifesto {
  position: relative;
  width: 100%;
  height: 56.25vw; /* 1080/1920 */
  margin-top: -1px;
  overflow: hidden;
  background: var(--color-bg);
}

/* Botanical leaf — top-right, percentages relative to section */
.mf__leaf-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.mf__leaf {
  position: absolute;
  left: 73.55%;
  top: 35.48%;
  width: 21.09%;
  height: 46.29%;
  object-fit: cover;
}

/* Relief photo — bottom-left, bleeds past edge */
.mf__photo-wrap {
  position: absolute;
  left: -3.4375vw;  /* -66/1920 */
  top: 24.844vw;    /* 477/1920 */
  width: 38.281vw;  /* 735/1920 */
  height: 18.854vw; /* 362/1920 */
  opacity: 0.75;
  overflow: hidden;
}
.mf__photo {
  position: absolute;
  left: -2.06%;
  top: -71.9%;
  width: 104.35%;
  height: 278.31%;
  object-fit: cover;
}

/* "Наша миссия" */
.mf__heading {
  position: absolute;
  left: 2.604vw;    /* 50/1920 */
  top: 3.698vw;     /* 71/1920 */
  width: 18.229vw;  /* 350/1920 */
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 2.083vw; /* 40/1920 */
  line-height: 1;
  color: #577f19;
}

/* Mission body */
.mf__mission {
  position: absolute;
  left: 2.604vw;
  top: 7.865vw;     /* 151/1920 */
  width: 13.125vw;  /* 252/1920 */
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.25vw;  /* 24/1920 */
  line-height: 1.2;
  letter-spacing: 0.2px;
  color: #3d3d3d;
  text-align: justify;
}

/* Botanical tags */
.mf__tags {
  position: absolute;
  left: 2.604vw;
  top: 18.385vw;    /* 353/1920 */
  width: 14.427vw;  /* 277/1920 */
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.25vw;
  line-height: 1.042vw; /* 20/1920 */
  letter-spacing: 0.2px;
  color: rgba(14, 11, 8, 0.55);
  text-align: justify;
}

/* "Участие на крупнейших..." */
.mf__festival-heading {
  position: absolute;
  left: 31.875vw;   /* (1022-410)/1920 */
  top: 3.854vw;     /* 74/1920 */
  width: 21.354vw;  /* 410/1920 */
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.563vw; /* 30/1920 */
  color: #6a6868;
  text-align: right;
}

/* Festival intro */
.mf__festival-intro {
  position: absolute;
  left: 35.26vw;    /* 677/1920 */
  top: 18.125vw;    /* 348/1920 */
  width: 17.969vw;  /* 345/1920 */
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.25vw;
  line-height: 1.042vw;
  letter-spacing: 0.2px;
  color: rgba(14, 11, 8, 0.55);
  text-align: justify;
}

/* Festival list (green, right-aligned) */
.mf__festival-list {
  position: absolute;
  left: 33.75vw;    /* (1044-396)/1920 */
  top: 24.479vw;    /* 470/1920 */
  width: 20.625vw;  /* 396/1920 */
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.354vw; /* 26/1920 */
  letter-spacing: 0.5px;
  color: #829543;
  text-align: right;
}

/* Long body text (right column, 32px) */
.mf__long-text {
  position: absolute;
  left: 56.771vw;   /* 1090/1920 */
  top: 12.969vw;    /* 249/1920 */
  width: 15.729vw;  /* 302/1920 */
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.667vw; /* 32/1920 */
  line-height: 1.563vw; /* 30/1920 */
  letter-spacing: 0.2px;
  color: rgba(68, 73, 50, 0.7);
  text-align: justify;
}

/* Ayurvedic text (right column, 24px) */
.mf__ayurvedic {
  position: absolute;
  left: 56.771vw;
  top: 35.469vw;    /* 681/1920 */
  width: 15.729vw;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.25vw;  /* 24/1920 */
  line-height: 1.198vw; /* 23/1920 */
  letter-spacing: 0.2px;
  color: #594d3b;
  text-align: justify;
}

/* Bottom bar */
.mf__bar {
  position: absolute;
  left: 6.875vw;    /* 132/1920 */
  top: 44.74vw;     /* 859/1920 */
  width: 87.865vw;  /* 1687/1920 */
  z-index: 1;
}

.mf__bar-rule {
  width: 100%;
  height: 1px;
  background: rgba(104, 93, 76, 0.18);
  margin-top: 1.347vw;    /* 25.86/1920 — rule sits below leaf bottom */
  margin-bottom: 1.83vw;  /* gap to text: (61-25.86)/1920 */
}

.mf__bar-text {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.042vw;  /* 20/1920 */
  line-height: 2.013vw; /* 38.658/1920 */
  letter-spacing: 0.027vw;
  color: rgba(14, 11, 8, 0.55);
  text-align: center;
}

/* ── DELIVERY ────────────────────────────── */

.section-delivery {
  position: relative;
  margin-top: -1px;
  border-top: var(--border-section);
  overflow: hidden;
  padding: 88px var(--pad-x) 0;
  height: 37.5vw;   /* 720/1920 */
  min-height: 560px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  background-color: #0c0508; /* dark left area */
}

.section-delivery__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.section-delivery__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  max-width: none;
  opacity: 0.95;
}

.section-delivery__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.section-delivery__heading {
  font-family: var(--font-heading);
  font-weight: 200;
  font-size: var(--text-h2);
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--color-white);
}

.section-delivery__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.section-delivery__cities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.delivery-city {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-right: 40px;
}

.delivery-city__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.delivery-city__name {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 32px;
  color: var(--color-white);
  letter-spacing: -0.5px;
}

.section-delivery__statement {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px 40px;
}

.delivery-statement__main {
  font-family: var(--font-heading);
  font-weight: 200;
  font-size: 36px;
  color: var(--color-white);
  letter-spacing: -0.5px;
}

.delivery-statement__sub {
  font-family: var(--font-body);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.48);
}

.section-delivery__note {
  position: absolute;
  z-index: 2;
  left: 4.167vw;    /* 80/1920 */
  bottom: 4.063vw;  /* 78/1920 — (720-570-72)/1920 */
  width: 91.667vw;  /* 1760/1920 */
  height: 3.75vw;   /* 72/1920 */
  min-height: 44px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delivery-note__text {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

/* ── NEWSLETTER ──────────────────────────── */

.section-newsletter {
  position: relative;
  margin-top: -1px;
  border-top: var(--border-section);
  padding: 120px var(--pad-x);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  min-height: 500px;
}

.section-newsletter__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.28;
}

.section-newsletter__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.newsletter__header {
  position: relative;
  z-index: 2;
}

.newsletter__heading {
  font-family: var(--font-heading);
  font-weight: 200;
  font-size: var(--text-h1);
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--color-primary);
}

.newsletter__form-area {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.newsletter__sub {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 3px;
  color: rgba(26, 20, 13, 0.75);
  text-align: center;
  width: 100%;
}

.newsletter__label {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(26, 20, 13, 0.7);
}

.newsletter__input-wrap {
  width: 100%;
  max-width: 480px;
  height: 56px;
  background: rgba(88, 94, 69, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  padding: 0 28px;
}

.newsletter__input {
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-primary);
  width: 100%;
}

.newsletter__input::placeholder { color: rgba(26, 20, 13, 0.33); }

.newsletter__btn {
  background: var(--color-olive);
  border: none;
  padding: 14px 56px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.newsletter__btn:hover  { opacity: 0.86; transform: translateY(-1px); }
.newsletter__btn:active { opacity: 1; transform: none; }

.newsletter__btn-text {
  font-family: var(--font-body);
  font-size: var(--text-btn);
  letter-spacing: 2.42px;
  text-transform: uppercase;
  color: var(--color-white);
}

.newsletter__btn:disabled .newsletter__btn-text::after { content: ' ✓'; }

/* ── FOOTER ──────────────────────────────── */

.footer {
  position: relative;
  overflow: hidden;
  margin-top: -1px;
  border-top: var(--border-section);
  padding: 0 var(--pad-x) 32px;
  min-height: 320px;
}

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

.footer__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 33%; /* Figma: top=-229.14%, h=844.57% → center at 33% */
  filter: saturate(1.35) brightness(0.9);
}

.footer__top-border {
  position: relative;
  z-index: 2;
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
}

.footer__content {
  position: relative;
  z-index: 2;
  padding-top: 60px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 40px;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.footer__logo-text {
  font-family: var(--font-heading);
  font-weight: 200;
  font-size: 28px;
  color: var(--color-white);
  letter-spacing: 4px;
}

.footer__tagline {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.footer__location {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

.footer__nav {
  display: flex;
  gap: 28px;
  list-style: none;
  align-items: flex-start;
  padding-top: 12px;
  justify-content: center;
}

.footer__nav-link {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  letter-spacing: 0.5px;
  color: var(--color-white);
  transition: color 0.2s ease;
  cursor: pointer;
}

.footer__nav-link:hover { color: rgba(255, 255, 255, 0.6); }

.footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.footer__contacts-label {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.footer__contact-name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
}

.footer__contact-item {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  color: var(--color-white);
}

.footer__logo-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 8px 0 24px;
}

.footer__logo-img {
  width: 5.885vw;   /* 113/1920 */
  min-width: 56px;
  max-width: 90px;
  height: auto;
  display: block;
}

.footer__bottom-border {
  position: relative;
  z-index: 2;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 24px;
}

.footer__copyright {
  position: relative;
  z-index: 2;
  font-family: var(--font-body);
  font-size: var(--text-meta);
  color: rgba(255, 255, 255, 0.5);
}

/* ── EMIL: ENTRANCE ANIMATIONS ───────────── */

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero элементы используют transform для позиционирования —
   fade-up не должен его переопределять */
.hero__brand.fade-up         { transform: translate(-50%, -50%) translateY(20px); }
.hero__brand.fade-up.visible { transform: translate(-50%, -50%) translateY(0); }

.hero__sub.fade-up         { transform: translateX(-50%) translateY(20px); }
.hero__sub.fade-up.visible { transform: translateX(-50%) translateY(0); }

.hero__logo-mark.fade-up         { transform: translateX(-50%) translateY(20px); }
.hero__logo-mark.fade-up.visible { transform: translateX(-50%) translateY(0); }

.fade-up.d1 { transition-delay: 0.08s; }
.fade-up.d2 { transition-delay: 0.16s; }
.fade-up.d3 { transition-delay: 0.24s; }
.fade-up.d4 { transition-delay: 0.32s; }

/* ── MOBILE (≤ 1024px) ───────────────────── */

@media (max-width: 1024px) {
  :root { --pad-x-mob: 24px; }

  .ticker--light { margin: 0 var(--pad-x-mob); }

  .nav {
    padding: 18px var(--pad-x-mob);
    position: fixed; /* keep stacking context for absolute child */
  }
  .nav__left-group { display: none; }
  .nav__right-group { display: none; }

  /* Logo centered absolutely on mobile — always visible */
  .nav__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    letter-spacing: 3px;
  }

  /* Burger button */
  .nav__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 4px;
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    z-index: 101;
  }
  .nav__burger-line {
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.85);
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
  }

  /* Burger → X when open */
  .nav.menu-open .nav__burger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav.menu-open .nav__burger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav.menu-open .nav__burger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .nav__mobile-link {
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    padding: 16px 0;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: color 0.2s ease;
  }
  .nav__mobile-link:last-child { border-bottom: none; padding-bottom: 20px; }
  .nav__mobile-link:hover { color: var(--color-white); }
  .nav__mobile-link--cta { color: var(--color-white); opacity: 0.9; }

  .hero__brand { font-size: 52px; letter-spacing: 5px; }

  /* На мобайле Botanical Elixirs — по центру */
  .hero__sub {
    left: 50%;
    top: auto;
    bottom: 140px;
    transform: translateX(-50%);
    font-size: 18px;
    letter-spacing: 2.5px;
  }

  .hero__logo-mark { width: 72px; height: 74px; top: 180px; }
  .hero__products-line { left: 24px; top: auto; bottom: 40px; font-size: 11px; letter-spacing: 1.2px; }

  .section-bhero { min-height: 100svh; }
  .section-bhero__brand { left: var(--pad-x-mob); font-size: 40px; line-height: 1.1; top: calc(50% - 280px); width: auto; }
  .section-bhero__sub-botanical,
  .section-bhero__sub-botanical.fade-up,
  .section-bhero__sub-botanical.fade-up.visible { left: var(--pad-x-mob); top: calc(50% - 210px); font-size: 20px; line-height: 28px; transform: none; text-align: left; width: calc(100% - 48px); padding-left: 28px; }
  .section-bhero__sub-elixirs,
  .section-bhero__sub-elixirs.fade-up,
  .section-bhero__sub-elixirs.fade-up.visible { left: calc(var(--pad-x-mob) + 42px); top: calc(50% - 170px); font-size: 20px; line-height: 28px; transform: none; text-align: left; width: auto; }
  .section-bhero__editorial { left: var(--pad-x-mob); top: calc(50% - 120px); width: calc(100% - 48px); font-size: 13px; line-height: 20px; letter-spacing: 1.5px; }
  .section-bhero__editorial p + p { margin-top: 20px; }
  .section-bhero__stats-row { left: var(--pad-x-mob); top: auto; bottom: 40px; flex-wrap: wrap; gap: 12px; }
  .section-bhero__stat-divider { width: 40px; }
  .section-bhero__stat-item { font-size: 11px; line-height: 18px; }

  .section-pillars { padding: 48px var(--pad-x-mob) 80px; overflow: hidden; }
  .pillars__container { display: block; }
  .pillars__col--left { display: block; width: 100%; height: 420px; overflow: hidden; }
  .pillars__bg--left { position: absolute; inset: 0; }
  .pillars__overlay--left { display: none; }
  .pillars__heading { font-size: 36px; letter-spacing: 1px; left: 24px; top: auto; bottom: 32px; width: auto; }
  .pillars__col--right { display: block; width: 100%; height: auto; min-height: 600px; padding: 40px var(--pad-x-mob) 60px; }
  .pillars__overlay--right { display: none; }
  .pillars__bg--right { left: 0; right: 0; bottom: 0; z-index: 0; }
  .pillars__bg--right img { left: 0; width: 100%; height: 100%; object-fit: cover; }
  .pillars__item { position: relative !important; z-index: 1; width: auto !important; margin-bottom: 32px; top: auto !important; left: auto !important; }
  .pillars__label-2,
  .pillars__label-3,
  .pillars__body-2,
  .pillars__body-3 { position: relative !important; z-index: 1; transform: none !important; width: auto !important; margin-bottom: 8px; top: auto !important; left: auto !important; }
  .pillars__item-label { text-align: left !important; width: auto !important; font-size: 15px; line-height: normal; letter-spacing: 1.5px; }
  .pillars__item-body { font-size: 15px; line-height: 1.6; letter-spacing: 1.5px; }
  .pillars__body-3 { margin-bottom: 32px !important; }

  /* ── Block 4 mobile ── */
  .s4 {
    height: auto;
    overflow: visible;
    background: #2A2520;
    display: flex;
    flex-direction: column;
  }
  .s4__bg {
    position: relative;
    order: 0;
    height: 60vw;
    min-height: 220px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .s4__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
  .s4__title {
    position: static;
    order: 1;
    font-size: 7.5vw;
    line-height: 1.2;
    letter-spacing: -0.5px;
    width: auto;
    color: #fff;
    padding: 28px 24px 0;
  }
  .s4__lead {
    position: static;
    order: 2;
    font-size: 3.5vw;
    line-height: 1.6;
    letter-spacing: 1.5px;
    width: auto;
    color: rgba(255, 255, 255, 0.7);
    padding: 12px 24px 0;
  }
  .s4__band {
    position: relative;
    order: 3;
    top: auto;
    height: 44vw;
    min-height: 160px;
    margin-top: 24px;
    flex-shrink: 0;
  }
  .s4__band img { object-position: center; }
  .s4__sep { position: static; order: 99; }
  .s4-card {
    position: static;
    order: 4;
    padding: 20px 24px 0;
  }
  .s4-c1, .s4-c2, .s4-c3, .s4-c4,
  .s4-r1, .s4-r2 { left: auto; top: auto; }
  .s4-card__name { font-size: 4.5vw; white-space: normal; color: #fff; }
  .s4-card__origin { font-size: 2.8vw; width: auto; margin-top: 4px; color: rgba(255, 255, 255, 0.6); }
  .s4-card__rule { width: 50%; margin-top: 8px; background: rgba(255, 255, 255, 0.2); }
  .s4-card__desc { font-size: 3.2vw; line-height: 1.55; width: auto; margin-top: 8px; color: rgba(255, 255, 255, 0.7); }

  .section-elixirs { height: auto; min-height: 0; overflow: visible; }
  .elixirs__div { display: none; }
  .elixirs__display { position: static; font-size: 10.667vw; line-height: 1.1; text-align: center; display: block; padding: 40px 24px 0; white-space: normal; }
  .elixirs__sub { position: static; font-size: 5.333vw; display: block; text-align: center; padding: 8px 24px 32px; white-space: normal; }
  .elixir-card { position: relative; top: auto; left: auto; width: 100%; height: 152vw; display: block; margin-bottom: 0; }
  .elixir-card--vitae { left: auto; }
  .elixir-card--euphoria { top: auto; left: auto; }
  .elixir-card__badge { font-size: 5.333vw; left: auto; right: 24px; top: 24px; }
  .elixir-card__bottle-placeholder { left: 50%; transform: translateX(-50%); top: 6vw; width: 22vw; height: 60vw; }
  .elixir-card__sep { left: 6.25vw; top: 72vw; width: 87.5vw; }
  .elixir-card__tag { left: 6.25vw; top: 74.5vw; }
  .elixir-card__name { left: 6.25vw; top: 78vw; font-size: 10.667vw; line-height: 1; }
  .elixir-card__desc { left: 6.25vw; top: 92vw; width: 60vw; }
  .elixir-card__specs { left: 6.25vw; top: 113vw; width: 60vw; }
  .elixir-card__order-outline { display: none; }
  .elixir-card__btn { left: 6.25vw; top: 134vw; width: 50vw; height: 12vw; font-size: 10px; }

  .section-bar { height: auto; min-height: 0; overflow: visible; }
  .bar__photo-bg { display: none; }
  .bar__rule, .bar__photo-label { display: none; }
  .bar__heading { position: static; display: block; font-size: 8vw; padding: 40px 24px 0; white-space: normal; }
  .bar__sub { position: static; display: block; font-size: 3.5vw; padding: 8px 24px 32px; white-space: normal; }
  .bar-card { position: static; width: calc(50% - 6px); height: auto; min-height: 160px; display: inline-block; margin: 0 0 12px; border-radius: 6px; }
  .bar-card--lavender, .bar-card--nojito, .bar-card--rosella, .bar-card--cacao { left: auto; top: auto; }
  .bar-card__title, .bar-card__sep, .bar-card__subtitle, .bar-card__ingr, .bar-card__cat { position: static; width: auto; top: auto; left: auto; display: block; padding: 0; }
  .bar-card__title { padding: 48px 16px 6px; }
  .bar-card__sep { width: 80%; margin: 6px 16px; }
  .bar-card__subtitle { padding: 4px 16px 0; }
  .bar-card__ingr { padding: 2px 16px 0; }
  .bar-card__cat { padding: 2px 16px 12px; }
  .bar-card__topbar { height: 12px; }

  .section-photo-break { height: auto; min-height: 0; overflow: visible; padding-bottom: 48px; }
  .pb__bg { opacity: 0.5; }
  .pb__title { position: static; display: block; font-size: 14vw; line-height: 1; padding: 48px 24px 32px; white-space: normal; }
  .pb__label, .pb__bullet, .pb__body { position: static; display: inline; font-size: 4vw; }
  .pb__bullet { margin: 0 8px; }
  .pb__label--1, .pb__label--2, .pb__label--3 { display: block; padding: 24px 24px 4px; }
  .pb__bullet--1, .pb__bullet--2, .pb__bullet--3 { display: none; }
  .pb__body--1, .pb__body--2, .pb__body--3 { display: block; padding: 0 24px 0; width: auto; font-size: 3.5vw; }

  .section-ritual-center { position: relative; height: auto; min-height: 0; display: block; overflow: visible; }
  .rc__bg { position: relative; width: 100%; height: 64vw; object-fit: cover; object-position: center; display: block; }
  .rc__panel { display: none; }
  .rc__green { display: block; width: 100%; height: 60vw; object-fit: cover; }
  .rc__text { position: absolute; top: 64vw; left: 0; right: 0; z-index: 2; transform: none; width: auto; padding: 28px 24px 36px 32px; }
  .rc__p { font-size: 3.69vw; line-height: 1.6; letter-spacing: 2px; }

  .section-manifesto { height: auto; overflow: visible; padding: 60px var(--pad-x-mob) 48px; }
  .mf__leaf-wrap, .mf__photo-wrap { display: none; }
  .mf__heading, .mf__mission, .mf__tags,
  .mf__festival-heading, .mf__festival-intro, .mf__festival-list,
  .mf__long-text, .mf__ayurvedic {
    position: static; width: auto; font-size: 4vw; line-height: 1.5;
    letter-spacing: 0.2px; margin-bottom: 16px;
  }
  .mf__heading { font-size: 7vw; margin-bottom: 12px; }
  .mf__bar { position: static; width: auto; margin-top: 40px; }
  .mf__bar-text { font-size: 3.5vw; line-height: 1.6; }

  .section-delivery { height: auto; min-height: 480px; padding: 80px var(--pad-x-mob) 120px; }
  .section-delivery__note { position: relative; left: auto; bottom: auto; width: auto; height: auto; min-height: 44px; margin-top: auto; padding: 14px 20px; }
  .section-delivery__heading { font-size: 52px; }
  .section-delivery__cities { grid-template-columns: 1fr; gap: 24px; }
  .section-delivery__statement { flex-direction: column; gap: 8px; }
  .delivery-statement__main { font-size: 24px; }
  .delivery-statement__sub { font-size: 15px; }

  .section-newsletter { grid-template-columns: 1fr; padding: 80px var(--pad-x-mob); gap: 48px; }
  .newsletter__heading { font-size: 52px; }
  .newsletter__sub { text-align: left; }

  .footer__content { grid-template-columns: 1fr; gap: 32px; }
  .footer__nav { flex-wrap: wrap; gap: 16px; justify-content: flex-start; }
  .footer__contacts { align-items: flex-start; }
}

/* ── REDUCED MOTION ──────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ticker__track { animation: none; }

  .nav,
  .btn,
  .nav__link,
  .footer__nav-link,
  .bar-card,
  .newsletter__btn,
  .elixir-card__btn {
    transition: none;
  }

  .hero__bg img { will-change: auto; }
}

/* ── NEWSLETTER CONSENT ──────────────────── */

.newsletter__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin-top: 16px;
}

.newsletter__consent-check {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-muted);
  background: transparent;
  cursor: pointer;
  margin-top: 1px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.newsletter__consent-check:checked {
  background: var(--color-muted);
  border-color: var(--color-muted);
}

.newsletter__consent-text {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  line-height: 1.5;
}

.newsletter__consent-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── PRE-ORDER MODAL ─────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.3s ease;
}

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  background: rgba(14, 11, 8, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal {
  position: relative;
  background: var(--color-dark-bg);
  width: 100%;
  max-width: 480px;
  padding: 48px 40px 40px;
  transform: translateY(16px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.is-open .modal {
  transform: translateY(0);
}

.modal__close {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 24px;
  color: rgba(255,255,255,0.4);
  line-height: 1;
  padding: 4px 8px;
  transition: color 0.2s ease;
}

.modal__close:hover { color: rgba(255,255,255,0.85); }

.modal__tag {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.modal__title {
  font-family: var(--font-heading);
  font-weight: 200;
  font-size: 28px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 32px;
}

.modal__elixir-name {
  color: var(--color-accent);
}

.modal__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal__label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

.modal__optional {
  letter-spacing: 0;
  text-transform: none;
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}

.modal__input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-white);
  outline: none;
  transition: border-color 0.2s ease;
  width: 100%;
}

.modal__input::placeholder { color: rgba(255,255,255,0.25); }

.modal__input:focus {
  border-color: var(--color-accent);
}

.modal__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin-top: 4px;
}

.modal__consent-check {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  cursor: pointer;
  margin-top: 2px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.modal__consent-check:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.modal__consent-text {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.4);
  line-height: 1.5;
}

.modal__consent-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.modal__error {
  font-family: var(--font-body);
  font-size: 12px;
  color: #c97b7b;
  letter-spacing: 0.02em;
}


.modal__submit {
  background: var(--color-accent);
  border: none;
  padding: 14px 40px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 8px;
  transition: opacity 0.2s ease, transform 0.2s ease;
  align-self: flex-start;
}

.modal__submit:hover  { opacity: 0.82; transform: translateY(-1px); }
.modal__submit:active { opacity: 1; transform: none; }
.modal__submit:disabled { opacity: 0.45; cursor: default; transform: none; }

.modal__submit-text {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 2.42px;
  text-transform: uppercase;
  color: var(--color-dark-bg);
  font-weight: 500;
}

.modal__success {
  text-align: center;
  padding: 24px 0 8px;
}


.modal__success-title {
  font-family: var(--font-heading);
  font-weight: 200;
  font-size: 24px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 12px;
}

.modal__success-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .modal { padding: 40px 24px 32px; }
}