/* =========================
   ROOT + RESET
   ========================= */
:root{
  --green:#6EE24B;
  --gradient:linear-gradient(90deg,#6EE24B,#DFF25A);
  --brand-gray:rgb(205,207,205);
  --text:#dce3ec;
  --muted:#9aa3b0;
  --border:rgba(255,255,255,.12);
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --mobile-optical-shift: 0px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}




h1,h2,h3{
  font-family:'IBM Plex Sans',sans-serif;
  letter-spacing:.2px;
}

a{color:inherit;text-decoration:none}

/* =========================
   TŁO STRONY
   ========================= */
.page-overlay{
  min-height: 100vh;
  padding-top: 52px;

  background:
    linear-gradient(rgba(10,14,20,.88), rgba(10,14,20,.88)),
    url("../img/bg-energeticon.jpg") center / cover no-repeat;

  background-attachment: fixed;
}



/* =========================
   BRAND
   ========================= */
.brand-name{font-family:Manrope,sans-serif;font-style:italic}
.brand-on{
  background:var(--gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:800;
}
.brand-gray{color:var(--brand-gray);font-weight:700}

/* =========================
   TOP BAR
   ========================= */
.top-bar{
  position:fixed;
  inset:0 0 auto 0;
  background:rgba(10,14,20,.96);
  border-bottom:1px solid var(--border);
  z-index:1000;
}

.top-bar-inner{
  max-width:1200px;
  margin:0 auto;
  padding:6px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  font-size:13px;
}

.top-name{font-size:11.5px;color:var(--muted)}
.top-phone{
  font-weight:700;
  font-size:14px;
  background:var(--gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* =========================
   HERO
   ========================= */
.hero{
  position: relative;   /* NOWE */
  padding:0 16px 22px;
  overflow: hidden;     /* NOWE – żeby światło nie wyjeżdżało */
  linear-gradient(
      180deg,
      rgba(18,22,30,.96),
      rgba(10,14,20,.92)
    );
}


.hero-content{
  max-width:760px;
  margin:0 auto;
  animation:none;
  position: relative;  
  z-index:1; 
}

.hero-content::after{
  content:"";
  position:relative;
  inset:-6px;
  pointer-events:none;
  animation: heroFloat 16s ease-in-out infinite;
}

@keyframes heroFloat{
  0%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
  100%{transform:translateY(0)}
}
.logo{
  display:block;
  width:100%;
  max-width:360px;
  margin:0 auto 12px;
  filter:
    drop-shadow(0 2px 6px rgba(0,0,0,.65))
    drop-shadow(0 0 18px rgba(0,0,0,.45));
}

/*.hero h1{
  font-size:28px;
  line-height:1.25;
  margin-bottom:22px;
  text-align:center;
  position:relative;
  color: #e4ebf3;
}*/

.hero h1{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;              /* lżej = bardziej premium */

  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0.08em;        /* ⬅️ TO robi robotę */

  text-align: center;
  position: relative;
  margin-bottom: 22px;

  color: #e2e6df;                /* ciepły, nie-biały */
}

/* MOBILE */
@media (max-width: 768px){
  .hero h1{
    font-size: 22px;
  }
}


/* MOBILE */
@media (max-width: 768px){
  .hero h1{
    font-size: 22px;
    line-height: 1.25;
  }
}


.hero h1::after{
  content:"";
  display:block;
  width:120px;
  height:3px;
  margin:14px auto 0;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  opacity:.85;
}

  .hero h1{
    font-size:24px;
  }
}
/* =========================
   HERO – SUBTELNE ŚWIATŁO (PREMIUM)
   ========================= */
..hero::before{
  content:"";
  position:absolute;
  inset:-80px -40px 0;
  background:
    radial-gradient(
      520px 320px at 45% 22%,
      rgba(110,226,75,.16),
      transparent 70%
    ),
    radial-gradient(
      420px 260px at 65% 35%,
      rgba(255,196,120,.08),
      transparent 72%
    );
  pointer-events:none;
  z-index:0;
}

/* =========================
   TAGLINE
   ========================= */
.hero-tagline{
  margin:14px auto 14px;
  max-width:920px;
  position:relative;
}

.hero h1 + .hero-tagline::before{
  content:"";
  display:block;
  width:80px;
  height:2px;
  margin:0 auto 14px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  opacity:.6;
}

.hero-tagline-inner{
  display:grid;
  grid-template-columns:repeat(2, auto);
  justify-content:center;
  gap:14px 28px;
}

@media (max-width:768px){
  .hero-tagline-inner{
    grid-template-columns:1fr;
    gap:12px;
  }
}

.tagline-item{
  font-size:16.5px;
  font-weight:600;
  letter-spacing:.2px;
  color:#e4ebf3;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:8px;
}

.tagline-item::first-letter{font-size:18px}

/* =========================
   HERO ELEMENTY
   ========================= */
.hero-divider--tagline{
  width:200px;
  height:4px;
  margin:18px auto 24px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  box-shadow:0 0 16px rgba(110,226,75,.55);
}

.hero-description{
  max-width:46ch;
  margin:0 auto 14px;
  padding:14px 18px;
  font-size:15.5px;
  line-height:1.7;
  color:#e6edf6;
  text-align:center;
  background:rgba(20,24,33,.65);
  border-radius:14px;
  border:1px solid rgba(110,226,75,.18);
  backdrop-filter:none;
 text-align: justify;
}


.hero-claim{
  margin:22px auto 26px;
  display:flex;
  justify-content:center;
  gap:14px 22px;
  flex-wrap:wrap;
  text-align:center;	
  font-size:14.5px;
  font-weight: 600;
  line-height:1.4;
  letter-spacing:.35px;
  color:#cfd6df;
  
}

.hero-claim span{
  position:relative;
  white-space:nowrap;
}

.hero-claim span::after{
  content:"•";
  margin-left:14px;
  color:var(--green);
  opacity:.85;
}
.hero-claim span:last-child::after{
  content:"";
}

.tagline-item span:first-child{
  filter: drop-shadow(0 0 6px rgba(110,226,75,.35));
}

/* =========================
   HERO – KORZYŚCI (FINAL)
   ========================= */

.hero-benefits{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  color: #cfd6df;
}

.hero-benefits .sep{
  color: var(--green);
  opacity: .7;
  flex-shrink: 0;
}
/* =========================
   CTA
   ========================= */
.cta-main{
  display:block;
  width:fit-content;
  margin:18px auto 20px;
  padding:14px 32px;
  border-radius:999px;
  background:var(--gradient);
  color:#0b0f18;
  font-weight:600;
  font-size:14.5px;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 0 0 rgba(110,226,75,0);
}

.cta-main:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(110,226,75,.45);
}

/* =========================
   SEKCJE
   ========================= */
.section{
  padding:34px 16px;
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}

.section-areas{padding-top:12px}

.section-title{
  margin-bottom:24px;
  font-size:22px;
  font-weight:600;
  color: #e4ebf3;
}

.section-title::after{
  content:"";
  display:block;
  width:120px;
  height:3px;
  margin:10px auto 0;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
}

/* =========================
   GRID
   ========================= */
.grid{display:grid;gap:14px;align-items:start}
.grid-3,.grid-4-wide{grid-template-columns:1fr}

@media(min-width:769px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4-wide{grid-template-columns:repeat(4,1fr)}
}

/* =========================
   TILE – CORE (FINAL / CLEAN)
   ========================= */
.tile{
  position:relative;
  background:rgba(20,24,33,.92);
  border-radius:14px;
  padding:18px 22px 14px 26px;
  border:1px solid rgba(255,255,255,.08);

  display:flex;
  flex-direction:column;
  text-align:left;

  opacity:0;
  transform:translateY(40px) scale(0.98);

  transition:
    opacity .7s ease-out .15s,
    transform .95s cubic-bezier(.22,.8,.28,1),
    box-shadow .35s ease-out,
    border-color .35s ease;
}

.tile.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* hover */
.tile:not(.open):hover{
  transform:translateY(-3px) scale(1.005);
  border-color:rgba(110,226,75,.35);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
}

/* open */
.tile.open{
  border-color:rgba(110,226,75,.55);
  box-shadow:
    0 0 0 1px rgba(110,226,75,.35),
    0 18px 40px rgba(0,0,0,.45);
  scroll-margin-top:90px;
}

.tile.open:hover{ transform:none; }

/* =========================
   TEKST
   ========================= */
.tile h3{
  font-size:15px;
  margin-bottom:6px;
  text-align:center;
  background:var(--gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.tile p,
.tile li{
  font-size:13.2px;
  line-height:1.45;
  color:rgba(220,227,236,.75);
  widows: 2;
  orphans: 2;
  hyphens: auto;
}

/* =========================
   LISTA GŁÓWNA
   ========================= */
.tile > ul{
  margin-top:6px;
  padding-left:0;
  list-style:none;

  opacity:0;
  transform:translateY(6px);
  transition:opacity .45s ease .15s, transform .45s ease .15s;
}

.tile.is-visible > ul{
  opacity:1;
  transform:translateY(0);
}

.tile > ul > li{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.tile > ul > li::before{
  content:"•";
  color:var(--green);
  font-size:18px;
  line-height:1;
  flex-shrink:0;
}

/* =========================
   ACCORDION
   ========================= */
.tile-details{
  display:grid;
  grid-template-rows:0fr;
  overflow:hidden;
  opacity:0;
  transition:grid-template-rows .6s ease, opacity .25s ease;
}

.tile-details > *{ overflow:hidden; }

.tile.open .tile-details{
  grid-template-rows:1fr;
  opacity:1;
  background:rgba(255,255,255,.03);
  border-radius:12px;
  padding:14px 16px 16px;
}

.tile-details ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.tile-details li{
  position:relative;
  padding-left:18px;
  font-size:12.9px;
  line-height:1.55;
  color:#b9c3cf;

  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
}

.tile.open .tile-details li{
  opacity:1;
  transform:translateY(0);
}

.tile-details li::before{
  content:"—";
  position:absolute;
  left:0;
  color:rgba(110,226,75,.65);
}

/* =========================
   BUTTON
   ========================= */
.tile-btn{
  position:relative;
  margin:10px auto 6px;
  padding:5px 34px 5px 12px;
  font-size:11.5px;
  border-radius:999px;
  border:1px solid rgba(110,226,75,.35);
  background:rgba(110,226,75,.05);
  color:var(--green);
  cursor:pointer;
}

.tile-btn::after{
  content:"▾";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  transition:.25s;
}

.tile.open .tile-btn::after{
  transform:translateY(-50%) rotate(180deg);
}

/* =========================
   REALIZACJE – CTA
   ========================= */
a.tile-link.realizacje-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:14px auto 6px;
  padding:9px 26px;

  font-size:12.6px;
  font-weight:600;
  color:var(--green);
  text-decoration:none;

  background:linear-gradient(
    180deg,
    rgba(110,226,75,.18),
    rgba(110,226,75,.06)
  );
  border:1px solid rgba(110,226,75,.45);
  border-radius:999px;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 3px 12px rgba(110,226,75,.14);

  transition:background .25s ease, box-shadow .25s ease, transform .2s ease;
}

a.tile-link.realizacje-link::before{
  content:"»";
  animation:chevLeft 3s ease-in-out infinite;
}

a.tile-link.realizacje-link::after{
  content:"«";
  animation:chevRight 3s ease-in-out infinite;
}

a.tile-link.realizacje-link:hover{
  background:linear-gradient(
    180deg,
    rgba(110,226,75,.28),
    rgba(110,226,75,.12)
  );
  box-shadow:0 6px 18px rgba(110,226,75,.25);
  transform:translateY(-1px);
}

a.tile-link.realizacje-link:hover::before,
a.tile-link.realizacje-link:hover::after{
  animation:none;
}

/* =========================
   GRID – ACCORDION FIX
   ========================= */
.grid-4-wide{
  align-items:flex-start;
}
/* =========================
   ETAPY WSPÓŁPRACY – RÓWNE KAFLI
   ========================= */
.section.etapy .grid-4-wide{
  align-items:stretch;
}

.section.etapy .tile{
  height:100%;
}

/* =========================
   STANDARDY NASZEJ PRACY – RÓWNE KAFLI
   ========================= */
.section.why .grid-3{
  align-items:stretch;
}

.section.why .tile{
  height:100%;
}


/* =========================
   ANIMACJE – CHEVRONS
   ========================= */
@keyframes chevLeft{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(3px)}
}

@keyframes chevRight{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(-3px)}
}




/* =========================
   KONTAKT + FOOTER
   ========================= */
.contact-intro{
  max-width: 520px;
  margin: 0 auto 18px;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(220,227,236,.85);
}
   
.contact-box{
  background:
    linear-gradient(
      180deg,
      rgba(110,226,75,.18),
      rgba(20,24,33,.92) 45%
    );
  border-radius: 22px;
  padding: 28px 26px;
  border: 1px solid rgba(110,226,75,.55);
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
  box-shadow:
    0 18px 40px rgba(0,0,0,.45);
}
.contact-brand{
  font-size: 20px;
  margin-bottom: 6px;
}
.contact-name{
  font-size: 14.5px;
  color: var(--muted);
  margin-bottom: 14px;
}
.contact-phone{
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: .3px;
}

.contact-phone a{
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contact-note{
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 14px;
}
.contact-mail a{
  font-size: 14px;
  color: rgba(220,227,236,.8);
}
footer{
  outline: 1px solid rgba(110,226,75,.35);
  padding: 32px 16px 24px;
  margin-top: 40px;
  background: rgba(10,14,20,.75);
  border-top: 1px solid rgba(110, 226, 75, 0.35);
  text-align: center; 
  color: var(--muted);
}

.footer-inner{
  max-width: 1200px;
  width: 100%;              /* ← TO JEST KLUCZ */
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.footer-copy{
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}


/* =========================
   ANIMATIONS
   ========================= */
@keyframes arrowFloat{
  0%{transform:translateX(0)}
  50%{transform:translateX(3px)}
  100%{transform:translateX(0)}
}

@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
  }
}
/* =================================================
   TILE – LISTA GŁÓWNA (WIDOCZNA)
   ================================================= */

.tile > ul{
  margin-top:6px;
  padding-left:10px;
  margin-left:0;
  list-style:none;

  opacity:0;
  transform:translateY(6px);
  transition:opacity .45s ease .15s, transform .45s ease .15s;
}

/* =========================
   REALIZACJE – PRZYCISK CTA
   ========================= */
a.tile-link.realizacje-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:14px auto 6px;
  padding:9px 26px;

  font-size:12.6px;
  font-weight:600;
  color:var(--green);
  text-decoration:none;

  background:linear-gradient(
    180deg,
    rgba(110,226,75,.18),
    rgba(110,226,75,.06)
  );
  border:1px solid rgba(110,226,75,.45);
  border-radius:999px;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 3px 12px rgba(110,226,75,.14);

  transition:
    background .25s ease,
    box-shadow .25s ease,
    transform .2s ease;
}

a.tile-link.realizacje-link:hover{
  background:linear-gradient(
    180deg,
    rgba(110,226,75,.28),
    rgba(110,226,75,.12)
  );
  box-shadow:0 6px 18px rgba(110,226,75,.25);
  transform:translateY(-1px);
}

/* LISTA GŁÓWNA – TYLKO PIERWSZY POZIOM */
.tile > ul{
  list-style:none;
}

.tile > ul > li{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.tile > ul > li::before{
  content:"•";
  color:var(--green);
  font-size:18px;
  line-height:1;
  flex-shrink:0;
}


.tile > ul li::before{
  content:"•";
  color:var(--green);
  font-size:18px;
  line-height:1;
  flex-shrink:0;
}
.tile p{
  hyphens: none;
  word-break: normal;
}



/* =================================================
   TILE DETAILS – LISTA ROZWIJANA (MYŚLNIKI)
   ================================================= */

.tile.open .tile-details{
  background:rgba(255,255,255,.03);
  border-radius:12px;
  padding:14px 16px 16px;
}

.tile-details ul{
  list-style:none;
  padding-left:0;
  margin:0;
  display:grid;
  gap:10px;
}

.tile-details li{
  position: relative;
  padding-left: 18px;
  font-size: 12.9px;
  line-height: 1.55;
  color: #b9c3cf;
  letter-spacing: .15px;

  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity .35s ease,
    transform .35s ease;

}
.tile.open .tile-details li:nth-child(1){transition-delay:.05s}
.tile.open .tile-details li:nth-child(2){transition-delay:.1s}
.tile.open .tile-details li:nth-child(3){transition-delay:.15s}
.tile.open .tile-details li:nth-child(4){transition-delay:.2s}

/* zielony myślnik – JEDYNY znacznik */
.tile-details li::before{
  content:"—";
  position:absolute;
  left:0;
  top:0;
  color:rgba(110,226,75,.65);
  font-weight:500;
}
.tile.open .tile-details li{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   STANDARDY NASZEJ PRACY – CHECK (CENTRUM KAFLA)
   ========================= */
.section.why .tile{
  position: relative;
}

.section.why .tile p{
  padding-left: 25px;
}

/* check wyśrodkowany względem kafla */
.section.why .tile p::before{
  content: "✓";
  position: absolute;
  left: 22px;                 /* przy ramce kafla */
  top: 50%;
  transform: translateY(-50%);
  color: var(--green);
  font-weight: 700;
  font-size: 18px;
}


html{
  overflow-anchor: none;
}
/* stabilizacja scrolla przy zmianach wysokości */



/* =========================
   TILE – STAGGER (PREMIUM)
   ========================= */

.grid > .tile{
  transition-delay: var(--delay, 0ms);
}

.grid > .tile:nth-child(1){ --delay: 0ms; }
.grid > .tile:nth-child(2){ --delay: 80ms; }
.grid > .tile:nth-child(3){ --delay: 160ms; }
.grid > .tile:nth-child(4){ --delay: 240ms; }


/* =========================
   ETAPY REALIZACJI – SEKWENCJA
   ========================= */

/* stan początkowy tylko dla tej sekcji */
.section.etapy .tile{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .85s ease,
    transform .85s cubic-bezier(.2,.8,.2,1);
}
.section.etapy .tile:nth-child(1){ transition-delay:.1s; }
.section.etapy .tile:nth-child(2){ transition-delay:.35s; }
.section.etapy .tile:nth-child(3){ transition-delay:.6s; }
.section.etapy .tile:nth-child(4){ transition-delay:.85s; }


/* aktywacja (IntersectionObserver już to dodaje) */
.section.etapy .tile.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* sekwencja 1 → 4 */
.section.etapy .tile:nth-child(1){
  transition-delay: .05s;
}
.section.etapy .tile:nth-child(2){
  transition-delay: .18s;
}
.section.etapy .tile:nth-child(3){
  transition-delay: .31s;
}
.section.etapy .tile:nth-child(4){
  transition-delay: .44s;
}
.section.etapy .tile.is-visible{
  animation:tileFocus .6s ease-out both;
}

@keyframes tileFocus{
  0%{
    box-shadow:
      0 0 0 0 rgba(110,226,75,0),
      0 0 0 rgba(0,0,0,0);
  }
  100%{
    box-shadow:
      0 0 0 1px rgba(110,226,75,.35),
      0 12px 30px rgba(0,0,0,.45);
  }
}
.section.etapy .step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  margin-right:8px;
  border-radius:50%;
  font-size:12px;
  font-weight:700;
  color:#0b0f18;
  background:var(--green);
  opacity:.85;
}
.section.etapy .tile.is-visible .step{
  animation:stepPop .45s ease-out both;
}

@keyframes stepPop{
  0%{
    transform:scale(.6);
    opacity:0;
  }
  70%{
    transform:scale(1.1);
    opacity:1;
  }
  100%{
    transform:scale(1);
  }
}
.section{
  position:relative;
}
/* =========================
   REALIZACJE – SEKCJA GŁÓWNA
   ========================= */
.section.realizacje{
  padding-top: 40px;
}

.realizacje-lead{
  max-width: 720px;
  margin: 0 auto 28px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* =========================
   REALIZACJE – KAFLE
   ========================= */
.realizacje-grid{
  align-items: stretch;
}

.realizacja-tile{
  background:rgba(20,24,33,.88);
  border:1px solid rgba(110,226,75,.35);
  border-radius:16px;
  padding:22px 20px;
  cursor:pointer;

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;

  color:var(--text);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.realizacja-tile:hover{
  transform:translateY(-2px);
  border-color:rgba(110,226,75,.7);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}

.realizacja-icon{
  font-size:26px;
}

.realizacja-title{
  font-size:15px;
  font-weight:600;
  letter-spacing:0.3px;
  line-height:1.2;

  min-height:20px;                 /* wyrównanie wizualne kafli */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  margin:2px 0 4px;                /* spójny rytm z ikoną i opisem */

  background:var(--gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}


.realizacja-desc{
  font-size:13.5px;
  line-height:1.45;
  color:#cfd6df;
}
.section-title::after{
  animation: sectionBreath 10s ease-in-out infinite;
  transform-origin: center;
}

@keyframes sectionBreath{
  0%{
    opacity:.35;
    transform:scaleX(.96);
  }
  50%{
    opacity:.55;
    transform:scaleX(1);
  }
  100%{
    opacity:.35;
    transform:scaleX(.96);
  }
}
/* =========================
   OBSZARY ZASTOSOWAŃ – TEKST (DESKTOP)
   ========================= */
@media (min-width: 1024px){
  .section-areas .tile p{
    text-align: justify;
    text-justify: inter-word;
    max-width: 41ch;          /* ← KLUCZ */
    margin-left: auto;
    margin-right: auto;
	line-height: 1.55;
	hyphens: auto;
	text-align-last: left;
  }
}
@media (min-width: 1024px){
  .tile-lead{
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55;
    margin-bottom: 12px;
    hyphens: auto;
  }
}
@media (min-width: 1024px){
  .section.etapy .tile p{
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
	letter-spacing: 0.01em;
    hyphens: auto;
	 flex-grow: 1;
  }
}
@media (min-width: 1024px){
  .section.etapy .tile{
    display: flex;
    flex-direction: column;
  }
}
.tile > ul li{
  line-height: 1.45;
}
/* =========================
   ETAPY WSPÓŁPRACY – B+
   ========================= */

.section.etapy .tile{
  position: relative;
  padding-top: 42px; /* miejsce na numer */
}

/* numer kroku */
.section.etapy .step{
  position:absolute;
  top:14px;
  left:16px;

  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;

  color:rgba(110,226,75,.85);
  background:none;

  opacity:.75;
}

/* nagłówki */
.section.etapy .tile h3{
  margin-top: 4px;
  margin-bottom: 10px;
  text-align: center;
}

/* tekst */
@media (min-width: 1024px){
  .section.etapy .tile p{
    max-width: 44ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    letter-spacing: 0.01em;
  }
}
@media (min-width: 1024px){
  .section.why .tile{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .section.why .tile p{
    max-width: 50ch;
    margin-left: auto;
    margin-right: auto;

    line-height: 1.6;
    letter-spacing: 1.5px;
    opacity: .85;

    min-height: 6.4em; /* ≈ 4 linie */
  }
}



/* =========================
   MOBILE – HERO (UKŁAD + OPTYKA)
   ========================= */
@media (max-width: 768px){

  /* HERO – kontener */
  .hero{
    padding: 20px 16px 22px;
  }

  /* Tytuł */
  .hero h1{
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 14px;
  }

  /* divider pod h1 */
  .hero h1::after{
    margin-top: 10px;
  }

  /* TAGLINE */
  .hero-tagline{
    margin: 10px auto 12px;
    padding: 0 12px;
  }

  /*.hero-tagline-inner{
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    gap: 6px;
  }*/
  
   .hero-tagline-inner {
    grid-template-columns: max-content max-content;
    column-gap: 166px;     /* ⬅️ odsunięcie prawej kolumny */
    row-gap: 14px;
    max-width: 760px;    /* ⬅️ pozwala kolumnom się rozjechać */
  }

  .tagline-item{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;
    max-width: 100%;

    font-size: 15.5px;
    line-height: 1.35;
	font-weight: 600;

    white-space: normal !important;
    flex-wrap: wrap;
    text-align: center;
  }

  .tagline-item span{
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* divider pod tagline */
  .hero-divider--tagline{
    margin: 12px auto 16px;
    height: 3px;
    width: 160px;
  }

  /* OPIS */
  .hero-description{
    font-size: 14px;
    line-height: 1.55;
    padding: 12px 14px;
    max-width: 100%;
    margin-bottom: 12px;
  }
}
  .tagline-item span:first-child{
    font-size: 17px;     /* ikona */
  }
  
@media (max-width: 768px){
  .hero-benefits{
    flex-direction: column;
    white-space: normal;
    gap: 14px;
    margin: 22px auto 24px;
  }

  .hero-benefits span{
    white-space: normal;
    text-align: center;
    line-height: 1.55;
    font-size: 14.8px;
    display: block;
  }

}
@media (max-width: 768px){
  .page-overlay{
    background-attachment: scroll;
  }
}


/* =========================
   EXTRA SMALL DEVICES
   ========================= */
@media (max-width: 360px){
  .hero-description{
    display: none;
  }
}

@media (max-width:768px){
  .hero-claim{
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .hero-claim span::after{
    content: "";
  }
}
   
   
   
@media (max-width: 768px){

  /* =========================
     KAFEL – PODSTAWA
     ========================= */
  .tile{
    padding: 22px 20px;
  }

  /* =========================
     NAGŁÓWKI W KAFLACH
     ========================= */
  .tile h3{
    text-align: center;
    margin-bottom: 12px;
  }

  /* =========================
     TEKSTY W KAFLACH
     ========================= */
  .tile p,
  .tile li{
    font-size: 14px;
    line-height: 1.5;
  }

  /* =========================
     GRID 4 – USŁUGI
     ========================= */
  .section .grid.grid-4-wide .tile .tile-lead{
    text-align: center;
    margin-bottom: 10px;
  }

  .section .grid.grid-4-wide .tile > ul,
  .section .grid.grid-4-wide .tile-details ul{
    padding-left: 18px;
  }

  /* =========================
     ETAPY WSPÓŁPRACY
     ========================= */
  .section.etapy .tile{
    padding: 24px 20px;
  }

  .section.etapy .tile h3{
    text-align: center;
  }

  /* =========================
     STANDARDY NASZEJ PRACY
     ========================= */
  .section.why .tile{
    padding: 26px 22px;
  }

  .section.why .tile p{
    max-width: 100%;
    letter-spacing: 0.2px;
    opacity: .9;
  }

  /* =========================
     HERO – CLAIM
     ========================= */
  .hero-claim span::after{
    content: "";
  }
}

/* =========================
   HERO BENEFITS – FINAL
   ========================= */

/* DESKTOP */
.hero-benefits{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  color: #cfd6df;
}

.hero-benefits .sep{
  color: var(--green);
  opacity: .7;
  flex-shrink: 0;
}

/* MOBILE */
@media (max-width: 768px){
  .hero-benefits{
    flex-direction: column;
    white-space: normal;
    gap: 14px;
    margin: 22px auto 24px;
  }

  .hero-benefits span{
    display: block;
    white-space: normal;
    text-align: center;
    line-height: 1.55;
    font-size: 14.8px;
  }

  .hero-benefits .sep{
    display: none;
  }
}
/* =================================================
   HERO – MOBILE CLEAN FIX
   ================================================= */
@media (max-width: 768px){

  /* =========================
     HERO TAGLINE
     ========================= */
  .hero-tagline-inner{
    grid-template-columns: 1fr;
    max-width: 320px;
    margin: 0 auto;
    gap: 8px;
  }

  .tagline-item{
    justify-content: flex-start;   /* emoji w jednej kolumnie */
    text-align: left;
    white-space: normal;
    font-size: 15px;
    line-height: 1.4;
  }

  /* =========================
     HERO BENEFITS (CLAIM)
     ========================= */
  .hero-benefits{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;

    max-width: 320px;
    margin: 22px auto 26px;
  }

  .hero-benefits .sep{
    display: none; /* usuwamy stare separatory */
  }

  .hero-benefits span{
    position: relative;
    padding-left: 18px;

    text-align: left;
    white-space: normal;
    line-height: 1.5;
    font-size: 14px;
    font-weight: 600;
  }

  .hero-benefits span::before{
    content: "•";
    position: absolute;
    left: 0;
    top: 0.05em;

    color: var(--green);
    font-size: 18px;
    line-height: 1;
  }
}


/* =================================================
   HERO – MOBILE CENTER (FINAL, SAFE)
   ================================================= */
@media (max-width: 768px){

  /* TAGLINE */
  .hero-tagline{
    padding-left: 0;
    padding-right: 0;
  }

  .hero-tagline-inner{
    max-width: 300px;        /* optyczny środek */
    margin-left: auto;
    margin-right: auto;
  }

  /* BENEFITS */
  .hero-benefits{
    max-width: 300px;        /* optyczny środek */
    margin-left: auto;
    margin-right: auto;
	padding-left: 10px; 
  }
}




/* =================================================
   STICKY CTA – MOBILE ONLY (HARD HIDE FIX)
   ================================================= */
.cta-sticky{
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%) translateY(140%);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  z-index: 1200;

  padding: 14px 28px;
  border-radius: 999px;

  background: var(--gradient);
  color: #0b0f18;
  font-weight: 700;
  font-size: 14.5px;

  box-shadow: 0 10px 28px rgba(110,226,75,.45);
  transition:
    transform .35s ease,
    opacity .25s ease,
    visibility .25s ease;
}

/* AKTYWNY */
.cta-sticky.is-visible{
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* desktop OFF */
@media (min-width: 769px){
  .cta-sticky{
    display: none;
  }
}
/* =================================================
   HERO TAGLINE – MOBILE FINAL FIX (NO BREAK)
   ================================================= */
@media (max-width: 768px){

  .hero-tagline-inner{
    max-width: 300px;
    margin: 0 auto;
  }

  .tagline-item{
    position: relative;
    display: flex;
    align-items: center;

    padding-left: 50px;   /* stałe miejsce na ikonę */
    gap: 8px;

    text-align: left;
    white-space: normal;
  }

  .tagline-item span:first-child{
    position: absolute;
    left: 0;
    top: 0.05em;

    width: 22px;
    text-align: center;
    font-size: 17px;
  }

  .tagline-item span:last-child{
    line-height: 1.45;
    word-break: normal;
    overflow-wrap: normal;
  }
}
/* =========================
   CTA – MOBILE = TEL
   ========================= */
@media (max-width: 768px){

  .cta-main,
  .cta-sticky{
    pointer-events: auto;
  }

  .cta-main{
    href: none; /* tylko informacyjnie – CSS nie zmienia href */
  }
}
/* =========================
   CTA – MOBILE UX PREMIUM
   ========================= */
a,
button,
.cta-main,
.cta-sticky{
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;
  outline: none;
}

/* visual feedback */
@media (max-width: 768px){
  .cta-main:active,
  .cta-sticky:active{
    transform: scale(0.965);
    filter: brightness(1.08);
    box-shadow: 0 6px 18px rgba(110,226,75,.55);
  }
}
@media (max-width: 768px){
  body{
    background-attachment: scroll !important;
  }
}
.tagline-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.tagline-icon {
  width: 18px;      /* trochę subtelniej */
  height: 18px;
  flex-shrink: 0;   /* ikona nigdy się nie zgniecie */
  opacity: 0.9;
  filter: brightness(0) saturate(100%) invert(64%) sepia(82%) saturate(355%) hue-rotate(64deg);
}

/* =========================
   HERO TAGLINE – DESKTOP ONLY
   ========================= */
@media (min-width: 769px){
  .hero-tagline-inner{
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: center;

    column-gap: 120px;   /* ⬅️ TO JEST ODSUNIĘCIE PRAWEJ KOLUMNY */
    row-gap: 14px;

    max-width: 900px;   /* ⬅️ MUSI BYĆ WIĘKSZE */
    margin: 0 auto;
  }
}