/* Anovia — animowane interakcje chatu / voice player */
/* ukryte dymki nie zajmują miejsca (kluczowe: okno narasta od góry, nie skacze na koniec) */
.anv-seq-item{opacity:0;max-height:0;overflow:hidden;transform:translateY(8px);margin-top:0;margin-bottom:0;transition:opacity .4s ease, transform .4s ease, max-height .5s ease, margin-bottom .4s ease}
.anv-seq-item.anv-show{opacity:1;max-height:240px;transform:none;margin-bottom:10px}

.anv-typing{display:inline-flex;gap:5px;align-items:center;padding:12px 16px;border-radius:14px;background:#0A007E;width:fit-content;margin-bottom:10px;border-bottom-left-radius:4px}
.anv-typing.u{background:#F4F5FF;margin-left:auto;border-bottom-left-radius:14px;border-bottom-right-radius:4px}
.anv-typing span{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.5;animation:anvBlink 1s infinite}
.anv-typing.u span{background:#6A5BFF}
.anv-typing span:nth-child(2){animation-delay:.2s}
.anv-typing span:nth-child(3){animation-delay:.4s}
@keyframes anvBlink{0%,60%,100%{opacity:.3}30%{opacity:1}}

.anv-controls{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.anv-play{display:inline-flex;align-items:center;gap:7px;background:#6A5BFF;color:#fff;border:0;border-radius:999px;padding:8px 15px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;transition:.18s}
.anv-play:hover{background:#5848e6;transform:translateY(-1px)}
.anv-play.playing{background:#12B886}
.anv-hint{font-size:12px;color:#8A8BA0}

.anv-speaking{box-shadow:0 0 0 3px rgba(106,91,255,.45)!important;transition:box-shadow .2s}
.chatcard .anv-controls{margin-top:8px;margin-bottom:2px}
.demo .anv-controls{margin-bottom:12px}

/* okno rozmowy o stałej wysokości — dialog przewija się w trakcie odtwarzania */
.anv-scroll{ max-height:320px; overflow:hidden; scroll-behavior:smooth; }
.demo .anv-scroll{ max-height:320px; }
.chatcard .anv-scroll{ max-height:300px; }
@media(max-width:880px){ .anv-scroll, .demo .anv-scroll, .chatcard .anv-scroll{ max-height:360px; } }

/* === gradientowy nagłówek (gra kolorów w hero) === */
.grad{
  background:linear-gradient(100deg,#9E92FF 0%,#6A5BFF 42%,#3FE0AD 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  background-size:200% auto;animation:anvGrad 7s ease infinite;
}
@keyframes anvGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* żywy „oddech" poświaty w hero */
.hero:after{animation:anvFloat 9s ease-in-out infinite}
@keyframes anvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(28px)}}

/* === komponent chatu (dostępny też na stronach bez własnego CSS, np. index) === */
.chatcard{background:#fff;border-radius:20px;box-shadow:0 30px 70px rgba(5,3,40,.45);padding:20px;color:#14122B}
.chatcard .ch-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid #E4E6F5;margin-bottom:14px}
.chatcard .ch-head .dot{width:10px;height:10px;border-radius:50%;background:#12B886;box-shadow:0 0 0 4px #12b88622}
.chatcard .ch-head b{font-size:14px}.chatcard .ch-head span{font-size:12px;color:#5A5B6E}
.chatcard .bub{max-width:85%;padding:11px 14px;border-radius:14px;font-size:14.5px;margin-bottom:10px}
.chatcard .bub.a{background:#0A007E;color:#fff;border-bottom-left-radius:4px}
.chatcard .bub.u{background:#F4F5FF;color:#14122B;margin-left:auto;border-bottom-right-radius:4px}
.chatcard .bub small{display:block;font-size:10.5px;opacity:.7;margin-bottom:3px;font-weight:600}
.chatcard .ch-result{margin-top:6px;background:#12B886;color:#fff;font-weight:700;font-size:13px;border-radius:12px;padding:10px 14px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;padding:80px 0 90px}
@media(max-width:880px){ .hero-grid{grid-template-columns:1fr;gap:34px;padding:54px 0 64px} }

/* mikro-interakcje: unoszenie kart pod kursorem */
.card, .demo{ transition:transform .18s ease, box-shadow .18s ease; }
.card:hover, .demo:hover{ transform:translateY(-4px); box-shadow:0 22px 60px rgba(0,0,0,.45) !important; }

/* pulsujący wskaźnik „live" w nagłówku chatu */
.chatcard .ch-head .dot, .dot{ animation:anvPulse 1.8s ease-in-out infinite; }
@keyframes anvPulse{
  0%{ box-shadow:0 0 0 0 rgba(18,184,134,.55) }
  70%{ box-shadow:0 0 0 8px rgba(18,184,134,0) }
  100%{ box-shadow:0 0 0 0 rgba(18,184,134,0) }
}

/* === KARUZELA DEMO === */
.anv-carousel-wrap{ position:relative; }
.anv-carousel{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:6px 11% 20px; scrollbar-width:none; }
.anv-carousel::-webkit-scrollbar{ display:none; }
.anv-carousel > .demo{ flex:0 0 78%; scroll-snap-align:center; opacity:.55; transform:scale(.97); transition:opacity .3s ease, transform .3s ease; }
.anv-carousel > .demo.anv-focus{ opacity:1; transform:none; }
.anv-cbtn{ position:absolute; top:42%; transform:translateY(-50%); z-index:6; width:46px; height:46px; border-radius:50%; border:1px solid #2A265C; background:#15123A; color:#fff; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 28px rgba(0,0,0,.45); transition:.18s; }
.anv-cbtn:hover{ background:#221E54; transform:translateY(-50%) scale(1.06); }
.anv-cbtn.prev{ left:1%; } .anv-cbtn.next{ right:1%; }
.anv-dots{ display:flex; gap:8px; justify-content:center; margin-top:4px; }
.anv-dot{ width:8px; height:8px; border-radius:50%; background:#2A265C; border:0; cursor:pointer; transition:.2s; padding:0; }
.anv-dot.on{ background:#6A5BFF; width:24px; border-radius:999px; }
@media(max-width:880px){ .anv-carousel > .demo{ flex:0 0 86%; } .anv-carousel{ padding:6px 7% 20px; } .anv-cbtn{ display:none; } }

/* === MODAL „pobierz one-pager" === */
.anv-modal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(6,4,30,.62); backdrop-filter:blur(5px); }
.anv-modal.open{ display:flex; }
.anv-modal .box{ position:relative; background:#15123A; border:1px solid #2A265C; border-radius:18px; max-width:470px; width:100%; padding:30px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.anv-modal h3{ color:#fff; font-size:21px; margin-bottom:6px; }
.anv-modal .msub{ color:#A7A8CC; font-size:14px; margin-bottom:16px; }
.anv-modal .x{ position:absolute; top:14px; right:16px; background:none; border:0; color:#A7A8CC; font-size:24px; cursor:pointer; line-height:1; }
.anv-modal label{ display:block; font-size:13px; font-weight:600; color:#ECEDFA; margin:11px 0 5px; }
.anv-modal input{ width:100%; padding:11px 13px; border:1px solid #2A265C; border-radius:10px; background:#0E0B2E; color:#ECEDFA; font-size:15px; font-family:inherit; }
.anv-modal input:focus{ outline:none; border-color:#6A5BFF; box-shadow:0 0 0 3px rgba(106,91,255,.18); }
.anv-modal .row2{ display:flex; gap:12px; } .anv-modal .row2>div{ flex:1; }
.anv-modal .go{ margin-top:18px; width:100%; background:#6A5BFF; color:#fff; border:0; border-radius:999px; padding:13px; font-weight:700; font-size:15px; cursor:pointer; transition:.18s; }
.anv-modal .go:hover{ background:#5848e6; }
.anv-modal .mst{ margin-top:11px; font-size:13px; text-align:center; min-height:16px; }
.anv-modal .mconsent{ margin-top:12px; font-size:11.5px; color:#9A9BC2; text-align:center; }