/* Motyw «monoref»: jaskrawy gradient na starcie, biały tekst, czarne przyciski-pigułki, czarny pasek faktów,
   kolorowe ikony-kwadraty, jasne liliowe sekcje. Włączany w content.py: THEME = 'monoref' */
:root {
  --bg: #ffffff;
  --bg-2: #f5f2ff;
  --card: #ffffff;
  --ink: #0d0d0f;
  --muted: #6b6b76;
  --olive: #0d0d0f;
  --olive-dark: #2a2a30;
  --honey: #ff9f1c;
  --honey-soft: #fff1dc;
  --green: #1aa260;
  --line: #ececf3;
  --grad: linear-gradient(160deg, #ffb52e 0%, #ff7a2f 38%, #ff4f7b 68%, #8b5cff 100%);
  --radius: 32px;
}
body { background: var(--bg); color: var(--ink); }
h1, h2 { font-weight: 800; letter-spacing: -0.03em; }

/* przyciski: czarne pigułki + białe drugorzędne */
.btn { background: #0d0d0f; color: #fff; border-radius: 999px; }
.btn:hover { background: #2a2a30; }
.btn--honey { background: #0d0d0f; color: #fff; }
.btn--honey:hover { background: #2a2a30; }
.btn--light { background: rgba(255, 255, 255, .92); color: #0d0d0f; box-shadow: 0 6px 18px rgba(40, 20, 80, .12); }

/* nagłówek przezroczysty nad gradientem */
.top__bar { background: rgba(255, 255, 255, .16); box-shadow: none; border: 1px solid rgba(255, 255, 255, .25); }
.logo, .nav a { color: #fff; }
.logo svg polygon { fill: #fff; }
.lang { background: rgba(255, 255, 255, .18); }
.lang a { color: rgba(255, 255, 255, .8); }
.lang a.on { background: #fff; color: #0d0d0f; }
.top .btn { background: #fff; color: #0d0d0f; }
.burger svg path { stroke: #fff; }
@media (max-width: 1080px) { .nav { background: #fff; } .nav a { color: #0d0d0f; } }
body:not(:has(.mhero)):not(:has(.hero)) .top__bar { background: rgba(13, 13, 15, .85); }

/* ekran startowy: gradient na całą szerokość, ul po prawej */
.mhero { background: var(--grad); color: #fff; margin-top: -76px; padding: 150px 0 70px; border-radius: 0 0 48px 48px; }
.mhero::before { background: radial-gradient(ellipse 40% 55% at 75% 55%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 100%); }
.mhero h1 { color: #fff; }
.mhero p { color: rgba(255, 255, 255, .92); }
.mhero img { filter: drop-shadow(0 30px 40px rgba(60, 10, 80, .35)); }
.statsbar { margin-top: -46px; box-shadow: 0 20px 50px rgba(40, 10, 70, .25); }
.hero__card { background-color: #8b5cff; }
.hero__card::after { background: linear-gradient(90deg, rgba(139, 92, 255, .92), rgba(255, 122, 47, .55) 50%, rgba(255, 122, 47, 0) 75%); }
.hero__card .hero__in h1, .hero__card .hero__lead { color: #fff; }
.hero__kicker { background: rgba(255, 255, 255, .2); color: #fff; }

/* bloki «powietrzne» na liliowym tle */
.air { background: var(--bg-2); border-radius: 48px; margin: 70px 16px 0; padding: 100px 0 90px; }
.air h2 { color: var(--ink); }
.air p { color: #3a3a44; }
.mascot { width: 96px; height: 96px; }

/* karty produktów: białe z cieniem, kolorowa etykieta */
.pcard { background: #fff; box-shadow: 0 16px 40px rgba(40, 20, 80, .08); border: 1px solid var(--line); }
.pcard__img { margin: 12px 12px 0; border-radius: 22px; }
.pcard__body h3 { color: var(--ink); }
.pcard__body p { color: var(--muted); }
.pcard .btn { background: #0d0d0f; color: #fff; }

/* schemat: kolorowe ikony-kwadraty */
.scheme__step { background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(40, 20, 80, .05); text-align: left; }
.scheme__ico { border-radius: 18px; width: 64px; height: 64px; margin: 0 0 16px; }
.scheme__ico svg { width: 34px; height: 34px; stroke: #fff; }
.scheme__ico span { background: #0d0d0f; color: #fff; width: 24px; height: 24px; font-size: 12px; }
.scheme__step:nth-child(1) .scheme__ico { background: linear-gradient(135deg, #ffb52e, #ff7a2f); }
.scheme__step:nth-child(2) .scheme__ico { background: linear-gradient(135deg, #5aa7ff, #2f6bff); }
.scheme__step:nth-child(3) .scheme__ico { background: linear-gradient(135deg, #3ddc84, #12a05c); }
.scheme__step:nth-child(4) .scheme__ico { background: linear-gradient(135deg, #c77dff, #8b5cff); }
.scheme__step:nth-child(5) .scheme__ico { background: linear-gradient(135deg, #ff8fb1, #ff4f7b); }
.scheme__step:not(:last-child)::after { color: #c9c3e6; }

/* kroki i ilustracje */
.see__text { background: var(--bg-2); }
.see__n { background: #0d0d0f; color: #fff; }
.mock { background: radial-gradient(circle at 50% 40%, #fff, #efe9ff 75%); }

/* taryfy: białe karty, wyróżniona — czarna */
.tariff { background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(40, 20, 80, .07); }
.tariff--best { background: #0d0d0f; color: #fff; border: 0; }
.tariff.tariff--best .muted, .tariff.tariff--best li { color: #b9b9c4; }
.tariff--best .btn--honey { background: #fff; color: #0d0d0f; }
.tariff__tag { background: var(--grad); color: #fff; }
.tariff li::before { background-color: #ff7a2f; }
.tariff__img { background: radial-gradient(circle at 50% 45%, #fff3e6, rgba(255, 255, 255, 0) 70%); }
.tariff--best .tariff__img { background: radial-gradient(circle at 50% 45%, rgba(255, 180, 90, .25), rgba(0, 0, 0, 0) 70%); }
.tariff__share { background: #0d0d0f; color: #fff; }

/* FAQ, CTA, stopka */
.faq details { background: var(--bg-2); }
.cta { background: var(--grad); color: #fff; }
.cta p { color: rgba(255, 255, 255, .9); }
.cta .btn { background: #0d0d0f; color: #fff; }
footer { background: #0d0d0f; color: #8e8e96; }

/* konfigurator */
.kf__tabs { background: var(--bg-2); }
.kf__tabs a.on { background: #0d0d0f; color: #fff; }
.kf__preview { background: radial-gradient(circle at 50% 42%, #fff, #efe9ff 72%); }
.kf__badge { background: #0d0d0f; color: #fff; }
.box { border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(40, 20, 80, .05); }
.opt.is-on { border-color: #8b5cff; background: #f6f2ff; }
.opt__p { color: #0d0d0f; }
.summary { background: #0d0d0f; color: #fff; }
.summary h3 { color: #fff; }
.summary__total b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.summary .btn--honey { background: #fff; color: #0d0d0f; }
.kf, .rojowo-page, .doc { padding-top: 130px; }
.top.is-scrolled .top__bar { background: rgba(13, 13, 15, .82); border-color: transparent; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
:root { --air-grad: linear-gradient(120deg, #ffb52e 0%, #ff7a2f 35%, #ff4f7b 65%, #8b5cff 100%); }
.air--big p:not(.air__lead) { color: #3a3a44; }