@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Manrope:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600&display=swap");

:root {
  /* ── 3-Color Palette ── */
  --yellow: #F6AA1C;
  /* PRIMARY — buttons, highlights, text accents, CTA */
  --orange: #BC3908;
  /* SECONDARY — borders, underlines, hover lines */
  --dark-red: #941B0C;
  --light-red: #C32F27;

  /* ICON ONLY — icon fills, dots, small indicators */

  /* ── Semantic tokens (mapped to palette) ── */
  --neon: #F6AA1C;
  /* primary accent = yellow */
  --neon-hover: #e09b10;
  /* yellow darkened for hover */
  --neon-dim: rgba(246, 170, 28, 0.10);
  /* yellow subtle bg tint */
  --neon-glow: 0 0 18px rgba(246, 170, 28, 0.25), 0 0 36px rgba(188, 57, 8, 0.12);
  --bg-primary: #080a0e;
  --bg-secondary: #0d1117;
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-card-hover: rgba(148, 27, 12, 0.12);
  /* dark-red very subtle hover */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.55);
  --text-muted: rgba(255, 255, 255, 0.3);
  --border: rgba(255, 255, 255, 0.06);
  --border-neon: rgba(188, 57, 8, 0.40);
  /* orange border */
  --glass: rgba(13, 17, 23, 0.8);
  --radius: 16px;
  --radius-lg: 24px;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: "Inter", sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
}


/* ─── PAGE LOADER ─── */
#pageLoader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0a0602;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#pageLoader.hide {
  opacity: 0;
  visibility: hidden;
}

.loader-gif {
  width: 160px;
  height: auto;
}

/* ─── CUSTOM CURSOR ─── */
.cursor,
.cursor-follower {
  display: none;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: #BC3908;
  border-radius: 2px;
}

/* ─── NOISE OVERLAY ─── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
}

/* ─── GRID BACKGROUND ─── */
.grid-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(12, 4, 2, 0.03) 1px,
      transparent 1px),
    linear-gradient(90deg, rgba(12, 4, 2, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* ─── NAV ─── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(8, 10, 14, 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: all 0.3s ease;
}

nav.scrolled {
  padding: 14px 60px;
}

.nav-logo {
  font-family: "Manrope", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text-primary);
}

.nav-logo span {
  color: var(--neon);
}

.nav-logo-img {
  height: 55px;
  width: auto;
  display: block;
  object-fit: contain;
}

.footer-logo-img {
  height: 55px;
  width: auto;
  display: block;
  object-fit: contain;
  margin-bottom: 16px;
}

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: color 0.3s;
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--neon);
  transition: width 0.3s ease;
}

.nav-links a:hover {
  color: var(--neon);
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-nav {
  padding: 10px 24px;
  border: 1px solid var(--border-neon);
  background: transparent;
  color: var(--light-red);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  font-family: "Inter", sans-serif;
}

.btn-nav:hover {
  box-shadow: var(--neon-glow);
  transform: translateY(-1px);
}

.btn-primary-nav {
  padding: 10px 24px;
  border: 1px solid var(--border-neon);
  background: transparent;
  color: var(--light-red);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  font-family: "Inter", sans-serif;
}

.btn-primary-nav:hover {
  box-shadow: var(--neon-glow);
  transform: translateY(-1px);
}

/* ─── HERO ─── */
.hero {
  min-height: 100vh;
  height: 100vh;
  max-height: 960px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow: hidden;
  padding: 100px 60px 60px;
  gap: 40px;
}

.hero-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  animation: pulse-orb 6s ease-in-out infinite;
}

/* Replace existing orb styles */
.orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(188, 57, 8, 0.6) 0%, rgba(148, 27, 12, 0.3) 40%, transparent 70%);
  top: -150px;
  left: -100px;
  animation-delay: 0s;
}

.orb-2 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(246, 170, 28, 0.35) 0%, rgba(188, 57, 8, 0.2) 50%, transparent 70%);
  bottom: 80px;
  left: 200px;
  animation-delay: 2s;
}

.orb-3 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(195, 47, 39, 0.5) 0%, transparent 70%);
  top: 150px;
  left: 350px;
  animation-delay: 4s;
}

@keyframes pulse-orb {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.15;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.25;
  }
}

.hero-content {
  width: 100%;
  max-width: 600px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(188, 57, 8, 0.5);
  border-radius: 100px;
  background: rgba(188, 57, 8, 0.12);
  font-size: 12px;
  font-weight: 600;
  color: #F6AA1C;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 32px;
  animation: fadeInUp 0.8s ease forwards;
}

.hero-badge .dot {
  width: 6px;
  height: 6px;
  background: #BC3908;
  border-radius: 50%;
  box-shadow: 0 0 6px #BC3908;
  animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.hero-title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 24px;
  animation: fadeInUp 0.8s ease 0.1s forwards;
  opacity: 0;
}

.hero-title .highlight {
  color: var(--neon);
  text-shadow: 0 0 30px rgba(246, 170, 28, 0.5), 0 0 60px rgba(188, 57, 8, 0.25);
}

.hero-title .dim {
  color: var(--text-secondary);
}

.hero-sub {
  font-size: 20px;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 48px;
  animation: fadeInUp 0.8s ease 0.2s forwards;
  opacity: 0;
}

.hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 56px;
  animation: fadeInUp 0.8s ease 0.3s forwards;
  opacity: 0;
}

.btn-hero {
  padding: 16px 36px;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-neon);
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
  font-family: "Inter", sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-hero:hover {
  border-color: var(--border-neon);
  color: var(--light-red);
}

.btn-ghost {
  padding: 16px 36px;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-neon);
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
  font-family: "Inter", sans-serif;
}

.btn-ghost:hover {
  border-color: var(--border-neon);
  color: var(--light-red);
}

/* ─── HERO VISUAL ─── */
.hero-visual {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
}

.phone-mockup-container {
  position: relative;
  width: 340px;
  height: 600px;
  transform-style: preserve-3d;
  animation: float3d 6s ease-in-out infinite;
}

@keyframes float3d {

  0%,
  100% {
    transform: translateY(0) rotateY(-8deg) rotateX(5deg);
  }

  50% {
    transform: translateY(-20px) rotateY(-12deg) rotateX(3deg);
  }
}

.phone-main {
  position: absolute;
  width: 220px;
  height: 440px;
  top: 50px;
  left: 50px;
  background: linear-gradient(145deg, #1a1f2e, #0d1117);
  border-radius: 32px;
  border: 1px solid rgba(148, 27, 12, 0.2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 40px 80px rgba(0, 0, 0, 0.8), 0 0 40px rgba(12, 4, 2, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  z-index: 3;
}

.phone-secondary {
  position: absolute;
  width: 180px;
  height: 360px;
  top: 150px;
  right: 0;
  background: linear-gradient(145deg, #141820, #0a0d13);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  z-index: 2;
  overflow: hidden;
}

.phone-screen {
  padding: 20px 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.phone-notch {
  width: 60px;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  margin: 0 auto 12px;
}

.phone-balance-label {
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.phone-balance {
  font-family: "Manrope", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.phone-balance span {
  color: var(--neon);
  font-size: 14px;
}

.phone-chart {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.chart-svg {
  width: 100%;
  height: 100%;
}

.phone-card {
  background: linear-gradient(135deg,
      rgba(148, 27, 12, 0.15),
      rgba(12, 4, 2, 0.05));
  border: 1px solid rgba(148, 27, 12, 0.2);
  border-radius: 12px;
  padding: 12px;
}

.phone-card-label {
  font-size: 8px;
  color: var(--neon);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.phone-card-value {
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  margin-top: 4px;
}

.phone-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(12, 4, 2, 0.12);
  border: 1px solid rgba(148, 27, 12, 0.25);
  border-radius: 20px;
  font-size: 9px;
  color: var(--neon);
  font-weight: 600;
  margin-bottom: 8px;
}

.phone-pill .arrow {
  font-size: 12px;
}

.orbit-ring {
  position: absolute;
  border: 1px dashed rgba(148, 27, 12, 0.15);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: spin 20s linear infinite;
}

.orbit-ring-1 {
  width: 500px;
  height: 500px;
}

.orbit-ring-2 {
  width: 700px;
  height: 700px;
  animation-direction: reverse;
  animation-duration: 30s;
}

@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.orbit-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--neon);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--neon);
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
}

/* Floating cards around phone */
.float-card {
  position: absolute;
  background: rgba(13, 17, 23, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 20px;
  z-index: 10;
  animation: floatCard 4s ease-in-out infinite;
}

.float-card-1 {
  top: 12%;
  left: -10px;
  animation-delay: 0s;
  border-color: rgba(148, 27, 12, 0.2);
}

.float-card-2 {
  bottom: 14%;
  right: 10px;
  animation-delay: 1.5s;
}

@keyframes floatCard {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.float-card-icon {
  font-size: 24px;
  margin-bottom: 6px;
}

.float-card-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.float-card-val {
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  color: var(--neon);
  font-weight: 700;
}

.float-card-change {
  font-size: 11px;
  color: #00ff88;
  margin-top: 2px;
}

/* ─── BHARAT CONNECT ─── */
.bharat-section {
  padding: 120px 60px;
  position: relative;
  overflow: hidden;
  background: transparent;

}

/* REPLACE existing .bharat-inner */
.bharat-inner {
  position: relative;
  background: linear-gradient(135deg,
      rgba(148, 27, 12, 0.03) 0%,
      rgba(8, 10, 14, 0.98) 60%,
      rgba(188, 57, 8, 0.02) 100%);
  border: 1px solid rgba(188, 57, 8, 0.18);
  border-radius: 32px;
  padding: 80px 60px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
}

/* REPLACE existing .bharat-inner::before */
.bharat-inner::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle,
      rgba(188, 57, 8, 0.04) 0%,
      transparent 65%);
  pointer-events: none;
}

/* REPLACE existing .section-tag */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(188, 57, 8, 0.55);
  border-radius: 100px;
  font-size: 11px;
  color: #F6AA1C;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 20px;
  background: rgba(188, 57, 8, 0.10);
}

.section-title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 20px;
}

/* REPLACE existing .section-title .hl */
.section-title .hl {
  color: #F6AA1C;
  text-shadow: 0 0 25px rgba(246, 170, 28, 0.45), 0 0 50px rgba(188, 57, 8, 0.2);
}


.svc-main-title .hl {
  color: #F6AA1C;
  text-shadow: 0 0 25px rgba(246, 170, 28, 0.45), 0 0 50px rgba(188, 57, 8, 0.2);
}


.section-desc {
  font-size: 20px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 36px;
  text-align: justify;
}

.bharat-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 36px;
}

.bharat-feat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.3s;
}

.bharat-feat:hover {
  border-color: var(--border-neon);
  background: var(--neon-dim);
}


/* new css for bharat connect section  */
/* ═══════════════════════════════════════════ */
/* ─── BC HUB LOGO + LOGOS BAR ─── */
/* ═══════════════════════════════════════════ */

/* Hub core logo — Bharat Connect image centered */
.bc-hub-logo-img {
  width: 100px;
  height: auto;
  max-height: 80px;
  object-fit: contain;
  display: block;
  filter: brightness(1.1) drop-shadow(0 0 8px rgba(188, 57, 8, 0.35));
}

/* Logos bar — positioned at bottom center of bc-viz-root */
.bc-logos-bar {
  position: absolute;
  bottom: -52px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(8, 10, 14, 0.92);
  border: 1px solid rgba(148, 27, 12, 0.25);
  border-radius: 16px;
  padding: 10px 20px;
  z-index: 20;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}

.bc-logos-bar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}

/* Bharat Connect logo in bar */
.bc-bar-logo-bc {
  height: 30px;
  width: 100px;
  object-fit: contain;
  filter: brightness(1.15) drop-shadow(0 0 6px rgba(188, 57, 8, 0.3));
  opacity: 0.95;
}

/* NPCI logo in bar */
.bc-bar-logo-npci {
  height: 36px;
  width: 100px;
  object-fit: cover;
  filter: brightness(1.1) contrast(1.05);
  opacity: 0.9;
}

/* Connector between logos */
.bc-logos-bar-connector {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
}

.bc-bar-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #BC3908;
  box-shadow: 0 0 6px rgba(188, 57, 8, 0.7);
  display: inline-block;
  animation: bar-dot-pulse 2s ease-in-out infinite;
}

.bc-bar-dot:last-child {
  animation-delay: 0.5s;
}

.bc-bar-line {
  width: 28px;
  height: 1.5px;
  background: linear-gradient(90deg, #BC3908, rgba(188, 57, 8, 0.3), #BC3908);
  display: inline-block;
  position: relative;
}

.bc-bar-line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: #F6AA1C;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(246, 170, 28, 0.8);
  animation: bar-packet-travel 1.8s linear infinite;
}

@keyframes bar-dot-pulse {

  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(188, 57, 8, 0.9);
  }
}

@keyframes bar-packet-travel {
  0% {
    left: 0;
    opacity: 1;
  }

  100% {
    left: calc(100% - 6px);
    opacity: 0.3;
  }
}

/* ─── BHARAT CONNECT HUB LOGO ─── */
.bc-hub-logo-img {
  width: 70px;
  height: auto;
  object-fit: contain;
  filter: brightness(1.1);
  margin-bottom: 2px;
}

/* ─── LOGOS STRIP (NPCI + Bharat Connect) ─── */
.bc-logos-strip {
  position: absolute;
  bottom: -72px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(8, 10, 14, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 18px;
  white-space: nowrap;
  z-index: 10;
  backdrop-filter: blur(10px);
}

.bc-logos-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bc-strip-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
  filter: brightness(1.15) contrast(1.05);
  opacity: 0.9;
}

.bc-logos-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.15);
}

.bc-logo-text-fallback {
  font-size: 11px;
  font-weight: 700;
  font-family: "Manrope", sans-serif;
  color: #F6AA1C;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* ─── BC FEATURE LIST SIZE ─── */
.bc-feature-row {
  font-size: 16px;
}

.bc-feature-star {
  font-size: 16px;
}

/* new css for bharat connect section  */


.bharat-feat-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: var(--neon-dim);
  border: 1px solid var(--border-neon);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.bharat-feat-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.bharat-feat-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Bharat Connect Visual */
.bharat-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 460px;
}

@media (max-width: 768px) {
  .bharat-visual {
    min-height: auto;
    width: 100%;
  }
}

.bc-center {
  position: absolute;
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, var(--neon), rgba(188, 57, 8, 0.5));
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #000;
  text-align: center;
  line-height: 1.3;
  box-shadow: var(--neon-glow), 0 20px 40px rgba(0, 0, 0, 0.5);
  z-index: 5;
  animation: bc-pulse 3s ease-in-out infinite;
}

@keyframes bc-pulse {

  0%,
  100% {
    box-shadow: var(--neon-glow), 0 20px 40px rgba(0, 0, 0, 0.5);
  }

  50% {
    box-shadow: 0 0 40px rgba(188, 57, 8, 0.8), 0 0 80px rgba(148, 27, 12, 0.4),
      0 20px 40px rgba(0, 0, 0, 0.5);
  }
}

.bc-rings {
  position: absolute;
  width: 420px;
  height: 420px;
}

.bc-ring {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(12, 4, 2, 0.1);
  animation: bc-ring-pulse 3s ease-in-out infinite;
}

.bc-ring-1 {
  width: 180px;
  height: 180px;
  animation-delay: 0s;
}

.bc-ring-2 {
  width: 280px;
  height: 280px;
  animation-delay: 0.5s;
}

.bc-ring-3 {
  width: 380px;
  height: 380px;
  animation-delay: 1s;
}

@keyframes bc-ring-pulse {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.8;
  }
}

.bc-node {
  position: absolute;
  width: 56px;
  height: 56px;
  background: rgba(13, 17, 23, 0.95);
  border: 1px solid rgba(148, 27, 12, 0.25);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  top: 50%;
  left: 50%;
  z-index: 4;
  transition: all 0.3s;
}

.bc-node:hover {
  border-color: var(--neon);
  box-shadow: 0 0 20px rgba(148, 27, 12, 0.3);
}

.bc-node-1 {
  transform: translate(-50%, -50%) translate(0, -160px);
}

.bc-node-2 {
  transform: translate(-50%, -50%) translate(120px, -80px);
}

.bc-node-3 {
  transform: translate(-50%, -50%) translate(120px, 80px);
}

.bc-node-4 {
  transform: translate(-50%, -50%) translate(0, 160px);
}

.bc-node-5 {
  transform: translate(-50%, -50%) translate(-120px, 80px);
}

.bc-node-6 {
  transform: translate(-50%, -50%) translate(-120px, -80px);
}

.bc-line {
  position: absolute;
  background: linear-gradient(to right,
      transparent,
      rgba(148, 27, 12, 0.4),
      transparent);
  height: 1px;
  top: 50%;
  left: 50%;
  transform-origin: left center;
  z-index: 3;
  animation: bc-line-anim 3s ease-in-out infinite;
}

@keyframes bc-line-anim {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════
   SERVICES SECTION — PREMIUM REDESIGN
═══════════════════════════════════════════════════════════ */

/* ── Background ── */
/* ═══════════════════════════════════════════
   SERVICES SECTION — BHARAT CONNECT CARD STYLE
   ═══════════════════════════════════════════ */

.services-section {
  padding: 120px 60px;
  position: relative;
  background: transparent;
  overflow: visible;
}

.services-inner {
  position: relative;
  background: linear-gradient(135deg,
      rgba(148, 27, 12, 0.03) 0%,
      rgba(8, 10, 14, 0.98) 60%,
      rgba(188, 57, 8, 0.02) 100%);
  border: 1px solid rgba(188, 57, 8, 0.18);
  border-radius: 32px;
  padding: 80px 60px;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
}

/* subtle top-right ambient glow inside card */
.services-inner::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle,
      rgba(188, 57, 8, 0.04) 0%,
      transparent 65%);
  pointer-events: none;
}

/* keep bg ambient orbs inside the card boundary */
.services-inner .svc-bg-ambient {
  border-radius: 32px;
  overflow: hidden;
}

/* Remove the old background from .services-section since card handles it */
.services-section .svc-bg-ambient .svc-ambient-orb {
  opacity: 0.1;
}

/* ── More Services grid — enclosed card style ── */
.svc-secondary-grid {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 24px 20px;
}

/* ── Responsive ── */
@media (max-width: 992px) {
  .services-section {
    padding: 60px 24px;
  }

  .services-inner {
    padding: 48px 28px;
    border-radius: 24px;
  }
}

@media (max-width: 600px) {
  .services-section {
    padding: 40px 16px;
  }

  .services-inner {
    padding: 32px 20px;
    border-radius: 20px;
  }
}

.svc-bg-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.svc-ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.18;
}

.svc-orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #BC3908, transparent 70%);
  top: -100px;
  left: -150px;
  animation: svcOrbFloat 8s ease-in-out infinite;
}

.svc-orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(148, 27, 12, 0.6), transparent 70%);
  top: 40%;
  right: -100px;
  animation: svcOrbFloat 10s ease-in-out infinite reverse;
}

.svc-orb-3 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(246, 170, 28, 0.25), transparent 70%);
  bottom: 0;
  left: 30%;
  animation: svcOrbFloat 12s ease-in-out infinite 3s;
}

.svc-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 60px 60px;
}

@keyframes svcOrbFloat {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-30px) scale(1.08);
  }
}

/* ── Header ── */
.svc-header {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 64px;
}

.svc-header-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.svc-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F6AA1C;
  box-shadow: 0 0 8px #941B0C;
  animation: svcDotPulse 1.5s ease-in-out infinite;
}

@keyframes svcDotPulse {

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

  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.svc-main-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
}

.svc-main-desc {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.7;
  margin: 0;
}

/* ── Main Grid ── */
.svc-main-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto 60px;
}

/* ── Prime Card Base ── */
.svc-prime-card {
  position: relative;
  background: rgba(255, 255, 255, 0.033);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.svc-prime-card:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: rgba(255, 255, 255, 0.18);
}

.svc-prime-card.svc-featured {
  border-color: rgba(148, 27, 12, 0.3);
  box-shadow: 0 0 40px rgba(12, 4, 2, 0.08), 0 20px 60px rgba(0, 0, 0, 0.4);
}

.svc-prime-card.svc-featured:hover {
  box-shadow: 0 0 60px rgba(148, 27, 12, 0.18), 0 30px 80px rgba(0, 0, 0, 0.5);
}

/* Glow layer */
.svc-prime-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  border-radius: 20px;
}

.svc-prime-card:hover .svc-prime-glow {
  opacity: 1;
}

.svc-glow-red {
  background: radial-gradient(circle at 50% 0%, rgba(12, 4, 2, 0.12), transparent 60%);
}

