:root{
  --navy:#07182b;
  --navy-2:#0c2b4d;
  --navy-3:#123d6b;
  --blue:#1769e0;
  --blue-2:#2f80ed;
  --blue-light:#eaf2ff;
  --white:#ffffff;
  --gray:#d9d9d9;
  --gray-50:#f7f9fc;
  --gray-100:#f1f4f8;
  --gray-200:#e3e8ef;
  --gray-300:#cfd7e2;
  --text:#142238;
  --muted:#66758a;
  --success:#24946f;
  --warning:#bd7d14;
  --shadow:0 18px 50px rgba(7,24,43,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px,92vw);margin-inline:auto}

.topbar{
  background:#04111f;
  color:#c7d4e4;
  font-size:.77rem;
}
.topbar .container{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.navbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(7,24,43,.97);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}
.nav-wrap{
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:13px;
  color:#fff;
  min-width:260px;
}
.brand img{
  width:70px;
  height:48px;
  object-fit:contain;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.35));
}
.brand strong{
  display:block;
  font-size:.91rem;
  letter-spacing:.08em;
  white-space:nowrap;
}
.brand span{
  display:block;
  font-size:.68rem;
  color:#acc0d7;
  margin-top:2px;
}
.nav-links{display:flex;align-items:center;justify-content:flex-end;gap:3px}
.nav-links a{
  color:#dce8f5;
  padding:10px 10px;
  border-radius:8px;
  font-size:.84rem;
  white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active{background:rgba(23,105,224,.2);color:#fff}
.nav-cta{border:1px solid rgba(119,183,255,.42)!important;margin-left:5px}
.menu-btn{
  display:none;
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  border-radius:9px;
  padding:9px 10px;
  cursor:pointer;
}
.menu-btn span{display:block;width:24px;height:2px;background:#fff;margin:5px 0}
.mobile-menu{display:none;background:var(--navy);padding:0 4vw 18px}
.mobile-menu.open{display:grid}
.mobile-menu a{color:#dce8f5;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}

.hero{
  background:#fff;
  padding:86px 0 72px;
  border-bottom:1px solid var(--gray-200);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:64px;
  align-items:center;
}
.eyebrow{
  font-size:.76rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:800;
}
h1,h2,h3{color:var(--navy)}
h1{
  font-size:clamp(2.8rem,5.2vw,5.35rem);
  line-height:1.02;
  margin:.65rem 0 1.3rem;
  letter-spacing:-.04em;
}
h2{
  font-size:clamp(2rem,3.2vw,3.05rem);
  line-height:1.1;
  margin:.35rem 0 1rem;
  letter-spacing:-.025em;
}
h3{margin:.2rem 0 .65rem}
.lead{
  font-size:1.14rem;
  color:var(--muted);
  max-width:760px;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 19px;
  border-radius:9px;
  font-weight:800;
  font-size:.92rem;
}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:#0f57bf}
.btn-secondary{border:1px solid var(--gray);background:#fff;color:var(--navy)}
.hero-visual{
  min-height:430px;
  display:grid;
  place-items:center;
  position:relative;
  background:
    radial-gradient(circle at 72% 20%,rgba(47,128,237,.15),transparent 32%),
    linear-gradient(145deg,#f8fafc,#edf2f8);
  border:1px solid var(--gray-200);
  border-radius:24px;
  overflow:hidden;
}
.hero-visual:before,.hero-visual:after{
  content:"";
  position:absolute;
  width:460px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  transform:rotate(-58deg);
  opacity:.25;
}
.hero-visual:before{right:-130px;top:150px}
.hero-visual:after{right:-70px;top:250px}
.hero-visual img{
  width:min(78%,520px);
  position:relative;
  z-index:2;
  filter:drop-shadow(0 22px 26px rgba(7,24,43,.20));
}
.hero-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:26px;
}
.hero-metric{border-top:2px solid var(--blue);padding:12px 4px 0}
.hero-metric strong{display:block;color:var(--navy);font-size:1.15rem}
.hero-metric span{color:var(--muted);font-size:.78rem}

.trust-strip{background:var(--gray-50);border-bottom:1px solid var(--gray-200)}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:center;
  gap:12px;
  padding:20px 0;
}
.trust-item{
  text-align:center;
  color:#466078;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
}

.section{padding:80px 0}
.section.alt{background:var(--gray-50)}
.section.dark{background:linear-gradient(135deg,var(--navy),#10355f);color:#fff}
.section.dark h2,.section.dark h3{color:#fff}
.section.dark p{color:#c2d0df}
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:32px;
}
.section-head p{color:var(--muted);max-width:680px;margin:0}

.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:16px;
  padding:25px;
  box-shadow:0 8px 26px rgba(7,24,43,.05);
}
.card p{color:var(--muted);margin-bottom:0}
.icon{
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:13px;
  background:var(--blue-light);
  color:var(--blue);
  font-weight:900;
  margin-bottom:17px;
}
.service-card{position:relative;overflow:hidden}
.service-card:after{
  content:"";
  position:absolute;
  inset:auto -30px -45px auto;
  width:120px;height:120px;
  border:1px solid rgba(23,105,224,.13);
  transform:rotate(35deg);
}
.link-arrow{
  display:inline-flex;
  margin-top:18px;
  color:var(--blue);
  font-weight:800;
  font-size:.9rem;
}

.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.feature-list{display:grid;gap:12px;margin-top:20px}
.feature{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start}
.check{
  width:28px;height:28px;
  border-radius:50%;
  background:var(--blue-light);
  color:var(--blue);
  display:grid;place-items:center;
  font-weight:900;
}
.process{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.step{
  position:relative;
  flex:1 1 125px;
  min-height:98px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:14px;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:11px;
  font-weight:800;
}
.step small{font-weight:500;color:var(--muted)}
.step:not(:last-child):after{
  content:"→";
  position:absolute;
  right:-14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--blue);
  z-index:2;
}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{
  padding:18px;
  border-radius:13px;
  background:#fff;
  border:1px solid var(--gray-200);
  border-top:3px solid var(--blue);
}
.kpi strong{display:block;font-size:1.15rem;color:var(--navy)}
.kpi span{color:var(--muted);font-size:.82rem}

.table-wrap{
  overflow:auto;
  border:1px solid var(--gray-200);
  border-radius:14px;
  background:#fff;
}
table{width:100%;border-collapse:collapse}
th,td{padding:14px 15px;text-align:left;border-bottom:1px solid #e8edf2}
th{background:var(--navy);color:#fff}
td{color:#445268}
blockquote{
  margin:0;
  padding:24px 26px;
  border-left:4px solid var(--blue);
  background:var(--blue-light);
  color:#314965;
  border-radius:0 12px 12px 0;
}
.page-hero{
  padding:68px 0 52px;
  background:linear-gradient(180deg,#fff,#f5f8fc);
  border-bottom:1px solid var(--gray-200);
}
.page-hero h1{font-size:clamp(2.5rem,4.3vw,4.4rem);max-width:900px}
.breadcrumb{color:var(--muted);font-size:.8rem;margin-bottom:14px}
.content-block{padding:58px 0}
.cta{
  background:linear-gradient(135deg,var(--navy),#123a68);
  color:#fff;
  border-radius:22px;
  padding:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.cta h2{color:#fff;margin-top:0}
.cta p{color:#c5d3e3;max-width:760px}
.footer{background:#061426;color:#fff;padding:46px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.3fr repeat(2,1fr);gap:32px}
.footer h4{margin:0 0 12px}
.footer p,.footer a{color:#aebfd2;font-size:.86rem}
.footer a{display:block;margin:6px 0}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:28px;
  padding-top:18px;
  color:#8295aa;
  font-size:.78rem;
}
@media(max-width:1080px){
  .nav-links{display:none}
  .menu-btn{display:block}
  .brand{min-width:0}
  .hero-grid,.split{grid-template-columns:1fr}
  .hero-visual{min-height:350px}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .topbar{display:none}
  .nav-wrap{min-height:70px}
  .brand img{width:58px;height:40px}
  .brand span{display:none}
  .hero,.section{padding:54px 0}
  .page-hero{padding:46px 0 38px}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .card-grid,.kpi-grid,.footer-grid{grid-template-columns:1fr}
  .section-head,.cta{display:block}
  .hero-metrics{grid-template-columns:1fr}
  .step:not(:last-child):after{content:"↓";right:50%;top:auto;bottom:-20px}
}


/* ===== V4: navegação compacta e apresentação institucional ===== */
.topbar{display:none}

.nav-wrap{
  min-height:76px;
  gap:28px;
}
.brand{
  min-width:auto;
  flex:0 0 auto;
}
.brand img{
  width:64px;
  height:44px;
}
.brand strong{
  font-size:.85rem;
  max-width:250px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand span{display:none}

.nav-links{
  margin-left:auto;
  gap:4px;
}
.nav-links>a,
.dropdown-toggle{
  color:#dce8f5;
  padding:10px 12px;
  border-radius:8px;
  font-size:.86rem;
  white-space:nowrap;
}
.nav-links>a:hover,
.dropdown-toggle:hover,
.nav-links a.active{
  background:rgba(23,105,224,.18);
  color:#fff;
}
.nav-cta{
  margin-left:8px;
  padding-inline:16px!important;
}

.dropdown{
  position:relative;
}
.dropdown-toggle{
  display:flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
}
.dropdown-toggle:after{
  content:"⌄";
  font-size:.9rem;
  transform:translateY(-1px);
}
.dropdown-menu{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  width:310px;
  padding:10px;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:14px;
  box-shadow:0 22px 60px rgba(7,24,43,.16);
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{
  display:block;
}
.dropdown-menu a{
  display:block;
  color:var(--text)!important;
  padding:11px 12px!important;
  border-radius:9px;
  font-size:.87rem!important;
}
.dropdown-menu a:hover{
  background:var(--blue-light)!important;
  color:var(--blue)!important;
}
.dropdown-menu small{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  margin-top:2px;
}

.hero{
  padding-top:94px;
}
.hero .lead{
  max-width:700px;
}
.hero-visual{
  min-height:390px;
}

.services-overview{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.service-panel{
  min-height:300px;
  position:relative;
  overflow:hidden;
  padding:30px;
  border-radius:18px;
  border:1px solid var(--gray-200);
  background:#fff;
  box-shadow:0 10px 30px rgba(7,24,43,.05);
}
.service-panel.dark{
  color:#fff;
  border:none;
  background:linear-gradient(145deg,var(--navy),var(--navy-3));
}
.service-panel.dark h3{color:#fff}
.service-panel.dark p{color:#c7d4e3}
.service-panel .number{
  font-size:.76rem;
  letter-spacing:.2em;
  color:var(--blue);
  font-weight:800;
  margin-bottom:40px;
}
.service-panel h3{
  font-size:1.65rem;
  margin-bottom:12px;
}
.service-panel p{
  max-width:520px;
}
.service-panel ul{
  margin:20px 0 0;
  padding:0;
  list-style:none;
}
.service-panel li{
  padding:6px 0;
  color:var(--muted);
}
.service-panel.dark li{color:#c7d4e3}
.service-panel:after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  border:1px solid rgba(23,105,224,.13);
  right:-85px;
  bottom:-100px;
  transform:rotate(35deg);
}
.service-panel.dark:after{
  border-color:rgba(119,183,255,.22);
}

.approach-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.approach-card{
  padding:26px;
  border-top:3px solid var(--blue);
  background:#fff;
  border-radius:0 0 14px 14px;
}
.approach-card strong{
  display:block;
  font-size:1.8rem;
  color:var(--navy);
  margin-bottom:8px;
}
.approach-card span{
  color:var(--muted);
}

@media(max-width:1120px){
  .nav-links{display:none}
  .menu-btn{display:block}
}
@media(max-width:820px){
  .services-overview,
  .approach-grid{grid-template-columns:1fr}
}


/* =========================================================
   V5 — navegação corrigida, interações e movimento institucional
   ========================================================= */

:root{
  --ease-premium:cubic-bezier(.2,.7,.2,1);
  --ease-spring:cubic-bezier(.18,.89,.32,1.28);
}

/* NAVBAR */
.navbar{
  transition:
    background .35s var(--ease-premium),
    box-shadow .35s var(--ease-premium),
    transform .35s var(--ease-premium);
}
.navbar.is-scrolled{
  background:rgba(5,18,34,.985);
  box-shadow:0 12px 36px rgba(2,12,24,.18);
}
.navbar.is-hidden{
  transform:translateY(-100%);
}

.nav-wrap{
  min-height:78px;
  gap:24px;
}

.brand{
  min-width:0;
  flex:0 1 395px;
  display:flex;
  align-items:center;
  gap:12px;
}
.brand img{
  width:62px;
  height:44px;
  flex:0 0 auto;
}
.brand-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  line-height:1.08;
}
.brand-name{
  display:block;
  color:#fff;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand-role{
  display:block;
  margin-top:5px;
  color:#9db1c8;
  font-size:.58rem;
  letter-spacing:.035em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nav-links{
  margin-left:auto;
  gap:2px;
}
.nav-links>a,
.dropdown-toggle{
  position:relative;
  color:#dce8f5;
  padding:10px 11px;
  border:0;
  background:transparent;
  border-radius:8px;
  font:inherit;
  font-size:.82rem;
  cursor:pointer;
  white-space:nowrap;
}
.nav-links>a::after,
.dropdown-toggle::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:4px;
  height:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-2));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--ease-premium);
}
.nav-links>a:hover::after,
.nav-links>a.active::after,
.dropdown:hover .dropdown-toggle::before,
.dropdown:focus-within .dropdown-toggle::before{
  transform:scaleX(1);
}
.nav-links>a:hover,
.dropdown-toggle:hover,
.nav-links>a.active{
  background:rgba(23,105,224,.10);
  color:#fff;
}
.nav-cta{
  border:1px solid rgba(119,183,255,.42)!important;
  margin-left:6px;
  transition:transform .25s var(--ease-spring),background .25s ease,border-color .25s ease!important;
}
.nav-cta:hover{
  transform:translateY(-2px);
  background:var(--blue)!important;
  border-color:var(--blue)!important;
}
.nav-cta::after{display:none!important}

.dropdown-toggle{
  display:flex;
  align-items:center;
  gap:7px;
}
.dropdown-toggle::after{
  content:"";
  width:7px;
  height:7px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .25s var(--ease-premium);
}
.dropdown:hover .dropdown-toggle::after,
.dropdown:focus-within .dropdown-toggle::after{
  transform:rotate(225deg) translate(-1px,-1px);
}
.dropdown-menu{
  display:block;
  visibility:hidden;
  opacity:0;
  transform:translateY(10px) scale(.985);
  transform-origin:top left;
  pointer-events:none;
  transition:
    opacity .22s ease,
    transform .25s var(--ease-premium),
    visibility .22s ease;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown.is-open .dropdown-menu{
  visibility:visible;
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.dropdown-menu a{
  transition:background .2s ease,transform .2s var(--ease-premium),color .2s ease;
}
.dropdown-menu a:hover{
  transform:translateX(4px);
}

.menu-btn{
  width:44px;
  height:42px;
  padding:8px 9px;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:0;
  transition:background .2s ease,border-color .2s ease;
}
.menu-btn span{
  margin:3px 0;
  transition:
    transform .32s var(--ease-premium),
    opacity .22s ease,
    width .22s ease;
}
.menu-btn.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-btn.is-open span:nth-child(2){opacity:0;width:0}
.menu-btn.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.mobile-menu{
  display:grid;
  max-height:0;
  overflow:hidden;
  opacity:0;
  padding:0 4vw;
  transform:translateY(-8px);
  transition:
    max-height .42s var(--ease-premium),
    opacity .26s ease,
    transform .32s var(--ease-premium),
    padding .32s ease;
}
.mobile-menu.open{
  max-height:760px;
  opacity:1;
  transform:translateY(0);
  padding:8px 4vw 20px;
}
.mobile-menu a,
.mobile-services-toggle{
  color:#dce8f5;
  padding:12px 0;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:transparent;
  font:inherit;
  text-align:left;
}
.mobile-services-toggle{
  display:flex;
  justify-content:space-between;
  cursor:pointer;
}
.mobile-services-toggle span{
  transition:transform .25s ease;
}
.mobile-services-toggle.is-open span{transform:rotate(45deg)}
.mobile-services-list{
  display:grid;
  max-height:0;
  overflow:hidden;
  padding-left:14px;
  transition:max-height .35s var(--ease-premium);
}
.mobile-services-list.open{max-height:320px}
.mobile-services-list a{font-size:.9rem;color:#afc0d5}
.mobile-cta{color:#fff!important;font-weight:800!important}

/* PARALLAX */
[data-parallax]{
  transform:translate3d(0,var(--parallax-y,0),0);
  will-change:transform;
}
.hero-visual::before,
.hero-visual::after{
  transition:transform .3s ease;
}
.hero-visual:hover::before{transform:rotate(-58deg) translateX(12px)}
.hero-visual:hover::after{transform:rotate(-58deg) translateX(-12px)}
.hero-visual img{
  transition:transform .55s var(--ease-premium),filter .55s ease;
}
.hero-visual:hover img{
  transform:translateY(-8px) scale(1.025);
  filter:drop-shadow(0 30px 35px rgba(7,24,43,.24));
}

/* REVEAL E SECTION TRANSITIONS */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:
    opacity .75s var(--ease-premium),
    transform .75s var(--ease-premium);
}
.reveal.reveal-left{transform:translateX(-36px)}
.reveal.reveal-right{transform:translateX(36px)}
.reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}
.section{
  position:relative;
  overflow:clip;
}
.section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 15%,rgba(23,105,224,.035),transparent 75%);
  opacity:0;
  transform:translateX(-18%);
  transition:opacity .8s ease,transform 1.1s var(--ease-premium);
}
.section.section-active::before{
  opacity:1;
  transform:translateX(18%);
}

/* MICRO-INTERACTIONS */
.btn{
  position:relative;
  overflow:hidden;
  transition:
    transform .25s var(--ease-spring),
    box-shadow .25s ease,
    background .25s ease,
    border-color .25s ease;
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.26) 50%,transparent 75%);
  transform:translateX(-130%);
  transition:transform .6s var(--ease-premium);
}
.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(23,105,224,.18);
}
.btn:hover::before{transform:translateX(130%)}
.btn:active{transform:translateY(-1px) scale(.985)}

.service-panel,
.card,
.kpi,
.approach-card{
  transition:
    transform .35s var(--ease-premium),
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;
}
.service-panel:hover,
.card:hover,
.kpi:hover,
.approach-card:hover{
  transform:translateY(-8px);
  border-color:rgba(23,105,224,.32);
  box-shadow:0 22px 48px rgba(7,24,43,.12);
}
.service-panel:hover::after{
  transform:rotate(45deg) scale(1.08);
}
.link-arrow{
  transition:gap .25s ease,transform .25s ease,color .25s ease;
}
.service-panel:hover .link-arrow,
.card:hover .link-arrow{
  transform:translateX(5px);
  color:#0d56c0;
}
.trust-item{
  transition:color .25s ease,transform .25s var(--ease-spring);
}
.trust-item:hover{
  color:var(--blue);
  transform:translateY(-3px);
}
.check{
  transition:transform .25s var(--ease-spring),background .25s ease,color .25s ease;
}
.feature:hover .check{
  transform:scale(1.12) rotate(-5deg);
  background:var(--blue);
  color:#fff;
}

/* SCROLLYTELLING */
.scrolly{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.92fr);
  gap:52px;
  align-items:start;
}
.scrolly-copy{
  display:grid;
  gap:46vh;
  padding:14vh 0 28vh;
}
.scrolly-step{
  padding:24px 0;
  opacity:.36;
  transform:translateY(18px);
  transition:opacity .38s ease,transform .38s var(--ease-premium);
}
.scrolly-step.is-active{
  opacity:1;
  transform:translateY(0);
}
.scrolly-step .index{
  display:inline-flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--blue-light);
  color:var(--blue);
  font-weight:900;
  margin-bottom:14px;
}
.scrolly-visual{
  position:sticky;
  top:122px;
  min-height:520px;
  border-radius:22px;
  overflow:hidden;
  background:
    radial-gradient(circle at 75% 15%,rgba(47,128,237,.18),transparent 30%),
    linear-gradient(145deg,var(--navy),var(--navy-3));
  color:#fff;
  box-shadow:var(--shadow);
}
.scrolly-stage{
  position:absolute;
  inset:0;
  padding:40px;
  display:grid;
  align-content:center;
  opacity:0;
  transform:scale(.96) translateY(20px);
  transition:opacity .45s ease,transform .55s var(--ease-premium);
}
.scrolly-stage.is-active{
  opacity:1;
  transform:scale(1) translateY(0);
}
.scrolly-stage .big-number{
  font-size:clamp(5rem,9vw,9rem);
  line-height:.85;
  color:rgba(255,255,255,.10);
  font-weight:900;
  position:absolute;
  right:24px;
  top:24px;
}
.scrolly-stage h3{
  color:#fff;
  font-size:2rem;
  max-width:430px;
}
.scrolly-stage p{color:#c5d3e2;max-width:520px}
.scrolly-meter{
  height:4px;
  background:rgba(255,255,255,.12);
  margin-top:24px;
  overflow:hidden;
}
.scrolly-meter span{
  display:block;
  height:100%;
  width:var(--meter,25%);
  background:linear-gradient(90deg,var(--blue),#77b7ff);
  transition:width .55s var(--ease-premium);
}

/* Cursor spotlight */
.spotlight{
  position:relative;
  overflow:hidden;
}
.spotlight::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(47,128,237,.12),transparent 70%);
  opacity:0;
  transition:opacity .25s ease;
}
.spotlight:hover::before{opacity:1}

/* Motion safety */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{opacity:1!important;transform:none!important}
  [data-parallax]{transform:none!important}
}

@media(max-width:1120px){
  .nav-links{display:none}
  .menu-btn{display:flex}
  .brand{flex:1 1 auto}
  .brand-name{font-size:.72rem}
  .brand-role{font-size:.55rem}
}
@media(max-width:900px){
  .scrolly{grid-template-columns:1fr}
  .scrolly-copy{gap:12px;padding:0}
  .scrolly-step{
    opacity:1;
    transform:none;
    padding:18px 0;
  }
  .scrolly-visual{
    position:relative;
    top:auto;
    min-height:430px;
  }
}
@media(max-width:680px){
  .brand-name{
    max-width:220px;
    font-size:.66rem;
  }
  .brand-role{
    max-width:220px;
    font-size:.51rem;
  }
  .brand img{width:54px;height:38px}
  .scrolly-stage{padding:28px}
}


/* =========================================================
   V6  Portfólio institucional e página Sobre revisada
   ========================================================= */

.portfolio-shell{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:34px;
  align-items:start;
}
.portfolio-aside{
  position:sticky;
  top:118px;
  display:grid;
  gap:16px;
}
.portfolio-aside .overview-button,
.portfolio-aside .solution-button{
  display:block;
  padding:17px 18px;
  border-radius:14px;
  font-weight:900;
  letter-spacing:.045em;
  text-transform:uppercase;
  font-size:.82rem;
}
.overview-button{
  background:linear-gradient(135deg,#ffbd00,#f2a800);
  color:#111;
}
.solution-button{
  background:#050505;
  color:#fff;
}
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.portfolio-column{
  min-width:0;
}
.portfolio-title{
  padding:13px 16px;
  border:1px solid var(--gray-300);
  border-radius:14px;
  background:#fff;
  font-size:1.24rem;
  font-weight:900;
  color:#050505;
  margin-bottom:12px;
  transition:transform .28s var(--ease-premium),border-color .28s ease,box-shadow .28s ease;
}
.portfolio-column:hover .portfolio-title{
  transform:translateY(-4px);
  border-color:rgba(23,105,224,.35);
  box-shadow:0 12px 28px rgba(7,24,43,.08);
}
.portfolio-list{
  list-style:none;
  margin:0;
  padding:0 14px;
}
.portfolio-list li{
  padding:6px 0;
  color:#27354a;
  font-size:.94rem;
  position:relative;
}
.portfolio-list li::before{
  content:"";
  position:absolute;
  left:-12px;
  top:15px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--blue);
  opacity:0;
  transform:scale(.5);
  transition:opacity .2s ease,transform .2s ease;
}
.portfolio-list li:hover::before{
  opacity:1;
  transform:scale(1);
}

.about-intro{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:58px;
  align-items:start;
}
.about-copy .lead{
  max-width:680px;
}
.about-principles{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:30px;
}
.principle-card{
  padding:21px;
  border:1px solid var(--gray-200);
  border-radius:15px;
  background:#fff;
  transition:transform .3s var(--ease-premium),box-shadow .3s ease,border-color .3s ease;
}
.principle-card:hover{
  transform:translateY(-6px);
  border-color:rgba(23,105,224,.32);
  box-shadow:0 18px 38px rgba(7,24,43,.10);
}
.principle-card .principle-index{
  color:var(--blue);
  font-weight:900;
  font-size:.74rem;
  letter-spacing:.16em;
  margin-bottom:10px;
}
.principle-card h3{
  font-size:1.08rem;
  margin-bottom:7px;
}
.principle-card p{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
}

.about-manifesto{
  position:sticky;
  top:122px;
  min-height:430px;
  padding:38px;
  border-radius:22px;
  background:
    radial-gradient(circle at 80% 12%,rgba(47,128,237,.22),transparent 32%),
    linear-gradient(145deg,var(--navy),var(--navy-3));
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  box-shadow:var(--shadow);
}
.about-manifesto .manifesto-label{
  color:#77b7ff;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:22px;
}
.about-manifesto blockquote{
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  border-radius:0;
  font-size:clamp(1.65rem,2.5vw,2.55rem);
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.02em;
}
.about-manifesto p{
  margin-top:20px;
  color:#bdd0e3;
}
.about-credentials{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.credential-card{
  padding:26px;
  border-top:3px solid var(--blue);
  background:#fff;
  border-radius:0 0 14px 14px;
  box-shadow:0 8px 24px rgba(7,24,43,.05);
}
.credential-card strong{
  display:block;
  color:var(--navy);
  font-size:1.15rem;
  margin-bottom:8px;
}
.credential-card span{
  color:var(--muted);
}

.journey-label{
  color:var(--blue);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
}

@media(max-width:1050px){
  .portfolio-shell{grid-template-columns:1fr}
  .portfolio-aside{position:relative;top:auto;grid-template-columns:1fr 1fr}
  .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-intro{grid-template-columns:1fr}
  .about-manifesto{position:relative;top:auto;min-height:360px}
}
@media(max-width:720px){
  .portfolio-aside{grid-template-columns:1fr}
  .portfolio-grid,
  .about-principles,
  .about-credentials{grid-template-columns:1fr}
}


/* =========================================================
   V7 — jornada compacta e comportamento de carrossel
   ========================================================= */

.scrolly{
  grid-template-columns:minmax(0,.86fr) minmax(430px,1.14fr);
  gap:44px;
}

.scrolly-copy{
  gap:14px;
  padding:0;
}

.scrolly-step{
  position:relative;
  padding:20px 22px;
  border:1px solid transparent;
  border-radius:15px;
  opacity:.58;
  transform:none;
  cursor:pointer;
  background:transparent;
  transition:
    opacity .3s ease,
    transform .32s var(--ease-premium),
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.scrolly-step:hover,
.scrolly-step:focus-within{
  opacity:.9;
  transform:translateX(7px);
  background:#fff;
  border-color:var(--gray-200);
  box-shadow:0 12px 30px rgba(7,24,43,.08);
}

.scrolly-step.is-active{
  opacity:1;
  transform:translateX(10px);
  background:#fff;
  border-color:rgba(23,105,224,.28);
  box-shadow:0 16px 36px rgba(7,24,43,.10);
}

.scrolly-step.is-active::before{
  content:"";
  position:absolute;
  left:-1px;
  top:18px;
  bottom:18px;
  width:4px;
  border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--blue),#77b7ff);
}

.scrolly-step .index{
  margin-bottom:10px;
  transition:
    transform .28s var(--ease-spring),
    background .28s ease,
    color .28s ease;
}

.scrolly-step:hover .index,
.scrolly-step.is-active .index{
  transform:scale(1.08);
  background:var(--blue);
  color:#fff;
}

.scrolly-step h3{
  margin-top:0;
  margin-bottom:8px;
}

.scrolly-step p{
  margin:0;
}

.scrolly-visual{
  min-height:520px;
}

.scrolly-stage{
  padding:46px 48px 88px;
}

.scrolly-controls{
  position:absolute;
  z-index:12;
  left:42px;
  right:42px;
  bottom:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.scrolly-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}

.scrolly-dot{
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.28);
  cursor:pointer;
  transition:
    width .28s var(--ease-premium),
    border-radius .28s ease,
    background .28s ease,
    transform .28s var(--ease-spring);
}

.scrolly-dot:hover{
  transform:scale(1.25);
  background:rgba(255,255,255,.62);
}

.scrolly-dot.is-active{
  width:34px;
  border-radius:999px;
  background:#77b7ff;
}

.scrolly-arrow{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.07);
  color:#fff;
  font-size:1.1rem;
  cursor:pointer;
  transition:
    transform .25s var(--ease-spring),
    background .25s ease,
    border-color .25s ease;
}

.scrolly-arrow:hover{
  transform:scale(1.08);
  background:rgba(47,128,237,.45);
  border-color:#77b7ff;
}

.scrolly-arrow:active{
  transform:scale(.96);
}

.scrolly-stage.is-entering{
  animation:scrollySlideIn .48s var(--ease-premium);
}

@keyframes scrollySlideIn{
  from{
    opacity:0;
    transform:translateX(28px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateX(0) scale(1);
  }
}

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

  .scrolly-copy{
    gap:10px;
  }

  .scrolly-step,
  .scrolly-step.is-active,
  .scrolly-step:hover{
    transform:none;
  }

  .scrolly-visual{
    min-height:450px;
  }
}

@media(max-width:580px){
  .scrolly-stage{
    padding:34px 28px 84px;
  }

  .scrolly-controls{
    left:24px;
    right:24px;
    bottom:22px;
  }
}


/* =========================================================
   V8 — alinhamento dos cards e CTA de WhatsApp
   ========================================================= */

.services-overview{
  align-items:stretch;
}

.service-panel{
  display:flex;
  flex-direction:column;
  min-height:560px;
}

.service-panel .number{
  margin-bottom:38px;
}

.service-panel h3{
  min-height:3.35em;
  display:flex;
  align-items:flex-start;
}

.service-panel > p{
  min-height:5.2em;
}

.service-panel ul{
  min-height:8.2em;
  margin-bottom:0;
}

.service-panel .link-arrow{
  margin-top:auto;
  padding-top:20px;
}

@media(max-width:820px){
  .service-panel{
    min-height:auto;
  }
  .service-panel h3,
  .service-panel > p,
  .service-panel ul{
    min-height:0;
  }
}


/* =========================================================
   V9 — imagem de Fortaleza aplicada à hero
   ========================================================= */
.hero-visual.hero-fortaleza{
  min-height:470px;
  padding:0;
  align-items:stretch;
  background:#0b2746;
}
.hero-visual.hero-fortaleza img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:none;
  transform:none;
}
.hero-visual.hero-fortaleza:hover img{
  transform:scale(1.025);
}
.hero-image-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(115deg, rgba(6,20,38,.58) 8%, rgba(6,20,38,.14) 50%, rgba(6,20,38,.36) 100%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
}
.hero-badge{
  position:absolute;
  left:28px;
  bottom:28px;
  z-index:3;
  max-width:360px;
  padding:18px 18px 16px;
  border-radius:16px;
  background:rgba(7,24,43,.72);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 38px rgba(5,18,34,.22);
}
.hero-badge-label{
  display:block;
  color:#77b7ff;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.hero-badge strong{
  display:block;
  color:#fff;
  font-size:1rem;
  line-height:1.35;
}
@media(max-width:900px){
  .hero-visual.hero-fortaleza{
    min-height:360px;
  }
}
@media(max-width:580px){
  .hero-badge{
    left:18px;
    right:18px;
    bottom:18px;
    max-width:none;
    padding:14px;
  }
  .hero-badge strong{
    font-size:.92rem;
  }
}

/* Watto branding */
.brand img{
  width:84px;
  height:48px;
  object-fit:contain;
}
.brand-name{
  font-size:.82rem;
  letter-spacing:.14em;
}
.brand-role{
  font-size:.60rem;
  letter-spacing:.11em;
  text-transform:uppercase;
}
@media(max-width:680px){
  .brand img{width:72px;height:42px}
  .brand-name{font-size:.72rem}
  .brand-role{font-size:.52rem}
}


/* V11 - Watto logo larger in navbar */
.brand.brand-logo-only{
  flex:0 0 auto;
  min-width:0;
  display:flex;
  align-items:center;
}
.brand.brand-logo-only img{
  width:220px !important;
  height:auto !important;
  max-height:72px;
  object-fit:contain;
  display:block;
}
.nav-wrap{
  min-height:88px;
}
@media (max-width: 900px){
  .brand.brand-logo-only img{
    width:180px !important;
    max-height:60px;
  }
  .nav-wrap{
    min-height:82px;
  }
}
@media (max-width: 560px){
  .brand.brand-logo-only img{
    width:150px !important;
    max-height:52px;
  }
}


/* V12 — marca Watto alinhada em uma única linha */
.brand.watto-brand{
  flex:0 0 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  white-space:nowrap;
}
.brand.watto-brand img{
  width:78px !important;
  height:54px !important;
  max-height:none;
  object-fit:contain;
  flex:0 0 auto;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.22));
}
.watto-brand-line{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
  line-height:1;
}
.watto-wordmark{
  color:#fff;
  font-size:1.28rem;
  font-weight:900;
  letter-spacing:-.035em;
  text-transform:none;
}
.watto-separator{
  color:#77b7ff;
  font-size:1.15rem;
  font-weight:700;
  transform:translateY(-1px);
}
.watto-descriptor{
  color:#b9c9da;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.035em;
  text-transform:none;
}
.nav-wrap{
  min-height:82px;
}
@media(max-width:1120px){
  .brand.watto-brand img{
    width:70px !important;
    height:48px !important;
  }
  .watto-wordmark{font-size:1.16rem}
  .watto-descriptor{font-size:.70rem}
}
@media(max-width:680px){
  .brand.watto-brand{
    gap:9px;
  }
  .brand.watto-brand img{
    width:58px !important;
    height:42px !important;
  }
  .watto-brand-line{
    gap:6px;
  }
  .watto-wordmark{font-size:1rem}
  .watto-separator{font-size:.95rem}
  .watto-descriptor{
    font-size:.62rem;
    max-width:135px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}


/* V13 — Watto em Orbitron exclusivamente na navbar */
.brand.watto-brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  min-width:0;
  color:#fff;
  white-space:nowrap;
}
.brand.watto-brand img{
  width:72px !important;
  height:50px !important;
  max-height:none !important;
  object-fit:contain;
  flex:0 0 auto;
}
.watto-brand-line{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  line-height:1;
}
.watto-wordmark{
  font-family:"Orbitron", sans-serif !important;
  font-size:1.18rem;
  font-weight:900;
  letter-spacing:.015em;
  color:#fff;
  text-transform:none;
}
.watto-separator{
  color:#77b7ff;
  font-size:1.08rem;
  font-weight:800;
}
.watto-descriptor{
  font-family:inherit;
  color:#c2cfdd;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.025em;
  text-transform:none;
}
@media(max-width:1120px){
  .brand.watto-brand{gap:9px}
  .brand.watto-brand img{width:62px !important;height:44px !important}
  .watto-wordmark{font-size:1.04rem}
  .watto-descriptor{font-size:.66rem}
}
@media(max-width:680px){
  .brand.watto-brand img{width:54px !important;height:40px !important}
  .watto-brand-line{gap:5px}
  .watto-wordmark{font-size:.94rem}
  .watto-separator{font-size:.9rem}
  .watto-descriptor{font-size:.58rem}
}

/* V14 — correção definitiva da identificação textual na navbar */
.brand.watto-brand .watto-brand-line{
  display:inline-flex !important;
  align-items:baseline;
  gap:8px;
  margin-top:0;
  color:inherit;
  white-space:nowrap;
}

.brand.watto-brand .watto-wordmark{
  display:inline-block !important;
  font-family:"Orbitron", sans-serif !important;
  font-size:1.18rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.015em;
  color:#ffffff;
}

.brand.watto-brand .watto-separator{
  display:inline-block !important;
  margin-top:0;
  font-size:1.05rem;
  line-height:1;
  font-weight:800;
  color:#77b7ff;
}

.brand.watto-brand .watto-descriptor{
  display:inline-block !important;
  margin-top:0;
  font-size:.74rem;
  line-height:1;
  font-weight:600;
  letter-spacing:.025em;
  color:#c2cfdd;
  text-transform:none;
}

@media(max-width:720px){
  .brand.watto-brand .watto-brand-line{
    display:inline-flex !important;
  }
  .brand.watto-brand .watto-separator,
  .brand.watto-brand .watto-descriptor{
    display:inline-block !important;
  }
}

@media(max-width:560px){
  .brand.watto-brand .watto-wordmark{
    font-size:.9rem;
  }
  .brand.watto-brand .watto-descriptor{
    font-size:.55rem;
  }
}