:root{
  /* ===== PALETA OFICIAL (5 CORES) ===== */
  --c1:#2ff3f2;  /* accent / neon */
  --c2:#467f8c;  /* teal slate */
  --c3:#0f5c8d;  /* blue */
  --c4:#0a2b59;  /* navy */
  --c5:#131725;  /* deep background */

  /* ===== MAPAS DO TEMA (derivados só das 5 cores) ===== */
  --bg0: var(--c5);
  --bg1: var(--c4);
  --bg2: var(--c3);

  --text: rgba(234,240,255,.95);
  --muted: rgba(234,240,255,.70);

  --stroke: rgba(47,243,242,.14);   /* baseado no c1 */
  --stroke2: rgba(47,243,242,.32);  /* baseado no c1 */

  --shadow: 0 18px 55px rgba(0,0,0,.55);
  --radius: 18px;
  --max: 1180px;
  
  --accent: var(--c1);
  --accent2: var(--c2);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--c5) 0%, #0f1424 50%, var(--c5) 100%);

  overflow-x:hidden;
}

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

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

/* =========================
   HEADER / NAV
========================= */
:root{
  --header-h: 76px; /* mesma altura do .nav-wrap */
}

.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999; /* garante que fica acima das seções */
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(3,6,20,.82), rgba(3,6,20,.55));
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.nav-wrap{
  height: 76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 220px;
}
.brand-logo{
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55));
}
.brand-name{
  font-weight: 800;
  letter-spacing: .3px;
  font-size: 28px;
  line-height: 1;
  color: rgba(234,240,255,.95);
}
.brand-name span{
  font-weight: 800;
  color: rgba(21,214,255,.95);
}

.nav{
  display:flex;
  align-items:center;
  gap: 22px;
}

.nav-link{
  font-size: 14px;
  color: rgba(234,240,255,.72);
  padding: 10px 8px;
  border-radius: 10px;
  transition: transform .15s ease, color .15s ease, background .15s ease;
}
.nav-link:hover{
  color: rgba(234,240,255,.95);
  background: rgba(255,255,255,.05);
  transform: translateY(-1px);
}

.nav-cta{
  margin-left: 10px;
}

/* mobile toggle */
.nav-toggle{
  display:none;
  width: 46px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  height:2px;
  width: 20px;
  margin: 5px auto;
  background: rgba(234,240,255,.85);
  border-radius: 2px;
}

/* =========================
   BUTTONS
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }

.btn-lg{
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 14px;
}

.btn-solid{
  background: linear-gradient(90deg, var(--c1), var(--c3));
  color: var(--c5);
  box-shadow: 0 18px 40px rgba(47,243,242,.18);
}
.btn-solid:hover{
  box-shadow: 0 22px 55px rgba(47,243,242,.24);
}

.btn-ghost{
  background: rgba(19,23,37,.25);
  border: 1px solid rgba(47,243,242,.55);
  color: rgba(47,243,242,.95);
}
.btn-ghost:hover{
  background: rgba(47,243,242,.08);
}

/* =========================
   HERO
========================= */
.hero{
  position: relative;


  min-height: 75vh;
  min-height: 75svh;          /* melhor no mobile */
  display: flex;
  align-items: center;          /* centraliza verticalmente o conteúdo */

  padding: 88px 0;              /* pode ajustar depois */
  overflow: hidden;
}

.hero-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.hero-glow{
  position:absolute;
  width: 900px;
  height: 600px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .22;
}


.hero-noise{
  position:absolute;
  inset:0;
  opacity:.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.hero-inner{
  position: relative;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(47,243,242,.28);
  background: rgba(19,23,37,.35);
  color: rgba(47,243,242,.95);
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 22px;
}



.pill-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c1);
  box-shadow: 0 0 0 6px rgba(47,243,242,.10);
}

.hero-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: -1.2px;
  font-size: clamp(30px, 5.2vw, 42px);
  line-height: 1.02;
  text-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.t-white{ color: rgba(234,240,255,.98); }
.t-accent{
  color: var(--accent);
  text-shadow: 0 18px 50px rgba(21,214,255,.18);
}

.hero-subtitle{
  margin: 16px 0 0;
  max-width: 760px;
  color: rgba(234,240,255,.62);
  font-size: 18px;
  line-height: 1.55;
}

.hero-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  margin-top: 55px;
  flex-wrap: wrap;
}

.hero-badges{
  display:flex;
  gap: 26px;
  margin-top: 26px;
  flex-wrap: wrap;
  justify-content:center;
  color: rgba(234,240,255,.62);
  font-size: 13px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
}
.dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display:inline-block;
}
.dot.ok{
  background: #27f2a7;
  box-shadow: 0 0 0 6px rgba(39,242,167,.10);
}

/* footer simple */
.site-footer{
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 24px 0;
  color: rgba(234,240,255,.55);
}
.footer-inner{ text-align:center; }

/* =========================
   RESPONSIVO
========================= */
@media (max-width: 980px){
  .nav-toggle{ display:block; }
  .nav{
    position: absolute;
    top: 76px;
    right: 24px;
    left: 24px;
    display:none;
    flex-direction:column;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(3,6,20,.85);
    backdrop-filter: blur(10px);
    box-shadow: 0 22px 60px rgba(0,0,0,.55);
  }
  .nav.open{ display:flex; }
  .nav-cta{ width: 100%; }
  .nav-link{ width: 100%; text-align:left; }
}

@media (max-width: 520px){
  .brand-name{ font-size: 24px; }
  .hero-subtitle{ font-size: 16px; }
}


.pill-logo{
  margin-bottom: 22px;
  display: flex;
  justify-content: center;
}

.pill-logo img{
  height: 230px;
  width: auto;
  display: block;
}

.brand-logo{
  height: 50px;
  width: auto;
  display: block;
  filter: drop-shadow(0 10px 25px rgba(0,0,0,.45));
}


/* =========================
   SOLUTIONS
========================= */
.solutions {
  position: relative;
  padding: 120px 0;
  background: #0b1220; /* base escura */
  overflow: hidden;
}

.solutions::before {
  content: "";
  position: absolute;
  top: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #2ff3f2 0%, transparent 60%);
  opacity: 0.25;
  filter: blur(120px);
  z-index: 0;

  animation: solutionsGlowA 18s ease-in-out infinite; /* <-- ADICIONE */
}

.solutions::after {
  content: "";
  position: absolute;
  bottom: -250px;
  right: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, #0f5c8d 0%, transparent 60%);
  opacity: 0.3;
  filter: blur(140px);
  z-index: 0;

  animation: solutionsGlowB 22s ease-in-out infinite; /* <-- ADICIONE */
}

/* garante que o conteúdo fique acima do glow */
.solutions > * {
  position: relative;
  z-index: 1;
}


@keyframes solutionsGlowA {
  0%   { transform: translate3d(0,0,0); }
  33%  { transform: translate3d(70px,20px,0); }
  66%  { transform: translate3d(30px,55px,0); }
  100% { transform: translate3d(0,0,0); }
}

@keyframes solutionsGlowB {
  0%   { transform: translate3d(0,0,0); }
  33%  { transform: translate3d(-80px,-25px,0); }
  66%  { transform: translate3d(-35px,-65px,0); }
  100% { transform: translate3d(0,0,0); }
}


.solutions::before { filter: blur(160px); }
.solutions::after  { filter: blur(180px); }




.solutions .container{
  position: relative;
  z-index: 1;
}



.section-head{
  text-align:center;
  max-width: 920px;
  margin: 0 auto 24px;
}

