:root{
  --bg:#070A12;
  --bg2:#0A0F1D;
  --card: rgba(255,255,255,.07);
  --card2: rgba(255,255,255,.05);
  --stroke: rgba(255,255,255,.12);
  --stroke2: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.55);
  --brand:#7C5CFF;
  --cyan:#22D3EE;
  --mag:#FF4FD8;
  --grad: linear-gradient(135deg, rgba(124,92,255,1), rgba(34,211,238,1));
  --grad2: linear-gradient(135deg, rgba(34,211,238,1), rgba(255,79,216,1));
  --shadow: 0 24px 70px rgba(0,0,0,.55);
  --shadow2: 0 14px 44px rgba(0,0,0,.38);
  --radius: 22px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
#top{position:absolute; top:0; left:0; width:1px; height:1px; overflow:hidden}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(1100px 780px at 18% 10%, rgba(124,92,255,.26), transparent 58%),
    radial-gradient(900px 720px at 86% 18%, rgba(34,211,238,.18), transparent 58%),
    radial-gradient(720px 720px at 68% 88%, rgba(255,79,216,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.wrap{max-width:1180px; margin:0 auto; padding:0 22px}

/* Subtle grid overlay */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(720px 520px at 50% 18%, #000 38%, transparent 72%);
  opacity:.75;
}

/* Reveal */
[data-reveal]{
  opacity:0;
  transform: translateY(14px);
  filter: blur(8px);
  transition:
    opacity .75s var(--ease),
    transform .75s var(--ease),
    filter .75s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].in{opacity:1; transform:none; filter:none}

@media (prefers-reduced-motion: reduce){
  .marqueeTrack{animation:none !important; transform:none !important}

  html{scroll-behavior:auto}
  [data-reveal]{opacity:1; transform:none; filter:none; transition:none}
  .btn, .card, .mock, .chip{transition:none !important}
}

/* Nav */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(7,10,18,.58);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px}

.brandRow{display:flex; align-items:center; gap:12px; min-width: 200px}
.logoImg{height:45px; width:auto}
.brandText{display:flex; flex-direction:column; line-height:1.05}
.brandText strong{font-weight:900; letter-spacing:.2px; font-size:15px}
.brandText span{font-weight:750; font-size:12px; color:var(--muted2)}

.links{display:flex; gap:18px; align-items:center; color:var(--muted); font-weight:750; font-size:14px}
.links a{opacity:.9; transition:opacity .22s var(--ease)}
.links a:hover{opacity:1}

.nav-right{display:flex; gap:10px; align-items:center}

.menuBtn{
  display:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 12px;
  padding:10px 12px;
  font-weight:900;
  line-height:1;
}

.mobileMenu{display:none; padding: 0 0 14px}
.mobileMenu a{display:block; padding:12px 0; border-top:1px solid rgba(255,255,255,.06); color:var(--muted); font-weight:800}
.mobileMenu.open{display:block}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  padding: 11px 14px;
  font-weight:900;
  font-size:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  cursor:pointer;
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 18px 46px rgba(0,0,0,.35); border-color: rgba(255,255,255,.18)}
.btn:active{transform: translateY(0px) scale(.99)}

.btn.primary{
  border:1px solid rgba(124,92,255,.55);
  background: linear-gradient(135deg, rgba(124,92,255,1), rgba(34,211,238,1));
  color: #05070f;
  box-shadow: 0 16px 44px rgba(124,92,255,.18), 0 16px 44px rgba(34,211,238,.10);
}
.btn.primary:hover{box-shadow: 0 22px 64px rgba(124,92,255,.24), 0 22px 64px rgba(34,211,238,.14)}
.btn.ghost{background:transparent; border:1px solid rgba(255,255,255,.14)}

/* Base typography */
h1,h2,h3{margin:0}

/* Hero */
.hero{position:relative; padding: 54px 0 26px; z-index:1}
.hero-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:34px; align-items:center}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-weight:850;
  font-size:12px;
}
.pill .dot{width:8px;height:8px;border-radius:999px;background:var(--grad)}

.hero h1{
  margin: 14px 0 10px;
  font-size: 54px;
  line-height: 1.02;
  letter-spacing: -1px;
}
.hero .sub{
  margin: 0 0 18px;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.75;
  max-width: 62ch;
}

