/* ============================================================
   FloatLink — Premium Website Stylesheet
   Connection-themed Telecom Float Transfer Platform
   Palette: Navy #0B132B | Blue #2563EB | Green #2ECC71
   ============================================================ */

/* Fonts loaded via <link> in header.php for non-blocking performance */
@font-face {
  font-family: 'Batica';
  src: url('../fonts/Batica.woff2') format('woff2'),
       url('../fonts/Batica.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── CSS Tokens (Premium Dark Theme) ─────────────────────────────── */
:root {
  --navy:          #0B132B; /* Deep dark background */
  --navy-mid:      #111827; /* Alternate dark background */
  --navy-light:    #1F2937; /* Even lighter dark */
  --navy-card:     rgba(17, 24, 39, 0.85);
  
  --blue:          #2563EB;
  --blue-light:    #60A5FA;
  --blue-glow:     rgba(37,99,235,0.25);
  
  --green:         #2ECC71; /* Bright green for contrast on dark */
  --green-dark:    #27AE60;
  --green-glow:    rgba(46,204,113,0.25);

  --orange:        #FF6B00; /* Homer Price accent */
  --orange-glow:   rgba(255,107,0,0.25);
  
  --light:         #F8FAFC; /* Was dark, now light */
  --white:         #FFFFFF; /* Was main dark text, now main white */
  --pure-white:    #FFFFFF;
  --gray:          #94A3B8;
  --muted:         #94A3B8; /* Muted light text */

  --glass:         rgba(15, 23, 42, 0.6);
  --glass-2:       rgba(15, 23, 42, 0.85);
  --glass-border:  rgba(255, 255, 255, 0.08);
  --glass-border2: rgba(255, 255, 255, 0.15);

  --shadow-sm:  0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-md:  0 12px 40px rgba(0, 0, 0, 0.35);
  --shadow-lg:  0 28px 70px rgba(0, 0, 0, 0.5);
  --glow-green: 0 0 40px rgba(46,204,113,0.25);
  --glow-blue:  0 0 40px rgba(37,99,235,0.25);

  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 9999px;

  /* Metamorphosis Transitions */
  --ease:      cubic-bezier(0.25, 1, 0.5, 1);
  --tx:        all 0.45s var(--ease);
  --tx-slow:   all 0.80s var(--ease);

  --font:      'Inter', system-ui, sans-serif;
  --font-disp: 'Space Grotesk', sans-serif;
  --nav-h:     80px;
}

/* ── Reset ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
@keyframes pageFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
body{font-family:var(--font);background:var(--navy);color:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;animation:pageFadeIn 0.6s var(--ease) forwards;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul,ol{list-style:none;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
input,textarea,select{font-family:inherit;}
::selection{background:rgba(46,204,113,0.35);color:var(--white);}
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--navy);}
::-webkit-scrollbar-thumb{background:var(--navy-light);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--green);}

/* ── Typography ──────────────────────────────────────────────── */
h1,h2,h3,h4,h5{font-family:var(--font-disp);line-height:1.15;font-weight:700;}
h1{font-size:clamp(2.4rem,5.5vw,4.8rem);font-weight:800;}
h2{font-size:clamp(1.9rem,4vw,3.2rem);}
h3{font-size:clamp(1.25rem,2.5vw,1.75rem);}
h4{font-size:1.2rem;}
p{line-height:1.78;color:var(--muted);}

.highlight-green{background:linear-gradient(135deg,var(--green),#00d88a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:'Batica', 'Space Grotesk', sans-serif;}
.highlight-blue{background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:'Batica', 'Space Grotesk', sans-serif;}
.font-batica{font-family:'Batica', 'Space Grotesk', sans-serif;}

/* ── Layout ──────────────────────────────────────────────────── */
.container{max-width:1280px;margin:0 auto;padding:0 2rem;}
.section{padding:6rem 0;}
.section-sm{padding:3.5rem 0;}

.section-tag{
  display:inline-flex;align-items:center;gap:0.6rem;
  background:rgba(46,204,113,0.08);border:1px solid rgba(46,204,113,0.22);
  border-radius:var(--r-pill);padding:0.45rem 1.15rem;
  font-size:0.78rem;font-weight:700;color:var(--green);
  text-transform:uppercase;letter-spacing:0.1em;margin-bottom:1.2rem;
}
.section-tag .live-dot{
  width:7px;height:7px;background:var(--green);border-radius:50%;
  animation:live-ping 2s ease-in-out infinite;
}
.section-title{font-family:var(--font-disp);font-size:clamp(1.9rem,3.8vw,3rem);font-weight:700;line-height:1.2;margin-bottom:1rem;}
.section-sub{font-size:1.05rem;color:var(--muted);max-width:560px;line-height:1.75;}
.section-header{margin-bottom:3.5rem;}
.section-header.center{text-align:center;}
.section-header.center .section-sub{margin:0 auto;}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:0.55rem;
  padding:0.85rem 1.9rem;border-radius:var(--r-pill);
  font-size:0.93rem;font-weight:600;transition:var(--tx);
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn::after{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,0.12);opacity:0;
  transition:var(--tx);
}
.btn:hover::after{opacity:1;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}

.btn-primary{
  background:var(--green);color:var(--pure-white);font-weight:700;
  box-shadow:0 8px 28px rgba(46,204,113,0.42);
}
.btn-primary:hover{background:var(--green-dark);box-shadow:0 14px 38px rgba(46,204,113,0.55);}
/* By default, modal submit buttons are grayed out until ready */
#wishlist-form .btn-primary{opacity:0.5;pointer-events:none;filter:grayscale(1);}
#wishlist-form .btn-primary.ready{opacity:1;pointer-events:auto;filter:grayscale(0);background:#00FF66;box-shadow:0 0 35px rgba(0,255,102,0.8);transform:scale(1.02);color:#0B132B;}

.btn-outline{
  background:transparent;color:var(--white);
  border:1.5px solid var(--glass-border2);backdrop-filter:blur(10px);
}
.btn-outline:hover{border-color:var(--green);color:var(--green);box-shadow:0 0 20px rgba(46,204,113,0.14);}

.btn-blue{
  background:var(--blue);color:var(--pure-white);
  box-shadow:0 8px 28px rgba(37,99,235,0.42);
}
.btn-blue:hover{background:var(--blue-light);box-shadow:0 14px 38px rgba(37,99,235,0.55);}

.btn-sm{padding:0.62rem 1.4rem;font-size:0.85rem;}
.btn-lg{padding:1.05rem 2.4rem;font-size:1rem;}

/* ── Glass Card ──────────────────────────────────────────────── */
.glass{
  background:var(--glass);border:1px solid var(--glass-border);
  border-radius:var(--r-lg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:var(--tx);
}
.glass:hover{background:var(--glass-2);border-color:var(--glass-border2);transform:translateY(-5px);box-shadow:var(--shadow-md);}

/* Badge */
.badge{
  display:inline-flex;align-items:center;padding:0.22rem 0.7rem;
  border-radius:var(--r-pill);font-size:0.72rem;font-weight:700;
}
.badge-green{background:rgba(46,204,113,0.12);color:var(--green);border:1px solid rgba(46,204,113,0.22);}
.badge-blue{background:rgba(37,99,235,0.12);color:var(--blue-light);border:1px solid rgba(37,99,235,0.22);}

/* ══════════════════════════════════════════════════════════════
   SKELETON LOADING SYSTEM
   Shows structure immediately, swaps to real content on ready
══════════════════════════════════════════════════════════════ */

/* Shimmer base */
@keyframes skel-shimmer{
  0%{background-position:200% center;}
  100%{background-position:-200% center;}
}
.skel{
  background:linear-gradient(90deg,
    rgba(0,0,0,0.03) 0%,
    rgba(0,0,0,0.06) 35%,
    rgba(5,150,105,0.06) 50%,
    rgba(0,0,0,0.06) 65%,
    rgba(0,0,0,0.03) 100%
  );
  background-size:300% 100%;
  animation:skel-shimmer 2s ease-in-out infinite;
  display:block;
  border-radius:var(--r-md);
}

/* Toggle: default = skeleton showing, content hidden */
body:not(.sk-ready) .sk-skel{display:block !important;}
body:not(.sk-ready) .sk-real{opacity:0 !important;pointer-events:none;}
/* Toggle: sk-ready = skeleton gone, content visible */
body.sk-ready .sk-skel{display:none !important;}
body.sk-ready .sk-real{opacity:1 !important;pointer-events:auto;}
.sk-real{transition:opacity 0.7s ease;}

/* ── Hero Skeleton Overlay ───────────────────────────────────── */
.hero-skel-overlay{
  position:absolute;inset:0;z-index:4;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  transition:opacity 0.6s ease;
}
body.sk-ready .hero-skel-overlay{opacity:0;pointer-events:none;}
.hero-skel-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;
  align-items:center;width:100%;max-width:1280px;
  padding:0 2rem;padding-top:calc(var(--nav-h) + 2rem);
  min-height:100vh;
}
.hsk-col{width:100%;}
.hsk-badge{height:30px;width:240px;border-radius:var(--r-pill);margin-bottom:1.75rem;}
.hsk-t1{height:60px;width:90%;border-radius:12px;margin-bottom:0.65rem;}
.hsk-t2{height:60px;width:72%;border-radius:12px;margin-bottom:0.65rem;}
.hsk-t3{height:60px;width:54%;border-radius:12px;margin-bottom:2rem;}
.hsk-sub{display:flex;flex-direction:column;gap:0.55rem;margin-bottom:1.75rem;}
.hsk-sub span{height:13px;border-radius:var(--r-pill);}
.hsk-checks{display:flex;flex-direction:column;gap:0.75rem;margin-bottom:2.4rem;}
.hsk-check{display:flex;align-items:center;gap:0.75rem;}
.hsk-check-ico{width:20px;height:20px;border-radius:50%;flex-shrink:0;}
.hsk-check-line{height:13px;flex:1;border-radius:var(--r-pill);}
.hsk-btns{display:flex;gap:1rem;}
.hsk-btn{height:50px;border-radius:var(--r-pill);}
.hsk-vis{width:100%;aspect-ratio:4/3;border-radius:var(--r-xl);}

/* ── Stats Skeleton ──────────────────────────────────────────── */
.stats-skel{
  background:var(--navy-mid);border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);
  padding:2.75rem 0;
}
.stats-skel-inner{
  max-width:1280px;margin:0 auto;padding:0 2rem;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.ssk-item{display:flex;flex-direction:column;align-items:center;padding:1.5rem;gap:0.65rem;}
.ssk-num{height:48px;border-radius:10px;}
.ssk-lbl{height:12px;border-radius:var(--r-pill);}

/* ── Card Skeleton (for below-fold on inner pages) ───────────── */
.card-skel{
  padding:2.4rem;border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--glass-border);
}
.card-skel-ico{width:54px;height:54px;border-radius:var(--r-md);margin-bottom:1.4rem;}
.card-skel-title{height:18px;width:65%;border-radius:var(--r-pill);margin-bottom:0.75rem;}
.card-skel-lines{display:flex;flex-direction:column;gap:0.5rem;}
.card-skel-lines span{height:12px;border-radius:var(--r-pill);}

/* ── Responsive Skeleton ─────────────────────────────────────── */
@media(max-width:992px){
  .hero-skel-inner{grid-template-columns:1fr;padding-top:calc(var(--nav-h) + 1.5rem);}
  .hsk-col:last-child .hsk-vis{aspect-ratio:16/9;}
  .stats-skel-inner{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .hero-skel-inner{gap:2rem;}
  .hsk-badge{width:180px;}
  .hsk-t1,.hsk-t2,.hsk-t3{height:44px;}
  .stats-skel-inner{grid-template-columns:1fr 1fr;}
}
@media(max-width:520px){
  .hsk-btns{flex-direction:column;}
  .hsk-btn{width:100%;}
}

/* ── Navbar ──────────────────────────────────────────────────── */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);display:flex;align-items:center;padding:0 2rem;
  transition:var(--tx);
}
.navbar.scrolled{
  background:rgba(11,19,43,0.4);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border-bottom:1px solid var(--glass-border);box-shadow:var(--shadow-sm);
}
.nav-inner{
  max-width:1280px;width:100%;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-logo{display:flex;align-items:center;}
.nav-logo img{height:52px;width:auto;}
.nav-links{display:flex;align-items:center;gap:2.25rem;}
.nav-links a{
  font-size:0.88rem;font-weight:500;color:var(--muted);
  transition:var(--tx);position:relative;padding-bottom:2px;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-3px;left:0;
  width:0;height:2px;background:var(--green);
  transition:var(--tx);border-radius:2px;
}
.nav-links a:hover,.nav-links a.active{color:var(--white);}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-ctas{display:flex;align-items:center;gap:0.9rem;}

.ham{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;z-index:1001;}
.ham span{display:block;width:24px;height:2px;background:var(--white);border-radius:2px;transition:var(--tx);}
.ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.ham.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile Nav */
.mobile-nav{
  display:flex; visibility:hidden;
  position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; overflow-y:auto;
  background:rgba(11,19,43,0.7); backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px);
  border-bottom:1px solid var(--glass-border); padding:2rem;
  flex-direction:column; gap:0; z-index:999;
  clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none;
  transition: clip-path 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease, visibility 0.5s;
}
.mobile-nav.open{
  visibility:visible; clip-path: inset(0 0 0 0); opacity: 1; pointer-events: all;
}
.mobile-nav > a, .mobile-nav .mob-ctas {
  opacity: 0; transform: translateY(-15px);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.mobile-nav.open > a, .mobile-nav.open .mob-ctas {
  opacity: 1; transform: translateY(0);
}
/* Opening Delays */
.mobile-nav.open > a:nth-child(1) { transition-delay: 0.05s; }
.mobile-nav.open > a:nth-child(2) { transition-delay: 0.10s; }
.mobile-nav.open > a:nth-child(3) { transition-delay: 0.15s; }
.mobile-nav.open > a:nth-child(4) { transition-delay: 0.20s; }
.mobile-nav.open > a:nth-child(5) { transition-delay: 0.25s; }
.mobile-nav.open > a:nth-child(6) { transition-delay: 0.30s; }
.mobile-nav.open .mob-ctas        { transition-delay: 0.35s; }
/* Closing Delays (Reverse) */
.mobile-nav > a:nth-child(1) { transition-delay: 0.35s; }
.mobile-nav > a:nth-child(2) { transition-delay: 0.30s; }
.mobile-nav > a:nth-child(3) { transition-delay: 0.25s; }
.mobile-nav > a:nth-child(4) { transition-delay: 0.20s; }
.mobile-nav > a:nth-child(5) { transition-delay: 0.15s; }
.mobile-nav > a:nth-child(6) { transition-delay: 0.10s; }
.mobile-nav .mob-ctas        { transition-delay: 0.05s; }

.mobile-nav a{
  display:block;font-size:1rem;font-weight:500;color:var(--muted);
  padding:1rem 0;border-bottom:1px solid var(--glass-border);
}
.mobile-nav a:hover{color:var(--green);padding-left:8px;}
.mobile-nav .mob-ctas{display:flex;flex-direction:column;gap:0.75rem;margin-top:auto;padding-top:2rem;padding-bottom:1rem;}
.mobile-nav .mob-ctas a.btn{color:var(--white);border-bottom:none;padding:0.85rem 1.9rem;}
.mobile-nav .mob-ctas a.btn:hover{color:var(--white);padding-left:1.9rem;}
.mobile-nav .btn{justify-content:center;}
.mobile-nav .btn-primary{box-shadow:0 4px 15px rgba(46,204,113,0.2);}

/* ── Hero ────────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;overflow:hidden;
  background:var(--navy);
}
#network-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;opacity:0.05;
  transition: opacity 1.2s ease;
}
.hero:hover #network-canvas{
  opacity: 0.9;
}
.hero-radial{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity: 0;
  transition: opacity 1.2s ease;
  background:
    radial-gradient(ellipse 75% 75% at 50% 50%,rgba(37,99,235,0.15) 0%,transparent 100%),
    radial-gradient(ellipse 55% 45% at 15% 85%,rgba(5,150,105,0.12) 0%,transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 10%,rgba(37,99,235,0.12) 0%,transparent 60%);
}
.hero:hover .hero-radial{
  opacity: 1;
}
.hero-content{
  position:relative;z-index:2;
  max-width:1280px;margin:0 auto;padding:0 2rem;
  padding-top:calc(var(--nav-h) + 2rem);
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:4rem;min-height:100vh;
  width:100%;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:0.8rem;
  background:rgba(46,204,113,0.09);border:1px solid rgba(46,204,113,0.24);
  border-radius:var(--r-pill);padding:0.5rem 1.2rem;
  font-size:0.78rem;font-weight:700;color:var(--green);
  text-transform:uppercase;letter-spacing:0.1em;margin-bottom:1.75rem;
}
.pulse-ring{position:relative;width:10px;height:10px;flex-shrink:0;}
.pulse-ring::before{content:'';position:absolute;inset:0;background:var(--green);border-radius:50%;animation:live-ping 2s ease-in-out infinite;}
.pulse-ring::after{content:'';position:absolute;inset:1.5px;background:var(--green);border-radius:50%;}
.hero-title{
  font-family:var(--font-disp);font-size:clamp(2.6rem,5vw,4.6rem);
  font-weight:800;line-height:1.08;margin-bottom:1.5rem;color:var(--white);
}
.hero-title .accent{color:var(--green);}
.hero-title .accent-b{color:var(--blue-light);}
.hero-sub{font-size:1.1rem;color:var(--muted);line-height:1.82;max-width:500px;margin-bottom:2.2rem;}
.hero-checks{display:flex;flex-direction:column;gap:0.7rem;margin-bottom:2.4rem;}
.hero-check{display:flex;align-items:center;gap:0.75rem;font-size:0.93rem;color:var(--muted);}
.check-ico{
  width:20px;height:20px;border-radius:50%;
  background:rgba(46,204,113,0.14);border:1px solid rgba(46,204,113,0.30);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--green);font-size:0.65rem;font-weight:700;
}
.hero-actions{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;}

/* Hero Visual */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;}
.hero-mockup{position:relative;width:100%;max-width:560px;}
.hero-mockup-img{
  width:100%;border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg),0 0 100px rgba(37,99,235,0.18);
  border:1px solid var(--glass-border);
}
.hero-mockup-placeholder{
  width:100%;aspect-ratio:4/3;border-radius:var(--r-xl);
  background:linear-gradient(135deg,var(--navy-mid) 0%,var(--navy-light) 100%);
  border:1px solid var(--glass-border2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;
  box-shadow:var(--shadow-lg),0 0 80px rgba(37,99,235,0.15);
  position:relative;overflow:hidden;
}
.hero-mockup-placeholder::before{
  content:'';position:absolute;
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(46,204,113,0.08) 0%,transparent 70%);
  top:-50px;left:-50px;border-radius:50%;
}
.mock-icon{font-size:5rem;}
.mock-label{font-family:var(--font-disp);font-size:1.4rem;font-weight:700;color:var(--green);}
.mock-sub{font-size:0.9rem;color:var(--muted);text-align:center;}
.mock-stats{display:flex;gap:1.5rem;}
.mock-stat{text-align:center;}
.mock-stat-val{font-family:var(--font-disp);font-size:1.2rem;font-weight:700;color:var(--white);}
.mock-stat-lbl{font-size:0.7rem;color:var(--muted);}

