:root{
  --bg:#06090f;
  --bg2:#0b1220;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.08);
  --line: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --neon: #66f0ff;
  --neon2:#8a7dff;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 22px;
  --max: 1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background: radial-gradient(1000px 600px at 20% 10%, rgba(102,240,255,.10), transparent 60%),
              radial-gradient(1000px 600px at 80% 20%, rgba(138,125,255,.10), transparent 60%),
              linear-gradient(180deg, var(--bg), #05060a 70%);
  color:var(--text);
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.container{width:min(var(--max), calc(100% - 48px)); margin:0 auto}

.skip{
  position:absolute; left:-9999px; top:8px;
  background:#fff; color:#000; padding:10px 12px; border-radius:12px; z-index:9999
}
.skip:focus{left:12px}

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background: rgba(6,9,15,.55);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .3s ease, padding .3s ease;
}
.topbar.is-scrolled{
  background: rgba(6,9,15,.88);
  border-bottom-color: rgba(102,240,255,.12);
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand img{height:28px; width:auto; opacity:.95}

.nav{display:flex; gap:22px; align-items:center}
.nav a{
  padding:10px 12px; border-radius:999px; color:var(--muted);
  border:1px solid transparent;
}
.nav a:hover{color:var(--text); border-color: rgba(102,240,255,.22); background: rgba(102,240,255,.08)}

.navbtn{
  display:none;
  align-items:center; gap:9px;
  padding:9px 16px 9px 12px;
  border-radius:999px;
  border:1px solid rgba(102,240,255,.28);
  background: linear-gradient(135deg, rgba(102,240,255,.10), rgba(138,125,255,.08));
  color:rgba(255,255,255,.92);
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.navbtn:hover{
  background: linear-gradient(135deg, rgba(102,240,255,.18), rgba(138,125,255,.14));
  border-color: rgba(102,240,255,.55);
  box-shadow: 0 0 14px rgba(102,240,255,.18);
}
.navbtn__icon{
  display:flex; flex-direction:column; gap:4px; width:18px; flex-shrink:0;
}
.navbtn__icon span{
  display:block; height:2px;
  background:rgba(255,255,255,.88);
  border-radius:2px;
}
.navbtn__label{
  font-size:13px; font-weight:600; letter-spacing:.06em;
  color:rgba(255,255,255,.90);
}

.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:70px;
  overflow:hidden;
}
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter: saturate(1.15) contrast(1.05) brightness(.72);
  transform: scale(1.03);
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 20% 30%, rgba(102,240,255,.18), transparent 65%),
    radial-gradient(900px 420px at 80% 40%, rgba(138,125,255,.18), transparent 65%),
    linear-gradient(180deg, rgba(6,9,15,.25), rgba(6,9,15,.82) 70%, rgba(6,9,15,.95));
}
.hero__content{position:relative; padding:64px 0 50px}
.hero__badge{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color: var(--muted);
  letter-spacing:.12em; text-transform:uppercase; font-size:12px;
}
.hero__logo{
  width: min(560px, 86vw);
  height: auto;
  margin: 18px 0 8px;
  filter: drop-shadow(0 22px 70px rgba(0,0,0,.75));
}
@media (max-width: 520px){
  .hero__logo{width: min(380px, 86vw); margin-top: 14px}
}
.hero h1{
  font-size: clamp(42px, 5vw, 68px);
  margin:14px 0 10px;
  line-height:1.03;
  text-shadow: 0 22px 70px rgba(0,0,0,.75);
}
.lead{max-width: 760px; font-size: 18px; color: rgba(255,255,255,.84); line-height:1.55}

.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  box-shadow: var(--shadow);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(102,240,255,.35)}
.btn--primary{
  background: linear-gradient(135deg, rgba(102,240,255,.20), rgba(138,125,255,.18));
  border-color: rgba(102,240,255,.32);
}
.btn--ghost{background: rgba(0,0,0,.14)}
.btn--full{width:100%}

/* ---- Submit button: shimmer sending + success states ---- */
.btn--sending{
  position:relative; overflow:hidden;
  pointer-events:none; opacity:.9;
}
.btn--sending::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.32) 45%,
    rgba(102,240,255,.22) 55%,
    transparent 100%);
  transform:translateX(-100%);
  animation: btn-shimmer 1.1s ease-in-out infinite;
}
@keyframes btn-shimmer{
  to{ transform:translateX(100%) }
}
.btn--sent{
  background: linear-gradient(135deg, rgba(50,210,110,.28), rgba(50,210,110,.16)) !important;
  border-color: rgba(50,210,110,.55) !important;
  color: rgba(180,255,210,.95) !important;
  pointer-events:none;
  transition: background .35s ease, border-color .35s ease, color .35s ease;
}

.hero__stats{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px; margin-top:24px; max-width: 820px;
}
.stat{
  padding:14px 14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
}
.stat__k{color: rgba(102,240,255,.85); font-weight:700; letter-spacing:.02em}
.stat__v{color: var(--muted); margin-top:4px}

