*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--blue:#0055FF;--blue-hover:#0044CC;--navy:#0A1628;--navy-light:#0F1D32;--white:#FFF;--gray-50:#F8FAFC;--gray-100:#F1F5F9;--gray-500:#64748B;--gray-900:#0F172A;--green:#10B981;--purple:#8B5CF6;--radius:16px}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--gray-900);background:var(--white);line-height:1.6}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;transition:all .3s}
.nav.scrolled{background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid #e2e8f0;padding:10px 0}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--blue),var(--purple));border-radius:10px;display:flex;align-items:center;justify-content:center}
.nav-logo-icon svg{width:20px;height:20px;color:#fff}
.nav-logo span{font-size:1.2rem;font-weight:800;color:var(--gray-900);letter-spacing:-.02em}
.nav-logo span b{color:var(--blue)}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{text-decoration:none;font-size:.88rem;font-weight:500;color:var(--gray-500);transition:color .2s}
.nav-links a:hover{color:var(--gray-900)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:10px;font-weight:600;font-size:.9rem;text-decoration:none;transition:all .25s;border:none;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(0,85,255,.25)}
.btn-primary:hover{background:var(--blue-hover);transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,85,255,.35)}
.btn-outline{background:transparent;color:var(--gray-900);border:1.5px solid #e2e8f0}
.btn-outline:hover{border-color:var(--blue);color:var(--blue)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.15)}
.btn-sm{padding:10px 20px;font-size:.85rem}
.btn-dark{background:var(--gray-900);color:#fff !important;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.btn-dark:hover{background:#1e293b;transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.25);color:#fff !important}

/* HERO */
.hero{padding:140px 0 80px;background:linear-gradient(180deg,#f0f4ff 0%,var(--white) 100%);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(0,85,255,.08),transparent 70%);top:-200px;right:-100px;border-radius:50%}
.hero::after{content:'';position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(139,92,246,.06),transparent 70%);bottom:-100px;left:-50px;border-radius:50%}
.container{max-width:1200px;margin:0 auto;padding:0 32px;position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:#EEF2FF;color:var(--blue);padding:6px 16px;border-radius:99px;font-size:.8rem;font-weight:600;margin-bottom:20px}
.hero-badge span{width:6px;height:6px;background:var(--green);border-radius:50%}
.hero h1{font-size:3.2rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:20px;color:var(--gray-900)}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--blue),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:1.15rem;color:var(--gray-500);max-width:480px;margin-bottom:36px;line-height:1.7}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-visual{position:relative}
.hero-mockup{width:100%;border-radius:var(--radius);box-shadow:0 25px 60px rgba(0,0,0,.12);border:1px solid #e2e8f0;background:#fff;padding:20px;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero-glow{position:absolute;width:120%;height:120%;top:-10%;left:-10%;background:radial-gradient(circle,rgba(0,85,255,.1),transparent 60%);z-index:-1;filter:blur(40px)}

/* STATS */
.stats{padding:40px 0;border-top:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;background:var(--white)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat-val{font-size:2rem;font-weight:800;color:var(--blue)}
.stat-label{font-size:.85rem;color:var(--gray-500);margin-top:4px}

/* BENEFITS */
.benefits{padding:100px 0;background:var(--gray-50)}
.section-tag{display:inline-flex;align-items:center;gap:6px;background:#EEF2FF;color:var(--blue);padding:5px 14px;border-radius:99px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px}
.section-title{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;margin-bottom:14px;color:var(--gray-900)}
.section-sub{font-size:1.05rem;color:var(--gray-500);max-width:600px;margin-bottom:56px}
.text-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.benefit-card{background:rgba(255,255,255,.85);backdrop-filter:blur(16px);border-radius:20px;padding:36px 28px;border:1px solid rgba(255,255,255,.6);transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.03)}
.benefit-card::before{content:'';position:absolute;inset:0;border-radius:20px;padding:1.5px;background:linear-gradient(135deg,rgba(0,85,255,.15),rgba(139,92,246,.1),rgba(16,185,129,.1));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}
.benefit-card::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%);transform:rotate(45deg) translateX(-100%);transition:transform .8s}
.benefit-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,85,255,.1),0 8px 24px rgba(0,0,0,.06);border-color:transparent}
.benefit-card:hover::before{opacity:1}
.benefit-card:hover::after{transform:rotate(45deg) translateX(100%)}
.benefit-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:26px;position:relative;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.benefit-icon.blue{background:linear-gradient(135deg,#EEF2FF,#DBEAFE)}
.benefit-icon.green{background:linear-gradient(135deg,#ECFDF5,#D1FAE5)}
.benefit-icon.purple{background:linear-gradient(135deg,#F3E8FF,#E9D5FF)}
.benefit-icon.amber{background:linear-gradient(135deg,#FEF3C7,#FDE68A)}
.benefit-icon.red{background:linear-gradient(135deg,#FEE2E2,#FECACA)}
.benefit-icon.cyan{background:linear-gradient(135deg,#ECFEFF,#CFFAFE)}
.benefit-card h3{font-size:1.1rem;font-weight:700;margin-bottom:10px;color:var(--gray-900);letter-spacing:-.01em}
.benefit-card p{font-size:.88rem;color:var(--gray-500);line-height:1.7}

/* FEATURES ZIG-ZAG */
.features{padding:100px 0;background:var(--white)}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-bottom:80px}
.feature-row:last-child{margin-bottom:0}
.feature-row.reverse .feature-visual{order:-1}
.feature-visual{border-radius:var(--radius);overflow:hidden;box-shadow:0 15px 40px rgba(0,0,0,.1);border:1px solid #e2e8f0}
.feature-visual-inner{background:linear-gradient(135deg,#f8fafc,#eef2ff);padding:40px;min-height:320px;display:flex;align-items:center;justify-content:center}
.feature-tag{color:var(--blue);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.feature-content h3{font-size:1.8rem;font-weight:800;letter-spacing:-.02em;margin-bottom:16px}
.feature-content p{font-size:1rem;color:var(--gray-500);margin-bottom:24px;line-height:1.7}
.feature-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.feature-list li{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;color:var(--gray-500)}
.feature-list li .check{width:20px;height:20px;border-radius:50%;background:#ECFDF5;color:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;font-weight:700}

/* SECURITY */
.security{padding:100px 0;background:var(--navy);color:#fff;position:relative;overflow:hidden}
.security::before{content:'';position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(0,85,255,.15),transparent 70%);top:-200px;right:-100px;border-radius:50%}
.security-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.security .section-tag{background:rgba(0,85,255,.2);color:#60a5fa}
.security .section-title{color:#fff}
.security .section-sub{color:#94a3b8}
.security-checks{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sec-check{display:flex;align-items:flex-start;gap:12px;padding:16px;background:rgba(255,255,255,.05);border-radius:12px;border:1px solid rgba(255,255,255,.08)}
.sec-check-icon{width:36px;height:36px;border-radius:10px;background:rgba(16,185,129,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--green);font-size:16px}
.sec-check h4{font-size:.88rem;font-weight:600;color:#f1f5f9;margin-bottom:2px}
.sec-check p{font-size:.78rem;color:#64748b}

/* CTA */
.cta{padding:100px 0;background:linear-gradient(135deg,#f0f4ff,#faf5ff);text-align:center}
.cta h2{font-size:2.4rem;font-weight:800;margin-bottom:16px;letter-spacing:-.02em}
.cta p{font-size:1.1rem;color:var(--gray-500);margin-bottom:36px;max-width:500px;margin-left:auto;margin-right:auto}

/* FOOTER */
.footer{padding:60px 0 30px;background:var(--navy);color:#94a3b8}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-brand p{font-size:.85rem;line-height:1.7;margin-top:12px;max-width:280px}
.footer h4{color:#f1f5f9;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px}
.footer ul{list-style:none}
.footer ul li{margin-bottom:10px}
.footer ul a{color:#64748b;text-decoration:none;font-size:.85rem;transition:color .2s}
.footer ul a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;display:flex;justify-content:space-between;font-size:.8rem}

/* RESPONSIVE */
@media(max-width:1024px){
.hero h1{font-size:2.4rem}
.hero-grid,.feature-row,.security-grid{grid-template-columns:1fr;gap:40px}
.feature-row.reverse .feature-visual{order:0}
.benefits-grid{grid-template-columns:1fr 1fr}
.stats-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
.hero h1{font-size:1.8rem}
.section-title{font-size:1.8rem}
.benefits-grid{grid-template-columns:1fr 1fr}
.security-checks{grid-template-columns:1fr}
.nav-links a:not(.btn){display:none}
.hero-ctas{flex-direction:column}
.footer-grid{grid-template-columns:1fr}
.footer-bottom{flex-direction:column;gap:8px}
}

/* MOCKUP STYLES */
.mockup-dash{width:100%;font-size:12px}
.mockup-bar{background:#1e293b;border-radius:12px 12px 0 0;padding:10px 16px;display:flex;gap:6px}
.mockup-dot{width:8px;height:8px;border-radius:50%}
.mockup-body{background:#f1f5f9;border-radius:0 0 12px 12px;padding:20px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.mockup-card{background:#fff;border-radius:10px;padding:14px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.mockup-card .mc-title{font-weight:700;font-size:10px;color:var(--gray-900);margin-bottom:6px}
.mockup-card .mc-bar{height:6px;border-radius:99px;margin-bottom:4px}
.mockup-card .mc-text{font-size:9px;color:var(--gray-500)}

/* FEATURE MOCKUPS */
.mock-vault{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px}
.mock-vault-row{background:#fff;border-radius:10px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.mock-vault-row span{font-size:11px;font-weight:600}
.mock-vault-badge{font-size:9px;padding:3px 10px;border-radius:99px;font-weight:700}