/* ==========================================================
   medstrony.pl — WARSTWA KAMPANIJNA (landing /fizjoterapia)
   Ładowana PO style.css. Nadpisuje tylko to, co ma krzyczeć.
   Core marki (turkus, Inter, układ) zostaje nietknięty.
   ========================================================== */

:root{
  /* Kolor akcji — tylko landing.
     --coral      = TŁO przycisków. Jaśniejszy, bo ma krzyczeć. Biel na nim = 4.76.
     --coral-ink  = koral jako TEKST/ikona. Ciemniejszy, bo musi przejść
                    także na ciepłym tle (--warm): 4.79. Jeden hex nie zrobi obu. */
  --coral:#CF4023;
  --coral-ink:#C73D21;
  --coral-dp:#B5361C;
  --warm:#FFF6F3;
  --warm-line:#F7DDD5;

  /* Landing jest żywszy: krótsze czasy, mocniejsze przesunięcia */
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- Tła: ciepła nuta zamiast chłodnej ---------- */
.sec--clean{background:var(--warm)}
.sec--clean form,
.sec--clean .reach a,
.sec--clean .lp-why__c{background:var(--white)}

/* ---------- CTA: koral, mocny ---------- */
.btn--primary{
  background:var(--coral);
  box-shadow:0 2px 6px rgba(207,64,35,.22), 0 8px 24px rgba(207,64,35,.14);
  transition:background .2s var(--ease), transform .24s var(--ease-pop), box-shadow .24s var(--ease);
}
.btn--primary:hover{
  background:var(--coral-dp);
  transform:translateY(-3px);
  box-shadow:0 4px 12px rgba(207,64,35,.28), 0 14px 34px rgba(207,64,35,.20);
}
.btn--primary:active{transform:translateY(-1px)}

.btn--ghost:hover{border-color:var(--coral-ink);color:var(--coral-ink)}
.btn--text{color:var(--coral-ink)}
.btn--text:hover{color:var(--coral-dp)}


/* Plakietka nad H1 — sygnał, że to kampania.
   Pulsująca kropka usunięta 07.08.2026: dekoracyjny „status dot" bez znaczenia
   semantycznego to jeden ze znaków rozpoznawczych stron generowanych przez AI. */
.flag{
  display:inline-flex;align-items:center;
  background:var(--warm);color:var(--coral-ink);
  border:1px solid var(--warm-line);
  padding:8px 16px;border-radius:100px;
  font-size:13px;font-weight:600;letter-spacing:-0.01em;
  margin-bottom:22px;
}

/* ---------- Pozostałe akcenty ---------- */
.eyebrow{color:var(--coral-ink)}
.eyebrow::before{background:var(--coral)}
.note{border-left-color:var(--coral)}
.reach svg{color:var(--coral-ink)}
.reach__n{background:var(--warm);color:var(--coral-ink)}  /* kontrast 4.79:1 */
.f .rq{color:var(--coral-ink)}
.f input:focus,.f select:focus,.f textarea:focus{
  border-color:var(--coral);box-shadow:0 0 0 3px rgba(207,64,35,.12);
}
.agree input{accent-color:var(--coral)}
.pick__o input{accent-color:var(--coral)}
.pick__o:hover{border-color:var(--coral)}
.pick__o:has(input:checked){border-color:var(--coral);box-shadow:0 0 0 2px rgba(207,64,35,.12)}
.pick__hint{background:var(--warm)}
.done svg{color:var(--coral-ink)}
.seo__l li:hover{color:var(--coral-ink)}
:focus-visible{outline-color:var(--coral)}
a{color:var(--coral-ink)}
a:hover{color:var(--coral-dp)}
.logo i{background:var(--coral)}
.logo span{color:var(--coral-ink)}

/* Komponenty bazowe reużyte na landingu (.incl, .tl) — akcent na koral.
   Struktura i responsywność zostają ze style.css, przekolorowujemy tylko akcent. */
.incl__ic{color:var(--coral-ink)}
.sec--clean .incl__c{background:var(--white)}
.tl__n{color:var(--coral-ink)}
.tl__s:hover .tl__n{background:var(--coral);color:#fff;box-shadow:0 0 0 2px var(--coral)}

/* Turkus zostaje w jednym miejscu: znak marki w stopce.
   To kotwica tożsamości — landing jest głośniejszy, ale nadal medstrony.pl */
.ftr .logo i{background:var(--teal)}

/* ---------- Reveal: żywszy ---------- */
.rv{
  transform:translateY(20px);
  transition:opacity .42s var(--ease), transform .42s var(--ease-pop);
}

/* ---------- Nawigacja dolna (kafle) ---------- */
.nav-out{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  max-width:900px;margin:0 auto;
}
.nav-out a{
  background:var(--white);border:1px solid var(--edge);border-radius:var(--r-lg);
  padding:24px 22px;display:flex;flex-direction:column;gap:8px;
  color:var(--ink);text-decoration:none;position:relative;overflow:hidden;
  transition:border-color .24s var(--ease), transform .24s var(--ease-pop), box-shadow .24s var(--ease);
}
.sec--clean .nav-out a{background:var(--white)}
.nav-out a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--coral);
  transition:width .35s var(--ease);
}
.nav-out a:hover{
  border-color:var(--coral);transform:translateY(-4px);box-shadow:var(--sh-md);color:var(--ink);
}
.nav-out a:hover::after{width:100%}
.nav-out b{font-size:17px;font-weight:600;letter-spacing:-0.01em}
.nav-out span{font-size:14px;color:var(--grey);line-height:1.5}
.nav-out__arw{
  margin-top:6px;color:var(--edge);
  transition:color .24s var(--ease), transform .24s var(--ease);
}
.nav-out a:hover .nav-out__arw{color:var(--coral-ink);transform:translateX(5px)}

