:root{
  --brand:#1b4a4f; --brand-2:#123c40; --beige:#a8936c; --ink:#0b2428; --white:#fff;
  --radius:16px; --shadow:0 12px 34px rgba(0,0,0,.18); --max:1200px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--brand);color:var(--white);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;height:auto;display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 16px}
.center{text-align:center}.mt12{margin-top:12px}.mt20{margin-top:20px}.mb12{margin-bottom:12px}
.block{display:block;width:100%;text-align:center}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;font-weight:700;background:var(--beige);color:var(--ink);box-shadow:var(--shadow);transition:transform .2s, box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(0,0,0,.25)}
.btn.secondary{background:transparent;border:1px solid var(--beige);color:var(--beige)}
.btn.secondary:hover{background:rgba(233,216,195,.1)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* nav */
.nav{position:sticky;top:0;z-index:70;background:rgba(27,74,79,.85);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav .row{display:flex;justify-content:space-between;align-items:center;height:60px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.2px}
.brand-logo{height:32px;width:auto}
.links{display:none}
.links a{padding:6px 10px;border-radius:8px}
.links a.active{background:rgba(255,255,255,.08)}
.wa-top{display:none}

/* hamburger */
.hamburger{display:none;flex-direction:column;gap:4px;background:transparent;border:none;cursor:pointer}
.hamburger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px}

/* hero */
.hero{position:relative;min-height:92vh;display:grid;place-items:center;overflow:hidden}
.hero.hero-small{min-height:56vh}
.bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82;filter:contrast(108%) saturate(90%)}
.bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 420px at 50% 78%, rgba(0,0,0,.22), transparent 70%),
  linear-gradient(180deg, rgba(0,0,0,.18), rgba(27,74,79,.58))}
.hero-content{position:relative;z-index:1;width:100%}
.hero-card{margin-inline:auto;max-width:920px;text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);backdrop-filter:blur(10px);transition:opacity .25s, transform .25s}
.hero-logo-out{max-width:360px;margin:0 auto 16px auto;opacity:.95;display:block}
.hero h1{font-size:clamp(32px,5.6vw,60px);line-height:1.15;font-weight:800}
.hero p{opacity:.97;margin:10px 0 20px;font-size:clamp(18px,2vw,22px)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hint{opacity:.85;margin-top:8px}

/* sections */
.title{font-size:clamp(24px,5.5vw,34px);text-align:center;font-weight:800}
.sub{color:var(--beige);text-align:center;margin:6px 0 24px;opacity:.95}
.grid{display:grid;gap:14px}.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}
.card{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:18px}
.card h3{color:var(--beige);margin-bottom:6px}
.list{margin:0;padding-left:18px}.list li{margin:6px 0}

/* partners */
.partners .fade{mask-image:linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%)}
.partners .track{display:flex;gap:34px;align-items:center;animation:marquee 26s linear infinite}
.partners img{height:46px;width:auto;filter:grayscale(100%) opacity(.9);transition:filter .2s}
.partners img:hover{filter:none}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* cases */
.cases .case{position:relative;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow)}
.cases .overlay{position:absolute;inset:auto 0 0 0;background:linear-gradient(180deg, transparent, rgba(0,0,0,.65));padding:16px}
.cases .badge{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);padding:4px 8px;border-radius:999px;margin-bottom:8px}

/* contato */
.contact{background:var(--brand-2)}
form{display:grid;gap:10px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.12);padding:18px;border-radius:var(--radius)}
input,textarea{width:100%;padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff}
input::placeholder,textarea::placeholder{color:#d7e6e6}

/* footer */
footer{background:#0b2428;padding:34px 0;color:#d9e7e7;border-top:1px solid rgba(255,255,255,.08)}
footer .cols{display:grid;grid-template-columns:1fr;gap:12px}
.footnote{border-top:1px solid rgba(255,255,255,.08);margin-top:14px;padding-top:14px;opacity:.8;text-align:center}

/* floating elements */
.wa-float{position:fixed;right:16px;bottom:16px;background:#22c55e;color:#063;font-weight:800;padding:12px 16px;border-radius:999px;box-shadow:var(--shadow);z-index:80}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#16a34a;color:#fff;padding:10px 14px;border-radius:999px;display:none;z-index:90}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .45s, transform .45s}
.reveal.in{opacity:1;transform:none}

/* DESKTOP */
@media (min-width:900px){
  .links{display:flex;gap:18px;list-style:none;margin:0;padding:0;font-weight:600}
  .wa-top{display:inline-flex}
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  footer .cols{grid-template-columns:2fr 1fr 1fr}
  .hero-logo-out{max-width:380px}
}

/* MOBILE / TABLET */
@media (max-width:900px){
  .cta-row{flex-direction:column;align-items:center}
  .grid{gap:20px}
  .hero-card{margin:0 12px}
  .hero-logo-out{max-width:280px}

  .hamburger{display:flex}
  /* drawer */
  .links{
    position:fixed; inset:0 0 0 auto; width:min(80%, 320px);
    background:#123c40; display:flex; flex-direction:column; gap:10px;
    padding:80px 16px 16px; list-style:none; margin:0;
    transform:translateX(100%); transition:transform .25s ease; z-index:75;
  }
  .nav.open .links{transform:translateX(0)}
  .links a{padding:12px 10px;border-radius:10px}
}

/* tiny phones */
@media (max-width:520px){
  .hero-logo-out{max-width:220px}
  .brand-logo{height:28px}
}
