/* telekonfa.pl - każdy głos ma swój kolor (Anna róż, Marek słonecznik, Ola mięta) na kobaltowym tle.
   Kroje systemowe i animacja w czystym CSS: CSP strony nie wpuszcza zewnętrznych fontów ani skryptów. */
:root {
  --tlo: #f6f7fb;
  --karta: #ffffff;
  --tekst: #0e1033;
  --szary: #4a4f73;
  --linia: #dfe2f0;
  --kobalt: #2b44ff;
  --kobalt-tekst: #ffffff;
  --noc: #0e1033;
  --roz: #ff5c8a;
  --slonce: #ffc53d;
  --mieta: #18c29c;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tlo: #0b0d2a;
    --karta: #151845;
    --tekst: #eef0ff;
    --szary: #b4b8dc;
    --linia: #2a2e66;
    --noc: #05061a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 1.0625rem/1.55 var(--sans); }
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.1; }
p { margin: 0 0 1rem; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--slonce); outline-offset: 3px; border-radius: 6px; }

.gora, main, .stopka { max-width: 74rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 48rem) { .gora, main, .stopka { padding-inline: 2rem; } }

/* logo: dymek rozmowy z trzema liniami notatki w kolorach głosów */
.gora { display: flex; align-items: center; justify-content: space-between; padding-block: 1.1rem; }
.logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-weight: 800; font-size: 1.45rem; letter-spacing: -0.035em; }
.logo svg { width: 2.3rem; height: 2.3rem; }
.dymek { fill: var(--kobalt); }
.logo path[class^="l"] { fill: none; stroke-width: 5.5; stroke-linecap: round; }
.l1 { stroke: var(--roz); }
.l2 { stroke: var(--slonce); }
.l3 { stroke: var(--mieta); }
.beta { font-size: .85rem; font-weight: 700; padding: .2rem .7rem; border-radius: 999px; border: 2px solid var(--kobalt); color: var(--tekst); }

