/* ==========================================================================
   Balls & Bubbles Club — BB_Padel_Landing
   Токены взяты из переменных Figma (get_variable_defs на 1:2857).
   letter-spacing в переменных Figma задан в ПРОЦЕНТАХ — здесь переведён в em.
   Проверено на H1: text-[140px] + tracking-[-5.95px]; -5.95/140 = -4.25%.
   ========================================================================== */

:root{
  /* --- Цвета --------------------------------------------------------- */
  --accent-1:#FF5A89;          /* розовый, основной акцент */
  --accent-2:#D6F963;          /* лаймовый, вторичный акцент */
  --accent-4:#000000;
  --accent-6:#929292;
  --text-headline:#000000;
  --text-paragraph:#6F6F6F;
  --text-link:#000000;
  --text-on-accent:#FFFFFF;
  --bg-1:#FFFFFF;
  --divider-1:#E9E9E9;
  --dark-grey:#6F6F6F;
  --cool-gray-90:#21272A;
  --paper:#F7F7F3;             /* фон «бумажных» пилюль в бегущей строке */

  /* --- Шрифты -------------------------------------------------------- */
  --font-display:"Orelega One", Georgia, serif;
  --font-script:"Caveat", cursive;
  --font-sans:"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Стили Heading 3 и Body/M в файле Figma названы «Crimson Text» и «Roboto»,
     но рендерятся сансерифом — фактический шрифт макета везде DM Sans. */

  /* --- Типографика: размер / межстрочный / трекинг -------------------- */
  --display-size:140px;   --display-lh:0.9;  --display-ls:-0.0425em;
  --h1-size:90px;         --h1-lh:0.9;       --h1-ls:-0.03em;
  --h2-size:40px;         --h2-lh:1;         --h2-ls:0;
  --h3-size:18px;         --h3-lh:1;         --h3-ls:-0.03em;
  --paragraph-size:18px;  --paragraph-lh:1.4;--paragraph-ls:-0.005em;
  --body-size:16px;       --body-lh:1.4;     --body-ls:0;
  --link-size:14px;       --link-lh:1.4;     --link-ls:-0.025em;

  /* --- Раскладка ------------------------------------------------------ */
  --container:1200px;
  --gutter:40px;

  /* --- Движение ------------------------------------------------------- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --reveal-shift:24px;
}

/* ==========================================================================
   Сброс
   ========================================================================== */

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg-1);
  color:var(--text-headline);
  font-family:var(--font-sans);
  font-size:var(--body-size);
  line-height:var(--body-lh);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}

/* ==========================================================================
   Доступность
   ========================================================================== */

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

/* Секции и панель меню фокусируются программно — из JS при переходе по якорю
   и при открытии бургера. Обводка на них не нужна: она обрисовывала секцию
   по периметру (розовые полосы сверху и снизу) и первый пункт меню. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible{outline:none}

.skip-link{
  position:absolute;
  left:var(--gutter);
  top:-100px;
  z-index:100;
  padding:12px 20px;
  border-radius:999px;
  background:var(--accent-4);
  color:var(--text-on-accent);
  font-family:var(--font-sans);
  font-weight:700;
  font-size:var(--link-size);
  letter-spacing:var(--link-ls);
  transition:top .2s var(--ease);
}
/* именно :focus, а не :focus-visible — ссылка должна всплывать при любом
   получении фокуса, включая программное */
.skip-link:focus{top:16px}

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

/* ==========================================================================
   Раскладка
   ========================================================================== */

.container{
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

html{scroll-behavior:smooth}

/* якорные переходы не должны заезжать под липкую шапку */
[id]{scroll-margin-top:120px}

/* ==========================================================================
   Типографика
   ========================================================================== */

.display{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--display-size);
  line-height:var(--display-lh);
  letter-spacing:var(--display-ls);
}

.h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--h1-size);
  line-height:var(--h1-lh);
  letter-spacing:var(--h1-ls);
}

.h2{
  font-family:var(--font-script);
  font-weight:700;
  font-size:var(--h2-size);
  line-height:var(--h2-lh);
  letter-spacing:var(--h2-ls);
}

