/* =====================================================================
   SHOPIA · Landing  (v9 — Indigo Premium)
   East-African retail fintech identity:
   indigo primary + emerald accent + deep navy + cool canvas.
   Display: Sora · Body: Inter
   ===================================================================== */
:root{
  --forest:#11152e; --forest2:#1a2048; --forest3:#232a5e;
  --jade:#2563eb; --jade2:#3b82f6; --jade-d:#1e40af; --jade-soft:#eff6ff;
  --gold:#10b981; --gold2:#34d399; --gold-d:#059669; --gold-soft:#ecfdf5;
  --cream:#f6f7fc; --cream2:#eef0f8; --paper:#ffffff;
  --ink:#0f172a; --head:#0f172a; --body:#475569; --muted:#64748b; --faint:#94a3b8;
  --line:#e7e9f3; --line2:#f0f1f8;
  --radius:18px; --radius-sm:13px; --radius-lg:28px;
  --shadow-s:0 1px 2px rgba(20,24,52,.05), 0 2px 6px rgba(20,24,52,.05);
  --shadow:0 16px 34px -14px rgba(24,28,60,.22);
  --shadow-lg:0 36px 70px -22px rgba(20,24,52,.4);
  --glow-jade:0 24px 60px -18px rgba(79,70,229,.5);
  --glow-gold:0 20px 46px -16px rgba(16,185,129,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
  --container:1180px;
  color-scheme:light;
}
/* ---- DARK MODE (landing) — readable, premium ---- */
[data-theme="dark"]{
  --jade:#60a5fa; --jade2:#93c5fd; --jade-d:#3b82f6; --jade-soft:#172554;
  --gold:#34d399; --gold2:#6ee7b7; --gold-d:#10b981; --gold-soft:#052e26;
  --cream:#0b1020; --cream2:#141a2e; --paper:#141a2e;
  --ink:#f1f5f9; --head:#f1f5f9; --body:#cbd5e1; --muted:#94a3b8; --faint:#64748b;
  --line:#26304a; --line2:#1f2740;
  --shadow-s:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 16px 34px -14px rgba(0,0,0,.5);
  --shadow-lg:0 36px 70px -22px rgba(0,0,0,.6);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:'Inter',system-ui,sans-serif; color:var(--body);
  background:var(--cream); -webkit-font-smoothing:antialiased; line-height:1.62; overflow-x:hidden}
h1,h2,h3,h4,.h-font{font-family:'Sora',sans-serif; color:var(--head); line-height:1.1; letter-spacing:-.02em; margin:0; font-weight:700}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--container); margin:0 auto; padding:0 24px}
section{position:relative}
::selection{background:var(--gold-soft); color:var(--forest)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:'Inter',sans-serif; font-weight:600;
  font-size:15px; padding:12px 22px; border-radius:13px; border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .2s var(--ease), background .2s; white-space:nowrap}
