/* ---------- Design tokens ---------- */
:root{
  --bg: #ffffff;
  --bg-soft: #f7f8fb;
  --bg-tint: #f1f3f9;
  --ink: #0a0e1a;
  --ink-2: #2a2f3d;
  --muted: #5b6273;
  --line: #e6e8ef;
  --line-2: #eef0f5;

  /* Checkmarble-inspired indigo/blue accent */
  --accent: #2c47e6;
  --accent-2: #4d63ff;
  --accent-soft: #eef1ff;
  --accent-deep: #1a2dab;

  --success: #18a957;
  --warn: #ff8a3d;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(15,20,40,.04), 0 1px 3px rgba(15,20,40,.04);
  --shadow-md: 0 8px 24px rgba(15,20,40,.06), 0 2px 6px rgba(15,20,40,.04);
  --shadow-lg: 0 30px 60px -20px rgba(20,30,80,.18), 0 10px 30px -15px rgba(20,30,80,.12);

  --max: 1240px;
  --pad: clamp(16px, 4vw, 32px);

  --font-display: 'Bricolage Grotesque', ui-serif, Georgia, serif;
  --font-body: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ---------- Reusable ---------- */
.container{max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  display:inline-flex;align-items:center;gap:8px;
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
h1,h2,h3,h4{font-family:var(--font-display); letter-spacing:-.02em; color:var(--ink); line-height:1.08; font-weight:600}
h1{font-size: clamp(40px, 6vw, 76px); font-weight: 500; letter-spacing:-.035em}
h2{font-size: clamp(30px, 4.2vw, 50px); letter-spacing:-.028em; font-weight:500}
h3{font-size: clamp(20px, 2.4vw, 26px); letter-spacing:-.02em}
p{color:var(--ink-2)}
.lead{font-size: clamp(16px, 1.4vw, 18px); color: var(--muted); max-width: 640px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px; border-radius: 999px;
  font-weight:500; font-size:15px; letter-spacing:-.005em;
  transition: all .25s cubic-bezier(.2,.7,.2,1);
  white-space:nowrap;
}
.btn-primary{
  background: var(--ink); color: #fff;
  box-shadow: 0 6px 20px -6px rgba(10,14,26,.4);
}
.btn-primary:hover{transform: translateY(-1px); background: var(--accent); box-shadow: 0 12px 28px -8px rgba(44,71,230,.5)}
.btn-ghost{
  border: 1px solid var(--line);
  color: var(--ink); background:#fff;
}
.btn-ghost:hover{border-color: var(--ink); transform:translateY(-1px)}
.btn-link{
  color: var(--accent); font-weight: 500; display:inline-flex;align-items:center;gap:6px;
}
.btn-link:hover .arr{transform:translateX(4px)}
.arr{display:inline-block;transition: transform .25s ease}

/* Section base */
section{padding: clamp(64px, 10vw, 20px) 0; position:relative}
.section-head{margin-bottom: clamp(40px, 6vw, 72px); max-width: 760px}
.section-head h2{margin-top:14px}
.section-head p{margin-top:18px}

/* ---------- NAV ---------- */
.nav-wrap{position:sticky;top:0;z-index:50;background: rgba(255,255,255,.78); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom:1px solid transparent; transition: border-color .25s ease, background .25s ease}
.nav-wrap.scrolled{border-color: var(--line); background: rgba(255,255,255,.92)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.02em;min-width:0}
.brand-mark{
  width:32px;height:32px;border-radius:9px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;
  position:relative;overflow:hidden;
}
.brand-mark::after{
  content:"";position:absolute;inset:0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), transparent 50%);
}
.brand-mark-image img{
  width:100%;height:100%;display:block;object-fit:contain;
}
.brand-has-image{gap:0}
.brand-has-image .brand-mark-image{
  width:auto;
  max-width:100%;
  background:none;
  border:none;
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  overflow:visible;
}
.brand-has-image .brand-mark-image::after{content:none}
.brand-header.brand-has-image{height:72px;max-width:min(220px, 40vw)}
.brand-footer.brand-has-image{max-width:min(220px, 55vw)}
.brand-header.brand-has-image .brand-mark-image{height:44px}
.brand-footer.brand-has-image .brand-mark-image{height:48px}
.brand-has-image .brand-mark-image img{
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
}
.nav-links{display:flex;align-items:center}
.nav-links-mobile{display:none}
.mobile-nav-cta{display:none}
.nav-links .menu{display:flex;gap:34px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links .menu > .menu-item{position:relative}
.nav-links a{font-size:14.5px;color:var(--ink-2);font-weight:500;transition: color .2s ease}
.nav-links a:hover{color:var(--accent)}
.nav-link-group{display:flex;align-items:center;gap:6px}
.menu-item-has-children > .nav-link-group::after{
  content:"";
  width:7px;height:7px;display:block;flex:0 0 auto;
  border-right:1.75px solid currentColor;border-bottom:1.75px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  color:var(--ink-2);transition: color .2s ease, transform .2s ease;
}
.submenu-toggle{
  display:none;
  width:28px;height:28px;padding:0;border:0;border-radius:999px;
  background:transparent;color:var(--ink-2);cursor:pointer;
  align-items:center;justify-content:center;transition: background .2s ease, color .2s ease;
}
.submenu-caret{
  width:8px;height:8px;display:block;
  border-right:1.75px solid currentColor;border-bottom:1.75px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform .2s ease;
}
.menu-item-has-children.menu-open > .nav-link-group > a,
.menu-item-has-children:focus-within > .nav-link-group > a{color:var(--accent)}
.menu-item-has-children.menu-open > .nav-link-group::after,
.menu-item-has-children:focus-within > .nav-link-group::after{color:var(--accent)}
.menu-item-has-children.menu-open > .nav-link-group .submenu-toggle,
.menu-item-has-children:focus-within > .nav-link-group .submenu-toggle{color:var(--accent)}
.sub-menu{
  position:absolute;top:calc(100% + 18px);left:0;z-index:60;
  min-width:220px;padding:14px 0;margin:0;list-style:none;
  background:rgba(255,255,255,.98);border:1px solid var(--line);
  border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.12);
  opacity:0;visibility:hidden;transform:translateY(8px);
  pointer-events:none;transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.menu-item-has-children.menu-open > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}