/* Floating cards on hero */
.hfc{
  position:absolute;
  background:rgba(255,255,255,0.92);
  border:1px solid var(--glass-border2);
  border-radius:var(--r-md);padding:1rem 1.3rem;
  backdrop-filter:blur(20px);box-shadow:var(--shadow-md);
  min-width:150px;
}
.hfc.c1{bottom:-18px;left:-35px;animation:float-anim 3.2s ease-in-out infinite;}
.hfc.c2{top:18px;right:-35px;animation:float-anim 3.8s ease-in-out infinite reverse;}
.hfc-ico{font-size:1.4rem;margin-bottom:0.25rem;}
.hfc-lbl{font-size:0.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.2rem;}
.hfc-val{font-family:var(--font-disp);font-size:1.2rem;font-weight:800;color:var(--green);}
.hfc-sub{font-size:0.68rem;color:var(--muted);margin-top:0.15rem;}

/* Scroll hint */
.scroll-hint{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:0.4rem;
  font-size:0.68rem;color:var(--muted);letter-spacing:0.12em;text-transform:uppercase;
}
.scroll-line{width:1px;height:50px;background:linear-gradient(to bottom,var(--glass-border2),transparent);position:relative;overflow:hidden;}
.scroll-line::after{content:'';position:absolute;top:0;left:0;width:100%;height:20px;background:var(--green);animation:scroll-drop 2.2s ease-in-out infinite;}

