/* ======================================================================
   ZMIENNE KOLORÓW I DARK MODE
   ====================================================================== */
:root{
  --bs-body-bg: #f8f9fa;
  --bs-body-color: #212529;
  --bs-body-bg-secondary: #e2e2e2;
  --primary: #0d6efd;
  --accent: #0a54c4;
  --icon-invert-white: 0;
  --glass-piece: rgba(0,0,0,0.07);
  --glass-border: rgba(0,0,0,0.20);
  --anim-ms: 650ms;
  --stat-sep: rgba(0,0,0,0.06);
  --primary-rgb: 13,110,253;
  --accent-rgb: 10,84,196;
}

[data-theme="dark"]{
  --bs-body-bg: #212529;
  --bs-body-color: #f8f9fa;
  --bs-body-bg-secondary: #394147;
  --icon-invert-white: 1;
  --glass-piece: rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.20);
  --stat-sep: rgba(255,255,255,0.04);
}

/* ikonki inwersji (pozostawione, użyte w niektórych SVG/img) */
.invert-icon{ filter: invert(1); }
.invert-invert-icon{ filter: invert(0); }
html[data-theme="dark"] .invert-icon{ filter: invert(0); }
html[data-theme="dark"] .invert-invert-icon{ filter: invert(1); }

/* ======================================================================
   BAZA: body, typografia, drobne utilsy
   ====================================================================== */
body{
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.text-muted-custom{ opacity: 0.8; }

.section-title{ margin-bottom: 1.5rem; }

.navbar-custom {
  position: fixed;
  top: 1rem;                     
  left: 50%;                    
  transform: translateX(-50%);   
  z-index: 1030;
  width: calc(100% - 2rem);      
  max-width: 1320px;            
  padding-inline: 1rem;
  padding-block: 0.5rem;
  border-radius: 2rem;
  margin: 0;   
  box-shadow: 0 .25rem 1rem rgba(0,0,0,0.2);                 
}
@media (min-width: 1320px) {
  .navbar-custom {
    width: 1320px;              
  }
}

/* Usuń domyślny odstęp między navbar a pierwszym elementem strony */
.navbar-custom + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.navbar-brand { color: var(--bs-body-color); }
.nav-link { color: var(--bs-body-color); }

/* Przyciski */
.btn-primary{
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover{
  background-color: var(--accent);
  border-color: var(--accent);
}

/* Formularze, accordion */
#contact-faq .row{ --bs-gutter-x: 1.5rem; }
.accordion-button{ min-height: 3.75rem; padding-top: 1rem; padding-bottom: 1rem; }
#wiadomosc{ min-height: 3.75rem; resize: vertical; }
#contact-faq .accordion-button.collapsed{ background-color: var(--bs-body-bg-secondary); }

/* ======================================================================
   KOMPONENTY: glass, card tweaks, crystal background
   ====================================================================== */
.glass{
  background: rgba(255,255,255,0.75) !important;
  border: 1px solid rgba(0,0,0,0.2) !important;
  backdrop-filter: blur(8px);
}
html[data-theme="dark"] .glass{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}

.crystal-background {
  position: relative;
  background-image: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: 0;
  overflow: hidden;
}

.crystal-background::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.0);
  z-index: -1;
  backdrop-filter: blur(8px);
  pointer-events: none; /* ✅ zostaw tylko tutaj */
}

.crystal-background .container {
  position: relative;
  z-index: 1;
}


/* drobne hover utility */
.hover-scale, .hover-scale-shadow{
  transition: transform .3s ease, box-shadow .3s ease;
}
.hover-scale:hover, .hover-scale-shadow:hover{ transform: scale(1.05); }
.hover-scale-shadow:hover{ box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,0.3); }

html[data-theme="dark"] #o-nas.crystal-background {
  filter: invert(100%) hue-rotate(180deg);
}

html[data-theme="dark"] #o-nas.crystal-background img {
  filter: invert(100%) hue-rotate(180deg);
}


/* ======================================================================
   STATYSTYKI / WYRÓŻNIONY KAFELEK
   ====================================================================== */