.svc-glow-cyan {
  background: radial-gradient(circle at 50% 0%, rgba(188, 57, 8, 0.1), transparent 60%);
}

.svc-glow-green {
  background: radial-gradient(circle at 50% 0%, rgba(246, 170, 28, 0.08), transparent 60%);
}

.svc-prime-card.svc-fastag:hover {
  border-color: rgba(246, 170, 28, 0.3);
}

.svc-prime-card.svc-fastag .svc-prime-glow {
  background: radial-gradient(circle at 50% 0%, rgba(255, 184, 0, 0.1), transparent 60%);
}

/* Featured ribbon */
.svc-featured-ribbon {
  position: absolute;
  top: 14px;
  right: -24px;
  background: linear-gradient(135deg, #F6AA1C, #BC3908);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 5px 32px;
  transform: rotate(45deg);
  z-index: 10;
  box-shadow: 0 2px 8px rgba(148, 27, 12, 0.4);
}

/* Card top section */
.svc-prime-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 0;
  position: relative;
  z-index: 2;
}

/* Icon rings */
.svc-prime-icon-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.svc-prime-icon-ring::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  opacity: 0.4;
  animation: svcRingRotate 3s linear infinite;
}

.svc-ring-yellow {
  background: rgba(201, 160, 80, 0.08);
  border: 1.5px solid rgba(201, 160, 80, 0.25);
}

.svc-ring-yellow::before {
  border: 1px dashed #C9A050;
  /* #FFB800 se */
}

.svc-ring-red {
  background: rgba(12, 4, 2, 0.1);
  border: 1.5px solid rgba(148, 27, 12, 0.4);
}

.svc-ring-red::before {
  border: 1px dashed rgba(246, 170, 28, 0.4);
}

.svc-ring-cyan {
  background: rgba(188, 57, 8, 0.08);
  border: 1.5px solid rgba(188, 57, 8, 0.35);
}

.svc-ring-cyan::before {
  border: 1px dashed rgba(188, 57, 8, 0.4);
}

.svc-ring-green {
  background: rgba(246, 170, 28, 0.08);
  border: 1.5px solid rgba(246, 170, 28, 0.35);
}

.svc-ring-green::before {
  border: 1px dashed rgba(246, 170, 28, 0.4);
}

@keyframes svcRingRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Badges */
.svc-prime-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 100px;
}

.svc-badge-yellow {
  background: rgba(201, 160, 80, 0.08);
  color: #C9A050;
  /* #FFB800 se change */
  border: 1px solid rgba(201, 160, 80, 0.15);
}

.svc-badge-red {
  background: rgba(120, 60, 40, 0.08);
  color: #C9A050;
  border: 1px solid rgba(120, 60, 40, 0.15);
}

.svc-badge-cyan {
  background: rgba(120, 60, 40, 0.08);
  color: #C9A050;
  border: 1px solid rgba(120, 60, 40, 0.15);
}

.svc-badge-green {
  background: rgba(120, 60, 40, 0.08);
  color: #C9A050;
  border: 1px solid rgba(120, 60, 40, 0.15);
}

/* ══ FASTAG ANIMATION ══ */
.svc-fastag-anim {
  position: relative;
  height: 140px;
  margin: 14px 0 0;
  overflow: hidden;
}

.svc-highway-road {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  height: 36px;
  background: linear-gradient(180deg, #1a1a1a 0%, #111 100%);
  border-top: 1px solid rgba(255, 184, 0, 0.2);
  border-bottom: 1px solid rgba(255, 184, 0, 0.2);
}

.svc-road-line {
  position: absolute;
  top: 50%;
  height: 2px;
  width: 40px;
  background: rgba(255, 184, 0, 0.5);
  transform: translateY(-50%);
  animation: svcRoadLines 1.4s linear infinite;
}

.svc-rl-1 {
  left: 5%;
  animation-delay: 0s;
}

.svc-rl-2 {
  left: 38%;
  animation-delay: -0.47s;
}

.svc-rl-3 {
  left: 70%;
  animation-delay: -0.94s;
}

@keyframes svcRoadLines {
  from {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
  }

  to {
    transform: translateY(-50%) translateX(-100px);
    opacity: 0;
  }
}

.svc-car {
  position: absolute;
  bottom: 34px;
  animation: svcCarDrive 3.5s linear infinite;
}

.svc-car-1 {
  animation-duration: 3.2s;
  animation-delay: 0s;
}

.svc-car-2 {
  animation-duration: 4.8s;
  animation-delay: -1.8s;
  bottom: 36px;
  opacity: 0.6;
}

@keyframes svcCarDrive {
  from {
    left: -60px;
  }

  to {
    left: 110%;
  }
}

.svc-tollgate {
  position: absolute;
  left: 56%;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

.svc-toll-post {
  width: 4px;
  background: linear-gradient(180deg, #C9A050, rgba(201, 160, 80, 0.2));
  /* #FFB800 se change */
  border-radius: 2px;
}

.svc-toll-beam {
  position: absolute;
  top: 32px;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #C9A050, transparent);
  /* normalized */
  animation: svcTollScan 1.5s ease-in-out infinite;
}

.svc-toll-left,
.svc-toll-right {
  height: 66px;
}



@keyframes svcTollScan {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 6px #C9A050;
    /* softer glow */
  }

  50% {
    opacity: 0.3;
    box-shadow: none;
  }
}


.svc-toll-scan-ring {
  position: absolute;
  top: 18px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #C9A050;
  /* normalized */
  animation: svcScanRing 1.5s ease-in-out infinite;
}

@keyframes svcScanRing {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }

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

.svc-pay-flash {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 184, 0, 0.12);
  border: 1px solid rgba(255, 184, 0, 0.4);
  border-radius: 8px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #FFB800;
  animation: svcPayPop 3.2s ease-in-out infinite;
  white-space: nowrap;
}

.svc-pay-tick {
  color: #00FF88;
  font-size: 13px;
}

@keyframes svcPayPop {

  0%,
  30% {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
  }

  40%,
  70% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  80%,
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px);
  }
}

/* ══ ELECTRICITY ANIMATION ══ */
.svc-elec-anim {
  position: relative;
  height: 140px;
  margin: 14px 0 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svc-wave-bars {
  position: absolute;
  bottom: 10px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 60px;
}

.svc-wb {
  flex: 1;
  background: linear-gradient(180deg, #F6AA1C, rgba(148, 27, 12, 0.15));
  border-radius: 3px 3px 0 0;
  animation: svcWaveBar 1.2s ease-in-out infinite;
  min-height: 4px;
}

.svc-wb-1 {
  animation-delay: 0s;
  --h: 40%;
}

.svc-wb-2 {
  animation-delay: 0.1s;
  --h: 70%;
}

.svc-wb-3 {
  animation-delay: 0.2s;
  --h: 55%;
}

.svc-wb-4 {
  animation-delay: 0.3s;
  --h: 90%;
}

.svc-wb-5 {
  animation-delay: 0.4s;
  --h: 45%;
}

.svc-wb-6 {
  animation-delay: 0.5s;
  --h: 80%;
}

.svc-wb-7 {
  animation-delay: 0.6s;
  --h: 60%;
}

.svc-wb-8 {
  animation-delay: 0.7s;
  --h: 95%;
}

.svc-wb-9 {
  animation-delay: 0.8s;
  --h: 50%;
}

.svc-wb-10 {
  animation-delay: 0.9s;
  --h: 75%;
}

.svc-wb-11 {
  animation-delay: 1.0s;
  --h: 40%;
}

.svc-wb-12 {
  animation-delay: 1.1s;
  --h: 65%;
}

@keyframes svcWaveBar {

  0%,
  100% {
    height: var(--h, 40%);
    opacity: 0.6;
  }

  50% {
    height: calc(var(--h, 40%) * 0.4);
    opacity: 1;
  }
}

.svc-bolt-float {
  position: absolute;
  top: 10px;
  animation: svcBoltFloat 2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(188, 57, 8, 0.6));
}

@keyframes svcBoltFloat {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-6px) scale(1.05);
  }
}

.svc-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #FFD700;
  animation: svcSpark 1.8s ease-in-out infinite;
}

.svc-spark-1 {
  top: 25px;
  left: 30%;
  animation-delay: 0s;
}

.svc-spark-2 {
  top: 20px;
  right: 28%;
  animation-delay: 0.6s;
}

.svc-spark-3 {
  top: 35px;
  left: 55%;
  animation-delay: 1.2s;
}

@keyframes svcSpark {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  40% {
    transform: scale(1.5);
    opacity: 1;
    box-shadow: 0 0 6px #FFD700;
  }

  100% {
    transform: scale(0) translate(10px, -15px);
    opacity: 0;
  }
}

.svc-meter-display {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(12, 4, 2, 0.08);
  border: 1px solid rgba(148, 27, 12, 0.25);
  border-radius: 8px;
  padding: 5px 12px;
  text-align: center;
  min-width: 90px;
}

.svc-meter-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.svc-meter-value {
  font-size: 18px;
  font-weight: 800;
  color: #F6AA1C;
  font-variant-numeric: tabular-nums;
}

.svc-provider-chips {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  gap: 4px;
  justify-content: center;
}

.svc-pchip {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 100px;
  background: rgba(12, 4, 2, 0.1);
  border: 1px solid rgba(148, 27, 12, 0.2);
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.5px;
}

.svc-pchip-more {
  background: rgba(148, 27, 12, 0.2);
  color: #F6AA1C;
  border-color: rgba(148, 27, 12, 0.4);
}

/* ══ EDUCATION ANIMATION ══ */
.svc-edu-anim {
  position: relative;
  height: 140px;
  margin: 14px 0 0;
  overflow: hidden;
}

.svc-receipt-card {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  background: rgba(148, 27, 12, 0.05);
  border: 1px solid rgba(188, 57, 8, 0.2);
  border-radius: 10px;
  padding: 8px 10px;
  animation: svcReceiptFloat 3s ease-in-out infinite;
}

@keyframes svcReceiptFloat {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-5px);
  }
}

.svc-receipt-header {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(0, 200, 255, 0.15);
  padding-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.svc-receipt-verified {
  color: #00FF88;
}

.svc-receipt-row {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  margin: 3px 0;
}

.svc-receipt-total {
  border-top: 1px solid rgba(188, 57, 8, 0.2);
  padding-top: 4px;
  margin-top: 4px;
  color: #F6AA1C;
  font-weight: 700;
  font-size: 10px;
}

.svc-receipt-stamp {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 11px;
  font-weight: 900;
  color: #F6AA1C;
  border: 2px solid #F6AA1C;
  border-radius: 4px;
  padding: 1px 5px;
  opacity: 0.7;
  transform: rotate(-15deg);
  letter-spacing: 1px;
}

.svc-book-orbit {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
}

.svc-book {
  font-size: 18px;
  animation: svcBookBob 2s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(246, 170, 28, 0.3));
}

.svc-book-1 {
  animation-delay: 0s;
}

.svc-book-2 {
  animation-delay: 0.66s;
}

.svc-book-3 {
  animation-delay: 1.33s;
}

@keyframes svcBookBob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.svc-inst-counter {
  position: absolute;
  bottom: 6px;
  right: 10px;
  text-align: right;
}

.svc-inst-num {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #F6AA1C;
}

.svc-inst-lbl {
  display: block;
  font-size: 7px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ══ INSURANCE ANIMATION ══ */
.svc-ins-anim {
  position: relative;
  height: 140px;
  margin: 14px 0 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svc-shield-wrap {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.svc-shield-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(188, 57, 8, 0.2);
  animation: svcShieldPulse 2s ease-in-out infinite;
}

.svc-shr-1 {
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.svc-shr-2 {
  width: 100px;
  height: 100px;
  animation-delay: 0.5s;
  opacity: 0.5;
}

@keyframes svcShieldPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.2;
  }
}

.svc-shield-svg {
  filter: drop-shadow(0 0 12px rgba(246, 170, 28, 0.3));
  animation: svcShieldGlow 2s ease-in-out infinite;
}

@keyframes svcShieldGlow {

  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(246, 170, 28, 0.25));
  }

  50% {
    filter: drop-shadow(0 0 20px rgba(246, 170, 28, 0.5));
  }
}

.svc-shield-check-flash {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(246, 170, 28, 0.25);
  animation: svcFlash 2s ease-in-out infinite;
}

@keyframes svcFlash {

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

  50% {
    transform: scale(1.5);
    opacity: 0.6;
  }
}

.svc-policy-card {
  position: absolute;
  background: rgba(188, 57, 8, 0.05);
  border: 1px solid rgba(188, 57, 8, 0.2);
  border-radius: 7px;
  padding: 5px 8px;
  min-width: 58px;
  text-align: center;
}

.svc-pc-1 {
  top: 12px;
  left: 4px;
  animation: svcPolicyFloat 3s ease-in-out infinite;
}

.svc-pc-2 {
  top: 12px;
  right: 4px;
  animation: svcPolicyFloat 3s ease-in-out infinite 0.5s;
}

.svc-pc-3 {
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  animation: svcPolicyFloat 3s ease-in-out infinite 1s;
}

@keyframes svcPolicyFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

.svc-pc-3 {
  animation: svcPolicyFloat3 3s ease-in-out infinite 1s;
}

@keyframes svcPolicyFloat3 {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-4px);
  }
}

.svc-policy-label {
  font-size: 8px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5px;
}

.svc-policy-status {
  font-size: 8px;
  font-weight: 800;
  margin-top: 2px;
}

.svc-ps-active {
  color: #F6AA1C;
}

.svc-ps-renew {
  color: rgba(246, 170, 28, 0.7);
}

.svc-renew-notif {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.4);
}

.svc-renew-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #F6AA1C;
  box-shadow: 0 0 6px rgba(246, 170, 28, 0.6);
  animation: svcDotPulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── Canvas Animations ── */
.svc-canvas-anim {
  display: block;
  width: 100%;
  height: 150px;
  margin: 10px 0 0;
  border-radius: 0;
  background: transparent;
}

/* ── Card Body (all cards) ── */
.svc-prime-body {
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.svc-prime-title {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
}

.svc-title-lg {
  font-size: 1.1rem;
}

.svc-prime-stat-row {
  display: flex;
  gap: 12px;
}

.svc-prime-stat-row>div {
  flex: 1;
}

.svc-prime-num {
  font-size: 1.1rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.svc-num-yellow {
  color: #C9A050;
  /* #FFB800 se change - softer gold */
}

.svc-num-red {
  color: #C9A050;
  /* #F6AA1C se change - consistent gold */
}

.svc-num-cyan {
  color: #C9A050;
  /* softer gold */
}

.svc-num-green {
  color: #C9A050;
  /* softer gold */
}

.svc-prime-lbl {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 1px;
}

.svc-prime-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.svc-prime-bar {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  overflow: hidden;
}

.svc-prime-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 100px;
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-prime-bar-fill.svc-animated {
  width: var(--w, 0%);
}

.svc-bar-yellow {
  background: linear-gradient(90deg, #C9A050, #D4B870);
  /* #FFB800 se change */
  box-shadow: 0 0 6px rgba(201, 160, 80, 0.25);
  /* reduced glow */
}

.svc-bar-red {
  background: linear-gradient(90deg, #7A3D2B, #9B5438);
  /* toned down */
  box-shadow: 0 0 6px rgba(155, 84, 56, 0.25);
  /* subtle shadow */
}

.svc-bar-cyan {
  background: linear-gradient(90deg, #9B5438, #C9A050);
  /* normalized */
  box-shadow: 0 0 6px rgba(155, 84, 56, 0.25);
}

.svc-bar-green {
  background: linear-gradient(90deg, #7A3D2B, #9B5438);
  /* normalized */
  box-shadow: 0 0 6px rgba(155, 84, 56, 0.25);
}

.svc-prime-bar-pct {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  min-width: 26px;
  text-align: right;
}

.svc-prime-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid;
  letter-spacing: 0.2px;
  transition: all 0.25s ease;
  width: fit-content;
}

.svc-prime-cta:hover {
  transform: translateX(3px);
}

.svc-cta-yellow {
  color: #C9A050;
  /* #FFB800 se change */
  background: rgba(201, 160, 80, 0.05);
  /* lighter bg */
  border-color: rgba(201, 160, 80, 0.2);
}

.svc-cta-yellow:hover {
  background: rgba(201, 160, 80, 0.1);
  box-shadow: 0 0 12px rgba(201, 160, 80, 0.15);
  /* subtle glow */
}

.svc-cta-red {
  color: #C9A050;
  background: rgba(120, 60, 40, 0.05);
  border-color: rgba(120, 60, 40, 0.15);
}

.svc-cta-red:hover {
  background: rgba(120, 60, 40, 0.1);
  box-shadow: 0 0 12px rgba(155, 84, 56, 0.15);
}

.svc-cta-cyan {
  color: #F6AA1C;
  background: rgba(188, 57, 8, 0.08);
  border-color: rgba(188, 57, 8, 0.25);
}

.svc-cta-cyan:hover {
  background: rgba(188, 57, 8, 0.15);
  box-shadow: 0 0 16px rgba(188, 57, 8, 0.2);
}

.svc-cta-green {
  color: #F6AA1C;
  background: rgba(246, 170, 28, 0.08);
  border-color: rgba(246, 170, 28, 0.2);
}

.svc-cta-green:hover {
  background: rgba(246, 170, 28, 0.12);
  box-shadow: 0 0 16px rgba(246, 170, 28, 0.15);
}

/* ── More Services Divider ── */

.svc-more-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
}

.svc-more-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Secondary Grid ── */
.svc-secondary-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  max-width: 1280px;
  margin: 0 auto;
}

.svc-sec-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 16px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-decoration: none;
}

.svc-sec-card:hover {
  transform: translateY(-4px);
  background: rgba(148, 27, 12, 0.06);
  border-color: rgba(188, 57, 8, 0.22);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.svc-sec-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.3s ease;
}

.svc-sec-card:hover .svc-sec-icon {
  background: rgba(188, 57, 8, 0.1);
  border-color: rgba(188, 57, 8, 0.28);
  box-shadow: 0 0 12px rgba(188, 57, 8, 0.12);
}

.svc-sec-title {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  letter-spacing: 0.2px;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.svc-sec-card:hover .svc-sec-title {
  color: rgba(255, 255, 255, 0.75);
}

/* ══ RESPONSIVE ══ */
@media (max-width: 1100px) {
  .svc-main-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .svc-secondary-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 700px) {
  .services-section {
    padding: 80px 20px 70px;
  }

  .svc-main-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .svc-secondary-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  .svc-main-title {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .svc-secondary-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .svc-sec-card {
    padding: 14px 6px 10px;
  }

  .svc-sec-title {
    font-size: 9px;
  }
}

/* new services css  */

/* ═══════════════════════════════════════
   SERVICES SECTION — NB REDESIGN
═══════════════════════════════════════ */

.nb-svc-hdr {
  margin-bottom: 48px;
}

.nb-svc-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(188, 57, 8, 0.1);
  border: 1px solid rgba(188, 57, 8, 0.25);
  color: #BC3908;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.nb-tag-dot {
  width: 5px;
  height: 5px;
  background: #BC3908;
  border-radius: 50%;
  animation: nbTagDot 2s ease-in-out infinite;
}

@keyframes nbTagDot {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

.nb-svc-h {
  font-size: clamp(28px, 3.8vw, 48px);
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -.025em;
  margin-bottom: 10px;
  font-family: 'Manrope', sans-serif;
}

.nb-svc-p {
  color: rgba(255, 255, 255, 0.28);
  font-size: 13.5px;
  max-width: 440px;
  line-height: 1.65;
}

/* Shell */
.nb-svc-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(13, 17, 23, 0.5);
  min-height: 500px;
}

/* Left list */
.nb-svc-left {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nb-svc-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: all .22s;
  border: 1px solid transparent;
}

.nb-svc-item.active {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.07);
}

.nb-svc-item:hover:not(.active) {
  background: rgba(255, 255, 255, 0.025);
}

.nb-svc-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nb-svc-iname {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2px;
  font-family: 'Manrope', sans-serif;
  transition: color .22s;
}

.nb-svc-item.active .nb-svc-iname {
  color: #fff;
}

.nb-svc-isub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.26);
}

.nb-svc-iarr {
  margin-left: auto;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.26);
  opacity: 0;
  transition: all .22s;
  flex-shrink: 0;
}

.nb-svc-item.active .nb-svc-iarr {
  opacity: 1;
}

.nb-svc-div {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 2px 14px;
}

/* Right panels */
.nb-svc-right {
  position: relative;
  overflow: hidden;
}

.nb-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.nb-panel.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

.nb-panel-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.nb-pcol-text {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 1;
}

