.elementor-6609 .elementor-element.elementor-element-8b4bb4e{--display:flex;}.elementor-6609 .elementor-element.elementor-element-aef496a{margin:-37px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-6609 .elementor-element.elementor-element-0784ed5{--display:flex;}.elementor-6609 .elementor-element.elementor-element-7bce796{--display:flex;}@media(max-width:767px){.elementor-6609 .elementor-element.elementor-element-7c46923{margin:-18px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-6609 .elementor-element.elementor-element-f2d516e{margin:-47px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}/* Start custom CSS for html, class: .elementor-element-3f23158 *//* ======= DESKTOP WEB SECTION — FINAL REFINED ======= */
.web-desktop-section {
background: var(--bg);
color: var(--off);
text-align: center;
padding: 14vh 8vw;
position: relative;
overflow: hidden;
}

/* HERO HEADLINE */
.web-desktop-head h2 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(56px, 8vw, 120px); /* delikatnie mniejszy */
letter-spacing: 1.3px;
text-transform: uppercase;
color: var(--off);
line-height: 0.9;
margin-bottom: 20px;
position: relative;
text-shadow:
0 0 24px rgba(255,255,255,0.08),
0 0 50px rgba(242,86,35,0.22);
}

.web-desktop-head .accent {
color: var(--brand);
text-shadow:
0 0 12px rgba(242,86,35,0.5),
0 0 28px rgba(242,86,35,0.3);
}

/* SUBTEXT — jedna linia, premium look */
.web-desktop-head p {
font-family: 'Inter Tight', sans-serif;
font-size: 22px;
opacity: .8;
max-width: none; /* 💡 brak ograniczenia szerokości */
margin: 10px auto 60px;
line-height: 1.4;
color: rgba(255,255,255,0.85);
white-space: nowrap; /* 🔥 jedna linia */
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.4px;
}

/* Tabs */
.web-desktop-tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 18px;
margin-bottom: 60px;
}

.web-desktop-tabs .tab {
all: unset;
cursor: pointer;
padding: 14px 32px;
border-radius: 60px;
border: 1px solid rgba(255,255,255,.1);
color: rgba(255,255,255,.65);
font-family: 'Inter Tight', sans-serif;
font-size: 16px;
letter-spacing: .4px;
transition: all .35s cubic-bezier(.22,1,.36,1);
position: relative;
overflow: hidden;
}

.web-desktop-tabs .tab:hover {
color: var(--off);
border-color: var(--brand);
box-shadow: 0 0 18px rgba(242,86,35,.3);
}

.web-desktop-tabs .tab.active {
background: var(--brand);
color: var(--off);
box-shadow: 0 0 36px rgba(242,86,35,.4);
}

/* Content area */
.web-desktop-content {
max-width: 880px;
margin: 0 auto 80px;
position: relative;
min-height: 140px;
}

.web-desktop-content .content {
opacity: 0;
transform: translateY(20px);
pointer-events: none;
transition: all .6s cubic-bezier(.22,1,.36,1);
position: absolute;
left: 0;
right: 0;
}

.web-desktop-content .content.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

.web-desktop-content p {
font-family: 'Inter Tight', sans-serif;
font-size: 20px;
line-height: 1.8;
color: rgba(255,255,255,.85);
}

/* CTA */
.web-desktop-cta {
display: inline-block;
background: var(--brand);
color: var(--off);
font-family: 'Inter Tight', sans-serif;
padding: 16px 48px;
border-radius: 50px;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 1px;
transition: all .35s cubic-bezier(.22,1,.36,1);
position: relative;
overflow: hidden;
}

.web-desktop-cta::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 100%);
transform: translateX(-100%);
transition: transform .6s ease;
}

.web-desktop-cta:hover::before {
transform: translateX(100%);
}

.web-desktop-cta:hover {
box-shadow: 0 0 32px rgba(242,86,35,.45);
transform: scale(1.05);
}

/* RESPONSIVE CLEANUP */
@media (max-width: 1280px) {
.web-desktop-head h2 {
font-size: clamp(48px, 7vw, 100px);
}
.web-desktop-head p {
font-size: 20px;
margin-bottom: 50px;
}
}

