:root{
  --primary:#2F2CF4;
  --primary-dark:#2522d9;
  --accent:#F2D15C;
  --text:#0f1728;
  --muted:#667085;
  --line:#e8edf5;
  --bg-soft:#f7f9fd;
  --success:#12B76A;
  --radius:22px;
  --shadow-sm:0 10px 30px rgba(15,23,40,.05);
  --shadow-md:0 18px 60px rgba(15,23,40,.08);
  --shadow-lg:0 30px 100px rgba(47,44,244,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:#fff;line-height:1.6}
img{max-width:100%;display:block}
a{text-decoration:none}
section{position:relative;scroll-margin-top:120px}
.section-space{padding:96px 0}
.bg-soft{background:var(--bg-soft)}
.site-header{position:sticky;top:0;z-index:1030;transition:all .25s ease;border-bottom:1px solid transparent;background:rgba(255,255,255,.92);backdrop-filter:blur(10px)}
.site-header.scrolled{border-bottom-color:rgba(232,237,245,.95);box-shadow:0 8px 30px rgba(16,24,40,.04)}
.navbar{padding:1rem 0}
.logo-wrap img{height:52px;width:auto}
.nav-link{color:#344054;font-weight:500;padding:.75rem 1rem!important}
.nav-link:hover,.nav-link:focus{color:var(--primary)}
.btn-afrociel{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700;padding:.95rem 1.3rem;border-radius:14px;box-shadow:0 10px 26px rgba(47,44,244,.18);transition:all .2s ease}
.btn-afrociel:hover,.btn-afrociel:focus{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff;transform:translateY(-1px)}
.btn-soft{background:#fff;border:1px solid var(--line);color:var(--text);font-weight:600;padding:.95rem 1.3rem;border-radius:14px;transition:all .2s ease}
.btn-soft:hover,.btn-soft:focus{background:#f9fafb;border-color:#dbe1ee;color:var(--text)}
.btn-accent{background:var(--accent);border:1px solid var(--accent);color:#111827;font-weight:800;padding:.95rem 1.35rem;border-radius:14px;transition:all .2s ease;box-shadow:0 10px 26px rgba(242,209,92,.22)}
.btn-accent:hover,.btn-accent:focus{background:#ebc847;border-color:#ebc847;color:#111827;transform:translateY(-1px)}
.btn-outline-light-custom{border:1px solid rgba(255,255,255,.24);color:#fff;background:rgba(255,255,255,.05);backdrop-filter:blur(8px);font-weight:700;padding:.95rem 1.3rem;border-radius:14px}
.btn-outline-light-custom:hover{background:rgba(255,255,255,.12);color:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.92rem;font-weight:700;color:var(--primary);background:rgba(47,44,244,.08);border-radius:999px;padding:.55rem .9rem}
.eyebrow-light{display:inline-flex;align-items:center;font-size:.92rem;font-weight:700;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.55rem .9rem}
.hero{padding:88px 0;background:radial-gradient(circle at 85% 18%, rgba(47,44,244,.08), transparent 24%),radial-gradient(circle at 90% 10%, rgba(242,209,92,.18), transparent 16%),linear-gradient(180deg, #ffffff 0%, #fafbff 100%)}
.hero-title{font-size:clamp(2.4rem,5vw,4.8rem);line-height:1.03;font-weight:800;letter-spacing:-.05em;max-width:12ch;margin-bottom:1.2rem}
.hero-text{font-size:1.08rem;color:var(--muted);max-width:58ch;margin-bottom:1.7rem}
.trust-pills{display:flex;flex-wrap:wrap;gap:.75rem}
.trust-pill{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);background:#fff;color:#344054;padding:.72rem .95rem;border-radius:999px;font-size:.94rem;font-weight:600;box-shadow:var(--shadow-sm)}
.trust-pill-dot{width:8px;height:8px;border-radius:50%;background:var(--success);display:inline-block}
.section-heading{max-width:760px;margin-inline:auto;text-align:center;margin-bottom:3.5rem}
.section-heading h2{font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.1;font-weight:800;letter-spacing:-.04em;margin-bottom:1rem}
.section-heading p{color:var(--muted);font-size:1.06rem;margin-bottom:0}
.card-premium,.pricing-card,.demo-form-card,.process-card,.stat-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:var(--shadow-sm);height:100%;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.card-premium:hover,.pricing-card:hover,.process-card:hover,.stat-card:hover,.demo-form-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#dde4f3}
.icon-badge{width:54px;height:54px;border-radius:18px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:var(--primary);background:rgba(47,44,244,.08);margin-bottom:1rem}
.card-premium h3,.pricing-card h3,.process-card h3{font-size:1.18rem;line-height:1.25;font-weight:700;letter-spacing:-.02em;margin-bottom:.7rem}
.card-premium p,.pricing-label,.pricing-note,.demo-form-card p,.stat-card p,.footer-brand p,.footer-links a{color:var(--muted)}
.hero-showcase{position:relative;background:linear-gradient(180deg,#ffffff,#fbfbff);border:1px solid #edf1fb;border-radius:32px;padding:18px;box-shadow:var(--shadow-lg)}
.hero-panel{background:#fff;border:1px solid var(--line);border-radius:24px;padding:16px}
.hero-panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.mini-browser-dots{display:flex;gap:6px}
.mini-browser-dots span{width:9px;height:9px;border-radius:50%}
.mini-browser-dots span:nth-child(1){background:#f97066}
.mini-browser-dots span:nth-child(2){background:#f6c64f}
.mini-browser-dots span:nth-child(3){background:#32d583}
.showcase-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}
.showcase-box{background:#fbfcff;border:1px solid var(--line);border-radius:18px;padding:16px}
.showcase-site{min-height:260px;display:flex;flex-direction:column;gap:12px}
.showcase-nav{height:16px;width:48%;border-radius:999px;background:#e8ecf8}
.showcase-title{height:20px;width:72%;border-radius:999px;background:linear-gradient(90deg,var(--primary),#7a78ff)}
.showcase-text{height:12px;border-radius:999px;background:#e9edf7}
.showcase-text.w1{width:100%}.showcase-text.w2{width:84%}.showcase-text.w3{width:64%}
.showcase-cta{display:flex;gap:10px;margin-top:auto}
.showcase-btn{height:38px;border-radius:12px;flex:1}
.showcase-btn.primary{background:var(--primary)}
.showcase-btn.soft{background:#eef2ff}
.showcase-phone{min-height:260px;display:grid;grid-template-rows:1fr auto;gap:12px}
.phone-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px}
.phone-card .bar{height:10px;border-radius:999px;background:#e7ebf8;margin-bottom:8px;overflow:hidden}
.phone-card .bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),#7a78ff);animation:growBar 2.5s ease-in-out infinite alternate}
.result-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stat-card strong{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.03em}
.pricing-card.featured{border:2px solid var(--primary);box-shadow:var(--shadow-lg);position:relative}
.pricing-badge{position:absolute;top:18px;right:18px;display:inline-flex;align-items:center;justify-content:center;padding:.48rem .8rem;border-radius:999px;background:var(--accent);color:#111827;font-weight:800;font-size:.82rem}
.pricing-label{font-size:.95rem;margin-bottom:.55rem}
.price{font-size:2.3rem;font-weight:800;line-height:1;letter-spacing:-.05em;margin:1rem 0 1.25rem}
.price span{font-size:1rem;color:var(--muted);font-weight:600;letter-spacing:0}
.pricing-list{list-style:none;padding:0;margin:0 0 1.5rem}
.pricing-list li{position:relative;padding:.8rem 0 .8rem 1.65rem;border-bottom:1px solid var(--line);color:#344054;font-weight:500}
.pricing-list li::before{content:"✓";position:absolute;left:0;top:.77rem;color:var(--primary);font-weight:800}
.process-step{display:flex;gap:14px;align-items:flex-start}
.step-number{width:42px;height:42px;border-radius:14px;background:rgba(47,44,244,.08);display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:800;flex-shrink:0}
.cta-final{background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.08), transparent 22%),radial-gradient(circle at 85% 20%, rgba(242,209,92,.18), transparent 18%),linear-gradient(180deg,#2F2CF4 0%, #2321cf 100%);color:#fff;overflow:hidden}
.cta-shell{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);backdrop-filter:blur(8px);border-radius:34px;padding:26px;box-shadow:0 24px 80px rgba(7,9,28,.18)}
.cta-content h2{font-size:clamp(2rem,4vw,3.15rem);line-height:1.1;font-weight:800;letter-spacing:-.04em;margin-bottom:1rem}
.cta-content p{color:rgba(255,255,255,.84);max-width:56ch}
.demo-form-card h3{font-size:1.35rem;font-weight:800;letter-spacing:-.03em;margin-bottom:.5rem}
.form-control,.form-select{min-height:52px;border-radius:14px;border:1px solid #dde3f0;color:#111827;padding:.8rem .95rem;box-shadow:none!important}
textarea.form-control{min-height:120px;resize:vertical}
.form-control:focus,.form-select:focus{border-color:rgba(47,44,244,.45);box-shadow:0 0 0 .25rem rgba(47,44,244,.08)!important}
.alert-custom{border-radius:16px;padding:14px 16px;font-weight:600;margin-bottom:1rem}
.alert-success-custom{background:#ecfdf3;border:1px solid #abefc6;color:#067647}
.alert-error-custom{background:#fef3f2;border:1px solid #fecdca;color:#b42318}
.site-footer{background:#f8f9fc;border-top:1px solid var(--line)}
.footer-top{padding:72px 0 28px}
.footer-title{font-size:1rem;font-weight:800;margin-bottom:1rem;letter-spacing:-.02em}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li:not(:last-child){margin-bottom:.7rem}
.footer-links a{font-weight:500;transition:color .2s ease}
.footer-links a:hover,.footer-bottom a:hover{color:var(--primary)}
.footer-bottom{border-top:1px solid var(--line);padding:18px 0 28px;color:var(--muted);font-size:.95rem}
.footer-bottom a{color:var(--muted);font-weight:600}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.float-soft{animation:floatY 6s ease-in-out infinite}
.pulse-soft{animation:softPulse 4s ease-in-out infinite}
.whatsapp-float{position:fixed;right:18px;bottom:18px;z-index:1080;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#25D366;color:#fff;font-size:26px;font-weight:800;box-shadow:0 18px 40px rgba(37,211,102,.28);transition:transform .2s ease, box-shadow .2s ease}
.whatsapp-float:hover{transform:translateY(-3px) scale(1.03);color:#fff;box-shadow:0 24px 50px rgba(37,211,102,.34)}
.kpi-list{display:grid;gap:12px}
.kpi-item{display:flex;justify-content:space-between;gap:12px;padding:14px;background:#fbfcff;border:1px solid var(--line);border-radius:16px}
.blog-card h3{font-size:1.12rem;font-weight:800;margin-bottom:.5rem}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes softPulse{0%,100%{box-shadow:0 0 0 rgba(47,44,244,0)}50%{box-shadow:0 10px 30px rgba(47,44,244,.06)}}
@keyframes growBar{0%{filter:saturate(1)}100%{filter:saturate(1.18)}}
@media (max-width:991.98px){
  .section-space{padding:78px 0}
  .hero{padding:72px 0}
  .hero-title{max-width:none}
  .logo-wrap img{height:42px}
  .showcase-grid,.result-strip{grid-template-columns:1fr}
  .navbar-collapse{padding-top:1rem}
}
@media (max-width:767.98px){
  .section-space{padding:64px 0}
  .hero-title{font-size:clamp(2rem,10vw,3rem)}
  .hero-text{font-size:1rem}
  .cta-shell{padding:18px}
  .logo-wrap img{height:38px}
}