.h3{
  font-family:var(--font-sans);
  font-weight:400;
  font-size:var(--h3-size);
  line-height:var(--h3-lh);
  letter-spacing:var(--h3-ls);
}

.paragraph{
  font-family:var(--font-sans);
  font-weight:400;
  font-size:var(--paragraph-size);
  line-height:var(--paragraph-lh);
  letter-spacing:var(--paragraph-ls);
  color:var(--text-paragraph);
}

/* ==========================================================================
   Кнопки
   Высота 48px в чистой вёрстке макета.
   Белый текст на розовом — по решению заказчика, точность к макету
   приоритетнее WCAG AA (пара даёт 2.97:1).
   ========================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:0 24px;
  border-radius:999px;
  background:var(--accent-1);
  color:var(--text-on-accent);
  font-family:var(--font-sans);
  font-weight:700;
  font-size:var(--link-size);
  line-height:var(--link-lh);
  letter-spacing:var(--link-ls);
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}

.btn:hover{background:#F0416F}
.btn:active{transform:translateY(1px)}

.btn[disabled],.btn[aria-disabled="true"]{
  background:var(--divider-1);
  color:var(--accent-6);
  cursor:not-allowed;
  transform:none;
}

/* модификатор со стрелкой ↗ */
.btn--linkout::after{
  content:"↗";
  font-size:1.1em;
  line-height:1;
}

.btn--dark{background:var(--accent-4)}
.btn--dark:hover{background:#1f1f1f}

/* на лайме допустим только чёрный текст: 17.6:1 против 1.19:1 у белого */
.btn--lime{background:var(--accent-2);color:var(--accent-4)}
.btn--lime:hover{background:#C9F045}

/* ==========================================================================
   Появление секций при скролле
   ========================================================================== */

.reveal{
  opacity:0;
  transform:translateY(var(--reveal-shift));
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible{opacity:1;transform:none}

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

/* ==========================================================================
   Навигация — 1:2858 + Nav Items 1:5455
   Пункты меню в макете лежат отдельным фреймом, наложенным поверх компонента,
   и ровно отцентрованы по контейнеру (373..827 из 1200). Здесь это один блок.
   ========================================================================== */

.nav{
  position:sticky;
  top:0;
  z-index:50;
  padding-block:20px;
}

.nav__inner{
  position:relative;
  z-index:2;               /* строка с логотипом и бургером остаётся над панелью меню */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:60px;
}

.nav__logo{display:block;flex-shrink:0}
.nav__logo img{width:57px;height:auto}

.nav__menu{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.nav__list{
  display:flex;
  align-items:center;
  gap:27px;
  padding:20px 24px;
  border-radius:100px;
  background:rgba(255,255,255,.4);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
}

.nav__list a{
  display:block;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:var(--link-size);
  line-height:var(--link-lh);
  letter-spacing:var(--link-ls);
  color:var(--text-link);
  white-space:nowrap;
  transition:color .2s var(--ease);
}
.nav__list a:hover{color:var(--accent-1)}

.nav__cta{flex-shrink:0}

/* бургер — только на узких экранах */
.nav__burger{
  display:none;
  flex-shrink:0;
  width:48px;height:48px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.4);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  cursor:pointer;
}

.nav__burger-box{position:relative;display:block;width:20px;height:14px}
.nav__burger-bar,
.nav__burger-box::before,
.nav__burger-box::after{
  position:absolute;
  left:0;
  width:100%;height:2px;
  border-radius:2px;
  background:var(--accent-4);
  transition:transform .25s var(--ease), opacity .2s var(--ease);
}
.nav__burger-bar{top:6px}
.nav__burger-box::before{content:"";top:0}
.nav__burger-box::after{content:"";bottom:0}

[aria-expanded="true"] .nav__burger-bar{opacity:0}
[aria-expanded="true"] .nav__burger-box::before{transform:translateY(6px) rotate(45deg)}
[aria-expanded="true"] .nav__burger-box::after{transform:translateY(-6px) rotate(-45deg)}

.nav__panel{
  position:fixed;
  inset:0;
  z-index:49;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:32px;
  padding:var(--gutter);
  background:var(--bg-1);
}
.nav__panel[hidden]{display:none}

.nav__panel-list{display:flex;flex-direction:column;align-items:center;gap:24px}
.nav__panel-list a{
  font-family:var(--font-display);
  font-size:36px;
  line-height:1.1;
  letter-spacing:var(--h1-ls);
  color:var(--text-headline);
}

body.is-nav-open{position:fixed;width:100%;overflow:hidden}

/* ==========================================================================
   Hero — 1:2859
   ========================================================================== */

.hero{padding-bottom:80px}

.hero__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}

/* В макете заголовок — одна строка шириной 1090px при кегле 140.
   Веб-сборка Orelega One из Google Fonts шире фигмовской примерно на 5%:
   той же строке нужно 1149px. Поэтому кегль флюидный с потолком на токене —
   строка остаётся одной и держит пропорцию макета. */
.hero__title{
  font-size:min(var(--display-size), calc((100vw - var(--gutter) * 2) * .1107));
  max-width:100%;
}

.hero__subtitle{max-width:585px}

/* Фото шире и выше лаймовой подложки: она выглядывает по бокам,
   фото выступает сверху и снизу. Числа — из inset макета. */
.hero__media{
  position:relative;
  height:550px;
  margin-top:40px;
}

.hero__plate{
  position:absolute;
  left:0;right:0;
  top:127.91px;
  height:362px;
  border-radius:30px;
  background:var(--accent-2);
}

.hero__photo{
  position:absolute;
  top:0;
  left:56px;
  right:55px;
  height:550px;
  border-radius:30px;
  overflow:hidden;
}
.hero__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ==========================================================================
   Бегущая строка — 1:2867
   Фрейм в макете 1329px при контейнере 1200, то есть заведомо шире экрана.
   Петля: два одинаковых трека, сдвиг ровно на ширину одного.
   ========================================================================== */

.marquee{
  overflow:hidden;
  margin-top:60px;
  padding-block:3px;
}

.marquee__inner{
  display:flex;
  width:max-content;
  animation:marquee-scroll var(--marquee-duration, 24s) linear infinite;
}

.marquee__track{
  display:flex;
  gap:6px;
  margin-right:6px;
  flex:0 0 auto;
}

/* сдвиг ровно на один трек: значение проставляет JS по факту вёрстки */
@keyframes marquee-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--marquee-shift, 0px)))}
}

