/* ============ HERO ============ */
.hero{
  padding:calc(var(--header-h) + 56px) 0 70px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, var(--blue-tint), transparent 60%);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:50px;
  align-items:center;
}
.hero-copy h1{
  font-size:clamp(2.1rem, 4.6vw, 3.6rem);
  line-height:1.15;
  margin-bottom:20px;
  letter-spacing:0.2px;
}
.hero-copy h1 .hl{ color:var(--blue); }
.hero-copy p.lead{
  font-size:1.12rem;
  color:var(--slate);
  max-width:560px;
  margin-bottom:32px;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; }

.hero-trustbar{
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.hero-trustbar .t-item{ display:flex; flex-direction:column; }
.hero-trustbar .t-item b{ font-family:var(--font-head); font-size:1.3rem; color:var(--ink); }
.hero-trustbar .t-item span{ font-size:0.78rem; color:var(--slate-light); text-transform:uppercase; letter-spacing:0.5px; }

/* ============ HERO VISUAL — Multi-card vertical scroll carousel ============ */
/* ============ HERO VISUAL — Horizontal KYC Card Slider ============ */
.hero-visual{
  position:relative;
  width:100%;
  overflow:hidden;
}

/* Left/right edge fade masks — creates premium "infinite" feel */
.kyc-slider{
  width:100%;
  overflow:hidden;
  position:relative;
  -webkit-mask:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

/* Track: flexbox row, slides right-to-left */
.kyc-slider-track{
  display:flex;
  flex-direction:row;
  gap:18px;
  width:max-content;
  animation:kyc-slide 30s linear infinite;
}
.kyc-slider-track:hover{ animation-play-state:paused; }

@keyframes kyc-slide{
  0%  { transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* ============ BASE CARD SHELL ============ */
.kyc-card{
  width:300px;
  flex-shrink:0;
  background:#FFFFFF;
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  position:relative;
  overflow:hidden;
  transition:border-color .3s ease, transform .3s ease;
  cursor:default;
}
.kyc-card:hover{
  border-color:var(--card-accent, var(--blue));
  transform:translateY(-4px);
}

/* Left accent strip — colour per theme */
.kyc-card::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0; width:3px;
  background:var(--card-accent, var(--blue));
  border-radius:3px 0 0 3px;
}

/* Forensic dot-grid in top-right corner */
.kyc-card::after{
  content:'';
  position:absolute;
  top:0; right:0; width:80px; height:80px;
  background-image:radial-gradient(circle, var(--line) 1px, transparent 1px);
  background-size:9px 9px;
  opacity:0.5;
  -webkit-mask:radial-gradient(circle at top right, black, transparent 65%);
  mask:radial-gradient(circle at top right, black, transparent 65%);
  pointer-events:none;
}

/* ============ CARD HEADER ============ */
.kcard-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:14px;
  position:relative;
  z-index:2;
}
.kcard-id{
  display:flex;
  align-items:center;
  gap:10px;
}
.kcard-icon{
  width:38px; height:38px;
  border-radius:var(--radius-sm);
  background:var(--card-icon-bg, var(--blue-tint));
  border:1.5px solid var(--card-icon-border, var(--line-strong));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:background .3s ease, transform .3s ease;
}
.kyc-card:hover .kcard-icon{
  background:var(--card-accent, var(--blue));
  transform:scale(1.08) rotate(-3deg);
}
.kcard-icon svg{ width:17px; height:17px; color:var(--card-icon-color, var(--blue)); transition:color .3s ease; }
.kyc-card:hover .kcard-icon svg{ color:#fff; }
.kcard-name{ font-weight:700; font-size:0.88rem; color:var(--ink); display:block; }
.kcard-sub{ font-size:0.68rem; color:var(--slate-light); text-transform:uppercase; letter-spacing:0.5px; display:block; margin-top:2px; }

/* Status badge */
.kcard-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;
  padding:4px 9px; border-radius:20px; flex-shrink:0;
}
.kcard-badge.ok{
  background:var(--green-soft); color:var(--green); border:1px solid #BEE8D6;
}
.kcard-badge.ok svg{ width:9px; height:9px; }

/* ============ CARD BODY — field rows ============ */
.kcard-body{ display:flex; flex-direction:column; gap:0; position:relative; z-index:2; }
.kcard-row{
  display:flex; align-items:center; justify-content:space-between;
  font-size:0.79rem; padding:7px 0; border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
.kcard-row:last-child{ border-bottom:none; }
.kr-k{ color:var(--slate-light); }
.kr-v{ font-weight:600; color:var(--ink); display:flex; align-items:center; gap:4px; }
.kr-v.ok{ color:var(--green); }
.kr-v.ok svg{ width:11px; height:11px; }
.kr-v.mono{
  font-family:'Courier New', monospace; font-size:0.74rem; letter-spacing:0.4px;
  color:var(--blue-deep); background:var(--blue-tint); padding:2px 6px; border-radius:4px;
}

/* ============ CARD FOOTER ============ */
.kcard-foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:12px; padding-top:12px;
  border-top:1px dashed var(--line-strong);
  position:relative; z-index:2;
}
.kf-time{
  font-size:0.7rem; color:var(--slate-light);
  display:flex; align-items:center; gap:4px;
}
.kf-time svg{ width:11px; height:11px; color:var(--green); }
.kf-score{ font-family:var(--font-head); font-size:0.9rem; color:var(--green); }

/* ============ THEME VARIABLES ============ */
.kyc-card.theme-aadhaar  { --card-accent:#1550FF; --card-icon-bg:#EEF2FF; --card-icon-border:#C7D2FE; --card-icon-color:#1550FF; }
.kyc-card.theme-pan      { --card-accent:#7C3AED; --card-icon-bg:#F5F3FF; --card-icon-border:#DDD6FE; --card-icon-color:#7C3AED; }
.kyc-card.theme-bank     { --card-accent:#00A876; --card-icon-bg:#E5F7F0; --card-icon-border:#BEE8D6; --card-icon-color:#00A876; }
.kyc-card.theme-liveness { --card-accent:#D97706; --card-icon-bg:#FFFBEB; --card-icon-border:#FDE68A; --card-icon-color:#D97706; }
.kyc-card.theme-face     { --card-accent:#DB2777; --card-icon-bg:#FDF2F8; --card-icon-border:#FBCFE8; --card-icon-color:#DB2777; }

/* ============================================================
   CARD INTERNAL ANIMATIONS (each card its own signature FX)
   ============================================================ */

/* ── CARD 1 (Aadhaar) — Document scanner horizontal sweep ── */
.kcard-scanline{
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, transparent 0%, var(--blue) 30%, #7AFFEF 50%, var(--blue) 70%, transparent 100%);
  opacity:0;
  z-index:10;
  pointer-events:none;
  animation:aadhaar-scan 2.8s ease-in-out infinite;
}
@keyframes aadhaar-scan{
  0%   { top:0%;   opacity:0; }
  5%   { opacity:1; }
  48%  { top:100%; opacity:1; }
  55%  { top:100%; opacity:0; }
  56%  { top:0%;   opacity:0; }
  100% { top:0%;   opacity:0; }
}

/* ── CARD 2 (PAN) — Matrix binary rain columns ── */
.kcard-matrix{
  position:absolute;
  top:0; right:6px;
  display:flex; gap:8px;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
  height:100%;
}
.kcard-matrix span{
  font-family:'Courier New', monospace;
  font-size:0.62rem;
  color:#7C3AED;
  opacity:0;
  writing-mode:vertical-lr;
  letter-spacing:4px;
  animation:matrix-fall 3s linear infinite;
}
.kcard-matrix span:nth-child(1){ animation-delay:0s;    opacity:0.14; }
.kcard-matrix span:nth-child(2){ animation-delay:0.4s;  opacity:0.1;  }
.kcard-matrix span:nth-child(3){ animation-delay:0.9s;  opacity:0.18; }
.kcard-matrix span:nth-child(4){ animation-delay:1.3s;  opacity:0.08; }
.kcard-matrix span:nth-child(5){ animation-delay:1.8s;  opacity:0.14; }
.kcard-matrix span:nth-child(6){ animation-delay:0.2s;  opacity:0.1;  }
.kcard-matrix span:nth-child(7){ animation-delay:0.7s;  opacity:0.16; }
.kcard-matrix span:nth-child(8){ animation-delay:2.1s;  opacity:0.09; }
.kcard-matrix span:nth-child(9){ animation-delay:1.5s;  opacity:0.12; }
.kcard-matrix span:nth-child(10){ animation-delay:2.4s; opacity:0.07; }
.kcard-matrix span:nth-child(11){ animation-delay:0.6s; opacity:0.15; }
.kcard-matrix span:nth-child(12){ animation-delay:1.1s; opacity:0.09; }
.kcard-matrix span:nth-child(13){ animation-delay:1.9s; opacity:0.13; }
.kcard-matrix span:nth-child(14){ animation-delay:2.6s; opacity:0.07; }
.kcard-matrix span:nth-child(15){ animation-delay:0.3s; opacity:0.11; }
@keyframes matrix-fall{
  0%   { transform:translateY(-100%); }
  100% { transform:translateY(150%);  }
}

/* ── CARD 3 (Bank) — Decrypt shimmer across each data row ── */
.decrypt-row::after{
  content:'';
  position:absolute;
  top:0; left:-100%; bottom:0;
  width:60%;
  background:linear-gradient(90deg, transparent, rgba(0,168,118,0.12), transparent);
  animation:decrypt-sweep 3.5s ease-in-out infinite;
}
.decrypt-row:nth-child(1)::after{ animation-delay:0s;    }
.decrypt-row:nth-child(2)::after{ animation-delay:0.5s;  }
.decrypt-row:nth-child(3)::after{ animation-delay:1.0s;  }
.decrypt-row:nth-child(4)::after{ animation-delay:1.5s;  }
@keyframes decrypt-sweep{
  0%   { left:-60%; }
  60%  { left:120%; }
  100% { left:120%; }
}

/* ── CARD 4 (Liveness) — Sonar / face-scan rings ── */
.kcard-sonar{
  position:relative;
  width:100%; height:100px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:8px;
  z-index:2;
}
.sonar-ring{
  position:absolute;
  border-radius:50%;
  border:1.5px solid var(--card-accent, #D97706);
  animation:sonar-pulse 2.4s ease-out infinite;
  opacity:0;
}
.sonar-ring.r1{ width:40px;  height:40px;  animation-delay:0s;    }
.sonar-ring.r2{ width:66px;  height:66px;  animation-delay:0.55s; }
.sonar-ring.r3{ width:92px;  height:92px;  animation-delay:1.1s;  }
@keyframes sonar-pulse{
  0%  { transform:scale(0.6); opacity:0.8; }
  70% { transform:scale(1);   opacity:0;   }
  100%{ transform:scale(1);   opacity:0;   }
}
.sonar-core{
  width:36px; height:36px;
  border-radius:50%;
  background:var(--card-icon-bg, #FFFBEB);
  border:1.5px solid var(--card-accent, #D97706);
  display:flex; align-items:center; justify-content:center;
  z-index:2; position:relative;
}
.sonar-core svg{ width:18px; height:18px; color:var(--card-accent, #D97706); }

/* ── CARD 5 (Face) — Targeting / forensic bracket corners ── */
.kcard-target{
  position:relative;
  width:100%; height:90px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:8px;
  z-index:2;
}
.target-bracket{
  position:absolute;
  width:18px; height:18px;
  border-color:var(--card-accent, #DB2777);
  border-style:solid;
  animation:bracket-pulse 2s ease-in-out infinite alternate;
}
.target-bracket.tl{ top:6px;  left:20px;  border-width:2px 0 0 2px; }
.target-bracket.tr{ top:6px;  right:20px; border-width:2px 2px 0 0; }
.target-bracket.bl{ bottom:6px; left:20px;  border-width:0 0 2px 2px; }
.target-bracket.br{ bottom:6px; right:20px; border-width:0 2px 2px 0; }
@keyframes bracket-pulse{
  0%  { opacity:0.4; transform:scale(0.88); }
  100%{ opacity:1;   transform:scale(1);    }
}
.target-cross{
  position:absolute;
  background:var(--card-accent, #DB2777);
  opacity:0.25;
  animation:crosshair-blink 1.6s ease-in-out infinite alternate;
}
.target-cross.h{ width:56px; height:1px; }
.target-cross.v{ width:1px; height:56px; }
@keyframes crosshair-blink{ 0%{opacity:0.12;} 100%{opacity:0.35;} }
.target-face{
  width:40px; height:40px;
  border-radius:50%;
  background:var(--card-icon-bg, #FDF2F8);
  border:2px solid var(--card-accent, #DB2777);
  display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.target-face svg{ width:20px; height:20px; color:var(--card-accent, #DB2777); }

/* ============ FLOAT CHIPS (desktop only) ============ */
.float-chip{
  position:absolute;
  background:var(--card);
  border:1.5px solid var(--line-strong);
  border-radius:var(--radius);
  padding:10px 14px;
  display:flex; align-items:center; gap:8px;
  font-size:0.8rem; font-weight:700;
  animation:float-y 4s ease-in-out infinite;
  z-index:10;
  white-space:nowrap;
}
.float-chip svg{ width:15px; height:15px; color:var(--blue); }
.fc-1{ top:-14px; left:5%; animation-delay:0s; }
.fc-2{ bottom:6px; right:5%; animation-delay:1.6s; }
@keyframes float-y{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; margin-bottom:24px; }
  .fc-1, .fc-2{ display:none; }
  .kyc-card{ width:260px; }
}
@media (max-width:560px){
  .hero-trustbar{ gap:18px; }
  .hero{ padding-top:calc(var(--header-h) + 34px); }
  .kyc-card{ width:230px; padding:16px; }
}



/* ============ LOGO STRIP ============ */
.logo-strip{
  padding:34px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--card);
  overflow:hidden;
}
.logo-strip p{
  text-align:center; font-size:0.78rem; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--slate-light); margin-bottom:22px; font-weight:600;
}
.logo-track{
  display:flex; gap:60px; align-items:center;
  width:max-content;
  animation:scroll-left 26s linear infinite;
}
.logo-track span{
  font-family:var(--font-head); font-size:1.1rem; color:var(--slate-light); opacity:0.6; white-space:nowrap;
}
@keyframes scroll-left{
  0%  { transform:translateX(0);    }
  100%{ transform:translateX(-50%); }
}

/* ============ SERVICES GRID ============ */
.services-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.service-card{
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:26px 22px;
  position:relative;
  overflow:hidden;
  transition:border-color .25s ease, transform .25s ease;
}
.service-card:hover{ border-color:var(--blue); transform:translateY(-3px); }
.service-card .icon-box{
  width:48px; height:48px;
  border:1.5px solid var(--line-strong);
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  background:var(--blue-tint);
  transition:background .25s ease, border-color .25s ease;
}
.service-card .icon-box svg{ width:22px; height:22px; color:var(--blue); transition:color .25s ease; }
.service-card:hover .icon-box{ background:var(--blue); border-color:var(--blue); }
.service-card:hover .icon-box svg{ color:#fff; }
.service-card h3{ font-family:var(--font-body); font-weight:700; font-size:1.02rem; margin-bottom:8px; }
.service-card p{ font-size:0.86rem; color:var(--slate); line-height:1.55; margin-bottom:14px; }
.service-card .tag{
  font-size:0.72rem; font-weight:700; color:var(--blue);
  text-transform:uppercase; letter-spacing:0.5px;
  display:inline-flex; align-items:center; gap:5px;
}
.service-card .tag svg{ width:12px; height:12px; transition:transform .2s ease; }
.service-card:hover .tag svg{ transform:translateX(4px); }

@media (max-width:1024px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .services-grid{ grid-template-columns:1fr; } }

/* ============ HOW IT WORKS ============ */
.process-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  position:relative;
}
.process-step{ padding:0 22px 0 0; position:relative; }
.process-step:not(:last-child)::after{
  content:'';
  position:absolute; top:26px; right:0; width:calc(100% - 60px); height:1.5px;
  background:repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 14px);
}
.process-num{
  font-family:var(--font-head); font-size:0.85rem; color:var(--blue);
  width:52px; height:52px;
  border:1.5px solid var(--blue);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; background:var(--card); position:relative; z-index:2;
}
.process-step h3{ font-size:1.05rem; margin-bottom:10px; }
.process-step p{ font-size:0.88rem; color:var(--slate); }

@media (max-width:900px){
  .process-row{ grid-template-columns:1fr; gap:34px; }
  .process-step:not(:last-child)::after{ display:none; }
}

/* ============ WHY / STATS ============ */
.why-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.why-list{ display:flex; flex-direction:column; gap:22px; }
.why-item{ display:flex; gap:16px; }
.why-item .ico{
  width:40px; height:40px;
  border:1.5px solid var(--line-strong);
  border-radius:var(--radius-sm);
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-tint);
}
.why-item .ico svg{ width:18px; height:18px; color:var(--blue); }
.why-item h4{ font-size:1rem; margin-bottom:5px; }
.why-item p{ font-size:0.88rem; color:var(--slate); }

.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.stat-card{
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  padding:26px 20px; text-align:center;
}
.stat-card b{ font-family:var(--font-head); font-size:2.1rem; color:var(--blue); display:block; margin-bottom:6px; }
.stat-card span{ font-size:0.8rem; color:var(--slate); }

@media (max-width:900px){ .why-wrap{ grid-template-columns:1fr; } }

/* ============ TESTIMONIALS ============ */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.testi-card{
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  background:var(--card); padding:26px;
  transition:border-color .25s ease;
}
.testi-card:hover{ border-color:var(--blue); }
.testi-stars{ display:flex; gap:3px; margin-bottom:16px; }
.testi-stars svg{ width:15px; height:15px; color:#F5A623; }
.testi-card p.quote{ font-size:0.92rem; color:var(--ink); line-height:1.65; margin-bottom:20px; }
.testi-who{ display:flex; align-items:center; gap:12px; }
.testi-avatar{
  width:40px; height:40px;
  border:1.5px solid var(--line-strong);
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-size:0.85rem; color:var(--blue);
  background:var(--blue-tint);
}
.testi-who b{ display:block; font-size:0.88rem; }
.testi-who span{ font-size:0.76rem; color:var(--slate-light); }

@media (max-width:900px){ .testi-grid{ grid-template-columns:1fr; } }

/* ============ FINAL CTA BAND ============ */
.cta-band{
  background:var(--ink);
  padding:80px 0;
  position:relative;
  overflow:hidden;
  text-align:center;
}
.cta-band::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 700px 300px at 50% 0%, rgba(21,80,255,0.28), transparent 70%);
}
.cta-band::after{
  content:'';
  position:absolute;
  bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--blue), var(--green), var(--blue));
  background-size:200% 100%;
  animation:foot-line 6s linear infinite;
}
@keyframes foot-line{ 0%{ background-position:0% 0;} 100%{ background-position:200% 0;} }
.cta-band h2{ color:#fff; font-size:clamp(1.7rem,3.6vw,2.5rem); margin-bottom:14px; position:relative; }
.cta-band p{ color:#9FB0D1; font-size:1.05rem; margin-bottom:32px; position:relative; }
.cta-band .hero-cta{ justify-content:center; position:relative; }
.cta-band .btn-outline{ border-color:rgba(255,255,255,0.3); color:#fff; }
.cta-band .btn-outline:hover{ border-color:var(--blue); background:rgba(21,80,255,0.18); }