/* =========================
   Vista Finance Sp. — Strawberry Fields Theme
   No external fonts. High-contrast. Mobile-first.
   ========================= */

/* ---------- CSS Variables ---------- */
:root{
  /* Palette inspired by truskawki (strawberries) & field */
  --strawberry:#D7263D;        /* intensywny czerwony owocu */
  --strawberry-deep:#A8182C;    /* cień czerwieni */
  --leaf:#2E7D32;               /* zieleń liści */
  --leaf-deep:#1E5A22;          /* cień zieleni */
  --blossom:#FFF3E6;            /* kremowo-kwiatowy */
  --cream:#F8EFE6;              /* jasny krem */
  --sky:#E6F4FF;                /* błękit nieba */
  --soil:#5C4433;               /* ziemisty brąz */
  --soil-light:#7B5A44;         /* jaśniejsza ziemia */
  --ink:#111;                   /* ciemny tekst */
  --paper:#fff;                 /* czyste tło */
  --muted:#656565;              /* opis/secondary */
  --shadow:0 6px 18px rgba(0,0,0,.12);
  --radius:20px;
  --radius-lg:28px;
}

/* ---------- Base & Typography ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Ubuntu,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  color:var(--ink);
  background:
    /* delikatny wzór nasionek truskawki */
    radial-gradient(circle at 20px 20px, rgba(0,0,0,0.03) 2px, transparent 3px) 0 0/36px 36px,
    linear-gradient(180deg, #ffffff 0%, #fffefe 100%);
  line-height:1.6;
}

/* Kontener o max szerokości i centrowaniu */
.container{
  width:100%;
  max-width:1090px;   /* zgodnie z Twoimi предпочтениями */
  margin-inline:auto;
  padding: clamp(16px, 2vw, 28px);
}

/* ---------- Utility ---------- */
.hidden{display:none!important}
.center{text-align:center}

/* ---------- Sections (Bloki) ---------- */
.blok{
  position:relative;
  padding: clamp(28px, 5vw, 68px) 0;
}

/* Delikatny “row crop” pattern — rzędy pola */
.blok::before{
  content:"";
  position:absolute; inset:0;
  opacity:0.08;
  background:
    repeating-linear-gradient(
      170deg,
      transparent 0 18px,
      rgba(0,0,0,.25) 18px 19px
    );
  pointer-events:none;
}

/* ---------- Offer (hero) ---------- */
.blok-offer{
  color:#fff;
  background:
    radial-gradient(1200px 40% at 80% -10%, rgba(255,255,255,.18) 0 60%, transparent 60% 100%),
    linear-gradient(135deg, var(--strawberry) 0%, var(--strawberry-deep) 100%);
}
.blok-offer h1{
  font-size: clamp(28px, 5vw, 48px);
  line-height:1.15;
  margin:0 0 14px;
  letter-spacing:.2px;
}
.blok-offer p{
  margin:0 0 22px;
  font-size: clamp(16px, 1.2vw, 18px);
  color:#fff;
  max-width: 58ch;
}

/* ---------- Form ---------- */
.blok-form{
  background: linear-gradient(180deg, var(--blossom), var(--cream));
  color: var(--ink);
}
form{
  display:grid;
  gap:14px;
  max-width:640px;
}
label{
  font-weight:600;
}
input[type="email"],
input[type="text"],
textarea{
  width:100%;
  border:2px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:14px 16px;
  background:#fff;
  font-size:16px;
  outline:none;
  transition:border .2s ease, box-shadow .2s ease, transform .02s ease;
}
input:focus, textarea:focus{
  border-color: var(--leaf);
  box-shadow:0 0 0 4px rgba(46,125,50,.12);
}

