/* =========================================================================
   PILAWSKA ZAORSKI ADWOKACI — Landing Page (styles)
   Brand palette pulled from pzadwokaci.pl:
     - Ink (warm charcoal):  #2B2A29
     - Gold accent:          #C4A65D  /  #D4B565 (light)
     - Cream backgrounds:    #F7F3EC / #FBF8F2
   Mobile-first. Minimal, premium, high-contrast for conversion.
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
  --ink:        #2B2A29;   /* primary dark (brand) */
  --ink-soft:   #4D4C4A;   /* secondary text */
  --muted:      #6f6d6a;   /* captions / hints */
  --gold:       #C4A65D;   /* accent — buttons, lines (AA on white for large text) */
  --gold-deep:  #A8863F;   /* darker gold — accessible text/links on light */
  --gold-light: #D4B565;
  --cream:      #FBF8F2;   /* page section tint */
  --cream-2:    #F4EEE3;   /* card / input background */
  --line:       #E6DFD1;   /* hairline borders */
  --white:      #ffffff;
  --success:    #1f7a4d;
  --error:      #b3261e;

  --shadow-sm: 0 1px 2px rgba(43,42,41,.06), 0 2px 6px rgba(43,42,41,.05);
  --shadow-md: 0 6px 24px rgba(43,42,41,.10);
  --shadow-lg: 0 18px 50px rgba(43,42,41,.16);

  --radius:     14px;
  --radius-sm:  10px;
  --maxw:       1120px;

  --font-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Times New Roman', Georgia, serif;
  --font-sans:  system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 700; line-height: 1.15; color: var(--ink); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 5.4vw, 3.25rem); }
