:root{
  --bg:#09361f;
  --bg2:#0f4c2b;
  --panel:#0e2b1d;
  --surface:#123c26;
  --line:#0a1f14;
  --text:#ecfff6;
  --muted:#bfe6d4;
  --primary:#20b463;
  --primary-600:#169a54;
  --blue:#3fb3ff;
  --green:#2ee08d;
  --danger:#ff6b6b;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,
/* === Smooth green gradient background (no banding) === */

body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
  color:var(--text);
  background: var(--bg); /* flat, no gradients */
}

/* Optional ultra-subtle grain to avoid visible bands on some monitors */


body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial; color:var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, var(--bg2), transparent),
              radial-gradient(900px 600px at 120% 10%, #0a371f, transparent),
              var(--bg);
}
a{color:#c7fbe4; text-decoration:none}
a:hover{text-decoration:underline}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:12px 16px; border-radius:12px; border:1px solid transparent;
  font-weight:700; cursor:pointer;
}
.btn-primary{background:var(--primary); color:#052112; box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--primary-600)}
.btn-ghost{background:transparent; color:#c7fbe4; border-color:rgba(255,255,255,.15)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn.sm{padding:8px 12px; border-radius:10px}

/* NAV */
.nav{
  max-width:1200px; margin:0 auto; padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px}
.brand-logo{width:36px; height:36px; border-radius:10px; background:#fff; object-fit:contain; box-shadow:var(--shadow)}
.brand-logo.lg{width:46px; height:46px}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-text strong{letter-spacing:.2px}
.brand-text span{font-size:12px; color:var(--muted)}
.nav-links{display:flex; align-items:center; gap:14px}

/* HERO */
.hero-landing{
  max-width:1200px; margin:10px auto 36px; padding:8px 16px;
  display:grid; grid-template-columns: 1.05fr .95fr; gap:26px;
}
@media (max-width: 980px){ .hero-landing{grid-template-columns: 1fr} }
.hero-content .badge{
  display:inline-flex; gap:.5rem; align-items:center; padding:8px 12px;
  border-radius:100px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
}
.hero-content h1{margin:.6rem 0 .4rem; font-size:clamp(28px,3.3vw,42px)}
.sub{color:var(--muted); margin:.2rem 0 1rem}
.cta{display:flex; gap:12px}

/* DEMO GRID */
.demo-grid{display:grid; grid-template-columns: 1fr 1fr; gap:16px}
@media (max-width: 980px){ .demo-grid{grid-template-columns:1fr} }

.demo-panel{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px; padding:14px; box-shadow:var(--shadow)
}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.panel-logo{width:28px; height:28px; border-radius:8px; background:#fff}
.kpi-grid{display:grid; grid-template-columns: repeat(2,1fr); gap:10px}
.kpi-card{
  background:var(--surface); border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:12px; transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
  transform:translateY(6px); opacity:.0;
}
.kpi-card:hover{transform:translateY(-3px); box-shadow:0 10px 18px rgba(0,0,0,.25)}
.kpi-label{font-size:12px; color:var(--muted)}
.kpi-value{display:block; font-size:26px; font-weight:800; letter-spacing:.5px}
.kpi-card.critical .kpi-value{color:var(--danger)}
.demo-note{margin:6px 2px 0; color:var(--muted); font-size:12px}

/* Gráfico */
.demo-graphic{
  position:relative; min-height:260px; padding:16px; border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:var(--shadow); overflow:hidden;
}
.bars{position:absolute; inset:16px 16px 46px 16px; display:flex; align-items:flex-end; gap:14px}
.bar{
  width:18px; height:var(--h); background:linear-gradient(180deg, #28e58f, #1a8a56);
  border-radius:8px 8px 4px 4px; transform-origin:bottom; transform:scaleY(0);
  box-shadow:0 8px 14px rgba(0,0,0,.2);
  transition:transform 900ms cubic-bezier(.18,.7,.14,1);
}
.demo-graphic.animate .bar{transform:scaleY(1)}
.line{position:absolute; left:10px; right:10px; bottom:46px; height:170px}
.line path{
  fill:none; stroke:#49c3ff; stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:400; stroke-dashoffset:400;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));
  transition:stroke-dashoffset 1200ms ease 150ms;
}
.demo-graphic.animate .line path{stroke-dashoffset:0}
.chart-legend{
  position:absolute; right:12px; bottom:10px; display:flex; gap:10px; align-items:center; color:var(--muted)
}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%}
.dot.green{background:var(--green)}
.dot.blue{background:var(--blue)}

/* Sections */
.section{max-width:1200px; margin:22px auto; padding:0 16px}
.section h2{margin:0 0 8px}
.features{display:grid; grid-template-columns: repeat(3,1fr); gap:16px}
@media (max-width: 980px){ .features{grid-template-columns:1fr} }
.feature{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px; box-shadow:var(--shadow)
}
.feature .icon{font-size:26px; margin-bottom:6px}
.grid-3{display:grid; grid-template-columns: repeat(3,1fr); gap:16px}
@media (max-width: 980px){ .grid-3{grid-template-columns:1fr} }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px; box-shadow:var(--shadow)
}

/* Footer */
.footer{margin-top:30px; padding:18px 16px 28px; border-top:1px solid rgba(255,255,255,.06)}
.footer-inner{max-width:1200px; margin:0 auto; display:grid; grid-template-columns: 1fr 1fr 1fr; gap:16px; align-items:center}
@media (max-width: 980px){ .footer-inner{grid-template-columns:1fr; gap:12px} }
.footer-brand{display:flex; gap:10px; align-items:center}
.muted{color:var(--muted)}
.email-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.copy-ok{margin-left:4px; color:#a8ffd7; font-weight:600}

/* Reveals + KPIs */
.reveal{opacity:0; transform:translateY(16px); transition: all 480ms cubic-bezier(.18,.7,.14,1)}
.reveal.show{opacity:1; transform:none}
.kpi-card.show{opacity:1; transform:translateY(0)}


/* === Enhancements (cards + gradient) === */

/* ===== Smooth reveal on scroll ===== */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.reveal.show{opacity:1; transform:none}

/* ===== Card hover animations ===== */
.card,
.kpi-card,
.demo-panel{
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease, border-color .28s ease;
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 14px 40px rgba(0,0,0,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.12);
}
.kpi-card:hover{ transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.32) }
.demo-panel:hover{ transform: translateY(-4px) }

/* ===== Subtle animated green background gradient ===== */
@keyframes bgShift {
  0% { background-position: 0% 0%, 0 0, 0 0; }
  100% { background-position: 100% 100%, 0 0, 0 0; }
}
body{
  /* layer 1: soft diagonal gradient between theme greens */
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--bg) 85%, var(--bg2) 15%) 0%,
                           color-mix(in oklab, var(--bg2) 80%, #0a371f 20%) 50%,
                           color-mix(in oklab, var(--bg) 75%, #041f12 25%) 100%),
    /* existing radial accents preserved */
    radial-gradient(1200px 600px at 20% -10%, var(--bg2), transparent),
    radial-gradient(900px 600px at 120% 10%, #0a371f, transparent),
    var(--bg) !important;
  background-attachment: fixed, fixed, fixed, fixed;
  background-size: 200% 200%, auto, auto, auto;
  animation: bgShift 22s ease-in-out infinite alternate;
}


/* === Blue radios (native, accessible) === */
input[type="radio"]{
  accent-color: var(--blue);
}
input[type="radio"]:focus{
  outline: 2px solid color-mix(in oklab, var(--blue) 55%, white 45%);
  outline-offset: 2px;
  border-radius: 50%;
}


/* === Flat theme extras (no gradients) === */
.section{
  position: relative;
}
.section .card,
.section .demo-panel,
.section .kpi-card{
  background-color: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  box-shadow: var(--shadow);
}

/* keep hover lift clean */
.card:hover{ background-color: rgba(255,255,255,.05) }
.kpi-card:hover{ background-color: rgba(255,255,255,.05) }
.demo-panel:hover{ background-color: rgba(255,255,255,.04) }

/* === Fundo com degradê contínuo aplicado no <html> (cobre a página toda) === */
html, body { min-height: 100%; }

html{
  /* degradê único e suave; cobre toda a página */
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--bg) 92%, var(--bg2) 8%) 0%,
      color-mix(in oklab, var(--bg) 80%, var(--bg2) 20%) 35%,
      color-mix(in oklab, var(--bg2) 78%, var(--bg) 22%) 70%,
      color-mix(in oklab, var(--bg2) 82%, #0a371f 18%) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* o <body> fica transparente para não “quebrar” o fundo do html */
body{ background: transparent !important; }

/* garanta que nada esteja pintando faixas por cima */
.section, .footer { background: transparent !important; }

/* separadores sutis (se quiser manter divisão sem “faixa”) */
.section + .section{
  border-top: 1px solid rgba(255,255,255,.05);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.06);
}