/* ==========================================================================
   MoneyMind — styles.css
   Motyw: „online bank” — czysto, bezpiecznie, z akcentami fintech.
   Brak zewnętrznych zasobów; używamy systemowego stosu fontów.
   Kontrast między blokami zachowany; tekst zawsze czytelny.
   ========================================================================== */

/* --------------------------- Zmiennie kolorów ---------------------------- */
:root{
  --bg-page: #f5f7fb;          /* jasne tło aplikacyjne */
  --ink-900: #0b1b2b;          /* głęboki granat (nagłówki/tekst na jasnym) */
  --ink-700: #223245;          /* ciemny tekst drugorzędny */
  --ink-500: #53637a;          /* opisy/podteksty */

  --brand-600:#1363df;         /* niebieski bankowy (CTA) */
  --brand-700:#0f4fc0;
  --brand-200:#d9e7ff;

  --accent-600:#1aa581;        /* zielony akcent „zaakceptowano” */
  --accent-700:#0f8a6b;

  --surface:#ffffff;           /* biel kart */
  --surface-alt:#0f1f33;       /* ciemna powierzchnia dla kontrastu */
  --surface-muted:#e9eef7;     /* delikatne tło sekcji */

  --danger-600:#d92d20;

  --ring:#6aa9ff;              /* focus ring */
  --shadow: 0 10px 30px rgba(15,31,51,.08), 0 3px 10px rgba(15,31,51,.06);
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 10px;

  --container: 1100px;
}

/* ------------------------------- Reset/UI -------------------------------- */
*,
*::before,
*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans";
  color: var(--ink-900);
  background: var(--bg-page);
  line-height:1.55;
  text-rendering: optimizeLegibility;
}

/* Redukcja animacji gdy użytkownik sobie tego życzy */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ------------------------------ Siatka/Container ------------------------- */
.container{
  width:min(100% - 32px, var(--container));
  margin-inline:auto;
  padding-block: clamp(28px, 4vw, 56px);
}

/* ------------------------------ Nagłówki & tekst ------------------------- */
h1,h2,h3{ line-height:1.2; margin:0 0 .6em; }
h1{ font-size: clamp(28px, 4.2vw, 44px); letter-spacing:.1px; }
h2{ font-size: clamp(22px, 3.2vw, 30px); }
h3{ font-size: clamp(18px, 2.6vw, 22px); }
p{ margin:0 0 1em; color: var(--ink-700); }
strong{ color: var(--ink-900); }

/* ------------------------------ Linki & focus ---------------------------- */
a{ color: var(--brand-700); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ------------------------------ Przycisk bankowy ------------------------- */
.btn{
  --btn-bg: var(--brand-600);
  --btn-bg-hover: var(--brand-700);
  --btn-ink: #fff;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6em;
  padding: clamp(10px, 1.2vw, 14px) clamp(16px, 2vw, 22px);
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 700;
  letter-spacing:.2px;
  box-shadow: var(--shadow);
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .2s ease;
}
.btn:hover{ background: var(--btn-bg-hover); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); box-shadow: 0 4px 16px rgba(15,31,51,.16); }
.btn-primary{ /* alias dla zgodności z HTML */ }