.ctaRow{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

.heroBenefits{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:12px;
  margin-top: 16px;
}
.benefitCard{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 14px 44px rgba(0,0,0,.28);
}
.benefitTitle{font-weight:950; font-size:13px; letter-spacing:.2px}
.benefitText{margin-top:6px; color: var(--muted2); font-size:12.5px; font-weight:750; line-height:1.5}

.metrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top: 18px;
}
.metric{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 12px;
}
.metricTop{font-weight:900; font-size: 13px; letter-spacing:.2px}
.metricSub{margin-top:6px; color: var(--muted2); font-size: 12.5px; font-weight:750; line-height:1.5}

/* Hero visual */
.hero-visual{position:relative}
.mock{
  position:relative;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.mockGlow{
  position:absolute; inset:-40%;
  background:
    radial-gradient(closest-side at 30% 20%, rgba(34,211,238,.25), transparent 55%),
    radial-gradient(closest-side at 70% 50%, rgba(124,92,255,.22), transparent 55%),
    radial-gradient(closest-side at 55% 85%, rgba(255,79,216,.16), transparent 60%);
  filter: blur(22px);
  opacity:.85;
}
.mockImg{position:relative; width:100%; height:auto; opacity:.96}


.deviceMock{min-height: 520px;}
.deviceStack{position:relative; height: 520px; padding: 18px;}
.device{position:absolute; overflow:hidden; border-radius: 34px; border:1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.22);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
}
.device img{display:block; width:100%; height:100%; object-fit: cover;}
.device--back{width: 72%; max-width: 360px; height: 86%; left: 8%; top: 7%; transform: rotate(-2.5deg); opacity: .92;}
.device--front{width: 76%; max-width: 380px; height: 92%; right: 6%; top: 4%; transform: rotate(1.8deg);}

@media (max-width: 980px){
  .deviceMock{min-height: 460px;}
  .deviceStack{height: 460px;}
  .device--back{left: 2%;}
  .device--front{right: 2%;}
}
@media (max-width: 640px){
  .deviceMock{min-height: 420px;}
  .deviceStack{height: 420px; padding: 14px;}
  .device--back{display:none;}
  .device--front{width: 92%; left: 4%; right:auto; transform: none;}
}

.deviceMock{min-height: 520px}
.deviceStack{position:relative; height: 520px; padding: 18px}
.device{position:absolute; inset:auto; width: 72%; max-width: 360px; border-radius: 34px; overflow:hidden;
  border:1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.20); box-shadow: 0 30px 80px rgba(0,0,0,.55)}
.device img{display:block; width:100%; height:100%; object-fit: cover; transform: translateZ(0)}
.device--back{left: 10%; top: 12%; transform: rotate(-5deg); opacity: .92; filter: saturate(1.05)}
.device--front{right: 8%; bottom: 10%; transform: rotate(4deg)}

.walletShots{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px}
.walletShots img{width:100%; height: 430px; object-fit: contain; border-radius: 18px; border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22); box-shadow: var(--shadow2); padding: 10px}

.mockBadges{
  position:absolute; left:14px; right:14px; bottom:14px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding:8px 10px;
  border-radius: 999px;
  font-size:12px;
  color: rgba(255,255,255,.85);
  font-weight:850;
}
.chip::before{content:""; width:8px; height:8px; border-radius:999px; background: var(--grad)}

.miniRow{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top: 12px}
.miniCard{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 12px;
}
.miniTitle{font-weight:900; font-size: 13px}
.miniText{margin-top:6px; color: var(--muted2); font-weight:750; font-size: 12.5px; line-height:1.5}

/* Sections */
.section{padding: 70px 0; position:relative; z-index:1; scroll-margin-top: 92px}
.sectionHead{margin-bottom: 20px}
.sectionHead h2{font-size: 36px; letter-spacing: -.7px; line-height:1.1}
.lead{margin: 10px 0 0; color: var(--muted); line-height:1.75; max-width: 80ch}


/* Social proof strip */
.section.slim{padding: 40px 0 18px}
.stripHead{margin-bottom: 14px}
.mutedInline{color: var(--muted2); font-weight:850}

.logoMarquee{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadow2);
  padding: 14px 0;
}
.marqueeTrack{
  display:flex;
  width: max-content;
  will-change: transform;
  animation: marquee 26s linear infinite;
}
.logoMarquee:hover .marqueeTrack{animation-play-state: paused}
.logoRow{display:flex; align-items:center; gap:22px; padding: 0 14px}
.logoItem{
  display:flex;
  align-items:center;
  justify-content:center;
  height:72px;
  padding: 12px 18px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.logoItem img{
  height:46px;
  width:auto;
  opacity:.90;
  filter: grayscale(85%);
  transition: opacity .18s var(--ease), filter .18s var(--ease), transform .18s var(--ease);
}
.logoItem:hover img{opacity:1; filter:none; transform: translateY(-1px)}
.logoItem.real{background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18)}
.logoItem.real img{filter:none; opacity: 1}
@keyframes marquee{from{transform: translateX(0)} to{transform: translateX(-50%)}}

