.elementor-8 .elementor-element.elementor-element-4b934dd{--display:flex;--min-height:3vh;}.elementor-8 .elementor-element.elementor-element-c0dc6d5{--display:flex;--min-height:51vh;}.elementor-8 .elementor-element.elementor-element-2dfe43c{--display:flex;--min-height:50vh;}.elementor-8 .elementor-element.elementor-element-c76263a{margin:35px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-8 .elementor-element.elementor-element-4745b8e{--display:flex;}.elementor-8 .elementor-element.elementor-element-f5d1bd0{--display:flex;--min-height:35vh;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-f5d1bd0:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-f5d1bd0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F5F5;}.elementor-8 .elementor-element.elementor-element-c7246d0{margin:-119px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-8 .elementor-element.elementor-element-e3948e5{--display:flex;}.elementor-8 .elementor-element.elementor-element-185fd0d{--display:flex;}.elementor-8 .elementor-element.elementor-element-7823e94{margin:-28px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-8 .elementor-element.elementor-element-a4981f2{--display:flex;}.elementor-8 .elementor-element.elementor-element-c65334f{margin:-178px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-8 .elementor-element.elementor-element-c6b233b{--display:flex;}@media(max-width:767px){.elementor-8 .elementor-element.elementor-element-c76263a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-8 .elementor-element.elementor-element-bea2d8d{margin:6px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-8 .elementor-element.elementor-element-cdb8fa8{margin:-40px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-8 .elementor-element.elementor-element-add3c50{margin:88px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-8 .elementor-element.elementor-element-0a8ba83{margin:-99px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}/* Start custom CSS for html, class: .elementor-element-c76263a */:root {
  --brand: #F25623;
  --offwhite: #f5f5f5;
  --gray: #ababab;
}

/* ===== BASE ===== */
.about-motion {
  position: relative;
  background: transparent;
  color: var(--offwhite);
  padding: 14vh 8vw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: 8vw;
  width: 100%;
  max-width: 1600px;
  position: relative;
  z-index: 2;
}

/* ===== TITLE ===== */
.about-title {
  font-family: 'Bebas Neue', sans-serif;
  line-height: 0.9;
  text-transform: uppercase;
}
.title-line {
  font-size: clamp(60px, 7.5vw, 130px);
}
.title-z {
  font-size: 0.6em;
  opacity: 0.85;
}
.title-highlight {
  font-size: clamp(75px, 10vw, 170px);
  letter-spacing: 3px;
  margin-top: 0.1em;
}
.title-sub {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(16px, 1.3vw, 22px);
  color: var(--gray);
  margin-top: 8px;
}

/* ===== TEXT ===== */
.about-text {
  font-family: 'Helvetica', sans-serif;
  color: var(--gray);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.8;
  margin-bottom: 5vh;
  transform: translateY(20px);
  opacity: 0;
  animation: fadeUp 1.2s .6s ease forwards;
}

/* ===== BUTTON (brand update) ===== */
.about-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 17px;
  letter-spacing: 1px;
  color: var(--offwhite);
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 60px;
  border: 1px solid var(--brand);
  background: rgba(242, 86, 35, 0.08);
  transition: all 0.35s ease;
  cursor: pointer;
}

.about-btn .btn-circle {
  background: var(--brand);
  color: #000;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .35s ease;
}

.about-btn .btn-pulse {
  position: absolute;
  inset: 0;
  border-radius: 60px;
  background: radial-gradient(circle, rgba(242,86,35,0.2), transparent 70%);
  opacity: 0;
  z-index: 0;
}

/* Hover efekty */
.about-btn:hover {
  border-color: var(--brand);
  color: var(--offwhite);
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(242,86,35,0.25);
}
.about-btn:hover .btn-circle {
  transform: rotate(45deg) scale(1.1);
  box-shadow: 0 0 20px rgba(242,86,35,0.4);
}
.about-btn:hover .btn-pulse {
  animation: pulseWave 1.4s ease-out;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
  to { transform: translateY(0); opacity: 1; }
}
@keyframes pulseWave {
  0% { opacity: .4; transform: scale(1); }
  70% { opacity: .15; transform: scale(1.7); }
  100% { opacity: 0; transform: scale(2.3); }
}

/* Glow background */
.about-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 70%);
  filter: blur(180px);
  animation: slowDrift 14s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  z-index: 1;
}
@keyframes slowDrift {
  0% { transform: translate(0,0) scale(1); opacity: .15; }
  50% { transform: translate(10%,8%) scale(1.1); opacity: .25; }
  100% { transform: translate(-8%,-10%) scale(1); opacity: .18; }
}

/* Responsive */
@media(max-width: 1024px){
  .about-grid {
    grid-template-columns: 1fr;
    gap: 5vh;
  }
  .about-btn {
    padding: 12px 24px;
  }
  .about-btn .btn-circle {
    width: 24px;
    height: 24px;
  }
}




.about-text {
font-family: 'Inter Tight', sans-serif;
font-weight: 400;
line-height: 1.7;
color: transparent;
background: linear-gradient(180deg, #d7d7d7 0%, #7a7a7a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0.9;
letter-spacing: 0.01em;
}

/* Akcentowanie pogrubionych słów */
.about-text strong {
color: transparent;
background: linear-gradient(180deg, #ffffff 0%, #b8b8b8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}

/* Odstępy i responsywność */
@media (max-width: 768px) {
.about-text {
font-size: 14px;
line-height: 1.6;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6d99feb */:root {
--ink: #000000;
--line: #2a2a2a;
--glow-core: rgba(255, 255, 255, 0.9);
--glow-soft: rgba(255, 255, 255, 0.25);
--metal-start: #dcdcdc;
--metal-end: #7a7a7a;
--text: #f5f5f5;
}

/* === GŁÓWNA SEKCJA === */
.titan-break {
position: relative;
background: #000 !important;
color: var(--text);
text-align: center;
padding: 120px 20px;
overflow: hidden;
z-index: 9999;

/* blokada wszelkich blendów motywu */
isolation: isolate;
mix-blend-mode: normal !important;
background-blend-mode: normal !important;
filter: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
}

/* globalna czerni - nadpisanie dla rodziców */
body, html,
.elementor,
.elementor-section,
.elementor-container,
.elementor-background-overlay,
.elementor-inner,
.elementor-widget-wrap,
.elementor-section-wrap {
background: #000 !important;
filter: none !important;
box-shadow: none !important;
mix-blend-mode: normal !important;
backdrop-filter: none !important;
}

/* === TEKST === */
.titan-copy {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
}

.titan-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(36px, 8vw, 64px);
line-height: 1.05;
letter-spacing: .02em;
margin: 0 0 14px;
color: var(--text);
}

.titan-sub {
font-family: 'Inter Tight', sans-serif;
font-weight: 400;
font-size: clamp(11px, 3vw, 14px);
letter-spacing: .28em;
text-transform: uppercase;
background: linear-gradient(90deg, var(--metal-start), var(--metal-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0.9;
}

/* === LINIE === */
.titan-line {
position: relative;
width: 1px;
height: 200px; /* lekko dłuższe */
margin: 0 auto;
background: var(--line);
opacity: 1;
overflow: hidden;
}

/* === ŚWIATŁO === */
.titan-line::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 120%;
background: linear-gradient(
to bottom,
transparent 0%,
var(--glow-core) 40%,
var(--glow-core) 60%,
transparent 100%
);
filter: blur(3px) brightness(1.8);
box-shadow:
0 0 18px 2px var(--glow-soft),
0 0 45px 5px rgba(255, 255, 255, 0.25);
animation: lightSweep 6s ease-in-out infinite;
opacity: 0.9;
}

/* === ANIMACJA – synchroniczny przesuw promienia === */
.titan-line-top::after {
animation: lightSweepDown 6s ease-in-out infinite;
}

.titan-line-bottom::after {
animation: lightSweepUp 6s ease-in-out infinite;
}

@keyframes lightSweepDown {
0% { transform: translate(-50%, -120%); opacity: 0; }
20% { opacity: 1; }
50% { transform: translate(-50%, 120%); opacity: 1; }
80% { opacity: 0.7; }
100% { transform: translate(-50%, -120%); opacity: 0; }
}

@keyframes lightSweepUp {
0% { transform: translate(-50%, 120%); opacity: 0; }
20% { opacity: 1; }
50% { transform: translate(-50%, -120%); opacity: 1; }
80% { opacity: 0.7; }
100% { transform: translate(-50%, 120%); opacity: 0; }
}

@keyframes glowSync {
0% { transform: translate(-50%, -200%); opacity: 0; }
10% { opacity: 1; }
50% { transform: translate(-50%, 100%); opacity: 1; }
90% { opacity: 0.7; }
100% { transform: translate(-50%, -200%); opacity: 0; }
}

/* === ODSTĘPY === */
.titan-line-top {
margin-bottom: 80px;
}
.titan-line-bottom {
margin-top: 80px;
}

/* === RESPONSYWNOŚĆ === */
@media (max-width: 480px) {
.titan-break {
padding: 90px 20px;
}
.titan-title {
font-size: 42px;
}
.titan-sub {
font-size: 10px;
}
.titan-line {
height: 190px;
}
}




.titan-copy {
transition: transform 0.4s ease-out, opacity 0.4s ease-out, filter 0.4s ease-out;
will-change: transform, opacity, filter;
}


@media (max-width: 480px) {
.titan-break {
padding: 80px 20px;
}

.titan-title {
font-size: clamp(30px, 8vw, 44px);
line-height: 1.1;
letter-spacing: 0.02em;
}

.titan-sub {
font-size: clamp(10px, 3vw, 13px);
letter-spacing: 0.25em;
}

.titan-line {
height: 150px;
}

.titan-line-top {
margin-bottom: 65px;
}

.titan-line-bottom {
margin-top: 65px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bea2d8d *//* ✅ DOMYŚLNIE UKRYTE NA WSZYSTKIM */
.mobile-intro {
  display: none;
}

/* ✅ MOBILE ONLY */
@media (max-width: 768px){
  .mobile-intro {
    display:block;
    background:#000;
    color:#f5f5f5;
    padding:56px 7vw 32px;
    -webkit-tap-highlight-color: transparent;
  }

  .mi-sub{
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12.5px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--brand, #F25623);
    margin:0 0 10px 0;
    line-height:1;
  }

  /* ✅ Obraca się TYLKO „360°” */
  .mi-rot{
    display:inline-block;
    color:#F25623;
    animation: spin-interval 3s ease-in-out infinite;
  }
  @keyframes spin-interval{
    0%   { transform: rotate(0deg); }
    12%  { transform: rotate(360deg); }
    100% { transform: rotate(360deg); }
  }

  .mi-title{
    font-family:'Bebas Neue', sans-serif;
    font-size: 38px;
    line-height: .95;
    letter-spacing: .8px;
    margin: 0;
    color:#f5f5f5;
    position:relative; /* ✅ potrzebne do zakreślenia */
  }

  /* ✅ Zakreślenie w kółko — brand-orange */
  .mi-title .mi-highlight {
    position:relative;
    z-index:2;
  }

  .mi-title .mi-highlight::before {
    content:"";
    position:absolute;
    left:-6px;
    top:-4px;
    width:calc(100% + 12px);
    height:calc(100% + 8px);
    border:3px solid #F25623;
    border-radius:50%;
    transform:rotate(-4deg);
    opacity:1;
    z-index:-1;
    pointer-events:none;
  }

  @media (max-width: 360px){
    .mi-title{ font-size: 34px; }
    .mi-sub{ font-size: 11.5px; }
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c7246d0 *//* ✅ Ukrywamy na mobile */
@media (max-width: 1024px){
  .services-desktop { display:none!important; }
}

/* ===== Sekcja ===== */
.services-desktop{
  background:#000;
  padding:140px 7vw;
  color:#fff;
}

/* Header */
.srv-sub{
  font-size:12px;
  letter-spacing:3px;
  opacity:1;
  text-transform:uppercase;
  color:#F25623; /* ✅ Brand Orange */
}
.srv-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:82px;
  line-height:.95;
  margin-top:10px;
  max-width:600px;
  margin-bottom:80px;
  position:relative; /* ✅ konieczne dla zakreślenia */
}

/* ✅ Zakreślenie słowa „zaczniemy” */
.srv-title span.highlight{
  position:relative;
  z-index:2;
}

.srv-title span.highlight::before{
  content:"";
  position:absolute;
  left:-10px;
  top:-4px;
  width:calc(100% + 20px);
  height:calc(100% + 10px);
  border:3px solid #F25623;
  border-radius:50%;
  transform:rotate(-5deg);
  opacity:1;
  z-index:-1;
  pointer-events:none;
}

/* Item */
.srv-item{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:34px 0;
  border-bottom:1px solid rgba(255,255,255,0.12);
  text-decoration:none;
  color:#fff!important;
  transition:
    border-color .35s ease,
    box-shadow .35s ease,
    opacity .35s ease,
    transform .35s ease;
}

/* Hover — przygaszanie pozostałych */
.srv-list:hover .srv-item{
  opacity:.35;
}
.srv-list:hover .srv-item:hover{
  opacity:1;
}

/* Lewa część */
.srv-left{
  display:flex;
  gap:28px;
  flex:1;
}
.srv-index{
  font-size:18px;
  opacity:.6;
}
.srv-name{
  font-family:'Inter Tight','Bebas Neue',sans-serif;
  font-size:32px;
  text-transform:uppercase;
}

/* Prawa część */
.srv-right{
  width:48%;
  display:flex;
  justify-content:space-between;
  gap:20px;
}
.srv-right p{
  font-size:15px;
  opacity:.75;
  line-height:1.45;
  max-width:420px;
}

/* Strzałka */
.srv-arrow{
  font-size:26px;
  opacity:.75;
  transition:
    transform .5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity .45s ease,
    color .45s ease;
}

/* ✅ Hover — animacja + glow + kolor brand */
.srv-item:hover{
  border-color:rgba(255,255,255,0.28);
  box-shadow:0 0 14px rgba(255,255,255,0.10);
  transform:translateX(3px);
}
.srv-item:hover .srv-arrow{
  transform:translateX(8px) translateY(3px) rotate(35deg);
  opacity:1;
  color:#F25623;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7823e94 */:root {
  --brand: #F25623;
  --bg: #000;
  --offwhite: #f5f5f5;
  --gray: #a5a5a5;
  --ease: cubic-bezier(.22,1,.36,1);
}

/* === SEKCJA GŁÓWNA === */
.process-grid-section {
  background: var(--bg);
  color: var(--offwhite);
  padding: 16vh 6vw;
  overflow: hidden;
  position: relative;
}

/* Header */
.process-header {
  text-align: center;
  margin-bottom: 12vh;
  position: relative;
}
.process-header .eyebrow {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--brand);
}
.process-header h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(58px, 7vw, 110px);
  text-transform: uppercase;
  margin-top: 10px;
  line-height: .9;
}
.process-header h2 span {
  color: var(--brand);
}

/* === GRID === */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2vw;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}

.process-item {
  padding: 8vh 2vw;
  border-right: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  position: relative;
  transition: background 0.6s var(--ease);
}
.process-item:last-child { border-right: none; }

.item-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.index {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 72px;
  color: rgba(242,86,35,0.08);
  line-height: 1;
  transition: color .4s var(--ease);
}

.item-head h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: color .4s var(--ease);
}

.item-body {
  max-width: 420px;
  margin-top: 20px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s var(--ease);
  pointer-events: none;
}

/* Active / hover */
.process-item.active,
.process-item:hover {
  background: radial-gradient(circle at 50% 50%, rgba(242,86,35,0.07), rgba(0,0,0,0.8));
}
.process-item.active .index,
.process-item:hover .index {
  color: var(--brand);
}
.process-item.active h3,
.process-item:hover h3 {
  color: var(--offwhite);
}
.process-item.active .item-body {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* GRID OVERLAY */
.process-grid::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 60px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 60px);
  opacity:.25;
  mix-blend-mode:overlay;
  pointer-events:none;
}

/* === DESKTOP BUTTON === */
.step-btn, .about-btn {
  margin-top: 40px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 17px;
  letter-spacing: 1px;
  color: var(--offwhite);
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 60px;
  border: 1px solid var(--brand);
  background: rgba(242, 86, 35, 0.08);
  transition: all 0.35s ease;
  cursor: pointer;
  overflow: hidden;
  z-index: 2;
}
.step-btn::after, .about-btn::after {
  content: "→";
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #000;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  transition: all .35s ease;
}
.step-btn:hover, .about-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(242,86,35,0.25);
}
.step-btn:hover::after, .about-btn:hover::after {
  transform: rotate(45deg) scale(1.1);
  box-shadow: 0 0 20px rgba(242,86,35,0.4);
}

/* === MOBILE === */
@media (max-width: 1024px) {
  .process-grid {
    grid-template-columns: 1fr;
    border-left: none;
    border-right: none;
  }

  .process-item {
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 8vh 0;
    position: relative;
  }

  .index {
    font-size: 64px;
  }
  .item-head h3 { font-size: 24px; }

  /* ANIMACJE SCROLL */
  .process-item {
    opacity: 0;
    transform: translateY(40px);
    transition:
      opacity 1s cubic-bezier(.22,1,.36,1),
      transform 1s cubic-bezier(.22,1,.36,1),
      background 0.8s cubic-bezier(.22,1,.36,1),
      box-shadow 0.8s cubic-bezier(.22,1,.36,1);
  }

  .process-item.in-view {
    opacity: 1;
    transform: translateY(0);
  }

  .process-item .index,
  .process-item h3,
  .process-item .item-body {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(.22,1,.36,1);
  }

  .process-item.in-view .index {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
  }

  .process-item.in-view h3 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
  }

  .process-item.in-view .item-body {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
  }

  /* GLOW dla aktywnej sekcji */
  .process-item.active {
    background: radial-gradient(
      circle at 50% 50%,
      rgba(242,86,35,0.15) 0%,
      rgba(0,0,0,0.9) 70%
    );
    box-shadow:
      0 0 60px rgba(242,86,35,0.12),
      inset 0 0 80px rgba(242,86,35,0.1);
  }

  .process-item.active .index {
    color: var(--brand);
    text-shadow: 0 0 12px rgba(242,86,35,0.4);
  }

  .process-item.active h3 {
    color: var(--offwhite);
    text-shadow: 0 0 8px rgba(242,86,35,0.3);
  }

  .process-item.active .item-body {
    color: var(--gray);
  }

  /* Układ numeru po lewej */
  .process-item {
    padding-left: 72px;
  }
  .process-item .index {
    position: absolute;
    left: 0;
    top: 12px;
    font-size: 58px;
    opacity: 0.08;
  }

  /* ukryj przyciski */
  .about-btn, .step-btn {
    display: none !important;
  }
}




/* === DESKTOP: cyfry przygaszone + rozświetlenie przy hoverze === */
@media (min-width: 1025px) {
  .process-item .index {
    color: rgba(242,86,35,0.25); /* delikatnie przygaszony pomarańcz */
    transition: color 0.4s ease, text-shadow 0.6s ease;
  }

  /* po najechaniu lub aktywacji – rozświetlenie */
  .process-item:hover .index,
  .process-item.active .index {
    color: var(--brand);
    text-shadow: 0 0 18px rgba(242,86,35,0.45);
  }
}






/* === DESKTOP: przyciski tuż pod tytułami (przed tekstem) === */
@media (min-width: 1025px) {
  .process-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }

  /* ustaw przycisk bezpośrednio pod tytułem */
  .process-item .about-btn,
  .process-item .step-btn {
    order: 2; /* tuż po tytule */
    margin-top: 18px; /* przerwa pod tytułem */
    margin-bottom: 24px; /* oddech nad tekstem */
    align-self: flex-start;
  }

  /* tytuł ma być nad przyciskiem */
  .process-item .item-head {
    order: 1;
    margin-bottom: 0;
  }

  /* tekst po przycisku */
  .process-item .item-body {
    order: 3;
    margin-top: 0;
  }
}



/* === DESKTOP: perfekcyjne wyrównanie przycisków pod tytułem === */
@media (min-width: 1025px) {
  .process-item .about-btn,
  .process-item .step-btn {
    transform: translateX(-10px); /* jeszcze minimalnie bardziej w lewo */
  }
}
/* === DESKTOP: pomniejszona wersja przycisków === */
@media (min-width: 1025px) {
  .process-item .about-btn,
  .process-item .step-btn {
    padding: 10px 22px; /* mniejsze wypełnienie */
    font-size: 15px;
    letter-spacing: 0.5px;
  }

  .process-item .about-btn::after,
  .process-item .step-btn::after {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }
}




/* === DESKTOP: wysuwany tekst po kliknięciu przycisku === */
@media (min-width: 1025px) {
  .reveal-panel {
    position: absolute;
    inset: 0;
    background: #000;
    padding: 6vh 3vw;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.8s cubic-bezier(.22,1,.36,1);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    z-index: 10;
  }

  .reveal-panel.active {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-panel p {
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    line-height: 1.8;
    color: var(--offwhite);
    max-width: 480px;
  }

  .reveal-close {
    position: absolute;
    top: 24px;
    right: 28px;
    background: none;
    border: none;
    color: var(--gray);
    font-size: 40px;
    cursor: pointer;
    transition: color 0.3s ease;
  }
  .reveal-close:hover { color: var(--brand); }
}








/* === DESKTOP: wysuwany tekst przykrywający TYLKO własną sekcję === */
@media (min-width: 1025px) {
  .process-item {
    position: relative;
    overflow: hidden; /* trzyma panel w granicach kolumny */
  }

  .reveal-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    padding: 6vh 3vw;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.8s cubic-bezier(.22,1,.36,1);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    z-index: 5; /* niższy niż inne sekcje */
  }

  .process-item.active .reveal-panel {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-panel p {
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    line-height: 1.8;
    color: var(--offwhite);
    max-width: 460px;
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.8s cubic-bezier(.22,1,.36,1) 0.2s;
  }

  .process-item.active .reveal-panel p {
    transform: translateY(0);
    opacity: 1;
  }

  .reveal-close {
    position: absolute;
    top: 24px;
    right: 28px;
    background: none;
    border: none;
    color: var(--gray);
    font-size: 40px;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 6;
  }

  .reveal-close:hover {
    color: var(--brand);
  }
}



/* === MOBILE: ukryj panele i przycisk X z wersji desktop === */
@media (max-width: 1024px) {
  .reveal-panel,
  .reveal-panel *,
  .reveal-close {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}















/* === DESKTOP: wysuwany tekst wyżej – bliżej środka sekcji === */
@media (min-width: 1025px) {
  .reveal-panel {
    align-items: center !important; /* tekst bliżej środka */
    padding: 4vh 3vw 6vh !important; /* trochę mniej od dołu */
  }

  .reveal-panel p {
    max-width: 520px;
    font-size: 19px;
    line-height: 1.85;
  }
}







/* === DESKTOP: finalny rozmiar i rytm tekstu w panelu === */
@media (min-width: 1025px) {
  .reveal-panel p {
    max-width: 480px;
    font-size: 16px; /* delikatnie mniejszy */
    line-height: 1.7; /* ciaśniejszy, ale nadal lekki */
    letter-spacing: 0.2px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(.22,1,.36,1) 0.2s;
  }

  .process-item.active .reveal-panel p {
    opacity: 1;
    transform: translateY(0);
  }
}













/* === DESKTOP: finalne przesunięcie siatki nieco dalej w prawo === */
@media (min-width: 1025px) {
  .process-grid {
    position: relative;
    left: 45px; /* było 30px — teraz lekko dalej */
  }
}




/* === FIX: usuń różowy odcień przy hoverze === */
@media (min-width: 1025px) {

  /* przyciski kroków */
  .step-btn:hover,
  .about-btn:hover {
    background: rgba(242, 86, 35, 0.08) !important; /* neutralne tło */
    border-color: var(--brand);
    color: var(--offwhite);
    box-shadow: 0 0 18px rgba(242, 86, 35, 0.25);
  }

  .step-btn:hover::after,
  .about-btn:hover::after {
    background: var(--brand); /* zostaje brandowy pomarańcz */
    color: #000;
  }

  /* krzyżyk */
  .reveal-close:hover {
    color: var(--offwhite) !important; /* usuwa róż, zostawia neutralny kolor */
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.2); /* subtelne rozświetlenie */
  }
}





/* === DEFINITYWNE USUNIĘCIE RÓŻOWEGO HOVERA Z KRZYŻYKA === */
section.process-grid-section .process-item .reveal-panel .reveal-close:hover {
  color: #f5f5f5 !important;
  text-shadow: 0 0 16px rgba(255,255,255,0.35) !important;
  transform: scale(1.05);
  background: none !important;
  border: none !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c65334f *//* === CINEMATIC BRUTAL OPINIONS === */
:root {
--brand: #F25623;
--off: #f5f5f5;
--gray: #9c9c9c;
--bg: #000;
--ease: cubic-bezier(.22,1,.36,1);
}

.reviews-cinematic {
background: var(--bg);
color: var(--off);
padding: 14vh 0;
overflow: hidden;
position: relative;
}

.reviews-inner {
display: grid;
grid-template-columns: 1fr 1.2fr;
align-items: center;
gap: 8vw;
width: min(1300px, 88vw);
margin: 0 auto;
position: relative;
}

/* === LEFT SIDE === */
.reviews-left {
position: relative;
}

.reviews-heading {
font-family: 'Bebas Neue', sans-serif;
text-transform: uppercase;
line-height: 0.9;
font-size: clamp(60px, 6vw, 120px);
}

.reviews-heading .accent {
color: var(--brand);
}

.reviews-sub {
font-family: 'Inter Tight', sans-serif;
color: var(--gray);
font-size: 16px;
line-height: 1.8;
margin: 18px 0 36px;
}

.reviews-cta {
display: inline-flex;
align-items: center;
gap: 12px;
border: 1px solid var(--brand);
border-radius: 50px;
padding: 14px 28px;
color: var(--off);
text-decoration: none;
font-family: 'Bebas Neue', sans-serif;
font-size: 16px;
letter-spacing: 1px;
background: rgba(242, 86, 35, 0.08);
transition: all .35s var(--ease);
}

.reviews-cta span {
color: var(--brand);
font-size: 20px;
transition: transform .35s var(--ease);
}

.reviews-cta:hover {
transform: translateY(-2px);
box-shadow: 0 0 18px rgba(242,86,35,0.25);
}

.reviews-cta:hover span {
transform: translateX(6px);
}

/* === RIGHT SIDE === */
.reviews-right {
position: relative;
}

.reviews-list {
position: relative;
height: 360px;
overflow: hidden;
}

.review-card {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(30px);
transition: all 0.8s var(--ease);
display: flex;
flex-direction: column;
justify-content: center;
}

.review-card.active {
opacity: 1;
transform: translateY(0);
}

.review-card h3 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(28px, 2.2vw, 40px);
line-height: 1.1;
margin-bottom: 14px;
}

.review-card p {
font-family: 'Inter Tight', sans-serif;
color: var(--gray);
font-size: 16px;
line-height: 1.8;
margin-bottom: 24px;
max-width: 540px;
}

.review-card .author {
font-family: 'Inter Tight', sans-serif;
color: var(--off);
opacity: 0.7;
font-size: 14px;
letter-spacing: 0.3px;
}

/* Progress bar */
.reviews-progress {
width: 100%;
height: 3px;
background: rgba(255,255,255,0.1);
border-radius: 2px;
overflow: hidden;
margin-top: 36px;
}

.reviews-progress .bar {
width: 0%;
height: 100%;
background: linear-gradient(90deg, rgba(242,86,35,.1), rgba(242,86,35,.9));
transition: width 0.8s var(--ease);
box-shadow: 0 0 18px rgba(242,86,35,0.35);
}

/* subtle grid background */
.reviews-cinematic::after {
content: "";
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 60px);
opacity: .25;
mix-blend-mode: overlay;
pointer-events: none;
}






/* --- Strzałki --- */
.reviews-arrows {
display:flex;
gap:14px;
margin-top:28px;
}
.reviews-arrows .arrow {
all:unset;
width:44px; height:44px;
border:1px solid rgba(255,255,255,.15);
border-radius:6px;
display:grid; place-items:center;
color:var(--off);
font-family:'Bebas Neue',sans-serif;
font-size:20px;
cursor:pointer;
transition:all .35s var(--ease);
}
.reviews-arrows .arrow:hover {
border-color:var(--brand);
color:var(--brand);
box-shadow:0 0 14px rgba(242,86,35,.25);
}







/* === FINAL HARD LOCK: UKRYCIE SEKCJI OPINIE NA MOBILE === */
@media only screen and (max-width: 1024px) {
body .reviews-section,
body section.reviews-section,
body .elementor section.reviews-section,
body .elementor .reviews-section,
body .elementor-widget-container .reviews-section,
body .elementor-element .reviews-section,
body [id*="opinie"],
body section[id*="opinie"],
[class*="reviews-section"],
[id*="reviews"],
[id*="opinie-section"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-add3c50 *//* ===== REVIEWS MOBILE ===== */
.reviews-mobile {
background: #000;
color: #f5f5f5;
padding: 14vh 7vw;
text-align: center;
font-family: 'Inter Tight', sans-serif;
overflow: hidden;
}

.reviews-mobile-head h2 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(44px, 10vw, 80px);
line-height: .9;
text-transform: uppercase;
margin-bottom: 10px;
}

.reviews-mobile-head .accent {
color: #F25623;
}

.reviews-mobile-head p {
color: #a5a5a5;
font-size: 16px;
line-height: 1.7;
margin-bottom: 8vh;
}

.reviews-mobile-slider {
position: relative;
min-height: 200px;
}

.review-mobile {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(20px);
transition: all 0.7s cubic-bezier(.22,1,.36,1);
padding: 0 4vw;
}

.review-mobile.is-active {
opacity: 1;
transform: translateY(0);
position: relative;
}

.review-text {
font-size: 17px;
line-height: 1.9;
color: #ddd;
margin-bottom: 24px;
}

.author {
font-weight: 700;
color: #fff;
}

.role {
color: #bbb;
font-size: 14px;
}

.reviews-mobile-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-top: 6vh;
}

.reviews-mobile-controls button {
all: unset;
cursor: pointer;
font-family: 'Bebas Neue', sans-serif;
font-size: 24px;
color: #f5f5f5;
background: rgba(255,255,255,0.05);
width: 44px;
height: 44px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.1);
transition: all .3s ease;
}

.reviews-mobile-controls button:hover {
color: #F25623;
border-color: #F25623;
box-shadow: 0 0 10px rgba(242,86,35,0.3);
}

.progress-bar {
position: relative;
width: 120px;
height: 3px;
background: rgba(255,255,255,0.1);
border-radius: 3px;
overflow: hidden;
}

.progress-bar span {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0%;
background: linear-gradient(90deg, rgba(242,86,35,0.1), rgba(242,86,35,0.9));
box-shadow: 0 0 10px rgba(242,86,35,0.4);
transition: width 0.4s ease;
}

.reviews-mobile-cta {
display: inline-block;
margin-top: 10vh;
padding: 12px 34px;
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 1px;
border: 1px solid #F25623;
border-radius: 50px;
color: #fff;
text-decoration: none;
background: rgba(242,86,35,0.08);
transition: all .35s ease;
}

.reviews-mobile-cta:hover {
background: #F25623;
color: #000;
box-shadow: 0 0 20px rgba(242,86,35,0.35);
}







/* ===== HIDE MOBILE REVIEWS ON DESKTOP ===== */
@media (min-width: 1025px) {
.reviews-mobile {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
}









/* === FIX: BIAŁY PASEK NA DOLE === */
html, body {
background: #000 !important;
margin: 0;
padding: 0;
overflow-x: hidden;
}

/* === MOBILE: DOPIESZCZENIE POZYCJI SEKCJI OPINII === */
@media (max-width: 1024px) {
.reviews-mobile {
padding-top: 8vh !important; /* było 14vh – sekcja wyżej */
padding-bottom: 10vh !important; /* było 16vh – sekcja krótsza */
}

.reviews-mobile-head {
margin-bottom: 6vh; /* mniej przestrzeni pod nagłówkiem */
}

.reviews-mobile-cta {
margin-top: 6vh !important; /* guzik bliżej */
}
}



/* 🔶 Mniejszy rozmiar treści opinii (tylko tekst recenzji) */
@media (max-width: 1024px) {
  .review-text {
    font-size: 14px !important; /* było 17px → teraz smuklej */
    line-height: 1.75;
  }
}

@media (max-width: 1024px) {
  .review-mobile {
    margin-top: 12px !important; /* delikatne przesunięcie w dół */
  }
}




@media (max-width: 1024px) {
  .reviews-mobile-head h2 {
    text-align: center;
    display: block;
    line-height: 1;
  }

  /* tylko pierwszy span (“SŁOWA,”) jako osobna linia */
  .reviews-mobile-head h2 span:first-child {
    display: block;
    text-align: center;
  }

  /* tekst „KTÓRE ZOSTAJĄ.” pozostaje w jednej linii */
  .reviews-mobile-head h2 {
    white-space: normal;
  }
}




@media (max-width: 1024px) {
  /* 🔸 większy nagłówek */
  .reviews-mobile-head h2 {
    font-size: clamp(54px, 12vw, 90px) !important; /* było 44–80px */
    line-height: 0.95;
    text-align: center;
    display: block;
    white-space: normal;
  }

  /* „SŁOWA,” jako osobna linia */
  .reviews-mobile-head h2 span:first-child {
    display: block;
    text-align: center;
    margin-bottom: 2px; /* mniejszy odstęp między liniami */
  }

  /* 🔸 podtytuł bliżej nagłówka */
  .reviews-mobile-head p {
    margin-top: 10px !important;  /* było sporo więcej */
    font-size: 15px;
    line-height: 1.6;
  }
}






/* 🔒 Wyłączenie różowego/pomarańczowego hovera ze strzałek opinii */
.reviews-mobile-controls button:hover {
  color: #f5f5f5 !important;          /* zostaje biały */
  border-color: rgba(255,255,255,0.1) !important; /* subtelna obwódka */
  box-shadow: none !important;        /* zero poświaty */
  background: rgba(255,255,255,0.05) !important;  /* tło jak w stanie normalnym */
}





@media (max-width: 1024px) {
  .reviews-mobile-head p {
    font-size: 11px !important;      /* znacznie mniejszy tekst */
    line-height: 1.4 !important;     /* ciaśniejszy odstęp między liniami */
    margin-top: 4px !important;      /* mocno dosunięty do nagłówka */
    color: #a5a5a5 !important;       /* zachowany subtelny szary ton */
    letter-spacing: 0.4px;           /* drobne rozrzedzenie dla elegancji */
    text-transform: uppercase;       /* opcjonalnie, jeśli chcesz bardziej “agencyjnie” */
  }
}




@media (max-width: 1024px) {
  /* 🔸 Powiększamy tylko „SŁOWA” */
  .reviews-mobile-head h2 span:first-child {
    font-size: 1.15em !important; /* delikatne powiększenie o 15% */
    letter-spacing: 0.5px;
  }
}





@media (max-width: 1024px) {

  /* 🧭 Ukrywamy strzałki przewijania */
  .reviews-mobile-controls button {
    display: none !important;
  }

  /* 🧷 Przesuwamy przycisk „ZOBACZ CASE STUDY” wyżej */
  .reviews-mobile-cta {
    display: block;
    margin-top: 6vh !important;   /* bliżej opinii */
    margin-bottom: 0 !important;  /* usuwa duży odstęp od dołu sekcji */
    text-align: center;
    font-size: 17px;
    letter-spacing: 1px;
  }

  /* 🧩 Drobna korekta dla sekcji, żeby wszystko wyglądało spójnie */
  .reviews-mobile {
    padding-bottom: 6vh !important;
  }
}








@media (max-width: 1024px) {

  /* 🌙 Pasek przewijania bliżej opinii */
  .reviews-mobile-controls {
    margin-top: 3vh !important;  /* bliżej opinii */
    gap: 10px;
  }

  /* 🔸 Przyciski nawigacji całkowicie ukryte */
  .reviews-mobile-controls button {
    display: none !important;
  }

  /* 🌙 Przycisk „ZOBACZ CASE STUDY” bliżej paska */
  .reviews-mobile-cta {
    margin-top: 3.5vh !important; /* bliżej linii */
    font-size: 16px;
    letter-spacing: 1px;
    text-align: center;
  }

  /* 🌙 Ogólna korekta – mniej pustego miejsca na dole sekcji */
  .reviews-mobile {
    padding-bottom: 6vh !important;
  }
}











@media (max-width: 1024px) {
  /* 🔸 wyróżnienie słowa "SŁOWA" */
  .reviews-mobile-head h2 span:first-child {
    font-size: 1.35em !important; /* było 1.15em — teraz mocniej */
    letter-spacing: 0.8px;
    color: #ffffff !important; /* czysta biel dla kontrastu */
  }
}





@media (max-width: 1024px) {
  .reviews-mobile-head p {
    font-size: 10px !important;          /* trochę mniejszy */
    line-height: 1.4 !important;
    margin-top: 2px !important;          /* lekko wyżej pod nagłówkiem */
    color: rgba(165, 165, 165, 0.6) !important; /* subtelnie przygaszony szary */
    letter-spacing: 0.4px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0a8ba83 *//* =============== MATYLA DESIGN • CTA SEARCH ULTRA CLEAN (FIXED) =============== */
:root {
  --brand: #F25623;
  --text: #DEDEDE;
  --ink: #0A0A0A;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* === SEKCJA === */
.md-digital-search {
  position: relative;
  min-height: 70vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  border-radius: 48px 48px 0 0; /* tylko górne rogi */
}

/* cienka linia u góry z lekkim światłem */
.md-digital-search::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  border-top-left-radius: 48px;
  border-top-right-radius: 48px;
  border-top: 1px solid rgba(242, 86, 35, 0.5);
  box-shadow: 0 -2px 12px rgba(242, 86, 35, 0.25);
  pointer-events: none;
  z-index: 3;
}

/* === KONTENER === */
.mds-wrap {
  position: relative;
  z-index: 2;
  text-align: center;
  width: min(800px, 90%);
  margin: 0 auto;
}

/* === PASEK WYSZUKIWANIA – czysty, bez rozlanej poświaty === */
.mds-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 10, 10, 0.9);
  border: 1px solid rgba(242, 86, 35, 0.5);
  border-radius: 80px;
  padding: 18px 36px;
  backdrop-filter: blur(6px);
  transition: all 0.5s var(--ease);
  box-shadow:
    0 0 14px rgba(242, 86, 35, 0.4),
    inset 0 0 4px rgba(242, 86, 35, 0.4);
}

.mds-bar.active {
  border-color: rgba(242, 86, 35, 0.9);
  box-shadow:
    0 0 18px rgba(242, 86, 35, 0.5),
    inset 0 0 5px rgba(242, 86, 35, 0.45);
}

.mds-icon,
.mds-end {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}

.mds-input {
  flex: 1;
  text-align: left;
  font-family: 'Inter Tight', sans-serif;
  font-size: 18px;
  color: #fff;
  margin: 0 20px;
  white-space: nowrap;
  overflow: hidden;
  min-height: 24px;
}

.cursor {
  display: inline-block;
  width: 2px;
  background: var(--brand);
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* === ODP. (po wpisaniu) === */
.mds-response {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  margin-top: 60px;
}

.mds-response.show {
  opacity: 1;
  transform: translateY(0);
}

.mds-response h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(44px, 7vw, 100px);
  letter-spacing: 0.02em;
  margin: 0 0 16px;
  color: #fff;
}

.mds-response p {
  font-family: 'Inter Tight', sans-serif;
  font-size: 18px;
  opacity: 0.85;
  margin-bottom: 36px;
  position: relative;
}

.mds-response p span.biznes {
  display: inline-block;
  position: relative;
  animation: bizGlow 5s ease-in-out infinite;
}

@keyframes bizGlow {
  0%, 100% {
    text-shadow: 0 0 0 rgba(242, 86, 35, 0);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 14px rgba(242, 86, 35, .5);
    transform: scale(1.03);
  }
}

/* === GUZIK (czysty styl premium, bez różowego hovera) === */
.mds-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  color: #f5f5f5;
  text-decoration: none;
  padding: 14px 34px 14px 26px;
  border-radius: 60px;
  border: 1px solid var(--brand);
  background: rgba(242, 86, 35, 0.08);
  transition: all 0.35s var(--ease);
  cursor: pointer;
  overflow: hidden;
}

.mds-btn::after {
  content: "→";
  font-family: "Inter Tight", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #000;
  background: var(--brand);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s var(--ease);
  box-shadow: 0 0 12px rgba(242, 86, 35, 0.45);
}

.mds-btn span {
  position: relative;
  z-index: 2;
}

/* hover efekty (bez różowego zabarwienia) */
.mds-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(242, 86, 35, 0.25);
  background: rgba(242, 86, 35, 0.1);
}

.mds-btn:hover::after {
  transform: rotate(45deg) scale(1.1);
  box-shadow: 0 0 22px rgba(242, 86, 35, 0.5);
}

/* subtelna pulsacja */
.mds-btn {
  animation: btnBreathe 4.8s ease-in-out infinite both;
}

@keyframes btnBreathe {
  0%, 100% {
    box-shadow: 0 0 0 rgba(242, 86, 35, 0);
  }
  50% {
    box-shadow: 0 0 22px rgba(242, 86, 35, 0.25);
  }
}


/* pomarańczowa kropka ze strzałką */
.mds-btn::after {
  content: "→";
  font-family: "Inter Tight", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #000;
  background: var(--brand);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s var(--ease);
  box-shadow: 0 0 12px rgba(242, 86, 35, 0.45);
}

.mds-btn span {
  position: relative;
  z-index: 2;
}

/* hover efekty */
.mds-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(242, 86, 35, 0.25);
}

.mds-btn:hover::after {
  transform: rotate(45deg) scale(1.1);
  box-shadow: 0 0 22px rgba(242, 86, 35, 0.5);
}

/* subtelna pulsacja */
.mds-btn {
  animation: btnBreathe 4.8s ease-in-out infinite both;
}

@keyframes btnBreathe {
  0%, 100% {
    box-shadow: 0 0 0 rgba(242, 86, 35, 0);
  }
  50% {
    box-shadow: 0 0 22px rgba(242, 86, 35, 0.25);
  }
}

/* === RESPONSYWNOŚĆ === */
@media (max-width: 768px) {
  .md-digital-search {
    min-height: 60vh;
    padding: 0 5vw;
    border-radius: 32px 32px 0 0;
  }

  .mds-wrap {
    width: 100%;
  }

  .mds-bar {
    padding: 14px 22px;
    flex-direction: row;
    border-radius: 60px;
    box-shadow:
      0 0 12px rgba(242, 86, 35, 0.35),
      inset 0 0 2px rgba(242, 86, 35, 0.35);
  }

  .mds-bar.active {
    box-shadow:
      0 0 16px rgba(242, 86, 35, 0.45),
      inset 0 0 3px rgba(242, 86, 35, 0.45);
  }

  .mds-input {
    font-size: 16px;
    margin: 0 10px;
  }

  .mds-response h2 {
    font-size: clamp(34px, 9vw, 70px);
  }

  .mds-btn {
    font-size: 16px;
    padding: 12px 26px;
  }

  .mds-btn::after {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }
}


@media (max-width: 768px) {
  .mds-response p {
    font-size: 14px;
    margin-top: -14px;      /* jeszcze bliżej nagłówka */
    margin-bottom: 26px;    /* zostaje lekki oddech nad przyciskiem */
    line-height: 1.6;
  }
}






/* === MOBILE OPTIMIZATION – mniejsza wyszukiwarka na telefonie === */
@media (max-width: 768px) {
.mds-bar {
transform: scale(0.88);
transform-origin: center;
}

.mds-input {
font-size: 15px !important;
}
}





/* === FIX: usuń kreskę / poświatę nad wyszukiwarką tylko na mobile === */
@media (max-width: 768px) {
.md-digital-search::before {
content: none !important;
display: none !important;
border: none !important;
box-shadow: none !important;
background: none !important;
}
}





/* === FIX: Kolor tekstu w przycisku "Porozmawiajmy" zawsze biały === */
.mds-btn,
.mds-btn:hover,
.mds-btn:visited,
.mds-btn:focus,
.mds-btn:active {
color: #f5f5f5 !important;
text-decoration: none !important;
}/* End custom CSS */