.marquee:hover .marquee__inner{animation-play-state:paused}

.pill{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 32px;
  border-radius:30px;
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--h1-size);
  line-height:var(--h1-lh);
  letter-spacing:var(--h1-ls);
  white-space:nowrap;
}

.pill--dark{background:var(--accent-4);color:var(--accent-2)}
.pill--paper{background:var(--paper);color:var(--accent-4)}
.pill--lime{background:var(--accent-2);color:var(--accent-4)}
.pill--pink{background:var(--accent-1)}
.pill--pink-text{color:var(--accent-1)}
.pill--icon img{width:35px;height:35px}

/* ==========================================================================
   Три шага под hero — Lockup 4/5/6 (1:2883, 1:3108, 1:3119)
   ========================================================================== */

.steps{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:40px;
}

.step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  flex:0 1 387px;
  padding:20px;
  text-align:center;
}

.step__label{color:var(--text-headline)}

.step__action{
  display:flex;
  align-items:center;
  gap:2px;
}

.step__icon{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:contain;
}

/* ==========================================================================
   Общие элементы секций
   ========================================================================== */

/* лаймовая «плашка-надзаголовок»: 1:3639, 1:3687 и далее по макету */
.eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  border-radius:24px;
  background:var(--accent-2);
  color:var(--accent-4);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:var(--paragraph-size);
  line-height:var(--paragraph-lh);
  letter-spacing:var(--paragraph-ls);
  white-space:nowrap;
}

.eyebrow--sm{font-size:15px}

/* ==========================================================================
   Logo cloud — 1:3125
   Шесть логотипов: четыре растровых и два векторных.
   ========================================================================== */

.logos{padding-block:50px}

.logos__title{
  font-family:var(--font-sans);
  font-weight:400;
  font-size:15px;
  line-height:1.4;
  letter-spacing:-.005em;
  color:var(--text-paragraph);
  margin-bottom:30px;
}