@media (max-width: 1024px) {
.web-desktop-section {
padding: 10vh 6vw;
}
.web-desktop-head h2 {
font-size: clamp(42px, 6.5vw, 84px);
}
.web-desktop-head p {
font-size: 18px;
white-space: normal; /* 💡 przy mniejszych ekranach pozwalamy się zawijać */
}
}



.web-header {
text-align: center;
margin-bottom: 5vh;
position: relative;
}

.web-header h2 {
font-family: "Bebas Neue", sans-serif;
line-height: 1;
text-transform: uppercase;
display: inline-block;
text-align: left;
}

.web-header .small-top {
display: block;
font-size: clamp(36px, 4vw, 60px);
letter-spacing: 1px;
color: #f5f5f5;
opacity: 0.85;
margin-bottom: -0.55em;
text-align: left;
}

.web-header .big-bottom {
display: block;
font-size: clamp(68px, 9vw, 140px);
color: #f25623;
letter-spacing: 1px;
background: linear-gradient(90deg, #f25623, #ff8755);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: subtleFade 4s ease-in-out infinite alternate;
text-align: left;
margin-top: -0.05em;
}

.web-header p {
font-family: "Inter Tight", sans-serif;
font-size: clamp(16px, 1.1vw, 20px);
color: #bfbfbf;
white-space: nowrap; /* NIE łamie się tekst */
overflow: hidden;
text-overflow: ellipsis;
margin: 6px auto 0; /* bliżej nagłówka */
line-height: 1.5;
text-align: center;
transform: translateY(-5px); /* delikatnie wyżej */
}

.web-header + .button-section {
margin-top: 35px; /* przyciski delikatnie niżej */
}

@keyframes subtleFade {
0% {
filter: brightness(1) saturate(1);
}
100% {
filter: brightness(1.3) saturate(1.2);
}
}



.web-header .big-bottom {
  display: block;
  font-size: clamp(68px, 9vw, 140px);
  color: #f25623; /* ✅ stały kolor, bez gradientu */
  letter-spacing: 1px;
  background: none; /* usuwa gradient */
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  animation: none; /* usuwa animację subtleFade */
  text-align: left;
  margin-top: -0.05em;
}




/* ====== TEKST W SEKCJI STRONY INTERNETOWE (WEB-DESKTOP) ====== */
.web-desktop-content p {
font-size: clamp(14px, 0.9vw, 15.5px);
line-height: 1.7;
max-width: 760px;
margin: 2.5rem auto 0 auto;
opacity: 0.88;
font-weight: 300;
text-align: justify;
color: #fff;
}

/* delikatne wygładzenie i optyczna równowaga */
.web-desktop-content {
padding-bottom: 2rem;
}

.web-desktop-content p br {
display: block;
margin-bottom: 0.6rem;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7a02458 */:root {
  --brand: #F25623;
  --off: #f5f5f5;
  --gray: #9b9b9b;
  --bg: #000;
  --ease: cubic-bezier(.22,1,.36,1);
}

.md-stats-section {
  background: var(--bg);
  color: var(--off);
  padding: 140px 6vw;
  display: flex;
  justify-content: center;
}

.md-stats-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 90px;
  max-width: 1250px;
  text-align: center;
}

/* === BLOK === */
.md-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  transition: transform .6s var(--ease);
}
.md-stat:hover { transform: translateY(-4px); }

