﻿*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#07090f;--bg2:#0a0f1a;--card:#101724;--card2:#0d1525;
  --b:rgba(255,255,255,0.07);--b2:rgba(255,255,255,0.13);
  --t:#dde6f5;--t2:#6d85a3;--t3:#2d3f55;
  --bl:#3b82f6;--gr:#22c55e;--or:#f59e0b;--rd:#ef4444;--cy:#06b6d4;--pu:#a855f7;
}
body{background:var(--bg);color:var(--t);font-family:system-ui,-apple-system,sans-serif;overflow-x:hidden}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:#1e3a5f;border-radius:4px}

/* ── NAV ── */
nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 64px;border-bottom:1px solid var(--b);
  background:rgba(7,9,15,.88);backdrop-filter:blur(18px);
  position:sticky;top:0;z-index:100;
}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-mark{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,#2563eb,#06b6d4);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:900;color:#fff;
  box-shadow:0 0 20px rgba(37,99,235,.4);
}
.logo-stack{line-height:1.2}
.logo-name{font-size:14px;font-weight:800;color:var(--t)}
.logo-name em{color:var(--bl);font-style:normal}
.logo-tag{font-size:10px;color:var(--t2);font-weight:400;letter-spacing:.8px;text-transform:uppercase}
.nav-links{display:flex;gap:32px}
.nav-links a{color:var(--t2);text-decoration:none;font-size:13px;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--t)}
.nav-actions{display:flex;gap:10px;align-items:center}
.btn-ghost{
  padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;
  border:1px solid var(--b2);color:var(--t2);text-decoration:none;transition:all .2s;
}
.btn-ghost:hover{border-color:rgba(59,130,246,.5);color:var(--t)}
.btn-solid{
  padding:8px 20px;border-radius:8px;font-size:13px;font-weight:700;
  background:var(--bl);color:#fff;text-decoration:none;
  box-shadow:0 4px 14px rgba(59,130,246,.35);transition:all .2s;
}
.btn-solid:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 6px 22px rgba(59,130,246,.48)}

/* ── HERO ── */
.hero{
  position:relative;overflow:hidden;
  padding:130px 64px 110px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.glow-c{position:absolute;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.1) 0%,transparent 65%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.glow-r{position:absolute;width:450px;height:450px;border-radius:50%;background:radial-gradient(circle,rgba(6,182,212,.07),transparent 70%);top:10%;right:5%;pointer-events:none}
.glow-l{position:absolute;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,.06),transparent 70%);bottom:10%;left:5%;pointer-events:none}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 18px;border-radius:24px;margin-bottom:36px;
  background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.25);
  color:var(--bl);font-size:12px;font-weight:600;letter-spacing:.5px;
}
.badge-dot{width:7px;height:7px;background:var(--bl);border-radius:50%;animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.hero h1{
  font-size:clamp(38px,5.8vw,70px);font-weight:800;
  letter-spacing:-2.5px;line-height:1.08;max-width:860px;margin-bottom:28px;
}
.hero h1 .accent{
  background:linear-gradient(135deg,#3b82f6 0%,#06b6d4 55%,#a855f7 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{
  font-size:18px;color:var(--t2);max-width:580px;
  line-height:1.75;margin-bottom:52px;
}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.cta-main{
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 30px;border-radius:11px;
  background:linear-gradient(135deg,var(--bl) 0%,#2563eb 100%);
  color:#fff;font-size:14px;font-weight:700;text-decoration:none;
  box-shadow:0 8px 28px rgba(59,130,246,.42);transition:all .25s;
}
.cta-main:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(59,130,246,.55)}
.cta-sec{
  display:inline-flex;align-items:center;gap:8px;
  padding:15px 26px;border-radius:11px;
  border:1px solid var(--b2);color:var(--t2);
  font-size:14px;font-weight:600;text-decoration:none;transition:all .2s;
}
.cta-sec:hover{border-color:rgba(59,130,246,.4);color:var(--t);background:rgba(59,130,246,.05)}

/* ── STATS CARDS ── */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  max-width:1100px;
  margin:0 auto;
  padding:0 32px 64px;
}
.stat-card{
  background:var(--card2);
  border:1px solid var(--b);
  border-radius:16px;
  padding:28px 24px;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:10px;
  transition:border-color .25s, box-shadow .25s;
}
.stat-card:hover{
  border-color:rgba(37,99,235,.4);
  box-shadow:0 8px 32px rgba(0,0,0,.3),0 0 24px rgba(37,99,235,.08);
}
.stat-icon{font-size:22px;line-height:1}
.stat-n{font-size:36px;font-weight:800;line-height:1;letter-spacing:-1px}
.stat-n em{color:var(--bl);font-style:normal}
.stat-l{font-size:12px;color:var(--t2);line-height:1.5}

/* ── SECTIONS ── */
.section{padding:100px 64px;max-width:1240px;margin:0 auto;width:100%}
.sec-kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:700;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--bl);margin-bottom:18px;
}
.sec-kicker::before{content:'';width:22px;height:2px;background:var(--bl);border-radius:2px}
.sec-title{font-size:clamp(28px,3.5vw,42px);font-weight:800;letter-spacing:-1px;margin-bottom:14px;line-height:1.2}
.sec-desc{font-size:15px;color:var(--t2);max-width:520px;line-height:1.75;margin-bottom:60px}

