/* =====================================================================
   MagoCharge — Site público (venda de assinaturas)
   Direção: "sala de controle de energia" · numerais mono como telemetria
   Paleta:  emerald-900 #08221F · emerald-700 #12534A · green #16A34A
            bright #2BD46E · lime-current #C7F25A · paper #F5F8F6
   Tipos:   Space Grotesk (display) · Inter (texto) · Space Mono (dados)
   ===================================================================== */

:root{
  --e900:#08221F; --e800:#0C322D; --e700:#12534A; --e600:#15705F;
  --green:#16A34A; --bright:#2BD46E; --lime:#C7F25A;
  --ink:#0E1A18; --muted:#5C6B67; --line:#E2EAE6;
  --paper:#F5F8F6; --card:#FFFFFF; --cardline:#E8EFEB;
  --maxw:1160px; --r:18px;
  --shadow:0 18px 50px -24px rgba(8,34,31,.45);
  --shadow-sm:0 8px 26px -18px rgba(8,34,31,.4);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Space Grotesk","Inter",sans-serif; line-height:1.08; letter-spacing:-.02em; margin:0; font-weight:600}
a{color:inherit; text-decoration:none}
p{margin:0 0 1rem}
.mono{font-family:"Space Mono","JetBrains Mono",monospace; font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{font:600 13px/1 "Space Mono",monospace; letter-spacing:.18em; text-transform:uppercase; color:var(--green)}

/* ---- botões ---- */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:15px;
  padding:.82rem 1.3rem; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink); color:#fff}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(14,26,24,.7)}
.btn-accent{background:linear-gradient(180deg,var(--bright),var(--green)); color:#04241a; box-shadow:0 10px 24px -12px rgba(22,163,74,.7)}
.btn-accent:hover{transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(22,163,74,.75)}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--e600); color:var(--e700)}
.btn-light{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.22); backdrop-filter:blur(6px)}
.btn-light:hover{background:rgba(255,255,255,.18)}

/* ---- navbar ---- */
.nav{position:sticky; top:0; z-index:50; transition:.3s}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  max-width:var(--maxw); margin:10px auto; padding:.55rem .7rem .55rem 1.1rem;
  background:rgba(255,255,255,.72); backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--cardline); border-radius:999px; box-shadow:var(--shadow-sm)}
