/* Trevo Design - Cores (incluindo alpha do esquema fornecido)
  azul: #3a4effff -> #3a4eff
  vermelho: #fb5853ff -> #fb5853
  teal: #00bcb8ff -> #00bcb8
*/
:root{
  --blue:#3a4eff; /* títulos e destaques */
  --red:#fb5853; /* CTAs */
  --teal:#00bcb8; /* fundo header */
  --bg:#0f1220; /* fundo geral escuro para contraste */
  --text:#e9ecf1;
  --muted:#aab3c0;
  --card:#151a2c;
  --white:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial; color:var(--text); background:radial-gradient(1200px 600px at 10% -10%, rgba(0,188,184,.25), transparent 60%),
  linear-gradient(180deg, #0b0f1a 0%, #0e1424 60%, #0b0f1a 100%);
}
img{max-width:100%; display:block}
.container{width:min(1200px, 92%); margin-inline:auto}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:linear-gradient(135deg, var(--teal) 0%, #14d1cc 100%); color:#002a28; box-shadow:var(--shadow)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 0}
.logo img{height:36px}
.main-nav ul{list-style:none; display:flex; gap:28px; padding:0; margin:0}
.main-nav a{color:#022e2c; text-decoration:none; font-weight:600; position:relative}
.main-nav a:after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--blue); transition:width .25s}
.main-nav a:hover:after{width:100%}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:10px; border:1px solid transparent; text-decoration:none; cursor:pointer; transition:.25s; font-weight:700}
.btn-cta{background:var(--red); color:#fff; box-shadow:0 8px 20px rgba(251,88,83,.35)}
.btn-cta:hover{transform:translateY(-1px); box-shadow:0 12px 28px rgba(251,88,83,.5)}
.btn-outline{border-color:rgba(255,255,255,.4); color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.08)}
.btn-link{color:var(--blue); font-weight:700}
.nav-toggle{display:none; background:transparent; border:0; padding:8px; cursor:pointer}
.nav-toggle span{display:block; width:26px; height:2px; background:#022e2c; margin:5px 0; transition:.25s}

/* Hero */
.hero{position:relative; min-height:82vh; display:grid; place-items:center; text-align:center; overflow:hidden}
.parallax-bg{position:absolute; inset:-10%; background:radial-gradient(600px 300px at 70% 10%, rgba(58,78,255,.25), transparent 60%), radial-gradient(600px 300px at 30% 80%, rgba(0,188,184,.25), transparent 60%); transform:translateZ(0); will-change:transform}
.hero-content{position:relative; z-index:1; padding:80px 0}
.hero-title{font-size:clamp(32px, 5vw, 60px); line-height:1.05; margin:0 0 12px; opacity:0; transform:translateY(20px); animation:slideIn .8s .15s forwards ease-out}
.hero-subtitle{font-size:clamp(16px, 2.2vw, 22px); color:var(--muted); margin-bottom:24px; opacity:0; transform:translateY(16px); animation:slideIn .8s .3s forwards ease-out}
.hero-actions{display:flex; gap:12px; justify-content:center; opacity:0; transform:translateY(12px); animation:slideIn .8s .45s forwards ease-out}
.btn-large{padding:14px 22px; font-size:18px}
@keyframes slideIn{to{opacity:1; transform:none}}

/* Sections */
.section{padding:72px 0}
.section-title{font-size:32px; margin:0 0 24px; text-align:center}

/* Services */
.services-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.card{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; box-shadow:var(--shadow); transition:transform .25s, box-shadow .25s, border-color .25s}
.card:hover{transform:translateY(-4px); border-color:rgba(0,188,184,.35); box-shadow:0 16px 40px rgba(0,188,184,.12)}
.service-card .lottie{height:110px; margin-bottom:12px}

/* Portfolio */
.portfolio-filters{display:flex; gap:10px; justify-content:center; margin-bottom:16px}
.filter-btn{background:#1a2038; border:1px solid rgba(255,255,255,.08); color:var(--text); padding:8px 12px; border-radius:10px; cursor:pointer; transition:.25s}
.filter-btn.active, .filter-btn:hover{background:var(--blue); border-color:transparent}
.portfolio-grid{columns:1; column-gap:14px}
@media (min-width:640px){.portfolio-grid{columns:2}}
@media (min-width:960px){.portfolio-grid{columns:3}}
.portfolio-item{break-inside:avoid; margin:0 0 14px; position:relative; overflow:hidden; border-radius:14px; border:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow); cursor:pointer}
.portfolio-item img{transition:transform .4s ease}
.portfolio-item:hover img{transform:scale(1.05)}
.portfolio-item figcaption{position:absolute; left:0; right:0; bottom:0; padding:10px 12px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.55)); font-weight:600}