/* ── PRODUCTS GRID ── */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:24px}

.product-card{
  background:var(--card);border:1px solid var(--b);border-radius:22px;
  padding:38px;position:relative;overflow:hidden;transition:all .3s;
}
.product-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--bl),var(--cy));border-radius:22px 22px 0 0;
}
.product-card:hover{
  border-color:rgba(59,130,246,.3);transform:translateY(-5px);
  box-shadow:0 24px 64px rgba(0,0,0,.45),0 0 48px rgba(59,130,246,.07);
}
.product-card.soon{opacity:.55;border-style:dashed}
.product-card.soon::after{background:linear-gradient(90deg,var(--or),#ea580c)}

.pc-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:20px;
  background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);
  color:var(--bl);font-size:11px;font-weight:700;margin-bottom:22px;
}
.pc-badge.soon-badge{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.2);color:var(--or)}

.pc-icon{
  width:54px;height:54px;border-radius:16px;
  background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(6,182,212,.18));
  border:1px solid rgba(59,130,246,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;margin-bottom:22px;
}
.pc-icon.soon-icon{background:linear-gradient(135deg,rgba(245,158,11,.14),rgba(234,88,12,.12));border-color:rgba(245,158,11,.25)}

.pc-name{font-size:26px;font-weight:800;margin-bottom:12px;letter-spacing:-.6px}
.pc-name em{color:var(--cy);font-style:normal}
.pc-name em.or{color:var(--or)}

.pc-desc{font-size:14px;color:var(--t2);line-height:1.75;margin-bottom:28px}

.pc-features{display:flex;flex-direction:column;gap:11px;margin-bottom:32px}
.pf{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t2)}
.pf-dot{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.28);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--gr);font-weight:700;
}
.pf-dot.or{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.25);color:var(--or)}

.pc-footer{display:flex;align-items:center;justify-content:space-between;padding-top:26px;border-top:1px solid var(--b)}
.pc-link{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:10px;
  background:linear-gradient(135deg,var(--bl),#2563eb);
  color:#fff;font-size:13px;font-weight:700;text-decoration:none;
  box-shadow:0 4px 16px rgba(59,130,246,.35);transition:all .2s;
}
.pc-link:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(59,130,246,.5)}
.pc-pill{
  font-size:11px;font-weight:700;padding:4px 12px;
  border-radius:20px;background:rgba(34,197,94,.1);
  border:1px solid rgba(34,197,94,.22);color:var(--gr);
}
.pc-pill.soon{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.22);color:var(--or)}
.pc-coming{font-size:13px;color:var(--t3);font-weight:600}

/* ── WHY SECTION ── */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;align-items:start}
.why-card{
  background:var(--card);border:1px solid var(--b);border-radius:16px;
  padding:30px;transition:border-color .25s,transform .25s;
}
.why-card:hover{border-color:var(--b2);transform:translateY(-3px)}
.wi{
  width:46px;height:46px;border-radius:13px;font-size:22px;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.wi-bl{background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.2)}
.wi-gr{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.2)}
.wi-or{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.2)}
.wi-pu{background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.2)}
.why-title{font-size:15px;font-weight:700;margin-bottom:9px}
.why-desc{font-size:13px;color:var(--t2);line-height:1.65}

/* Security card highlight */
.why-card--secure{
  border-color:rgba(34,197,94,.3)!important;
  background:rgba(34,197,94,.04)!important;
  box-shadow:0 0 40px rgba(34,197,94,.08);
}
.why-card--secure:hover{
  border-color:rgba(34,197,94,.6)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 50px rgba(34,197,94,.15)!important;
}
.secure-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:20px;margin-bottom:18px;
  background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);
  color:var(--gr);font-size:11px;font-weight:700;letter-spacing:.4px;
}
.secure-points{
  display:flex;flex-direction:column;gap:6px;margin-top:16px;
  padding-top:14px;border-top:1px solid rgba(34,197,94,.15);
}
.sp{font-size:12px;color:var(--gr);font-weight:600;opacity:.85}