.stat-highlight{
  background: linear-gradient(135deg,
    rgba(var(--primary-rgb), 0.14),
    rgba(var(--accent-rgb), 0.14)
  );
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 8px 28px rgba(var(--primary-rgb), 0.06);
  min-height: 10px;
  display: flex;
  align-items: center;
  transition: transform 320ms ease, box-shadow 320ms ease;
}
html:not([data-theme="dark"]) .stat-highlight{
  /* jaśniejszy, wyblakły wariant w trybie light */
  background: linear-gradient(135deg,
    rgba(var(--primary-rgb), 0.10),
    rgba(var(--accent-rgb), 0.06)
  );
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.035);
  border-color: rgba(0,0,0,0.03);
}
@media (max-width:767px){
  .stat-highlight{
    background: linear-gradient(135deg,
      rgba(var(--primary-rgb),0.20),
      rgba(var(--accent-rgb),0.16)
    );
  }
}
.stat-highlight:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(var(--primary-rgb),0.09);
}

/* counters */
.counter{
  font-variant-numeric: tabular-nums;
  min-width: 3.2rem;
  display:inline-block;
}
.counter.finish{ animation: pop 350ms ease-out both; }

/* dostosowanie glass tylko w sekcji statystyk */
#statystyki .card.glass{
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid rgba(0,0,0,0.06);
}
html[data-theme="dark"] #statystyki .card.glass{
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06);
}

#statystyki a.text-muted-custom{
  color: rgba(3,12,34,0.55);
  text-decoration: none;
  border-bottom: none;
  opacity: 0.7;
  transition: opacity .18s ease, color .18s ease, text-decoration .18s;
}
html[data-theme="dark"] #statystyki a.text-muted-custom{
  color: rgba(255,255,255,0.55);
  opacity: 0.68;
}
#statystyki a.text-muted-custom:hover{
  opacity: 1;
  text-decoration: underline;
  color: var(--primary);
}


/* separator SVG */
#statystyki > .w-100 svg path{ transition: fill 300ms ease; fill: var(--stat-sep); }
/* ---- shorts: zmienione z 16:9 na 9:16 + mniejszy max-width ---- */
.video-screen { width:100%; max-width: 360px; display:block; perspective:1200px; }

/* główna ramka - SHORTS (pionowy ekran) */
.video-frame {
  width:100%;
  aspect-ratio: 9 / 16;            /* SHORTS: pionowy format */
  border-radius: 18px;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.9,.25,1), box-shadow .35s;
  box-shadow: 0 18px 40px rgba(6,18,47,0.28), inset 0 1px 0 rgba(255,255,255,0.03);
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.06));
  /* zmieniłem kierunek tilt: video odchyla się W STRONĘ NAPISU (w prawo) */
  transform: rotateX(3deg) rotateY(6deg) translateZ(0);
  position: relative;
  border:1px solid rgba(255,255,255,0.03);
  max-width: 360px;                /* zabezpieczenie, żeby nie rosło zbyt szeroko */
}

/* responsive iframe inside */
.responsive-iframe { width:100%; height:100%; border:0; display:block; }

/* hover/active state - flatten and brighten (bez zmiany) */
.video-frame:hover, .video-frame:focus {
  transform: rotateX(0deg) rotateY(0deg) translateZ(6px);
  box-shadow: 0 28px 60px rgba(6,18,47,0.32);
  outline: none;
}

/* tilt quick transition class */
.video-frame.tilt { transition: transform .06s linear; }

/* POWIĘKSZONE NAPISY (wyraźniej) */
.big-title { font-size: 1.6rem; letter-spacing: .2px; }
@media (min-width:992px) { .big-title { font-size: 1.9rem; } }

.lead-cta { font-size: 1.05rem; font-weight:600; color: rgba(3,12,34,0.9); }

/* dlaczego warto - większe, kontrastowe punkty */
.why-follow li {
  margin-bottom: .45rem;
  font-weight:700;
  color: var(--text-dark, #072a5a);
  font-size: .98rem;
  display:flex;
  align-items:center;
}
.why-follow i { color: var(--primary); font-size:1.05rem; }

/* social links - większe i czytelne */
.social-links a { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:8px; background: rgba(13,110,253,0.06); border:1px solid rgba(13,110,253,0.09); text-decoration:none; color:var(--primary); }
.social-links a:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(6,18,47,0.08); }

/* drobne: cta-note bardziej widoczny */
.cta-note { font-weight:600; color: rgba(6,18,47,0.6); }

/* ======================================================================
   CRACK-CARD (interakcja "rozbijania" kafelków) — pełna obsługa JS
   ====================================================================== */
.crack-card{ position: relative; overflow: hidden; cursor: pointer; }
.crack-face{
  position: relative; z-index: 2;
  transition: transform .35s ease, opacity .35s ease;
  will-change: opacity, transform;
}
.crack-card.revealed .crack-face{ opacity: 0; pointer-events: none; }