.logos__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:20px 40px;
}

.logos__item{
  display:flex;
  align-items:center;
  justify-content:center;
  width:154px;
  height:84px;
  padding:20px;
}

.logos__item img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}

/* ==========================================================================
   Benefits — 1:3635
   ========================================================================== */

.benefits{padding-bottom:120px}

.benefits__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:50px;
  padding-top:80px;
  border-top:.5px solid var(--divider-1);
}

.benefits__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
}

.benefits__title{margin-top:0}
.benefits__lead{max-width:712px;margin-top:38px}

.benefits__figure{width:100%;max-width:1185px}
.benefits__figure img{
  width:100%;
  height:auto;
  aspect-ratio:1185/790;
  object-fit:cover;
  border-radius:30px;
}

.benefits__list{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  width:100%;
}

.benefit{
  display:flex;
  flex-direction:column;
  gap:20px;
  flex:1 0 0;
  min-width:166px;
  padding:40px 20px;
}

.benefit__emoji{
  font-family:var(--font-sans);
  font-size:34px;
  line-height:1.4;
  letter-spacing:-.005em;
  color:var(--text-paragraph);
}

.benefit__label{color:var(--text-headline)}

.benefits__quote{
  max-width:626px;
  text-align:center;
  color:var(--text-headline);
}

/* Ряд пилюль «Padel & Good 🎾 Vibes» — 1:3667: та же бегущая лента,
   в макете он 1277px при контейнере 1200 и тоже выходит за края. */
.marquee--tight{margin-top:50px}

.pill--emoji{
  font-family:var(--font-sans);
  font-size:46px;
  line-height:1.4;
  letter-spacing:-.005em;
  color:var(--text-paragraph);
}

/* ==========================================================================
   Club — 1:3684
   ========================================================================== */

/* в макете Club (708px) переходит в «Наші Цінності» без зазора:
   нижняя отбивка целиком приходится на pb текстовой колонки */
.club{padding-bottom:0}

.club__inner{
  display:flex;
  align-items:center;
  gap:20px;
}

.club__text{
  display:flex;
  flex-direction:column;
  gap:40px;
  flex:1 0 0;
  min-width:0;
  padding-block:60px 80px;
  border-top:1px solid var(--divider-1);
}

.club__head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:40px;
}

.club__title{max-width:590px}

.club__item{
  display:flex;
  gap:30px;
  align-items:flex-start;
  padding-block:20px;
  padding-right:80px;
  border-top:1px solid var(--divider-1);
  font-family:var(--font-sans);
  font-size:var(--paragraph-size);
  line-height:var(--paragraph-lh);
  letter-spacing:var(--paragraph-ls);
}

.club__num{font-weight:700;color:var(--text-paragraph);white-space:nowrap}
.club__copy{flex:1 0 0;min-width:0;color:var(--text-headline)}

/* в макете колонки Club равные: 590 + 20 + 590 = 1200 */
.club__figure{flex:0 0 590px;max-width:590px}
.club__figure img{
  width:100%;
  height:660px;
  object-fit:cover;
  border-radius:30px;
}

/* ==========================================================================
   Цінності — 1:3702 (в макете фрейм называется Specifications table)
   ========================================================================== */

.values{padding-bottom:80px}

.values__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
  /* в макете здесь 20px, но по просьбе заказчика отбивка от линии
     сверху выровнена с «Чому Падел?» и «Події» — там 80px */
  padding-top:80px;
  padding-bottom:20px;
  border-top:1px solid var(--divider-1);
}

.values__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  max-width:850px;
  text-align:center;
}

.values__list{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  width:100%;
}

.value{
  display:flex;
  flex-direction:column;
  gap:20px;
  flex:1 0 0;
  min-width:166px;
  padding-block:20px;
}

.value__media{display:block;width:100%}
.value__media img{
  width:100%;
  height:262px;
  object-fit:cover;
  border-radius:30px;
}

.value__name{color:var(--text-headline)}
.value__desc{color:var(--text-headline)}

/* ==========================================================================
   Засновниці — 1:3735 (в макете Testimonial section)
   ========================================================================== */

.founders{padding-bottom:80px}

.founders__inner{
  display:flex;
  align-items:stretch;
  gap:20px;
}