.menu-item-has-children.menu-open > .mega-menu-panel,
.menu-item-has-children:focus-within > .mega-menu-panel{
  opacity:1;visibility:visible;transform:translate(-50%, 0);pointer-events:auto;
}
.sub-menu .menu-item{margin:0}
.sub-menu a{display:block;padding:10px 18px;font-size:14px}
.sub-menu a:hover{background:rgba(77,99,255,.08)}
.mega-menu-panel{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translate(-50%, 8px);
  z-index:60;width:min(700px, calc(100vw - 48px));padding:18px;
  background:#ffffff;border:1px solid var(--line);
  border-radius:24px;box-shadow:0 28px 72px rgba(15,23,42,.14);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.mega-menu-grid{
  position:static;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;min-width:0;padding:0;margin:0;list-style:none;background:transparent;border:0;box-shadow:none;
}
.mega-menu-grid .menu-item{margin:0}
.mega-menu-link{
  display:flex;align-items:flex-start;gap:14px;padding:16px;
  border:1px solid rgba(77,99,255,.08);border-radius:18px;
  background:#f8faff;
  min-height:100%;
}
.mega-menu-link:hover{
  border-color:rgba(77,99,255,.22);background:#eef3ff;
  box-shadow:0 16px 28px rgba(77,99,255,.08);
}
.mega-menu-icon{
  flex:0 0 44px;width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;background:rgba(77,99,255,.08);color:var(--accent);
}
.mega-menu-icon svg{
  width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.mega-menu-copy{display:grid;gap:4px}
.mega-menu-title{
  font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.15;
  color:var(--ink);
}
.mega-menu-description{
  font-size:14px;line-height:1.55;color:var(--muted);font-weight:400;
}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-cta .btn{padding:10px 18px;font-size:14px}
.menu-btn{
  display:none;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font-size:14px;font-weight:600;cursor:pointer;
}
.menu-btn-lines{
  display:grid;gap:4px;
}
.menu-btn-lines span{
  display:block;width:16px;height:1.5px;border-radius:999px;background:currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-wrap.nav-open .menu-btn-lines span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-wrap.nav-open .menu-btn-lines span:nth-child(2){opacity:0}
.nav-wrap.nav-open .menu-btn-lines span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
@media (max-width: 880px){
  .nav{height:auto;min-height:72px;flex-wrap:wrap;padding:14px 0;position:relative}
  .menu-btn{display:inline-flex;margin-left:auto}
  .nav-links-desktop{
    display:none;
  }
  .nav-links-mobile{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    z-index:80;
  }
  .nav-wrap.nav-open .nav-links-mobile{display:block}
  .nav-links .menu{
    display:grid;gap:0;align-items:stretch;
    width:100%;padding:14px;border:1px solid var(--line);border-radius:22px;background:#fff;
    box-shadow:0 20px 48px rgba(15,23,42,.08);
  }
  .nav-links .menu > .menu-item{border-bottom:1px solid var(--line-2)}
  .nav-links .menu > .menu-item:last-child{border-bottom:0}
  .nav-link-group{justify-content:space-between;gap:12px;padding:0}
  .menu-item-has-children > .nav-link-group::after{display:none}
  .nav-link-group > a{padding:16px 0;flex:1 1 auto}
  .submenu-toggle{
    display:inline-flex;flex:0 0 36px;width:36px;height:36px;margin-left:auto;
  }
  .submenu-toggle.is-open .submenu-caret{transform:rotate(225deg) translateY(-1px)}
  .menu-item-has-children > .sub-menu,
  .mega-menu-panel{
    position:static;width:100%;min-width:0;margin:0 0 12px;padding:0;
    background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;
    opacity:1;visibility:visible;transform:none;pointer-events:auto;display:none;
  }
  .menu-item-has-children.menu-open > .sub-menu,
  .menu-item-has-children:focus-within > .sub-menu,
  .menu-item-has-children.menu-open > .mega-menu-panel,
  .menu-item-has-children:focus-within > .mega-menu-panel{display:none}
  .menu-item-has-children.submenu-open > .sub-menu,
  .menu-item-has-children.submenu-open > .mega-menu-panel{display:block}
  .sub-menu{
    padding:6px 0 12px 16px;
    display:grid;
    gap:6px;
  }
  .sub-menu a{padding:8px 0}
  .mega-menu-grid{
    display:block;grid-template-columns:1fr;gap:8px;padding:0 0 8px 16px;
  }
  .mega-menu-icon,
  .mega-menu-description{display:none}
  .mega-menu-link{
    display:block;padding:10px 0;border:0;border-radius:0;background:transparent;box-shadow:none;min-height:0;
  }
  .mega-menu-copy{display:block}
  .mega-menu-title{display:block;font:inherit;color:var(--ink-2)}
  .nav-cta{display:none}
  .mobile-nav-cta{
    display:block;
    width:100%;
    padding:0 14px 14px;
    border:1px solid var(--line);
    border-top:0;
    border-radius:0 0 22px 22px;
    background:#fff;
    box-shadow:0 20px 48px rgba(15,23,42,.08);
  }
  .mobile-nav-cta .btn{
    width:100%;
    justify-content:center;
  }
}

/* ---------- HERO ---------- */
.hero{
  padding-top: clamp(48px, 7vw, 90px);
  padding-bottom: clamp(48px, 7vw, 90px);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:-1px 0 auto 0; height: 600px;
  background:
    radial-gradient(1200px 500px at 80% -20%, rgba(44,71,230,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(77,99,255,.08), transparent 60%);
  z-index:-1;
}
.hero-grid{
  position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 75%);
  opacity:.5;
}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items:center}
@media (max-width: 980px){.hero-inner{grid-template-columns:1fr; gap:40px}}

.hero h1 .accent-word{
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  position:relative;
}
.hero h1 .accent-word::after{
  content:""; position:absolute; left:0; right:0; bottom: -.02em; height:.08em;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 4px; opacity:.25;
}
.hero-sub{margin-top:22px; font-size:clamp(16px,1.5vw,19px); color:var(--muted); max-width: 540px; line-height:1.55}

.badge-row{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 14px 6px 6px; border-radius:999px;
  background: var(--bg-soft); border:1px solid var(--line);
  font-size: 13px; color: var(--ink-2); margin-bottom: 28px;
}
.badge-pill{
  padding:4px 10px; border-radius: 999px;
  background: var(--ink); color:#fff; font-size:11px; font-weight:600; letter-spacing:.04em;
}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.hero-stats > div{padding:22px 18px 22px 20px; border-right:1px solid var(--line)}
.hero-stats > div:last-child{border-right:none}
.hero-stats strong{display:block;font-family:var(--font-display);font-size: clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.hero-stats span{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px;display:block}
@media (max-width:680px){
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .hero-stats > div:nth-child(2){border-right:none}
  .hero-stats > div:nth-child(1),.hero-stats > div:nth-child(2){border-bottom:1px solid var(--line)}
  .hero-stats > div{padding-right:18px}
}

@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(24,169,87,.5)}70%{box-shadow:0 0 0 12px rgba(24,169,87,0)}100%{box-shadow:0 0 0 0 rgba(24,169,87,0)}}

/* ============== HERO VISUAL — clean white-themed UI mockup ============== */
.hero-visual{
  position:relative; width:100%; max-width:480px; margin-left:auto;
  height: 580px;
}
@media (max-width: 980px){.hero-visual{margin: 0 auto; height: 520px}}
@media (max-width: 560px){.hero-visual{height: 480px; max-width: 360px}}

.kyc-card{
  position:absolute; inset:0;
  background: #fff;
  border:1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.kyc-card::before{
  content:""; position:absolute; top:0;left:0;right:0;height:4px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent) 100%);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
  z-index:5;
}
@keyframes shimmer{0%{background-position:0 0}100%{background-position:200% 0}}

/* Top bar with status */
.kyc-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--line-2);
  position:relative; z-index:3;
}
.kyc-status-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,82,82,.08); border: 1px solid rgba(255,82,82,.25);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; color: #d63838;
}
.kyc-status-pill .dot{
  width:7px; height:7px; border-radius:50%; background:#ff5252;
  animation: blink 1.4s ease-in-out infinite;
}
.kyc-time-pill{
  font-family: var(--font-mono); font-size: 12px; color: var(--ink);
  font-weight: 500;
  background: var(--bg-soft); padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line);
}

/* Photo region */
.kyc-photo-region{
  flex: 1; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #f5f7ff 0%, #eef1ff 100%);
}
.kyc-photo{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  height: 110%; width: auto;
  object-fit: cover;
}
.kyc-circle{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 240px; height: 240px; border-radius: 50%;
  border: 2px dashed var(--accent);
  z-index: 3;
  animation: pulseCircle 3s ease-in-out infinite;
}
@keyframes pulseCircle{
  0%,100%{transform: translate(-50%,-50%) scale(1); opacity: .6}
  50%{transform: translate(-50%,-50%) scale(1.05); opacity: 1}
}
.kyc-scan{
  position: absolute; left: 20%; right: 20%; top: 30%;
  height: 2px; background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  box-shadow: 0 0 14px var(--accent-2);
  z-index: 3;
  animation: scanY 3s ease-in-out infinite;
}
@keyframes scanY{0%,100%{top:25%; opacity:.5}50%{top:65%; opacity:1}}
.kyc-corner-mark{
  position: absolute;
  width: 24px; height: 24px;
  border: 2px solid var(--accent);
  z-index: 3;
}
.kyc-corner-mark.tl{top:14%; left:18%; border-right:none; border-bottom:none; border-radius: 4px 0 0 0}
.kyc-corner-mark.tr{top:14%; right:18%; border-left:none; border-bottom:none; border-radius: 0 4px 0 0}
.kyc-corner-mark.bl{bottom:30%; left:18%; border-right:none; border-top:none; border-radius: 0 0 0 4px}
.kyc-corner-mark.br{bottom:30%; right:18%; border-left:none; border-top:none; border-radius: 0 0 4px 0}

