/* Netprime Tecnologia - style.css */
:root{
  --primary:#14597B;
  --primary-dark:#0F445E;
  --secondary:#3AB7E9;
  --secondary-strong:#25A9DC;
  --fg:#171D26;
  --bg:#FFFFFF;
  --muted:#F4F7F8;
  --muted-fg:#627884;
  --border:#DAE2E7;
  --radius:14px;
  --max:1200px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--fg);line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
ul{list-style:none}
::selection{background:var(--secondary);color:#fff}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:20px;height:20px;flex:none}

.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 16px}
@media(min-width:640px){.container{padding:0 24px}}
@media(min-width:1024px){.container{padding:0 32px}}

/* ---- Botões ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:0;border-radius:10px;padding:16px 32px;
  font-size:14px;font-weight:800;letter-spacing:.02em;text-align:center;cursor:pointer;
  transition:background .2s,color .2s,box-shadow .2s,transform .2s;
}
.btn-blue{background:var(--secondary);color:#fff}
.btn-blue:hover{background:var(--secondary-strong);box-shadow:0 16px 40px rgba(58,183,233,.35)}
.btn-outline{background:transparent;border:2px solid var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-sm{padding:12px 22px;font-size:13px}

/* ---- Títulos ---- */
.eyebrow{display:block;color:var(--secondary);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.18em}
.h2{margin-top:12px;font-size:30px;font-weight:900;line-height:1.15;letter-spacing:-.01em;color:var(--primary)}
.h2 em{font-style:italic;color:var(--secondary)}
.h2--light{color:#fff}
@media(min-width:1024px){.h2{font-size:40px}}
.section{padding:80px 0}
@media(min-width:1024px){.section{padding:112px 0}}
.section--muted{background:var(--muted)}
.section--navy{background:var(--primary)}
.head{text-align:center;margin-bottom:56px}
.center-cta{text-align:center;margin-top:48px}

/* ---- Animação de entrada ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---- Navbar ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,box-shadow .3s}
.nav.is-scrolled{background:rgba(20,89,123,.96);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
@media(min-width:1024px){.nav-inner{height:80px}}
.brand{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.brand img{width:40px;height:40px;border-radius:10px;object-fit:cover;flex:none}
.brand-name{display:block;color:#fff;font-size:18px;font-weight:800;line-height:1;letter-spacing:-.01em}
.brand-sub{display:block;color:var(--secondary);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin-top:2px}
.nav-links{display:none}
@media(min-width:1024px){.nav-links{display:flex;align-items:center;gap:32px}}
.nav-links a{color:rgba(255,255,255,.8);font-size:14px;font-weight:500;transition:color .2s}
.nav-links a:hover{color:#fff}
.nav-cta{display:none}
@media(min-width:1024px){.nav-cta{display:inline-flex}}
.nav-toggle{display:inline-flex;align-items:center;background:none;border:0;color:#fff;padding:8px;cursor:pointer}
.nav-toggle .icon-x{display:none}
.nav-toggle[aria-expanded="true"] .icon-menu{display:none}
.nav-toggle[aria-expanded="true"] .icon-x{display:block}
@media(min-width:1024px){.nav-toggle{display:none}}
.nav-mobile{display:none;background:rgba(20,89,123,.99);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1)}
.nav-mobile.is-open{display:block}
.nav-mobile ul{padding:12px 16px 20px}
.nav-mobile a:not(.btn){display:block;color:rgba(255,255,255,.8);padding:12px;font-size:14px;font-weight:500;border-radius:8px;transition:background .2s,color .2s}
.nav-mobile a:not(.btn):hover{background:rgba(255,255,255,.06);color:#fff}
.nav-mobile .btn{width:100%;margin-top:12px}
@media(min-width:1024px){.nav-mobile{display:none!important}}

/* ---- Hero ---- */
.hero{position:relative;display:flex;align-items:center;min-height:100vh;overflow:hidden;background:var(--primary)}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.2}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,89,123,1) 0%,rgba(20,89,123,.92) 45%,rgba(20,89,123,.45) 100%)}
.hero-inner{position:relative;z-index:10;width:100%;padding-top:144px;padding-bottom:96px}
@media(min-width:1024px){.hero-inner{padding-top:160px}}
.hero-grid{display:grid;gap:48px;align-items:center}
@media(min-width:1024px){.hero-grid{grid-template-columns:1fr 1fr}}
.hero h1{font-size:36px;font-weight:900;line-height:1.1;letter-spacing:-.02em;color:#fff}
.hero h1 em{font-style:italic;color:var(--secondary)}
@media(min-width:640px){.hero h1{font-size:48px}}
@media(min-width:1024px){.hero h1{font-size:58px}}
.hero-lead{margin-top:20px;max-width:32rem;color:rgba(255,255,255,.7);font-size:18px;line-height:1.65}
.highlights{margin-top:32px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:640px){.highlights{grid-template-columns:repeat(4,1fr)}}
.highlight{display:flex;align-items:flex-start;gap:8px}
.highlight-box{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:rgba(58,183,233,.2);flex:none;margin-top:2px}
.highlight-box .icon{width:16px;height:16px;color:var(--secondary)}
.highlight>span:last-child{color:rgba(255,255,255,.8);font-size:12px;font-weight:500;line-height:1.35}
.hero-cta{margin-top:40px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
@media(min-width:640px){.hero-cta{flex-direction:row;align-items:center}}
.hero-cta .hint{color:rgba(255,255,255,.4);font-size:12px}
.hero-visual{display:none}
@media(min-width:1024px){.hero-visual{position:relative;display:block}}
.hero-visual>img{border-radius:18px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.hero-badge{position:absolute;bottom:-24px;right:-24px;padding:24px;border-radius:18px;background:var(--secondary);box-shadow:0 18px 40px rgba(0,0,0,.25);text-align:center}
.hero-badge strong{display:block;color:#fff;font-size:36px;font-weight:900;line-height:1}
.hero-badge span{display:block;margin-top:6px;color:rgba(255,255,255,.9);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}

/* ---- Números ---- */
.stats{padding:64px 0}
@media(min-width:1024px){.stats{padding:80px 0}}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
@media(min-width:1024px){.stats-grid{grid-template-columns:repeat(4,1fr);gap:48px}}
.stat{text-align:center}
.stat-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:16px;border-radius:14px;background:rgba(58,183,233,.1)}
.stat-icon .icon{width:24px;height:24px;color:var(--secondary)}
.stat-value{font-size:30px;font-weight:900;color:var(--primary)}
.stat-title{font-size:18px;font-weight:800;color:var(--primary)}
@media(min-width:1024px){.stat-value{font-size:36px}}
.stat p{margin:6px auto 0;max-width:210px;color:var(--muted-fg);font-size:14px;line-height:1.6}

/* ---- Serviços ---- */
.cards{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cards{grid-template-columns:repeat(4,1fr)}}
.card{padding:24px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:0 1px 3px rgba(23,29,38,.06);transition:box-shadow .3s,border-color .3s,transform .3s}
.card:hover{border-color:rgba(58,183,233,.45);box-shadow:0 14px 34px rgba(23,29,38,.12);transform:translateY(-3px)}
.card-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:16px;border-radius:12px;background:rgba(58,183,233,.1);transition:background .3s}
.card:hover .card-icon{background:rgba(58,183,233,.2)}
.card-icon .icon{width:20px;height:20px;color:var(--secondary)}
.card h3{margin-bottom:8px;font-size:16px;font-weight:800;color:var(--primary)}
.card p{color:var(--muted-fg);font-size:14px;line-height:1.65}

/* ---- Contrato ---- */
.split{display:grid;gap:48px;align-items:center}
@media(min-width:1024px){.split{grid-template-columns:1fr 1fr;gap:64px}}
.contract p{margin-top:20px;max-width:32rem;color:rgba(255,255,255,.6);line-height:1.7}
.contract .btn{margin-top:32px}
.contract-media{margin-bottom:32px;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.contract-media img{width:100%;height:256px;object-fit:cover}
@media(min-width:1024px){.contract-media img{height:320px}}
.benefits{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:640px){.benefits{grid-template-columns:repeat(2,1fr)}}
.benefit{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;background:rgba(255,255,255,.05)}
.benefit .icon{width:16px;height:16px;color:var(--secondary)}
.benefit span{color:rgba(255,255,255,.8);font-size:14px}

/* ---- Diferenciais ---- */
.reasons{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:640px){.reasons{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.reasons{grid-template-columns:repeat(4,1fr)}}
.reason{text-align:center}
.reason-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:20px;border-radius:18px;background:var(--primary)}
.reason-icon .icon{width:28px;height:28px;color:var(--secondary)}
.reason h3{margin-bottom:8px;font-size:18px;font-weight:800;color:var(--primary)}
.reason p{color:var(--muted-fg);font-size:14px;line-height:1.65}

/* ---- Segmentos ---- */
.segments{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(min-width:640px){.segments{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.segments{grid-template-columns:repeat(8,1fr)}}
.segment{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;transition:border-color .3s,box-shadow .3s}
.segment:hover{border-color:rgba(58,183,233,.45);box-shadow:0 10px 24px rgba(23,29,38,.1)}
.segment-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:var(--primary);transition:background .3s}
.segment:hover .segment-icon{background:var(--secondary)}
.segment-icon .icon{width:20px;height:20px;color:#fff}
.segment>span:last-child{color:var(--muted-fg);font-size:12px;font-weight:600;text-align:center;transition:color .3s}
.segment:hover>span:last-child{color:var(--primary)}

/* ---- Contato ---- */
.contact-grid{display:grid;gap:48px}
@media(min-width:1024px){.contact-grid{grid-template-columns:1fr 1fr;gap:80px}}
.contact .lead{margin-top:16px;max-width:28rem;color:rgba(255,255,255,.6);line-height:1.7}
.contact .btn:first-of-type{margin-top:32px}
.info-list{margin-top:40px;display:flex;flex-direction:column;gap:20px}
.info{display:flex;align-items:center;gap:16px}
.info-box{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.1);flex:none}
.info-box .icon{width:16px;height:16px;color:var(--secondary)}
.info small{display:block;color:rgba(255,255,255,.4);font-size:12px;font-weight:500}
.info strong{color:#fff;font-size:14px;font-weight:400;word-break:break-word}
.form-card{padding:32px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.05);backdrop-filter:blur(6px)}
.form-card h3{margin-bottom:24px;color:#fff;font-size:20px;font-weight:800}
.stack{display:flex;flex-direction:column;gap:16px}
.form-row{display:grid;gap:16px}
@media(min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
.field{width:100%;padding:12px 16px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.05);color:#fff;font-size:14px;transition:border-color .2s}
.field::placeholder{color:rgba(255,255,255,.3)}
.field:focus{outline:0;border-color:var(--secondary)}
textarea.field{min-height:120px;resize:none}
.form-ok{padding:32px 0;text-align:center}
.form-ok strong{display:block;color:var(--secondary);font-size:18px}
.form-ok p{margin-top:8px;color:rgba(255,255,255,.6);font-size:14px}
.form-ok button{margin-top:16px;border:0;background:none;color:var(--secondary);font-size:14px;text-decoration:underline;cursor:pointer}

/* ---- Rodapé ---- */
.footer{background:var(--fg);color:#fff}
.footer-grid{display:grid;gap:40px;grid-template-columns:1fr;padding:64px 0}
@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-grid{grid-template-columns:repeat(5,1fr)}}
.footer h4{margin-bottom:16px;color:rgba(255,255,255,.8);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.footer-brand p{margin-top:16px;color:rgba(255,255,255,.4);font-size:14px;line-height:1.7}
.footer-links li+li{margin-top:10px}
.footer-links span,.footer-links button{padding:0;border:0;background:none;color:rgba(255,255,255,.4);font-size:14px;cursor:pointer;transition:color .2s}
.footer-links button:hover{color:var(--secondary)}
.footer-contact{display:flex;flex-direction:column;gap:12px}
.footer-contact div{display:flex;align-items:center;gap:8px}
.footer-contact .icon{width:14px;height:14px;color:var(--secondary)}
.footer-contact span{color:rgba(255,255,255,.4);font-size:14px;word-break:break-word}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom .container{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:12px;padding-top:20px;padding-bottom:20px}
@media(min-width:640px){.footer-bottom .container{flex-direction:row}}
.footer-bottom p{color:rgba(255,255,255,.3);font-size:12px}
.social{display:flex;gap:16px}
.social a{color:rgba(255,255,255,.3);font-size:12px;transition:color .2s}
.social a:hover{color:var(--secondary)}

/* ---- Botão flutuante ---- */
.whats-float{position:fixed;bottom:24px;right:24px;z-index:50;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;box-shadow:0 10px 24px rgba(37,211,102,.4);transition:transform .2s,box-shadow .2s}
.whats-float:hover{transform:scale(1.1);box-shadow:0 16px 34px rgba(37,211,102,.5)}
.whats-float svg{width:56px;height:56px}