/* Scale card */
.why-card--scale{border-color:rgba(168,85,247,.25)!important}
.why-card--scale:hover{border-color:rgba(168,85,247,.5)!important;box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 50px rgba(168,85,247,.1)!important}
.scale-limits{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(168,85,247,.15)}
.sl{display:flex;align-items:center;gap:10px}
.sl-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.3px;background:rgba(168,85,247,.15);border:1px solid rgba(168,85,247,.35);color:#c4b5fd;white-space:nowrap;flex-shrink:0}
.sl-badge--free{background:rgba(100,116,139,.12);border-color:rgba(100,116,139,.3);color:#94a3b8}
.sl-text{font-size:12px;color:var(--t2)}
.sl-text strong{color:var(--t)}

/* ── VALUE STATEMENT ── */
.value-stmt{margin-top:64px;border-top:1px solid var(--b);padding-top:64px;display:flex;flex-direction:column;align-items:center;text-align:center}
.value-stmt-pre{font-size:13px;font-weight:600;color:var(--t2);letter-spacing:.6px;text-transform:uppercase;margin-bottom:20px}
.value-stmt-head{font-size:clamp(26px,4vw,44px);font-weight:800;letter-spacing:-1.5px;line-height:1.15;margin-bottom:12px}
.value-stmt-head .grad{background:linear-gradient(135deg,#3b82f6 0%,#06b6d4 55%,#a855f7 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.value-stmt-sub{font-size:16px;color:var(--t2);margin-bottom:44px}
.value-outcomes{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.vo{display:flex;align-items:center;gap:14px;padding:18px 28px;border-radius:14px;background:var(--card);border:1px solid var(--b);transition:all .25s;cursor:default}
.vo:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.vo-1{border-color:rgba(34,197,94,.2)}
.vo-1:hover{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.04)}
.vo-2{border-color:rgba(59,130,246,.2)}
.vo-2:hover{border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.04)}
.vo-3{border-color:rgba(168,85,247,.2)}
.vo-3:hover{border-color:rgba(168,85,247,.45);background:rgba(168,85,247,.04)}
.vo-icon{font-size:28px;flex-shrink:0}
.vo-label{font-size:15px;font-weight:800;letter-spacing:-.3px}
.vo-1 .vo-label{color:#22c55e}
.vo-2 .vo-label{color:#3b82f6}
.vo-3 .vo-label{color:#a855f7}
.vo-caption{font-size:12px;color:var(--t2);margin-top:2px}

/* ── TRUST SECTION ── */
.trust-section{
  position:relative;overflow:hidden;
  margin:0 64px 80px;border-radius:28px;
  background:rgba(17,24,38,1);
  border:1px solid rgba(34,197,94,.18);
  padding:80px 64px 64px;
}
.trust-glow{
  position:absolute;width:700px;height:400px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(34,197,94,.07),transparent 70%);
  top:-100px;left:50%;transform:translateX(-50%);pointer-events:none;
}
.trust-header{text-align:center;margin-bottom:52px;position:relative}
.trust-kicker{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 16px;border-radius:20px;margin-bottom:20px;
  background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);
  color:#4ade80;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
}
.trust-title{font-size:clamp(26px,3.5vw,42px);font-weight:800;letter-spacing:-1.2px;line-height:1.15;margin-bottom:16px}
.trust-accent{color:#22c55e}
.trust-sub{font-size:16px;color:var(--t2);max-width:580px;margin:0 auto;line-height:1.75}

.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:40px}
.tg-card{
  position:relative;padding:28px 24px;border-radius:16px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);
  transition:all .25s;
}
.tg-card:hover{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.04);transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.3)}
.tg-highlight{
  border-color:rgba(34,197,94,.3)!important;
  background:rgba(34,197,94,.06)!important;
  box-shadow:0 0 30px rgba(34,197,94,.08);
}
.tg-highlight:hover{border-color:rgba(34,197,94,.55)!important;box-shadow:0 20px 40px rgba(0,0,0,.3),0 0 40px rgba(34,197,94,.12)!important}
.tg-badge{
  display:inline-flex;padding:2px 10px;border-radius:20px;margin-bottom:14px;
  background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.35);
  color:#4ade80;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
}
.tg-icon{font-size:28px;margin-bottom:12px}
.tg-title{font-size:14px;font-weight:700;color:var(--t);margin-bottom:8px;letter-spacing:-.2px;line-height:1.3}
.tg-desc{font-size:12px;color:var(--t2);line-height:1.65}