/* ── Stats Bar ───────────────────────────────────────────────── */
.stats-bar{background:var(--navy-mid);border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);padding:2.75rem 0;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);position:relative;}
.stat-item{text-align:center;padding:1.5rem 1rem;position:relative;}
.stat-item:not(:last-child)::after{content:'';position:absolute;right:0;top:25%;bottom:25%;width:1px;background:var(--glass-border);}
.stat-num{
  font-family:var(--font-disp);font-size:clamp(1.9rem,3vw,3rem);
  font-weight:800;color:var(--white);line-height:1;margin-bottom:0.4rem;
}
.stat-num .cval{color:var(--green);}
.stat-lbl{font-size:0.82rem;color:var(--muted);font-weight:500;}

/* ── Partners ────────────────────────────────────────────────── */
.partners{padding:2.5rem 0;background:var(--navy);overflow:hidden;}
.partners-label{text-align:center;font-size:0.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.12em;font-weight:600;margin-bottom:2rem;}
.partners-centered{
  display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;
}
.partner-logo{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  transition:all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  animation: float-partner 4s ease-in-out infinite;
  cursor: pointer;
}
.partner-logo img {
  height: 44px; width: auto; max-width: 140px; object-fit: contain; border-radius: 8px; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.partner-logo.p-airtel img { height: 58px; }
.partner-logo.p-zanaco img { height: 52px; }
.partner-logo.p-fnb img { height: 52px; }
.partner-logo:nth-child(1) { animation-delay: 0.0s; }
.partner-logo:nth-child(2) { animation-delay: 0.5s; }
.partner-logo:nth-child(3) { animation-delay: 1.0s; }
.partner-logo:nth-child(4) { animation-delay: 1.5s; }
.partner-logo:nth-child(5) { animation-delay: 2.0s; }

@keyframes float-partner {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.partner-logo.p-mtn:hover img { filter: drop-shadow(0 0 16px rgba(255,204,0,0.8)); transform: scale(1.15); }
.partner-logo.p-airtel:hover img { filter: drop-shadow(0 0 16px rgba(255,0,0,0.8)); transform: scale(1.15); }
.partner-logo.p-zamtel:hover img { filter: drop-shadow(0 0 16px rgba(0,166,81,0.8)); transform: scale(1.15); }
.partner-logo.p-zanaco:hover img { filter: drop-shadow(0 0 16px rgba(255,102,0,0.8)); transform: scale(1.15); }
.partner-logo.p-fnb:hover img { filter: drop-shadow(0 0 16px rgba(0,166,181,0.8)); transform: scale(1.15); }

.partner-logo.p-mtn:hover { z-index:10; transform: translateY(-10px); }
.partner-logo.p-airtel:hover { z-index:10; transform: translateY(-10px); }
.partner-logo.p-zamtel:hover { z-index:10; transform: translateY(-10px); }
.partner-logo.p-zanaco:hover { z-index:10; transform: translateY(-10px); }
.partner-logo.p-fnb:hover { z-index:10; transform: translateY(-10px); }

.partner-logo span{font-family:var(--font-disp);font-weight:800;font-size:1.5rem;white-space:nowrap;}
.c-mtn{color:#FFCC00;}
.c-airtel{color:#ff5555;}
.c-zamtel{color:#6ab0ff;}
.c-zanaco{color:#ff8c42;}
.c-fnb{color:#5ab4ff;}
.c-def{color:var(--muted);}

/* ── How It Works ────────────────────────────────────────────── */
.hiw{
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-mid) 50%,var(--navy) 100%);
  position:relative;overflow:hidden;
}
.hiw::before,.hiw::after{
  content:'';position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(37,99,235,0.3),transparent);
}
.hiw::before{top:0;}
.hiw::after{bottom:0;}

.hiw-grid{display:grid;grid-template-columns:repeat(4,1fr);position:relative;gap:0;}
.hiw-connector{
  position:absolute;top:48px;left:calc(12.5%);right:calc(12.5%);
  height:2px;z-index:0;
  background:linear-gradient(90deg,var(--green),var(--blue));
  overflow:visible;
}
.hiw-connector-track{position:absolute;inset:0;overflow:hidden;}

/* Animated particles along connector line */
.conn-dot{
  position:absolute;top:50%;width:9px;height:9px;
  margin-top:-4.5px;background:var(--green);border-radius:50%;
  box-shadow:0 0 10px var(--green);
  animation:conn-travel 4s ease-in-out infinite;
}
.conn-dot:nth-child(2){animation-delay:1.33s;background:var(--blue-light);box-shadow:0 0 10px var(--blue);}
.conn-dot:nth-child(3){animation-delay:2.66s;}

.hiw-step{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:0 1.5rem;position:relative;z-index:1;
}
.step-ring{
  width:66px;height:66px;border-radius:50%;
  background:var(--navy);border:2px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-disp);font-size:1.5rem;font-weight:800;color:var(--green);
  margin-bottom:1.8rem;
  box-shadow:0 0 0 6px rgba(46,204,113,0.08),0 0 28px rgba(46,204,113,0.28);
  animation:step-glow 3s ease-in-out infinite;
}
.hiw-step:nth-child(2) .step-ring{animation-delay:0.75s;}
.hiw-step:nth-child(3) .step-ring{animation-delay:1.5s;}
.hiw-step:nth-child(4) .step-ring{animation-delay:2.25s;}
.step-ico{font-size:2.2rem;margin-bottom:1rem;}
.step-title{font-family:var(--font-disp);font-size:1.1rem;font-weight:700;color:var(--white);margin-bottom:0.65rem;}
.step-desc{font-size:0.875rem;color:var(--muted);line-height:1.7;}

/* ── Features ────────────────────────────────────────────────── */
.features{background:var(--navy);}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
.feat-card{
  padding:2.4rem;border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--glass-border);
  transition:var(--tx);position:relative;overflow:hidden;
}
.feat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--green),var(--blue));
  opacity:0;transition:var(--tx);
}
.feat-card:hover::before{opacity:1;}
.feat-card:hover{
  background:var(--glass-2);border-color:rgba(46,204,113,0.2);
  transform:translateY(-7px);
  box-shadow:0 24px 60px rgba(0,0,0,0.45),0 0 50px rgba(46,204,113,0.06);
}
.feat-ico{
  width:54px;height:54px;border-radius:var(--r-md);
  background:rgba(46,204,113,0.09);border:1px solid rgba(46,204,113,0.18);
  display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;margin-bottom:1.4rem;transition:var(--tx);
}
.feat-card:hover .feat-ico{background:rgba(46,204,113,0.18);box-shadow:0 0 24px rgba(46,204,113,0.22);}
.feat-title{font-family:var(--font-disp);font-size:1.1rem;font-weight:700;color:var(--white);margin-bottom:0.65rem;}
.feat-desc{font-size:0.875rem;color:var(--muted);line-height:1.72;}