@media(max-width:900px){.nav-out{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.nav-out{grid-template-columns:1fr}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .btn--primary:hover,.nav-out a:hover{transform:none!important}
}


/* ==========================================================
   KOMPONENTY WŁASNE LANDINGU
   Nie istnieją na medstrony.pl. Landing to oferta, nie kopia.
   ========================================================== */

/* ---------- Header: uproszczony ---------- */
.hdr--lp .hdr__in{height:66px}

/* ---------- Hero ---------- */
.lp-hero{
  padding:clamp(40px,5vw,64px) 0 clamp(52px,6vw,80px);
  position:relative;overflow:hidden;
}
.lp-hero::before{
  content:"";position:absolute;top:-160px;right:-140px;
  width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle, rgba(207,64,35,.08) 0%, rgba(207,64,35,0) 68%);
  pointer-events:none;
}
.lp-hero__grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;
  position:relative;z-index:1;
}
.lp-hero h1{
  font-size:clamp(34px,4.8vw,56px);letter-spacing:-0.03em;line-height:1.08;
  margin-bottom:20px;
}
.lp-hero .lead{max-width:46ch;margin-bottom:32px}

/* ---------- Blok ceny ---------- */
.lp-price{
  background:var(--white);border:1px solid var(--warm-line);
  border-radius:var(--r-lg);padding:26px 28px;
  box-shadow:0 2px 6px rgba(207,64,35,.05), 0 10px 30px rgba(207,64,35,.06);
  display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;
}
.lp-price__main{
  display:flex;flex-direction:column;
  padding-right:30px;border-right:1px solid var(--edge);
}
.lp-price__was{
  font-size:15px;color:var(--grey);text-decoration:line-through;
  font-variant-numeric:tabular-nums;margin-bottom:2px;
}
.lp-price__main b{
  font-size:38px;font-weight:600;color:var(--coral-ink);
  letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums;
}
.lp-price__main em{font-style:normal;font-size:13px;color:var(--grey);margin-top:6px}

.lp-price__inc{list-style:none;display:grid;gap:9px}
.lp-price__inc li{
  font-size:14px;color:var(--ink);display:flex;gap:10px;align-items:center;line-height:1.4;
}
.lp-price__inc svg{flex:none;color:var(--coral-ink)}

@media(max-width:560px){
  .lp-price{grid-template-columns:1fr;gap:22px;padding:22px}
  .lp-price__main{
    flex-direction:row;align-items:baseline;gap:12px;
    padding:0 0 20px;border-right:0;border-bottom:1px solid var(--edge);
  }
  .lp-price__main em{margin-top:0}
}

/* ---------- Przycisk większy ---------- */
.btn--lg{padding:18px 34px;font-size:17px}
@media(max-width:600px){.btn--lg{padding:16px 28px;font-size:16px}}

/* ---------- Wizual hero ---------- */
.lp-hero__vis .visual__frame{
  background:var(--warm);box-shadow:var(--sh-md);
}
/* akcent CTA w mockupie: turkus → koral, spójnie z identyfikacją fizjo */
.lp-hero__vis .visual__btn{background:var(--coral)}

/* ---------- Trzy powody ---------- */
.lp-why{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.lp-why__c{
  background:var(--white);border-radius:var(--r-lg);
  padding:34px 30px 32px;position:relative;overflow:hidden;
  box-shadow:var(--sh-sm);
  transition:transform .26s var(--ease-pop), box-shadow .26s var(--ease);
}
.lp-why__c::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--coral);transform:scaleY(0);transform-origin:top;
  transition:transform .4s var(--ease);
}
.lp-why__c:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.lp-why__c:hover::before{transform:scaleY(1)}

.lp-why__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--warm);color:var(--coral-ink);
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  margin-bottom:20px;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.lp-why__c:hover .lp-why__n{background:var(--coral);color:#fff;transform:scale(1.08)}
.lp-why__c h3{font-size:19px;margin-bottom:10px;letter-spacing:-0.02em}
.lp-why__c p{font-size:15px;line-height:1.6}

@media(max-width:900px){.lp-why{grid-template-columns:1fr;gap:16px}}

/* ---------- Sekcja formularza ---------- */
.lp-form__grid{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start;
}
.lp-form form{box-shadow:var(--sh-md)}

/* ---------- Responsive hero / form ---------- */
@media(max-width:1000px){
  .lp-hero__grid,.lp-form__grid{grid-template-columns:1fr;gap:44px}
  /* Tak samo jak `.visual` na stronie głównej: makieta ma sens wyłącznie obok
     tekstu. Na wąskim ekranie odsuwałaby CTA i cenę poza pierwszy ekran. */
  .lp-hero__vis{display:none}
}
@media(max-width:600px){
  .lp-hero .cta-row .btn{width:100%}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .lp-hero::before{display:none}
  .lp-why__c::before{display:none}
  .lp-why__c:hover,.lp-why__c:hover .lp-why__n{transform:none!important}
}