.trust-callout{
  display:flex;align-items:flex-start;gap:24px;
  padding:28px 32px;border-radius:16px;
  background:rgba(34,197,94,.05);border:1px solid rgba(34,197,94,.2);
}
.tc-shield{font-size:32px;flex-shrink:0;margin-top:2px}
.tc-body{flex:1}
.tc-headline{font-size:15px;font-weight:700;color:#4ade80;margin-bottom:8px;letter-spacing:-.2px}
.tc-text{font-size:13px;color:var(--t2);line-height:1.75}
.tc-text strong{color:var(--t)}
.tc-checks{display:flex;flex-direction:column;gap:7px;flex-shrink:0;justify-content:center}
.tc-check{font-size:12px;font-weight:700;color:#4ade80;white-space:nowrap;padding:4px 12px;border-radius:20px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2)}

/* ── CTA BANNER ── */
.cta-banner{
  margin:20px 64px 90px;border-radius:24px;
  background:linear-gradient(135deg,rgba(37,99,235,.14),rgba(6,182,212,.09) 50%,rgba(168,85,247,.07));
  border:1px solid rgba(59,130,246,.22);
  padding:80px 64px;text-align:center;position:relative;overflow:hidden;
}
.cta-banner::before{
  content:'';position:absolute;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.08),transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;
}
.cta-banner h2{font-size:clamp(28px,3.5vw,44px);font-weight:800;letter-spacing:-.8px;margin-bottom:16px}
.cta-banner p{font-size:16px;color:var(--t2);max-width:500px;margin:0 auto 40px;line-height:1.75}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── FOOTER ── */
footer{border-top:1px solid var(--b);padding:56px 64px 32px;display:flex;flex-direction:column;gap:0}
.footer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;margin-bottom:40px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.footer-name{font-size:13px;font-weight:700;color:var(--t2)}
.footer-name em{color:var(--bl);font-style:normal}
.footer-cols{display:flex;gap:56px;flex-wrap:wrap}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--t2);margin-bottom:4px}
.footer-col a{color:var(--t3);font-size:13px;text-decoration:none;transition:color .2s}
.footer-col a:hover{color:var(--t)}
.footer-copy{text-align:center;font-size:11px;color:var(--t3);padding-top:24px;border-top:1px solid var(--b)}

@media(max-width:768px){
  nav{padding:16px 22px}
  .nav-links{display:none}
  .hero{padding:80px 22px 60px}
  .section{padding:60px 22px}
  .stats-grid{grid-template-columns:repeat(2,1fr);padding:0 22px 48px}
  .trust-section{margin:0 16px 60px;padding:50px 24px 40px}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .trust-callout{flex-direction:column;gap:16px}
  .tc-checks{flex-direction:row;flex-wrap:wrap}
  .cta-banner{margin:0 22px 60px;padding:50px 24px}
  footer{padding:40px 24px 28px}
  .footer-top{flex-direction:column;gap:28px}
  .footer-cols{gap:28px}
}

/* ── MOVEMENT ANIMATIONS ── */

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.delay-1{transition-delay:.1s}
.delay-2{transition-delay:.2s}
.delay-3{transition-delay:.3s}
.delay-4{transition-delay:.4s}

/* Nav slide in */
nav{animation:navDown .55s cubic-bezier(.22,1,.36,1) both}
@keyframes navDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* Hero cascade */
.hero-badge{animation:fadeUp .7s .05s cubic-bezier(.22,1,.36,1) both}
.hero h1{animation:fadeUp .7s .15s cubic-bezier(.22,1,.36,1) both}
.hero-sub{animation:fadeUp .7s .28s cubic-bezier(.22,1,.36,1) both}
.hero-ctas{animation:fadeUp .7s .4s cubic-bezier(.22,1,.36,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}


/* Floating glow orbs */
.glow-c{animation:floatC 7s ease-in-out infinite}
.glow-r{animation:floatR 9s ease-in-out infinite}
.glow-l{animation:floatL 11s ease-in-out infinite}
@keyframes floatC{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}
@keyframes floatR{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,16px)}}
@keyframes floatL{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-20px)}}

.logo-mark-svg{width:38px;height:38px;flex-shrink:0;display:block;border-radius:8px}