.founders__figure{flex:0 0 599px;max-width:599px}
.founders__figure img{
  width:100%;
  height:680px;
  object-fit:cover;
  border-radius:30px;
}

.founders__quote{
  display:flex;
  flex-direction:column;
  align-items:flex-start;   /* иначе лаймовая плашка растягивается на всю колонку */
  justify-content:center;
  gap:50px;
  flex:1 1 auto;
  min-width:0;
  padding-left:50px;
  border-top:1px solid var(--divider-1);
}

.founders__text{color:var(--text-headline)}

.founders__mission{
  display:flex;
  flex-direction:column;
  gap:1.4em;
  font-family:var(--font-sans);
  font-size:var(--paragraph-size);
  line-height:var(--paragraph-lh);
  letter-spacing:var(--paragraph-ls);
  color:var(--text-headline);
}

.founders__people{
  display:flex;
  flex-direction:column;
  gap:12px;
  font-family:var(--font-sans);
  font-size:var(--paragraph-size);
  line-height:var(--paragraph-lh);
  letter-spacing:var(--paragraph-ls);
}

.founders__people li{display:flex;gap:50px;align-items:flex-start}
.founders__name{color:var(--text-headline)}

.founders__handle{
  color:var(--text-paragraph);
  text-decoration:underline;
  text-decoration-skip-ink:auto;
  transition:color .2s var(--ease);
}
.founders__handle:hover{color:var(--accent-1)}

/* ==========================================================================
   Як приєднатися — 1:3753
   Ряд шагов повторяет hero: те же .steps / .step
   ========================================================================== */

.connect{padding-bottom:80px}

.connect__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
}

.connect__head{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:850px;
  text-align:center;
}

.connect__kicker{
  font-family:var(--font-sans);
  font-weight:400;
  font-size:var(--paragraph-size);
  line-height:var(--paragraph-lh);
  letter-spacing:var(--paragraph-ls);
  color:var(--text-paragraph);
}

.connect .steps{margin-top:0;width:100%}

/* ==========================================================================
   Події — 1:4002 (в макете второй Specifications table)
   ========================================================================== */

.events{padding-bottom:60px}

.events__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
  padding-top:80px;
  border-top:1px solid var(--divider-1);
}

.events__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  max-width:850px;
  text-align:center;
}

.events__list{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  width:100%;
}

.event{
  display:flex;
  flex-direction:column;
  gap:20px;
  flex:1 0 0;
  min-width:166px;
  padding:40px 20px 40px 0;
}

.event__emoji{
  font-family:var(--font-sans);
  font-size:34px;
  line-height:1.4;
  letter-spacing:-.005em;
  color:var(--text-paragraph);
}

.event__name,
.event__desc{color:var(--text-headline)}

/* ==========================================================================
   Галерея — 1:4038
   Четыре колонки с разной высотой карточек: высота приходит инлайном
   из макета через --h, чтобы не плодить пятнадцать классов.
   ========================================================================== */

.gallery{padding-bottom:120px}

.gallery__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  align-items:start;
}

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

.gallery__pic{display:block}

.gallery__img{
  width:100%;
  height:var(--h);
  object-fit:cover;
  border-radius:30px;
}

/* ==========================================================================
   Ribbon — 1:4059 (в макете How it works section)
   ========================================================================== */

.ribbon{
  padding-top:20px;
  padding-bottom:100px;
}

.ribbon__kicker{
  margin-bottom:12px;
  font-family:var(--font-sans);
  font-weight:400;
  font-size:var(--paragraph-size);
  line-height:var(--paragraph-lh);
  letter-spacing:var(--paragraph-ls);
  color:var(--text-paragraph);
  text-align:center;
}

/* вторая лента едет навстречу первой */
.marquee__inner--reverse{animation-direction:reverse}

/* ==========================================================================
   Partners — 1:4077
   ========================================================================== */

.partners{padding-bottom:80px}

.partners__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
  padding-top:20px;
  text-align:center;
}

.partners__title{max-width:686px}

.partners__offer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
  max-width:444px;
  width:100%;
}

.partners__offer-title{color:var(--text-headline)}

