:root{
  --bg:#05090b; --surface:#0a0f12; --surface2:#0f1519;
  --text:#e7f7f4; --muted:#a6c8bf;
  --brand:#5de0b6; --brand2:#2cc6ff;
  --stroke:rgba(93,224,182,.25);
}

/* ===== Reset e base ===== */
*{ box-sizing:border-box; margin:0; padding:0 }
html, body{ width:100%; min-height:100%; overflow-x:hidden; }
html{ scroll-behavior:smooth }
body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial;
  background:var(--bg); color:var(--text); line-height:1.55;
}
img{ max-width:100%; height:auto; display:block }
a{ text-decoration:none; color:inherit }
h1,h2{ line-height:1.2 }
.section{ padding:56px 0 }

/* ===== Container ===== */
.container{
  width:100%;
  max-width:1080px;
  margin:0 auto;
  padding-inline:16px;
}
h2{ color:var(--brand); text-align:center; margin-bottom:14px }

/* Botão ERP discreto no menu */
#nav-menu .btn {
  font-size: 0.95rem;
  padding: 6px 16px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
  transition: 0.3s;
  font-weight: 500;
  margin-left: 12px;
}

#nav-menu .btn:hover {
  background: rgba(0, 170, 255, 0.15);
  border-color: rgba(0, 170, 255, 0.4);
  color: #00aaff;
}


/* ===== Loader ===== */
#loader{
  position:fixed; inset:0; display:grid; place-items:center;
  background:#000; z-index:9999; font-weight:900; letter-spacing:.3px;
  text-shadow:0 0 16px rgba(93,224,182,.35)
}
#loader #typing{font-size:clamp(18px,3.4vw,28px);color:#eafff7;filter:drop-shadow(0 0 8px rgba(93,224,182,.35))}
#loader .cursor{color:var(--brand);animation:blink 1s infinite}
#loader.fadeout{opacity:0;transition:opacity .6s ease;pointer-events:none}
@keyframes blink{50%{opacity:0}}

/* ===== Header ===== */
.header{
  position:sticky; top:0; z-index:1000;
  background:rgba(0,0,0,.45); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--stroke);
}

/* layout do topo ajustado para o botão ficar à direita */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 16px;
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.logo{
  width:40px; height:40px; border-radius:10px; background:#000; border:1px solid #0d1416;
}

/* Botão hambúrguer */
#menu-toggle{
  display:none; 
  font-size:28px; 
  color:var(--brand);
  background:none; 
  border:none; 
  cursor:pointer; 
  z-index:1001;
  margin-left:auto; /* força o botão à direita */
}

/* Nav (desktop) */
#nav-menu{
  display:flex; 
  gap:18px; 
  align-items:center; 
  flex-wrap:wrap;
}
#nav-menu a{ color:var(--muted); font-weight:800 }
#nav-menu a:hover{ color:#fff }

/* ===== Botões ===== */
.btn{
  display:inline-block; text-align:center;
  padding:10px 16px; border-radius:10px;
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  color:#001010; font-weight:900
}
.btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--stroke) }
.btn.small{ padding:8px 12px }

