/* Сайт pelvicgym.ru (G-39). Цвета, радиусы и шрифт — токены продукта
   (docs/design-tokens.json, design-mockups/src/styles/tokens.css), тема — по системе. */

@font-face {
  font-family: "Onest";
  src: url("fonts/onest-cyrillic-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  src: url("fonts/onest-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --pg-bg-page: #E9E8EC;
  --pg-bg-shell: #F6F5F8;
  --pg-bg-surface-1: #FFFFFF;
  --pg-bg-surface-2: #EFEEF2;
  --pg-bg-hero: #121115;
  --pg-text-primary: #1F1E24;
  --pg-text-secondary: #5C5A64;
  --pg-text-tertiary: #76747E;
  --pg-text-on-accent: #1A1523;
  --pg-border-subtle: #17161A12;
  --pg-border-strong: #17161A26;
  --pg-border-focus: #7D6BB8;
  --pg-accent-solid: #7D6BB8;
  --pg-accent-solid-hover: #6D5CA8;
  --pg-accent-soft: #7D6BB81F;
  --pg-state-success: #3A7F62;
  --pg-state-warning: #94702F;
  --pg-state-warning-soft: #94702F1A;
  --pg-gradient-accent: linear-gradient(145deg, #E7C0D3 0%, #C8B6E6 48%, #A9B2E0 100%);
  --pg-gradient-accent-soft: linear-gradient(145deg, #E7C0D333 0%, #C8B6E633 48%, #A9B2E033 100%);
  --pg-gradient-hero-glow: radial-gradient(60% 70% at 72% 50%, #B8A9DE2E 0%, #05050600 70%);
  --pg-font-sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pg-radius-shell: 32px;
  --pg-radius-card-lg: 24px;
  --pg-radius-card: 20px;
  --pg-radius-inner: 16px;
  --pg-radius-control: 14px;
  --pg-radius-pill: 999px;
  --pg-size-control: 40px;
  --pg-size-control-lg: 48px;
  --pg-layout-content-max: 1352px;
  --pg-layout-measure: 640px;
  --pg-layout-art-md: 240px;
  --pg-motion-duration-fast: 120ms;
  --pg-motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --pg-motion-press-scale: 0.97;
}

/* Тёмная тема продукта; герой тёмный всегда */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --pg-bg-page: #0B0B0D;
    --pg-bg-shell: #1D1D20;
    --pg-bg-surface-1: #2A2A2E;
    --pg-bg-surface-2: #36363B;
    --pg-text-primary: #ECEAF0;
    --pg-text-secondary: #A9A9B1;
    --pg-text-tertiary: #85858E;
    --pg-border-subtle: #FFFFFF0F;
    --pg-border-strong: #FFFFFF24;
    --pg-border-focus: #C4B6E6;
    --pg-accent-solid: #B8A9DE;
    --pg-accent-solid-hover: #C6B9E6;
    --pg-accent-soft: #B8A9DE29;
    --pg-state-success: #9BCDB3;
    --pg-state-warning: #E3C99C;
    --pg-state-warning-soft: #E3C99C24;
  }
}
.dark {
  color-scheme: dark;
  --pg-bg-surface-1: #2A2A2E;
  --pg-bg-surface-2: #36363B;
  --pg-text-primary: #ECEAF0;
  --pg-text-secondary: #A9A9B1;
  --pg-text-tertiary: #85858E;
  --pg-border-subtle: #FFFFFF0F;
  --pg-border-strong: #FFFFFF24;
  --pg-accent-solid: #B8A9DE;
  --pg-accent-soft: #B8A9DE29;
  --pg-state-success: #9BCDB3;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--pg-bg-page);
  color: var(--pg-text-primary);
  font-family: var(--pg-font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
:focus-visible { outline: 2px solid var(--pg-border-focus); outline-offset: 2px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--pg-layout-content-max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 40px; } }

/* ——— Шапка ——— */
.header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--pg-bg-page) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.header .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.logo { display: inline-flex; color: var(--pg-text-primary); }
.logo svg { height: 14px; width: auto; aspect-ratio: 11549 / 1239; fill: currentColor; }
.nav { display: none; flex: 1; justify-content: center; gap: 4px; }
@media (min-width: 1024px) { .nav { display: flex; } }
.header-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (min-width: 1024px) { .header-end { margin-left: 0; } }
.lang { font-size: 13px; font-weight: 500; color: var(--pg-text-secondary); text-decoration: none; padding: 8px 10px; border-radius: var(--pg-radius-pill); }
.lang:hover { color: var(--pg-text-primary); background: var(--pg-bg-surface-2); }

/* ——— Кнопки ——— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--pg-size-control); padding: 0 18px; border-radius: var(--pg-radius-pill);
  font: 500 14px/1 var(--pg-font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; border: 0;
  transition: background var(--pg-motion-duration-fast) var(--pg-motion-ease-out), transform var(--pg-motion-duration-fast) var(--pg-motion-ease-out);
}
.btn:active { transform: scale(var(--pg-motion-press-scale)); }
.btn svg { width: 18px; height: 18px; }
.btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: var(--pg-size-control-lg); padding: 0 24px; font-size: 15px; }
.btn-ghost { background: transparent; color: var(--pg-text-primary); }
.btn-ghost:hover { background: var(--pg-bg-surface-2); }
.btn-secondary { background: var(--pg-bg-surface-2); color: var(--pg-text-primary); }
.btn-secondary:hover { background: color-mix(in srgb, var(--pg-bg-surface-2) 80%, var(--pg-text-primary) 8%); }
.btn-accent { background: var(--pg-gradient-accent); color: var(--pg-text-on-accent); }
.btn-accent:hover { filter: brightness(1.04); }
.dark .btn-secondary { background: #FFFFFF14; }
.dark .btn-secondary:hover { background: #FFFFFF24; }

/* ——— Типографика ——— */
.eyebrow { font-size: 13px; font-weight: 500; line-height: 1; color: var(--pg-accent-solid); }
.display { font-size: 44px; line-height: 1.05; letter-spacing: -0.025em; font-weight: 300; }
@media (min-width: 1200px) { .display { font-size: 64px; line-height: 1; letter-spacing: -0.03em; } }
.title-page { font-size: 28px; line-height: 1.15; letter-spacing: -0.015em; font-weight: 500; }
@media (min-width: 768px) { .title-page { font-size: 44px; line-height: 1.05; letter-spacing: -0.025em; font-weight: 300; } }
.title-section { font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 500; }
.title-card { font-size: 16px; line-height: 1.3; font-weight: 500; }
.lead { font-size: 16px; line-height: 1.5; color: var(--pg-text-secondary); max-width: var(--pg-layout-measure); }
.body { font-size: 14px; line-height: 1.5; color: var(--pg-text-secondary); }
.caption { font-size: 12px; line-height: 1.4; color: var(--pg-text-tertiary); }

/* ——— Герой ——— */
.hero { position: relative; overflow: hidden; display: grid; border-radius: var(--pg-radius-shell); background: var(--pg-bg-hero); color: var(--pg-text-primary); margin-top: 8px; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--pg-gradient-hero-glow); pointer-events: none; }
.hero-copy { position: relative; display: flex; flex-direction: column; gap: 24px; padding: 40px 24px 24px; }
.hero-shot { position: relative; padding: 0 12px 12px; }
.shot { width: 100%; height: auto; aspect-ratio: 1288 / 794; border-radius: var(--pg-radius-card-lg); background: #1D1D20; box-shadow: 0 0 0 1px #FFFFFF14, 0 32px 80px -24px #000000CC; }
.hero-actions { display: flex; flex-direction: column; gap: 8px; }
.ticks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--pg-text-secondary); }
.ticks li { display: flex; align-items: center; gap: 8px; }
.ticks svg { width: 16px; height: 16px; color: var(--pg-state-success); flex: none; }
@media (min-width: 560px) { .hero-actions { flex-direction: row; } .ticks { flex-direction: row; flex-wrap: wrap; column-gap: 24px; } }
@media (min-width: 900px) {
  .hero-copy { padding: 64px 56px 40px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 24px; align-items: end; }
  .hero-copy h1 { grid-row: span 3; align-self: start; }
  .hero-shot { padding: 0 40px 40px; }
}
/* ——— Секции ——— */
.section { padding: 64px 0; }
@media (min-width: 768px) { .section { padding: 96px 0; } }
.section-shell { background: var(--pg-bg-shell); }
.section-head { display: flex; flex-direction: column; gap: 12px; max-width: var(--pg-layout-measure); margin-bottom: 32px; }
.grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.card { display: flex; flex-direction: column; gap: 8px; border-radius: var(--pg-radius-card); background: var(--pg-bg-surface-1); padding: 20px; }
.card-lg { border-radius: var(--pg-radius-card-lg); padding: 24px; gap: 16px; }
.num { font-size: 12px; color: var(--pg-text-tertiary); font-variant-numeric: tabular-nums; }
.disc { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--pg-radius-pill); background: var(--pg-accent-soft); color: var(--pg-accent-solid); }
.disc svg { width: 20px; height: 20px; }
.checks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.checks li { display: flex; gap: 10px; }
.checks svg { width: 16px; height: 16px; margin-top: 3px; color: var(--pg-accent-solid); flex: none; }
.note { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; border-radius: var(--pg-radius-inner); background: var(--pg-accent-soft); padding: 14px 16px; font-size: 14px; }
.note svg { width: 18px; height: 18px; margin-top: 2px; color: var(--pg-accent-solid); flex: none; }