/* Bottom: identity verified card */
.kyc-identity{
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 8px 20px rgba(20,30,80,.08);
  z-index: 4;
  display: flex; align-items: center; gap: 14px;
}
.kyc-identity-avatar{
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--success); display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(24,169,87,.15);
  animation: pulseGreenSm 2.5s ease-in-out infinite;
}
@keyframes pulseGreenSm{
  0%,100%{box-shadow: 0 0 0 3px rgba(24,169,87,.15)}
  50%{box-shadow: 0 0 0 8px rgba(24,169,87,.05)}
}
.kyc-identity-avatar svg{width:22px;height:22px;color:#fff}
.kyc-identity-text{flex: 1; min-width: 0}
.kyc-identity-text .label{
  font-family: var(--font-mono); font-size: 10px;
  color: var(--muted); letter-spacing: .1em; text-transform: uppercase;
  font-weight: 500; margin-bottom: 3px;
}
.kyc-identity-text .name{
  font-family: var(--font-display); font-size: 16px;
  font-weight: 600; color: var(--ink); letter-spacing: -.015em;
  line-height: 1.1;
}
.kyc-identity-text .meta{
  font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); margin-top: 2px;
}
.kyc-identity-score{
  display: flex; flex-direction: column; align-items: flex-end;
  flex-shrink: 0;
}
.kyc-identity-score .pct{
  font-family: var(--font-display); font-size: 22px;
  font-weight: 600; letter-spacing: -.02em; line-height: 1;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kyc-identity-score .pct-label{
  font-family: var(--font-mono); font-size: 9px;
  color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
  margin-top: 2px; font-weight: 500;
}

/* Floating side cards */
.float-card{
  position:absolute; background:#fff; border:1px solid var(--line);
  border-radius: 14px; padding:14px 16px; box-shadow: var(--shadow-md);
  font-size:13px; display:flex;align-items:center;gap:12px;
  animation: floaty 6s ease-in-out infinite;
  z-index: 10;
}
.float-card.fc-1{top:14%; left:-8%; animation-delay:0s}
.float-card.fc-2{bottom:18%; right:-6%; animation-delay:1.5s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.fc-icon{
  width:36px;height:36px;border-radius:10px; display:grid;place-items:center;
  background: var(--accent-soft); color:var(--accent); font-weight:700;
  flex-shrink:0;
}
.fc-1 .fc-icon{background: #eaf7ee; color:var(--success)}
.float-card strong{display:block;font-size:13px;color:var(--ink);font-weight:600; white-space:nowrap}
.float-card span{font-size:11px;color:var(--muted); white-space:nowrap}
@media (max-width: 1100px){
  .float-card.fc-1{left: 4%}
  .float-card.fc-2{right: 4%}
}
@media (max-width: 980px){
  .float-card.fc-1{left: -4%}
  .float-card.fc-2{right: -4%}
}
@media (max-width: 560px){
  .float-card{padding: 10px 12px; font-size:12px}
  .fc-icon{width:30px;height:30px}
  .float-card strong{font-size:12px}
  .float-card span{font-size:10px}
}

/* ---------- LOGOS ---------- */
.logos{padding: 40px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: var(--bg-soft)}
.logos-strip{
  padding:40px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background: var(--bg-soft);
}
.logos-strip-transparent{
  background: transparent;
}
.logos-label{
  text-align:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 24px;
}
.logos-track{
  display:flex; gap: 70px; align-items:center;
  animation: marquee 35s linear infinite;
  width: max-content;
}
.logos-mask{overflow:hidden; mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-item{display:flex; align-items:center; justify-content:center; min-width:120px}
.logo-image{
  height:clamp(24px, 3.4vw, 34px);
  width:auto;
  max-width:160px;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.8;
  transition: opacity .3s ease, transform .3s ease, filter .3s ease;
}
.logo-item:hover .logo-image{
  opacity:1;
  filter:grayscale(0);
  transform:translateY(-1px);
}
.logo-name{font-family:var(--font-display); font-weight:600; font-size: clamp(18px,1.8vw,22px); color: var(--muted); letter-spacing:-.02em; opacity:.7; transition: opacity .3s ease, color .3s ease; white-space:nowrap}
.logo-name:hover{opacity:1; color:var(--ink)}
@media (max-width: 767px){
  .logos-track{gap:48px}
  .logos-mask{padding:0 12px}
}

/* ---------- PROBLEM SECTION ---------- */
.problem{background: var(--bg)}
.problem-grid{display:grid;grid-template-columns:repeat(2,1fr); gap:18px; margin-top:48px}
@media(max-width:760px){.problem-grid{grid-template-columns:1fr}}
.problem-card{
  padding:28px; border-radius: var(--radius); background: var(--bg-soft);
  border:1px solid var(--line); position:relative; overflow:hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.problem-card:hover{transform:translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line)}
.problem-card .num{
  font-family:var(--font-mono); font-size: 12px; color: var(--accent);
  letter-spacing:.1em; margin-bottom: 14px; display:block; font-weight:500;
}
.problem-card h4{font-family:var(--font-display); font-size: clamp(18px,2vw,22px); font-weight:600; margin-bottom:10px; line-height:1.25}
.problem-card p{font-size: 15px; color: var(--muted); line-height:1.55}

.callout{
  margin-top:48px; padding: 36px 40px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--ink) 0%, #1a2042 100%);
  color:#fff; position:relative; overflow:hidden;
}
.callout::before{
  content:""; position:absolute; right:-80px; top:-80px; width:280px; height:280px;
  background: radial-gradient(circle, rgba(77,99,255,.4), transparent 70%);
  border-radius:50%;
}
.callout strong{font-family:var(--font-display); font-size:clamp(22px,2.6vw,30px); font-weight:500; letter-spacing:-.02em; display:block; margin-bottom:14px; color:#fff}
.callout p{color:rgba(255,255,255,.75); max-width:680px; font-size:15.5px; line-height:1.6}

/* ---------- WHAT WE DO (showcase with brand mockup) ---------- */
.whatwedo{background: var(--bg)}
.whatwedo-grid{
  display:grid; grid-template-columns: 1fr 1.1fr; gap: 64px;
  align-items:center; margin-top: 48px;
}
@media (max-width: 980px){
  .whatwedo-grid{grid-template-columns:1fr; gap:40px}
}
.whatwedo-text h2{margin-top: 14px}
.whatwedo-text > p{margin-top: 18px; margin-bottom: 32px}
.whatwedo-list{list-style:none; display:grid; gap: 20px; padding-left:0}
.whatwedo-list li{
  display:grid; grid-template-columns: 44px 1fr; gap: 16px;
  align-items:flex-start;
}
.whatwedo-icon{
  width:44px; height:44px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent);
  display:grid; place-items:center; flex-shrink:0;
}
.whatwedo-icon svg{width:22px;height:22px}
.whatwedo-list h4{
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  margin-bottom: 4px; line-height:1.3;
}
.whatwedo-list p{font-size: 14.5px; color: var(--muted); line-height: 1.55}

.whatwedo-visual{
  position:relative; width:100%; max-width: 540px; margin: 0 auto;
}
.whatwedo-dashboard{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 1.2fr);
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.whatwedo-dashboard::before{
  content:""; position:absolute; top:0;left:0;right:0;height:4px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent) 100%);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}
.wwd-id-card{
  background: #0a0e1a; border-radius: 12px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 240px;
}
.wwd-photo-area{
  flex: 1; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1a2042, #0a0e1a);
}
.wwd-photo-area img{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  height: 105%; width: auto;
  object-fit: cover;
}
.wwd-bracket{
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--accent-2);
  z-index: 2;
}
.wwd-bracket.tl{top:14px; left:14px; border-right:none; border-bottom:none}
.wwd-bracket.tr{top:14px; right:14px; border-left:none; border-bottom:none}
.wwd-bracket.bl{bottom:14px; left:14px; border-right:none; border-top:none}
.wwd-bracket.br{bottom:14px; right:14px; border-left:none; border-top:none}
.wwd-id-footer{
  background: rgba(255,255,255,.06); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
}
.wwd-verified-pill{
  display:inline-flex; align-items:center; gap:5px;
  padding: 4px 9px; border-radius: 999px;
  background: var(--success); color:#fff;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .06em;
}
.wwd-verified-pill::before{
  content:""; width:6px; height:4px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(0, -1px);
}
.wwd-id-name{
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  color: #fff; line-height: 1.1;
}
.wwd-id-name span{display:block; font-size: 9px; font-weight: 400; color: rgba(255,255,255,.6); margin-top:2px}

