:root {
  --black:      #080808;
  --white:      #fff;
  --blue:       #0057FF;
  --blue-d:     #0045CC;
  --blue-pale:  #EEF4FF;
  --blue-mid:   #DBEAFE;
  --gray-100:   #F3F4F6;
  --gray-200:   #E5E7EB;
  --gray-300:   #D1D5DB;
  --gray-400:   #9CA3AF;
  --gray-500:   #6B7280;
  --gray-700:   #374151;
  --gray-900:   #111827;
  --green:      #10B981;

  --r:  16px;
  --rs: 10px;

  --sh:  0 4px  24px rgba(0, 87, 255, .08);
  --shl: 0 16px 64px rgba(0, 87, 255, .14);
}

.cmpsec,
.trsec,
.vissec,
.mapsec,
.hero,
.bankbensec { position: relative; overflow: hidden !important; }

  /* ============================================================
   comment by shaukat: visibility transformation section styles
   ============================================================ */


/* ── SECTION ── */
.trsec {
  background: var(--gray-900);
  padding: 100px 0;
  overflow: hidden;
  position: relative;
}
.trsec::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 700px 500px at 10% 50%, rgba(239,68,68,.04) 0%, transparent 60%),
    radial-gradient(ellipse 700px 500px at 90% 50%, rgba(0,87,255,.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.tr-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ── HEADER ── */
.tr-head {
  text-align: center;
  margin-bottom: 60px;
}
.tr-label {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  color: #0057FF;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}
.tr-title {
  font-weight: 800;
  color: #fff;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 16px;
}
.tr-sub {
  font-size: .95rem;
  color: rgba(255,255,255,.45);
  line-height: 1.75;
  margin: 0 auto 32px;
}

/* ── TOGGLE BUTTON ── */
.tr-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: #0057FF;
  color: #fff;
  border: none;
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(0,87,255,.4);
  transition: all .3s;
  position: relative;
  overflow: hidden;
}
.tr-toggle-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .3s;
}
.tr-toggle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,87,255,.5);
}
.tr-toggle-btn:hover::before { opacity: 1; }
.tr-toggle-btn.active {
  background: linear-gradient(135deg, #0057FF 0%, #10B981 100%);
  box-shadow: 0 4px 24px rgba(16,185,129,.3);
}
.tr-btn-icon { font-size: 1.1rem; }

/* ── STAGE ── */
.tr-stage {
  display: grid;
  grid-template-columns: 1fr 10px 1fr;
  gap: 10;
  align-items: start;
  margin-bottom: 52px;
}

/* ── PANELS ── */
.tr-panel {
  padding: 0 12px;
}
.tr-panel-header {
  margin-bottom: 20px;
  text-align: center;
}
.tr-panel-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 100px;
  padding: 6px 16px;
  font-size: .76rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.tr-badge-bad {
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.2);
  color: #F87171;
}
.tr-badge-good {
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.2);
  color: #10B981;
}
.tr-panel-desc {
  font-size: .82rem;
  color: rgba(255,255,255,.35);
  line-height: 1.6;
}

/* ── CARDS GRID ── */
.tr-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── CARD ── */
.tr-card {
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all .4s cubic-bezier(.34,1.56,.64,1);
  position: relative;
  overflow: hidden;
  cursor: default;
}
.tr-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s;
  border-radius: 14px;
}
.tr-card:hover { transform: translateX(4px); }
.tr-card:hover::before { opacity: 1; }

/* Bad card */
.tr-card-bad {
  background: rgba(239,68,68,.05);
  border: 1px solid rgba(239,68,68,.12);
  filter: grayscale(0.3);
  opacity: 0.9;
}
.tr-card-bad::before { background: rgba(239,68,68,.04); }
.tr-card-bad:hover { transform: none; filter: grayscale(0); }

/* Good card */
.tr-card-good {
  background: rgba(0,87,255,.07);
  border: 1px solid rgba(0,87,255,.15);
  opacity: 0;
  transform: translateX(20px) scale(0.97);
}
.tr-card-good.revealed {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.tr-card-good::before { background: rgba(0,87,255,.04); }
.tr-card-good:hover { transform: translateX(-4px) !important; }

/* ── AVATAR ── */
.tr-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: all .4s;
}
.tr-avatar-ghost {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.2);
  border: 1.5px dashed rgba(255,255,255,.1);
  filter: blur(0.5px);
}
.tr-avatar-active {
  background: rgba(0,87,255,.2);
  color: #60A5FA;
  border: 1.5px solid rgba(0,87,255,.3);
  box-shadow: 0 0 12px rgba(0,87,255,.2);
}
.tr-avatar-merchant {
  background: rgba(16,185,129,.15);
  color: #10B981;
  border-color: rgba(16,185,129,.3);
  box-shadow: 0 0 12px rgba(16,185,129,.2);
}
.tr-avatar-bank {
  background: rgba(245,158,11,.12);
  color: #F59E0B;
  border-color: rgba(245,158,11,.3);
  box-shadow: 0 0 12px rgba(245,158,11,.15);
}

/* ── CARD BODY ── */
.tr-card-body { flex: 1; min-width: 0; }
.tr-card-name {
  font-size: .84rem;
  font-weight: 700;
  color: rgba(255,255,255,.8);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tr-verified {
  color: #0057FF;
  font-size: .8rem;
}
.tr-card-problem {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .73rem;
  font-weight: 700;
  color: #F87171;
  margin-bottom: 3px;
}
.tr-card-problem i { font-size: .75rem; }
.tr-card-solution {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .73rem;
  font-weight: 700;
  color: #10B981;
  margin-bottom: 3px;
}
.tr-card-solution i { font-size: .75rem; }
.tr-card-detail {
  font-size: .71rem;
  color: rgba(255,255,255,.3);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── STATUS TAG ── */
.tr-card-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .67rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tr-card-status.bad {
  background: rgba(239,68,68,.1);
  color: #F87171;
  border: 1px solid rgba(239,68,68,.15);
}
.tr-card-status.good {
  background: rgba(16,185,129,.1);
  color: #10B981;
  border: 1px solid rgba(16,185,129,.2);
}

/* ── DIVIDER ── */
.tr-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding-top: 56px;
  position: relative;
}
.tr-divider-line {
  width: 2px;
  flex: 1;
  min-height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.08), transparent);
}
.tr-divider-hub {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0057FF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px rgba(0,87,255,.15), 0 8px 32px rgba(0,87,255,.4);
  position: relative;
  flex-shrink: 0;
  z-index: 2;
  transition: all .5s;
}
.tr-divider-hub.lit {
  background: linear-gradient(135deg, #0057FF 0%, #10B981 100%);
  box-shadow: 0 0 0 8px rgba(16,185,129,.15), 0 12px 40px rgba(16,185,129,.4);
}
.tr-hub-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,87,255,.2);
  animation: trring 3s ease-out infinite;
}
.tr-hr1 { width: 68px; height: 68px; animation-delay: 0s; }
.tr-hr2 { width: 90px; height: 90px; animation-delay: 1s; }
@keyframes trring {
  0% { opacity: .5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}
.tr-hub-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}


/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .tr-stage {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .tr-divider {
    flex-direction: row;
    padding-top: 0;
    gap: 16px;
  }
  .tr-divider-line {
    flex: 1;
    min-height: 2px;
    width: auto;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.08), transparent);
  }
  .tr-stats { grid-template-columns: repeat(2, 1fr); }
  .tr-card:hover { transform: none; }
  .tr-card-good:hover { transform: none !important; }
}

