/* DESIGN SYSTEM */

:root {

  /* Colors */
  --bg-pure: #ffffff;
  --bg-soft: #f3eeff;
  --bg-glass: rgba(91, 45, 168, 0.05);
  --bg-border: #e9d8ff;

  --bg-1: #f3eeff;
  --bg-2: #ede4ff;
  --bg-3: #e8d5ff;

  --brand-deep: #3d1573;
  --brand-cyan: #7c3aed;
  --brand-neon: #5b2da8;
  --brand-hover: #6d28d9;

  /* Gradients */
  --grad-hero: linear-gradient(135deg, #3d1573, #5b2da8, #7c3aed);
  --grad-cta: linear-gradient(135deg, #3d1573 0%, #5b2da8 100%);
  --grad-glow: linear-gradient(135deg, #5b2da8, #7c3aed);

  /* Glass & Shadows */
  --glass-fill: rgba(255, 255, 255, 0.9);
  --glass-line: rgba(61, 21, 115, 0.08);
  --glass-halo: rgba(91, 45, 168, 0.2);
  --glass-border: rgba(61, 21, 115, 0.08);

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 20px 40px rgba(61, 21, 115, 0.12);
  --glow-cyan: 0 0 20px rgba(91, 45, 168, 0.15);

  --text-main: #2e0f5e;
  --text-sub: #475569;
  --text-active: #5b2da8;

  --text-primary: #2e0f5e;
  --text-secondary: #475569;
  --text-accent: #5b2da8;

  --r-md: 18px;
  --r-lg: 28px;
  --blur: blur(16px);
  --container-max: 1240px;

  --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Animation Curves */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* FOUNDATIONS */

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

html {
  scroll-behavior: smooth;
}

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

/* Body */
body {
  font-family: var(--font);
  background-color: #f5f0eb;
  /* Warm cream background matching Image 2 */
  color: var(--text-main);
  line-height: 1.6;
  margin: 0;
  overflow-x: hidden;
  width: 100%;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--brand-deep);
}

/* LAYOUT */

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* UNIVERSAL PREMIUM HEADINGS */
h1,
h2,
h3 {
  color: var(--brand-deep);
  letter-spacing: -0.03em;
}

/* Fix visibility for headings on dark backgrounds (like Download CTA) */
div[style*="color: white"] h2,
div[style*="color: #fff"] h2,
.download-cta h2 {
  color: #ffffff;
}

.glass-card h2,
.legal-content h2 {
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

/* Allow centering for headings inside centered containers */
.glass-card[style*="center"] h2,
.workspace-main[style*="center"] h2,
.glass-card[style*="center"] .form-title,
.workspace-main[style*="center"] .form-title {
  justify-content: center;
  text-align: center;
}

.glass-card h2::before,
.legal-content h2::before {
  content: '';
  width: 5px;
  height: 26px;
  background: var(--brand-cyan);
  border-radius: 10px;
  display: inline-block;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.4);
}

.section-pad {
  padding: 50px 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 48px;
  align-items: start;
}

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

.grid-5 {
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

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

.grid-5 .card:nth-child(1),
.grid-5 .card:nth-child(2) {
  grid-column: span 3;
}

.grid-5 .card:nth-child(3),
.grid-5 .card:nth-child(4),
.grid-5 .card:nth-child(5) {
  grid-column: span 2;
}

.grid-5 .card:nth-child(5) {
  grid-column: span 2;
}

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

.core-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  margin-bottom: 80px;
}

.core-bento-grid>.grid-box:nth-child(-n+4) {
  grid-column: span 3;
}

.core-bento-grid>.grid-box:nth-child(n+5) {
  grid-column: span 4;
}

.pricing-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

/* NAVIGATION */

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 20px rgba(0, 41, 112, 0.04);
  transition: transform 0.4s var(--ease);
}

.header .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  padding: 0;
}

.logo {
  font-size: 1.25rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo img {
  height: 55px;
  width: auto;
  transform: scale(1.4);
  transform-origin: left center;
}

/* Visual compensation for curved 'O' */

/* Header Logo Size Override */
.header .logo img,
.nav .logo img {
  height: 38px;
  width: auto;
  transform: none;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-cyan) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(0, 41, 112, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.logo-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), transparent);
}

.logo-mark:hover {
  transform: rotate(8deg) scale(1.1);
  box-shadow: 0 6px 15px rgba(0, 41, 112, 0.35);
}

.logo .gradient-text {
  color: var(--brand-deep);
  letter-spacing: -0.8px;
}

/* Mobile Menu */
#menu-toggle {
  display: none;
}

#menu-toggle:checked~.container .nav-menu {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#menu-toggle:checked~.container .menu-btn .bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 6px);
}

#menu-toggle:checked~.container .menu-btn .bar:nth-child(2) {
  opacity: 0;
}

#menu-toggle:checked~.container .menu-btn .bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -6px);
}

.nav-menu {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  transition: all 0.4s var(--ease);
}

.nav-menu {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: all 0.4s var(--ease);
}

/* Sub-menu */
.nav-menu li {
  position: relative;
}

.arrow {
  display: inline-block;
  margin-left: 8px;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0;
  /* Hide the text character */
  opacity: 0.7;
}

.drop-item:hover .arrow {
  transform: translateY(1px) rotate(225deg);
  opacity: 1;
}

.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 260px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  padding: 15px 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px) scale(0.98);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 25px 60px rgba(0, 41, 112, 0.18);
  z-index: 1000;
}

.drop-item:hover .sub-menu,
.drop-item:focus-within .sub-menu,
.drop-item:focus .sub-menu,
.nav-menu a:focus+.sub-menu,
.drop-item.active .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.sub-menu li {
  width: 100%;
  position: relative;
}

.sub-menu a {
  padding: 10px 24px;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-deep);
  transition: all 0.2s ease;
}

.sub-menu a:hover {
  background: rgba(0, 186, 242, 0.05);
  color: var(--brand-deep);
  padding-left: 28px;
}

.sub-menu a span {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Nav Buttons */
.nav-btns {
  display: flex;
  align-items: center;
  gap: 15px;
}

.nav-menu a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-sub);
  padding: 8px 12px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}

.nav-menu a::before {
  content: '•';
  color: var(--brand-deep);
  font-size: 1.2rem;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.sub-menu a::before {
  display: none;
}

.nav-menu a:hover::before {
  opacity: 1;
  transform: scale(1.2);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 4px;
  background: var(--brand-cyan);
  border-radius: 50%;
  transform: translateX(-50%);
  transition: all 0.3s var(--bounce);
  opacity: 0;
  box-shadow: 0 0 8px rgba(0, 186, 242, 0.8);
}

.nav-links a:hover {
  color: var(--brand-deep);
  background: rgba(0, 41, 112, 0.04);
}

.nav-links a:hover::after {
  width: 4px;
  opacity: 1;
  bottom: 6px;
}

.menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
}

.mobile-toggle .bar {
  width: 24px;
  height: 2px;
  background: var(--brand-deep);
  border-radius: 2px;
  transition: all 0.3s var(--ease);
}

.mobile-toggle.active .bar:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}

.mobile-toggle.active .bar:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* Glass Card */
.card {
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-radius: var(--r-md);
  padding: 40px;
  transition: all 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transition: 0.5s;
}

.card:hover::before {
  left: 100%;
}

.card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 186, 242, 0.35);
  box-shadow: var(--shadow-lg), var(--glow-cyan);
}

/* Bento Grid Item */
.grid-box {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 35px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.grid-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(34, 211, 238, 0.05) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 0;
}

.grid-box:hover {
  transform: translateY(-5px);
  border-color: rgba(34, 211, 238, 0.4);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07), 0 0 20px rgba(34, 211, 238, 0.12);
}

.grid-box:hover::before {
  opacity: 1;
}

.grid-box>* {
  position: relative;
  z-index: 1;
}

.grid-box h4 {
  font-size: 1.3rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.grid-box p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 36px;
  border-radius: 14px;
  font-family: var(--font);
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

/* === PREMIUM DEEP VIOLET BUTTONS === */

.btn-primary {
  background: linear-gradient(135deg, #3d1573 0%, #5b2da8 100%);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(61, 21, 115, 0.22), 0 2px 8px rgba(91, 45, 168, 0.12);
  border: none;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  background: linear-gradient(135deg, #331162 0%, #4c268f 100%);
  box-shadow: 0 14px 32px rgba(61, 21, 115, 0.3), 0 4px 12px rgba(91, 45, 168, 0.2);
}

.btn-outline {
  background: #ffffff;
  color: #3d1573;
  border: 1.5px solid rgba(91, 45, 168, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.btn-outline:hover {
  background: #f7f0ff;
  border-color: #5b2da8;
  color: #3d1573;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(91, 45, 168, 0.12);
}

/* Nav CTA buttons — premium violet pill */
.btn-early {
  padding: 10px 22px;
  font-size: 0.85rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #3d1573 0%, #5b2da8 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 14px rgba(61, 21, 115, 0.18);
}

.btn-early:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #331162 0%, #4c268f 100%);
  box-shadow: 0 8px 20px rgba(61, 21, 115, 0.25);
}


/* Sub-menu Organization */
.sub-menu .menu-label {
  padding: 10px 20px 5px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: none;
}

.sub-menu .menu-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 8px 15px;
}

.btn-pricing {
  margin-top: auto;
  background: var(--brand-deep);
  color: white;
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 800;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s var(--ease);
  text-align: center;
  display: block;
}

.btn-pricing:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.section-header {
  text-align: center;
  margin-bottom: 35px;
  position: relative;
}

.section-title {
  font-size: 3.5rem;
  margin-bottom: 24px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--brand-deep), #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  letter-spacing: -2px;
  position: relative;
  display: inline-block;
  text-align: center;
}

.section-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: var(--brand-cyan);
  margin: 15px auto 0;
  border-radius: 2px;
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.4);
}

.section-sub {
  font-size: 1.15rem;
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto;
}

.tag {
  display: inline-block;
  color: var(--text-accent);
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.2);
  padding: 8px 18px;
  border-radius: 50px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-bottom: 24px;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.1);
}

/* Feature Icon */
.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 20px;
  display: block;
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.4));
  transition: transform 0.3s ease;
}

.card:hover .feature-icon {
  transform: scale(1.1) translateY(-5px);
}

/* Utility Classes */

.cyan-glow {
  color: var(--text-accent);
  text-shadow: 0 0 15px rgba(34, 211, 238, 0.5);
}

.card-grid>.card:nth-child(1) {
  transition-delay: 0.1s;
}

.card-grid>.card:nth-child(2) {
  transition-delay: 0.2s;
}

.card-grid>.card:nth-child(3) {
  transition-delay: 0.3s;
}

.card-grid>.card:nth-child(4) {
  transition-delay: 0.4s;
}

.card-grid>.card:nth-child(5) {
  transition-delay: 0.5s;
}

.grid-5 .card {
  padding: 24px 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-sm);
  transition: all 0.5s var(--ease);
  height: 100px;
  position: relative;
  overflow: hidden;
}

.grid-5 .card::after {
  content: '';
  position: absolute;
  top: 15px;
  right: 15px;
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 10px #10b981;
  opacity: 0.6;
  animation: statusPulse 2s infinite ease-in-out;
}

.grid-5 .card::before {
  display: none;
}

.grid-5 .card:hover {
  transform: translateY(-5px) scale(1.01);
  background: #ffffff;
  border-color: #6366f1;
  box-shadow: 0 20px 40px rgba(99, 102, 241, 0.12);
  text-shadow: none;
}

.grid-5 .feature-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 0;
  transition: all 0.4s ease;
  filter: none;
}

.grid-5 .card:hover .feature-icon {
  background: #6366f1;
  color: #ffffff;
  transform: rotate(8deg) scale(1.1);
  box-shadow: 0 8px 15px rgba(99, 102, 241, 0.3);
}

/* HERO */

/* Hero Container */
.hero {
  height: 100vh;
  padding-top: 120px;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  background: transparent;
  position: relative;
  overflow: visible;
}

/* Background Blobs — hidden to keep clean warm cream background */
.blob {
  display: none;
}

.blob-1 {
  display: none;
}

.blob-2 {
  display: none;
}

.blob-3 {
  display: none;
}

/* Atmosphere Items */

.atmos-item {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0.15;
  filter: blur(1px);
  animation: atmosFloat 15s infinite ease-in-out;
}

.item-1 {
  top: 20%;
  left: 15%;
  animation-delay: 0s;
}

.item-2 {
  top: 60%;
  right: 20%;
  animation-delay: -4s;
}

.item-3 {
  bottom: 25%;
  left: 25%;
  animation-delay: -8s;
}

.item-4 {
  top: 15%;
  right: 40%;
  animation-delay: -12s;
}

/* Hero Layout */
.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: -120px;
  /* Pulls the content up slightly closer to the nav bar */
}

.hero-text {
  text-align: left;
  max-width: 680px;
  flex: 1 1 auto;
  position: relative;
  z-index: 10;
}

.hero-content:not(:has(.hero-visual-new)) {
  justify-content: center;
  padding-right: 0;
}

.hero-content:not(:has(.hero-visual-new)) .hero-text {
  text-align: center;
  max-width: 780px;
  flex: unset;
  width: 100%;
}

.hero-content:not(:has(.hero-visual-new)) .hero-btns {
  justify-content: center;
}

.hero-content:not(:has(.hero-visual-new)) .hero-trust {
  justify-content: center;
}

.hero:not(:has(.hero-visual-new)) {
  min-height: unset;
  padding-top: 140px;
  padding-bottom: 60px;
}

/* Hero Kicker Badge */
.hero-kicker {
  display: inline-flex;
  padding: 8px 22px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 100px;
  color: #16a34a;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 32px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  position: relative;
  overflow: hidden;
}

.hero-kicker::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -150%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: rotate(30deg);
  animation: kickerShimmer 6s infinite ease-in-out;
}

/* Hero Typography */
.hero-headline {
  font-size: 3.6rem;
  margin-bottom: 28px;
  line-height: 1.25;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  color: var(--brand-deep);
  letter-spacing: -2px;
}

.highlight-grad {
  background: linear-gradient(90deg, #5b21b6, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: 900;
  display: inline-block;
}

.hero-sub {
  font-size: 1.15rem;
  color: var(--text-secondary);
  margin-bottom: 36px;
  line-height: 1.7;
  max-width: 580px;
}

.hero-action-block {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 10px;
}

.hero-btns {
  display: flex;
  gap: 20px;
}

.hero-trust {
  display: flex;
  gap: 24px;
  align-items: center;
}

.trust-item {
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Hero Visual Column */
.hero-visual {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 50%;
  margin-left: -50px;
}

.glow-halo {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.35), transparent 60%);
  filter: blur(60px);
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mockup-img {
  max-width: 100%;
  width: 450px;
  transform: rotate(-6deg);
  filter: drop-shadow(0 0 60px rgba(34, 211, 238, 0.25));
  position: relative;
  z-index: 2;
  animation: floatMockup 8s ease-in-out infinite;
}

/* Floating Stat Cards */

.floating-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-radius: 16px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 15;
  font-weight: 700;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  animation: floatCard 6s ease-in-out infinite;
  transition: all 0.3s var(--bounce);
}

.floating-card:hover {
  transform: scale(1.05) translateY(-5px);
}

.fc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  font-size: 0.9rem;
}

.card-top {
  top: 15%;
  right: -5%;
  animation-delay: 0s;
}

.card-mid {
  top: 50%;
  left: 8%;
  animation-delay: 1.5s;
}

.card-bottom {
  bottom: 15%;
  right: 5%;
  animation-delay: 3s;
}

/* SECTION CONTENT */

/* Timeline */
.timeline-container {
  position: relative;
  margin: 40px auto;
}

.timeline-container.horizontal {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  max-width: 1100px;
  margin-top: 40px;
}

.timeline-line {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 2px;
  height: calc(100% - 80px);
  background: rgba(0, 0, 0, 0.08);
  transform: translateX(-50%);
  overflow: hidden;
}

.timeline-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, transparent, var(--brand-cyan), var(--brand-deep), transparent);
  animation: progressVertical 3s linear infinite;
}

.horizontal .timeline-line {
  top: 40px;
  left: 15%;
  width: 70%;
  height: 2px;
  background: rgba(0, 0, 0, 0.08);
  transform: none;
}

.horizontal .timeline-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, #22d3ee, #7c3aed, transparent);
  animation: progressHorizontal 3s linear infinite;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 80px;
  position: relative;
  justify-content: center;
  flex: 1;
}

.horizontal .step-item {
  flex-direction: column;
  text-align: center;
  gap: 20px;
  margin-bottom: 0;
}

.step-num {
  width: 80px;
  height: 80px;
  background: var(--grad-cta);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 800;
  z-index: 2;
  box-shadow: var(--glow-cyan);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s;
  animation: pulseNum 4s infinite alternate;
}

.step-item:nth-child(2) .step-num {
  animation-delay: 1s;
}

.step-item:nth-child(3) .step-num {
  animation-delay: 2s;
}

.step-item:nth-child(4) .step-num {
  animation-delay: 3s;
}

.step-item:hover .step-num {
  transform: scale(1.15);
  box-shadow: 0 0 50px rgba(34, 211, 238, 0.8);
}

.step-content {
  width: 100%;
  max-width: 350px;
}

.horizontal .step-content {
  text-align: center;
}

/* Industries Accordion Refined */
.industry-list {
  display: flex;
  flex-direction: column;
}

.industry-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  width: 100%;
  display: block;
}

.industry-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  outline: none;
}

.industry-summary::-webkit-details-marker {
  display: none;
}

.industry-title {
  display: flex;
  align-items: center;
  gap: 20px;
}

.industry-icon {
  font-size: 1.5rem;
}

.industry-name {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--brand-deep);
  transition: color 0.3s;
}

.industry-chevron {
  font-size: 1.4rem;
  color: var(--text-secondary);
  transition: transform 0.4s var(--ease);
}

.industry-summary:hover .industry-name {
  color: var(--brand-cyan);
}

.industry-item[open] .industry-chevron {
  transform: rotate(180deg);
  color: var(--brand-cyan);
}

.industry-content {
  padding-bottom: 24px;
  color: var(--text-secondary);
  line-height: 1.8;
  font-size: 1.05rem;
  max-width: 90%;
  animation: slideInDown 0.4s ease;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

/* Security Section */
.security-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  background: radial-gradient(circle at center, rgba(34, 211, 238, 0.08) 0%, transparent 70%);
  border-radius: 40px;
  padding: 60px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.shield-icon {
  font-size: 8rem;
  animation: shieldPulse 3s infinite alternate;
}

/* POS Ecosystem */
.ecosystem-panel {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.07);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
}

.ecosystem-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 30px;
  pointer-events: none;
  box-shadow: inset 0 0 40px rgba(34, 211, 238, 0.05);
}

.ecosystem-item {
  padding: 40px 30px;
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.4s ease;
  position: relative;
}

.ecosystem-item:nth-child(3n) {
  border-right: none;
}

.ecosystem-item:nth-last-child(-n+3) {
  border-bottom: none;
}

.ecosystem-item::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle at center, rgba(34, 211, 238, 0.1) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.ecosystem-item:hover {
  background: rgba(34, 211, 238, 0.02);
}

.ecosystem-item:hover::before {
  opacity: 1;
}

.ecosystem-item h4 {
  font-size: 1.15rem;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin: 0;
}

.ecosystem-item h4 .eco-icon {
  font-size: 2.2rem;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.3));
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ecosystem-item:hover h4 .eco-icon {
  transform: scale(1.15) translateY(-5px);
}

/* Pricing Section */
.pricing-block {
  border-radius: 32px;
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(91, 45, 168, 0.05);
}

.pricing-block.consumer,
.pricing-block.business {
  background: #f1ecf9;
  /* Soft purple canvas */
  border: 1px solid rgba(91, 45, 168, 0.1);
}

.pricing-content-left {
  flex: 1.2;
  min-width: 240px;
  display: flex;
  flex-direction: column;
}