/* ===== Hero ===== */
.hero{ position:relative; min-height:68vh; overflow:hidden; border-bottom:1px solid var(--stroke) }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.82) 70%) }
.hero-copy{ position:relative; z-index:1; display:grid; place-content:center; min-height:68vh; text-align:center }
.hero-copy h1{ font-size:clamp(26px,6vw,52px); color:var(--brand) }
.hero-copy p{ margin-top:8px; color:#d8f7ee }
.cta{ margin-top:14px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap }

/* ===== Cards ===== */
.cards{
  display:grid; gap:18px; width:100%; justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:12px;
}
.card{
  background:linear-gradient(180deg,var(--surface),var(--surface2));
  border:1px solid var(--stroke); border-radius:14px; padding:18px
}
.card h3{ color:var(--brand); margin-bottom:6px }
.card p{ color:var(--muted) }

/* ===== Métricas ===== */
.metrics-grid{
  display:grid; gap:18px; width:100%; justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-top:14px
}
.metric{
  display:flex; align-items:center; gap:14px; padding:16px;
  border-radius:12px; background:linear-gradient(180deg,var(--surface),var(--surface2));
  border:1px solid var(--stroke)
}
.metric .icon{ font-size:28px }
.metric .meta{ display:grid; gap:2px }
.metric .number{ font-size:clamp(22px,3.2vw,32px); color:var(--brand); font-weight:900; line-height:1 }
.metric h3{ font-size:1rem; color:#e8fbf6 }

/* ===== Destaques ===== */
.plans{
  display:grid; gap:18px; width:100%; justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:12px
}
.plan{
  background:linear-gradient(180deg,var(--surface),var(--surface2));
  border:1px solid var(--stroke); border-radius:14px; padding:18px
}
.plan ul{ margin:10px 0 12px 18px }
.plan.destaque{ border-color:rgba(93,224,182,.6) }
.badge{
  display:inline-block; margin-bottom:8px; font-size:.8rem; font-weight:900;
  padding:4px 8px; border-radius:999px;
  background:linear-gradient(180deg,var(--brand),var(--brand2)); color:#001010
}
.plans .plan .btn{ display:inline-block; margin-top:10px; padding:12px 16px }

/* ===== Contato ===== */
.form{
  background:linear-gradient(180deg,var(--surface),var(--surface2));
  border:1px solid var(--stroke); border-radius:14px; padding:18px
}
.form .grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-bottom:12px
}
.form label{ color:var(--muted); font-weight:700; display:grid; gap:6px }
input,textarea{
  background:#071114; color:var(--text);
  border:1px solid var(--stroke); border-radius:10px; padding:10px 12px; outline:none;
  width:100%;
}
input:focus,textarea:focus{ border-color:rgba(120,255,210,.6); box-shadow:0 0 0 3px rgba(120,255,210,.12) }
.actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:6px }
.form-status{ margin-top:8px; min-height:1.2em }

/* ===== Footer ===== */
.footer{ border-top:1px solid var(--stroke); padding:26px 0 }
.footer .container{ text-align:center }

/* ===== WhatsApp FAB ===== */
#whatsapp{
  position:fixed; right:16px; bottom:16px; width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(120% 120% at 30% 20%,var(--brand),var(--brand2));
  box-shadow:0 10px 20px rgba(0,0,0,.4), 0 8px 16px rgba(93,224,182,.35);
  border:1px solid rgba(255,255,255,.06);
  transition:transform .2s ease, box-shadow .2s ease;
  z-index:999
}
#whatsapp:hover{ transform:scale(1.08) }
.whatsapp-icon{ width:34px; height:34px; object-fit:contain }

/* ===== Efeitos ===== */
.fade-up{ opacity:0; transform:translateY(20px); transition:.6s ease }
.fade-up.show{ opacity:1; transform:none }

/* ======== MOBILE: SIDE DRAWER (direita) ======== */
@media (max-width: 820px){
  #menu-toggle{ display:block; margin-left:auto; } /* botão no canto direito */

  #nav-menu{
    position:fixed; top:0; right:0;
    width:min(86vw, 380px); height:100dvh;
    background:linear-gradient(180deg,#05090b,#0a0f12);
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:24px;
    border-left:1px solid var(--stroke);
    transform:translateX(100%);
    transition:transform .35s ease;
    z-index:1000;
  }
  #nav-menu.active{ transform:translateX(0) }

  body.menu-open{ overflow:hidden }
  body.menu-open::before{
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:999;
  }

  #nav-menu a{ font-size:1.1rem; color:var(--text) }
  .hero, .hero-copy{ min-height:60vh }
}

/* ===== Tablets ===== */
@media (max-width: 1024px){
  .container{ padding-inline:14px }
  .metric{ padding:14px }
}

/* ===== Desktop largo ===== */
@media (min-width: 1100px){
  .cards{ grid-template-columns:repeat(3,1fr) }
  .metrics-grid{ grid-template-columns:repeat(4,1fr) }
  .plans{ grid-template-columns:repeat(3,1fr) }
}