/* Typefaces, served from kordar.ai itself.
 *
 * The page used to pull them from fonts.googleapis.com. kordar.ai sends
 * `style-src 'self'` and `font-src 'self'`, which blocks that stylesheet
 * outright — measured, not assumed: the page fell back to Georgia and
 * system-ui and lost its typography entirely.
 *
 * Regenerate with: python3 site/make-fonts.py alina
 */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-300i-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-300i-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-300i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-300-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/golos-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/golos-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/golos-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/golos-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/golos-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/golos-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jbmono-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jbmono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jbmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Алина · теннис · Варшава
   Палитра: частный теннисный клуб — тёплый чёрный, латунь, мох, глина.
   ========================================================================== */

:root{
  --ink:#0b0a09;          /* тёплый чёрный — основной фон */
  --soot:#141210;         /* панели */
  --moss:#1a231c;         /* глубокий клубный зелёный */
  --bone:#efe9de;         /* тёплый белый — текст */
  --brass:#c2a15c;        /* латунь — главный акцент */
  --brass-hi:#f0dda8;     /* блик на латуни */
  --clay:#9e5b3c;         /* приглушённая глина — корт */
  /* Та же глина, поднятая до читаемой. На #0b0a09 исходная даёт
     3.78:1 — ниже порога 4.5 для мелкого текста; здесь 4.75.
     Отдельным токеном, а не правкой --clay: в градиенте, в рамке и
     в счёте 0:0 исходная работает и менять её незачем. */
  --clay-text:#b26a45;
  --mute:#8b8375;         /* тёплый серый — подписи */
  --hair:rgba(239,233,222,.13);

  --disp:'Cormorant Garamond',Georgia,serif;
  --body:'Golos Text',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,5vw,72px);
  --rail:84px;
  --max:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font:400 1.0625rem/1.7 var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;   /* clip, а не hidden: hidden оставляет страницу прокручиваемой вбок */
}
body.is-locked{overflow:hidden;height:100vh}

h1,h2,h3{margin:0;font-family:var(--disp);font-weight:300;letter-spacing:-.012em;line-height:1.02}
h1{font-size:clamp(2.7rem,6.6vw,5.8rem)}
h2{font-size:clamp(2.1rem,5vw,4.2rem)}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:focus-visible{outline:1px solid var(--brass);outline-offset:5px;border-radius:2px}

/* ── фактура: струны, прожекторы, зерно, виньетка ─────────────────── */

/* струнная сетка ракетки — держит всю страницу, чтобы фон не был пустым.
   Основные струны чуть плотнее поперечных, как на настоящем ракеточном полотне. */
.strings{
  position:fixed;inset:0;z-index:-10;pointer-events:none;overflow:hidden;
  mask-image:radial-gradient(130% 85% at 50% 28%,#000 25%,rgba(0,0,0,.4) 72%,transparent);
}
/* Статичная сетка — то, что видно без JS. С JS её заменяет живой холст. */
.strings::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(90deg,rgba(194,161,92,.055) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(0deg,rgba(194,161,92,.04) 0 1px,transparent 1px 26px);
}
.strings.is-live::before{display:none}
.strings canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* прожекторы: два световых конуса с боков, как на вечернем корте */
.lights{position:fixed;inset:0;z-index:-9;pointer-events:none;overflow:hidden}
/* без filter:blur — на телефоне это самый дорогой эффект на странице;
   мягкость даёт сам градиент */
.lights i{
  position:absolute;top:-26vh;width:52vw;height:160vh;display:block;
  background:radial-gradient(ellipse 52% 46% at 50% 2%,
    rgba(240,221,168,.26) 0%,rgba(212,180,120,.15) 22%,rgba(194,161,92,.07) 44%,
    rgba(194,161,92,.025) 62%,transparent 80%);
  animation:flicker 9s ease-in-out infinite alternate;
}
.lights__l{left:-19vw;transform:rotate(13deg);transform-origin:top center}
.lights__r{right:-19vw;transform:rotate(-13deg);transform-origin:top center;animation-delay:-4.5s}
@keyframes flicker{0%{opacity:.85}55%{opacity:1}100%{opacity:.9}}

/* ── зерно и виньетка ─────────────────────────────────────────────── */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed;inset:0;z-index:59;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55));
}