.partners__list{
  list-style:disc;
  padding-left:27px;
  margin-top:-28px;          /* внутренний зазор блока — 12px, внешний — 40px */
  text-align:left;
  font-family:var(--font-sans);
  font-size:var(--paragraph-size);
  line-height:var(--paragraph-lh);
  letter-spacing:var(--paragraph-ls);
  color:var(--text-headline);
}

.partners__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

/* ==========================================================================
   FAQ — 1:4089, компонент FAQ-item 1:4094…1:4100
   Разметка на <details>: раскрытие работает и без JS.
   ========================================================================== */

.faq{padding-bottom:100px}

.faq__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
  padding-top:20px;
  text-align:center;
}

.faq__title{max-width:686px}

.faq__list{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  max-width:800px;
  text-align:left;
}

.faq__item{
  border:1px solid var(--divider-1);
  border-radius:12px;
  background:var(--bg-1);
}

.faq__q{
  display:flex;
  align-items:center;
  gap:8px;
  padding:16px;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-sans);
  font-weight:800;
  font-size:var(--body-size);
  line-height:1.4;
  letter-spacing:-.005em;
  color:var(--text-headline);
}
.faq__q::-webkit-details-marker{display:none}

.faq__icon{
  flex-shrink:0;
  width:24px;height:24px;
  margin-left:auto;
  fill:currentColor;
}
.faq__icon-v{transition:opacity .2s var(--ease), transform .2s var(--ease);transform-origin:center}
.faq__item[open] .faq__icon-v{opacity:0;transform:rotate(90deg)}

.faq__a{
  display:flex;
  flex-direction:column;
  gap:1.4em;
  padding:0 16px 16px;
  font-family:var(--font-sans);
  font-size:var(--body-size);
  line-height:var(--body-lh);
  color:var(--cool-gray-90);
}

/* ==========================================================================
   Footer — 1:4101
   Контейнер содержимого в макете 1072px внутри секции 1200px.
   ========================================================================== */

.footer{padding-bottom:60px}

.footer__inner{
  display:flex;
  flex-direction:column;
  gap:12px;              /* низ контейнера y=203, строка копирайта y=215 */
}

.footer__top,
.footer__bottom{
  width:100%;
  max-width:1072px;
  margin-inline:auto;
}

.footer__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
  padding-block:40px;
  border-bottom:1px solid var(--divider-1);   /* разделитель над копирайтом */
}

/* логотип и дескриптор стоят в строку: лого 0…73, текст с x=136.
   По вертикали оба центрируются в блоке высотой 100 — как в макете. */
.footer__brand{
  display:flex;
  align-items:center;
  gap:63px;
  min-height:100px;
  max-width:320px;
}

.footer__logo{width:73px;height:auto;flex-shrink:0}

.footer__descriptor{
  width:180px;
  font-family:var(--font-sans);
  font-size:var(--link-size);
  line-height:var(--link-lh);
  letter-spacing:var(--link-ls);
  color:var(--text-paragraph);
}

.footer__nav{display:flex;gap:40px}

.footer__col{width:220px}

.footer__col-title{
  padding-bottom:16px;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:var(--body-size);
  line-height:1.45;
  letter-spacing:-.005em;
  color:var(--text-headline);
}

.footer__col ul{display:flex;flex-direction:column;gap:8px}

.footer__col a{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:var(--link-size);
  line-height:var(--link-lh);
  letter-spacing:var(--link-ls);
  color:var(--text-paragraph);
  transition:color .2s var(--ease);
}
.footer__col a:hover{color:var(--accent-1)}

.footer__bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}

.footer__copy,
.footer__made{
  font-family:var(--font-sans);
  font-size:12px;
  line-height:1.4;
  letter-spacing:-.005em;
  color:var(--text-paragraph);
}

.footer__made{display:flex;align-items:flex-end;gap:6px}
.footer__made img{width:31px;height:31px}

/* ==========================================================================
   Адаптив
   Макет: Desktop 1280 (поля 40), Tablet 800 (поля 40), Mobile 375 (поля 16).
   Кегли заголовков выведены из ink-высот текстовых узлов макета
   (отношение ink/кегль у Orelega One ≈ 0.79):
     Display  140 → 114 → 92
     Heading1  90 →  64 → 44
   ========================================================================== */