.pricing-content-right {
  flex: 0.8;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.pricing-inner-card {
  background: #ffffff;
  /* Contrast white bento card */
  border-radius: 20px;
  padding: 35px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(91, 45, 168, 0.06);
  box-shadow: 0 4px 20px rgba(91, 45, 168, 0.03);
}

.pricing-inner-card h3 {
  color: var(--brand-deep);
  font-weight: 800;
  margin-bottom: 15px;
}

.pricing-inner-card p,
.pricing-inner-card ul,
.pricing-inner-card li {
  color: var(--text-secondary);
  opacity: 1;
}

.pricing-inner-card .text-brand-deep {
  color: var(--brand-deep);
  /* Keep bullet indicators purple */
}

.pricing-fee-item {
  background: #ffffff;
  /* Contrast white bento card */
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(91, 45, 168, 0.06);
  box-shadow: 0 4px 20px rgba(91, 45, 168, 0.03);
}

.pricing-fee-item h4 {
  font-size: 1.8rem;
  margin: 0;
  color: var(--brand-deep);
  font-weight: 850;
}

.pricing-fee-item p {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 5px;
}

/* Download CTA */
.download-cta {
  background: linear-gradient(135deg, #f0f9ff, #e0e7ff);
  border-radius: 30px;
  padding: 100px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.cta-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 180deg at 50% 50%, #bae6fd, #e0e7ff, #c7d2fe, #bae6fd);
  animation: rotate 20s linear infinite;
  opacity: 0.15;
}

/* Feature Card */
.feature-card {
  text-align: center;
  padding: 50px 30px;
}

.feature-card i {
  font-size: 3rem;
  margin-bottom: 25px;
  display: block;
}

/* FOOTER */

.footer {
  background: linear-gradient(180deg, #110826 0%, #070310 100%);
  padding: 100px 0 50px;
  border-top: 1px solid rgba(124, 58, 237, 0.15);
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -5%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.15), transparent 70%);
  pointer-events: none;
}

.footer .logo-mark,
.footer .logo-icon {
  background: white;
  color: var(--brand-deep);
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.2);
  border: none;
}

.footer-brand .logo img {
  height: 80px;
  width: auto;
  mix-blend-mode: screen;
  /* Softens the edges of the image box so it blends perfectly */
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 80%);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 80%);
  display: block;
}

.footer-brand .logo {
  transform: translateY(-25px);
  margin-left: -10px;
  margin-bottom: -15px;
}

.footer .logo .gradient-text {
  color: white;
  font-weight: 800;
}

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

/* END OF STYLE */

.footer-col h5 {
  color: white;
  margin-bottom: 25px;
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  background: linear-gradient(90deg, #ffffff, var(--brand-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 12px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.3s var(--ease);
  display: inline-block;
}

.footer-links a:hover {
  color: var(--brand-cyan);
  transform: translateX(5px);
  text-shadow: 0 0 10px rgba(0, 186, 242, 0.4);
}

.social-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s var(--bounce);
  color: white;
  position: relative;
}

.social-icon:hover {
  background: var(--brand-cyan);
  color: var(--brand-deep);
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 10px 20px rgba(0, 186, 242, 0.3);
  border-color: transparent;
}

.footer-social-links {
  display: flex;
  gap: 15px;
}

.footer-base {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

.footer-base a.social-icon-footer {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: white;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  text-decoration: none;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  /* Hide alt text overflow */
  text-indent: -9999px;
  /* Force text out of view if image fails */
}

.footer-base a.social-icon-footer img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-indent: 0;
  /* Reset indent for image */
}

.footer-base a.social-icon-footer:hover {
  background: var(--brand-deep);
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3);
  border-color: rgba(255, 255, 255, 0.3);
}



/* PREMIUM QUICK PAY MODAL */
.modal-overlay {
  z-index: 99999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  transition: 0.3s ease;
}

#quick-pay-toggle:checked~.modal-overlay {
  display: flex;
  opacity: 1;
  visibility: visible;
  z-index: 99999;
  display: flex;
  opacity: 1;
}

.modal-content {
  background: #fff;
  width: 900px;
  border-radius: 40px;
  padding: 50px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(20px);
  transition: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.2);
}

#quick-pay-toggle:checked~.modal-overlay .modal-content {
  transform: translateY(0);
}

.close-modal {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 2.2rem;
  cursor: pointer;
  color: #cbd5e1;
  line-height: 1;
  transition: 0.3s;
}

.close-modal:hover {
  color: #000;
}

.modal-section {
  margin-bottom: 45px;
}

.modal-section-title {
  font-size: 1.1rem;
  font-weight: 900;
  margin-bottom: 30px;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.modal-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 30px 15px;
}

.modal-item {
  text-decoration: none;
  text-align: center;
  transition: 0.3s;
}

.modal-icon-premium {
  width: 85px;
  height: 85px;
  background: white;
  border: 1.5px solid #f1f5f9;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  margin: 0 auto 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-item:hover .modal-icon-premium {
  transform: translateY(-8px) scale(1.05);
  border-color: var(--brand-cyan);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.modal-label {
  font-size: 0.85rem;
  font-weight: 800;
  color: #475569;
  line-height: 1.3;
}

.modal-item:hover .modal-label {
  color: #000;
}

/* HIDE EMOJIS IN DROPDOWNS */
.sub-menu li span {
  display: none;
}

/* END OF STYLE */



.inner-hero {
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-cyan));
  padding: 80px 0 140px;
  width: 100%;
  margin-top: 66px;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
}

.inner-hero h1 {
  font-size: 3.5rem;
  font-weight: 900;
  margin-bottom: 12px;
  letter-spacing: -1.5px;
}

.inner-hero p {
  font-size: 1.1rem;
  opacity: 0.85;
  font-weight: 600;
  max-width: 650px;
  margin: 0 auto;
}

.inner-workspace {
  width: 1100px;
  margin: -60px auto 80px;
  position: relative;
  z-index: 10;
}

/* Two-column grid support like bill-payment.html */
.inner-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 30px;
}

.inner-glass-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 50px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
}

.inner-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Unified styles moved to Workspace section */

.inner-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1), transparent 40%);
  pointer-events: none;
}

/* INNER PAGE NAVIGATION (NEW) */

.inner-page-header {
  background: #ffffff;
  box-shadow: 0 4px 25px rgba(0, 41, 112, 0.06);
  border-bottom: 1px solid rgba(0, 41, 112, 0.05);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.nav-menu-inner {
  display: flex;
  gap: 10px;
  /* Reduced gap to accommodate padding */
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu-inner a {
  text-decoration: none;
  color: #1e293b;
  font-size: 0.95rem;
  font-weight: 700;
  transition: all 0.3s var(--ease);
  padding: 8px 16px;
  border-radius: 12px;
}

.nav-menu-inner a:hover {
  color: var(--brand-cyan);
  background: rgba(0, 186, 242, 0.05);
  transform: translateY(-1px);
}

.btn-inner-outline {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  border-radius: 50px;
  border: 1.5px solid var(--brand-cyan);
  color: var(--brand-deep);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: all 0.3s var(--ease);
}

.btn-inner-outline:hover {
  background: rgba(0, 186, 242, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 186, 242, 0.1);
}

.btn-inner-gradient {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  border-radius: 50px;
  background: var(--grad-cta);
  color: white;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: all 0.3s var(--ease);
  box-shadow: 0 8px 20px rgba(0, 41, 112, 0.15);
}

.btn-inner-gradient:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 25px rgba(0, 41, 112, 0.2);
}

.hero-header {
  text-align: center;
  padding: 10px 0 15px;
  background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
  color: #fff;
  position: relative;
}

.hero-header h1 {
  margin: 0 0 5px;
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -1px;
  background: linear-gradient(to right, #ffffff, var(--brand-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
  padding: 0 10px;
}

.hero-header h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--brand-cyan);
  margin: 8px auto 0;
  border-radius: 2px;
  opacity: 0.8;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}

.hero-header p {
  margin: 0;
  font-size: 1rem;
  opacity: 0.9;
  font-weight: 600;
}

.dock-container {
  margin: -30px auto 0;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 100;
}

.dock {
  background: #1e293b;
  padding: 10px;
  border-radius: 20px;
  display: flex;
  gap: 10px;
  max-width: 1200px;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.dock-link {
  padding: 8px 12px;
  border-radius: 12px;
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.dock-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.workspace {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1280px;
  margin: 40px auto 60px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: stretch;
  box-sizing: border-box;
}

/* Centered Layout for Single-Column Pages (About Us, etc.) */
.workspace.workspace-single {
  display: flex;
  justify-content: center;
  padding: 40px 20px;
}

.workspace.workspace-single .workspace-main {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.workspace-main,
.inner-sidebar {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Unify Card Styles for Perfect Alignment */
.glass-card,
.inner-side-card {
  background: #ffffff;
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 41, 112, 0.08);
  box-shadow: none;
  padding: 40px 30px;
  width: 100%;
  box-sizing: border-box;
}

.inner-side-card {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}



.inner-side-card h3,
.inner-side-card p {
  width: 100%;
}

.benefit-item {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  max-width: 220px;
  /* Reduced for smaller square feel */
  min-height: unset;
  /* Overriding global dashboard rule */
  margin: 0 auto;
}

.benefit-item h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.benefit-item p {
  font-size: 0.85rem;
  line-height: 1.4;
}

.benefit-item .feature-icon {
  font-size: 2rem;
  margin-bottom: 15px;
}

.panel-title-box {
  background: #ffffff;
  border-radius: 20px;
  padding: 25px 40px;
  border: 1px solid #f1f5f9;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  margin-bottom: 0;
  /* Space is handled by workspace-main gap */
}

.panel-title-box h2 {
  font-size: 1.85rem;
  font-weight: 850;
  color: var(--brand-deep);
  margin: 0;
  letter-spacing: -0.8px;
}

.glass-card,
.inner-side-card {
  background: #ffffff;
  border-radius: 32px;
  padding: 40px;
  border: 1px solid #f1f5f9;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.05);
}

.btn-proceed {
  background: var(--brand-cyan);
  background: linear-gradient(108deg, var(--brand-cyan) 0%, #0099cc 100%);
  color: #fff;
  padding: 18px 32px;
  border-radius: 14px;
  border: none;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  width: 100%;
  margin-top: 15px;
  box-shadow: 0 8px 20px rgba(0, 186, 242, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: none;
}

.btn-proceed:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 186, 242, 0.35);
  filter: brightness(1.05);
}

/* Form Elements */
.input-box,
.input-group {
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-box label,
.input-group label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.input-box input,
.input-box select,
.input-group input,
.input-group select {
  width: 100%;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1.5px solid #edf2f7;
  background: #f8fafc;
  font-size: 1rem;
  font-weight: 600;
  color: #1a202c;
  transition: all 0.25s ease;
  outline: none;
}

.input-box input:focus,
.input-box select:focus,
.input-group input:focus,
.input-group select:focus {
  border-color: #00baf2;
  background: white;
  box-shadow: 0 0 0 4px rgba(0, 186, 242, 0.15);
  outline: none;
}

.btn-paytm {
  display: block;
  margin: 20px auto 0;
  box-sizing: border-box;
  background: var(--grad-cta);
  color: white;
  font-weight: 800;
  padding: 16px 40px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  width: fit-content;
  font-size: 1.1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.btn-paytm:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.back-to-home {
  display: block;
  text-align: center;
  margin-top: 25px;
  color: var(--brand-neon);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
}

.back-to-home:hover {
  text-decoration: underline;
}

/* Modern Provider Grid (Paytm/PhonePe Style) */
.provider-section {
  margin-top: 35px;
}

.provider-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--brand-deep);
  margin-bottom: 20px;
}

.provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 15px;
}

.sub-tab {
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.75rem;
  color: #64748b;
  text-decoration: none;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.provider-item {
  background: #fff;
  border: 1px solid #edf2f7;
  border-radius: 16px;
  padding: 15px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.provider-item:hover {
  border-color: var(--brand-cyan);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  transform: translateY(-3px);
}

.provider-logo {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.provider-logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.provider-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #4a5568;
}

.radio-group {
  display: flex;
  gap: 20px;
  margin-bottom: 25px;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  cursor: pointer;
}

/* Horizontal Form Layout (Paytm/PhonePe Style) */
.form-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.form-row label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-deep);
  text-align: left;
}

.form-row input,
.form-row select {
  padding: 12px 15px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  font-size: 1rem;
  font-weight: 500;
  outline: none;
  transition: border-color 0.3s;
}

.form-row input:focus {
  border-color: var(--brand-cyan);
}

.form-section-divider {
  border-top: 1px solid #f1f5f9;
  margin: 40px 0;
}

/* Revert workspace for classic pages */
.workspace-classic {
  padding-top: 100px;
}

/* Integrated Form Titles (Dashboard Style) */
.form-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--brand-deep);
  margin-bottom: 30px;
  letter-spacing: -0.8px;
}

/* Dashboard Panel Visibility */
.panel {
  display: none;
}

/* Show the first panel by default */
.panel:first-child {
  display: block;
}

/* If any panel is targeted, hide the default first panel (unless it is the target) */
body:has(.panel:target) .panel:first-child:not(:target) {
  display: none;
}

/* Show the targeted panel */
.panel:target {
  display: block;
}

.sticky-nav-container {
  position: sticky;
  top: 66px;
  z-index: 500;
  margin-top: 66px;
  background-color: #f3f4f6;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.inner-dashboard-header {
  position: relative;
  z-index: 100;
  margin-top: 0;
  margin-bottom: 0;
  display: flow-root;
  background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
}



.dock-container {
  margin-top: -42px;
  position: relative;
  z-index: 100;
  display: flex;
  justify-content: center;
}

.dock {
  background: #1e293b;
  padding: 6px;
  border-radius: 16px;
  display: flex;
  gap: 2px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 95vw;
  overflow-x: auto;
  scrollbar-width: none;
  /* Firefox */
}

.dock::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

/* UNIVERSAL TAB SYSTEM */
.tab-trigger {
  position: fixed;
  top: 0;
  visibility: hidden;
  pointer-events: none;
}