/* hero: kobaltowy panel, po prawej scena */
.hero {
  background: var(--kobalt);
  color: var(--kobalt-tekst);
  border-radius: 28px;
  padding: clamp(1.75rem, 5vw, 3.5rem);
  display: grid;
  gap: 2rem;
  align-items: center;
  overflow: hidden;
}
@media (min-width: 60rem) { .hero { grid-template-columns: 1fr 1.1fr; gap: 3rem; } }
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); font-weight: 850; margin: 0 0 1.1rem; letter-spacing: -0.04em; text-wrap: balance; }
.lead { font-size: clamp(1.15rem, 2.3vw, 1.4rem); line-height: 1.45; margin-bottom: 1.1rem; max-width: 32rem; }
.cta { margin: 0 0 1rem; }
.btn-wejdz { display: inline-flex; align-items: center; min-height: 54px; padding: .75rem 1.6rem; border-radius: 999px; background: #ffffff; color: var(--kobalt); font-weight: 800; font-size: 1.1rem; text-decoration: none; box-shadow: 0 10px 24px -12px rgba(5, 6, 26, .6); }
.btn-wejdz:focus-visible { outline-color: #ffffff; }
.wejscie { font-size: .95rem; opacity: .88; max-width: 30rem; margin: 0; }

.scena { margin: 0; }
.ekran {
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--noc);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(5, 6, 26, .7);
}
@media (max-width: 40rem) { .ekran { aspect-ratio: 4 / 5; } }  /* cztery dymki rozmowy na wąskim ekranie */
.scena figcaption { font-size: .9rem; opacity: .88; margin-top: .8rem; }

/* trzy kadry na jednej osi 12 s (1% = 0,12 s). Każdy element ma własną klatkę kluczową z procentami tej osi, bez
   animation-delay: opóźnienie przesuwa fazę, więc od drugiej pętli element resetowałby się w środku swojego kadru */
.kadr { position: absolute; inset: 0; padding: 7% 7%; display: flex; flex-direction: column; justify-content: center; }
.k-wejscie { animation: kadr1 12s infinite both; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6% 8%; }
.k-rozmowa { animation: kadr2 12s infinite both; gap: .7rem; }
.k-notatki { animation: kadr3 12s infinite both; flex-direction: row; align-items: center; gap: 4%; }
@keyframes kadr1 { 0% { opacity: 0 } 2%, 28% { opacity: 1 } 30%, 100% { opacity: 0 } }
@keyframes kadr2 { 0%, 30% { opacity: 0 } 32%, 65% { opacity: 1 } 67%, 100% { opacity: 0 } }
@keyframes kadr3 { 0%, 67% { opacity: 0 } 69%, 96% { opacity: 1 } 99%, 100% { opacity: 0 } }

.osoba {
  width: clamp(3.6rem, 13vw, 6.2rem); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 850; font-size: clamp(1.4rem, 4.5vw, 2.4rem); color: var(--noc);
}
.o1 { background: var(--roz); animation: p03 12s infinite; }
.o2 { background: var(--slonce); animation: p07 12s infinite; }
.o3 { background: var(--mieta); animation: p11 12s infinite; }
.podpis { flex-basis: 100%; text-align: center; color: #b4b8dc; font-size: clamp(.85rem, 2vw, 1rem); margin: 0; animation: s15 12s infinite; }
@keyframes p03 { 0%, 3% { opacity: 0; transform: scale(.5) } 5% { opacity: 1; transform: scale(1.12) } 7%, 100% { opacity: 1; transform: scale(1) } }
@keyframes p07 { 0%, 7% { opacity: 0; transform: scale(.5) } 9% { opacity: 1; transform: scale(1.12) } 11%, 100% { opacity: 1; transform: scale(1) } }
@keyframes p11 { 0%, 11% { opacity: 0; transform: scale(.5) } 13% { opacity: 1; transform: scale(1.12) } 15%, 100% { opacity: 1; transform: scale(1) } }
@keyframes s15 { 0%, 15% { opacity: 0; transform: translateY(10px) } 18%, 100% { opacity: 1; transform: none } }
@keyframes w33 { 0%, 33% { opacity: 0; transform: translateY(10px) } 36%, 100% { opacity: 1; transform: none } }
@keyframes w40 { 0%, 40% { opacity: 0; transform: translateY(10px) } 43%, 100% { opacity: 1; transform: none } }
@keyframes w47 { 0%, 47% { opacity: 0; transform: translateY(10px) } 50%, 100% { opacity: 1; transform: none } }
@keyframes w56 { 0%, 56% { opacity: 0; transform: translateY(10px) } 59%, 100% { opacity: 1; transform: none } }
@keyframes j70 { 0%, 70% { opacity: 0; transform: translateY(40%) } 73%, 100% { opacity: 1; transform: none } }
@keyframes j73 { 0%, 73% { opacity: 0; transform: translateY(40%) } 76%, 100% { opacity: 1; transform: none } }
@keyframes j76 { 0%, 76% { opacity: 0; transform: translateY(40%) } 79%, 100% { opacity: 1; transform: none } }

.w {
  margin: 0; max-width: 88%;
  background: #1c1f52; color: #eef0ff;
  padding: .55rem .85rem; border-radius: 14px 14px 14px 4px;
  font-size: clamp(.85rem, 2.1vw, 1.05rem); line-height: 1.35;
}
.w b { display: block; font-size: .8em; margin-bottom: .1rem; }
.w1 { animation: w33 12s infinite; } .w1 b { color: var(--roz); }
.w2 { animation: w40 12s infinite; } .w2 b { color: var(--slonce); }
.w3 { animation: w47 12s infinite; } .w3 b { color: var(--mieta); }
.w4 { animation: w56 12s infinite; align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--kobalt); font-style: italic; }
.w4 b { color: #ffffff; font-style: normal; }

.tel {
  flex: 1; min-width: 0;
  aspect-ratio: 9 / 15;
  background: #ffffff; color: var(--noc);
  border-radius: 16px;
  padding: 20% 10% 8%;
  position: relative;
  font-size: clamp(.68rem, 1.7vw, .95rem); line-height: 1.3; font-weight: 600;
  box-shadow: inset 0 0 0 3px #2a2e66;
}
.tel::before { content: ""; position: absolute; inset: 0 0 auto; height: 12%; border-radius: 16px 16px 0 0; background: var(--kolor); }
.tel b { display: block; font-size: 1.15em; margin-bottom: .35rem; font-weight: 850; }
.tel i { font-style: normal; display: inline-block; margin-top: .3rem; padding: 0 .4rem; border-radius: 4px; background: var(--kolor); color: var(--noc); font-weight: 750; }
.t1 { --kolor: var(--roz); animation: j70 12s infinite; }
.t2 { --kolor: var(--slonce); animation: j73 12s infinite; }
.t3 { --kolor: var(--mieta); animation: j76 12s infinite; }

@media (max-width: 40rem) {  /* telefon: karteczki jedna pod drugą, kolor z boku */
  .k-notatki { flex-direction: column; justify-content: center; gap: 5%; }
  .tel { flex: none; width: 100%; aspect-ratio: auto; padding: .75rem 1rem .75rem 1.5rem; font-size: .95rem; }
  .tel::before { inset: 0 auto 0 0; width: 8px; height: auto; border-radius: 16px 0 0 16px; }
  .tel b { display: inline; margin-right: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kadr, .kadr * { animation: none !important; }
  .k-wejscie, .k-rozmowa { display: none; }
}

/* trzy fakty: kolor = głos */
.fakty { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 52rem) { .fakty { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.fakty li { padding-left: 1.4rem; position: relative; color: var(--szary); }
.fakty li::before { content: ""; position: absolute; left: 0; top: .45em; width: .7rem; height: .7rem; border-radius: 50%; background: var(--k); }
.fakty li:nth-child(1) { --k: var(--roz); }
.fakty li:nth-child(2) { --k: var(--slonce); }
.fakty li:nth-child(3) { --k: var(--mieta); }
.fakty b { color: var(--tekst); }

/* podaj dalej: słonecznikowy panel, ten sam kolor w obu motywach */
.podaj { margin-top: 3rem; background: var(--slonce); color: #0e1033; border-radius: 28px; padding: clamp(1.75rem, 5vw, 3rem); }
.podaj h2 { font-size: clamp(1.5rem, 3.6vw, 2.3rem); font-weight: 850; margin: 0 0 .8rem; max-width: 40rem; }
.podaj p { max-width: 40rem; }
.przyciski { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.4rem 0 0; }
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: .7rem 1.3rem;
  border-radius: 999px; font-weight: 750; text-decoration: none;
  background: #0e1033; color: #ffffff;
}
.btn.li { background: transparent; color: #0e1033; box-shadow: inset 0 0 0 2px #0e1033; }
.podaj :focus-visible { outline-color: #0e1033; }

/* więcej: rozwijane, dla chętnych */
.wiecej { margin: 2.5rem 0 0; border-top: 1px solid var(--linia); padding-top: 1.5rem; }
.wiecej summary { cursor: pointer; font-weight: 750; list-style: none; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 0; }
.wiecej summary::-webkit-details-marker { display: none; }
.wiecej summary::after { content: ""; width: .55rem; height: .55rem; border-right: 2.5px solid var(--kobalt); border-bottom: 2.5px solid var(--kobalt); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.wiecej[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.wiecej-tresc { max-width: 46rem; color: var(--szary); padding-top: .5rem; }
.wiecej-tresc h3 { color: var(--tekst); font-size: 1.1rem; margin: 1.6rem 0 .5rem; }
.wiecej-tresc b { color: var(--tekst); }
.wiecej-tresc ul { padding-left: 1.15rem; margin: 0 0 1rem; }
.wiecej-tresc li { margin-bottom: .35rem; }

.stopka { padding-block: 2.5rem 3rem; font-size: .9rem; color: var(--szary); }
.stopka p { margin: 0; }