/* ---------- Планшет и ниже: до 1023px ---------------------------------- */
@media (max-width: 1023px){

  .hero__title{font-size:min(114px, calc((100vw - var(--gutter) * 2) * .162))}
  .h1{font-size:64px}

  /* на планшете абсолютное центрирование наезжает на кнопку —
     возвращаем меню в поток, в макете его пилюля тоже уже (434 против 454) */
  .nav__menu{position:static;transform:none;margin-inline:auto}
  .nav__list{gap:22px;padding-inline:20px}

  /* фото в hero перестаёт выступать так далеко */
  .hero__media{height:auto;aspect-ratio:1089/550;margin-top:32px}
  .hero__plate{top:12%;height:76%}
  .hero__photo{height:100%}

  .steps{gap:12px}
  .step{padding:20px 8px}

  /* двухколоночные блоки складываются в стопку */
  .club__inner,
  .founders__inner{flex-direction:column;align-items:stretch}

  .club__head,
  .club__item{padding-right:0}

  .club__figure{flex:0 0 auto;max-width:none;width:100%}
  .club__figure img{height:auto;aspect-ratio:853/660}

  .founders__figure{flex:0 0 auto;max-width:none;width:100%}
  .founders__figure img{height:auto;aspect-ratio:599/680}

  .founders__quote{padding-left:0;padding-top:40px;gap:32px}

  .benefits__inner{gap:40px;padding-top:60px}
  .benefits__figure img{aspect-ratio:720/480}

  .value__media img{height:200px}

  .footer__top{flex-direction:column;gap:40px}
}

/* ---------- Навигация сворачивается в бургер ниже планшетного фрейма ----
   На 800px макет ещё показывает полное меню: 5 пунктов + логотип + кнопка
   укладываются в 720px контента. Ниже — бургер. */
@media (max-width: 799px){
  .nav__menu,
  .nav__cta{display:none}
  .nav__burger{display:flex}
}

/* ---------- Мобильный: до 639px ----------------------------------------
   Всё ниже выверено по фрейму Mobile 375 (1:251): поля 16, у футера 24.
   ---------------------------------------------------------------------- */