/* ── полоса прогресса чтения ──────────────────────────────────────── */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:58;pointer-events:none}
.progress i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--clay),var(--brass) 60%,var(--brass-hi));
}

/* ── открывающая сцена ────────────────────────────────────────────── */
.intro{
  position:fixed;inset:0;z-index:100;background:var(--ink);
  display:grid;place-items:center;
}
.intro__inner{display:flex;flex-direction:column;align-items:center;gap:26px;width:min(420px,74vw)}
.intro__label{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);
}
.intro__score{
  font-family:var(--disp);font-weight:300;font-size:clamp(3.5rem,11vw,6rem);line-height:1;
  color:var(--brass);
}
.intro__line{width:100%;height:1px;background:var(--hair);overflow:hidden}
.intro__line i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--brass)}

/* ── шапка ────────────────────────────────────────────────────────── */
.top{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:clamp(16px,4vw,48px);
  padding:20px var(--pad);
  transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.top.is-stuck{
  background:rgba(11,10,9,.82);backdrop-filter:blur(14px) saturate(1.2);
  padding-top:13px;padding-bottom:13px;border-bottom-color:var(--hair);
}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none;margin-right:auto}
.brand__name{font-family:var(--disp);font-size:1.45rem;letter-spacing:.01em}
.brand__role{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.top__nav{display:flex;gap:28px}
.top__nav a{
  font-size:.88rem;text-decoration:none;color:var(--mute);position:relative;padding-bottom:3px;
  transition:color .4s var(--ease);
}
.top__nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--brass);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease);
}
.top__nav a:hover{color:var(--bone)}
.top__nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* ── счёт-рейл ────────────────────────────────────────────────────── */
.rail{
  position:fixed;left:0;top:50%;translate:0 -50%;z-index:50;
  display:flex;flex-direction:column;align-items:flex-start;gap:24px;
  padding-left:var(--pad);
}
.rail__pt{
  display:flex;align-items:center;gap:11px;text-decoration:none;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--mute);
  opacity:.4;transition:opacity .6s var(--ease),color .6s var(--ease);
}
.rail__pt::before{content:"";width:14px;height:1px;background:currentColor;transition:width .7s var(--ease)}
.rail__pt.is-on{opacity:1;color:var(--brass)}
.rail__pt.is-on::before{width:34px}

/* ── общие блоки ──────────────────────────────────────────────────── */
.sec{
  position:relative;
  max-width:var(--max);margin-inline:auto;
  padding:clamp(96px,15vh,190px) var(--pad);
  padding-left:calc(var(--pad) + var(--rail));
  scroll-margin-top:90px;
}
.eyebrow{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mute);margin-bottom:34px;
}
.eyebrow b{color:var(--brass);font-weight:500;margin-right:16px}
.sec__h{max-width:20ch}
.lede{max-width:48ch;color:var(--mute);font-size:clamp(1rem,1.5vw,1.15rem);margin-top:26px}
.note{margin-top:30px;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--mute)}