@media (max-width: 600px) {
  .tr-stats { grid-template-columns: 1fr 1fr; }
  .tr-card-detail { display: none; }
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: #fff;
  color: var(--gray-900);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5 { font-family: 'Plus Jakarta Sans', sans-serif !important}

a {
  text-decoration: none;
  color: inherit;
}

a.bh-link {color: #3f65c4; font-weight:500;}
a.bh-link:hover {color:#628df9;}
/* ============================================================
   KEYFRAMES
   ============================================================ */

@keyframes pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%       { opacity: .5; transform: scale(1.4); }
}

@keyframes fa {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes sd {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ec {
  0%   { opacity: .6; }
  100% { opacity: 0; }
}

@keyframes bfin {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes iconpulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.12); }
}


/* ============================================================
   NAVIGATION
   ============================================================ */
.header {
  position: fixed;
  padding: 0px 10px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--gray-100);
  transition: box-shadow .3s;
}

.header.scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, .06);
}
nav {
  max-width: 1200px;
  margin: 0 auto;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: hidden !important;
}

.nav-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav.scrolled {
  padding: 0px 4px;
  transition: padding 0.4s cubic-bezier(0.4, 0, 1, 1);
  box-sizing: border-box;
  overflow: hidden !important;
}

/* Logo */
.nl {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Arial', sans-serif;
  font-weight: 800;
  font-size: 1.45rem;
  color: var(--blue);
  letter-spacing: -.5px;
}

.nli {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 10px;
}

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-links a {
  position: relative;
  font-size: .88rem;
  font-weight: 500;
  color: var(--gray-700);
  transition: color .2s;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 100%;
  height: 2px;
  background: var(--blue);
  transition: right .25s ease;
}

.nav-links a:hover          { color: var(--blue); }
.nav-links a:hover::after   { right: 0; }

/* Nav buttons */
.nav-acts {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bg {
  padding: 9px 20px;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: .88rem;
  color: var(--gray-700);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background .2s;
}

.bg:hover {
  background: var(--gray-100);
}

.bp {
  padding: 10px 22px;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: .88rem;
  background: var(--blue);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 87, 255, .25);
  transition: all .2s;
}

.bp:hover {
  background: var(--blue-d);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 87, 255, .35);
}

/* Hamburger */
.ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  cursor: pointer;
}

.ham span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gray-700);
  border-radius: 2px;
  transition: all .3s;
}

.ham.open span:nth-child(1) { transform: rotate(45deg)  translate(5px, 5px); }
.ham.open span:nth-child(2) { opacity: 0; }
.ham.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile menu */
.mmenu {
  position: fixed;
  display: none;
  top: 57px; left: 0; right: 0;
  z-index: 9999;
  flex-direction: column;
  gap: 4px;
  padding: 20px 5%;
  background: #fff;
  border-bottom: 1px solid var(--gray-100);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .08);
  animation: sd .25s ease;
}

.mmenu.open { display: flex; height: 100vh;}

.mmenu a {
  padding: 12px 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
  transition: color .2s;
}

.mmenu a:last-of-type { border-bottom: none; }
.mmenu a:hover        { color: var(--blue); }

.mmenu-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.mmenu-btns .bp,
.mmenu-btns .bg {
  width: 100%;
  text-align: center;
}
.mmenu-btns .bg {background: #d9d9d9b3 !important;}

/* ============================================================
   SECTION UTILITIES
   ============================================================ */

section { padding: 100px 5%; }

.si {
  max-width: 1200px;
  margin: 0 auto;
}

.howsec > .si > .rev { text-align: center; }
.htabs { justify-content: center; }
.howsec > .si { 
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Section label */
.slbl {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

/* Section title */
.stitle {
  font-size: clamp(1.8rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.15;
  letter-spacing: -.8px;
}

/* Section subtext */
.ssub {
  font-size: .98rem;
  color: var(--gray-500);
  line-height: 1.7;
  margin-top: 14px;
}

/* Reveal animation */
.rev {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}

.rev.vis { opacity: 1; transform: translateY(0);}

.rd1 { transition-delay: .1s; }
.rd2 { transition-delay: .2s; }
.rd3 { transition-delay: .3s; }
.rd4 { transition-delay: .4s; }


/* ============================================================
   HERO
   ============================================================ */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 5% 80px;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.hbg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 900px 700px at 80% 30%, rgba(0, 87, 255, .05) 0%, transparent 70%),
    radial-gradient(ellipse 600px 500px at 20% 80%, rgba(0, 87, 255, .03) 0%, transparent 70%);
}

.hgrid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .035;
  background-image:
    linear-gradient(var(--blue) 1px, transparent 1px),
    linear-gradient(90deg, var(--blue) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Two-column layout */
.hcontent {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}

/* Badge */
.hbadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue-pale);
  color: var(--blue);
  border: 1px solid rgba(0, 87, 255, .15);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  animation: pulse 2s infinite;
}

/* Title */
.htitle {
  font-size: clamp(35px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--gray-900);
  letter-spacing: -1.5px;
  margin-bottom: 22px;
}

.htitle .acc { color: var(--blue); }
.htitle .ln  { display: block; }

/* Subtext */
.hsub {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--gray-500);
  font-weight: 400;
  max-width: 480px;
  margin-bottom: 20px;
}

/* CTA buttons */
.hctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 45px;
  margin-top: 20px;
}

.bhp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  background: var(--blue);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 87, 255, .3);
  transition: all .2s;
}

.bhp:hover {
  background: var(--blue-d);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 87, 255, .4);
}

.bhs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  background: white;
  color: var(--gray-700);
  border: 1.5px solid var(--gray-200);
  cursor: pointer;
  transition: all .2s;
}

.bhs:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}

/* Reusable stat value */
.hsv {
  font-family: 'Arial', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1;
  margin: 4px 0 4px 0;
}

.hsl {
  font-size: .78rem;
  color: var(--gray-400);
  font-weight: 500;
}

/* Phone mockup */
.hvisual {
  position: relative;
}

.hpwrap {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.hpscreen {
  width: 100%;
  max-width: 710px;
  overflow: hidden;
  line-height: 0;
}

.hpscreen img {
  width: 100%;
  height: auto;
  display: block;
}

/* Floating cards */
.fcard {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .1), 0 0 0 1px var(--gray-100);
  font-size: .78rem;
  z-index: 3;
  animation: fa 4s ease-in-out infinite;
}

.fcard:nth-child(2) { animation-delay: 1s; }
.fcard:nth-child(3) { animation-delay: 2s; }

.fc1 { top: 55px;  left: -55px; }
.fc2 { bottom: 95px; left: -65px; }
.fc3 { top: 115px; right: -45px; }

.fcl { font-size: .63rem; color: var(--gray-400); font-weight: 500; margin-bottom: 2px; }
.fcv { font-family: 'Arial', sans-serif; font-weight: 700; color: var(--gray-900); font-size: .88rem; }
.fcs { font-size: .63rem; color: var(--green); font-weight: 500; margin-top: 2px; }
.fci { font-size: 1.3rem; margin-bottom: 4px; }


/* ============================================================
   TRUSTED LOGOS BAR
   ============================================================ */

.trusted {
  background: var(--gray-50);
  padding: 36px 5%;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}

.ti {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
}

.tlbl {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}

.tlogos {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
}

.tlogo {
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  color: var(--gray-300);
  letter-spacing: -.3px;
  cursor: default;
  transition: color .2s;
}

.tlogo:hover { color: var(--gray-400); }


/* ============================================================
   WHAT IS ZIPPY SECTION
   ============================================================ */

.wgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-top: 60px;
}

/* Tag pills */
.tlist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.ti2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blue-pale);
  color: var(--blue);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: .79rem;
  font-weight: 600;
}

.ti2 svg { width: 13px; height: 13px; }

/* Chat mockup card */
.wcm {
  background: #fff;
  border-radius: var(--r);
  border: 1px solid var(--gray-100);
  box-shadow: var(--shl);
  overflow: hidden;
}

.wch {
  background: var(--blue);
  padding: 24px 28px;
  color: #fff;
}

.wch h4 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.wch p  { font-size: .8rem; opacity: .7; }

.wcb { padding: 24px 28px; }