h2 { font-size: clamp(1.55rem, 4vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
p  { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }

/* Accessible focus states */
:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
.section  { padding-block: clamp(48px, 8vw, 88px); }
.section--tint  { background: var(--cream); }
.section--ink   { background: var(--ink); color: #EDE7DB; }
.section--ink h2, .section--ink h3 { color: #fff; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .8em;
}
.section--ink .eyebrow { color: var(--gold-light); }
.center { text-align: center; }
.lead { font-size: clamp(1.05rem, 2.4vw, 1.2rem); color: var(--ink-soft); }
.visually-hidden {
  position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* Gold divider */
.rule {
  width: 56px; height: 3px; border: 0; margin: 0 0 1.4rem;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 3px;
}
.center .rule { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-sans); font-weight: 700; font-size: 1.02rem;
  padding: 16px 28px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-align: center; line-height: 1.2;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color: #3a2f12;
  box-shadow: var(--shadow-md);
}
.btn--primary:hover { box-shadow: var(--shadow-lg); }
.btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.section--ink .btn--ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.btn--block { width: 100%; }
.btn--lg { padding: 18px 34px; font-size: 1.08rem; }

/* ---------- Top bar (logo only — no distracting nav) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 12px; }
.topbar__logo img { height: 34px; width: auto; }
.topbar__phone {
  display: none; align-items: center; gap: .5em; font-weight: 700; color: var(--ink);
}
.topbar__phone img { height: 18px; width: 18px; }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%); }
.hero__grid { display: grid; gap: 32px; align-items: center; padding-top: 34px; }
.hero__badge {
  display:inline-flex; align-items:center; gap:.5em;
  background: var(--cream-2); border:1px solid var(--line);
  color: var(--ink-soft); font-size:.82rem; font-weight:600;
  padding: 7px 14px; border-radius: 999px; margin-bottom: 18px;
}
.hero__badge .dot { width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none; }
.hero h1 span { color: var(--gold-deep); }
.hero__sub { font-size: clamp(1.05rem, 2.6vw, 1.25rem); color: var(--ink-soft); max-width: 34ch; }
.hero__cta { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.hero__reassure { font-size: .9rem; color: var(--muted); margin: 12px 0 0; display:flex; align-items:center; gap:.5em; }

/* Hero media (video placeholder) */
.hero__media {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--ink);
  aspect-ratio: 9 / 16;               /* mobile: vertical */
}
.hero__media video, .hero__media img, .hero__media iframe {
  position:absolute; inset:0; width:100%; height:100%; object-fit: cover; border:0;
}
.hero__media-ph {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; text-align:center;
  color:#cfc6b3; background:
    radial-gradient(120% 90% at 50% 0%, #3a3937 0%, #232221 70%);
  padding: 24px;
}
.hero__media-ph .play {
  width:70px;height:70px;border-radius:50%;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
}
.hero__media-ph .play svg { width:26px;height:26px;display:block;fill:#2b2413; }
.hero__media-ph small { font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; opacity:.8; }

/* Trust signals — full-width row below the hero (2 cols mobile → 4 cols desktop) */
.trust {
  list-style: none;                 /* no stray <ul> bullets */
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin-top: clamp(32px, 5vw, 52px);
}
.trust__item {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 14px 14px 46px; position: relative; box-shadow: var(--shadow-sm);
  font-size: .92rem;
}
.trust__item strong { display:block; color: var(--ink); font-size:.95rem; }
.trust__item span { color: var(--muted); }
.trust__item::before {
  content:""; position:absolute; left:14px; top:15px; width:20px; height:20px;
  background: var(--gold); border-radius: 50%;
  -webkit-mask: no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
          mask: no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

/* Proof bar */
.proofbar {
  background: var(--ink); color: #EDE7DB; text-align:center;
}
.proofbar .container { padding-block: 18px; }
.proofbar p { margin:0; font-size:.98rem; }
.proofbar strong { color: var(--gold-light); }

/* ---------- Problem → solution ---------- */
.split { display: grid; gap: 28px; align-items: start; }
.pcard {
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-sm);
}
.pcard h3 { margin-bottom:.4em; }
.pcard p:last-child { margin-bottom:0; }

/* ---------- How it works ---------- */
.steps { display:grid; gap:20px; counter-reset: step; }
.step {
  position:relative; background:var(--white); border:1px solid var(--line);
  border-radius: var(--radius); padding: 28px 22px 22px; box-shadow: var(--shadow-sm);
}
.step__num {
  counter-increment: step;
  position:absolute; top:-18px; left:22px;
  width:44px;height:44px;border-radius:50%;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color:#3a2f12; font-weight:800; font-family:var(--font-sans);
  display:flex;align-items:center;justify-content:center; box-shadow: var(--shadow-sm);
}
.step__num::before { content: counter(step); }
.step h3 { margin-top:.4em; }
.step p:last-child { margin-bottom:0; color: var(--ink-soft); }

/* ---------- Social proof: win cards + media ---------- */
.wins { display:grid; gap:18px; }
.wincard {
  background: var(--white); border:1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm);
}
.wincard__bank { font-family: var(--font-serif); font-weight:700; font-size:1.15rem; }
.wincard__meta { color: var(--muted); font-size:.86rem; margin-bottom:.6em; }
.wincard p:last-child { margin-bottom:0; color: var(--ink-soft); font-size:.95rem; }
.wincard__tag {
  display:inline-block; margin-top:12px; font-size:.78rem; font-weight:700;
  color: var(--gold-deep); background: var(--cream-2); border:1px solid var(--line);
  padding: 4px 12px; border-radius:999px;
}
.media {
  margin-top: 34px; text-align:center;
}
.media h3 { font-family: var(--font-sans); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.media__logos {
  display:flex; flex-wrap:wrap; gap: 12px 26px; justify-content:center; align-items:center; margin-top:16px;
}
.media__logos span {
  font-family: var(--font-serif); font-weight:700; font-size:1.05rem; color: var(--ink-soft);
  opacity:.85; padding: 6px 10px;
}

/* ---------- Team / authority ---------- */
.team { display:grid; gap:22px; }
.person {
  display:flex; gap:16px; align-items:flex-start;
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.person__avatar {
  flex:none; width:64px;height:64px;border-radius:50%;
  background: linear-gradient(180deg, var(--cream-2), #e6dcc7);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif); font-weight:700; font-size:1.3rem; color: var(--gold-deep);
  border:1px solid var(--line);
}
.person h3 { margin:0 0 .1em; }
.person .role { color: var(--gold-deep); font-weight:600; font-size:.9rem; margin-bottom:.5em; }
.person p:last-child { margin-bottom:0; font-size:.94rem; color: var(--ink-soft); }

/* ---------- Lead magnet (ebook) ---------- */
.ebook {
  display:grid; gap:26px; align-items:center;
  background: linear-gradient(180deg, #34322f, var(--ink));
  color:#EDE7DB; border-radius: var(--radius); padding: 30px 24px;
  box-shadow: var(--shadow-md);
}
.ebook h2 { color:#fff; }
.ebook__cover {
  justify-self:center; width: 170px; aspect-ratio: 3/4; border-radius: 8px;
  background: linear-gradient(150deg, #f6f1e8, #e7ddc8);
  box-shadow: var(--shadow-lg); position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; padding:16px;
}
.ebook__cover::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:8px; background:var(--gold);
}
.ebook__cover .k { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; }
.ebook__cover .t { font-family:var(--font-serif); font-weight:700; color:var(--ink); font-size:1.15rem; line-height:1.15; }
.ebook__form { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.ebook__form input {
  padding: 14px 16px; border-radius: var(--radius-sm); border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); color:#fff; font-size:1rem;
}
.ebook__form input::placeholder { color: rgba(255,255,255,.6); }
.ebook__note { font-size:.8rem; color: rgba(255,255,255,.6); margin:0; }

/* ---------- Form ---------- */
.formwrap {
  background: var(--cream-2); border:1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow-md);
}
.form__grid { display:grid; grid-template-columns: 1fr; gap: 16px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-weight:600; font-size:.92rem; color: var(--ink); }
.field label .req { color: var(--gold-deep); }
.field input, .field select, .field textarea {
  font-family: var(--font-sans); font-size: 1rem; color: var(--ink);
  padding: 14px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--white);
  transition: border-color .12s ease, box-shadow .12s ease;
  width:100%;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(196,166,93,.25); outline: none;
}
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--error); }
.field__err { color: var(--error); font-size: .82rem; min-height: 0; display:none; }
.field--invalid .field__err { display:block; }
.consent {
  display:flex; gap:12px; align-items:flex-start; font-size:.86rem; color: var(--ink-soft);
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-sm); padding:14px;
}
.consent input { margin-top:3px; width:20px; height:20px; flex:none; accent-color: var(--gold-deep); }
.form__submit { margin-top: 4px; }
.form__foot { font-size:.78rem; color: var(--muted); text-align:center; margin: 10px 0 0; }
.form__success {
  display:none; text-align:center; padding: 30px 10px;
}
.form__success.is-visible { display:block; }
.form__success .tick {
  width:64px;height:64px;border-radius:50%;margin:0 auto 16px;
  background: var(--success); display:flex;align-items:center;justify-content:center;
}
.form__success .tick svg { width:32px;height:32px;fill:#fff; }
.is-submitting { opacity:.7; pointer-events:none; }

/* ---------- FAQ ---------- */
.faq { display:grid; gap:12px; max-width: 780px; margin-inline:auto; }
.faq details {
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: 4px 20px; box-shadow: var(--shadow-sm);
}
.faq summary {
  cursor:pointer; list-style:none; padding: 16px 30px 16px 0; position:relative;
  font-weight:600; font-size:1.02rem; color:var(--ink);
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:"+"; position:absolute; right:0; top:14px; font-size:1.5rem; color:var(--gold-deep); font-weight:400;
  transition: transform .15s ease;
}
.faq details[open] summary::after { content:"–"; }
.faq details p { color: var(--ink-soft); font-size:.95rem; padding-bottom: 8px; margin:0; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #C9C2B4; }
.footer .container { padding-block: 48px 32px; }
.footer__grid { display:grid; gap: 28px; }
.footer__logo img { height: 34px; opacity:.95; }  /* white logo variant used here */
.footer h4 { color:#fff; font-family:var(--font-sans); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin:0 0 14px; }
.footer a { color:#D6CFC0; }
.footer a:hover { color:#fff; }
.contact-line { display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; font-size:.94rem; }
.contact-line img { width:18px;height:18px;filter: brightness(0) invert(.8); flex:none; margin-top:2px; }
.footer__social { display:flex; gap:16px; margin-top:6px; }
.footer__bottom {
  border-top:1px solid rgba(255,255,255,.12); margin-top:30px; padding-top:20px;
  font-size:.8rem; color:#9c968a; display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between;
}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed; left:0; right:0; bottom:0; z-index: 60;
  display:grid; grid-template-columns: 1fr 1.3fr; gap:10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-top:1px solid var(--line); box-shadow: 0 -6px 24px rgba(43,42,41,.10);
}
.sticky-cta .btn { padding: 14px 12px; font-size: .98rem; }
.sticky-cta .btn--call { background: var(--ink); color:#fff; }
.sticky-cta .btn--call img { width:18px;height:18px; filter: brightness(0) invert(1); }
@media (min-width: 861px) { .sticky-cta { display:none; } }
/* add breathing room on mobile so sticky bar never covers footer content */
@media (max-width: 860px) { body { padding-bottom: 76px; } }

/* ---------- Cookie consent ---------- */
.cookie {
  position: fixed; left:12px; right:12px; bottom:12px; z-index: 70;
  background: var(--ink); color:#EDE7DB; border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-lg); display:none;
  max-width: 460px;
}
.cookie.is-visible { display:block; }
.cookie p { font-size:.86rem; margin:0 0 12px; color:#D6CFC0; }
.cookie a { color: var(--gold-light); }
.cookie__row { display:flex; gap:10px; }
.cookie .btn { flex:1; padding:11px 14px; font-size:.9rem; }
@media (max-width: 860px) { .cookie { bottom: 84px; } }  /* sit above sticky CTA */

/* ---------- Responsive: tablet / desktop ---------- */
@media (min-width: 700px) {
  .trust { grid-template-columns: repeat(4, 1fr); }  /* full-width row */
  .split { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .wins  { grid-template-columns: repeat(3, 1fr); }
  .team  { grid-template-columns: 1fr 1fr; }
  .form__grid { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
  .ebook { grid-template-columns: 200px 1fr; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 861px) {
  .topbar__phone { display: flex; }
  .hero__grid { grid-template-columns: 1.05fr .95fr; padding-top: 46px; padding-bottom: 20px; }
  .hero__cta { flex-direction: row; align-items:center; }
  .hero__media { aspect-ratio: 16 / 9; }   /* desktop: horizontal */
  .ebook__form { flex-direction: row; align-items:center; }
  .ebook__form input { flex: 1; }
  .ebook__form .btn { white-space: nowrap; }
}

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