/* =============================================================================
   brand.css — DominoDrive Koszalin (szkoła jazdy)
   Wyłącznie AKCENTY i układ hero. NIE nadpisuje base layoutu (.grid/.card/.btn…).
   Kolory tylko z tokens.css. Motyw: czarno-złoty, ekspercki, spokojny.
   ============================================================================= */

/* --- Brand lockup w headerze (żeby JS L-015 miał .brand) ------------------- */
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); }
.brand__name { font-weight: 800; font-size: var(--fs-lg, 20px); color: var(--text-strong);
  letter-spacing: -0.01em; }
.brand__name b { color: var(--color-accent); }
.brand .brand-tagline { align-self: center; }
/* logo: kafelek domina (znak marki DominoDrive, odtworzony wiernie) przy wordmarku */
.brand__mark { display: inline-flex; flex: none; align-self: center; }
.brand__mark svg { height: 30px; width: auto; display: block; }

/* --- HERO split-asym (tekst | blok koloru), H1 widoczny od 0. klatki ------- */
.hero-split {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(48px, 8vw, 104px);
  background:
    radial-gradient(120% 90% at 88% 0%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, var(--color-primary) 0%, var(--color-bg) 100%);
  border-bottom: 1px solid var(--color-border);
}
.hero-split__grid { display: grid; gap: var(--space-7, 48px); align-items: center; }
@media (min-width: 900px) {
  .hero-split__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8, 64px); }
}
.hero-split__copy { display: grid; gap: var(--space-5, 24px); }
.hero-split h1 {
  font-size: clamp(38px, 8vw, 60px); line-height: 1.02; margin: 0;
  color: var(--text-strong);
}
.hero-split h1 .accent { color: var(--color-accent); }
.hero-split__sub { font-size: var(--fs-lg, 20px); color: var(--text-body); max-width: 40ch; margin: 0; }
.hero-split .eyebrow { margin-bottom: 0; color: var(--color-accent); }
.hero-split__cta { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); }

/* pasek trust pod CTA */
.hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px) var(--space-4, 16px);
  color: var(--text-muted); font-size: var(--fs-sm, 13px); }
.hero-trust__item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hero-trust__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-border); }
.hero-trust b { color: var(--text-strong); font-weight: 600; }

/* --- Prawa kolumna: karta oceny (blok koloru/typografii, ZERO zdjęć) ------- */
.rating-card {
  position: relative; border-radius: var(--radius-lg, 18px);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
  background: linear-gradient(160deg, var(--color-surface) 0%, var(--color-primary600) 100%);
  padding: var(--space-7, 48px) var(--space-6, 32px); text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  display: grid; gap: var(--space-4, 16px); justify-items: center;
}
.rating-card__score { font-family: var(--font-heading); font-weight: 800; line-height: 1;
  font-size: clamp(56px, 12vw, 84px); color: var(--color-accent); letter-spacing: -0.02em; }
.rating-card__score span { font-size: .42em; color: var(--text-muted); font-weight: 600; }
.rating-card__stars { color: var(--color-accent); letter-spacing: 4px; font-size: var(--fs-xl, 25px); }
.rating-card__label { color: var(--text-body); font-size: var(--fs-sm, 13px); letter-spacing: .04em; }
.rating-card__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: var(--space-2, 8px); }
.rating-card__cats span { font-size: var(--fs-sm, 13px); padding: 6px 14px; border-radius: var(--radius-pill, 999px);
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }

/* --- Kafle „dlaczego": ikona SVG + tekst (base .card jako kontener) -------- */
.feature-card { display: grid; gap: var(--space-3, 12px); align-content: start;
  background: var(--color-surface); border-color: var(--color-border); }
.feature-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); }
.feature-ic svg { width: 26px; height: 26px; stroke: var(--color-accent); fill: none; }
.feature-card h3 { font-size: var(--fs-lg, 20px); color: var(--text-strong); }
.feature-card p { color: var(--text-body); font-size: 15px; }
.feature-card .todo { color: var(--warning); font-size: var(--fs-sm, 13px); }

/* --- Karta kategorii (base .offer-card jako baza; tu 1-kolumnowa, bez media) */
.cat-card { grid-template-columns: 1fr !important; background: var(--color-surface); }
.cat-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3, 12px); flex-wrap: wrap; }
.cat-card__ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); }
.cat-card__ic svg { width: 24px; height: 24px; stroke: var(--color-accent); fill: none; }
.cat-card h3 { font-size: var(--fs-xl, 25px); color: var(--text-strong); }
.cat-card__price { font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-2xl, 31px);
  color: var(--color-accent); line-height: 1; white-space: nowrap; }