/* Step rows inside card */
.sr {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
}

.sr:last-child { border-bottom: none; }

.sn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue-pale);
  color: var(--blue);
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  font-size: .77rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.st strong { display: block; font-size: .84rem; font-weight: 600; color: var(--gray-900); margin-bottom: 2px; }
.st span   { font-size: .77rem; color: var(--gray-500); }

/* Connected flow steps */
.flow-steps { display: flex; flex-direction: column; }

.flow-step {
  display: flex;
  gap: 16px;
}

.flow-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flow-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--blue-pale);
  z-index: 1;
}

.flow-num-green {
  background: var(--green);
  box-shadow: 0 0 0 4px #ECFDF5;
}

.flow-line {
  width: 2px;
  flex: 1;
  min-height: 24px;
  margin: 4px 0;
  background: linear-gradient(to bottom, var(--blue), var(--blue-mid));
}

.flow-content {
  padding: 2px 0 20px;
}

.flow-content strong { display: block; font-size: .84rem; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; }
.flow-content span   { font-size: .77rem; color: var(--gray-500); line-height: 1.6; }

.flow-step-last .flow-content { padding-bottom: 0; }

/* "Under 5 seconds" badge */
.wu5 {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-d) 100%);
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 16px;
}

.wu5-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wu5-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.wu5-label {
  font-size: 16px;
  color: rgba(255, 255, 255, .65);
  font-weight: 500;
  letter-spacing: .8px;
}

.wu5-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.wu5-badge {
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 100px;
  padding: 5px 14px;
  font-size: .74rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}


/* ============================================================
   PRODUCTS SECTION
   ============================================================ */

.psec { background: var(--gray-50); }

.pgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 52px;
}

.pcard {
  background: #fff;
  border-radius: var(--r);
  padding: 36px;
  border: 1px solid var(--gray-100);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
  position: relative;
  overflow: hidden;
  transition: all .3s;
}

.pcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
}

.pcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shl);
}

.pcard:hover::before { transform: scaleX(1); }

.pic {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--blue-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.pic svg { width: 26px; height: 26px; }

.pcard h3 { font-size: 1.2rem; font-weight: 700; color: var(--gray-900); margin-bottom: 10px; letter-spacing: -.3px; }
.pcard p  { font-size: .89rem; color: var(--gray-500); line-height: 1.65; margin-bottom: 20px; }

/* Feature list (shared checkmark style) */
.fl {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.fl li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .81rem;
  color: #4B5563;
}

.fl li::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230057FF'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ============================================================
   BALANCE / ACCOUNT SECTION
   ============================================================ */

.bgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  margin-top: 52px;
}

.btext p {
  font-size: .94rem;
  color: var(--gray-500);
  line-height: 1.75;
  margin-bottom: 16px;
}

.bpoints {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}

.bpt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--gray-50);
  border-radius: var(--rs);
  border: 1px solid var(--gray-100);
}

.bpi {
  width: 38px;
  height: 38px;
  background: var(--blue-pale);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bpi svg { width: 18px; height: 18px; }

.bptit { font-size: .87rem; font-weight: 600; color: var(--gray-900); margin-bottom: 3px; }
.bpd   { font-size: .79rem; color: var(--gray-500); line-height: 1.5; }

.bvisual {
  display: flex;
  justify-content: center;
}

/* Balance phone widget */
.bsw {
  width: 318px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 87, 255, .12), 0 0 0 1px var(--gray-100);
  overflow: hidden;
}

.bstop {
  background: var(--blue);
  padding: 20px 22px 24px;
  color: #fff;
}

.bstr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.bsbr { font-family: 'Arial', sans-serif; font-weight: 800; font-size: .88rem; }

.bsav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .73rem;
  font-weight: 600;
}

.bsbl { font-size: .69rem; opacity: .7; margin-bottom: 4px; }
.bsba { font-family: 'Arial', sans-serif; font-size: 2rem; font-weight: 800; }
.bsbs { font-size: .69rem; opacity: .6; margin-top: 2px; }

.bspills {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.bspill {
  background: rgba(255, 255, 255, .15);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: .65rem;
  font-weight: 600;
  color: #fff;
}

.bsbody { padding: 20px 22px; }

.bscr {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.bsmc {
  flex: 1;
  background: var(--gray-50);
  border-radius: 10px;
  padding: 12px;
  border: 1px solid var(--gray-100);
  text-align: center;
}

.bsmc .v { font-family: 'Arial', sans-serif; font-size: 1rem; font-weight: 700; color: var(--gray-900); display: block; margin-bottom: 2px; }
.bsmc .l { font-size: .65rem; color: var(--gray-400); }

.bsth {
  font-size: .69rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 10px;
}

.bstx {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.bstd {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--blue-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .83rem;
  flex-shrink: 0;
}

.bstn   { font-size: .77rem; font-weight: 600; }
.bstdt  { font-size: .64rem; color: var(--gray-400); }
.bsta   { margin-left: auto; font-family: 'Arial', sans-serif; font-weight: 700; font-size: .79rem; }

.bsta.cr { color: var(--green); }
.bsta.dr { color: #EF4444; }

.bssb {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ECFDF5;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 14px;
}

.bssd {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s infinite;
}

.bsst { font-size: .7rem; font-weight: 600; color: #065F46; }


/* ============================================================
   SECURITY SECTION
   ============================================================ */

.secsec { background: var(--gray-50); }

.secgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 52px;
}

.secc {
  background: #fff;
  border-radius: var(--r);
  padding: 32px;
  border: 1px solid var(--gray-100);
  transition: all .3s;
}

.secc:hover {
  transform: translateY(-3px);
  box-shadow: var(--shl);
}

.secn {
  font-family: 'Arial', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--blue-mid);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -2px;
}

.secc h4 { font-size: 1.04rem; font-weight: 700; color: var(--gray-900); margin-bottom: 8px; }
.secc p  { font-size: .84rem; color: var(--gray-500); line-height: 1.65; }


/* ============================================================
   HOW IT WORKS SECTION
   ============================================================ */

.howsec { background: #fff; }

/* Tabs */
.htabs {
  display: flex;
  gap: 8px;
  background: var(--gray-100);
  padding: 5px;
  border-radius: 12px;
  width: fit-content;
  margin: 40px 0 52px;
}

.htab {
  padding: 10px 22px;
  border-radius: 9px;
  font-family: 'DM Sans', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: var(--gray-500);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all .2s;
}

.htab.active {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

/* Steps grid */
.hsgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}

.hsgrid::after {
  content: '';
  position: absolute;
  top: 28px;
  left: 10%; right: 10%;
  height: 2px;
  background: var(--blue-mid);
  z-index: 0;
}

.hstep {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 10px;
}

.hsc {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--blue-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 1.2rem;
  box-shadow: 0 2px 12px rgba(0, 87, 255, .1);
  transition: all .3s;
}

.hstep:hover .hsc {
  background: var(--blue);
  border-color: var(--blue);
  transform: scale(1.1);
}

.hstep:hover .hsc svg { stroke: #fff; }

.hstep h5 { font-size: .81rem; font-weight: 700; color: var(--gray-900); margin-bottom: 6px; }
.hstep p  { font-size: .74rem; color: var(--gray-500); line-height: 1.5; }


/* ============================================================
   BANK BENEFITS SECTION
   ============================================================ */

.bankbensec {
  background: var(--gray-50);
  padding: 100px 5%;
}

.bankben-head {
  text-align: center;
  margin-bottom: 52px;
}

.bankben-sub {
  margin: 14px auto 0;
}

.bankben-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.bankben-card {
  background: #fff;
  border-radius: var(--r);
  padding: 36px;
  border: 1px solid var(--gray-100);
  transition: all .3s;
}

.bankben-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shl);
}

.bankben-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--blue-pale);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 18px;
}

.bankben-card h3 { font-size: 1.1rem; font-weight: 800; color: var(--gray-900); margin-bottom: 12px; letter-spacing: -.3px; }
.bankben-card p  { font-size: .87rem; color: var(--gray-500); line-height: 1.75; margin-bottom: 20px; }

.bankben-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}