@media (max-width: 639px){

  :root{--gutter:16px}

  /* Display — 3 строки в 343px; H1 — 2 строки по 47 (кегль 52) */
  .hero__title{font-size:min(92px, calc((100vw - var(--gutter) * 2) * .268))}
  .h1{font-size:52px}

  /* --- hero: подложка 343x249, фото 296x318 со сдвигом вверх ---------- */
  .hero{padding-bottom:48px}
  .hero__media{height:318px;aspect-ratio:auto;margin-top:80px}
  .hero__plate{top:38.91px;height:249px}
  .hero__photo{top:0;left:24px;right:23px;height:318px}

  /* --- пилюли лент: 95px высоты при кегле 60 и поле 20 ---------------- */
  .marquee{margin-top:60px}
  .marquee--tight{margin-top:40px}
  .pill{padding:20px;font-size:60px}
  .pill--icon img{width:32px;height:32px}
  .pill--emoji{font-size:32px}

  /* --- три шага под hero: в столбик, каждый 126 ----------------------- */
  .steps{flex-direction:column;gap:0}
  .step{flex:1 1 auto;min-width:0;width:100%;padding:20px 0}

  /* --- логотипы партнёров: сетка 3x2 по 100x55 ------------------------ */
  .logos{padding-block:50px}
  .logos__title{margin-bottom:30px}
  .logos__row{
    display:grid;
    grid-template-columns:repeat(3,100px);
    justify-content:center;
    gap:8px;
  }
  .logos__item{width:100px;height:55px;padding:0}

  /* --- Benefits: пункты в две колонки, карточка 166x116 --------------- */
  .benefits{padding-bottom:64px}
  .benefits__inner{gap:50px;padding-top:80px}
  .benefits__lead{margin-top:18px}
  .benefits__figure img{aspect-ratio:343/229}
  .benefits__list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  .benefit{flex:none;min-width:0;padding:12px;gap:20px}
  .benefit__emoji{font-size:26px}
  .benefits__quote{max-width:none}

  /* --- Цінності: одна колонка, картинка 360 --------------------------- */
  .values{padding-bottom:20px}
  .values__inner{gap:40px;padding-top:20px}
  .values__list{display:flex;flex-direction:column;gap:10px}
  .value{flex:none;min-width:0;width:100%;padding-block:20px;gap:20px}
  .value__media img{height:400px}
  /* в макете подпись и описание карточки выключены по центру */
  .value{align-items:center;text-align:center}
  .value__desc{letter-spacing:var(--paragraph-ls)}

  /* --- Club: текст, следом картинка 343x385 --------------------------- */
  .club{padding-bottom:80px}
  .club__inner{gap:0}
  .club__text{padding-block:60px 0;gap:40px}
  .club__head{gap:40px}
  .club__head .eyebrow{align-self:center}
  .club__item{padding-block:15px;padding-right:0;gap:30px}
  .club__figure img{height:auto;aspect-ratio:343/385}

  /* --- Засновниці: фото 343x460, следом цитата ------------------------ */
  .founders{padding-bottom:60px}
  .founders__inner{gap:40px}
  .founders__figure img{height:auto;aspect-ratio:343/460}
  .founders__quote{padding-inline:16px;padding-top:0;gap:50px;border-top:none}
  /* в макете цитата укладывается в 4 строки; веб-Caveat шире — чуть уменьшаем */
  .founders__text{font-size:34px}
  /* миссия и подписи в макете набраны мельче базовых 18px */
  .founders__mission{font-size:15px;gap:1em}
  .founders__people{gap:12px;font-size:15px}
  /* хендлы выровнены в общую колонку, как в макете */
  .founders__people li{display:grid;grid-template-columns:145px 1fr;gap:12px;align-items:baseline}

  /* --- Як приєднатися: три локапа по 126, без зазоров ----------------- */
  .connect{padding-block:60px}
  .connect__inner{gap:40px}

  /* --- Події: две колонки, карточка 164x182 --------------------------- */
  .events{padding-bottom:60px}
  .events__inner{gap:40px;padding-top:60px}
  .events__list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }
  .event{flex:none;min-width:0;padding:20px 0;gap:20px}
  .event__emoji{font-size:26px}
  /* в карточке события описание набрано мельче базового 18px */
  .event__desc{font-size:14px}

  /* --- галерея: колонки друг под другом, свои высоты ------------------ */
  .gallery{padding-bottom:0}
  .gallery__grid{grid-template-columns:1fr;gap:6px}
  .gallery__img{height:var(--hm, var(--h))}

  .ribbon{padding-top:20px;padding-bottom:60px}
  .ribbon .marquee{margin-top:0}

  /* --- Partners ------------------------------------------------------- */
  .partners{padding-bottom:20px}
  .partners__inner{padding-top:20px;gap:40px}
  .partners__offer{gap:40px;max-width:none}
  /* пункты списка в макете по 20px на строку — это 14px кегль */
  .partners__list{margin-top:-28px;padding-left:20px;font-size:14px}
  /* в макете обе кнопки стоят в строку и вылезают за 343px — ставим в столбик */
  .partners__actions{flex-direction:column;align-items:stretch;width:100%;gap:12px}
  .partners__actions .btn{width:100%}

  /* --- FAQ ------------------------------------------------------------ */
  .faq{padding-bottom:20px}
  .faq__inner{padding-top:20px;gap:40px}
  .faq__q{font-size:15px;padding:16px}

  /* --- футер: поля 24, бренд и колонки остаются в строку -------------- */
  .footer{padding-bottom:40px}
  .footer__inner{gap:12px}
  .footer__top{padding-block:64px 20px;gap:20px}
  .footer__brand{gap:32px;max-width:none;min-height:100px}
  .footer__logo{width:75px}
  .footer__descriptor{width:212px}
  .footer__nav{flex-direction:row;gap:42px}
  .footer__col{width:auto}
  .footer__bottom{flex-direction:row;align-items:flex-end;gap:20px}
}

/* поля футера на мобилке шире, чем у остальных секций: 24 против 16 */
@media (max-width: 639px){
  .footer .container{padding-inline:24px}
}