/* Large 2-col feature card */
.feat-card.wide{grid-column:span 2;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;}
.feat-network-svg{flex-shrink:0;}

/* ── CTA Banner ──────────────────────────────────────────────── */
.cta-section{background:var(--navy);}
.cta-banner{
  background:linear-gradient(135deg, var(--navy-mid) 0%, rgba(37,99,235,0.1) 100%);
  border:1px solid rgba(46,204,113,0.15);
  border-radius:var(--r-xl);padding:3rem 4rem;
  text-align:center;position:relative;overflow:hidden;
  box-shadow: 0 10px 40px rgba(5,150,105,0.05);
}
.cta-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
  text-align: left;
}
.cta-img-col {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-person-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--r-xl);
  -webkit-mask-image: linear-gradient(to right, black 60%, transparent 100%);
  mask-image: linear-gradient(to right, black 60%, transparent 100%);
}
.cta-banner::before{
  content:'';position:absolute;top:-100px;left:-80px;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle, rgba(46,204,113,0.25) 0%, transparent 70%);
}
.cta-banner::after{
  content:'';position:absolute;bottom:-100px;right:-80px;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,107,0,0.18) 0%, transparent 70%);
}
.cta-inner{position:relative;z-index:1;}
.cta-banner h2{font-size:clamp(1.9rem,3.5vw,3rem);margin-bottom:1rem;color:var(--white);}
.cta-banner p{font-size:1.05rem;color:var(--muted);max-width:520px;margin:0 0 2.5rem;}
.cta-acts{display:flex;align-items:center;justify-content:flex-start;gap:1rem;flex-wrap:wrap;}