/* === LOADER === */
.md-loader {
  position: relative;
  width: 190px;
  height: 190px;
  filter: drop-shadow(0 0 12px rgba(242,86,35,.4))
          drop-shadow(0 0 48px rgba(242,86,35,.25))
          drop-shadow(0 0 80px rgba(242,86,35,.15));
}
.md-loader svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.track {
  fill: none;
  stroke: rgba(255,255,255,.08);
  stroke-width: 6;
}
.progress {
  fill: none;
  stroke: url(#grad);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 339;
  stroke-dashoffset: 339;
  transition: stroke-dashoffset 1.8s var(--ease);
}

/* === gradient na pierścieniu === */
.md-loader svg defs linearGradient {
  stop-color: var(--brand);
}
.md-loader svg defs stop:first-child {
  stop-color: #ffb07b;
}
.md-loader svg defs stop:last-child {
  stop-color: #F25623;
}

/* === ŚWIECĄCY PUNKT === */
.glow-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle, #fff8e1 0%, #F25623 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(2px) drop-shadow(0 0 10px #F25623);
  transform: translate(-50%, -50%) rotate(0deg) translate(85px);
  animation: orbit 2s var(--ease) forwards;
  opacity: 0;
}
@keyframes orbit {
  from { transform: translate(-50%, -50%) rotate(0deg) translate(85px); opacity: 1; }
  to { transform: translate(-50%, -50%) rotate(360deg) translate(85px); opacity: 1; }
}

/* === ŚRODEK === */
.md-loader-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--off);
  font-family: 'Inter Tight', sans-serif;
}
.num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 58px;
  line-height: 1;
}
.unit {
  font-size: 16px;
  color: var(--gray);
  margin-top: -4px;
}

/* === TEKSTY === */
.md-stat-text h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--off);
  margin-bottom: 10px;
}
.md-stat-text p {
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  color: var(--gray);
  line-height: 1.6;
  max-width: 300px;
  margin: 0 auto;
}

/* === RESPONSYWNOŚĆ === */
@media (max-width: 900px) {
  .md-stats-wrap {
    grid-template-columns: 1fr;
    gap: 80px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-aef496a *//* === SEKCJA RÓŻNICA – PREMIUM GLOW === */
.compare-section {
width: min(1400px, 92vw);
margin: 0 auto;
padding: 12vh 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 6vw;
color: #f5f5f5;
}

/* LEWA STRONA – TYTUŁ I OPIS */
.difference-section {
flex: 0 0 40%;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}

.difference-title {
font-family: "Bebas Neue", sans-serif;
font-size: clamp(52px, 6vw, 110px);
line-height: 1;
margin-bottom: 1rem;
position: relative;
z-index: 2;
}

.difference-title .difference-main {
color: #f25623;
display: block;
letter-spacing: 0.5px;
text-shadow: 0 0 20px rgba(242, 86, 35, 0.25);
}

.difference-title .difference-sub {
color: #f5f5f5;
font-size: clamp(28px, 2vw, 36px);
opacity: 0.9;
display: block;
}

.difference-desc {
font-family: "Inter Tight", sans-serif;
font-size: 16px;
line-height: 1.7;
color: rgba(245, 245, 245, 0.8);
max-width: 90%;
margin-top: 0.5rem;
}

/* PRAWA STRONA – TABELA */
.compare-table {
flex: 0 0 58%;
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
}

.compare-table::before {
content: "";
position: absolute;
top: -10%;
left: -5%;
width: 110%;
height: 120%;
background: radial-gradient(circle at top left, rgba(242, 86, 35, 0.08), transparent 60%);
z-index: 0;
pointer-events: none;
}

.compare-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: stretch;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
overflow: hidden;
transition: all 0.4s cubic-bezier(.22, 1, .36, 1);
position: relative;
z-index: 1;
}

.compare-row:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(242, 86, 35, 0.25);
transform: translateY(-3px);
box-shadow: 0 0 25px rgba(242, 86, 35, 0.08);
}

/* NAGŁÓWEK TABELI */
.compare-row.compare-head {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
text-transform: uppercase;
font-family: "Bebas Neue", sans-serif;
font-size: 20px;
letter-spacing: 1px;
color: #f5f5f5;
}

/* KOMÓRKI */
.compare-cell {
padding: 18px 22px;
font-family: "Inter Tight", sans-serif;
font-size: 15px;
line-height: 1.6;
color: #fff;
position: relative;
z-index: 2;
}

.compare-cell.label {
font-weight: 600;
color: #f25623;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.compare-cell.our {
color: #fff;
}

.compare-cell.others {
color: rgba(255, 255, 255, 0.65);
}