/* Showcase */
.tag{
  display:inline-flex; align-items:center; gap:8px;
  border-radius: 999px;
  padding: 8px 10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 900;
}
.tag.subtle{opacity:.75; background: rgba(255,255,255,.04)}

.shotGrid{display:grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap:16px}
.shot{padding: 14px; overflow:hidden}
.shot.span6{grid-column: span 6}
.shot.span4{grid-column: span 4}

.shotTop{display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 10px}
.shotImg{border-radius: 18px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.22); box-shadow: var(--shadow2)}
.shotBody{padding-top: 12px}
.shotBody h3{font-size: 18px; letter-spacing:-.2px; margin-bottom: 6px}
.shotBody p{margin:0; color: var(--muted); line-height:1.75; font-weight:700}

.showcaseCta{margin-top: 16px}
.showcaseBox{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(124,92,255,.16), rgba(34,211,238,.10));
  box-shadow: var(--shadow2);
}
.showcaseTitle{font-weight:950; letter-spacing:-.2px}
.showcaseText{margin-top: 6px; color: var(--muted2); font-weight:750; line-height:1.6}

.card{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
}

/* Problem vs Solution */
.split{display:grid; grid-template-columns: 1fr 1fr; gap:16px}
.splitCard{padding: 18px}
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  margin-bottom: 10px;
}
.kicker::before{content:""; width:10px;height:10px;border-radius:999px; background: rgba(255,255,255,.25)}
.kicker.good::before{background: rgba(34,211,238,.75)}
.kicker.bad::before{background: rgba(255,79,216,.60)}
.splitCard h3{font-size: 18px; letter-spacing:-.2px; margin-bottom: 8px}
.list{margin: 10px 0 0; padding-left: 18px; color: var(--muted); line-height:1.75; font-weight:700}
.list li{margin: 8px 0}

/* 3-column grid */
.grid3{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px}
.step{padding: 18px; position:relative; overflow:hidden}
.stepNum{
  font-weight:950;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 10px;
}
.step h3{font-size: 18px; margin-bottom: 8px}
.step p{margin:0; color: var(--muted); line-height:1.75; font-weight:700}

/* Tabs */
.tabs{margin-top: 16px}
.tabBar{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-bottom: 14px;
}
.tab{
  border-radius: 999px;
  padding: 10px 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-weight:900;
  font-size: 13px;
  cursor:pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.tab:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.18)}
.tab.active{
  color: rgba(255,255,255,.92);
  background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(34,211,238,.16));
  border-color: rgba(124,92,255,.35);
}

.panels{position:relative}
.panel{display:none}
.panel.active{display:block}
.panelGrid{display:grid; grid-template-columns: 1.05fr .95fr; gap:18px; align-items:center}
.panelCopy{padding: 18px}
.panelCopy h3{font-size: 22px; letter-spacing:-.3px; margin-bottom: 8px}
.panelCopy p{margin:0 0 12px; color: var(--muted); line-height:1.75; font-weight:700}
.bullets{margin: 12px 0 0; padding-left: 18px; color: var(--muted); line-height:1.75; font-weight:750}
.bullets li{margin: 8px 0}
.panelMedia{border-radius: var(--radius); overflow:hidden}
.mediaImg{border-radius: var(--radius); border:1px solid rgba(255,255,255,.12); box-shadow: var(--shadow2)}

/* Wallet section */
.walletRow{display:grid; grid-template-columns: 1fr 1fr; gap:16px}
.walletCard{padding: 18px}
.walletCard .kicker{margin-bottom: 8px}
.walletCard h3{font-size: 18px; margin-bottom: 8px}
.walletCard p{margin:0; color: var(--muted); line-height:1.75; font-weight:700}