.bankben-stat-val { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--blue); }
.bankben-stat-lbl { font-size: .75rem; color: var(--gray-400); font-weight: 500; }

/* Market opportunity banner */
.bankben-market {
  background: var(--gray-900);
  border-radius: var(--r);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
}

.bankben-market-label { font-size: .72rem; font-weight: 700; color: rgba(255, 255, 255, .35); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; }
.bankben-market-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.3rem; font-weight: 800; color: #fff; line-height: 1.3; max-width: 420px; margin-bottom: 12px; }
.bankben-market-desc  { font-size: .86rem; color: rgba(255, 255, 255, .5); line-height: 1.7; max-width: 420px; }

.bankben-market-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.bankben-mstat { text-align: center; }
.bankben-mstat-v { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700; color: var(--blue); line-height: 1; margin-bottom: 6px; }
.bankben-mstat-l { font-size: .72rem; color: rgba(255, 255, 255, .4); font-weight: 500; }


/* ============================================================
   EVERYDAY PEOPLE SECTION
   ============================================================ */

.peopsec {
  background: #fff;
  padding: 100px 5%;
}

.peop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}

.peop-desc { font-size: .92rem; color: var(--gray-500); line-height: 1.8; margin-bottom: 16px; }

.peop-points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0 32px;
}

.peop-pt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .86rem;
  color: var(--gray-700);
  line-height: 1.6;
}

.peop-pt i { color: var(--green); font-size: 1rem; margin-top: 2px; flex-shrink: 0; }

.peop-btn { font-size: .88rem; padding: 12px 24px; }

.peop-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.peop-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--r);
  padding: 24px;
  transition: all .3s;
}

.peop-card:hover {
  border-color: var(--blue-mid);
  background: var(--blue-pale);
  transform: translateY(-3px);
}

.peop-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--blue-pale);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.peop-card:hover .peop-card-icon { background: #fff; }

.peop-card-title { font-size: .88rem; font-weight: 700; color: var(--gray-900); margin-bottom: 8px; }
.peop-card-desc  { font-size: .78rem; color: var(--gray-500); line-height: 1.65; }

.peop-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-d) 100%);
  border-radius: 100px;
  padding: 12px 24px;
  font-size: .84rem;
  font-weight: 700;
  color: #fff;
}

.peop-badge i { color: #F59E0B; }


/* ============================================================
   DOWNLOAD SECTION
   ============================================================ */

.dlsec {
  background: linear-gradient(135deg, #0057FF 0%, #003DB3 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.dlbg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 800px 600px at 100% 0%, rgba(255, 255, 255, .06) 0%, transparent 60%);
}

.dlin {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.dlt h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.0rem); margin-bottom: 14px; }
.dlt p  { color: rgba(255, 255, 255, .7); font-size: .94rem; line-height: 1.7; margin-bottom: 28px; }

.dlbs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dlsb {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 12px;
  padding: 12px 20px;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: all .2s;
}

.dlsb:hover {
  background: rgba(255, 255, 255, .18);
  transform: translateX(4px);
}

.dlsb svg { width: 28px; height: 28px; flex-shrink: 0; }
.dlsl     { font-size: .68rem; opacity: .7; }
.dlsn     { font-family: 'Arial', sans-serif; font-weight: 700; font-size: .93rem; }

.dldiv {
  width: 1px;
  background: rgba(255, 255, 255, .15);
  align-self: stretch;
}

/* QR code */
.dlqr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.qrbox {
  background: #fff;
  border-radius: 16px;
  padding: 5px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
}

.qrpat {
  width: 140px;
  height: 140px;
  background:
    linear-gradient(var(--gray-900) 2px, transparent 2px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--gray-900) 2px, transparent 2px) 0 0 / 12px 12px;
  border-radius: 4px;
  position: relative;
}

.qrpat::before {
  content: 'Z';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Arial', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--blue);
  background: #fff;
  border-radius: 4px;
}

.dlqr p { font-size: .81rem; color: rgba(255, 255, 255, .7); text-align: center; line-height: 1.5; }

/* Web section */
.dlw h3 { font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 14px; }
.dlw p  { color: rgba(255, 255, 255, .7); font-size: .88rem; line-height: 1.65; margin-bottom: 24px; }

.dlls { display: flex; flex-direction: column; gap: 10px; }

.dlli {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .84rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .85);
}

.dlli svg { width: 18px; height: 18px; opacity: .6; }


/* ============================================================
   PRICING SECTION
   ============================================================ */

.pricsec { background: var(--gray-50); }

.pricgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 52px;
}

.pricc {
  background: #fff;
  border-radius: var(--r);
  padding: 36px;
  border: 1px solid var(--gray-200);
  position: relative;
  transition: all .3s;
}

.pricc:hover {
  transform: translateY(-4px);
  box-shadow: var(--shl);
}

.pricc.feat {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: var(--shl);
}

.pricc.feat * { color: #fff !important; }

.pcbadge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gray-900);
  color: #fff !important;
  padding: 4px 14px;
  border-radius: 100px;
  font-size: .71rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  white-space: nowrap;
}

.pctier {
  font-size: .77rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gray-400);
  margin-bottom: 10px;
}

.pricc.feat .pctier { color: rgba(255, 255, 255, .7) !important; }

.pcprice {
  font-family: 'Arial', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1;
  margin-bottom: 4px;
}

.pcprice sup {
  font-size: 1.2rem;
  vertical-align: top;
  margin-top: 8px;
}

.pcper  { font-size: .79rem; color: var(--gray-400); margin-bottom: 18px; }
.pcdesc { font-size: .84rem; color: var(--gray-500); line-height: 1.6; margin-bottom: 24px; }

.pcdiv {
  height: 1px;
  background: var(--gray-100);
  margin-bottom: 20px;
}

.pricc.feat .pcdiv { background: rgba(255, 255, 255, .2); }

.pcfeats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.pcf {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--gray-700);
}

.pcf::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230057FF'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pricc.feat .pcf::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Pricing buttons */
.bcrd {
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: .87rem;
  border: none;
  cursor: pointer;
  transition: all .2s;
}

.bcro {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--blue-mid);
}

.bcro:hover { background: var(--blue-pale); }

.bcrw { background: #fff; color: var(--blue); }
.bcrw:hover { background: var(--gray-50); }

/* ============================================================
   REGIONS SECTION
   ============================================================ */

.mapsec{
  background:var(--gray-900);
  padding:100px 5%;
  overflow:hidden;
}

.map-head{
  text-align:center;
  margin-bottom:52px;
}

.map-acc{
  color:var(--blue);
}

.map-head .stitle{
  color:#fff;
}

.map-sub{
  margin:14px auto 0;
  color:rgba(255,255,255,.5);
}

/* Visual container */

.map-visual{
  position:relative;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);
  overflow:hidden;
  padding:0 0 20px;
}

/* Glow blobs */

.map-glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(80px);
}

.map-glow-1{
  width:400px;
  height:400px;
  background:rgba(0,87,255,.12);
  top:-100px;
  left:-100px;
}

.map-glow-2{
  width:300px;
  height:300px;
  background:rgba(16,185,129,.08);
  bottom:-50px;
  right:100px;
}

.map-glow-3{
  width:250px;
  height:250px;
  background:rgba(0,87,255,.07);
  bottom:0;
  left:40%;
}

/* Earth / map canvas */

.map-earth{
  position:relative;
  width:100%;
  padding-bottom:50%;
  background:radial-gradient(
    ellipse at 50% 40%,
    rgba(0,87,255,.06) 0%,
    transparent 70%
  );
}

/* SVG lines */