/* латунный блик — на ключевых цифрах */
.sheen{
  background:linear-gradient(100deg,var(--brass) 20%,var(--brass-hi) 42%,var(--brass) 60%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 7s linear infinite;
}
@keyframes sheen{to{background-position:-280% 0}}

/* заголовки разрезаются на слова и выезжают из-под маски */
.wordmask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.word{display:inline-block}
/* will-change держим только на том, что реально едет постоянно —
   на каждом блоке это лишний слой в памяти */
.quotes__track,.progress i{will-change:transform}

/* шторка и масштаб фото — Motion гонит эти переменные */
@property --img-scale{syntax:'<number>';inherits:true;initial-value:1.14}
@property --wipe{syntax:'<percentage>';inherits:true;initial-value:100%}

/* Картинки открываются шторкой снизу вверх.
   ВАЖНО: обрезаем внутренний слой, а не сам блок — clip-path на элементе
   обнуляет его площадь для IntersectionObserver, и появление не срабатывает. */
.reveal-img{margin:0;position:relative;overflow:hidden;background:var(--moss)}
.reveal-img::before{
  content:"";position:absolute;inset:0;
  background-image:var(--photo);background-size:cover;background-position:center;
  transform:scale(var(--img-scale,1.14));
  clip-path:inset(var(--wipe,100%) 0 0 0);
}
.reveal-img::after{
  content:"";position:absolute;inset:14px;border:1px solid rgba(239,233,222,.14);border-top-width:0;
}

/* ── 0 · герой ────────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;
  /* строка 1 тянется — контенту достаётся центр, полоса доверия прижата вниз */
  display:grid;grid-template-rows:1fr auto;align-content:stretch;
  max-width:var(--max);margin-inline:auto;
  padding:118px var(--pad) 34px;
  padding-left:calc(var(--pad) + var(--rail));
  scroll-margin-top:0;
}

/* Корт заканчивается ВЫШЕ полосы доверия — иначе его линии режут цифры. */
/* корт живёт ниже текста — фото теперь несёт первый экран,
   а разметка только подписывает сцену */
.court{
  position:absolute;left:0;right:0;bottom:126px;z-index:-3;pointer-events:none;
  width:100%;height:min(48%,400px);opacity:.72;
}
.arc__line{stroke:url(#arcFade);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ball{fill:var(--brass-hi);opacity:0}
.ball__glow{opacity:0;transform-box:fill-box;transform-origin:center}

.hero__grid{
  align-self:center;position:relative;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(28px,5vw,64px);align-items:center;
}
.hero__body{position:relative}

/* Фото — главный якорь первого экрана. Латунная рамка со смещённой тенью-рамкой
   привязывает его к сетке сайта, тёплая градация подгоняет цвет под палитру. */
.hero__shot{
  position:relative;margin:0;aspect-ratio:4/5;
  border:1px solid rgba(194,161,92,.45);
  box-shadow:0 34px 100px rgba(0,0,0,.66),0 0 0 1px rgba(11,10,9,.9);
  isolation:isolate;
}
.hero__shot::before{filter:saturate(.92) contrast(1.06) brightness(.98)}
/* вторая рамка со сдвигом — как разметка корта вокруг кадра */
.hero__shot::after{
  content:"";position:absolute;z-index:3;pointer-events:none;
  inset:-14px -14px 14px 14px;
  border:1px solid rgba(194,161,92,.28);border-width:1px 1px 0 0;
}
.hero__shot figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:54px 18px 15px;
  background:linear-gradient(0deg,rgba(11,10,9,.95) 12%,rgba(11,10,9,.5) 55%,transparent);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);
}
/* верх кадра растворяется в фоне — фото не выглядит наклейкой */
.hero__shot .veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,10,9,.42),transparent 26%);
}

.score{
  font-family:var(--disp);font-weight:300;
  font-size:clamp(2.8rem,7vw,5.4rem);line-height:.9;letter-spacing:-.03em;
  margin:0 0 6px;
}
.score i{font-style:normal;color:var(--clay);margin:0 .1em}
h1 .word{display:inline-block}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:36px}

/* полоса доверия — ровная сетка с разделителями, ничего сквозь неё не идёт */
.trust{
  position:relative;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--hair);border-top:1px solid var(--hair);
}
.trust li{background:var(--ink);padding:26px 24px 4px;display:flex;flex-direction:column}
.trust li:first-child{padding-left:0;background:linear-gradient(90deg,var(--ink) 92%,var(--ink))}
.trust b{
  display:flex;align-items:baseline;font-family:var(--disp);font-weight:300;
  font-size:clamp(1.7rem,3vw,2.5rem);line-height:1;color:var(--brass);
  font-variant-numeric:lining-nums tabular-nums;
}
.trust em{font-style:normal}
/* только прямой потомок li — иначе правило съедало цифру внутри <b> */
.trust li > span{
  display:block;margin-top:10px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
}