/* Скачать */
.download { display: grid; gap: 24px; border-radius: var(--pg-radius-shell); background: var(--pg-gradient-accent); color: var(--pg-text-on-accent); padding: 32px 24px; }
.download .lead { color: color-mix(in srgb, var(--pg-text-on-accent) 72%, transparent); }
.download .btn { background: #1A1523; color: #F4F4F6; }
.download .btn:hover { background: #2E2C34; }
.download-actions { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 560px) { .download-actions { flex-direction: row; } }
@media (min-width: 900px) { .download { grid-template-columns: 1fr auto; align-items: center; padding: 48px 56px; } }

/* Контакты */
.contact { display: flex; flex-direction: row; align-items: center; gap: 16px; text-decoration: none; }
.contact:hover .title-card { color: var(--pg-accent-solid); }

/* ——— Подвал ——— */
.footer { padding: 40px 0 48px; border-top: 1px solid var(--pg-border-subtle); }
.footer .wrap { display: grid; gap: 24px; }
.footer-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }
.footer-links a { color: var(--pg-text-secondary); text-decoration: none; }
.footer-links a:hover { color: var(--pg-text-primary); }
@media (min-width: 900px) { .footer .wrap { grid-template-columns: 1fr auto; align-items: start; } }

/* ——— Документы: политика, условия — простой текст мелким шрифтом ——— */
.legal { max-width: 720px; padding: 40px 0 80px; }
.legal h1 { font-size: 28px; line-height: 1.15; letter-spacing: -0.015em; font-weight: 500; }
.legal-date { margin-top: 8px; font-size: 13px; color: var(--pg-text-tertiary); }
.legal h2 { margin-top: 24px; font-size: 14px; line-height: 1.4; font-weight: 500; }
.legal p { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--pg-text-secondary); }
.legal a { color: var(--pg-accent-solid); text-underline-offset: 3px; }
/* Заглушка: то, что должен дать Влад до публикации */
.todo { background: var(--pg-state-warning-soft); color: var(--pg-state-warning); border-radius: 6px; padding: 1px 6px; font-weight: 500; }

[hidden] { display: none !important; }

/* ——— Страница скачивания ——— */
.dl-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 8px; padding: 48px 24px; border-radius: var(--pg-radius-shell); background: var(--pg-bg-hero); color: var(--pg-text-primary); }
.dl-hero::before { content: ""; position: absolute; inset: 0; background: var(--pg-gradient-hero-glow); pointer-events: none; }
.dl-hero > * { position: relative; }
@media (min-width: 900px) { .dl-hero { padding: 72px 56px; } }
.btn-sub { font-weight: 400; opacity: 0.7; }
.section-sm { padding: 40px 0 72px; display: flex; flex-direction: column; gap: 16px; }
.dl-card { flex-direction: row; align-items: center; gap: 16px; text-decoration: none; transition: background var(--pg-motion-duration-fast) var(--pg-motion-ease-out); }
.dl-card:hover { background: var(--pg-bg-surface-2); }
.dl-card > svg { width: 28px; height: 28px; flex: none; }
.dl-card .size { margin-left: auto; white-space: nowrap; }
.dl-help { gap: 12px; margin-top: 8px; }
.dl-help summary { cursor: pointer; }
.dl-help ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.dl-help .note { margin-top: 0; }