/* AjonBill Platform | (c) AjonTec | www.ajonbill.com | site.css */
:root{--pri:#4f46e5;--pri2:#7c3aed;--dark:#0f172a;--bg:#f8fafc;--bd:#e2e8f0;--muted:#64748b}
*{-webkit-tap-highlight-color:transparent}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;color:var(--dark);background:#fff;font-size:15px}
a{color:var(--pri);text-decoration:none}
.btn-pri{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border:0;border-radius:12px;padding:12px 26px;font-weight:600;transition:.2s}
.btn-pri:hover{color:#fff;filter:brightness(1.08);box-shadow:0 10px 24px -8px var(--pri)}
.btn-ghost{background:#fff;color:var(--pri);border:1.5px solid var(--pri);border-radius:12px;padding:11px 24px;font-weight:600}
.btn-ghost:hover{background:var(--pri);color:#fff}
/* navbar */
.nav-wrap{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--bd)}
.nav-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:14px 20px}
.logo{font-weight:800;font-size:22px;color:var(--dark);display:flex;align-items:center;gap:8px}
.logo i{color:var(--pri)}
.logo b{background:linear-gradient(135deg,var(--pri),var(--pri2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-links{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav-links a{color:#334155;font-weight:500}
.nav-links a:hover{color:var(--pri)}
@media(max-width:820px){.nav-links{display:none}.nav-links.open{display:flex;position:absolute;top:60px;left:0;right:0;background:#fff;flex-direction:column;padding:16px;border-bottom:1px solid var(--bd)}}
.nav-toggle{display:none;margin-left:auto;font-size:24px;background:0;border:0}
@media(max-width:820px){.nav-toggle{display:block}}
/* hero */
.hero{background:radial-gradient(1200px 500px at 80% -10%,#ede9fe,transparent),radial-gradient(900px 400px at 0% 0%,#e0e7ff,transparent);padding:70px 20px 60px}
.hero-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media(max-width:900px){.hero-in{grid-template-columns:1fr;text-align:center}}
.hero h1{font-size:46px;font-weight:800;line-height:1.1;margin:0 0 16px}
.hero h1 .g{background:linear-gradient(135deg,var(--pri),var(--pri2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:18px;color:var(--muted);margin:0 0 26px}
@media(max-width:900px){.hero h1{font-size:34px}.hero-cta{justify-content:center}}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-card{background:#fff;border-radius:20px;box-shadow:0 30px 60px -30px rgba(79,70,229,.4);padding:22px;border:1px solid var(--bd)}
.hero-card .row-i{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed #eef0f4}
.hero-card .row-i:last-child{border:0}
.hero-card .ic{width:40px;height:40px;border-radius:10px;background:#eef2ff;color:var(--pri);display:flex;align-items:center;justify-content:center;font-size:19px}
/* sections */
.sec{max-width:1180px;margin:0 auto;padding:60px 20px}
.sec h2{font-size:32px;font-weight:800;text-align:center;margin:0 0 10px}
.sec .lead{text-align:center;color:var(--muted);max-width:620px;margin:0 auto 40px}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr}}
.feat{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:22px;transition:.2s}
.feat:hover{box-shadow:0 16px 36px -22px rgba(15,23,42,.3);transform:translateY(-3px)}
.feat .ic{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#eef2ff,#f5f3ff);color:var(--pri);display:flex;align-items:center;justify-content:center;font-size:23px;margin-bottom:12px}
.feat h3{font-size:17px;font-weight:700;margin:0 0 6px}
.feat p{color:var(--muted);font-size:14px;margin:0}
/* pricing */
.price-wrap{background:var(--bg)}
.plan{background:#fff;border:2px solid var(--bd);border-radius:18px;padding:26px;text-align:center}
.plan.pop{border-color:var(--pri);box-shadow:0 20px 44px -24px var(--pri);position:relative}
.plan.pop::before{content:"Most Popular";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--pri);color:#fff;font-size:12px;font-weight:600;padding:4px 14px;border-radius:20px}
.plan .amt{font-size:38px;font-weight:800;margin:10px 0}
.plan .amt small{font-size:15px;color:var(--muted);font-weight:500}
.plan ul{list-style:none;padding:0;margin:18px 0;text-align:left}
.plan ul li{padding:7px 0;color:#334155;display:flex;gap:8px;align-items:flex-start}
.plan ul li i{color:#16a34a;margin-top:3px}
/* footer */
.ft{background:var(--dark);color:#cbd5e1;padding:40px 20px 24px}
.ft-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
@media(max-width:860px){.ft-in{grid-template-columns:1fr 1fr}}@media(max-width:500px){.ft-in{grid-template-columns:1fr}}
.ft h4{color:#fff;font-size:15px;margin:0 0 12px}
.ft a{color:#cbd5e1;display:block;padding:4px 0}
.ft a:hover{color:#fff}
.ft-bot{max-width:1180px;margin:24px auto 0;padding-top:18px;border-top:1px solid #1e293b;text-align:center;font-size:13px;color:#94a3b8}
/* generic card/form */
.container-sm{max-width:560px;margin:40px auto;padding:0 16px}
.card2{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:26px}
.form-label{font-weight:600;font-size:14px;margin-bottom:5px}
.form-control,.form-select{border-radius:10px;border:1px solid #cbd5e1;padding:10px 12px}
.form-control:focus,.form-select:focus{border-color:var(--pri);box-shadow:0 0 0 .2rem rgba(79,70,229,.15)}
/* nav dropdown */
.nav-drop{position:relative}
.nav-drop-t{display:inline-flex;align-items:center;gap:4px}
.nav-drop-m{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--bd);border-radius:12px;box-shadow:0 16px 40px -16px rgba(15,23,42,.3);padding:8px;min-width:200px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s;z-index:60}
.nav-drop:hover .nav-drop-m{opacity:1;visibility:visible;transform:translateY(4px)}
.nav-drop-m a{display:block;padding:9px 12px;border-radius:8px;color:#334155;font-weight:500}
.nav-drop-m a:hover{background:#eef2ff;color:var(--pri)}
@media(max-width:820px){
  .nav-drop-m{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid var(--bd);border-radius:0;margin:4px 0 4px 12px;padding:0;display:none}
  .nav-drop.open-sub .nav-drop-m{display:block}
}

/* ============ MARKETING UPGRADE ============ */
/* scroll reveal */
/* reveal: only animates when JS marks body.js-anim; otherwise fully visible */
body.js-anim .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
body.js-anim .reveal.in{opacity:1;transform:none}
/* hero badge */
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--bd);border-radius:100px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--pri);box-shadow:0 4px 14px -6px rgba(79,70,229,.3);margin-bottom:18px}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
/* trusted logos strip */
.logos{background:#fff;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);padding:22px 20px}
.logos-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;opacity:.65}
.logos-in span{font-weight:700;color:#94a3b8;font-size:15px;display:flex;align-items:center;gap:7px}
.logos-cap{text-align:center;color:var(--muted);font-size:13px;margin-bottom:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
/* premium feature cards */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr}}
.feat{background:#fff;border:1px solid var(--bd);border-radius:18px;padding:26px;transition:.25s;position:relative;overflow:hidden}
.feat:hover{transform:translateY(-5px);box-shadow:0 24px 50px -20px rgba(79,70,229,.35);border-color:#c7d2fe}
.feat .ic{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#eef2ff,#f5f3ff);color:var(--pri);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.feat:hover .ic{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff}
.feat h3{font-size:17px;margin:0 0 7px;font-weight:700}
.feat p{color:var(--muted);font-size:14px;margin:0;line-height:1.55}
/* section headings */
.sec>h2,section>.sec>h2{font-size:34px;font-weight:800;text-align:center;margin:0 0 6px;letter-spacing:-.5px}
.sec .lead,.lead{text-align:center;color:var(--muted);font-size:17px;max-width:620px;margin:0 auto 10px}
/* stat bar gradient */
.stats{background:linear-gradient(135deg,var(--dark),#1e293b);position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 20% 0,rgba(124,58,237,.3),transparent),radial-gradient(600px 200px at 80% 100%,rgba(79,70,229,.3),transparent)}
.stats .stat-n{background:linear-gradient(135deg,#a5b4fc,#c4b5fd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* mockup card */
.mockup{background:#fff;border-radius:18px;box-shadow:0 30px 70px -25px rgba(15,23,42,.4);border:1px solid var(--bd);overflow:hidden;animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.mockup-bar{background:#f1f5f9;padding:9px 12px;display:flex;gap:6px;border-bottom:1px solid var(--bd)}
.mockup-bar i{width:11px;height:11px;border-radius:50%;background:#cbd5e1}
.mockup-bar i:nth-child(1){background:#f87171}.mockup-bar i:nth-child(2){background:#fbbf24}.mockup-bar i:nth-child(3){background:#34d399}
/* cta glow */
.cta-box{background:linear-gradient(135deg,var(--pri),var(--pri2));border-radius:24px;padding:54px 30px;text-align:center;position:relative;overflow:hidden}
.cta-box::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at 30% 0,rgba(255,255,255,.2),transparent)}
.cta-box>*{position:relative}
/* pricing highlight */
.price-card.pop{border:2px solid var(--pri);box-shadow:0 24px 60px -24px rgba(79,70,229,.5);position:relative}
.price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;font-size:12px;font-weight:700;padding:5px 16px;border-radius:100px}
/* floating whatsapp pulse */
.wa-float{animation:wapulse 2s infinite}
@keyframes wapulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* responsive stats bar */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stats-grid .stat-n{font-size:34px;font-weight:800;line-height:1.1}
@media(max-width:600px){
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:24px 10px}
  .stats-grid .stat-n{font-size:28px}
}