/* ───────────────────────── powerpullup.pro — редизайн ─────────────────────────
   Design system. All theming via CSS custom properties so Tweaks can repaint
   the whole site by setting a handful of vars on :root. */

:root{
  --accent:        oklch(0.585 0.214 26);  /* PowerPullUp brand red */
  --accent-ink:    #ffffff;                /* text that sits on the accent */
  --accent-soft:   color-mix(in oklch, var(--accent) 16%, transparent);

  --bg:        oklch(0.975 0.004 95);
  --surface:   #ffffff;
  --surface-2: oklch(0.962 0.006 95);
  --ink:       oklch(0.22 0.012 260);
  --ink-soft:  oklch(0.47 0.012 260);
  --ink-faint: oklch(0.62 0.01 260);
  --line:      oklch(0.905 0.006 260);
  --line-2:    oklch(0.86 0.008 260);

  --radius: 16px;
  --radius-sm: calc(var(--radius) * 0.55);
  --maxw: 1260px;
  --gut: clamp(16px, 4vw, 56px);

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  --shadow-sm: 0 1px 2px rgba(20,22,28,.06), 0 2px 8px rgba(20,22,28,.05);
  --shadow-md: 0 6px 14px rgba(20,22,28,.07), 0 18px 40px rgba(20,22,28,.08);
  --shadow-lg: 0 18px 48px rgba(20,22,28,.16);
}

[data-theme="dark"]{
  --bg:        oklch(0.17 0.008 260);
  --surface:   oklch(0.215 0.011 260);
  --surface-2: oklch(0.255 0.012 260);
  --ink:       oklch(0.965 0.004 95);
  --ink-soft:  oklch(0.74 0.01 260);
  --ink-faint: oklch(0.6 0.012 260);
  --line:      oklch(0.31 0.012 260);
  --line-2:    oklch(0.37 0.014 260);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 22px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .35s ease, color .35s ease;
}
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); }

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

/* ── type ───────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 800; margin: 0; line-height: .98; letter-spacing: -0.02em; }
.display{ font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.015em; }
.kicker{
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-flex; align-items: center; gap: 10px;
}
.kicker::before{ content:""; width: 26px; height: 2px; background: var(--accent); }
.lead{ font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: var(--ink-soft); }
.section-h{ font-size: clamp(30px, 4.6vw, 56px); text-transform: uppercase; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 26px; border: none; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
  transition: transform .14s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-accent{ background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn-accent:hover{ box-shadow: 0 8px 22px var(--accent-soft); transform: translateY(-2px); }
.btn-dark{ background: var(--ink); color: var(--bg); }
.btn-dark:hover{ transform: translateY(-2px); 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); background: var(--surface-2); }
.btn-sm{ height: 44px; padding: 0 18px; font-size: 13px; }
.btn-block{ width: 100%; }

/* ── chips / tags ───────────────────────────────────────────────────────── */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 999px; background: var(--surface-2);
  color: var(--ink-soft); border: 1px solid var(--line);
}

/* ── placeholder image ──────────────────────────────────────────────────── */
.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-family: var(--font-mono); font-size: 11px; letter-spacing: .03em;
  color: var(--ink-soft); background: color-mix(in oklch, var(--surface) 78%, transparent);
  padding: 5px 9px; border-radius: 7px; 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: clamp(56px, 8vw, 120px); }

.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; }

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