@keyframes scroll-bounce{
  0%,100%{ transform:translateY(0); opacity:1; }
  50%    { transform:translateY(6px); opacity:.45; }
}
@keyframes scroll-glow{
  0%,100%{ border-color:rgba(255,255,255,.14); box-shadow:none; }
  50%    { border-color:rgba(102,240,255,.42); box-shadow:0 0 18px rgba(102,240,255,.22); }
}
.hero__scroll{
  position:absolute; left:0; right:0; bottom:18px;
  display:flex; justify-content:center; pointer-events:auto;
}
.hero__scroll a{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  text-decoration:none;
  animation:scroll-glow 2.6s ease-in-out infinite;
  transition:transform .2s ease, background .2s ease;
}
.hero__scroll a:hover{
  transform:translateY(-3px);
  background:rgba(0,0,0,.4);
}
.hero__scroll-arrow{
  display:flex; align-items:center; justify-content:center;
  color:rgba(102,240,255,.88);
  animation:scroll-bounce 1.6s ease-in-out infinite;
}

/* --- Intro overlay --- */
@keyframes intro-logo-in{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes intro-hint-in{
  from{ opacity:0; }
  to  { opacity:1; }
}
@keyframes intro-pulse{
  0%,100%{ transform:scale(1);   opacity:.6; }
  50%    { transform:scale(1.55); opacity:1; }
}
@keyframes intro-line-slide{
  from{ transform:translateY(-100%); opacity:0; }
  to  { transform:translateY(100vh);  opacity:1; }
}
@keyframes intro-bg-shift{
  0%  { background-position:0% 50%; }
  50% { background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
@keyframes intro-fade-out{
  to{ opacity:0; visibility:hidden; }
}

.intro-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  overflow:hidden;
  background: linear-gradient(135deg, #06090f 0%, #0b1220 40%, #060d18 70%, #06090f 100%);
  background-size:300% 300%;
  animation: intro-bg-shift 8s ease infinite;
  transition:opacity .7s ease, visibility .7s ease;
  /* Force own compositing layer so iOS Safari respects z-index above backdrop-filter elements */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
/* Hide topbar while overlay is active — prevents iOS backdrop-filter stacking context bug */
body:has(#introOverlay:not(.is-hidden)) .topbar{
  visibility: hidden;
}
.intro-overlay::after{
  content:'';
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(102,240,255,.018) 3px,
    rgba(102,240,255,.018) 4px
  );
  pointer-events:none;
}
.intro-overlay.is-hidden{
  opacity:0; visibility:hidden; pointer-events:none;
}

/* Animated vertical lines */
.intro-overlay__lines{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
}
.intro-overlay__lines span{
  position:absolute; top:0;
  width:1px; height:30%;
  background:linear-gradient(to bottom, transparent, rgba(102,240,255,.35), transparent);
  animation: intro-line-slide linear infinite;
}
.intro-overlay__lines span:nth-child(1){ left:15%;  animation-duration:4.2s; animation-delay:0s; }
.intro-overlay__lines span:nth-child(2){ left:32%;  animation-duration:5.8s; animation-delay:.9s; }
.intro-overlay__lines span:nth-child(3){ left:50%;  animation-duration:3.9s; animation-delay:.3s; }
.intro-overlay__lines span:nth-child(4){ left:68%;  animation-duration:6.1s; animation-delay:1.4s; }
.intro-overlay__lines span:nth-child(5){ left:84%;  animation-duration:4.7s; animation-delay:.6s; }

.intro-overlay__inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:48px;
  text-align:center;
}
.intro-overlay__logo{
  width:min(300px, 62vw);
  animation: intro-logo-in .9s cubic-bezier(.22,1,.36,1) .3s both;
  filter:drop-shadow(0 0 24px rgba(102,240,255,.18));
}
.intro-overlay__hint{
  display:flex; align-items:center; gap:10px;
  color:rgba(255,255,255,.45);
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  animation: intro-hint-in .8s ease 1.2s both;
}
.intro-overlay__pulse{
  display:inline-block;
  width:8px; height:8px; border-radius:50%;
  background:rgba(102,240,255,.8);
  box-shadow:0 0 8px rgba(102,240,255,.6);
  animation: intro-pulse 1.6s ease-in-out infinite;
  flex-shrink:0;
}

/* --- Hero volume control --- */
.hero__volume{
  position:absolute; bottom:18px; left:24px;
  display:flex; align-items:center; gap:10px;
  pointer-events:auto;
}
.hero__vol-btn{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.30);
  color:rgba(102,240,255,.88);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
  flex-shrink:0;
  backdrop-filter:blur(4px);
}
.hero__vol-btn:hover{ background:rgba(0,0,0,.48); transform:scale(1.08); }
.hero__vol-btn[aria-pressed="true"]{ border-color:rgba(102,240,255,.55); background:rgba(0,0,0,.38); }
.vol-icon--sound{ display:none; }
.hero__vol-btn[aria-pressed="true"] .vol-icon--muted{ display:none; }
.hero__vol-btn[aria-pressed="true"] .vol-icon--sound{ display:block; }
.hero__vol-slider{
  -webkit-appearance:none; appearance:none;
  width:0; max-width:110px;
  height:3px; border-radius:3px;
  background:rgba(255,255,255,.22);
  outline:none; cursor:pointer;
  opacity:0;
  transition:width .3s ease, opacity .3s ease;
  pointer-events:none;
}
.hero__volume.is-active .hero__vol-slider{
  width:110px; opacity:1; pointer-events:auto;
}
.hero__vol-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:rgba(102,240,255,.95);
  cursor:pointer;
  box-shadow:0 0 6px rgba(102,240,255,.5);
  margin-top:-6px;
}
.hero__vol-slider::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:rgba(102,240,255,.95);
  border:none; cursor:pointer;
  box-shadow:0 0 6px rgba(102,240,255,.5);
}
.hero__vol-slider::-webkit-slider-runnable-track{
  background:linear-gradient(to right, rgba(102,240,255,.65) var(--vol-pct,50%), rgba(255,255,255,.22) var(--vol-pct,50%));
  border-radius:3px; height:3px;
}
.hero__vol-slider::-moz-range-track{
  background:rgba(255,255,255,.22);
  border-radius:3px; height:3px;
}