/* ── кнопки и ссылки ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;white-space:nowrap;
  font-family:var(--body);font-weight:500;font-size:.95rem;letter-spacing:0;
  min-height:50px;padding:0 28px;border-radius:3px;border:1px solid transparent;
  background:linear-gradient(145deg,var(--brass-hi),var(--brass) 52%,#a5804a);
  color:#17130c;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 26px rgba(0,0,0,.35);
  transition:box-shadow .45s var(--ease),transform .45s var(--ease),filter .45s var(--ease);
}
.btn:hover{filter:brightness(1.07);box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 16px 40px rgba(194,161,92,.28)}
.btn:active{transform:translateY(1px)}
.btn--sm{min-height:40px;padding:0 20px;font-size:.86rem}
.btn--big{min-height:58px;padding:0 34px;font-size:1rem}

.btn--ghost{
  background:none;color:var(--bone);
  border-color:rgba(239,233,222,.26);box-shadow:none;
}
.btn--ghost:hover{
  border-color:var(--brass);color:var(--brass-hi);
  background:rgba(194,161,92,.07);box-shadow:none;filter:none;
}

.ic{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* фирменные глифы рисуются заливкой, а не обводкой */
.ic--solid{fill:currentColor;stroke:none;width:18px;height:18px}

.link{
  font-family:var(--body);font-size:.95rem;color:var(--mute);text-decoration:none;
  border-bottom:1px solid rgba(139,131,117,.45);padding-bottom:3px;
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.link:hover{color:var(--brass);border-color:var(--brass)}

/* ── 15 · кто ─────────────────────────────────────────────────────── */
/* фото тянется на всю высоту текста — иначе под ним остаётся дыра */
.who{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(30px,5vw,80px);align-items:stretch}
.who__photo{
  min-height:100%;align-self:stretch;
  border:1px solid rgba(194,161,92,.28);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.who__photo::before{background-position:center 22%;filter:saturate(.92) contrast(1.05)}
.who__text{display:flex;flex-direction:column;gap:24px}
.who__text h2{font-size:clamp(1.8rem,3.4vw,3rem);max-width:18ch}
.who__text p{color:var(--mute);max-width:54ch}
/* главное в тексте — светлее фона и подчёркнуто латунью */
.hl{
  color:var(--bone);font-weight:500;
  box-shadow:inset 0 -1px 0 rgba(194,161,92,.45);
}
.sign{
  font-family:var(--disp);font-style:italic;font-size:2.2rem;color:var(--brass);
  margin-top:4px;line-height:1;
}

.facts{display:flex;flex-direction:column;margin:14px 0 0;border-top:1px solid var(--hair)}
.facts div{
  display:flex;gap:20px;justify-content:space-between;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--hair);
}
.facts dt{font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);flex:0 0 auto}
.facts dd{margin:0;text-align:right;font-size:.95rem}
.facts--wide{margin-top:60px}