.wwd-features{display: grid; gap: 6px; align-content: start; min-width: 0}
.wwd-feature-item{
  background: var(--bg-soft);
  border: 1px solid var(--line-2);
  border-radius: 9px;
  padding: 8px 10px;
  display: flex; align-items: center; gap: 8px;
  transition: all .25s ease;
  min-width: 0;
}
.wwd-feature-item:hover{
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateX(2px);
}
.wwd-feature-icon{
  width: 28px; height: 28px; border-radius: 7px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.wwd-feature-icon.r{background: rgba(255,82,82,.1); color: #d63838}
.wwd-feature-icon.b{background: var(--accent-soft); color: var(--accent)}
.wwd-feature-icon.t{background: rgba(24,169,87,.1); color: var(--success)}
.wwd-feature-icon.p{background: rgba(168,85,247,.1); color: #a855f7}
.wwd-feature-icon.o{background: rgba(255,138,61,.12); color: #ff8a3d}
.wwd-feature-icon svg{width: 14px; height: 14px}
.wwd-feature-text{flex: 1; min-width: 0}
.wwd-feature-text .ttl{
  font-family: var(--font-display); font-weight: 600; font-size: 11.5px;
  color: var(--ink); line-height: 1.1; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wwd-feature-text .sub{
  font-family: var(--font-mono); font-size: 8.5px;
  color: var(--muted); letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wwd-feature-item.live .wwd-feature-icon{position:relative}
.wwd-feature-item.live .wwd-feature-icon::after{
  content:""; position:absolute; top:-2px; right:-2px;
  width:7px; height:7px; border-radius:50%; background:#ff5252;
  animation: blink 1.4s ease-in-out infinite;
  box-shadow: 0 0 6px #ff5252;
}

.wwd-stats{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; margin-top: 14px;
}
.wwd-stat-item{
  background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 8px 4px;
  text-align: center;
  min-width: 0;
}
.wwd-stat-item .num{
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: -.02em; line-height: 1;
}
.wwd-stat-item .num.b{color: var(--accent)}
.wwd-stat-item .num.g{color: var(--success)}
.wwd-stat-item .num.t{color: #06b6d4}
.wwd-stat-item .num.o{color: #ff8a3d}
.wwd-stat-item .lbl{
  font-family: var(--font-mono); font-size: 8px;
  color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
  font-weight: 500; margin-top: 4px;
}

/* Floating callout on visual */
.whatwedo-callout{
  position:absolute; right: -16px; bottom: 40px; z-index: 4;
  background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:14px 16px; box-shadow: var(--shadow-md);
  display:flex; align-items:center; gap:12px;
  animation: floaty 6s ease-in-out infinite;
  max-width: 240px;
}
.whatwedo-callout-icon{
  width:42px;height:42px; border-radius:10px;
  background: var(--accent-soft); color: var(--accent);
  display:grid;place-items:center; font-weight:700; flex-shrink:0;
  font-size: 12px; font-family: var(--font-display);
}
.whatwedo-callout strong{display:block; font-size:13px; color:var(--ink); font-weight:600; white-space:nowrap}
.whatwedo-callout span{font-size:11px; color:var(--muted); white-space:nowrap}
@media (max-width:560px){.whatwedo-callout{display:none}}
@media (max-width: 980px){
  .whatwedo-dashboard{max-width: 540px; margin: 0 auto}
}
.products{background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%)}
.products-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:48px}
@media(max-width:880px){.products-grid{grid-template-columns:1fr}}
.product-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 0; position:relative; overflow:hidden;
  transition: all .4s cubic-bezier(.2,.7,.2,1);
  display:flex; flex-direction:column;
}
.product-card:hover{transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--accent-soft)}
.product-card::before{
  content:""; position:absolute; top:0;left:0;right:0;height:3px; z-index:3;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .5s ease;
}
.product-card:hover::before{transform: scaleX(1)}

/* Product mockup region — modular white-themed UI mockups */
.product-mockup{
  position:relative; height: 260px; overflow:hidden;
  background: linear-gradient(135deg, #f5f7ff 0%, #eef1ff 100%);
  border-bottom:1px solid var(--line);
}
.product-mockup-image{
  display:flex;align-items:center;justify-content:center;
  padding:18px;background:#f8faff;
}
.product-mockup-image img{
  width:100%;height:100%;display:block;object-fit:contain;object-position:center;
}
.product-mockup .mock-grid{
  position:absolute; inset:0; opacity:.4; pointer-events:none;
  background-image:
    linear-gradient(rgba(44,71,230,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,71,230,.06) 1px, transparent 1px);
  background-size: 24px 24px;
}
.product-mockup .corner-glow{
  position:absolute; pointer-events:none;
  width: 240px; height: 240px;
  filter: blur(40px); opacity: .6;
}
.product-mockup .corner-glow.tr{
  top:-60px; right:-60px;
  background: radial-gradient(circle, rgba(77,99,255,.5), transparent 60%);
}
.product-mockup .corner-glow.bl{
  bottom:-60px; left:-60px;
  background: radial-gradient(circle, rgba(44,71,230,.4), transparent 60%);
}
.product-content{padding: 28px 32px 32px; position:relative; z-index:2}

/* ============== MOCKUP 1: Assisted VKYC dashboard ============== */
.mu-assisted{
  position:absolute; inset: 18px; display:grid;
  grid-template-columns: 1.2fr 1fr; gap: 8px;
  z-index: 2;
}
.mu-window{
  background:#fff; border:1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(20,30,80,.08);
  overflow:hidden; display:flex; flex-direction:column;
}
.mu-titlebar{
  display:flex; align-items:center; gap:6px;
  padding: 7px 10px; background: #fafbfd;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--font-mono); font-size:9px; color: var(--muted);
}
.mu-dots{display:flex; gap:4px}
.mu-dots span{width:7px;height:7px;border-radius:50%}
.mu-dots span:nth-child(1){background:#ff5f57}
.mu-dots span:nth-child(2){background:#ffbd2e}
.mu-dots span:nth-child(3){background:#28ca41}
.mu-url{
  margin-left: 6px; padding: 2px 8px;
  background:#fff; border:1px solid var(--line); border-radius: 4px;
  display:flex; align-items:center; gap:4px;
}
.mu-rec{
  margin-left:auto; display:inline-flex; align-items:center; gap:4px;
  font-size:8.5px; color:#fff; font-weight:700; letter-spacing:.08em;
  background: #ff5252; padding: 2px 6px; border-radius: 3px;
}
.mu-rec::before{content:""; width:5px;height:5px;border-radius:50%;background:#fff;animation:blink 1.4s ease-in-out infinite}

.mu-video-area{
  flex:1; position:relative; padding: 10px;
  display: grid; grid-template-rows: 1fr 1fr; gap: 8px;
}
.mu-video-tile{
  background: #0a0e1a; border-radius: 8px;
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end;
}
.mu-video-tile img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: center 30%;
}
.mu-video-tile .name{
  position:relative; z-index:2;
  padding: 4px 8px; margin: 6px;
  background: rgba(10,14,26,.7); backdrop-filter: blur(6px);
  border-radius: 4px;
  font-family: var(--font-mono); font-size: 8.5px; color: #fff;
  font-weight: 600; display:inline-flex; align-items:center; gap:4px;
}
.mu-video-tile .name .badge{
  padding: 1px 5px; border-radius: 3px;
  background: var(--accent); color:#fff;
  font-size: 7px; letter-spacing:.05em;
}
.mu-video-tile.agent .name .badge{background: var(--success)}

.mu-checks{padding: 10px}
.mu-checks-head{
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; color: var(--ink); margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.mu-checks-head::after{
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 0 0 rgba(24,169,87,.6);
  animation: pulse 2s infinite;
}
.mu-check-item{
  display:flex; align-items:center; gap:7px;
  padding: 5px 8px; margin-bottom: 4px;
  background: var(--bg-soft); border-radius: 5px;
  font-size: 9px; color: var(--ink); font-weight: 500;
  border: 1px solid transparent;
}
.mu-check-item.active{border-color: var(--accent); background: var(--accent-soft); color: var(--accent)}
.mu-check-item .ic{
  width: 12px; height: 12px; border-radius: 50%;
  flex-shrink: 0; display: grid; place-items: center;
}
.mu-check-item.done .ic{background: var(--success)}
.mu-check-item.done .ic::after{
  content:""; width:5px; height:3px;
  border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg) translate(0px, -1px);
}
.mu-check-item.active .ic{
  border: 1.5px solid var(--accent); border-top-color: transparent;
  animation: spinDot .9s linear infinite;
}
.mu-check-item.pending .ic{background: var(--line)}
@keyframes spinDot{to{transform: rotate(360deg)}}

/* ============== MOCKUP 2: Phone (Unassisted VKYC) ============== */
.mu-phones-stage{
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; gap: 18px; padding: 20px;
  z-index: 2;
}
.mu-phone{
  width: 100px; aspect-ratio: 9/19;
  background: #0a0e1a; border-radius: 16px; padding: 4px;
  box-shadow: 0 14px 30px -8px rgba(20,30,80,.3);
  flex-shrink: 0; position:relative;
}
.mu-phone .screen{
  width: 100%; height: 100%; background: #fff; border-radius: 12px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.mu-phone .screen::before{
  content:""; position:absolute; top:4px; left:50%; transform:translateX(-50%);
  width: 26px; height: 5px; background:#0a0e1a; border-radius: 3px; z-index:5;
}
.mu-phone .header-bar{
  padding: 10px 8px 6px; font-size: 7px;
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  text-align: center; border-bottom: 1px solid var(--line-2);
}
.mu-phone .body{flex: 1; padding: 6px; display:flex; flex-direction:column; gap:4px}
.mu-photo-frame{
  flex: 1; border-radius: 6px; overflow: hidden;
  position: relative; background: #f0f2f8;
  border: 1.5px dashed var(--accent);
}
.mu-photo-frame img{width:100%; height:100%; object-fit: cover; display:block}
.mu-photo-frame .scan-bar{
  position:absolute; left:6%; right:6%; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  box-shadow: 0 0 6px var(--accent-2);
  animation: scan 2s ease-in-out infinite;
}
@keyframes scan{0%,100%{top:15%}50%{top:75%}}
.mu-progress-bar{
  height: 3px; background: var(--bg-soft); border-radius: 2px; overflow: hidden;
}
.mu-progress-bar .fill{
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  animation: phoneProgress 4s ease-in-out infinite;
}
@keyframes phoneProgress{0%{width:0}50%{width:75%}100%{width:100%}}
.mu-phone-row{
  display:flex; align-items:center; gap:4px;
  padding: 3px 5px; font-size: 6.5px; font-weight: 600;
  background: var(--bg-soft); border-radius: 3px; color: var(--ink);
}
.mu-phone-row .tk{
  width:7px; height:7px; border-radius: 50%; background: var(--success);
  display:grid; place-items:center; flex-shrink:0;
}
.mu-phone-row .tk::after{
  content:""; width: 3px; height: 1.5px;
  border-left: 1px solid #fff; border-bottom: 1px solid #fff;
  transform: rotate(-45deg) translate(0, -.5px);
}
.mu-phone-success{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  flex:1; gap: 4px;
}
.mu-phone-success .check{
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--success); display:grid; place-items:center;
  box-shadow: 0 0 0 0 rgba(24,169,87,.5);
  animation: pulseGreen 2s ease-in-out infinite;
}
@keyframes pulseGreen{0%,100%{box-shadow:0 0 0 0 rgba(24,169,87,.4)}50%{box-shadow:0 0 0 8px rgba(24,169,87,0)}}
.mu-phone-success .check::after{
  content:""; width:11px; height:6px;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.mu-phone-success .label{font-family:var(--font-display); font-size: 9px; font-weight:600; color:var(--ink)}
.mu-phone-success .time{font-family:var(--font-mono); font-size: 6.5px; color: var(--muted)}

.mu-counter-card{
  position:absolute; top: 20px; right: 20px; z-index: 3;
  background:#fff; border:1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; box-shadow: 0 6px 14px rgba(20,30,80,.08);
  font-family:var(--font-mono); font-size: 9px; color:var(--muted);
}
.mu-counter-card .live{
  color:var(--success); display:inline-flex; align-items:center; gap:4px;
  font-size: 8px; letter-spacing: .1em; margin-bottom: 2px;
}
.mu-counter-card .live::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--success);
  animation: pulse 2s infinite;
}
.mu-counter-card b{
  display:block; font-family: var(--font-display); font-size: 18px;
  font-weight: 600; color: var(--ink); letter-spacing: -.02em; margin: 2px 0 1px;
}

/* ============== MOCKUP 3: Smart Consent — face match comparison ============== */
.mu-consent{
  position:absolute; inset: 18px; z-index:2;
  display:grid; grid-template-rows: auto 1fr; gap: 8px;
}
.mu-consent-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 8px 12px; background: #fff;
  border:1px solid var(--line); border-radius: 8px;
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  color: var(--ink);
}
.mu-consent-head .live-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding: 3px 8px; border-radius: 4px;
  background: var(--success); color: #fff;
  font-size: 8.5px; font-family: var(--font-mono); letter-spacing: .08em; font-weight: 700;
}
.mu-consent-head .live-badge::before{
  content:""; width:5px; height:5px; border-radius:50%; background:#fff;
  animation: blink 1.4s ease-in-out infinite;
}
.mu-consent-body{
  display:grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.mu-photo-card{
  background:#fff; border:1px solid var(--line); border-radius: 8px;
  padding: 8px; display:flex; flex-direction:column; gap:6px;
  box-shadow: 0 4px 10px rgba(20,30,80,.04);
}
.mu-photo-card .label{
  font-family: var(--font-mono); font-size: 8px;
  color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
  font-weight: 500;
}
.mu-photo-card .photo{
  flex:1; border-radius: 5px; overflow: hidden; position: relative;
  background: #f0f2f8;
  min-height: 80px;
}
.mu-photo-card .photo img{
  width:100%; height:100%; object-fit: cover; display:block;
}
.mu-photo-card .photo.live{border: 1.5px solid var(--accent)}
.mu-photo-card .photo.live::after{
  content:""; position:absolute; left:6%; right:6%; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 6px var(--accent);
  animation: scan 2.2s ease-in-out infinite;
}
.mu-match-bar{
  display:flex; align-items:center; gap:6px;
  padding: 4px 7px; border-radius: 4px;
  background: var(--success); color: #fff;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
}
.mu-match-bar::before{
  content:""; width:9px; height:9px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
}

/* ============== MOCKUP 4: Video PD — main + side ============== */
.mu-pd{
  position:absolute; inset: 18px; z-index:2;
  display:grid; grid-template-columns: 1.4fr 1fr; gap: 8px;
}
.mu-pd-main{
  background: #0a0e1a; border-radius: 10px;
  position:relative; overflow:hidden;
  display:flex; align-items: flex-end;
}
.mu-pd-main img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: center 30%;
}
.mu-pd-main .rec-badge{
  position:absolute; top:8px; left:8px; z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  padding: 3px 7px; border-radius: 4px;
  background: rgba(255,82,82,.9); color: #fff;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .06em;
}
.mu-pd-main .rec-badge::before{
  content:""; width:5px; height:5px; border-radius:50%; background:#fff;
  animation: blink 1.4s ease-in-out infinite;
}
.mu-pd-main .name-tag{
  position: relative; z-index: 2;
  margin: 8px; padding: 4px 8px;
  background: rgba(10,14,26,.7); backdrop-filter: blur(8px);
  border-radius: 4px; color: #fff;
  font-family: var(--font-mono); font-size: 8.5px; font-weight:600;
}
.mu-pd-main .name-tag b{font-family:var(--font-display); font-weight:600; display:block; font-size:9.5px}

.mu-pd-side{display:grid; grid-template-rows: 1fr 1fr 1fr; gap: 6px; min-height:0}
.mu-pd-thumb{
  background: #0a0e1a; border-radius: 6px;
  position:relative; overflow:hidden; min-height: 0;
}
.mu-pd-thumb img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: center 25%;
}
.mu-pd-thumb.active{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  animation: activeOutline 3s ease-in-out infinite;
}
@keyframes activeOutline{
  0%,100%{outline-color: var(--accent)}
  50%{outline-color: var(--accent-2)}
}
.mu-pd-thumb .mini-tag{
  position:absolute; bottom:3px; left:3px; right:3px;
  font-family: var(--font-mono); font-size: 6.5px; color:#fff; font-weight: 600;
  background: rgba(0,0,0,.5); padding: 1px 4px; border-radius: 2px;
  letter-spacing: .04em;
}

.product-num{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.16em;
  color: var(--accent); font-weight:500;
}
.product-card h3{margin: 14px 0 10px; font-size:clamp(22px,2.4vw,28px)}
.product-card .pitch{font-size:15.5px; line-height:1.6; color:var(--muted); margin-bottom: 24px}
.product-features{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px}
.tag{
  padding:5px 12px; background: var(--bg-soft); border:1px solid var(--line);
  border-radius: 999px; font-size: 12px; color: var(--ink-2); font-weight:500;
}
.product-built{font-size:13px; color:var(--muted); padding-top:18px; border-top:1px dashed var(--line)}
.product-built b{color:var(--ink); font-weight:600}

/* ====== Per-product mockup styles ====== */

/* MOCKUP 1: Assisted VKYC — agent dashboard */
.mock-agent{position:absolute; inset:16px; display:grid; grid-template-columns: 1fr 1.2fr; gap:10px}
.mock-panel{
  background:#fff; border-radius:10px; border:1px solid var(--line);
  box-shadow: 0 4px 12px rgba(20,30,80,.06);
  padding:10px; overflow:hidden; position:relative;
}
.mock-panel-head{
  font-family:var(--font-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px; display:flex; align-items:center; gap:6px;
}
.mock-panel-head::before{content:""; width:5px;height:5px;border-radius:50%;background:var(--success)}
.mock-video{
  background: linear-gradient(135deg, #1a2042 0%, #0a0e1a 100%);
  border-radius:6px; aspect-ratio: 4/3; position:relative; overflow:hidden;
  display:grid; place-items:center; margin-bottom:8px;
}
.mock-video::after{
  content:"REC"; position:absolute; top:6px; right:6px;
  font-family:var(--font-mono); font-size:7px; color:#ff5252; font-weight:700;
  letter-spacing:.1em; padding:2px 5px; background:rgba(255,82,82,.15);
  border-radius:3px;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.mock-video svg{width:50%; opacity:.85}
.mock-stat{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:8px; padding:4px 0;
  border-bottom: 1px solid var(--line-2);
}
.mock-stat:last-child{border-bottom:none}
.mock-stat span{color:var(--muted)}
.mock-stat b{color:var(--success); font-weight:700}
.mock-stat.warn b{color:var(--warn)}

.mock-checklist{display:flex; flex-direction:column; gap:5px}
.mock-check{
  display:flex; align-items:center; gap:6px;
  padding:5px 7px; background: var(--bg-soft); border-radius:5px;
  font-size:9px; color:var(--ink); font-weight:500;
  border:1px solid var(--line-2);
}
.mock-check .dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex-shrink:0; display:grid;place-items:center}
.mock-check .dot::after{content:""; width:3px;height:3px;border-radius:50%;background:#fff}
.mock-check.pending .dot{background:var(--accent); animation: spinDot .9s linear infinite}
.mock-check.pending .dot::after{display:none}
.mock-check.pending::after{content:""; width:8px;height:8px; border:1.5px solid var(--accent); border-top-color:transparent; border-radius:50%; animation: spinDot .9s linear infinite; margin-left:auto}
@keyframes spinDot{to{transform:rotate(360deg)}}

/* MOCKUP 2: Unassisted VKYC — phone with auto verification */
.mock-phones{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:14px; padding:14px}
.mock-phone{
  width: 95px; aspect-ratio: 9/19; background:#0a0e1a;
  border-radius: 14px; padding:4px;
  box-shadow: 0 14px 30px -8px rgba(20,30,80,.25);
  flex-shrink:0;
}
.mock-phone-screen{
  width:100%; height:100%; background:#fff; border-radius: 10px;
  position:relative; overflow:hidden; padding:8px 6px;
  display:flex; flex-direction:column; gap:5px;
}
.mock-phone-screen::before{
  content:""; position:absolute; top:3px; left:50%; transform:translateX(-50%);
  width:24px; height:5px; background:#0a0e1a; border-radius:3px;
}
.mock-phone-bar{height:3px;background:var(--bg-soft);border-radius:2px;margin-top:8px}
.mock-phone-bar.fill{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  width:0; animation: phoneBar 4s ease-in-out infinite;
}
@keyframes phoneBar{0%{width:0}50%{width:75%}100%{width:100%}}
.mock-phone .face-mini{
  height:52%; background: linear-gradient(135deg, #eef1ff, #f9faff);
  border-radius:6px; border:1px dashed var(--accent);
  display:grid; place-items:center; position:relative; overflow:hidden;
}
.mock-phone .face-mini svg{width:55%; opacity:.85}
.mock-phone .face-mini .scan{
  position:absolute;left:6%;right:6%; height:1.5px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: scan 2s ease-in-out infinite;
}
.mock-phone-row{
  display:flex;align-items:center;gap:4px;
  font-size:6.5px; padding: 3px 4px; background: var(--bg-soft);
  border-radius:3px; color:var(--ink); font-weight:600;
}
.mock-phone-row .tk{width:6px;height:6px;border-radius:50%;background:var(--success);flex-shrink:0}

.mock-counter{
  position:absolute; top:14px; right:14px; z-index:5;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:8px 12px; box-shadow: 0 6px 14px rgba(20,30,80,.08);
  font-family:var(--font-mono); font-size:9px; color:var(--muted);
  min-width: 80px;
}
.mock-counter b{display:block; font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--ink); letter-spacing:-.02em; margin: 2px 0 0}
.mock-counter .live{color:var(--success); display:inline-flex; align-items:center; gap:4px; font-size:8px; letter-spacing:.1em; margin-bottom:2px}
.mock-counter .live::before{content:""; width:5px;height:5px;border-radius:50%;background:var(--success); animation: pulse 2s infinite}

/* MOCKUP 3: Smart Consent — video player with transcript */
.mock-consent{position:absolute; inset:16px; display:grid; grid-template-rows: 1.2fr .8fr; gap:8px}
.mock-consent-video{
  background: linear-gradient(135deg, #1a2042, #0a0e1a);
  border-radius:8px; position:relative; overflow:hidden;
  display:grid; place-items:center;
}
.mock-consent-video svg{width:24%; opacity:.9}
.mock-consent-video::before{
  content:""; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:rgba(255,255,255,.15);
}
.mock-consent-video::after{
  content:""; position:absolute; bottom:0; left:0; height:3px; width:0;
  background: var(--accent-2);
  animation: consentProg 5s linear infinite;
}
@keyframes consentProg{0%{width:0}100%{width:60%}}
.mock-play-btn{
  position:absolute; left:8px; bottom:8px;
  display:flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:8px; color:#fff; font-weight:600;
}
.mock-play-btn .triangle{
  width:0; height:0; border-left:6px solid #fff;
  border-top:4px solid transparent; border-bottom:4px solid transparent;
}
.mock-time{
  position:absolute; right:8px; bottom:8px;
  font-family:var(--font-mono); font-size:8px; color:rgba(255,255,255,.7);
}
.mock-transcript{
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:8px 10px; overflow:hidden; position:relative;
}
.mock-transcript-line{
  font-size:8px; color:var(--ink-2); line-height:1.5;
  margin-bottom:4px; display:flex; gap:6px; align-items:flex-start;
}
.mock-transcript-line .ts{
  font-family:var(--font-mono); color:var(--accent); font-size:7px; flex-shrink:0;
  font-weight:600;
}
.mock-transcript-line.typing::after{
  content:""; display:inline-block; width:1px;height:8px; background:var(--ink);
  animation: caret 1s steps(2) infinite; margin-left:2px;
}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* MOCKUP 4: Video PD — multi-participant grid */
.mock-pd{
  position:absolute; inset:16px;
  display:grid; grid-template-columns: 1.4fr 1fr; gap:8px;
}
.mock-pd-main{
  background: linear-gradient(135deg, #1a2042, #0a0e1a);
  border-radius:8px; position:relative; overflow:hidden;
  display:grid; place-items:center;
}
.mock-pd-main::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 40%, rgba(77,99,255,.25), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(44,71,230,.2), transparent 50%);
}
.mock-pd-main svg{width:30%; opacity:.85; position:relative; z-index:1}
.mock-pd-main .recording{
  position:absolute; top:8px; left:8px;
  display:flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:8px; color:#fff; font-weight:600;
  background: rgba(255,82,82,.15); padding:3px 6px; border-radius:3px;
}
.mock-pd-main .recording::before{
  content:""; width:5px;height:5px; border-radius:50%;
  background:#ff5252; animation: blink 1.4s ease-in-out infinite;
}
.mock-pd-main .label{
  position:absolute; bottom:8px; left:8px;
  font-family:var(--font-mono); font-size:8px; color:#fff; font-weight:600;
  background: rgba(0,0,0,.4); padding:3px 6px; border-radius:3px;
  backdrop-filter: blur(4px);
}
.mock-pd-side{display:grid; grid-template-rows: 1fr 1fr 1fr; gap:6px; min-height:0}
.mock-pd-thumb{
  background: linear-gradient(135deg, #1a2042, #0a0e1a);
  border-radius:6px; position:relative; overflow:hidden;
  display:grid; place-items:center; min-height:0;
}
.mock-pd-thumb svg{width:24%; opacity:.85}
.mock-pd-thumb.active{
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--accent-soft);
  animation: activeBorder 4s ease-in-out infinite;
}
@keyframes activeBorder{
  0%,100%{box-shadow:0 0 0 2px var(--accent), 0 0 0 4px rgba(44,71,230,.2)}
  50%{box-shadow:0 0 0 2px var(--accent-2), 0 0 0 4px rgba(77,99,255,.3)}
}
.mock-pd-thumb .mini-label{
  position:absolute; bottom:3px; left:3px;
  font-family:var(--font-mono); font-size:6.5px; color:#fff;
  background:rgba(0,0,0,.4); padding:1px 4px; border-radius:2px;
}



/* ---------- FLOW (animated) ---------- */
.flow{background: var(--bg)}
.flow-tabs{display:flex; gap:8px; margin-bottom: 36px; flex-wrap:wrap}
.flow-tab{
  padding:10px 18px; border-radius:999px; background: var(--bg-soft);
  border:1px solid var(--line); font-size:14px; font-weight:500; color:var(--ink-2);
  transition: all .25s ease;
}
.flow-tab.active{background: var(--ink); color:#fff; border-color: var(--ink)}
.flow-tab:hover:not(.active){border-color:var(--ink)}

.flow-steps{position:relative; display:grid; grid-template-columns: 1fr; gap:0}
.flow-line{
  position:absolute; left:32px; top:40px; bottom:40px; width:2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 50%, transparent 100%);
  background-size: 100% 200%;
  animation: lineflow 3s linear infinite;
}
@keyframes lineflow{0%{background-position:0 -100%}100%{background-position:0 100%}}
@media(max-width:580px){.flow-line{left:24px}}

.flow-step{
  display:grid; grid-template-columns: 64px 1fr; gap:20px;
  padding: 18px 0; align-items:flex-start; position:relative;
}
@media(max-width:580px){.flow-step{grid-template-columns: 48px 1fr; gap:14px}}
.flow-marker{
  width:64px;height:64px;border-radius:50%; background:#fff; border:2px solid var(--line);
  display:grid;place-items:center; font-family:var(--font-display); font-weight:600; font-size:18px;
  color: var(--ink); position:relative; z-index:1;
  transition: all .3s ease;
}
@media(max-width:580px){.flow-marker{width:48px;height:48px;font-size:14px}}
.flow-step.active .flow-marker{background: var(--accent); border-color: var(--accent); color:#fff; box-shadow: 0 0 0 8px var(--accent-soft)}
.flow-actor{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; margin-bottom:6px; display:flex; align-items:center; gap:10px;
}
.flow-actor.customer{color: #d6336c}
.flow-actor.platform{color: var(--accent)}
.flow-actor.agent{color: var(--ink)}
.flow-actor .ts{font-family:var(--font-mono); color:var(--muted); letter-spacing:.06em}
.flow-step h4{font-family:var(--font-display); font-size:clamp(17px,1.8vw,20px); font-weight:600; margin-bottom:8px; line-height:1.3}
.flow-step p{font-size:14.5px; color:var(--muted); line-height:1.6; max-width: 720px}

/* ---------- DIFFERENTIATORS ---------- */
.diff{background: var(--bg-soft)}
.diff-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:48px}
@media(max-width:980px){.diff-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.diff-grid{grid-template-columns:1fr}}
.diff-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; transition: all .3s ease;
}
.diff-card:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow: var(--shadow-md)}
.diff-icon{
  width:42px;height:42px; border-radius:12px;
  background: var(--accent-soft); color: var(--accent);
  display:grid; place-items:center; margin-bottom:18px;
}
.diff-icon svg{width:22px;height:22px}
.diff-card h4{font-family:var(--font-display); font-size:18px; font-weight:600; margin-bottom:10px; line-height:1.3}
.diff-card p{font-size:14.5px; color:var(--muted); line-height:1.6}

/* ---------- COMPLIANCE ---------- */
.comp{background:var(--bg)}
.comp-wrap{display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center}
@media(max-width:880px){.comp-wrap{grid-template-columns:1fr; gap:40px}}
.comp-badges{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.comp-badge{
  padding:22px; border:1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
  display:flex; flex-direction:column; gap:8px;
  transition: all .3s ease; position:relative; overflow:hidden;
}
.comp-badge:hover{border-color:var(--accent); transform: scale(1.02)}
.comp-badge .seal{
  width:34px;height:34px;border-radius:50%; background: var(--accent-soft);
  border: 2px solid var(--accent); display:grid; place-items:center;
  margin-bottom:6px;
}
.comp-badge .seal svg{width:16px;height:16px;color:var(--accent)}
.comp-badge strong{font-family:var(--font-display); font-size:17px; color:var(--ink); font-weight:600}
.comp-badge span{font-size:13px; color:var(--muted); line-height:1.5}

.comp-list{list-style:none; margin-top:26px; display:grid; gap:10px}
.comp-list li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-2); line-height:1.55}
.comp-list .tick{
  width:20px;height:20px;border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:grid;place-items:center; flex-shrink:0; margin-top:2px;
}
.comp-list .tick svg{width:11px;height:11px}

/* ---------- CALCULATOR ---------- */
.calc{background: var(--ink); color:#fff; position:relative; overflow:hidden}
.calc::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(800px 400px at 90% 10%, rgba(77,99,255,.18), transparent 60%),
    radial-gradient(600px 400px at 0% 100%, rgba(44,71,230,.15), transparent 60%);
}
.calc .container{position:relative}
.calc h2{color:#fff}
.calc .lead{color: rgba(255,255,255,.7)}
.calc .eyebrow{color:#8aa1ff}
.calc .eyebrow::before{background:#8aa1ff; box-shadow: 0 0 0 4px rgba(138,161,255,.15)}

.calc-grid{display:grid; grid-template-columns: 1fr 1fr; gap:48px; margin-top:48px; align-items:flex-start}
@media(max-width:880px){.calc-grid{grid-template-columns:1fr; gap:32px}}

.calc-inputs{display:grid;gap:28px}
.input-group label{
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px;
  font-size:14px; color: rgba(255,255,255,.7); font-weight:500;
}
.input-group label b{font-family:var(--font-mono); font-size:18px; color:#fff; font-weight:500}
.input-group input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:6px;
  background: rgba(255,255,255,.12); border-radius:3px; outline:none;
}
.input-group input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px;height:22px;border-radius:50%;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  cursor:grab; box-shadow: 0 0 0 6px rgba(77,99,255,.18); transition: all .15s ease;
}
.input-group input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.1)}
.input-group input[type="range"]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%; border:none;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  cursor:grab; box-shadow: 0 0 0 6px rgba(77,99,255,.18);
}
.input-meta{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:rgba(255,255,255,.4); font-family:var(--font-mono)}

.calc-output{
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg); padding: 32px; backdrop-filter: blur(10px);
}
.calc-output h4{color:rgba(255,255,255,.6); font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; margin-bottom:24px}
.calc-row{padding:18px 0; border-bottom:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; align-items:center; gap:16px}
.calc-row:last-of-type{border-bottom:none}
.calc-row span{font-size:14px; color:rgba(255,255,255,.7); max-width: 60%}
.calc-row b{font-family:var(--font-display); font-size: clamp(20px,2.4vw,28px); font-weight:500; letter-spacing:-.02em}
.calc-savings b{color: #5eff9a}
.calc-disclaimer{font-size:12px; color:rgba(255,255,255,.4); margin-top: 20px; line-height:1.55}

/* ---------- PERSONAS ---------- */
.personas{background: var(--bg)}
.personas-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:48px}
@media(max-width:760px){.personas-grid{grid-template-columns:1fr}}
.persona{
  padding:28px; border:1px solid var(--line); border-radius:var(--radius-lg);
  background: var(--bg-soft); transition: all .3s ease; position:relative; overflow:hidden;
}
.persona:hover{border-color: var(--accent); background:#fff; transform: translateY(-4px); box-shadow: var(--shadow-md)}
.persona-role{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; background:#fff; border:1px solid var(--line);
  border-radius:999px; font-size:12px; font-weight:600; color:var(--ink); margin-bottom:18px;
}
.persona-role .pdot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.persona blockquote{
  font-family:var(--font-display); font-size: clamp(17px,1.8vw,20px); font-weight:500;
  letter-spacing:-.015em; color:var(--ink); line-height:1.4; margin-bottom:16px;
  position:relative; padding-left:18px; border-left: 3px solid var(--accent);
}
.persona-answer{font-size:14.5px; color:var(--muted); line-height:1.6}

/* ---------- FAQ ---------- */
.faq{background: var(--bg-soft)}
.faq-list{margin-top:40px; max-width: 880px}
.faq-item{
  border-bottom:1px solid var(--line); padding: 22px 0;
  transition: background .2s ease;
}
.faq-q{
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
  cursor:pointer; width:100%; text-align:left;
}
.faq-q h4{font-family:var(--font-display); font-size: clamp(17px,1.7vw,19px); font-weight:600; line-height:1.4; flex:1; color:var(--ink)}
.faq-toggle{
  flex-shrink:0; width:34px;height:34px; border-radius:50%; background:#fff; border:1px solid var(--line);
  display:grid; place-items:center; transition: all .3s ease; color:var(--ink-2);
}
.faq-item.open .faq-toggle{background:var(--accent); border-color:var(--accent); color:#fff; transform: rotate(45deg)}
.faq-toggle svg{width:16px;height:16px}
.faq-a{
  max-height:0; overflow:hidden; transition: max-height .4s ease, padding .3s ease;
  font-size:15px; color:var(--muted); line-height:1.65; padding-right: 58px;
}
.faq-item.open .faq-a{max-height: 600px; padding-top: 16px}

/* ---------- FINAL CTA ---------- */
.cta{background: var(--bg)}
.cta-card{
  padding: clamp(40px,5vw,64px); border-radius: var(--radius-lg); position:relative; overflow:hidden;
  background:
    radial-gradient(800px 400px at 80% 0%, rgba(77,99,255,.18), transparent 60%),
    linear-gradient(135deg, var(--ink) 0%, #14193b 100%);
  color:#fff;
}
.cta-card::before{
  content:""; position:absolute; right:-100px; bottom:-100px; width:340px; height:340px;
  background: radial-gradient(circle, rgba(77,99,255,.3), transparent 70%);
  animation: orbit 8s ease-in-out infinite alternate;
}
@keyframes orbit{from{transform:translate(0,0)}to{transform:translate(-30px,-30px)}}
.cta-card .eyebrow{color:#8aa1ff}
.cta-card .eyebrow::before{background:#8aa1ff; box-shadow: 0 0 0 4px rgba(138,161,255,.15)}
.cta-card h2{color:#fff; max-width:680px; margin:14px 0 18px}
.cta-card p{color:rgba(255,255,255,.7); max-width:580px; font-size:16.5px; line-height:1.6}
.cta-card .hero-cta{margin-top:32px}
.cta-card .btn-primary{background:#fff;color:var(--ink)}
.cta-card .btn-primary:hover{background:var(--accent); color:#fff}
.cta-card .btn-ghost{background: transparent; color:#fff; border-color: rgba(255,255,255,.2)}
.cta-card .btn-ghost:hover{border-color:#fff}

/* ---------- FOOTER ---------- */
footer{padding: 64px 0 32px; border-top:1px solid var(--line); background: var(--bg-soft)}
.foot-grid{display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:48px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr; gap:32px}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-about p{font-size:14px; color:var(--muted); margin-top:14px; line-height:1.6; max-width:340px}
.footer-contact-links{display:grid; gap:10px; margin-top:16px}
.footer-contact-link{
  width:fit-content; font-size:14px; color:var(--ink-2); text-decoration:none;
  transition: color .2s ease, transform .2s ease;
}
.footer-contact-link:hover{color:var(--accent); transform:translateX(2px)}
.footer-social{display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap}
.footer-social-link{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:999px; color:var(--ink-2); background:#fff;
  transition: color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.footer-social-link:hover{
  color:var(--accent); border-color:rgba(44,71,230,.28); transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
.footer-social-link svg{width:18px; height:18px}
.foot-col h5{font-family:var(--font-display); font-size:13px; font-weight:600; margin-bottom:16px; color:var(--ink); text-transform:uppercase; letter-spacing:.06em}
.foot-col .menu{list-style:none; display:grid; gap:10px; margin:0; padding:0}
.foot-col a{font-size:14px; color:var(--muted); transition: color .2s ease}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center; padding-top:32px;
  margin-top:48px; border-top:1px solid var(--line); flex-wrap:wrap; gap:14px;
  font-size:13px; color:var(--muted);
}

/* ---------- Reveal animation on scroll ---------- */
.reveal{opacity:0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.show{opacity:1; transform: translateY(0)}
.reveal.delay-1{transition-delay:.1s}
.reveal.delay-2{transition-delay:.2s}
.reveal.delay-3{transition-delay:.3s}
.reveal.delay-4{transition-delay:.4s}

/* ============== ANIMATED GRAPHICS ============== */
/* Floating particles in hero background */
.particles{position:absolute; inset:0; pointer-events:none; z-index:-1; overflow:hidden}
.particle{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.18;animation: rise linear infinite}
.particle:nth-child(1){left:10%;animation-duration:14s;animation-delay:0s;width:6px;height:6px}
.particle:nth-child(2){left:25%;animation-duration:18s;animation-delay:2s}
.particle:nth-child(3){left:40%;animation-duration:12s;animation-delay:5s;width:3px;height:3px}
.particle:nth-child(4){left:55%;animation-duration:16s;animation-delay:1s}
.particle:nth-child(5){left:70%;animation-duration:20s;animation-delay:3s;width:5px;height:5px}
.particle:nth-child(6){left:85%;animation-duration:15s;animation-delay:6s}
.particle:nth-child(7){left:92%;animation-duration:17s;animation-delay:4s;width:3px;height:3px}
@keyframes rise{
  0%{transform:translateY(110vh) scale(0);opacity:0}
  10%{opacity:.18;transform:translateY(100vh) scale(1)}
  90%{opacity:.18}
  100%{transform:translateY(-10vh) scale(0);opacity:0}
}

/* PROBLEM section — animated cost ticker */
.problem-visual{
  margin: 50px 0; padding: 28px;
  background: linear-gradient(135deg, var(--bg-soft) 0%, #fff 100%);
  border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden;
  position:relative;
}
.problem-visual::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  background-size: 100% 200%;
  animation: pulseBar 2.5s ease-in-out infinite;
}
@keyframes pulseBar{
  0%,100%{background-position: 0 200%}
  50%{background-position: 0 0%}
}
.cost-ticker{
  display:flex; gap: clamp(16px, 3vw, 40px); align-items:center; flex-wrap:wrap;
  font-family: var(--font-mono);
}
.cost-ticker .label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.ticker-num{
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px); font-weight:600; letter-spacing:-.03em;
  background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric: tabular-nums;
  display:inline-block; min-width: 4ch;
}
.ticker-bar-wrap{flex:1; min-width:200px; height: 8px; background: var(--line-2); border-radius: 4px; position:relative; overflow:hidden}
.ticker-bar{
  height:100%; border-radius:4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
  background-size: 200% 100%;
  width:0;
  transition: width 1.4s cubic-bezier(.2,.7,.2,1);
  animation: barGlow 2s linear infinite;
}
@keyframes barGlow{0%{background-position:0 0}100%{background-position:200% 0}}
.ticker-rate{font-size:13px; color:var(--success); font-weight:600; display:flex;align-items:center;gap:6px}
.ticker-rate::before{content:""; width:0;height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:8px solid var(--success)}

/* PRODUCTS — kept for legacy, hidden when mockup present */
.product-bg{display:none}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* DIFFERENTIATOR icons — micro animations */
.diff-card .diff-icon svg{transition: transform .4s ease}
.diff-card:hover .diff-icon svg{transform: scale(1.15) rotate(-6deg)}

/* Network/connection animation in differentiators section */
.diff-network{
  position: absolute; right: 0; top: 0; width: 320px; height: 320px;
  pointer-events:none; opacity: .35;
  z-index: 0;
}
.diff-network .node{animation: nodepulse 2s ease-in-out infinite}
.diff-network .node:nth-child(2){animation-delay:.3s}
.diff-network .node:nth-child(3){animation-delay:.6s}
.diff-network .node:nth-child(4){animation-delay:.9s}
.diff-network .node:nth-child(5){animation-delay:1.2s}
@keyframes nodepulse{0%,100%{r:4;opacity:.6}50%{r:7;opacity:1}}
.diff-network .link{stroke-dasharray: 6 4; animation: dashflow 1.5s linear infinite}
@keyframes dashflow{to{stroke-dashoffset: -20}}
@media (max-width: 880px){.diff-network{display:none}}
.diff .container{position:relative; z-index:1}

/* COMPLIANCE — rotating shield ring */
.shield-stage{
  position:relative; width: 100%; max-width: 460px; aspect-ratio: 1;
  margin: 0 auto;
}
.shield-stage svg{position:absolute; inset:0; width:100%;height:100%}
.shield-ring-1{animation: spin 40s linear infinite; transform-origin: center}
.shield-ring-2{animation: spin 60s linear infinite reverse; transform-origin: center}
.shield-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width: 36%; height:36%; border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  display:grid; place-items:center;
  box-shadow: 0 20px 60px -10px rgba(44,71,230,.5), inset 0 -10px 30px rgba(0,0,0,.15);
}
.shield-core::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border: 2px solid var(--accent); opacity: 0;
  animation: shieldPing 2.5s ease-out infinite;
}
@keyframes shieldPing{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.4);opacity:0}}
.shield-core svg{width:50%; height:50%; color:#fff; position:static}
.orbit-badge{
  position:absolute;
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; border:1px solid var(--line);
  box-shadow: var(--shadow-md);
  display:grid; place-items:center;
  font-family: var(--font-display); font-weight:700; font-size:11px; color:var(--ink);
  text-align:center; line-height:1.1;
}
.orbit-badge.b1{top:0; left:50%; transform: translate(-50%,-50%); animation: bob 4s ease-in-out infinite}
.orbit-badge.b2{right:0; top:50%; transform: translate(50%,-50%); animation: bob 4s ease-in-out infinite .8s}
.orbit-badge.b3{bottom:0; left:50%; transform: translate(-50%,50%); animation: bob 4s ease-in-out infinite 1.6s}
.orbit-badge.b4{left:0; top:50%; transform: translate(-50%,-50%); animation: bob 4s ease-in-out infinite 2.4s}
@keyframes bob{0%,100%{margin-top:0}50%{margin-top:-8px}}
.orbit-badge.b1 strong, .orbit-badge.b2 strong, .orbit-badge.b3 strong, .orbit-badge.b4 strong{display:block; font-size:11px}

@media (max-width: 600px) {
  .comp {
    overflow: hidden;
  }

  .comp-wrap {
    gap: 28px;
  }

  .shield-stage {
    width: min(100%, 320px);
    margin: 0 auto;
    overflow: hidden;
  }

  .shield-ring-1,
  .shield-ring-2 {
    width: 100%;
    height: auto;
  }

  .shield-core {
    width: clamp(116px, 36vw, 148px);
    height: clamp(116px, 36vw, 148px);
  }

  .orbit-badge {
    width: 76px;
    height: 76px;
  }

  .orbit-badge.b2 {
    right: 10px;
    transform: translate(0,-50%);
  }

  .orbit-badge.b4 {
    left: 10px;
    transform: translate(0,-50%);
  }
}

/* Restructure compliance section to fit shield stage */
.comp-wrap-3col{display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center}
@media (max-width:880px){.comp-wrap-3col{grid-template-columns:1fr; gap:40px}}

/* CALCULATOR — coin/money rain background */
.calc-rain{position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:.5}
.calc-coin{
  position:absolute; top:-40px; width: 24px; height:24px; border-radius:50%;
  border: 2px solid rgba(255,255,255,.18);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.15), transparent 60%);
  animation: fall linear infinite;
  display:grid; place-items:center;
  font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.4); font-weight:700;
}
.calc-coin::after{content:"₹"}
.calc-coin:nth-child(1){left:5%;animation-duration:9s;animation-delay:0s}
.calc-coin:nth-child(2){left:18%;animation-duration:12s;animation-delay:2s;width:18px;height:18px;font-size:10px}
.calc-coin:nth-child(3){left:30%;animation-duration:10s;animation-delay:4s}
.calc-coin:nth-child(4){left:46%;animation-duration:13s;animation-delay:1s;width:30px;height:30px;font-size:14px}
.calc-coin:nth-child(5){left:62%;animation-duration:11s;animation-delay:3s}
.calc-coin:nth-child(6){left:75%;animation-duration:14s;animation-delay:5s;width:20px;height:20px;font-size:11px}
.calc-coin:nth-child(7){left:88%;animation-duration:10s;animation-delay:2.5s;width:28px;height:28px}
.calc-coin:nth-child(8){left:96%;animation-duration:12s;animation-delay:0.5s;width:16px;height:16px;font-size:9px}
@keyframes fall{
  0%{transform: translateY(0) rotate(0); opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform: translateY(110vh) rotate(540deg); opacity:0}
}

/* FLOW — animated screens demonstrating the steps */
.flow-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: flex-start}
@media (max-width: 980px){.flow-grid{grid-template-columns:1fr; gap:40px}}

.phone-mock{
  position: sticky; top: 100px;
  width: 100%; max-width: 320px; margin: 0 auto;
  aspect-ratio: 9/19; background: #0a0e1a;
  border-radius: 38px; padding: 12px;
  box-shadow:
    0 30px 60px -20px rgba(20,30,80,.3),
    0 10px 30px -15px rgba(20,30,80,.2),
    inset 0 0 0 2px rgba(255,255,255,.06);
}
.phone-screen{
  width:100%; height:100%; background:#fff; border-radius: 28px;
  overflow: hidden; position:relative;
  display:flex; flex-direction:column;
}
.phone-notch{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width: 80px; height: 18px; background:#0a0e1a; border-radius: 12px; z-index: 5;
}
.phone-header{
  padding: 28px 18px 14px; border-bottom: 1px solid var(--line-2);
  display:flex; align-items:center; gap: 8px; font-size: 12px; color: var(--ink);
  font-weight: 600; font-family: var(--font-display);
}
.phone-header .logo-mini{
  width:22px; height:22px; border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  display:grid;place-items:center; color:#fff; font-size:11px; font-weight:700;
}
.phone-body{flex:1; padding: 16px; position: relative; overflow:hidden}

/* Phone screen states — toggle by data attribute */
.phone-state{
  position:absolute; inset:16px; opacity:0; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.phone-state.active{opacity:1; transform: translateY(0)}
.phone-state h5{font-family:var(--font-display);font-size:14px;font-weight:600;margin-bottom:8px;color:var(--ink)}
.phone-state p{font-size:11.5px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.ps-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius: 999px;
  background: var(--accent); color:#fff;
  font-size: 11px; font-weight: 600;
  animation: btnPulse 2s ease-in-out infinite;
}
@keyframes btnPulse{0%,100%{box-shadow: 0 0 0 0 rgba(44,71,230,.5)}50%{box-shadow: 0 0 0 8px rgba(44,71,230,0)}}

.phone-cam{
  margin-top: 12px;
  background: linear-gradient(135deg, #eef1ff, #f9faff);
  border: 1px dashed var(--accent); border-radius: 12px;
  height: 140px; position:relative; overflow:hidden;
  display:grid; place-items:center;
}
.phone-cam svg{width:48%;opacity:.8}
.phone-cam .scan-line{
  position:absolute;left:8%;right:8%;height:2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 10px var(--accent);
  border-radius: 2px;
  animation: scan 2s ease-in-out infinite;
}
.phone-cam .corner{position:absolute;width:14px;height:14px;border:2px solid var(--accent);}
.phone-cam .corner.tl{top:6px;left:6px;border-right:none;border-bottom:none}
.phone-cam .corner.tr{top:6px;right:6px;border-left:none;border-bottom:none}
.phone-cam .corner.bl{bottom:6px;left:6px;border-right:none;border-top:none}
.phone-cam .corner.br{bottom:6px;right:6px;border-left:none;border-top:none}

.phone-row{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; background: var(--bg-soft);
  border-radius: 8px; font-size: 11.5px; font-weight: 500;
  margin-top: 8px; border:1px solid var(--line-2);
}
.phone-row .ic{
  width:14px;height:14px;border-radius:50%; background:var(--success);
  display:grid;place-items:center; flex-shrink:0;
}
.phone-row .ic svg{width:8px;height:8px;color:#fff;stroke:#fff;stroke-width:3;fill:none}
.phone-row.spinning .ic{background:var(--accent); animation: spin 1.2s linear infinite}
.phone-row.spinning .ic::before{content:""; width:8px;height:8px; border:2px solid #fff; border-top-color:transparent; border-radius:50%}
.phone-row.spinning .ic svg{display:none}

.phone-progress{
  width:100%; height:4px; background:var(--line-2); border-radius:2px;
  overflow:hidden; margin-top:14px;
}
.phone-progress-bar{
  height:100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  animation: progress 4s linear infinite;
}
@keyframes progress{
  0%{width:0}
  100%{width:100%}
}
.phone-success{
  margin: 24px auto;
  width: 80px; height:80px; border-radius:50%;
  background: var(--success); display:grid; place-items:center;
  box-shadow: 0 0 0 0 rgba(24,169,87,.4);
  animation: successPop .6s cubic-bezier(.2,.7,.2,1), pulseGreen 2s ease-in-out infinite .6s;
}
@keyframes successPop{0%{transform:scale(0)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes pulseGreen{0%,100%{box-shadow:0 0 0 0 rgba(24,169,87,.4)}50%{box-shadow:0 0 0 16px rgba(24,169,87,0)}}
.phone-success svg{width:40px;height:40px;color:#fff;stroke:#fff;stroke-width:3.5;fill:none}

/* PERSONAS — animated quote mark */
.persona{position:relative}
.persona-mark{
  position:absolute; top: 18px; right: 22px;
  font-family: var(--font-display); font-size: 80px; font-weight: 700;
  line-height: 1; color: var(--accent-soft);
  pointer-events:none; transition: all .4s ease;
}
.persona:hover .persona-mark{color: var(--accent); opacity:.15; transform: scale(1.1) rotate(-4deg)}

/* CTA — animated dotted globe */
.cta-globe{
  position:absolute; right: -100px; top: 50%; transform: translateY(-50%);
  width: 380px; height: 380px; opacity: .4; pointer-events:none;
}
.cta-globe svg{width:100%;height:100%;animation: spin 80s linear infinite; transform-origin: center}
@media (max-width:760px){.cta-globe{display:none}}

/* Section divider — animated wave */
.divider-wave{height: 80px; width: 100%; position: relative; overflow: hidden}
.divider-wave svg{width: 200%; height: 100%; display:block}
.divider-wave path{animation: waveMove 12s linear infinite}
@keyframes waveMove{from{transform: translateX(0)}to{transform: translateX(-50%)}}

/* @media (prefers-reduced-motion: reduce) handled below */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}

@media (max-width: 880px){
  .nav{
    align-items: center;
  }
}

@media (max-width: 640px){
  section{
    padding: clamp(48px, 12vw, 72px) 0;
  }

  .btn{
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }

  .hero-cta{
    flex-direction: column;
    align-items: stretch;
  }

  .hero-cta .btn{
    width: 100%;
    justify-content: center;
  }

  .badge-row{
    max-width: 100%;
    white-space: normal;
    line-height: 1.4;
  }

  .cost-ticker{
    gap: 14px;
  }

  .whatwedo-grid,
  .comp-wrap-3col,
  .flow-grid{
    gap: 28px;
  }

  .personas-grid,
  .diff-grid{
    grid-template-columns: 1fr;
  }

  .whatwedo-dashboard,
  .phone-mock,
  .shield-stage{
    max-width: 100%;
  }

  .phone-mock{
    max-width: 280px;
  }

  .faq-q{
    gap: 14px;
  }

  .faq-a{
    padding-right: 0;
  }

  .cta-card .hero-cta{
    align-items: stretch;
  }
}