/* L SEKTOR v3 — стиль референсу: біла сторінка, темні заокруглені блоки з фото,
   білі / скляні / акцентні картки, пігулки з круглою стрілкою, бенто з великим «L».
   Акцент — фірмовий жовтий L Sektor (одна змінна --accent). */
:root {
  --page: #ffffff;
  --surface: #f2f2ef;
  --surface-2: #e8e8e3;
  --card: #ffffff;
  --text: #0e0e0e;
  --text-2: #5c5c57;
  --text-3: #9b9b95;
  --line: rgba(14, 14, 14, .09);
  --line-2: rgba(14, 14, 14, .2);
  --accent: #ffe500;
  --accent-2: #f5da00;
  --on-accent: #0e0e0e;
  --ink: #0e0e0e;
  --ok: #17a34a;
  --danger: #e2462c;

  --f-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --r-xl: clamp(22px, 2.6vw, 34px);
  --r-lg: 22px;
  --r-md: 16px;
  --gut: 14px;
  --pad: clamp(20px, 3.6vw, 52px);
  --max: 1440px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* темні контейнери перевизначають токени — компоненти підлаштовуються самі */
.dark {
  --surface: #232322;
  --surface-2: #2d2d2b;
  --card: #232322;
  --text: #ffffff;
  --text-2: rgba(255, 255, 255, .68);
  --text-3: rgba(255, 255, 255, .42);
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .22);
  color-scheme: dark;
  background: #0e0e0e; color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--page); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
@view-transition { navigation: auto; }
::view-transition { background: #0e0e0e; }
::view-transition-old(root) { animation: vt-out .6s cubic-bezier(.7, 0, .3, 1) both; transform-origin: 50% 30%; }
::view-transition-new(root) { animation: vt-in .75s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes vt-out { to { transform: scale(.92) translateY(-3%); opacity: .35; border-radius: 40px; } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0 round 48px 48px 0 0); } to { clip-path: inset(0 0 0 0 round 0); } }
.hdr { view-transition-name: site-hdr; }
body { margin: 0; background: var(--page); color: var(--text); font: 400 16px/1.55 var(--f-sans); padding-inline: var(--gut); padding-block: var(--gut) 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
img { height: auto; } /* для атрибутів width/height: пропорції зберігаються */
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 600; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type ---------- */
.h1 { font-size: clamp(40px, 6.2vw, 92px); line-height: .98; letter-spacing: -.035em; }
.h2 { font-size: clamp(30px, 3.8vw, 56px); line-height: 1.02; letter-spacing: -.04em; }
.h3 { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -.03em; }
.lead { font-size: clamp(16px, 1.25vw, 18.5px); color: var(--text-2); max-width: 56ch; line-height: 1.55; }
.small { font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.mono, .tag { font-size: 13px; font-weight: 500; color: var(--text-2); letter-spacing: -.005em; }
.num { font-family: var(--f-display); font-weight: 600; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.hl { color: var(--accent); }
.muted { color: var(--text-2); }
.d-md { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -.03em; font-family: var(--f-display); font-weight: 600; }
.d-lg { font-size: clamp(30px, 3.8vw, 56px); line-height: 1.02; letter-spacing: -.04em; font-family: var(--f-display); font-weight: 600; }

/* ---------- Layout ---------- */
.box { max-width: var(--max); margin: 0 auto var(--gut); border-radius: var(--r-xl); position: relative; overflow: hidden; isolation: isolate; }
.box--grey { background: var(--surface); }
.box--accent { background: var(--accent); color: var(--on-accent); }
.inner { padding: var(--pad); }
.section { max-width: var(--max); margin-inline: auto; padding: clamp(56px, 8vw, 120px) clamp(4px, 2.4vw, 38px); position: relative; }
.section--tight { padding-block: clamp(36px, 5vw, 72px); }
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(26px, 3.2vw, 44px); }
.shead > div:first-child { display: grid; gap: 16px; justify-items: start; max-width: 820px; min-width: 0; }
.grid { display: grid; gap: 12px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.stack { display: grid; gap: 16px; }
.mt-s { margin-top: 12px; } .mt-m { margin-top: 28px; } .mt-l { margin-top: 56px; }
.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.sticky { position: sticky; top: 100px; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } .sticky { position: static; } }
.anchor { scroll-margin-top: 100px; }

/* ---------- Buttons (пігулки з круглою стрілкою) ---------- */
.btn { --h: 52px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; height: var(--h); padding: 0 7px 0 24px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; font-weight: 600; font-size: 15.5px; white-space: nowrap; transition: background-color .25s, color .25s, transform .3s var(--ease), box-shadow .3s; will-change: transform; }
.btn .ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; transition: transform .45s var(--ease); }
.btn .ico svg { width: 17px; height: 17px; }
.btn { overflow: hidden; isolation: isolate; }
.btn .ico { overflow: hidden; }
.btn:hover .ico svg { animation: through .6s var(--ease); }
@keyframes through { 0% { transform: none; } 42% { transform: translate(140%, -140%); } 43% { transform: translate(-140%, 140%); } 100% { transform: none; } }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--accent); transform: translateY(102%); transition: transform .5s var(--ease); }
.btn:hover::before { transform: none; }
.btn--sun::before { background: #fff36b; }
.btn--ink:hover, .btn--ghost:hover, .btn--white:hover, .btn--glass:hover { color: var(--ink); border-color: var(--accent); }
.box--accent .btn--ink::before { background: #fff; }
.btn--sun { background: var(--accent); color: var(--on-accent); }
.btn--sun .ico { background: var(--ink); color: #fff; }
.btn--sun:hover { box-shadow: 0 12px 34px -10px rgba(255, 210, 0, .75); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink .ico { background: transparent; border: 1.5px solid currentColor; width: 30px; height: 30px; }
.btn--white { background: #fff; color: var(--ink); padding: 0 22px; }
.btn--ghost { background: transparent; color: var(--text); border: 1.5px solid var(--line-2); padding: 0 22px; }
.btn--ghost:hover { border-color: var(--text); }
.btn--glass { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .18); padding: 0 24px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.btn--glass:hover { background: rgba(255, 255, 255, .2); }
.box--grey .btn--glass, .section .btn--glass:not(.dark *) { background: var(--surface); color: var(--text); border-color: var(--line); }
.btn--sm { --h: 42px; font-size: 14.5px; padding: 0 18px; }
.btn--sm .ico { width: 30px; height: 30px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.circle { width: 50px; height: 50px; border-radius: 50%; display: inline-grid; place-items: center; border: 1.5px solid var(--text); background: transparent; color: var(--text); cursor: pointer; transition: background-color .25s, color .25s, transform .3s var(--ease); flex: none; }
.circle svg { width: 20px; height: 20px; }
.circle--fill { background: var(--text); color: var(--page); }
.dark .circle--fill { color: #0e0e0e; }
.circle:hover { transform: scale(1.06); }
svg.i { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; font-size: 14px; font-weight: 500; background: #fff; color: var(--ink); line-height: 1.15; white-space: nowrap; }
.pill--outline { background: transparent; color: var(--text); border: 1.5px solid var(--text); }
.pill--sun { background: var(--accent); color: var(--on-accent); }
.pill--dark { background: var(--ink); color: #fff; }
.pill--glass { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pill--solid { background: #fff; color: var(--ink); }
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; border: 1.5px solid var(--text); color: var(--text); font-size: 14px; }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 229, 0, .7); } 80%, 100% { box-shadow: 0 0 0 9px rgba(255, 229, 0, 0); } }

/* ---------- Header ---------- */
.hdr { position: fixed; z-index: 50; top: calc(env(safe-area-inset-top, 0px) + var(--gut) + 10px); left: 50%; translate: -50% 0; width: min(calc(var(--max) - 48px), calc(100% - 2 * var(--gut) - 24px)); display: flex; align-items: center; gap: 20px; padding: 10px 10px 10px 22px; border-radius: 999px; color: #fff; transition: background-color .35s, color .35s, box-shadow .35s, padding .35s, top .35s; }
.hdr.scrolled, body.light-top .hdr { background: rgba(255, 255, 255, .82); color: var(--ink); box-shadow: 0 10px 40px -18px rgba(0, 0, 0, .35); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); top: calc(env(safe-area-inset-top, 0px) + 10px); }
.logo { display: block; width: 148px; flex: none; color: inherit; }
.logo svg { width: 100%; height: auto; fill: currentColor; }
.logo svg polygon { transition: fill .35s; }
.logo:hover svg polygon { fill: var(--accent); }
.nav { display: flex; gap: clamp(14px, 2.2vw, 34px); margin-inline: auto; }
.nav a { text-decoration: none; font-size: 14.5px; font-weight: 500; opacity: .86; position: relative; padding-block: 6px; transition: opacity .2s; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.hdr-right { display: flex; align-items: center; gap: 6px; flex: none; }
.cab-link { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-size: 14.5px; font-weight: 500; }
.cab-link svg { width: 18px; height: 18px; }
.hdr .btn--white { --h: 42px; font-size: 14.5px; }
.hdr.scrolled .btn--white, body.light-top .hdr .btn--white { background: var(--ink); color: #fff; }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; cursor: pointer; place-items: center; color: inherit; }
.burger svg { width: 20px; height: 20px; }
@media (max-width: 1100px) { .nav { display: none; } .burger { display: grid; } .hdr-right { margin-left: auto; } }
@media (max-width: 560px) { .hdr .btn--white { display: none; } .cab-link span { display: none; } .logo { width: 124px; } .hdr { padding-left: 16px; } }

.mnav { position: fixed; inset: 0; z-index: 70; background: #0e0e0e; color: #fff; padding: calc(env(safe-area-inset-top, 0px) + 22px) 24px calc(env(safe-area-inset-bottom, 0px) + 24px); display: flex; flex-direction: column; gap: 28px; overflow-y: auto; }
.mnav-top { display: flex; align-items: center; justify-content: space-between; }
.mnav ul { list-style: none; margin: 0; padding: 0; display: grid; }
.mnav li { overflow: hidden; }
.mnav li a { display: flex; justify-content: space-between; align-items: baseline; text-decoration: none; font-family: var(--f-display); font-size: clamp(30px, 9vw, 44px); font-weight: 600; letter-spacing: -.04em; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); animation: mnav-in .6s var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
.mnav li a small { font-size: 13px; color: rgba(255, 255, 255, .4); font-weight: 500; letter-spacing: 0; }
.mnav li a[aria-current="page"] { color: var(--accent); }
@keyframes mnav-in { from { transform: translateY(100%); } }
.mnav-foot { margin-top: auto; display: grid; gap: 12px; color: rgba(255, 255, 255, .65); font-size: 15px; }
.mnav-foot a { text-decoration: none; font-size: 18px; font-weight: 600; color: #fff; }

/* ---------- Hero ---------- */
.hero { min-height: min(100svh - 28px, 940px); display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 24px 60px -30px rgba(0, 0, 0, .45); }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #0e0e0e; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; filter: brightness(.5) contrast(1.1) saturate(.85); animation: kenburns 22s ease-in-out infinite alternate; transform-origin: 60% 40%; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 10, .9) 0%, rgba(10, 10, 10, .6) 42%, rgba(10, 10, 10, .15) 78%), linear-gradient(0deg, rgba(10, 10, 10, .9) 0%, rgba(10, 10, 10, 0) 55%); }
@keyframes kenburns { from { transform: scale(1.06) translate3d(var(--px, 0), var(--py, 0), 0); } to { transform: scale(1) translate3d(var(--px, 0), var(--py, 0), 0); } }
.hero-in { padding: clamp(120px, 14vw, 180px) var(--pad) 0; display: grid; gap: 30px; justify-items: start; }
.hero h1 { color: #fff; }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero h1 .lw { display: inline-block; }
.hero h1 .ch { display: inline-block; transform-origin: 0 100%; animation: ch-up 1.05s var(--ease) both; animation-delay: calc(var(--intro, 0s) + .12s + var(--i) * .13s + var(--c) * .028s); transition: color .3s, translate .45s var(--ease); }
.hero h1 .ch:hover { color: var(--accent); translate: 0 -7%; }
@keyframes ch-up { from { transform: translateY(112%) rotate(14deg); opacity: 0; } 55% { opacity: 1; } }
.hero .btn-row { animation: fade-up .9s var(--ease) both; animation-delay: calc(var(--intro, 0s) + .6s); }
@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } }
.hero-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: clamp(40px, 6vw, 80px) var(--pad) var(--pad); }
.hcard { position: relative; border-radius: var(--r-lg); padding: 18px 20px; min-height: 150px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; overflow: hidden; animation: fade-up .9s var(--ease) both; animation-delay: calc(var(--intro, 0s) + .75s + var(--i) * .1s); transition: transform .4s var(--ease); }
.hcard:hover { transform: translateY(-4px); }
.hcard--light { background: #fff; color: var(--ink); }
.hcard--glass { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.hcard--sun { background: var(--accent); color: var(--on-accent); border: 0; cursor: pointer; text-align: left; font: inherit; width: 100%; }
.hc-top { display: flex; align-items: center; gap: 14px; }
.avatars { display: flex; }
.avatars img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 2px solid #fff; margin-left: -12px; }
.avatars img:first-child { margin-left: 0; }
.hc-big { font-family: var(--f-display); font-weight: 600; font-size: 30px; letter-spacing: -.05em; line-height: 1; }
.hc-small { font-size: 13px; line-height: 1.45; opacity: .72; }
.hc-title { font-family: var(--f-display); font-size: 26px; font-weight: 600; letter-spacing: -.035em; line-height: 1.05; margin-top: auto; max-width: 15ch; }
.hc-arrow { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; transition: transform .45s var(--ease); }
.hcard--sun:hover .hc-arrow { transform: rotate(45deg) scale(1.08); }
.hc-arrow svg { width: 16px; height: 16px; }
.slider-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 1; }
.mini-circle { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; transition: background-color .2s; }
.mini-circle:hover { background: rgba(255, 255, 255, .25); }
.mini-circle svg { width: 13px; height: 13px; }
.next-text { text-align: center; font-size: 13.5px; line-height: 1.4; flex: 1; min-width: 0; color: rgba(255, 255, 255, .78); }
.next-text b { display: block; font-size: 18px; color: #fff; font-weight: 600; letter-spacing: -.02em; }
.next-text.swap { animation: swap .5s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateX(14px); } }
.hc-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.hc-progress { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent); width: 0; }
.hc-progress.run { animation: prog 5s linear forwards; }
@keyframes prog { to { width: 100%; } }
@media (max-width: 1000px) { .hero-cards { grid-template-columns: 1fr 1fr; } .hcard--glass { grid-column: 1 / -1; order: 3; } }
@media (max-width: 600px) { .hero-cards { grid-template-columns: minmax(0, 1fr); } .hero { min-height: 0; } }

/* ---------- Marquee ---------- */
.marquee { max-width: var(--max); margin: 0 auto; overflow: hidden; padding-block: clamp(26px, 3vw, 44px) 0; }
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee span { font-family: var(--f-display); font-weight: 600; font-size: clamp(44px, 7vw, 110px); letter-spacing: -.05em; line-height: 1; white-space: nowrap; display: inline-flex; align-items: center; gap: .3em; padding-right: .3em; }
.marquee span:nth-child(even) { color: #d6d6d0; }
.marquee span svg { width: .42em; height: .42em; color: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Intro + zone cards ---------- */
.intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.intro-text { display: grid; gap: 26px; justify-items: start; }
.carousel { display: grid; gap: 18px; min-width: 0; }
.track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; align-items: flex-start; cursor: grab; }
.track::-webkit-scrollbar { display: none; }
.car-ctrl { display: flex; gap: 10px; justify-content: flex-end; }
.zcard { flex: 0 0 calc((100% - 14px) * .56); position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1 / 1.08; scroll-snap-align: start; color: #fff; text-decoration: none; background: #222; max-width: 100%; }
.zcard:nth-child(even) { flex-basis: calc((100% - 14px) * .44); aspect-ratio: 1 / .86; }
.zcard img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; transition: transform 1s var(--ease); }
.zcard:hover img { transform: scale(1.06); }
.zcard::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 55%); }
.zcard .pill { position: absolute; top: 16px; left: 16px; z-index: 3; }
.zcard-body { position: absolute; left: 20px; right: 76px; bottom: 20px; z-index: 3; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.25; font-weight: 500; letter-spacing: -.02em; }
.zgo { position: absolute; right: 18px; bottom: 18px; z-index: 3; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; transition: transform .45s var(--ease), background-color .3s; }
.zgo svg { width: 18px; height: 18px; }
.zcard:hover .zgo { transform: rotate(45deg); background: var(--accent); color: var(--ink); }
@media (max-width: 900px) { .intro { grid-template-columns: minmax(0, 1fr); } .zcard, .zcard:nth-child(even) { flex-basis: 76%; aspect-ratio: 1 / 1.05; } }

/* класи (каталог) */
.tcard { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--card); display: flex; flex-direction: column; text-decoration: none; min-width: 0; transition: transform .45s var(--ease), box-shadow .45s; }
.section .tcard, .box--grey .tcard { background: var(--surface); }
.tcard:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .45); }
.tcard-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #222; margin: 8px 8px 0; border-radius: 16px; }
.tcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.tcard:hover .tcard-img img { transform: scale(1.07); }
.tcard-img .pill { position: absolute; top: 12px; left: 12px; z-index: 2; }
.tcard-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tcard-body h3 { font-size: 22px; letter-spacing: -.035em; }
.tcard-body p { color: var(--text-2); font-size: 14.5px; }
.tcard-meta { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tcard-go { width: 38px; height: 38px; border-radius: 50%; background: var(--text); color: var(--page); display: grid; place-items: center; flex: none; transition: transform .45s var(--ease), background-color .3s, color .3s; }
.dark .tcard-go { color: #0e0e0e; }
.tcard-go svg { width: 16px; height: 16px; }
.tcard:hover .tcard-go { transform: rotate(45deg); background: var(--accent); color: var(--ink); }
.glare, .brk::after { display: none; }

/* ---------- Bento ---------- */
.bento { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.55fr) repeat(2, minmax(0, 1fr)); grid-template-areas: "a a p b c" "d d p e e" "f g p h i"; }
.tile { background: var(--surface); border-radius: var(--r-lg); padding: 24px; display: flex; gap: 18px; align-items: center; min-height: 160px; transition: background-color .35s, transform .45s var(--ease); }
.tile:hover { background: var(--surface-2); }
.tile p { font-size: clamp(16px, 1.5vw, 21px); line-height: 1.25; font-weight: 500; letter-spacing: -.02em; }
.tile svg.i { width: 64px; height: 64px; stroke-width: 1.4; flex: none; transition: transform .7s var(--ease); }
.tile:hover svg.i { transform: rotate(90deg) scale(1.05); }
.tile--col { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.tile--col svg.i { width: 48px; height: 48px; }
.tile--num { flex-direction: row; gap: 10px; justify-content: center; }
.tile .big { font-family: var(--f-display); font-weight: 600; font-size: clamp(48px, 5vw, 76px); line-height: .85; letter-spacing: -.06em; }
.tile .big sup { font-size: .45em; }
.tile .cap { font-size: clamp(15px, 1.3vw, 19px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.tile--photo { grid-area: p; padding: 0; overflow: hidden; position: relative; min-height: 470px; background: #1a1a1a; }
.tile--photo img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; filter: brightness(.75); }
.bigL { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; width: 66%; color: var(--accent); }
.bigL svg { width: 100%; height: auto; fill: currentColor; overflow: visible; }
.t-a { grid-area: a; } .t-b { grid-area: b; } .t-c { grid-area: c; } .t-d { grid-area: d; } .t-e { grid-area: e; } .t-f { grid-area: f; } .t-g { grid-area: g; } .t-h { grid-area: h; } .t-i { grid-area: i; }
@media (max-width: 1100px) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "p p p p" "a a b c" "d d e e" "f g h i"; } .tile--photo { min-height: 360px; } }
@media (max-width: 640px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "p p" "a a" "b c" "d d" "e e" "f g" "h i"; } .tile { min-height: 128px; padding: 18px; } .tile svg.i { width: 44px; height: 44px; } .tile--photo { min-height: 300px; } }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.chips--scroll::-webkit-scrollbar { display: none; }
.chip { height: 42px; padding: 0 17px; border-radius: 999px; border: 1.5px solid var(--line-2); background: transparent; cursor: pointer; font-weight: 500; font-size: 14.5px; color: var(--text); white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; flex: none; }
.chip:hover { border-color: var(--text); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--text); color: var(--page); border-color: var(--text); }
.dark .chip[aria-pressed="true"], .dark .chip[aria-selected="true"] { background: var(--accent); color: var(--ink); border-color: var(--accent); }

/* ---------- Class rows ---------- */
.classes { border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.crow { display: grid; grid-template-columns: 110px minmax(0, 1fr) 190px 150px; gap: 20px; align-items: center; padding: 18px 22px; border-top: 1px solid var(--line); transition: background-color .25s; }
.crow:first-child { border-top: 0; }
.crow:hover { background: var(--surface-2); }
.crow .t { font-family: var(--f-display); font-weight: 600; font-size: 28px; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.crow .t small { display: block; font-family: var(--f-sans); font-size: 12.5px; color: var(--text-2); letter-spacing: 0; font-weight: 500; margin-top: 2px; }
.crow .nm { font-weight: 600; font-size: 18px; letter-spacing: -.02em; }
.crow .nm a { text-decoration: none; }
.crow .nm a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crow .co { font-size: 14px; color: var(--text-2); }
.crow.past { opacity: .4; }
.crow.booked .t { color: inherit; }
.crow.booked { box-shadow: inset 4px 0 0 var(--accent); }
.lvl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.lvl i { display: inline-flex; gap: 3px; }
.lvl i b { width: 5px; height: 14px; border-radius: 2px; background: var(--line-2); }
.lvl i b.on { background: var(--text); }
.state { font-size: 13px; color: var(--text-2); font-weight: 500; }
.empty { padding: 28px 22px; color: var(--text-2); }
@media (max-width: 760px) {
  .crow { grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; padding: 14px 16px; }
  .crow .t { font-size: 20px; align-self: start; padding-top: 2px; }
  .crow > .lvl, .crow > span:empty { grid-column: 2; grid-row: 2; }
  .crow > span:empty { display: none; }
  .crow > .btn, .crow > .state { grid-column: 3; grid-row: 1 / span 2; }
  .crow .btn { --h: 38px; padding: 0 14px; font-size: 14px; }
}

/* ---------- Cards ---------- */
.card { background: var(--surface); border-radius: var(--r-lg); padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 14px; min-width: 0; transition: transform .45s var(--ease); }
.card h3 { font-size: 21px; letter-spacing: -.03em; line-height: 1.15; }
.card p { color: var(--text-2); font-size: 15.5px; }
.card .ic { width: 52px; height: 52px; border-radius: 50%; background: var(--card); display: grid; place-items: center; }
.box--grey .card, .section .box--grey .card { background: #fff; }
.card .ic svg { width: 24px; height: 24px; }
a.card:hover { transform: translateY(-4px); }

/* ---------- Quiz ---------- */
.quiz { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); }
.quiz-steps { display: grid; gap: 26px; }
.qstep { display: grid; gap: 12px; }
.qres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qres a { background: var(--card); border-radius: 18px; padding: 18px; text-decoration: none; display: grid; gap: 8px; align-content: start; transition: transform .4s var(--ease), box-shadow .4s; animation: fade-up .55s var(--ease) both; animation-delay: calc(var(--i) * 80ms); }
.box--grey .qres a { background: #fff; }
.qres a:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -26px rgba(0, 0, 0, .4); }
.qres b { font-family: var(--f-display); font-size: 19px; letter-spacing: -.03em; }
.qres span { font-size: 14px; color: var(--text-2); line-height: 1.4; }
.qres .mono { color: var(--text) !important; font-weight: 600; }
@media (max-width: 900px) { .quiz { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .qres { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.step { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 1.5px solid currentColor; }
.step::before { counter-increment: s; content: "0" counter(s); font-weight: 600; font-size: 13px; }
.step b { font-size: 18px; letter-spacing: -.02em; line-height: 1.2; }
.step span { font-size: 15px; opacity: .72; }
@media (max-width: 760px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Prices ---------- */
.pcard { position: relative; background: var(--surface); border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; gap: 16px; min-width: 0; overflow: hidden; transition: transform .45s var(--ease); }
.pcard:hover { transform: translateY(-5px); }
.pcard .tagp { position: absolute; top: 22px; right: 22px; }
.pcard h3 { font-size: 21px; }
.pcard .per { color: var(--text-2); font-size: 14.5px; }
.pcard .price { font-family: var(--f-display); font-weight: 600; font-size: clamp(42px, 4vw, 60px); letter-spacing: -.06em; line-height: 1; font-variant-numeric: tabular-nums; }
.pcard .price small { font-family: var(--f-sans); font-size: 17px; font-weight: 500; letter-spacing: 0; margin-left: 6px; color: var(--text-2); }
.pcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; color: var(--text-2); }
.pcard li { display: flex; gap: 10px; align-items: flex-start; }
.pcard li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.pcard .btn { margin-top: auto; }
.pcard--hot { background: #0e0e0e; color: #fff; --text-2: rgba(255, 255, 255, .66); --line-2: rgba(255, 255, 255, .22); }
.pcard--hot .price { color: var(--accent); }
.pcard--hot .btn--glass { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .2); }
.save { font-size: 13px; color: var(--text-2); font-weight: 500; }
.meter { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: 6px; width: var(--w); }
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.tabs::-webkit-scrollbar { display: none; }
.calc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 12px; }
.calc-opts { display: grid; gap: 22px; }
.calc-opts .mono { margin-bottom: 10px; display: block; }
.calc-out { border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 14px; background: var(--accent); color: var(--on-accent); }
.calc-out .price { font-family: var(--f-display); font-weight: 600; font-size: clamp(48px, 5.4vw, 76px); line-height: 1; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.calc-out .r { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; border-top: 1px solid rgba(0, 0, 0, .15); padding-top: 10px; }
.calc-out .mono { color: inherit; }
@media (max-width: 860px) { .calc { grid-template-columns: minmax(0, 1fr); } }
.ptable { width: 100%; border-collapse: collapse; min-width: 560px; font-variant-numeric: tabular-nums; }
.ptable th, .ptable td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--line); font-size: 15px; white-space: nowrap; }
.ptable thead th { font-size: 13px; color: var(--text-2); font-weight: 500; }
.ptable tbody th { text-align: left; font-weight: 600; }
.ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: end; }
.rung { border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.rung .num { font-size: clamp(30px, 3.2vw, 46px); line-height: 1; }
.rung b { font-size: 15px; }
.rung span { font-size: 13px; color: var(--text-2); }
.rung:nth-child(1) { min-height: 150px; } .rung:nth-child(2) { min-height: 185px; } .rung:nth-child(3) { min-height: 220px; } .rung:nth-child(4) { min-height: 255px; }
.rung:nth-child(5) { min-height: 290px; background: var(--accent); color: var(--ink); }
.rung:nth-child(5) span { color: rgba(0, 0, 0, .65); }
@media (max-width: 760px) { .ladder { grid-template-columns: minmax(0, 1fr); } .rung { min-height: 0 !important; flex-direction: row; align-items: baseline; gap: 14px; flex-wrap: wrap; } }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.coach { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.coach-ph { aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden; position: relative; background: var(--surface-2); display: grid; place-items: center; }
.coach-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform 1s var(--ease); }
.coach:hover .coach-ph img { transform: scale(1.06); }
.coach-ph .mono-l { font-family: var(--f-display); font-weight: 600; font-size: clamp(54px, 6vw, 86px); color: var(--text-3); letter-spacing: -.05em; }
.coach-ph .pill { position: absolute; left: 12px; top: 12px; z-index: 2; }
.coach b { font-size: 18px; letter-spacing: -.02em; }
.coach .role { font-size: 14px; color: var(--text-2); }
.coach > .btn { margin-top: auto; align-self: flex-start; }
.team.team-track { grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); grid-template-columns: none; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.team.team-track::-webkit-scrollbar { display: none; }
.team.team-track .coach { scroll-snap-align: start; }
@media (max-width: 1000px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } .team.team-track { grid-auto-columns: 64%; } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); border-radius: 20px; transition: background-color .25s; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; font-weight: 600; font-size: 18px; letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { width: 38px; height: 38px; border-radius: 50%; background: var(--card); display: grid; place-items: center; flex: none; transition: transform .45s var(--ease), background-color .25s; }
.section .faq summary .pm { background: #fff; }
.faq summary .pm svg { width: 16px; height: 16px; }
.faq details[open] summary .pm { transform: rotate(45deg); background: var(--accent); }
.faq details > div { padding: 0 24px 24px; color: var(--text-2); max-width: 75ch; }

/* ---------- Review ---------- */
.rating { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 12px; }
.rate-card { background: var(--accent); color: var(--ink); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.rate-card .num { font-size: clamp(80px, 9vw, 130px); line-height: .82; }
.stars { display: flex; gap: 4px; }
.stars svg { width: 20px; height: 20px; fill: currentColor; }
blockquote { margin: 0; }
.quote { background: var(--surface); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; gap: 22px; justify-content: space-between; }
.quote p { font-family: var(--f-display); font-size: clamp(22px, 2.3vw, 34px); line-height: 1.2; letter-spacing: -.035em; font-weight: 500; }
.quote cite { font-style: normal; font-weight: 600; }
@media (max-width: 800px) { .rating { grid-template-columns: minmax(0, 1fr); } }

/* ---------- CTA ---------- */
.cta { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.cta h2 { font-size: clamp(42px, 6vw, 92px); line-height: .95; letter-spacing: -.055em; }
.cta-left { display: grid; gap: 30px; }
@media (max-width: 900px) { .cta { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Forms ---------- */
.form { background: #fff; color: var(--ink); border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 32px); display: grid; gap: 14px; --text: #0e0e0e; --text-2: #5c5c57; --line-2: rgba(14, 14, 14, .2); --surface: #f2f2ef; }
.dark .form { background: #1c1c1b; color: #fff; --text: #fff; --text-2: rgba(255, 255, 255, .68); --line-2: rgba(255, 255, 255, .22); --surface: #2a2a28; }
.form h3 { font-size: 24px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .field .lbl { font-size: 13px; font-weight: 500; color: var(--text-2); }
.field input, .field select, .field textarea { height: 54px; border-radius: 16px; border: 1.5px solid transparent; background: var(--surface); padding: 0 18px; font: inherit; font-size: 16px; color: var(--text); width: 100%; min-width: 0; transition: border-color .2s, background-color .2s; }
.field textarea { height: 96px; padding: 14px 18px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--text); background: transparent; }
.field .err { color: var(--danger); font-size: 13px; }
.field.invalid input { border-color: var(--danger); }
.code-inp { font-family: var(--f-display) !important; font-size: 30px !important; letter-spacing: .5em; text-align: center; font-weight: 600; }
.note { font-size: 12.5px; color: var(--text-3, #9b9b95); }
.seg { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.seg input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.seg label { min-height: 42px; padding: 0 17px; border-radius: 999px; border: 1.5px solid var(--line-2); display: inline-flex; align-items: center; cursor: pointer; font-weight: 500; font-size: 14.5px; transition: background-color .2s, color .2s, border-color .2s; }
.seg input:checked + label { background: var(--text); color: var(--page); border-color: var(--text); }
.dark .seg input:checked + label { color: #0e0e0e; }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.opts { display: grid; gap: 10px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1.5px solid transparent; cursor: pointer; transition: border-color .2s; }
.opt label::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--text-2); transition: box-shadow .2s, border-color .2s; }
.opt input:checked + label { border-color: var(--text); }
.opt input:checked + label::before { border-color: var(--text); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 10px var(--text); }
.opt input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt b { display: block; font-size: 15.5px; }
.opt small { color: var(--text-2); font-size: 13px; }
.opt .p { font-family: var(--f-display); font-weight: 600; font-size: 19px; letter-spacing: -.03em; }
.success { display: grid; gap: 12px; justify-items: start; }
.success .ok { width: 60px; height: 60px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; animation: pop .6s var(--ease) both; }
.success .ok svg { width: 28px; height: 28px; }
.success h3 { font-size: 28px; }
.success p { color: var(--text-2); }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
.demo-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(255, 229, 0, .18); color: var(--text); font-size: 13px; }
.demo-note b { font-size: 11px; letter-spacing: .08em; background: var(--ink); color: var(--accent); padding: 2px 6px; border-radius: 6px; }
.err-box { color: var(--danger); font-size: 14px; }
.info-box { font-size: 14px; line-height: 1.45; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); }

/* ---------- Modal ---------- */
dialog.modal { border: 0; padding: 0; border-radius: 28px; width: min(540px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); background: #fff; color: var(--ink); overflow: auto; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .6); }
dialog.modal[open] { animation: modal-in .5s var(--ease) both; }
dialog.modal::backdrop { background: rgba(10, 10, 10, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes modal-in { from { opacity: 0; transform: translateY(30px) scale(.97); } }
.m-body { padding: 26px; display: grid; gap: 16px; }
.m-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.m-head h3 { font-size: 26px; }
.xbtn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--surface); display: grid; place-items: center; cursor: pointer; flex: none; transition: transform .4s var(--ease); }
.xbtn:hover { transform: rotate(90deg); }
.xbtn svg { width: 18px; height: 18px; }
.sess { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 16px; align-items: center; padding: 16px 18px; border-radius: 18px; background: #0e0e0e; color: #fff; }
.sess .t { grid-row: span 2; font-family: var(--f-display); font-size: 32px; font-weight: 600; color: var(--accent); letter-spacing: -.05em; }
.sess b { font-size: 17px; }
.sess span { font-size: 13.5px; color: rgba(255, 255, 255, .65); }
.slots { display: grid; gap: 8px; max-height: 300px; overflow-y: auto; }
.slot { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 16px; border: 1.5px solid transparent; background: var(--surface); cursor: pointer; transition: border-color .2s, transform .3s var(--ease); }
.slot:hover { border-color: var(--ink); transform: translateX(3px); }
.slot .t { font-family: var(--f-display); font-weight: 600; font-size: 20px; letter-spacing: -.04em; }
.slot small { color: var(--text-2); display: block; font-size: 12.5px; }
.stepper { display: flex; gap: 6px; }
.stepper i { height: 4px; flex: 1; border-radius: 4px; background: var(--surface); transition: background-color .4s; }
.stepper i.on { background: var(--accent); }
.copy { height: 32px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line-2); background: transparent; cursor: pointer; font-size: 12.5px; font-weight: 600; color: inherit; }
.copy:hover { border-color: currentColor; }

/* ---------- Page hero ---------- */
.phero { min-height: 470px; display: flex; flex-direction: column; justify-content: flex-end; }
.phero-bg { position: absolute; inset: 0; z-index: -1; background: #0e0e0e; overflow: hidden; }
.phero-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); animation: kenburns 22s ease-in-out infinite alternate; }
.phero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 10, .8) 10%, rgba(10, 10, 10, .2) 70%), linear-gradient(0deg, rgba(10, 10, 10, .7), transparent 60%); }
.phero-body { padding: clamp(130px, 14vw, 180px) var(--pad) var(--pad); display: grid; gap: 20px; max-width: 1000px; justify-items: start; color: #fff; }
.phero-body > * { animation: fade-up .9s var(--ease) both; }
.phero-body > :nth-child(2) { animation-delay: .07s; } .phero-body > :nth-child(3) { animation-delay: .14s; } .phero-body > :nth-child(4) { animation-delay: .21s; } .phero-body > :nth-child(5) { animation-delay: .28s; }
.phero .lead { color: rgba(255, 255, 255, .78); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: rgba(255, 255, 255, .6); }
.crumbs a { text-decoration: none; color: rgba(255, 255, 255, .78); }
.crumbs a:hover { color: #fff; }
.crumbs span::before { content: "/"; margin-right: 8px; opacity: .5; }
.phero-meta { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Timeline / gallery / menu ---------- */
.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tl { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: var(--r-lg); background: var(--surface); }
.tl .num { font-size: clamp(36px, 3.6vw, 54px); line-height: 1; }
.tl b { font-size: 17px; letter-spacing: -.02em; }
.tl span { color: var(--text-2); font-size: 15px; }
.tl:last-child { background: var(--accent); color: var(--ink); --text-2: rgba(0, 0, 0, .65); }
@media (max-width: 860px) { .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .timeline { grid-template-columns: minmax(0, 1fr); } }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; grid-auto-flow: dense; gap: 12px; }
.gal { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); margin: 0; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gal:hover img { transform: scale(1.06); }
.gal .pill { position: absolute; left: 12px; bottom: 12px; z-index: 2; }
.gal--w { grid-column: span 2; } .gal--h { grid-row: span 2; }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; } }
.menu-card { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.menu-card .ph { position: relative; aspect-ratio: 16 / 7; overflow: hidden; margin: 8px 8px 0; border-radius: 16px; }
.menu-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.menu-card .bd { padding: 20px 22px 22px; display: grid; gap: 14px; }
.menu-card h3 { font-size: 20px; }
.menu-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.menu-card li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; font-size: 15px; }
.menu-card li span { display: flex; gap: 8px; align-items: baseline; min-width: 0; color: var(--text-2); }
.menu-card li span::after { content: ""; flex: 1; border-bottom: 1.5px dotted var(--line-2); min-width: 12px; transform: translateY(-4px); }
.menu-card li b { font-weight: 600; white-space: nowrap; }

/* ---------- Schedule ---------- */
.sched-wrap { overflow-x: auto; border-radius: var(--r-lg); background: var(--surface); }
.sched { display: grid; grid-template-columns: 76px repeat(7, minmax(130px, 1fr)); min-width: 1000px; }
.sched .hd { position: sticky; top: 0; padding: 16px 12px; font-weight: 600; font-size: 14.5px; border-bottom: 1px solid var(--line); background: var(--surface); z-index: 1; letter-spacing: -.01em; }
.sched .hd small { display: block; font-weight: 500; color: var(--text-2); font-size: 12px; margin-top: 2px; }
.sched .hd.today { background: var(--accent); }
.sched .tm { padding: 12px; font-family: var(--f-display); font-weight: 600; font-size: 15px; border-top: 1px solid var(--line); color: var(--text-2); letter-spacing: -.03em; }
.sched .cell { padding: 6px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); display: grid; gap: 6px; align-content: start; min-height: 64px; }
.ev { text-align: left; border: 0; border-radius: 14px; padding: 10px 12px; background: #fff; cursor: pointer; display: grid; gap: 2px; transition: transform .3s var(--ease), background-color .2s, color .2s; width: 100%; color: var(--ink); }
.ev:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.ev:hover .co { color: rgba(255, 255, 255, .7); }
.ev .tt { font-size: 12px; font-weight: 600; }
.ev .nm { font-weight: 600; font-size: 14.5px; line-height: 1.2; letter-spacing: -.01em; }
.ev .co { font-size: 12.5px; color: var(--text-2); line-height: 1.3; }
.ev.dim { opacity: .2; }
.ev.past { opacity: .4; cursor: default; }
.ev.past:hover { transform: none; background: #fff; color: var(--ink); }
.ev.booked { background: var(--accent); }
.sched-mobile { display: none; }
@media (max-width: 860px) { .sched-wrap { display: none; } .sched-mobile { display: grid; gap: 14px; } }

/* ---------- Contacts ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cbox { background: var(--surface); border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cbox .v { font-family: var(--f-display); font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }
.copy-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.copy-row a { text-decoration: none; font-family: var(--f-display); font-size: 21px; font-weight: 600; letter-spacing: -.03em; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.status i { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); }
.status.open i { background: var(--ok); box-shadow: 0 0 0 4px rgba(23, 163, 74, .18); animation: none; }
.hours { display: grid; gap: 8px; }
.hours div { display: flex; justify-content: space-between; font-size: 16px; border-bottom: 1px solid var(--line); padding-bottom: 8px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.hours div.now { color: var(--text); font-weight: 600; }
.map-row { display: grid; gap: 12px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.mapcard { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 360px; background: #0e0e0e; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; gap: 14px; isolation: isolate; text-decoration: none; }
.mapcard canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.slink { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: #fff; text-decoration: none; transition: transform .3s var(--ease); }
.slink:hover { transform: translateX(4px); }
.slink b { font-size: 15.5px; } .slink span { font-size: 13px; color: var(--text-2); }
.slink svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 860px) { .map-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Cabinet ---------- */
.cab { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; align-items: start; }
.mcard { position: relative; border-radius: var(--r-lg); padding: 26px; background: #0e0e0e; color: #fff; overflow: hidden; display: grid; gap: 20px; min-height: 260px; --text-2: rgba(255, 255, 255, .66); }
.mcard::before { content: ""; position: absolute; width: 360px; height: 360px; right: -140px; top: -150px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 229, 0, .35), transparent 65%); }
.mcard .logo-mini { width: 124px; } .mcard .logo-mini svg { fill: #fff; width: 100%; height: auto; }
.mcard .mono { color: rgba(255, 255, 255, .6); }
.ring { --p: 50; width: 132px; height: 132px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 1%), rgba(255, 255, 255, .12) 0); display: grid; place-items: center; position: relative; flex: none; }
.ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #0e0e0e; }
.ring div { position: relative; text-align: center; line-height: 1; }
.ring b { font-family: var(--f-display); font-size: 40px; display: block; letter-spacing: -.05em; }
.ring small { font-size: 12px; color: rgba(255, 255, 255, .6); }
.cab .crow { grid-template-columns: 96px minmax(0, 1fr) auto; }
.cab .crow > .lvl, .cab .crow > span:empty { display: none; }
@media (max-width: 900px) { .cab { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .cab .crow { grid-template-columns: 64px minmax(0, 1fr) auto; } }

/* ---------- Footer ---------- */
.ftr { display: grid; gap: 44px; }
.ftr-big { color: #fff; }
.ftr-big svg { width: 100%; height: auto; fill: currentColor; }
.ftr-top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.ftr h4 { font-size: 13px; color: rgba(255, 255, 255, .45); font-weight: 500; margin-bottom: 14px; font-family: var(--f-sans); letter-spacing: 0; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; color: rgba(255, 255, 255, .7); }
.ftr a { text-decoration: none; color: #fff; transition: color .2s; }
.ftr a:hover { color: var(--accent); }
.ftr-about { display: grid; gap: 18px; align-content: start; }
.ftr-about p { color: rgba(255, 255, 255, .7); max-width: 38ch; font-size: 17px; }
.ftr-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; color: rgba(255, 255, 255, .5); }
.ua-note { display: flex; gap: 10px; align-items: center; }
.ua-flag { width: 22px; height: 16px; border-radius: 3px; background: linear-gradient(180deg, #2f6fd6 50%, #ffd500 50%); flex: none; }
@media (max-width: 900px) { .ftr-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ftr-about { grid-column: 1 / -1; } }
@media (max-width: 480px) { .ftr-top { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Mobile CTA ---------- */
.mbar { display: none; }
@media (max-width: 760px) {
  .mbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; position: fixed; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); z-index: 45; padding: 8px; border-radius: 999px; background: rgba(14, 14, 14, .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform .45s var(--ease), opacity .3s; }
  .mbar.hide { transform: translateY(140%); opacity: 0; }
  .mbar .btn { --h: 46px; }
  body { padding-bottom: 84px; }
}

/* ---------- Motion: scroll-driven (контент лишається видимим) ---------- */
.w { display: inline; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bigL { animation: bigl linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
    @keyframes bigl { from { clip-path: inset(100% 0 0 0); scale: .8; } to { clip-path: inset(0 0 0 0); scale: 1; } }
    .progress { animation: grow linear both; animation-timeline: scroll(root); }
  }
}
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; }
@keyframes grow { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

#td-coaches em { font-style: normal; font-size: 13.5px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: var(--surface); }

.tile--stack { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; }
.box--grey .tl:not(:last-child) { background: #fff; }

/* =====================================================================
   v4 — соцмережі, застосунок, нові анімації
   ===================================================================== */

/* ---------- Соцмережі ---------- */
.soc { display: flex; gap: 8px; flex-wrap: wrap; }
.soc-i { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: inherit; border: 1.5px solid rgba(255, 255, 255, .22); text-decoration: none; transition: background-color .3s, color .3s, border-color .3s, transform .45s var(--ease); }
.soc-i svg { width: 22px; height: 22px; transition: transform .5s var(--ease); }
.soc-i:hover { background: var(--accent); border-color: var(--accent); color: var(--ink) !important; }

.soc--hdr { gap: 4px; flex-wrap: nowrap; }
.soc--hdr .soc-i { width: 42px; height: 42px; border-color: currentColor; border-color: color-mix(in srgb, currentColor 28%, transparent); }
.soc--hdr .soc-i svg { width: 19px; height: 19px; }
.soc--sm .soc-i { width: 44px; height: 44px; }
@media (max-width: 1180px) and (min-width: 1101px) { .soc--hdr { display: none; } }
@media (max-width: 560px) { .soc--hdr { display: none; } }

.mnav-soc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.msoc { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: #1d1d1c; text-decoration: none; color: #fff; min-width: 0; }
.msoc svg { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--accent); color: var(--ink); flex: none; }
.msoc span { display: grid; min-width: 0; line-height: 1.2; }
.msoc b { font-size: 16px !important; }
.msoc small { font-size: 12.5px; color: rgba(255, 255, 255, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mnav .soc-i { color: #fff; }

/* ---------- Застосунок: кнопки сторів ---------- */
.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.store { display: inline-flex; align-items: center; gap: 11px; height: 56px; padding: 0 20px 0 14px; border-radius: 16px; background: #0e0e0e; color: #fff; text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s; }
.store:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .6); }
.store svg { width: 26px; height: 26px; flex: none; }
.store span { display: grid; line-height: 1.1; font-weight: 600; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
.store small { font-size: 11px; font-weight: 500; opacity: .65; letter-spacing: 0; }
.dark .store, .mnav .store { background: #fff; color: #0e0e0e; }
.stores--lg .store { height: 62px; padding: 0 24px 0 16px; }
.stores--mnav .store { flex: 1; justify-content: center; }

/* футер */
.ftr-mid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); }
.ftr-mid .soc-i { color: #fff; }

/* контакти */
.slinks { display: grid; gap: 8px; }
.slink-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.slink .slink-ic { background: var(--ink); color: #fff; }
.slink .slink-ic svg { width: 19px; height: 19px; }
.slink-t { display: grid; flex: 1; min-width: 0; gap: 1px; }
.slink { justify-content: flex-start; padding: 10px 14px 10px 10px; }
.slink:hover .slink-ic { background: var(--accent); color: var(--ink); }

/* ---------- Блок застосунку ---------- */
.app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.app-text { display: grid; gap: 22px; justify-items: start; }
.app-sec .tag { border-color: var(--ink); color: var(--ink); }
.app-lead { font-size: clamp(16px, 1.3vw, 19px); max-width: 46ch; line-height: 1.5; }
.app-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.app-list li { display: flex; gap: 12px; align-items: center; font-weight: 500; font-size: 16.5px; }
.app-list svg { width: 42px; height: 42px; padding: 10px; border-radius: 50%; background: rgba(14, 14, 14, .09); flex: none; }
.app-visual { position: relative; display: grid; place-items: center; min-height: 600px; }
.phone { position: relative; width: 292px; aspect-ratio: 292 / 600; border-radius: 48px; background: #0e0e0e; padding: 11px; box-shadow: 0 60px 90px -45px rgba(0, 0, 0, .6), inset 0 0 0 2px #333331; rotate: -6deg; }
.phone::before { content: ""; position: absolute; top: 21px; left: 50%; translate: -50% 0; width: 84px; height: 24px; border-radius: 99px; background: #000; z-index: 2; }
.phone-scr { height: 100%; border-radius: 38px; background: #f3f3f0; overflow: hidden; padding: 54px 15px 15px; display: flex; flex-direction: column; gap: 9px; color: #0e0e0e; }
.ph-top { display: flex; justify-content: space-between; align-items: center; }
.ph-logo { width: 96px; } .ph-logo svg { fill: #0e0e0e; width: 100%; height: auto; }
.ph-ava { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 2px #0e0e0e; }
.ph-h { font-family: var(--f-display); font-weight: 600; font-size: 26px; letter-spacing: -.045em; margin-top: 6px; }
.ph-chips { display: flex; gap: 5px; }
.ph-chips i { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 6px 10px; border-radius: 99px; background: #fff; }
.ph-chips i.on { background: #0e0e0e; color: #fff; }
.ph-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) 28px; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 9px 9px 9px 11px; font-size: 13px; }
.ph-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ph-row span { font-weight: 600; display: grid; line-height: 1.2; min-width: 0; }
.ph-row small { font-weight: 400; color: #8a8a85; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-row em { font-style: normal; width: 28px; height: 28px; border-radius: 50%; background: #0e0e0e; color: #fff; display: grid; place-items: center; font-weight: 600; }
.ph-row--on { background: #0e0e0e; color: #fff; }
.ph-row--on small { color: rgba(255, 255, 255, .6); }
.ph-row--on em { background: var(--accent); color: #0e0e0e; animation: pop-ok 2.6s var(--ease) infinite; }
@keyframes pop-ok { 0%, 60%, 100% { transform: none; } 70% { transform: scale(1.25); } 80% { transform: scale(.95); } }
.ph-card { margin-top: auto; background: var(--accent); border-radius: 16px; padding: 13px 14px; display: grid; gap: 5px; }
.ph-card span { font-size: 11.5px; font-weight: 500; }
.ph-card b { font-family: var(--f-display); font-size: 28px; letter-spacing: -.045em; line-height: 1; }
.ph-card b small { font-size: 13px; font-weight: 500; letter-spacing: 0; }
.ph-card i { display: block; height: 6px; border-radius: 99px; background: rgba(14, 14, 14, .15); position: relative; overflow: hidden; }
.ph-card i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 1%); background: #0e0e0e; border-radius: 99px; }
.float-card { position: absolute; z-index: 2; display: flex; gap: 12px; align-items: center; background: #fff; color: #0e0e0e; border-radius: 18px; padding: 11px 16px 11px 11px; box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .45); font-size: 14px; }
.float-card span { display: grid; line-height: 1.25; }
.float-card b { font-size: 15px; }
.float-card small { color: #5c5c57; font-size: 12.5px; }
.fc-ic { width: 40px; height: 40px; border-radius: 12px; background: #0e0e0e; color: var(--accent); display: grid !important; place-items: center; flex: none; }
.fc-ic svg { width: 20px; height: 20px; }
.fc-ic--sun { background: var(--accent); color: #0e0e0e; box-shadow: inset 0 0 0 1.5px #0e0e0e; }
.fc-1 { left: 2%; top: 7%; animation: floaty 6s ease-in-out infinite; }
.fc-2 { right: 0; bottom: 16%; animation: floaty 7s ease-in-out -2.5s infinite; }
@keyframes floaty { 50% { transform: translateY(-14px); } }
@media (max-width: 900px) { .app { grid-template-columns: minmax(0, 1fr); } .app-visual { min-height: 560px; } }
@media (max-width: 480px) { .phone { width: 240px; border-radius: 40px; } .phone-scr { border-radius: 31px; padding-top: 46px; } .phone::before { top: 18px; width: 70px; height: 20px; } .app-visual { min-height: 500px; } .float-card { padding: 9px 12px 9px 9px; } .float-card b { font-size: 13.5px; } .float-card small { font-size: 11.5px; } .fc-ic { width: 34px; height: 34px; } .fc-1 { left: -4px; top: 10%; } .fc-2 { right: -4px; bottom: 8%; } .stores--lg .store { flex: 1; justify-content: center; padding: 0 12px; gap: 8px; } .stores--lg .store span { font-size: 15.5px; } }

/* ---------- Hero: обертовий бейдж і зерно ---------- */
.hero::after { content: ""; position: absolute; inset: -60%; z-index: -1; pointer-events: none; opacity: .09; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(5) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); } }

/* ---------- Перехресні стрічки ---------- */
.tapes { position: relative; max-width: var(--max); margin: 0 auto; height: clamp(170px, 19vw, 270px); overflow: hidden; }
.tape { position: absolute; left: -6%; right: -6%; top: 50%; padding: clamp(12px, 1.3vw, 18px) 0; overflow: hidden; }
.tape--sun { background: var(--accent); color: var(--ink); rotate: -3.2deg; translate: 0 -50%; z-index: 2; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .35); }
.tape--ink { background: var(--ink); color: #fff; rotate: 2.6deg; translate: 0 -50%; }
.tape-track { display: flex; width: max-content; will-change: transform; animation: marquee 38s linear infinite; }
.tape--ink .tape-track { animation-direction: reverse; }
.tape-track span { font-family: var(--f-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 50px); letter-spacing: -.04em; line-height: 1.05; white-space: nowrap; display: inline-flex; align-items: center; gap: .5em; padding-right: .5em; }
.tape-track span svg { width: .55em; height: .55em; }
.tape--ink .tape-track span svg { color: var(--accent); }

/* ---------- Бенто: світіння за курсором ---------- */
.bento .tile:not(.tile--photo) { position: relative; overflow: hidden; isolation: isolate; }
.bento .tile:not(.tile--photo)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(280px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 229, 0, .15), transparent 70%); }
.bento .tile:not(.tile--photo)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 229, 0, .95), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* ---------- Scroll-driven: нові ефекти ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
  }
}
@media (prefers-reduced-motion: reduce) {
  .tapes .tape-track { transform: none !important; }
}

.card > .tag, .stack > .tag { justify-self: start; }

/* ---------- v5: зони клубу — статична сітка замість каруселі ---------- */
.zgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.zgrid .zcard, .zgrid .zcard:nth-child(even) { aspect-ratio: 1 / .8; max-width: none; }
.zgrid .zcard img { inset: 0; height: 100%; }
@media (max-width: 640px) {
  .zgrid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * clamp(4px, 2.4vw, 38px)); padding-inline: clamp(4px, 2.4vw, 38px); scroll-padding-inline: clamp(4px, 2.4vw, 38px); }
  .zgrid::-webkit-scrollbar { display: none; }
  .zgrid .zcard { scroll-snap-align: start; aspect-ratio: 1 / 1.05 !important; }
}

/* ---------- v5: фото в бенто — люди, знак у кутку ---------- */
.tile--photo img { filter: none; object-position: 72% 50%; }
.tile--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 45%); pointer-events: none; }
.bigL--corner { left: 22px; top: auto; bottom: 22px; translate: none; width: 26%; max-width: 110px; }
.tile-cap { position: absolute; z-index: 3; left: 18px; top: 18px; }

/* ---------- v6: перший екран — оффер, соцдоказ, підзаголовок ---------- */
.hero-lead { color: rgba(255, 255, 255, .8); font-size: clamp(16px, 1.35vw, 20px); line-height: 1.45; max-width: 44ch; margin-top: -10px; animation: fade-up .9s var(--ease) both; animation-delay: calc(var(--intro, 0s) + .45s); }
.hc-rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; color: var(--text-2); margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(14, 14, 14, .08); }
.hcard--light .hc-rate { color: #5c5c57; }
.hc-rate b { font-family: var(--f-display); font-size: 18px; color: #0e0e0e; letter-spacing: -.03em; }
.hc-stars { color: #0e0e0e; letter-spacing: 1px; font-size: 13px; }
.hcard--offer { justify-content: flex-end; gap: 6px; }
.hc-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.offer { display: flex; align-items: baseline; gap: 12px; line-height: .9; }
.offer b { font-family: var(--f-display); font-weight: 700; font-size: clamp(46px, 4.4vw, 64px); letter-spacing: -.055em; }
.offer s { font-size: 18px; font-weight: 500; opacity: .5; text-decoration-thickness: 2px; }
.hcard--offer .hc-small { opacity: .8; max-width: 34ch; }


/* =====================================================================
   v7 — стабільна верстка на iOS/Android, без «обрізаних» блоків
   ===================================================================== */
/* фото тренерок: зображення завжди заповнює рамку */
.coach-ph { display: block; }
.coach-ph img { position: absolute; inset: 0; }
.coach-ph .mono-l { position: absolute; inset: 0; display: grid; place-items: center; }
.coach-ph .pill { max-width: calc(100% - 24px); white-space: normal; font-size: 13px; }
.tcard-img img, .menu-card .ph img, .gal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* стрічки: паралельно, з проміжком — текст на обох читається */
.tapes { height: auto; display: grid; gap: 16px; padding-block: clamp(36px, 5vw, 64px); overflow: hidden; }
.tape { position: relative; left: auto; right: auto; top: auto; margin-inline: -4%; translate: none !important; }
.tape--ink { rotate: -2deg; }
.tape--sun { rotate: -2deg; box-shadow: none; }
@media (max-width: 640px) { .tapes { gap: 12px; } .tape { padding-block: 10px; } .tape-track span { font-size: 26px; } }

/* перший екран на телефоні: фото лише у верхній частині, людина в русі */
@media (max-width: 700px) {
  .hero-bg { bottom: auto; height: min(680px, 100svh); }
  .hero-bg::after { background: linear-gradient(180deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, .35) 40%, rgba(10, 10, 10, .85) 82%, #0e0e0e 100%); }
  .hero-bg img { object-position: 40% 50%; filter: brightness(.75) contrast(1.05); }
}
.hero-bg picture { position: absolute; inset: 0; display: block; }

/* =====================================================================
   v8 — меню з розділом «Тренування», калькулятор абонемента, тренери
   ===================================================================== */
/* випадаюче меню «Тренування» */
.nav { align-items: center; }
.nav-dd { position: relative; }
.nav-dd-t { display: inline-flex; align-items: center; gap: 4px; }
.nav-dd-t svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.nav-dd:hover .nav-dd-t svg, .nav-dd:focus-within .nav-dd-t svg { transform: rotate(180deg); }
.dd { position: absolute; top: 100%; left: 50%; translate: -50% 0; padding-top: 18px; width: 640px; max-width: calc(100vw - 32px); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .3s var(--ease), visibility .25s; z-index: 60; }
.nav-dd:hover .dd, .nav-dd:focus-within .dd { opacity: 1; visibility: visible; transform: none; }
.dd > .dd-grid, .dd > .dd-cta { background: #fff; color: var(--ink); }
.dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 10px; border-radius: 22px 22px 0 0; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .45); }
.dd-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 0 0 22px 22px; border-top: 1px solid var(--line); text-decoration: none; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .45); }
.dd-cta span { display: grid; gap: 2px; }
.dd-cta b { font-size: 15px; }
.dd-cta small { font-size: 13px; color: #5c5c57; }
.dd-cta .ico { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; flex: none; }
.dd-cta .ico svg { width: 15px; height: 15px; }
.dd-i { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; text-decoration: none; color: var(--ink); transition: background-color .2s; }
.dd-i:hover { background: #f2f2ef; }
.dd-i b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.dd-i small { display: block; font-size: 13px; color: #5c5c57; line-height: 1.35; margin-top: 2px; }
.dd-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--accent); color: var(--ink); display: grid; place-items: center; flex: none; }
.dd-ic svg { width: 19px; height: 19px; }
.nav .dd a { opacity: 1; padding-block: 12px; }
.nav .dd a::after { display: none; }
.nav .dd .dd-cta { padding: 14px 18px; }

/* мобільне меню: розділ «Тренування» карточками, далі основні пункти */
.mnav-sec { display: grid; gap: 10px; }
.mnav-h { font-size: 13px; color: rgba(255, 255, 255, .45); font-weight: 500; }
.mnav-tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dd-i--m { background: #1d1d1c; color: #fff; padding: 12px; }
.dd-i--m:hover { background: #262625; }
.dd-i--m small { color: rgba(255, 255, 255, .55); }
.dd-i--m:first-child { grid-column: 1 / -1; }
.mnav ul.mnav-main li a { font-size: clamp(26px, 7.4vw, 38px); }

/* калькулятор абонемента */
.mcalc { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 12px; }
.mcalc-in { display: grid; gap: 22px; align-content: start; }
.mcalc-in .mono { display: block; margin-bottom: 10px; }
.seg--wide label { min-width: 54px; justify-content: center; }
.mcalc-out { background: #0e0e0e; color: #fff; }
.mcalc-out .mono { color: rgba(255, 255, 255, .6) !important; }
.mcalc-out .r { border-top-color: rgba(255, 255, 255, .12); }
.mcalc-out .r b { font-variant-numeric: tabular-nums; }
.mcalc-out .r--save b { color: var(--accent); }
.mc-title { font-family: var(--f-display); font-size: clamp(22px, 2vw, 28px); letter-spacing: -.03em; }
.mcalc-out .price { color: var(--accent); }
.mc-alt { font-size: 13.5px; color: rgba(255, 255, 255, .55); line-height: 1.45; }
@media (max-width: 860px) { .mcalc { grid-template-columns: minmax(0, 1fr); } }

/* тренери */
.coach-bio { font-size: 14px; color: var(--text-2); line-height: 1.45; }
.coach-ph img { z-index: 1; }
.coach-ph .pill { z-index: 2; }

/* вхід для наявних клієнтів */
.alt-login { border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 16px; }
.alt-login summary { cursor: pointer; font-weight: 600; font-size: 14.5px; list-style: none; }
.alt-login summary::-webkit-details-marker { display: none; }

/* кроки на світлому фоні */
.steps--light .step { border-top-color: var(--ink); }
@media (max-width: 560px) { .dd-i--m:not(:first-child) { flex-direction: column; gap: 8px; } }

/* =====================================================================
   v9 — мега-меню, підменю, купівля абонемента
   ===================================================================== */
.nav-dd--mega { position: static; }
.dd--mega { left: 50%; translate: -50% 0; width: min(1120px, calc(100vw - 40px)); padding-top: 14px; }
.mega { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, .8fr); gap: 8px; background: #fff; color: var(--ink); border-radius: 26px; padding: 10px; box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .5); }
.mega-col { padding: 14px 12px; display: grid; gap: 10px; align-content: start; }
.mega-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 600; color: #8a8a85; text-transform: uppercase; letter-spacing: .06em; padding-inline: 4px; }
.mega-h a { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink) !important; opacity: 1 !important; padding: 0 !important; }
.mega-formats { display: grid; gap: 2px; }
.mega-col--dirs { background: #f5f5f2; border-radius: 20px; }
.mega-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.mega-cats b { display: block; font-size: 14px; margin-bottom: 6px; padding-left: 4px; }
.mega-cats ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.nav .mega-cats a { display: flex; align-items: center; gap: 8px; padding: 5px 4px !important; font-size: 14px; border-radius: 8px; opacity: .85; color: var(--ink); }
.nav .mega-cats a:hover { opacity: 1; background: #fff; }
.mega-cats em { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 99px; background: var(--accent); color: var(--ink); }
.mega-cta { background: #0e0e0e; color: #fff; border-radius: 20px; padding: 20px; gap: 12px; }
.mega-cta .pill { justify-self: start; }
.mega-cta b { font-family: var(--f-display); font-size: 24px; line-height: 1.05; letter-spacing: -.035em; }
.mega-cta p { font-size: 13.5px; color: rgba(255, 255, 255, .65); line-height: 1.45; }
.mega-cta .btn { justify-self: start; background: var(--accent); color: var(--ink); }
.nav .mega-cta .mega-link { color: #fff; font-size: 13.5px; padding: 0; opacity: .8; }
.nav .mega-cta .mega-link:hover { opacity: 1; }
.nav .mega a::after, .nav .dd-list a::after { display: none; }
.dd--list { width: 260px; }
.dd-list { display: grid; gap: 2px; background: #fff; color: var(--ink); border-radius: 18px; padding: 8px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .45); }
.nav .dd-list a { padding: 10px 12px; border-radius: 12px; font-size: 14.5px; opacity: 1; color: var(--ink); }
.nav .dd-list a:hover { background: #f2f2ef; }
@media (max-width: 1240px) { .mega { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } .mega-cta { display: none; } }

/* мобільне меню: групові напрями — акордеон */
.mnav-acc { border-radius: 16px; background: #1d1d1c; padding: 0 14px; }
.mnav-acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-weight: 600; font-size: 15.5px; }
.mnav-acc summary::-webkit-details-marker { display: none; }
.mnav-acc summary svg { width: 18px; height: 18px; transition: transform .3s; }
.mnav-acc[open] summary svg { transform: rotate(180deg); }
.mega-cats--m { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-bottom: 16px; }
.mega-cats--m b { color: rgba(255, 255, 255, .5); font-size: 12.5px; font-weight: 500; }
.mega-cats--m a { display: flex; gap: 6px; align-items: center; padding: 5px 4px; color: #fff; text-decoration: none; font-size: 15px; }
.mnav .mega-cats--m li { overflow: visible; }

/* картки цін: кнопка «Купити» + пробне */
.pc-trial { background: none; border: 0; padding: 4px 0 0; font: inherit; font-size: 13.5px; color: inherit; opacity: .7; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; justify-self: center; align-self: center; }
.pc-trial:hover { opacity: 1; }
.sess--buy .t { font-size: 26px; }
.sess--buy .t small { font-size: 16px; }
.mnav .mega-cats--m li a { font-family: var(--f-sans); font-size: 15px; font-weight: 500; letter-spacing: 0; border: 0; padding: 6px 2px; animation: none; justify-content: flex-start; align-items: center; gap: 6px; line-height: 1.25; }
.mnav .mega-cats--m em { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 99px; background: var(--accent); color: var(--ink); }

/* v11 — вхід паролем з автозаповненням */
.sr-user { position: absolute !important; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }
.or { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 13px; margin: 2px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.field .hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-3); }

/* v14 — документи, 404, згода, оренда */
.consent { font-size: 12px; line-height: 1.45; opacity: .62; margin: 2px 0 0; }
.consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ftr-bottom { flex-wrap: wrap; row-gap: 10px; }
.ftr-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ftr-legal a { color: inherit; opacity: .7; text-decoration: none; }
.ftr-legal a:hover { opacity: 1; text-decoration: underline; }
.legal { max-width: 780px; margin: 0 auto; display: grid; gap: 18px; }
.legal h1 { margin: 6px 0 0; }
.legal-sub { color: var(--text-2); font-size: 16px; margin: 0; }
.legal-toc { background: var(--surface); border-radius: var(--r-md); padding: 18px 22px; }
.legal-toc ol { margin: 0; padding-left: 0; list-style: none; columns: 2; column-gap: 28px; }
.legal-toc li { margin: 4px 0; break-inside: avoid; }
.legal-toc a { color: var(--text); text-decoration: none; font-size: 14.5px; }
.legal-toc a:hover { text-decoration: underline; }
.legal-sec { padding-top: 8px; border-top: 1px solid var(--line); }
.legal-sec h2 { font-family: var(--f-display); font-size: clamp(20px, 2.2vw, 24px); margin: 14px 0 10px; }
.legal-sec p, .legal-sec li, .legal-sec dd { font-size: 15.5px; line-height: 1.65; color: var(--text); }
.legal-sec ol, .legal-sec ul { padding-left: 22px; margin: 0; display: grid; gap: 8px; }
.legal-sec a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.legal-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0; }
.legal-dl dt { color: var(--text-2); font-size: 14.5px; }
.legal-dl dd { margin: 0; }
.legal-foot { color: var(--text-2); font-size: 14px; border-top: 1px solid var(--line); padding-top: 18px; }
.legal-foot a { color: inherit; }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } .legal-dl { grid-template-columns: 1fr; gap: 2px 0; } .legal-dl dd { margin-bottom: 10px; } }
.nf-in { max-width: 760px; display: grid; gap: 18px; justify-items: start; }
.nf-code { font-family: var(--f-display); font-weight: 700; font-size: clamp(110px, 22vw, 240px); line-height: .85; letter-spacing: -.04em; color: var(--accent); -webkit-text-stroke: 2px var(--ink); }
.nf-links { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.nf-links a { color: var(--text); }
.seg--wrap { flex-wrap: wrap; }
.seg--wrap label { flex: 1 1 auto; }
.pc-new { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); }
.legal .tag { justify-self: start; }

/* v16 — плашка «Засновниця» внизу фото, щоб не закривала обличчя */
.coach-ph .pill { top: auto; bottom: 12px; left: 12px; white-space: nowrap; font-size: 12.5px; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .45); }
@media (max-width: 520px) { .coach-ph .pill { font-size: 11.5px; padding: 5px 10px; bottom: 10px; left: 10px; max-width: calc(100% - 20px); } }

/* v17 — блог і партнери */
.crumbs--ink { color: var(--text-3); }
.crumbs--ink a { color: var(--text-2); }
.crumbs--ink a:hover { color: var(--text); }
.blog-chips { margin-bottom: 4px; }
.bcard .tcard-img { aspect-ratio: 16 / 10; }
.bcard .tcard-img img { object-position: 50% 40%; }
.bcard .tcard-body h3 { font-size: 20px; line-height: 1.18; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcard .tcard-body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcard[hidden], .bfeat[hidden] { display: none; }
.bfeat { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 8px; background: var(--surface); border-radius: var(--r-lg); padding: 8px; text-decoration: none; color: var(--text); transition: transform .45s var(--ease), box-shadow .45s; }
.bfeat:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .45); }
.bfeat-img { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; background: #222; }
.bfeat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.bfeat:hover .bfeat-img img { transform: scale(1.05); }
.bfeat-img .pill { position: absolute; top: 14px; left: 14px; }
.bfeat-body { padding: clamp(16px, 2.4vw, 36px); display: flex; flex-direction: column; gap: 16px; justify-content: center; align-items: flex-start; }
.bfeat-body h2 { margin: 0; }
.bfeat-body p { color: var(--text-2); font-size: 16px; margin: 0; }
@media (max-width: 900px) { .bfeat { grid-template-columns: minmax(0, 1fr); } .bfeat-body { padding: 14px 12px 16px; } }
.blog-empty { color: var(--text-2); margin-top: 18px; }

.post { display: grid; gap: clamp(22px, 3vw, 36px); }
.post-head { max-width: 900px; margin: 0 auto; width: 100%; display: grid; gap: 18px; justify-items: start; }
.post-head h1 { margin: 0; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--text-2); font-size: 14.5px; }
.post-meta .tag { margin-right: 2px; }
.post-cover { margin: 0 auto; width: 100%; max-width: 1240px; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 8; background: #222; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (max-width: 640px) { .post-cover { aspect-ratio: 4 / 3; border-radius: var(--r-lg); } }
.post-body { max-width: 720px; margin: 0 auto; width: 100%; font-size: 17.5px; line-height: 1.7; }
.post-body > * { margin: 0 0 18px; }
.post-body h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(23px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.03em; margin: 42px 0 14px; }
.post-body h3 { font-family: var(--f-display); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -.02em; margin: 28px 0 10px; }
.post-body > :first-child { margin-top: 0; }
.post-body > p:first-child { font-size: 19.5px; line-height: 1.6; }
.post-step { display: flex; align-items: center; gap: 12px; }
.post-step span { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 15px; font-weight: 700; }
.post-body ul, .post-body ol { padding-left: 0; list-style: none; display: grid; gap: 12px; }
.post-body li { position: relative; padding-left: 34px; }
.post-body ul li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--ink); }
.post-body ol { counter-reset: n; }
.post-body ol li { counter-increment: n; }
.post-body ol li::before { content: counter(n); position: absolute; left: 0; top: .15em; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.post-body b { font-weight: 600; }
.post-cta { max-width: 900px; margin: 12px auto 0; width: 100%; background: var(--accent); color: var(--on-accent); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: end; }
.post-cta .mono { color: inherit; opacity: .75; }
.post-cta h2 { margin: 6px 0 8px; }
.post-cta p { margin: 0; max-width: 52ch; }
.post-cta .btn--sun { background: var(--ink); color: #fff; }
.post-cta .btn--sun .ico { background: var(--accent); color: var(--ink); }
@media (max-width: 760px) { .post-cta { grid-template-columns: minmax(0, 1fr); } }
.post-foot { max-width: 900px; margin: 0 auto; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; }
@media (max-width: 640px) { .post-body { font-size: 16.5px; } .post-body > p:first-child { font-size: 18px; } }

.partner { position: relative; background: var(--surface); border-radius: var(--r-lg); padding: clamp(20px, 2.2vw, 28px); min-height: 220px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text); transition: transform .45s var(--ease), background-color .3s; }
.partner:hover { transform: translateY(-5px); }
.partner-name { font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 3vw, 42px); line-height: 1; letter-spacing: -.045em; margin-top: auto; }
.partner-d { color: var(--text-2); font-size: 14.5px; max-width: 30ch; }
.partner .tcard-go { position: absolute; top: 18px; right: 18px; }
.partner > .mono { padding-right: 48px; }
.partner:hover .tcard-go { transform: rotate(45deg); background: var(--accent); color: var(--ink); }
.partner--cta { background: var(--ink); color: #fff; }
.partner--cta .mono, .partner--cta .partner-d { color: rgba(255, 255, 255, .7); }
.partner--cta .partner-name { color: var(--accent); }
.partner--cta .tcard-go { background: var(--accent); color: var(--ink); }
.box--grey .partner { background: #fff; }
.post-cta.dark { background: var(--ink); color: #fff; }
.post-cta.dark .btn--sun { background: var(--accent); color: var(--on-accent); }
.post-cta.dark .btn--sun .ico { background: var(--ink); color: #fff; }
.post-cta.dark p { color: rgba(255, 255, 255, .78); }
.bcta { grid-column: span 2; background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 14px; min-height: 300px; position: relative; overflow: hidden; }
.bcta::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; border: 36px solid var(--accent); opacity: .9; }
.bcta h3 { margin: 0; max-width: 18ch; position: relative; z-index: 1; }
.bcta p { color: rgba(255, 255, 255, .75); margin: 0; max-width: 46ch; position: relative; z-index: 1; }
.bcta .pill, .bcta .btn-row { position: relative; z-index: 1; }
.bcta .btn--glass { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .25); }
.bcta[hidden] { display: none; }
@media (max-width: 1000px) { .bcta { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .partners { gap: 10px; }
  .partner { min-height: 0; padding: 18px 18px 20px; gap: 8px; }
  .partner-name { font-size: 30px; margin-top: 14px; }
  .partner .tcard-go { top: 14px; right: 14px; width: 34px; height: 34px; }
  .bcta::after { width: 180px; height: 180px; border-width: 26px; right: -50px; top: -50px; }
}