.kicker{
  display:inline-block;
  font-size: 20px;
  letter-spacing: .18em;
  font-weight: 800;
  color: rgba(47,243,242,.92);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.section-title{
  margin: 0;
  font-size: clamp(30px, 3.2vw, 44px);
  letter-spacing: -0.6px;
  font-weight: 900;
  color: rgba(234,240,255,.98);
}

.section-subtitle{
  margin: 12px auto 0;
  max-width: 760px;
  color: rgba(234,240,255,.62);
  font-size: 16px;
  line-height: 1.6;
}

.solutions-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 26px;
}

.solution-card{
  position: relative;
  padding: 26px 26px 22px;
  border-radius: 16px;
  background: rgba(10,43,89,.18);
  border: 2px solid rgba(255,255,255,.06);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
  min-height: 280px;
}

/* ===== REVEAL ON SCROLL (Solutions) ===== */
/* ===== REVEAL ON SCROLL (Solutions) ===== */
.solutions.reveal .solution-card{
  /* valores padrão (fallback) */
  --rx: 0px;
  --ry: 18px;

  opacity: 0;
  transform: translate3d(var(--rx), var(--ry), 0) scale(.985);
  filter: blur(2px);

  transition:
    opacity 1.6s ease,
    transform 1.6s cubic-bezier(.2,.9,.2,1),
    filter 1.6s ease;

  will-change: opacity, transform, filter;
}

/* Direções por card (via data-reveal) */
.solutions.reveal .solution-card[data-reveal="left"]  { --rx: -44px; --ry: 0px; }
.solutions.reveal .solution-card[data-reveal="right"] { --rx:  44px; --ry: 0px; }
.solutions.reveal .solution-card[data-reveal="down"]  { --rx: 0px;  --ry: -44px; } /* cima -> baixo */
.solutions.reveal .solution-card[data-reveal="up"]    { --rx: 0px;  --ry:  44px; } /* baixo -> cima */

.solutions.reveal .solution-card.is-visible{
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
}