/* ------------------------------ Karty / listy ---------------------------- */
.cards, .reviews, .product-list{
  list-style:none; padding:0; margin: 18px 0 0;
  display:grid; gap: clamp(12px, 2.2vw, 18px);
}
.cards{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cards li, .reviews li{
  background: var(--surface);
  border: 1px solid #e5ecf6;
  border-radius: var(--radius-lg);
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow: var(--shadow);
}
.product-list{
  counter-reset: prod;
}
.product-list > li{
  position:relative;
  background: var(--surface);
  border: 1px solid #e5ecf6;
  border-radius: var(--radius-lg);
  padding: clamp(14px, 2.2vw, 18px) clamp(14px, 2.2vw, 22px) clamp(14px, 2.2vw, 18px) 56px;
  box-shadow: var(--shadow);
}
.product-list > li::before{
  counter-increment: prod;
  content: counter(prod);
  position:absolute; inset-block-start: 14px; inset-inline-start: 16px;
  width: 28px; height:28px;
  display:grid; place-items:center;
  background: var(--brand-600);
  color:#fff; border-radius: 10px;
  font-weight: 800; box-shadow: 0 4px 10px rgba(19,99,223,.25);
}

/* ------------------------------ Formularze ------------------------------- */
.form-subscribe, .form-review{
  display:grid; gap: 12px;
  max-width: 560px;
}
input[type="email"], input[type="text"], textarea{
  width:100%;
  appearance:none;
  background:#fff;
  border:1px solid #dbe3ef;
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  color: var(--ink-900);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea{ resize: vertical; }
input::placeholder, textarea::placeholder{ color: #8aa0bc; }
input:focus, textarea:focus{
  border-color: var(--brand-600);
  box-shadow: 0 0 0 4px rgba(19, 99, 223, .15);
  outline: none;
}

/* ------------------------------ Bloki (kontrast) ------------------------- */
/* Blok 1: hero — ciemne tło, jasny tekst */
.blok-1{
  background: linear-gradient(135deg, #0f1f33 0%, #0a1630 100%);
  color:#eaf2ff;
  position:relative;
  overflow:hidden;
}
.blok-1 .btn{ --btn-bg: var(--accent-600); --btn-bg-hover: var(--accent-700); }
.blok-1 p{ color:#d4def0; max-width: 760px; }

/* Blok 2: formularz — jasne, kartowe, akcent brand */
.blok-2{ background: var(--bg-page); }
.blok-2 h2{ color: var(--ink-900); }

/* Blok 3: produkty + artykuł — delikatnie odcinamy tłem */
.blok-3{ background: var(--surface-muted); }
.feature-article{
  margin-top: clamp(18px, 3.2vw, 28px);
  background: #ffffff;
  border: 1px solid #e5ecf6;
  border-radius: var(--radius-xl);
  padding: clamp(16px, 2.4vw, 24px);
  box-shadow: var(--shadow);
}
.feature-article h3{ color: var(--ink-900); }
.feature-article p{ color: var(--ink-700); }

/* Blok 4: specjaliści — karty na jasnym */
.blok-4{ background: var(--bg-page); }

/* Blok 4.1: media — ciemne tło dla kontrastu */
.blok-4-1{
  background: var(--surface-alt);
  color: #e9f1ff;
}
.blok-4-1 p{ color:#cfe0ff; }

/* Blok 5: opinie — jasne karty */
.blok-5{ background: var(--bg-page); }
.reviews li p{ color: var(--ink-700); }
.leave-review{
  margin-top: clamp(18px, 3vw, 28px);
  background: #fff; border:1px solid #e5ecf6;
  border-radius: var(--radius-lg);
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow: var(--shadow);
}

/* Blok 6: adres + mapa — ciemny pasek z jasną ramką mapy */
.blok-6{
  background: linear-gradient(180deg, #0f1f33 0%, #132946 100%);
  color: #eaf2ff;
}
.blok-6 h2{ color:#ffffff; }
.blok-6 p{ color:#d6e6ff; }
.map-wrap{
  margin-top: 14px;
  background: #0b1b2b;
  border:1px solid #2b3f59;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.map-wrap iframe{
  display:block; width:100%; height: 380px; border:0;
}

/* Blok 7: stopka — ciemna, minimalistyczna */
.blok-7{
  background:#060e1a;
  color:#c9d6ea;
  padding-block: 22px;
}
.blok-7 p{ margin:0; color:#c9d6ea; }
.domainName{ color:#89c6ff; font-weight:700; }

/* ------------------------------ Header/hero kompozycja ------------------- */
#offer .container{
  padding-block: clamp(48px, 8vw, 120px);
}
#offer h1{
  max-width: 820px;
}
#offer .btn{
  margin-top: 14px;
}

/* ------------------------------ Użyteczne klasy -------------------------- */
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background: var(--brand-200); color: var(--brand-700); font-weight:700; font-size: .85rem;
}
.muted{ color: var(--ink-500); }

/* ------------------------------ Tabele/typografia w artykule ------------- */
.feature-article > * + *{ margin-top: .9em; }
.feature-article ul{ padding-left: 1.1em; }
.feature-article li{ margin: .35em 0; }

/* ------------------------------ Responsywność ---------------------------- */
@media (max-width: 920px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .cards{ grid-template-columns: 1fr; }
  .btn{ width: 100%; }
  #offer .container{ padding-block: 56px; }
  .map-wrap iframe{ height: 320px; }
}
@media (max-width: 420px){
  h1{ font-size: 26px; }
  .map-wrap iframe{ height: 280px; }
}

/* ------------------------------ Statusy/alerty (opcjonalne) -------------- */
.alert{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px; border-radius:12px; border:1px solid #e5ecf6; background:#fff;
}
.alert--danger{ border-color: #ffd7d7; background:#fff5f5; color: #7a1212; }
.alert--success{ border-color:#bfe8db; background:#effaf7; color:#0d5a47; }

/* ------------------------------ Drobne detale UX ------------------------- */
::selection{ background: #cfe0ff; color:#0a1630; }
hr{ border:0; height:1px; background: #e5ecf6; margin: 18px 0; }

/* ------------------------------ Pomocniczy JS hook (opcjonalnie)
   Jeżeli skrypt uzupełnia .domainName, styl jest już gotowy. ----------- */