/* Uniform SVG Icon colors */
.feat-ico svg, .step-ico svg, .c-ico svg, .hfc-ico svg {
  color: var(--green);
}

/* ── Team ────────────────────────────────────────────────────── */
.team{background:var(--navy);}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.team-card{
  background:var(--glass);border:1px solid var(--glass-border);
  border-radius:var(--r-lg);overflow:hidden;
  transition:var(--tx);text-align:center;
}
.team-card:hover{border-color:rgba(46,204,113,0.24);transform:translateY(-7px);box-shadow:0 22px 55px rgba(0,0,0,0.45);}
.team-img{width:100%;aspect-ratio:1;overflow:hidden;position:relative;background:var(--navy-light);}
.team-img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:var(--tx-slow);}
.team-card:hover .team-img img{transform:scale(1.05);}
.team-img-placeholder{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0.5rem;
}
.team-avatar-initials{
  width:90px;height:90px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-disp);font-size:2rem;font-weight:800;color:var(--navy);
}
.team-body{padding:1.5rem;}
.team-name{font-family:var(--font-disp);font-size:1.05rem;font-weight:700;color:var(--white);margin-bottom:0.2rem;}
.team-role{font-size:0.82rem;color:var(--green);font-weight:600;margin-bottom:0.7rem;}
.team-bio{font-size:0.82rem;color:var(--muted);line-height:1.6;}
.team-socials{display:flex;align-items:center;justify-content:center;gap:0.6rem;margin-top:1rem;}
.tsoc{
  width:30px;height:30px;border-radius:50%;
  background:var(--glass);border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;
  font-size:0.8rem;color:var(--muted);transition:var(--tx);
}
.tsoc:hover{background:var(--green);color:var(--navy);border-color:var(--green);}

/* ── Contact ─────────────────────────────────────────────────── */
.contact{background:var(--navy-mid);}
.contact-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:4rem;align-items:start;}
.contact-info-title{font-family:var(--font-disp);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;color:var(--white);margin-bottom:1rem;line-height:1.2;}
.contact-info-sub{font-size:0.95rem;color:var(--muted);line-height:1.75;margin-bottom:2rem;}
.c-item{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--glass-border);}
.c-item:last-child{border-bottom:none;}
.c-ico{
  width:42px;height:42px;border-radius:var(--r-sm);flex-shrink:0;
  background:rgba(46,204,113,0.09);border:1px solid rgba(46,204,113,0.2);
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;color:var(--green);
}
.c-lbl{font-size:0.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;font-weight:600;margin-bottom:0.15rem;}
.c-val{font-size:0.92rem;color:var(--white);font-weight:500;}