/* Acessibilidade: reduz animações se o usuário preferir */
@media (prefers-reduced-motion: reduce){
  .solutions.reveal .solution-card{
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}

.solution-card:hover{
  border-color: rgba(47,243,242,.35);
  background: rgba(10,43,89,.22);
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
  transform: translateY(-3px);
}

.solution-card.is-featured{
  border-color: rgba(47,243,242,.60);
  box-shadow: 0 26px 80px rgba(0,0,0,.48);
}

.solution-ic{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  

  display:flex;
  align-items:center;
  justify-content:center;

  /* base mais "glass" e escura */
  background: rgba(19,23,37,.65);                 /* --c5 */
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 14px 36px rgba(0,0,0,.35);

  margin-bottom: 16px;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.solution-ic svg{
  width: 22px;
  height: 22px;

  /* ícone mais teal e menos neon */
  fill: rgba(47,243,242,.82);                      /* --c1 mais suave */
  opacity: .95;
  transition: fill .18s ease, opacity .18s ease, transform .18s ease;
}

/* Hover: reforça o quadradinho do ícone */
.solution-card:hover .solution-ic{
  background: rgba(47,243,242,.12);                /* --c1 */
  border-color: rgba(47,243,242,.45);
  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    0 0 0 6px rgba(47,243,242,.08);
  transform: translateY(-1px);
}

.solution-card:hover .solution-ic svg{
  fill: rgba(47,243,242,.98);
  opacity: 1;
  transform: scale(1.02);
}

.solution-card.is-featured .solution-ic{
  background: rgba(47,243,242,.10);
  border-color: rgba(47,243,242,.35);
  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    0 0 0 6px rgba(47,243,242,.07);
}

.solution-card.is-featured .solution-ic svg{
  fill: rgba(47,243,242,.98);
}

.solution-card h3{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: rgba(234,240,255,.96);
}

.solution-card p{
  margin: 0 0 14px;
  color: rgba(234,240,255,.62);
  font-size: 14px;
  line-height: 1.55;
}

.solution-list{
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.solution-list li{
  position: relative;
  padding-left: 20px;
  color: rgba(234,240,255,.58);
  font-size: 13px;
}

.solution-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(47,243,242,.95);
}

.solution-link{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  color: rgba(47,243,242,.95);
  font-size: 13px;
  margin-top: 4px;
}

.solution-link span{
  transition: transform .15s ease;
}
.solution-card:hover .solution-link span{
  transform: translateX(2px);
}

/* =========================
   CORES POR CARD
========================= */

/* 1 - Automação */
.color-1 .solution-ic{
  background: rgba(47,243,242,.12);
}
.color-1 .solution-ic svg{
  fill: #00d9ff;
}

/* 2 - WhatsApp */
.color-2 .solution-ic{
  background: rgba(70,127,140,.18);
}
.color-2 .solution-ic svg{
  fill: #00d9ff;
}

/* 3 - API */
.color-3 .solution-ic{
  background: rgba(15,92,141,.20);
}
.color-3 .solution-ic svg{
  fill: #00d9ff;
}

/* 4 - Dashboard */
.color-4 .solution-ic{
  background: rgba(10,43,89,.35);
}
.color-4 .solution-ic svg{
  fill: #00d9ff;
}

/* 5 - Python */
.color-5 .solution-ic{
  background: rgba(47,243,242,.10);
}
.color-5 .solution-ic svg{
  fill: #00d9ff;
}

/* 6 - Segurança */
.color-6 .solution-ic{
  background: rgba(70,127,140,.15);
}
.color-6 .solution-ic svg{
  fill: #00d9ff;
}

/* responsivo */
@media (max-width: 980px){
  .solutions-grid{ grid-template-columns: 1fr; }
  .solution-card{ min-height: auto; }
}


.solutions-cta{
  display:flex;
  justify-content:center;
  margin-top: 40px;
}

@media (min-width: 1024px){
  .solutions-cta{
    max-width: 1180px;  /* mesmo max da section */
    margin: 40px auto 0 auto;
  }
}



/* =========================
   METHODOLOGY / STEPS
========================= */
.methodology{
  position: relative;
  padding: 96px 0 110px;
  overflow: hidden;
}



.methodology .container{
  position: relative;
  z-index: 1;
}

.steps{
  margin-top: 40px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.step-card{
  position: relative;
  padding: 26px 26px 22px;
  border-radius: 16px;
  background: rgba(10,43,89,.18);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  min-height: 260px;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.step-card:hover{
  transform: translateY(-3px);
  background: rgba(10,43,89,.22);
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}

/* STEP 1 */
.step-1:hover{
  border-color: #2ff3f2;
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    0 0 0 1px #2ff3f2,
    0 0 25px rgba(47,243,242,.18);
}

/* STEP 2 */
.step-2:hover{
  border-color: #19e6c9;
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    0 0 0 1px #19e6c9,
    0 0 25px rgba(25,230,201,.18);
}

/* STEP 3 */
.step-3:hover{
  border-color: #6c63ff;
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    0 0 0 1px #6c63ff,
    0 0 25px rgba(108,99,255,.18);
}

/* STEP 4 */
.step-4:hover{
  border-color: #ff2aa6;
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    0 0 0 1px #ff2aa6,
    0 0 25px rgba(255,42,166,.18);
}

/* bolinha numerada */
.step-badge{
  position:absolute;
  top: -14px;
  left: -14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 14px;
  color: #061023;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

/* quadradinho do ícone */
.step-ic{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(19,23,37,.55);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
  margin-bottom: 16px;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.step-ic svg{
  width: 22px;
  height: 22px;
  fill: rgba(234,240,255,.90);
  transition: fill .18s ease;
}

.step-card h3{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  color: rgba(234,240,255,.96);
  letter-spacing: -0.2px;
}

.step-card p{
  margin: 0;
  color: rgba(234,240,255,.62);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 280px;
}

/* setas entre cards */
.step-arrow{
  position:absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(47,243,242,.12);
  border: 1px solid rgba(47,243,242,.28);
  color: rgba(19,23,37,.95);
  font-weight: 900;
  
}


/* STEP 1 */
.step-1 .step-arrow{
  background: #2ff3f2;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

/* STEP 2 */
.step-2 .step-arrow{
  background: #19e6c9;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

/* STEP 3 */
.step-3 .step-arrow{
  background: #6c63ff;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

/* STEP 4 */
.step-4 .step-arrow{
  background: #ff2aa6;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

/* cores por etapa (badge + detalhe do ícone) */
.step-1 .step-badge{ background: #2ff3f2; } /* c1 */
.step-2 .step-badge{ background: #19e6c9; } /* variação c1 */
.step-3 .step-badge{ background: #6c63ff; } /* roxo igual ref */
.step-4 .step-badge{ background: #ff2aa6; } /* rosa igual ref */

/* ícones com leve cor por etapa */
.step-1 .step-ic svg{ fill: rgba(47,243,242,.95); }
.step-2 .step-ic svg{ fill: rgba(47,243,242,.95); }
.step-3 .step-ic svg{ fill: rgba(108,99,255,.95); }
.step-4 .step-ic svg{ fill: rgba(255,42,166,.95); }

/* hover reforça o quadradinho como na referência */
.step-card:hover .step-ic{
  border-color: rgba(47,243,242,.22);
  background: rgba(47,243,242,.10);
  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    0 0 0 6px rgba(47,243,242,.06);
}

.methodology-cta{
  display:flex;
  justify-content:center;
  margin-top: 40px;
}

/* responsivo */
@media (max-width: 1100px){
  .steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-arrow{ display:none; }
  .step-badge{ top: -10px; left: -10px; }
}

@media (max-width: 560px){
  .steps{ grid-template-columns: 1fr; }
}


/* =========================
   RESULTS & VALUE
========================= */
.results{
  position: relative;
  padding: 110px 0 120px;
  overflow: hidden;
}

/* Fundo com pontinhos (igual ref) */
.results::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.055) 1px, transparent 1.2px);
  background-size: 22px 22px;
  opacity: .45;
  pointer-events:none;
  z-index: 0;
}


.results .container{ position:relative; z-index:1; }

.results-grid{
  margin-top: 44px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* Card base */
.result-card{
  position: relative;
  padding: 26px 26px 22px;
  border-radius: 16px;
  background: rgba(10,43,89,.18);
  border: 2px solid rgba(255,255,255,.06);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  min-height: 260px;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.result-card:hover{
  border-color: rgba(47,243,242,.35);
  background: rgba(10,43,89,.22);
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
  transform: translateY(-3px);
}

/* Ícone (quadradinho) */
.result-ic{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(19,23,37,.55);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
  margin-bottom: 16px;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.result-ic svg{
  width: 22px;
  height: 22px;
  fill: rgba(234,240,255,.90);
  transition: fill .18s ease;
}

.result-card h3{
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 900;
  color: rgba(234,240,255,.96);
  letter-spacing: -0.2px;
  line-height: 1.15;
}

.result-card p{
  margin: 0;
  color: rgba(234,240,255,.62);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 360px;
}

/* Métrica */
.result-metric{ margin-top: 18px; }
.metric-value{
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -0.5px;
  line-height: 1;
}
.metric-label{
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(234,240,255,.55);
}

/* Cores por card (ícone + métrica + hover border) */
.r1 .result-ic svg, .r1 .metric-value{ color:#2ff3f2; fill:#2ff3f2; }
.r2 .result-ic svg, .r2 .metric-value{ color:#19e6c9; fill:#19e6c9; }
.r3 .result-ic svg, .r3 .metric-value{ color:#6c63ff; fill:#6c63ff; }
.r4 .result-ic svg, .r4 .metric-value{ color:#ff2aa6; fill:#ff2aa6; }
.r5 .result-ic svg, .r5 .metric-value{ color:#2ff3f2; fill:#2ff3f2; }
.r6 .result-ic svg, .r6 .metric-value{ color:#19e6c9; fill:#19e6c9; }

/* =========================
   GLOW PREMIUM – RESULTS
========================= */

/*
.r1:hover{
  border-color: rgba(47,243,242,.65);
  box-shadow:
    0 0 0 1px rgba(47,243,242,.25),
    0 0 25px rgba(47,243,242,.25),
    0 20px 70px rgba(0,0,0,.45);
}

.r2:hover{
  border-color: rgba(25,230,201,.65);
  box-shadow:
    0 0 0 1px rgba(25,230,201,.25),
    0 0 25px rgba(25,230,201,.25),
    0 20px 70px rgba(0,0,0,.45);
}

.r3:hover{
  border-color: rgba(108,99,255,.65);
  box-shadow:
    0 0 0 1px rgba(108,99,255,.25),
    0 0 25px rgba(108,99,255,.25),
    0 20px 70px rgba(0,0,0,.45);
}

.r4:hover{
  border-color: rgba(255,42,166,.65);
  box-shadow:
    0 0 0 1px rgba(255,42,166,.25),
    0 0 25px rgba(255,42,166,.25),
    0 20px 70px rgba(0,0,0,.45);
}

.r5:hover{
  border-color: rgba(47,243,242,.65);
  box-shadow:
    0 0 0 1px rgba(47,243,242,.25),
    0 0 25px rgba(47,243,242,.25),
    0 20px 70px rgba(0,0,0,.45);
}

.r6:hover{
  border-color: rgba(25,230,201,.65);
  box-shadow:
    0 0 0 1px rgba(25,230,201,.25),
    0 0 25px rgba(25,230,201,.25),
    0 20px 70px rgba(0,0,0,.45);
}

*/ 
/* Um card “pré-destacado” como na ref (opcional) */
.result-card.is-featured{
  border-color: rgba(108,99,255,.55);
  box-shadow: 0 26px 80px rgba(0,0,0,.48);
}

/* Hover reforça o quadradinho */
.result-card:hover .result-ic{
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}

/* Responsivo */
@media (max-width: 1100px){
  .results-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .results-grid{ grid-template-columns: 1fr; }
}


/* =========================
   CASES
========================= */
.cases{
  position: relative;
  padding: 120px 0;
  background: #0b1220; /* mesma base da solutions */
  overflow: hidden;
}

/* glow superior esquerdo */
.cases::before{
  content: "";
  position: absolute;
  top: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #2ff3f2 0%, transparent 60%);
  opacity: 0.25;
  filter: blur(160px);
  z-index: 0;
  animation: solutionsGlowA 18s ease-in-out infinite;
}

/* glow inferior direito */
.cases::after{
  content: "";
  position: absolute;
  bottom: -250px;
  right: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, #0f5c8d 0%, transparent 60%);
  opacity: 0.3;
  filter: blur(180px);
  z-index: 0;
  animation: solutionsGlowB 22s ease-in-out infinite;
}

/* garante que conteúdo fique acima */
.cases > *{
  position: relative;
  z-index: 1;
}

.cases .container{ position:relative; z-index:1; }

.cases-grid{
  margin-top: 44px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

/* card */
.case-card{
  border-radius: 18px;
  background: rgba(10,43,89,.18);
  border: 2px solid rgba(255,255,255,.06);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.case-card:hover{
  border-color: rgba(47,243,242,.35);
  background: rgba(10,43,89,.22);
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
  transform: translateY(-3px);
}

/* =========================
   GLOW PREMIUM – CASES
========================= */

/*
.c1:hover{
  border-color: rgba(47,243,242,.65);
  box-shadow:
    0 0 0 1px rgba(47,243,242,.25),
    0 0 25px rgba(47,243,242,.25),
    0 24px 70px rgba(0,0,0,.45);
}

.c2:hover{
  border-color: rgba(25,230,201,.65);
  box-shadow:
    0 0 0 1px rgba(25,230,201,.25),
    0 0 25px rgba(25,230,201,.25),
    0 24px 70px rgba(0,0,0,.45);
}

.c3:hover{
  border-color: rgba(108,99,255,.65);
  box-shadow:
    0 0 0 1px rgba(108,99,255,.25),
    0 0 25px rgba(108,99,255,.25),
    0 24px 70px rgba(0,0,0,.45);
}

.c4:hover{
  border-color: rgba(255,42,166,.70);
  box-shadow:
    0 0 0 1px rgba(255,42,166,.25),
    0 0 25px rgba(255,42,166,.20),
    0 24px 70px rgba(0,0,0,.45);
}
*/

/* topo com imagem */
.case-media{
  position: relative;
  height: 210px;
  overflow: hidden;
}

.case-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
}

.case-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(19,23,37,.05) 0%, rgba(19,23,37,.65) 100%);
}

/* pill */
.case-pill{
  position:absolute;
  left: 18px;
  bottom: 14px;
  z-index: 2;
  display:inline-flex;
  align-items:center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(19,23,37,.95);
  background: #2ff3f2;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

/* corpo */
.case-body{
  padding: 22px 24px 20px;
}

.case-body h3{
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 950;
  color: rgba(234,240,255,.96);
  letter-spacing: -0.2px;
}

.case-body p{
  margin: 0 0 16px;
  color: rgba(234,240,255,.62);
  font-size: 13.5px;
  line-height: 1.6;
}

/* métricas (3 blocos) */
.case-metrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 10px 0 16px;
}

.case-metric{
  border-radius: 12px;
  padding: 12px 12px 10px;
  background: rgba(19,23,37,.45);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  text-align:center;
}

.cm-val{
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.4px;
}

.cm-lbl{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(234,240,255,.55);
}

/* cores das métricas */
.cm-val.pos{ color: #FFFFFF; }
.cm-val.neg{ color: #19e6c9; }
.cm-val.money{ color: #6c63ff; }
.cm-val.info{ color: rgba(234,240,255,.85); }

/* cores dos cards numéricos (2º e 3º bloco) */
.cases .case-metric:nth-child(2) .cm-val{ color: #FFFFFF; } /* -60%, -80%, 24/7, 0 */
.cases .case-metric:nth-child(3) .cm-val{ color: #FFFFFF; } /* R$ 50K, 100%, +500, 5 */ 

/* link */
.case-link{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  font-weight: 900;
  font-size: 13.5px;
  text-decoration: none;
  transition: opacity .15s ease, transform .15s ease;
}

/* Cores por card */
.c1 .case-link{ color:#2ff3f2; }
.c2 .case-link{ color:#2ff3f2; }
.c3 .case-link{ color:#2ff3f2; }
.c4 .case-link{ color:#2ff3f2; }




.case-link:hover{
  opacity: .92;
  transform: translateX(2px);
}

/* variações de pill por card (como ref) */
.c1 .case-pill{ background:#0f5c8d; color: rgba(234,240,255,.95); }
.c2 .case-pill{ background:#0f5c8d; color: rgba(234,240,255,.95); }
.c3 .case-pill{ background:#0f5c8d; color: rgba(234,240,255,.95); }
.c4 .case-pill{ background:#0f5c8d; color: rgba(234,240,255,.95); }

/* card 4 com borda rosa/roxa como referência */
.case-card.is-accent{
  border-color: rgba(255,42,166,.45);
}
.case-card.is-accent:hover{
  border-color: rgba(255,42,166,.70);
  box-shadow:
    0 0 0 1px rgba(255,42,166,.22),
    0 0 25px rgba(255,42,166,.18),
    0 24px 70px rgba(0,0,0,.45);
}
.case-link.is-accent{ color:#2ff3f2; }

/* CTA */
.cases-cta{
  margin-top: 34px;
  display:flex;
  justify-content:center;
}

/* responsivo */
@media (max-width: 980px){
  .cases-grid{ grid-template-columns: 1fr; }
  .case-media{ height: 220px; }
}


/* =========================
   ABOUT
========================= */
.about{
  position: relative;
  padding: 120px 0;
  background: #0b1220; /* mesma base da solutions */
  overflow: hidden;
}

/* glow superior esquerdo */
.about::before{
  content: "";
  position: absolute;
  top: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #2ff3f2 0%, transparent 60%);
  opacity: 0.25;
  filter: blur(160px);
  z-index: 0;
  animation: solutionsGlowA 18s ease-in-out infinite;
}

/* glow inferior direito */
.about::after{
  content: "";
  position: absolute;
  bottom: -250px;
  right: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, #0f5c8d 0%, transparent 60%);
  opacity: 0.3;
  filter: blur(180px);
  z-index: 0;
  animation: solutionsGlowB 22s ease-in-out infinite;
}

/* garante que conteúdo fique acima */
.about > *{
  position: relative;
  z-index: 1;
}


.about-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items:center;
}

/* IMAGEM */
.about-media{
  position:relative;
}

.about-media img{
  width:100%;
  border-radius:20px;
}

/* BADGE FLUTUANTE */
.about-badge{
  position:absolute;
  bottom:-70px;
  right:30px;
  display:flex;
  align-items:center;
  gap:14px;
  background: rgba(19,23,37,.85);
  backdrop-filter: blur(10px);
  border-radius:16px;
  padding:16px 22px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}

.badge-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  background: rgba(47,243,242,.15);
  display:flex;
  align-items:center;
  justify-content:center;
}

.badge-icon svg{
  width:20px;
  fill:#2ff3f2;
}

.badge-value{
  font-size:26px;
  font-weight:900;
  color:#2ff3f2;
}

.badge-label{
  font-size:13px;
  color:rgba(234,240,255,.65);
}

/* TEXTO */
.about-content p{
  margin:16px 0;
  color:rgba(234,240,255,.65);
  line-height:1.7;
  font-size:14px;
}

/* FEATURES */
.about-features{
  margin:28px 0 32px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:18px 40px;
}

.about-feature{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  color:rgba(234,240,255,.9);
}

.feature-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(19,23,37,.5);
  border:1px solid rgba(255,255,255,.05);
}

.feature-icon svg{
  width:18px;
  height:18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Cores individuais */
.f1 .feature-icon svg{ stroke:#2ff3f2; }
.f2 .feature-icon svg{ stroke:#19e6c9; }
.f3 .feature-icon svg{ stroke:#6c63ff; }
.f4 .feature-icon svg{ stroke:#ff2aa6; }

.f1 .feature-icon{ background:rgba(47,243,242,.12); }
.f2 .feature-icon{ background:rgba(25,230,201,.12); }
.f3 .feature-icon{ background:rgba(108,99,255,.12); }
.f4 .feature-icon{ background:rgba(255,42,166,.12); }



/* RESPONSIVO */
@media(max-width: 980px){
  .about-grid{
    grid-template-columns:1fr;
  }

  .about-badge{
    position:relative;
    bottom:auto;
    right:auto;
    margin-top:20px;
  }

  .about-features{
    grid-template-columns:1fr;
  }
}


/* =========================
   FOOTER
========================= */
.footer{
  background:#071028;
  padding:25px 0 40px;
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap:50px;
}

.footer h4{
  margin: 0 0 16px;  /* zera o margin-top padrão e mantém o bottom */
  font-size:15px;
  font-weight:900;
  color:rgba(234,240,255,.95);
}

.footer ul{
  list-style:none;
  padding:0;
  margin:0;
}

.footer ul li{
  margin-bottom:10px;
}

.footer a{
  text-decoration:none;
  color:rgba(234,240,255,.65);
  font-size:14px;
  transition:.2s ease;
}

.footer a:hover{
  color:#2ff3f2;
}

/* Brand */
.footer-logo{
  width:280px;
  margin-bottom:18px;
}

.footer-brand p{
  color:rgba(234,240,255,.6);
  font-size:14px;
  line-height:1.7;
  margin-bottom:20px;
}

.footer-social{
  display:flex;
  gap:12px;
}

.footer-social a{
  width:40px;
  height:40px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.05);
}

.footer-social svg{
  width:18px;
  fill:#2ff3f2;
}

/* Contact */
.footer-contact .contact-item{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  font-size:14px;
  color:rgba(234,240,255,.65);
}

.footer-btn{
  margin-top:16px;
  width:100%;
}

/* Bottom */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:20px;
  padding-top:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:rgba(234,240,255,.5);
}

.footer-legal{
  display:flex;
  gap:20px;
}

.footer-legal a{
  font-size:13px;
}







/* =========================
   AUTH (ÁREA DO CLIENTE)
========================= */
.auth-wrap{
  min-height: calc(100vh - 76px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 54px 0;
}

.auth-card{
  width: min(520px, calc(100% - 48px));
  background: rgba(10,43,89,.18);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  border-radius: 18px;
  padding: 28px;
}

.auth-title{
  margin: 0 0 8px;
  font-weight: 950;
  letter-spacing: -0.6px;
  font-size: 26px;
  text-align: center;

}

.auth-sub{
  margin: 0 0 18px;
  color: rgba(234,240,255,.62);
  line-height: 1.5;
  text-align: center;

}

.auth-error{
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,42,166,.35);
  background: rgba(255,42,166,.10);
  color: rgba(234,240,255,.92);
  font-weight: 700;
  font-size: 13px;
}

.auth-form{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.auth-label{
  font-size: 13px;
  font-weight: 800;
  color: rgba(234,240,255,.82);
}

.auth-input{
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(47,243,242,.22);
  background: rgba(19,23,37,.55);
  color: rgba(234,240,255,.95);
  outline: none;
}

.auth-input:focus{
  border-color: rgba(47,243,242,.55);
  box-shadow: 0 0 0 6px rgba(47,243,242,.08);
}

.auth-btn{
  width: 100%;
  margin-top: 8px;
}




/* =========================
   DASHBOARD (ADMIN/CLIENTE)
========================= */
.dash-card{
  position: relative;
  width: min(920px, calc(100% - 48px));
}

.dash-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 14px;
}

.dash-head-center{
  justify-content:center;
}

.dash-title{ margin-bottom: 6px; }
.dash-sub{ margin-bottom: 0; }

.dash-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.dash-grid-one{
  grid-template-columns: minmax(0, 1fr);
}

.dash-tile{
  display:block;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10,43,89,.12);
  text-decoration:none;
  color: rgba(234,240,255,.95);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.dash-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(47,243,242,.28);
  background: rgba(10,43,89,.18);
}

.dash-tile-title{
  font-weight: 950;
  font-size: 15px;
  margin-bottom: 6px;
}

.dash-tile-desc{
  font-size: 13px;
  opacity: .78;
  line-height: 1.45;
}

.dash-logout{
  position:absolute;
  z-index: 5;
}

.dash-logout-tr{
  top: 16px;
  right: 16px;
}

.dash-logout-br{
  bottom: 16px;
  right: 16px;
}

/* responsivo */
@media (max-width: 860px){
  .dash-grid{ grid-template-columns: 1fr; }
}










/* =========================
   TICKETS / SLA MODAL
========================= */
.tkt-block{
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10,43,89,.10);
}

.tkt-h{
  font-weight: 950;
  margin-bottom: 10px;
  color: rgba(234,240,255,.92);
}

.sla-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.sla-modal.open{ display:block; }

.sla-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
}

.sla-box{
  position: relative;
  width: min(980px, calc(100% - 40px));
  margin: 40px auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(8,16,40,.92);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  overflow: hidden;
}

.sla-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sla-title{ font-weight: 950; font-size: 16px; }
.sla-sub{ opacity:.72; font-size: 13px; margin-top:4px; }

.sla-x{
  border: 0;
  background: transparent;
  color: rgba(234,240,255,.9);
  font-size: 18px;
  cursor: pointer;
}

.sla-body{
  display:flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 22px 10px;
}

.sla-img{
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

.sla-terms{
  padding: 10px 4px 0;
}

.sla-terms ul{
  margin: 10px 0 14px 18px;
  padding: 0;
  line-height: 1.6;
  font-size: 14px;
  opacity: .9;
}

.sla-check{
  display:flex;
  gap:10px;
  align-items:center;
  font-weight: 800;
  font-size: 13px;
}

.sla-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding: 12px 18px 18px;
}

@media (max-width: 860px){
  .sla-body{ grid-template-columns: 1fr; }
  .sla-box{ margin: 18px auto; }
}



/* Ticket: 1 pergunta por linha */
.tkt-row{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
}

.tkt-row .auth-label{
  margin: 0;
}

.tkt-row .auth-input{
  width: 100%;
}

@media (max-width: 860px){
  .tkt-row{
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.tkt-back{
  position: absolute;
  top: 16px;
  left: 16px;
}


/* Modal Documentos */
.doc-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}

.doc-modal.active{
  display:block;
}

.doc-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
}

.doc-box{
  position:relative;
  width:min(500px, 90%);
  margin:80px auto;
  background:#0c1936;
  padding:24px;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}

.doc-box h2{
  margin-top:0;
  margin-bottom:16px;

}

.doc-box input[type="text"],
.doc-box input[type="email"]{
  width:100%;
  padding:10px;
  margin-top:6px;
  margin-bottom:12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.1);
  background:#071028;
  color:#fff;
}

.doc-box label{
  display:block;
  margin-bottom:8px;
  font-size:14px;
}

.doc-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}

.doc-select-title{
  margin-top:12px;
  margin-bottom:10px;
  font-weight:600;
  text-align:center;
}


/* Modal Solicitar Acesso (Novo Usuário) */
.acc-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
.acc-modal.active{ display:block; }

.acc-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
}

.acc-box{
  position:relative;
  width:min(560px, 92%);
  margin:70px auto;
  background:#0c1936;
  padding:24px;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.08);
}

.acc-box h2{
  margin:0 0 14px;
  text-align:center;
}

.acc-section-title{
  margin: 10px 0 10px;
  font-weight:700;
  text-align:center;
  opacity:.9;
}

.acc-box label{
  display:block;
  margin-bottom:8px;
  font-size:14px;
}

.acc-box input[type="text"],
.acc-box input[type="email"]{
  width:100%;
  padding:10px;
  margin-top:6px;
  margin-bottom:12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  background:#071028;
  color:#fff;
}

.acc-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}



/* =========================
   METRICS (Cliente)
========================= */
.metrics-card{ position:relative; }

.metrics-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom: 14px;
}

.metrics-title{ margin-bottom: 6px; }
.metrics-sub{ margin-bottom: 0; }

.metrics-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.kpi{
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10,43,89,.12);
}

.kpi-label{
  font-size: 12px;
  opacity: .78;
  margin-bottom: 8px;
}

.kpi-value{
  font-size: 22px;
  font-weight: 950;
  letter-spacing: .2px;
}

.kpi-foot{
  margin-top: 8px;
  font-size: 12px;
  opacity: .70;
}

.metrics-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}

.metrics-panel{
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10,43,89,.10);
}

.panel-title{
  font-weight: 950;
  margin-bottom: 12px;
}

.panel-body{ opacity:.88; }

.metrics-notes{
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
  font-size: 13px;
}

/* Bar chart (CSS puro) */
.bar-chart{
  display:flex;
  gap: 10px;
  align-items:flex-end;
  height: 240px;
  padding: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.bar{
  flex: 1;                /* <-- ESSENCIAL */
  min-width: 0;           /* remove largura fixa */
  height: 100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap: 8px;
}


.bar-fill{
  width: 100%;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0,245,212,.95), rgba(21,214,255,.65));
  box-shadow: 0 12px 40px rgba(0,245,212,.10);
  border: 1px solid rgba(255,255,255,.08);
}

.bar-meta{
  text-align:center;
  line-height: 1.1;
}

.bar-val{
  font-weight: 900;
  font-size: 12px;
  opacity: .92;
}

.bar-lbl{
  font-size: 11px;
  opacity: .65;
  margin-top: 4px;
}

@media (max-width: 980px){
  .metrics-kpis{ grid-template-columns: 1fr; }
  .metrics-grid{ grid-template-columns: 1fr; }
}



/* Admin: Tickets */
.tickets-filters{
  display:grid;
  grid-template-columns: 1.3fr .7fr .7fr auto;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
}

.tickets-table-wrap{
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
}

.tickets-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tickets-table th, .tickets-table td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  vertical-align: top;
}

.tickets-table thead th{
  text-align: left;
  font-size: 12px;
  opacity: .8;
  background: rgba(255,255,255,.03);
}

.tcell-title{ font-weight: 900; }
.tcell-sub{ opacity: .75; font-size: 12px; margin-top: 4px; }

.pill{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.pill-open{ }
.pill-mid{ border-color: rgba(21,214,255,.28); background: rgba(21,214,255,.10); }
.pill-warn{ border-color: rgba(0,245,212,.25); background: rgba(0,245,212,.10); }
.pill-ok{ border-color: rgba(52,245,165,.25); background: rgba(52,245,165,.10); }
.pill-bad{ border-color: rgba(255,99,99,.30); background: rgba(255,99,99,.10); }
.pill-ghost{ opacity: .8; }

.ticket-admin-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  margin-top: 14px;
}

.ticket-panel{
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10,43,89,.10);
}

.panel-title{
  font-weight: 950;
  margin-bottom: 12px;
}

.kv{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.kv span{ opacity: .75; }
.kv b{ font-weight: 900; text-align: right; }

.block{
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
}
.block-h{
  padding: 10px 12px;
  font-weight: 900;
  font-size: 12px;
  opacity: .85;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.block-b{
  padding: 10px 12px;
  opacity: .9;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 980px){
  .tickets-filters{ grid-template-columns: 1fr; }
  .ticket-admin-grid{ grid-template-columns: 1fr; }
}






/* Line chart (Horas x ROI) */
.linechart-wrap{
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.linechart{
  width: 100%;
  height: auto;
  display:block;
}

.lc-grid{
  stroke: rgba(255,255,255,.08);
  stroke-width: 1;
}

.lc-axis{
  stroke: rgba(255,255,255,.14);
  stroke-width: 1;
}

.lc-label{
  fill: rgba(234,240,255,.78);
  font-size: 12px;
  font-weight: 700;
}

.lc-x{
  fill: rgba(234,240,255,.60);
  font-size: 11px;
}

.lc-line{
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

.lc-dot{
  stroke: rgba(255,255,255,.15);
  stroke-width: 1;
}

.lc-hours{
  stroke: rgba(0,245,212,.95);
  fill: rgba(0,245,212,.95);
}

.lc-roi{
  stroke: rgba(21,214,255,.85);
  fill: rgba(21,214,255,.85);
}

/* container da legenda */
.lc-legend{
  display:flex;
  gap:28px;
  justify-content:center;
  margin-top:18px;
  font-size:14px;
  color:rgba(234,240,255,.85);
}

/* item individual */
.lc-leg{
  display:flex;
  align-items:center;
  gap:8px;
}

/* quadradinho colorido */
.lc-swatch{
  width:14px;
  height:14px;
  border-radius:4px;
  display:inline-block;
}

.metrics-mini-table-wrap{
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow:hidden;
  background: rgba(255,255,255,.02);
}

.metrics-mini-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.metrics-mini-table th,
.metrics-mini-table td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.metrics-mini-table thead th{
  text-align:left;
  font-size: 12px;
  opacity: .8;
  background: rgba(255,255,255,.03);
}





.metrics-admin-grid{
  display:grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 14px;
  margin-top: 14px;
}

.metrics-two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 980px){
  .metrics-admin-grid{ grid-template-columns: 1fr; }
  .metrics-two{ grid-template-columns: 1fr; }
}



.chart-wrapper {
    width: 100%;
    height: 280px;
    position: relative;
}

.chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}


/* Linhas do gráfico (evita parecer área preenchida) */
.linechart .lc-line{
  fill: none !important;
  stroke-width: 3 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .95;
}

/* cores iguais às linhas do gráfico */
.lc-swatch.lc-hours{
  background: #27d3ff; /* mesma cor da linha horas */
}

.lc-swatch.lc-roi{
  background: #19f5c3; /* mesma cor da linha ROI */
}


.linechart .lc-zero{
  stroke: rgba(255,255,255,.25);
  stroke-width: 1;
  stroke-dasharray: 6 6;
}

.linechart .lc-zero-label{
  fill: rgba(234,240,255,.75);
  font-size: 12px;
}


.cm-val{
  font-variant-numeric: tabular-nums; /* números não “pulam” de largura */
}


.nav-wrap--full{
  width: 100%;
  padding: 0 24px; /* ajuste o respiro lateral */
}


.hero-logo-video {
  width: 100%;
  max-width: 750px;
  height: auto;
}

/* =========================
   RESULTS & VALOR (novo layout + reveal + flip)
========================= */

.results-kicker{
  text-align: center;
  color: var(--accent, #15d6ff);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 18px;
}

.results-layout{
  margin-top: 44px;
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 46px;
  align-items: center;
}

.results-left{ text-align: left; }

.results-title{
  margin: 0;
  font-size: clamp(30px, 3.2vw, 44px);
  letter-spacing: -0.6px;
  font-weight: 900;
  text-align: center;
  color: rgba(234,240,255,.98);
}

.results-subtitle{
  margin: 12px auto 0;
  max-width: 760px;
  color: rgba(234,240,255,.62);
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

/* Coluna direita (caixas) */
.results-stack{
  display: grid;
  gap: 22px;
  justify-items: end;
}

/* Reveal no scroll (entra de cima p/ baixo) */
.result-flip{
  width: 100%;
  max-width: 560px;
  border-radius: 14px;
  border: 2px solid rgba(47,243,242,.75);
  background: rgba(10, 20, 45, .28);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  perspective: 900px;
  cursor: pointer;
  outline: none;
  transition:
    opacity .55s ease var(--d, 0ms),
    transform .55s ease var(--d, 0ms),
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

/* IMPORTANTE:
   Só escondemos (opacity 0) quando o JS está rodando e adiciona .reveal na seção.
   Assim, se por algum motivo o JS não executar, as caixas ainda aparecem. */
.results.reveal .result-flip{
  opacity: 0;
  transform: translateX(48px);
}

.results.reveal .result-flip.is-visible{
  opacity: 1;
  transform: translateX(0);
}

.result-flip:hover,
.result-flip:focus-visible{
  border-color: rgba(47,243,242, 1);
  background: rgba(10, 43, 89, .22);
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}

/* Flip */
.flip-inner{
  position: relative;
  min-height: 76px;
  padding: 18px 22px;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}

.result-flip.is-wide .flip-inner{ min-height: 82px; }

.result-flip:hover .flip-inner,
.result-flip:focus-visible .flip-inner{
  transform: rotateX(180deg);
}

.flip-face{
  position:absolute;
  inset: 0;
  padding: 18px 22px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 14px;
  text-align:center;
  flex: 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  color: rgba(234,240,255,92);
  font-size: 18px;
  line-height: 1.35;
}

.result-icon{
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 44px;
  border-radius: 10px;
}

.flip-front span{
  flex: 1;
  text-align: center;
  font-weight: 700; /* negrito */

}

.flip-back{
  transform: rotateX(180deg);
  color: rgba(234,240,255,.72);
  font-size: 16px;
}

@media (max-width: 980px){
  .results-layout{
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }
  .results-kicker{ text-align: left; }
  .results-title{ font-size: 30px; }
  .results-subtitle{ max-width: none; }
}




/* Primeiro retângulo */
.results-right .result-flip:first-child{
  max-width: 700px; /* ajuste fino aqui */
}

/* Último retângulo */
.results-right .result-flip:last-child{
  max-width: 700px; /* mesmo valor ou diferente se quiser */
}



/* Wrapper: GIFs + Retângulos */
.results-media{
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr); /* coluna fixa + coluna fluida */
  gap: 18px;
  align-items: start;
}

/* Coluna dos GIFs com o MESMO gap dos retângulos */
.results-gifs{
  display: grid;
  gap: 22px; /* igual ao .results-stack { gap: 22px } */
}

/* Cada slot tem a “altura” do card (pra alinhar certinho) */
.gif-slot{
  height: 76px; /* igual ao min-height do .flip-inner */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tamanho do gif */
.results-gif{
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  border-radius: 12px;
}

/* Garante que os retângulos não fiquem esmagados */
.results-stack{
  width: 100%;
  min-width: 360px; /* evita quebrar palavra por palavra */
}

/* Mobile: gifs vão pra cima */
@media (max-width: 768px){
  .results-media{
    grid-template-columns: 1fr;
  }

  .results-gifs{
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
  }

  .gif-slot{
    height: auto;
  }

  .results-stack{
    min-width: 0;
  }
}






/* =========================
   ABOUT PAGE - NOVAS SECOES
========================= */
.about-hero{
  position: relative;
  padding: 120px 0 90px;
  background: #0b1220;
  overflow: hidden;
}

.about-hero::before,
.about-hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter: blur(160px);
  z-index:0;
  pointer-events:none;
}

.about-hero::before{
  top:-200px;
  left:-200px;
  width:620px;
  height:620px;
  background: radial-gradient(circle, rgba(47,243,242,.28) 0%, transparent 62%);
}

.about-hero::after{
  right:-220px;
  bottom:-260px;
  width:720px;
  height:720px;
  background: radial-gradient(circle, rgba(15,92,141,.28) 0%, transparent 62%);
}

.about-hero > *{ position:relative; z-index:1; }

.about-hero-grid,
.about-story-grid,
.about-stack-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items:center;
}

.about-hero-media{ position:relative; }
.about-hero-media img{
  width:100%;
  display:block;
  border-radius:20px;
}

.about-hero-title{
  max-width: 760px;
}

.about-hero-content p,
.about-story-copy p,
.about-stack-copy p,
.methodology-philosophy p{
  color: rgba(234,240,255,.68);
  line-height: 1.75;
  font-size: 15px;
}

.about-hero-actions{
  margin-top: 28px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.section-head--left{
  text-align:left;
  margin:0 0 28px;
}

.about-story,
.about-differentials,
.about-stack,
.about-commitment{
  position:relative;
  padding: 56px 0;
}

.about-story,
.about-stack{
  background: linear-gradient(180deg, rgba(6,12,28,1) 0%, rgba(8,15,36,1) 100%);
}

.about-differentials,
.methodology,
.about-commitment{
  background: linear-gradient(180deg, rgba(8,15,36,1) 0%, rgba(4,10,24,1) 100%);
}

.card-panel{
  background: rgba(10,43,89,.16);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}

.about-story-copy{
  padding: 30px;
}

.about-identity{
  display:grid;
  gap:18px;
}

.identity-card{
  padding: 24px;
}

.identity-card h3,
.about-card h3{
  margin:0 0 12px;
  font-size: 21px;
  font-weight: 900;
  color: rgba(234,240,255,.96);
}

.identity-card p,
.about-card p{
  margin:0;
  color: rgba(234,240,255,.65);
  line-height:1.7;
}

.about-bullets,
.step-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.about-bullets li,
.step-list li{
  position:relative;
  padding-left:20px;
  color: rgba(234,240,255,.68);
}

.about-bullets li::before,
.step-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:#2ff3f2;
  font-weight:900;
}

.about-cards-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 22px;
  margin-top: 26px;
}

.about-card{
  padding: 28px 24px;
  min-height: 250px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.about-card:hover{
  transform: translateY(-4px);
  border-color: rgba(47,243,242,.28);
  box-shadow: 0 26px 70px rgba(0,0,0,.34);
}

.about-card-icon{
  width:54px;
  height:54px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(19,23,37,.5);
}

.about-card-icon svg{
  width:23px;
  height:23px;
  stroke: currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ic-1{ color:#2ff3f2; background: rgba(47,243,242,.12); }
.ic-2{ color:#19e6c9; background: rgba(25,230,201,.12); }
.ic-3{ color:#6c63ff; background: rgba(108,99,255,.12); }
.ic-4{ color:#ff2aa6; background: rgba(255,42,166,.12); }

.about-stack-list{
  padding: 28px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.about-stack-list span{
  display:flex;
  align-items:center;
  min-height:52px;
  padding: 0 16px;
  border-radius: 14px;
  background: rgba(7,16,40,.62);
  border: 1px solid rgba(255,255,255,.05);
  color: rgba(234,240,255,.88);
  font-weight: 700;
}


.methodology .section-subtitle{
  max-width: 840px;
}

.step-list{
  margin-top: 18px;
}

.methodology-philosophy{
  max-width: 920px;
  margin: 34px auto 0;
  padding: 28px;
  text-align:center;
}


.commitment-plain{
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.commitment-plain .kicker{
  text-align: center;
}

.commitment-plain p{
  color: rgba(234,240,255,.68);
  line-height: 1.75;
  font-size: 15px;
  margin: 0;
}

.commitment-highlight{
  margin-top: 18px;
  color: #ffffff !important;
  font-weight: 600;
}

@media (max-width: 1100px){
  .about-cards-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 980px){
  .about-hero-grid,
  .about-story-grid,
  .about-stack-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .about-hero,
  .about-story,
  .about-differentials,
  .about-stack,
  .about-commitment,
  .methodology{
    padding: 72px 0;
  }
}

@media (max-width: 760px){
  .about-cards-grid,
  .about-stack-list{
    grid-template-columns: 1fr;
  }

  .about-story-copy,
  .identity-card,
  .about-card,
  .about-stack-list,
  .commitment-box,
  .methodology-philosophy{
    padding: 22px;
  }
}



.about-hero--simple{
  padding: 130px 0 100px;
}

.about-hero-simple{
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.about-hero-simple .kicker{
  justify-content: center;
  text-align: center;
}

.about-hero--simple .about-hero-title{
  max-width: 900px;
  margin: 0 auto 24px;
}

.about-hero-text{
  max-width: 820px;
  margin: 0 auto;
}

.about-hero-text p{
  margin: 0 0 18px;
  color: rgba(234,240,255,.72);
  line-height: 1.85;
  font-size: 17px;
}

.about-hero-text p:last-child{
  margin-bottom: 0;
}




.about-story-single{
  max-width: 900px;
  margin: 0 auto;
}

.about-story-single .about-story-copy{
  padding: 34px;
  text-align: left;
}




/* =========================
   MISSAO VISAO VALORES
========================= */

.about-mvv{
  padding: 90px 0;
}

.about-mvv-grid{
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mvv-card{
  position: relative;
  overflow: hidden;
  min-height: 260px;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,43,89,.16);
  border: 2px solid rgba(255,255,255,.06);
  border-radius: 20px;
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.mvv-eye{
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: auto;
  opacity: .95;
  z-index: 2;
  pointer-events: none;
  transition:
    opacity .28s ease,
    transform .32s ease;
}


.mvv-card:hover{
  transform: translateY(-3px);
  background: rgba(10,43,89,.22);
  border-color: rgba(47,243,242,.35);
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    0 0 0 1px rgba(47,243,242,.45),
    0 0 25px rgba(47,243,242,.18);
}

.mvv-card:hover .mvv-eye{
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
}



.mvv-title{
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  text-align: center;
  color: rgba(47,243,242,.92);
  transition:
    transform .38s ease,
    color .28s ease,
    opacity .28s ease;
  z-index: 2;
  position: relative;
}

.mvv-content{
  position: absolute;
  inset: 72px 24px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition:
    opacity .30s ease,
    transform .38s ease;
}

.mvv-card:hover .mvv-title{
  transform: translateY(-88px);
  color: rgba(234,240,255,.98);
}

.mvv-card:hover .mvv-content{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mvv-content p{
  margin: 0;
  color: rgba(234,240,255,.78);
  line-height: 1.7;
  text-align: center;
}

.mvv-list{
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: grid;
  gap: 10px;
  width: fit-content;
}

.mvv-list li{
  position: relative;
  padding-left: 18px;
  color: rgba(234,240,255,.78);
  text-align: left;
}

.mvv-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  color: #2ff3f2;
  font-weight: bold;
}

@media (max-width: 900px){

  .about-mvv-grid{
    grid-template-columns: 1fr;
  }

  .mvv-card{
    min-height: 240px;
  }

  .mvv-card:hover .mvv-title{
    transform: translateY(-74px);
  }

  .mvv-content{
    inset: 64px 22px 22px;
  }

}





/* =========================
   NOSSA HISTORIA - TIMELINE PINNED
========================= */

.story-timeline-pinned{
  position: relative;
  height: 180vh; /* controla quanto "tempo" de rolagem a timeline terá */
}

.story-timeline .section-head{
  margin-bottom: 280px;
}

.story-stage{
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  padding: 36px 0 24px;
  overflow: hidden;
}

.story-pinned-wrap{
  max-width: 1120px;
  margin: 20px auto 0;
}

.story-track{
  position: relative;
  width: 100%;
  height: 6px;
  margin: 0 auto 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.story-progress{
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2ff3f2 0%, #21d7e7 100%);
  box-shadow: 0 0 16px rgba(47,243,242,.26);
}

.story-main-dot{
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border: 4px solid #2ff3f2;
  border-radius: 50%;
  background: #081225;
  box-shadow:
    0 0 0 6px rgba(47,243,242,.08),
    0 0 18px rgba(47,243,242,.18);
  z-index: 5;
  padding: 0;
  cursor: default;
}

.story-main-dot span{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.story-main-dot.is-spinning span{
  animation: storyMainSpin 1.5s linear infinite;
}

.story-main-dot.is-spinning span::before{
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border-top: 2px solid #2ff3f2;
  border-right: 2px solid transparent;
  border-bottom: 2px solid #0f5c8d;
  border-left: 2px solid transparent;
}

@keyframes storyMainSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.story-checkpoint{
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(.65);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid #2ff3f2;
  background: #081225;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  z-index: 4;
  transition:
    opacity .25s ease,
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.story-checkpoint.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  box-shadow:
    0 0 0 5px rgba(47,243,242,.08),
    0 0 14px rgba(47,243,242,.16);
  cursor: pointer;
}

.story-checkpoint:hover{
  box-shadow:
    0 0 0 6px rgba(47,243,242,.12),
    0 0 18px rgba(47,243,242,.24);
}

.story-checkpoint.is-current{
  border-color: #ffffff;
  box-shadow:
    0 0 0 6px rgba(255,255,255,.08),
    0 0 16px rgba(47,243,242,.18);
}

.story-content{
  position: relative;
  max-width: 920px;
  height: 120px; /* altura fixa para evitar reajuste */
  margin: 0 auto;
}

.story-panel{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 28px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
}

.story-panel.is-active{
  visibility: visible;
  pointer-events: auto;
  animation: storyPanelIn .38s ease forwards;
}

@keyframes storyPanelIn{
  from{
    opacity: 0;
    transform: translateY(14px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.story-panel p{
  margin: 0;
  text-align: center;
  color: rgba(234,240,255,.76);
  line-height: 1.85;
  font-size: 16px;
  width: 100%;
}

@keyframes storyPanelIn{
  from{
    opacity: 0;
    transform: translateY(14px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px){
  .story-timeline-pinned{
    height: 300vh;
  }

  .story-pinned-wrap{
    margin-top: 32px;
  }

  .story-main-dot{
    width: 26px;
    height: 26px;
    border-width: 3px;
  }

  .story-checkpoint{
    width: 18px;
    height: 18px;
    border-width: 3px;
  }

  .story-panel{
    padding: 24px;
  }

  .story-panel p{
    font-size: 15px;
  }
}

@media (max-width: 640px){
  .story-content{
    min-height: 240px;
  }
}

.story-final-text{
  max-width: 920px;
  margin: 70px auto -180px;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

.story-final-text.is-visible{
  animation: storyFinalIn .4s ease forwards;
}

.story-final-text p{
  margin: 0;
  color: rgba(234,240,255,.72);
  line-height: 1.85;
  font-size: 16px;
}

@keyframes storyFinalIn{
  from{
    opacity: 0;
    transform: translateY(14px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}


































/* =========================
   METHODOLOGY STAIR
========================= */

.methodology-stair{
  margin-top: 56px;
  max-width: 1460px;
  margin-left: auto;
  margin-right: auto;

  /* centralização real da escada */
  transform: translateX(-180px);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  position: relative;
}

.stair-item{
  position: relative;
  width: 360px;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .7s ease,
    transform .7s ease;
  will-change: opacity, transform;
}

.methodology-stair.is-animated .stair-item{
  opacity: 0;
  transform: translateY(50px);
}

.methodology-stair.is-animated .stair-item.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.stair-step{
  width: 360px;
  min-height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px; 
  padding: 10px 20px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}


/* cada degrau encosta pela quina no anterior */
.stair-item-1{
  margin-left: 0;
}

.stair-item-2{
  margin-left: 355px;
  margin-top: -84px;
}

.stair-item-3{
  margin-left: 710px;
  margin-top: -84px;
}

.stair-item-4{
  margin-left: 1065px;
  margin-top: -84px;
}

/* cores */
.stair-item-1 .stair-step{
  background: linear-gradient(90deg, #6f19ff 0%, #355cff 100%);
}

.stair-item-2 .stair-step{
  background: linear-gradient(90deg, #7f16ff 0%, #ff2aa6 100%);
}

.stair-item-3 .stair-step{
  background: linear-gradient(90deg, #7f16ff 0%, #355cff 100%);
}

.stair-item-4 .stair-step{
  background: #83c1da;
}

.stair-number{
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
}

.stair-title{
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  max-width: 220px;
  text-align: center;
}

.stair-description{
  width: 280px;
  margin: 12px 0 0 56px;
  color: rgba(255,255,255,.84);
  font-size: 13.5px;
  line-height: 1.55;
  padding-left: 0;
}

/* responsivo */
@media (max-width: 1100px){
  .methodology-stair{
    gap: 22px;
    max-width: 100%;
  }

  .stair-item,
  .stair-item-1,
  .stair-item-2,
  .stair-item-3,
  .stair-item-4{
    width: 100%;
    margin-left: 0;
  }

  .stair-step{
    width: 100%;
  }

  .stair-title{
    max-width: none;
  }

  .stair-description{
    width: 100%;
    margin: 14px 0 0 0;
  }
}