/* DROBNE INTERAKCJE */
.compare-cell.our:hover {
color: #fff;
text-shadow: 0 0 12px rgba(242, 86, 35, 0.4);
}
.compare-cell.others:hover {
color: rgba(255, 255, 255, 0.85);
}

/* === RESPONSYWNOŚĆ === */
@media (max-width: 1024px) {
.compare-section {
flex-direction: column;
gap: 6vh;
padding: 8vh 0;
}

.difference-section {
text-align: center;
}

.difference-desc {
max-width: 100%;
margin: 0 auto;
}

.compare-table {
flex: unset;
}

.compare-row {
grid-template-columns: 1fr;
text-align: center;
border-radius: 10px;
}

.compare-cell {
padding: 14px 18px;
}

.compare-row.compare-head {
display: none;
}

.compare-cell.label {
margin-top: 6px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7c46923 */root {
--brand: #F25623;
--bg: #000;
--off: #fff;
--muted: #bfbfbf;
--ease: cubic-bezier(.22,1,.36,1);
}

/* ====== SEKCJA MOBILE WEB ====== */
.web-mobile {
background: var(--bg);
color: var(--off);
padding: 10vh 6vw 12vh;
text-align: center;
font-family: 'Inter Tight', sans-serif;
}

/* ====== NAGŁÓWEK ====== */
.web-mobile-head h2 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(42px, 8vw, 72px);
letter-spacing: 1px;
margin-bottom: 12px;
text-transform: uppercase;
line-height: 1.05;
}
.web-mobile-head .accent {
color: var(--brand);
}

.web-mobile-head p {
color: var(--muted);
font-size: 15px;
margin-bottom: 40px;
line-height: 1.7;
}

/* ====== TABS ====== */
.web-mobile-tabs {
display: flex;
overflow-x: auto;
gap: 10px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255,255,255,0.08);
scrollbar-width: none;
}
.web-mobile-tabs::-webkit-scrollbar {
display: none;
}

.web-mobile-tabs .tab {
background: none;
border: 1px solid rgba(255,255,255,0.15);
color: var(--muted);
padding: 8px 16px;
border-radius: 50px;
font-size: 14px;
letter-spacing: .3px;
transition: all .35s var(--ease);
white-space: nowrap;
}
.web-mobile-tabs .tab.active {
background: var(--brand);
color: var(--off);
box-shadow: 0 0 14px rgba(242,86,35,0.4);
}

/* ====== SCROLL HINT ====== */
.scroll-hint {
position: relative;
display: flex;
justify-content: center;
margin-top: -10px;
margin-bottom: 6px;
height: 20px;
}

.scroll-hint .hint-arrow {
color: rgba(255,255,255,0.35);
font-family: 'Bebas Neue', sans-serif;
font-size: 18px;
letter-spacing: 1px;
animation: hintMove 1.8s ease-in-out infinite;
text-shadow: 0 0 10px rgba(255,255,255,0.15);
}

@keyframes hintMove {
0% { transform: translateX(0); opacity: 0.5; }
50% { transform: translateX(6px); opacity: 1; }
100% { transform: translateX(0); opacity: 0.5; }
}

.web-mobile-tabs {
position: relative;
}
.web-mobile-tabs::after {
content: "";
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 40px;
background: linear-gradient(to right, transparent, rgba(0,0,0,0.8));
pointer-events: none;
}

/* ====== TREŚĆ ====== */
.web-mobile-content {
margin-top: 40px;
min-height: 200px;
}

.tab-content {
display: none;
opacity: 0;
transform: translateY(10px);
transition: opacity .5s var(--ease), transform .5s var(--ease);
color: var(--off);
font-size: 15px;
line-height: 1.75;
}
.tab-content.active {
display: block;
opacity: 1;
transform: translateY(0);
}

/* ====== CTA ====== */
.web-mobile-cta {
display: inline-block;
margin-top: 70px;
padding: 12px 28px;
border: 1px solid var(--brand);
color: var(--off);
text-decoration: none;
border-radius: 40px;
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 1px;
font-size: 16px;
transition: all .35s var(--ease);
}
.web-mobile-cta:hover {
background: var(--brand);
box-shadow: 0 0 18px rgba(242,86,35,0.4);
transform: scale(1.03);
}