.nb-ptag {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.nb-ph {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 10px;
  font-family: 'Manrope', sans-serif;
  letter-spacing: -.02em;
}

.nb-pdesc {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7;
  margin-bottom: 20px;
}

.nb-pstats {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.nb-pnum {
  font-size: 22px;
  font-weight: 800;
  font-family: 'Manrope', sans-serif;
  line-height: 1;
}

.nb-plbl {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.28);
  margin-top: 3px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.nb-pcta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid;
  transition: all .2s;
  font-family: 'Manrope', sans-serif;
  width: fit-content;
  text-decoration: none;
}

/* Txn chips */
.nb-txn-strip {
  display: flex;
  /* flex-direction: column; */
  /* flex-wrap: wrap; */
  gap: 4px;
  width: fit-content;
}

.nb-txn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 7px 10px;
  animation: nbChipIn .4s ease forwards;
  opacity: 0;
}

.nb-txn:nth-child(1) {
  animation-delay: .05s
}

.nb-txn:nth-child(2) {
  animation-delay: .18s
}

.nb-txn:nth-child(3) {
  animation-delay: .31s
}

@keyframes nbChipIn {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

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

.nb-tdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nb-tname {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  flex: 1;
}

.nb-tamt {
  font-size: 14px;
  font-weight: 800;
}

.nb-tok {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
}

/* Visual col */
.nb-pcol-vis {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}


.fasttage-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.nb-vis {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── FASTAG visual ── */
.nb-vis-fastag {
  background: linear-gradient(180deg, #0b0a05 0%, #0f0d08 100%);
  flex-direction: column;
}

.nb-vf-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 180px;
  background: radial-gradient(ellipse, rgba(201, 160, 80, 0.09) 0%, transparent 65%);
  pointer-events: none;
}

.nb-vf-road {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, #151209 0%, #0e0c07 100%);
}

.nb-vf-dash {
  position: absolute;
  background: rgba(201, 160, 80, 0.45);
  border-radius: 1px;
  animation: nbVfDash 1s linear infinite;
}

.nb-vfd1 {
  bottom: 55px;
  left: 44%;
  width: 3px;
  height: 18px;
  animation-delay: 0s
}

.nb-vfd2 {
  bottom: 38px;
  left: 45%;
  width: 4px;
  height: 22px;
  animation-delay: -.33s
}

.nb-vfd3 {
  bottom: 18px;
  left: 46%;
  width: 5px;
  height: 28px;
  animation-delay: -.66s
}

@keyframes nbVfDash {
  from {
    opacity: .8;
    transform: translateY(0)
  }

  to {
    opacity: 0;
    transform: translateY(40px)
  }
}

.nb-vf-arch {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
}

.nb-vf-post {
  position: absolute;
  top: 0;
  width: 5px;
  height: 110px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #C9A050, rgba(201, 160, 80, .15));
}

.nb-vf-postl {
  left: 10px
}

.nb-vf-postr {
  right: 10px
}

.nb-vf-bar {
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  height: 5px;
  background: linear-gradient(90deg, rgba(201, 160, 80, .3), #C9A050, rgba(201, 160, 80, .3));
  border-radius: 3px;
  animation: nbVfBar 2s ease-in-out infinite;
}

@keyframes nbVfBar {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(201, 160, 80, .4)
  }

  50% {
    box-shadow: 0 0 18px rgba(201, 160, 80, .8)
  }
}

.nb-vf-sign {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 7, 3, .9);
  border: 1px solid rgba(201, 160, 80, .35);
  border-radius: 5px;
  padding: 4px 12px;
  font-size: 9px;
  font-weight: 800;
  color: #C9A050;
  letter-spacing: .12em;
  white-space: nowrap;
  font-family: 'Manrope', sans-serif;
}

.nb-vf-ring {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 160, 80, .8);
  animation: nbVfRing 2s ease-out infinite;
}

@keyframes nbVfRing {
  0% {
    transform: translateX(-50%) scale(.5);
    opacity: .9
  }

  100% {
    transform: translateX(-50%) scale(2.2);
    opacity: 0
  }
}

.nb-vf-arml {
  position: absolute;
  top: 38px;
  left: 15px;
  height: 3px;
  width: 52px;
  background: linear-gradient(90deg, #C9A050, rgba(201, 160, 80, .3));
  border-radius: 2px;
  transform-origin: left;
  animation: nbVfArmL 3s ease-in-out infinite;
}

.nb-vf-armr {
  position: absolute;
  top: 38px;
  right: 15px;
  height: 3px;
  width: 52px;
  background: linear-gradient(270deg, #C9A050, rgba(201, 160, 80, .3));
  border-radius: 2px;
  transform-origin: right;
  animation: nbVfArmR 3s ease-in-out infinite;
}

@keyframes nbVfArmL {

  0%,
  25% {
    transform: rotate(0)
  }

  38%,
  62% {
    transform: rotate(-72deg)
  }

  75%,
  100% {
    transform: rotate(0)
  }
}

@keyframes nbVfArmR {

  0%,
  25% {
    transform: rotate(0)
  }

  38%,
  62% {
    transform: rotate(72deg)
  }

  75%,
  100% {
    transform: rotate(0)
  }
}

.nb-vf-popup {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 6, 2, .92);
  border: 1px solid rgba(201, 160, 80, .4);
  border-radius: 8px;
  padding: 5px 13px;
  font-size: 11px;
  font-weight: 700;
  color: #C9A050;
  white-space: nowrap;
  font-family: 'Manrope', sans-serif;
  animation: nbVfPopup 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
}

@keyframes nbVfPopup {

  0%,
  20% {
    opacity: 0;
    transform: translateX(-50%) translateY(6px)
  }

  32%,
  65% {
    opacity: 1;
    transform: translateX(-50%) translateY(0)
  }

  78%,
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px)
  }
}

.nb-vf-car {
  position: absolute;
  bottom: 30px;
  animation: nbVfCar 3s linear infinite;
  z-index: 4;
}

@keyframes nbVfCar {
  from {
    left: -90px
  }

  to {
    left: 110%
  }
}

/* ── ELECTRICITY visual ── */
.nb-vis-elec {
  background: linear-gradient(180deg, #0a0604 0%, #0c0806 100%);
  flex-direction: column;
}

.nb-ve-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(188, 57, 8, 0.1) 0%, transparent 65%);
  pointer-events: none;
}

.nb-ve-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #F6AA1C;
  animation: nbVeSpark 2s ease-in-out infinite;
}

.nb-vs1 {
  top: 28px;
  left: 24px;
  animation-delay: 0s
}

.nb-vs2 {
  top: 22px;
  right: 54px;
  animation-delay: .7s
}

.nb-vs3 {
  bottom: 38px;
  left: 32px;
  animation-delay: 1.3s
}

@keyframes nbVeSpark {
  0% {
    transform: scale(0);
    opacity: 0
  }

  40% {
    transform: scale(2);
    opacity: 1;
    box-shadow: 0 0 5px #F6AA1C
  }

  100% {
    transform: scale(0) translate(10px, -14px);
    opacity: 0
  }
}

.nb-ve-bolt {
  position: absolute;
  top: 18px;
  right: 22px;
  animation: nbVeBolt 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(188, 57, 8, .6));
}

@keyframes nbVeBolt {

  0%,
  100% {
    transform: translateY(0) scale(1)
  }

  50% {
    transform: translateY(-8px) scale(1.08)
  }
}

.nb-ve-meter {
  position: relative;
  width: 170px;
  background: #0e0a06;
  border: 1px solid rgba(188, 57, 8, 0.3);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 0 40px rgba(188, 57, 8, 0.08);
}

.nb-ve-wire {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 3px;
  border-radius: 2px;
}

.nb-ve-wl {
  left: -30px;
  background: linear-gradient(270deg, rgba(188, 57, 8, .4), transparent)
}

.nb-ve-wr {
  right: -30px;
  background: linear-gradient(90deg, rgba(188, 57, 8, .4), transparent)
}

.nb-ve-display {
  background: #080503;
  border: 1px solid rgba(188, 57, 8, 0.18);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 14px;
  text-align: center;
}

.nb-ve-readout {
  font-family: 'Courier New', monospace;
  font-size: 28px;
  font-weight: 700;
  color: #F6AA1C;
  letter-spacing: 4px;
  line-height: 1;
  animation: nbVeFlicker 3s ease-in-out infinite;
}

@keyframes nbVeFlicker {

  0%,
  100% {
    opacity: 1
  }

  48% {
    opacity: 1
  }

  50% {
    opacity: .7
  }

  52% {
    opacity: 1
  }
}

.nb-ve-unit {
  font-size: 8px;
  color: rgba(188, 57, 8, .6);
  letter-spacing: .12em;
  font-weight: 600;
  margin-top: 4px;
}

.nb-ve-dials {
  display: flex;
  justify-content: space-around;
}

.nb-ve-dial {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #080503;
  border: 1px solid rgba(188, 57, 8, .2);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nb-ve-hand {
  width: 1.5px;
  height: 11px;
  background: #F6AA1C;
  border-radius: 1px;
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom center;
  animation: nbVeSpin var(--dur, 8s) linear infinite;
}

@keyframes nbVeSpin {
  from {
    transform: translateX(-50%) rotate(0)
  }

  to {
    transform: translateX(-50%) rotate(360deg)
  }
}

.nb-ve-label {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(188, 57, 8, .1);
  border: 1px solid rgba(188, 57, 8, .2);
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 8px;
  font-weight: 700;
  color: rgba(188, 57, 8, .7);
  letter-spacing: .1em;
  white-space: nowrap;
  font-family: 'Manrope', sans-serif;
}

/* ── EDUCATION visual ── */
.nb-vis-edu {
  background: linear-gradient(180deg, #08080a 0%, #09090c 100%);
  flex-direction: column;
}

.nb-vd-glow {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(246, 170, 28, 0.06) 0%, transparent 65%);
  pointer-events: none;
}

.nb-vd-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(246, 170, 28, .4);
}

.nb-vds1 {
  top: 22px;
  left: 22px
}

.nb-vds2 {
  top: 40px;
  right: 28px;
  opacity: .6
}

.nb-vds3 {
  bottom: 30px;
  left: 28px;
  opacity: .5
}

.nb-vd-cap {
  position: absolute;
  top: 20px;
  right: 20px;
  animation: nbVdCap 3.5s ease-in-out infinite;
}

@keyframes nbVdCap {

  0%,
  100% {
    transform: translateY(0) rotate(-3deg)
  }

  50% {
    transform: translateY(-10px) rotate(3deg)
  }
}

.nb-vd-receipt {
  position: relative;
  width: 168px;
  background: #0c0c10;
  border: 1px solid rgba(246, 170, 28, 0.2);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}

.nb-vd-rtear {
  position: absolute;
  left: 0;
  right: 0;
  top: 52px;
  border-top: 1px dashed rgba(246, 170, 28, .15);
  pointer-events: none;
}

.nb-vd-rhead {
  background: rgba(246, 170, 28, 0.08);
  border-bottom: 1px solid rgba(246, 170, 28, 0.12);
  padding: 12px 14px;
}

.nb-vd-rtitle {
  font-size: 9px;
  font-weight: 800;
  color: #F6AA1C;
  letter-spacing: .12em;
  font-family: 'Manrope', sans-serif;
}

.nb-vd-rsub {
  font-size: 8px;
  color: rgba(255, 255, 255, .35);
  margin-top: 2px;
}

.nb-vd-rbody {
  padding: 12px 14px;
}

.nb-vd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}

.nb-vd-rl {
  font-size: 9px;
  color: rgba(255, 255, 255, .35);
}

.nb-vd-rv {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, .75);
}

.nb-vd-sep {
  height: 1px;
  background: rgba(255, 255, 255, .05);
  margin: 8px 0;
}

.nb-vd-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nb-vd-tl {
  font-size: 10px;
  font-weight: 700;
  color: #F6AA1C;
}

.nb-vd-tv {
  font-size: 14px;
  font-weight: 800;
  color: #F6AA1C;
  font-family: 'Manrope', sans-serif;
}

.nb-vd-rfoot {
  padding: 10px 14px;
  border-top: 1px solid rgba(246, 170, 28, .1);
  display: flex;
  align-items: center;
  gap: 6px;
}

.nb-vd-chk {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 200, 80, .1);
  border: 1px solid rgba(0, 200, 80, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nb-vd-ctxt {
  font-size: 9px;
  color: rgba(0, 200, 80, .8);
  font-weight: 700;
}

/* ── INSURANCE visual ── */
.nb-vis-ins {
  background: linear-gradient(180deg, #060a07 0%, #070c08 100%);
  gap: 16px;
}

.nb-vi-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 200, 80, .1);
  animation: nbViRing 3s ease-out infinite;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.nb-vir1 {
  width: 100px;
  height: 100px;
  animation-delay: 0s
}

.nb-vir2 {
  width: 145px;
  height: 145px;
  animation-delay: .9s;
  border-color: rgba(0, 200, 80, .06)
}

.nb-vir3 {
  width: 195px;
  height: 195px;
  animation-delay: 1.8s;
  border-color: rgba(0, 200, 80, .03)
}

@keyframes nbViRing {
  0% {
    transform: translate(-50%, -50%) scale(.7);
    opacity: .8
  }

  100% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 0
  }
}

.nb-vi-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nb-vi-chip {
  background: rgba(7, 14, 9, .9);
  border: 1px solid rgba(0, 200, 80, .18);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 9px;
  font-weight: 700;
  color: rgba(0, 200, 80, .7);
  letter-spacing: .06em;
  white-space: nowrap;
  animation: nbViChip 4s ease-in-out infinite;
}

.nb-vic2 {
  animation-delay: 1.3s
}

.nb-vic3 {
  animation-delay: 2.6s
}

@keyframes nbViChip {

  0%,
  100% {
    opacity: .4
  }

  50% {
    opacity: 1
  }
}

/* ── WATER visual ── */
.nb-vis-water {
  background: linear-gradient(180deg, #050810 0%, #060912 100%);
  gap: 16px;
}

.nb-vw-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(0, 160, 255, 0.07) 0%, transparent 65%);
  pointer-events: none;
}

.nb-vw-wave {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 160, 255, .2);
  animation: nbVwWave 2.4s ease-out infinite;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.nb-vww1 {
  width: 80px;
  height: 80px;
  animation-delay: 0s
}

.nb-vww2 {
  width: 118px;
  height: 118px;
  animation-delay: .8s;
  border-color: rgba(0, 160, 255, .12)
}

.nb-vww3 {
  width: 158px;
  height: 158px;
  animation-delay: 1.6s;
  border-color: rgba(0, 160, 255, .06)
}

@keyframes nbVwWave {
  0% {
    transform: translate(-50%, -50%) scale(.6);
    opacity: .8
  }

  100% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0
  }
}

.nb-vw-bills {
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
  z-index: 2;
}

.nb-vw-bill {
  width: 90px;
  background: rgba(5, 10, 20, .9);
  border: 1px solid rgba(0, 160, 255, .18);
  border-radius: 8px;
  padding: 7px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: nbVwBill 3s ease-in-out infinite;
}

.nb-vwb2 {
  animation-delay: .7s
}

.nb-vwb3 {
  animation-delay: 1.4s
}

@keyframes nbVwBill {

  0%,
  100% {
    border-color: rgba(0, 160, 255, .14)
  }

  50% {
    border-color: rgba(0, 160, 255, .3)
  }
}

.nb-vw-bn {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, .6);
}

.nb-vw-ba {
  font-size: 10px;
  font-weight: 800;
  color: #00A0FF;
}

/* More services */
.nb-more {
  margin-top: 16px;
}

.nb-more-lbl {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  margin-bottom: 12px;
}

.nb-more-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 9px;
}

.nb-mc {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 11px;
  padding: 13px 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  transition: all .2s;
}

.nb-mc:hover {
  background: rgba(255, 255, 255, 0.048);
  border-color: rgba(188, 57, 8, 0.2);
  transform: translateY(-2px);
}

.nb-mc-ico {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nb-mc-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.nb-mc-stat {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.28);
}

.nb-mc-arr {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.28);
  font-size: 11px;
  opacity: .3;
  transition: opacity .2s;
}

.nb-mc:hover .nb-mc-arr {
  opacity: .7;
}

/* Footer strip */
.nb-svc-foot {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 13px;
}

.nb-svc-foot-txt {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.28);
}

.nb-svc-foot-txt b {
  color: #fff;
}

.nb-svc-foot-btn {
  background: #BC3908;
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background .2s;
}

.nb-svc-foot-btn:hover {
  background: #d04010;
}

/* new services css end  */

/* ─── STATS SECTION ─── */
.stats-section {
  padding: 80px 60px;
  position: relative;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stat-card {
  padding: 48px 40px;
  background: var(--bg-secondary);
  text-align: center;
  transition: all 0.3s;
}

.stat-card:hover {
  background: rgba(12, 4, 2, 0.04);
}

.stat-big {
  font-family: "Manrope", sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: var(--neon);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-tag {
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

/* ─── APP DOWNLOAD ─── */
.app-section {
  padding: 120px 60px;
  position: relative;
  overflow: hidden;
}

.app-inner {
  position: relative;
  background: linear-gradient(135deg, #0d1117, #080a0e);
  border: 1px solid var(--border);
  border-radius: 40px;
  padding: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  overflow: hidden;
}

.app-inner::before {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle,
      rgba(12, 4, 2, 0.06) 0%,
      transparent 70%);
  pointer-events: none;
}

.app-title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 20px;
}

.app-title .hl {
  color: var(--neon);
}

.app-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 40px;
}

.app-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.app-store-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  color: inherit;
}

.app-store-btn:hover {
  border-color: var(--border-neon);
  background: var(--neon-dim);
  transform: translateY(-2px);
}

.store-icon {
  font-size: 28px;
}