.section{padding:92px 0}
.section--alt{
  background:
    radial-gradient(900px 450px at 12% 30%, rgba(102,240,255,.08), transparent 65%),
    radial-gradient(900px 450px at 88% 40%, rgba(138,125,255,.08), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:28px}
.section__head h2{margin:0; font-size: 34px}
.section__head p{margin:0; color: var(--muted); max-width: 620px; line-height:1.5}

.grid{display:grid; gap:18px}

/* ---- Services Carousel ---- */
.carousel{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  user-select:none;
}
.carousel__track{
  display:flex;
  will-change:transform;
}
.carousel__track .card{
  flex: 0 0 100%;
  min-width:0;
  min-height:auto;
}
/* Full-image card variant */
.card--media{
  overflow:hidden;
}
.card--media .card__media{
  height: clamp(280px, 45vw, 480px);
  position:relative;
}
.card__overlay{
  position:absolute;
  inset: auto 0 0 0;
  padding: 28px 28px 24px;
  background: linear-gradient(to top,
    rgba(6,9,15,.92) 0%,
    rgba(6,9,15,.60) 55%,
    transparent 100%);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.card__label{
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
}
.card__caption{
  margin:0;
  font-size: 14px;
  color: rgba(255,255,255,.78);
  line-height: 1.55;
  max-width: 640px;
}

/* Buttons */
.carousel__btn{
  position:absolute;
  top:50%;
  transform:translateY(calc(-50% - 24px)); /* shift up to avoid dots area */
  z-index:10;
  width:48px; height:48px;
  border-radius:50%;
  border:1px solid rgba(102,240,255,.28);
  background:rgba(6,9,15,.70);
  backdrop-filter:blur(14px);
  color:var(--neon);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
  box-shadow:0 4px 24px rgba(0,0,0,.40);
}
.carousel__btn:hover{
  background:rgba(102,240,255,.14);
  border-color:rgba(102,240,255,.60);
  transform:translateY(calc(-50% - 24px)) scale(1.10);
  box-shadow:0 0 18px rgba(102,240,255,.22), 0 4px 24px rgba(0,0,0,.40);
}
.carousel__btn:active{ transform:translateY(calc(-50% - 24px)) scale(0.96) }
.carousel__btn--prev{ left:16px }
.carousel__btn--next{ right:16px }

/* Dot indicators */
.carousel__dots{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:18px 0 4px;
}
.carousel__dot{
  position:relative;
  width:8px; height:8px;
  border-radius:99px;
  background:rgba(255,255,255,.18);
  border:none;
  cursor:pointer;
  overflow:hidden;
  transition:width .3s ease, background .3s ease, border-color .3s ease;
  padding:0;
}
.carousel__dot.is-active{
  width:32px;
  background:rgba(102,240,255,.18);
  border:1px solid rgba(102,240,255,.35);
}
.carousel__dot.is-active::after{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  background:var(--neon);
  border-radius:99px;
  animation:dotProgress var(--carousel-interval, 4500ms) linear forwards;
}
@keyframes dotProgress{
  from{width:0}
  to{width:100%}
}
.card{
  overflow:hidden;
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  min-height: 100%;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
  position: relative;
}
.card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(600px 260px at 20% 20%, rgba(102,240,255,.10), transparent 60%),
              radial-gradient(600px 260px at 80% 20%, rgba(138,125,255,.10), transparent 60%);
  opacity:0;
  transition: opacity .28s ease;
}
.card:hover{
  transform: translateY(-8px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 22px 44px rgba(0,0,0,.32);
}
.card:hover:before{opacity:1}
.card__media{height: 190px; overflow:hidden}
.card__media img{width:100%; height:100%; object-fit:cover; transform:scale(1.02); filter: contrast(1.05) brightness(.90); transition: transform .32s ease, filter .32s ease}
.card:hover .card__media img{transform: scale(1.08); filter: contrast(1.06) brightness(.95)}
.card__body{padding:16px 16px 18px}
.card__body h3{margin:0 0 8px; font-size: 18px}
.card__body p{margin:0; color: var(--muted); line-height:1.55}

.tags{list-style:none; display:flex; gap:8px; padding:12px 0 0; margin:0; flex-wrap:wrap}
.tags li{
  font-size:12px; color: rgba(255,255,255,.82);
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}

.split{display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:start}
.steps{margin:18px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.steps li{
  display:flex; align-items:center; gap:12px;
  padding:12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.84);
}
.steps span{
  width:40px; height:40px; border-radius:14px;
  display:grid; place-items:center;
  background: rgba(102,240,255,.10);
  border:1px solid rgba(102,240,255,.25);
  color: rgba(102,240,255,.95);
  font-weight:800;
}
.note{
  margin-top:16px;
  padding:14px 14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.76);
}

.glass{
  padding:18px 18px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
}
.glass h3{margin:0 0 8px}
.glass p{margin:0 0 14px; color: var(--muted); line-height:1.55}
.mini{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid rgba(255,255,255,.08)}
.mini__k{color: rgba(255,255,255,.78)}
.mini__v{color: rgba(102,240,255,.82); font-weight:700}

.timeline{display:grid; gap:16px}
.titem{
  display:grid; grid-template-columns: 130px 1fr; gap:14px;
  padding:18px 18px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow);
}
.titem__year{
  font-size: 26px; font-weight:900;
  color: rgba(102,240,255,.92);
  letter-spacing:.02em;
}
.titem__body p{margin:0; color: var(--muted); line-height:1.55}
.titem__gallery{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
.titem__gallery img{
  width:100%; height: 140px; object-fit:cover;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  filter: contrast(1.05) brightness(.92);
}

/* ===== CLIENTES / LOGOS STRIP ===== */
.section--clientes{
  padding: 72px 0;
  overflow: hidden;
}
.clientes__head{
  text-align: center;
  margin-bottom: 48px;
}
.clientes__head h2{
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: var(--text);
  margin: 6px 0 0;
}

/* Logos grid — slots com crossfade independente */
.logos-grid{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 24px;
}
.logos-slot{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  position: relative;
  border-right: 1px solid rgba(255,255,255,.07);
}
.logos-slot:last-child{ border-right: none }

.logos-slot__inner{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}

/* As duas imagens num slot: saída e entrada */
.logos-slot__inner img{
  position: absolute;
  max-height: 52px;
  max-width: 80%;
  width: auto;
  object-fit: contain;
  transition: opacity 1s cubic-bezier(.4,0,.2,1),
              transform 1s cubic-bezier(.4,0,.2,1),
              filter 1s ease;
}
.logos-slot__inner img.logo-out{
  opacity: 0;
  transform: translateY(-8px) scale(.95);
  filter: blur(3px);
}
.logos-slot__inner img.logo-in{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.logos-slot__inner img.logo-hidden{
  opacity: 0;
  transform: translateY(8px) scale(.95);
  filter: blur(3px);
  pointer-events: none;
}

/* Section label acima do título */
.section-label{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--neon);
  margin: 0 0 8px;
}

/* Responsive */
@media (max-width: 768px){
  .logos-grid{ gap: 0; padding: 0 12px }
  .logos-slot{ height: 80px }
  .logos-slot:nth-child(n+4){ display: none } /* mostra só 3 em mobile */
  .logos-slot__inner img{ max-height: 38px }
  .section--clientes{ padding: 52px 0 }
}

/* ===== CONTACT ===== */
.section--contact{position:relative; overflow:hidden}
.contact__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 480px at 20% 40%, rgba(102,240,255,.10), transparent 65%),
    radial-gradient(900px 480px at 80% 30%, rgba(138,125,255,.10), transparent 65%),
    url("assets/images/bg_worldmap_contacts.jpg");
  background-size: cover;
  background-position: center;
  filter: brightness(.35) saturate(1.1);
  opacity:.9;
}
.contact{position:relative}
.contact__head h2{margin:0; font-size: 34px}
.contact__head p{margin:10px 0 0; color: var(--muted); max-width: 720px; line-height:1.55}
.contact__grid{margin-top:22px; display:grid; grid-template-columns: .85fr 1.1fr 1.05fr; gap:18px; align-items:stretch}
.contact__card{
  padding:18px 18px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(6,9,15,.60);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.contact__line{margin:10px 0; color: rgba(255,255,255,.82); line-height:1.5}
.contact__card a{color: #FFFFFFEB; text-decoration:none}

.contact__form{
  padding:18px 18px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(6,9,15,.60);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.contact__map{
  padding:0;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(6,9,15,.60);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.contact__map iframe{
  width:100%;
  height:100%;
  min-height: 320px;
  border:0;
  /* Dark-mode look for Google Maps embeds (CSS-filter approach) */
  filter: invert(90%) hue-rotate(180deg) saturate(120%) brightness(90%) contrast(90%);
}

.contact__map iframe:hover{
  filter: invert(90%) hue-rotate(180deg) saturate(120%) brightness(90%) contrast(90%);
}
.map-consent{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; min-height:320px; padding:32px 24px; text-align:center;
}
.map-consent__note{
  color:rgba(255,255,255,.55); font-size:.82rem; max-width:300px; line-height:1.5;
}
.map-consent__btn{
  padding:10px 22px; border-radius:999px;
  border:1px solid rgba(102,240,255,.38);
  background:rgba(102,240,255,.08);
  color:rgba(102,240,255,.9);
  font-size:.85rem; cursor:pointer;
  transition:background .2s, border-color .2s;
}
.map-consent__btn:hover{
  background:rgba(102,240,255,.18);
  border-color:rgba(102,240,255,.6);
}
.contact__maplink{
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}
.contact__maplink a{
  color: rgba(102,240,255,.92);
  text-decoration:underline;
  text-underline-offset:4px;
}
.field{display:grid; gap:8px; margin-bottom:12px}
.field--consent{margin-top:4px; margin-bottom:16px}
.consent-label{display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:.85rem; color:rgba(255,255,255,.65); line-height:1.5}
.consent-label input[type="checkbox"]{flex-shrink:0; align-self:flex-start; margin-top:2px; accent-color:#66f0ff; width:16px !important; height:16px !important; min-width:16px; padding:0 !important; border:none !important; background:transparent !important; border-radius:3px !important; cursor:pointer}
.consent-label a{color:rgba(102,240,255,.85); text-decoration:underline}
.consent-label a:hover{color:#fff}
label{font-size: 13px; color: rgba(255,255,255,.82)}
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline: none;
}
input:focus, textarea:focus{border-color: rgba(102,240,255,.45); box-shadow: 0 0 0 4px rgba(102,240,255,.10)}
.small{font-size: 12px; color: rgba(255,255,255,.68); margin:10px 0 0}
.form-hint--ok   { color: #4ade80 !important; }
.form-hint--error{ color: #f87171 !important; }

.footer{
  padding:22px 0;
  border-top:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.footer__logo{height:22px; width:auto; opacity:.9}

/* .reveal is now handled by GSAP ScrollTrigger (see script.js) */
.reveal.is-visible{opacity:1; transform:none}

@media (max-width: 980px){
  .split{grid-template-columns: 1fr; }
  .contact__grid{grid-template-columns: 1fr}
  .titem{grid-template-columns: 1fr}
  .titem__gallery{grid-template-columns: repeat(2, minmax(0,1fr))}
  .hero__stats{grid-template-columns: 1fr; max-width: 520px}
}

@media (max-width: 720px){
  .navbtn{display:inline-flex}
  .hero__content{padding-bottom: 88px}
  .nav{
    position:absolute; right:24px; top:62px;
    flex-direction:column; align-items:stretch;
    padding:10px;
    border-radius: 18px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(6,9,15,.85);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
    width: min(260px, calc(100vw - 48px));
    display:none;
  }
  .nav.is-open{display:flex}
  .nav a{width:100%}
}



/* Language switcher */
.lang{
  display:flex;
  gap:.4rem;
  align-items:center;
  margin-left:.75rem;
}
.lang__btn{
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
  color:#fff;
  padding:.25rem .45rem;
  border-radius:999px;
  cursor:pointer;
  line-height:1;
  font-size:1rem;
}
.lang__btn[aria-pressed="true"]{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.6);
}


/* Language flags */
.lang__btn{padding:6px 8px;}
.lang__btn img{width:24px;height:16px;display:block;}


/* ---- Footer (matches current europacoatings.pt info) ---- */
.site-footer{padding:28px 18px;border-top:1px solid rgba(255,255,255,.08)}
.footer-links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:0 0 14px 0}
.footer-links a{opacity:.9}
.footer-links a:hover{opacity:1;text-decoration:underline}
.footer-social{display:flex;gap:14px;justify-content:center;margin:0 0 14px 0}
.footer-social-link{opacity:.75}
.footer-social-link:hover{opacity:1}
.footer-meta{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;opacity:.9}
.footer-complaints-img{max-width:140px;height:auto;opacity:.95}


/* --- Improved footer layout (bilingual + contacts) --- */
.site-footer{padding:36px 18px;border-top:1px solid rgba(255,255,255,.08)}
.footer-grid{display:grid;gap:22px;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
.footer-prr{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:center;}
.footer-prr a{display:inline-block;opacity:.75;transition:opacity .2s,transform .2s;}
.footer-prr a:hover{opacity:1;transform:scale(1.04);}
.footer-prr__img{height:56px;width:auto;display:block;}
.footer-title{font-weight:700;margin:0 0 10px 0}
.footer-tagline{opacity:.9;line-height:1.4;margin:0 0 10px 0}
.footer-copy,.footer-dev{opacity:.9;line-height:1.4}
.footer-dev-name{opacity:.95}
.footer-contact{display:grid;grid-template-columns:90px 1fr;gap:10px;margin:0 0 10px 0}
.footer-label{opacity:.75}
.footer-note{opacity:.75;font-size:.92em}
.footer-links{display:flex;flex-direction:column;gap:8px;margin:0}
.footer-links a{opacity:.9}
.footer-links a:hover{text-decoration:underline;opacity:1}
.footer-map{display:inline-block;margin-top:6px;opacity:.9}
.footer-map:hover{text-decoration:underline;opacity:1}
.footer-complaints{opacity:.9;line-height:1.4}
.footer-complaints-img{max-width:160px;height:auto;margin-top:10px;opacity:.95}
@media (max-width: 980px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 560px){
  .footer-grid{grid-template-columns:1fr}
  .footer-contact{grid-template-columns:1fr}
}


/* Footer enhancements (logo + embedded map) */
.footer-logo{max-width:220px;height:auto;display:block;margin:0 0 10px 0;}
.footer-map-wrap{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,0.12);}
.footer-map-embed{width:100%;height:180px;border:0;display:block;filter: invert(90%) hue-rotate(180deg) saturate(120%) brightness(90%) contrast(90%);} 
.footer-map-embed:hover{filter: invert(90%) hue-rotate(180deg) saturate(120%) brightness(90%) contrast(90%);} 
@media (max-width: 720px){.footer-map-embed{height:160px;}}


.footer-links-group{margin-top:10px;}
.footer-subtitle{font-weight:600;margin:10px 0 6px 0;opacity:.9;}
.footer-complaints-link{text-decoration:none;color:inherit;display:block;}
.footer-map-link{text-decoration:none;}
.footer-map-block .footer-label{margin-bottom:6px;}

/* ---- Policy / legal pages ---- */
.policy-wrap{margin-top:14px;}
.policy{max-width:920px;}
.policy-updated{opacity:.8;font-size:.95rem;margin:0 0 12px 0;}
.policy h2{margin:18px 0 8px 0;font-size:1.1rem;}
.policy p{line-height:1.65;margin:10px 0;}
.policy ul{margin:10px 0 10px 20px;}
.policy li{margin:6px 0;}
.cookie-table{width:100%;border-collapse:collapse;font-size:.82rem;margin:10px 0 16px;}
.cookie-table th,.cookie-table td{padding:8px 10px;border:1px solid rgba(255,255,255,.12);text-align:left;vertical-align:top;}
.cookie-table th{background:rgba(255,255,255,.06);font-weight:600;color:rgba(255,255,255,.9);}
.cookie-table td{color:rgba(255,255,255,.75);}
@media(max-width:600px){.cookie-table,.cookie-table thead,.cookie-table tbody,.cookie-table tr,.cookie-table th,.cookie-table td{display:block;}
.cookie-table th{display:none;}
.cookie-table td{border:none;border-bottom:1px solid rgba(255,255,255,.08);padding:6px 0;}}

/* ---- Cookie FAB ---- */
.cookie-fab{
  position:fixed; bottom:22px; right:22px; z-index:7900;
  width:46px; height:46px; border-radius:50%;
  background:rgba(10,14,22,.92); border:1px solid rgba(102,240,255,.3);
  color:rgba(102,240,255,.85); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,.5);
  transition:transform .2s ease, border-color .2s, background .2s;
}
.cookie-fab:hover{
  transform:scale(1.12);
  border-color:rgba(102,240,255,.7);
  background:rgba(10,14,22,1);
}
.cookie-fab__tip{
  position:absolute; bottom:calc(100% + 8px); right:0;
  background:rgba(10,14,22,.95); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.8); font-size:.72rem; white-space:nowrap;
  padding:5px 10px; border-radius:8px; pointer-events:none;
  opacity:0; transform:translateY(4px);
  transition:opacity .2s, transform .2s;
}
.cookie-fab:hover .cookie-fab__tip{opacity:1; transform:translateY(0);}

/* ---- Cookie Banner ---- */
.cookie-banner{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(130%);
  z-index:8000; width:min(820px,calc(100vw - 24px));
  background:rgba(8,11,18,.97); border:1px solid rgba(255,255,255,.14);
  border-radius:16px; backdrop-filter:blur(20px);
  box-shadow:0 8px 48px rgba(0,0,0,.75); padding:18px 22px;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;
  opacity:0; pointer-events:none;
}
.cookie-banner.is-visible{transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto;}
.cookie-banner__inner{display:flex; gap:14px; align-items:center; flex-wrap:wrap;}
.cookie-banner__text{flex:1; min-width:220px;}
.cookie-banner__title{display:block; font-size:.9rem; color:rgba(255,255,255,.95); margin-bottom:4px; font-weight:600;}
.cookie-banner__text p{font-size:.76rem; color:rgba(255,255,255,.5); line-height:1.5; margin:0;}
.cookie-banner__actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center; flex-shrink:0;}

/* ---- Cookie Modal ---- */
.cookie-modal{display:none; position:fixed; inset:0; z-index:9000; align-items:center; justify-content:center;}
.cookie-modal.is-visible{display:flex;}
.cookie-modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(5px);}
.cookie-modal__box{
  position:relative; z-index:1; width:min(480px,calc(100vw - 28px));
  background:rgb(10,14,22); border:1px solid rgba(255,255,255,.16);
  border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.85); padding:26px;
}
.cookie-modal__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
.cookie-modal__title{font-size:1.05rem; color:rgba(255,255,255,.95); margin:0;}
.cookie-modal__close{
  width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,.14);
  background:transparent; color:rgba(255,255,255,.6); font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.cookie-modal__close:hover{background:rgba(255,255,255,.1);}
.cookie-category{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:14px 0; border-top:1px solid rgba(255,255,255,.08);
}
.cookie-category__info strong{display:block; font-size:.88rem; color:rgba(255,255,255,.88); margin-bottom:3px;}
.cookie-category__info p{font-size:.75rem; color:rgba(255,255,255,.48); line-height:1.5; margin:0;}
.cookie-always-on{
  flex-shrink:0; font-size:.7rem; color:rgba(102,240,255,.85);
  border:1px solid rgba(102,240,255,.3); border-radius:999px; padding:4px 10px; white-space:nowrap;
}
.cookie-modal__actions{display:flex; gap:10px; justify-content:flex-end; margin-top:22px; flex-wrap:wrap;}

/* Toggle switch */
.ck-toggle{flex-shrink:0; cursor:pointer; line-height:0;}
.ck-toggle__input{position:absolute; opacity:0; width:0; height:0;}
.ck-toggle__track{
  display:block; width:44px; height:24px; background:rgba(255,255,255,.15);
  border-radius:999px; position:relative; transition:background .25s;
}
.ck-toggle__input:checked ~ .ck-toggle__track{background:rgba(102,240,255,.65);}
.ck-toggle__thumb{
  position:absolute; top:3px; left:3px; width:18px; height:18px;
  background:#fff; border-radius:50%; transition:transform .25s;
}
.ck-toggle__input:checked ~ .ck-toggle__track .ck-toggle__thumb{transform:translateX(20px);}

/* Shared cookie buttons */
.ck-btn{
  padding:9px 17px; border-radius:999px; font-size:.8rem;
  cursor:pointer; border:1px solid transparent; transition:background .2s, border-color .2s; white-space:nowrap;
}
.ck-btn--accept{background:rgba(102,240,255,.14); border-color:rgba(102,240,255,.4); color:rgba(102,240,255,.95);}
.ck-btn--accept:hover{background:rgba(102,240,255,.26); border-color:rgba(102,240,255,.65);}
.ck-btn--reject{background:transparent; border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.62);}
.ck-btn--reject:hover{background:rgba(255,255,255,.07);}
.ck-btn--ghost{background:transparent; border-color:transparent; color:rgba(255,255,255,.4); font-size:.78rem; text-decoration:underline; padding:9px 10px;}
.ck-btn--ghost:hover{color:rgba(255,255,255,.75);}
@media(max-width:580px){
  .cookie-banner__inner{flex-direction:column;}
  .cookie-banner__actions{width:100%; justify-content:flex-end;}
}