.map-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.map-line{
  stroke:rgba(0,87,255,.3);
  stroke-width:1;
  stroke-dasharray:6 4;
  animation:dash 20s linear infinite;
}

@keyframes dash{
  to{
    stroke-dashoffset:-200;
  }
}

.map-dot-travel{
  fill:var(--blue);
  opacity:.9;
  filter:drop-shadow(0 0 4px var(--blue));
}

.map-dt2{
  fill:var(--green);
  filter:drop-shadow(0 0 4px var(--green));
}

.map-dt3{
  fill:#60A5FA;
  filter:drop-shadow(0 0 4px #60A5FA);
}

.map-dt4{
  fill:var(--green);
  filter:drop-shadow(0 0 4px var(--green));
}

/* Region nodes */

.map-node{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:default;
}

.map-node-pulse{
  position:absolute;
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(0,87,255,.2);
  animation:npulse 3s ease-out infinite;
}

.map-pulse-active{
  background:rgba(16,185,129,.25);
  animation:npulse-green 2s ease-out infinite;
}

@keyframes npulse{
  0%{
    transform:scale(1);
    opacity:.6;
  }

  100%{
    transform:scale(2.5);
    opacity:0;
  }
}

@keyframes npulse-green{
  0%{
    transform:scale(1);
    opacity:.8;
  }

  100%{
    transform:scale(2.8);
    opacity:0;
  }
}

.map-node-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--blue);
  border:2px solid rgba(255,255,255,.3);
  box-shadow:0 0 10px rgba(0,87,255,.6);
  position:relative;
  z-index:1;
}

.map-dot-active{
  background:var(--green);
  box-shadow:0 0 14px rgba(16,185,129,.8);
  border-color:rgba(16,185,129,.4);
}

.map-node-label{
  display:flex;
  align-items:center;
  gap:5px;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:100px;
  padding:4px 10px;
  font-size:.68rem;
  font-weight:600;
  color:rgba(255,255,255,.8);
  white-space:nowrap;
  position:relative;
  z-index:2;
}

.map-label-top{
  margin-bottom:28px;
  order:-1;
}

.map-label-bottom{
  margin-top:4px;
}

.map-region-flag{
  font-size:.8rem;
}

/* Center hub */

.map-hub{
  position:absolute;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
}

.map-hub-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(0,87,255,.2);
  animation:ec 4s ease-out infinite;
}

.map-hub-ring-1{
  width:60px;
  height:60px;
  animation-delay:0s;
}

.map-hub-ring-2{
  width:90px;
  height:90px;
  animation-delay:.8s;
}

.map-hub-ring-3{
  width:120px;
  height:120px;
  animation-delay:1.6s;
}

@keyframes ec{
  0%{
    opacity:.7;
    transform:scale(1);
  }

  100%{
    opacity:0;
    transform:scale(1.3);
  }
}

.map-hub-core{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 0 0 4px rgba(0,87,255,.2),
    0 8px 32px rgba(0,87,255,.5);
  position:relative;
  z-index:2;
}

.map-hub-logo{
  width:28px;
  height:28px;
  border-radius:50%;
  object-fit:cover;
}

/* Stats bar */

.map-stats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin:24px 24px 0;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  overflow:hidden;
  flex-wrap:wrap;
}

.map-stat{
  flex:1;
  text-align:center;
  padding:18px 12px;
  min-width:100px;
}

.map-stat-v{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.4rem;
  font-weight:700;
  color:var(--blue);
  line-height:1;
  margin-bottom:5px;
}

.map-stat-l{
  font-size:.69rem;
  color:rgba(255,255,255,.35);
  font-weight:500;
}

.map-stat-div{
  width:1px;
  background:rgba(255,255,255,.06);
  align-self:stretch;
}

/* Region tags */

.map-regions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:32px;
}

.map-rtag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border-radius:100px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  font-size:.78rem;
  font-weight:600;
  color:rgba(255,255,255,.5);
  transition:all .2s;
  cursor:default;
}

.map-rtag:hover{
  border-color:rgba(0,87,255,.4);
  color:rgba(255,255,255,.8);
  background:rgba(0,87,255,.08);
}

.map-rtag-active{
  border-color:rgba(16,185,129,.4);
  color:var(--green);
  background:rgba(16,185,129,.08);
}

.map-rtag-active i{
  color:var(--green);
}

.map-rtag i{
  font-size:.8rem;
  color:rgba(255,255,255,.3);
}

/* Responsive */

@media(max-width:768px){
   
   .hpscreen {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
  .map-earth{
    padding-bottom:70%;
  }

  .map-node-label{
    font-size:.6rem;
    padding:3px 8px;
  }

  .map-stats{
    flex-direction:column;
    gap:0;
  }

  .map-stat-div{
    width:100%;
    height:1px;
  }

}

/* ============================================================
   REVIEWS SECTION
   ============================================================ */

.revsec { background: var(--gray-50); }

.revgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 52px;
}

.revc {
  background: #fff;
  border-radius: var(--r);
  padding: 32px;
  border: 1px solid var(--gray-100);
  transition: all .3s;
}

.revc:hover {
  transform: translateY(-3px);
  box-shadow: var(--shl);
}

.revstars {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
}

.star { color: #F59E0B; font-size: 1rem; }

.revtxt {
  font-size: .89rem;
  color: #4B5563;
  line-height: 1.7;
  margin-bottom: 22px;
  font-style: italic;
}

.revtxt::before { content: '\201C'; font-size: 1.2em; color: var(--blue); }
.revtxt::after  { content: '\201D'; font-size: 1.2em; color: var(--blue); }

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

.revav {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  font-size: .84rem;
}

.revname { font-weight: 700; font-size: .87rem; color: var(--gray-900); }
.revrole { font-size: .74rem; color: var(--gray-400); margin-top: 1px; }


/* ============================================================
   FAQ SECTION
   ============================================================ */

.faqsec { background: #fff; }

.faqlay {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 70px;
  margin-top: 52px;
  align-items: start;
}

.faqside h3 { font-size: 1.3rem; font-weight: 700; color: var(--gray-900); margin-bottom: 12px; }
.faqside p  { font-size: .87rem; color: var(--gray-500); line-height: 1.7; margin-bottom: 24px; }

.faqcbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--blue);
  color: #fff;
  border-radius: 10px;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: .84rem;
  cursor: pointer;
  transition: all .2s;
}

.faqcbtn:hover {
  background: var(--blue-d);
  transform: translateY(-1px);
}

.faql { display: flex; flex-direction: column; gap: 12px; }

.faqi {
  background: var(--gray-50);
  border-radius: var(--rs);
  border: 1px solid var(--gray-100);
  overflow: hidden;
  transition: border-color .2s;
}

.faqi.open { border-color: var(--blue-mid); }

.faqq {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 18px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: .89rem;
  color: var(--gray-900);
  transition: color .2s;
}

.faqi.open .faqq { color: var(--blue); }

.faqic {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  transition: all .25s;
}

.faqi.open .faqic {
  background: var(--blue);
  color: #fff;
  transform: rotate(45deg);
}

.faqa {
  display: none;
  padding: 0 20px 18px;
  font-size: .85rem;
  color: var(--gray-500);
  line-height: 1.75;
}

.faqi.open .faqa { display: block; }


/* ============================================================
   FINAL CTA SECTION
   ============================================================ */

.ctasec {
  background: var(--gray-900);
  color: #fff;
  text-align: center;
  padding: 80px 5%;
}

.ctasec h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.0rem);
  margin-bottom: 16px;
  letter-spacing: -.8px;
}

.ctasec p {
  color: rgba(255, 255, 255, .6);
  font-size: 1rem;
  margin-bottom: 36px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.ctabtns {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.bctaw {
  padding: 14px 32px;
  background: #fff;
  color: var(--gray-900);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  border: none;
  cursor: pointer;
  transition: all .2s;
}

.bctaw:hover {
  background: var(--gray-100);
  transform: translateY(-2px);
}

.bctao {
  padding: 14px 32px;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .25);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: all .2s;
}

.bctao:hover {
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .05);
}