/* ====== UI/UX BOOST – wersja PREMIUM (Apple-style) ====== */

/* --- subtelne tło ze światłem i gradientem --- */
.web-mobile {
position: relative;
background: radial-gradient(circle at 30% 10%, rgba(255,255,255,0.05) 0%, transparent 50%) var(--bg);
overflow: hidden;
}
.web-mobile::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 80% 80%, rgba(255, 100, 0, 0.12), transparent 60%);
mix-blend-mode: screen;
opacity: 0.8;
pointer-events: none;
animation: softGlow 10s ease-in-out infinite alternate;
}

@keyframes softGlow {
0% { opacity: 0.4; transform: scale(1); }
100% { opacity: 0.9; transform: scale(1.2); }
}

/* --- efekt glassy pod tabami --- */
.web-mobile-tabs {
backdrop-filter: blur(8px);
background: rgba(255,255,255,0.04);
border-radius: 14px;
padding: 10px;
margin-bottom: 16px;
border: 1px solid rgba(255,255,255,0.05);
}


.web-mobile-tabs::after {
right: 0;
background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent);
}

/* Strzałki */
.scroll-hint-left,
.scroll-hint-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
color: #fff;
font-size: 18px;
z-index: 20;
transition: opacity 0.4s ease, visibility 0.4s ease;
cursor: pointer;
}

.scroll-hint-right {
right: -12px;
animation: pulseRight 1.6s infinite ease-in-out;
}

.scroll-hint-left {
left: -12px;
transform: translateY(-50%) rotate(180deg);
opacity: 0;
visibility: hidden;
animation: pulseLeft 1.6s infinite ease-in-out;
}

@keyframes pulseRight {
0%, 100% { opacity: 0.85; transform: translateY(-50%) translateX(0); }
50% { opacity: 1; transform: translateY(-50%) translateX(3px); }
}

@keyframes pulseLeft {
0%, 100% { opacity: 0.85; transform: translateY(-50%) rotate(180deg) translateX(0); }
50% { opacity: 1; transform: translateY(-50%) rotate(180deg) translateX(3px); }
}

/* Znikanie przy końcach */
.scroll-hint-left.hide,
.scroll-hint-right.hide {
opacity: 0;
visibility: hidden;
}





/* --- aktywny tab z efektem pulsującego światła --- */
.web-mobile-tabs .tab.active {
position: relative;
z-index: 1;
box-shadow: 0 0 14px rgba(242,86,35,0.45);
}
.web-mobile-tabs .tab.active::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50px;
background: radial-gradient(circle at center, rgba(242,86,35,0.25), transparent 70%);
animation: pulseLight 2.4s ease-in-out infinite;
}
@keyframes pulseLight {
0%,100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 0.9; transform: scale(1.1); }
}

/* --- tekst – lekki parallax i fade wejścia --- */
.web-mobile-head h2 {
position: relative;
z-index: 2;
animation: slideFade 1.2s var(--ease) both;
}
@keyframes slideFade {
0% { opacity: 0; transform: translateY(25px); }
100% { opacity: 1; transform: translateY(0); }
}

/* --- CTA button – glass glow + klik efekt --- */
.web-mobile-cta {
background: rgba(242,86,35,0.08);
backdrop-filter: blur(6px);
border: 1px solid rgba(242,86,35,0.4);
text-shadow: 0 0 8px rgba(255,255,255,0.15);
box-shadow: inset 0 0 12px rgba(242,86,35,0.2);
transition: all 0.4s var(--ease);
}
.web-mobile-cta:hover {
background: rgba(242,86,35,0.25);
box-shadow: 0 0 22px rgba(242,86,35,0.45), inset 0 0 18px rgba(242,86,35,0.25);
transform: scale(1.05);
}

/* --- subtelne światło scrolla (gradient) --- */
.web-mobile::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
pointer-events: none;
z-index: 0;
}

/* --- delikatne światło na tekstach aktywnych --- */
.tab-content.active p {
text-shadow: 0 0 6px rgba(255,255,255,0.05);
}