.brand{display:flex; align-items:center; gap:.55rem; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:19px; letter-spacing:-.02em}
.brand .bolt{display:grid; place-items:center; width:30px; height:30px; border-radius:9px;
  background:linear-gradient(150deg,var(--e600),var(--e800)); color:var(--lime); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.nav-links{display:flex; gap:.3rem; align-items:center}
.nav-links a{padding:.5rem .8rem; border-radius:999px; font-size:15px; color:var(--muted); font-weight:500}
.nav-links a:hover{color:var(--ink); background:rgba(18,83,74,.06)}
.nav-cta{display:flex; gap:.5rem; align-items:center}
.nav-burger{display:none; background:none; border:0; padding:.4rem; cursor:pointer}

/* ---- hero ---- */
.hero{position:relative; overflow:hidden; background:
   radial-gradient(120% 80% at 88% -10%, #16463E 0%, transparent 55%),
   linear-gradient(165deg,var(--e800) 0%, var(--e900) 70%);
  color:#EAF3EF; border-radius:0 0 34px 34px}
.hero::before{content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px; mask:linear-gradient(180deg,#000 0%, transparent 72%); opacity:.6}
.hero-grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  padding:86px 0 96px}
.hero-kicker{display:inline-flex; align-items:center; gap:.55rem; font:600 12.5px/1 "Space Mono",monospace;
  letter-spacing:.16em; text-transform:uppercase; color:var(--lime);
  border:1px solid rgba(199,242,94,.3); padding:.5rem .8rem; border-radius:999px; margin-bottom:1.4rem}
.hero h1{font-size:clamp(2.5rem,5.2vw,4rem); color:#fff; font-weight:600}
.hero h1 .hl{background:linear-gradient(120deg,var(--bright),var(--lime)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.sub{font-size:1.18rem; color:#B9D2CA; max-width:34ch; margin:1.3rem 0 2rem}
.hero-actions{display:flex; gap:.7rem; flex-wrap:wrap}
.hero-trust{display:flex; gap:1.3rem; flex-wrap:wrap; margin-top:2.3rem; color:#9DBAB1; font-size:13.5px}
.hero-trust span{display:flex; align-items:center; gap:.45rem}
.hero-trust .dot{width:7px; height:7px; border-radius:50%; background:var(--bright)}

/* dashboard ao vivo (signature) */
.live{position:relative; background:linear-gradient(180deg,#0E3A34,#0B2C28);
  border:1px solid rgba(199,242,94,.16); border-radius:22px; padding:22px; box-shadow:0 40px 80px -40px #000}
.live-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.live-id{font:600 13px/1.3 "Space Mono",monospace; color:#9FE3C4}
.live-id small{display:block; color:#6E8E84; font-weight:400; margin-top:3px}
.pill{display:inline-flex; align-items:center; gap:.4rem; font:600 12px/1 "Space Mono",monospace;
  color:#04241a; background:var(--bright); padding:.4rem .65rem; border-radius:999px}
.livedot{width:8px; height:8px; border-radius:50%; background:#04241a; animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.live-main{display:flex; align-items:baseline; gap:.5rem}
.live-main .kw{font:700 56px/1 "Space Mono",monospace; color:#fff; letter-spacing:-.03em}
.live-main .u{color:var(--lime); font:600 18px "Space Mono",monospace}
.live-cap{color:#7FA197; font-size:13px; margin:.2rem 0 18px}
.spark{height:54px; width:100%; margin-bottom:18px}
.spark path.line{fill:none; stroke:var(--lime); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:420; stroke-dashoffset:420; animation:draw 2.6s ease forwards .3s}
.spark path.area{fill:url(#g1); opacity:.18}
@keyframes draw{to{stroke-dashoffset:0}}
.live-rows{display:grid; gap:10px}
.live-row{display:flex; align-items:center; justify-content:space-between; font-size:13.5px;
  padding:11px 13px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:12px}
.live-row .k{color:#9FB7AE; display:flex; align-items:center; gap:.5rem}
.live-row .v{font-family:"Space Mono",monospace; color:#fff}
.live-row .ok{color:var(--bright)}
.tick{width:18px; height:18px}

/* faixa de credibilidade */
.badges{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.badges-in{display:flex; align-items:center; justify-content:center; gap:2.4rem; flex-wrap:wrap; padding:24px 0}
.badge{display:flex; align-items:center; gap:.55rem; color:var(--e700); font-weight:600; font-size:14.5px}
.badge svg{width:20px; height:20px; color:var(--green)}

/* seções */
.section{padding:96px 0}
.section.tight{padding:72px 0}
.shead{max-width:62ch; margin-bottom:48px}
.shead h2{font-size:clamp(2rem,3.6vw,2.7rem); margin:.7rem 0 0}
.shead p{color:var(--muted); font-size:1.1rem; margin-top:.9rem}

/* módulos */
.mods{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.mod{background:var(--card); border:1px solid var(--cardline); border-radius:var(--r); padding:26px;
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s}
.mod:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:#CDE3D9}
.mod .ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(160deg,#EAF7F0,#D8EEE3); color:var(--e700)}
.mod .ic svg{width:23px; height:23px}
.mod h3{font-size:1.18rem; margin-bottom:.4rem}
.mod p{color:var(--muted); font-size:.97rem; margin:0}

/* diferenciais */
.diff{background:var(--e900); color:#E7F1EC; border-radius:30px}
.diff .section{padding:84px 0}
.diff .shead h2{color:#fff}
.diff .shead p{color:#9DBAB1}
.diff-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.dcard{display:flex; gap:16px; padding:22px; border:1px solid rgba(255,255,255,.1); border-radius:16px;
  background:rgba(255,255,255,.03)}
.dcard .ic{flex:none; width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:rgba(199,242,94,.12); color:var(--lime)}
.dcard .ic svg{width:21px;height:21px}
.dcard h3{color:#fff; font-size:1.12rem; margin-bottom:.3rem}
.dcard p{color:#A7C2B9; font-size:.95rem; margin:0}

/* como funciona */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:s}
.step{position:relative; padding:26px; background:var(--card); border:1px solid var(--cardline); border-radius:var(--r)}
.step .n{font:600 14px "Space Mono",monospace; color:var(--green); letter-spacing:.1em}
.step h3{font-size:1.08rem; margin:.7rem 0 .4rem}
.step p{color:var(--muted); font-size:.95rem; margin:0}
.step .ln{position:absolute; top:38px; right:-12px; width:24px; height:2px; background:var(--line)}
.step:last-child .ln{display:none}

/* preços */
.pricing{background:linear-gradient(180deg,#fff,var(--paper))}
.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch}
.plan{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--cardline);
  border-radius:20px; padding:26px 22px; transition:transform .18s, box-shadow .2s}
.plan:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.plan.feat{border:1.5px solid var(--green); box-shadow:0 30px 60px -30px rgba(22,163,74,.5); position:relative}
.plan.feat::after{content:"Mais escolhido"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:linear-gradient(180deg,var(--bright),var(--green)); color:#04241a;
  font:600 12px "Space Mono",monospace; padding:.35rem .8rem; border-radius:999px}
.plan h3{font-size:1.3rem}
.plan .who{color:var(--muted); font-size:.9rem; min-height:38px; margin:.3rem 0 1rem}
.plan .price{display:flex; align-items:baseline; gap:.3rem}
.plan .price .v{font:700 40px/1 "Space Mono",monospace; letter-spacing:-.03em}
.plan .price .per{color:var(--muted); font-size:.85rem}
.plan .meta{font-family:"Space Mono",monospace; font-size:12.5px; color:var(--e700); margin:.7rem 0 0;
  padding:.5rem .7rem; background:#EFF7F2; border-radius:8px; display:inline-block}
.plan ul{list-style:none; padding:0; margin:18px 0 22px; display:grid; gap:10px}
.plan li{display:flex; gap:.6rem; align-items:flex-start; font-size:.93rem; color:#33433E}
.plan li svg{flex:none; width:18px; height:18px; color:var(--green); margin-top:2px}
.plan .btn{margin-top:auto; justify-content:center; width:100%}
.pricing-note{text-align:center; color:var(--muted); font-size:.95rem; margin-top:26px}
.pricing-note b{color:var(--e700)}

/* faq */
.faq{max-width:780px; margin:0 auto}
.q{border-bottom:1px solid var(--line)}
.q button{width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:22px 0;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:"Space Grotesk",sans-serif; font-size:1.12rem; font-weight:600; color:var(--ink)}
.q button .pm{flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; transition:.25s; color:var(--green)}
.q.open button .pm{transform:rotate(45deg); background:var(--green); color:#fff; border-color:var(--green)}
.q .a{max-height:0; overflow:hidden; transition:max-height .3s ease; color:var(--muted)}
.q .a p{padding-bottom:22px; margin:0}

/* cta final */
.cta{position:relative; overflow:hidden; color:#EAF3EF; border-radius:30px;
  background:radial-gradient(120% 120% at 85% 0%, #16463E, transparent 55%), linear-gradient(160deg,var(--e700),var(--e900))}
.cta::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:24px 24px; opacity:.5}
.cta-in{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; padding:64px 56px}
.cta h2{font-size:clamp(2rem,3.4vw,2.6rem); color:#fff}
.cta p{color:#A7C2B9; margin:1rem 0 1.6rem; max-width:40ch}
.cta-actions{display:flex; gap:.7rem; flex-wrap:wrap}
.lead{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:24px}
.lead label{display:block; font-size:13px; color:#9FB7AE; margin:0 0 6px; font-weight:600}
.lead input,.lead textarea{width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:11px; padding:.8rem .9rem; color:#fff; font-family:inherit; font-size:15px; margin-bottom:14px}
.lead input::placeholder,.lead textarea::placeholder{color:#7FA197}
.lead input:focus,.lead textarea:focus{outline:none; border-color:var(--lime)}
.lead .btn{width:100%; justify-content:center}

/* footer */
.ft{padding:56px 0 40px; color:var(--muted)}
.ft-in{display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-start}
.ft .brand{color:var(--ink); margin-bottom:.8rem}
.ft small{font-size:13px}
.ft-links{display:flex; gap:2.4rem; flex-wrap:wrap}
.ft-col h4{font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink); margin-bottom:.8rem; font-family:"Space Mono",monospace}
.ft-col a{display:block; font-size:14.5px; color:var(--muted); padding:.25rem 0}
.ft-col a:hover{color:var(--e700)}
.ft-bottom{border-top:1px solid var(--line); margin-top:36px; padding-top:22px; font-size:13px; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}

/* reveal */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

/* responsivo */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:36px; padding:64px 0 72px}
  .live{max-width:440px}
  .mods{grid-template-columns:repeat(2,1fr)}
  .diff-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step .ln{display:none}
  .plans{grid-template-columns:repeat(2,1fr)}
  .cta-in{grid-template-columns:1fr; padding:44px 32px}
  .nav-links{display:none}
  .nav-burger{display:block}
  .nav-links.open{display:flex; position:absolute; top:72px; left:16px; right:16px; flex-direction:column;
    background:#fff; border:1px solid var(--cardline); border-radius:18px; padding:12px; box-shadow:var(--shadow)}
  .nav-links.open a{padding:.8rem 1rem}
}
@media (max-width:560px){
  body{font-size:16px}
  .mods,.steps,.plans{grid-template-columns:1fr}
  .section{padding:64px 0}
  .nav-cta .btn-ghost{display:none}
  .cta-in{padding:32px 22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}