/* ───────────────────────── powerpullup.pro — дизайн 2.0 ─────────────────────────
   Design system from the Figma redesign (Oct 2026). All theming via CSS custom
   properties: colors, type, radii, spacing. Components read only these vars. */

:root{
  /* brand accent — buttons, badges, stars */
  --accent:        #FFEA00;
  --accent-hover:  #F0DB00;
  --accent-ink:    #121212;                 /* text that sits ON the yellow */
  --accent-soft:   #FFF7A8;                 /* tinted chips / icon plates */
  /* accent used as TEXT/ICON color: yellow is unreadable on light, so it is
     dark on light surfaces and flips to yellow inside dark zones (see below) */
  --accent-fg:     #121212;

  /* light surfaces */
  --bg:        #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F3F3F0;                     /* light section background */
  --ink:       #121212;                     /* main text */
  --ink-soft:  #4D4D4D;                     /* secondary text */
  --ink-faint: #6F6F6F;                     /* captions, breadcrumbs */
  --line:      #E4E4E0;                     /* borders on light */
  --line-2:    #D4D4CF;                     /* outline buttons, inputs */

  /* dark zones — header, footer, dark sections */
  --dark:          #121212;
  --dark-card:     #1E1F1F;
  --on-dark:       #FFFFFF;
  --on-dark-muted: #A8A8A8;
  --line-dark:     #2E2F2F;

  /* shape */
  --radius:    20px;                        /* product cards */
  --radius-lg: 28px;                        /* big blocks */
  --radius-sm: 12px;                        /* inputs, small plates */
  --maxw: 1248px;                           /* 1200 content + 2×24 gutters */
  --gut: 24px;
  --sec-pad: 96px;                          /* section top/bottom */
  --head-gap: 48px;                         /* section title → content */
  --grid-gap: 24px;                         /* between cards */

  /* type */
  --font-display: 'Montserrat', 'Arial Black', system-ui, sans-serif;
  --font-body:    'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Manrope', 'Segoe UI', system-ui, sans-serif; /* 2.0 has no mono */

  --shadow-sm: 0 1px 2px rgba(18,18,18,.05), 0 2px 8px rgba(18,18,18,.04);
  --shadow-md: 0 6px 14px rgba(18,18,18,.06), 0 18px 40px rgba(18,18,18,.07);
  --shadow-lg: 0 18px 48px rgba(18,18,18,.14);
}
@media (max-width: 640px){
  :root{
    --radius: 16px; --gut: 16px; --sec-pad: 48px; --head-gap: 20px; --grid-gap: 12px;
  }
}

/* Dark zones: redefine the light tokens so every component inside just works. */
.is-dark, .header, .footer, .topbar{
  --bg: var(--dark);
  --surface: var(--dark-card);
  --surface-2: var(--dark-card);
  --ink: var(--on-dark);
  --ink-soft: var(--on-dark-muted);
  --ink-faint: var(--on-dark-muted);
  --line: var(--line-dark);
  --line-2: #3D3E3E;
  --accent-fg: var(--accent);
  color: var(--ink);
}
.is-dark{ background: var(--dark); }

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px; line-height: 24px;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
::selection{ background: var(--accent); color: var(--accent-ink); }
:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; }

.wrap{ max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }

/* ── type (Montserrat 800 for headings, 700 for prices/numbers, Manrope for the rest) ── */
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 800; margin: 0; }
h1{ font-size: 60px; line-height: 68px; letter-spacing: -0.02em; }
h2{ font-size: 40px; line-height: 48px; letter-spacing: -0.015em; }
h3{ font-size: 20px; line-height: 28px; }
.display{ font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.kicker{                                  /* overline: Manrope 800, caps, 8% */
  font-family: var(--font-body); font-weight: 800;
  font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-flex; align-items: center; gap: 10px;
}
.kicker::before{ content:""; width: 24px; height: 3px; border-radius: 2px; background: var(--accent); }
.lead{ font-size: 18px; line-height: 28px; font-weight: 500; color: var(--ink-soft); }
.section-h{ font-size: 40px; line-height: 48px; letter-spacing: -0.015em; }
.caption{ font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-faint); }
@media (max-width: 640px){
  h1{ font-size: 32px; line-height: 38px; }
  h2, .section-h{ font-size: 26px; line-height: 32px; }
  h3{ font-size: 17px; line-height: 24px; }
  body{ font-size: 15px; line-height: 23px; }
  .lead{ font-size: 15px; line-height: 23px; }
  .kicker{ font-size: 12px; }
  .caption{ font-size: 12px; line-height: 16px; }
}

/* ── buttons: pill, Manrope 700 15/20 ───────────────────────────────────── */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 28px; border: none; border-radius: 999px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px; line-height: 20px;
  white-space: nowrap;
  transition: transform .14s ease, background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-accent{ background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover{ background: var(--accent-hover); }
.btn-dark{ background: var(--dark); color: var(--on-dark); }
.is-dark .btn-dark, .header .btn-dark, .footer .btn-dark{ background: var(--on-dark); color: var(--dark); }
.btn-dark:hover{ box-shadow: var(--shadow-md); }
.btn-ghost{ background: transparent; color: var(--ink); border: 1.5px solid var(--line-2); }
.btn-ghost:hover{ border-color: var(--ink); }
.btn-sm{ height: 44px; padding: 0 18px; font-size: 15px; }
.btn-block{ width: 100%; }

/* ── chips / tags ───────────────────────────────────────────────────────── */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--font-body); font-weight: 600; font-size: 13px; line-height: 18px;
  padding: 5px 12px; border-radius: 999px; background: var(--surface-2);
  color: var(--ink-soft); border: 1px solid var(--line);
}

/* ── image frames ───────────────────────────────────────────────────────── */
.ph{ position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--radius); }
.ph svg{ position:absolute; inset:0; width:100%; height:100%; }
.ph .ph-label{
  position: absolute; left: 12px; bottom: 12px;
  font-size: 12px; font-weight: 600;
  color: var(--ink-soft); background: color-mix(in srgb, var(--surface) 80%, transparent);
  padding: 5px 9px; border-radius: 8px; backdrop-filter: blur(4px);
  border: 1px solid var(--line);
}
.ph-photo{ background:#fff; }
.ph-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

section{ position: relative; }
.section-pad{ padding-block: var(--sec-pad); }
.surface{ background: var(--surface-2); }

.reveal{ opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

.rule{ height:1px; background: var(--line); border: none; margin: 0; }