/* навыки — то, чему она учит */
.skills{
  list-style:none;margin:clamp(50px,7vh,80px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;
}
.skills li{
  padding:11px 20px;border:1px solid var(--hair);border-radius:100px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  transition:border-color .5s var(--ease),color .5s var(--ease);
}
.skills li:hover{border-color:var(--brass);color:var(--bone)}

/* ── 30 · программы (аккордеон с FLIP) ────────────────────────────── */
.prog{margin-top:56px;border-top:1px solid var(--hair)}
.prog__row{border-bottom:1px solid var(--hair)}
.prog__head{
  width:100%;display:grid;align-items:center;gap:clamp(14px,3vw,40px);
  grid-template-columns:auto 1fr auto auto 22px;
  padding:30px 0;text-align:left;
  transition:padding-left .6s var(--ease);
}
.prog__row:hover .prog__head{padding-left:14px}
.prog__num{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--clay-text)}
.prog__name{font-family:var(--disp);font-size:clamp(1.5rem,3vw,2.5rem);font-weight:300;line-height:1.1}
.prog__len{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.prog__price{font-family:var(--disp);font-size:clamp(1.3rem,2.2vw,1.9rem);color:var(--brass);white-space:nowrap}
.prog__price i{font-style:normal;font-size:.62em;color:var(--mute);margin-left:5px}
.prog__plus{position:relative;width:16px;height:16px;justify-self:end}
.prog__plus::before,.prog__plus::after{
  content:"";position:absolute;inset:50% 0 auto 0;height:1px;background:var(--bone);
  transition:transform .6s var(--ease),background .6s var(--ease);
}
.prog__plus::after{transform:rotate(90deg)}
.prog__row[data-open="true"] .prog__plus::after{transform:rotate(0)}
.prog__row[data-open="true"] .prog__plus::before,
.prog__row[data-open="true"] .prog__plus::after{background:var(--brass)}
.prog__body{height:0;overflow:hidden}
.prog__inner{padding:0 0 34px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px 60px;color:var(--mute)}
.prog__inner p{max-width:46ch}
.prog__inner ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.prog__inner li{position:relative;padding-left:22px;font-size:.95rem}
.prog__inner li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:1px;background:var(--brass)}

/* прозрачная цена: тренер + корт = итого */
.price{
  margin-top:clamp(56px,8vh,90px);
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:clamp(14px,2vw,26px);
}
.price__box{
  padding:32px 28px;border:1px solid var(--hair);background:var(--soot);
  display:flex;flex-direction:column;gap:8px;
}
.price__val{font-family:var(--disp);font-weight:300;font-size:clamp(2rem,3.4vw,3rem);line-height:1;color:var(--brass)}
.price__val i{font-style:normal;font-size:.36em;color:var(--mute);margin-left:6px;letter-spacing:.04em}
.price__cap{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone)}
.price__note{color:var(--mute);font-size:.9rem;margin-top:4px}

/* итоговая карточка — латунь и чёрный текст сайта */
.price__box--sum{
  background:linear-gradient(150deg,var(--brass-hi),var(--brass) 58%,#a8834a);
  border-color:transparent;color:var(--ink);
}
.price__box--sum .price__val,
.price__box--sum .price__cap{color:var(--ink)}
.price__box--sum .price__note{color:rgba(11,10,9,.72)}
.price__op{
  align-self:center;font-family:var(--disp);font-size:2rem;color:var(--mute);
}

/* ── 40 · шаги ────────────────────────────────────────────────────── */
.steps{
  list-style:none;margin:60px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--hair);border-block:1px solid var(--hair);
  counter-reset:step;
}
.steps li{background:var(--ink);padding:34px 26px 40px;display:flex;flex-direction:column;gap:12px}
.steps__ic{display:block;width:46px;height:46px;margin-bottom:6px}
.steps__ic svg{
  width:100%;height:100%;fill:none;
  stroke:var(--brass);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.steps__n{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;color:var(--mute)}
.steps h3{font-family:var(--disp);font-size:1.55rem;font-weight:300}
.steps p{color:var(--mute);font-size:.94rem}
/* стрелка от шага к шагу — видно, что это последовательность */
.steps li:not(:last-child)::after{
  content:"";position:absolute;
  width:22px;height:1px;background:linear-gradient(90deg,var(--brass),transparent);
}
.steps li{position:relative}
.steps li:not(:last-child)::after{right:-11px;top:56px}

.gains-wrap{margin-top:clamp(70px,10vh,120px)}
.gains__h{font-size:clamp(1.7rem,3vw,2.6rem)}
.gains{list-style:none;margin:34px 0 0;padding:0;max-width:66ch}
.gains li{
  position:relative;padding:18px 0 18px 42px;border-bottom:1px solid var(--hair);
  font-size:clamp(1rem,1.6vw,1.15rem);
}
.gains li::before{
  content:"";position:absolute;left:6px;top:27px;width:7px;height:7px;border-radius:50%;
  background:var(--brass);
}

/* ── где занимаемся: схема Варшавы ────────────────────────────────── */
.courts{margin-top:clamp(70px,10vh,120px)}
.courts__h{font-size:clamp(1.7rem,3vw,2.6rem)}
.courts__sub{color:var(--mute);margin-top:12px}
.courts__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;
}
.place{
  display:flex;flex-direction:column;
  background:var(--soot);border:1px solid var(--hair);border-radius:3px;overflow:hidden;
  transition:border-color .5s var(--ease);
}
.place:hover{border-color:rgba(194,161,92,.4)}