/* =========================
   Mobile menu (drawer)
   ========================= */
.nav-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease;
  z-index: 999;
}
.nav-overlay.is-open{opacity:1; pointer-events:auto}

.nav__head{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px 8px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.nav__title{font-weight:700; letter-spacing:.02em}
.nav__close{
  width:42px; height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.lang--desktop{display:flex}
.nav .lang{margin:10px 0 0 0; justify-content:flex-start}
.nav__foot{display:none; padding:10px 12px 14px}

body.nav-open{overflow:hidden}

@media (max-width: 720px){
  /* Hide desktop lang in header; use the one inside drawer */
  .lang--desktop{display:none}

  .nav{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(360px, 88vw);
    padding:0;
    border-radius: 0;
    display:flex;            /* keep in DOM for transitions */
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    transform: translateX(110%);
    transition: transform .25s ease;
    z-index: 1000;
    background: rgba(6,9,15,.92);
    border-left: 1px solid rgba(255,255,255,.10);
  }
  .nav.is-open{transform: translateX(0)}
  .nav__head{display:flex}
  .nav__foot{display:block}

  .nav a{
    padding:14px 14px;
    border-radius: 14px;
    margin: 0 12px;
    font-size: 16px;
    color: rgba(255,255,255,.86);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
  }
}

/* =========================
   Process section (dynamic)
   ========================= */
/* ---- Process section pinned layout ---- */
#processo{
  display:flex;
  align-items:center;
  min-height:100vh;
  padding-top:72px; /* account for topbar */
}
.process{align-items:center}
.process__steps{
  display:grid;
  gap:10px;
  margin-top:18px;
  max-width: 560px;
}
.pstep{
  text-align:left;
  width:100%;
  display:grid;
  grid-template-columns: 48px 1fr 10px;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86);
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.pstep:hover{transform: translateY(-1px); border-color: rgba(102,240,255,.25); background: rgba(102,240,255,.06)}
.pstep__n{
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing:.06em;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding:10px 10px;
  text-align:center;
}
.pstep__t{font-weight:600}
.pstep__dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
  justify-self:end;
}
.pstep.is-active{
  border-color: rgba(102,240,255,.35);
  background: linear-gradient(90deg, rgba(102,240,255,.10), rgba(138,125,255,.08));
}
.pstep.is-active .pstep__dot{background: rgba(102,240,255,.75); border-color: rgba(102,240,255,.65)}