/* Video */
.videoCard{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:stretch;
}
.videoPoster{
  position:relative;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow2);
  cursor:pointer;
  padding:0;
}
.videoPoster img{width:100%; height:100%; object-fit:cover; opacity:.95}
.play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.playTri{
  width:74px; height:74px; border-radius: 999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  position:relative;
}
.playTri::after{
  content:"";
  position:absolute;
  left: 30px;
  top: 24px;
  width:0; height:0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 18px solid rgba(255,255,255,.92);
}
.videoMeta{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
  padding: 18px;
}
.videoMetaTitle{font-weight:950; letter-spacing:-.2px; margin-bottom: 6px}
.videoMetaText{color: var(--muted); line-height:1.75; font-weight:700}
.videoMeta code{background: rgba(0,0,0,.22); padding: 2px 6px; border-radius: 8px; border:1px solid rgba(255,255,255,.10)}


/* Trust / Security */
.trustLayout{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap:16px;
  align-items:stretch;
}
.trustPrimary{
  padding: 18px;
  position:relative;
  overflow:hidden;
  background: linear-gradient(135deg, rgba(124,92,255,.14), rgba(34,211,238,.08));
}
.trustPrimary::before{
  content:"";
  position:absolute; inset:-40%;
  background: radial-gradient(closest-side at 30% 20%, rgba(34,211,238,.22), transparent 55%),
              radial-gradient(closest-side at 70% 60%, rgba(124,92,255,.20), transparent 58%),
              radial-gradient(closest-side at 50% 90%, rgba(255,79,216,.12), transparent 60%);
  filter: blur(26px);
  opacity:.8;
}
.trustPrimary > *{position:relative}
.trustIcon{
  width:44px; height:44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  margin-bottom: 10px;
  font-size: 18px;
}
.trustPrimary h3{font-size: 22px; letter-spacing:-.4px; margin: 0 0 8px}
.trustP{margin:0 0 12px; color: var(--muted); line-height:1.75; font-weight:700}
.trustBullets{margin:0; padding-left: 18px; color: var(--muted); line-height:1.75; font-weight:750}
.trustBullets li{margin: 6px 0}
.trustBadges{margin-top: 14px; display:flex; flex-wrap:wrap; gap:10px}
.sBadge{
  display:inline-flex; align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 900;
}
.trustGrid{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px}
.trustCard{padding: 16px; min-height: 132px}
.trustKicker{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:950;
  font-size: 11px;
  color: rgba(34,211,238,.88);
}
.trustTitle{margin-top: 8px; font-weight:950; letter-spacing:-.2px}
.trustText{margin-top: 8px; color: var(--muted); font-weight:700; line-height:1.65}

/* Contact */
.contactGrid{display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; align-items:start}
.form{padding: 18px}
.formGrid{display:grid; grid-template-columns: 1fr 1fr; gap:12px}

