.elementor-2297 .elementor-element.elementor-element-d0909a8{--display:flex;}.elementor-2297 .elementor-element.elementor-element-580e3cd{--display:flex;}.elementor-2297 .elementor-element.elementor-element-19123e5{--display:flex;}@media(max-width:767px){.elementor-2297 .elementor-element.elementor-element-3b9bdbe{margin:-83px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2297 .elementor-element.elementor-element-0016d56{margin:-75px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}/* Start custom CSS for html, class: .elementor-element-05bcb9f */:root{ --brand:#F25623; }

/* ================= SECTION ================= */
.why-final{
  background:#000;
  position:relative;
  display:grid;
  grid-template-columns:0.75fr 1.25fr;
  gap:9vw;
  padding:160px 8vw;
  color:#fff;
  overflow:hidden;
  align-items:center; /* ✅ wyrównuje lewą i prawą stronę w pionie */
}

/* ================= LEFT SIDE ================= */
.why-tag{
  font-family:'Inter Tight',sans-serif;
  font-size:14px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--brand);
}

.why-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:120px;
  line-height:.8;
  margin:14px 0 0;
  text-transform:uppercase;
}
.why-title span{
  color:var(--brand);
}

/* ================= RIGHT SIDE — Manifest ================= */
.why-right{
  position:relative;
  padding-left:50px;
  display:flex;
  align-items:center; /* ✅ tekst centrowany przy linii */
}

.why-line{
  position:absolute;
  left:0;
  top:0.2em; /* ✅ startuje równo z tekstem */
  width:2px;
  height:100%;
  background:var(--brand);
  animation:lineReveal 1.4s cubic-bezier(.24,.85,.2,1) forwards;
}

.why-paragraph{
  font-family:'Inter Tight',sans-serif;
  font-size:20px;
  line-height:1.75;
  color:#dcdcdc;
  max-width:600px;
  opacity:0;
  transform:translateY(20px);
  animation:textReveal .9s .4s ease-out forwards;
}

/* ================= BACKGROUND TYPO ================= */
.why-bg{
  position:absolute;
  top:4vh;
  left:-4vw;
  font-family:'Bebas Neue',sans-serif;
  font-size:18vw;
  line-height:.78;
  text-transform:uppercase;
  opacity:.08;
  pointer-events:none;
}
.why-bg span{
  display:block;
}
.why-bg span:nth-child(2){
  color:var(--brand);
  opacity:.12;
  text-shadow:0 0 48px rgba(242,86,35,.45);
}

/* ================= ANIMATIONS ================= */
@keyframes lineReveal{
  from{ height:0; }
  to{ height:100%; }
}
@keyframes textReveal{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){

  .why-final{
    grid-template-columns:1fr;
    gap:52px;
    padding:100px 6vw 110px;
    align-items:flex-start;
  }

  .why-title{ font-size:62px; }

  .why-right{
    padding-left:26px;
    align-items:flex-start; /* ✅ na mobile wyrównanie do góry */
  }

  .why-line{
    width:1px;
    top:0;
    height:100%;
  }

  .why-paragraph{
    font-size:15px;
    line-height:1.55;
    max-width:100%;
  }

  .why-bg{
    font-size:34vw;
    opacity:.04;
    top:16vh;
    left:-10vw;
    text-shadow:none;
  }
  .why-bg span:nth-child(2){
    opacity:.08;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c444350 */:root{
  --accent:#F25623;
  --ink:#0A0A0A;
  --light:#DEDEDE;
  --white:#fff;
  --black:#000;
}

/* Desktop only */
@media(max-width:1024px){
  .md-duo, .md-popup{ display:none !important; }
}

/* Sekcja */
.md-duo{
  background:var(--black);
  padding:120px 0;
  display:flex;
  justify-content:center;
}
.md-duo-inner{
  width:min(1440px,92vw);
  display:grid;
  grid-template-columns:auto 1fr 1fr auto;
  gap:54px;
  align-items:center;
}

/* Karty */
.md-card{
  position:relative;
  width:100%;
  aspect-ratio:2/3;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#121212;
  cursor:pointer;
  transition:.35s;
}
.md-card img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);
  transition:.45s;
}
.md-card:hover img{
  transform:scale(1.06);
  filter:brightness(1.05);
}

/* Corners */
.md-corners{
  position:absolute;inset:14px;
  opacity:0;transition:.3s;
  background:
    linear-gradient(90deg,#fff,transparent) 0 0/26px 1px no-repeat,
    linear-gradient(180deg,#fff,transparent) 0 0/1px 26px no-repeat,
    linear-gradient(270deg,#fff,transparent) 100% 0/26px 1px no-repeat,
    linear-gradient(180deg,#fff,transparent) 100% 0/1px 26px no-repeat,
    linear-gradient(90deg,#fff,transparent) 0 100%/26px 1px no-repeat,
    linear-gradient(0deg,#fff,transparent) 0 100%/1px 26px no-repeat,
    linear-gradient(270deg,#fff,transparent) 100% 100%/26px 1px no-repeat,
    linear-gradient(0deg,#fff,transparent) 100% 100%/1px 26px no-repeat;
}
.md-card:hover .md-corners{ opacity:.9; }

/* Sheen */
.md-sheen{
  position:absolute;inset:0;
  opacity:0;transform:translateX(-100%);
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.15) 50%,transparent 65%);
}
.md-card:hover .md-sheen{
  animation:sheen 1.15s forwards;
}
@keyframes sheen{
  0%{transform:translateX(-100%);opacity:0}
  50%{opacity:.6}
  100%{transform:translateX(100%);opacity:0}
}

/* Tag */
.md-tag{
  position:absolute;right:18px;bottom:18px;
  display:flex;align-items:center;gap:6px;
  background:#fff;color:#000;
  padding:6px 14px;border-radius:40px;
  opacity:0;transition:.3s;
}
.md-tag-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
}
.md-card:hover .md-tag{ opacity:1; }

/* Boczne copy */
.md-side{max-width:340px;}
.md-side-left{text-align:right;}
.md-side-right{text-align:left;}

.md-side-eyebrow{
  color:var(--accent) !important;
  font-family:'Inter Tight',sans-serif;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:3px;
  margin-bottom:10px;
}
.md-side-head{
  color:#fff;
  font-family:'Bebas Neue',sans-serif;
  font-size:40px;
  margin-bottom:8px;
}
.md-side-text{
  font-family:'Inter Tight',sans-serif;
  font-size:15px;
  line-height:1.6;
  color:#BFBFBF;
}

/* WIĘCEJ */
.md-more-btn{
  margin-top:14px;
  background:none;border:none;
  color:var(--light);
  font-family:'Inter Tight',sans-serif;
  font-size:12px;
  text-transform:uppercase;
  cursor:pointer;
  position:relative;
}
.md-more-btn::after{
  content:"";
  position:absolute;
  left:50%;bottom:-4px;
  width:22px;height:2px;
  background:var(--accent);
  transform:translateX(-50%);
  transition:.3s;
}
.md-more-btn:hover::after{
  width:42px;
  box-shadow:0 0 14px rgba(242,86,35,.8);
}

/* Popup */
.md-popup{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.85);
  opacity:0;pointer-events:none;
  transition:.45s;
  z-index:9998;
}
.md-popup.active{
  opacity:1;pointer-events:auto;
}
.md-popup-inner{
  width:min(900px,95vw);
  min-height:520px; /* 🔥 większy dół */
  background:rgba(12,12,12,.96);
  border:2px solid var(--accent);
  backdrop-filter:blur(16px);
  padding:110px 70px 70px; /* 🔥 większy górny padding */
  box-shadow:0 0 40px rgba(242,86,35,.45);
  color:var(--light);
}

/* Zamknięcie */
.md-popup-close{
  position:absolute;top:20px;right:24px;
  background:none;border:none;
  color:var(--light) !important;
  font-size:32px;cursor:pointer;
}
.md-popup-close:hover{
  color:var(--accent) !important;
  text-shadow:0 0 14px var(--accent);
}

/* Tab menu */
.md-popup-tabs{
  display:flex;gap:36px;
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:0 0 16px;
}
.tab-btn{
  background:none;border:none;
  font-family:'Inter Tight',sans-serif;
  font-size:12px;letter-spacing:.03em;
  text-transform:uppercase;
  color:#888;cursor:pointer;
  position:relative;
  padding-bottom:6px;
}
.tab-btn.active{
  color:var(--light);
}
.tab-btn.active::after{
  content:"";
  position:absolute;left:0;bottom:-2px;
  width:100%;height:2px;
  background:var(--accent);
  box-shadow:0 0 14px rgba(242,86,35,.8);
}

/* Zawartość */
.tab-content{
  display:none;
  font-family:'Inter Tight',sans-serif;
  font-size:14px;
  line-height:1.7;
  max-width:620px;
}
.tab-content.active{ display:block; }









/* 🔥 Zero różu na hover/active w tej sekcji */
.md-more-btn:hover,
.md-more-btn:focus,
.tab-btn:hover,
.tab-btn:focus,
.tab-btn.active,
.md-popup-close:hover,
.md-popup-close:focus {
  color:var(--light) !important;
  text-shadow:none !important;
  background:none !important;
  box-shadow:none !important;
  outline:none !important;
}

/* Linia przy aktywnej zakładce — zmieniamy z różu na jasny */
.tab-btn.active::after {
  background:var(--light) !important;
  box-shadow:none !important;
}





/* 🔥 Tylko blok tekstu — bez tagów zakładek */
.tab-content.active {
  padding-top:40px !important;
}
















/* 🌑 CINEMATIC POPUP OPEN — wersja PRO */
.md-popup.active .md-popup-inner {
  animation: popupReveal .75s cubic-bezier(.16,.84,.44,1) forwards;
  transform-origin:center;
}

@keyframes popupReveal {
  0% {
    opacity:0;
    transform:translateY(40px) scale(.88);
    filter:blur(14px);
  }
  50% {
    opacity:1;
    transform:translateY(-6px) scale(1.02);
    filter:blur(3px);
  }
  100% {
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

/* ✅ Zakładki WYŚRODKOWANE (premium clean) */
.md-popup-tabs {
  justify-content:center !important;
  text-align:center;
}

/* 🐍 SLIDE BAR — dynamiczna linia pod aktywną zakładką */
.md-popup-tabs {
  position:relative;
}
.md-tab-highlight {
  position:absolute;
  bottom:0;
  height:2px;
  width:0;
  background:var(--accent);
  box-shadow:0 0 16px rgba(242,86,35,.7);
  transition:.45s cubic-bezier(.22,.61,.36,1);
}

/* Podświetlenie aktywnej */
.tab-btn.active {
  color:var(--white) !important;
  text-shadow:0 0 10px rgba(255,255,255,.4);
  letter-spacing:.07em;
}

/* Fade + rise dla treści zakładek */
.tab-content {
  opacity:0;
  transform:translateY(14px);
  transition:.4s;
}
.tab-content.active {
  opacity:1;
  transform:translateY(0);
}





/* ❌ Usunięcie pozostałości jakiejkolwiek linii */
.tab-btn::after {
  display:none !important;
}

/* 🔥 PREMIUM SZKLANE ZAKŁADKI Z AKCENTEM */
.tab-btn {
  position:relative;
  padding:12px 28px;
  background:rgba(255,255,255,.05);
  border-radius:14px;
  backdrop-filter:blur(18px);
  color:#a7a7a7 !important;
  transition:.35s;
  border:1px solid rgba(255,255,255,.08);
}

/* ✅ Nowy pomarańczowy akcent — neonowa poświata pod guzikiem */
.tab-btn.active {
  color:#fff !important;
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.25);
  box-shadow:
    0 0 22px rgba(242,86,35,.55),
    0 0 6px rgba(242,86,35,.75) inset;
}

/* Lekki hover */
.tab-btn:hover:not(.active) {
  background:rgba(255,255,255,.1);
  color:#ddd !important;
  box-shadow:0 0 12px rgba(242,86,35,.25);
}

/* ✅ Animacja treści — smooth cinematic */
.tab-content {
  opacity:0;
  transform:translateY(26px);
  transition:.5s cubic-bezier(.22,.61,.36,1);
}
.tab-content.active {
  opacity:1;
  transform:translateY(0);
}

/* 🌘 NIESPODZIANKA: Cinematic Spotlight Background */
.md-popup-inner {
  background:
    radial-gradient(circle at 50% 0%, rgba(242,86,35,.18), transparent 60%),
    rgba(12,12,12,.96);
  animation:bgPulse 4s ease-in-out infinite alternate;
}

/* Delikatna gra światła */
@keyframes bgPulse {
  0% { background-position:50% 0%; opacity:1; }
  100% { background-position:50% 6%; opacity:.94; }
}






/* ✅ USUNIĘCIE ANIMOWANEJ LINII W POPUPIE (100% nadpisanie) */
.md-popup-tabs {
  position: relative !important;
}

.md-tab-highlight {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transition: none !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3b9bdbe *//* 🚫 Domyślnie ukrywamy wersję mobile */
.md-duo-mobile {
  display: none;
}

/* ✅ Mobile Version */
@media(max-width:1024px){

  .md-duo { display:none !important; } /* Ukrywamy desktop */
  .md-duo-mobile {
    display:flex !important;
    flex-direction:column;
    gap:70px;
    padding:80px 0;
    background:#000;
  }

  .md-mobile-item{
    width:92vw;
    margin:0 auto;
    display:flex;
    gap:16px;
    align-items:flex-end;
  }

  .md-mobile-img{
    width:45%;
    aspect-ratio:2/3;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.15);
    cursor:pointer;
  }
  .md-mobile-img img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .md-mobile-text{
    width:55%;
    background:rgba(0,0,0,.65);
    padding:18px 16px;
    border-radius:10px;
    backdrop-filter:blur(6px);
  }

  .md-mobile-eyebrow{
    color:var(--accent);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:6px;
    display:block;
  }

  .md-mobile-head{
    color:#fff;
    font-family:'Bebas Neue',sans-serif;
    font-size:26px;
    margin:0 0 10px;
  }

  .md-mobile-desc{
    font-size:13px;
    line-height:1.45;
    color:#dcdcdc;
    margin-bottom:12px;
  }

  .md-mobile-btn{
    background:none;
    border:none;
    color:var(--accent);
    font-size:12px;
    text-transform:uppercase;
    cursor:pointer;
  }

  /* ✅ Popup mobile readability */
  .md-popup-inner{
    width:95vw !important;
    padding:70px 22px 50px !important;
    border-width:1px !important;
  }

  .tab-btn{
    font-size:11px !important;
    padding:10px 18px !important;
  }

  .tab-content{
    font-size:14px !important;
    line-height:1.55 !important;
    padding-top:32px !important;
  }
}



/* ✅ MOBILE VERSION ONLY */
@media(max-width:1024px){

  .md-duo { display:none !important; }
  .md-duo-mobile {
    display:flex !important;
    flex-direction:column;
    gap:50px;
    padding:40px 0 80px; /* mniej góry */
    background:#000;
  }

  .md-mobile-item{
    width:92vw;
    margin:0 auto;
    display:flex;
    gap:14px;
    align-items:center; /* ✅ wyrównane do środka */
  }

  .md-mobile-img{
    width:46%;
    aspect-ratio:2/3;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.18);
    cursor:pointer;
  }
  .md-mobile-img img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .md-mobile-text{
    width:54%;
    background:rgba(0,0,0,.55);
    padding:18px 14px;
    border-radius:10px;
    backdrop-filter:blur(6px);
    display:flex;
    flex-direction:column;
    justify-content:center; /* ✅ idealne centrowanie */
  }

  .md-mobile-eyebrow{
    color:var(--accent);
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:6px;
    display:block;
  }

  .md-mobile-head{
    color:#fff;
    font-family:'Bebas Neue',sans-serif;
    font-size:26px;
    margin:0 0 8px;
  }

  .md-mobile-desc{
    font-size:13px;
    line-height:1.45;
    color:#dcdcdc;
    margin-bottom:12px;
  }

  /* ✅ CTA bez różowego hovera */
  .md-mobile-btn{
    background:none !important;
    border:none !important;
    color:var(--accent) !important;
    font-size:12px;
    text-transform:uppercase;
    cursor:pointer;
    padding:6px 0;
  }
  .md-mobile-btn:hover,
  .md-mobile-btn:focus {
    color:var(--accent) !important;
    text-shadow:none !important;
    box-shadow:none !important;
  }

  /* ✅ Popup mobile poprawki */
  .md-popup{
    display:flex !important;
  }
  .md-popup-inner{
    width:95vw !important;
    padding:70px 18px 40px !important;
    border-width:1px !important;
  }

  .md-popup-tabs{
    gap:16px !important;
  }

  .tab-content{
    font-size:14px !important;
    line-height:1.55 !important;
    padding-top:32px !important;
  }
}






/* ================= ANIMACJE SCROLL — MOBILE ================= */
@media(max-width:1024px){

  .md-mobile-item {
    opacity:0;
    transform:translateY(40px);
    transition: 
      opacity .7s cubic-bezier(.22,.61,.36,1),
      transform .7s cubic-bezier(.22,.61,.36,1);
  }

  .md-mobile-item.animate-in {
    opacity:1;
    transform:translateY(0);
  }

  /* Tekst z lekkim opóźnieniem */
  .md-mobile-text {
    opacity:0;
    transform:translateY(30px);
    transition:
      opacity .6s .1s ease-out,
      transform .6s .1s ease-out;
  }

  .md-mobile-item.animate-in .md-mobile-text {
    opacity:1;
    transform:translateY(0);
  }

  /* Zdjęcie przyjemnie wjeżdża */
  .md-mobile-img {
    opacity:0;
    transform:translateY(30px);
    transition:
      opacity .8s .15s ease-out,
      transform .8s .15s ease-out;
  }

  .md-mobile-item.animate-in .md-mobile-img {
    opacity:1;
    transform:translateY(0);
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0016d56 */@media (max-width: 768px) {
.md-mobile-cta {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: #000; /* czyste czarne tło */
color: #fff;
padding: 60px 20px;
font-family: 'Inter Tight', sans-serif;
}

.md-heart-wrap {
margin-bottom: 12px;
}

.md-heart {
width: 46px;
height: 46px;
background: #F25623; /* jednolity pomarańcz */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
animation: md-pulse 1.8s infinite ease-in-out;
box-shadow: 0 0 22px rgba(242,86,35,0.4);
}

.md-heart svg {
width: 18px;
height: 18px;
}

@keyframes md-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 18px rgba(242,86,35,0.25); }
50% { transform: scale(1.08); box-shadow: 0 0 32px rgba(242,86,35,0.45); }
}

.md-number {
font-size: 40px;
font-family: 'Bebas Neue', sans-serif;
color: #F25623;
letter-spacing: 0.5px;
margin: 8px 0 6px;
}

.md-line {
font-size: 14px;
color: #DEDEDE;
max-width: 240px;
line-height: 1.5;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-da0fcf3 */:root{
  --brand:#F25623;         /* tło sekcji */
  --text:#DEDEDE;          /* kolor tekstu */
  --ink:#0A0A0A;           /* czarny (ramka, eyebrow, button text) */
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ===== Sekcja ===== */
.md-cta-orange{
  position:relative;
  min-height:100vh;
  background:var(--brand);
  color:var(--text);
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  /* tylko górne rogi zaokrąglone */
  border-radius: 36px 36px 0 0;
}

/* Parallax tła */
.md-parallax{
  position:absolute; inset:-30%;
  pointer-events:none;
  filter: blur(90px);
  opacity:.55;
}
.md-parallax.l1{
  background:
    radial-gradient(50% 50% at 35% 40%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(36% 36% at 70% 65%, rgba(0,0,0,.20) 0%, rgba(0,0,0,0) 60%);
  mix-blend-mode: screen;
  transform: translate3d(-6%, -4%, 0) scale(1.05);
  animation: parDrift1 16s ease-in-out infinite alternate;
}
.md-parallax.l2{
  background:
    radial-gradient(40% 40% at 70% 30%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(30% 30% at 20% 75%, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 60%);
  mix-blend-mode: screen;
  transform: translate3d(4%, 5%, 0) scale(1.02);
  animation: parDrift2 18s ease-in-out infinite alternate;
}
@keyframes parDrift1{0%{transform:translate3d(-6%,-4%,0) scale(1.05)}100%{transform:translate3d(4%,3%,0) scale(1.08)}}
@keyframes parDrift2{0%{transform:translate3d(4%,5%,0) scale(1.02)}100%{transform:translate3d(-3%,-2%,0) scale(1.03)}}

/* Kontener – WYŚRODKOWANY */
.md-cta-wrap{
  position:relative; z-index:2;
  width:min(1200px, 86vw);
  text-align:center;                /* wyśrodkowanie tekstów */
  margin-inline:auto;
  --p:0; /* 0..1 progress scroll (JS) */
}

/* Eyebrow – czarny */
.md-eyebrow{
  font-size:12px; letter-spacing:3px; text-transform:uppercase;
  color:var(--ink);
  margin-bottom:16px;
  opacity:.95;
}

/* Headline */
.md-headline{
  font-family:'Bebas Neue', sans-serif;
  text-transform:uppercase;
  line-height:.86;
  font-size: clamp(54px, 10vw, 170px);
  margin:0 0 .45em 0;
  position:relative;
  transform: scale(calc(1.04 - .04*var(--p)));
  will-change: transform;
}
.h-line{ display:block; white-space:nowrap; letter-spacing: calc(0.02em - 0.02em*var(--p)); }

/* „Zakreślenie” słowa — CZARNA ramka + subtelny puls */
.stroke-box{
  position:relative; z-index:0;
}
.stroke-box::before{
  content:""; position:absolute; inset:-.06em -.20em;
  border:3px solid var(--ink);             /* czarna ramka */
  border-radius:42px;
  transform: rotate(-2deg) scaleX(calc(.7 + .3*var(--p)));
  opacity:calc(.9 + .1*var(--p));
  z-index:-1;
  animation: strokePulse 3.6s ease-in-out infinite;
}
@keyframes strokePulse{
  0%,100%{ box-shadow: 0 0 0 rgba(0,0,0,0); }
  50%{ box-shadow: 0 0 12px rgba(0,0,0,.18); }
}

/* Linia „cięcie” – żywa */
.brand-line{
  position:absolute; left:50%; transform:translateX(-50%) scaleX(calc(.3 + .7*var(--p)));
  bottom:-12px; height:3px;
  width:min(1100px, 90%);
  background:linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,.95) 18% 82%, transparent 92% 100%);
  opacity: calc(.22 + .78*var(--p));
  transform-origin:center;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.45));
  animation: lineSpark 2.8s var(--ease) infinite;
}
@keyframes lineSpark{
  0%,100% { filter: drop-shadow(0 0 6px rgba(255,255,255,.35)); }
  50%     { filter: drop-shadow(0 0 14px rgba(255,255,255,.6)); }
}

/* Copy */
.md-sub{
  font-family:'Inter Tight', system-ui, sans-serif;
  color: rgba(255,255,255,.95);
  max-width: 820px;
  margin: 16px auto 28px;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height:1.75;
  opacity: calc(.0 + 1*var(--p));
  transform: translateY(calc(18px*(1 - var(--p))));
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}

/* Button – stały CZARNY napis, jasne tło na hover, ring pulse */
.md-btn{
  position:relative;
  display:inline-flex; align-items:center; gap:14px;
  padding:16px 30px;
  border-radius:60px;
  border:1px solid rgba(255,255,255,.85);
  background: rgba(255,255,255, .16);   /* delikatna biel od startu */
  color: var(--ink);                    /* CZARNY TEKST ZAWSZE */
  font-family:'Inter Tight', system-ui, sans-serif;
  font-weight:800; letter-spacing:.02em;
  font-size: clamp(16px, 1.4vw, 20px);
  cursor:pointer;
  transform: translateY(calc(26px*(1 - var(--p))));
  opacity: calc(.0 + 1*var(--p));
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  overflow:hidden;
  will-change: transform;
  animation: breathe 3.8s ease-in-out infinite both 1s;
}
@keyframes breathe{ 0%,100%{ box-shadow:0 0 0 rgba(255,255,255,0); } 50%{ box-shadow:0 0 28px rgba(255,255,255,.18); } }

.md-btn .btn-text{ color: var(--ink); }  /* safeguard */
.md-btn .btn-circle{
  background: #FFFFFF;
  color:#000;
  border-radius:50%;
  width: 28px; height: 28px;
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.md-btn .btn-pulse{
  position:absolute; inset:0; border-radius:60px;
  background: radial-gradient(circle, rgba(255,255,255,0.35), transparent 70%);
  opacity:0; pointer-events:none;
}

/* Hover – NIE gubi napisu: tło jaśniejsze, tekst nadal czarny */
.md-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255, .95);
  color: var(--ink);
  box-shadow:0 12px 44px rgba(0,0,0,.25), 0 0 22px rgba(255,255,255,.22);
}
.md-btn:hover .btn-circle{
  transform: rotate(45deg) scale(1.08);
  box-shadow: 0 0 18px rgba(0,0,0,.25);
}

/* Desktop parallax toggle dla nagłówka */
.md-cta-orange.parallax-on .md-headline{ transition: transform .12s linear; }

/* Responsive */
@media (max-width: 900px){
  .md-headline{ font-size: clamp(42px, 13vw, 96px); }
  .md-sub{ max-width: 94%; }
}








/* OG upgrade wyróżnienia */
.stroke-box{
  position:relative;
  display:inline-block;
  z-index:1;
  transition:transform .25s var(--ease);
}

.stroke-box::before{
  content:"";
  position:absolute; inset:-.06em -.20em;
  border:3px solid var(--ink);
  border-radius:42px;
  transform: rotate(-3deg) scaleX(calc(.72 + .28*var(--p)));
  opacity:calc(.96 + .04*var(--p));
  z-index:-1;
  animation: framePulse 3.4s ease-in-out infinite, frameWave 7s ease-in-out infinite;
}

@keyframes framePulse{
  0%,100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
  50%    { box-shadow: 0 0 18px rgba(0,0,0,.26); }
}

@keyframes frameWave{
  0%,100% { transform: rotate(-3deg) scale(1); }
  50%     { transform: rotate(-2deg) scale(1.03); }
}

/* brandowy glow za słowem */
.stroke-box::after{
  content:attr(data-text);
  position:absolute; inset:0;
  z-index:-2;
  color:rgba(0,0,0,0.12);
  filter:blur(4px);
  animation: glowBreath 4.6s ease-in-out infinite;
}
@keyframes glowBreath{
  0%,100% { opacity:.32; transform: translateY(0); }
  50%     { opacity:.6; transform: translateY(-2px); }
}

/* MIKRO-GLITCH na scroll */
.md-cta-orange.glitch-on .stroke-box{
  transform:translateX(2px) rotate(-1deg);
}






/* 🔽 Jeszcze mniejszy CTA na mobile */
@media (max-width:600px){
  .md-btn{
    padding:10px 18px;      /* było 14px 22px → ciaśniej */
    font-size:12.5px;       /* było 14px → subtelniej */
    border-radius:50px;     /* bardziej kompaktowo */
  }
  .md-btn .btn-circle{
    width:20px; 
    height:20px;
    font-size:13px;
  }
  .md-btn .btn-text{
    font-size:13px;
    letter-spacing:.01em;
  }
}







/* === UNDERLINE GLOW (bez pseudo-elementów) === */
.stroke-box{
  /* nic nie kasujesz – dokładamy tylko tło-underline sterowane klasą */
  background-image: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,1) 50%, rgba(255,255,255,.85));
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 0% 4px;               /* start: brak */
  transition:
    background-size .28s cubic-bezier(.22,1,.36,1),
    transform .22s cubic-bezier(.22,1,.36,1),
    text-shadow .22s cubic-bezier(.22,1,.36,1);
  transform-style: preserve-3d;
  --tx:0; --ty:0;                         /* tilt (JS) */
  transform: rotateX(calc(var(--ty)*1deg)) rotateY(calc(var(--tx)*1deg)) translateZ(0);
}

.stroke-box.hover-on{
  background-size: 100% 4px;              /* underline rośnie do 100% */
}

/* === SPARKLES (wstrzykiwane z JS – nic nie zmieniasz w HTML) === */
.md-spark{
  position:absolute;
  width:6px; height:6px;
  border-radius:50%;
  background: #ffffff;
  box-shadow:
    0 0 12px rgba(255,255,255,.85),
    0 0 24px rgba(255,255,255,.55);
  pointer-events:none;
  mix-blend-mode: screen;
  animation: sparkPop .7s cubic-bezier(.22,1,.36,1) forwards;
  z-index:4;
}
@keyframes sparkPop{
  0%   { transform: translate(-50%,-50%) scale(.6); opacity:.95; }
  60%  { transform: translate(var(--dx,0), var(--dy,0)) scale(1.2); opacity:.9; }
  100% { transform: translate(var(--dx2,0), var(--dy2,0)) scale(.1); opacity:0; }
}

/* szacunek dla prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .stroke-box{ transition: background-size .2s linear; transform:none !important; }
  .md-spark{ display:none !important; }
}








/* 🔽 Zwężamy wysokość sekcji o ok. 30% od dołu */
.md-cta-orange{
  min-height: 70vh; /* było 100vh → 70vh = -30% */
  padding-top: 10vh; /* żeby headline nie przykleił się do góry */
  padding-bottom: 6vh; /* lekkie oddychanie CTA nad dołem */
}/* End custom CSS */