:root{
  --ink:#e9f0ff;
  --muted:#9bb3d9;
  --bg:#05060a;
  --blue-1:#0d2a6b;
  --blue-2:#0a4fc1;
  --blue-3:#1b6dff;
  --neon:#4ab2ff;
  --card:#0b1022;
  --glass: rgba(255,255,255,.06);
  --radius:16px;
}
html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;   /* ← evita scroll horizontal sem criar barra duplicada */
}

/* Helpers */
.container{width:min(1120px, 92%); margin-inline:auto;}
.reveal{opacity:0; transform:translateY(24px); filter:blur(6px); transition:all .7s cubic-bezier(.2,.8,.2,1);}
.reveal.in{opacity:1; transform:none; filter:none;}
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.25rem; border-radius:999px; border:1px solid transparent;
  font-weight:600; letter-spacing:.2px; text-decoration:none; cursor:pointer;
}
.btn-primary{ background:linear-gradient(90deg, var(--blue-3), #56c2ff); color:#001133; border-color:#59bfff; box-shadow:0 0 0 0 rgba(89,191,255,.4); transition:box-shadow .4s;}
.btn-primary:hover{ box-shadow:0 0 0 10px rgba(89,191,255,.08); }
.btn-ghost{ color:var(--ink); border-color:rgba(255,255,255,.2); background:transparent;}
.btn-ghost:hover{ background:rgba(255,255,255,.06); }

/* Wrap */
.softwrap{ position:relative; isolation:isolate; overflow:hidden; color:var(--ink); background:#000; }
.soft-bg{
  position:absolute; inset:-10%;
  background:
    radial-gradient(1200px 600px at 10% 90%, rgba(0,0,0,.95) 10%, transparent 60%),
    radial-gradient(1400px 900px at 95% -10%, rgba(10,30,90,.9) 8%, transparent 60%),
    linear-gradient(135deg, #02030a 0%, #051430 30%, #031027 60%, #000 100%);
  z-index:-3;
}
.soft-glow{ position:absolute; inset:auto; width:70vmax; height:70vmax; border-radius:50%; filter:blur(90px); opacity:.18; pointer-events:none;}
.soft-glow-a{ right:-25vmax; top:-10vmax; background:radial-gradient(circle at 50% 50%, #1b6dff 0%, transparent 60%); z-index:-2; }
.soft-glow-b{ left:-30vmax; bottom:-20vmax; background:radial-gradient(circle at 50% 50%, #00a3ff 0%, transparent 60%); z-index:-2; }

/* Hero */
.soft-hero{ display:grid; grid-template-columns: 1.1fr 1fr; align-items:center; gap:40px; padding: clamp(56px, 10vw, 120px) 0 32px; }
.eyebrow{ color:var(--muted); text-transform:uppercase; letter-spacing:.18em; font-size:.8rem; margin:0 0 .5rem; }
.title{
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  line-height: .95; margin:.2rem 0 1rem; font-weight:800;
  background:linear-gradient(180deg, #fff, #bcd8ff 60%, #6aa6ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.title span{ text-shadow: 0 0 18px rgba(74,178,255,.45); }
.lead{ color: #c7d7ff; font-size: clamp(1rem, 1.3vw, 1.15rem); opacity:.95; }
.cta{ display:flex; gap:.75rem; margin-top:1.25rem; flex-wrap:wrap; }

/* Stage com cards */
.soft-stage{ position:relative; height: 520px; perspective:1200px; }
.device{ position:absolute; inset:auto; left:50%; bottom:-10px; transform:translateX(-50%); width:min(560px, 82%); filter:drop-shadow(0 30px 70px rgba(0,0,0,.6)); }
.device img{ width:100%; display:block; border-radius:20px; }
.float-card{
  position:absolute; width:340px; aspect-ratio: 16 / 10; object-fit:cover;
  border-radius:16px; background:var(--card); border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05) inset;
  animation: drift 12s ease-in-out infinite alternate;
  transform: translateZ(0);
}
.fc-small{ width:220px; }
.fc-medium{ width:280px; }
.fc-badge{ width:160px; aspect-ratio: 1 / 1; border-radius:18px; }
.fc-chip{ width:120px; aspect-ratio: 1/1; border-radius:14px; }

.float-card:nth-of-type(1){ left: -40px; top: 20px; transform:rotate(-4deg) translateZ(40px); }
.float-card:nth-of-type(2){ right: 10%; top: 0; transform:rotate(6deg) translateZ(80px); }
.float-card:nth-of-type(3){ right: -40px; bottom: 140px; transform:rotate(-8deg) translateZ(60px); }
.float-card:nth-of-type(4){ left: 6%; bottom: 110px; transform:rotate(8deg) translateZ(100px); }
.float-card:nth-of-type(5){ left: 68%; top: 210px; transform:rotate(-10deg) translateZ(120px); }

@keyframes drift{
  0%{ transform: translateY(0) rotate(var(--r, 0deg)) translateZ(60px); }
  100%{ transform: translateY(-16px) rotate(calc(var(--r, 0deg) + .8deg)) translateZ(60px); }
}

/* Vídeo + benefícios */
.soft-video{ display:grid; grid-template-columns: 1fr 1.1fr; align-items:center; gap:42px; padding: 48px 0 28px; }
.player{ background:var(--glass); border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:12px; backdrop-filter: blur(10px); }
.player-trigger{ position:relative; display:block; border:0; background:transparent; padding:0; cursor:pointer; }
.player-trigger img{ display:block; width:100%; border-radius:12px; }
.player .play{
  position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%);
  display:grid; place-items:center; width:72px; height:72px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #fff, #9ad3ff);
  color:#002; font-weight:800; font-size:26px; box-shadow:0 12px 40px rgba(0,0,0,.4);
}

.benefits{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; }
.benefit{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px 18px 16px; }
.benefit .ico{ font-size:22px; margin-bottom:.25rem; }
.benefit h3{ margin:.25rem 0 .35rem; font-size:1.05rem; }
.benefit p{ margin:0; color:#c4d1ec; font-size:.98rem; line-height:1.35; }

/* Recursos */
.soft-features{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; padding: 28px 0 64px; }
.feat{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px; }
.feat h4{ margin:.2rem 0 .4rem; }
.feat p{ margin:0; color:#c4d1ec; }

/* CTA */
.soft-cta{
  text-align:center; padding: 38px 0 80px; border-radius:24px;
  background: linear-gradient(180deg, rgba(28,92,255,.18), rgba(28,92,255,.04));
  border:1px solid rgba(76,168,255,.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 20px 80px rgba(5,15,40,.55);
}
.soft-cta h3{ font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin:0 0 .4rem; }
.soft-cta p{ margin:.2rem 0 1rem; color:#cde2ff; }

/* === MODAL DE VÍDEO === */

.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(6px);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.video-modal.active {
  display: flex;
}

.video-modal-content {
  max-width: 80vw;
  max-height: 80vh;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.video-modal-body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-modal video {
  width: 100%;
  height: auto;
  max-height: 80vh;
  border-radius: 12px;
  background-color: #000;
}

.video-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 10px;
  transition: background 0.2s ease;
  z-index: 10000; /* 👈 garante que o botão fique acima do vídeo */
}


.video-modal-close:hover {
  background: rgba(255,255,255,0.25);
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}


/* Tilt */
.hover-tilt{ transform-style:preserve-3d; will-change: transform; transition: transform .2s; }

/* Parallax no scroll */
.parallax{ will-change: transform; }

/* Responsivo */
@media (max-width: 980px){
  .soft-hero{ grid-template-columns: 1fr; }
  .soft-video{ grid-template-columns: 1fr; }
  .soft-features{ grid-template-columns: 1fr 1fr; }
  .soft-stage{ height: 460px; }
}
@media (max-width: 560px){
  .benefits{ grid-template-columns: 1fr; }
  .soft-features{ grid-template-columns: 1fr; }
  .float-card{ width:68vw; }
}
/* Fundo: gradiente mais cinematográfico + leve vinheta */
.soft-bg{
  position:absolute; inset:-10%;
  background:
    radial-gradient(1200px 700px at 12% 88%, rgba(3,6,14,.95) 10%, transparent 60%),
    radial-gradient(1600px 1000px at 92% -10%, rgba(10,30,90,.9) 8%, transparent 60%),
    linear-gradient(135deg, #03060d 0%, #061537 38%, #04102a 62%, #000 100%);
  z-index:-3;
}

/* Nitidez do título (melhor legibilidade sobre escuro) */
.title{
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}

/* Cards voadores agora são DIVs com background */
.float-card{
  position:absolute; width:340px; aspect-ratio: 16 / 10;
  border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  animation: drift 12s ease-in-out infinite alternate;
  transform: translateZ(0);
  background-size: cover; background-position: center;
  overflow: hidden;
}
.float-card::before{
  /* placeholder shimmer enquanto não carrega o bg */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at 50% 20%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0), rgba(255,255,255,.06));
  filter: blur(.3px);
  opacity:.35;
  transition: opacity .4s ease;
}
.float-card.is-loaded::before{ opacity:0; }

.fc-small{ width:220px; }
.fc-medium{ width:280px; }
.fc-badge{ width:160px; aspect-ratio: 1 / 1; border-radius:18px; }
.fc-chip{ width:120px; aspect-ratio: 1/1; border-radius:14px; }

/* posicionamentos (mesmos da versão 1, pode ajustar à vontade) */
.float-card:nth-of-type(1){ left:-40px; top:20px; transform:rotate(-4deg) translateZ(40px); }
.float-card:nth-of-type(2){ right:10%; top:0; transform:rotate(6deg) translateZ(80px); }
.float-card:nth-of-type(3){ right:-40px; bottom:140px; transform:rotate(-8deg) translateZ(60px); }
.float-card:nth-of-type(4){ left:6%; bottom:110px; transform:rotate(8deg) translateZ(100px); }
.float-card:nth-of-type(5){ left:68%; top:210px; transform:rotate(-10deg) translateZ(120px); }

/* Poster do vídeo também como background */
.player .player-poster{
  display:block; width:100%; aspect-ratio:16/9; border-radius:12px;
  background-size:cover; background-position:center;
  border:1px solid rgba(255,255,255,.08);
  background-image: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); /* placeholder */
  position:relative; overflow:hidden;
}
.player .player-poster::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(80% 60% at 50% 20%, rgba(255,255,255,.06), transparent 60%);
  opacity:.35; transition: opacity .4s ease;
}
.player .player-poster.is-loaded::after{ opacity:0; }

/* botão play um tico maior com glow sutil */
.player .play{
  width:78px; height:78px; font-size:28px;
  box-shadow:0 20px 60px rgba(0,0,0,.45), 0 0 40px rgba(86,194,255,.35);
}
.benefits--list{ display:grid; grid-template-columns:1fr 1fr; gap:10px 26px; margin-top:14px; }
.benefits--list .benefit{ display:flex; gap:12px; align-items:flex-start; }
.benefits--list .benefit span{
  font-size:22px; width:36px; height:36px; border-radius:12px;
  display:grid; place-items:center; background:rgba(86,194,255,.2);
  border:1px solid rgba(86,194,255,.35);
}
.benefits--list b{ display:block; }
.benefits--list i{ display:block; font-style:normal; color:#c7d7ff; }
@media (max-width:900px){ .benefits--list{ grid-template-columns:1fr; } }
.benefits--pills{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px;
}
.benefits--pills .benefit{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.benefits--pills .benefit:hover{
  transform: translateY(-3px);
  border-color: rgba(86,194,255,.35);
  background: linear-gradient(180deg, rgba(86,194,255,.10), rgba(255,255,255,.02));
}
.benefits--pills .b-ico{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:12px;
  background: radial-gradient(circle at 30% 30%, #3caeff, #1b6dff);
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.benefits--pills .b-ico svg{
  width:24px; height:24px;
  color:white; /* os strokes do svg ficam brancos */
}
.benefits--pills .b-copy strong{ display:block; line-height:1.2; }
.benefits--pills .b-copy span{ display:block; color:#c7d7ff; font-size:.95rem; }
@media (max-width:900px){ .benefits--pills{ grid-template-columns:1fr; } }
/* Layout em linhas (minimal) */
.soft-features--lines{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap:0; padding: 28px 0 64px; border-top:1px solid rgba(255,255,255,.08); margin-top:28px;
}
.soft-features--lines .feat{
  display:flex; gap:12px; align-items:flex-start; padding:16px 0;
  border-right:1px solid rgba(255,255,255,.08);
}
.soft-features--lines .feat:last-child{ border-right:0; }
.soft-features--lines .feat b{ display:block; }
.soft-features--lines .feat i{ display:block; font-style:normal; color:#c4d1ec; opacity:.95; }

/* Ícones azuis com glow (mesmo estilo dos benefícios) */
.fx-ico{
  flex:0 0 auto; display:grid; place-items:center;
  width:44px; height:44px; border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}
.fx-ico svg{ width:24px; height:24px; color:#fff; }

/* responsivo */
@media (max-width:980px){
  .soft-features--lines{ grid-template-columns:1fr 1fr; gap:12px; border-top:0; }
  .soft-features--lines .feat{ border-right:0; border-bottom:1px solid rgba(255,255,255,.08); }
  .soft-features--lines .feat:last-child{ border-bottom:0; }
}
/* ==== M2-look aplicado ao CARD TODO ==== */
.soft-features--lines{ overflow: visible; gap:22px; } /* dá respiro pro brilho */

.soft-features--lines .feat.m2{
  position: relative;
  isolation: isolate;                 /* permite ::before/::after atrás */
  display: flex; gap: 12px;           /* mantém layout do conteúdo */
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 16px;

  /* fundo escuro com leve animação de gradiente (como no seu .m2) */
  background: linear-gradient(135deg, #1e1e24 10%, #050505 60%);
  background-size: 200% 200%;
  animation: gradient-shift 5s ease-in-out infinite;

  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
}

/* NÃO usamos logotipo/título do M2 */
.soft-features--lines .feat.m2 .logo{ display:none; }

/* Glow atrás (cores nos cantos) — usa seu before/after adaptado */
.soft-features--lines .feat.m2::before,
.soft-features--lines .feat.m2::after{
  --size: 6px;                        /* espessura da “aura” próxima ao card */
  content:"";
  position:absolute;
  top: calc(var(--size) / -2);
  left: calc(var(--size) / -2);
  width: calc(100% + var(--size));
  height: calc(100% + var(--size));
  border-radius: 18px;
  pointer-events: none;
  background:
    radial-gradient(circle at 0   0,   hsl(30, 100%, 1%), transparent 60%),
    radial-gradient(circle at 100% 0,   #11212a,            transparent 60%),
    radial-gradient(circle at 0 100%,   #222224,            transparent 60%),
    radial-gradient(circle at 100% 100%,#343338,            transparent 60%);
}

/* camada próxima ao card */
.soft-features--lines .feat.m2::after{
  --size: 2px;
  z-index: -1;
}

/* halo externo com blur e respiração */
.soft-features--lines .feat.m2::before{
  --size: 22px;                        /* alcance do brilho para fora */
  z-index: -2;
  filter: blur(2vmin);
  animation: blur-animation 3s ease-in-out alternate infinite;
}

/* tipografia/icons seguem seu estilo */
.soft-features--lines .feat.m2 b{ font-weight:800; }
.soft-features--lines .feat.m2 i{ color:#c4d1ec; opacity:.95; }
.soft-features--lines .feat.m2 .fx-ico{ flex:0 0 auto; }

/* ===== keyframes (mantém os seus) ===== */
@keyframes blur-animation{
  to{ filter: blur(3vmin); transform: scale(1.05); }
}
@keyframes gradient-shift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
/* ===== POR QUE ESCOLHER (estilo “GatewayFY”) ===== */
.soft-proof{
  display:grid; grid-template-columns: 1.1fr 1fr; gap:36px;
  align-items:center; padding: 64px 0 84px;
}
.proof-media{ position:relative; border-radius:20px; overflow:hidden; }
.proof-media img{ display:block; width:100%; height:auto; object-fit:cover; }
.media-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(86,194,255,.22), transparent 60%),
    radial-gradient(70% 90% at 20% 80%, rgba(27,109,255,.20), transparent 70%);
  mix-blend-mode:screen; filter: blur(20px); opacity:.8;
}
.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .7rem; border-radius:999px;
  background:rgba(86,194,255,.14); border:1px solid rgba(86,194,255,.35);
  color:#cfe6ff; font-weight:600; letter-spacing:.2px;
}
.proof-title{
  margin:.6rem 0 .4rem;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: .95; font-weight:900;
  background:linear-gradient(180deg,#fff,#bcd8ff 60%,#6aa6ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.proof-title span{ text-shadow:0 0 18px rgba(74,178,255,.45); }
.proof-lead{ color:#c7d7ff; max-width:56ch; }

.proof-list{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px; }
.proof-list li{ display:flex; gap:12px; align-items:flex-start; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:12px 14px; }
.proof-ico{
  display:grid; place-items:center; flex:0 0 auto;
  width:36px; height:36px; border-radius:10px;
  background: radial-gradient(circle at 30% 30%, #3caeff, #1b6dff);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.proof-ico svg{ width:18px; height:18px; color:#fff; }
.proof-list b{ display:block; }
.proof-list i{ display:block; font-style:normal; color:#cfe0ff; }

.proof-cta{ display:flex; gap:.75rem; margin-top:18px; flex-wrap:wrap; }

/* Responsivo */
@media (max-width: 980px){
  .soft-proof{ grid-template-columns: 1fr; }
}
/* Fallback: tudo visível por padrão */
.reveal{ opacity: 1 !important; transform: none !important; filter: none !important; }
/* Só anima se o JS marcar o body com .fx-ready */
.fx-ready .reveal{ opacity: 0 !important; transform: translateY(16px) !important; filter: blur(6px) !important; }
.fx-ready .reveal.in{ opacity: 1 !important; transform: none !important; filter: none !important; }
/* garante que o palco cria o contexto certo */
.soft-hero{ position: relative; }
.soft-stage{ position: relative; z-index: 1; height: 600px; }

/* NOTEBOOK: posic. absoluta e ATRÁS dos cards */
.soft-stage > .device{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 40px;         /* ajuste vertical do notebook */
  width: min(560px, 82%);
  z-index: 1;           /* atrás dos cards */
}

/* CARDS: sempre acima do notebook */
.soft-stage .float-card{
  position: absolute;
  z-index: 10;          /* acima do notebook */
}

/* se algum outro filtro/transform criar stacking inesperado */
.softwrap{ isolation: isolate; }      /* já tinha, mantemos */
/* ================= HERO FIX (compatível com seu HTML) ================ */

/* Grid do hero alinhado */
.soft-hero{
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 44px;
  padding: clamp(56px, 9vw, 120px) 0 36px;
  z-index: 1;
}

/* Texto estável (sem torto) */
.soft-hero .soft-copy{ position: relative; z-index: 5; }
.soft-hero .title{ margin:.2rem 0 .9rem; line-height:.95; text-shadow:0 1px 0 rgba(0,0,0,.22); }
.soft-hero .lead{ margin:0 0 .6rem; max-width:60ch; }
.soft-hero .cta{ margin-top:1.2rem; gap:.8rem; }

/* Stage e Device são irmãos -> device precisa ser absoluto relativo ao hero */
.soft-hero .soft-stage{
  position: relative;
  height: clamp(460px, 52vw, 600px);
  perspective: 1200px;
  z-index: 3;                 /* acima do device, abaixo do texto */
  isolation: isolate;
}

/* NOTEBOOK: posiciona no centro do hero, ATRÁS dos cards */
.soft-hero > .device{
  position: absolute;
  left: 50%;
  bottom: clamp(0px, 3vw, 18px);
  transform: translateX(-50%);
  width: min(560px, 85%);
  filter: drop-shadow(0 26px 70px rgba(0,0,0,.55));
  z-index: 2;                /* cards > device */
  pointer-events: none;
}
.soft-hero > .device img{ display:block; width:100%; border-radius:20px; }

/* ================= CARDS ================= */
.float-card{
  position: absolute;
  display: block;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  overflow: hidden;
  z-index: 4;                /* acima do device, abaixo do texto */

  /* flutuação natural */
  will-change: transform;
  transform-style: preserve-3d;
  animation: floatY 9s ease-in-out infinite alternate,
             floatR 14s ease-in-out infinite alternate;
}

/* tamanhos responsivos */
.float-card.fc-small  { width: clamp(180px, 20vw, 240px); aspect-ratio: 16/10; }
.float-card.fc-medium { width: clamp(220px, 26vw, 300px); aspect-ratio: 16/10; }
.float-card.fc-badge  { width: clamp(120px, 14vw, 160px); aspect-ratio: 1/1;   border-radius:18px; }
.float-card.fc-chip   { width: clamp(90px,  10vw, 120px); aspect-ratio: 1/1;   border-radius:14px; }

.float-card::before{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.03); }
.float-card img{ width:100%; height:100%; object-fit:cover; display:block; }

/* posições “bonitas” (não batem entre si) */
.soft-hero .soft-stage .float-card:nth-of-type(1){ left: -26px; top:  10px;  --r:-4deg; }
.soft-hero .soft-stage .float-card:nth-of-type(2){ right:  6%;  top: -16px;  --r: 6deg; }
.soft-hero .soft-stage .float-card:nth-of-type(3){ right: -28px; bottom: 150px; --r:-7deg; }
.soft-hero .soft-stage .float-card:nth-of-type(4){ left:   6%;  bottom: 110px; --r: 8deg; }
.soft-hero .soft-stage .float-card:nth-of-type(5){ left:  64%;  top:  210px;  --r:-9deg; }

/* delays diferentes = flutuação orgânica */
.float-card:nth-of-type(1){ animation-delay: 0s,   .3s; }
.float-card:nth-of-type(2){ animation-delay: .4s,  .9s; }
.float-card:nth-of-type(3){ animation-delay: .8s,  .2s; }
.float-card:nth-of-type(4){ animation-delay: .15s,1.2s; }
.float-card:nth-of-type(5){ animation-delay: .6s, 1.6s; }

@keyframes floatY{
  0%   { transform: translateY(0)           rotate(var(--r,0)); }
  100% { transform: translateY(-16px)       rotate(calc(var(--r,0) + .8deg)); }
}
@keyframes floatR{
  0%   { transform: translateZ(0) rotate(var(--r,0)); }
  100% { transform: translateZ(0) rotate(calc(var(--r,0) + .5deg)); }
}

/* ===== responsivo ===== */
@media (max-width: 1100px){
  .soft-hero{ grid-template-columns: 1fr; gap: 30px; }
  .soft-hero > .device{ bottom: 6px; width:min(560px, 88%); }
  .soft-hero .soft-stage{ height: clamp(420px, 60vw, 520px); }
  .soft-hero .soft-stage .float-card:nth-of-type(1){ left: -10px; top: 20px; }
  .soft-hero .soft-stage .float-card:nth-of-type(2){ right: 2%;   top: -10px; }
  .soft-hero .soft-stage .float-card:nth-of-type(3){ right:-10px; bottom: 140px; }
  .soft-hero .soft-stage .float-card:nth-of-type(4){ left:  4%;   bottom: 110px; }
  .soft-hero .soft-stage .float-card:nth-of-type(5){ left: 62%;   top: 210px; }
}
@media (max-width: 720px){
  .soft-hero .soft-stage{ height: 460px; }
  .soft-hero .soft-stage .float-card:nth-of-type(5){ display:none; } /* respiro no mobile */
}

/* === Ajustes finos do hero (palco + cards) === */
.soft-hero{ grid-template-columns: 1.05fr 1fr; }

/* palco respira e segura as camadas */
.soft-hero .soft-stage{
  position: relative;
  overflow: visible;
  height: clamp(480px, 52vw, 600px);
  perspective: 1200px;
  z-index: 3;
}

/* notebook atrás dos cards */
.soft-hero > .device{
  position: absolute;
  left: 50%;
  bottom: clamp(4px, 2.5vw, 18px);
  transform: translateX(-50%);
  width: min(560px, 85%);
  z-index: 2;
  pointer-events: none;
}

/* tamanhos (o 1º é o maior) */
.soft-hero .soft-stage .float-card:first-child{
  width: clamp(260px, 32vw, 380px);     /* card grande */
  aspect-ratio: 16/10;
}
.float-card.fc-small  { width: clamp(180px, 20vw, 240px); }
.float-card.fc-medium { width: clamp(220px, 26vw, 300px); }
.float-card.fc-badge  { width: clamp(120px, 14vw, 160px); }
.float-card.fc-chip   { width: clamp(90px,  10vw, 120px); }

/* posições bonitas (não se atropelam) */
.soft-hero .soft-stage .float-card:nth-of-type(1){ /* grande */
  right: 6%; top: 36px; --r:-2.5deg; z-index: 38;
}
.soft-hero .soft-stage .float-card:nth-of-type(2){ /* pequeno topo */
  right: 0%; top: -12px; --r: 6deg; z-index: 42;
}
.soft-hero .soft-stage .float-card:nth-of-type(3){ /* medio acima do note */
  right: 4%; bottom: 160px; --r:-6deg; z-index: 36;
}
.soft-hero .soft-stage .float-card:nth-of-type(4){ /* medio à esquerda */
  left: -12px; bottom: 118px; --r: 7deg; z-index: 44;
}
.soft-hero .soft-stage .float-card:nth-of-type(5){ /* badge/flutuando no meio */
  left: 58%; top: 212px; --r:-8deg; z-index: 48;
}

/* flutuação suave (mantém, mas reforço aqui) */
.float-card{
  animation: floatY 9s ease-in-out infinite alternate,
             floatR 14s ease-in-out infinite alternate;
  will-change: transform;
  transform-style: preserve-3d;
}
.float-card:nth-of-type(1){ animation-delay: 0s,   .3s; }
.float-card:nth-of-type(2){ animation-delay: .4s,  .9s; }
.float-card:nth-of-type(3){ animation-delay: .8s,  .2s; }
.float-card:nth-of-type(4){ animation-delay: .15s,1.2s; }
.float-card:nth-of-type(5){ animation-delay: .6s, 1.6s; }

@keyframes floatY{
  0%   { transform: translateY(0)           rotate(var(--r,0)); }
  100% { transform: translateY(-16px)       rotate(calc(var(--r,0) + .8deg)); }
}
@keyframes floatR{
  0%   { transform: translateZ(0) rotate(var(--r,0)); }
  100% { transform: translateZ(0) rotate(calc(var(--r,0) + .5deg)); }
}

/* responsivo fino */
@media (max-width: 1100px){
  .soft-hero{ grid-template-columns: 1fr; gap: 28px; }
  .soft-hero .soft-stage{ height: clamp(440px, 60vw, 520px); }
  .soft-hero .soft-stage .float-card:nth-of-type(1){ right: 4%;  top: 32px; }
  .soft-hero .soft-stage .float-card:nth-of-type(2){ right: -2%; top: -8px; }
  .soft-hero .soft-stage .float-card:nth-of-type(3){ right: 2%;  bottom: 150px; }
  .soft-hero .soft-stage .float-card:nth-of-type(4){ left:  -6px; bottom: 110px; }
  .soft-hero .soft-stage .float-card:nth-of-type(5){ left: 56%;  top: 212px; }
}
@media (max-width: 720px){
  .soft-hero .soft-stage{ height: 460px; }
  .soft-hero .soft-stage .float-card:nth-of-type(5){ display:none; }
}
/* ================== HARD FIX: HERO LIMPO, TIPOGRAFIA E COLLAGE ================== */

/* largura e respiro do container do hero */
#software .container{ width:min(1180px, 92%); }

/* grade do hero reorganizada */
.soft-hero{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 520px;   /* texto | palco fixo */
  align-items:center;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(48px, 8vw, 96px) 0 clamp(24px, 5vw, 48px);
}

/* TIPOGRAFIA – escala menor e consistente */
.soft-hero .eyebrow{
  margin:0 0 .5rem;
  font-size:.78rem;
  letter-spacing:.18em;
  color: var(--muted);
  opacity:.95;
}

/* h2 vira “hero-title” com clamp estável e menos glow */
.soft-hero .title{
  margin:.1rem 0 .7rem;
  font-weight: 800;
  line-height: .98;
  font-size: clamp(2.2rem, 5.8vw, 3.6rem);  /* ↓ menor */
  background:linear-gradient(180deg,#f7fbff,#cfe1ff 60%,#86b9ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 0 transparent;           /* tira o glow forte */
}
.soft-hero .title span{ text-shadow: 0 0 14px rgba(74,178,255,.35); }

.soft-hero .lead{
  margin:.2rem 0 .4rem;
  font-size: clamp(.98rem, 1.15vw, 1.08rem);
  color:#cfe0ff;
  max-width: 62ch;
}

/* CTA menor e com respiro */
.soft-hero .cta{ margin-top: .9rem; gap:.6rem; }
.soft-hero .btn{ padding:.78rem 1.05rem; font-weight:600; }
.soft-hero .btn-primary{ box-shadow:0 0 0 0 rgba(89,191,255,.35); }
.soft-hero .btn-primary:hover{ box-shadow:0 0 0 10px rgba(89,191,255,.08); }

/* PALCO – dimensões fixas e alinhado à direita */
.soft-hero .soft-stage{
  position:relative;
  width:100%;
  height: 520px;
  justify-self:end;
  overflow:visible;
  perspective:1200px;
  z-index:3;
}

/* notebook (se estiver usando) */
.soft-hero > .device{ display:none; } /* opcional: escondemos pra limpar a hero */

/* CARDS – base */
.soft-hero .soft-stage .float-card{
  position:absolute;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  overflow:hidden;
  will-change: transform;
  animation: floatY 9s ease-in-out infinite alternate,
             floatR 14s ease-in-out infinite alternate;
}
.soft-hero .soft-stage .float-card::before{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.02); }

/* ===== Collage “organizado” (tamanhos estáveis) ===== */
/* dashboard (software1) – esquerdo grande, mas menor que o SGI */
.soft-hero .soft-stage .float-card[data-bg$="software1.jpg"]{
  width: 440px; aspect-ratio: 16/9;
  left: -40px; top: 24px; --r:-2deg; z-index:32;
}
/* mapa (software2) – topo direita */
.soft-hero .soft-stage .float-card[data-bg$="software2.jpg"]{
  width: 340px; aspect-ratio: 16/10;
  right: -20px; top: -10px; --r:4deg; z-index:50;
}
/* cérebro (software5) – pequeno entre os da direita (mesmo tamanho) */
.soft-hero .soft-stage .float-card[data-bg$="software5.jpg"]{
  width: 160px; aspect-ratio:1/1;
  left: 225px; top: 170px; --r:0deg; z-index:45; border-radius:16px;
}
/* industrial (software4) – meio direita */
.soft-hero .soft-stage .float-card[data-bg$="software4.jpg"]{
  width: 520px; aspect-ratio: 16/9.5;
  right: -18px; bottom: 72px; --r:-4deg; z-index:38;
}
/* SGI (software7) – MAIOR e por cima */
.soft-hero .soft-stage .float-card[data-bg$="software7.jpg"]{
  width: 640px; aspect-ratio: 16/9;
  left: -36px; bottom: -6px; --r:5deg; z-index:55;
}

/* flutuação leve */
@keyframes floatY{ 0%{transform:translateY(0) rotate(var(--r,0));} 100%{transform:translateY(-12px) rotate(calc(var(--r,0)+.5deg));} }
@keyframes floatR{ 0%{transform:translateZ(0) rotate(var(--r,0));}   100%{transform:translateZ(0) rotate(calc(var(--r,0)+.3deg));} }

/* ===== Responsivo ===== */
@media (max-width: 1200px){
  .soft-hero{ grid-template-columns: 1fr 480px; }
  .soft-hero .soft-stage{ height: 500px; }
}
@media (max-width: 1024px){
  .soft-hero{ grid-template-columns: 1fr; }
  .soft-hero .soft-stage{
    height: 520px;
    justify-self: center;
    margin-top: 6px;
  }
  /* reposiciona levemente pro mobile */
  .soft-hero .soft-stage .float-card[data-bg$="software1.jpg"]{ left:-10px; top:20px; width: min(88vw, 420px); }
  .soft-hero .soft-stage .float-card[data-bg$="software2.jpg"]{ right:-10px; top:-6px; width:min(70vw, 320px); }
  .soft-hero .soft-stage .float-card[data-bg$="software5.jpg"]{ left: 56%; top: 190px; width: 140px; }
  .soft-hero .soft-stage .float-card[data-bg$="software4.jpg"]{ right:-10px; bottom:70px; width:min(92vw, 480px); }
  .soft-hero .soft-stage .float-card[data-bg$="software7.jpg"]{ left:-8px; bottom:-2px; width:min(96vw, 600px); }
}
@media (max-width: 640px){
  .soft-hero .title{ font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .soft-hero .lead{ font-size: .98rem; }
  .soft-hero .soft-stage{ height: 480px; }
  .soft-hero .soft-stage .float-card[data-bg$="software5.jpg"]{ width: 128px; }
}
/* ================== COLLAGE ENCAIXADO (flutuando suave) ================== */

:root{ --gutter: 22px; }

.soft-hero .soft-stage{
  position: relative;
  overflow: visible;
  height: clamp(500px, 54vw, 620px);
  perspective: 1200px;
  z-index: 3;
}

/* base dos cards */
.soft-hero .soft-stage .float-card{
  position:absolute;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  overflow:hidden;
  will-change: transform;
  animation: floatY 9s ease-in-out infinite alternate,
             floatR 14s ease-in-out infinite alternate;
}

/* 7) SGI — maiorzinho (base), sem exagero */
.soft-hero .soft-stage .float-card[data-bg$="software7.jpg"]{
  width: clamp(460px, 46vw, 560px);
  aspect-ratio: 16/9;
  left: var(--gutter);
  bottom: -6px;
  --r: 4deg;
  z-index: 40;
}

/* 1) Dashboard — menor que 7, encostando levemente por baixo */
.soft-hero .soft-stage .float-card[data-bg$="software1.jpg"]{
  width: clamp(300px, 30vw, 360px);
  aspect-ratio: 16/9;
  left: calc(var(--gutter) - 8px);
  top: 18px;
  --r: -2deg;
  z-index: 33;
}

/* 2) Mapa — topo direita, sobrepõe ~8px no 7 (só um pedacinho) */
.soft-hero .soft-stage .float-card[data-bg$="software2.jpg"]{
  width: clamp(260px, 26vw, 320px);
  aspect-ratio: 16/10;
  right: calc(var(--gutter) - 10px);
  top: -8px;
  --r: 3deg;
  z-index: 45;
}

/* 4) Industrial — meio direita, encosta sutil no 7 (~10px) */
.soft-hero .soft-stage .float-card[data-bg$="software4.jpg"]{
  width: clamp(320px, 32vw, 380px);
  aspect-ratio: 16/10;
  right: calc(var(--gutter) - 6px);
  bottom: 62px;
  --r: -3deg;
  z-index: 42;
}

/* 5) Cérebro — quadrado pequeno, “entre” mapa e industrial */
.soft-hero .soft-stage .float-card[data-bg$="software5.jpg"]{
  width: clamp(120px, 12vw, 150px);
  aspect-ratio: 1/1;
  left: calc(50% + 50px);
  top: 150px;
  --r: 0deg;
  z-index: 47;                     /* entre 2 (45) e 4 (42) */
  border-radius: 16px;
}
/* 5) Cérebro — quadrado pequeno, “entre” mapa e industrial */
.soft-hero .soft-stage .float-card[data-bg$="software4.jpg"]{
  width: clamp(120px, 12vw, 150px);
  aspect-ratio: 1/1;
  left: calc(50% + 50px);
  top: 150px;
  --r: 0deg;
  z-index: 47;                     /* entre 2 (45) e 4 (42) */
  border-radius: 16px;
}


/* flutuação leve */
@keyframes floatY{
  0%   { transform: translateY(0)           rotate(var(--r,0)); }
  100% { transform: translateY(-12px)       rotate(calc(var(--r,0) + .4deg)); }
}
@keyframes floatR{
  0%   { transform: translateZ(0) rotate(var(--r,0)); }
  100% { transform: translateZ(0) rotate(calc(var(--r,0) + .25deg)); }
}

/* ===== Responsivo ===== */
@media (max-width: 1100px){
  :root{ --gutter: 16px; }
  .soft-hero{ grid-template-columns: 1fr; gap: 28px; }
  .soft-hero .soft-stage{ height: clamp(500px, 68vw, 580px); }

  .soft-hero .soft-stage .float-card[data-bg$="software7.jpg"]{ width:min(92vw, 520px); left:var(--gutter); bottom:-4px; }
  .soft-hero .soft-stage .float-card[data-bg$="software1.jpg"]{ width:min(80vw, 340px); left:calc(var(--gutter) - 6px); top:16px; }
  .soft-hero .soft-stage .float-card[data-bg$="software2.jpg"]{ width:min(66vw, 300px); right:calc(var(--gutter) - 8px); top:-6px; }
  .soft-hero .soft-stage .float-card[data-bg$="software4.jpg"]{ width:min(84vw, 360px); right:calc(var(--gutter) - 6px); bottom:58px; }
  .soft-hero .soft-stage .float-card[data-bg$="software5.jpg"]{ width:min(28vw, 140px); left:calc(50% + 36px); top:148px; }
}
@media (max-width: 640px){
  .soft-hero .soft-stage{ height: 500px; }
  .soft-hero .soft-stage .float-card[data-bg$="software5.jpg"]{ width: 120px; left: 58%; top: 170px; }
}
:root{ --gutter: 22px; }

.soft-hero .soft-stage{
  position: relative;
  overflow: visible;
  height: clamp(500px, 54vw, 620px);
  perspective: 1200px;
  z-index: 3;
}

.soft-hero .soft-stage .float-card{
  position:absolute;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  overflow:hidden;
  will-change: transform;
  animation: floatY 9s ease-in-out infinite alternate,
             floatR 14s ease-in-out infinite alternate;
}

/* 7) SGI — maiorzinho (base), sem exagero */
.soft-hero .soft-stage .float-card[data-bg$="software7.jpg"]{
  width: clamp(460px, 46vw, 560px);
  aspect-ratio: 16/9;
  left: calc(var(--gutter) - 50px);
  bottom: 80px;
  --r: 4deg;
  z-index: 40;
}

/* 1) Dashboard */
.soft-hero .soft-stage .float-card[data-bg$="software1.jpg"]{
  width: clamp(300px, 30vw, 360px);
  aspect-ratio: 16/9;
  left: calc(var(--gutter) - 200px);
  top: 18px;
  --r: -2deg;
  z-index: 33;
}

/* 2) Mapa — topo direita, sobrepõe ~8px no 7 */
.soft-hero .soft-stage .float-card[data-bg$="software2.jpg"]{
  width: clamp(260px, 26vw, 320px);
  aspect-ratio: 16/10;
  right: calc(var(--gutter) - 10px);
  top: -8px;
  --r: 3deg;
  z-index: 45;
}

/* 4) Industrial — meio direita, encosta sutil no 7 */
.soft-hero .soft-stage .float-card[data-bg$="software4.jpg"]{
  width: clamp(120px, 12vw, 150px);
 aspect-ratio: 1/1;
  left: calc(var(--gutter) - 200px);
  --r: 0deg;
  z-index: 42;
   /* limpa qualquer top/left/right/bottom anterior */
  inset: auto;

  /* âncora na direita + descer */
  right: calc(var(--gutter) + 350px);
  bottom: 280px; /* ↓ encosta no fundo do palco */

  
}

/* 5) Cérebro — pequeno entre mapa e industrial */
.soft-hero .soft-stage .float-card[data-bg$="software5.jpg"]{
  width: clamp(220px, 22vw, 200px);
  aspect-ratio: 16/10;
left: calc(var(--gutter) -0px);
right: calc(var(--gutter) + 150px);
  top: 170px;
  --r: 0deg;
  z-index: 47;
  border-radius: 16px;
}

/* flutuação leve */
@keyframes floatY{
  0%   { transform: translateY(0)           rotate(var(--r,0)); }
  100% { transform: translateY(-12px)       rotate(calc(var(--r,0) + .4deg)); }
}
@keyframes floatR{
  0%   { transform: translateZ(0) rotate(var(--r,0)); }
  100% { transform: translateZ(0) rotate(calc(var(--r,0) + .25deg)); }
}
/* === FIX definitivo para o card 4 (software4.jpg) === */
/* ===== Layout: cards à esquerda e imagem à direita ===== */
.benefits-row {
  display: grid;
  grid-template-columns: minmax(520px, 640px) 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 48px;
}

/* Grid interno dos cards */
.benefits-row .benefits {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}

/* Neutraliza transform/opacity do reveal */
.benefits-row .benefit.reveal,
.benefits-row .benefit[style] {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* ===== Imagem à direita ===== */
.benefits-art {
  display: flex;
  justify-content: center;
  align-items: center;
}
.benefits-art img {
  width: 100%;
  max-width: 560px;   /* controla o tamanho da imagem */
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 80px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
  object-fit: cover;
}

/* ===== Responsivo ===== */
@media (max-width: 1100px) {
  .benefits-row {
    grid-template-columns: 1fr;
  }
  .benefits-art {
    margin-top: 24px;
  }
  .benefits-row .benefits {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .benefits-row .benefits {
    grid-template-columns: 1fr;
  }
}

.soft-stage .float-card.reveal{ opacity:1 !important; filter:none !important; transform:none !important; }


.peca-ja {
  position: fixed;
  left: 50%;                         /* centraliza horizontalmente */
  bottom: max(16px, env(safe-area-inset-bottom)); /* mesma linha do WhatsApp */
  transform: translateX(-50%);       /* corrige o centramento */
  z-index: 9999;

  /* layout e aparência */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: #001133;

  /* gradiente azul vibrante */
  background: linear-gradient(90deg, var(--accent), #56c2ff);
  border: 1px solid #59bfff;
  box-shadow:
    0 0 12px rgba(89,191,255,.4),
    0 0 28px rgba(86,194,255,.25);
  
  transition: all 0.3s ease;
}

/* Hover suave */
.peca-ja:hover {
  filter: brightness(1.08);
  transform: translateX(-50%) translateY(-2px);
  box-shadow:
    0 0 20px rgba(86,194,255,.6),
    0 0 40px rgba(86,194,255,.4);
}
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(6px);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: linear-gradient(180deg, #0F1320 0%, #0B0E12 100%);
  border: 1px solid rgba(47,163,255,0.25);
  box-shadow: 0 0 25px rgba(47,163,255,0.3);
  border-radius: 16px;
  padding: 40px 30px;
  max-width: 480px;
  width: 100%;
  color: #EAF2FF;
  position: relative;
  animation: fadeIn .3s ease;
}

.modal-content h2 { color: #2FA3FF; text-align:center; margin:0 0 10px; }
.modal-content p { color: #BFD3EB; text-align:center; margin-bottom:20px; }

.form-contato input,
.form-contato textarea {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 12px;
  color: #EAF2FF;
  margin-bottom: 12px;
}

.form-contato input:focus,
.form-contato textarea:focus {
  border-color: #2FA3FF;
  box-shadow: 0 0 6px rgba(47,163,255,0.5);
  outline: none;
}

.btn-enviar {
  width: 100%;
  background: linear-gradient(90deg, #2FA3FF, #56c2ff);
  color: #001133;
  border: 1px solid #59bfff;
  border-radius: 999px;
  padding: 14px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
}

.btn-enviar:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 15px rgba(86,194,255,0.5);
}

.fechar {
  position: absolute;
  top: 10px; right: 18px;
  font-size: 1.8rem;
  color: #59bfff;
  cursor: pointer;
}

/* ================================
   🔹 MENU LATERAL (MOBILE)
=================================== */

/* 🔸 Menu começa fechado fora da tela */
#mobile-menu {
  position: fixed;
  top: 0;
  left: -100%; /* começa escondido */
  width: 75%;
  max-width: 320px;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  transition: left 0.3s ease;
  overflow-y: auto; /* permite rolagem */
  overflow-x: hidden;
  z-index: 9999;
  padding-bottom: 80px; /* espaço pro botão contato */
  scrollbar-width: thin;
}

/* 🔸 Quando o menu está aberto */
#mobile-menu.open {
  left: 0; /* entra suave da esquerda */
}

/* 🔸 Botão de fechar (X) */
#mobile-menu .close-menu {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 6px;
  cursor: pointer;
  padding: 6px 10px;
  transition: all 0.2s ease;
}
#mobile-menu .close-menu:hover {
  background: rgba(255,255,255,0.1);
}

/* 🔸 Lista principal */
#mobile-menu ul {
  margin: 0;
  padding: 60px 0 80px;
  list-style: none;
}

/* 🔸 Itens principais */
#mobile-menu ul li a {
  display: block;
  padding: 12px 25px;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 400;
  transition: background 0.2s ease;
}

#mobile-menu ul li a:hover {
  background: rgba(255,255,255,0.08);
}

/* 🔸 "Serviços" com submenu */
#mobile-menu .has-dd > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}

/* 🔸 Dropdown de serviços */
#mobile-menu .has-dd .dropdown {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  padding: 8px 25px 8px 35px;
  margin: 0;
  border-left: 2px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  max-height: 65vh; /* 🔥 limita a altura */
  overflow-y: auto; /* 🔥 scroll interno */
  width: calc(100% - 20px);
  box-sizing: border-box;
}

/* 🔸 Dropdown ativo (aberto) */
#mobile-menu .has-dd.active .dropdown {
  display: block;
}

/* 🔸 Links dentro do dropdown */
#mobile-menu .dropdown a {
  color: rgba(255,255,255,0.9);
  font-size: 0.92rem;
  display: block;
  padding: 6px 0;
}
#mobile-menu .dropdown a:hover {
  color: #00aaff;
}

/* 🔸 Bandeiras dentro do menu lateral */
#mobile-menu .nav-lang {
  display: flex;
  gap: 10px;
  padding: 15px 25px;
  justify-content: flex-start;
}
#mobile-menu .nav-lang img {
  width: 22px;
  height: auto;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
#mobile-menu .nav-lang img:hover {
  opacity: 1;
}

/* 🔸 Botão de contato */
#mobile-menu .nav-actions {
  padding: 20px 25px;
  text-align: left;
}
#mobile-menu .btn.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 0.95rem;
  display: inline-block;
  transition: all 0.2s ease;
}
#mobile-menu .btn.btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: #00aaff;
  color: #00aaff;
}

/* ================================
   🔹 BOTÃO HAMBÚRGUER (MOBILE)
=================================== */
#menu-toggle.hamburger {
  display: none;
  background: none;
  border: none;
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 10000;
  cursor: pointer;
  color: #fff;
}

/* Ícone SVG */
#menu-toggle svg {
  width: 28px;
  height: 28px;
  stroke: #fff;
}

/* Mostrar só no mobile */
@media (max-width: 991px) {
  #menu-toggle.hamburger {
    display: block;
  }
}

/* ================================
   🔹 AJUSTES GERAIS
=================================== */
body.menu-open {
  overflow: hidden; /* impede rolagem do fundo */
}

/* 🔹 Versão reduzida só no mobile */
@media (max-width: 768px) {
  .orbit-copy h2 {
    font-size: 1.9em; /* 👈 diminui no celular */
    line-height: 1.3;
  }
}
.only-mobile { display: none; }
.only-desktop { display: list-item; }

@media (max-width: 768px) {
  .only-mobile { display: list-item; }
  .only-desktop { display: none; }
}