/* Contact Form */
.contact-form-box{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r-xl);padding:2.5rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.fg{margin-bottom:1.2rem;}
.fg label{display:block;font-size:0.82rem;font-weight:600;color:rgba(255,255,255,0.8);margin-bottom:0.45rem;}
.fg input,.fg textarea,.fg select{
  width:100%;padding:0.82rem 1.15rem;
  background:rgba(0,0,0,0.02);border:1px solid var(--glass-border2);
  border-radius:var(--r-md);color:var(--white);font-size:0.92rem;outline:none;transition:var(--tx);
}
.fg input::placeholder,.fg textarea::placeholder{color:var(--muted);}
.fg input:focus,.fg textarea:focus,.fg select:focus{
  border-color:var(--green);background:rgba(46,204,113,0.04);
  box-shadow:0 0 0 3px rgba(46,204,113,0.09);
}
.fg textarea{resize:vertical;min-height:115px;}
.fg select option{background:var(--navy);color:var(--white);}
.form-msg{
  margin-top:1rem;padding:0.85rem 1.1rem;border-radius:var(--r-md);
  font-size:0.875rem;display:none;
}
.form-msg.ok{display:block;background:rgba(46,204,113,0.1);border:1px solid rgba(46,204,113,0.28);color:var(--green);}
.form-msg.err{display:block;background:rgba(255,80,80,0.1);border:1px solid rgba(255,80,80,0.3);color:#ff7070;}

/* ── Floating Wishlist FAB ───────────────────────────────────── */
.wish-fab{
  position:fixed;bottom:2rem;right:2rem;z-index:900;
  display:flex;align-items:center;gap:0.65rem;
  background:var(--green);color:var(--pure-white);
  font-weight:700;font-size:0.88rem;
  padding:0.85rem 1.6rem;border-radius:var(--r-pill);
  box-shadow:0 10px 35px rgba(46,204,113,0.52);
  cursor:pointer;border:none;font-family:var(--font);
  transition:var(--tx);
}
.wish-fab:hover{background:var(--green-dark);transform:translateY(-3px) scale(1.03);box-shadow:0 18px 45px rgba(46,204,113,0.65);}
.wish-fab:active{transform:translateY(0);}
.wish-fab-ring{
  position:absolute;inset:-2px;border-radius:var(--r-pill);
  border:2px solid var(--green);
  animation:fab-ring 2.2s ease-in-out infinite;
  pointer-events:none;
}

/* ── Wishlist Modal ──────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(11,19,43,0.4);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  z-index:2000;display:flex;align-items:center;justify-content:center;padding:1.5rem;
  opacity:0;pointer-events:none;transition:var(--tx);
}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{
  background:var(--navy);border:1px solid var(--glass-border2);
  border-radius:var(--r-xl);padding:3rem;max-width:510px;width:100%;
  position:relative;box-shadow:var(--shadow-lg);
  transform:scale(0.9) translateY(20px);transition:var(--tx);
  display:grid;
  overflow:hidden;
}
.modal > .modal-form-wrap, .modal > .modal-success, .modal > .modal-exists, .modal > .modal-error {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: stretch;
}
.modal-overlay.open .modal{transform:scale(1) translateY(0);}
.modal-x{
  position:absolute;top:1.1rem;right:1.1rem;width:34px;height:34px;border-radius:50%;
  background:var(--glass);border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;color:var(--muted);cursor:pointer;transition:var(--tx);
}
.modal-x:hover{background:rgba(255,80,80,0.12);color:#ff7070;border-color:rgba(255,80,80,0.3);}
.modal-badge{
  display:inline-flex;align-items:center;gap:0.5rem;
  background:rgba(46,204,113,0.09);border:1px solid rgba(46,204,113,0.22);
  border-radius:var(--r-pill);padding:0.38rem 1rem;
  font-size:0.72rem;font-weight:700;color:var(--green);
  text-transform:uppercase;letter-spacing:0.08em;margin-bottom:1rem;
}
.modal-title{font-family:var(--font-disp);font-size:1.7rem;font-weight:700;color:var(--white);margin-bottom:0.5rem;line-height:1.2;}
.modal-sub{font-size:0.88rem;color:var(--muted);line-height:1.65;margin-bottom:1.75rem;}
.modal-form-wrap{transition:var(--tx);}
.modal-form-wrap.hidden{opacity:0;pointer-events:none;transform:scale(0.95);visibility:hidden;}
.modal-success, .modal-exists, .modal-error{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  opacity:0;pointer-events:none;transform:scale(1.05);transition:var(--tx);
}
.modal-success.show, .modal-exists.show, .modal-error.show{opacity:1;pointer-events:all;transform:scale(1);}
.modal-success-ico, .modal-exists-ico, .modal-error-ico{
  width:80px;height:80px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;margin-bottom:1.5rem;
}
.modal-success-ico { background:rgba(46,204,113,0.1); border:1px solid rgba(46,204,113,0.2); color:var(--green); }
.modal-exists-ico { background:rgba(255,107,0,0.1); border:1px solid rgba(255,107,0,0.2); color:var(--orange); }
.modal-error-ico { background:rgba(255,80,80,0.1); border:1px solid rgba(255,80,80,0.2); color:#FF5050; }
.modal-success h3{font-family:var(--font-disp);font-size:1.4rem;color:var(--green);margin-bottom:0.5rem;}
.modal-exists h3{font-family:var(--font-disp);font-size:1.4rem;color:var(--orange);margin-bottom:0.5rem;}
.modal-error h3{font-family:var(--font-disp);font-size:1.4rem;color:#FF5050;margin-bottom:0.5rem;}
.modal-success p, .modal-exists p, .modal-error p{font-size:0.88rem;color:var(--muted);}

/* 3-Dot Animation System */
.dot-loader {
  display: flex; align-items: center; justify-content: center;
  margin-top: 2rem; opacity: 0; transition: opacity 0.3s ease;
}
.modal-success.show .dot-loader, .modal-exists.show .dot-loader, .modal-error.show .dot-loader {
  opacity: 1;
}
.dot-loader .dot {
  width: 12px; height: 12px; border-radius: 50%; background: #334155;
}
.dot-loader .line {
  height: 2px; width: 30px; background: #334155; margin: 0 4px;
  position: relative; overflow: hidden;
}
.dot-loader .line::after {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 100%;
  transform: translateX(-100%);
}

/* Success Sequence (Green -> Blue -> Green) */
.success-dots .d1 { animation: dot-green 3s forwards; animation-delay: 0.2s; }
.success-dots .l1::after { background: var(--green); animation: line-fill 3s forwards; animation-delay: 0.5s; }
.success-dots .d2 { animation: dot-blue 3s forwards; animation-delay: 1.2s; }
.success-dots .l2::after { background: var(--blue); animation: line-fill 3s forwards; animation-delay: 1.5s; }
.success-dots .d3 { animation: dot-green 3s forwards; animation-delay: 2.2s; }

/* Warning/Error Sequence (Orange/Red) */
.warn-dots .d1 { animation: dot-orange 3s forwards; animation-delay: 0.2s; }
.warn-dots .l1::after { background: var(--orange); animation: line-fill 3s forwards; animation-delay: 0.5s; }
.warn-dots .d2 { animation: dot-orange 3s forwards; animation-delay: 1.2s; }
.warn-dots .l2::after { background: var(--orange); animation: line-fill 3s forwards; animation-delay: 1.5s; }
.warn-dots .d3 { animation: dot-orange 3s forwards; animation-delay: 2.2s; }

@keyframes dot-green { 0% { background: #334155; box-shadow: none; } 10%, 100% { background: var(--green); box-shadow: 0 0 10px var(--green); } }
@keyframes dot-blue { 0% { background: #334155; box-shadow: none; } 10%, 100% { background: var(--blue); box-shadow: 0 0 10px var(--blue); } }
@keyframes dot-orange { 0% { background: #334155; box-shadow: none; } 10%, 100% { background: var(--orange); box-shadow: 0 0 10px var(--orange); } }
@keyframes line-fill { 0% { transform: translateX(-100%); } 20%, 100% { transform: translateX(0); } }

/* ── Footer ──────────────────────────────────────────────────── */
.footer{background:var(--navy);border-top:1px solid var(--glass-border);padding:5rem 0 2rem;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:3rem;margin-bottom:4rem;}
.footer-logo-img{height:40px;width:auto;margin-bottom:1rem;}
.footer-tagline{font-size:0.875rem;color:var(--muted);line-height:1.72;max-width:270px;margin-bottom:1.5rem;}
.footer-socials{display:flex;gap:0.65rem;}
.f-soc{
  width:36px;height:36px;border-radius:50%;
  background:var(--glass);border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;
  font-size:0.85rem;color:var(--muted);transition:all 0.3s ease;
}
.f-soc.soc-fb { color:#1877F2; border-color:rgba(24,119,242,0.3); box-shadow:0 0 12px rgba(24,119,242,0.25); }
.f-soc.soc-in { color:#0A66C2; border-color:rgba(10,102,194,0.3); box-shadow:0 0 12px rgba(10,102,194,0.25); }
.f-soc.soc-tw { color:#1DA1F2; border-color:rgba(29,161,242,0.3); box-shadow:0 0 12px rgba(29,161,242,0.25); }
.f-soc.soc-wa { color:#25D366; border-color:rgba(37,211,102,0.3); box-shadow:0 0 12px rgba(37,211,102,0.25); }

.f-soc:hover{transform:translateY(-3px);}
.f-soc.soc-fb:hover{color:#fff;background:#1877F2;border-color:#1877F2;box-shadow:0 0 20px rgba(24,119,242,0.7);}
.f-soc.soc-in:hover{color:#fff;background:#0A66C2;border-color:#0A66C2;box-shadow:0 0 20px rgba(10,102,194,0.7);}
.f-soc.soc-tw:hover{color:#fff;background:#1DA1F2;border-color:#1DA1F2;box-shadow:0 0 20px rgba(29,161,242,0.7);}
.f-soc.soc-wa:hover{color:#fff;background:#25D366;border-color:#25D366;box-shadow:0 0 20px rgba(37,211,102,0.7);}
.footer-col-h{
  font-size:0.78rem;font-weight:700;color:var(--white);
  text-transform:uppercase;letter-spacing:0.1em;margin-bottom:1.25rem;
}
.footer-links{display:flex;flex-direction:column;gap:0.7rem;}
.footer-links a{font-size:0.875rem;color:var(--muted);transition:var(--tx);}
.footer-links a:hover{color:var(--green);padding-left:5px;}
.footer-ci{display:flex;align-items:center;gap:0.5rem;font-size:0.85rem;color:var(--muted);margin-bottom:0.7rem;transition:var(--tx);}
.footer-ci:hover{color:var(--white);}
.footer-ci .ico{color:var(--green);}
.footer-bottom{
  border-top:1px solid var(--glass-border);padding-top:2rem;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
}
.footer-copy{font-size:0.82rem;color:var(--muted);}
.footer-copy a{color:var(--green);transition:var(--tx);}
.footer-copy a:hover{color:var(--white);}
.footer-legal{display:flex;gap:1.5rem;}
.footer-legal a{font-size:0.82rem;color:var(--muted);transition:var(--tx);}
.footer-legal a:hover{color:var(--white);}

/* ── Page Hero (Inner Pages) ─────────────────────────────────── */
.page-hero{
  background:var(--navy);padding:9rem 0 5rem;
  position:relative;overflow:hidden;text-align:center;
}
.page-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(37,99,235,0.07) 0%,transparent 70%);
}
.breadcrumb{display:flex;align-items:center;justify-content:center;gap:0.5rem;font-size:0.82rem;color:var(--muted);margin-bottom:1.5rem;}
.breadcrumb a{color:var(--muted);transition:var(--tx);}
.breadcrumb a:hover{color:var(--green);}
.breadcrumb .sep{color:var(--glass-border2);}
.page-hero h1{position:relative;z-index:1;margin-bottom:1rem;}
.page-hero p{font-size:1.05rem;color:var(--muted);max-width:540px;margin:0 auto;position:relative;z-index:1;}

/* ── About Page ──────────────────────────────────────────────── */
.about-story{background:var(--navy);}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;}
.about-visual-block{
  background:linear-gradient(135deg,var(--navy-mid),var(--navy-light));
  border:1px solid var(--glass-border);border-radius:var(--r-xl);
  padding:3rem;display:flex;flex-direction:column;align-items:center;gap:2rem;
}
.about-icon-big{font-size:6rem;}
.about-values{background:var(--navy-mid);}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.val-card{
  padding:2rem 1.5rem;text-align:center;
  background:var(--glass);border:1px solid var(--glass-border);
  border-radius:var(--r-lg);transition:var(--tx);
}
.val-card:hover{background:var(--glass-2);border-color:rgba(46,204,113,0.2);transform:translateY(-5px);}
.val-ico{font-size:2.5rem;margin-bottom:1rem;}
.val-title{font-family:var(--font-disp);font-size:1.05rem;font-weight:700;color:var(--white);margin-bottom:0.5rem;}
.val-desc{font-size:0.85rem;color:var(--muted);line-height:1.65;}

/* ── How-It-Works Detailed Page ──────────────────────────────── */
.hiw-detail{background:var(--navy);}
.hiw-step-card{
  display:grid;grid-template-columns:100px 1fr;gap:2.5rem;align-items:start;
  padding:2.5rem;margin-bottom:1.5rem;
}
.step-big-num{
  font-family:var(--font-disp);font-size:5rem;font-weight:900;line-height:1;
  background:linear-gradient(135deg,var(--green),var(--blue));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ── Scroll Reveal Animations ────────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-l{opacity:0;transform:translateX(-28px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease);}
.reveal-l.in{opacity:1;transform:translateX(0);}
.reveal-r{opacity:0;transform:translateX(28px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease);}
.reveal-r.in{opacity:1;transform:translateX(0);}
.reveal-s{opacity:0;transform:scale(0.9);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease);}
.reveal-s.in{opacity:1;transform:scale(1);}
.d1{transition-delay:0.10s;} .d2{transition-delay:0.20s;}
.d3{transition-delay:0.30s;} .d4{transition-delay:0.40s;}
.d5{transition-delay:0.50s;} .d6{transition-delay:0.60s;}

/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes live-ping{
  0%{transform:scale(1);opacity:1;}
  70%,100%{transform:scale(2.6);opacity:0;}
}
@keyframes float-anim{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-12px);}
}
@keyframes scroll-drop{
  0%{top:0;opacity:1;}
  100%{top:100%;opacity:0;}
}
@keyframes signal-wave{
  0%,100%{transform:scaleY(0.3);opacity:0.4;}
  50%{transform:scaleY(1);opacity:1;}
}
@keyframes marquee{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
@keyframes step-glow{
  0%,100%{box-shadow:0 0 0 6px rgba(46,204,113,0.08),0 0 28px rgba(46,204,113,0.28);}
  50%{box-shadow:0 0 0 10px rgba(46,204,113,0.12),0 0 45px rgba(46,204,113,0.50);}
}
@keyframes conn-travel{
  0%{left:0%;opacity:0;}
  5%{opacity:1;}
  95%{opacity:1;}
  100%{left:calc(100% - 9px);opacity:0;}
}
@keyframes fab-ring{
  0%{transform:scale(1);opacity:0.7;}
  100%{transform:scale(1.5);opacity:0;}
}
@keyframes ripple{
  to{transform:scale(3.5);opacity:0;}
}
@keyframes glow-pulse{
  0%,100%{opacity:0.25;}
  50%{opacity:0.6;}
}

/* Feature Card Logos Hover Glow */
.feat-net-logos { display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:1.25rem;align-items:center; }
.feat-net-logos img { height: 28px; width: auto; max-width: 90px; object-fit: contain; border-radius: 6px; filter: grayscale(100%) opacity(0.6); transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); cursor: pointer; }
.feat-net-logos img.fn-airtel { height: 38px; }
.feat-net-logos img.fn-zanaco { height: 34px; }
.feat-net-logos img.fn-fnb { height: 34px; }
.feat-net-logos img.fn-mtn:hover { filter: grayscale(0%) opacity(1) drop-shadow(0 0 12px rgba(255,204,0,0.8)); transform: scale(1.15); }
.feat-net-logos img.fn-airtel:hover { filter: grayscale(0%) opacity(1) drop-shadow(0 0 12px rgba(255,0,0,0.8)); transform: scale(1.15); }
.feat-net-logos img.fn-zamtel:hover { filter: grayscale(0%) opacity(1) drop-shadow(0 0 12px rgba(0,166,81,0.8)); transform: scale(1.15); }
.feat-net-logos img.fn-zanaco:hover { filter: grayscale(0%) opacity(1) drop-shadow(0 0 12px rgba(255,102,0,0.8)); transform: scale(1.15); }
.feat-net-logos img.fn-fnb:hover { filter: grayscale(0%) opacity(1) drop-shadow(0 0 12px rgba(0,166,181,0.8)); transform: scale(1.15); }
/* Interactive Network SVG */
.interop-svg { overflow: visible; }
.net-line { transition: all 0.3s; }
.svg-center { cursor: pointer; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.svg-center:hover { filter: drop-shadow(0 0 16px rgba(46,204,113,0.9)); transform: scale(1.08); transform-origin: 110px 110px; }

.svg-center:hover ~ .net-line {
  stroke-opacity: 1;
  animation: pulse-flow 0.8s linear infinite;
  stroke-width: 2;
}
.svg-center:hover ~ .l-mtn { stroke: #FFCC00; filter: drop-shadow(0 0 4px rgba(255,204,0,0.6)); }
.svg-center:hover ~ .l-airtel { stroke: #ff5555; filter: drop-shadow(0 0 4px rgba(255,80,80,0.6)); }
.svg-center:hover ~ .l-zamtel { stroke: #6ab0ff; filter: drop-shadow(0 0 4px rgba(100,160,255,0.6)); }
.svg-center:hover ~ .l-zanaco { stroke: #ff8c42; filter: drop-shadow(0 0 4px rgba(255,140,66,0.6)); }
.svg-center:hover ~ .l-fnb { stroke: #5ab4ff; filter: drop-shadow(0 0 4px rgba(90,180,255,0.6)); }

@keyframes pulse-flow {
  to { stroke-dashoffset: -8; }
}

.net-node { transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
.svg-center:hover ~ .n-mtn { filter: drop-shadow(0 0 15px rgba(255,204,0,0.8)); transform: scale(1.15); transform-origin: 110px 20px; }
.svg-center:hover ~ .n-airtel { filter: drop-shadow(0 0 15px rgba(255,80,80,0.8)); transform: scale(1.15); transform-origin: 190px 65px; }
.svg-center:hover ~ .n-zamtel { filter: drop-shadow(0 0 15px rgba(100,160,255,0.8)); transform: scale(1.15); transform-origin: 190px 155px; }
.svg-center:hover ~ .n-zanaco { filter: drop-shadow(0 0 15px rgba(255,140,66,0.8)); transform: scale(1.15); transform-origin: 110px 200px; }
.svg-center:hover ~ .n-fnb { filter: drop-shadow(0 0 15px rgba(90,180,255,0.8)); transform: scale(1.15); transform-origin: 30px 155px; }

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:1200px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem;}
  .feat-grid{grid-template-columns:repeat(2,1fr);}
  .feat-card.wide{grid-column:span 1;grid-template-columns:1fr;}
  .feat-network-svg{display:none;}
}
@media(max-width:992px){
  .hero-content{grid-template-columns:1fr;text-align:center;gap:3rem;padding-top:calc(var(--nav-h) + 1.5rem);}
  .hero-sub,.section-sub{max-width:100%;}
  .hero-actions,.hero-checks{justify-content:center;align-items:center;}
  .hiw-grid{grid-template-columns:repeat(2,1fr);gap:3rem;}
  .hiw-connector{display:none;}
  .contact-grid{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .stat-item::after{display:none;}
  .cta-banner{padding:3.5rem 2.5rem;}
  .cta-split {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
  .cta-banner p {margin:0 auto 2.5rem;}
  .cta-acts {justify-content: center;}
  .cta-person-img {
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    max-height: 400px;
  }
  .values-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  :root{--nav-h:68px;}
  .nav-links,.nav-ctas{display:none;}
  .ham{display:flex;}
  .hero-sub, .hero-checks, .hsk-sub, .hsk-checks { display: none; }
  .feat-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr;}
  .hiw-grid{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .form-row{grid-template-columns:1fr;}
  .cta-banner{border-radius:var(--r-lg);padding:2.5rem 1.5rem;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .hfc.c1,.hfc.c2{display:none;}
  .modal{padding:2rem 1.5rem;}
}
@media(max-width:520px){
  .container{padding:0 1.2rem;}
  .section{padding:4rem 0;}
  .hero-actions{flex-direction:row;width:100%;gap:0.75rem;}
  .hero-actions .btn{flex:1;padding:0.85rem 1rem;font-size:0.88rem;justify-content:center;}
  .stats-grid{grid-template-columns:1fr;}
  .wish-fab .fab-txt{display:none;}
  .modal-title{font-size:1.4rem;}
  .cta-acts{flex-direction:column;width:100%;}
  .cta-acts .btn{width:100%;justify-content:center;}
}

/* ── Floating Logos Container & Elements ───────────────────────── */
.floating-logos-container {
  position: absolute;
  inset: -15%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.floating-icon-wrapper {
  position: absolute;
  pointer-events: none;
  transform-style: preserve-3d;
  will-change: transform;
}

.floating-icon-interaction {
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
  transition: transform 0.22s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-icon-content {
  background: transparent;
  border: none;
  border-radius: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: filter 0.3s var(--ease);
}

.floating-icon-content img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px; /* Rounds corners of rectangular/solid background logos like MTN */
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
  transition: filter 0.3s var(--ease);
}

/* Hover effects */
.floating-icon-content:hover img {
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.4)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}

/* Organic drifting animations */
@keyframes driftPattern1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(3deg); }
}
@keyframes driftPattern2 {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(15px) rotate(-3deg); }
}
@keyframes driftPattern3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-12px, -12px) rotate(4deg); }
}
@keyframes driftPattern4 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(12px, -15px) rotate(-4deg); }
}

/* Adjust z-index of statistics cards to stay on top */
.hfc {
  z-index: 6;
}

/* On smaller screens, position the floating logos below the hero image in a clean, side-by-side row */
@media (max-width: 992px) {
  .hero-visual {
    flex-direction: column !important;
  }

  .floating-logos-container {
    display: flex !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 2.5rem auto 0 !important;
    padding: 0 1rem !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.5rem !important;
    pointer-events: auto !important;
    z-index: 5 !important;
    overflow: visible !important;
  }

  .floating-icon-wrapper {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    animation: none !important; /* Disable background drifting for aligned layout */
    transform: none !important;
  }

  .floating-icon-interaction {
    width: 50px !important;
    height: 50px !important;
    transform: none !important;
  }
}

/* ── Larger Display Adaptations ───────────────────────────────── */
@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
  .hero-content {
    max-width: 1400px;
    gap: 6rem;
  }
  .hero-skel-inner {
    max-width: 1400px;
    gap: 6rem;
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: 1680px;
  }
  .hero-content {
    max-width: 1680px;
    gap: 9rem;
  }
  .hero-skel-inner {
    max-width: 1680px;
    gap: 9rem;
  }
  .hero-mockup {
    max-width: 680px;
  }
  :root {
    --nav-h: 90px;
  }
  .hero-title {
    font-size: 5.2rem;
    line-height: 1.05;
  }
  .hero-sub {
    font-size: 1.25rem;
    max-width: 580px;
    margin-bottom: 2.8rem;
  }
  .section {
    padding: 8rem 0;
  }
}