.reveal-text{
  position: absolute; inset: 0; z-index: 1;
  display:flex; align-items:center; justify-content:center;
  padding: 1rem 1.25rem;
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease .55s, transform .35s ease .55s;
  font-size:.95rem; font-weight:400; line-height:1.35;
}
.crack-card.revealed .reveal-text{ opacity: 1; transform: translateY(0); }

/* overlay shards */
.crack-overlay{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.crack-overlay .shard{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), var(--glass-piece));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  opacity:1; will-change: transform, opacity;
}
html[data-theme="dark"] .crack-overlay .shard{
  background: linear-gradient(180deg, var(--glass-piece), rgba(0,0,0,0.02));
}

/* 6 kawałków (clip-path) */
.crack-overlay .s1{ clip-path: polygon(0 0, 50% 0, 40% 40%, 0 50%); }
.crack-overlay .s2{ clip-path: polygon(50% 0, 100% 0, 100% 40%, 60% 35%); }
.crack-overlay .s3{ clip-path: polygon(0 50%, 40% 40%, 55% 60%, 0 100%); }
.crack-overlay .s4{ clip-path: polygon(40% 40%, 100% 40%, 100% 70%, 55% 60%); }
.crack-overlay .s5{ clip-path: polygon(0 100%, 55% 60%, 45% 100%); }
.crack-overlay .s6{ clip-path: polygon(45% 100%, 55% 60%, 100% 70%, 100% 100%); }

/* rozbijanie / składanie (klasy dodawane przez JS) */
.crack-card.shattering .crack-face{ opacity: 0; transform: scale(.95); }
.crack-overlay.go .s1{ animation: fly1 var(--anim-ms) ease-out forwards; }
.crack-overlay.go .s2{ animation: fly2 var(--anim-ms) ease-out forwards; }
.crack-overlay.go .s3{ animation: fly3 var(--anim-ms) ease-out forwards; }
.crack-overlay.go .s4{ animation: fly4 var(--anim-ms) ease-out forwards; }
.crack-overlay.go .s5{ animation: fly5 var(--anim-ms) ease-out forwards; }
.crack-overlay.go .s6{ animation: fly6 var(--anim-ms) ease-out forwards; }

.crack-overlay.rev .s1{ transform: translate(-60px,-60px) rotate(-12deg); opacity:0; }
.crack-overlay.rev .s2{ transform: translate(70px,-50px) rotate(10deg); opacity:0; }
.crack-overlay.rev .s3{ transform: translate(-70px,45px) rotate(14deg); opacity:0; }
.crack-overlay.rev .s4{ transform: translate(65px,40px) rotate(-10deg); opacity:0; }
.crack-overlay.rev .s5{ transform: translate(-30px,75px) rotate(8deg); opacity:0; }
.crack-overlay.rev .s6{ transform: translate(40px,80px) rotate(-6deg); opacity:0; }

.crack-card.reassembling .reveal-text{
  opacity:0; transform: translateY(6px); transition-delay:0s;
}
.crack-overlay.return .s1{ animation: fly1rev var(--anim-ms) ease-out forwards; }
.crack-overlay.return .s2{ animation: fly2rev var(--anim-ms) ease-out forwards; }
.crack-overlay.return .s3{ animation: fly3rev var(--anim-ms) ease-out forwards; }
.crack-overlay.return .s4{ animation: fly4rev var(--anim-ms) ease-out forwards; }
.crack-overlay.return .s5{ animation: fly5rev var(--anim-ms) ease-out forwards; }
.crack-overlay.return .s6{ animation: fly6rev var(--anim-ms) ease-out forwards; }

/* fly keyframes */
@keyframes fly1 { to { transform: translate(-60px,-60px) rotate(-12deg); opacity:0; } }
@keyframes fly2 { to { transform: translate(70px,-50px) rotate(10deg); opacity:0; } }
@keyframes fly3 { to { transform: translate(-70px,45px) rotate(14deg); opacity:0; } }
@keyframes fly4 { to { transform: translate(65px,40px) rotate(-10deg); opacity:0; } }
@keyframes fly5 { to { transform: translate(-30px,75px) rotate(8deg); opacity:0; } }
@keyframes fly6 { to { transform: translate(40px,80px) rotate(-6deg); opacity:0; } }

