/* ═══════════════ ZORNA · Asystent AI, style podstrony ═══════════════ */
/* Doklada sie do /css/style.css, nie nadpisuje globalnych regul. */

.asy-main{display:block}

/* ── hero ── */
.asy-hero{padding:168px 48px 100px;max-width:1440px;margin:0 auto;display:flex;justify-content:center}
.asy-hero-inner{
  display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;max-width:900px;
}
.asy-badge{display:inline-flex;align-items:center;gap:9px;font:400 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.asy-h1{font:300 clamp(32px,4.6vw,58px)/1.16 var(--font);letter-spacing:-.015em;color:var(--ink)}
/* Ukrycie startowe wejscia hero tylko gdy JS realnie dziala (has-js).
   Zapobiega blyskowi widocznej tresci przed uruchomieniem asystent.js na wolnym
   laczu (CDN GSAP/Lenis potrafi ladowac sie zauwazalnie dlugo). GSAP nadpisuje
   te opacity inline po zbudowaniu timeline'u wejscia, wiec regula gasnie sama.
   Reduced motion i brak JS: bez prefiksu html.has-js, wiec tresc zawsze widoczna. */
html.has-js .asy-hero-inner [data-intro]{opacity:0}
html.has-js .asy-h1{opacity:0}
.asy-h1 .word,.asy-h2 .word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.10em;margin-bottom:-.10em}
.asy-h1 .word>span,.asy-h2 .word>span{display:inline-block}
.asy-sub{font:300 clamp(15px,1.4vw,18px)/1.6 var(--font);color:#b7bcc1;max-width:56ch}
.asy-cta{
  font:400 15px var(--font);letter-spacing:.04em;color:#050607;background:var(--ink);
  padding:16px 38px;border-radius:999px;display:inline-block;
  transition:translate .3s var(--ease),box-shadow .3s;
}
.asy-cta:hover{translate:0 -3px;box-shadow:0 14px 40px -12px rgba(255,255,255,.25)}

/* ── sekcje ogólnie ── */
.asy-section{padding:96px 48px;max-width:1440px;margin:0 auto}
.asy-h2{font:300 clamp(28px,3.4vw,44px)/1.12 var(--font);letter-spacing:-.015em;color:var(--ink)}

/* Globalne #faq ma węższy kontener (1100px) niż reszta tej podstrony
   (1440px). Wyrównujemy szerokość, żeby FAQ nie odstawało od innych sekcji. */
#faq.asy-faq-section{padding:96px 48px;max-width:1440px;margin:0 auto}

/* ── podgląd czatu ──
   Style komponentu czatu (.chat-demo-wrap, .chat-window, .chat-bubble itd.)
   przeniesione do /css/style.css — okno czatu jest wspolne z teaserem
   Asystenta na stronie glownej. Tutaj zostaje tylko to, co specyficzne
   dla tej podstrony. */

/* ── jak to działa ── */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* ── co dostajesz ── */
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 34px}
.feat-item{display:flex;align-items:flex-start;gap:14px;padding:8px 0;font:300 15px/1.6 var(--font);color:var(--mut)}
.feat-dot{width:7px;height:7px;border-radius:50%;background:var(--ink);flex:none;margin-top:8px}

/* ── cennik: dopiski ── */
.asy-price-period{font:300 15px var(--font);color:var(--dim);margin-left:3px}
/* Stale 3 kolumny na desktopie (auto-fit z minmax ukladalo 6 kart jako 5+1
   na szerokich ekranach) — 2 na tablecie, 1 na telefonie, patrz media queries. */
.asy-terms{margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.asy-term{
  display:flex;align-items:flex-start;gap:12px;padding:20px 22px;
  border:1px solid var(--line2);border-radius:14px;font:300 14px/1.55 var(--font);color:var(--mut);
}
.asy-term .feat-dot{margin-top:7px}
.asy-terms-note{margin-top:26px;font:300 14px/1.6 var(--font);color:var(--faint);max-width:70ch}

/* ── kontakt ── */
.asy-contact{padding:150px 48px;max-width:1440px;margin:0 auto;display:flex;justify-content:center;text-align:center}
.asy-contact-inner{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:640px}
.asy-contact-h2{margin-top:2px}
.asy-contact-inner>p{font:300 16px/1.6 var(--font);color:var(--mut)}

/* ── responsywność ── */
@media (max-width:900px){
  .asy-hero{padding:120px 22px 64px}
  .asy-section{padding:64px 22px}
  #faq.asy-faq-section{padding:64px 22px}
  .steps-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr}
  .asy-terms{grid-template-columns:repeat(2,1fr)}
  .asy-contact{padding:110px 22px}
}
@media (max-width:560px){
  .asy-terms{grid-template-columns:1fr}
}