.process-card__head{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.process-card__badge{
  flex-shrink:0;
  width:44px; height:44px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight:800;
  letter-spacing:.08em;
  transition: background .35s ease, border-color .35s ease;
}
.process-card__text{ flex:1; min-width:0 }
.process-card__counter{
  flex-shrink:0;
  font-size:11px;
  font-variant-numeric: tabular-nums;
  letter-spacing:.1em;
  color: rgba(102,240,255,.55);
  padding:4px 8px;
  border-radius:8px;
  border:1px solid rgba(102,240,255,.18);
  background: rgba(102,240,255,.06);
  white-space:nowrap;
}
.process-card__title{
  margin:0;
  transition: opacity .25s ease, transform .25s ease;
}
.process-card__desc{
  margin:6px 0 0 0; color: rgba(255,255,255,.80); line-height:1.55;
  transition: opacity .25s ease, transform .25s ease;
}

.process-bullets{
  margin:14px 0 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.82);
  line-height:1.6;
  transition: opacity .25s ease, transform .25s ease;
}
.process-bullets li{margin:6px 0}

.process-metrics{
  margin-top: 14px;
  transition: opacity .25s ease, transform .25s ease;
}

.process-card__hint{
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255,255,255,.50);
  opacity:.9;
}

/* Progress bar */
.process-progress{
  margin-top:18px;
  height:3px;
  background: rgba(255,255,255,.08);
  border-radius:99px;
  overflow:hidden;
}
.process-progress__fill{
  height:100%;
  background: linear-gradient(90deg, var(--neon), var(--neon2));
  border-radius:99px;
  transform-origin:left;
  transform:scaleX(0);
  will-change:transform;
}

