/* ============================================
   anetakanka.pl — wspólne style
   Zmieniasz kolor w jednym miejscu, zmienia się wszędzie.
   ============================================ */

:root{
  --fiolet:#7B5C8E;
  --fiolet-ciemny:#654A75;
  --fiolet-jasny:#AF9CB5;
  --fiolet-tlo:#F1ECF6;
  --sliwka:#372B45;
  --naglowek:#1D1E20;
  --tekst:#5A5658;
  --szary:#8A828F;
  --linia:#E8E0E4;
  --lila:#F8F6FB;
  --biel:#FFFFFF;

  --font:"Ubuntu","Trebuchet MS",Verdana,sans-serif;
  --kontener:1080px;
  --radius:16px;
  --cien:0 2px 8px rgba(29,30,32,.04);
  --cien-hover:0 12px 28px rgba(55,43,69,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
  margin:0;background:var(--biel);color:var(--tekst);
  font-family:var(--font);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{
  font-family:var(--font);color:var(--naglowek);font-weight:700;
  letter-spacing:-.015em;margin:0;line-height:1.2;text-wrap:balance;
}
h1{font-size:clamp(2.2rem,5vw,3.4rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.3rem)}
h3{font-size:1.35rem}
p{margin:0}
a{color:var(--fiolet)}

.wrap{max-width:var(--kontener);margin:0 auto;padding:0 24px}
.waski{max-width:720px;margin-left:auto;margin-right:auto}
.sekcja{padding:96px 0}
.sekcja--lila{background:var(--lila)}
.sekcja--ciemna{background:var(--sliwka);color:#E4DCEA}
.sekcja--ciemna h2,.sekcja--ciemna h3{color:#fff}

/* ---------- nawigacja ---------- */
.gora{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linia);
}
.gora .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:16px;padding-bottom:16px}
.logo{font-size:1.3rem;font-weight:500;font-style:italic;color:var(--naglowek);
  text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.menu{display:flex;gap:26px;align-items:center;font-size:.95rem;flex-wrap:wrap}
.menu a{color:var(--tekst);text-decoration:none;padding:4px 0;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.menu a:hover{color:var(--fiolet)}
.menu a[aria-current="page"]{color:var(--fiolet);font-weight:600;border-color:var(--fiolet)}

/* ---------- przyciski ---------- */
.btn{
  display:inline-block;font-size:1rem;font-weight:600;
  padding:15px 28px;border-radius:999px;text-decoration:none;
  border:2px solid var(--fiolet);background:var(--fiolet);color:#fff;
  transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;
  cursor:pointer;
}
.btn:hover{background:var(--fiolet-ciemny);border-color:var(--fiolet-ciemny);
  transform:translateY(-2px);box-shadow:var(--cien-hover)}
.btn:focus-visible{outline:3px solid var(--fiolet-jasny);outline-offset:3px}
.btn--obrys{background:transparent;color:var(--fiolet)}
.btn--obrys:hover{background:var(--fiolet-tlo);color:var(--fiolet-ciemny)}
.btn--jasny{background:#fff;border-color:#fff;color:var(--sliwka)}
.btn--jasny:hover{background:var(--fiolet-tlo);border-color:var(--fiolet-tlo);color:var(--sliwka)}
.btn--blok{display:block;text-align:center;width:100%}
.przyciski{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ---------- nagłówki sekcji ---------- */
.naglowek-sekcji{text-align:center;max-width:44em;margin:0 auto 56px}
.naglowek-sekcji p{max-width:34em;margin-left:auto;margin-right:auto}
.naglowek-sekcji h2{margin-bottom:16px}
.naglowek-sekcji p{font-size:1.08rem}
.nadtytul{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fiolet);font-weight:700;margin-bottom:14px}

/* ---------- karty ---------- */
.karty{display:grid;gap:26px;align-items:stretch;grid-auto-rows:auto}
.karty--2{grid-template-columns:repeat(2,1fr)}
.karty--3{grid-template-columns:repeat(3,1fr)}
.karta{
  background:var(--biel);border:1px solid var(--linia);border-radius:var(--radius);
  padding:36px;position:relative;
  box-shadow:var(--cien);transition:transform .2s,box-shadow .2s;
  display:grid;grid-template-rows:subgrid;grid-row:span 4;align-content:start;
}
/* przeglądarki bez subgrid dostają zwykły układ pionowy */
@supports not (grid-template-rows: subgrid){
  .karta{display:flex;flex-direction:column}
}
.karta .akcja{align-self:end}
.karta:hover{transform:translateY(-3px);box-shadow:var(--cien-hover)}
.karta h3{margin-bottom:18px}
.karta p+p{margin-top:14px}
.karta .rosnie{flex:1;min-width:0}
.karta--wyroz{border:2px solid var(--fiolet);background:#FDFCFE}
.plakietka{position:absolute;top:-14px;left:32px;background:var(--fiolet);color:#fff;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:6px 14px;border-radius:999px}

/* ---------- cena ---------- */
.cena{border-top:1px solid var(--linia);margin-top:28px;padding-top:22px}
.cena .format{font-size:.92rem;color:var(--szary)}
.cena .kwota{font-size:1.8rem;font-weight:700;color:var(--fiolet);margin-top:4px}
.cena .uwaga{font-size:.86rem;color:var(--szary);margin-top:2px}
.pod-cta{font-size:.88rem;color:var(--szary);margin-top:14px;text-align:center}

/* ---------- kroki ---------- */
.kroki{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;position:relative}
.kroki::before{content:"";position:absolute;top:28px;left:14%;right:14%;
  height:2px;background:var(--linia)}
.krok{text-align:center;position:relative}
.krok .nr{font-size:2.8rem;font-weight:700;color:var(--fiolet);line-height:1;
  display:inline-block;padding:0 20px;background:var(--lila)}
.sekcja:not(.sekcja--lila) .krok .nr{background:var(--biel)}
.krok h4{font-size:1.15rem;margin:16px 0 10px}
.krok p{font-size:.98rem}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--linia);padding:24px 0}
.faq summary{cursor:pointer;list-style:none;font-weight:500;font-size:1.12rem;
  color:var(--naglowek);display:flex;justify-content:space-between;
  align-items:center;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:11px;height:11px;flex:0 0 11px;
  border-right:2px solid var(--fiolet);border-bottom:2px solid var(--fiolet);
  transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq details p{margin-top:16px}
.faq summary:focus-visible{outline:2px solid var(--fiolet);outline-offset:4px;border-radius:6px}

/* ---------- stopka ---------- */
.stopka{background:var(--sliwka);color:#B9AEC2;padding:64px 0 36px;font-size:.95rem}
.stopka .kolumny{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px}
.stopka .logo{color:#fff}
.stopka h5{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;margin:0 0 16px;font-weight:700}
.stopka ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.stopka a{color:#B9AEC2;text-decoration:none}
.stopka a:hover{color:#fff;text-decoration:underline}
.stopka .dol{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.84rem;color:#9C8FA8;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap}

/* ---------- pasek mobilny ---------- */
.pasek-mobilny{display:none}

/* ---------- animacja wejścia ---------- */
.wjezdza{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s ease}
.wjezdza.widoczne{opacity:1;transform:none}

/* ---------- responsywność ---------- */
@media (max-width:900px){
  .karty--2,.karty--3{grid-template-columns:1fr}
  .kroki{grid-template-columns:1fr;gap:30px}
  .kroki::before{display:none}
  .stopka .kolumny{grid-template-columns:1fr;gap:32px}
  .sekcja{padding:64px 0}
  .gora .wrap{padding-top:12px;padding-bottom:12px;flex-direction:column;gap:10px}
  .menu{gap:14px;font-size:.88rem;justify-content:center;width:100%}
  body{padding-bottom:76px}
  .pasek-mobilny{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
    border-top:1px solid var(--linia);padding:12px 16px;
  }
  .pasek-mobilny .btn{width:100%;text-align:center;padding:14px 20px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wjezdza{opacity:1;transform:none;transition:none}
  .btn:hover,.karta:hover{transform:none}
}

/* ---------- slider z opiniami ---------- */
.op{max-width:var(--kontener);margin:0 auto}
.op__tor{display:flex;gap:24px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 10px;
  scrollbar-width:none;-ms-overflow-style:none}
.op__tor::-webkit-scrollbar{display:none}
.op__tor:focus-visible{outline:2px solid var(--fiolet);outline-offset:4px;border-radius:18px}
.op__karta{flex:0 0 calc(50% - 12px);scroll-snap-align:start;margin:0;
  padding:32px 34px;background:var(--biel);border:1px solid var(--linia);
  border-radius:var(--radius);display:flex;flex-direction:column;box-shadow:var(--cien)}
.op__karta blockquote{margin:0;flex:1;font-size:1.02rem;line-height:1.7}
.op__karta figcaption{margin-top:24px;padding-top:20px;border-top:1px solid var(--linia);
  display:flex;flex-direction:column;gap:2px}
.op__kto{font-weight:700;color:var(--naglowek);font-size:1rem}
.op__rola{font-size:.9rem;color:var(--szary)}
.op__nawigacja{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:26px}
.op__strzalka{width:46px;height:46px;flex:0 0 46px;border:1px solid var(--linia);
  background:var(--biel);color:var(--fiolet);border-radius:50%;font-size:24px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,color .15s}
.op__strzalka:hover{background:var(--fiolet);border-color:var(--fiolet);color:#fff}
.op__strzalka:focus-visible{outline:2px solid var(--fiolet);outline-offset:3px}
.op__strzalka[disabled]{opacity:.35;cursor:default}
.op__strzalka[disabled]:hover{background:var(--biel);border-color:var(--linia);color:var(--fiolet)}
.op__kropki{display:flex;gap:9px;align-items:center}
.op__kropka{width:9px;height:9px;padding:0;border:0;border-radius:50%;
  background:var(--linia);cursor:pointer;transition:background .15s,width .15s}
.op__kropka[aria-current="true"]{background:var(--fiolet);width:28px;border-radius:5px}
.op__kropka:focus-visible{outline:2px solid var(--fiolet);outline-offset:3px}
@media (max-width:900px){
  .op__karta{flex:0 0 100%;padding:26px 24px}
  .op__tor{gap:16px}
}
@media (prefers-reduced-motion:reduce){ .op__tor{scroll-behavior:auto} }

/* ============================================
   Dopiski: ścieżki zakupowe, źródła, RODO
   ============================================ */
.pod-przyciskiem{font-size:.86rem;color:var(--szary);line-height:1.5;
  margin:12px 0 0;text-align:center}
.pod-przyciskiem a{color:var(--fiolet);text-decoration:underline}
.zrodlo{font-size:.84rem;color:var(--szary);text-align:center;margin-top:14px}
.zrodlo a{color:var(--szary);text-decoration:underline}
.klauzula{font-size:.82rem;color:var(--szary);line-height:1.55;margin:14px 0 0}
.klauzula a{color:var(--fiolet);text-decoration:underline}

/* Podstrona: polityka prywatności */
.tekstowa{max-width:44em}
.tekstowa h2{margin:44px 0 14px;font-size:1.35rem}
.tekstowa h2:first-of-type{margin-top:26px}
.tekstowa p{margin:0 0 14px}
.tekstowa ul{margin:0 0 14px;padding-left:22px}
.tekstowa li{margin-bottom:8px}
.tekstowa .data{font-size:.9rem;color:var(--szary)}
.karta-haslo{font-weight:700;color:var(--naglowek);margin:0 0 10px}
.karta .rosnie .karta-haslo+p{margin-top:0}

/* Kafelki gotowych warsztatów B2B */
.produkty{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.produkt{background:var(--biel);border:1px solid var(--linia);border-radius:var(--radius);
  padding:28px;box-shadow:var(--cien);display:flex;flex-direction:column}
.produkt h3{font-size:1.15rem;margin:0 0 6px}
.produkt .dla-kogo{font-size:.86rem;color:var(--fiolet);font-weight:500;margin:0 0 14px}
.produkt p{margin:0 0 12px;font-size:.97rem}
.produkt ul{margin:0;padding-left:20px;font-size:.95rem}
.produkt li{margin-bottom:6px}
.produkty-dopisek{margin-top:26px;font-size:.98rem;color:var(--tekst)}
@media (max-width:900px){ .produkty{grid-template-columns:1fr} }