.store-sub {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.store-name {
  font-size: 16px;
  font-weight: 700;
  font-family: "Space Grotesk", sans-serif;
}

.app-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.app-phones {
  position: relative;
  width: 300px;
  height: 400px;
}

.app-phone {
  position: absolute;
  width: 170px;
  height: 340px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.app-phone-1 {
  left: 20px;
  top: 0;
  background: linear-gradient(145deg, #1a1f2e, #0d1117);
  z-index: 3;
  animation: floatPhone1 5s ease-in-out infinite;
}

.app-phone-2 {
  right: 0;
  top: 40px;
  background: linear-gradient(145deg, #141820, #0a0d13);
  z-index: 2;
  animation: floatPhone2 5s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes floatPhone1 {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes floatPhone2 {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.app-phone-screen {
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── TRUST / PARTNER SECTION ─── */
.trust-section {
  padding: 100px 60px;
  position: relative;
}

.trust-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 60px;
}

.trust-card {
  position: relative;
  padding: 40px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all 0.4s;
  overflow: hidden;
}

.trust-card.center-featured {
  background: var(--neon);
  border-color: var(--neon);
}

.trust-card.center-featured * {
  color: #000 !important;
}

.trust-card.center-featured .tc-icon {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.2);
}

.trust-card:hover:not(.center-featured) {
  border-color: var(--border-neon);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.tc-num {
  font-family: "Manrope", sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--neon);
  margin-bottom: 8px;
  letter-spacing: 2px;
}

.trust-card.center-featured .tc-num {
  color: #000;
}

.tc-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  font-family: "Space Grotesk", sans-serif;
}

.tc-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 20px;
}

.tc-link {
  font-size: 13px;
  color: var(--neon);
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.trust-card.center-featured .tc-link {
  color: #000;
}

/* ─── CHART SECTION ─── */
.chart-section {
  padding: 80px 60px;
}

.chart-inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px;
  align-items: center;
}

.chart-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.chart-val {
  font-family: "Manrope", sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: var(--neon);
  margin-bottom: 4px;
}

.chart-change {
  font-size: 14px;
  color: #00ff88;
}

.live-chart {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  overflow: hidden;
}

/* ─── TESTIMONIALS ─── */
.testimonials-section {
  padding: 100px 60px;
  overflow: hidden;
}

.testimonials-track {
  display: flex;
  gap: 24px;
  animation: scroll-testimonials 30s linear infinite;
  width: max-content;
}

@keyframes scroll-testimonials {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.testimonials-track:hover {
  animation-play-state: paused;
}

.testimonial-card {
  width: 340px;
  min-width: 340px;
  padding: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all 0.3s;
  flex-shrink: 0;
}

.testimonial-card:hover {
  border-color: var(--border-neon);
}

.test-stars {
  color: var(--neon);
  font-size: 14px;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

.test-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 24px;
}

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

.test-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neon), #00c8ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

.test-name {
  font-size: 14px;
  font-weight: 600;
}

.test-role {
  font-size: 12px;
  color: var(--text-muted);
}



/* ─── FOOTER ─── */
footer {
  padding: 80px 60px 40px;
  border-top: 1px solid var(--border);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 60px;
  margin-bottom: 60px;
}

.footer-brand .nav-logo {
  font-size: 24px;
  margin-bottom: 16px;
  display: block;
}

.footer-brand p {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 280px;
  text-align: justify;
}

.footer-col h4 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--text-primary);
}

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

.footer-col a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-col a:hover {
  color: var(--neon);
}






/* ─── ANIMATIONS ─── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-up-delay-1 {
  transition-delay: 0.1s;
}

.fade-up-delay-2 {
  transition-delay: 0.2s;
}

.fade-up-delay-3 {
  transition-delay: 0.3s;
}

/* ─── HAMBURGER / MOBILE NAV ─── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all 0.3s;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1200px) {
  nav {
    padding: 18px 40px;
  }

  .hero {
    padding: 120px 40px 80px;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bharat-section,
  .trust-section,
  .app-section,
  .chart-section,
  .testimonials-section,
  .cta-section,
  .stats-section,
  footer {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 992px) {
  .hero {
    flex-direction: column;
    gap: 60px;
    padding: 140px 40px 80px;
  }

  .hero-visual {
    min-height: 400px;
  }

  .phone-mockup-container {
    width: 280px;
    height: 500px;
  }

  .bharat-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px;
  }

  .app-inner {
    grid-template-columns: 1fr;
    padding: 40px;
  }

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

  .chart-inner {
    grid-template-columns: 1fr;
  }

  .trust-cards {
    grid-template-columns: 1fr;
  }

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

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  nav {
    padding: 16px 24px;
  }


  .bc-logos-bar {

    bottom: -16px;

  }

  .nav-links,
  .nav-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .hero {
    padding: 100px 24px 60px;
  }

  .services-section,
  .bharat-section,
  .trust-section,
  .app-section,
  .stats-section,
  .testimonials-section,
  .cta-section,
  footer {
    padding-left: 24px;
    padding-right: 24px;
  }

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

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

  .stat-big {
    font-size: 34px;
  }

  .stat-card {
    padding: 32px 16px;
  }

  .cta-inner {
    padding: 60px 24px;
  }

  .bharat-inner {
    padding: 30px 24px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .orbit-ring-1 {
    width: 300px;
    height: 300px;
  }

  .orbit-ring-2 {
    width: 420px;
    height: 420px;
  }
}

/* ─── MOBILE NAV MENU ─── */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, 0.98);
  backdrop-filter: blur(20px);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.mobile-menu a {
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 700;
  transition: color 0.3s, transform 0.3s, opacity 0.3s;
  transform: translateY(10px);
  opacity: 0;
}

.mobile-menu.open a {
  transform: translateY(0);
  opacity: 1;
}

.mobile-menu.open a:nth-child(2) {
  transition-delay: 0.05s;
}

.mobile-menu.open a:nth-child(3) {
  transition-delay: 0.1s;
}

.mobile-menu.open a:nth-child(4) {
  transition-delay: 0.15s;
}

.mobile-menu.open a:nth-child(5) {
  transition-delay: 0.2s;
}

.mobile-menu.open a:nth-child(6) {
  transition-delay: 0.25s;
}

.mobile-menu a:hover {
  color: var(--neon);
}

.mobile-close {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 28px;
  cursor: pointer;
  background: none;
  border: none;
  color: white;
  opacity: 1 !important;
  transform: none !important;
  transition: color 0.2s;
  z-index: 10;
}

.mobile-close:hover {
  color: var(--neon);
}

/* ─── TICKER ─── */
.ticker-wrap {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  background: rgba(12, 4, 2, 0.02);
}

.ticker {
  display: flex;
  gap: 60px;
  animation: ticker 20s linear infinite;
  width: max-content;
}

@keyframes ticker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.ticker-item {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.ticker-up {
  color: #F6AA1C;
}

.ticker-down {
  color: #F6AA1C;
}

.ticker-name {
  color: var(--text-secondary);
}

/* ─── HERO PHONE IMAGE ─── */
.hero-visual {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
}

.hero-orbit-svg {
  position: absolute;
  width: 620px;
  height: 660px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.orbit-dot-svg {
  animation: orbit-dot-pulse 2s ease-in-out infinite;
}

.orbit-dot-svg-1 {
  animation-delay: 0s;
}

.orbit-dot-svg-2 {
  animation-delay: 0.7s;
}

.orbit-dot-svg-3 {
  animation-delay: 1.4s;
}

@keyframes orbit-dot-pulse {

  0%,
  100% {
    opacity: 1;
    r: 5;
  }

  50% {
    opacity: 0.4;
    r: 3;
  }
}

.hero-phone-img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 600px;
  height: 100%;
  max-height: 760px;
  object-fit: contain;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 40px rgba(12, 4, 2, 0.12));
}

@keyframes hero-img-float {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-18px) rotate(0.5deg);
  }
}

@media (max-width: 992px) {
  .hero-phone-img {
    width: 340px;
  }

  .hero-orbit-svg {
    width: 380px;
    height: 420px;
  }
}

@media (max-width: 768px) {
  .hero-phone-img {
    width: 260px;
  }
}

/* ─── BC 3D CANVAS ─── */
.bc-canvas-3d {
  width: 100%;
  height: 440px;
  display: block;
  border-radius: 20px;
}

/* ─── MAIN SERVICES GRID ─── */
.main-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 0;
}

.main-service-card {
  position: relative;
  padding: 28px 22px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.main-service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(12, 4, 2, 0.06), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
}

.main-service-card:hover::before {
  opacity: 1;
}

.main-service-card:hover {
  border-color: rgba(148, 27, 12, 0.35);
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(12, 4, 2, 0.08);
}

.ms-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle,
      rgba(12, 4, 2, 0.12) 0%,
      transparent 70%);
  top: -20px;
  right: -20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  border-radius: 50%;
}

.main-service-card:hover .ms-glow {
  opacity: 1;
}

.ms-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ms-icon-wrap {
  width: 64px;
  height: 64px;
  background: rgba(12, 4, 2, 0.06);
  border: 1px solid rgba(148, 27, 12, 0.15);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s;
}

.main-service-card:hover .ms-icon-wrap {
  background: rgba(12, 4, 2, 0.12);
  border-color: rgba(148, 27, 12, 0.3);
}

.ms-lottie-canvas {
  display: block;
}

.ms-badge {
  padding: 4px 10px;
  background: rgba(12, 4, 2, 0.1);
  border: 1px solid rgba(148, 27, 12, 0.2);
  border-radius: 20px;
  font-size: 10px;
  color: var(--neon);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.ms-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  font-family: "Space Grotesk", sans-serif;
}

.ms-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.ms-stat-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.ms-stat-val {
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--neon);
}

.ms-stat-lbl {
  font-size: 11px;
  color: var(--text-muted);
}

.ms-link {
  font-size: 12px;
  color: var(--neon);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.3s;
}

.main-service-card:hover .ms-link {
  gap: 8px;
}

/* ─── SECONDARY SERVICES ─── */
.secondary-services-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
}

.sec-service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.sec-service-card:hover {
  border-color: var(--border-neon);
  background: var(--neon-dim);
  transform: translateY(-4px);
}

.sec-icon {
  font-size: 22px;
}

.sec-title {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.3;
}

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

  .secondary-services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .main-services-grid {
    grid-template-columns: 1fr;
  }

  .secondary-services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ─── PARTNERS ROW ─── */
.partners-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.partner-logo-wrap {
  flex: 1;
  min-width: 80px;
  display: flex;
  justify-content: center;
}

.partner-logo {
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  transition: all 0.3s;
  white-space: nowrap;
}

.partner-logo:hover {
  border-color: var(--border-neon);
  color: var(--neon);
}

/* ─── TRUST CARD SVG ─── */
.tc-svg-wrap {
  margin-bottom: 16px;
}

/* ─── APP DASHBOARD VISUAL ─── */
.app-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 440px;
}

.app-dashboard-visual {
  position: relative;
  width: 340px;
}

.adv-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(12, 4, 2, 0.08), transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
}