.tab-panel {
  display: none;
  animation: tabFadeIn 0.4s ease-out;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

/* Panel Visibility Logic (Stable Target - High Specificity Lock) */
html body .workspace-main:has(#target-mobile:target) .tab-panel#p-recharge,
html body .workspace-main:has(#target-electricity:target) .tab-panel#p-electricity,
html body .workspace-main:has(#target-dth:target) .tab-panel#p-dth,
html body .workspace-main:has(#target-water:target) .tab-panel#p-water,
html body .workspace-main:has(#target-gas:target) .tab-panel#p-gas,
html body .workspace-main:has(#target-broadband:target) .tab-panel#p-broadband,
html body .workspace-main:has(#target-fastag:target) .tab-panel#p-fastag,
html body .workspace-main:has(#target-loan:target) .tab-panel#p-loan,
html body .workspace-main:has(#target-flights:target) .tab-panel#t-flights,
html body .workspace-main:has(#target-movies:target) .tab-panel#t-movies,
html body .workspace-main:has(#target-trains:target) .tab-panel#t-trains,
html body .workspace-main:has(#target-buses:target) .tab-panel#t-buses,
html body .workspace-main:has(#target-events:target) .tab-panel#t-events,
html body .workspace-main:has(#target-subs:target) .tab-panel#t-subs,
html body .workspace-main:has(#target-qr:target) .tab-panel#p-qr-panel,
html body .workspace-main:has(#target-pos:target) .tab-panel#p-pos-panel,
html body .workspace-main:has(#target-solutions:target) .tab-panel#solutions-panel,
html body .workspace-main:has(#p-qr:target) .tab-panel#p-qr-panel,
html body .workspace-main:has(#p-pos:target) .tab-panel#p-pos-panel,
html body .workspace-main:has(#solutions:target) .tab-panel#solutions-panel,
html body .workspace-main:has(#p-mobile:target) .tab-panel#p-mobile-panel,
html body .workspace-main:has(#p-electricity:target) .tab-panel#p-electricity-panel,
html body .workspace-main:has(#p-dth:target) .tab-panel#p-dth-panel,
html body .workspace-main:has(#p-water:target) .tab-panel#p-water-panel,
html body .workspace-main:has(#p-gas:target) .tab-panel#p-gas-panel,
html body .workspace-main:has(#p-broadband:target) .tab-panel#p-broadband-panel,
html body .workspace-main:has(#p-fastag:target) .tab-panel#p-fastag-panel,
html body .workspace-main:has(#p-loan:target) .tab-panel#p-loan-panel,
html body .workspace-main:has(#target-scan:target) .tab-panel#p-scan,
html body .workspace-main:has(#target-send:target) .tab-panel#p-send,
html body .workspace-main:has(#target-wallet:target) .tab-panel#p-wallet {
  display: block;
}

/* Highlighting Logic (Stable Target - High Specificity Lock) */
html body .workspace-main:has(#target-mobile:target) a[href="#target-mobile"],
html body .workspace-main:has(#target-electricity:target) a[href="#target-electricity"],
html body .workspace-main:has(#target-dth:target) a[href="#target-dth"],
html body .workspace-main:has(#target-water:target) a[href="#target-water"],
html body .workspace-main:has(#target-gas:target) a[href="#target-gas"],
html body .workspace-main:has(#target-broadband:target) a[href="#target-broadband"],
html body .workspace-main:has(#target-fastag:target) a[href="#target-fastag"],
html body .workspace-main:has(#target-loan:target) a[href="#target-loan"],
html body .workspace-main:has(#target-flights:target) a[href="#target-flights"],
html body .workspace-main:has(#target-movies:target) a[href="#target-movies"],
html body .workspace-main:has(#target-trains:target) a[href="#target-trains"],
html body .workspace-main:has(#target-buses:target) a[href="#target-buses"],
html body .workspace-main:has(#target-events:target) a[href="#target-events"],
html body .workspace-main:has(#target-subs:target) a[href="#target-subs"],
html body .workspace-main:has(#p-qr:target) a[href="#p-qr"],
html body .workspace-main:has(#p-pos:target) a[href="#p-pos"],
html body .workspace-main:has(#solutions:target) a[href="#solutions"],
html body .workspace-main:has(#p-mobile:target) a[href="#p-mobile"],
html body .workspace-main:has(#p-electricity:target) a[href="#p-electricity"],
html body .workspace-main:has(#p-dth:target) a[href="#p-dth"],
html body .workspace-main:has(#p-water:target) a[href="#p-water"],
html body .workspace-main:has(#p-gas:target) a[href="#p-gas"],
html body .workspace-main:has(#p-broadband:target) a[href="#p-broadband"],
html body .workspace-main:has(#p-fastag:target) a[href="#p-fastag"],
html body .workspace-main:has(#p-loan:target) a[href="#p-loan"],
html body .workspace-main:has(#target-scan:target) a[href="#target-scan"],
html body .workspace-main:has(#target-send:target) a[href="#target-send"],
html body .workspace-main:has(#target-wallet:target) a[href="#target-wallet"] {
  background: white;
  color: var(--brand-deep);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Default state logic (High Specificity Lock - Smart Persistence) */
html body .workspace-main:not(:has(.tab-trigger:target)):not(:has(.tab-panel:target)):not(:has(#solutions:target)):not(:has(#p-mobile:target)):not(:has(#p-electricity:target)):not(:has(#p-dth:target)):not(:has(#p-water:target)):not(:has(#p-gas:target)):not(:has(#p-broadband:target)):not(:has(#p-fastag:target)):not(:has(#p-loan:target)) .sub-tab:first-child {
  background: white;
  color: var(--brand-deep);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

html body .workspace-main .tab-panel.default {
  display: block;
}

/* Hide the default panel ONLY if a non-default sibling target is active */
html body .workspace-main:has(#target-electricity:target) .tab-panel.default,
html body .workspace-main:has(#target-dth:target) .tab-panel.default,
html body .workspace-main:has(#target-water:target) .tab-panel.default,
html body .workspace-main:has(#target-gas:target) .tab-panel.default,
html body .workspace-main:has(#target-broadband:target) .tab-panel.default,
html body .workspace-main:has(#target-fastag:target) .tab-panel.default,
html body .workspace-main:has(#target-loan:target) .tab-panel.default,
html body .workspace-main:has(#target-movies:target) .tab-panel.default,
html body .workspace-main:has(#target-trains:target) .tab-panel.default,
html body .workspace-main:has(#target-buses:target) .tab-panel.default,
html body .workspace-main:has(#target-events:target) .tab-panel.default,
html body .workspace-main:has(#target-subs:target) .tab-panel.default,
html body .workspace-main:has(#target-pos:target) .tab-panel.default,
html body .workspace-main:has(#target-solutions:target) .tab-panel.default,
html body .workspace-main:has(#p-pos:target) .tab-panel.default,
html body .workspace-main:has(#solutions:target) .tab-panel.default,
html body .workspace-main:has(#p-mobile:target) .tab-panel.default,
html body .workspace-main:has(#p-electricity:target) .tab-panel.default,
html body .workspace-main:has(#p-dth:target) .tab-panel.default,
html body .workspace-main:has(#p-water:target) .tab-panel.default,
html body .workspace-main:has(#p-gas:target) .tab-panel.default,
html body .workspace-main:has(#p-broadband:target) .tab-panel.default,
html body .workspace-main:has(#p-fastag:target) .tab-panel.default,
html body .workspace-main:has(#p-loan:target) .tab-panel.default,
html body .workspace-main:has(#target-bills:target) .tab-panel.default,
html body .workspace-main:has(#target-tickets:target) .tab-panel.default,
html body .workspace-main:has(#target-stays:target) .tab-panel.default {
  display: none;
}

/* Sub-panel default state (Nested logic) */
html body .workspace-main .tab-panel.default .tab-panel.default {
  display: block;
}

/* Hide sub-panels ONLY if their own specific sibling target is active */
html body .workspace-main:has(#target-send:target) #p-scan,
html body .workspace-main:has(#target-wallet:target) #p-scan,
html body .workspace-main:has(#target-scan:target) #p-send,
html body .workspace-main:has(#target-wallet:target) #p-send,
html body .workspace-main:has(#target-scan:target) #p-wallet,
html body .workspace-main:has(#target-send:target) #p-wallet {
  display: none;
}

/* Dynamic Dock Highlight Logic */
.dock-link {
  position: relative;
}

/* Default highlight for the first link when no target is present */
.workspace:not(:has(.tab-panel:target))~.inner-dashboard-header .dock-link:first-child,
body:not(:has(.tab-panel:target)) .dock-link:first-child {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Target-based highlights for all service types */
body:has(#electricity:target) .dock-link[href="#electricity"],
body:has(#loan:target) .dock-link[href="#loan"],
body:has(#cable:target) .dock-link[href="#cable"],
body:has(#insurance:target) .dock-link[href="#insurance"],
body:has(#water:target) .dock-link[href="#water"],
body:has(#scan:target) .dock-link[href="#scan"],
body:has(#send:target) .dock-link[href="#send"],
body:has(#wallet:target) .dock-link[href="#wallet"],
body:has(#lite:target) .dock-link[href="#lite"],
body:has(#qr:target) .dock-link[href="#qr"],
body:has(#soundbox:target) .dock-link[href="#soundbox"],
body:has(#pos:target) .dock-link[href="#pos"],
body:has(#loans:target) .dock-link[href="#loans"],
body:has(#ads:target) .dock-link[href="#ads"],
body:has(#flights:target) .dock-link[href="#flights"],
body:has(#movies:target) .dock-link[href="#movies"],
body:has(#events:target) .dock-link[href="#events"],
body:has(#trains:target) .dock-link[href="#trains"],
body:has(#buses:target) .dock-link[href="#buses"],
body:has(#p-mobile:target) .dock-link[href="#p-mobile"],
body:has(#p-dth:target) .dock-link[href="#p-dth"],
body:has(#p-fastag:target) .dock-link[href="#p-fastag"],
body:has(#p-metro:target) .dock-link[href="#p-metro"],
body:has(#p-broad:target) .dock-link[href="#p-broad"] {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Ensure default highlight turns off when a target is active */
body:has(.tab-panel:target) .dock-link:first-child {
  background: transparent;
  color: #94a3b8;
}

/* Double check specific target highlight for first child if it is the target */
html body :has(#electricity:target) .dock-link[href="#electricity"]:first-child,
html body :has(#scan:target) .dock-link[href="#scan"]:first-child,
html body :has(#qr:target) .dock-link[href="#qr"]:first-child,
html body :has(#flights:target) .dock-link[href="#flights"]:first-child,
html body :has(#p-mobile:target) .dock-link[href="#p-mobile"]:first-child {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Layout Alignment Fixes */
.glass-card {
  display: flex;
  flex-direction: column;
}

/* NEW: Specific class for main dashboard panels to prevent stretching category boxes */
.dashboard-panel {
  min-height: 500px;
}

.card-grid .glass-card {
  min-height: unset;
}

.tab-panel {
  flex: 1;
}

.workspace-single .glass-card {
  padding: 60px;
}

/* SIDEBAR NAVIGATION (As per screenshot) */
.sidebar-nav-card {
  background: white;
  border-radius: 32px;
  padding: 30px;
  border: 1px solid rgba(0, 41, 112, 0.08);
  box-shadow: 0 10px 40px rgba(0, 41, 112, 0.04);
}

.sidebar-nav-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  padding-left: 15px;
}

.sub-tab {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  margin-bottom: 8px;
  border-radius: 16px;
  color: var(--brand-deep);
  font-weight: 700;
  font-size: 1rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.sub-tab:hover {
  background: #f8fafc;
  transform: translateX(5px);
}

/* Active State Highlighting */
html body .workspace-main:has(#p-qr:target)~.inner-sidebar a[href="#p-qr"],
html body .workspace-main:has(#p-pos:target)~.inner-sidebar a[href="#p-pos"],
html body .workspace-main:has(#solutions:target)~.inner-sidebar a[href="#solutions"],
html body .workspace-main:has(#p-mobile:target) a[href="#p-mobile"],
html body .workspace-main:has(#p-electricity:target) a[href="#p-electricity"],
html body .workspace-main:has(#p-dth:target) a[href="#p-dth"],
html body .workspace-main:has(#p-water:target) a[href="#p-water"],
html body .workspace-main:has(#p-gas:target) a[href="#p-gas"],
html body .workspace-main:has(#p-broadband:target) a[href="#p-broadband"],
html body .workspace-main:has(#p-fastag:target) a[href="#p-fastag"],
html body .workspace-main:has(#p-loan:target) a[href="#p-loan"],
html body .workspace-main:has(#p-qr:target) a[href="#p-qr"],
html body .workspace-main:has(#p-pos:target) a[href="#p-pos"],
html body .workspace-main:has(#solutions:target) a[href="#solutions"] {
  background: white;
  color: var(--brand-deep);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: none;
}

/* Default highlight for first item when no target */
html body .workspace:not(:has(.tab-trigger:target)):not(:has(.tab-panel:target)):not(:has(#solutions:target)):not(:has(#p-mobile:target)):not(:has(#p-electricity:target)):not(:has(#p-dth:target)):not(:has(#p-water:target)):not(:has(#p-gas:target)):not(:has(#p-broadband:target)):not(:has(#p-fastag:target)):not(:has(#p-loan:target)) .inner-sidebar .sub-tab:first-of-type {
  background: white;
  color: var(--brand-deep);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* LOGO & PROVIDER GRID STANDARDIZATION */
.logo img {
  height: 35px;
  width: auto;
  display: block;
}

/* Trust Badges & Sidebar Icons */
.inner-side-card img {
  height: 70px;
  width: auto;
  display: block;
  margin-bottom: 20px;
}

.inner-side-card {
  min-width: 340px;
}

/* Dashboard Sidebar Alignment (Left-aligned as requested) */
body:has(#p-mobile) .inner-side-card,
body:has(#p-qr) .inner-side-card {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px 30px;
}

body:has(#p-mobile) .inner-side-card h3,
body:has(#p-mobile) .inner-side-card p,
body:has(#p-qr) .inner-side-card h3,
body:has(#p-qr) .inner-side-card p {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

body:has(#p-mobile) .inner-side-card div[style*="justify-items: end"],
body:has(#p-mobile) .inner-side-card div[style*="justify-items: end"]>div,
body:has(#p-qr) .inner-side-card div[style*="justify-items: end"],
body:has(#p-qr) .inner-side-card div[style*="justify-items: end"]>div {
  justify-items: flex-start;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

body:has(#p-mobile) .inner-side-card img,
body:has(#p-qr) .inner-side-card img {
  margin: 0 0 20px 0;
  display: block;
}

.provider-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 40px 20px;
  scrollbar-width: none;
}

.provider-grid::-webkit-scrollbar {
  display: none;
}

.provider-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 140px;
  transition: all 0.3s var(--ease);
}

.provider-card img {
  height: 60px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(0%) opacity(1);
  transition: all 0.4s var(--ease);
}

.provider-card:hover img {
  filter: grayscale(0%) opacity(1);
  transform: translateY(-8px);
}

.provider-name {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--brand-deep);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 15px;
  opacity: 0.5;
  transition: all 0.3s var(--ease);
}

.provider-card:hover .provider-name {
  opacity: 1;
  color: var(--brand-cyan);
}

/* FLOATING SCAN QR BUTTON & PAGE STYLES */


@keyframes qrPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.4);
  }

  70% {
    box-shadow: 0 0 0 20px rgba(34, 211, 238, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
  }
}

/* QR Page Specifics - PREMIUM UPGRADE */
.qr-container {
  max-width: 650px;
  margin: 0 auto;
  text-align: center;
}

.qr-viewfinder {
  position: relative;
  background: white;
  padding: 45px;
  border-radius: 48px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.12);
  display: inline-block;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 40px;
}

.qr-viewfinder .corner {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 6px solid var(--brand-cyan);
  z-index: 5;
}

.qr-viewfinder .tl {
  top: 25px;
  left: 25px;
  border-right: 0;
  border-bottom: 0;
  border-radius: 20px 0 0 0;
}

.qr-viewfinder .tr {
  top: 25px;
  right: 25px;
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 20px 0 0;
}

.qr-viewfinder .bl {
  bottom: 25px;
  left: 25px;
  border-right: 0;
  border-top: 0;
  border-radius: 0 0 0 20px;
}

.qr-viewfinder .br {
  bottom: 25px;
  right: 25px;
  border-left: 0;
  border-top: 0;
  border-radius: 0 0 20px 0;
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--brand-cyan), transparent);
  box-shadow: 0 0 20px var(--brand-cyan);
  animation: scanMove 4s infinite ease-in-out;
  z-index: 10;
}

@keyframes scanMove {
  0% {
    top: 15%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    top: 85%;
    opacity: 0;
  }
}

.qr-image-wrap {
  display: inline-block;
  padding: 15px;
  background: white;
  border-radius: 24px;
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.2);
  border: 1px solid rgba(0, 212, 255, 0.15);
  margin: 0 auto;
}

.qr-image-wrap img {
  width: 320px;
  height: auto;
  display: block;
  border-radius: 12px;
}

.accepted-apps {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #f1f5f9;
}

.app-icon-mini {
  width: 45px;
  height: 45px;
  background: #f8fafc;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.app-icon-mini:hover {
  transform: translateY(-5px);
  border-color: var(--brand-cyan);
  background: white;
  box-shadow: 0 5px 15px rgba(34, 211, 238, 0.2);
}

.payment-steps {
  text-align: left;
  margin-top: 40px;
  background: #f8fafc;
  padding: 35px;
  border-radius: 28px;
  border: 1px solid #e2e8f0;
}

.step-pill {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.step-num-small {
  width: 32px;
  height: 32px;
  background: var(--brand-cyan);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 900;
}

/* Dynamic Dock Highlight Logic */
html body .workspace-main:has(#target-mobile:target) .dock-link[href="#target-mobile"],
html body .workspace-main:has(#target-electricity:target) .dock-link[href="#target-electricity"],
html body .workspace-main:has(#target-dth:target) .dock-link[href="#target-dth"],
html body .workspace-main:has(#target-water:target) .dock-link[href="#target-water"],
html body .workspace-main:has(#target-gas:target) .dock-link[href="#target-gas"],
html body .workspace-main:has(#target-broadband:target) .dock-link[href="#target-broadband"],
html body .workspace-main:has(#target-fastag:target) .dock-link[href="#target-fastag"],
html body .workspace-main:has(#target-loan:target) .dock-link[href="#target-loan"],
html body .workspace-main:has(#target-scan:target) .dock-link[href="#target-scan"],
html body .workspace-main:has(#target-send:target) .dock-link[href="#target-send"],
html body .workspace-main:has(#target-wallet:target) .dock-link[href="#target-wallet"] {
  background: white;
  color: var(--brand-deep);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

html body .workspace-main:not(:has(.tab-trigger:target)):not(:has(.tab-panel:target)):not(:has(#solutions:target)) .dock-link:first-child {
  background: white;
  color: var(--brand-deep);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* Edge-to-Edge Mobile Responsiveness */
@media (max-width: 1024px) {
  .workspace {
    display: block;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
  }

  .workspace-main,
  .inner-sidebar {
    width: 100%;
    display: block;
    padding: 0;
    margin: 0;
  }

  .glass-card.dashboard-panel,
  .inner-side-card {
    border-radius: 0;
    /* Truly edge-to-edge */
    width: 100%;
    margin: 0;
    padding: 40px 20px;
    border-left: none;
    border-right: none;
    box-shadow: none;
    box-sizing: border-box;
  }

  .sub-tab-bar {
    width: 100%;
    border-radius: 0;
  }
}


/* NESTED DROPDOWN MENU FIXED */

/* NESTED DROPDOWN MENU - ULTIMATE ROBUST VERSION */
li.nested-drop {
  position: relative;
  width: 100%;
}

li.nested-drop>a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

li.nested-drop .nested-menu {
  position: absolute;
  left: 100%;
  top: -12px;
  width: max-content;
  min-width: 320px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.03);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease-out;
  z-index: 2000;
  pointer-events: none;
  padding: 16px;
  display: block;
}

li.nested-drop:hover>.nested-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* GRID CONTENT - USING TAGS THAT WON'T CONFLICT */
.paytm-grid-container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2px 16px !important;
  width: 100% !important;
}

.paytm-grid-container::before {
  content: "Ticket Booking" !important;
  grid-column: 1 / -1 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  padding: 4px 16px 8px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  margin-bottom: 6px !important;
}

.paytm-menu-item {
  display: flex !important;
  align-items: center !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  transition: background-color 0.15s ease !important;
}

.paytm-menu-item:hover {
  background: #f8fafc !important;
  transform: none !important;
  box-shadow: none !important;
}

.paytm-menu-item i {
  display: none !important;
  /* Remove emojis entirely */
}

.paytm-menu-item b {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #334155 !important;
  display: inline-block !important;
}

.paytm-menu-footer {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.paytm-menu-footer .flex-generic-2 span {
  display: none !important;
  /* Hide footer emojis */
}

.paytm-menu-footer a.my-bookings-btn {
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  transition: background-color 0.15s ease !important;
}

.paytm-menu-footer a.my-bookings-btn:hover {
  background: #f8fafc !important;
}

@media (max-width: 900px) {
  .paytm-grid-menu {
    width: 100%;
    padding: 10px 0;
  }
}






/* 1. Mobile Menu Toggle - Pure CSS */
.nav-toggle-label {
  display: none;
}

@media (max-width: 968px) {

  /* Container padding */
  .container {
    padding: 0 20px;
  }

  /* Navbar Mobile Layout */
  .nav {
    height: 80px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo {
    order: 1;
  }

  .nav-toggle-label {
    order: 2;
    display: block;
    font-size: 2rem;
    cursor: pointer;
    z-index: 100000;
    color: var(--brand-deep);
    padding: 10px;
    transition: 0.3s;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    background: #ffffff;
    flex-direction: column;
    padding: 100px 40px;
    box-shadow: -15px 0 40px rgba(0, 0, 0, 0.15);
    transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 99999;
    /* Ensure it's above everything */
    overflow-y: auto;
    display: flex;
    gap: 0;
  }

  .nav-btns {
    display: none;
    /* Hide secondary buttons in header on mobile */
  }

  /* Toggle Mechanism - FIXED SELECTOR */
  #mobile-menu-toggle:checked~.nav-menu {
    right: 0;
  }

  /* Simple X when open */
  #mobile-menu-toggle:checked~.nav-toggle-label::after {
    content: "×";
    position: fixed;
    top: 20px;
    right: 30px;
    font-size: 3rem;
  }

  #mobile-menu-toggle:checked~.nav-toggle-label {
    opacity: 0;
    /* Hide the burger icon, replaced by X */
  }

  .nav-menu li {
    width: 100%;
    margin-bottom: 5px;
  }

  .nav-menu a {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-main);
    padding: 15px 0;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Sub-menu behavior on mobile */
  .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    padding-left: 20px;
    display: none;
    /* Hidden by default on mobile */
    transform: none;
  }

  .drop-item:hover .sub-menu {
    display: block;
  }

  /* Hero Section Stacking */
  .hero-content {
    flex-direction: column;
    text-align: center;
    padding-top: 100px;
  }

  .hero-text {
    padding-right: 0;
    margin-bottom: 50px;
  }

  .hero-headline {
    font-size: 2.2rem;
  }

  .hero-btns {
    justify-content: center;
  }

  .hero-visual-new {
    width: 100%;
    margin-top: 20px;
  }

  /* Grids Stacking */
  .core-bento-grid,
  .bento-grid,
  .card-grid,
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Modal Responsiveness */
  .modal-content {
    width: 95%;
    height: 90vh;
    margin: 5vh auto;
    padding: 30px 15px;
    overflow-y: auto;
  }

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

  .modal-icon-premium {
    width: 65px;
    height: 65px;
  }

  /* Footer base stacking */
  .footer-base {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
}

/* Adjustments for very small screens */
@media (max-width: 480px) {
  .modal-grid {
    grid-template-columns: 1fr;
  }

  .hero-headline {
    font-size: 1.8rem;
  }
}


/* ============================================================
   FAQ PAGE STYLES
   ============================================================ */
.faq-search-wrapper {
  background: white;
  padding: 30px;
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
  margin-top: -60px;
  position: relative;
  z-index: 10;
  border: 1px solid #f1f5f9;
}

.faq-search-bar {
  display: flex;
  gap: 15px;
  background: #f8fafc;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

.faq-search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 15px;
  font-size: 1rem;
  outline: none;
}

.faq-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.faq-cat-card {
  background: white;
  padding: 25px;
  border-radius: 20px;
  text-align: center;
  border: 1px solid #f1f5f9;
  transition: 0.3s;
  cursor: pointer;
}

.faq-cat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 186, 242, 0.1);
  border-color: var(--brand-deep);
}

.faq-cat-icon {
  font-size: 2rem;
  margin-bottom: 12px;
  display: block;
}

.faq-cat-title {
  font-weight: 700;
  color: var(--text-main);
}

/* Accordion Logic */
.faq-item {
  background: white;
  border-radius: 16px;
  border: 1px solid #f1f5f9;
  margin-bottom: 15px;
  overflow: hidden;
}

.faq-toggle {
  display: none;
}

.faq-header {
  padding: 22px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 700;
  color: var(--text-main);
  transition: 0.3s;
}

.faq-header:hover {
  background: rgba(0, 186, 242, 0.02);
}

.faq-header::after {
  content: "⌄";
  font-size: 1.2rem;
  transition: 0.3s;
}

.faq-content {
  max-height: 0;
  padding: 0 30px;
  overflow: hidden;
  transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-secondary);
  line-height: 1.7;
}

.faq-toggle:checked+.faq-header+.faq-content {
  max-height: 500px;
  padding: 0 30px 30px;
}

.faq-toggle:checked+.faq-header::after {
  transform: rotate(180deg);
}

.faq-toggle:checked+.faq-header {
  color: var(--brand-deep);
}


/* IDE INLINE STYLE EXTRACTOR FIX */
.custom-generic {
  display: none;
}

.custom-generic-2 {
  display: none;
}

.flex-generic {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.box-generic {
  height: 55px;
  width: auto;
  display: block;
}

.text-generic {
  transform: rotate(-90deg);
  font-size: 0.8rem;
}

.box-generic-2 {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

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

.text-generic-2 {
  font-size: 1.2rem;
}

.custom-generic-3 {
  cursor: pointer;
}

.box-generic-3 {
  padding-top: 25px;
}

.box-rounded-bg {
  padding: 24px;
  margin-top: 40px;
  text-align: center;
  background: rgba(0, 41, 112, 0.03);
  border-radius: 16px;
  border: 1px solid rgba(0, 41, 112, 0.06);
}

.box-generic-4 {
  height: 80px;
  width: auto;
  mix-blend-mode: screen;
}

.text-generic-3 {
  margin-top: 20px;
  font-size: 0.9rem;
}

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

.box-generic-5 {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

.box-generic-6 {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.box-rounded-bg-2 {
  height: 360px;
  border-radius: 16px;
  margin-bottom: 30px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.box-generic-7 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.text-bold-brand-deep {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 20px;
  color: var(--brand-deep);
}

.text-generic-4 {
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 20px;
}

.flex-center-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.text-brand-deep-2 {
  margin-bottom: 20px;
  font-size: 1.2rem;
  color: var(--brand-deep);
  width: 100%;
}

.box-generic-8 {
  list-style: none;
  padding: 0;
  width: 100%;
}

.flex-center-3 {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: center;
}

.text-generic-5 {
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
}

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

.text-brand-deep-3 {
  margin-bottom: 15px;
  font-size: 1.2rem;
  color: var(--brand-deep);
  width: 100%;
}

.flex-center-5 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
}

.text-brand-deep-rounded-bg {
  background: #f1f5f9;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-deep);
}

.custom-generic-4 {
  position: relative;
}

.flex-generic-3 {
  max-width: 1280px;
  width: 95%;
  margin: 50px auto 40px auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.flex-center-rounded {
  margin-bottom: 25px;
  padding: 20px 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  overflow-x: auto;
  gap: 30px;
  white-space: nowrap;
}

.flex-generic-4 {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 60px;
  padding-bottom: 8px;
}

.box-generic-9 {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.text-generic-6 {
  font-size: 0.8rem;
  font-weight: 800;
  color: #475569;
  white-space: nowrap;
}

.flex-generic-5 {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 60px;
  border-bottom: 3px solid #00baf2;
  padding-bottom: 5px;
}

.text-generic-7 {
  font-size: 0.8rem;
  font-weight: 800;
  color: #00baf2;
  white-space: nowrap;
}

.box-rounded {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 8px;
}

.box-rounded-2 {
  padding: 50px;
  border-radius: 32px;
}

.flex-center-rounded-bg {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 25px;
  background: rgba(0, 186, 242, 0.03);
  border: 1px solid rgba(0, 186, 242, 0.15);
  border-radius: 16px;
  margin-top: -10px;
}

.flex-center-rounded-shadow-bg {
  background: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  font-size: 1.5rem;
}

.custom-generic-5 {
  flex: 1;
}

.text-bold-brand-deep-2 {
  margin: 0 0 5px 0;
  color: var(--brand-deep);
  font-weight: 800;
  font-size: 1rem;
}

.text-generic-8 {
  margin: 0;
  color: #64748b;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.5;
}

.box-rounded-shadow {
  padding: 0;
  overflow: hidden;
  border: none;
  margin-top: 25px;
  box-shadow: var(--shadow-md);
  border-radius: 20px;
  position: relative;
}

.box-rounded-3 {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

.box-generic-10 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  padding: 40px 20px 20px;
  text-align: center;
}

.text-bold-white {
  color: white;
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.text-generic-9 {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  font-weight: 600;
}

.text-generic-10 {
  font-style: normal;
  font-size: 1.8rem;
  line-height: 1;
}

.box-generic-11 {
  height: 75px;
  width: auto;
}

.box-rounded-4 {
  width: 100%;
  max-width: 440px;
  border-radius: 24px;
  filter: drop-shadow(0 20px 50px rgba(0, 41, 112, 0.15));
}

.flex-rounded-shadow {
  position: absolute;
  top: 10%;
  right: -20px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  padding: 12px 20px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.5);
  z-index: 20;
}

.text-generic-11 {
  color: #22c55e;
  font-weight: 900;
}

.text-generic-12 {
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
}

.flex-rounded-shadow-2 {
  position: absolute;
  top: 40%;
  left: -30px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  padding: 12px 20px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.5);
  z-index: 20;
}

.text-generic-13 {
  color: #f59e0b;
  font-weight: 900;
}

.flex-rounded-shadow-3 {
  position: absolute;
  bottom: 20%;
  right: 20px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  padding: 12px 20px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.5);
  z-index: 20;
}

.text-generic-14 {
  color: #64748b;
  font-weight: 900;
}

.custom-bg {
  background: var(--bg-2);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}

.flex-center-rounded-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  padding: 25px 40px;
  border-radius: 20px;
}

.flex-center-6 {
  display: flex;
  align-items: center;
  gap: 15px;
}

.text-generic-15 {
  font-size: 2.5rem;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.3));
}

.custom-generic-6 {
  text-align: left;
}

.text-brand-deep-4 {
  font-size: 1.1rem;
  margin-bottom: 3px;
  background: linear-gradient(90deg, var(--brand-deep), #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.text-generic-16 {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.text-generic-17 {
  margin-top: 15px;
  color: var(--text-secondary);
}

.custom-generic-7 {
  cursor: pointer;
  display: block;
  text-decoration: none;
}

.custom-bg-2 {
  background: var(--bg-3);
}

.box-rounded-5 {
  padding: 30px;
  text-align: left;
  width: 100%;
  border-radius: 16px;
}

.text-generic-18 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.text-generic-19 {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 20px;
  line-height: 1.5;
}

.flex-center-7 {
  color: var(--text-accent);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: opacity 0.3s;
}

.text-generic-20 {
  font-size: 1.1rem;
  line-height: 1;
}

.custom-bg-3 {
  background: #ffffff;
}

.flex-generic-6 {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
}

.box-generic-12 {
  flex: 1;
  min-width: 320px;
}

.box-generic-13 {
  text-align: left;
  margin-bottom: 20px;
}

.box-generic-14 {
  margin-top: 40px;
  display: block;
}

.flex-center-8 {
  flex: 1;
  min-width: 320px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  margin-top: 120px;
}

.box-rounded-6 {
  width: 100%;
  max-width: 340px;
  border-radius: 24px;
  filter: drop-shadow(0 20px 40px rgba(0, 41, 112, 0.15));
}

.custom-bg-4 {
  background: var(--bg-2);
}

.custom-generic-8 {
  text-align: center;
}

.custom-bg-5 {
  background: var(--bg-1);
}

.box-generic-15 {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.box-generic-16 {
  padding: 20px;
}

.custom-generic-9 {
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.text-generic-21 {
  position: absolute;
  right: -10px;
  bottom: -20px;
  font-size: 8rem;
  opacity: 0.04;
  z-index: 0;
  pointer-events: none;
}

.custom-generic-10 {
  position: relative;
  z-index: 1;
}

.box-generic-17 {
  margin-bottom: 20px;
  display: inline-flex;
}

.text-generic-22 {
  margin-bottom: 12px;
  font-size: 1.3rem;
}

.text-generic-23 {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.text-generic-24 {
  color: var(--text-primary);
  font-size: 1.8rem;
  margin-bottom: 15px;
}

.text-generic-25 {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 25px;
  line-height: 1.5;
}

.text-generic-26 {
  list-style: none;
  padding: 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 30px;
}

.box-generic-18 {
  margin-bottom: 12px;
  position: relative;
  padding-left: 20px;
}

.text-generic-27 {
  position: absolute;
  left: 0;
  color: var(--text-accent);
}

.box-generic-19 {
  position: relative;
  padding-left: 20px;
}

.custom-generic-11 {
  gap: 10px;
}

.text-generic-28 {
  color: var(--text-primary);
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.4;
}

.box-generic-20 {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.box-generic-21 {
  margin-bottom: 20px;
}

.text-generic-29 {
  font-size: 1.2rem;
  color: var(--text-secondary);
}

.box-center {
  justify-content: center;
  margin-top: 40px;
}

.box-generic-22 {
  max-width: 900px;
  margin: 0 auto;
}

.text-generic-30 {
  color: var(--text-secondary);
  line-height: 1.9;
  font-size: 1.1rem;
  margin-bottom: 24px;
}

.box-generic-23 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 40px;
}

.box-rounded-7 {
  padding: 28px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  transition: 0.3s;
  min-height: 170px;
}

.text-generic-31 {
  font-size: 30px;
}

.box-generic-24 {
  margin: 12px 0 6px;
}

.custom-generic-12 {
  opacity: 0.8;
}

.text-generic-32 {
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.box-rounded-8 {
  padding: 28px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  transition: 0.3s;
  min-height: 170px;
  height: 100%;
}

.box-rounded-9 {
  padding: 28px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  transition: 0.3s;
  min-height: 170px;
}

.box-generic-25 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.box-generic-26 {
  padding: 28px;
  text-align: center;
}

.text-generic-33 {
  font-size: 2rem;
  margin-bottom: 12px;
}

.box-generic-27 {
  margin-bottom: 8px;
}

.text-generic-34 {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.custom-generic-13 {
  position: relative;
  z-index: 1;
  text-align: center;
}

.text-generic-35 {
  color: var(--text-secondary);
  margin: 20px auto 0;
  max-width: 480px;
}

.flex-center-9 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.custom-generic-14 {
  flex-direction: column;
  gap: 14px;
}

.flex-center-10 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.box-rounded-shadow-bg {
  width: 220px;
  height: 220px;
  object-fit: contain;
  border-radius: 16px;
  background: white;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 41, 112, 0.12);
}

.text-generic-36 {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.box-rounded-bg-3 {
  padding: 24px;
  margin-top: 20px;
  background: rgba(0, 41, 112, 0.03);
  border-radius: 16px;
  border: 1px solid rgba(0, 41, 112, 0.06);
}

.box-center-2 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 40px;
  justify-content: center;
}

.box-generic-28 {
  padding: 32px;
  text-align: center;
}

.text-generic-37 {
  font-size: 2rem;
  margin-bottom: 16px;
}

.box-generic-29 {
  margin-bottom: 10px;
}

.text-generic-38 {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.7;
}

.box-generic-30 {
  max-width: 680px;
  margin: 48px auto 0;
  padding: 36px;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.text-generic-39 {
  color: var(--text-secondary);
  line-height: 1.8;
}

.text-generic-40 {
  color: var(--text-secondary);
  line-height: 1.8;
  margin-top: 16px;
}

.box-generic-31 {
  padding-top: 0;
  margin-top: 0;
}

.box-generic-32 {
  margin-bottom: 30px;
}

.grid-generic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.box-rounded-10 {
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  font-family: inherit;
  outline: none;
}

.text-bold-brand-deep-3 {
  font-weight: 800;
  margin-bottom: 24px;
  font-size: 1.3rem;
  color: var(--brand-deep);
}

.flex-generic-7 {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.text-generic-41 {
  font-size: 1.5rem;
}

.text-generic-42 {
  margin: 0 0 5px;
  font-size: 1rem;
}

.text-generic-43 {
  margin: 0;
  color: #64748b;
  font-size: 0.95rem;
}

.flex-generic-8 {
  display: flex;
  gap: 16px;
}

.text-generic-44 {
  margin: 0;
  color: #64748b;
  font-size: 0.95rem;
  line-height: 1.5;
}

.text-brand-deep-white {
  background: var(--brand-deep);
  color: white;
  border: none;
}

.text-generic-45 {
  margin-bottom: 12px;
  font-size: 1.2rem;
}

.text-generic-46 {
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.6;
  margin-bottom: 20px;
}

.text-brand-cyan {
  color: var(--brand-cyan);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
}

.box-generic-33 {
  padding: 0;
  border: none;
  background: transparent;
}

.box-rounded-11 {
  padding: 40px;
  border-radius: 32px;
}

.flex-rounded-bg {
  display: flex;
  gap: 15px;
  margin: 0 auto 30px auto;
  background: #f1f5f9;
  padding: 5px;
  border-radius: 12px;
  width: fit-content;
}

.box-brand-cyan-rounded-bg {
  background: #f8fafc;
  border: 2px dashed var(--brand-cyan);
  border-radius: 32px;
  padding: 60px 40px;
  text-align: center;
}

.box-rounded-shadow-bg-2 {
  width: 200px;
  height: 200px;
  border: 4px solid #fff;
  margin: 0 auto 30px;
  border-radius: 24px;
  position: relative;
  background: #000;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.box-brand-cyan-shadow-bg {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 90%;
  height: 2px;
  background: var(--brand-cyan);
  box-shadow: 0 0 15px var(--brand-cyan);
  animation: scanLine 3s infinite ease-in-out;
}

.text-bold-brand-deep-4 {
  font-weight: 850;
  color: var(--brand-deep);
  margin-bottom: 12px;
}

.text-rounded-bg {
  padding: 10px 25px;
  border-radius: 10px;
  font-weight: 700;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.text-bold-brand-deep-5 {
  font-weight: 850;
  color: var(--brand-deep);
  margin-bottom: 25px;
}

.text-bold-rounded {
  width: 100%;
  padding: 18px;
  border-radius: 12px;
  font-weight: 900;
}

.box-rounded-bg-4 {
  background: linear-gradient(135deg, #f8fafc, #edf2f7);
  border-radius: 24px;
  padding: 40px;
  text-align: center;
}

.text-generic-47 {
  font-size: 3rem;
  margin-bottom: 15px;
}

.text-bold-brand-deep-6 {
  font-weight: 850;
  color: var(--brand-deep);
  margin-bottom: 8px;
}

.text-generic-48 {
  color: #64748b;
  margin-bottom: 25px;
}

.text-rounded {
  padding: 12px 30px;
  border-radius: 12px;
  font-weight: 700;
}

.box-generic-34 {
  text-align: center;
  margin-bottom: 35px;
}

.grid-generic-2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.text-bold {
  font-weight: 800;
  font-size: 0.8rem;
}

.flex-generic-9 {
  display: flex;
  gap: 15px;
  margin: 0 auto 30px auto;
  width: fit-content;
}

.grid-generic-3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.text-bold-rounded-bg {
  width: 100%;
  padding: 18px;
  border-radius: 12px;
  font-weight: 900;
  background: #2563eb;
}

.custom-generic-15 {
  position: sticky;
  top: 180px;
}

.box-generic-35 {
  margin-bottom: 25px;
  text-align: left;
}

.box-generic-36 {
  height: 60px;
}

.text-bold-brand-deep-7 {
  font-weight: 850;
  margin-bottom: 16px;
  font-size: 1.4rem;
  color: var(--brand-deep);
  text-align: left;
}

.text-generic-49 {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 24px;
  text-align: left;
}

.grid-generic-4 {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.flex-center-11 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: #1e293b;
}

.text-generic-50 {
  color: #22c55e;
}

.box-generic-37 {
  margin-bottom: 80px;
}

.text-brand-deep-white-rounded-bg {
  background: linear-gradient(135deg, var(--brand-deep), #001a4d);
  padding: 60px;
  border-radius: 40px;
  color: white;
  text-align: center;
}

.text-bold-white-2 {
  font-size: 2.8rem;
  font-weight: 900;
  margin-bottom: 15px;
  color: #ffffff;
  display: inline-block;
}

.box-generic-38 {
  opacity: 0.8;
  margin-bottom: 35px;
}

.flex-center-12 {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.box-generic-39 {
  height: 50px;
  width: auto;
}

.box-generic-40 {
  padding: 24px;
  margin-top: 12px;
}

.grid-generic-5 {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.box-rounded-12 {
  padding: 30px;
  border-radius: 24px;
}

.text-bold-brand-deep-8 {
  font-weight: 850;
  margin-bottom: 15px;
  color: var(--brand-deep);
}

.text-generic-51 {
  color: #64748b;
  font-size: 0.9rem;
}

.text-generic-52 {
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.5;
}

.box-generic-41 {
  height: 50px;
}

.text-generic-53 {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.6;
}

.custom-generic-16 {
  position: fixed;
  top: 0;
}

.flex-rounded {
  display: flex;
  gap: 12px;
  margin: 0 auto 40px auto;
  background: #f1f5f9;
  padding: 6px;
  border-radius: 14px;
  width: fit-content;
  overflow-x: auto;
  scrollbar-width: none;
}

.grid-generic-6 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
}

.box-rounded-bg-5 {
  background: #f8fafc;
  padding: 40px;
  border-radius: 32px;
  border: 1px solid #e2e8f0;
  text-align: center;
}

.flex-center-rounded-shadow-bg-2 {
  width: 120px;
  height: 120px;
  background: white;
  border-radius: 20px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.box-rounded-13 {
  width: 80px;
  height: 80px;
  border: 3px solid #000;
  border-radius: 8px;
  position: relative;
}

.box-bg {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  background: #000;
}

.text-bold-brand-deep-9 {
  font-weight: 850;
  color: var(--brand-deep);
  margin-bottom: 10px;
}

.text-generic-54 {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 20px;
}

.text-generic-55 {
  padding: 10px 25px;
  font-size: 0.9rem;
}

.box-rounded-bg-6 {
  background: #fffbeb;
  padding: 40px;
  border-radius: 32px;
  border: 1px solid #fef3c7;
  text-align: center;
}

.flex-center-white-rounded-shadow-bg {
  width: 120px;
  height: 120px;
  background: #f59e0b;
  color: white;
  border-radius: 20px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.2);
}

.text-bg {
  padding: 10px 25px;
  font-size: 0.9rem;
  background: #f59e0b;
}

.box-rounded-bg-7 {
  background: #f0fdf4;
  padding: 30px;
  border-radius: 24px;
  border: 1px solid #dcfce7;
}

.text-bold-2 {
  font-weight: 800;
  color: #166534;
  margin-bottom: 10px;
}

.grid-generic-7 {
  list-style: none;
  padding: 0;
  color: #166534;
  font-size: 0.95rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

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

.text-bold-brand-deep-10 {
  font-weight: 850;
  font-size: 1.8rem;
  color: var(--brand-deep);
  margin-bottom: 20px;
}

.text-generic-56 {
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 30px;
}

.grid-generic-8 {
  display: grid;
  gap: 15px;
  margin-bottom: 30px;
}

.text-rounded-2 {
  padding: 15px 40px;
  font-size: 1.1rem;
  border-radius: 12px;
}

.flex-center-rounded-bg-2 {
  background: #f1f5f9;
  height: 350px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  border: 1px solid #e2e8f0;
  position: relative;
  overflow: hidden;
}

.box-rounded-shadow-bg-3 {
  position: absolute;
  bottom: -20px;
  width: 150px;
  height: 280px;
  background: #334155;
  border-radius: 16px;
  border: 4px solid #0f172a;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.box-rounded-bg-8 {
  width: 100%;
  height: 60%;
  background: #002970;
  margin-top: 10%;
  border-radius: 4px;
}

.custom-generic-17 {
  position: relative;
  z-index: 2;
}

.grid-generic-9 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.box-rounded-bg-9 {
  padding: 25px;
  background: #f8fafc;
  border-radius: 24px;
  border: 1px solid #e2e8f0;
}

.text-generic-57 {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.text-generic-58 {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.5;
}

.text-white-rounded-bg {
  background: linear-gradient(135deg, #002970, #001a4d);
  padding: 40px;
  border-radius: 32px;
  color: white;
  text-align: center;
}

.text-bold-white-3 {
  font-weight: 900;
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: white;
}

.box-generic-42 {
  opacity: 0.8;
  margin-bottom: 30px;
}

.text-bold-brand-cyan-bg {
  background: var(--brand-cyan);
  color: #002970;
  padding: 15px 40px;
  font-weight: 900;
}

.box-generic-43 {
  margin-top: 20px;
}

.text-white-rounded-bg-2 {
  margin-top: 40px;
  padding: 30px;
  background: #002970;
  border-radius: 24px;
  color: white;
}

.text-bold-3 {
  font-size: 1.1rem;
  margin-bottom: 12px;
  font-weight: 800;
}

.text-generic-59 {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 20px;
  line-height: 1.5;
}

.text-bold-brand-cyan {
  color: var(--brand-cyan);
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
}

.box-generic-44 {
  margin-top: 40px;
}

.flex-center-13 {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.text-generic-60 {
  font-size: 2rem;
}

.text-bold-brand-deep-11 {
  font-weight: 800;
  color: var(--brand-deep);
  margin-bottom: 5px;
}

.text-generic-61 {
  color: #64748b;
  font-size: 0.85rem;
}

.text-generic-62 {
  color: var(--text-s);
  line-height: 1.6;
  margin-bottom: 24px;
}

.box-rounded-bg-10 {
  background: #f8fafc;
  border: 1.5px dashed #e2e8f0;
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  margin-bottom: 30px;
}

.text-bold-4 {
  font-weight: 800;
  margin-bottom: 10px;
}

.text-generic-63 {
  color: var(--text-s);
  font-size: 0.95rem;
}

.box-center-3 {
  width: 100%;
  justify-content: center;
  padding: 16px;
}

.text-bold-rounded-bg-2 {
  width: 100%;
  padding: 20px;
  border-radius: 16px;
  font-weight: 900;
  font-size: 1.1rem;
  margin-top: 20px;
  background: #2563eb;
}

.box-generic-45 {
  height: 60px;
  object-fit: contain;
}

.text-bold-brand-deep-12 {
  font-weight: 850;
  margin-bottom: 30px;
  color: var(--brand-deep);
  font-size: 1.8rem;
}

.grid-generic-10 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.flex-center-rounded-3 {
  padding: 20px;
  border-radius: 24px;
  text-align: center;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.text-generic-64 {
  font-size: 2.2rem;
  margin-bottom: 12px;
}

.text-bold-brand-deep-13 {
  font-weight: 800;
  color: var(--brand-deep);
  margin-bottom: 6px;
}

.box-generic-46 {
  max-width: 900px;
  width: 95%;
  margin: 30px auto;
}

.box-generic-47 {
  padding: 10px 0 0 15px;
  opacity: 0.5;
}

.box-rounded-14 {
  padding: 8px 25px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
}

.box-generic-48 {
  margin-top: 60px;
}

.text-bold-5 {
  margin-bottom: 30px;
  font-weight: 800;
}

.box-generic-49 {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  padding-top: 40px;
}

.flex-center-14 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.box-generic-50 {
  text-align: center;
  width: 100%;
  max-width: 600px;
}

.text-bold-brand-cyan-rounded-bg {
  background: rgba(0, 212, 255, 0.08);
  color: var(--brand-cyan);
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.text-bold-brand-deep-14 {
  margin-top: 15px;
  font-size: 2rem;
  font-weight: 900;
  color: var(--brand-deep);
  letter-spacing: -0.5px;
  margin-bottom: 40px;
}

.box-rounded-shadow-bg-4 {
  margin-bottom: 50px;
  transform: scale(1.1);
  background: #ffffff;
  padding: 25px;
  border-radius: 40px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
  line-height: 0;
}

.text-brand-cyan-2 {
  border-color: var(--brand-cyan);
  width: 45px;
  height: 45px;
  top: -5px;
  left: -5px;
}

.text-brand-cyan-3 {
  border-color: var(--brand-cyan);
  width: 45px;
  height: 45px;
  top: -5px;
  right: -5px;
}

.text-brand-cyan-4 {
  border-color: var(--brand-cyan);
  width: 45px;
  height: 45px;
  bottom: -5px;
  left: -5px;
}

.text-brand-cyan-5 {
  border-color: var(--brand-cyan);
  width: 45px;
  height: 45px;
  bottom: -5px;
  right: -5px;
}

.box-brand-cyan {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--brand-cyan), transparent);
}

.box-rounded-15 {
  width: 320px;
  height: 325px;
  overflow: hidden;
  border-radius: 20px;
  position: relative;
}

.box-generic-51 {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

.box-center-rounded-shadow-bg {
  display: inline-flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
  margin-bottom: 60px;
  background: #ffffff;
  padding: 12px 35px;
  border-radius: 100px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.box-generic-52 {
  height: 20px;
  width: auto;
  transition: transform 0.3s;
}

.box-generic-53 {
  height: 16px;
  width: auto;
  transition: transform 0.3s;
}

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

.flex-center-bold-brand-cyan-rounded-shadow-bg {
  width: 32px;
  height: 32px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  font-weight: 900;
  color: var(--brand-cyan);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  font-size: 0.8rem;
  border: 1px solid #e2e8f0;
}

.text-bold-brand-deep-15 {
  font-weight: 800;
  color: var(--brand-deep);
  margin-bottom: 5px;
  font-size: 0.85rem;
}

.box-generic-54 {
  margin-top: 40px;
  text-align: center;
  max-width: 750px;
  width: 100%;
}

.text-center {
  text-decoration: none;
  color: #94a3b8;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.3s;
}

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

.text-brand-deep-white-rounded-shadow {
  padding: 40px;
  border-radius: 32px;
  background: var(--brand-deep);
  color: white;
  border: none;
  box-shadow: 0 20px 50px rgba(0, 41, 112, 0.25);
}

.flex-center-15 {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.flex-center-rounded-glass {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.text-bold-6 {
  font-weight: 800;
  font-size: 1.2rem;
}

.text-generic-65 {
  font-size: 0.8rem;
  opacity: 0.7;
}

.text-generic-66 {
  font-size: 0.95rem;
  line-height: 1.7;
  opacity: 0.85;
  margin-bottom: 30px;
}

.box-rounded-glass {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.box-generic-55 {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1);
}

.text-bold-7 {
  font-size: 0.75rem;
  font-weight: 800;
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.box-rounded-bg-11 {
  padding: 40px;
  border-radius: 32px;
  background: white;
  border: 1px solid #e2e8f0;
}

.text-bold-brand-deep-16 {
  font-weight: 800;
  margin-bottom: 12px;
  font-size: 1.25rem;
  color: var(--brand-deep);
}

.text-generic-67 {
  font-size: 0.95rem;
  color: #64748b;
  margin-bottom: 25px;
  line-height: 1.6;
}

.box-center-rounded {
  width: 100%;
  justify-content: center;
  padding: 18px;
  border-radius: 16px;
}

.box-generic-56 {
  margin-top: 20px;
  text-align: center;
}

.text-bold-brand-cyan-2 {
  font-size: 0.85rem;
  color: var(--brand-cyan);
  text-decoration: none;
  font-weight: 800;
}


/* NEW INNER PAGE LAYOUT */
body.inner-page-layout {
  background-color: #f3f4f6;
  position: relative;
  z-index: 0;
}

body.inner-page-layout::before {
  content: "";
  position: absolute;
  top: 66px;
  left: 0;
  width: 100%;
  height: 87px;
  background: transparent;
  z-index: -1;
}

.workspace-columns {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 30px;
  align-items: start;
}

.workspace-main {
  max-width: 900px;
}

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

.category-nav-bar {
  background: #1e293b;
  border-radius: 0;
  /* Changed to 0 for a seamless fit below header */
  padding: 8px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0;
  max-width: 100%;
  position: relative;
  z-index: 99;
}

.category-nav-bar::-webkit-scrollbar {
  display: none;
}

.category-nav-bar a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  color: #94a3b8;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.category-nav-bar a.active {
  background: #3d4d63;
  color: #ffffff;
}

.category-nav-bar a i {
  font-style: normal;
  font-size: 1.1rem;
  transform: none;
  display: inline-block;
}

.category-nav-bar a:hover:not(.active) {
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  border-radius: 12px;
}

.category-nav-bar a img {
  width: 20px;
  height: auto;
  filter: brightness(0) invert(1) opacity(0.7);
}

.category-nav-bar a.active img {
  filter: brightness(0) invert(1);
}

.rounded-card {
  background: #ffffff;
  border-radius: 20px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 30px;
  width: 100%;
  box-sizing: border-box;
}

.inner-sidebar .rounded-card {
  padding: 30px;
  margin-bottom: 20px;
}

/* PAYMENT MODAL STYLES */
#payment-modal-toggle {
  display: none;
}

.payment-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#payment-modal-toggle:checked~.payment-modal-overlay {
  opacity: 1;
  visibility: visible;
}

.payment-modal-container {
  background: white;
  border-radius: 28px;
  width: 95%;
  max-width: 850px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  transform: scale(0.95);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#payment-modal-toggle:checked~.payment-modal-overlay .payment-modal-container {
  transform: scale(1);
}

.payment-modal-left {
  flex: 1.2;
  padding: 45px;
  background: #f8fafc;
}

.payment-modal-right {
  flex: 0.8;
  padding: 45px;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #f1f5f9;
}

.payment-header {
  margin-bottom: 30px;
}

.payment-header h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 8px;
}

.payment-header p {
  font-size: 0.9rem;
  color: #64748b;
}

.payment-option-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.payment-option-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 20px;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
}

.payment-option-item:hover {
  border-color: #00baf2;
  background: #f0f9ff;
}

.payment-option-item i {
  font-size: 1.8rem;
  line-height: 1;
}

.payment-option-info b {
  display: block;
  font-size: 1rem;
  color: #1e293b;
}

.payment-option-info span {
  font-size: 0.8rem;
  color: #64748b;
}

.qr-section {
  text-align: center;
}

.qr-image-wrapper {
  background: white;
  padding: 15px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.qr-image-wrapper img {
  width: 220px;
  height: 220px;
  object-fit: contain;
}

.qr-text {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 5px;
}

.qr-subtext {
  font-size: 0.8rem;
  color: #64748b;
}

.close-payment-modal {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #64748b;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
  z-index: 10001;
}

.close-payment-modal:hover {
  color: #ef4444;
  transform: rotate(90deg);
}

@media (max-width: 768px) {
  .payment-modal-container {
    flex-direction: column;
    max-height: 90vh;
    overflow-y: auto;
  }

  .payment-modal-right {
    border-left: none;
    border-top: 1px solid #f1f5f9;
  }
}

/* RESPONSIVE POLISH */
@media (max-width: 1300px) {
  .flex-generic-3 {
    width: 95%;
  }
}

@media (max-width: 1024px) {
  .category-nav-bar {
    justify-content: flex-start;
    padding: 10px;
    gap: 15px;
  }

  .category-nav-bar a {
    flex-shrink: 0;
  }

  .grid-generic-10 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .workspace-columns {
    flex-direction: column;
  }

  .inner-sidebar {
    width: 100%;
  }

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

  .hero-header h1 {
    font-size: 2.2rem;
  }
}

@media (max-width: 480px) {
  .grid-generic-10 {
    grid-template-columns: 1fr;
  }
}

/* FINAL SPACING OVERRIDES */
.inner-dashboard-header {
  margin-bottom: 0;
}

.category-nav-bar {
  margin: 0 auto 15px;
  display: flex;
  position: relative;
  z-index: 100;
}

/* Color Shift Logo to Purple-Blue Gradient */
img[src*="logo_footre.png"],
img[src*="logo_footer.png"],
.footer-logo-img,
.box-generic-4,
.footer-brand .logo img {
  filter: hue-rotate(50deg) saturate(1.1);
}

/* ============================================================
   TRUST INDICATORS GRID — 4 cards horizontal
   ============================================================ */
.grid-rounded-shadow-bg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 32px 36px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(61, 21, 115, 0.07);
  border: 1px solid rgba(91, 45, 168, 0.08);
}

@media (max-width: 900px) {
  .grid-rounded-shadow-bg {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .grid-rounded-shadow-bg {
    grid-template-columns: 1fr;
  }
}

/* Each trust item — icon + text row */
.flex-generic-11 {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 0;
}

/* Trust icon */
.text-generic-68 {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  font-style: normal;
}

/* Trust text group */
.flex-generic-12 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Trust heading */
.text-bold-brand-deep-17 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--brand-deep);
  margin: 0;
  line-height: 1.3;
}

/* Trust sub-text */
.text-generic-69 {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   HERO VISUAL CARD & FLOATING BADGES
   ============================================================ */

.hero-visual-new,
.flex-center-16 {
  position: relative;
  flex: 1 1 500px;
  width: 100%;
  max-width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-rounded-16 {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
  border-radius: 28px;
  object-fit: contain;
}

.layout-block-7,
.layout-block-4,
.flex-center-rounded-shadow-bg-3 {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border-radius: 50px;
  padding: 10px 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  z-index: 10;
  border: 1px solid rgba(0, 0, 0, 0.06);
  animation: badgeFloat 4s ease-in-out infinite;
}

.layout-block-7 {
  top: 20px;
  right: -28px;
  animation-delay: 0s;
}

.layout-block-4 {
  left: -32px;
  top: 50%;
  transform: translateY(-50%);
  animation-delay: -1.3s;
}

.flex-center-rounded-shadow-bg-3 {
  bottom: 55px;
  right: -20px;
  animation-delay: -2.6s;
}

.text-rounded-3,
.text-bg-2,
.text-generic-70 {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}

.text-generic-71 {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
}

@keyframes badgeFloat {

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

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

.layout-block-4 {
  animation: badgeFloatLeft 4s ease-in-out infinite;
  animation-delay: -1.3s;
}

@keyframes badgeFloatLeft {

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

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

@media (max-width: 1024px) {

  .hero-visual-new,
  .flex-center-16 {
    width: 420px;
    max-width: 420px;
  }
}

@media (max-width: 768px) {

  .hero-visual-new,
  .flex-center-16 {
    display: none;
  }
}

.grow-faster-section {
  background-color: #fcfbfa;
  /* subtle off-white premium canvas background */
  overflow: hidden;
  padding: 100px 0;
}

.grow-faster-container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
}

/* Illustration column (Left side now!) */
.grow-faster-left {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  opacity: 0;
  transform: translateX(-50px);
  filter: blur(10px);
  animation: slideInLeft 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.grow-illustration-container {
  position: relative;
  width: 100%;
  max-width: 540px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(243, 238, 255, 0.4));
  padding: 40px;
  border-radius: 32px;
  border: 1px solid rgba(91, 45, 168, 0.08);
  box-shadow: 0 20px 50px rgba(61, 21, 115, 0.04);
}

.grow-illustration-img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  display: block;
}

/* Content column (Right side now!) */
.grow-faster-right {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Heading animation (Fade-up with blur) */
.grow-faster-header {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(10px);
  animation: fadeUpBlur 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.grow-faster-title {
  font-size: 2.8rem;
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--brand-deep);
  margin-bottom: 12px;
  text-align: left;
}

.grow-faster-title .accent-color {
  background: linear-gradient(135deg, #7c3aed, #5b2da8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.grow-faster-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Stacked Trust Cards Container */
.grow-faster-cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Staggered card reveal animation from right */
.grow-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.01);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  opacity: 0;
  transform: translateX(40px);
  filter: blur(5px);
  animation: slideInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Setup animation delays for staggered reveal */
.grow-card:nth-child(1) {
  animation-delay: 0.4s;
}

.grow-card:nth-child(2) {
  animation-delay: 0.55s;
}

.grow-card:nth-child(3) {
  animation-delay: 0.7s;
}

.grow-card:nth-child(4) {
  animation-delay: 0.85s;
}

/* Cards slight hover lift */
.grow-card:hover {
  transform: translateY(-5px);
  background: #ffffff;
  border-color: rgba(91, 45, 168, 0.15);
  box-shadow: 0 12px 30px rgba(61, 21, 115, 0.06);
}

/* Icon Box - Soft blue/violet fintech style accent */
.grow-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #eef2ff;
  /* soft fintech blue/indigo background */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid #dbeafe;
  transition: all 0.3s ease;
}

.grow-card:hover .grow-icon-box {
  background: #e0e7ff;
  border-color: #bfdbfe;
  transform: scale(1.05);
}

.grow-icon-box svg path,
.grow-icon-box svg rect {
  stroke: #2563eb;
  /* soft blue accent */
}

.grow-icon-box svg circle {
  fill: #2563eb;
  /* soft blue accent */
}

/* Card typography */
.grow-card-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.grow-card-info h4 {
  font-size: 1.15rem;
  font-weight: 750;
  color: var(--brand-deep);
  margin: 0;
  letter-spacing: -0.01em;
}

.grow-card-info p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Keyframes for premium animations */
@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes slideInRight {
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes fadeUpBlur {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .grow-faster-container {
    gap: 40px;
    grid-template-columns: 1fr 1fr;
  }

  .grow-faster-title {
    font-size: 2.3rem;
  }
}

@media (max-width: 850px) {
  .grow-faster-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .grow-faster-left {
    order: 2;
    /* illustration goes below content on mobile/tablet */
  }

  .grow-faster-right {
    order: 1;
  }
}

/* ============================================================
   PREMIUM FINTECH SOLUTIONS SECTION (SLIDER CAROUSEL)
   ============================================================ */

.solutions-section {
  background-color: #ffffff;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

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

.solutions-header .section-subtitle {
  color: var(--text-secondary);
  font-size: 1.15rem;
  margin-top: 12px;
}

/* Slider Viewport */
.slider-viewport {
  width: calc(100% + 20px);
  margin-left: -10px;
  overflow: hidden;
  position: relative;
  margin-bottom: 40px;
  padding: 16px 10px;
}

.slider-track {
  display: flex;
  gap: 30px;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Slider Card Styles */
.slider-card {
  flex: 0 0 calc((100% - 60px) / 3);
  /* 3 cards per row on desktop */
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(61, 21, 115, 0.06);
  box-shadow: 0 4px 20px rgba(61, 21, 115, 0.02);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;

  /* Staggered card reveal fade-up animation */
  opacity: 0;
  transform: translateY(40px);
  filter: blur(5px);
  animation: cardFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slider-card:nth-child(1) {
  animation-delay: 0.1s;
}

.slider-card:nth-child(2) {
  animation-delay: 0.2s;
}

.slider-card:nth-child(3) {
  animation-delay: 0.3s;
}

.slider-card:nth-child(4) {
  animation-delay: 0.4s;
}

.slider-card:nth-child(5) {
  animation-delay: 0.5s;
}

.slider-card:nth-child(6) {
  animation-delay: 0.6s;
}

.slider-card:nth-child(7) {
  animation-delay: 0.7s;
}

@keyframes cardFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Card Image Wrapper & Zoom effect */
.slider-card-img-wrap {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: #f7f6f9;
  position: relative;
}

.slider-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Card content */
.slider-card-content {
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 12px;
}

.slider-card-content h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--brand-deep);
  margin: 0;
  letter-spacing: -0.02em;
}

.slider-card-content p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  height: 48px;
  /* short 2-line height constraint */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Learn more button styling */
.learn-more-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-weight: 700;
  font-size: 0.92rem;
  color: #5b2da8;
  /* brand purple accent */
  transition: all 0.3s ease;
}

.learn-arrow {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover effects */
.slider-card:hover {
  transform: translateY(-8px);
  border-color: rgba(91, 45, 168, 0.15);
  box-shadow: 0 20px 40px rgba(61, 21, 115, 0.08);
}

.slider-card:hover .slider-card-img {
  transform: scale(1.04);
  /* Subtly zoom image on hover */
}

.slider-card:hover .learn-more-btn {
  color: #7c3aed;
}

.slider-card:hover .learn-arrow {
  transform: translateX(4px);
  /* Arrow shifts right */
}

/* Controls, buttons and dots styling */
.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}

.slider-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(61, 21, 115, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--brand-deep);
  transition: all 0.3s ease;
}

.slider-btn:hover:not(.disabled) {
  background: var(--brand-deep);
  color: #ffffff;
  border-color: var(--brand-deep);
  transform: scale(1.05);
}

.slider-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.slider-dots {
  display: flex;
  gap: 10px;
}

.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e9d8ff;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.slider-dot.active {
  background: #5b2da8;
  width: 24px;
  border-radius: 5px;
}

/* Responsive breakpoint styling */
@media (max-width: 1024px) {
  .slider-card {
    flex: 0 0 calc((100% - 30px) / 2);
    /* 2 cards per view */
  }
}

@media (max-width: 768px) {
  .slider-card {
    flex: 0 0 100%;
    /* 1 card per view */
  }

  .solutions-header {
    margin-bottom: 40px;
  }
}

/* ============================================================
   PREMIUM FINTECH PROCESS MAP (HOW WE WORK)
   ============================================================ */

.process-map-section {
  background-color: #fcfbfa;
  /* Warm cream/light grey canvas */
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.process-map-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  max-width: 1000px;
  margin: 60px auto 0;
}

/* Hub Card */
.process-hub {
  position: relative;
  z-index: 10;
  margin-bottom: -15px;
  /* Pulls closer to the line start */
}

.hub-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(91, 45, 168, 0.15) 0%, rgba(91, 45, 168, 0) 70%);
  filter: blur(15px);
  z-index: -1;
  animation: hubPulse 4s infinite alternate;
}

@keyframes hubPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.8;
  }

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

.hub-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, #3d1573, #5b2da8);
  border-radius: 20px;
  padding: 22px 30px;
  box-shadow: 0 12px 30px rgba(61, 21, 115, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.hub-icon {
  width: 54px;
  height: 54px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.hub-content h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.hub-content p {
  font-size: 0.88rem;
  opacity: 0.85;
  margin: 0;
}

/* SVG Connectors */
.connector-svg-container {
  position: relative;
  width: 100%;
  height: 120px;
  z-index: 1;
}

.connector-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.connector-svg .bg-line {
  stroke-dasharray: none;
}

.connector-svg .animated-path {
  stroke-dasharray: 8 12;
  stroke-dashoffset: 100;
  animation: lineFlow 6s linear infinite;
}

.connector-svg .path-left {
  animation-duration: 5s;
}

.connector-svg .path-center {
  animation-duration: 4s;
}

.connector-svg .path-right {
  animation-duration: 5.5s;
}

@keyframes lineFlow {
  to {
    stroke-dashoffset: -100;
  }
}

/* Bottom Branches Row */
.process-branches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  width: 100%;
  z-index: 5;
  position: relative;
  margin-top: -15px;
  /* Offset the lines end point */
}

/* Branch Cards Wrapper */
.branch-card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(30px);
  animation: branchFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.branch-card-wrapper:nth-child(1) {
  animation-delay: 0.3s;
}

.branch-card-wrapper:nth-child(2) {
  animation-delay: 0.5s;
}

.branch-card-wrapper:nth-child(3) {
  animation-delay: 0.7s;
}

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

.step-badge {
  font-size: 0.78rem;
  font-weight: 850;
  color: #7c3aed;
  background: #f3e8ff;
  padding: 4px 10px;
  border-radius: 50px;
  margin-bottom: 14px;
  border: 1px solid rgba(124, 58, 237, 0.15);
  letter-spacing: 0.05em;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.04);
}

.branch-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  padding: 30px 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
}

.card-visual {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.branch-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--brand-deep);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.branch-card p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 18px;
  height: 66px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.branch-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #5b2da8;
  text-decoration: none;
  transition: color 0.3s ease;
  margin-top: auto;
}

.branch-link .arrow {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover effects */
.branch-card:hover {
  transform: translateY(-6px);
  border-color: rgba(91, 45, 168, 0.15);
  box-shadow: 0 15px 35px rgba(61, 21, 115, 0.05);
}

.branch-card:hover .branch-link {
  color: #7c3aed;
}

.branch-card:hover .branch-link .arrow {
  transform: translateX(4px);
}

/* Responsive adjustments */
@media (max-width: 850px) {
  .connector-svg-container {
    display: none;
  }

  .process-hub {
    margin-bottom: 40px;
  }

  .process-branches {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 0;
  }
}

/* ============================================================
   UTILITIES AUTOMATIC SLIDER
   ============================================================ */

.utility-slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 20px 0;
}

.utility-slider-track {
  display: flex;
  align-items: center;
  gap: 30px;
  will-change: transform;
}

.utility-slide {
  flex: 0 0 auto;
  width: auto;
  height: 200px;
  /* Maintain clean rectangular card proportions */
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.4s ease;
  object-fit: contain;
}

.utility-slide:hover {
  transform: scale(1.02);
}

@media (max-width: 768px) {
  .utility-slider-track {
    gap: 16px;
  }

  .utility-slide {
    height: 160px;
  }
}

/* ============================================================
   FEATURES SECTION LAYOUT
   ============================================================ */

.layout-block-10 {
  grid-template-columns: repeat(4, 1fr);
}

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

@media (max-width: 768px) {
  .layout-block-10 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SUBHEADING & TITLE COLOR OVERRIDES
   ============================================================ */

.section-title,
.grow-faster-title,
.grow-faster-title .accent-color {
  background: none;
  -webkit-text-fill-color: #000000;
  color: #000000;
}

.hero-sub,
.section-subtitle,
.section-sub,
.grow-faster-subtitle {
  color: #000000;
}

/* ============================================================
   ACCORDION CATEGORY VISUALS
   ============================================================ */

.industry-visual-container {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 460px;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  background: #ffffff;
}

.industry-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.industry-visual.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (max-width: 768px) {
  .industry-visual-container {
    height: 300px;
    margin-top: 30px;
  }
}

/* Fix Industries Section Layout (Side-by-Side) */
.layout-block-5 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

@media (max-width: 992px) {
  .layout-block-5 {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Pricing Section Background Override */
section:has(.pricing-container) {
  background-color: #ffffff;
}

/* Page Background Gradient Overrides (Cream to White) */
body {
  background: linear-gradient(180deg, #f5f0eb 0%, #ffffff 2000px);
}

.process-map-section,
.solutions-section,
.grow-faster-section {
  background: transparent;
}

/* Black & Purple Premium Footer Overrides */
.footer {
  background: linear-gradient(180deg, #080312 0%, #010003 100%);
  border-top: 1.5px solid rgba(124, 58, 237, 0.4);
}

.footer::before {
  background: radial-gradient(circle at 10% 10%, rgba(124, 58, 237, 0.25), transparent 70%);
}

.social-links-container {
  display: flex;
  gap: 15px;
  flex-direction: row;
}

.footer-col h5 {
  background: linear-gradient(90deg, #ffffff, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer-base {
  border-top: 1px solid rgba(124, 58, 237, 0.2);
}

/* Hide clock icon in the process map hub card and center text content */
.hub-icon {
  display: none;
}

.hub-card {
  justify-content: center;
  text-align: center;
}

/* Replace text in process hub h3 without changing HTML */
.hub-content h3 {
  font-size: 0;
}

.hub-content h3::before {
  content: "OonePe Unified Core";
  font-size: 1.25rem;
}

/* Recolor the hero kicker badge to soft purple */
.hero-kicker {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.2);
  color: #7c3aed;
}

/* Recolor hero headline: 'India's Most Innovative' in black, rest in deep purple */
.hero-headline {
  color: #000000;
}

.hero-headline .highlight-grad {
  background: none;
  -webkit-text-fill-color: #481d8c;
  color: #481d8c;
}

/* Adjust hero section height/padding to remove the large empty vertical spacing */
.hero {
  height: auto;
  min-height: auto;
  padding-top: 230px;
  padding-bottom: 20px;
}


/* Increase header/nav logo size and ensure it is properly aligned */
.header .logo img,
.nav .logo img {
  height: 48px;
  /* Increased from 38px */
  width: auto;
  transform: none;
  margin: 0;
  display: block;
}

/* Style callout badges according to the image */
.layout-block-7,
.layout-block-4,
.flex-center-rounded-shadow-bg-3 {
  background: #ffffff;
  border-radius: 100px;
  padding: 10px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 10px;
}

.text-generic-71 {
  font-size: 0.92rem;
  font-weight: 600;
  color: #1e293b;
  font-family: var(--font);
  white-space: nowrap;
}

/* Custom icon for Payment Successful (green circle with white checkmark SVG) */
.text-rounded-3 {
  font-size: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #10b981 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center;
  background-size: 11px 11px;
  flex-shrink: 0;
}

/* Custom icon for Instant Transfer (yellow-orange lightning bolt SVG) */
.text-bg-2 {
  font-size: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59e0b'><path d='M13 2v9h7L11 22v-9H4L13 2z'/></svg>") no-repeat center;
  background-size: contain;
  flex-shrink: 0;
}

/* Custom icon for QR Accepted (black box with white inner pattern) */
.text-generic-70 {
  font-size: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #0f172a url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M4 4h6v6H4zm2 2v2h2V6zm8-2h6v6h-6zm2 2v2h2V6zM4 14h6v6H4zm2 2v2h2v-2zm10-2h2v2h-2zm2 2h2v2h-2zm-2 2h2v2h-2zm4-2h2v4h-2v-4z'/></svg>") no-repeat center;
  background-size: 11px 11px;
  flex-shrink: 0;
}

/* Prevent accordion chevron from rotating when open */
.industry-item[open] .industry-chevron {
  transform: none;
}

/* Reduce size of Grow Faster cards and container spacing to align with the image */
.grow-faster-container {
  gap: 48px;
}

.grow-illustration-container {
  padding: 24px;
  border-radius: 24px;
  max-width: 500px;
}

.grow-faster-cards {
  gap: 12px;
}

.grow-card {
  padding: 16px 20px;
  gap: 16px;
  border-radius: 16px;
}

.grow-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.grow-icon-box svg {
  width: 22px;
  height: 22px;
}

.grow-card-info {
  gap: 2px;
}

.grow-card-info h4 {
  font-size: 1.05rem;
  font-weight: 700;
}

.grow-card-info p {
  font-size: 0.88rem;
  line-height: 1.4;
}

/* Reduce vertical space/gap between Solutions section and How We Work section */
.solutions-section {
  padding-top: 80px;
  padding-bottom: 40px;
}

.slider-controls {
  margin-top: 24px;
}

.process-map-section {
  padding-top: 40px;
  padding-bottom: 80px;
}

/* Compact the card image height in the Solutions carousel */
.slider-card-img-wrap {
  height: 170px;
}

/* Fix duplicate emojis and adjust benefit card titles to fit on one line */
.benefit-item .benefit-emoji-top {
  display: none;
}

.benefit-item h3 {
  white-space: nowrap;
  font-size: 1.05rem;
}

.benefit-item {
  max-width: 240px;
  padding: 20px 12px;
}

/* Ensure about page benefit card titles also fit cleanly on one line */
.box-generic-27 {
  white-space: nowrap;
  font-size: 1.05rem;
}

/* ============================================================
   AUTO-GENERATED LAYOUT AND HOVER STYLE MAPPINGS
   ============================================================ */
.custom-btn-1 {
  gap: 10px;
}

.text-generic-72 {
  margin-bottom: 12px;
  font-size: 1.3rem;
}

.text-generic-73 {
  color: var(--text-primary);
  font-size: 1.8rem;
  margin-bottom: 15px;
}

.box-generic-57 {
  margin-bottom: 20px;
}

.text-bold-brand-deep-17 {
  font-size: 1.1rem;
  margin-bottom: 3px;
  background: linear-gradient(90deg, var(--brand-deep), #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.box-rounded-16 {
  width: 100%;
  max-width: 440px;
  border-radius: 24px;
  filter: drop-shadow(0 20px 50px rgba(0, 41, 112, 0.15));
}

.flex-center-17 {
  flex: 1;
  min-width: 320px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  margin-top: 120px;
}

.text-generic-68 {
  font-size: 2.5rem;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.3));
}

.layout-block-8 {
  cursor: pointer;
  display: block;
  text-decoration: none;
}

.text-generic-74 {
  position: absolute;
  left: 0;
  color: var(--text-accent);
}

.text-generic-75 {
  position: absolute;
  left: 0;
  color: var(--text-accent);
}

.text-generic-69 {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.text-generic-76 {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 25px;
  line-height: 1.5;
}

.text-generic-77 {
  font-size: 1.2rem;
  color: var(--text-secondary);
}

.text-generic-78 {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.text-generic-79 {
  color: var(--text-primary);
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.4;
}

.layout-block-6 {
  background: #ffffff;
}

.layout-block-2 {
  background: var(--bg-2);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}

.layout-block-9 {
  background: var(--bg-2);
}

.text-generic-70 {
  color: #64748b;
  font-weight: 900;
}

.text-rounded-3 {
  color: #22c55e;
  font-weight: 900;
}

.text-brand-deep {
  position: absolute;
  left: 0;
  color: var(--text-accent);
}

.box-generic-58 {
  margin-bottom: 20px;
  display: inline-flex;
}

.text-bg-2 {
  color: #f59e0b;
  font-weight: 900;
}

.text-generic-80 {
  list-style: none;
  padding: 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 30px;
  margin-bottom: 12px;
  position: relative;
  padding-left: 20px;
}

.grid-rounded-shadow-bg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  padding: 25px 40px;
  border-radius: 20px;
}

.box-center-4 {
  justify-content: center;
  margin-top: 40px;
}

.text-generic-71 {
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
}

.box-generic-59 {
  flex: 1;
  min-width: 320px;
}

.layout-block-3 {
  position: relative;
  z-index: 1;
}

.layout-block-10 {
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.flex-generic-11 {
  display: flex;
  align-items: center;
  gap: 15px;
  text-align: left;
}

.box-generic-60 {
  margin-top: 40px;
  display: block;
}

.layout-block-5 {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
}

.flex-center-16 {
  position: relative;
}

.flex-center-rounded-shadow-bg-3 {
  position: absolute;
  bottom: 20%;
  right: 20px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  padding: 12px 20px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.5);
  z-index: 20;
}

.box-generic-61 {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.layout-block-7 {
  position: absolute;
  top: 10%;
  right: -20px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  padding: 12px 20px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.5);
  z-index: 20;
}

.layout-block-4 {
  position: absolute;
  top: 40%;
  left: -30px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  padding: 12px 20px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.5);
  z-index: 20;
}

/* Overrides for untracked pages layout classes */
.flex-generic-13 {
  max-width: 1280px;
  width: 95%;
  margin: 50px auto 40px auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.box-rounded-17 {
  padding: 50px;
  border-radius: 32px;
}

.box-rounded-18 {
  padding: 8px 25px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
}

.text-bold-8 {
  margin-bottom: 30px;
  font-weight: 800;
}

.layout-block-1 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.flex-center-rounded-4 {
  padding: 20px;
  border-radius: 24px;
  text-align: center;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.text-generic-81 {
  font-size: 2.2rem;
  margin-bottom: 12px;
}

.text-bold-brand-deep-18 {
  font-weight: 800;
  color: var(--brand-deep);
  margin-bottom: 6px;
}

.text-generic-82 {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Hide navigation item bullet points */
.nav-menu a::before {
  display: none;
}

/* Convert Download CTA background to cream-to-white gradient and style elements */
.download-cta {
  background: linear-gradient(180deg, #f5f0eb, #ffffff) !important;
  border: 1px solid rgba(124, 58, 237, 0.15) !important;
  box-shadow: 0 10px 40px rgba(61, 21, 115, 0.05) !important;
}

.download-cta h2,
.download-cta .section-title {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  background: none !important;
}

.download-cta .cta-glow {
  opacity: 0.08 !important;
}

.download-cta .btn-primary {
  background: linear-gradient(135deg, #3d1573 0%, #5b2da8 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(61, 21, 115, 0.22), 0 2px 8px rgba(91, 45, 168, 0.12) !important;
}

.download-cta .btn-primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  background: linear-gradient(135deg, #331162 0%, #4c268f 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 32px rgba(61, 21, 115, 0.3), 0 4px 12px rgba(91, 45, 168, 0.2) !important;
}

.download-cta .btn-outline {
  background: #ffffff !important;
  color: #3d1573 !important;
  border: 1.5px solid rgba(91, 45, 168, 0.35) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

.download-cta .btn-outline:hover {
  background: #f7f0ff !important;
  border-color: #5b2da8 !important;
  color: #3d1573 !important;
}

/* Change section backgrounds that use solid soft purple to match the body/Image 2 gradient */
.layout-block-9,
.layout-block-2,
.custom-bg-4,
.custom-bg {
  background: transparent !important;
}


/* =============================================
   FOOTER CLEANUP & IMPROVEMENT OVERRIDES
   ============================================= */

/* Tighten background and add subtle noise texture feel */
.footer {
  background: linear-gradient(160deg, #0d0520 0%, #060110 60%, #020008 100%) !important;
  border-top: 1.5px solid rgba(124, 58, 237, 0.35) !important;
  padding: 80px 0 0 !important;
  position: relative;
}

/* Subtle ambient purple glow top-left */
.footer::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -60px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.12), transparent 65%);
  pointer-events: none;
}

/* Subtle ambient glow top-right */
.footer::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -60px;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(91, 45, 168, 0.08), transparent 65%);
  pointer-events: none;
}

/* Fix grid layout: logo col wider, better gap */
.footer-grid {
  grid-template-columns: 1.8fr repeat(4, 1fr) !important;
  gap: 40px !important;
  margin-bottom: 50px !important;
}

/* Logo branding area */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

/* Footer logo size */
.footer-brand .logo img,
img[src*="logo_footre"],
.footer-logo-img {
  height: 52px !important;
  width: auto !important;
  display: block !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  mix-blend-mode: screen !important;
  margin-bottom: 10px;
}

/* Brand description text */
.footer-brand-desc {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0.82rem !important;
  line-height: 1.7 !important;
  margin-top: 4px !important;
  max-width: 200px;
}

/* Column headings — white to soft purple gradient */
.footer-col h5 {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  background: linear-gradient(90deg, #ffffff 0%, #c084fc 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 20px !important;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.2);
  display: block;
}

/* Footer links — fix visibility */
.footer-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-col ul li {
  margin-bottom: 10px !important;
}

.footer-col ul li a,
.footer-col a {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 0.88rem !important;
  text-decoration: none !important;
  display: inline-block;
  transition: all 0.25s ease !important;
  position: relative;
}

.footer-col ul li a:hover,
.footer-col a:hover {
  color: #c084fc !important;
  transform: translateX(4px) !important;
}

/* Bottom bar */
.footer-base {
  border-top: 1px solid rgba(124, 58, 237, 0.18) !important;
  padding: 22px 0 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 0;
}

/* Copyright text */
.footer-base p,
.footer-base>p {
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 0.82rem !important;
}

/* Social icons container */
.social-links-container {
  display: flex !important;
  gap: 10px !important;
  flex-direction: row !important;
  align-items: center;
}

/* Individual social icon buttons */
.footer-base a.social-icon-footer {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(124, 58, 237, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.footer-base a.social-icon-footer img {
  width: 15px !important;
  height: 15px !important;
  filter: brightness(0) invert(0.7) !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.footer-base a.social-icon-footer:hover {
  background: rgba(124, 58, 237, 0.3) !important;
  border-color: rgba(124, 58, 237, 0.7) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.25) !important;
}

.footer-base a.social-icon-footer:hover img {
  filter: brightness(0) invert(1) !important;
}

/* =============================================
   FOOTER HEIGHT INCREASE + LOGO BOX FIX
   ============================================= */

/* Increase footer height — more top/bottom padding */
.footer {
  padding: 110px 0 0 !important;
}

/* LOGO BOX FIX: Remove the purple background box */
.footer-brand .logo {
  transform: none !important;
  /* was translateY(-25px) — causing misalignment */
  margin-left: 0 !important;
  margin-bottom: 12px !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Logo image — show cleanly without mask clipping */
.footer-brand .logo img,
.footer-logo-img {
  height: 44px !important;
  width: auto !important;
  display: block !important;
  mix-blend-mode: normal !important;
  /* was 'screen' — blending caused the box */
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}

/* Push the brand description down so it sits naturally below logo */
.footer-brand-desc {
  margin-top: 12px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 0.83rem !important;
  line-height: 1.7 !important;
  max-width: 210px !important;
}

/* Increase grid top spacing for breathing room */
.footer-grid {
  padding-top: 10px !important;
  margin-bottom: 60px !important;
  align-items: start !important;
}

/* Bottom bar — add more padding for height */
.footer-base {
  padding: 28px 0 32px !important;
}

/* =============================================
   FOOTER HEIGHT BOOST + LOGO BLEND FIX
   ============================================= */

/* Much taller footer — generous top + bottom padding */
.footer {
  padding: 140px 0 0 !important;
}

/* Fix the logo container — remove any box effect */
.footer-brand .logo {
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  display: block !important;
  gap: 0 !important;
}

/* Logo image — use mix-blend-mode: screen so the
   logo blends INTO the dark footer background cleanly.
   Screen mode makes dark/black pixels transparent,
   showing only the white/light parts of the logo. */
.footer-brand .logo img,
.footer-logo-img {
  height: 48px !important;
  width: auto !important;
  display: block !important;
  transform: none !important;
  /* reset the scale(1.4) causing overflow box */
  transform-origin: left center !important;
  mix-blend-mode: screen !important;
  /* blends logo light parts, hides dark box */
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* More vertical space inside the grid */
.footer-grid {
  padding-top: 0 !important;
  margin-bottom: 80px !important;
  gap: 50px !important;
  align-items: start !important;
}

/* Taller bottom bar */
.footer-base {
  padding: 32px 0 40px !important;
}

/* ================================================
   PREMIUM FOOTER REDESIGN — FULL OVERRIDE
   ================================================ */

/* ── CTA STRIP ── */
.footer-cta-strip {
  background: linear-gradient(135deg, #1e0a40 0%, #2d1160 50%, #1a0835 100%);
  border-top: 1px solid rgba(124, 58, 237, 0.25);
  border-bottom: 1px solid rgba(124, 58, 237, 0.15);
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}

.footer-cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(124, 58, 237, 0.15), transparent 60%);
  pointer-events: none;
}

.footer-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
  z-index: 1;
}

.footer-cta-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #c084fc;
  margin-bottom: 8px;
}

.footer-cta-headline {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin: 0;
}

.footer-cta-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-shrink: 0;
}

.footer-cta-btn {
  background: linear-gradient(135deg, #5b2da8, #7c3aed) !important;
  color: #fff !important;
  padding: 13px 28px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  border: none !important;
  transition: all 0.25s ease !important;
  white-space: nowrap;
}

.footer-cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.4) !important;
}

.footer-cta-btn-outline {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
  padding: 13px 24px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.25s ease !important;
  white-space: nowrap;
}

.footer-cta-btn-outline:hover {
  color: #fff !important;
  border-color: rgba(192, 132, 252, 0.6) !important;
  background: rgba(124, 58, 237, 0.12) !important;
  transform: translateY(-2px) !important;
}

/* ── FOOTER CORE ── */
.footer {
  background: linear-gradient(180deg, #0c0320 0%, #070112 40%, #030009 100%) !important;
  border-top: 1px solid rgba(124, 58, 237, 0.2) !important;
  padding: 72px 0 0 !important;
  position: relative;
  overflow: hidden;
}

/* glow blobs */
.footer::before {
  content: '';
  position: absolute;
  top: -100px;
  left: -80px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.1), transparent 65%);
  pointer-events: none;
}

.footer::after {
  content: '';
  position: absolute;
  bottom: 60px;
  right: -40px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(91, 45, 168, 0.07), transparent 65%);
  pointer-events: none;
}

/* ── GRID ── */
.footer-grid {
  display: grid !important;
  grid-template-columns: 1.9fr repeat(4, 1fr) !important;
  gap: 48px !important;
  margin-bottom: 56px !important;
  align-items: start !important;
  padding-top: 0 !important;
}

/* ── BRAND BLOCK ── */
.footer-brand {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* logo box — nuke the purple box */
.footer-brand .logo {
  display: block !important;
  transform: none !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  gap: 0 !important;
}

/* logo image — blend into dark bg */
.footer-brand .logo img,
.footer-logo-img {
  height: 42px !important;
  width: auto !important;
  display: block !important;
  transform: none !important;
  mix-blend-mode: screen !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* brand desc */
.footer-brand-desc {
  color: rgba(255, 255, 255, 0.42) !important;
  font-size: 0.82rem !important;
  line-height: 1.75 !important;
  margin: 0 0 20px 0 !important;
  max-width: 210px !important;
}

/* support info block below brand */
.footer-brand::after {
  content: "✉ support@oonepe.com\A 📞 +91-XXXXXXXXXX";
  white-space: pre;
  display: block;
  font-size: 0.78rem;
  color: rgba(192, 132, 252, 0.7);
  line-height: 2;
  margin-top: 4px;
}

/* ── COLUMN HEADINGS ── */
.footer-col h5 {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  margin-bottom: 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(124, 58, 237, 0.25) !important;
  display: block !important;
  margin-bottom: 18px !important;
}

/* ── LINKS ── */
.footer-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-col ul li {
  margin-bottom: 11px !important;
}

.footer-col ul li a,
.footer-col a {
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.footer-col ul li a::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 1px;
  background: #c084fc;
  transition: width 0.2s ease;
  vertical-align: middle;
  border-radius: 2px;
}

.footer-col ul li a:hover,
.footer-col a:hover {
  color: #e9d5ff !important;
  transform: translateX(5px) !important;
}

.footer-col ul li a:hover::before {
  width: 10px;
  margin-right: 4px;
}

/* ── DIVIDER ── */
.footer-base {
  border-top: 1px solid rgba(124, 58, 237, 0.18) !important;
  padding: 26px 0 36px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative;
  z-index: 1;
}

/* copyright */
.footer-base>p {
  color: rgba(255, 255, 255, 0.28) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.3px !important;
}

/* ── SOCIAL ICONS ── */
.social-links-container {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

.footer-base a.social-icon-footer {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(124, 58, 237, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  text-indent: -9999px !important;
}

.footer-base a.social-icon-footer img {
  width: 15px !important;
  height: 15px !important;
  filter: brightness(0) invert(0.65) !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-indent: 0 !important;
}

.footer-base a.social-icon-footer:hover {
  background: rgba(124, 58, 237, 0.22) !important;
  border-color: rgba(192, 132, 252, 0.6) !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.3) !important;
}

.footer-base a.social-icon-footer:hover img {
  filter: brightness(0) invert(1) !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .footer-cta-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-cta-actions {
    flex-wrap: wrap;
    justify-content: center;
  }

  .footer-cta-headline {
    font-size: 1.5rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}


/* ================================================
   OPTION C LAYOUT — Same content, new visual style
   ================================================ */

/* Hide the CTA strip for a cleaner footer-only look */
.footer-cta-strip {
  display: none !important;
}

/* === FOOTER CORE === */
.footer {
  background: #0a0010 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 90px 0 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* subtle top glow */
.footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.5), transparent);
  pointer-events: none !important;
}

.footer::after {
  content: '' !important;
  position: absolute !important;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(91, 45, 168, 0.08), transparent 70%);
  pointer-events: none !important;
}

/* === GRID — 5 columns, tall and spaced === */
.footer-grid {
  display: grid !important;
  grid-template-columns: 1.6fr repeat(4, 1fr) !important;
  gap: 52px !important;
  margin-bottom: 72px !important;
  align-items: start !important;
  padding-top: 0 !important;
  position: relative;
  z-index: 1;
}

/* === BRAND BLOCK === */
.footer-brand {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* logo container — remove purple box */
.footer-brand .logo {
  display: block !important;
  transform: none !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  gap: 0 !important;
  align-items: unset !important;
}

/* logo image — screen blend to remove bg box */
.footer-brand .logo img,
.footer-logo-img {
  height: 40px !important;
  width: auto !important;
  display: block !important;
  transform: none !important;
  mix-blend-mode: screen !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
}

/* brand description */
.footer-brand-desc {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 0.85rem !important;
  line-height: 1.8 !important;
  margin: 0 0 22px 0 !important;
  max-width: 220px !important;
}

/* contact info injected below description */
.footer-brand-desc::after {
  content: "\A\A 📞  +91-73233-31776\A ✉  support@oonepe.com";
  white-space: pre;
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35);
  line-height: 2;
  margin-top: 14px;
}

/* === COLUMN HEADINGS — clean white, no gradient === */
.footer-col h5 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  margin: 0 0 20px 0 !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: block !important;
}

/* === LINKS — brighter, more spaced === */
.footer-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-col ul li {
  margin-bottom: 14px !important;
}

.footer-col ul li a,
.footer-col a {
  color: rgba(255, 255, 255, 0.48) !important;
  font-size: 1.05rem !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: color 0.2s ease !important;
  line-height: 1.5 !important;
}

.footer-col ul li a:hover,
.footer-col a:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  transform: none !important;
}

/* Remove the purple hover dash that shifts text */
.footer-col ul li a::before {
  content: none !important;
  display: none !important;
}

/* === FOOTER BASE — 3-zone: copyright | social | badges === */
.footer-base {
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  padding: 32px 0 44px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative;
  z-index: 1;
  gap: 24px;
}

/* copyright */
.footer-base>p {
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 0.78rem !important;
  white-space: nowrap;
}

/* compliance badges placeholder (text-based) */
.footer-base>p::after {
  content: "";
}

/* social icons row */
.social-links-container {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-shrink: 0;
}

/* social icon buttons — rounded square style */
.footer-base a.social-icon-footer {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
  text-indent: -9999px !important;
}

.footer-base a.social-icon-footer img {
  width: 16px !important;
  height: 16px !important;
  filter: brightness(0) invert(0.65) !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-indent: 0 !important;
}

.footer-base a.social-icon-footer:hover {
  background: rgba(124, 58, 237, 0.2) !important;
  border-color: rgba(124, 58, 237, 0.5) !important;
  transform: translateY(-2px) !important;
}

.footer-base a.social-icon-footer:hover img {
  filter: brightness(0) invert(1) !important;
}

/* compliance text label right of social icons */
.social-links-container::after {
  content: "NPCI  ·  UPI  ·  RBI Regulated";
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.5px;
  white-space: nowrap;
  margin-left: 16px;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important;
  }

  .footer-brand {
    grid-column: 1 / -1 !important;
  }

  .footer-base {
    flex-wrap: wrap;
    gap: 16px;
  }
}

/* Remove contact info injected via ::after */
.footer-brand::after {
  content: none !important;
  display: none !important;
}

.footer-brand-desc::after {
  content: none !important;
  display: none !important;
}

/* Remove NPCI · UPI · RBI Regulated text */
.social-links-container::after {
  content: none !important;
  display: none !important;
}

/* ── FOOTER LOGO SWAP — use user exact logo for dark footer ── */
.footer-brand .logo img,
.footer-logo-img {
  content: url("assets/user_footer_logo_final.png") !important;
  height: 80px !important;
  width: auto !important;
  display: block !important;
  transform: translate(-25%, -20px) scale(1.4) !important;
  /* shifts left & pulls up to fix image padding */
  transform-origin: left center !important;
  mix-blend-mode: screen !important;
  /* blends the black background out */
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background: transparent !important;
  margin: 0 0 -10px 0 !important;
  /* compensate for the pull-up so text below doesn't gap */
  padding: 0 !important;
  object-fit: contain !important;
}

/* ========================================================
   MEGA MENU REDESIGN (PAYTM-STYLE)
   ======================================================== */

/* 1. Reset drop-item position for absolute children */
.inner-page-header .nav-menu .drop-item {
  position: relative !important;
}

/* 2. Main Dropdown (.sub-menu) */
.inner-page-header .nav-menu .drop-item .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
  min-width: 240px !important;
  width: max-content !important;
  max-width: 800px !important;
  background-color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  padding: 12px 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;

  /* Animation */
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s ease-out !important;

  /* Layout */
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  z-index: 999 !important;
  pointer-events: none !important;
}

.inner-page-header .nav-menu .sub-menu>li {
  width: 100% !important;
}

/* Hover state for drop-item */
.inner-page-header .nav-menu .drop-item:hover .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
}

/* Top Pointer Triangle */
.inner-page-header .nav-menu .drop-item .sub-menu::before {
  content: "" !important;
  position: absolute !important;
  top: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(45deg) !important;
  width: 12px !important;
  height: 12px !important;
  background-color: #ffffff !important;
  border-top-left-radius: 2px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.05) !important;
  z-index: -1 !important;
}

/* 3. Dropdown Links */
.inner-page-header .nav-menu .sub-menu>li>a {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 24px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.inner-page-header .nav-menu .sub-menu>li>a:hover {
  background-color: #f4f7ff !important;
  /* Soft light blue */
  color: #0f172a !important;
}

/* Fix inline styles on links & arrows */
.inner-page-header .nav-menu .sub-menu>li>a span,
.inner-page-header .nav-menu .sub-menu>li>a span.arrow {
  color: #94a3b8 !important;
  font-size: 1.3rem !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

.inner-page-header .nav-menu .sub-menu>li:hover>a span {
  color: #6366f1 !important;
  /* purple tint on hover for arrow */
}

/* 4. Nested Dropdown (.nested-menu) */
.inner-page-header .nav-menu .sub-menu .nested-drop {
  position: relative !important;
}

.inner-page-header .nav-menu .sub-menu .nested-menu {
  position: absolute !important;
  top: -12px !important;
  /* align with parent padding */
  left: 100% !important;
  margin-left: 4px !important;
  width: max-content !important;
  min-width: 320px !important;
  background-color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  padding: 16px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;

  /* Animation */
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s ease-out !important;
  pointer-events: none !important;
  z-index: 1000 !important;
}

/* Redundant override removed as standard styling is now fully text-based */
.inner-page-header .nav-menu .sub-menu .nested-menu:has(.paytm-grid-container) {}

.inner-page-header .nav-menu .sub-menu .nested-drop:hover .nested-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Nested Links */
.inner-page-header .nav-menu .sub-menu .nested-menu ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.inner-page-header .nav-menu .sub-menu .nested-menu ul li a {
  display: block !important;
  padding: 12px 24px !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #475569 !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.inner-page-header .nav-menu .sub-menu .nested-menu ul li a:hover {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

/* Main Nav Item Arrow */
.inner-page-header .nav-menu .drop-item>a>.arrow {
  display: inline-block !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

.inner-page-header .nav-menu .drop-item:hover>a>.arrow {
  color: #6366f1 !important;
}

/* ========================================================
   NAVBAR BUTTONS HOVER EFFECT
   ======================================================== */
.nav-btns .btn-early:hover {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  border-color: #ffffff !important;
}

/* Remove 'Learn More' from Varieties Section */
.slider-card .learn-more-btn {
  display: none !important;
}

/* Change text in varieties section to black */
.slider-card-content h3,
.slider-card-content p {
  color: #000000 !important;
}

/* Hide the heading banner on all inner pages */
.inner-dashboard-header {
  display: none !important;
}

/* ========================================================
   INNER PAGE DARK SUB-HEADER (REPURPOSED QUICK PAY MODAL)
   ======================================================== */

/* 1. Target the modal ONLY when it follows the inner-page header */
body.inner-page-layout {
  display: flex !important;
  flex-direction: column !important;
}

.inner-dashboard-header {
  display: none !important;
}

/* Define the specific pages where we use the dark blue category nav bar instead of the modal overlay, AND pages where we just want to hide the modal overlay (like business services) */
body:has(a[href="flights.html"].active, a[href="hotels.html"].active, a[href="homestays.html"].active, a[href="guesthouses.html"].active, a[href="resorts.html"].active, a[href="trains.html"].active, a[href="buses.html"].active, a[href="movies.html"].active, a[href="subscriptions.html"].active, a[href="events.html"].active, a.sub-tab[href="#p-qr"]) .inner-page-header~.modal-overlay {
  display: none !important;
}

/* Hide category nav bar on other pages (like Recharge) */
body:not(:has(a[href="flights.html"].active, a[href="hotels.html"].active, a[href="homestays.html"].active, a[href="guesthouses.html"].active, a[href="resorts.html"].active, a[href="trains.html"].active, a[href="buses.html"].active, a[href="movies.html"].active, a[href="subscriptions.html"].active, a[href="events.html"].active)) .category-nav-bar,
body:not(:has(a[href="flights.html"].active, a[href="hotels.html"].active, a[href="homestays.html"].active, a[href="guesthouses.html"].active, a[href="resorts.html"].active, a[href="trains.html"].active, a[href="buses.html"].active, a[href="movies.html"].active, a[href="subscriptions.html"].active, a[href="events.html"].active)) .sticky-nav-container {
  display: none !important;
}

.sticky-nav-container {
  display: block !important;
  position: sticky !important;
  top: 66px !important;
  z-index: 100 !important;
}

.category-nav-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 15px 40px !important;
  background: #141c2b !important;
  padding: 15px 2vw !important;
  margin: 0 !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
}

.category-nav-bar a {
  display: inline-block !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  background: none !important;
  padding: 0 !important;
  border: none !important;
  min-width: 0 !important;
  box-shadow: none !important;
}

.category-nav-bar a i {
  display: none !important;
}

.category-nav-bar a:hover,
.category-nav-bar a.active {
  color: #ffffff !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Hide the ugly checkbox that sometimes renders below the bar */
#quick-pay-toggle {
  display: none !important;
}

.inner-page-header~.modal-overlay {
  display: block !important;
  order: -1 !important;
  /* Move to the top of the page */
  position: sticky !important;
  top: 66px !important;
  /* Stick directly beneath the header */
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: min-content !important;
  /* Ensure it wraps content */
  background: #141c2b !important;
  /* Dark navy requested */
  z-index: 100 !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-top: 66px !important;
  /* Perfectly flushes against the 66px tall main header */
  opacity: 1 !important;
  visibility: visible !important;
  flex-shrink: 0 !important;
  /* Prevent flex column from squishing the height */
  overflow: visible !important;
  /* Prevent any clipping */
}

/* 2. Modal content styling - two-row centered layout */
.inner-page-header~.modal-overlay .modal-content {
  background: transparent !important;
  box-shadow: none !important;
  max-width: 100% !important;
  /* Spread EDGE TO EDGE */
  width: 100% !important;
  margin: 0 !important;
  padding: 8px 2vw 8px !important;
  /* Squished padding to reduce overall height */
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  /* Allow wrapping into two rows */
  justify-content: center !important;
  /* Center the rows */
  align-items: center !important;
  row-gap: 8px !important;
  /* Tighter gap between rows to save vertical space */
  column-gap: 24px !important;
  /* Tighter gap to fit 8 items on the first row like the referral image */
  overflow: visible !important;
  /* Prevent text clipping on second row */
  transform: none !important;
  /* CRITICAL: Prevent original modal's translateY(20px) from pushing content outside the background */
}

/* 3. Hide unwanted elements */
.inner-page-header~.modal-overlay .close-modal,
.inner-page-header~.modal-overlay .modal-section-title,
.inner-page-header~.modal-overlay .modal-icon-premium,
.inner-page-header~.modal-overlay .modal-section:nth-child(4)

/* Book & Buy section */
  {
  display: none !important;
}

/* 4. Use display: contents to allow children to flow together in the parent flexbox */
.inner-page-header~.modal-overlay .modal-section,
.inner-page-header~.modal-overlay .modal-grid {
  display: contents !important;
}

/* 5. Style the text links as pills */
.inner-page-header~.modal-overlay .modal-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  /* Force content to center */
  padding: 8px 14px !important;
  /* Slightly tighter padding to conserve width */
  margin: 0 !important;
  /* Removed margin, using parent gap instead */
  background: transparent !important;
  border: none !important;
  border-radius: 14px !important;
  /* Slightly more rounded */
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

/* 1. Hide the original text containing <br> so it can't wrap */
.inner-page-header~.modal-overlay .modal-label {
  font-size: 0 !important;
  color: transparent !important;
  margin: 0 !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Completely remove the <br> from layout to prevent it from acting as a ghost flex item */
.inner-page-header~.modal-overlay .modal-label br {
  display: none !important;
}

/* 2. Recreate the labels using pseudo-elements (this guarantees one line and no <br> issues) */
.inner-page-header~.modal-overlay .modal-label::after {
  font-size: 15px !important;
  /* Sized to perfectly fit 8 items per row */
  font-weight: 700 !important;
  color: #8f9bad !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  transition: all 0.2s ease !important;
}

/* 3. Hover and Active Colors */
.inner-page-header~.modal-overlay .modal-item:hover .modal-label::after,
.inner-page-header~.modal-overlay .modal-item.active .modal-label::after {
  color: #ffffff !important;
}

/* 4. Map the exact text strings to match the referral image perfectly */
.inner-page-header~.modal-overlay .modal-item[href="mobile.html"] .modal-label::after {
  content: "Mobile Recharge" !important;
}

.inner-page-header~.modal-overlay .modal-item[href="broadband.html"] .modal-label::after {
  content: "Broadband Recharge" !important;
}

.inner-page-header~.modal-overlay .modal-item[href="fastag.html"] .modal-label::after {
  content: "FASTag Recharge" !important;
}

.inner-page-header~.modal-overlay .modal-item[href="dth.html"] .modal-label::after {
  content: "DTH Recharge" !important;
}

.inner-page-header~.modal-overlay .modal-item[href="metro.html"] .modal-label::after {
  content: "Metro Recharge" !important;
}

.inner-page-header~.modal-overlay .modal-item[href="electricity.html"] .modal-label::after {
  content: "Electricity Recharge" !important;
}

.inner-page-header~.modal-overlay .modal-item[href="loan.html"] .modal-label::after {
  content: "Loan EMI Payment" !important;
}

.inner-page-header~.modal-overlay .modal-item[href="cable.html"] .modal-label::after {
  content: "Cable/TV" !important;
}

.inner-page-header~.modal-overlay .modal-item[href="insurance.html"] .modal-label::after {
  content: "LIC/Insurance" !important;
}

.inner-page-header~.modal-overlay .modal-item[href="water.html"] .modal-label::after {
  content: "Water Bill" !important;
}

.inner-page-header~.modal-overlay .modal-item[href="gas.html"] .modal-label::after {
  content: "Gas Bill" !important;
}

/* Horizontal scrolling for smaller screens instead of wrapping text */
@media (max-width: 768px) {
  .inner-page-header~.modal-overlay .modal-content {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    /* Firefox hide scrollbar */
  }

  .inner-page-header~.modal-overlay .modal-content::-webkit-scrollbar {
    display: none !important;
    /* Chrome/Safari hide scrollbar */
  }
}

/* 7. Hover and Active state */
.inner-page-header~.modal-overlay .modal-item:hover,
.inner-page-header~.modal-overlay .modal-item.active {
  background-color: #2d3b52 !important;
  /* Active pill background requested */
}

.inner-page-header~.modal-overlay .modal-item:hover .modal-label,
.inner-page-header~.modal-overlay .modal-item.active .modal-label {
  color: #ffffff !important;
  /* Active text requested */
}

/* ========================================================
   MAIN NAVIGATION DOTS EXACT LAYOUT (INNER PAGES ONLY)
   ======================================================== */
.inner-page-header .nav-menu>li>a::before {
  display: none !important;
}

/* ========================================================
   HOMEPAGE NAVBAR OVERRIDES (PAYTM STYLE)
   ======================================================== */
.header .nav {
  justify-content: flex-start !important;
}

.header .nav-menu {
  margin-left: 40px !important;
  margin-right: 0 !important;
  /* Push against logo */
  gap: 20px !important;
}

.header .nav-btns {
  margin-left: auto !important;
}

.header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}

/* Simple text nav items for homepage */
.header .nav-menu>li>a {
  font-weight: 700 !important;
  /* Match Paytm bold style */
  color: #0f172a !important;
  font-size: 0.95rem !important;
  padding: 22px 16px !important;
  /* Increase hit area for easier hover */
  display: flex !important;
  align-items: center !important;
}

.header .nav-menu>li>a .arrow {
  font-size: 0 !important;
  /* Keep text hidden to avoid double arrows */
  margin-left: 6px !important;
  color: #64748b !important;
  width: 6px !important;
  height: 6px !important;
  border-right: 1.5px solid currentColor !important;
  border-bottom: 1.5px solid currentColor !important;
}

.header .nav-menu>li>a::before {
  display: none !important;
  /* ensure no dots on homepage */
}

/* MAIN DROPDOWN PANELS */
.header .nav-menu .drop-item {
  position: relative !important;
}

.header .nav-menu .drop-item .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  padding: 12px 0 !important;
  width: max-content !important;
  min-width: 220px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  z-index: 2000 !important;

  /* Animation */
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-50%) translateY(8px) !important;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s ease-out !important;
}

.header .nav-menu .drop-item:hover .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Dropdown Triangle Pointer */
.header .nav-menu .drop-item .sub-menu::before {
  content: "" !important;
  position: absolute !important;
  top: -6px !important;
  left: 50% !important;
  margin-left: -6px !important;
  width: 12px !important;
  height: 12px !important;
  background: #ffffff !important;
  transform: rotate(45deg) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.05) !important;
  z-index: 2001 !important;
}

/* Link Styling inside dropdown */
.header .nav-menu .sub-menu a {
  font-weight: 600 !important;
  color: #1e293b !important;
  font-size: 0.95rem !important;
  padding: 12px 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  transition: background 0.15s ease !important;
}

.header .nav-menu .sub-menu a:hover {
  background: #f8fafc !important;
  /* Very soft light gray/blue */
  color: #0f172a !important;
  /* Keep text dark */
}

.header .nav-menu .sub-menu a span {
  display: inline-block !important;
  /* Ensure arrows show */
  color: #94a3b8 !important;
  font-size: 1.2rem !important;
}

/* NESTED MEGA MENUS (Recharge & Bills, Ticket Booking, etc) */
.header .nav-menu .sub-menu .nested-drop {
  position: relative !important;
}

.header .nav-menu .sub-menu .nested-menu {
  position: absolute !important;
  left: 100% !important;
  top: -12px !important;
  margin-left: 4px !important;
  width: max-content !important;
  padding: 16px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  z-index: 2000 !important;

  /* Animation */
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) !important;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s ease-out !important;
}

.header .nav-menu .sub-menu .nested-drop:hover .nested-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Remove the redundant triangle pointer on nested menus */
.header .nav-menu .sub-menu .nested-menu::before {
  display: none !important;
}

/* Nested Grid Layout */
.header .nested-menu .recharge-grid,
.header .nested-menu ul {
  display: grid !important;
  grid-template-rows: repeat(6, auto) !important;
  /* 6 rows to comfortably fit 11 items */
  grid-auto-flow: column !important;
  /* Flow vertically down columns */
  column-gap: 32px !important;
  row-gap: 4px !important;
}

.header .nested-menu a {
  padding: 8px 12px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

.header .nested-menu a:hover {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

/* Space between Explore category and Footer on Accommodation inner pages */
.app-download-container {
  margin-bottom: 80px !important;
}

/* Fix footer logo background box on all pages by matching main page styling but removing the hue-rotate filter */
.footer-brand .logo img,
.footer-logo-img,
.box-generic-4,
img[src*="logo_footre"],
img[src*="logo_footer"] {
  content: url("assets/user_footer_logo_final.png") !important;
  filter: none !important;
  mix-blend-mode: screen !important;
  background: transparent !important;
  background-color: transparent !important;
  height: 80px !important;
  width: auto !important;
  display: block !important;
  transform: translate(-25%, -20px) scale(1.4) !important;
  transform-origin: left center !important;
  margin: 0 0 -10px 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
}

.footer-brand .logo {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

/* Hide Ticket Booking header and My Trips & Bookings link in mega menus */
.paytm-grid-container::before {
  display: none !important;
  content: none !important;
}

.paytm-menu-footer {
  display: none !important;
}

/* Fix nested footer width on inner pages and standardize background/height matching main page */
.footer {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background: linear-gradient(180deg, #0c0320 0%, #070112 40%, #030009 100%) !important;
  border-top: 1px solid rgba(124, 58, 237, 0.2) !important;
  padding: 140px 0 60px !important;
}

/* Remove white gap below footer by resetting container margins only when footer is nested inside it */
.workspace:has(.footer) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Separate the content box from the fixed navigation bar on inner pages */
.workspace {
  margin-top: 110px !important;
}

/* Keep normal spacing if there is a sub-navigation bar above workspace */
.sticky-nav-container + .workspace,
.sticky-nav-container ~ .workspace {
  margin-top: 30px !important;
}

/* Reduce the height of the option bar ONLY on Recharge and Bill payment pages */
body:has(a[href="mobile.html"].active, a[href="electricity.html"].active, a[href="dth.html"].active, a[href="broadband.html"].active, a[href="water.html"].active, a[href="gas.html"].active, a[href="fastag.html"].active, a[href="insurance.html"].active, a[href="cable.html"].active, a[href="loan.html"].active) .category-nav-bar {
  padding: 10px 2vw !important;
  gap: 8px 28px !important;
}

body:has(a[href="mobile.html"].active, a[href="electricity.html"].active, a[href="dth.html"].active, a[href="broadband.html"].active, a[href="water.html"].active, a[href="gas.html"].active, a[href="fastag.html"].active, a[href="insurance.html"].active, a[href="cable.html"].active, a[href="loan.html"].active) .category-nav-bar a {
  font-size: 13px !important;
  padding: 6px 12px !important;
  line-height: 1.2 !important;
}

/* Increase the height of the option bar on Ticket Booking and Accommodation pages */
body:has(a[href="flights.html"].active, a[href="hotels.html"].active, a[href="homestays.html"].active, a[href="guesthouses.html"].active, a[href="resorts.html"].active, a[href="trains.html"].active, a[href="buses.html"].active, a[href="movies.html"].active, a[href="subscriptions.html"].active, a[href="events.html"].active, a[href="accommodation.html"].active) .category-nav-bar {
  padding: 10px 2vw !important;
  gap: 8px 28px !important;
}

body:has(a[href="flights.html"].active, a[href="hotels.html"].active, a[href="homestays.html"].active, a[href="guesthouses.html"].active, a[href="resorts.html"].active, a[href="trains.html"].active, a[href="buses.html"].active, a[href="movies.html"].active, a[href="subscriptions.html"].active, a[href="events.html"].active, a[href="accommodation.html"].active) .category-nav-bar a {
  font-size: 13px !important;
  padding: 6px 12px !important;
}

/* Clean Profile Dropdown Menu Layout */
.profile-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 220px;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
  padding: 8px 0 !important;
  margin-top: 8px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.profile-dropdown-item {
  display: block !important;
  padding: 12px 20px !important;
  color: #1e293b !important; /* Dark readable text */
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  text-align: left !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  background: transparent !important;
  border: none !important;
}

.profile-dropdown-item:hover {
  background-color: #f1f5f9 !important; /* Clear hover state */
  color: #0f172a !important;
}

.profile-dropdown-divider {
  height: 1px;
  background-color: #e2e8f0;
  margin: 6px 0;
}

/* ==========================================================================
   CLEAN TEXT-ONLY QUICK PAY MODAL LAYOUT
   ========================================================================== */

/* Fix "Bill Payment" popup modal on all inner pages when toggled */
.inner-page-header ~ .modal-overlay,
body.inner-page-layout .modal-overlay {
  display: none;
  justify-content: center !important;
  align-items: center !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 99999 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#quick-pay-toggle:checked ~ .modal-overlay,
body.inner-page-layout:has(#quick-pay-toggle:checked) .modal-overlay {
  display: flex !important;
}

/* Modal Content Container - Wide landscape card layout */
.inner-page-header ~ .modal-overlay .modal-content,
body.inner-page-layout .modal-overlay .modal-content {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
  width: 800px !important;
  max-width: 95vw !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  padding: 32px !important;
  margin: auto !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 24px !important;
  position: relative !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* Section block styling - including explicitly overriding display: none on the 4th child (Book & Buy) */
.inner-page-header ~ .modal-overlay .modal-section,
body.inner-page-layout .modal-overlay .modal-section,
.inner-page-header ~ .modal-overlay .modal-section:nth-child(4),
body.inner-page-layout .modal-overlay .modal-section:nth-child(4) {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 !important;
}

/* Section Title styling */
.inner-page-header ~ .modal-overlay .modal-section-title,
body.inner-page-layout .modal-overlay .modal-section-title {
  display: block !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #6366f1 !important; /* Indigo brand color */
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 !important;
}

/* Layout items horizontally using a wrapping flex container */
.inner-page-header ~ .modal-overlay .modal-grid,
body.inner-page-layout .modal-overlay .modal-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px 16px !important;
}

/* Hide all icons, emojis, and premium icon containers completely */
.inner-page-header ~ .modal-overlay .modal-icon-premium,
.inner-page-header ~ .modal-overlay .modal-item::before,
.inner-page-header ~ .modal-overlay .modal-item::after,
body.inner-page-layout .modal-overlay .modal-icon-premium,
body.inner-page-layout .modal-overlay .modal-item::before,
body.inner-page-layout .modal-overlay .modal-item::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Style horizontal button-like text links (no large card boxes, no heavy shadows) */
.inner-page-header ~ .modal-overlay .modal-item,
body.inner-page-layout .modal-overlay .modal-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: unset !important;
  padding: 6px 12px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s ease !important;
  margin: 0 !important;
  width: auto !important;
}

/* Simple hover background on menu items */
.inner-page-header ~ .modal-overlay .modal-item:hover,
body.inner-page-layout .modal-overlay .modal-item:hover {
  background-color: #f1f5f9 !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Text label styling */
.inner-page-header ~ .modal-overlay .modal-label,
body.inner-page-layout .modal-overlay .modal-label {
  font-size: 0.85rem !important;
  color: #475569 !important; /* Soft slate text */
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  margin: 0 !important;
  display: inline !important;
  visibility: visible !important;
  width: auto !important;
}

.inner-page-header ~ .modal-overlay .modal-item:hover .modal-label,
body.inner-page-layout .modal-overlay .modal-item:hover .modal-label {
  color: #0f172a !important; /* Dark text on hover */
}

/* Hide any injected pseudo-elements from previous overrides */
.inner-page-header ~ .modal-overlay .modal-label::after,
body.inner-page-layout .modal-overlay .modal-label::after {
  display: none !important;
  content: none !important;
}

/* Transform internal line breaks <br> to behave as simple spaces */
.inner-page-header ~ .modal-overlay .modal-label br,
body.inner-page-layout .modal-overlay .modal-label br {
  display: inline-block !important;
  width: 0.25em !important;
  height: 0px !important;
  content: "" !important;
  margin: 0 !important;
  padding: 0 !important;
  outline: none !important;
}

/* Add subtle dividers between sections */
.inner-page-header ~ .modal-overlay .modal-section:not(:last-of-type),
body.inner-page-layout .modal-overlay .modal-section:not(:last-of-type) {
  border-bottom: 1px solid #f1f5f9 !important;
  padding-bottom: 16px !important;
}

/* Sleek close button positioning */
.inner-page-header ~ .modal-overlay .close-modal,
body.inner-page-layout .modal-overlay .close-modal {
  display: block !important;
  font-size: 1.5rem !important;
  color: #94a3b8 !important;
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  cursor: pointer !important;
  z-index: 10 !important;
  line-height: 1 !important;
}

.inner-page-header ~ .modal-overlay .close-modal:hover,
body.inner-page-layout .modal-overlay .close-modal:hover {
  color: #475569 !important;
}

/* Hide the Quick Pay modal by default on load on all inner pages */
body.inner-page-layout .modal-overlay {
  display: none !important;
}

/* Display the Quick Pay modal as a popup overlay when checked */
body.inner-page-layout #quick-pay-toggle:checked ~ .modal-overlay {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.6) !important;
  z-index: 99999 !important;
}

/* Push the workspace down to clear the fixed/sticky header and prevent overlap cutoff */
body.inner-page-layout .workspace {
  margin-top: 110px !important;
}

/* Force the sub-navigation option bar to display and remain visible on all inner pages */
body.inner-page-layout:not(#fake-id-override) .sticky-nav-container {
  display: block !important;
  visibility: visible !important;
  position: sticky !important;
  top: 66px !important;
  z-index: 100 !important;
}

body.inner-page-layout:not(#fake-id-override) .category-nav-bar {
  display: flex !important;
  visibility: visible !important;
}

/* Align dropdown menu to the left edge of parent item to prevent off-screen cutoff on the left */
.header .nav-menu .drop-item .sub-menu {
  left: 0 !important;
  transform: translateY(8px) !important;
}

.header .nav-menu .drop-item:hover .sub-menu {
  transform: translateY(0) !important;
}

.header .nav-menu .drop-item .sub-menu::before {
  left: 30px !important;
  margin-left: 0 !important;
}

/* Reduce top margin of workspace when option bar is present to prevent massive empty gap */
body.inner-page-layout .sticky-nav-container ~ .workspace {
  margin-top: 35px !important;
}

/* ========================================================
   ARROW: Always point downward (∨), never rotate on hover/tab
   ======================================================== */

/* Lock the arrow to point straight down using border-right + border-bottom at 45deg */
.header .nav-menu li a .arrow,
.inner-page-header .nav-menu li a .arrow,
.nav-menu li a .arrow {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: none;
  display: inline-block;
  margin-left: 6px;
  opacity: 0.7;
  font-size: 0;
  vertical-align: middle;
}

/* Prevent rotation on hover — keep pointing down */
.header .nav-menu .drop-item:hover a > .arrow,
.inner-page-header .nav-menu .drop-item:hover a > .arrow,
.drop-item:hover .arrow {
  transform: translateY(-2px) rotate(45deg);
  transition: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.9;
}

/* Prevent any change on focus/tab — keep pointing down */
.header .nav-menu li a:focus .arrow,
.inner-page-header .nav-menu li a:focus .arrow,
.nav-menu li a:focus .arrow,
.header .nav-menu li a:focus-within .arrow,
.nav-menu li a:focus-visible .arrow {
  transform: translateY(-2px) rotate(45deg);
  transition: none;
}

/* Make nested drop arrows (e.g., Ticket Booking, Accommodation) turn purple on hover/tab but NOT rotate */
.nav-menu .sub-menu .nested-drop > a > span {
  transition: color 0.3s ease;
}

.nav-menu .sub-menu .nested-drop:hover > a > span,
.nav-menu .sub-menu .nested-drop:focus-within > a > span {
  color: #6366f1;
}

/* Make nav bar drop down box and nested menu (side bar) have sharp edges */
.header .nav-menu .sub-menu,
.header .nav-menu .sub-menu .nested-menu,
.header .nav-menu .drop-item .sub-menu,
.inner-page-header .nav-menu .sub-menu,
.inner-page-header .nav-menu .drop-item .sub-menu,
.inner-page-header .nav-menu .sub-menu .nested-menu {
  border-radius: 0;
}

/* ========================================================
   PAYTM-STYLE MEGA MENU REDESIGN
   ======================================================== */

/* 1. Page Dimming on Hover */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.4);
  z-index: 90; /* Below header, above rest */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}
body:has(.header .nav-menu .drop-item:hover)::before,
body:has(.inner-page-header .nav-menu .drop-item:hover)::before {
  opacity: 1;
  visibility: visible;
}

/* 2. Parent Alignment */
.header .nav-menu .drop-item,
.inner-page-header .nav-menu .drop-item {
  position: relative !important;
}

/* 3. Main Dropdown Column (Level 1) */
.header .nav-menu .drop-item .sub-menu,
.inner-page-header .nav-menu .drop-item .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px) !important;
  min-width: 260px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important;
  border-radius: 0 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  padding: 12px 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
  z-index: 100 !important;
  pointer-events: none !important;
}

/* Hover State to show Dropdown */
.header .nav-menu .drop-item:hover .sub-menu,
.inner-page-header .nav-menu .drop-item:hover .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
}

/* Top Triangle Arrow */
.header .nav-menu .drop-item .sub-menu::before,
.inner-page-header .nav-menu .drop-item .sub-menu::before {
  content: "" !important;
  position: absolute !important;
  top: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(45deg) !important;
  width: 12px !important;
  height: 12px !important;
  background: #ffffff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.04) !important;
  z-index: -1 !important;
  display: block !important;
}

/* 4. Dropdown Links */
.header .nav-menu .sub-menu > li > a,
.inner-page-header .nav-menu .sub-menu > li > a {
  padding: 12px 24px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  background: transparent !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

/* Hover Gradient Tint */
.header .nav-menu .sub-menu > li > a:hover,
.inner-page-header .nav-menu .sub-menu > li > a:hover {
  background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%) !important;
  color: #6366f1 !important;
}

/* Active Gradient Tint */
.header .nav-menu .sub-menu > li > a.active,
.inner-page-header .nav-menu .sub-menu > li > a.active {
  background: linear-gradient(90deg, #f0f4ff 0%, #e6edff 100%) !important;
  color: #6366f1 !important;
}

/* 5. Nested Dropdown Column (Level 2) - Top Aligned */
/* CRITICAL: Make the nested-drop static so the nested-menu aligns to the sub-menu container! */
.header .nav-menu .sub-menu .nested-drop,
.inner-page-header .nav-menu .sub-menu .nested-drop {
  position: static !important;
}

.header .nav-menu .sub-menu .nested-menu,
.inner-page-header .nav-menu .sub-menu .nested-menu {
  position: absolute !important;
  top: 0 !important; /* Aligns to top of sub-menu */
  left: 100% !important; /* Starts exactly at the right edge */
  min-width: 320px !important;
  min-height: 100% !important; /* Matches height of level 1 if needed */
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important;
  border-radius: 0 !important; /* Sharp edges */
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05) !important; /* Shadow on the right only */
  padding: 16px !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.02) !important; /* Subtle separator */
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(5px) !important; /* Slight slide effect */
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
  z-index: 99 !important;
  pointer-events: none !important;
}

/* When a nested drop is hovered, make the parent container square on the right side to seamlessly connect */
.header .nav-menu .sub-menu:has(.nested-drop:hover),
.inner-page-header .nav-menu .sub-menu:has(.nested-drop:hover) {
  border-radius: 0 !important;
}

.header .nav-menu .sub-menu .nested-drop:hover .nested-menu,
.inner-page-header .nav-menu .sub-menu .nested-drop:hover .nested-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

/* Nested Menu Links Styling */
.header .nav-menu .sub-menu .nested-menu a,
.inner-page-header .nav-menu .sub-menu .nested-menu a {
  padding: 10px 16px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  border-radius: 8px !important;
  background: transparent !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

.header .nav-menu .sub-menu .nested-menu a:hover,
.inner-page-header .nav-menu .sub-menu .nested-menu a:hover {
  background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%) !important;
  color: #0f172a !important;
}

/* Remove redundant before elements in nested */
.header .nav-menu .sub-menu .nested-menu::before,
.inner-page-header .nav-menu .sub-menu .nested-menu::before {
  display: none !important;
}.inner-page-header .nav-menu {
  margin-left: 8vw !important;
}