/* === USUNIĘCIE GRADIENTU / CIEMNEGO PRZYCIEMNIENIA === */
.web-mobile-tabs::after {
display: none !important;
background: none !important;
content: none !important;
}




/* ====== ZMNIEJSZENIE DŁUGIEJ TREŚCI W SEKCJI WEB-MOBILE ====== */
.web-mobile-content p {
font-size: clamp(13.5px, 3.5vw, 16px);
line-height: 1.65;
opacity: 0.9;
text-align: justify;
margin-bottom: 1.5rem;
color: #f5f5f5;
letter-spacing: 0.05px;
}



@media (max-width: 1024px) {
.web-mobile-tabs {
width: 100vw !important; /* pełna szerokość ekranu */
margin-left: calc(-50vw + 50%) !important; /* wyrównanie do krawędzi ekranu */
border-radius: 0 !important; /* usuwa zaokrąglenie */
justify-content: center;
background: rgba(255, 255, 255, 0.02); /* delikatne tło */
backdrop-filter: blur(4px); /* lekki efekt szkła */
padding: 10px 0;
}

.web-mobile-tabs button {
flex: 1;
border-radius: 0;
font-size: 15px;
}

.web-mobile-tabs button.active {
background: linear-gradient(90deg, #ff5200, #ff7730);
color: #fff;
}
}


@media (max-width: 1024px) {
.web-mobile-tabs {
position: relative;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
box-sizing: border-box;
padding: 10px 20px !important; /* wyższy pasek i więcej przestrzeni */
justify-content: flex-start;
scroll-behavior: smooth;
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(4px);
border-radius: 0;
}

.web-mobile-tabs::-webkit-scrollbar {
display: none;
}

.web-mobile-tabs button {
flex-shrink: 0;
scroll-snap-align: start;
margin-right: 10px !important;
padding: 10px 18px !important;
border-radius: 999px;
}

/* 🔸 Oddech po lewej stronie */
.web-mobile-tabs button:first-child {
margin-left: 6px !important;
}

.web-mobile-tabs button:last-child {
margin-right: 16px !important;
}
}








@media (max-width: 1024px) {
.web-mobile-tabs {
display: flex;
justify-content: flex-start;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 10px 0 !important;
scroll-padding-left: 20px; /* 🟠 kluczowy oddech przy pierwszym elemencie */
}

.web-mobile-tabs::-webkit-scrollbar {
display: none;
}

.web-mobile-tabs button {
flex-shrink: 0;
scroll-snap-align: start;
padding: 10px 18px !important;
border-radius: 999px;
margin-left: 2px; /* 🔸 mikrowyrównanie */
}

/* Zapewnia, że pierwsza pozycja zaczyna się z marginesem */
.web-mobile-tabs button:first-child {
margin-left: 20px !important; /* 🟠 to zapewnia widoczny oddech od lewej krawędzi */
}

.web-mobile-tabs button:last-child {
margin-right: 20px; /* zachowujemy symetrię */
}
}





.web-mobile-tabs {
position: relative;
overflow-x: auto;
white-space: nowrap;
scroll-behavior: smooth;
padding: 0 8px; /* lekki oddech od krawędzi */
}






/* ======= STRZAŁKA – KRÓTSZA, IDEALNIE OSADZONA ======= */
.scroll-hint-right {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 55px; /* 🔹 skrócone tło – tylko pod strzałką */
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 10;
transition: opacity 0.4s ease;

/* Głębokie tło z lekkim rozmyciem tylko pod strzałką */
background: radial-gradient(
circle at 65% center,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.95) 25%,
rgba(0, 0, 0, 0.85) 45%,
rgba(0, 0, 0, 0.6) 70%,
rgba(0, 0, 0, 0.2) 100%
);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}

/* ======= Sama strzałka ======= */
.scroll-hint-right .arrow {
font-size: 26px;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
animation: arrowPulse 1.6s ease-in-out infinite;
}

/* ======= Pulsowanie ======= */
@keyframes arrowPulse {
0%, 100% {
transform: translateX(0);
opacity: 0.7;
}
50% {
transform: translateX(6px);
opacity: 1;
}
}