.adv-card {
  background: rgba(13, 17, 23, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 20px;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.adv-card-main {
  position: relative;
  z-index: 3;
  animation: adv-float 5s ease-in-out infinite;
}

@keyframes adv-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.adv-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.adv-bill-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.adv-bill-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.adv-bill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.adv-card-notif {
  margin-top: 12px;
  border-color: rgba(0, 255, 136, 0.15);
  animation: adv-float 5s ease-in-out infinite;
  animation-delay: 1s;
}

.adv-card-stats {
  margin-top: 12px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 16px 20px;
  animation: adv-float 5s ease-in-out infinite;
  animation-delay: 0.5s;
}

.adv-mini-stat {
  text-align: center;
}

.adv-card-qr {
  position: absolute;
  top: -20px;
  right: -60px;
  padding: 14px;
  animation: adv-float 5s ease-in-out infinite;
  animation-delay: 2s;
  z-index: 4;
}

@media (max-width: 992px) {
  .adv-card-qr {
    display: none;
  }

  .app-dashboard-visual {
    width: 100%;
    max-width: 380px;
  }
}

/* ═══════════════════════════════════════════════════════ */
/* ─── BHARAT CONNECT PREMIUM VISUAL ─── */
/* ═══════════════════════════════════════════════════════ */

.bc-canvas-3d {
  display: none;
}

.bc-premium-wrap {
  position: relative;
  width: 460px;
  height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Central hub */
.bc-hub {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bc-hub-inner {
  width: 110px;
  height: 110px;
  background: linear-gradient(135deg,
      rgba(148, 27, 12, 0.15),
      rgba(12, 4, 2, 0.05));
  border: 1.5px solid rgba(188, 57, 8, 0.5);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 0 40px rgba(148, 27, 12, 0.2), 0 0 80px rgba(12, 4, 2, 0.1),
    inset 0 0 20px rgba(12, 4, 2, 0.05);
  animation: hub-breathe 4s ease-in-out infinite;
  backdrop-filter: blur(10px);
}

.bc-hub-label {
  font-family: "Manrope", sans-serif;
  font-size: 7px;
  font-weight: 800;
  color: #F6AA1C;
  text-align: center;
  letter-spacing: 1px;
  line-height: 1.4;
}

@keyframes hub-breathe {

  0%,
  100% {
    box-shadow: 0 0 40px rgba(148, 27, 12, 0.2), 0 0 80px rgba(12, 4, 2, 0.1),
      inset 0 0 20px rgba(12, 4, 2, 0.05);
  }

  50% {
    box-shadow: 0 0 60px rgba(148, 27, 12, 0.35),
      0 0 120px rgba(148, 27, 12, 0.15), inset 0 0 30px rgba(12, 4, 2, 0.1);
  }
}

/* Rings */
.bc-hub-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(12, 4, 2, 0.08);
  pointer-events: none;
}

.bc-hub-ring-1 {
  width: 180px;
  height: 180px;
  border-color: rgba(148, 27, 12, 0.15);
  animation: ring-rotate 20s linear infinite;
}

.bc-hub-ring-2 {
  width: 300px;
  height: 300px;
  border-color: rgba(12, 4, 2, 0.08);
  border-style: dashed;
  animation: ring-rotate 35s linear infinite reverse;
}

.bc-hub-ring-3 {
  width: 420px;
  height: 420px;
  border-color: rgba(12, 4, 2, 0.04);
  animation: ring-rotate 50s linear infinite;
}

@keyframes ring-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Orbiting nodes */
.bc-orbit {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: orbit-spin 20s linear infinite;
  pointer-events: none;
}

.bc-orbit-1 {
  animation-duration: 18s;
}

.bc-orbit-2 {
  animation-duration: 22s;
  animation-direction: reverse;
}

.bc-orbit-3 {
  animation-duration: 16s;
}

.bc-orbit-4 {
  animation-duration: 25s;
  animation-direction: reverse;
}

.bc-orbit-5 {
  animation-duration: 20s;
}

.bc-orbit-6 {
  animation-duration: 14s;
  animation-direction: reverse;
}

.bc-orbit-node {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(8, 10, 14, 0.95);
  border: 1px solid var(--clr, rgba(148, 27, 12, 0.3));
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 0 0 12px rgba(12, 4, 2, 0.1);
  animation: counter-rotate 20s linear infinite;
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.3s;
  min-width: 54px;
  text-align: center;
}

.bc-orbit-node span {
  font-size: 8px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  font-family: "Manrope", sans-serif;
  letter-spacing: 0.5px;
}

.bc-orbit-node:hover {
  background: rgba(12, 4, 2, 0.05);
  border-color: #F6AA1C;
  box-shadow: 0 0 20px rgba(148, 27, 12, 0.2);
}

.bc-orbit-1 .bc-orbit-node {
  transform: translate(-50%, calc(-50% - 150px));
}

.bc-orbit-2 .bc-orbit-node {
  transform: translate(calc(-50% + 130px), calc(-50% - 75px));
}

.bc-orbit-3 .bc-orbit-node {
  transform: translate(calc(-50% + 130px), calc(-50% + 75px));
}

.bc-orbit-4 .bc-orbit-node {
  transform: translate(-50%, calc(-50% + 150px));
}

.bc-orbit-5 .bc-orbit-node {
  transform: translate(calc(-50% - 130px), calc(-50% + 75px));
}

.bc-orbit-6 .bc-orbit-node {
  transform: translate(calc(-50% - 130px), calc(-50% - 75px));
}

.bc-orbit-2 .bc-orbit-node {
  animation-duration: 22s;
  animation-direction: reverse;
}

.bc-orbit-3 .bc-orbit-node {
  animation-duration: 16s;
  animation-direction: reverse;
}

.bc-orbit-4 .bc-orbit-node {
  animation-duration: 25s;
  animation-direction: reverse;
}

.bc-orbit-5 .bc-orbit-node {
  animation-duration: 20s;
  animation-direction: reverse;
}

.bc-orbit-6 .bc-orbit-node {
  animation-duration: 14s;
  animation-direction: reverse;
}

@keyframes orbit-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes counter-rotate {
  from {
    transform: translate(-50%, calc(-50% - 150px)) rotate(0deg);
  }

  to {
    transform: translate(-50%, calc(-50% - 150px)) rotate(-360deg);
  }
}

/* Data packets */
.bc-packet {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #F6AA1C;
  border-radius: 50%;
  box-shadow: 0 0 8px #941B0C;
  top: 50%;
  left: 50%;
  animation: packet-fly 3s ease-in-out infinite;
  pointer-events: none;
}

.bc-packet-1 {
  animation-duration: 2.5s;
  animation-delay: 0s;
  background: #F6AA1C;
  --tx: -80px;
  --ty: -100px;
}

.bc-packet-2 {
  animation-duration: 3s;
  animation-delay: 0.8s;
  background: #00c8ff;
  box-shadow: 0 0 8px #00c8ff;
  --tx: 90px;
  --ty: -80px;
}

.bc-packet-3 {
  animation-duration: 2.2s;
  animation-delay: 1.5s;
  background: #00ff88;
  box-shadow: 0 0 8px #00ff88;
  --tx: 80px;
  --ty: 90px;
}

.bc-packet-4 {
  animation-duration: 3.5s;
  animation-delay: 2s;
  background: #ffb800;
  box-shadow: 0 0 8px #ffb800;
  --tx: -90px;
  --ty: 80px;
}

@keyframes packet-fly {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  20% {
    opacity: 1;
    transform: translate(calc(-50% + var(--tx, -60px)),
        calc(-50% + var(--ty, -80px))) scale(1);
  }

  80% {
    opacity: 1;
    transform: translate(calc(-50% + var(--tx, -60px) * 0.1),
        calc(-50% + var(--ty, -80px) * 0.1)) scale(0.6);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
}

/* Live transaction feed */
.bc-txn-feed {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 20;
  min-width: 260px;
}

.bc-txn-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(8, 10, 14, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  animation: txn-slide-in 0.5s ease both;
}

.bc-txn-item-1 {
  animation-delay: 0s;
}

.bc-txn-item-2 {
  animation-delay: 0.15s;
}

.bc-txn-item-3 {
  animation-delay: 0.3s;
}

@keyframes txn-slide-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

.bc-txn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F6AA1C;
  box-shadow: 0 0 6px currentColor;
  flex-shrink: 0;
}

.bc-txn-text {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  flex: 1;
  font-family: "Inter", sans-serif;
}

.bc-txn-status {
  font-size: 10px;
  color: #00ff88;
  font-weight: 700;
}

/* Security badge */
.bc-shield-badge {
  position: absolute;
  top: 16px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(8, 10, 14, 0.9);
  border: 1px solid rgba(148, 27, 12, 0.25);
  border-radius: 20px;
  z-index: 20;
}

.bc-shield-badge span {
  font-size: 9px;
  color: #F6AA1C;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-family: "Inter", sans-serif;
}

/* ═══════════════════════════════════════════════════════ */
/* ─── SERVICES SECTION UPGRADES ─── */
/* ═══════════════════════════════════════════════════════ */

.ms-card-bg-icon {
  position: absolute;
  bottom: -10px;
  right: -10px;
  pointer-events: none;
  opacity: 0.04;
  transition: opacity 0.4s;
}

.main-service-card:hover .ms-card-bg-icon {
  opacity: 0.08;
}

.main-service-card.ms-featured {
  border-color: rgba(148, 27, 12, 0.3);
  background: linear-gradient(135deg,
      rgba(12, 4, 2, 0.07),
      rgba(12, 4, 2, 0.02));
}

.main-service-card.ms-featured:hover {
  border-color: rgba(188, 57, 8, 0.6);
}

.ms-progress-wrap {
  margin-bottom: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.ms-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.ms-progress-bar {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  overflow: hidden;
}

.ms-progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 1s ease;
  box-shadow: 0 0 8px currentColor;
}

.ms-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.ms-chip {
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

/* More services label redesign */
.more-services-label {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 56px 0 28px;
}

.more-services-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
      transparent,
      rgba(255, 255, 255, 0.08),
      transparent);
}

.more-services-label span {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Secondary services with SVG icons */
.sec-icon-wrap {
  width: 44px;
  height: 44px;
  background: rgba(12, 4, 2, 0.04);
  border: 1px solid rgba(12, 4, 2, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.sec-service-card:hover .sec-icon-wrap {
  background: rgba(12, 4, 2, 0.1);
  border-color: rgba(148, 27, 12, 0.35);
  box-shadow: 0 0 16px rgba(12, 4, 2, 0.1);
}

.sec-service-card:hover .sec-icon-wrap svg path,
.sec-service-card:hover .sec-icon-wrap svg rect,
.sec-service-card:hover .sec-icon-wrap svg circle {
  stroke-opacity: 1;
}

/* ═══════════════════════════════════════════════════════ */
/* ─── OUR PROMISE SECTION REDESIGN ─── */
/* ═══════════════════════════════════════════════════════ */

.trust-header {
  text-align: center;
  margin-bottom: 60px;
}

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

.promise-card {
  position: relative;
  padding: 40px 32px 32px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.promise-card:hover:not(.promise-card-featured) {
  border-color: rgba(148, 27, 12, 0.3);
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(12, 4, 2, 0.05);
}

.promise-card-featured {
  background: #F6AA1C;
  border-color: #F6AA1C;
  transform: translateY(-12px);
  box-shadow: 0 32px 80px rgba(148, 27, 12, 0.2),
    0 0 60px rgba(12, 4, 2, 0.1);
}

.promise-card-num {
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(148, 27, 12, 0.4);
  letter-spacing: 3px;
  margin-bottom: 20px;
}

.promise-icon-ring {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: rgba(12, 4, 2, 0.05);
  border: 1px solid rgba(148, 27, 12, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: all 0.3s;
}

.promise-card:hover:not(.promise-card-featured) .promise-icon-ring {
  background: rgba(12, 4, 2, 0.1);
  border-color: rgba(148, 27, 12, 0.35);
  box-shadow: 0 0 20px rgba(12, 4, 2, 0.1);
}

.promise-card-content {
  flex: 1;
  margin-bottom: 20px;
}

.promise-card-content h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.3;
}

.promise-card-content p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.75;
}

.promise-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.promise-tag {
  padding: 4px 10px;
  background: rgba(12, 4, 2, 0.08);
  border: 1px solid rgba(148, 27, 12, 0.15);
  border-radius: 20px;
  font-size: 10px;
  color: rgba(188, 57, 8, 0.7);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.promise-card-glow {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle,
      rgba(12, 4, 2, 0.06) 0%,
      transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  border-radius: 50%;
}

.promise-card:hover .promise-card-glow {
  opacity: 1;
}

/* Promise stats strip */
.promise-stats-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 60px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
}

.pss-item {
  flex: 1;
  text-align: center;
  padding: 0 24px;
}

.pss-val {
  font-family: "Manrope", sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #F6AA1C;
  margin-bottom: 6px;
}

.pss-label {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.pss-divider {
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════ */
/* ─── APP SECTION — 3 PHONE MOCKUPS ─── */
/* ═══════════════════════════════════════════════════════ */

.app-features-list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app-feat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.app-feat-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(12, 4, 2, 0.08);
  border: 1px solid rgba(148, 27, 12, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Phones showcase */
.app-phones-showcase {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  min-height: 480px;
  padding-bottom: 30px;
}


.app-download-image {
  object-fit: cover;
  height: 500px;
  width: 550px;
}

.phone-mockup {
  position: relative;
  flex-shrink: 0;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.7));
}

.phone-mockup-left {
  transform: rotate(-12deg) translateX(20px) translateY(24px);
  z-index: 1;
  opacity: 0.7;
}

.phone-mockup-center {
  z-index: 3;
  transform: translateY(-10px);
}

.phone-mockup-right {
  transform: rotate(12deg) translateX(-20px) translateY(24px);
  z-index: 2;
  opacity: 0.75;
}

.phone-frame {
  width: 160px;
  background: linear-gradient(145deg, #1a1e2a, #0d1017);
  border-radius: 28px;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  padding: 14px 8px 12px;
  overflow: hidden;
  position: relative;
}

.phone-frame-hero {
  width: 175px;
  border-color: rgba(148, 27, 12, 0.25);
  box-shadow: 0 0 30px rgba(12, 4, 2, 0.1), 0 0 60px rgba(12, 4, 2, 0.05);
}

.phone-notch {
  width: 50px;
  height: 8px;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  margin: 0 auto 10px;
}

.phone-frame-hero .phone-notch {
  background: linear-gradient(90deg,
      rgba(12, 4, 2, 0.1),
      rgba(0, 0, 0, 0.9),
      rgba(12, 4, 2, 0.1));
}

.phone-screen {
  background: #080a0e;
  border-radius: 18px;
  overflow: hidden;
  min-height: 310px;
}

.phone-screen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.phone-bill-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 7px;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.phone-txn-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* Phone floating secure badge */
.phone-badge-secure {
  position: absolute;
  top: -14px;
  right: -14px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(8, 10, 14, 0.95);
  border: 1px solid rgba(148, 27, 12, 0.3);
  border-radius: 20px;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.phone-badge-secure span {
  font-size: 9px;
  color: #F6AA1C;
  font-weight: 600;
  font-family: "Inter", sans-serif;
}

/* Phone animations */
.phone-mockup-left {
  animation: float-phone-left 6s ease-in-out infinite;
}

.phone-mockup-center {
  animation: float-phone-center 5s ease-in-out infinite;
}

.phone-mockup-right {
  animation: float-phone-right 7s ease-in-out infinite;
}

@keyframes float-phone-left {

  0%,
  100% {
    transform: rotate(-12deg) translateX(20px) translateY(24px);
  }

  50% {
    transform: rotate(-10deg) translateX(20px) translateY(14px);
  }
}

@keyframes float-phone-center {

  0%,
  100% {
    transform: translateY(-10px);
  }

  50% {
    transform: translateY(-22px);
  }
}

@keyframes float-phone-right {

  0%,
  100% {
    transform: rotate(12deg) translateX(-20px) translateY(24px);
  }

  50% {
    transform: rotate(10deg) translateX(-20px) translateY(16px);
  }
}

/* Glow platform */
.phones-glow-platform {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 60px;
  background: radial-gradient(ellipse,
      rgba(12, 4, 2, 0.12) 0%,
      transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════ */
/* ─── VIDEO SECTION ─── */
/* ═══════════════════════════════════════════════════════ */

.video-section {
  padding: 80px 60px;
  position: relative;
}

.video-section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.video-section-header {
  text-align: center;
  margin-bottom: 52px;
}

.video-embed-wrap {
  position: relative;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(148, 27, 12, 0.15);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), 0 0 60px rgba(12, 4, 2, 0.05);
  aspect-ratio: 16/7;
  background: #0d1117;
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.video-overlay-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  transition: transform 0.3s;
}

.video-embed-wrap:hover .video-overlay-content {
  transform: scale(1.05);
}

.video-play-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #F6AA1C;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 12px rgba(148, 27, 12, 0.15),
    0 0 0 24px rgba(12, 4, 2, 0.06);
  animation: play-ring-pulse 2.5s ease-in-out infinite;
  padding-left: 4px;
}

@keyframes play-ring-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 12px rgba(148, 27, 12, 0.15),
      0 0 0 24px rgba(12, 4, 2, 0.06);
  }

  50% {
    box-shadow: 0 0 0 16px rgba(148, 27, 12, 0.2),
      0 0 0 32px rgba(12, 4, 2, 0.08);
  }
}

.video-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(8, 10, 14, 0.7) 0%,
      transparent 40%,
      transparent 60%,
      rgba(8, 10, 14, 0.4) 100%);
  pointer-events: none;
}

.video-stat-card {
  position: absolute;
  padding: 14px 18px;
  background: rgba(8, 10, 14, 0.88);
  border: 1px solid rgba(148, 27, 12, 0.2);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  z-index: 5;
}

.video-stat-1 {
  bottom: 24px;
  left: 36px;
}

.video-stat-2 {
  bottom: 24px;
  right: 36px;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 6px #00ff88;
  }

  50% {
    opacity: 0.5;
    box-shadow: 0 0 12px #00ff88;
  }
}

/* Responsive for new sections */
@media (max-width: 1024px) {
  .bc-premium-wrap {
    width: 380px;
    height: 380px;
  }

  .promise-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .promise-card-featured {
    transform: none;
  }

  .promise-stats-strip {
    flex-wrap: wrap;
    gap: 24px;
    padding: 28px;
  }

  .pss-divider {
    display: none;
  }

  .app-phones-showcase {
    display: none;
  }

  .app-inner {
    grid-template-columns: 1fr;
  }

  .video-stat-1,
  .video-stat-2 {
    display: none;
  }
}

@media (max-width: 768px) {
  .bc-premium-wrap {
    display: none;
  }

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

  .video-section {
    padding: 60px 24px;
  }

  .video-embed-wrap {
    aspect-ratio: 16/9;
  }
}

/* ═══════════════════════════════════════════════════════ */
/* ─── BHARAT CONNECT — COMPLETE VISUAL REDESIGN ─── */
/* ═══════════════════════════════════════════════════════ */

/* Hide old elements */
.bc-premium-wrap,
.bc-canvas-3d,
.bc-orbit,
.bc-packet,
.bc-txn-feed,
.bc-shield-badge,
.bc-hub-ring {
  display: none;
}

.bc-viz-root {
  position: relative;
  width: 480px;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Canvas for lines */
.bc-lines-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Central hub */
.bc-center-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bc-pulse-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(148, 27, 12, 0.2);
  pointer-events: none;
  animation: bc-pulse-expand 3s ease-out infinite;
}

.bc-pulse-1 {
  width: 100px;
  height: 100px;
  animation-delay: 0s;
}

.bc-pulse-2 {
  width: 140px;
  height: 140px;
  animation-delay: 1s;
  border-color: rgba(12, 4, 2, 0.12);
}

.bc-pulse-3 {
  width: 180px;
  height: 180px;
  animation-delay: 2s;
  border-color: rgba(12, 4, 2, 0.06);
}

@keyframes bc-pulse-expand {
  0% {
    opacity: 0.8;
    transform: scale(0.85);
  }

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

.bc-hub-core {
  width: 140px;
  height: 140px;
  background: linear-gradient(145deg,
      rgba(12, 4, 2, 0.12),
      rgba(12, 4, 2, 0.04));
  border: 1.5px solid rgba(148, 27, 12, 0.45);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 0 32px rgba(148, 27, 12, 0.15), 0 0 64px rgba(12, 4, 2, 0.07),
    inset 0 0 24px rgba(12, 4, 2, 0.04);
  animation: hub-core-breathe 4s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

@keyframes hub-core-breathe {

  0%,
  100% {
    box-shadow: 0 0 32px rgba(148, 27, 12, 0.15),
      0 0 64px rgba(12, 4, 2, 0.07), inset 0 0 24px rgba(12, 4, 2, 0.04);
  }

  50% {
    box-shadow: 0 0 48px rgba(148, 27, 12, 0.28),
      0 0 96px rgba(12, 4, 2, 0.12), inset 0 0 32px rgba(12, 4, 2, 0.08);
  }
}

.bc-hub-text {
  display: none;

  font-family: "Manrope", sans-serif;
  font-size: 9px;
  font-weight: 800;
  color: #F6AA1C;
  text-align: center;
  letter-spacing: 1px;
  line-height: 1.5;
  text-transform: uppercase;
}

.bc-hub-sub {
  font-size: 7.5px;
  color: rgba(188, 57, 8, 0.5);
  letter-spacing: 0.5px;
  text-align: center;
}

/* Node items — positioned absolutely around hub */
.bc-node-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 8;
  cursor: pointer;
}

.bc-ni-top {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
}

.bc-ni-top-right {
  top: 70px;
  right: 52px;
}

.bc-ni-right {
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}

.bc-ni-bot-right {
  bottom: 70px;
  right: 52px;
}

.bc-ni-bot {
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
}

.bc-ni-bot-left {
  bottom: 70px;
  left: 52px;
}

.bc-ni-left {
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
}

.bc-ni-top-left {
  top: 70px;
  left: 52px;
}

.bc-ni-icon-wrap {
  width: 60px;
  height: 60px;
  background: rgba(8, 10, 14, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  backdrop-filter: blur(8px);
}

.bc-node-item:hover .bc-ni-icon-wrap {
  transform: scale(1.12);
  box-shadow: 0 0 18px var(--clr, rgba(148, 27, 12, 0.3));
  border-color: var(--clr, rgba(188, 57, 8, 0.5));
}

/* Pulse dot on each node */
.bc-ni-pulse {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: ni-pulse 2.5s ease-in-out infinite;
}

@keyframes ni-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

.bc-ni-label {
  font-size: 12px;
  font-family: "Inter", sans-serif;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
  white-space: nowrap;
}

/* Live transaction strip */
.bc-live-strip {
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
  height: 34px;
  background: rgba(8, 10, 14, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  z-index: 15;
  backdrop-filter: blur(8px);
}

.bc-live-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  height: 100%;
}

.bc-live-indicator span:last-child {
  font-size: 8px;
  font-weight: 700;
  color: #00ff88;
  letter-spacing: 1px;
  font-family: "Manrope", sans-serif;
}

.bc-live-dot-anim {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 6px #00ff88;
  animation: live-dot-blink 1.2s ease-in-out infinite;
}

@keyframes live-dot-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

.bc-live-scroll-wrap {
  flex: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
}

.bc-live-scroll-inner {
  display: flex;
  gap: 32px;
  animation: bc-scroll-left 18s linear infinite;
  white-space: nowrap;
}

.bc-live-scroll-inner span {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  font-family: "Inter", sans-serif;
}

@keyframes bc-scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* RBI badge */
.bc-rbi-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(8, 10, 14, 0.88);
  border: 1px solid rgba(148, 27, 12, 0.2);
  border-radius: 20px;
  z-index: 20;
  backdrop-filter: blur(8px);
}

.bc-rbi-badge span {
  font-size: 8.5px;
  color: rgba(188, 57, 8, 0.75);
  font-weight: 600;
  letter-spacing: 0.3px;
  font-family: "Inter", sans-serif;
}

/* ═══════════════════════════════════════════════════════ */
/* ─── SERVICE CARD ICON ANIMATIONS ─── */
/* ═══════════════════════════════════════════════════════ */

.ms-icon-wrap {
  width: 72px !important;
  height: 72px !important;
}

.ms-icon-animated {
  position: relative;
  overflow: visible !important;
}

/* FASTag — bar sweeps */
.svc-icon-svg .tag-bar {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: tag-sweep 2s ease-out infinite;
}

@keyframes tag-sweep {
  0% {
    stroke-dashoffset: 60;
    opacity: 0;
  }

  40% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  80% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 60;
    opacity: 0;
  }
}

.svc-icon-svg .wave-1 {
  animation: wave-pulse 2s ease-in-out infinite;
  animation-delay: 0.3s;
}

.svc-icon-svg .wave-2 {
  animation: wave-pulse 2s ease-in-out infinite;
  animation-delay: 0.6s;
}

@keyframes wave-pulse {

  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 0.7;
  }
}

/* Electricity — rays flash */
.svc-icon-svg .elec-r1 {
  animation: elec-flash 1.8s ease-in-out infinite;
}

.svc-icon-svg .elec-r2 {
  animation: elec-flash 1.8s ease-in-out infinite;
  animation-delay: 0.15s;
}

.svc-icon-svg .elec-r3 {
  animation: elec-flash 1.8s ease-in-out infinite;
  animation-delay: 0.3s;
}

@keyframes elec-flash {

  0%,
  100% {
    opacity: 0;
  }

  30%,
  60% {
    opacity: 0.8;
  }
}

/* Education — tassel swings */
.svc-icon-svg .tassel {
  transform-origin: 42px 20px;
  animation: tassel-swing 3s ease-in-out infinite;
}

.svc-icon-svg .tassel-end {
  transform-origin: 42px 20px;
  animation: tassel-swing 3s ease-in-out infinite;
}

@keyframes tassel-swing {

  0%,
  100% {
    transform: rotate(0deg);
  }

  30% {
    transform: rotate(8deg);
  }

  60% {
    transform: rotate(-4deg);
  }
}

/* Insurance — heart pulse */
.svc-icon-svg .ins-heart {
  transform-origin: 24px 26px;
  animation: heart-beat 1.6s ease-in-out infinite;
}

@keyframes heart-beat {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }

  20% {
    transform: scale(1.18);
    opacity: 1;
  }

  40% {
    transform: scale(1);
  }

  60% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.svc-icon-svg .renew-arc {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: arc-draw 3s ease-in-out infinite;
}

@keyframes arc-draw {

  0%,
  100% {
    stroke-dashoffset: 40;
    opacity: 0;
  }

  30%,
  70% {
    stroke-dashoffset: 0;
    opacity: 0.6;
  }
}

/* Card hover — icon scale */
.main-service-card:hover .ms-icon-animated {
  box-shadow: 0 0 20px rgba(148, 27, 12, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════ */
/* ─── FOOTER PREMIUM REDESIGN ─── */
/* ═══════════════════════════════════════════════════════ */

footer {
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}

footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right,
      transparent,
      rgba(148, 27, 12, 0.3),
      transparent);
}



/* Footer main */
.footer-main {
  padding: 60px 60px 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 60px;
  margin-bottom: 48px;
}

/* Certifications */
.footer-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.footer-cert {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(12, 4, 2, 0.06);
  border: 1px solid rgba(148, 27, 12, 0.15);
  border-radius: 6px;
  font-size: 15px;
  color: rgba(188, 57, 8, 0.7);
  font-weight: 700;
  letter-spacing: 0.8px;
  font-family: "Inter", sans-serif;
}

/* Footer link dots */
.footer-link-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  margin-right: 8px;
  flex-shrink: 0;
  transition: all 0.3s;
}

.footer-col a {
  display: flex;
  align-items: center;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.3s;
  padding: 3px 0;
}

.footer-col a:hover {
  color: #F6AA1C;
}

.footer-col a:hover .footer-link-dot {
  transform: scale(1.5);
}

/* Social buttons */
.footer-socials {
  display: flex;
  gap: 10px;
}

.social-btn {
  width: 49px;
  height: 49px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
}

.social-btn:hover {
  border-color: rgba(148, 27, 12, 0.35);
  background: rgba(12, 4, 2, 0.07);
  color: #F6AA1C;
  transform: translateY(-2px);
}

/* Footer bottom */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 60px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin: 0 0 0 0;
}

.footer-bottom-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-bharat-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(12, 4, 2, 0.06);
  border: 1px solid rgba(148, 27, 12, 0.15);
  border-radius: 20px;
  font-size: 15px;
  color: rgba(188, 57, 8, 0.7);
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.footer-bottom span {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.2);
}

/* Responsive */
@media (max-width: 1024px) {
  .bc-viz-root {
    width: 380px;
    height: 380px;
  }

  .bc-ni-icon-wrap {
    width: 40px;
    height: 40px;
  }

  .bc-hub-core {
    width: 84px;
    height: 84px;
  }



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

  .footer-main {
    padding: 40px 24px 0;
  }

  .footer-bottom {
    padding: 20px 24px;
  }


}

