/* Nakładka tylko dla strony głównej. Treści i logika pozostają bez zmian. */
body.homepage-live{background:#050705;color:#f4f7f4}
.homepage-live .site-header{background:#050705;border-bottom:1px solid #ffffff0b;box-shadow:none;min-height:92px;height:auto;padding:18px max(24px,calc((100vw - 1180px)/2));display:flex;align-items:center;gap:25px}
.homepage-live .home-nav nav{display:flex;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:22px;background:transparent;border:0;padding:0}
.homepage-live .menu-toggle{display:none!important}
.homepage-live .home-nav nav a{font-size:13px;color:#bbc2bb;white-space:nowrap}
.homepage-live .home-nav .nav-register{color:#00ff41;border:1px solid #00a62b;background:#07150a;border-radius:9px;padding:10px 20px}
.homepage-live .showcase-hero{display:grid;grid-template-columns:1.06fr 1fr;align-items:center;gap:35px;min-height:574px;max-width:none;margin:0;padding:55px max(40px,calc((100vw - 1180px)/2));background:radial-gradient(ellipse at 78% 70%,#07371b,transparent 53%);overflow:hidden}
.homepage-live .showcase-copy h1{font-size:clamp(36px,3.75vw,54px);font-weight:550;line-height:1.15;letter-spacing:-2px}
.homepage-live em{color:#00ff41;font-style:normal}
.homepage-live .showcase-copy p{font-size:15px;line-height:1.8;color:#a5aea7;max-width:435px}
.homepage-live .hero-particles{display:none}
.homepage-live .showcase-chart{transform:perspective(1000px) rotateY(-8deg);border:5px solid #242b26;border-radius:14px;background:#0f1311;overflow:hidden;box-shadow:0 36px 80px #0008}
.homepage-live .showcase-chart img{width:100%;height:auto;object-fit:contain}
.homepage-live .primary-cta{background:#00ff41;color:#031307;border:1px solid #00ff41;border-radius:5px;padding:16px 23px;font-size:13px;box-shadow:none}
.homepage-live main>section:not(.showcase-hero):not(.final-home-cta){max-width:1180px;margin:0 auto;padding:95px 0}
.homepage-live h2{font-size:40px;line-height:1.22;letter-spacing:-1.5px;font-weight:550}
.homepage-live .home-about,.homepage-live .home-analysis,.homepage-live .home-tools,.homepage-live .home-media{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:75px}
.homepage-live .offer-card,.homepage-live .education-feature,.homepage-live .tool-peek,.homepage-live .home-blog-card{background:#0b130e;border:1px solid #293c2f;border-radius:8px;box-shadow:none}
.homepage-live .offer-featured{background:#102519;border-color:#43794e}
.homepage-live .offer-card strong{color:#f5fff6}
.homepage-live .final-home-cta{background:radial-gradient(ellipse at bottom,#0b391b,transparent 75%);border-top:1px solid #1b2e21;border-bottom:1px solid #1b2e21;padding:78px 24px}
@media(max-width:1250px){.homepage-live main>section:not(.showcase-hero):not(.final-home-cta){margin:0 30px}}
@media(max-width:950px){.homepage-live .site-header{flex-wrap:wrap}.homepage-live .home-nav nav{width:100%;gap:8px 16px}.homepage-live .home-nav nav a{padding:7px 0}.homepage-live .home-nav .nav-register{padding:7px 12px}}
@media(max-width:767px){.homepage-live .showcase-hero{grid-template-columns:1fr;padding:45px 20px;gap:40px;min-height:0}.homepage-live .showcase-copy h1{font-size:36px;letter-spacing:-1.5px}.homepage-live .showcase-chart{transform:none}.homepage-live main>section:not(.showcase-hero):not(.final-home-cta){margin:0 20px;padding:60px 0}.homepage-live .home-about,.homepage-live .home-analysis,.homepage-live .home-tools,.homepage-live .home-media{grid-template-columns:1fr;gap:35px}.homepage-live h2{font-size:32px}.homepage-live .offer-grid{grid-template-columns:1fr}}
.homepage-live .showcase-chart{height:auto;min-height:0;align-self:center}.homepage-live .showcase-chart img{display:block;position:static;opacity:1;filter:none}.homepage-live .showcase-chart>div{position:static;padding:14px 18px;background:#0f1311;font-size:10px}.homepage-live .showcase-chart:after,.homepage-live .showcase-chart:before{display:none}

/* --- 28.09.2026: hero na pelna szerokosc, spojna siatka, wiekszy wykres --- */
/* 100% zamiast 100vw: 100vw liczy szerokosc razem ze scrollbarem, przez co
   tekst hero rozjezdzal sie o ~7px wzgledem kafelkow centrowanych margin:auto */
.homepage-live{--home-w:1220px;--home-pad:max(40px,calc((100% - var(--home-w))/2))}
/* main mial max-width:1400px z styles.css — blokowalo hero przed dojsciem do krawedzi */
.homepage-live main{max-width:none;margin:0}
.homepage-live .site-header{padding-left:var(--home-pad);padding-right:var(--home-pad)}
/* poswiata pooluje przy wykresie po prawej, gasnie w granicach boksu (brak ostrej
   krawedzi na dole) i wychodzi poza prawa krawedz ekranu; lewa strona zostaje ciemna,
   zeby naglowek mial kontrast */
.homepage-live .showcase-hero{
  grid-template-columns:1fr 1.14fr;
  gap:52px;
  min-height:640px;
  padding:72px var(--home-pad) 96px;
  background:
    radial-gradient(64% 56% at 76% 52%,rgba(7,60,29,.85) 0%,rgba(6,40,20,.30) 38%,rgba(5,7,5,0) 74%),
    radial-gradient(38% 34% at 92% 24%,rgba(0,255,65,.07) 0%,rgba(5,7,5,0) 70%);
}
.homepage-live .showcase-copy h1{font-size:clamp(38px,4.1vw,60px)}
.homepage-live .showcase-copy p{max-width:470px}
/* wykres: wiekszy, lagodniejszy skos, delikatna zielona poswiata pod spodem */
.homepage-live .showcase-chart{
  transform:perspective(1500px) rotateY(-5deg);
  border-width:4px;
  border-radius:16px;
  box-shadow:0 40px 90px #000a,0 0 70px rgba(0,255,65,.08);
}
/* kafelki w tej samej siatce co tekst hero */
.homepage-live .home-rail{max-width:var(--home-w);margin-left:auto;margin-right:auto}
.homepage-live main>section:not(.showcase-hero):not(.final-home-cta){max-width:var(--home-w)}
@media(max-width:1320px){.homepage-live .home-rail{margin-left:40px;margin-right:40px}
  .homepage-live main>section:not(.showcase-hero):not(.final-home-cta){margin-left:40px;margin-right:40px}}
/* baner CTA na dole w tej samej siatce co reszta */
.homepage-live .final-home-cta{max-width:var(--home-w);margin-left:auto;margin-right:auto}
/* UWAGA: reguly powyzej sa pozniej w pliku niz mobilne media query z gory tego
   arkusza, wiec musza zostac tu jawnie cofniete — inaczej hero zostaje
   dwukolumnowy na telefonie (tekst ~140px, wykres ~159px). */
@media(max-width:900px){
  .homepage-live .showcase-hero{grid-template-columns:1fr;gap:40px;min-height:0}
}
@media(max-width:767px){
  .homepage-live .showcase-hero{padding:48px 20px 56px;gap:36px}
  .homepage-live .showcase-copy p{max-width:none}
  .homepage-live .showcase-chart{transform:none;box-shadow:0 24px 60px #0009}
}

/* --- Odstepy w sekcjach, ktore same sa kafelkiem (ramka + zaokraglenie) ---
   Zbiorcza regula .homepage-live main>section{padding:95px 0} zerowala im
   padding boczny, przez co tresc stala 1px od zielonej ramki. Sekcje bez
   wlasnej ramki zostaja bez zmian, a kadry na zdjecia (showcase-chart,
   home-avatar, analysis-visual, tool-peek) maja zerowy padding celowo —
   obraz ma wypelniac kadr do krawedzi. */
/* .home-media musi miec selektor o specyficznosci (0,3,2) — tyle ma zbiorcza
   regula z podwojnym :not(), inaczej jej padding:95px 0 wygrywa. */
.homepage-live main>section.home-media:not(.showcase-hero),
.homepage-live .final-home-cta{padding:72px}
@media(max-width:900px){
  .homepage-live main>section.home-media:not(.showcase-hero),
  .homepage-live .final-home-cta{padding:46px 34px}
}
@media(max-width:620px){
  .homepage-live main>section.home-media:not(.showcase-hero),
  .homepage-live .final-home-cta{padding:34px 22px}
}

/* Kafelki w naglowku — powtorzone dla strony glownej, bo ta nakladka laduje
   sie po styles.css i jej wlasne reguly .home-nav nav a wygrywalyby padding. */
.homepage-live .home-nav nav{gap:5px}
.homepage-live .home-nav nav a:not(.nav-register){
  padding:9px 14px;
  border:1px solid transparent;
  border-radius:9px;
  line-height:1;
  transition:color .2s,background .2s,border-color .2s,transform .2s;
}
.homepage-live .home-nav nav a:not(.nav-register):hover{
  color:#fff;
  background:rgba(0,255,65,.09);
  border-color:rgba(0,255,65,.38);
  transform:translateY(-1px);
}
.homepage-live .home-nav nav a:not(.nav-register).active{
  color:#00ff41;
  background:rgba(0,255,65,.07);
  border-color:rgba(0,255,65,.24);
}

/* Przyciski w koncowym CTA wysrodkowane — naglowek i opis sa wysrodkowane,
   a rzad przyciskow trzymal sie lewej krawedzi. */
.homepage-live .final-home-cta>div{justify-content:center}