/* ======= Ukrywanie przy scrollu ======= */
.scroll-hint-right.hide {
opacity: 0;
visibility: hidden;
}



.scroll-hint-right {
opacity: 0;
animation: appear 1.2s ease 0.3s forwards;
}

@keyframes appear {
from { opacity: 0; transform: translateX(10px); }
to { opacity: 1; transform: translateX(0); }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f2d516e */@media (max-width:1024px){
:root{
--brand:#F25623;
--off:#f5f5f5;
--muted:#999;
--bg:#000;
}

.md-diff2{
background:var(--bg);
color:var(--off);
padding:10vh 5vw;
position:relative;
border-radius:28px 28px 0 0;
overflow:hidden;
}

.md-diff2::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 50% 120%, rgba(242,86,35,.15), transparent 60%);
filter:blur(60px);
opacity:.5;
}

.md2-head{
position:relative;
z-index:2;
text-align:center;
margin-bottom:6vh;
}
.md2-head h2{
font-family:'Bebas Neue',sans-serif;
text-transform:uppercase;
font-size:clamp(34px,9vw,52px);
line-height:.95;
}
.md2-head .accent{color:var(--brand);}
.md2-head p{
font-family:'Inter Tight',sans-serif;
color:var(--muted);
font-size:14px;
margin-top:10px;
}

.md2-list{position:relative; z-index:2; display:flex; flex-direction:column; gap:12px;}

.md2-item{
background:rgba(255,255,255,.03);
backdrop-filter:blur(10px);
border-radius:16px;
overflow:hidden;
transition:all .5s cubic-bezier(.22,1,.36,1);
}

.md2-toggle{
width:100%;
padding:16px 18px;
border:none;
background:none;
font-family:'Bebas Neue',sans-serif;
font-size:18px;
text-transform:uppercase;
color:var(--off);
text-align:left;
cursor:pointer;
position:relative;
transition:color .3s;
}
.md2-toggle::after{
content:"＋";
position:absolute;
right:18px; top:50%;
transform:translateY(-50%);
color:var(--brand);
font-size:18px;
transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.md2-item.active .md2-toggle::after{
content:"−";
transform:translateY(-50%) rotate(180deg);
}

.md2-content{
max-height:0;
opacity:0;
overflow:hidden;
transition:max-height 1s cubic-bezier(.25,1,.3,1), opacity .6s ease;
display:flex;
flex-direction:column;
gap:14px;
padding:0 18px;
}
.md2-item.active .md2-content{
padding:20px 18px 24px;
max-height:400px;
opacity:1;
}

.md2-content .col{
padding:16px;
border-radius:12px;
background:rgba(255,255,255,.02);
position:relative;
}
.md2-content .col.left h3{color:var(--brand);}
.md2-content .col.right h3{color:rgba(255,255,255,.8);}
.md2-content .col h3{
font-family:'Bebas Neue',sans-serif;
font-size:16px;
text-transform:uppercase;
margin-bottom:6px;
}
.md2-content .col p{
font-family:'Inter Tight',sans-serif;
font-size:13.5px;
line-height:1.6;
color:rgba(255,255,255,.9);
margin:0;
}

.md2-content .vs{
align-self:center;
justify-self:center;
text-align:center;
color:var(--brand);
font-family:'Bebas Neue',sans-serif;
font-size:14px;
letter-spacing:1px;
}

.md2-item.active{
background:rgba(242,86,35,.08);
box-shadow:0 0 30px rgba(242,86,35,.2);
}
}







@media (max-width:1024px) {
  /* 🔥 Pełne wyłączenie różowego efektu kliknięcia na mobile 🔥 */
  .md2-toggle,
  .md2-toggle:focus,
  .md2-toggle:active {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
    outline: none !important;
    background: none !important;
    box-shadow: none !important;
    color: inherit !important;
  }

  /* Dodatkowo zabezpieczenie dla iOS Safari */
  * {
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Dla Androida (czasem występuje ripple z defaultu) */
  button,
  input,
  textarea {
    -webkit-tap-highlight-color: transparent !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9be0f90 */: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 */