:root {
    --header-bkg:#fff; --header-borda:#edf2f3; --header-menu:#102f3a;
    --fundo:#fff; --fundo-secundario:#eefafb; --fundo-card:#f5fafa; --fundo-claro:#d8f3f3;
    --texto:#17252b; --texto-secundario:#64777e; --texto-suave:#718388; --texto-escuro:#12313c; --texto-faq:#708188;
    --destaque:#00a8a8; --destaque-texto:#fff;
    --botao-fundo:#00a8a8; --botao-texto:#fff; --botao-escuro-fundo:#fff; --botao-escuro-hover:#008686; --botao-escuro-texto:#087d83;
    --borda:#e5f0f0;
    --faixa-fundo:#00a8a8; --faixa-texto:#fff;
    --cta-fundo:linear-gradient(135deg,#00a8a8,#087a88); --cta-texto:#fff;
    --footer-bkg:#0b252e; --footer-texto:#a9bec3;
    --painel-escuro:#102f3a; --painel-escuro-texto:#fff; --painel-texto-fraco:#bdd0d4;
    interpolate-size:allow-keywords;
}
*               { margin:0; padding:0; box-sizing:border-box;    }
html            { scroll-behavior:smooth;    }
body            { font-family:Arial,Helvetica,sans-serif; color:var(--texto); background:var(--fundo);    }
a               { text-decoration:none;    }
header          { position:sticky; top:40px; z-index:1000; height:80px; background:var(--header-bkg); border-bottom:1px solid var(--header-borda);    }
header .content { height:80px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:30px;    }
.content        { width:100%; max-width:1400px; margin:0 auto; padding:0 20px;    }
.logo           { font-size:25px; font-weight:800; color:var(--header-menu);    }
.logo span      { color:var(--destaque);    }
nav             { display:flex; align-items:center; gap:28px;    }
nav a           { color:var(--header-menu); font-size:14px; font-weight:500;    }
.btn            { display:inline-flex; align-items:center; justify-content:center; padding:14px 24px; border-radius:30px; background:var(--botao-fundo); color:var(--botao-texto); font-weight:600; transition:.2s;    }
.btn:hover      { background:var(--botao-escuro-hover);   }
.hero           { min-height:640px; padding:65px 0; background:var(--fundo-secundario); scroll-margin-top:120px;    }
.hero .content  { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:50px; min-height:640px;    }
.tag            { display:inline-block; padding:8px 14px; border-radius:30px; background:var(--fundo-claro); color:var(--texto-escuro); font-size:12px; font-weight:bold;    }
.hero h1        { max-width:650px; margin:18px 0; font-size:58px; line-height:1.05; color:var(--texto-escuro);    }
.hero h1 span   { color:var(--destaque);    }
.hero p         { max-width:570px; margin-bottom:30px; color:var(--texto-secundario); font-size:18px; line-height:1.7;    }
.hero-acoes     { display:flex; align-items:center; gap:15px;    }
.btn-outline    { display:inline-block; padding:13px 23px; border:1px solid var(--texto); border-radius:30px; color:var(--texto); font-size:14px;    }
.hero-img       { height:500px; position:relative;    }
.hero-img img   { width:100%; height:100%; object-fit:cover; border-radius:25px;    }
.card-flutuante { position:absolute; left:-35px; bottom:35px; padding:18px 22px; border-radius:15px; background:var(--fundo); box-shadow:0 15px 40px rgba(28,70,77,.15);    }
.card-flutuante strong { display:block; color:var(--texto-escuro); font-size:20px;    }
.card-flutuante span { color:var(--texto-secundario); font-size:12px;    }
section         { padding:85px 0; scroll-margin-top:120px;    }
.titulo         { max-width:720px; margin:0 auto 50px; text-align:center;    }
.titulo span    { color:var(--destaque); font-size:12px; font-weight:bold; text-transform:uppercase; letter-spacing:1.5px;    }
.titulo h2      { margin:10px 0 15px; font-size:40px; color:var(--texto-escuro);    }
.titulo p       { color:var(--texto-faq); line-height:1.7;    }
.servicos       { background:var(--fundo);    }
.grid-servicos  { display:grid; grid-template-columns:repeat(4,1fr); gap:18px;    }
.servico        { padding:30px; border-radius:18px; background:var(--fundo-card); border:1px solid var(--borda); transition:.2s;    }
.servico:hover  { transform:translateY(-6px); box-shadow:0 15px 35px rgba(30,92,99,.08);   }
.icone          { width:52px; height:52px; margin-bottom:22px; display:flex; align-items:center; justify-content:center; border-radius:15px; background:var(--fundo-claro); color:var(--destaque); font-size:23px;    }
.servico h3     { margin-bottom:10px; color:var(--texto-escuro);    }
.servico p      { color:var(--texto-suave); font-size:14px; line-height:1.6;    }
.tecnologia     { background:var(--painel-escuro); color:var(--painel-escuro-texto);    }
.tecnologia .content { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px;    }
.tecnologia-img { height:450px;    }
.tecnologia-img img { width:100%; height:100%; object-fit:cover; border-radius:20px;    }
.tecnologia-texto span { color:var(--destaque); font-size:12px; font-weight:bold; text-transform:uppercase; letter-spacing:2px;    }
.tecnologia-texto h2 { margin:14px 0 20px; font-size:42px;    }
.tecnologia-texto p { margin-bottom:15px; color:var(--painel-texto-fraco); line-height:1.8;    }
.lista          { margin-top:25px; display:grid; gap:12px;    }
.lista div      { padding:13px 15px; border-radius:9px; background:#183e49; color:#d8e6e8; font-size:14px;    }
.avaliacoes     { background:var(--fundo-card);    }
.grid-avaliacoes { display:grid; grid-template-columns:repeat(3,1fr); gap:20px;    }
.avaliacao      { padding:30px; border-radius:18px; background:var(--fundo);    }
.estrelas       { margin-bottom:15px; color:#f3ad25;    }
.avaliacao p    { margin-bottom:20px; color:var(--texto-secundario); line-height:1.7;    }
.avaliacao strong { color:var(--texto-escuro); font-size:14px;    }
.cta            { margin:0 7% 75px; padding:65px 30px; border-radius:25px; text-align:center; background:var(--cta-fundo); color:var(--cta-texto);    }
.cta h2         { margin-bottom:12px; font-size:40px;    }
.cta p          { margin-bottom:25px; color:var(--cta-texto);    }
.cta .btn       { background:var(--botao-escuro-fundo); color:var(--botao-escuro-texto);    }
footer          { padding:42px 7%; background:var(--footer-bkg); color:var(--footer-texto); text-align:center; font-size:13px;    }
.whatsapp       { position:fixed; right:25px; bottom:25px; width:58px; height:58px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#25d366; color:#fff; font-size:25px; box-shadow:0 8px 25px rgba(0,0,0,.2); z-index:100;    }

@media(max-width:900px) {
    nav            { display:none;    }
    .hero .content { grid-template-columns:1fr;    }
    .hero h1       { font-size:44px;    }
    .grid-servicos { grid-template-columns:1fr 1fr;    }
    .tecnologia .content { grid-template-columns:1fr;    }
    .grid-avaliacoes { grid-template-columns:1fr;    }
    .card-flutuante { left:15px;    }
}

@media(max-width:550px) {
    .hero h1       { font-size:36px;    }
    .hero-acoes    { flex-direction:column; align-items:flex-start;    }
    .hero-img      { height:360px;    }
    .grid-servicos { grid-template-columns:1fr;    }
    .tecnologia-texto h2 { font-size:34px;    }
    .cta           { margin:0 20px 50px;    }
}
.header-drop          { position:relative; flex-shrink:0; }
.header-drop-btn      { width:42px; height:42px; display:grid; place-items:center; border:0; border-radius:50%; color:var(--header-menu); background:transparent; font-size:19px; cursor:pointer; transition:.25s; }
.header-drop-btn:hover { filter:brightness(1.35); }
.header-drop-menu     { background:var(--header-bkg); position:absolute; top:50px; right:0; z-index:50; width:150px; padding:7px; display:none; box-shadow:0 12px 30px rgba(0,0,0,.35); }
.header-drop-menu.aberto { display:block; }
.header-drop-item     { width:100%; padding:10px 12px; display:block; border:0; color:var(--header-menu); background:transparent; text-align:left; cursor:pointer; }
.header-seta         { border-left:6px solid var(--header-menu); display:inline-block; width:0; height:0; margin-right:9px; vertical-align:middle; border-top:4px solid transparent; border-bottom:4px solid transparent; opacity:0; transition:.15s; }
.header-drop-item:hover .header-seta,
.header-drop-item.atual .header-seta { opacity:1; }