/* ============================================================
   FOOTER
   ============================================================ */

footer {
  background: var(--black);
  color: #fff;
  padding: 64px 5% 32px;
}

.ftop {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 52px;
}

.fbrand .nl { margin-bottom: 14px; color: #fff; }

.fbrand p {
  font-size: .84rem;
  color: rgba(255, 255, 255, .45);
  line-height: 1.7;
  max-width: 240px;
  margin-bottom: 20px;
}

.fsoc { display: flex; gap: 10px; }

.fsocb {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, .5);
  font-size: .83rem;
  font-weight: 700;
  transition: all .2s;
}

.fsocb:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.fcol h5 {
  font-size: .77rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .35);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}

.fcol ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.fcol ul li a {
  font-size: .83rem;
  color: rgba(255, 255, 255, .5);
  transition: color .2s;
}

.fcol ul li a:hover { color: #fff; }

.fbot {
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  align-content: center;
}

.fbotl { display: flex; flex-direction: column; gap: 4px; }
.fcopy { font-size: .79rem; color: rgba(255, 255, 255, .3); }
.fceo  { font-size: .77rem; color: rgba(255, 255, 255, .25); }
.fceo span { color: rgba(255, 255, 255, .5); font-weight: 600; }

.fleg { display: flex; gap: 20px; flex-wrap: wrap; }

.fleg a {
  font-size: .77rem;
  color: rgba(255, 255, 255, .3);
  transition: color .2s;
}

.fleg a:hover { color: #fff; }


/* ============================================================
   BUILT FOR SECTION
   ============================================================ */

.bfsec { background: #fff; padding: 100px 5%; }

.bfhead { text-align: center; margin-bottom: 52px; }
.bfacc  { color: var(--blue); }

/* Tabs */
.bftabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.bftab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 100px;
  border: 1.5px solid var(--gray-200);
  background: #fff;
  color: var(--gray-500);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  transition: all .25s;
}

.bftab i { font-size: 1rem; }

.bftab:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.bftab.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 87, 255, .25);
}

/* Panels */
.bfpanel { display: none; }

.bfpanel.active {
  display: block;
  animation: bfin .35s ease;
}

/* Two-column grid */
.bfgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* Left side */
.bfkicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  background: var(--blue-pale);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.bftitle {
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.2;
  letter-spacing: -.5px;
  margin-bottom: 14px;
}

.bfdesc { font-size: .92rem; color: var(--gray-500); line-height: 1.75; margin-bottom: 28px; }

.bfpoints { display: flex; flex-direction: column; gap: 18px; margin-bottom: 32px; }

.bfpt { display: flex; align-items: flex-start; gap: 14px; }

.bfpi {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--blue-pale);
  color: var(--blue);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.bfptit { font-size: .88rem; font-weight: 700; color: var(--gray-900); margin-bottom: 3px; }
.bfpd   { font-size: .81rem; color: var(--gray-500); line-height: 1.6; }

.bfcta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.bfnote {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--gray-400);
  font-weight: 500;
}

.bfnote i { color: var(--green); }

/* Right card */
.bfcard-visual {
  background: var(--gray-900);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .15);
  position: sticky;
  top: 100px;
}

/* Metrics grid */
.bfmetric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.bfmetric {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.bfmv { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--blue); line-height: 1; margin-bottom: 4px; }
.bfml { font-size: .69rem; color: rgba(255, 255, 255, .4); font-weight: 500; }

/* Feature list */
.bffeature-list { display: flex; flex-direction: column; }

.bffl-title {
  font-size: .69rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .35);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 12px;
}

.bffl-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  color: rgba(255, 255, 255, .7);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.bffl-item:last-child { border-bottom: none; }
.bffl-item i { color: var(--green); font-size: .9rem; flex-shrink: 0; }

/* Quote */
.bfquote {
  margin-top: 20px;
  background: rgba(0, 87, 255, .2);
  border: 1px solid rgba(0, 87, 255, .3);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: .82rem;
  color: rgba(255, 255, 255, .8);
  line-height: 1.6;
  font-style: italic;
}

.bfquote i { color: var(--blue); margin-right: 6px; font-size: 1rem; }

/* Code block */
.bfcode-block {
  background: #0d0d0d;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .06);
}

.bfcode-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.bfcode-dot { width: 10px; height: 10px; border-radius: 50%; }

.bfcode-body {
  padding: 16px 18px;
  font-family: monospace;
  font-size: .76rem;
  color: rgba(255, 255, 255, .7);
  line-height: 1.9;
}

.bfc-comment { color: rgba(255, 255, 255, .3); }
.bfc-fn      { color: #60A5FA; }
.bfc-str     { color: #34D399; }
.bfc-num     { color: #F59E0B; }

/* Flow steps */
.bfflow { display: flex; flex-direction: column; gap: 0; }

.bfflow-title {
  font-size: .69rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .35);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 16px;
}

.bfflow-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  transition: all .2s;
}

.bfflow-step.active {
  background: rgba(16, 185, 129, .1);
  border-color: rgba(16, 185, 129, .25);
}

.bfflow-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 87, 255, .3);
  border: 1.5px solid var(--blue);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: .78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bfflow-text strong { display: block; font-size: .83rem; font-weight: 600; color: #fff; margin-bottom: 2px; }
.bfflow-text span   { font-size: .75rem; color: rgba(255, 255, 255, .45); line-height: 1.5; }

.bfflow-arrow {
  text-align: center;
  color: rgba(255, 255, 255, .2);
  font-size: .9rem;
  padding: 4px 0;
}

.bftimer-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  background: rgba(0, 87, 255, .2);
  border: 1px solid rgba(0, 87, 255, .3);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: .82rem;
  font-weight: 700;
  color: #60A5FA;
}

.bftimer-badge i { color: #F59E0B; }


/* ============================================================
   BEFORE vs WITH ZIPPY COMPARISON SECTION
   ============================================================ */

.cmpsec {
  background: var(--gray-900);
  padding: 100px 5%;
  overflow: hidden;
  position: relative;

}

.cmpsec::before {
  content: '';
  position: absolute;
  top: -200px; left: -200px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 87, 255, .08) 0%, transparent 70%);
  pointer-events: none;
  overflow: hidden;
}

.cmpsec::after {
  content: '';
  position: absolute;
  bottom: -200px; right: -200px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, .06) 0%, transparent 70%);
  pointer-events: none;
  overflow: hidden;
}