/* карта настоящая (OpenStreetMap), перекрашена под сайт.
   Служебная полоса OSM снизу обрезается — атрибуция вынесена под сетку. */
.place__map{position:relative;aspect-ratio:4/3;background:var(--moss);overflow:hidden}
/* Служебную полосу OSM режем сверху и снизу поровну — так центр кадра
   (а значит и метка) остаётся ровно на адресе. */
.place__map img{
  position:absolute;top:-36px;left:0;width:100%;height:calc(100% + 72px);
  border:0;display:block;object-fit:cover;
  filter:invert(1) hue-rotate(188deg) saturate(.28) brightness(.86) contrast(1.04) sepia(.16);
}
.place__map::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 50%,transparent 40%,rgba(11,10,9,.55));
  mix-blend-mode:multiply;
}
/* прячем кнопки зума OSM: карта некликабельная, они только мешают */
.place__map::before{
  content:"";position:absolute;left:0;right:0;top:0;height:52px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,var(--soot) 26%,rgba(20,18,16,.75) 62%,transparent);
}
/* точка в центре кадра = адрес, на котором карта отцентрована */
.place__pin{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  width:14px;height:14px;border-radius:50%;
  background:var(--brass-hi);box-shadow:0 0 0 6px rgba(194,161,92,.22),0 0 18px rgba(240,221,168,.6);
}
.place__pin::after{
  content:"";position:absolute;inset:-13px;border-radius:50%;
  border:1px solid rgba(194,161,92,.5);
  animation:ping 2.8s ease-out infinite;
}
@keyframes ping{0%{transform:scale(.7);opacity:.9}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* Mokotów — не точка, а район: подсвечиваем область */
.place__area{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  width:64%;height:62%;border-radius:46% 54% 50% 50%/52% 48% 52% 48%;
  border:1px solid rgba(194,161,92,.65);
  background:rgba(194,161,92,.13);
  box-shadow:0 0 40px rgba(194,161,92,.2) inset;
  animation:breathe 5s ease-in-out infinite alternate;
}
@keyframes breathe{from{transform:scale(.97)}to{transform:scale(1.03)}}

/* карта кликается целиком и ведёт в Google Maps */
.place__map{display:block;text-decoration:none}
.place__map img{pointer-events:none}
.place__open{
  position:absolute;left:12px;bottom:12px;z-index:3;
  padding:7px 12px;border-radius:2px;
  background:rgba(11,10,9,.82);border:1px solid rgba(194,161,92,.4);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-hi);
  opacity:0;translate:0 6px;transition:opacity .4s var(--ease),translate .4s var(--ease);
}
.place__map:hover .place__open,.place__map:focus-visible .place__open{opacity:1;translate:0 0}