/* ---------- Products + Article ---------- */
.blok-products{
  background: linear-gradient(180deg, #ffffff 0%, var(--sky) 100%);
}
.lista-produktow{
  list-style:none; margin:0; padding:0;
  display:grid; gap:14px;
}
.lista-produktow li{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding:18px 18px 16px;
  box-shadow: var(--shadow);
}
.lista-produktow h3{
  margin:0 0 6px;
  font-size: clamp(18px, 1.4vw, 22px);
}
.lista-produktow .meta{
  color:var(--muted);
  margin:6px 0 0;
  font-size:14px;
}

.artykuł{
  margin-top: clamp(20px, 3vw, 36px);
  background:
    radial-gradient(800px 200px at 10% -40%, rgba(46,125,50,.12) 0 60%, transparent 60% 100%),
    #fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 3vw, 26px);
  box-shadow: var(--shadow);
}
.artykuł h3{margin:0 0 10px; font-size: clamp(20px, 2.2vw, 26px);}

/* ---------- Experts ---------- */
.blok-experts{
  background: linear-gradient(180deg, var(--leaf) 0%, var(--leaf-deep) 100%);
  color:#fff;
}
.lista-specjalistow{
  list-style:none; margin:0; padding:0;
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.lista-specjalistow li{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  padding:18px;
  backdrop-filter: blur(2px);
}
.lista-specjalistow h3{margin:0 0 6px; font-size: clamp(18px, 1.4vw, 22px); color:#fff;}
.lista-specjalistow p{margin:0; color:#FAFFFA}

/* ---------- Teaching / Media ---------- */
.blok-teaching{
  background: linear-gradient(180deg, #ffffff 0%, #f7fff7 100%);
  color: var(--ink);
}
.blok-teaching .container{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* ---------- Reviews ---------- */
.blok-reviews{
  background: linear-gradient(180deg, var(--soil-light) 0%, var(--soil) 100%);
  color:#fff;
}
.lista-opinii{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px;
}
.lista-opinii li{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
  padding:18px;
}
blockquote{margin:0; font-size: clamp(16px, 1.2vw, 18px); line-height:1.55}
cite{display:block; margin-top:8px; opacity:.9; font-style:normal}

/* ---------- Review Form ---------- */
.blok-review-form{
  background: linear-gradient(180deg, #fff, var(--blossom));
  color: var(--ink);
}

/* ---------- Address + Map ---------- */
.blok-address{
  background: linear-gradient(180deg, var(--sky), #ffffff);
}
address{font-style:normal; font-weight:600; margin-bottom:10px}

/* ---------- Copyright ---------- */
.blok-copyright{
  background: #0D0D0D;
  color:#eee;
  padding: 18px 0;
}
.blok-copyright p{
  margin:0;
  font-size:14px;
  letter-spacing:.2px;
}

/* ---------- Headings ---------- */
h2{
  font-size: clamp(22px, 3.2vw, 32px);
  margin:0 0 14px;
}
h3{margin:0 0 8px}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg: var(--leaf);
  --btn-bg-hover:#256a2a;
  --btn-fg:#fff;
  display:inline-block;
  border:none;
  border-radius:14px;
  padding:12px 18px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  box-shadow: var(--shadow);
  transform: translateY(0);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{
  --btn-bg: #fff;
  --btn-bg-hover:#F6F6F6;
  --btn-fg: var(--strawberry);
}
.btn:hover{transform: translateY(-1px); background: var(--btn-bg-hover)}
.btn:active{transform: translateY(0)}
.btn:focus-visible{
  outline: 3px solid rgba(215,38,61,.3);
  outline-offset:2px;
}

/* ---------- Links ---------- */
a{color: var(--strawberry-deep); text-underline-offset:2px}
.blok-offer a{color: var(--strawberry)} /* w hero przycisk ma własne kolory */

/* ---------- Cards (generic) ---------- */
.card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}

/* ---------- Accessibility: prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important}
}

/* ---------- Mobile-first Layout Tweaks ---------- */
@media (min-width: 720px){
  .lista-produktow{grid-template-columns: repeat(2, 1fr)}
  .lista-opinii{grid-template-columns: repeat(2, 1fr)}
}
@media (min-width: 980px){
  .lista-produktow{grid-template-columns: repeat(3, 1fr)}
  .lista-opinii{grid-template-columns: repeat(3, 1fr)}
}

/* ---------- Subtle “seed” accents on hero button ---------- */
.btn-primary{
  background:
    radial-gradient(6px 8px at 10% 40%, rgba(215,38,61,.22) 0 60%, transparent 60% 100%),
    #fff;
}

/* ---------- Forms: help text ---------- */
.note{
  margin-top:8px;
  font-size:14px;
  color:var(--muted);
}

/* ---------- Map iframe wrapper ---------- */
.mapa{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
}

/* ---------- Hero “strawberry skin” overlay seeds ---------- */
.blok-offer::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.12;
  background:
    radial-gradient(4px 6px at 6% 20%, rgba(0,0,0,.85) 0 60%, transparent 60% 100%),
    radial-gradient(4px 6px at 16% 46%, rgba(0,0,0,.75) 0 60%, transparent 60% 100%),
    radial-gradient(4px 6px at 28% 30%, rgba(0,0,0,.8) 0 60%, transparent 60% 100%),
    radial-gradient(4px 6px at 40% 55%, rgba(0,0,0,.85) 0 60%, transparent 60% 100%),
    radial-gradient(4px 6px at 58% 28%, rgba(0,0,0,.7) 0 60%, transparent 60% 100%),
    radial-gradient(4px 6px at 72% 48%, rgba(0,0,0,.85) 0 60%, transparent 60% 100%),
    radial-gradient(4px 6px at 86% 26%, rgba(0,0,0,.8) 0 60%, transparent 60% 100%);
  mix-blend-mode: soft-light;
}

/* ---------- Headings: tidy spacing across blocks ---------- */
.blok .container > h2:first-child{
  margin-top:0;
}