.btn i{font-size:.95em}
.btn-primary{background:linear-gradient(135deg,var(--gold2),var(--gold) 55%,var(--gold-d)); color:#fff; box-shadow:var(--glow-gold)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 26px 52px -16px rgba(16,185,129,.62)}
.btn-jade{background:linear-gradient(135deg,var(--jade2),var(--jade) 60%,var(--jade-d)); color:#fff; box-shadow:var(--glow-jade)}
.btn-jade:hover{transform:translateY(-2px)}
.btn-ghost{background:var(--paper); color:var(--head); border-color:var(--line)}
.btn-ghost:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:#d9d6c8}
.btn-dark{background:var(--forest); color:#eef0ff; border-color:rgba(255,255,255,.1)}
.btn-dark:hover{transform:translateY(-2px); background:var(--forest2)}
.btn-light{background:var(--paper); color:var(--jade-d); box-shadow:var(--shadow)}
.btn-light:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.btn-outline-cream{background:rgba(255,255,255,.06); color:#eef0ff; border-color:rgba(255,255,255,.28)}
.btn-outline-cream:hover{background:rgba(255,255,255,.14); transform:translateY(-2px)}
.btn-lg{font-size:16px; padding:16px 30px; border-radius:15px}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:100; background:rgba(251,250,245,.78);
  backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid transparent; transition:.25s var(--ease)}
.nav.scrolled{background:rgba(251,250,245,.94); border-bottom-color:var(--line); box-shadow:0 8px 26px -18px rgba(20,24,52,.5)}
.nav-in{display:flex; align-items:center; gap:20px; height:74px}
.logo{display:flex; align-items:center; gap:11px; font-family:'Sora',sans-serif; font-weight:800; font-size:22px; color:var(--head); letter-spacing:-.03em}
.logo .mark{width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:#fff; font-size:18px;
  background:linear-gradient(140deg,var(--jade2),var(--jade-d)); box-shadow:0 10px 20px -7px rgba(79,70,229,.6); position:relative}
.logo .mark::after{content:""; position:absolute; right:-3px; bottom:-3px; width:14px; height:14px; border-radius:50%; background:var(--gold); border:2.5px solid var(--cream)}
.nav-links{display:flex; gap:3px; margin:0 auto}
.nav-links a{position:relative; padding:9px 15px; border-radius:10px; font-weight:500; font-size:15px; color:var(--body); transition:.16s}
.nav-links a:hover{color:var(--head); background:var(--cream2)}
.nav-links a.on{color:var(--jade-d); font-weight:600}
.nav-links a.on::after{content:""; position:absolute; left:15px; right:15px; bottom:4px; height:2.5px; border-radius:2px; background:linear-gradient(90deg,var(--jade),var(--gold))}
.nav-right{display:flex; align-items:center; gap:10px}
.lang-pick{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--paper)}
.lang-pick a{padding:7px 11px; font-size:12.5px; font-weight:700; color:var(--muted); transition:.15s}
.lang-pick a.on{background:var(--jade); color:#fff}
/* Language dropdown */
.lang-dd{position:relative}
.lang-dd-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;transition:.15s}
.lang-dd-btn:hover{border-color:var(--jade)}
.lang-dd-btn i{font-size:10px;opacity:.6;transition:.2s}
.lang-dd-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:170px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px -8px rgba(0,0,0,.18);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;z-index:100}
.lang-dd-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
.lang-dd-menu a{display:block;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--ink);transition:.13s}
.lang-dd-menu a:hover{background:var(--cream,#f5f5f0)}
.lang-dd-menu a.on{background:var(--jade);color:#fff}
.btn-login{padding:9px 14px}
.nav-burger{display:none; background:var(--paper); border:1px solid var(--line); border-radius:10px; width:42px; height:42px; font-size:18px; color:var(--head); cursor:pointer}

/* ---------- HERO (dark forest, signature) ---------- */
.hero{position:relative; background:
    radial-gradient(680px 380px at 84% 8%, rgba(16,185,129,.18), transparent 60%),
    radial-gradient(720px 460px at 6% 92%, rgba(79,70,229,.26), transparent 58%),
    linear-gradient(160deg,#1b2150, var(--forest) 55%, #0b1026);
  color:#e7e9ff; overflow:hidden; padding:70px 0 90px}
.hero::before{content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%); mask-image:linear-gradient(180deg,#000,transparent 70%)}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.02fr .98fr; gap:54px; align-items:center}
.badge-pill{display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  color:#eef0ff; font-weight:600; font-size:13px; padding:8px 16px; border-radius:999px; backdrop-filter:blur(6px)}
.badge-pill i{color:var(--gold2)}
.hero h1{font-size:clamp(36px,5.4vw,60px); font-weight:800; letter-spacing:-.03em; color:#fff; margin:22px 0 20px; line-height:1.04}
.hero h1 .grad{position:relative; color:var(--gold2); white-space:nowrap}
.hero h1 .grad::after{content:""; position:absolute; left:0; right:0; bottom:.06em; height:.16em; border-radius:3px;
  background:linear-gradient(90deg,var(--gold),var(--jade2)); opacity:.5}
.hero .lead{font-size:clamp(16px,2.05vw,19px); color:#b9c0e8; max-width:540px; margin-bottom:32px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px}
.hero-trust{display:flex; align-items:center; gap:14px; flex-wrap:wrap; color:#a6aede; font-size:13.5px}
.hero-trust .ppl{display:flex}
.hero-trust .ppl span{width:30px; height:30px; border-radius:50%; border:2px solid var(--forest); margin-left:-9px; display:grid; place-items:center;
  font-size:11px; font-weight:700; color:#fff; font-family:'Sora',sans-serif}
.hero-trust .ppl span:nth-child(1){background:#6366f1} .hero-trust .ppl span:nth-child(2){background:#4f46e5; color:#fff}
.hero-trust .ppl span:nth-child(3){background:#818cf8} .hero-trust .ppl span:nth-child(4){background:#34d399}
.hero-points{display:grid; grid-template-columns:1fr 1fr; gap:11px 20px; max-width:500px; margin-top:6px}
.hero-points>div{display:flex; align-items:center; gap:9px; font-size:14px; color:#cdd2f2}
.hero-points i{color:var(--gold2)}

/* hero product mockup */
.hero-visual{position:relative; z-index:1}
.pm{position:relative; background:#fff; border-radius:22px; padding:20px; box-shadow:0 50px 90px -30px rgba(0,0,0,.6);
  transform:perspective(1400px) rotateY(-9deg) rotateX(3deg); transition:.5s var(--ease); animation:pmrise 1s var(--ease) both}
.pm:hover{transform:perspective(1400px) rotateY(-4deg) rotateX(1deg)}
@keyframes pmrise{from{opacity:0; transform:perspective(1400px) rotateY(-16deg) rotateX(6deg) translateY(20px)}}
.pm-head{display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line2)}
.pm-head .dot{width:36px; height:36px; border-radius:10px; background:linear-gradient(140deg,var(--jade2),var(--jade-d)); display:grid; place-items:center; color:#fff}
.pm-head b{font-family:'Sora',sans-serif; color:var(--head); font-size:15px}
.pm-head .live{margin-left:auto; font-size:11px; font-weight:700; color:var(--jade-d); background:var(--jade-soft); padding:4px 10px; border-radius:999px; display:flex; align-items:center; gap:6px}
.pm-head .live::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--jade); animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.pm-row{display:flex; align-items:center; gap:11px; padding:11px 2px; border-bottom:1px dashed var(--line2)}
.pm-row .ic{width:34px; height:34px; border-radius:9px; background:var(--cream2); display:grid; place-items:center; color:var(--jade-d); font-size:13px}
.pm-row .nm{font-size:13.5px; font-weight:600; color:var(--head)}
.pm-row .nm small{display:block; color:var(--muted); font-weight:400; font-size:11.5px}
.pm-row .amt{margin-left:auto; font-family:'Sora',sans-serif; font-weight:600; color:var(--head); font-size:14px}
.pm-total{display:flex; align-items:center; margin-top:8px; padding-top:14px; border-top:2px solid var(--line)}
.pm-total span{color:var(--muted); font-size:13px}
.pm-total b{margin-left:auto; font-family:'Sora',sans-serif; font-weight:800; font-size:22px; color:var(--jade-d)}
.pm-chart{display:flex; align-items:flex-end; gap:7px; height:62px; margin-top:16px; padding-top:8px}
.pm-chart i{flex:1; border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--jade2),var(--jade)); opacity:.85; animation:grow .9s var(--ease) both}
.pm-chart i:nth-child(even){background:linear-gradient(180deg,var(--gold2),var(--gold))}
@keyframes grow{from{height:0 !important}}
.float-chip{position:absolute; background:#fff; border-radius:14px; padding:11px 14px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--head); animation:floaty 5s var(--ease) infinite}
.float-chip .fi{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff; font-size:13px; flex:none}
.float-chip small{display:block; font-weight:400; color:var(--muted); font-size:11px}
.fc-1{top:-22px; left:-30px; animation-delay:.2s}
.fc-1 .fi{background:var(--jade)}
.fc-2{bottom:36px; left:-44px; animation-delay:1.1s}
.fc-2 .fi{background:#10b981}
.fc-3{top:64px; right:-30px; animation-delay:.6s}
.fc-3 .fi{background:var(--gold-d)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- stats band (gold on forest) ---------- */
.stats-band{background:var(--forest2); color:#e7e9ff; padding:0}
.stats-band .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; text-align:center}
.stats-grid>div{padding:34px 18px; position:relative}
.stats-grid>div b{display:block; font-family:'Sora',sans-serif; font-weight:800; font-size:clamp(26px,3.6vw,38px); color:#fff}
.stats-grid>div b em{font-style:normal; color:var(--gold2)}
.stats-grid>div span{font-size:13.5px; color:#a6aede}
.stats-grid>div:not(:last-child)::after{content:""; position:absolute; right:0; top:24%; height:52%; width:1px; background:rgba(255,255,255,.1)}

/* ---------- sections ---------- */
.section{padding:90px 0}
.section.alt{background:var(--cream2)}
.eyebrow{display:inline-flex; align-items:center; gap:9px; text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:700; color:var(--jade-d); margin-bottom:15px}
.eyebrow::before{content:""; width:24px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--jade),var(--gold))}
.section>.container>h2{font-size:clamp(28px,3.7vw,42px); font-weight:800; letter-spacing:-.025em; max-width:740px; color:var(--head)}
.section .sub{font-size:17px; color:var(--body); max-width:620px; margin:16px 0 46px}

/* ---------- feature cards ---------- */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.feat{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:30px; position:relative; overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .2s}
.feat::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--jade),var(--gold)); transform:scaleY(0); transform-origin:top; transition:transform .3s var(--ease)}
.feat:hover{transform:translateY(-7px); box-shadow:var(--shadow-lg); border-color:#ddd9c9}
.feat:hover::before{transform:scaleY(1)}
.feat .ic{width:60px; height:60px; border-radius:17px; display:grid; place-items:center; font-size:25px; color:#fff; margin-bottom:20px;
  background:linear-gradient(140deg,var(--jade2),var(--jade-d)); box-shadow:var(--glow-jade)}
.feat:nth-child(3n+2) .ic{background:linear-gradient(140deg,var(--gold2),var(--gold-d)); box-shadow:var(--glow-gold)}
.feat:nth-child(3n) .ic{background:linear-gradient(140deg,#34d399,var(--jade-d))}
.feat h3{font-size:19px; margin-bottom:9px; color:var(--head)}
.feat p{font-size:14.5px; color:var(--body); margin:0}

/* ---------- testimonials ---------- */
.test-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.test-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-s); position:relative}
.test-card::before{content:"\201C"; position:absolute; top:8px; right:22px; font-family:'Sora',sans-serif; font-size:80px; color:var(--jade-soft); line-height:1}
.test-card .stars{color:var(--gold); display:flex; gap:3px; margin-bottom:14px; position:relative}
.test-card p{color:var(--head); font-size:15.5px; margin:0 0 18px; position:relative}
.test-card .who{display:flex; align-items:center; gap:12px; font-weight:600; color:var(--head); font-size:14.5px}
.test-card .av{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff; font-family:'Sora',sans-serif; font-weight:700; background:linear-gradient(140deg,var(--jade2),var(--jade-d))}
.test-card:nth-child(2) .av{background:linear-gradient(140deg,var(--gold2),var(--gold-d)); color:#fff}

/* ---------- CTA band ---------- */
.cta-band{padding:84px 0; text-align:center; color:#eef0ff; position:relative; overflow:hidden;
  background:radial-gradient(600px 280px at 50% -20%, rgba(16,185,129,.22), transparent),
            linear-gradient(155deg,#1b2150,var(--forest) 60%,#0b1026)}
.cta-band::before{content:""; position:absolute; inset:0; opacity:.4; background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px); background-size:24px 24px}
.cta-band>.container{position:relative}
.cta-band h2{color:#fff; font-size:clamp(28px,3.8vw,42px); font-weight:800; margin-bottom:14px; letter-spacing:-.02em}
.cta-band p{font-size:18px; color:#b9c0e8; max-width:560px; margin:0 auto 30px}

/* ---------- footer ---------- */
.foot{background:var(--forest); color:#a6aede; padding:66px 0 30px}
.foot .logo{color:#fff; margin-bottom:0}
.foot .logo .mark::after{border-color:var(--forest)}
/* v3.1.0 — wide multi-column footer, like dukaapp */
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr; gap:34px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.08)}
.foot h4{color:#fff; font-size:14px; margin-bottom:16px; font-family:'Sora',sans-serif}
.foot a{display:block; color:#a6aede; font-size:14.5px; padding:5px 0; transition:.15s}
.foot a:hover{color:var(--gold2)}
.foot-tag{margin-top:14px; max-width:280px; color:#94a3b8; line-height:1.6; font-size:14px}
.foot-social{display:flex; gap:10px; margin-top:18px}
.foot-social a{width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); display:grid; place-items:center; padding:0; color:#c7d2fe}
.foot-social a:hover{background:var(--gold2); color:#0b1b3a}
.foot-contact a{display:flex; align-items:center; gap:9px}
.foot-contact a i{width:16px; text-align:center; opacity:.7}
.foot-lang{display:flex; gap:6px; margin-top:14px}
.foot-lang a{display:inline-block; padding:5px 11px; border-radius:8px; background:rgba(255,255,255,.08); font-size:12px; font-weight:700}
.foot-lang a.on{background:var(--gold2); color:#0b1b3a}
.foot-bottom{padding-top:24px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; font-size:13.5px; color:#7b81a8}
.foot-designed{opacity:.75}
@media(max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr; gap:28px}
  .foot-brand{grid-column:1 / -1}
  .foot-bottom{justify-content:center; text-align:center}
}
@media(max-width:520px){ .foot-grid{grid-template-columns:1fr} }

/* ---------- inner page hero ---------- */
.page-hero{padding:96px 0 40px; text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#1e1b4b,#2563eb 60%,#0ea5e9); color:#fff; border-bottom:0}
.page-hero::before{content:""; position:absolute; inset:0; z-index:0; opacity:.18;
  background-image:url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=1600&q=70');
  background-size:cover; background-position:center}
.page-hero::after{content:""; position:absolute; top:-60px; right:-40px; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(129,140,248,.5),transparent 70%); filter:blur(50px); z-index:0}
.page-hero .container{position:relative; z-index:1}
.page-hero .eyebrow{justify-content:center; color:#a5b4fc}
.page-hero h1{font-size:clamp(31px,4.6vw,48px); font-weight:800; letter-spacing:-.025em; margin:4px 0 12px; color:#fff}
.page-hero .sub{max-width:640px; margin:0 auto; color:rgba(255,255,255,.9); font-size:17.5px}

/* ---------- features page blocks ---------- */
.feat-block{display:grid; grid-template-columns:150px 1fr; gap:38px; align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:38px; margin-bottom:24px; box-shadow:var(--shadow-s); transition:.2s var(--ease)}
.feat-block:hover{box-shadow:var(--shadow); transform:translateY(-3px)}
.feat-block.rev{grid-template-columns:1fr 150px}
.feat-block.rev .fb-icon{order:2}
.fb-icon{width:134px; height:134px; border-radius:32px; display:grid; place-items:center; font-size:58px; color:#fff; margin:0 auto}
.fb-primary{background:linear-gradient(140deg,var(--jade2),var(--jade-d)); box-shadow:var(--glow-jade)}
.fb-accent{background:linear-gradient(140deg,var(--gold2),var(--gold-d)); box-shadow:var(--glow-gold)}
.fb-body h2{font-size:25px; margin-bottom:10px}
.fb-body p{color:var(--body); margin-bottom:18px}
.fb-body ul{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:11px}
.fb-body li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--head); font-weight:500}
.fb-body li i{color:var(--jade); margin-top:3px}

/* capability grid */
.cap-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:6px}
.cap{display:flex; align-items:center; gap:13px; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:16px 18px; font-weight:600; color:var(--head); transition:.18s var(--ease)}
.cap:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#ddd9c9}
.cap>i:first-child{width:40px; height:40px; border-radius:11px; background:var(--jade-soft); color:var(--jade-d); display:grid; place-items:center; font-size:16px; flex:none}
.cap span:nth-of-type(1){flex:1; font-size:14.5px}
.cap .ok{color:var(--jade); font-size:16px}
.cap-soon{opacity:.74}
.cap .soon{font-size:11px; font-weight:700; background:var(--gold-soft); color:var(--gold-d); padding:3px 10px; border-radius:999px; white-space:nowrap}

/* how it works */
.how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.how-step{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:36px 28px; text-align:center; position:relative; transition:.2s var(--ease)}
.how-step:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.how-num{width:60px; height:60px; border-radius:18px; margin:0 auto 18px; display:grid; place-items:center;
  font-family:'Sora',sans-serif; font-weight:800; font-size:24px; color:#fff; background:linear-gradient(140deg,var(--jade2),var(--jade-d)); box-shadow:var(--glow-jade)}
.how-step:nth-child(2) .how-num{background:linear-gradient(140deg,var(--gold2),var(--gold-d)); box-shadow:var(--glow-gold); color:#fff}
.how-step h3{font-size:19px; margin-bottom:9px}
.how-step p{font-size:14.5px; color:var(--body); margin:0}

/* faq */
.faq{display:flex; flex-direction:column; gap:13px}
.faq-item{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:4px 22px; transition:.2s}
.faq-item[open]{box-shadow:var(--shadow); border-color:#ddd9c9}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer; list-style:none;
  font-family:'Sora',sans-serif; font-weight:600; color:var(--head); font-size:16px; padding:19px 0}
.faq-q::-webkit-details-marker{display:none}
.faq-q i{color:var(--jade); transition:.25s var(--ease); flex:none}
.faq-item[open] .faq-q i{transform:rotate(180deg)}
.faq-a{padding:0 0 20px; color:var(--body); font-size:15px}

/* demo page */
.demo-wrap{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start}
.demo-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow)}
.demo-creds{width:100%; border-collapse:collapse; margin-top:14px}
.demo-creds th,.demo-creds td{text-align:left; padding:11px 8px; border-bottom:1px solid var(--line); font-size:14px}
.demo-creds th{color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em}
.demo-creds td{font-family:'Inter',monospace; color:var(--head)}
.demo-widgets{display:grid; gap:14px}
.demo-w{display:flex; gap:15px; align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-radius:15px; padding:20px; transition:.18s var(--ease)}
.demo-w:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.demo-w .ic{width:48px; height:48px; border-radius:13px; display:grid; place-items:center; font-size:19px; flex:none; color:#fff}
.demo-w .ic-primary{background:linear-gradient(140deg,var(--jade2),var(--jade-d))}
.demo-w .ic-accent{background:linear-gradient(140deg,#34d399,var(--jade-d))}
.demo-w .ic-warning{background:linear-gradient(140deg,var(--gold2),var(--gold-d))}
.demo-w b{font-family:'Sora',sans-serif; color:var(--head)}
.demo-w p{font-size:14px; margin:3px 0 0; color:var(--body)}
.badge{display:inline-block; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:600}
.badge-soft-danger{background:#fdecec; color:#c0392b}
.badge-soft-primary{background:var(--jade-soft); color:var(--jade-d)}
.badge-soft-accent{background:var(--gold-soft); color:var(--gold-d)}

/* pricing */
.cycle-toggle{display:flex; width:max-content; margin:0 auto; background:var(--cream2); border:1px solid var(--line); border-radius:14px; padding:5px; gap:4px}
.cycle-toggle button{border:0; background:none; padding:10px 24px; border-radius:10px; font-weight:600; font-size:14.5px; color:var(--muted); cursor:pointer; transition:.18s; font-family:inherit}
.cycle-toggle button.on{background:var(--paper); color:var(--jade-d); box-shadow:var(--shadow-s)}
.save-note{text-align:center; min-height:24px; margin:14px 0 6px; color:var(--jade-d); font-weight:600; font-size:14px}
.plan-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch}
.plan{background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:32px 26px; display:flex; flex-direction:column; position:relative; transition:.2s var(--ease)}
.plan:hover{transform:translateY(-7px); box-shadow:var(--shadow-lg)}
.plan.pop{border:0; background:linear-gradient(165deg,#1b2150,var(--forest)); color:#e7e9ff; box-shadow:var(--shadow-lg); transform:scale(1.04)}
.plan.pop:hover{transform:scale(1.04) translateY(-7px)}
.plan.pop h3,.plan.pop .price{color:#fff}
.plan.pop li{color:#b9c0e8}
.plan.pop .price .per{color:#a6aede}
.plan .tag{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--gold2),var(--gold-d)); color:#fff; font-size:12px; font-weight:700; padding:6px 16px; border-radius:999px; box-shadow:var(--glow-gold); white-space:nowrap}
.plan h3{font-size:19px; margin-bottom:12px}
.plan .price{font-family:'Sora',sans-serif; font-weight:800; font-size:33px; color:var(--head); line-height:1; margin-bottom:6px}
.plan .price .per{display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:13px; color:var(--muted); margin-top:6px}
.plan ul{list-style:none; padding:0; margin:20px 0 24px; display:grid; gap:11px; flex:1}
.plan li{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--body)}
.plan li i{color:var(--jade); margin-top:3px; flex:none}
.plan.pop li i{color:var(--gold2)}
.plan .plan-cta{width:100%; justify-content:center}

/* trusted-by payment band */
.pay-trust{margin-top:54px; text-align:center; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:34px 24px; box-shadow:var(--shadow-s)}
.pay-trust-h{font-family:'Sora',sans-serif; font-weight:700; color:var(--head); font-size:16px; margin-bottom:20px}
.pay-trust-h i{color:var(--jade)}
.pay-logos{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.pl{display:inline-flex; align-items:center; gap:8px; padding:11px 19px; border-radius:12px; font-weight:700; font-size:14px; border:1.5px solid transparent; transition:.18s var(--ease)}
.pl:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.pl-mpesa{background:#e8f6ec; color:#0a7d33; border-color:#0a7d33}
.pl-airtel{background:#fdeaea; color:#e4002b; border-color:#e4002b}
.pl-mixx{background:#eaf0ff; color:#1c43c8; border-color:#1c43c8}
.pl-halo{background:#fff1e6; color:#e8601c; border-color:#e8601c}
.pl-card{background:var(--jade-soft); color:var(--jade-d); border-color:var(--jade-d)}

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

/* responsive */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:54px}
  .hero-visual{max-width:440px; margin:10px auto 0}
  .feat-grid,.test-grid,.cap-grid,.how-grid{grid-template-columns:1fr 1fr}
  .plan-grid{grid-template-columns:1fr 1fr}
  .plan.pop{transform:none}.plan.pop:hover{transform:translateY(-7px)}
}
@media(max-width:820px){
  /* The header menu is a side drawer (see the phone-menu block lower down).
     The rules that used to be here dropped it from the top of the page and
     fought that drawer, so the menu appeared in two places at once. */
  .stats-grid{grid-template-columns:1fr 1fr}
  .stats-grid>div:nth-child(2)::after{display:none}
}
@media(max-width:680px){
  .section{padding:64px 0}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stats-grid>div::after{display:none !important}
  .feat-grid,.test-grid,.cap-grid,.how-grid,.plan-grid,.demo-wrap,.fb-body ul{grid-template-columns:1fr}
  .feat-block,.feat-block.rev{grid-template-columns:1fr; text-align:center; gap:20px}
  .feat-block.rev .fb-icon{order:0}
  .foot-grid{grid-template-columns:1fr 1fr; gap:24px}
  .hero-points{grid-template-columns:1fr}
  .float-chip{display:none}
  .pm{transform:none} .pm:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .pm{transform:none}
}

/* ============ HOME v10 — new editorial/bento arrangement ============ */
.hero-center{padding:64px 0 0;text-align:center}
.hero-center .hero-grid{display:block}
.hero-center .badge-pill{margin:0 auto}
.hero-center h1{max-width:880px;margin-left:auto;margin-right:auto}
.hero-center .lead{margin-left:auto;margin-right:auto}
.hero-center .hero-cta{justify-content:center}
.hero-center .hero-trust{justify-content:center;margin-bottom:48px}

/* app preview (browser frame + dashboard) */
.app-showcase{position:relative;padding-bottom:8px}
.app-preview{position:relative;z-index:1;max-width:980px;margin:0 auto;background:#fff;border-radius:16px 16px 0 0;
  box-shadow:0 -10px 60px -12px rgba(0,0,0,.5);overflow:hidden;border:1px solid rgba(255,255,255,.12);animation:pmrise 1s var(--ease) both}
.ap-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#f6f7fc;border-bottom:1px solid var(--line)}
.ap-bar .d{width:11px;height:11px;border-radius:50%}.ap-bar .d1{background:#f87171}.ap-bar .d2{background:#fbbf24}.ap-bar .d3{background:#34d399}
.ap-bar .url{margin-left:12px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:5px 14px;font-size:12px;color:var(--muted);font-family:Inter}
.ap-body{display:grid;grid-template-columns:64px 1fr;min-height:330px;text-align:left}
.ap-side{background:linear-gradient(180deg,#1a2048,#11152e);padding:18px 0;display:flex;flex-direction:column;align-items:center;gap:8px}
.ap-side .si{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#9aa3c7;font-size:15px}
.ap-side .si.on{background:rgba(255,255,255,.12);color:#fff}
.ap-main{padding:22px;background:#f6f7fc}
.ap-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.ap-stat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px}
.ap-stat .l{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}
.ap-stat .v{font-family:Sora;font-weight:800;font-size:22px;color:var(--head);margin-top:5px}
.ap-stat .v small{font-size:11px;color:var(--accent);font-weight:600}
.ap-stat .ico{width:26px;height:26px;border-radius:8px;display:inline-grid;place-items:center;font-size:12px;color:#fff}
.ap-panel{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px}
.ap-panel .ph{display:flex;align-items:center;margin-bottom:12px}.ap-panel .ph b{font-family:Sora;font-size:14px;color:var(--head)}
.ap-panel .ph span{margin-left:auto;font-size:11px;color:var(--accent);font-weight:700;background:var(--accent-soft,#ecfdf5);padding:3px 9px;border-radius:999px}
.ap-chart{display:flex;align-items:flex-end;gap:10px;height:104px}
.ap-chart i{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--p2),var(--p));opacity:.9}
.ap-chart i:nth-child(even){background:linear-gradient(180deg,#34d399,var(--accent))}

/* logo / trust strip */
.trust-strip{background:var(--forest2);padding:20px 0}
.trust-strip .in{display:flex;align-items:center;justify-content:center;gap:14px 26px;flex-wrap:wrap}
.trust-strip .lbl{color:#a6aede;font-size:13px;font-weight:600}
.trust-strip .pl{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#dfe3ff}

/* bento grid */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:18px}
.bento-item{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:28px;position:relative;overflow:hidden;transition:.22s var(--ease)}
.bento-item:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:#d7dbef}
.bento-item.big{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(160deg,#1b2150,var(--forest));color:#e7e9ff;border:0}
.bento-item.big h3{color:#fff;font-size:26px}.bento-item.big p{color:#b9c0e8;font-size:15px}
.bento-item .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:22px;color:#fff;margin-bottom:16px;background:linear-gradient(140deg,var(--p2),var(--p-dark));box-shadow:var(--glow-jade)}
.bento-item.big .ic{width:60px;height:60px;font-size:26px;background:linear-gradient(140deg,#34d399,var(--accent));box-shadow:var(--glow-gold)}
.bento-item:nth-child(3) .ic,.bento-item:nth-child(5) .ic{background:linear-gradient(140deg,#34d399,var(--accent))}
.bento-item h3{font-size:18px;margin-bottom:7px}.bento-item p{font-size:14px;color:var(--body);margin:0}
.bento-mini{display:flex;gap:10px;margin-top:18px}
.bento-mini .bm{flex:1;background:rgba(255,255,255,.07);border-radius:12px;padding:12px;text-align:center}
.bento-mini .bm b{display:block;font-family:Sora;font-size:20px;color:#fff}.bento-mini .bm span{font-size:11px;color:#a6aede}

/* use-case cards */
.uc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.uc{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px 20px;text-align:center;transition:.2s var(--ease)}
.uc:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#d7dbef}
.uc .ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:23px;margin:0 auto 14px;background:var(--p-soft,#eef2ff);color:var(--p)}
.uc h4{font-family:Sora;font-size:16px;color:var(--head);margin-bottom:5px}.uc p{font-size:13px;color:var(--muted);margin:0}

@media(max-width:860px){.bento{grid-template-columns:1fr 1fr}.bento-item.big{grid-column:span 2}.uc-grid{grid-template-columns:1fr 1fr}.ap-body{grid-template-columns:1fr}.ap-side{flex-direction:row;justify-content:center}.ap-stats{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.bento,.uc-grid{grid-template-columns:1fr}.bento-item.big{grid-column:span 1}}

/* ============ HOMEPAGE REDESIGN — new sections ============ */
/* Centered section header */
.sec-head{max-width:680px;margin:0 auto 52px;text-align:center}
.sec-head .eyebrow{margin-left:auto;margin-right:auto}
.sec-head h2{margin-bottom:14px}
.sec-head .sub{margin-left:auto;margin-right:auto}

/* Hero points centered */
.hero.hero-center .hero-points{margin-left:auto;margin-right:auto;justify-content:center;max-width:640px;grid-template-columns:repeat(3,auto);gap:10px 26px}
.hero-points span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--body);font-weight:500;white-space:nowrap}
.hero-points span i{color:var(--gold-d,#059669);font-size:15px}

/* Why Shopia grid */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.why-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:30px 24px;transition:.24s var(--ease);position:relative;overflow:hidden}
.why-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--jade),var(--gold));opacity:0;transition:.24s}
.why-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg,0 24px 50px -20px rgba(15,23,42,.2));border-color:transparent}
.why-card:hover::before{opacity:1}
.why-card .ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:24px;color:#fff;margin-bottom:18px}
.why-card .ic.ic-emerald{background:linear-gradient(140deg,#34d399,#059669)}
.why-card .ic.ic-indigo{background:linear-gradient(140deg,#818cf8,#4338ca)}
.why-card .ic.ic-amber{background:linear-gradient(140deg,#fbbf24,#d97706)}
.why-card .ic.ic-sky{background:linear-gradient(140deg,#38bdf8,#0284c7)}
.why-card h3{font-family:Sora;font-size:17.5px;color:var(--head);margin-bottom:9px;letter-spacing:-.01em}
.why-card p{font-size:13.5px;color:var(--body);margin:0;line-height:1.6}

/* CTA band improvements */
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.cta-fine{margin-top:22px!important;font-size:13px!important;opacity:.85;display:inline-flex;align-items:center;gap:8px}
.cta-fine i{opacity:.9}

/* ============ RESPONSIVE polish ============ */
@media(max-width:980px){
  .why-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .sec-head{margin-bottom:38px}
  .hero.hero-center .hero-points{grid-template-columns:1fr;text-align:left;max-width:280px;gap:12px}
  .why-grid{grid-template-columns:1fr;gap:14px}
  .why-card{padding:24px 22px}
  .cta-actions{flex-direction:column;align-items:stretch}
  .cta-actions .btn{width:100%;justify-content:center}
}

/* ===================================================================
   LANDING DARK MODE OVERRIDES + THEME TOGGLE + LANGUAGE PICKER
   =================================================================== */
[data-theme="dark"] .nav{background:rgba(11,16,32,.82); border-bottom-color:var(--line)}
[data-theme="dark"] .nav.scrolled{background:rgba(11,16,32,.95)}
[data-theme="dark"] .lang-dd-menu{background:var(--paper); border-color:var(--line)}
[data-theme="dark"] .feat,[data-theme="dark"] .test-card,[data-theme="dark"] .how-step,
[data-theme="dark"] .faq-item,[data-theme="dark"] .cap,[data-theme="dark"] .price-card,
[data-theme="dark"] .float-chip,[data-theme="dark"] .pm-card{background:var(--paper); border-color:var(--line)}
[data-theme="dark"] .btn-ghost{background:var(--paper); color:var(--head); border-color:var(--line)}
[data-theme="dark"] .nav-burger{background:var(--paper); color:var(--head); border-color:var(--line)}
[data-theme="dark"] .lang-dd-btn{background:var(--paper); color:var(--ink); border-color:var(--line)}

/* Theme toggle button (landing) */
.theme-btn{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:var(--paper);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.18s;font-size:16px}
.theme-btn:hover{color:var(--jade);border-color:var(--jade)}
.theme-btn .fa-sun{display:none}
[data-theme="dark"] .theme-btn .fa-moon{display:none}
[data-theme="dark"] .theme-btn .fa-sun{display:inline-block}

/* Premium language pill with flag image */
.lang-dd-btn .flag-ico{width:20px;height:14px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.lang-dd-menu a{display:flex;align-items:center;gap:9px}
.lang-dd-menu .flag-ico{width:20px;height:14px;border-radius:3px;object-fit:cover}

/* ============================================================
   Module map — grouped capability cards (replaces flat grid)
   ============================================================ */
.lx-map{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.lx-mapcard{background:#fff;border:1px solid var(--lx-line,#e6ecf3);border-radius:18px;padding:26px 24px;transition:.22s}
.lx-mapcard:hover{transform:translateY(-5px);box-shadow:0 22px 48px -22px rgba(15,35,80,.28);border-color:var(--lx-primary,#4f46e5)}
.mc-head{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.mc-ic{width:46px;height:46px;border-radius:13px;background:var(--lx-primary-soft,#eef2ff);color:var(--lx-primary,#4f46e5);display:grid;place-items:center;font-size:19px;flex:0 0 auto}
.mc-head h3{font-size:17px;font-weight:800;margin:0;letter-spacing:-.2px}
.mc-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.mc-list li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--lx-muted,#64748b);line-height:1.45}
.mc-list li i{color:var(--lx-primary,#4f46e5);font-size:11px;margin-top:5px;flex:0 0 auto}
.lx-mapcta{background:linear-gradient(150deg,var(--lx-primary,#4f46e5),#7c3aed);color:#fff;display:flex;flex-direction:column;justify-content:center;border:0}
.lx-mapcta h3{font-size:20px;font-weight:800;margin:0 0 10px}
.lx-mapcta p{font-size:14.5px;opacity:.92;margin:0 0 20px;line-height:1.55}
.lx-btn-ghost{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);color:#fff;padding:11px 20px;border-radius:11px;font-weight:700;font-size:14px;text-decoration:none;transition:.18s;align-self:flex-start}
.lx-btn-ghost:hover{background:#fff;color:var(--lx-primary,#4f46e5);gap:13px}
@media(max-width:980px){.lx-map{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.lx-map{grid-template-columns:1fr}}

/* ============================================================
   Works-offline band
   ============================================================ */
.lx-offline{background:#0f172a;color:#fff;padding:74px 0;overflow:hidden}
.lx-off-in{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.lx-off-copy .lx-eyebrow{color:#38bdf8}
.lx-off-copy h2{font-size:34px;font-weight:800;margin:12px 0 14px;letter-spacing:-.6px;line-height:1.18}
.lx-off-copy p{font-size:16px;color:#cbd5e1;line-height:1.65;margin:0 0 22px}
.lx-off-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lx-off-list li{display:flex;align-items:flex-start;gap:11px;font-size:15px;color:#e2e8f0}
.lx-off-list li i{color:#34d399;margin-top:4px;flex:0 0 auto}
.lx-off-art{position:relative;min-height:250px;display:grid;place-items:center}
.off-chip{position:absolute;background:#1e293b;border:1px solid #334155;border-radius:14px;padding:15px 22px;font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:11px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.off-chip-1{top:8%;left:2%;color:#fbbf24;animation:offFloat 5s ease-in-out infinite}
.off-chip-2{top:41%;left:26%;color:#e2e8f0;animation:offFloat 5s ease-in-out infinite .7s}
.off-chip-3{bottom:8%;left:8%;color:#38bdf8;animation:offFloat 5s ease-in-out infinite 1.4s}
@keyframes offFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@media(max-width:860px){
  .lx-off-in{grid-template-columns:1fr;gap:34px}
  .lx-off-copy h2{font-size:27px}
  .lx-off-art{min-height:215px}
  .off-chip{font-size:13px;padding:12px 17px}
  .off-chip-1{left:0}.off-chip-2{left:20%}.off-chip-3{left:4%}
}
@media(prefers-reduced-motion:reduce){.off-chip{animation:none}}

/* ============================================================
   Phone layout
   ------------------------------------------------------------
   Fourteen grids kept three and four columns all the way down to
   a 375px screen, so every card was squeezed to about ninety
   pixels and the page could only be read by pinching. The media
   queries below them never mentioned these grids at all.

   Everything here only reduces column counts and type size. No
   content is hidden: a phone gets the whole page, stacked.
   ============================================================ */

/* Tablet and below: four columns is already too many. */
@media (max-width: 900px) {
  .stats-band .stats-grid,
  .plan-grid,
  .uc-grid,
  .why-grid { grid-template-columns: repeat(2, 1fr) !important; }

  .feat-grid,
  .test-grid,
  .cap-grid,
  .how-grid,
  .ap-stats,
  .bento,
  .lx-map { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Phone: one column, and type that fits the width it has. */
@media (max-width: 640px) {
  .stats-band .stats-grid,
  .feat-grid, .test-grid, .cap-grid, .how-grid, .plan-grid,
  .ap-stats, .bento, .uc-grid, .why-grid, .lx-map,
  .fb-grid, .sol-grid, .lx-feat-grid, .foot-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* Two short items still read fine side by side. */
  .stats-band .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-points,
  .hero.hero-center .hero-points { grid-template-columns: 1fr !important; gap: 9px; }

  /* Oversized decorative type overflows its box on a narrow screen. */
  .test-card::before { font-size: 44px !important; }
  .fb-icon { font-size: 34px !important; }

  .section { padding: 44px 0 !important; }
  .section > .container > h2 { font-size: 25px !important; line-height: 1.22 }
  .section .sub { font-size: 15px !important; margin-bottom: 26px }

  .hero { padding: 46px 0 40px !important; text-align: left }
  .hero h1 { font-size: 30px !important; line-height: 1.15 }
  .hero .lead { font-size: 15.5px !important; margin-bottom: 22px }
  .hero .btn, .cta-band .btn { width: 100%; justify-content: center }

  .cta-band { padding: 42px 0 !important }
  .cta-band h2 { font-size: 24px !important }
  .cta-band p { font-size: 15.5px !important }

  .container { padding-left: 16px !important; padding-right: 16px !important }

  /* Cards: a little less padding buys a lot of width. */
  .feat-card, .test-card, .cap-card, .plan-card, .uc-card,
  .why-card, .how-card, .fb-card { padding: 20px 17px !important }

  /* A price table has no business scrolling sideways on a phone. */
  .plan-card { max-width: none }

  /* Menus must not run off the edge. */
  .lang-dd-menu { min-width: 0; width: max-content; max-width: calc(100vw - 24px) }
}

/* Nothing on this page may drag the viewport sideways. */
@media (max-width: 640px) {
  .hero, .section, .cta-band, .stats-band, footer { max-width: 100%; overflow-x: clip }
  img, svg, video { max-width: 100% }
}

/* ============================================================
   Header menu on a phone  —  modelled on the in-app sidebar
   ------------------------------------------------------------
   The same shape a signed-in user already knows: a full-height
   dark panel with the brand at the top, the links down the
   middle, and a footer carrying the language switch, the theme
   toggle and the way in. It fills the screen so nothing shows
   through and there is no sideways scroll.
   ============================================================ */
.nav-burger { display: none }
.nav-veil { display: none }
.nav-drawer-head, .nav-drawer-foot, .nav-drawer-tools, .nav-sec { display: none }

@media (max-width: 900px) {
  .nav-in { gap: 10px }

  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: 0 0 42px; order: 3;
    border: 0; background: none; cursor: pointer;
    border-radius: 11px; font-size: 20px; color: var(--head, #0f172a);
  }
  .nav-burger:active { background: rgba(0,0,0,.06) }

  /* On a phone the top bar carries only the brand and the menu button. */
  .nav-right { display: none !important }
  .logo { font-size: 17px; flex: 1 }
  .logo .mark { width: 30px; height: 30px; font-size: 14px }

  /* The panel: full screen, dark, like the app's own rail. */
  .nav-links {
    position: fixed; inset: 0; z-index: 1300;
    width: 100%; height: 100%;
    background: linear-gradient(180deg, #0b1b3a 0%, #0f2350 100%);
    color: #c7d9f5;
    display: flex !important; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 0 0 calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0) }

  /* Brand row at the top, with the close button. */
  .nav-drawer-head {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 18px 18px;
    position: sticky; top: 0; z-index: 2;
    background: #0b1b3a;
  }
  .ndh-logo {
    width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px;
    display: grid; place-items: center; font-size: 21px; color: #fff;
    background: linear-gradient(135deg, #2dd4bf, #3b82f6);
    box-shadow: 0 8px 20px -5px rgba(59,130,246,.55);
  }
  .nav-drawer-head b { font-size: 21px; flex: 1; color: #fff; font-weight: 800; letter-spacing: -.3px }
  .nav-drawer-head button {
    border: 0; background: rgba(255,255,255,.08); border-radius: 10px;
    width: 36px; height: 36px; font-size: 17px; cursor: pointer;
    color: #fff; display: grid; place-items: center;
  }

  /* Section header, muted uppercase, like MAIN / PRODUCTS & STOCK. */
  .nav-sec {
    display: block;
    font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px;
    color: rgba(199,217,245,.5); font-weight: 700;
    padding: 18px 22px 8px;
  }

  /* Links: icon + label rows, like the app sidebar. */
  .nav-links a {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    margin: 3px 12px; padding: 13px 15px; border-radius: 12px;
    font-size: 15.5px; font-weight: 600;
    color: #c7d9f5; text-decoration: none;
  }
  .nav-links a i { width: 22px; text-align: center; font-size: 15px; color: #7f9cc9 }
  .nav-links a:active { background: rgba(255,255,255,.06) }

  /* The active item: a solid blue gradient pill with a bright bar hugging the
     far-left screen edge — exactly the Dashboard state in the screenshot. */
  .nav-links a.on, .nav-links a.active {
    color: #fff; font-weight: 700;
    background: linear-gradient(100deg, #1e40af 0%, #2563eb 55%, #3b82f6 100%);
    box-shadow: 0 10px 26px -10px rgba(37,99,235,.75);
  }
  .nav-links a.on::before, .nav-links a.active::before {
    content: ""; position: absolute; left: -12px; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 26px; border-radius: 0 4px 4px 0;
    background: #60a5fa;
  }
  .nav-links a.on i, .nav-links a.active i { color: #fff }

  /* The footer, styled exactly like the app's drawer-extra. */
  .nav-drawer-tools {
    display: block; margin-top: auto;
    padding: 14px 16px 6px;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .nav-drawer-tools .dx-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 4px; margin-bottom: 4px;
  }
  .nav-drawer-tools .dx-lbl { font-size: 12.5px; opacity: .7; color: #fff; flex: 1 }
  .drawer-langs { display: flex; gap: 5px }
  .drawer-langs a {
    padding: 6px 11px; border-radius: 8px; font-size: 11.5px; font-weight: 700;
    text-decoration: none; color: #fff; background: rgba(255,255,255,.08);
  }
  .drawer-langs a.on { background: var(--accent, #2563eb); color: #fff }
  .drawer-tool {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 11px 4px; border: 0; background: none; color: #c7d9f5;
    font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
  }
  .drawer-tool i { width: 20px; text-align: center; font-size: 15px; opacity: .8 }
  .drawer-tool .fa-sun { display: none }
  [data-theme="dark"] .drawer-tool .fa-moon { display: none }
  [data-theme="dark"] .drawer-tool .fa-sun { display: inline }

  /* Login and start, as full-width rows at the very bottom. */
  .nav-drawer-foot {
    display: flex; flex-direction: column; gap: 9px;
    padding: 6px 16px 0;
  }
  .nav-drawer-foot .btn { width: 100%; justify-content: center; padding: 13px 16px }
  .nav-drawer-foot .btn-ghost {
    background: rgba(255,255,255,.08); color: #fff; border: 0;
  }
}

/* ============================================================
   Extra flourish — animations, motion, life
   ------------------------------------------------------------
   Layered on top of the existing structure; nothing is moved,
   only brought to life. Every animation respects the reader who
   asked their system for less motion.
   ============================================================ */

/* --- reveal on scroll: sections rise and fade as they arrive --- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s } .reveal.d2 { transition-delay: .16s }
.reveal.d3 { transition-delay: .24s } .reveal.d4 { transition-delay: .32s }

/* --- floating: gentle idle motion for cards and shots --- */
@keyframes lx-float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-12px) } }
@keyframes lx-float-slow { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-7px) } }
.lx-hero-shot { animation: lx-float 6s ease-in-out infinite; }

/* --- orbs drift and breathe, colour shifting --- */
@keyframes lx-drift {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(30px,-24px) scale(1.08); }
  66%  { transform: translate(-22px,18px) scale(.95); }
  100% { transform: translate(0,0) scale(1); }
}
.orb { animation: lx-drift 18s ease-in-out infinite; }
.orb.o2 { animation-duration: 22s; animation-delay: -4s }
.orb.o3 { animation-duration: 26s; animation-delay: -9s }

/* --- animated gradient text on the headline --- */
@keyframes lx-hue { 0%{ background-position: 0% 50% } 100%{ background-position: 200% 50% } }
.lx-h1 .l2 {
  background: linear-gradient(100deg, #2563eb, #7c3aed, #06b6d4, #2563eb);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: lx-hue 5s linear infinite;
}

/* --- shimmer sweep across primary buttons --- */
.lx-btn-primary { position: relative; overflow: hidden; }
.lx-btn-primary::after {
  content: ""; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
.lx-btn-primary:hover::after { animation: lx-sweep .8s ease; }
@keyframes lx-sweep { to { left: 130%; } }

/* --- cards lift and glow on hover --- */
.lx-card, .feat-card, .plan-card, .lx-feat, .lx-pay-card, .fb-card {
  transition: transform .3s cubic-bezier(.16,.8,.3,1), box-shadow .3s, border-color .3s;
}
.lx-card:hover, .feat-card:hover, .lx-feat:hover, .lx-pay-card:hover, .fb-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -20px rgba(37,99,235,.35);
}
.plan-card:hover { transform: translateY(-8px) scale(1.015); box-shadow: 0 26px 50px -22px rgba(37,99,235,.4); }

/* --- counting stats pulse a touch when revealed --- */
@keyframes lx-pop { 0%{ transform: scale(.85); opacity: 0 } 60%{ transform: scale(1.05) } 100%{ transform: scale(1); opacity: 1 } }
.lx-proof.in .lx-proof-n, .stats-band.in .stat-value { animation: lx-pop .6s cubic-bezier(.16,.8,.3,1) both; }

/* --- icons wobble on card hover, a small delight --- */
@keyframes lx-wob { 0%,100%{ transform: rotate(0) } 25%{ transform: rotate(-8deg) } 75%{ transform: rotate(8deg) } }
.feat-card:hover .fb-icon, .lx-feat:hover i, .lx-pay-card:hover i { animation: lx-wob .5s ease; }

/* --- underline grows under nav links --- */
@media (min-width: 901px) {
  .nav-links a { position: relative; }
  .nav-links a::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
    background: var(--accent, #2563eb); transform: scaleX(0); transform-origin: left;
    transition: transform .28s ease;
  }
  .nav-links a:hover::after, .nav-links a.on::after { transform: scaleX(1); }
}

/* --- respect a reader who wants calm --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}


/* --- hero shot: glow halo and a shine that sweeps across on load --- */
.lx-hero-shot { position: relative; border-radius: 20px; }
.lx-hero-shot::before {
  content: ""; position: absolute; inset: -30px; z-index: -1; border-radius: 40px;
  background: radial-gradient(60% 60% at 50% 40%, rgba(124,58,237,.28), rgba(59,130,246,.12) 60%, transparent 75%);
  filter: blur(10px); animation: lx-float-slow 7s ease-in-out infinite;
}
.lx-hero-shot img { border-radius: 18px; display: block; width: 100%; }

/* floating chips get their own gentle bob, offset so they don't move as one */
.lx-float { animation: lx-float 5s ease-in-out infinite; }
.lx-float.f2 { animation-delay: -2.5s; animation-duration: 6s; }

/* --- section illustrations: rounded, shadowed, lively on hover --- */
.lx-illust {
  width: 100%; max-width: 420px; border-radius: 20px; display: block;
  filter: drop-shadow(0 20px 40px rgba(37,99,235,.22));
  transition: transform .4s cubic-bezier(.16,.8,.3,1);
}
.lx-illust:hover { transform: translateY(-6px) rotate(-1deg); }

/* --- colourful section backdrops: soft tinted washes, not flat white --- */
.lx-sec:nth-of-type(even) { background: linear-gradient(180deg, #ffffff, #f5f8ff); }
.lx-pay { background: linear-gradient(160deg, #faf5ff 0%, #eff6ff 100%); }
.lx-offline { background: linear-gradient(160deg, #f0fdfa 0%, #eff6ff 100%); }

/* a bright gradient rule under section titles */
.lx-sec h2::after, .lx-sec-title h2::after {
  content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; margin-top: 14px;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
}
.lx-sec.lx-sec-alt h2::after { margin-left: auto; margin-right: auto; }

/* ============================================================
   v3.2.2 — Header rebuilt: desktop bar + simple mobile menu
   Separate elements so neither ever breaks the other.
   ============================================================ */
/* Desktop horizontal links */
.nav-desktop{display:flex; align-items:center; gap:4px; margin:0 auto}
.nav-desktop a{position:relative; padding:9px 15px; border-radius:10px; font-weight:500; font-size:15px; color:var(--body); transition:.16s; text-decoration:none}
.nav-desktop a:hover{color:var(--head); background:var(--cream2)}
.nav-desktop a.on{color:var(--jade-d); font-weight:600}
.nav-desktop a.on::after{content:""; position:absolute; left:15px; right:15px; bottom:3px; height:2.5px; border-radius:2px; background:linear-gradient(90deg,var(--jade),var(--gold))}

/* Hamburger: three bars that morph to an X */
.nav-burger{display:none; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:44px; padding:0 11px; border:1.5px solid var(--line); border-radius:11px;
  background:var(--paper); cursor:pointer}
.nav-burger span{display:block; height:2.5px; width:100%; border-radius:2px; background:var(--head); transition:.25s}
.nav-burger.x span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-burger.x span:nth-child(2){opacity:0}
.nav-burger.x span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Mobile menu — hidden by default, shown when .show is added */
.mnav{display:none; border-top:1px solid var(--line); background:var(--paper)}
.mnav.show{display:block; animation:mnavDrop .22s ease}
@keyframes mnavDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mnav-link{display:block; padding:17px 24px; font-size:18px; font-weight:600; color:var(--head);
  text-decoration:none; border-bottom:1px solid var(--line); transition:.15s}
.mnav-link:hover{background:var(--cream2)}
.mnav-link.on{color:var(--jade-d)}
.mnav-link.on{box-shadow:inset 3px 0 0 var(--jade)}
.mnav-foot{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 24px 22px; flex-wrap:wrap}
.mnav-langs{display:flex; gap:10px}
.mnav-langs a{display:block; width:38px; height:26px; border-radius:5px; overflow:hidden; border:2px solid transparent; opacity:.6; transition:.15s}
.mnav-langs a.on{border-color:var(--jade); opacity:1}
.mnav-langs img{width:100%; height:100%; object-fit:cover; display:block}
.mnav-social{display:flex; align-items:center; gap:8px}
.mnav-social a, .mnav-theme{width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background:var(--cream2); color:var(--head); font-size:17px; border:0; cursor:pointer; text-decoration:none; transition:.15s}
.mnav-social a:hover, .mnav-theme:hover{background:var(--jade); color:#fff}
body.mnav-open{overflow:hidden}

/* Breakpoint: below 981px show the mobile menu, hide desktop bits */
@media(max-width:980px){
  .nav-desktop{display:none !important}
  .nav-right{display:none !important}
  .nav-burger{display:flex !important}
  .nav-in{justify-content:space-between}
}
@media(min-width:981px){
  .mnav{display:none !important}
  .nav-burger{display:none !important}
}

/* Demo free plan card — subtle emerald accent to stand out as the entry point */
.plan-demo{border:2px solid #10b981 !important}
.plan-demo .price{color:#059669}