:root{
  --mg-bg:#ffffff;
  --mg-bg-2:#f5f7fa;
  --mg-surface:#ffffff;
  --mg-primary:#1f3a5f;
  --mg-primary-2:#2e5a8a;
  --mg-accent:#0d6efd;
  --mg-text:#1a2233;
  --mg-muted:#5b6478;
  --mg-border:rgba(15,23,42,.10);
  --mg-gradient:linear-gradient(135deg,#1f3a5f 0%,#2e5a8a 50%,#0d6efd 100%);
  --mg-glow:0 18px 40px -22px rgba(31,58,95,.35);
}
*{box-sizing:border-box}
html,body{background:var(--mg-bg);color:var(--mg-text);font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;line-height:1.6;overflow-x:hidden}
h1,h2,h3,h4,h5,.display-1,.display-2,.display-3,.display-4{font-family:'Space Grotesk','Plus Jakarta Sans',sans-serif;font-weight:700;letter-spacing:-.02em;color:#0f172a}
a{color:var(--mg-primary);text-decoration:none}
a:hover{color:var(--mg-accent)}
.text-muted-light{color:var(--mg-muted)!important}

/* NAV */
.mg-nav{background:rgba(255,255,255,.85);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--mg-border)}
.brand-mark{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--mg-gradient);font-weight:800;color:#fff;box-shadow:var(--mg-glow)}
.brand-text{font-weight:800;line-height:1.05;color:#0f172a}
.brand-text small{font-weight:500;font-size:.7rem;color:var(--mg-muted);letter-spacing:.08em;text-transform:uppercase}
.navbar-nav .nav-link{color:#334155;font-weight:500;padding:.55rem .9rem;border-radius:8px}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active{color:#0f172a;background:rgba(15,23,42,.05)}

/* BUTTONS */
.btn-mg-primary{background:var(--mg-gradient);color:#fff;border:0;font-weight:600;padding:.7rem 1.4rem;border-radius:12px;box-shadow:var(--mg-glow);transition:.25s}
.btn-mg-primary:hover{transform:translateY(-2px);color:#fff;box-shadow:0 22px 50px -20px rgba(13,110,253,.45)}
.btn-mg-outline{border:1px solid var(--mg-border);color:#0f172a;padding:.7rem 1.4rem;border-radius:12px;font-weight:600;background:#fff}
.btn-mg-outline:hover{background:#f1f5f9;color:#0f172a}

/* HERO */
.mg-hero{position:relative;padding:120px 0 90px;overflow:hidden;background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%)}
.mg-hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 50% at 80% 10%,rgba(31,58,95,.08),transparent 60%),
  radial-gradient(50% 40% at 10% 90%,rgba(13,110,253,.06),transparent 60%);
  pointer-events:none}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .9rem;border:1px solid var(--mg-border);border-radius:999px;background:#fff;font-size:.8rem;color:var(--mg-muted);font-weight:500}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--mg-accent);box-shadow:0 0 0 4px rgba(13,110,253,.12)}
.gradient-text{background:var(--mg-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}

/* CARDS */
.mg-card{background:#ffffff;border:1px solid var(--mg-border);border-radius:18px;padding:1.75rem;height:100%;transition:.3s;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(15,23,42,.04)}
.mg-card:hover{transform:translateY(-4px);border-color:rgba(31,58,95,.25);box-shadow:0 24px 48px -24px rgba(31,58,95,.25)}
.mg-card .icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--mg-gradient);color:#fff;font-size:1.4rem;margin-bottom:1rem}
.mg-card h4,.mg-card h5{color:#0f172a}
.mg-card h5{margin-bottom:.5rem}
.mg-card p{color:var(--mg-muted);font-size:.95rem;margin-bottom:0}
.mg-card .tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1rem}
.mg-card .tags span{font-size:.72rem;padding:.25rem .6rem;border-radius:999px;background:#eef4ff;color:#1f3a5f;border:1px solid rgba(31,58,95,.15)}

/* SECTIONS */
section{padding:80px 0;position:relative;background:var(--mg-bg)}
.section-title{margin-bottom:3rem}
.section-title h2{font-size:clamp(1.8rem,3.5vw,2.6rem)}
.section-title p{color:var(--mg-muted);max-width:680px}

/* STATS */
.stat{background:#f8fafc;border:1px solid var(--mg-border);border-radius:16px;padding:1.25rem;text-align:center}
.stat .n{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.8rem;background:var(--mg-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{font-size:.85rem;color:var(--mg-muted)}

/* TECH PILL */
.tech-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border:1px solid var(--mg-border);border-radius:999px;background:#fff;margin:.25rem;font-weight:500;font-size:.9rem;color:#0f172a}
.tech-pill i{color:var(--mg-accent)}

/* PRICING BANNER */
.price-banner{background:var(--mg-gradient);border-radius:24px;padding:2.5rem;color:#fff;position:relative;overflow:hidden;box-shadow:0 24px 60px -28px rgba(31,58,95,.5)}
.price-banner h2{color:#fff;font-weight:800}
.price-banner p{color:rgba(255,255,255,.9)}
.price-banner .price{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.5rem,6vw,4rem);font-weight:800;line-height:1}

/* CTA strip */
.cta-strip{background:linear-gradient(135deg,#f1f5f9,#ffffff);border:1px solid var(--mg-border);border-radius:24px;padding:3rem 2rem;text-align:center}

/* FORMS */
.form-control,.form-select{background:#fff;border:1px solid var(--mg-border);color:#0f172a;padding:.85rem 1rem;border-radius:12px}
.form-control:focus,.form-select:focus{background:#fff;border-color:var(--mg-accent);box-shadow:0 0 0 4px rgba(13,110,253,.15);color:#0f172a}
.form-control::placeholder{color:#94a3b8}
label{color:#334155;font-weight:500;margin-bottom:.4rem}

/* FOOTER */
.mg-footer{background:#0f172a;border-top:1px solid var(--mg-border);color:#cbd5e1}
.mg-footer .text-muted-light{color:#94a3b8!important}
.brand-text-light{color:#fff;font-weight:700}
.footer-h{color:#fff;font-weight:600;margin-bottom:.9rem;font-size:.95rem;text-transform:uppercase;letter-spacing:.06em}
.footer-list li{color:#94a3b8;padding:.25rem 0;font-size:.92rem}
.footer-list a{color:#cbd5e1}
.footer-list a:hover{color:#fff}

/* DASHBOARD MOCKUP */
.mockup{border-radius:14px;border:1px solid var(--mg-border);background:linear-gradient(180deg,#ffffff,#f8fafc);padding:1rem;font-size:.75rem;color:#334155;box-shadow:0 12px 30px -16px rgba(15,23,42,.18)}
.mockup .bar{display:flex;gap:.3rem;margin-bottom:.7rem}
.mockup .bar span{width:10px;height:10px;border-radius:50%;background:#cbd5e1}
.mockup .bar span:nth-child(1){background:#ff5f57}
.mockup .bar span:nth-child(2){background:#febc2e}
.mockup .bar span:nth-child(3){background:#28c840}
.mockup .row-m{display:flex;gap:.5rem;margin:.3rem 0}
.mockup .box{flex:1;height:36px;background:linear-gradient(135deg,rgba(31,58,95,.12),rgba(13,110,253,.08));border-radius:8px;border:1px solid rgba(31,58,95,.12)}
.mockup .line{height:8px;background:#e2e8f0;border-radius:4px;margin:.35rem 0}
.mockup .line.short{width:60%}

/* ALERT */
.mg-alert{background:#eef6ff;border:1px solid rgba(13,110,253,.25);color:#0b3a76;border-radius:12px;padding:1rem 1.2rem}

@media (max-width:576px){
  .mg-hero{padding:90px 0 60px}
  section{padding:60px 0}
  .price-banner{padding:1.75rem}
}

/* Foldable / very narrow */
@media (max-width:360px){
  .brand-text{font-size:.9rem}
  .brand-text small{display:none!important}
}


.whatsapp-float{
    position:fixed;
    bottom:25px;
    right:25px;
    width:65px;
    height:65px;
    background:#25D366;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    z-index:9999;
    box-shadow:0 8px 25px rgba(0,0,0,.25);
    animation:pulse 2s infinite;
    transition:.3s;
}

.whatsapp-float:hover{
    transform:scale(1.1);
    animation:none;
}

.whatsapp-float svg{
    width:34px;
    height:34px;
}

.tooltip{
    position:absolute;
    right:80px;
    white-space:nowrap;
    background:#222;
    color:#fff;
    padding:8px 12px;
    border-radius:6px;
    font-size:14px;
    opacity:0;
    visibility:hidden;
    transition:.3s;
}

.whatsapp-float:hover .tooltip{
    opacity:1;
    visibility:visible;
}

@keyframes pulse{
    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.7);
    }
    70%{
        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }
}

@media(max-width:768px){
    .whatsapp-float{
        width:58px;
        height:58px;
        bottom:20px;
        right:20px;
    }

    .tooltip{
        display:none;
    }
}