/* Head */
.cmp-head { text-align: center; margin-bottom: 60px; }
.cmp-acc  { color: var(--blue); }
.cmp-head .stitle { color: #fff; }
.cmp-sub  { margin: 14px auto 0; color: rgba(255, 255, 255, .5); }

/* Three-column layout */
.cmp-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* Columns */
.cmp-col { border-radius: 20px; overflow: hidden; }
.cmp-col-bad  { background: rgba(239, 68, 68, .04);  border: 1px solid rgba(239, 68, 68, .12); }
.cmp-col-good { background: rgba(0, 87, 255, .06);   border: 1px solid rgba(0, 87, 255, .15); }

/* Column headers */
.cmp-col-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.cmp-header-bad  { background: rgba(239, 68, 68, .08); }
.cmp-header-good { background: rgba(0, 87, 255, .1); }

.cmp-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.cmp-icon-bad  { background: rgba(239, 68, 68, .15); color: #EF4444; }
.cmp-icon-good { background: rgba(0, 87, 255, .2);   color: var(--blue); }

.cmp-col-label    { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: 2px; }
.cmp-col-sublabel { font-size: .72rem; color: rgba(255, 255, 255, .35); font-weight: 500; }

/* Items */
.cmp-items {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cmp-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  transition: all .25s;
}

.cmp-item-bad  { background: rgba(255, 255, 255, .03); border: 1px solid rgba(239, 68, 68, .08); }
.cmp-item-good { background: rgba(255, 255, 255, .03); border: 1px solid rgba(0, 87, 255, .1); }

.cmp-item-bad:hover  { background: rgba(239, 68, 68, .06);  border-color: rgba(239, 68, 68, .2); }
.cmp-item-good:hover { background: rgba(0, 87, 255, .08);   border-color: rgba(0, 87, 255, .25); }

.cmp-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.cmp-item-icon.bad  { background: rgba(239, 68, 68, .12); color: #EF4444; }
.cmp-item-icon.good { background: rgba(0, 87, 255, .15);  color: var(--blue); }

.cmp-item-body  { flex: 1; }
.cmp-item-title { font-size: .84rem; font-weight: 700; color: #fff; margin-bottom: 3px; }
.cmp-item-desc  { font-size: .75rem; color: rgba(255, 255, 255, .4); line-height: 1.55; }

.cmp-item-tag {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.cmp-item-tag.bad  { background: rgba(239, 68, 68, .15);  color: #EF4444; }
.cmp-item-tag.good { background: rgba(16, 185, 129, .15); color: var(--green); }

/* Center card */
.cmp-center { display: flex; justify-content: center; }

.cmp-center-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  position: sticky;
  top: 100px;
}

.cmp-phone-wrap {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  line-height: 0;
  border: 1px solid rgba(255, 255, 255, .06);
}

.cmp-phone-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
}

.cmp-center-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, .1);
  border: 1px solid rgba(16, 185, 129, .2);
  border-radius: 100px;
  padding: 7px 16px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--green);
}

.cmp-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s infinite;
}

.cmp-center-stats {
  display: flex;
  align-items: center;
  width: 100%;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  overflow: hidden;
}

.cmp-cstat { flex: 1; text-align: center; padding: 12px 8px; }
.cmp-cstat-v { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--blue); line-height: 1; margin-bottom: 3px; }
.cmp-cstat-l { font-size: .65rem; color: rgba(255, 255, 255, .35); font-weight: 500; }
.cmp-cstat-div { width: 1px; background: rgba(255, 255, 255, .06); align-self: stretch; }

.sflow-grid {margin-top: 30px;}

/* ============================================================
   RESPONSIVE — 1024px and below
   ============================================================ */
@media (min-width: 1024px) {
  .sflow-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 45px;
  }
.intgrid, .contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 45px;
}
}

@media (max-width: 1024px) {
  .hcontent     { grid-template-columns: 1fr; gap: 50px; }
  .hvisual      { display: flex; justify-content: center; }
  .fc1, .fc2, .fc3 { display: none; }

  .wgrid,
  .bgrid,
  .reggrid      { grid-template-columns: 1fr; gap: 48px; }

  .ftop         { grid-template-columns: 1fr 1fr; gap: 32px; }
  .pgrid        { grid-template-columns: 1fr; }

  .dlin         { grid-template-columns: 1fr; gap: 36px; }
  .dldiv        { display: none; }

  .hsgrid       { grid-template-columns: repeat(3, 1fr); }
  .hsgrid::after { display: none; }

  .bankben-grid { grid-template-columns: 1fr; }

  .peop-grid    { grid-template-columns: 1fr; gap: 48px; }

  .bfgrid       { grid-template-columns: 1fr; gap: 40px; }

  .cmp-wrapper  { grid-template-columns: 1fr; gap: 20px; }
  .cmp-center   { order: -1; }
  .cmp-center-card { position: static; max-width: 320px; }
  
  
}


/* ============================================================
   RESPONSIVE — 768px and below
   ============================================================ */
@media (max-width: 1024px) {
  .nav-links,
  .nav-acts   { display: none; }
  nav         { height: 60px !important;}
  .ham        { display: flex; }
}

@media (max-width: 768px) {
  section     { padding: 70px 5%; }

  .pricgrid   { grid-template-columns: 1fr; }
  .secgrid    { grid-template-columns: 1fr 1fr; }
  .revgrid    { grid-template-columns: 1fr; }
  .faqlay     { grid-template-columns: 1fr; gap: 32px; }
  .ftop       { grid-template-columns: 1fr 1fr; }
  .hsgrid     { grid-template-columns: 1fr 1fr; gap: 30px; }

  .bftabs     { gap: 6px; }
  .bftab      { padding: 10px 16px; font-size: .82rem; }
  .bftab span { display: none; }

  .bfcard-visual { position: static; }

  .cmp-center-card { max-width: 100%; }

  .bankben-market { flex-direction: column; padding: 32px 24px; }

  .peop-cards { grid-template-columns: 1fr; }
  
  .sflow-grid, .intgrid, .si {
      display: grid;
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
}


/* ============================================================
   RESPONSIVE — 480px and below
   ============================================================ */

@media (max-width: 480px) {
  .secgrid  { grid-template-columns: 1fr; }
  .ftop     { grid-template-columns: 1fr; }
  .hsgrid   { grid-template-columns: 1fr; gap: 25px; }
  .hstats   { grid-template-columns: repeat(2, 1fr); }

  .hctas              { flex-direction: column; }
  .hctas .bhp,
  .hctas .bhs         { width: 225px; justify-content: center; box-sizing: border-box; }

  .pricc    { padding: 24px; }
  
}

/* ============================================================
   TERMS & CONDITION PAGE
   ============================================================ */
   
   /* ── HERO BAND ── */
.terms-hero {
  padding: 140px 5% 60px;
  background: linear-gradient(160deg, #F0F5FF 0%, #fff 60%);
  border-bottom: 1px solid var(--gray-100);
}
.terms-hero-inner {
  max-width: 860px;
  margin: 0 auto;
}
.terms-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue-pale);
  color: var(--blue);
  border: 1px solid rgba(0,87,255,.15);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.terms-hero h1 {
  font-size: clamp(2rem, 4vw, 2rem);
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 16px;
}
.terms-hero-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.terms-meta-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  color: var(--gray-500);
  font-weight: 500;
}
.terms-meta-item i { color: var(--blue); font-size: 1rem; }

/* ── LAYOUT ── */
.terms-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 5% 100px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 60px;
  align-items: start;
}

/* ── SIDEBAR TOC ── */
.toc {
  position: sticky;
  top: 92px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--r);
  padding: 24px;
}
.toc-title {
  font-family: 'Arial', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  color: var(--gray-400);
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}
.toc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.toc-list li a {
  display: block;
  padding: 7px 10px;
  font-size: .81rem;
  font-weight: 700;
  color: #1d2027;
  border-radius: 8px;
  transition: all .2s;
  line-height: 1.4;
}
.toc-list li a:hover,
.toc-list li a.active {
  background: var(--blue-pale);
  color: var(--blue);
}
.toc-contact {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-200);
}
.toc-contact p {
  font-size: .78rem;
  color: var(--gray-400);
  line-height: 1.5;
  margin-bottom: 10px;
}
.toc-contact a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-pale);
  padding: 8px 14px;
  border-radius: 8px;
  transition: background .2s;
}
.toc-contact a:hover { background: var(--blue-mid); }

/* ── CONTENT ── */
.terms-content { min-width: 0; }

.terms-section {
  margin-bottom: 52px;
  scroll-margin-top: 100px;
}
.terms-section:last-child { margin-bottom: 0; }

.sec-num {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-pale);
  padding: 3px 10px;
  border-radius: 100px;
  letter-spacing: .5px;
  margin-bottom: 10px;
}
.terms-section h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -.4px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--gray-100);
}
.terms-section h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 20px 0 10px;
}
.terms-section p {
  font-size: .9rem;
  color: var(--gray-600, #4B5563);
  line-height: 1.8;
  margin-bottom: 12px;
}
.terms-section p:last-child { margin-bottom: 0; }

.terms-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  padding-left: 4px;
}
.terms-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .88rem;
  color: #4B5563;
  line-height: 1.65;
}
.terms-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  margin-top: 8px;
}