.place__body{padding:24px 22px 26px;display:flex;flex-direction:column;gap:9px;flex:1}
.place__name{font-family:var(--disp);font-size:1.5rem;line-height:1.1}
.place__addr{color:var(--bone);font-size:.94rem;line-height:1.5}
.place__meta{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
}
.place__link{
  margin-top:auto;padding-top:14px;align-self:flex-start;
  font-size:.9rem;color:var(--brass);text-decoration:none;
  border-bottom:1px solid rgba(194,161,92,.4);
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.place__link:hover{color:var(--brass-hi);border-color:var(--brass-hi)}
.place--soft{background:linear-gradient(160deg,rgba(194,161,92,.09),transparent 60%)}

.courts__attr{margin-top:18px;font-size:.78rem;color:var(--mute)}
.courts__attr a{color:var(--mute)}

/* ── отзывы ───────────────────────────────────────────────────────── */
.quotes-sec{padding-block:clamp(60px,9vh,110px)}
.quotes{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.quotes__track{display:flex;gap:18px;width:max-content;will-change:transform}
.quotes blockquote{
  flex:0 0 min(440px,78vw);margin:0;padding:34px 32px;
  background:var(--soot);border:1px solid var(--hair);border-left:1px solid var(--clay);
}
.quotes blockquote p{font-family:var(--disp);font-size:1.35rem;line-height:1.35}
.quotes cite{
  display:block;margin-top:18px;font-style:normal;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
}

/* ── гейм · запись ────────────────────────────────────────────────── */
.game{position:relative}
.game::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--brass),transparent 55%)}
.game__h{font-size:clamp(2.4rem,6.4vw,5.4rem);max-width:16ch}
.game__btns{display:flex;flex-wrap:wrap;gap:18px;margin-top:46px}
.game__btns .btn:hover{position:relative;z-index:2}

/* карточки «где / когда / цена / языки» */
.cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:60px;
  background:var(--hair);border-block:1px solid var(--hair);
}
.cards__it{
  background:var(--ink);padding:28px 24px 30px;
  display:flex;flex-direction:column;gap:7px;
  transition:background .5s var(--ease);
}
.cards__it:hover{background:var(--soot)}
.cards__ic{
  width:30px;height:30px;margin-bottom:10px;fill:none;
  stroke:var(--brass);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;
}
.cards__k{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.cards__v{font-family:var(--disp);font-size:1.85rem;line-height:1;color:var(--bone)}
.cards__v span{font-size:.42em;color:var(--mute);margin-left:3px}
.cards__s{font-size:.88rem;color:var(--mute)}

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq{margin-top:clamp(70px,10vh,120px)}
.faq__h{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:24px}
.faq__it{border-top:1px solid var(--hair)}
.faq__it:last-child{border-bottom:1px solid var(--hair)}
.faq__it button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;text-align:left;font-size:1.05rem}
.faq__it i{position:relative;width:14px;height:14px;flex:0 0 auto}
.faq__it i::before,.faq__it i::after{content:"";position:absolute;inset:50% 0 auto 0;height:1px;background:var(--mute);transition:transform .6s var(--ease),background .6s var(--ease)}
.faq__it i::after{transform:rotate(90deg)}
.faq__it[data-open="true"] i::after{transform:rotate(0)}
.faq__it[data-open="true"] i::before,.faq__it[data-open="true"] i::after{background:var(--brass)}
.faq__a{height:0;overflow:hidden}
.faq__a p{padding-bottom:24px;color:var(--mute);max-width:62ch}

/* ── подвал ───────────────────────────────────────────────────────── */
.foot__ig{color:var(--brass);text-decoration:none;border-bottom:1px solid rgba(194,161,92,.4)}
.foot__ig:hover{color:var(--brass-hi)}
.foot{
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
  max-width:var(--max);margin-inline:auto;
  padding:32px var(--pad);padding-left:calc(var(--pad) + var(--rail));
  border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
}

