:root{
  /* LIGHT (padrão) */
  --bg:#f7faff;          /* fundo geral */
  --surface:#ffffff;     /* cartões/seções */
  --ink:#0b1320;         /* texto principal */
  --muted:#51637a;       /* texto secundário */
  --line:#e6edf6;        /* linhas e bordas claras */
  --glass:rgba(10,22,41,.04); /* efeito vidro sutil */
  /* Tech accents */
  --brand:#22d3ee;       /* ciano (tech) */
  --brand-2:#6a5cff;     /* violeta (AI) */
  --ring: rgba(34,211,238,.28);
}
:root[data-theme="dark"]{
  --bg:#0c1117; --surface:#0f1621; --ink:#e6edf6; --muted:#9bb3c9;
  --line:#1a2634; --glass:rgba(255,255,255,.06);
  --brand:#73fafd; --brand-2:#7c4dff; --ring: rgba(124,77,255,.24);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--ink); text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:1120px; margin:0 auto; padding:0 20px}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:12px;top:12px;background:var(--surface);padding:.4rem .6rem;border-radius:8px;outline:2px solid var(--ring)}

/* NAV */
.nav{
  position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.75rem 20px; background:color-mix(in hsl, var(--bg) 86%, transparent);
  border-bottom:1px solid var(--line); backdrop-filter:saturate(160%) blur(10px);
}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800}
.brand svg{width:32px;height:32px}
.logo-bg{fill:var(--surface);stroke:var(--line);stroke-width:2}
.logo-swoosh{fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 6px color-mix(in srgb, var(--brand) 40%, transparent))}
.menu{display:flex;align-items:center;gap:1rem}
.menu a{color:var(--muted)}
.menu a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.55rem .9rem;border-radius:12px;border:1px solid var(--line);transition:.2s;gap:.4rem}
.btn--primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;border:0;font-weight:700}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--full{display:block;text-align:center}
.btn--lg{padding:.85rem 1.2rem}
.btn:focus{outline:2px solid var(--ring);outline-offset:2px}
.hamburger{display:none;background:none;border:0;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;border-radius:4px}

/* BG canvas wrapper */
.bg{position:fixed; inset:0; z-index:-1; opacity:.8}
#bgmesh{width:100%; height:100%}

/* HERO */
.hero{padding:88px 0 28px}
.hero__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
h1{font-size:clamp(28px,4vw,48px);line-height:1.15;margin:.2rem 0 .6rem}
.lead{color:var(--muted);max-width:60ch}
.grad{background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.cta{display:flex;gap:.8rem;margin-top:1rem;flex-wrap:wrap}

/* chips tech */
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 0;padding:0}
.chips li{list-style:none;padding:.35rem .6rem;border-radius:999px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface),#fafcff); color:var(--muted); font-size:.85rem}

/* hero image */
.hero__art{display:block; margin:0; padding:0}
.hero__art img{width:100%; height:auto; filter:drop-shadow(0 12px 24px rgba(0,0,0,.08))}

/* SECTIONS */
.section{padding:48px 0}
.section--alt{background:color-mix(in hsl, var(--surface) 80%, transparent)}
.section__head{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}
.section__head p{color:var(--muted)}

/* CARDS & GRID */
.grid{display:grid;gap:1.2rem}
.cards .card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1rem;transition:transform .2s, box-shadow .2s}
.cards .card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.10)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.mini{padding-left:1rem;margin:.4rem 0}
.mini li{list-style:"• ";color:var(--muted);margin:.15rem 0}
.card__head{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.icon{width:28px;height:28px}

/* TILES */
.tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem}

/* CASES */
.card--case .tag{display:inline-block;background:color-mix(in srgb, var(--brand) 16%, transparent); color:var(--ink); border:1px solid var(--line); padding:.2rem .45rem;border-radius:8px;font-size:.75rem;margin-bottom:.3rem}

/* PRICING */
.price{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.1rem}
.price.featured{outline:2px solid color-mix(in srgb, var(--brand) 35%, transparent)}
.money{font-weight:800;font-size:1.6rem;margin:.2rem 0}

/* FORM */
.contact{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.1rem}
label span{display:block;margin-bottom:.35rem}
input,textarea,select{width:100%;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:.7rem .8rem}
input:focus,textarea:focus,select:focus{outline:2px solid var(--ring);border-color:transparent}
.tiny{color:var(--muted)}

/* FOOTER */
.footer{padding:28px 0;border-top:1px solid var(--line)}
.footer__grid{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand--footer{display:flex;align-items:center;gap:.6rem;font-weight:800}
.link{color:var(--ink)}
.socials a{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;margin-left:.4rem;color:var(--muted)}

/* RESPONSIVO */
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr}
  .grid.two,.grid.three{grid-template-columns:1fr}
  .menu{display:none;position:absolute;right:16px;top:64px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px;flex-direction:column;width:min(92vw,360px)}
  .menu.open{display:flex}
  .hamburger{display:block}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* ========= FAB WHATSAPP ========= */

/* Botão fixo no canto inferior direito (blindado) */
.wa-fab{
  position: fixed;
  right: 20px !important;   /* força direita */
  left: auto !important;    /* neutraliza estilos herdados */
  bottom: max(20px, env(safe-area-inset-bottom)); /* respeita notch no iOS */
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 9999;
  text-decoration: none;
}

/* Ícone WhatsApp externo (assets/wp.svg) */
.wa-icon{
  width: 64px;
  height: 64px;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.2));
  transition: transform .15s ease, filter .2s ease;
}

/* FAB fixo à DIREITA, sempre */
.wa-fab{
  position: fixed !important;
  right: 20px !important;
  left: auto !important;
  bottom: max(20px, env(safe-area-inset-bottom)) !important;
  z-index: 2147483647 !important; /* no topo de tudo */
  display: grid !important;
  place-items: center !important;
  width: 64px !important;
  height: 64px !important;
  text-decoration: none !important;
}
.wa-icon{
  width: 64px !important;
  height: 64px !important;
  display: block !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.2));
}
@media (max-width:480px){
  .wa-fab{ right: 16px !important; }
  .wa-icon{ width: 56px !important; height: 56px !important; }
}


/* Quando houver banner/flutuantes, você pode subir o botão assim:
   Adicione a classe .has-banner no <body> quando o banner estiver visível */
.has-banner .wa-fab{ bottom: calc(max(20px, env(safe-area-inset-bottom)) + 72px); }
.has-banner .wa-tooltip{ bottom: calc(max(20px, env(safe-area-inset-bottom)) + 90px); }