/* ═══════════════════════════════════════════════════════ MASTER DESIGN TOKENS — 9JA MAFO GENESIS ECOSYSTEM ═══════════════════════════════════════════════════════ */ :root{ --obsidian:#0B0E14;--obsidian-light:#0F1318;--dark-teal:#0A1F26; --neon-lime:#00FF41;--neon-lime-glow:rgba(0,255,65,0.4); --cyan:#00FFFF;--cyan-glow:rgba(0,255,255,0.3); --glass-bg:rgba(15,19,24,0.7);--glass-border:rgba(255,255,255,0.1); --text-primary:#fff;--text-secondary:rgba(255,255,255,0.7);--text-muted:rgba(255,255,255,0.5); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Inter','Space Grotesk',system-ui,sans-serif; background:linear-gradient(135deg,var(--obsidian) 0%,var(--dark-teal) 100%); background-attachment:fixed;color:var(--text-primary); min-height:100vh;overflow-x:hidden; } .font-display{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Space Grotesk','Inter',system-ui,sans-serif;letter-spacing:-0.02em;} /* UTILITIES */ .glass{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);} .glass-strong{background:rgba(15,19,24,0.88);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid var(--glass-border);} .glow-lime{text-shadow:0 0 10px var(--neon-lime-glow),0 0 20px var(--neon-lime-glow),0 0 40px var(--neon-lime-glow);} .glow-cyan{text-shadow:0 0 10px var(--cyan-glow),0 0 20px var(--cyan-glow),0 0 40px var(--cyan-glow);} .gradient-text{background:linear-gradient(135deg,var(--neon-lime),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .lattice-grid{ background-image:linear-gradient(var(--glass-border) 1px,transparent 1px),linear-gradient(90deg,var(--glass-border) 1px,transparent 1px); background-size:50px 50px;animation:gridMove 20s linear infinite; } @keyframes gridMove{0%{background-position:0 0;}100%{background-position:50px 50px;}} .pulse-glow{animation:pulseGlow 2s ease-in-out infinite;} @keyframes pulseGlow{0%,100%{box-shadow:0 0 20px var(--neon-lime-glow);}50%{box-shadow:0 0 40px var(--neon-lime-glow),0 0 60px var(--neon-lime-glow);}} /* ══════════════════════════ LOADING / SPLASH SCREEN ══════════════════════════ */ #splash{ position:fixed;inset:0;z-index:1000; display:flex;align-items:center;justify-content:center;flex-direction:column; background:#0B0E14; transition:opacity 0.7s ease,visibility 0.7s ease; } #splash.done{opacity:0;visibility:hidden;pointer-events:none;} /* Shimmer waves behind splash */ .splash-wave{ position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,transparent 30%,rgba(0,255,65,0.04) 45%,rgba(0,255,255,0.06) 50%,rgba(0,255,65,0.04) 55%,transparent 70%); background-size:200% 200%;animation:waveFlow 3s ease-in-out infinite; } .splash-wave:nth-child(2){animation-delay:.3s;animation-duration:3.8s;} .splash-wave:nth-child(3){animation-delay:.6s;animation-duration:4.5s;} @keyframes waveFlow{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}} /* Radial center glow */ .splash-radial{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:600px;height:600px;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(0,255,65,0.08) 0%,transparent 70%); animation:splashRadial 3s ease-in-out infinite; } @keyframes splashRadial{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.5;}50%{transform:translate(-50%,-50%) scale(1.2);opacity:1;}} /* Logo in splash */ .splash-logo-wrap{ position:relative;z-index:2; display:flex;flex-direction:column;align-items:center;gap:0; } .splash-logo-ring{ position:absolute;width:220px;height:220px;border-radius:50%; border:2px dashed rgba(0,255,65,0.3); animation:spinSlow 18s linear infinite; top:50%;left:50%;transform:translate(-50%,-50%); } @keyframes spinSlow{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}} .splash-logo-ring-2{ position:absolute;width:170px;height:170px;border-radius:50%; border:1px solid rgba(0,255,255,0.2); animation:spinSlow 12s linear infinite reverse; top:50%;left:50%;transform:translate(-50%,-50%); } .splash-logo-img{ width:140px;height:auto;position:relative;z-index:3; filter:drop-shadow(0 0 30px rgba(0,255,65,0.7)); animation:splashPulse 1.4s ease-in-out infinite; } @keyframes splashPulse{0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 30px rgba(0,255,65,0.72));}35%{transform:translateY(-8px) scale(1.03);filter:drop-shadow(0 0 42px rgba(0,255,65,0.88));}65%{transform:translateY(-14px) scale(1.06);filter:drop-shadow(0 0 52px rgba(0,255,65,0.96));}} .splash-brand{margin-top:28px;text-align:center;} .splash-brand h1{font-family:'Space Grotesk',sans-serif;font-size:38px;font-weight:700;color:var(--neon-lime);letter-spacing:-0.5px;text-shadow:0 0 30px rgba(0,255,65,0.5);} .splash-brand p{font-size:14px;color:rgba(255,255,255,0.45);margin-top:6px;letter-spacing:0.1em;text-transform:uppercase;} .splash-progress{margin-top:40px;width:280px;} .splash-bar{height:3px;background:rgba(255,255,255,0.08);border-radius:99px;overflow:hidden;} .splash-fill{height:100%;background:linear-gradient(90deg,var(--neon-lime),var(--cyan));border-radius:99px;width:0%;transition:width .08s linear;} .splash-label{text-align:center;color:rgba(255,255,255,0.35);font-size:11px;margin-top:10px;letter-spacing:0.05em;} /* ══════════════════════════ HEADER ══════════════════════════ */ #header{ position:fixed;top:0;left:0;right:0;z-index:50; transition:all .3s ease;padding:20px 0; } #header.scrolled{ background:rgba(11,14,20,0.65);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px); border-bottom:1px solid var(--glass-border);padding:12px 0; } .nav-inner{max-width:1280px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;} /* REAL LOGO in nav */ .nav-logo{display:flex;align-items:center;gap:0;text-decoration:none;} .nav-logo-img{ height:38px;width:auto; filter:drop-shadow(0 0 8px rgba(0,255,65,0.5)); transition:filter .3s; } .nav-logo:hover .nav-logo-img{filter:drop-shadow(0 0 18px rgba(0,255,65,0.9));} .nav-links{display:flex;gap:32px;align-items:center;} .nav-links a{font-size:14px;font-weight:500;color:rgba(255,255,255,0.7);text-decoration:none;transition:color .3s;position:relative;} .nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--neon-lime);transition:width .3s;box-shadow:0 0 10px rgba(0,255,65,0.5);} .nav-links a:hover{color:var(--neon-lime);} .nav-links a:hover::after{width:100%;} .nav-actions{display:flex;align-items:center;gap:16px;} .btn-partner{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--cyan);background:none;border:none;cursor:pointer;transition:color .3s;} .btn-partner:hover{color:#fff;} .btn-register{padding:10px 24px;font-size:14px;font-weight:600;color:var(--neon-lime);border:1px solid rgba(0,255,65,0.5);background:var(--glass-bg);border-radius:10px;cursor:pointer;text-decoration:none;transition:all .3s;backdrop-filter:blur(10px);} .btn-register:hover{border-color:var(--neon-lime);box-shadow:0 0 24px rgba(0,255,65,0.3);} .hamburger{display:none;width:42px;height:42px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:10px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;} .hamburger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:all .3s;} /* MOBILE MENU */ #mob-menu{display:none;position:fixed;inset:0;z-index:45;background:linear-gradient(180deg,#0B0E14,#0A1F26 50%,#0B0E14);flex-direction:column;padding:100px 28px 40px;} #mob-menu.open{display:flex;} #mob-menu .mob-logo{display:flex;align-items:center;gap:12px;margin-bottom:48px;} #mob-menu .mob-logo-img{height:44px;width:auto;filter:drop-shadow(0 0 12px rgba(0,255,65,0.6));} #mob-menu nav{flex:1;display:flex;flex-direction:column;gap:4px;} #mob-menu nav a{padding:16px;border-radius:14px;font-size:18px;font-weight:500;color:rgba(255,255,255,0.8);text-decoration:none;transition:all .3s;} #mob-menu nav a:hover{color:var(--neon-lime);background:rgba(255,255,255,0.04);} .mob-cta{display:flex;flex-direction:column;gap:12px;margin-top:auto;} .mob-btn-partner{padding:16px;border-radius:14px;border:1px solid rgba(0,255,255,0.3);background:none;color:var(--cyan);font-size:16px;font-weight:500;cursor:pointer;} .mob-btn-reg{padding:16px;border-radius:14px;background:linear-gradient(135deg,var(--neon-lime),var(--cyan));color:#0B0E14;font-size:16px;font-weight:700;border:none;cursor:pointer;text-align:center;display:block;text-decoration:none;} /* ══════════════════════════ CULTURAL DOODLES ══════════════════════════ */ .doodles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;opacity:.04;} .d{position:absolute;} .fl-s{animation:flS 8s ease-in-out infinite;} .fl-m{animation:flM 6s ease-in-out infinite;} .fl-f{animation:flF 4s ease-in-out infinite;} @keyframes flS{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-10px) rotate(2deg);}} @keyframes flM{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-15px) rotate(-2deg);}} @keyframes flF{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-8px) rotate(1deg);}} /* ══════════════════════════ HERO SECTION ══════════════════════════ */ #hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px 24px 80px;overflow:hidden;} .hero-grid{position:absolute;inset:0;opacity:.15;} .hero-ov1{position:absolute;inset:0;background:linear-gradient(135deg,rgba(11,14,20,.9),transparent 50%,rgba(10,31,38,.5));} .hero-ov2{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,14,20,1) 0%,transparent 50%);} .hero-g1{position:absolute;top:33%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:rgba(0,255,65,.05);border-radius:50%;filter:blur(150px);} .hero-g2{position:absolute;bottom:25%;left:25%;width:256px;height:256px;background:rgba(0,255,255,.08);border-radius:50%;filter:blur(100px);} .hero-g3{position:absolute;top:25%;right:25%;width:192px;height:192px;background:rgba(0,255,65,.08);border-radius:50%;filter:blur(80px);} .hero-content{position:relative;z-index:10;max-width:900px;width:100%;text-align:center;} /* HERO LOGO — Real 9jaMart wordmark */ .hero-logo-wrap{position:relative;margin:0 auto 40px;width:260px;height:260px;display:flex;align-items:center;justify-content:center;} .hero-ring-outer{position:absolute;inset:0;border-radius:50%;border:2px dashed rgba(0,255,65,.2);animation:spinCW 30s linear infinite;} @keyframes spinCW{from{transform:rotate(0deg);}to{transform:rotate(360deg);}} .hero-ring-mid{position:absolute;inset:20px;border-radius:50%;border:1px solid rgba(0,255,255,.3);animation:pulseR 2s ease-in-out infinite;} @keyframes pulseR{0%,100%{transform:scale(1);opacity:.3;}50%{transform:scale(1.05);opacity:.5;}} .hero-ring-glow{position:absolute;inset:40px;border-radius:50%;background:linear-gradient(135deg,rgba(0,255,65,.15),rgba(0,255,255,.15));filter:blur(20px);animation:glowPulseR 2s ease-in-out infinite;} @keyframes glowPulseR{0%,100%{opacity:.6;}50%{opacity:1;}} .hero-logo-img{ position:relative;z-index:5; width:180px;height:auto; filter:drop-shadow(0 0 40px rgba(0,255,65,0.7)); animation:heroPulse 1.5s ease-in-out infinite; } @keyframes heroPulse{0%,100%{transform:scale(1);}15%{transform:scale(1.08);}30%{transform:scale(1);}45%{transform:scale(1.05);}60%{transform:scale(1);}} .hero-orbit-1{position:absolute;inset:0;border-radius:50%;animation:orb 8s linear infinite;} .hero-orbit-2{position:absolute;inset:0;border-radius:50%;animation:orb 12s linear infinite reverse;} .hero-orbit-3{position:absolute;inset:0;border-radius:50%;animation:orb 16s linear infinite;} @keyframes orb{from{transform:rotate(0deg);}to{transform:rotate(360deg);}} .orb-dot{position:absolute;border-radius:50%;} .orb-dot.l{top:0;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:var(--neon-lime);box-shadow:0 0 10px rgba(0,255,65,.8);} .orb-dot.c{bottom:0;left:50%;transform:translate(-50%,50%);width:6px;height:6px;background:var(--cyan);box-shadow:0 0 10px rgba(0,255,255,.8);} .orb-dot.d{top:50%;left:0;transform:translate(-50%,-50%);width:6px;height:6px;background:rgba(0,255,65,.6);box-shadow:0 0 8px rgba(0,255,65,.6);} .hero-h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(36px,6vw,72px);font-weight:700;line-height:1.1;color:#fff;margin-bottom:16px;} .hero-h1 .vault{color:var(--neon-lime);animation:vaultGlow 2s ease-in-out infinite;display:inline-block;} @keyframes vaultGlow{0%,100%{text-shadow:0 0 10px rgba(0,255,65,.4),0 0 20px rgba(0,255,65,.4),0 0 40px rgba(0,255,65,.4);}50%{text-shadow:0 0 20px rgba(0,255,65,.7),0 0 40px rgba(0,255,65,.7),0 0 80px rgba(0,255,65,.7);}} .hero-h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(18px,3vw,28px);font-weight:600;color:var(--cyan);margin-bottom:24px;} .hero-p{font-size:clamp(15px,2vw,18px);color:rgba(255,255,255,.7);max-width:600px;margin:0 auto 40px;line-height:1.7;} .hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;} .btn-ios{display:flex;align-items:center;gap:10px;padding:16px 32px;font-weight:600;font-size:15px;background:var(--neon-lime);color:#0B0E14;border:none;border-radius:12px;cursor:pointer;transition:all .3s;} .btn-ios:hover{transform:scale(1.05);box-shadow:0 0 40px rgba(0,255,65,.5);} .btn-android{display:flex;align-items:center;gap:10px;padding:16px 32px;font-weight:600;font-size:15px;background:var(--glass-bg);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:12px;cursor:pointer;transition:all .3s;backdrop-filter:blur(20px);} .btn-android:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 30px rgba(0,255,255,.3);transform:scale(1.05);} .trust-row{margin-top:48px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;} .trust-badge{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:99px;background:var(--glass-bg);border:1px solid var(--glass-border);font-size:13px;color:rgba(255,255,255,.5);backdrop-filter:blur(10px);} .scroll-ind{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;animation:indBounce 2s ease-in-out infinite;} @keyframes indBounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-10px);}} .scroll-mouse{width:24px;height:40px;border-radius:99px;border:1px solid rgba(255,255,255,.2);display:flex;justify-content:center;padding-top:8px;} .scroll-dot{width:4px;height:8px;border-radius:99px;background:var(--neon-lime);animation:sDot 1.5s ease-in-out infinite;} @keyframes sDot{0%,100%{transform:translateY(0);opacity:1;}50%{transform:translateY(8px);opacity:.3;}} /* ══════════════════════════ IDENTITY SECTION ══════════════════════════ */ .sec{padding:96px 24px;position:relative;overflow:hidden;} .sec-max{max-width:1280px;margin:0 auto;} .sec-glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:800px;height:400px;background:rgba(0,255,255,.05);border-radius:50%;filter:blur(150px);pointer-events:none;} .sec-hdr{text-align:center;margin-bottom:64px;} .sec-h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,5vw,52px);font-weight:700;color:#fff;} .id-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;} .id-card{position:relative;border-radius:20px;padding:40px;border:1px solid rgba(255,255,255,.1);background:var(--glass-bg);backdrop-filter:blur(20px);transition:all .5s;} .id-card:hover{transform:translateY(-4px);} .id-card.cy{border-color:rgba(0,255,255,.2);}.id-card.cy:hover{border-color:rgba(0,255,255,.4);box-shadow:0 0 40px rgba(0,255,255,.1);} .id-card.li{border-color:rgba(0,255,65,.3);}.id-card.li:hover{border-color:rgba(0,255,65,.6);box-shadow:0 0 40px rgba(0,255,65,.15);} .card-icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:24px;} .card-icon.cy{background:rgba(0,255,255,.1);}.card-icon.li{background:rgba(0,255,65,.1);} .badge-prem{position:absolute;top:24px;right:24px;padding:4px 12px;border-radius:99px;font-size:11px;font-weight:700;background:var(--neon-lime);color:#0B0E14;} .card-h3{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:700;color:#fff;margin-bottom:8px;} .card-sub{font-weight:600;margin-bottom:16px;font-size:15px;} .card-p{color:rgba(255,255,255,.6);line-height:1.7;} .ftags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;} .ftag{padding:6px 14px;border-radius:99px;font-size:12px;font-weight:500;} .ftag.cy{color:var(--cyan);background:rgba(0,255,255,.1);border:1px solid rgba(0,255,255,.2);} .ftag.li{color:var(--neon-lime);background:rgba(0,255,65,.1);border:1px solid rgba(0,255,65,.2);} /* ══════════════════════════ ARSENAL SECTION ══════════════════════════ */ .eyebrow{display:inline-block;padding:6px 16px;border-radius:99px;font-size:13px;font-weight:600;color:var(--neon-lime);background:rgba(0,255,65,.1);border:1px solid rgba(0,255,65,.2);margin-bottom:16px;} .feat-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:128px;} .feat-row:last-child{margin-bottom:0;} .feat-row.rev .feat-vis{order:-1;} .feat-badge{display:flex;align-items:center;gap:12px;margin-bottom:16px;} .feat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;} .feat-icon.li{background:rgba(0,255,65,.1);}.feat-icon.cy{background:rgba(0,255,255,.1);} .feat-lbl{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;} .feat-lbl.li{color:var(--neon-lime);}.feat-lbl.cy{color:var(--cyan);} .feat-h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,3.5vw,40px);font-weight:700;color:#fff;margin-bottom:16px;} .feat-p{color:rgba(255,255,255,.6);font-size:16px;line-height:1.7;margin-bottom:24px;} .feat-list{list-style:none;display:flex;flex-direction:column;gap:12px;} .feat-list li{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.8);font-size:15px;} .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .dot.li{background:var(--neon-lime);}.dot.cy{background:var(--cyan);} .mockup{position:relative;border-radius:28px;padding:16px;background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(20px);} .mockup::after{content:'';position:absolute;inset:-16px;border-radius:32px;z-index:-1;filter:blur(24px);opacity:.3;} .mockup.li::after{background:rgba(0,255,65,.3);}.mockup.cy::after{background:rgba(0,255,255,.3);} .mock-inner{border-radius:20px;overflow:hidden;padding:16px;background:linear-gradient(to bottom,#0A1F26,#0B0E14);} .feed-box{aspect-ratio:9/16;max-height:400px;background:linear-gradient(135deg,#0A1F26,#0B0E14);border-radius:16px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;} .feed-inds{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;} .fi{width:4px;border-radius:2px;}.fi.on{height:32px;background:var(--neon-lime);}.fi.off{height:16px;background:rgba(255,255,255,.2);} .chat-hdr{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:16px;} .chat-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--neon-lime));} .chat-nm{font-weight:600;font-size:14px;color:#fff;}.chat-st{font-size:12px;color:var(--neon-lime);} .msgs{display:flex;flex-direction:column;gap:12px;min-height:160px;padding:4px 0;} .msg{max-width:80%;border-radius:16px;padding:10px 16px;font-size:14px;color:rgba(255,255,255,.85);} .msg.r{align-self:flex-start;border-top-left-radius:4px;background:var(--glass-bg);border:1px solid rgba(0,255,255,.2);} .msg.s{align-self:flex-end;border-top-right-radius:4px;background:rgba(0,255,65,.1);border:1px solid rgba(0,255,65,.3);} .msg.s.hl{color:var(--neon-lime);font-weight:600;} .cinput{display:flex;align-items:center;gap:8px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);} .cinput-bar{flex:1;padding:8px 16px;border-radius:99px;background:var(--glass-bg);font-size:13px;color:rgba(255,255,255,.4);} .csend{width:40px;height:40px;border-radius:50%;background:var(--neon-lime);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;} .upload-zone{border:2px dashed rgba(255,255,255,.2);border-radius:12px;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:16px;} .img-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;} .img-slot{aspect-ratio:1;border-radius:10px;background:linear-gradient(135deg,#1A1D24,#0A1F26);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;} .car-ctrl{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 0;} .car-dots{display:flex;gap:6px;} .car-dot{width:8px;height:8px;border-radius:50%;}.car-dot.on{background:var(--neon-lime);}.car-dot.off{background:rgba(255,255,255,.2);} .ai-btn{width:100%;padding:12px;border-radius:12px;background:rgba(0,255,65,.1);border:1px solid rgba(0,255,65,.3);color:var(--neon-lime);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .3s;} .ai-btn:hover{background:rgba(0,255,65,.2);} /* ══════════════════════════ SECURITY SECTION ══════════════════════════ */ .sec-bg{position:absolute;inset:0;background:linear-gradient(to bottom,#0B0E14,rgba(10,31,38,.5) 50%,#0B0E14);} .sec-cg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:rgba(0,255,65,.05);border-radius:50%;filter:blur(150px);pointer-events:none;} .sec-logo-wrap{position:relative;width:160px;height:160px;margin:0 auto 40px;} .sec-r1{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(0,255,65,.3);animation:spinCW 10s linear infinite;} .sec-d1{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--neon-lime);} .sec-r2{position:absolute;inset:16px;border-radius:50%;border:1px solid rgba(0,255,255,.2);animation:spinCW 15s linear infinite reverse;} .sec-d2{position:absolute;bottom:0;left:50%;transform:translate(-50%,50%);width:8px;height:8px;border-radius:50%;background:var(--cyan);} .sec-r3{position:absolute;inset:32px;border-radius:50%;border:1px solid rgba(0,255,65,.4);} /* Real 9jaMart logo inside security ring */ .sec-logo-inner{position:absolute;inset:40px;border-radius:50%;background:rgba(0,255,65,.08);display:flex;align-items:center;justify-content:center;overflow:hidden;} .sec-logo-img{width:85%;height:auto;filter:drop-shadow(0 0 12px rgba(0,255,65,.6));} .sec-shield{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);background:#0B0E14;border-radius:50%;padding:8px;border:1px solid rgba(0,255,65,.5);} .trust-row-sec{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:48px;} .tbs{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:99px;background:var(--glass-bg);border:1px solid rgba(0,255,65,.2);backdrop-filter:blur(10px);font-size:13px;font-weight:500;color:rgba(255,255,255,.8);} .proto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-bottom:48px;} .proto-card{border-radius:14px;padding:16px;text-align:center;background:var(--glass-bg);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(20px);transition:all .3s;} .proto-card:hover{border-color:rgba(0,255,65,.3);} .proto-icon{width:48px;height:48px;border-radius:10px;background:rgba(0,255,65,.1);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;} .proto-nm{font-family:'Space Grotesk',sans-serif;font-weight:700;color:#fff;font-size:14px;margin-bottom:4px;} .proto-ds{color:rgba(255,255,255,.4);font-size:11px;margin-bottom:8px;} .status{display:inline-flex;align-items:center;gap:4px;} .st-dot{width:6px;height:6px;border-radius:50%;background:var(--neon-lime);animation:pulseGlow 2s ease-in-out infinite;} .st-lbl{color:var(--neon-lime);font-size:11px;font-weight:500;} .met-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px;} .met-card{border-radius:20px;padding:24px;text-align:center;background:var(--glass-bg);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(20px);transition:border-color .3s;} .met-v{font-family:'Space Grotesk',sans-serif;font-size:40px;font-weight:700;color:#fff;margin-bottom:8px;} .met-l{color:rgba(255,255,255,.5);font-size:14px;margin-bottom:8px;} .met-d{color:rgba(255,255,255,.3);font-size:12px;} .comp-box{border-radius:20px;padding:32px;background:var(--glass-bg);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(20px);margin-bottom:48px;} .comp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;} .comp-nm{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;margin-bottom:4px;} .comp-ds{color:rgba(255,255,255,.5);font-size:13px;} .partner-chips{text-align:center;} .chip-row{display:inline-flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:center;} .chip{display:inline-flex;align-items:center;gap:12px;padding:12px 24px;border-radius:99px;background:var(--glass-bg);backdrop-filter:blur(10px);} .chip.cy{border:1px solid rgba(0,255,255,.2);}.chip.li{border:1px solid rgba(0,255,65,.2);} .chip-by{color:rgba(255,255,255,.5);font-size:13px;} .chip-nm.cy{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--cyan);} .chip-nm.li{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--neon-lime);} .live-d{width:8px;height:8px;border-radius:50%;background:var(--neon-lime);animation:glR 2s ease-in-out infinite;} @keyframes glR{0%,100%{box-shadow:0 0 4px rgba(0,255,65,.4);}50%{box-shadow:0 0 12px rgba(0,255,65,.9);}} /* ══════════════════════════ ABOUT / STORY SECTION ══════════════════════════ */ .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;} .about-logo-wrap{ display:flex;align-items:center;justify-content:center; position:relative;padding:40px; } .about-logo-glow{ position:absolute;inset:0;border-radius:24px; background:radial-gradient(ellipse at center,rgba(0,255,65,.12) 0%,transparent 70%); animation:pulseGlow 3s ease-in-out infinite; } .about-logo-img{ width:100%;max-width:320px;height:auto; filter:drop-shadow(0 0 30px rgba(0,255,65,.5)); position:relative;z-index:2; } .about-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:99px;background:rgba(0,255,65,.1);border:1px solid rgba(0,255,65,.3);color:var(--neon-lime);font-size:13px;font-weight:600;margin-bottom:24px;} .about-h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,4vw,44px);font-weight:700;color:#fff;margin-bottom:20px;line-height:1.15;} .about-p{color:rgba(255,255,255,.65);font-size:16px;line-height:1.8;margin-bottom:16px;} .about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px;} .astat{text-align:center;padding:20px 12px;border-radius:16px;background:var(--glass-bg);border:1px solid var(--glass-border);} .astat-v{font-family:'Space Grotesk',sans-serif;font-size:32px;font-weight:700;margin-bottom:4px;} .astat-l{color:rgba(255,255,255,.5);font-size:13px;} /* ══════════════════════════ FOOTER ══════════════════════════ */ footer{position:relative;padding-top:64px;padding-bottom:32px;overflow:hidden;} .ft-line{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,255,65,.5),transparent);} .ft-glow{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:600px;height:300px;background:rgba(0,255,65,.05);border-radius:50%;filter:blur(150px);pointer-events:none;} .ft-inner{position:relative;z-index:10;max-width:1280px;margin:0 auto;padding:0 28px;} .ft-cta-banner{margin-bottom:48px;padding:32px;border-radius:20px;background:var(--glass-bg);border:1px solid rgba(0,255,255,.2);backdrop-filter:blur(20px);text-align:center;} .ft-cta-h{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:#fff;margin-bottom:8px;} .ft-cta-p{color:rgba(255,255,255,.6);margin-bottom:16px;} .btn-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:12px;background:linear-gradient(135deg,var(--cyan),var(--neon-lime));color:#0B0E14;font-weight:600;font-size:15px;border:none;cursor:pointer;transition:all .3s;} .btn-cta:hover{box-shadow:0 0 30px rgba(0,255,255,.4);} .ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;margin-bottom:48px;} /* REAL LOGO in footer */ .ft-logo-wrap{display:flex;align-items:center;gap:0;margin-bottom:16px;text-decoration:none;} .ft-logo-img{height:36px;width:auto;filter:drop-shadow(0 0 8px rgba(0,255,65,.5));} .ft-brand-p{color:rgba(255,255,255,.5);font-size:14px;line-height:1.7;} .ft-col h4{color:#fff;font-weight:600;margin-bottom:16px;font-size:15px;} .ft-col ul{list-style:none;display:flex;flex-direction:column;gap:12px;} .ft-col ul li a{color:rgba(255,255,255,.5);text-decoration:none;font-size:14px;transition:color .3s;} .ft-col ul li a:hover{color:var(--neon-lime);} .soc-icons{display:flex;gap:12px;margin-bottom:12px;} .soc-icon{width:40px;height:40px;border-radius:50%;background:var(--glass-bg);border:1px solid transparent;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);text-decoration:none;transition:all .3s;} .soc-icon:hover{color:var(--neon-lime);border-color:rgba(0,255,65,.3);} .ft-bottom{padding-top:32px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;} .ft-copy,.ft-credit{color:rgba(255,255,255,.4);font-size:12px;} /* FOOTER CENTER LOGO ICON */ .ft-center-logo{ text-align:center;margin:40px 0 48px; display:flex;flex-direction:column;align-items:center;gap:16px; } .ft-center-logo-img{ height:56px;width:auto; filter:drop-shadow(0 0 20px rgba(0,255,65,.5)); opacity:.85; } .ft-center-divider{ width:1px;height:32px; background:linear-gradient(to bottom,rgba(0,255,65,.5),transparent); } /* SCROLL TO TOP */ #warp-btn{position:fixed;bottom:24px;right:24px;z-index:50;transition:all .5s;transform:translateY(80px);opacity:0;pointer-events:none;} #warp-btn.vis{transform:translateY(0);opacity:1;pointer-events:auto;} .warp{position:relative;width:56px;height:56px;border-radius:50%;background:var(--glass-bg);border:1px solid rgba(0,255,255,.3);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;} .warp:hover{border-color:var(--cyan);box-shadow:0 0 15px rgba(0,255,255,.3),0 0 30px rgba(0,255,255,.15);} .warp-fill{position:absolute;inset:0;border-radius:50%;background:linear-gradient(to top,rgba(0,255,255,.2),transparent);transform:translateY(100%);transition:transform .5s;} .warp:hover .warp-fill{transform:translateY(0);} .warp-dot{position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:var(--neon-lime);box-shadow:0 0 10px rgba(0,255,65,.6);animation:glR 2s ease-in-out infinite;} .ripple-el{position:absolute;inset:0;border-radius:50%;animation:rippleOut .6s ease-out forwards;} @keyframes rippleOut{0%{transform:scale(1);opacity:.4;}100%{transform:scale(2.5);opacity:0;}} /* PARTNER MODAL */ #modal{display:none;position:fixed;inset:0;z-index:80;align-items:center;justify-content:center;padding:16px;} #modal.open{display:flex;} .modal-back{position:absolute;inset:0;background:rgba(11,14,20,.8);backdrop-filter:blur(12px);cursor:pointer;} .modal-wrap{position:relative;width:100%;max-width:480px;animation:mEnt .4s ease-out;} @keyframes mEnt{0%{opacity:0;transform:scale(.9) translateY(20px);}100%{opacity:1;transform:scale(1) translateY(0);}} .mc{position:absolute;width:32px;height:32px;} .mc.tl{top:-8px;left:-8px;border-top:2px solid var(--neon-lime);border-left:2px solid var(--neon-lime);border-radius:8px 0 0 0;} .mc.tr{top:-8px;right:-8px;border-top:2px solid var(--neon-lime);border-right:2px solid var(--neon-lime);border-radius:0 8px 0 0;} .mc.bl{bottom:-8px;left:-8px;border-bottom:2px solid var(--cyan);border-left:2px solid var(--cyan);border-radius:0 0 0 8px;} .mc.br{bottom:-8px;right:-8px;border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan);border-radius:0 0 8px 0;} .modal-box{border-radius:20px;overflow:hidden;background:rgba(15,19,24,.9);backdrop-filter:blur(30px);border:1px solid var(--glass-border);box-shadow:0 25px 50px rgba(0,0,0,.5),0 0 60px rgba(0,255,65,.12);} .modal-content{padding:32px;position:relative;} .modal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;} /* Real logo in modal */ .modal-logo-img{height:32px;width:auto;filter:drop-shadow(0 0 8px rgba(0,255,65,.4));} .modal-ttl{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:#fff;} .modal-x{width:40px;height:40px;border-radius:50%;background:var(--glass-bg);border:1px solid transparent;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);cursor:pointer;transition:all .3s;} .modal-x:hover{color:var(--neon-lime);border-color:rgba(0,255,65,.3);} .fg{margin-bottom:20px;} .fl{display:block;color:rgba(255,255,255,.7);font-size:14px;margin-bottom:8px;} .type-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .type-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;border-radius:12px;font-size:15px;font-weight:500;cursor:pointer;transition:all .3s;} .type-btn.li-a{border:1px solid var(--neon-lime);background:rgba(0,255,65,.1);color:var(--neon-lime);} .type-btn.li-i{border:1px solid rgba(255,255,255,.1);background:none;color:rgba(255,255,255,.5);} .type-btn.cy-a{border:1px solid var(--cyan);background:rgba(0,255,255,.1);color:var(--cyan);} .type-btn.cy-i{border:1px solid rgba(255,255,255,.1);background:none;color:rgba(255,255,255,.5);} .iw{position:relative;} .ii{position:absolute;left:16px;top:50%;transform:translateY(-50%);opacity:.3;} .fi-inp{width:100%;padding:14px 16px 14px 48px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;color:#fff;font-size:15px;transition:all .3s;outline:none;} .fi-inp:focus{border-color:rgba(0,255,65,.5);box-shadow:0 0 0 3px rgba(0,255,65,.1);} .fi-inp::placeholder{color:rgba(255,255,255,.3);} .btn-sub{width:100%;padding:16px;border-radius:12px;background:linear-gradient(135deg,var(--neon-lime),var(--cyan));color:#0B0E14;font-weight:700;font-size:16px;border:none;cursor:pointer;transition:all .3s;} .btn-sub:hover{box-shadow:0 0 30px rgba(0,255,65,.4);} .ls,.ss{padding:48px 0;text-align:center;} .spin{width:80px;height:80px;border-radius:50%;position:relative;margin:0 auto 24px;} .spin-t{position:absolute;inset:0;border-radius:50%;border:4px solid rgba(255,255,255,.1);} .spin-f{position:absolute;inset:0;border-radius:50%;border:4px solid transparent;border-top-color:var(--neon-lime);border-right-color:var(--cyan);animation:spinR 1s linear infinite;} @keyframes spinR{from{transform:rotate(0deg);}to{transform:rotate(360deg);}} .spin-p{position:absolute;inset:12px;border-radius:50%;background:rgba(0,255,65,.1);animation:glR 2s ease-in-out infinite;} .lt{color:rgba(255,255,255,.7);animation:glR 1.5s ease-in-out infinite;} .scheck{position:relative;width:96px;height:96px;margin:0 auto 24px;} .sping{position:absolute;inset:0;border-radius:50%;background:rgba(0,255,65,.2);animation:pingS 1.5s ease-in-out infinite;} @keyframes pingS{0%{transform:scale(1);opacity:.3;}50%{transform:scale(1.3);opacity:0;}100%{transform:scale(1);opacity:.3;}} .sinner{position:absolute;inset:8px;border-radius:50%;background:linear-gradient(135deg,var(--neon-lime),var(--cyan));display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px rgba(0,255,65,.5);} .stit{font-size:20px;font-weight:700;color:var(--neon-lime);margin-bottom:8px;} .smsg{color:rgba(255,255,255,.6);margin-bottom:24px;font-size:14px;line-height:1.6;} .btn-cls{display:inline-flex;align-items:center;gap:8px;padding:12px 32px;border-radius:12px;background:var(--glass-bg);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.7);font-size:15px;cursor:pointer;transition:all .3s;} .btn-cls:hover{color:var(--neon-lime);border-color:rgba(0,255,65,.3);} @keyframes bDot{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}} /* RESPONSIVE */ @media(max-width:1024px){ .nav-links,.nav-actions{display:none;} .hamburger{display:flex;} .id-grid,.about-grid{grid-template-columns:1fr;} .ft-grid{grid-template-columns:1fr 1fr;} } @media(max-width:768px){ .feat-row{grid-template-columns:1fr;} .feat-row.rev .feat-vis{order:0;} .met-grid{grid-template-columns:1fr;} .comp-grid{grid-template-columns:1fr 1fr;} .proto-grid{grid-template-columns:repeat(2,1fr);} .ft-grid{grid-template-columns:1fr;} .ft-bottom{flex-direction:column;text-align:center;} } @media(max-width:480px){ .hero-cta{flex-direction:column;align-items:stretch;} .about-stats{grid-template-columns:1fr;} .comp-grid{grid-template-columns:1fr;} } svg{display:block;}
9ja MaFo | 9ja Mart Nigeria LTD

9ja MaFo

Securing the Culture · 9ja Mart Nigeria LTD

Loading the Vibe...

Register Vanguard

© 2026 9ja MaFo | 9ja Mart Nigeria LTD

9ja MaFo – 9ja Mart Nigeria LTD

The Vibe is Now a Vault.

Discover. Connect. Transact.

Welcome to the epicenter of the 9ja digital culture. Engage with premium Vanguards, secure your transactions, and own your vibe. Powered by 9ja Mart Nigeria LTD.

AVS Protected
MintyPaysSecured
100%Escrow
9ja Mart
Scroll to explore

Choose Your Destiny.

The Citizen

Browse the Culture. Shop the Vibe. Zero Friction.

Immerse yourself in a seamless social discovery feed. Support your favorite creators and shop directly from their Vaults — powered by 9ja Mart Nigeria LTD.

Discovery FeedDirect ShoppingCreator Support
PREMIUM

The Vanguard

Sell, Earn, and Protect.

Upgrade your hustle. Access the professional business suite, custom chat patterns, and absolute escrow security via MintyPays.

Business SuiteCustom ChatEscrow Security
THE ARSENAL

Premium Tools for the Culture

Feature 01

The Vibe Feed

Experience content at 60fps in a buttery-smooth vertical scrolling interface. Discover creators, products, and culture in an immersive, TikTok-style feed designed for the 9ja digital generation.

  • 60fps smooth scrolling
  • AI-curated discovery
  • Instant engagement
@luxury_vendor
Verified Vanguard
I'm interested in the limited edition piece
Available! Let me set up secure escrow for you
Escrow created via MintyPays
Type a message...
Feature 02

Vanguard Comms

Negotiate in high-fidelity chat rooms backed by our custom J-Town architectural patterns. Every conversation is secure, every transaction protected by MintyPays escrow.

  • End-to-end encryption
  • Integrated escrow
  • Real-time notifications
Feature 03

The Creator Suite

Multi-image uploads, interactive swipe previews, and AI-driven Thumbnail Triggers for viral sharing. Everything you need to dominate the feed and monetize your content.

  • Multi-image galleries
  • AI thumbnail optimization
  • Analytics dashboard

Drag and drop your media

9ja MaFo | 9ja Mart Nigeria LTD
Our Story

Where the 9ja Hustle Meets the Digital Age

9ja MaFo is the flagship social-commerce platform of 9ja Mart Nigeria LTD — the mother company and corporate shield that backs every transaction, every Vanguard, and every Citizen in our ecosystem.

The name "MaFo" is derived from street slang meaning "Don't dull" — a battle cry for the unstoppable Nigerian digital generation. We merged the pulse of GenZ social media with the power of a modernized marketplace.

Our mission: make every pixel, every post, and every payment count — powered by MintyPays escrow and the Authorized Vanguard System (AVS).

100%
Escrow Protected
AVS
Verified Sellers
<2s
Transaction Speed
9ja MaFo Secure

Backed by AVS. Powered by MintyPaysTM

Every interaction, negotiation, and transaction in the 9ja MaFo ecosystem is locked within the Authorized Vanguard System (AVS). Financial processing is securely routed through the MintyPays API — a product of 9ja Mart Nigeria LTD.

SSL Secured
PCI Compliant
GDPR Ready
NDPR Compliant
Bank-Grade Security

Enterprise-Grade Security Protocols

TLS 1.3
Latest Transport Layer Security
Active
AES-256
Military-Grade Encryption
Active
PCI DSS
Payment Card Compliance
Certified
HTTPS/SSL
Secure Socket Layer
Enforced
2FA/MFA
Multi-Factor Auth
Enabled
SOC 2
Security Operations
Compliant
100%
Escrow Protected
All transactions secured until delivery confirmed
256-bit
AES Encryption
Same standard used by banks and governments
<2s
Transaction Speed
Lightning-fast processing with real-time confirmation

Compliance & Certifications

NDPR
Nigeria Data Protection Regulation
PCI DSS
Payment Card Industry Standard
ISO 27001
Information Security Management
SOC 2 Type II
Service Organization Control
Payment Infrastructure byMintyPays
Corporate Entity:9ja Mart Nigeria LTD