.cat-card__price small { display: block; font-size: var(--fs-sm, 13px); color: var(--text-muted); font-weight: 500; }
.cat-card ul { list-style: none; padding: 0; display: grid; gap: 8px; color: var(--text-body); }
.cat-card ul li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.cat-card ul li svg { width: 18px; height: 18px; margin-top: 3px; flex: none; stroke: var(--color-accent); fill: none; }

/* --- Blok liczb / zdawalność ---------------------------------------------- */
.stat-band { display: grid; gap: var(--space-5, 24px);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat { text-align: center; padding: var(--space-6, 32px) var(--space-4, 16px);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg, 18px); background: var(--color-surface); }
.stat__num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(38px, 7vw, 54px);
  color: var(--color-accent); line-height: 1; }
.stat__lab { color: var(--text-body); margin-top: 8px; font-size: 15px; }
.stat__todo { display: block; color: var(--warning); font-size: var(--fs-xs, 10px); letter-spacing: .06em;
  text-transform: uppercase; margin-top: 6px; }

/* --- Wielkie CTA telefon-first -------------------------------------------- */
.cta-call { text-align: center; border-radius: var(--radius-lg, 18px);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary600) 100%);
  padding: var(--space-8, 64px) var(--space-5, 24px); display: grid; gap: var(--space-4, 16px); justify-items: center; }
.cta-call__phone { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(34px, 9vw, 56px); color: var(--color-accent); line-height: 1; }
.cta-call__phone:hover { color: var(--color-accentHover); }
.cta-call__meta { color: var(--text-body); }
.cta-call__meta b { color: var(--text-strong); }

/* --- Pomocnicze --------------------------------------------------------- */
.badge-rate { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm, 13px); font-weight: 600;
  color: var(--color-accentText); background: var(--color-accent); padding: 6px 14px; border-radius: var(--radius-pill, 999px); }
.lead-note { color: var(--text-muted); font-size: var(--fs-sm, 13px); }
.section--alt { background: var(--color-primary600); }
.svc-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.svc-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-body); }
.svc-list li svg { width: 20px; height: 20px; margin-top: 3px; flex: none; stroke: var(--color-accent); fill: none; }

/* --- Akordeon FAQ (details/summary) --------------------------------------- */
.faq-acc { display: grid; gap: var(--space-3, 12px); }
.faq-acc details { border: 1px solid var(--color-border); border-radius: var(--radius-md, 10px);
  background: var(--color-surface); overflow: hidden; }
.faq-acc summary { cursor: pointer; padding: var(--space-4, 16px) var(--space-5, 24px); font-weight: 600;
  color: var(--text-strong); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-acc summary::-webkit-details-marker { display: none; }
.faq-acc summary::after { content: "+"; color: var(--color-accent); font-size: 24px; line-height: 1; flex: none; }
.faq-acc details[open] summary::after { content: "\2212"; }
.faq-acc details > p { padding: 0 var(--space-5, 24px) var(--space-4, 16px); color: var(--text-body); }

/* --- Karta danych kontaktowych -------------------------------------------- */
.contact-list { list-style: none; padding: 0; display: grid; gap: var(--space-4, 16px); }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list svg { width: 22px; height: 22px; margin-top: 2px; flex: none; stroke: var(--color-accent); fill: none; }
.contact-list a { color: var(--text-strong); font-weight: 600; }
.map-frame { border: 1px solid var(--color-border); border-radius: var(--radius-lg, 18px); overflow: hidden; }
.map-frame iframe { display: block; width: 100%; height: 340px; border: 0; filter: grayscale(.2) contrast(1.05); }

/* --- Karta cennika (jasny tekst na ciemnej karcie, bez zdjęcia) ------------ */
.price-card { text-align: left; color: var(--text-strong); background: var(--color-surface);
  border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); }
.price-card::before { display: none; }
.price-card h3 { color: var(--color-accent); text-transform: none; letter-spacing: -0.01em; margin-bottom: 8px; }
.price-card .price-card__amt { font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-2xl, 31px);
  color: var(--color-accent); line-height: 1; margin-bottom: 12px; }
.price-card .price-card__amt small { display: block; font-size: var(--fs-sm, 13px); color: var(--text-muted); font-weight: 500; }
.price-card .price-person__row { color: var(--text-body); text-align: left; }
.price-card .price-person__row b { color: var(--color-accent); }