/* WARIANT B — „Energia": granat + czerwień, mocny przekaz konsumencki (kierunek makiety „Hero", stonowany) */
:root {
  --bg: #0A1322;
  --surface: #111F35;
  --surface-2: #0D1929;
  --ink: #FFFFFF;
  --muted: #93A5BD;
  --accent: #D22730;
  --accent-ink: #FFFFFF;
  --good: #4CC38A;
  --bad: #FF6369;
  --line: rgba(255, 255, 255, .13);
  --logo: #D8A63A;
  --radius: 12px;
  --btn-radius: 10px;
  --shadow: 0 16px 44px rgba(0, 0, 0, .4);
  --thumb-a: #152238;
  --thumb-b: #0A1322;
  --artink: #C2CDDD;
  --font-display: 'Archivo', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', -apple-system, 'Segoe UI', sans-serif;
}
/* Ciężki, dynamiczny tytuł jak na makiecie klienta: biel + czerwień */
.hero {
  background:
    radial-gradient(90% 100% at 85% -20%, rgba(210, 39, 48, .22), transparent 55%),
    var(--bg);
}
.hero h1 { font-weight: 900; letter-spacing: -.015em; text-transform: none; }
.hero h1 .acc { color: var(--accent); }
h2, h3 { font-weight: 800; }
.sec-head h2 { border-left: 5px solid var(--accent); padding-left: 16px; }
.sec-head.center h2 { border-left: 0; padding-left: 0; }
.sec-head.center h2 span { border-bottom: 4px solid var(--accent); padding-bottom: 4px; }
.field .val { color: #FFFFFF; }
.suma { background: linear-gradient(100deg, #D22730, #A31B22); }
.beforeafter .cell.po b { color: var(--good); }
.step::before { border-radius: 8px; }