.terms-callout {
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  border-left: 4px solid var(--blue);
  border-radius: var(--rs);
  padding: 16px 20px;
  margin: 16px 0;
  font-size: .86rem;
  color: var(--gray-700);
  line-height: 1.65;
}
.terms-callout strong { color: var(--blue); }

.terms-warn {
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-left: 4px solid #F97316;
  border-radius: var(--rs);
  padding: 16px 20px;
  margin: 16px 0;
  font-size: .86rem;
  color: #92400E;
  line-height: 1.65;
}

.divider {
  height: 1px;
  background: var(--gray-100);
  margin: 40px 0;
}

/* ── RESPONSIVE ── */
@media(max-width: 1024px) {
  .terms-body { grid-template-columns: 1fr; gap: 40px; }
  .toc { position: static; }
}
@media(max-width: 480px) {
  .toc { height: 600px; overflow-y: auto; }
  .terms-hero h1 { font-size: 1.8rem; }
}

/* ============================================================
   comment by shaukat: 404 page styles
   ============================================================ */

/* ── MAIN SECTION ── */
.nf-main {
  min-height: 100vh;
  background: var(--gray-900);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 120px 5% 80px;
}

/* ── CANVAS ── */
#nfCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── BLOBS ── */
.nf-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

.nf-blob-1 {
  width: 500px;
  height: 500px;
  background: rgba(0, 87, 255, .07);
  top: -100px;
  left: -100px;
  animation: blobdrift 12s ease-in-out infinite;
}

.nf-blob-2 {
  width: 400px;
  height: 400px;
  background: rgba(16, 185, 129, .05);
  bottom: -100px;
  right: -100px;
  animation: blobdrift 15s ease-in-out infinite reverse;
}

@keyframes blobdrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(40px, 30px); }
}

/* ── INNER ── */
.nf-inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ── GHOST AVATARS ── */
.nf-ghosts {
  display: flex;
  gap: 24px;
  margin-bottom: 40px;
  animation: ghostfloat 0.8s ease forwards;
  opacity: 0;
}

@keyframes ghostfloat {
  to { opacity: 1; }
}

.nf-ghost {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: ghostbob 4s ease-in-out infinite;
}

.nf-ghost-1 { animation-delay: 0s; }
.nf-ghost-2 { animation-delay: 0.6s; }
.nf-ghost-3 { animation-delay: 1.2s; }

@keyframes ghostbob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.nf-ghost i {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  border: 1.5px dashed rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, .15);
  filter: blur(0.5px);
}

.nf-ghost span {
  font-size: .65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .15);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── CONTENT ── */
.nf-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

/* ── 404 NUMBER ── */
.nf-num-wrap {
  position: relative;
  margin-bottom: 8px;
}

.nf-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(7rem, 18vw, 11rem);
  font-weight: 700;
  color: rgba(255, 255, 255, .06);
  line-height: 1;
  letter-spacing: -8px;
  user-select: none;
  animation: numreveal 1s ease .3s forwards;
  opacity: 0;
}

@keyframes numreveal {
  to { opacity: 1; }
}

.nf-num-glow {
  position: absolute;
  inset: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(7rem, 18vw, 11rem);
  font-weight: 700;
  color: transparent;
  line-height: 1;
  letter-spacing: -8px;
  background: linear-gradient(135deg, rgba(0,87,255,.15) 0%, rgba(16,185,129,.1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  animation: numglow 3s ease-in-out infinite;
}

@keyframes numglow {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

/* ── ZIPPY HUB ── */
.nf-hub {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -20px auto 28px;
  animation: hubreveal 1s ease .5s forwards;
  opacity: 0;
}

@keyframes hubreveal {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

.nf-hub-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 87, 255, .2);
  animation: nfring 3s ease-out infinite;
}

.nf-hr1 { width: 70px;  height: 70px;  animation-delay: 0s; }
.nf-hr2 { width: 100px; height: 100px; animation-delay: 1s; }
.nf-hr3 { width: 130px; height: 130px; animation-delay: 2s; }

@keyframes nfring {
  0% { opacity: .5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.25); }
}

.nf-hub-core {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px rgba(0, 87, 255, .15), 0 8px 32px rgba(0, 87, 255, .5);
  position: relative;
  z-index: 2;
}

.nf-hub-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

/* ── TITLE ── */
.nf-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.5px;
  margin-bottom: 16px;
  animation: slideup 0.8s ease .7s forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes slideup {
  to { opacity: 1; transform: translateY(0); }
}

/* ── SUB ── */
.nf-sub {
  font-size: .97rem;
  color: rgba(255, 255, 255, .45);
  line-height: 1.75;
  max-width: 480px;
  margin: 0 auto 24px;
  animation: slideup 0.8s ease .85s forwards;
  opacity: 0;
  transform: translateY(20px);
}

/* ── BADGE ── */
.nf-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, .1);
  border: 1px solid rgba(16, 185, 129, .2);
  border-radius: 100px;
  padding: 8px 18px;
  font-size: .78rem;
  font-weight: 600;
  color: #10B981;
  margin-bottom: 32px;
  animation: slideup 0.8s ease 1s forwards;
  opacity: 0;
  transform: translateY(20px);
}

.nf-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  animation: pulse 2s infinite;
}

/* ── ACTIONS ── */
.nf-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 32px;
  animation: slideup 0.8s ease 1.1s forwards;
  opacity: 0;
  transform: translateY(20px);
}

.nf-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 87, 255, .35);
  transition: all .2s;
}

.nf-btn-primary:hover {
  background: var(--blue-d);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 87, 255, .45);
}

.nf-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .8);
  border: 1.5px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  transition: all .2s;
}

.nf-btn-secondary:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .25);
  transform: translateY(-2px);
}

/* ── QUICK LINKS ── */
.nf-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  animation: slideup 0.8s ease 1.2s forwards;
  opacity: 0;
  transform: translateY(20px);
}

.nf-links-label {
  font-size: .76rem;
  color: rgba(255, 255, 255, .25);
  font-weight: 500;
}

.nf-links a {
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .4);
  transition: color .2s;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.nf-links a:hover { color: rgba(255, 255, 255, .85); border-color: rgba(255,255,255,.3); }

/* ── VISIBLE CARDS ── */
.nf-visible {
  display: flex;
  gap: 24px;
  margin-top: 52px;
  opacity: 0;
  animation: visreveal 1s ease 1.8s forwards;
}

@keyframes visreveal {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.nf-vcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: vcbob 4s ease-in-out infinite;
}

.nf-vcard-1 { animation-delay: 0s; }
.nf-vcard-2 { animation-delay: 0.5s; }
.nf-vcard-3 { animation-delay: 1s; }

@keyframes vcbob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.nf-vcard i {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.nf-vcard-1 i { background: rgba(0,87,255,.15); color: #60A5FA; border: 1.5px solid rgba(0,87,255,.25); box-shadow: 0 0 16px rgba(0,87,255,.2); }
.nf-vcard-2 i { background: rgba(245,158,11,.1); color: #F59E0B; border: 1.5px solid rgba(245,158,11,.2); box-shadow: 0 0 16px rgba(245,158,11,.15); }
.nf-vcard-3 i { background: rgba(16,185,129,.12); color: #10B981; border: 1.5px solid rgba(16,185,129,.2); box-shadow: 0 0 16px rgba(16,185,129,.2); }

.nf-vcard span {
  font-size: .65rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .4);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .nf-main { padding: 100px 5% 60px; }
  .nf-ghosts { gap: 16px; }
  .nf-visible { gap: 16px; }
  .nf-actions { flex-direction: column; width: 100%; }
  .nf-btn-primary, .nf-btn-secondary { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .nf-ghost:nth-child(3) { display: none; }
  .nf-vcard:nth-child(3) { display: none; }
}