label{display:block}
label span{display:block; font-size: 12px; color: var(--muted2); font-weight:850; margin-bottom: 6px}
input, textarea, select{
  width:100%;
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  outline:none;
  font-family: inherit;
  font-weight:750;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
textarea{resize: vertical; min-height: 120px}
input:focus, textarea:focus, select:focus{border-color: rgba(34,211,238,.45); box-shadow: 0 0 0 4px rgba(34,211,238,.10)}

.check{margin: 12px 0 12px; display:flex; align-items:flex-start; gap:10px; color: var(--muted)}
.check input{width:18px; height:18px; margin-top:2px}
.check a{color: rgba(34,211,238,.92); text-decoration: underline; text-underline-offset: 2px}

.toast{margin-top: 12px; font-weight:850; color: rgba(255,255,255,.86); opacity:0; transform: translateY(6px); transition: opacity .24s var(--ease), transform .24s var(--ease)}
.toast.show{opacity:1; transform:none}
.toast.ok{color: rgba(34,211,238,.95)}

.contactSide{padding: 18px}
.contactSide h3{font-size: 22px; letter-spacing:-.3px; margin: 8px 0}
.contactSide p{margin:0 0 14px; color: var(--muted); line-height:1.75; font-weight:700}
.divider{height:1px; background: rgba(255,255,255,.10); margin: 16px 0}
.small{color: var(--muted2); font-size: 12.5px; line-height:1.6; font-weight:750}

/* Footer */
.footer{padding: 30px 0 46px; border-top: 1px solid rgba(255,255,255,.08)}
.footerInner{display:flex; align-items:center; justify-content:space-between; gap:18px}
.footerLeft{display:flex; align-items:center; gap:12px}
.footerLogo{height:24px; width:auto}
.footerLinks{display:flex; gap:14px; flex-wrap:wrap; color: var(--muted); font-weight:850; font-size: 13px}
.footerLinks a{opacity:.9}
.footerLinks a:hover{opacity:1}

/* Terms page helpers */
.toc{padding: 14px 18px 18px; display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.toc a{
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.82);
  font-weight:850;
  font-size: 13px;
  line-height: 1.35;
}
.toc a:hover{border-color: rgba(34,211,238,.35)}
.terms{padding: 18px}
.terms h2{font-size: 18px; letter-spacing:-.2px; margin: 16px 0 8px}
.terms p, .terms li{color: var(--muted); line-height:1.75; font-weight:700}
.terms ul{margin: 10px 0 0; padding-left: 18px}

/* Modal */
.modal{
  position:fixed; inset:0; z-index:80;
  background: rgba(0,0,0,.62);
  display:none;
  align-items:center; justify-content:center;
  padding: 22px;
}
.modal.open{display:flex}
.modalInner{
  width:min(980px, 100%);
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(7,10,18,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modalTop{display:flex; align-items:center; justify-content:space-between; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08)}
.modalTitle{font-weight:950}
.iconBtn{
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  padding: 8px 10px;
  cursor:pointer;
}
.modal video{width:100%; height:auto; display:block; background:#000}
.noScroll{overflow:hidden}

/* WhatsApp floating icon - Colores Oficiales */
.wa {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  
  /* Color de fondo oficial (#25D366) */
  background-color: #25D366; 
  border: none;
  
  /* Quitamos el blur para que el color sea sólido y vibrante */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  
  /* Sombra más suave y natural */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  
  display: flex; 
  align-items: center; 
  justify-content: center;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
  z-index: 90;
  cursor: pointer;
}

.wa:hover {
  /* Cambio a un verde un poco más oscuro al pasar el mouse (#128C7E) */
  background-color: #128C7E;
  transform: translateY(-3px); 
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Asegúrate de que el icono dentro sea blanco */
.wa svg, .wa i {
  fill: white;
  color: white;
  width: 32px;
  height: 32px;
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr; gap:18px}
  .panelGrid{grid-template-columns: 1fr; gap:12px}
  .videoCard{grid-template-columns: 1fr;}
  .contactGrid{grid-template-columns: 1fr}
  .metrics{grid-template-columns: 1fr;}
  .heroBenefits{grid-template-columns: repeat(2, minmax(0,1fr));}
  .trustLayout{grid-template-columns: 1fr;}
  .trustGrid{grid-template-columns: 1fr;}
  .shot.span6, .shot.span4{grid-column: span 12}
  .showcaseBox{flex-direction:column; align-items:flex-start}
}

@media (max-width: 820px){
  .links{display:none}
  .menuBtn{display:inline-flex}
}

@media (max-width: 640px){
  .hero{padding-top: 40px}
  .hero h1{font-size: 40px}
  .section{padding: 56px 0}
  .sectionHead h2{font-size: 30px}
  .grid3{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .walletRow{grid-template-columns: 1fr}
  .miniRow{grid-template-columns: 1fr}
  .heroBenefits{grid-template-columns: 1fr}
  .formGrid{grid-template-columns: 1fr}
  .footerInner{flex-direction:column; align-items:flex-start}
  .toc{grid-template-columns: 1fr}
}

/* v5 responsive */
@media (max-width: 980px){
  .deviceMock{min-height: 480px}
  .deviceStack{height: 480px}
  .walletShots img{height: 380px}
}
@media (max-width: 640px){
  .deviceMock{min-height: 420px}
  .deviceStack{height: 420px; padding: 14px}
  .device{width: 86%}
  .device--back{left: 0%; top: 6%}
  .device--front{right: 0%; bottom: 6%}
  .walletShots{grid-template-columns: 1fr; }
  .walletShots img{height: 420px}
}

/* ============================
   V6 Polish (PNG/JPG + layout fixes)
   ============================ */

/* Better anchor jumps with sticky header */
section[id]{scroll-margin-top: 96px;}

/* HERO: prevent crop + make the real Wallet cards look crisp */
.mock.deviceMock{overflow: visible;}
.deviceStack{height: 560px; padding: 26px;}
.device{background: rgba(0,0,0,.28);}
.device img{object-fit: contain; background: rgba(0,0,0,.18);}
.device--back{left: 6%; top: 10%; transform: rotate(-6deg);}
.device--front{right: 4%; bottom: 8%; transform: rotate(5deg);}

@media (max-width: 980px){
  .deviceStack{height: 500px; padding: 18px;}
}
@media (max-width: 640px){
  .deviceStack{height: 460px; padding: 14px;}
}

/* SHOWCASE: make Wallet examples fill the card nicely (no tiny previews) */
.walletShots{gap:14px;}
.walletShots img{
  height: auto;
  aspect-ratio: 9 / 16;
  max-height: 560px;
  object-fit: contain;
  padding: 12px;
}

/* LOGOS: a bit bigger + cleaner presence */
.logoItem{min-width: 180px; height: 56px;}
.logoItem img{max-height: 34px;}
.logoItem.real img{max-height: 38px;}


/* ============================
   V7 Modern polish (hero photo + cleaner logos)
   ============================ */

/* HERO visual: use a real, modern shot (no stacked crops) */
.mock.deviceMock{overflow:hidden;}
.heroModern{position:relative; height: 560px; border-radius: 26px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.heroHandImg{width:100%; height:100%; object-fit: cover; object-position: center; transform: translateZ(0); filter: saturate(1.02) contrast(1.03);}

@media (max-width: 980px){
  .heroModern{height: 520px;}
}
@media (max-width: 640px){
  .heroModern{height: 440px;}
}

/* LOGOS: remove the box/border to avoid the "cheap" look */
.logoMarquee{border: none; background: transparent; box-shadow: none; padding: 6px 0;}
.logoMarquee::before,.logoMarquee::after{content:""; position:absolute; top:0; bottom:0; width: 120px; pointer-events:none;}
.logoMarquee::before{left:0; background: linear-gradient(90deg, rgba(7,10,18,1), rgba(7,10,18,0));}
.logoMarquee::after{right:0; background: linear-gradient(270deg, rgba(7,10,18,1), rgba(7,10,18,0));}
.logoRow{gap: 32px; padding: 6px 14px;}
.logoItem{background: transparent; border: none; min-width: 220px; height: 64px;}
.logoItem img{max-height: 46px; width:auto; opacity: .82; filter: saturate(.95) contrast(1.05);}
.logoItem:hover img{opacity: 1; filter: saturate(1) contrast(1.08);}

@media (max-width: 640px){
  .logoItem{min-width: 180px; height: 56px;}
  .logoItem img{max-height: 40px;}
}


/* ============================
   V8 "Apple-like" premium finish (2026)
   - better hero image rendering (no crop)
   - monochrome trust logos (clean + modern)
   - subtle grain + aurora motion
   ============================ */

/* Subtle grain for a more premium, less "flat" look */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image: url('assets/noise.png');
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: .055;
  z-index: 0;
}

/* Soft animated aurora behind the hero (very subtle) */
.hero::before{
  content:"";
  position:absolute;
  inset:-20% -10% auto -10%;
  height: 520px;
  background:
    radial-gradient(closest-side at 18% 40%, rgba(34,211,238,.18), transparent 62%),
    radial-gradient(closest-side at 55% 30%, rgba(124,92,255,.16), transparent 66%),
    radial-gradient(closest-side at 80% 55%, rgba(255,79,216,.10), transparent 64%);
  filter: blur(28px);
  opacity: .95;
  animation: auroraFloat 10s ease-in-out infinite alternate;
  pointer-events:none;
  z-index: 0;
}

@keyframes auroraFloat{
  from{transform: translate3d(0,0,0) scale(1)}
  to{transform: translate3d(0,-12px,0) scale(1.02)}
}

/* HERO image: show the full shot (contain), no awkward cropping */
.heroModern{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.12));
  border: 1px solid rgba(255,255,255,.12);
}
.heroHandImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 45%;
  padding: 0;
  transform: translateZ(0);
  filter: saturate(1.02) contrast(1.04) drop-shadow(0 26px 60px rgba(0,0,0,.55));
}

/* Tiny premium motion (respects reduced motion) */
@media (prefers-reduced-motion: no-preference){
  .heroModern{transform: translateZ(0);}
  .hero-visual .mock{will-change: transform;}
  .hero-visual .mock:hover{transform: translateY(-2px);}
}

/* TRUST LOGOS: remove pills completely; make them feel like a brand wall */
.logoItem{min-width: 240px; height: 70px;}
.logoItem.real{background: transparent !important; border: none !important;}
.logoItem img{
  max-height: 52px;
  opacity: .90;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
}
.logoItem:hover img{opacity: 1; transform: translateY(-1px);}

@media (max-width: 640px){
  .logoItem{min-width: 190px; height: 58px;}
  .logoItem img{max-height: 44px;}
  .heroHandImg{
    padding: 0;
    object-fit: cover;
    object-position: 58% 42%;
    transform: scale(1.08);
    transform-origin: center;
  }
}