@media (max-width: 768px) {
  .bc-viz-root {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 20px 0 60px;
    position: relative;
  }

  /* Hide canvas lines on mobile */
  .bc-lines-canvas {
    display: none;
  }

  /* Center hub shown as full-width banner at top */
  .bc-center-hub {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
  }

  .bc-pulse-ring {
    display: none;
  }

  .bc-hub-core {
    width: auto;
    height: auto;
    border-radius: 16px;
    padding: 14px 28px;
    flex-direction: row;
    gap: 12px;
    width: 100%;
    max-width: 320px;
  }

  .bc-hub-text {
    font-size: 10px;
  }

  .bc-hub-sub {
    font-size: 8px;
  }

  /* Nodes shown in grid */
  .bc-node-item {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .bc-ni-icon-wrap {
    width: 44px;
    height: 44px;
  }

  .bc-ni-label {
    font-size: 9px;
  }

  /* Live strip full width at bottom */
  .bc-live-strip {
    position: relative;
    bottom: auto;
    grid-column: 1 / -1;
    margin-top: 8px;
  }

  /* RBI badge full width */
  .bc-rbi-badge {
    position: relative;
    bottom: auto;
    right: auto;
    left: auto;
    grid-column: 1 / -1;
    justify-content: center;
    margin-top: 8px;
  }

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

  .footer-bottom-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ══════════════════════════════════════════════════════
   ── SERVICE CARDS V2 — CANVAS ANIMATION TOP VISUAL
══════════════════════════════════════════════════════ */
.svc-card-v2 {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.svc-card-v2:hover {
  border-color: rgba(148, 27, 12, 0.35);
  transform: translateY(-8px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), 0 0 40px rgba(12, 4, 2, 0.07);
}

.svc-anim-canvas-wrap {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
  background: #070A0D;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.svc-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.svc-canvas-label {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: rgba(188, 57, 8, 0.6);
  letter-spacing: 1.5px;
}

.svc-card-body {
  padding: 20px 20px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.svc-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(12, 4, 2, 0.08);
  border: 1px solid rgba(148, 27, 12, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.svc-card-v2:hover .svc-icon-badge {
  border-color: rgba(148, 27, 12, 0.45);
  background: rgba(12, 4, 2, 0.14);
}

.svc-icon-yellow {
  background: rgba(12, 4, 2, 0.08);
  border-color: rgba(148, 27, 12, 0.2);
}

.svc-icon-blue {
  background: rgba(0, 200, 255, 0.08);
  border-color: rgba(0, 200, 255, 0.2);
}

.svc-icon-green {
  background: rgba(0, 255, 136, 0.08);
  border-color: rgba(0, 255, 136, 0.2);
}

.svc-card-v2:hover .svc-icon-blue {
  border-color: rgba(0, 200, 255, 0.45);
  background: rgba(0, 200, 255, 0.14);
}

.svc-card-v2:hover .svc-icon-green {
  border-color: rgba(0, 255, 136, 0.45);
  background: rgba(0, 255, 136, 0.14);
}

.svc-stat-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 10px 0 14px;
  padding: 10px 0 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.svc-stat-num {
  font-family: 'Manrope', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--neon);
  line-height: 1;
  text-shadow: 0 0 24px rgba(148, 27, 12, 0.35);
}

.svc-stat-lbl {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

.ms-pf-animated {
  width: 0;
  transition: width 1.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.svc-card-v2.anim-triggered .ms-pf-animated {
  width: var(--pw);
}

/* ══════════════════════════════════════════════════════
   ── PROMISE CARDS V2 — CANVAS VISUAL TOP
══════════════════════════════════════════════════════ */
.promise-v2 {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.promise-v2-visual {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #070A0D;
  flex-shrink: 0;
}

.promise-v2-visual-dark {
  background: rgba(180, 230, 0, 0.06);
}

.promise-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.promise-v2-badge {
  position: absolute;
  bottom: 12px;
  left: 16px;
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(188, 57, 8, 0.9);
  letter-spacing: 1px;
  background: rgba(12, 4, 2, 0.08);
  border: 1px solid rgba(148, 27, 12, 0.25);
  padding: 5px 10px;
  border-radius: 20px;
}

.promise-v2-body {
  padding: 24px 28px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.promise-v2-body h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 8px;
  margin-top: 8px;
}

.promise-v2-body p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 20px;
}

/* ══════════════════════════════════════════════════════
   ── VIDEO SECTION FIXES
══════════════════════════════════════════════════════ */
.video-overlay {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.video-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.video-pause-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, background 0.2s;
  backdrop-filter: blur(8px);
}

.video-pause-btn.visible {
  opacity: 1;
  visibility: visible;
}

.video-pause-btn:hover {
  background: rgba(148, 27, 12, 0.15);
  border-color: rgba(148, 27, 12, 0.4);
}

/* ══════════════════════════════════════════════════════════
   OUR PROMISE — COMPLETELY REBUILT SECTION
   Font: Manrope throughout
══════════════════════════════════════════════════════════ */

.op-section {
  position: relative;
  padding: 120px 60px 100px;
  overflow: hidden;
  font-family: 'Manrope', sans-serif;
}

.op-ambient-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

/* ─── HEADER ─── */
.op-header {
  text-align: center;
  position: relative;
  z-index: 2;
  margin-bottom: 80px;
}

.op-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 24px;
  padding: 7px 18px;
  border: 1px solid rgba(148, 27, 12, 0.2);
  border-radius: 30px;
  background: rgba(12, 4, 2, 0.04);
}

.op-eyebrow-dot {
  width: 6px;
  height: 6px;
  background: var(--neon);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--neon);
  animation: op-dot-blink 1.8s ease-in-out infinite;
}

@keyframes op-dot-blink {

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

  50% {
    opacity: 0.4;
    transform: scale(0.6);
  }
}

.op-title {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(34px, 4.5vw, 62px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -1.5px;
  color: #fff;
  margin-bottom: 20px;
}

.op-hl {
  color: var(--neon);
  position: relative;
}

.op-hl::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--neon), transparent);
  border-radius: 2px;
  opacity: 0.6;
}

.op-subtitle {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.75;
}

/* ─── MAIN 3-COLUMN LAYOUT ─── */
.op-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 40px;
  align-items: center;
  position: relative;
  z-index: 2;
  margin-bottom: 80px;
}

/* ─── PILLARS ─── */
.op-pillars {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.op-pillar {
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.op-pillar.op-visible {
  opacity: 1;
  transform: translateX(0);
}

.op-pillars-right .op-pillar {
  transform: translateX(24px);
  justify-content: flex-end;
}

.op-pillars-right .op-pillar.op-visible {
  transform: translateX(0);
}

.op-pillar-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.3s;
}

.op-pillar:hover .op-pillar-icon {
  transform: scale(1.08);
}

.op-icon-yellow {
  background: rgba(12, 4, 2, 0.07);
  border: 1px solid rgba(148, 27, 12, 0.2);
}

.op-icon-cyan {
  background: rgba(0, 200, 255, 0.07);
  border: 1px solid rgba(0, 200, 255, 0.2);
}

.op-icon-green {
  background: rgba(0, 255, 136, 0.07);
  border: 1px solid rgba(0, 255, 136, 0.2);
}

.op-pillar-text {
  flex: 1;
}

.op-text-r {
  text-align: right;
}

.op-pillar-num {
  font-family: 'Manrope', sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.op-pillar-label {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 3px;
  letter-spacing: 0.2px;
}

.op-pillar-line {
  width: 80px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}

.op-line-r {
  /* Right-side pillars — same size, canvas fills it */
}

/* ─── CENTER GLOBE ─── */
.op-globe-wrap {
  position: relative;
  width: 420px;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Outer orbit ring #1 */
.op-globe-wrap::before {
  content: '';
  position: absolute;
  inset: -36px;
  border-radius: 50%;
  border: 1px solid rgba(12, 4, 2, 0.12);
  animation: globe-orbit-spin 18s linear infinite;
  background: radial-gradient(circle at 30% 30%, rgba(12, 4, 2, 0.04) 0%, transparent 70%);
}

/* Outer orbit ring #2 */
.op-globe-wrap::after {
  content: '';
  position: absolute;
  inset: -68px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 200, 255, 0.1);
  animation: globe-orbit-spin 28s linear infinite reverse;
}

@keyframes globe-orbit-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.op-globe-canvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: drop-shadow(0 0 40px rgba(148, 27, 12, 0.15)) drop-shadow(0 0 80px rgba(0, 80, 200, 0.12));
}

/* Satellite dots on orbit ring */
.op-globe-sat {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F6AA1C;
  box-shadow: 0 0 12px #941B0C;
  top: calc(50% - 4px);
  left: calc(-36px - 4px);
  transform-origin: calc(50% + (210px + 36px)) 50%;
  animation: globe-orbit-spin 18s linear infinite;
}

.op-globe-sat-2 {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00C8FF;
  box-shadow: 0 0 10px #00C8FF;
  top: calc(50% - 3px);
  left: calc(-68px - 3px);
  transform-origin: calc(50% + (210px + 68px)) 50%;
  animation: globe-orbit-spin 28s linear infinite reverse;
}

.op-globe-badge {
  position: absolute;
  top: 24px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: #00FF88;
  letter-spacing: 1.5px;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.25);
  padding: 5px 12px;
  border-radius: 20px;
}

.op-globe-badge-dot {
  width: 6px;
  height: 6px;
  background: #00FF88;
  border-radius: 50%;
  box-shadow: 0 0 8px #00FF88;
  animation: op-dot-blink 1.2s ease-in-out infinite;
}

.op-globe-label {
  position: absolute;
  bottom: 20px;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(188, 57, 8, 0.5);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ─── FEATURE STRIP ─── */
.op-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  margin-bottom: 64px;
}

.op-strip-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}

.op-strip-item:hover {
  background: rgba(12, 4, 2, 0.03);
}

.op-strip-canvas {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  flex-shrink: 0;
  display: block;
}

.op-strip-content {
  flex: 1;
}

.op-strip-title {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}

.op-strip-desc {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 12px;
}

.op-strip-tag {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--neon);
  background: rgba(12, 4, 2, 0.07);
  border: 1px solid rgba(148, 27, 12, 0.18);
  padding: 4px 10px;
  border-radius: 20px;
}

.op-strip-divider {
  width: 1px;
  height: 100px;
  background: rgba(255, 255, 255, 0.07);
}

/* ─── PARTNER LOGOS ─── */
.op-partners {
  position: relative;
  z-index: 2;
  text-align: center;
}

.op-partners-label {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.op-partners-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.op-partner {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.25);
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  transition: all 0.3s;
  cursor: default;
}

.op-partner:hover {
  color: var(--neon);
  border-color: rgba(148, 27, 12, 0.3);
  background: rgba(12, 4, 2, 0.04);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .op-main {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .op-globe-wrap {
    width: 320px;
    height: 320px;
    margin: 0 auto;
  }

  .op-pillars {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .op-pillar {
    transform: none !important;
  }

  .op-strip {
    grid-template-columns: 1fr;
  }

  .op-strip-divider {
    width: 100%;
    height: 1px;
  }
}

@media (max-width: 640px) {
  .op-section {
    padding: 80px 24px 60px;
  }

  .op-title {
    font-size: 32px;
  }

  .op-strip-item {
    padding: 24px 20px;
  }
}

/* ── HERO RESPONSIVE OVERRIDES ── */
@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr 1fr;
    padding: 100px 40px 60px;
    gap: 24px;
  }

  .hero-phone-img {
    max-width: 380px;
  }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
    min-height: 100vh;
    padding: 120px 32px 80px;
    justify-items: center;
    text-align: center;
  }

  .hero-content {
    max-width: 600px;
    align-items: center;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-visual {
    min-height: 360px;
  }

  .hero-phone-img {
    max-width: 320px;
  }
}

@media (max-width: 600px) {
  .hero {
    padding: 100px 20px 60px;
  }

  .hero-phone-img {
    max-width: 260px;
  }
}

/* ══════════════════════════════════════════════════════
   ── SMART BILLS DASHBOARD SECTION
══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   ── SMART BILLS DASHBOARD SECTION — PREMIUM REDESIGN
══════════════════════════════════════════════════════ */

.sbd-section {
  padding: 100px 60px 120px;
  position: relative;
  overflow: hidden;
}

.sbd-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.sbd-header {
  text-align: center;
  margin-bottom: 56px;
  position: relative;
  z-index: 1;
}

.sbd-title {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 16px;
  color: #fff;
}

.sbd-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── KPI ROW ── */
.sbd-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.sbd-kpi-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 24px 24px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s;
}

.sbd-kpi-card:hover {
  transform: translateY(-3px);
}

.sbd-kpi-red {
  border-color: rgba(148, 27, 12, 0.18);
}

.sbd-kpi-red:hover {
  border-color: rgba(148, 27, 12, 0.4);
}

.sbd-kpi-cyan {
  border-color: rgba(0, 200, 255, 0.18);
}

.sbd-kpi-cyan:hover {
  border-color: rgba(0, 200, 255, 0.4);
}

.sbd-kpi-green {
  border-color: rgba(0, 255, 136, 0.18);
}

.sbd-kpi-green:hover {
  border-color: rgba(0, 255, 136, 0.4);
}

.sbd-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(12, 4, 2, 0.08);
  border: 1px solid rgba(148, 27, 12, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sbd-kpi-cyan .sbd-kpi-icon {
  background: rgba(0, 200, 255, 0.08);
  border-color: rgba(0, 200, 255, 0.2);
}

.sbd-kpi-green .sbd-kpi-icon {
  background: rgba(0, 255, 136, 0.08);
  border-color: rgba(0, 255, 136, 0.2);
}

.sbd-kpi-body {
  flex: 1;
  min-width: 0;
}

.sbd-kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.sbd-kpi-value {
  font-family: 'Manrope', sans-serif;
  font-size: 32px;
  font-weight: 900;
  color: #F6AA1C;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 8px;
}

.sbd-val-cyan {
  color: #00C8FF;
}

.sbd-val-green {
  color: #00FF88;
}

.sbd-kpi-trend {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #00FF88;
}

.sbd-kpi-sparkline {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 90px;
  height: 50px;
  opacity: 0.5;
}

/* ── MAIN GRID ── */
.sbd-main-grid {
  display: grid;
  grid-template-columns: 320px 1fr 280px;
  gap: 16px;
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

.sbd-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── CARD SHARED ── */
.sbd-breakdown-card,
.sbd-feed-card,
.sbd-chart-card,
.sbd-donut-card,
.sbd-upcoming-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.sbd-breakdown-card:hover,
.sbd-chart-card:hover {
  border-color: rgba(148, 27, 12, 0.2);
}

.sbd-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.sbd-card-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.2px;
}

.sbd-card-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}

.sbd-tag-warn {
  color: #FFB800;
  background: rgba(255, 184, 0, 0.08);
  border-color: rgba(255, 184, 0, 0.2);
}

/* ── BREAKDOWN CANVAS ── */
.sbd-breakdown-canvas {
  width: 100%;
  height: 80px;
  display: block;
  margin-bottom: 16px;
  border-radius: 8px;
}

/* ── CATEGORY LIST ── */
.sbd-cat-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sbd-cat-row {
  display: grid;
  grid-template-columns: 100px 1fr 50px;
  align-items: center;
  gap: 10px;
}

.sbd-cat-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sbd-cat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sbd-cat-name {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}

.sbd-cat-bar-wrap {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
}

.sbd-cat-bar {
  height: 100%;
  width: 0;
  background: var(--clr, #941B0C);
  border-radius: 3px;
  transition: width 1.6s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 0 8px var(--clr, #941B0C);
}

.sbd-main-grid.visible .sbd-cat-bar,
.sbd-cat-bar.animated {
  width: var(--w, 50%);
}

.sbd-cat-amt {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-primary);
  text-align: right;
}

/* ── LIVE FEED ── */
.sbd-feed-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  color: #00FF88;
  letter-spacing: 1px;
}

.sbd-feed-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sbd-feed-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.2s;
}

.sbd-feed-item:last-child {
  border-bottom: none;
}

.sbd-feed-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sbd-feed-info {
  flex: 1;
  min-width: 0;
}

.sbd-feed-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sbd-feed-time {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.sbd-feed-amt {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

/* ── CHART CARD (center) ── */
.sbd-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.sbd-chart-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 3px;
}

.sbd-chart-subtitle {
  font-size: 11px;
  color: var(--text-muted);
}

.sbd-live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  color: #00FF88;
  letter-spacing: 1px;
}

.sbd-chart-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.sbd-tab {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Manrope', sans-serif;
}

.sbd-tab:hover {
  border-color: rgba(148, 27, 12, 0.3);
  color: rgba(188, 57, 8, 0.8);
}

.sbd-tab-active {
  background: rgba(12, 4, 2, 0.1);
  border-color: rgba(148, 27, 12, 0.35);
  color: #F6AA1C;
}

.sbd-canvas {
  width: 100%;
  height: 200px;
  display: block;
}

.sbd-chart-months {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding: 0 2px;
}

.sbd-chart-months span {
  font-size: 11px;
  color: var(--text-muted);
}

.sbd-chart-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sbd-chart-stat {
  text-align: center;
  padding: 0 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.sbd-chart-stat:last-child {
  border-right: none;
}

.sbd-chart-stat-val {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 4px;
}

.sbd-chart-stat-lbl {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ── DONUT ── */
.sbd-donut-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 16px;
}

.sbd-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.sbd-donut-pct {
  font-family: 'Manrope', sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: #F6AA1C;
  line-height: 1;
  text-shadow: 0 0 20px rgba(148, 27, 12, 0.4);
}

.sbd-donut-lbl {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 3px;
  letter-spacing: 0.5px;
}

.sbd-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sbd-dl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.sbd-dl-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── UPCOMING BILLS ── */
.sbd-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.sbd-upcoming-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sbd-upcoming-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(148, 27, 12, 0.3);
  background: rgba(12, 4, 2, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sbd-upcoming-info {
  flex: 1;
  min-width: 0;
}

.sbd-upcoming-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sbd-upcoming-due {
  font-size: 10px;
  margin-top: 2px;
  font-weight: 600;
}

.sbd-upcoming-amt {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
}

.sbd-autopay-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, rgba(12, 4, 2, 0.12), rgba(12, 4, 2, 0.06));
  border: 1px solid rgba(148, 27, 12, 0.3);
  border-radius: 12px;
  color: #F6AA1C;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sbd-autopay-btn:hover {
  background: rgba(148, 27, 12, 0.18);
  border-color: rgba(188, 57, 8, 0.5);
  transform: translateY(-1px);
}

.sbd-feed-new {
  animation: feedSlideIn 0.4s ease forwards;
}

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

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

/* ── LIVE DOT ── */
.sbd-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00FF88;
  box-shadow: 0 0 8px #00FF88;
  animation: sbd-dot-blink 1.4s ease-in-out infinite;
  flex-shrink: 0;
  display: inline-block;
}

@keyframes sbd-dot-blink {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 8px #00FF88;
  }

  50% {
    opacity: 0.4;
    box-shadow: 0 0 3px #00FF88;
  }
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .sbd-main-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sbd-panel-right {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

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

  .sbd-main-grid {
    grid-template-columns: 1fr;
  }

  .sbd-panel-right {
    grid-column: auto;
    display: flex;
    flex-direction: column;
  }

  .sbd-section {
    padding: 80px 40px;
  }
}

@media (max-width: 640px) {
  .sbd-section {
    padding: 60px 20px;
  }

  .sbd-chart-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .sbd-chart-stat:nth-child(2) {
    border-right: none;
  }
}


.sbd-insight {
  padding: 10px 12px;
}

.sbd-pill-val {
  font-size: 16px;
}

.sbd-pill {
  padding: 10px 6px;
}


/* ── PILLAR CHART CANVASES ── */
.op-pillar-line {
  position: relative;
  overflow: hidden;
}

.op-pillar-chart {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════
   REFACTORED INLINE → CSS CLASSES
   ═══════════════════════════════════════════════════ */

/* ── Ticker ── */
.ticker-wrap {
  margin-top: 72px;
}

/* ── Bharat Connect feature list ── */
/* ADD these new styles */
.bc-feature-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}

.bc-feature-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}

.bc-feature-star {
  color: #BC3908;
  font-size: 14px;
  text-shadow: 0 0 10px rgba(188, 57, 8, 0.7);
}

/* bc-node pulse uses --clr CSS custom property */
.bc-ni-pulse {
  background: rgba(var(--clr-rgb, 200, 255, 0), 0.2);
}