@keyframes fly1rev { from{ transform: translate(-60px,-60px) rotate(-12deg); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes fly2rev { from{ transform: translate(70px,-50px) rotate(10deg); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes fly3rev { from{ transform: translate(-70px,45px) rotate(14deg); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes fly4rev { from{ transform: translate(65px,40px) rotate(-10deg); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes fly5rev { from{ transform: translate(-30px,75px) rotate(8deg); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes fly6rev { from{ transform: translate(40px,80px) rotate(-6deg); opacity:0; } to{ transform:none; opacity:1; } }

/* ======================================================================
   ANIMACJE I KLASY INICJALNE (on-scroll helpers)
   ====================================================================== */
.zoom-in-fade, .zoom-out-fade, .zoom-in-overshoot, .pop, .text-pop {
  opacity: 0;
  transform-origin: center center;
}

/* fadeIn (używane wiele razy) */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 1s ease-in forwards; }

/* przycisk pulsujący w hero */
@keyframes bnthop { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.05); } }
.bnt-hop { animation: bnthop 1.5s ease-in-out infinite; animation-delay:1s; }

/* zoom / pop animations */
@keyframes zoomInFade { from{ opacity:0; transform: scale(.8); } to{ opacity:1; transform: scale(1); } }
.zoom-in-fade.animatable{ animation: zoomInFade .5s ease-out both; }

@keyframes zoomOutFade { from{ opacity:1; transform: scale(1); } to{ opacity:0; transform: scale(1.2); } }
.zoom-out-fade.animatable{ animation: zoomOutFade .5s ease-in both; }

@keyframes zoomInOvershoot {
  0%{ opacity:0; transform: scale(.8);} 80%{ opacity:1; transform: scale(1.05);} 100%{ opacity:1; transform: scale(1); }
}
.zoom-in-overshoot.animatable{ animation: zoomInOvershoot .6s cubic-bezier(.2,1.2,.8,1) both; }

@keyframes pop { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.1);} }
.pop.animatable{ animation: pop .4s ease-in-out both; }

@keyframes textPop { from{ opacity:0; transform: translateY(10px) scale(.95);} to{ opacity:1; transform: translateY(0) scale(1);} }
.text-pop.animatable{ display:inline-block; animation: textPop .4s ease-out both; }

/* polygon expand (separators) */
@keyframes expandLeftOvershoot {
  0%{ opacity:0; transform: scaleX(0);} 80%{ opacity:1; transform: scaleX(1.05);} 100%{ opacity:1; transform: scaleX(1); }
}
@keyframes expandRightOvershoot {
  0%{ opacity:0; transform: scaleX(0);} 80%{ opacity:1; transform: scaleX(1.05);} 100%{ opacity:1; transform: scaleX(1); }
}
.polygon-expand-left, .polygon-expand-right{ transform-box: fill-box; opacity:0; transform: scaleX(0); }
.polygon-expand-left.animatable{ transform-origin: left center; animation: expandLeftOvershoot .6s cubic-bezier(.2,1.2,.8,1) both; }
.polygon-expand-right.animatable{ transform-origin: right center; animation: expandRightOvershoot .6s cubic-bezier(.2,1.2,.8,1) both; }

@keyframes speechPop {
  from { transform: translateX(-12px) translateY(8px) scale(.98); opacity:0; }
  to { transform: translateX(0) translateY(0) scale(1); opacity:1; }
}

/* ======================================================================
   DROBNE: theme toggle, responsive tweaks, testimonial
   ====================================================================== */
#theme-toggle{ margin-left: 1rem; }

@media (max-width: 991px) {
  #theme-toggle { margin-left: auto !important; position: relative; }
  .navbar-toggler:focus:not(:focus-visible){ outline:none; box-shadow:none; }
  .navbar-nav{ margin-top: 40px; }
  .nav-item{ text-align: right; }
  .video-screen { max-width: 260px; }
  .video-frame { border-radius: 14px; max-width: 260px; }
  .big-title { font-size:1.25rem; }
  .lead-cta { font-size: .98rem; }
}

/* testimonial tweaks */
#testimonial .card.blockquote{ background: transparent; }
#testimonial blockquote{ font-size: 1.05rem; color: var(--bs-body-color); }
#testimonial .img-fluid{ border-radius: 14px; }
#testimonial a{ text-decoration: none; }
#testimonial a:hover{ text-decoration: underline; }

@media (max-width:767px){
  #testimonial .img-fluid{ width:160px; height:160px; }
  #testimonial .display-6{ font-size: 1.5rem; }
}

/* accessibility focus */
.video-frame:focus { box-shadow: 0 24px 48px rgba(6,18,47,0.26); }

/* ======================================================================
   USUNIĘTO (świadomie): .bg-image, .return-button + pulse (nie były używane
   w dostarczonym HTML). Jeśli chcesz, mogę je przywrócić.
   ====================================================================== */