/* SARVAROV — «трасса»: чёрный + жёлтый как на шатре, полосы «зебра»,
   узкий шрифт капсом (Oswald), скошенные углы, острые формы. */

@font-face { font-family: "Oswald"; font-weight: 500; font-display: swap; src: url("/static/fonts/oswald-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Oswald"; font-weight: 500; font-display: swap; src: url("/static/fonts/oswald-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Oswald"; font-weight: 600; font-display: swap; src: url("/static/fonts/oswald-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Oswald"; font-weight: 600; font-display: swap; src: url("/static/fonts/oswald-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Oswald"; font-weight: 700; font-display: swap; src: url("/static/fonts/oswald-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Oswald"; font-weight: 700; font-display: swap; src: url("/static/fonts/oswald-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url("/static/fonts/golos-text-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url("/static/fonts/golos-text-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Golos Text"; font-weight: 500; font-display: swap; src: url("/static/fonts/golos-text-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 500; font-display: swap; src: url("/static/fonts/golos-text-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-display: swap; src: url("/static/fonts/golos-text-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-display: swap; src: url("/static/fonts/golos-text-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Golos Text"; font-weight: 700; font-display: swap; src: url("/static/fonts/golos-text-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 700; font-display: swap; src: url("/static/fonts/golos-text-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  color-scheme: dark;               /* тёмные нативные поля, списки, скроллбары */
  --yellow: #ffd200;
  --yellow-2: #ffe14d;
  --black: #121212;
  --black-2: #1a1a1a;
  --black-3: #232323;
  --stripes: repeating-linear-gradient(-45deg, var(--yellow) 0 14px, #121212 14px 28px);

  /* одна тёмная тема на весь сайт (страница не «мигает» светлыми секциями) */
  --bg: var(--black);
  --surface: var(--black-2);
  --surface-2: var(--black-3);
  --ink: #f2f2ee;
  --ink-2: #b6b6b0;
  --ink-3: #85857f;
  --line: #2e2e2e;
  --primary: var(--yellow);
  --primary-ink: #121212;
  --primary-hover: var(--yellow-2);
  --secondary: var(--yellow);
  --accent: var(--yellow);
  --accent-ink: #121212;
  --sale: #ff4b4b;
  --success: #4ade80;
  --danger: #ff6b6b;
  --topbar-bg: var(--yellow);
  --topbar-ink: #121212;
  --header-bg: #0e0e0e;
  --header-ink: var(--ink);
  --header-muted: #9a9a95;
  --field-bg: var(--black-3);
  --nav-line: #232323;
  --footer-bg: #0e0e0e;
  --footer-ink: var(--ink);
  --footer-muted: #9a9a95;
  --img-bg: #ffffff;
  --perk-icon: var(--yellow);
  --lead-bg: var(--surface);
  --lead-ink: var(--ink);

  --font-body: "Golos Text", system-ui, sans-serif;
  --font-head: "Oswald", "Arial Narrow", sans-serif;
  --head-weight: 700;
  --head-transform: uppercase;
  --head-tracking: 0.01em;

  /* форма: всё острое, «пилюль» нет вообще */
  --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-pill: 3px;
  --btn-radius: 2px;
  --badge-radius: 2px;
  --chip-radius: 2px;
  --search-radius: 3px;
  --shadow-1: none;
  --shadow-2: 0 18px 40px rgb(0 0 0 / .5);
  --shadow-pop: 0 0 0 1px #3a3a3a;
  --cut: 14px;
}

/* скошенный угол — фирменная форма */
.cut { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.btn { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; font-size: 16px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.btn--sm { font-size: 14px; }
.btn--ghost, .btn--light { clip-path: none; }
.card__buy { clip-path: none; }
.btn--dark { --b-bg: var(--surface-2); --b-ink: var(--ink); --b-line: #3a3a3a; }

.topbar { font-weight: 600; }
.header .search input { color: var(--ink); }
.header .search input::placeholder { color: #9a9a95; }
.header .search input:focus { background: var(--black-3); color: var(--ink); border-color: var(--yellow); }
.header .search button { color: #bdbdb8; }
.header__phone small { color: var(--header-muted); }
.mainnav { background: #161616; }
.mainnav a { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; color: #e9e9e5; padding: 13px 16px; }
.mainnav a:hover, .mainnav a.is-active { color: var(--yellow); border-bottom-color: var(--yellow); }
.cart-count { left: 18px; }

.logo-word { display: grid; line-height: .9; }
.logo-word b { font-family: var(--font-head); font-weight: 700; font-size: 34px; letter-spacing: .02em; color: var(--ink); font-style: italic; transform: skewX(-8deg); }
.logo-word b i { color: var(--yellow); font-style: inherit; }
.logo-word small { font-family: var(--font-head); font-size: 11px; letter-spacing: .32em; color: var(--yellow); margin-top: 4px; padding-left: 2px; }

.badge { font-family: var(--font-head); font-weight: 600; letter-spacing: .06em; }
.badge--hit { background: var(--yellow); color: #121212; }
.card { border-radius: var(--r-md); border: 1px solid var(--line); }
.card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.card:hover::after { transform: scaleX(1); }
.price b { font-family: var(--font-head); font-weight: 600; font-size: 22px; letter-spacing: .01em; }
.buybox__price b { font-family: var(--font-head); font-weight: 600; font-size: 42px; }
.line__sum, .summary__total { font-family: var(--font-head); font-weight: 600; }
.tile { border: 1px solid var(--line); }
.chip { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
.chip:hover, .chip.is-active { background: var(--yellow); color: #121212; border-color: var(--yellow); }
.chip:hover small, .chip.is-active small { color: #121212; }
.pager .is-current { background: var(--yellow); color: #121212; border-color: var(--yellow); }
.steps li::before { font-family: var(--font-head); border-radius: 2px; clip-path: polygon(0 0, 75% 0, 100% 25%, 100% 100%, 0 100%); }
.lead { position: relative; overflow: hidden; }
.lead::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--stripes); }
.input, .select, .textarea { background: var(--black-3); border-color: #3a3a3a; }
.input::placeholder, .textarea::placeholder { color: #8a8a85; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgb(255 210 0 / .2); }
.lead .check a { color: var(--yellow); }
.lead h2 em { color: var(--yellow); font-style: normal; }
.fieldset legend { letter-spacing: .02em; }
.summary { background: var(--surface); border: 1px solid var(--line); }
.summary__total { font-size: 28px; }
.footer { border-top: 10px solid transparent; border-image: var(--stripes) 10; }
.section__head h2 { display: flex; align-items: center; gap: 14px; }
.section__head h2::before { content: ""; width: 10px; height: .9em; background: var(--yellow); transform: skewX(-15deg); flex: none; }
.crumbs { text-transform: none; }
.done-card { border-top: 6px solid var(--yellow); }

/* --- главная ------------------------------------------------------------- */
.sv-hero { background: var(--bg); padding: 0 0 40px; position: relative; overflow: hidden; }
.sv-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--stripes); }
.sv-hero .slider__track { border-radius: 0; }
.sv-slide { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px; min-height: 500px; padding: 48px 0 72px; border-radius: 0; }
.sv-slide__text { position: relative; z-index: 1; }
.sv-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .22em; font-size: 13px; color: var(--yellow); margin-bottom: 18px; }
.sv-kicker::before { content: ""; width: 36px; height: 3px; background: var(--yellow); }
/* заголовок героя: не больше двух строк на десктопе; курсив с запасом под выносные (Д, Ц, Щ) */
.sv-slide h2 { font-size: clamp(36px, 4.4vw, 62px); line-height: 1.04; padding-bottom: .06em; letter-spacing: 0; margin-bottom: 18px; font-style: italic; }
.sv-slide h2 em { color: var(--yellow); font-style: inherit; }
.sv-slide p { font-size: 18px; color: var(--ink-2); max-width: 480px; margin-bottom: 30px; }
.sv-slide__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.sv-slide__btns .btn--ghost { color: var(--ink); }
.sv-slide__art { position: relative; justify-self: center; width: min(360px, 100%); }
.sv-slide__art::before { content: ""; position: absolute; inset: 8% -14% -8% 14%; background: var(--yellow); transform: skewX(-10deg); }
.sv-slide__art img { position: relative; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #fff; box-shadow: 0 30px 60px rgb(0 0 0 / .5); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }
/* 3D-камера: пока WebGL не запустился, видно обычное фото */
.sv-tube, .sv-tube__hint { display: none; }
.sv-slide__art.is-3d { width: min(460px, 100%); }
.sv-slide__art.is-3d img { display: none; }
.sv-slide__art.is-3d::before { inset: 14% -6% 4% 18%; }
.sv-slide__art.is-3d .sv-tube { display: block; position: relative; width: 100%; aspect-ratio: 1; cursor: grab; touch-action: pan-y; }
.sv-slide__art.is-grabbing .sv-tube { cursor: grabbing; }
.sv-slide__art.is-3d .sv-tube__hint { display: inline-flex; position: absolute; left: 50%; bottom: -6px; translate: -50% 0; padding: 6px 12px; background: var(--bg); border: 1px solid #3a3a3a; color: var(--ink-2); font-size: 13px; white-space: nowrap; pointer-events: none; }
.sv-art-type { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.sv-art-type::before { content: ""; position: absolute; inset: 6%; background: var(--stripes); clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 100%, 12% 100%, 0 88%); }
.sv-art-type span { position: relative; background: var(--bg); color: var(--yellow); font-family: var(--font-head); font-weight: 700; font-size: clamp(34px, 4vw, 56px); text-transform: uppercase; line-height: 1; padding: 22px 26px; text-align: center; font-style: italic; border: 3px solid var(--yellow); }
/* точки слева внизу, стрелки справа внизу: ничего не перекрывает текст */
.sv-hero .slider__dots { justify-content: flex-start; margin: 0; position: absolute; left: 0; bottom: 32px; }
.sv-hero .slider__dots button { background-color: #3a3a3a; border-radius: 1px; }
.sv-hero .slider__dots button[aria-current="true"] { background-color: var(--yellow); }
.sv-hero .slider__arrow { top: auto; bottom: 20px; translate: none; background: var(--surface-2); color: var(--ink); box-shadow: none; border-radius: 2px; width: 44px; height: 44px; }
.sv-hero .slider__arrow--prev { left: auto; right: 54px; }
.sv-hero .slider__arrow--next { right: 0; }
@media (prefers-reduced-motion: no-preference) {
  .sv-slide:first-child .sv-slide__text > * { animation: sv-rise .7s var(--ease) both; }
  .sv-slide:first-child .sv-slide__text > :nth-child(2) { animation-delay: .06s; }
  .sv-slide:first-child .sv-slide__text > :nth-child(3) { animation-delay: .12s; }
  .sv-slide:first-child .sv-slide__text > :nth-child(4) { animation-delay: .18s; }
  .sv-slide:first-child .sv-slide__art { animation: sv-in .8s .1s var(--ease) both; }
}
@keyframes sv-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes sv-in { from { opacity: 0; transform: translateX(24px); } }

/* разделы: асимметричное бенто, ровно 4 ячейки (1 высокая + 2 с фото + 1 широкая) */
.sv-bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 250px 200px; gap: 14px; }
.sv-cell { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 24px; overflow: hidden; background: var(--surface); color: var(--ink); isolation: isolate; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.sv-cell h3 { font-size: 30px; line-height: 1; margin: 0; }
.sv-cell p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 30ch; }
.sv-cell__go { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--yellow); font-size: 14px; margin-top: 6px; }
.sv-cell__go .icon { transition: transform var(--dur) var(--ease); }
.sv-cell:hover .sv-cell__go .icon { transform: translateX(5px); }
.sv-cell--moto { grid-row: span 2; justify-content: space-between; }
.sv-cell--moto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--stripes); opacity: .12; }
.sv-cell__big { font-family: var(--font-head); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: clamp(52px, 5.6vw, 86px); line-height: 1; padding-bottom: .06em; color: transparent; -webkit-text-stroke: 2px var(--yellow); }
.sv-cell .sv-cell__ico { width: 64px; height: 64px; color: var(--yellow); stroke-width: 1.5; }
.sv-cell--photo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.sv-cell--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(18 18 18 / .35) 0%, rgb(18 18 18 / .93) 58%); }
.sv-cell--photo:hover img { transform: scale(1.05); }
.sv-cell--train { grid-column: span 2; background: var(--yellow); color: #121212; flex-direction: row; align-items: flex-end; justify-content: space-between; }
.sv-cell--train p { color: #3a3a30; }
.sv-cell--train .sv-cell__go { color: #121212; }
.sv-cell--train .sv-cell__ico { width: 84px; height: 84px; stroke-width: 1.3; color: #121212; opacity: .85; flex: none; }

.sv-perks { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--line); }
.sv-perks div { display: flex; gap: 14px; align-items: center; padding: 22px 24px; border-right: 1px solid var(--line); }
.sv-perks div:last-child { border-right: 0; }
.sv-perks .icon { width: 30px; height: 30px; color: var(--yellow); }
.sv-perks b { display: block; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; font-size: 17px; }
.sv-perks small { color: var(--ink-2); }

.sv-train { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.sv-train__text { padding: 48px; }
.sv-train__text p { color: var(--ink-2); font-size: 17px; max-width: 46ch; }
.sv-train__list { padding: 48px; background: var(--surface-2); display: grid; gap: 14px; align-content: center; }
.sv-plan { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 18px 20px; background: var(--surface); border-left: 4px solid var(--yellow); transition: background var(--dur) var(--ease); }
.sv-plan:hover { background: #262626; }
.sv-plan b { font-family: var(--font-head); text-transform: uppercase; font-size: 20px; font-weight: 600; letter-spacing: .02em; }
.sv-plan span { font-family: var(--font-head); color: var(--yellow); font-size: 18px; white-space: nowrap; }
.sv-plan p { grid-column: 1 / -1; margin: 0; color: var(--ink-2); font-size: 14px; }

/* тренировки */
.sv-tr-hero { position: relative; overflow: hidden; padding: 8px 0 72px; }
.sv-tr-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--stripes); }
.sv-tr-hero h1 { font-size: clamp(44px, 6.2vw, 86px); line-height: 1.02; padding-bottom: .06em; font-style: italic; margin-bottom: 20px; }
.sv-tr-hero h1 em { color: var(--yellow); font-style: inherit; }
.sv-tr-hero .prose { color: var(--ink-2); }
.sv-tr-hero .prose h2 { color: var(--ink); font-size: 24px; }
.sv-tr-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: start; }
.sv-tr-card { background: var(--surface); padding: 28px; border-top: 6px solid var(--yellow); display: grid; gap: 12px; position: sticky; top: calc(var(--header-h) + 64px); }
.sv-tr-card b { font-family: var(--font-head); font-size: 22px; text-transform: uppercase; }
.sv-tr-card p { color: var(--ink-2); margin: 0; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.plan { position: relative; display: grid; gap: 10px; align-content: start; padding: 28px 24px; background: var(--surface); border-top: 4px solid #3a3a3a; }
.plan--featured { border-top-color: var(--yellow); background: var(--surface-2); }
.plan__tag { position: absolute; top: -14px; right: 20px; background: var(--yellow); color: #121212; font-family: var(--font-head); text-transform: uppercase; font-size: 12px; letter-spacing: .1em; padding: 4px 10px; }
.plan h3 { font-size: 24px; margin: 0; }
.plan__price { font-family: var(--font-head); font-size: 26px; font-weight: 600; color: var(--yellow); }
.plan__dur { color: var(--ink-3); font-size: 14px; }
.plan p { margin: 0; color: var(--ink-2); }
.plan .btn { margin-top: 10px; justify-self: start; }
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.gal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 1100px) {
  .sv-perks { grid-template-columns: 1fr 1fr; }
  .sv-perks div:nth-child(2) { border-right: 0; }
  .sv-perks div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .logo-word b { font-size: 28px; }
  .sv-slide { grid-template-columns: 1fr; min-height: 0; padding: 28px 0 84px; gap: 24px; }
  .sv-slide__art { width: 56%; justify-self: start; order: -1; }
  .sv-art-type { width: 80%; aspect-ratio: 16 / 9; }
  .sv-hero .slider__arrow { display: grid; }
  .sv-bento { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .sv-cell { min-height: 200px; }
  .sv-cell--moto { grid-row: auto; grid-column: span 2; min-height: 230px; }
  .sv-train, .sv-tr-grid { grid-template-columns: 1fr; }
  .sv-tr-card { position: static; }
  .sv-train__text, .sv-train__list { padding: 28px 20px; }
}
@media (max-width: 600px) {
  .sv-bento { grid-template-columns: 1fr; gap: 10px; }
  .sv-cell--moto, .sv-cell--train { grid-column: auto; }
  .sv-cell--train .sv-cell__ico { width: 56px; height: 56px; }
  .sv-perks { grid-template-columns: 1fr; }
  .sv-perks div { border-right: 0; border-bottom: 1px solid var(--line); }
  .sv-slide h2 { font-size: 36px; }
}