/* Lightbox */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; flex-direction:column; gap:8px; padding:20px}
.lightbox.active{display:flex}
.lightbox-img{max-width:min(1100px, 92vw); max-height:80vh; border-radius:10px}
.lightbox-close{position:absolute; top:18px; right:18px; background:rgba(255,255,255,.1); color:#fff; border:0; border-radius:50%; width:38px; height:38px; display:grid; place-items:center; cursor:pointer}
.lightbox-caption{color:#cfd6e4}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:26px}
.contact-form .form-group{margin-bottom:14px}
label{display:block; margin-bottom:6px; color:#cad3e0}
input, textarea{width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:#121832; color:var(--text); outline:none}
input:focus, textarea:focus{border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,188,184,.15)}
.form-group.checkbox{display:flex; align-items:center; gap:10px}
.form-group .error{color:#ff9f9b; font-size:12px}
.form-actions{display:flex; align-items:center; gap:12px}
.form-status{min-height:24px; color:#cfeedd}
.map-wrapper{height:260px; overflow:hidden; border-radius:12px; border:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow)}
.map-wrapper iframe{width:100%; height:100%; border:0}
.info-list{list-style:none; padding:0; margin:16px 0; display:grid; gap:8px}
.info-list i{color:var(--teal); margin-right:6px}
.social-links{display:flex; gap:12px}
.social{width:40px; height:40px; display:grid; place-items:center; background:#1a2038; border-radius:50%; color:#fff; transition:transform .2s, background .2s}
.social:hover{transform:translateY(-2px); background:var(--blue)}

/* Footer */
.site-footer{background:#0b0f1a; border-top:1px solid rgba(255,255,255,.06); margin-top:36px}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px; padding:28px 0}
.footer-brand .logo-mono{height:28px; margin-bottom:10px; filter:grayscale(1) brightness(1.4)}
.footer-nav ul, .footer-contact ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06); padding:12px 0; display:flex; justify-content:center; color:#95a0b5}
.footer-bottom .policy{color:#b8c3d8; text-decoration:underline; text-underline-offset:3px}
.footer-bottom .policy:hover{color:#fff}

/* Nav responsive */
@media (max-width:860px){
  .main-nav{position:fixed; inset:60px 0 auto 0; background:linear-gradient(135deg, var(--teal), #14d1cc); transform:translateY(-120%); transition:.3s; padding:14px 4%; box-shadow:var(--shadow)}
  .main-nav ul{flex-direction:column; gap:14px}
  .nav-open .main-nav{transform:none}
  .nav-toggle{display:block}
  .btn-cta{display:none}
  .contact-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr;}
}

/* Cookie banner */
.cookie-banner{position:fixed; inset:auto 0 0 0; background:rgba(11,15,26,.98); border-top:1px solid rgba(255,255,255,.08); box-shadow:0 -10px 30px rgba(0,0,0,.25); padding:12px 0; z-index:60}
.cookie-inner{display:flex; gap:14px; align-items:center; justify-content:space-between}
.cookie-inner p{margin:0; color:#c9d2e3}
.cookie-actions{display:flex; gap:10px}
.cookie-banner a{color:#b8c3d8; text-decoration:underline; text-underline-offset:3px}

/* Microinterações */
.card:hover h3{color:var(--teal)}
.card:hover .btn-link{color:var(--red)}
.filter-btn:active{transform:translateY(1px)}