/* ── планшет ──────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .top__nav{display:none}
  .steps{grid-template-columns:repeat(2,1fr)}
  .prog__head{grid-template-columns:auto 1fr auto 20px;row-gap:6px}
  .prog__len{display:none}
  .price{grid-template-columns:1fr;gap:12px}
  .price__op{justify-self:center;font-size:1.5rem}
  .courts__grid{grid-template-columns:1fr 1fr}
  .hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
}

/* ── телефон ──────────────────────────────────────────────────────── */
@media (max-width:820px){
  :root{--rail:0px;--pad:20px}

  /* нижняя панель со счётом — крупные зоны нажатия */
  .rail{
    top:auto;bottom:0;left:0;right:0;translate:none;
    flex-direction:row;justify-content:space-between;gap:0;
    padding:0 12px calc(env(safe-area-inset-bottom));
    background:rgba(11,10,9,.95);border-top:1px solid var(--hair);
  }
  .rail__pt{flex:1;justify-content:center;min-height:52px;font-size:.72rem}
  .rail__pt::before{display:none}

  .top{padding:12px var(--pad);background:rgba(11,10,9,.9);gap:12px}
  .top.is-stuck{backdrop-filter:none}
  .brand__name{font-size:1.1rem;white-space:nowrap}
  .brand__role{display:none}
  .btn--sm{min-height:38px;padding:0 16px;font-size:.82rem}

  /* на телефоне воздух режем — иначе половина экрана уходит в пустоту */
  .sec{padding-block:clamp(64px,9vh,88px)}

  /* Первый экран рассчитан так, чтобы кнопка «Записаться на тренировку»
     помещалась без прокрутки: фото квадратом, заголовок и лид короче. */
  .hero{min-height:auto;padding-top:76px;padding-bottom:34px}
  .hero__grid{grid-template-columns:1fr;gap:16px}
  .hero__shot{aspect-ratio:1/1;order:-1}
  .hero__shot::before{background-position:center 32%}
  .hero__shot::after{inset:-8px -8px 8px 8px}
  .hero__shot figcaption{padding:40px 14px 11px;font-size:.54rem}
  .court{bottom:88px;height:min(30%,170px);opacity:.4}
  h1{font-size:clamp(1.95rem,8.4vw,2.5rem)}
  .score{font-size:clamp(2rem,11vw,2.6rem);margin-bottom:2px}
  .lede{margin-top:12px;font-size:.94rem;line-height:1.5}
  .hero__cta{margin-top:18px;gap:12px;flex-direction:column;align-items:stretch}
  .hero__cta .link{align-self:flex-start}
  .btn--big{min-height:54px;font-size:.95rem}
  .cards{grid-template-columns:1fr 1fr}

  .trust{grid-template-columns:repeat(2,1fr);margin-top:34px}
  .trust li{padding:18px 14px 4px}
  .trust li:first-child{padding-left:14px}

  .who{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .steps li{padding:26px 20px 30px}
  .steps li:not(:last-child)::after{display:none}

  .prog__inner{grid-template-columns:1fr;gap:20px}
  .prog__head{grid-template-columns:auto 1fr 18px;padding:22px 0;gap:8px 14px}
  .prog__price{grid-column:2;justify-self:start}
  .courts__grid{grid-template-columns:1fr}
  .place__map{aspect-ratio:16/10}

  .game__btns{flex-direction:column;align-items:stretch}
  /* на всю ширину только главные кнопки — шапку это не касается */
  .hero__cta .btn,.game__btns .btn{width:100%}
  .faq__it button{padding:20px 0;min-height:56px}
  /* текстовые ссылки тоже надо уверенно попадать пальцем */
  .link,.place__link,.foot__ig{display:inline-flex;align-items:center;min-height:44px}
  .brand{min-height:44px;align-items:center}
  .btn--sm{min-height:44px}
  .courts__attr a{display:inline-block;padding:6px 0}

  .foot{padding-bottom:88px}
  .quotes blockquote{padding:24px 22px}
  .quotes blockquote p{font-size:1.1rem}

  /* дешевле по кадрам: полупрозрачные слои на телефоне съедают заряд */
  .grain{opacity:.04;mix-blend-mode:normal}
  .lights i{animation:none}
  .vignette{display:none}
}

/* ── бережный режим ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .intro{display:none}
  .reveal-img::before{transform:none;clip-path:none}
  .ball{opacity:1}
  .lights i{animation:none}
}