/* ══════════════════════════════════════════════════════════════════════
   domaai.pl — arkusz PODSTRON (treść przeniesiona z madd.im, 2026-08-14).
   Ładowany PO domaai.css, tylko na podstronach (nie na landingu).

   Sekcja 1: aliasy tokenów — przeniesione strony (i ich inline <style>)
   używają nazw zmiennych z madd.im (--text-2, --border, --bg-soft, --ok…).
   Zamiast przepisywać każdą stronę, mapujemy nazwy madd na tokeny domaai —
   dzięki temu inline'owe style stron działają bez zmian, ale w palecie
   i motywach (light/dark) domaai.pl.

   Sekcja 2: wspólne klasy layoutu z madd-min/madd-refresh, których strony
   używają, przepisane w języku wizualnym domaai.pl (włosowe linie, szeryf,
   czarne przyciski, fioletowy akcent).
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. aliasy tokenów madd → domaai ──────────────────────────────────── */
:root{
  --text:var(--fg); --text-2:var(--fg-2); --text-3:var(--fg-3);
  --border:var(--line); --border-2:var(--fg-3);
  --bg-soft:var(--bg-2); --bg-dark:var(--bg-2);
  --brand:var(--accent); --brand-ink:var(--accent-ink); --brand-bg:var(--accent-wash);
  --logo-purple:var(--accent); --logo-purple-ink:var(--accent-ink);
  --ink:var(--fg); --ink-soft:var(--steel); --on-ink:var(--bg);
  --ok:#4c8055; --field:var(--bg); --glass:transparent;
  --r-sm:6px; --r-xl:24px; --tr:.18s ease;
  --font-serif:var(--serif);
}
[data-theme="dark"]{ --ok:#84b98e; --field:var(--charcoal); }

/* Na podstronach nie ma hero z sakurą — pasek nawigacji od razu kryjący
   (na landingu tło dokłada dopiero .is-scrolled). */
.nav{
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom-color:var(--line);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:var(--bg)}
}

/* ── 2. layout wspólny ────────────────────────────────────────────────── */
.container-narrow{max-width:820px}
.section-soft{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){ .grid-2,.grid-3{grid-template-columns:1fr} }
.text-center{text-align:center}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:20px}.mt-5{margin-top:40px}.mt-6{margin-top:64px}
.lead-center{margin-left:auto; margin-right:auto; max-width:640px}
.gradient-text{color:var(--accent-ink)}

/* nagłówek podstrony pod stałym paskiem nawigacji */
.page-hero{padding:calc(var(--nav-h) + 64px) 0 44px; text-align:center}
.page-hero h1{font-size:clamp(2rem,4.6vw,3.2rem); font-weight:500; letter-spacing:-.026em; line-height:1.1; margin:14px 0 0}
.page-hero .lead{margin-top:18px}
.page-hero .eyebrow{display:inline-block}

/* przyciski w wariantach madd → język domaai */
.btn-grad,.btn-on-dark{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.btn-grad:hover,.btn-on-dark:hover{background:var(--steel); border-color:var(--steel)}
[data-theme="dark"] .btn-grad:hover,[data-theme="dark"] .btn-on-dark:hover{background:#e2e4e8; border-color:#e2e4e8}
.btn-web{background:transparent; color:var(--fg); border-color:var(--line)}
.btn-web:hover{border-color:var(--fg); background:var(--bg-2)}
.btn-ghost-on-dark{background:transparent; color:var(--fg); border-color:var(--line)}
.btn-ghost-on-dark:hover{border-color:var(--fg); background:var(--bg-2)}
.btn-lg{height:52px; padding:0 30px; font-size:1rem}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.btn-row-center{justify-content:center}

/* plakietki */
.tag,.chip-new,.live{
  display:inline-flex; align-items:center; gap:6px; padding:2px 9px;
  border-radius:var(--r-pill); background:var(--accent-wash); color:var(--accent-ink);
  font-family:var(--mono); font-size:.65rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.08em; vertical-align:middle;
}

/* ikonki kart */
.card-icon{
  width:40px; height:40px; border-radius:10px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-wash); color:var(--accent-ink);
}
.card-icon svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* listy funkcji z ptaszkiem */
.feature-list{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px}
.feature-list-item{display:flex; gap:10px; align-items:baseline; font-size:.9375rem; line-height:1.55; color:var(--fg-2)}
.feature-list-item .check{color:var(--accent); font-weight:700; flex-shrink:0}

/* ── cennik: siatka planów (klasy madd, wygląd domaai) ───────────────── */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:980px){ .pricing-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .pricing-grid{grid-template-columns:1fr} }
.pricing-grid .plan{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--bg); padding:28px 24px 24px;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.pricing-grid .plan:hover{border-color:var(--fg-3); transform:translateY(-2px)}
.pricing-grid .plan.is-featured{border-color:var(--accent); background:var(--bg-2)}
.plan-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:#fff; padding:3px 11px; border-radius:var(--r-pill);
  font-family:var(--mono); font-size:.625rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.09em; white-space:nowrap;
}
.plan-name{font-size:1.0625rem; font-weight:600; letter-spacing:-.01em}
.plan-tagline{font-size:.8438rem; color:var(--fg-3); margin-top:3px; line-height:1.5}
.plan-price{margin:16px 0 4px}
.plan-price .num{font-size:2rem; font-weight:500; letter-spacing:-.025em}
.plan-price .unit{font-size:.8125rem; color:var(--fg-3); margin-left:6px}
.plan-features{
  list-style:none; margin:14px 0 20px; padding:14px 0 0;
  border-top:1px solid var(--line-soft);
  font-size:.8438rem; color:var(--fg-2); display:grid; gap:7px;
}
.plan-features li{padding-left:16px; position:relative; line-height:1.5}
.plan-features li::before{content:'—'; position:absolute; left:0; color:var(--fg-3)}
.plan-features strong{color:var(--fg); font-weight:600}
.plan-cta{margin-top:auto}
.plan-cta .btn{width:100%; justify-content:center}

/* ── FAQ w wariancie madd (summary + div.answer) ─────────────────────── */
.faq details > .answer{
  padding:0 0 22px; margin:0; max-width:76ch;
  font-size:.9375rem; line-height:1.7; color:var(--fg-2);
}

/* ── baner CTA ────────────────────────────────────────────────────────── */
.cta-banner{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--bg-2); padding:56px 32px; text-align:center;
}
.cta-banner h2{font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.022em}
.cta-banner p{margin:14px auto 26px; max-width:52ch; color:var(--fg-2); font-size:1rem; line-height:1.7}

/* ── artykuły bloga ───────────────────────────────────────────────────── */
.article-meta{font-family:var(--mono); font-size:.75rem; color:var(--fg-3); letter-spacing:.04em}
.related{border-top:1px solid var(--line)}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:820px){ .related-grid{grid-template-columns:1fr} }

/* Klasy animacji madd (.reveal/.stagger) — bez madd-animations.js elementy
   mają być po prostu widoczne; zerujemy na wypadek odziedziczonych inline'ów. */
.reveal,.stagger,.stagger>*{opacity:1; transform:none}