@media (max-width: 979px){
  #processo{min-height:auto; align-items:flex-start; padding-top:80px; padding-bottom:48px}
  .process-card__counter{display:none}
}
@media (max-width: 767px){
  #processo{padding-top:72px; padding-bottom:40px}
}

@media (max-width: 520px){
  .pstep{grid-template-columns: 44px 1fr 10px; padding: 12px 14px}
  .process__steps{max-width: 100%}
}

/* =========================
   Mobile optimizations
   (iOS + Android, phone + tablet)
   ========================= */

/* --- Touch / tap improvements (all devices) --- */
button, a, [role="tab"], [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* --- Tablets: 768px – 979px --- */
@media (min-width: 768px) and (max-width: 979px) {
  /* Hero stats: 3 columns side-by-side on tablet */
  .hero__stats{grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 100%}
  .hero__stats .stat:last-child{grid-column: auto}

  /* Process section: show card first, steps below */
  .process .split__b{order:-1; margin-bottom: 8px}

  /* Contact: 2 columns on tablet (info + form; map stacks) */
  .contact__grid{grid-template-columns: 1fr 1fr}

  /* Slightly tighter section padding */
  .section{padding: 72px 0}
}

/* --- Accordion panels: hidden on all screen sizes by default --- */
.pstep-panel{display:none}
.pstep__chevron{display:none} /* chevron only shown on mobile */

/* --- Phones: up to 767px --- */
@media (max-width: 767px) {
  /* Container: reduce side margins on small screens */
  .container{width: calc(100% - 32px)}

  /* Section spacing */
  .section{padding: 60px 0}
  .section__head h2{font-size: 28px}
  .section__head{flex-direction: column; align-items: flex-start; gap: 10px}

  /* Hero */
  .hero__content{padding: 52px 0 88px}
  .lead{font-size: 16px}
  .hero__cta{flex-direction: column}
  .hero__cta .btn{width: 100%; justify-content: center}
  .hero__stats{grid-template-columns: 1fr 1fr; max-width: 100%}
  .hero__stats .stat:last-child{grid-column: 1 / -1}
  .stat{padding: 12px}

  /* Process section: hide the right-side card — accordion panels replace it */
  .process .split__b{display:none}

  /* Step buttons: show chevron, remove dot indicator */
  .pstep{
    grid-template-columns: 44px 1fr 20px;
    min-height: 54px;
    padding: 13px 14px;
  }
  .pstep__dot{display:none}
  .pstep__chevron{
    display:block;
    color: rgba(255,255,255,.45);
    transition: transform .25s ease, color .2s ease;
    justify-self: end;
    flex-shrink: 0;
  }
  .pstep.is-active .pstep__chevron{
    transform: rotate(180deg);
    color: var(--neon);
  }
  .pstep__n{font-size: 13px; padding: 8px}
  .pstep__t{font-size: 14px}
  .process__steps{gap: 8px; margin-top: 12px; display: flex; flex-direction: column}

  /* Accordion panels: block but collapsed */
  .pstep-panel{
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .38s cubic-bezier(.4,0,.2,1), opacity .28s ease, padding .3s ease, margin .3s ease;
    padding: 0 16px;
    margin: 0 0 0 0;
    background: linear-gradient(135deg, rgba(102,240,255,.07), rgba(138,125,255,.04));
    border: 1px solid transparent;
    border-radius: 16px;
  }
  .pstep-panel.is-open{
    max-height: 600px;
    opacity: 1;
    padding: 16px 16px 18px;
    margin: 4px 0 8px;
    border-color: rgba(102,240,255,.25);
  }
  .pstep-panel__desc{
    margin: 0 0 10px 0;
    font-size: 14px;
    color: rgba(255,255,255,.82);
    line-height: 1.55;
  }
  .pstep-panel__bullets{
    margin: 0 0 10px 0;
    padding-left: 18px;
    font-size: 14px;
    color: rgba(255,255,255,.80);
    line-height: 1.6;
  }
  .pstep-panel__bullets li{margin: 4px 0}
  .pstep-panel__metrics{border-top: 1px solid rgba(255,255,255,.08); margin-top: 4px}
  .pstep-panel__metrics .mini{padding: 8px 0; font-size: 13px}

  /* Contact */
  .contact__head h2{font-size: 26px}
  .contact__grid{grid-template-columns: 1fr; gap: 14px}
  .contact__card, .contact__form, .contact__map{padding: 16px}
  .contact__map iframe{min-height: 220px}

  /* Form fields */
  input, textarea{font-size: 16px} /* prevents iOS auto-zoom on focus */

  /* Footer */
  .footer-grid{grid-template-columns: 1fr}
  .site-footer{padding: 28px 16px}
}

/* --- Small phones: up to 390px --- */
@media (max-width: 390px) {
  .hero__stats{grid-template-columns: 1fr}
  .hero__badge{font-size: 10px; padding: 6px 10px}
  .pstep{grid-template-columns: 40px 1fr; padding: 10px 12px}
  .pstep__dot{display: none} /* remove dot indicator on very small screens */
  .section{padding: 48px 0}
}