.bc-ni-icon-wrap {
  border-color: color-mix(in srgb, var(--clr, #941B0C) 35%, transparent);
}

/* ── Buttons ── */
.btn-hero-sm {
  font-size: 13px;
  padding: 12px 24px;
}

.btn-hero-cta {
  font-size: 15px;
  padding: 16px 40px;
}

.btn-ghost-cta {
  font-size: 15px;
  padding: 16px 40px;
}

/* ── Section tags ── */
.section-tag-centered {
  margin: 0 auto 20px;
}

/* ── Section titles ── */
.section-title-lg {
  font-size: clamp(32px, 4vw, 60px);
}

.section-title-md {
  font-size: clamp(28px, 3.5vw, 50px);
}

.section-title-sm {
  font-size: clamp(24px, 3vw, 44px);
}

.section-title-center {
  text-align: center;
}

/* ── Services description ── */
.services-desc {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 500px;
  margin: 20px auto 0;
  line-height: 1.7;
}

/* ── ms-progress fills by color ── */
.ms-pf-yellow {
  background: #F6AA1C;
}

.ms-pf-gradient {
  background: linear-gradient(90deg, #941B0C, #00FF88);
}

.ms-pf-cyan {
  background: #00C8FF;
}

.ms-pf-green {
  background: #00FF88;
}

/* ── Service canvas labels ── */
.svc-canvas-label-yellow {
  color: #F6AA1C;
}

.svc-canvas-label-green {
  color: #00FF88;
}

/* ── Electricity featured card ── */
.svc-icon-badge-elec {
  background: rgba(148, 27, 12, 0.18);
  border-color: rgba(188, 57, 8, 0.5);
}

.ms-badge-popular {
  background: rgba(148, 27, 12, 0.2);
  border-color: rgba(188, 57, 8, 0.5);
}

.ms-title-lg {
  font-size: 18px;
}

/* ── Stat number colors ── */
.svc-stat-cyan {
  color: #00C8FF;
}

.svc-stat-green {
  color: #00FF88;
}

/* ── Video section description ── */
.video-section-desc {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 16px auto 0;
  line-height: 1.7;
  text-align: center;
}

/* ── Video overlay info ── */
.video-overlay-info {
  margin-top: 16px;
}

.video-watch-label {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #F6AA1C;
  letter-spacing: 1px;
}

.video-duration {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

/* ── Video stat cards ── */
.vsc-big-num {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #F6AA1C;
}

.vsc-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

.vsc-live-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vsc-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00FF88;
  box-shadow: 0 0 8px #00FF88;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

.vsc-live-label {
  font-size: 10px;
  color: #00FF88;
  font-weight: 700;
}

.vsc-amount {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-top: 4px;
}

.vsc-sublabel {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
}

/* ── sbd-insight warn icon ── */
.sbd-insight-warn-icon {
  color: #FFB800;
}

/* ── sbd donut legend dots ── */
.sbd-dl-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

.sbd-dl-paid {
  background: #F6AA1C;
}

.sbd-dl-pending {
  background: rgba(255, 255, 255, 0.08);
}

/* ── sbd cat dots ── */
.sbd-dot-yellow {
  background: #F6AA1C;
}

.sbd-dot-orange {
  background: #FFB800;
}

.sbd-dot-cyan {
  background: #00C8FF;
}

.sbd-dot-green {
  background: #00FF88;
}

.sbd-dot-red {
  background: #BC3908;
}

/* ── Testimonials header ── */
.testimonials-header {
  margin-bottom: 48px;
}

/* ── CTA decorative SVGs ── */
.cta-deco {
  position: absolute;
  opacity: 0.06;
}

.cta-deco-tr {
  top: 20px;
  right: 20px;
}

.cta-deco-bl {
  bottom: 20px;
  left: 20px;
}

/* ── Footer ── */
.footer-logo {
  display: block;
  margin-bottom: 16px;
}

.logo-accent {
  color: #F6AA1C;
}



.footer-socials {
  margin-top: 24px;
}

.fdot-yellow {
  background: #F6AA1C;
}

.fdot-orange {
  background: #FFB800;
}

.fdot-green {
  background: #00FF88;
}

.fdot-cyan {
  background: #00C8FF;
}

.fdot-red {
  background: #BC3908;
}

.footer-cin {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.2);
}

/* ── Phone mockup screen elements ── */
.ps-header-label {
  font-size: 8px;
  color: rgba(188, 57, 8, 0.7);
  font-family: 'Manrope', sans-serif;
}

.ps-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00FF88;
  box-shadow: 0 0 6px #00FF88;
}

.ps-traffic-lights {
  display: flex;
  gap: 3px;
}

.ps-tl-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.ps-tl-red {
  background: #BC3908;
}

.ps-tl-yellow {
  background: #FFB800;
}

.ps-tl-green {
  background: #00FF88;
}

.ps-pad-top {
  padding: 8px 10px;
}

.ps-pad-top-sm {
  padding: 8px 10px 4px;
}

.ps-eyebrow {
  font-size: 7px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 2px;
}

.ps-big-amount {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #F6AA1C;
}

.ps-pending {
  font-size: 6px;
  color: #00FF88;
  margin-top: 2px;
}

.ps-bill-list {
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ps-amt-yellow {
  color: #F6AA1C;
}

.ps-amt-cyan {
  color: #00C8FF;
}

.ps-amt-dim {
  color: rgba(255, 255, 255, 0.5);
}

.ps-pay-btn {
  margin: 8px 10px 0;
  padding: 7px;
  background: #F6AA1C;
  border-radius: 7px;
  text-align: center;
  font-size: 8px;
  font-weight: 800;
  color: #000;
}

.ps-savings-amount {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
}

.ps-savings-label {
  font-size: 6px;
  color: rgba(255, 255, 255, 0.3);
}

.ps-mini-chart {
  padding: 4px 10px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 36px;
}

.ps-bar {
  flex: 1;
  border-radius: 2px;
}

.ps-bar-1 {
  background: rgba(148, 27, 12, 0.2);
  height: 40%;
}

.ps-bar-2 {
  background: rgba(148, 27, 12, 0.3);
  height: 60%;
}

.ps-bar-3 {
  background: rgba(148, 27, 12, 0.4);
  height: 45%;
}

.ps-bar-4 {
  background: rgba(188, 57, 8, 0.6);
  height: 75%;
}

.ps-bar-5 {
  background: #F6AA1C;
  height: 100%;
  box-shadow: 0 0 6px #941B0C;
}

.ps-bill-status-list {
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ps-bill-row {
  display: flex;
  justify-content: space-between;
  font-size: 7px;
  padding: 5px 7px;
  border-radius: 6px;
  border: 1px solid transparent;
}

.ps-bill-row-green {
  background: rgba(12, 4, 2, 0.06);
  border-color: rgba(148, 27, 12, 0.15);
}

.ps-bill-row-cyan {
  background: rgba(0, 200, 255, 0.06);
  border-color: rgba(0, 200, 255, 0.15);
}

.ps-bill-row-dim {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
}

.ps-br-label {
  color: rgba(255, 255, 255, 0.6);
}

.ps-br-status {
  font-weight: 700;
}

.ps-br-paid {
  color: #F6AA1C;
}

.ps-br-live {
  color: #00C8FF;
}

.ps-br-due {
  color: #FFB800;
}

.ps-add-bill {
  margin: 4px 10px 8px;
  padding: 7px;
  background: rgba(12, 4, 2, 0.08);
  border: 1px solid rgba(148, 27, 12, 0.2);
  border-radius: 7px;
  text-align: center;
  font-size: 7px;
  font-weight: 700;
  color: #F6AA1C;
}

.ps-txn-heading {
  font-size: 7px;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 2px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ps-txn-icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ps-txn-icon-yellow {
  background: rgba(148, 27, 12, 0.15);
}

.ps-txn-icon-cyan {
  background: rgba(0, 200, 255, 0.15);
}

.ps-txn-icon-red {
  background: rgba(255, 107, 107, 0.15);
}

.ps-txn-icon-orange {
  background: rgba(255, 184, 0, 0.15);
}

.ps-txn-info {
  flex: 1;
}

.ps-txn-name {
  font-size: 7px;
  color: #fff;
}

.ps-txn-time {
  font-size: 6px;
  color: rgba(255, 255, 255, 0.3);
}

.ps-txn-amt {
  font-size: 7px;
  font-weight: 700;
}

.ps-txn-success {
  color: #00FF88;
}

.ps-txn-cyan {
  color: #00C8FF;
}

.ps-txn-dim {
  color: rgba(255, 255, 255, 0.5);
}

.ps-view-all {
  margin: 4px 10px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  text-align: center;
  font-size: 7px;
  color: rgba(255, 255, 255, 0.3);
}

/* ── App download section user avatars ── */
.app-users-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.app-user-avatars {
  display: flex;
}

.app-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #080A0E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  color: #000;
}

.app-avatar-1 {
  background: linear-gradient(135deg, #941B0C, #00FF88);
  margin-right: -8px;
}

.app-avatar-2 {
  background: linear-gradient(135deg, #00C8FF, #941B0C);
  margin-right: -8px;
}

.app-avatar-3 {
  background: linear-gradient(135deg, #BC3908, #941B0C);
}

.app-users-text {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════
   ─── HOW IT WORKS SECTION ───
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   HOW IT WORKS — FULL REDESIGN (matches bharat/services style)
═══════════════════════════════════════════════════════════ */

.how-it-works-section {
  padding: 120px 60px;
  position: relative;
  background: transparent;
}

/* Outer card — identical to bharat-inner & services-inner */
.hiw-inner {
  position: relative;
  background: linear-gradient(135deg,
      rgba(148, 27, 12, 0.03) 0%,
      rgba(8, 10, 14, 0.98) 60%,
      rgba(188, 57, 8, 0.02) 100%);
  border: 1px solid rgba(188, 57, 8, 0.18);
  border-radius: 32px;
  padding: 80px 60px;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
}

/* Ambient top-right glow */
.hiw-ambient {
  position: absolute;
  top: -150px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(188, 57, 8, 0.04) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Header ── */
.hiw-header {
  /* text-align: center; */
  /* max-width: 620px; */
  margin: 0 auto 64px;
}

.section-tag-centered {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}

.hiw-sub {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-top: 16px;
}

/* ── 4-Column Steps Grid ── */
.hiw-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 56px;
  position: relative;
}

/* Step Card Base */
.hiw-step-card {
  position: relative;
  background: rgba(255, 255, 255, 0.025);
  border-radius: 20px;
  padding: 32px 24px 28px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.3s, box-shadow 0.3s;
  /* overflow: hidden; */
}

.hiw-step-card:hover {
  transform: translateY(-8px);
}

/* Color variants */
.hiw-sc-yellow {
  border-color: rgba(255, 184, 0, 0.14);
}

.hiw-sc-yellow:hover {
  border-color: rgba(255, 184, 0, 0.28);
  box-shadow: 0 16px 48px rgba(255, 184, 0, 0.07);
}

.hiw-sc-red {
  border-color: rgba(188, 57, 8, 0.18);
}

.hiw-sc-red:hover {
  border-color: rgba(188, 57, 8, 0.35);
  box-shadow: 0 16px 48px rgba(188, 57, 8, 0.09);
}

.hiw-sc-cyan {
  border-color: rgba(0, 200, 255, 0.12);
}

.hiw-sc-cyan:hover {
  border-color: rgba(0, 200, 255, 0.26);
  box-shadow: 0 16px 48px rgba(0, 200, 255, 0.06);
}

.hiw-sc-green {
  border-color: rgba(0, 255, 136, 0.12);
}

.hiw-sc-green:hover {
  border-color: rgba(0, 255, 136, 0.26);
  box-shadow: 0 16px 48px rgba(0, 255, 136, 0.06);
}

/* Step Number */
.hiw-sc-num {
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.15);
  margin-bottom: 20px;
}

/* Icon wrap */
.hiw-sc-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: rgba(255, 184, 0, 0.07);
  border: 1px solid rgba(255, 184, 0, 0.16);
}

.hiw-icon-red {
  background: rgba(148, 27, 12, 0.09);
  border-color: rgba(188, 57, 8, 0.2);
}

.hiw-icon-cyan {
  background: rgba(0, 200, 255, 0.07);
  border-color: rgba(0, 200, 255, 0.16);
}

.hiw-icon-green {
  background: rgba(0, 255, 136, 0.06);
  border-color: rgba(0, 255, 136, 0.14);
}

/* Text */
.hiw-sc-title {
  font-family: "Manrope", sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 10px;
  line-height: 1.25;
}

.hiw-sc-desc {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.65;
  margin: 0 0 18px;
}

/* Step 1 — Pill tags */
.hiw-sc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hiw-sc-pills span {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255, 184, 0, 0.07);
  border: 1px solid rgba(255, 184, 0, 0.16);
  color: rgba(255, 184, 0, 0.75);
}

/* Step 2 — App Preview */
.hiw-sc-app-preview {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hiw-app-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.hiw-app-field-label {
  color: rgba(255, 255, 255, 0.28);
}

.hiw-app-field-val {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.hiw-app-amt {
  color: #BC3908;
  font-size: 15px;
  font-weight: 800;
}

/* Step 3 — Success chip */
.hiw-sc-success {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  background: rgba(0, 200, 255, 0.06);
  border: 1px solid rgba(0, 200, 255, 0.15);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0, 200, 255, 0.85);
}

.hiw-success-pulse {
  width: 7px;
  height: 7px;
  background: #00C8FF;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.8);
  animation: hiwPulse 1.5s ease-in-out infinite;
}

@keyframes hiwPulse {

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

  50% {
    opacity: 0.5;
    transform: scale(1.3);
  }
}

.hiw-success-txt {
  flex: 1;
}

.hiw-success-check {
  color: #00C8FF;
  font-weight: 800;
}

/* Step 4 — Earn chip */
.hiw-sc-earn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(0, 255, 136, 0.05);
  border: 1px solid rgba(0, 255, 136, 0.14);
  border-radius: 10px;
}

.hiw-earn-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 3px;
}

.hiw-earn-amount {
  font-size: 22px;
  font-weight: 800;
  color: #00FF88;
  font-family: "Manrope", sans-serif;
}

.hiw-earn-right {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
}

/* Connector arrow between cards */
.hiw-sc-connector {
  position: absolute;
  top: 50%;
  right: -18px;
  transform: translateY(-50%);
  font-size: 18px;
  z-index: 10;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
}

.hiw-conn-yellow {
  color: rgba(255, 184, 0, 0.6);
  background: rgba(255, 184, 0, 0.07);
  border: 1px solid rgba(255, 184, 0, 0.18);
}

.hiw-conn-red {
  color: rgba(188, 57, 8, 0.7);
  background: rgba(188, 57, 8, 0.07);
  border: 1px solid rgba(188, 57, 8, 0.2);
}

.hiw-conn-cyan {
  color: rgba(0, 200, 255, 0.6);
  background: rgba(0, 200, 255, 0.06);
  border: 1px solid rgba(0, 200, 255, 0.14);
}

/* ── Benefit Bar ── */
.hiw-benefit-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(188, 57, 8, 0.15);
  border-radius: 20px;
  padding: 32px 40px;
}

.hiw-benefit-item {
  flex: 1;
  text-align: center;
  padding: 0 24px;
}

.hiw-benefit-val {
  font-family: "Manrope", sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #F6AA1C;
  margin-bottom: 6px;
}

.hiw-benefit-lbl {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.5px;
}

.hiw-benefit-divider {
  width: 1px;
  height: 48px;
  background: rgba(188, 57, 8, 0.25);
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .hiw-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .hiw-sc-connector {
    display: none;
  }
}

@media (max-width: 992px) {
  .how-it-works-section {
    padding: 60px 24px;
  }

  .hiw-inner {
    padding: 48px 28px;
    border-radius: 24px;
  }
}

@media (max-width: 640px) {
  .how-it-works-section {
    padding: 40px 16px;
  }

  .hiw-inner {
    padding: 32px 20px;
    border-radius: 20px;
  }

  .hiw-steps {
    grid-template-columns: 1fr;
  }

  .hiw-benefit-bar {
    flex-direction: column;
    gap: 24px;
    padding: 28px 24px;
  }

  .hiw-benefit-divider {
    width: 48px;
    height: 1px;
  }
}

/* new how it works section css  */


/* new how it works section css  */

/* ═══════════════════════════════════════════════════════════
   BILL CATEGORIES — ALIGNED WITH BHARAT/SERVICES STYLE
═══════════════════════════════════════════════════════════ */

.bill-categories-section {
  padding: 120px 60px;
  position: relative;
  background: transparent;
}

/* Outer card — identical to bharat-inner & services-inner */
.bc-cat-inner {
  position: relative;
  background: linear-gradient(135deg,
      rgba(148, 27, 12, 0.03) 0%,
      rgba(8, 10, 14, 0.98) 60%,
      rgba(188, 57, 8, 0.02) 100%);
  border: 1px solid rgba(188, 57, 8, 0.18);
  border-radius: 32px;
  padding: 80px 60px;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
}

/* Ambient top-right glow */
.bc-cat-ambient {
  position: absolute;
  top: -150px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(188, 57, 8, 0.04) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Header ── */
.bc-cat-header {
  text-align: center;
  margin-bottom: 60px;
}

.bc-cat-sub {
  max-width: 580px;
  margin: 14px auto 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.7;
}

/* ── Mosaic Grid ── */
.bc-cat-mosaic {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  margin-bottom: 48px;
}

/* Card base */
.bc-cat-card {
  position: relative;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bc-cat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(188, 57, 8, 0.3);
}

.bc-cat-card-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(188, 57, 8, 0.07), transparent 70%);
  pointer-events: none;
}

/* Featured card */
.bc-cat-featured {
  grid-row: span 1;
  min-height: 340px;
  display: flex;
  align-items: stretch;
  border-color: rgba(188, 57, 8, 0.2);
}

.bc-cat-featured:hover {
  border-color: rgba(188, 57, 8, 0.4);
  box-shadow: 0 16px 48px rgba(188, 57, 8, 0.08);
}

/* Card inner padding */
.bc-cat-card-inner {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  position: relative;
  z-index: 1;
}

/* Icon */
.bc-cat-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(148, 27, 12, 0.08);
  border: 1px solid rgba(148, 27, 12, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.bc-cat-card-title {
  font-family: "Manrope", sans-serif;
  font-size: 21px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.bc-cat-card-stat {
  font-size: 12px;
  color: rgba(188, 57, 8, 0.85);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.bc-cat-card-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.65;
}

.bc-cat-card-commission {
  display: inline-block;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.22);
  color: #00FF88;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  width: fit-content;
  margin-top: auto;
}

.bc-cat-visual-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.bc-cat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #941B0C, #BC3908);
  border-radius: 2px;
  animation: barGrow 1.2s ease both;
}

.bc-bar-yellow {
  background: linear-gradient(90deg, #FFB800, #F6AA1C);
}

.bc-bar-cyan {
  background: linear-gradient(90deg, #00C8FF, #0088CC);
}

@keyframes barGrow {
  from {
    width: 0 !important;
  }
}

.bc-cat-bar-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: -4px;
}

/* Featured image accent */
.bc-cat-img-accent {
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: 180px;
  border-radius: 0 20px 0 80%;
  overflow: hidden;
  opacity: 0.25;
}

.bc-cat-accent-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Medium cards */
.bc-cat-medium {
  display: flex;
  flex-direction: column;
  min-height: 240px;
}

.bc-cat-medium .bc-cat-card-inner {
  padding: 32px 28px;
}

.bc-cat-img-side {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 140px;
  height: 110px;
  overflow: hidden;
  border-radius: 20px 0 20px 0;
  opacity: 0.18;
}

.bc-cat-side-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Icon bg per category */
.bc-cat-fastag .bc-cat-card-icon {
  background: rgba(255, 184, 0, 0.08);
  border-color: rgba(255, 184, 0, 0.2);
}

.bc-cat-edu .bc-cat-card-icon {
  background: rgba(0, 200, 255, 0.08);
  border-color: rgba(0, 200, 255, 0.2);
}

.bc-cat-insurance .bc-cat-card-icon {
  background: rgba(0, 255, 136, 0.08);
  border-color: rgba(0, 255, 136, 0.2);
}

.bc-cat-water .bc-cat-card-icon {
  background: rgba(0, 180, 255, 0.08);
  border-color: rgba(0, 180, 255, 0.2);
}

.bc-cat-gas .bc-cat-card-icon {
  background: rgba(255, 120, 0, 0.08);
  border-color: rgba(255, 120, 0, 0.2);
}

.bc-cat-dth .bc-cat-card-icon {
  background: rgba(255, 107, 107, 0.08);
  border-color: rgba(255, 107, 107, 0.2);
}

.bc-cat-loan .bc-cat-card-icon {
  background: rgba(148, 27, 12, 0.08);
  border-color: rgba(148, 27, 12, 0.2);
}

.bc-cat-broadband .bc-cat-card-icon {
  background: rgba(167, 139, 250, 0.08);
  border-color: rgba(167, 139, 250, 0.2);
}

/* ── Small Cards Row ── */
.bc-cat-small-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.bc-cat-small {
  min-height: 190px;
}

.bc-cat-small .bc-cat-card-inner {
  padding: 26px 22px;
  gap: 10px;
}

.bc-cat-small .bc-cat-card-icon {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  margin-bottom: 6px;
}

.bc-cat-small .bc-cat-card-title {
  font-size: 15px;
  font-weight: 800;
}

.bc-cat-small .bc-cat-card-stat {
  font-size: 11px;
}

.bc-cat-small .bc-cat-card-commission {
  font-size: 11px;
  padding: 4px 10px;
  margin-top: auto;
}

/* ── Bottom CTA ── */
.bc-cat-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.bc-cat-cta-text {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .bc-cat-mosaic {
    grid-template-columns: 1fr 1fr;
  }

  .bc-cat-featured {
    grid-column: span 2;
    min-height: auto;
  }

  .bc-cat-small-row {
    grid-template-columns: repeat(3, 1fr);
    grid-column: span 2;
  }
}

@media (max-width: 992px) {
  .bill-categories-section {
    padding: 60px 24px;
  }

  .bc-cat-inner {
    padding: 48px 28px;
    border-radius: 24px;
  }
}

@media (max-width: 700px) {
  .bill-categories-section {
    padding: 40px 16px;
  }

  .bc-cat-inner {
    padding: 32px 20px;
    border-radius: 20px;
  }

  .bc-cat-mosaic {
    grid-template-columns: 1fr;
  }

  .bc-cat-featured {
    grid-column: span 1;
  }

  .bc-cat-small-row {
    grid-template-columns: repeat(2, 1fr);
    grid-column: span 1;
  }
}


/* bill categories section end  */

/* ═══════════════════════════════════════════════════════════
   WHY SHOPKEEPERS — ALIGNED WITH BHARAT/SERVICES STYLE
═══════════════════════════════════════════════════════════ */

.why-shopkeeper-section {
  padding: 120px 60px;
  position: relative;
  background: transparent;
}

/* Outer enclosed card — same as bharat-inner, services-inner, bc-cat-inner */
.ws-inner {
  position: relative;
  background: linear-gradient(135deg,
    rgba(148, 27, 12, 0.03) 0%,
    rgba(8, 10, 14, 0.98) 60%,
    rgba(188, 57, 8, 0.02) 100%);
  border: 1px solid rgba(188, 57, 8, 0.18);
  border-radius: 32px;
  padding: 80px 60px;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
}

/* Ambient top-right glow */
.ws-ambient-glow {
  position: absolute;
  top: -150px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(188, 57, 8, 0.04) 0%, transparent 65%);
  pointer-events: none;
}

/* Header */
.ws-header {
  text-align: center;
  margin-bottom: 64px;
  position: relative;
  z-index: 1;
}

.ws-sub {
  max-width: 580px;
  margin: 14px auto 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.7;
}

/* Two-column layout */
.ws-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* ── LEFT: Photo stack ── */
.ws-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Primary photo */
.ws-photo-wrap {
  position: relative;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

.ws-photo {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

.ws-photo-overlay {
  position: absolute;
  inset: 0;
  /* background: linear-gradient(to top, rgba(5, 7, 12, 0.15) 0%, transparent 55%); */
}

/* Floating cards */
.ws-float-card {
  position: absolute;
  background: rgba(8, 10, 14, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(188, 57, 8, 0.3);
  border-radius: 14px;
  padding: 14px 18px;
  z-index: 2;
  animation: wsFloat 4s ease-in-out infinite alternate;
}

.ws-float-income {
  bottom: 24px;
  left: 20px;
}

.ws-float-txns {
  top: 20px;
  right: 20px;
  animation-delay: 1.5s;
}

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

.ws-float-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.ws-float-amount {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 4px 0;
  font-family: 'Manrope', sans-serif;
}

.ws-float-sm { font-size: 22px; }

.ws-float-change { font-size: 11px; font-weight: 600; }
.ws-change-up    { color: #00FF88; }

/* ── Duo images row ── */
.ws-img-duo {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  margin-top: 5px;
}

.ws-img-duo-card {
  position: relative;
  overflow: hidden;
}

.ws-img-duo-card:first-child {
  border-right: 1px solid rgba(188, 57, 8, 0.12);
}

.ws-duo-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  border-radius: 10px;

  transition: filter 0.35s, transform 0.35s;
}

.ws-img-duo-card:hover .ws-duo-img {
  filter: brightness(0.9) saturate(1);
  transform: scale(1.04);
}

.ws-duo-label {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.45);
  padding: 3px 9px;
  border-radius: 6px;
  backdrop-filter: blur(6px);
}

/* Stats bar — flush below duo images */
.ws-photo-stats {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(188, 57, 8, 0.15);
  border-top: none;
  border-radius: 0 0 20px 20px;
  padding: 12px 32px;
  display: none;
}

.ws-photo-stat {
  flex: 1;
  text-align: center;
}

.ws-ps-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'Manrope', sans-serif;
}

.ws-ps-lbl {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 3px;
}

.ws-ps-divider {
  width: 1px;
  height: 40px;
  background: rgba(188, 57, 8, 0.2);
}

/* ── RIGHT: Benefits ── */
.ws-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ws-benefit-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  opacity: 0;
  transform: translateX(30px);
  animation: wsSlideIn 0.5s ease both;
}

.ws-benefit-card:nth-child(1) { animation-delay: 0.1s; }
.ws-benefit-card:nth-child(2) { animation-delay: 0.2s; }
.ws-benefit-card:nth-child(3) { animation-delay: 0.3s; }
.ws-benefit-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes wsSlideIn {
  to { opacity: 1; transform: translateX(0); }
}

.ws-benefit-card:hover {
  border-color: rgba(188, 57, 8, 0.28);
  transform: translateX(5px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.ws-benefit-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid;
}

.ws-bi-yellow { background: rgba(255,184,0,0.08);  border-color: rgba(255,184,0,0.25); }
.ws-bi-red    { background: rgba(148,27,12,0.08);  border-color: rgba(148,27,12,0.25); }
.ws-bi-cyan   { background: rgba(0,200,255,0.08);  border-color: rgba(0,200,255,0.25); }
.ws-bi-green  { background: rgba(0,255,136,0.08);  border-color: rgba(0,255,136,0.25); }

.ws-benefit-body  { flex: 1; }

.ws-benefit-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.ws-benefit-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  text-align: justify;
}

.ws-benefit-tag {
  font-size: 11px;
  font-weight: 700;
  color: #00FF88;
  background: rgba(0,255,136,0.08);
  border: 1px solid rgba(0,255,136,0.2);
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
}

.ws-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.ws-cta-note {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Responsive ── */
@media (max-width: 992px) {
  .why-shopkeeper-section { padding: 60px 24px; }
  .ws-inner { padding: 48px 28px; border-radius: 24px; }
}

@media (max-width: 900px) {
  .ws-layout { grid-template-columns: 1fr; }
  .ws-photo   { height: 300px; }
  .ws-duo-img { height: 130px; }
}

@media (max-width: 640px) {
  .why-shopkeeper-section { padding: 40px 16px; }
  .ws-inner { padding: 32px 20px; border-radius: 20px; }
  .ws-photo-stats { flex-direction: column; gap: 16px; padding: 20px; border-radius: 0 0 16px 16px; }
  .ws-ps-divider  { width: 60%; height: 1px; }
  .ws-img-duo     { grid-template-columns: 1fr 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════
   ████  MASTER RESPONSIVE OVERHAUL  ████
   Desktop (>1200px) — ZERO changes
   Tablet (768–1199px) — proper 2-col / adjusted layouts
   Mobile (≤767px) — single column, readable, pixel-perfect
═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   TABLET: 768px – 1199px
───────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1199px) {

  /* ── NAV ── */
  nav {
    padding: 16px 32px;
  }
  nav.scrolled {
    padding: 12px 32px;
  }
  .nav-links {
    gap: 24px;
  }
  .nav-links a {
    font-size: 15px;
  }
  .btn-nav,
  .btn-primary-nav {
    font-size: 14px;
    padding: 9px 18px;
  }

  /* ── HERO ── */
  .hero {
    grid-template-columns: 1fr 1fr;
    padding: 110px 32px 60px;
    gap: 32px;
    min-height: 100vh;
    height: auto;
    max-height: none;
  }
  .hero-title {
    font-size: clamp(32px, 4vw, 52px);
  }

  .hero-phone-img {
    max-width: 380px;
    width: 100%;
  }
  .hero-visual {
    min-height: 420px;
  }
  .float-card {
    display: none;
  }

  /* ── BHARAT SECTION ── */
  .bharat-section {
    padding: 80px 32px;
  }
  .bharat-inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 48px 36px;
  }
  .bharat-visual {
    min-height: 380px;
  }

  /* ── SERVICES ── */
  .services-section {
    padding: 80px 32px;
  }
  .services-inner {
    padding: 48px 36px;
  }
  .main-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .secondary-services-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ── NB SERVICES PANEL ── */
  .nb-svc-layout {
    grid-template-columns: 200px 1fr;
    gap: 24px;
  }

  /* ── SBD (Smart Bills Dashboard) ── */
  .sbd-section {
    padding: 80px 32px;
  }
  .sbd-main-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ── STATS ── */
  .stats-section {
    padding: 80px 32px;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── TRUST ── */
  .trust-section {
    padding: 80px 32px;
  }
  .trust-cards {
    grid-template-columns: 1fr 1fr;
  }

  /* ── HOW IT WORKS ── */
  .how-it-works-section {
    padding: 80px 32px;
  }
  .hiw-inner {
    padding: 48px 36px;
  }
  .hiw-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .hiw-sc-connector {
    display: none;
  }

  /* ── WHY SHOPKEEPER ── */
  .why-shopkeeper-section {
    padding: 80px 32px;
  }
  .ws-inner {
    padding: 48px 36px;
  }
  .ws-layout {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  /* ── BILL CATEGORIES ── */
  .bill-categories-section {
    padding: 80px 32px;
  }
  .bc-cat-inner {
    padding: 48px 36px;
  }
  .bc-cat-mosaic {
    grid-template-columns: 1fr 1fr;
  }
  .bc-cat-featured {
    grid-column: span 2;
    min-height: auto;
  }
  .bc-cat-small-row {
    grid-template-columns: repeat(3, 1fr);
    grid-column: span 2;
  }

  /* ── EARNINGS CALCULATOR ── */
  .earn-section,
  .earnings-section {
    padding: 80px 32px;
  }
  .earn-inner {
    padding: 48px 36px;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  /* ── OP SECTION ── */
  .op-section {
    padding: 80px 32px;
  }
  .op-main {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  /* ── TESTIMONIALS ── */
  .testimonials-section {
    padding: 80px 32px;
  }
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── CTA ── */
  .cta-section {
    padding: 80px 32px;
  }
  .cta-inner {
    padding: 60px 40px;
  }

  /* ── APP SECTION ── */
  .app-section {
    padding: 80px 32px;
  }
  .app-inner {
    grid-template-columns: 1fr 1fr;
    padding: 48px 36px;
  }

  /* ── FOOTER ── */
  footer {
    padding-left: 32px;
    padding-right: 32px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .footer-main {
    padding: 48px 0 0;
  }
  .footer-bottom {
    padding: 20px 0;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .footer-bottom-left {
    flex-direction: column;
    gap: 6px;
    align-items: center;
  }
}

/* ─────────────────────────────────────────────
   MOBILE: ≤767px
───────────────────────────────────────────── */
@media (max-width: 767px) {

  /* ── NAV ── */
  nav {
    padding: 14px 20px;
  }
  nav.scrolled {
    padding: 12px 20px;
  }
  .nav-links,
  .nav-cta {
    display: none !important;
  }
  .hamburger {
    display: flex !important;
  }

  /* ── HERO ── */
  .hero {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
    min-height: 100svh;
    padding: 100px 20px 60px;
    gap: 32px;
    justify-items: center;
    text-align: center;
  }
  .hero-content {
    max-width: 100%;
    align-items: center;
  }
  .hero-title {
    font-size: clamp(30px, 8vw, 44px);
    text-align: center;
  }
  .hero-sub {
    font-size: 14px;
    text-align: center;
    margin-bottom: 32px;
  }
  .hero-badge {
    margin-bottom: 20px;
  }
  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    width: 100%;
  }
  .btn-hero,
  .btn-ghost {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
    font-size: 15px;
  }
  .hero-visual {
    width: 100%;
    min-height: 280px;
    order: -1;
  }
  .hero-phone-img {
    max-width: 260px;
    width: 100%;
  }
  .float-card {
    display: none !important;
  }
  .hero-orbit-svg {
    width: 300px;
    height: 320px;
  }

  /* ── TICKER ── */
  .ticker-wrap {
    margin-top: 0;
  }
  .ticker-item {
    font-size: 13px;
  }

  /* ── BHARAT SECTION ── */
  .bharat-section {
    padding: 60px 16px;
  }
  .bharat-inner {
    grid-template-columns: 1fr !important;
    gap: 32px;
    padding: 28px 20px;
    border-radius: 20px;
  }
  .bharat-content {
    text-align: center;
  }
  .bharat-visual {
    min-height: 280px;
    width: 100%;
  }
  .bc-feature-list {
    text-align: left;
  }

  /* ── SECTION COMMON ── */
  .section-title {
    font-size: clamp(26px, 7vw, 36px) !important;
    text-align: center;
  }
  .section-tag {
    text-align: center;
  }
  .section-desc {
    font-size: 14px;
    text-align: center;
  }

  /* ── SERVICES ── */
  .services-section {
    padding: 60px 16px;
  }
  .services-inner {
    padding: 28px 20px;
    border-radius: 20px;
  }
  .main-services-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .secondary-services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  .nb-svc-layout {
    grid-template-columns: 1fr !important;
  }
  .nb-svc-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .nb-panel {
    min-height: auto;
  }

  /* ── SBD SECTION ── */
  .sbd-section {
    padding: 60px 16px 80px;
  }
  .sbd-main-grid {
    grid-template-columns: 1fr !important;
  }
  .sbd-panel-right {
    grid-column: auto !important;
    display: flex;
    flex-direction: column;
  }
  .sbd-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .sbd-chart-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .sbd-title {
    font-size: clamp(26px, 7vw, 36px);
  }

  /* ── STATS ── */
  .stats-section {
    padding: 60px 16px;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .stat-big {
    font-size: 30px !important;
  }
  .stat-card {
    padding: 24px 16px;
  }

  /* ── TRUST ── */
  .trust-section {
    padding: 60px 16px;
  }
  .trust-cards {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* ── HOW IT WORKS ── */
  .how-it-works-section {
    padding: 60px 16px;
  }
  .hiw-inner {
    padding: 28px 20px;
    border-radius: 20px;
  }
  .hiw-steps {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .hiw-sc-connector {
    display: none !important;
  }
  .hiw-benefit-bar {
    flex-direction: column;
    gap: 12px;
  }
  .hiw-benefit-divider {
    width: 100%;
    height: 1px;
  }

  /* ── WHY SHOPKEEPER ── */
  .why-shopkeeper-section {
    padding: 60px 16px;
  }
  .ws-inner {
    padding: 28px 20px;
    border-radius: 20px;
  }
  .ws-layout {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .ws-photo {
    height: 220px;
  }
  .ws-duo-img {
    height: 110px;
  }
  .ws-img-duo {
    grid-template-columns: 1fr 1fr;
  }
  .ws-header {
    text-align: center;
    margin-bottom: 32px;
  }

  /* ── BILL CATEGORIES ── */
  .bill-categories-section {
    padding: 60px 16px;
  }
  .bc-cat-inner {
    padding: 28px 20px;
    border-radius: 20px;
  }
  .bc-cat-mosaic {
    grid-template-columns: 1fr !important;
  }
  .bc-cat-featured {
    grid-column: span 1 !important;
    min-height: auto;
  }
  .bc-cat-small-row {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-column: span 1 !important;
  }

  /* ── EARNINGS CALCULATOR ── */
  .earn-section,
  .earnings-section {
    padding: 60px 16px;
  }
  .earn-inner {
    grid-template-columns: 1fr !important;
    padding: 28px 20px;
    gap: 32px;
    border-radius: 20px;
  }
  .earn-calc {
    width: 100%;
  }
  .earn-feed-panel {
    max-height: 260px;
    overflow: hidden;
  }

  /* ── OP (Operations/About) SECTION ── */
  .op-section {
    padding: 60px 16px;
  }
  .op-main {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .op-globe-wrap {
    width: 240px !important;
    height: 240px !important;
    margin: 0 auto;
  }
  .op-pillars {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .op-pillar {
    transform: none !important;
    min-width: 120px;
  }
  .op-strip {
    grid-template-columns: 1fr !important;
  }
  .op-strip-divider {
    width: 100% !important;
    height: 1px !important;
  }
  .op-title {
    font-size: clamp(26px, 7vw, 36px);
  }

  /* ── TESTIMONIALS ── */
  .testimonials-section {
    padding: 60px 16px;
  }
  .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* ── CTA ── */
  .cta-section {
    padding: 60px 16px;
  }
  .cta-inner {
    padding: 40px 20px;
    border-radius: 20px;
    text-align: center;
  }
  .cta-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .cta-title {
    font-size: clamp(26px, 7vw, 38px);
  }

  /* ── APP DOWNLOAD SECTION ── */
  .app-section {
    padding: 60px 16px;
  }
  .app-inner {
    grid-template-columns: 1fr !important;
    padding: 28px 20px;
    gap: 32px;
    text-align: center;
  }
  .app-phones-showcase {
    display: none;
  }
  .app-download-image {
    max-width: 260px;
    margin: 0 auto;
    display: block;
  }
  .app-badge-row,
  .app-badges {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* ── BHARAT CONNECT VISUAL (rings/nodes) ── */
  .bc-viz-root {
    width: 100% !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 16px 0 48px;
    position: relative;
  }
  .bc-lines-canvas {
    display: none !important;
  }
  .bc-center-hub {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
  }
  .bc-pulse-ring {
    display: none !important;
  }
  .bc-hub-core {
    width: auto !important;
    height: auto !important;
    border-radius: 14px;
    padding: 12px 24px;
    flex-direction: row;
    gap: 10px;
    max-width: 280px;
  }
  .bc-node-item {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* ── FOOTER ── */
  footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .footer-main {
    padding: 40px 0 0;
  }
  .footer-bottom {
    padding: 20px 0;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .footer-bottom-left {
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
  }
  .footer-cin {
    text-align: center;
  }
  .footer-socials {
    justify-content: flex-start;
  }
  .footer-certs {
    flex-wrap: wrap;
  }

  /* ── MOBILE MENU ── */
  .mobile-menu a {
    font-size: 22px;
  }

  /* ── PROMISE GRID ── */
  .promise-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .promise-card-featured {
    transform: none !important;
  }
  .promise-stats-strip {
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
  }
  .pss-divider {
    display: none !important;
  }

  /* ── VIDEO SECTION ── */
  .video-section {
    padding: 60px 16px;
  }
  .video-embed-wrap {
    aspect-ratio: 16/9;
  }
  .video-stat-1,
  .video-stat-2 {
    display: none;
  }

  /* ── BC PREMIUM WRAP ── */
  .bc-premium-wrap {
    display: none;
  }

  /* ── CHART SECTION ── */
  .chart-section {
    padding: 60px 16px;
  }
  .chart-inner {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  /* ── NB SERVICE PANEL canvas ── */
  .nb-canvas-wrap {
    min-height: 200px;
  }

  /* ── General padding cleanup ── */
  .bharat-section,
  .services-section,
  .stats-section,
  .trust-section,
  .app-section,
  .chart-section,
  .testimonials-section,
  .cta-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ─────────────────────────────────────────────
   SMALL MOBILE: ≤480px
───────────────────────────────────────────── */
@media (max-width: 480px) {

  .ws-float-card{
    display: none;
  }

  .ws-benefit-tag {
  display: none;
  }

  .hero {
    padding: 90px 16px 48px;
  }
  .hero-title {
    font-size: clamp(26px, 9vw, 38px);
  }
  .hero-phone-img {
    max-width: 220px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .stat-big {
    font-size: 26px !important;
  }

  .sbd-kpi-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .bc-cat-small-row {
    grid-template-columns: 1fr 1fr !important;
  }

  .btn-hero,
  .btn-ghost {
    font-size: 14px;
    padding: 13px 20px;
  }

  .nb-svc-list {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .ws-img-duo {
    grid-template-columns: 1fr 1fr;
  }

  .ws-benefit-card {
    padding: 16px 16px;
    flex-direction: column;
  }

  .hiw-step-num {
    font-size: 36px;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  /* Ticker smaller */
  .ticker-item {
    font-size: 12px;
  }
  .ticker {
    gap: 36px;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   SERVICES SECTION — RESPONSIVE FIX
   Properly handles tablet + mobile for the nb-svc-body panel layout
═══════════════════════════════════════════════════════════════════ */

/* ── TABLET: 768px – 1199px ── */
@media (min-width: 768px) and (max-width: 1199px) {
  .nb-svc-body {
    grid-template-columns: 220px 1fr;
    min-height: 420px;
  }
  .nb-ph {
    font-size: 24px;
  }
  .nb-pdesc {
    font-size: 14px;
  }
  .nb-pcol-text {
    padding: 24px 20px;
  }
  .nb-txn-strip {
    flex-wrap: wrap;
    gap: 6px;
  }
  .nb-panel {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── MOBILE: ≤767px ── */
@media (max-width: 767px) {

  /* Body becomes single column, left list on top */
  .nb-svc-body {
    grid-template-columns: 1fr !important;
    min-height: auto;
    overflow: visible;
  }

  /* Left list: horizontal scrollable pills instead of vertical list */
  .nb-svc-left {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nb-svc-left::-webkit-scrollbar {
    display: none;
  }

  .nb-svc-div {
    display: none;
  }

  .nb-svc-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 12px;
    min-width: 80px;
    flex-shrink: 0;
    gap: 6px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
  }
  .nb-svc-item.active {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
  }
  .nb-svc-itxt {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .nb-svc-iname {
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
  }
  .nb-svc-isub {
    display: none;
  }
  .nb-svc-iarr {
    display: none;
  }
  .nb-svc-ico {
    width: 32px;
    height: 32px;
  }

  /* Right panel: relative, stacks below left list */
  .nb-svc-right {
    position: relative;
    min-height: 520px;
  }

  /* Each panel: single column layout */
  .nb-panel {
    position: absolute;
    inset: 0;
    grid-template-columns: 1fr !important;
    overflow-y: auto;
  }

  .nb-pcol-text {
    padding: 24px 20px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: 16px;
  }

  .nb-ptag {
    font-size: 11px;
    margin-bottom: 6px;
  }

  .nb-ph {
    font-size: 22px;
    margin-bottom: 8px;
  }

  .nb-pdesc {
    font-size: 13px;
    margin-bottom: 14px;
    line-height: 1.6;
  }

  .nb-pstats {
    gap: 16px;
    margin-bottom: 16px;
  }
  .nb-pnum {
    font-size: 20px;
  }

  .nb-pcta {
    font-size: 13px;
    padding: 9px 16px;
  }

  /* Transaction chips: wrap properly */
  .nb-txn-strip {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .nb-txn {
    flex: 1 1 auto;
    min-width: calc(50% - 3px);
    font-size: 11px;
    padding: 6px 8px;
    gap: 5px;
  }
  .nb-tname {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
  }
  .nb-tamt {
    font-size: 11px;
    font-weight: 700;
    margin-left: auto;
  }
  .nb-tok {
    font-size: 10px;
  }

  /* Visual column: show as image below text */
  .nb-pcol-vis {
    height: 180px;
    min-height: 180px;
  }
  .fasttage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  /* More services grid: 2 columns on mobile */
  .nb-more-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }
  .nb-mc {
    padding: 12px 10px;
  }
  .nb-mc-name {
    font-size: 12px;
  }
  .nb-mc-stat {
    font-size: 10px;
  }

  /* Footer strip */
  .nb-svc-foot {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }
}

/* ── SMALL MOBILE: ≤480px ── */
@media (max-width: 480px) {
  .nb-svc-right {
    min-height: 550px;
  }
  .nb-ph {
    font-size: 20px;
  }
  .nb-pdesc {
    font-size: 12px;
  }
  .nb-txn {
    min-width: 100%;
  }
  .nb-pcol-vis {
    height: 150px;
    min-height: 150px;
  }
  .nb-more-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}