/* ==========================================================================
   Duepe - NEON DARK theme
   --------------------------------------------------------------------------
   An override layer on top of the stock light theme. Loaded LAST in <head>,
   after each page's own <style>, so it can repaint page-scoped surfaces
   without those pages being edited.

   The long selector lists below are GENERATED from the pages themselves
   (scratchpad/make_neon.php) - every light background and dark text colour the
   pages paint. Re-run the generator if page CSS changes.
   surfaces: white 95, cool 17, warm 23, mint 2, violet 1 | text: heading 12, muted 8, cyan 23, amber 2, lime 3, violet 0
   ========================================================================== */

:root {
  --neon-bg:        #05070f;
  --neon-bg-2:      #080b18;
  --neon-surface:   #0e1326;
  --neon-surface-2: #121834;
  --neon-raised:    #161d3d;

  --neon-cyan:      #00e5ff;
  --neon-magenta:   #ff2fd0;
  --neon-violet:    #9b5cff;
  --neon-lime:      #39ff9e;
  --neon-amber:     #ff9812;

  --neon-text:      #b9c2e0;
  --neon-muted:     #7b85ad;
  --neon-heading:   #e4eaf6;

  --neon-line:      rgba(0, 229, 255, 0.16);
  --neon-line-soft: rgba(155, 92, 255, 0.14);

  --glow-cyan:    0 0 10px rgba(0, 229, 255, 0.45), 0 0 26px rgba(0, 229, 255, 0.18);
  --glow-magenta: 0 0 10px rgba(255, 47, 208, 0.45), 0 0 26px rgba(255, 47, 208, 0.18);
  --glow-amber:   0 0 10px rgba(255, 152, 18, 0.45), 0 0 26px rgba(255, 152, 18, 0.18);
  --glow-lime:    0 0 10px rgba(57, 255, 158, 0.40), 0 0 26px rgba(57, 255, 158, 0.16);

  --bs-primary: #00e5ff;
  --bs-primary-rgb: 0, 229, 255;
  --bs-body-color: #dbe3ff;
  --bs-heading-color: #ffffff;
}

/* ------------------------------------------------- page design tokens ----
   The pages declare their own text tokens on page-root classes (.api-page,
   .aeps-page, .career-page, ...) and then use them through var(). Those uses
   are invisible to a selector-based scan, so overriding the tokens themselves
   is what actually repaints the text - otherwise bare <strong> and copy render
   #26364d on a #0e1326 card (a 1.5:1 contrast ratio, effectively unreadable).

   Applied with * !important so it beats the page-root declaration regardless of
   which ancestor defined it. Deliberately limited to TEXT and LINE tokens -
   --accent / --soft stay per-card, since those are set inline per element. */
* {
  --ink: #b9c2e0 !important;
  --muted: #7b85ad !important;
  --navy: #e4eaf6 !important;
  --career-text: #b9c2e0 !important;
  --career-muted: #7b85ad !important;
  --career-navy: #e4eaf6 !important;
  --line: rgba(0, 229, 255, 0.16) !important;

  /* Icon chips use `background: var(--soft)` with a LIGHT hex set inline per
     element. An author !important declaration outranks a normal inline one,
     so this is what actually darkens them. --accent is deliberately left
     alone: it carries each card's colour, which still reads well on dark. */
  --soft: rgba(0, 229, 255, 0.12) !important;
  --soft-bg: rgba(0, 229, 255, 0.12) !important;
  --icon-bg: rgba(0, 229, 255, 0.12) !important;
  --accent-soft: rgba(0, 229, 255, 0.14) !important;
  --badge-soft: rgba(0, 229, 255, 0.14) !important;
  --flow-soft: rgba(0, 229, 255, 0.12) !important;
  --growth-soft: rgba(0, 229, 255, 0.12) !important;
  --community-soft: rgba(0, 229, 255, 0.12) !important;
  --talk-soft: rgba(0, 229, 255, 0.12) !important;
  --bg: #0e1326 !important;
}

/* Accent colours lifted just far enough to clear AA on the dark surface.
   Generated - see make_neon.php. */
[style*="--accent:#228be6" i],
[style*="--accent: #228be6" i] { --accent: #409be9 !important; }
[style*="--accent:#2f7de1" i],
[style*="--accent: #2f7de1" i] { --accent: #5997e7 !important; }
[style*="--accent:#3f78e0" i],
[style*="--accent: #3f78e0" i] { --accent: #6995e7 !important; }
[style*="--accent:#7357ff" i],
[style*="--accent: #7357ff" i] { --accent: #9985ff !important; }
[style*="--accent:#845ef7" i],
[style*="--accent: #845ef7" i] { --accent: #a082f9 !important; }
[style*="--accent:#c85a86" i],
[style*="--accent: #c85a86" i] { --accent: #d37b9e !important; }
[style*="--accent:#d94857" i],
[style*="--accent: #d94857" i] { --accent: #e27480 !important; }
[style*="--accent:#e45a67" i],
[style*="--accent: #e45a67" i] { --accent: #e8707b !important; }
[style*="--accent:#f76707" i],
[style*="--accent: #f76707" i] { --accent: #f86809 !important; }

* {
  --career-blue: #5997e7 !important;
  --blue: #5997e7 !important;
  --violet: #9985ff !important;
}

/* ------------------------------------------------------------------ base -- */
html { background: var(--neon-bg); }

body {
  background: var(--neon-bg) !important;
  color: var(--neon-text) !important;
}

/* Ambient grid + corner glows behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 12% -10%, rgba(0, 229, 255, 0.10), transparent 60%),
    radial-gradient(50rem 36rem at 92% 4%, rgba(255, 47, 208, 0.09), transparent 60%),
    radial-gradient(48rem 34rem at 50% 108%, rgba(155, 92, 255, 0.10), transparent 60%),
    linear-gradient(rgba(0, 229, 255, 0.030) 1px, transparent 1px) 0 0 / 100% 3.5rem,
    linear-gradient(90deg, rgba(0, 229, 255, 0.030) 1px, transparent 1px) 0 0 / 3.5rem 100%;
}
/* The ambient body::before sits at z-index 0, so real content needs a
   stacking context above it. header.wrapper must outrank .content-wrapper:
   giving both z-index 1 let the later-in-DOM content-wrapper paint over the
   header, which trapped the navbar dropdowns behind the page and made the
   menu unclickable. */
/* The matrix-rain canvas sits at the very bottom of the stack. */
#duepe-neon-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
}

.content-wrapper { position: relative; z-index: 1; }
footer { position: relative; z-index: 1; }
header.wrapper { position: relative; z-index: 1040; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
[class*="display-"] {
  color: var(--neon-heading) !important;
}

p, li, dd, dt, span, small, address, td, th, label, figcaption, blockquote {
  color: inherit;
}
.text-muted, .lead { color: var(--neon-muted) !important; }

hr, .divider { border-color: var(--neon-line) !important; background: var(--neon-line) !important; }

::selection { background: rgba(0, 229, 255, 0.28); color: #fff; }

:focus-visible {
  outline: 2px solid var(--neon-cyan) !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------- theme-level surfaces -- */
.bg-white, .bg-light, .bg-body, .card, .accordion-item {
  background-color: var(--neon-surface) !important;
  color: var(--neon-text) !important;
}

[class*="bg-soft-"] { background-color: var(--neon-bg-2) !important; }
[class*="bg-pale-"] { background-color: var(--neon-surface-2) !important; }

.bg-gradient-primary,
.bg-gradient-reverse-primary {
  background: linear-gradient(180deg, #070a16 0%, #0b1024 100%) !important;
}

section, .wrapper { background-color: transparent; }

/* ------------------------------------------------ GENERATED page surfaces -- */
/* white -> card surface */
.about-check-list li,
.about-feature-card,
.about-floating-card,
.about-hero-media,
.about-intro-section,
.about-mini-metric,
.about-performance-card,
.about-stat-card,
.about-story-visual,
.aeps-control-section,
.aeps-flow-board,
.aeps-flow-section,
.aeps-point-card,
.aeps-rail-item,
.aeps-rail-item i, .aeps-flow-number, .aeps-service-icon, .aeps-control-icon, .aeps-point-icon,
.aeps-service-card, .aeps-control-panel, .aeps-point-card,
.aeps-service-rail,
.api-contract-panel,
.api-flow,
.api-flow-step,
.api-readiness-card,
.api-spec-table,
.app-live-badge,
.bbps-band,
.bbps-case-card,
.bbps-case-card i,
.bbps-category-map,
.bbps-control-board,
.bbps-control-section,
.bbps-flow-rail,
.bbps-hero-note span,
.bbps-map-item,
.bbps-map-item i, .bbps-service-icon, .bbps-control-icon, .bbps-case-card i,
.bbps-service-card,
.career-benefit-card, .career-work-card, .career-role-card, .career-process-card,
.career-benefits-section, .career-jobs-section,
.career-hero-media,
.career-snapshot-item,
.career-work-section,
.community-proof,
.community-quote-card,
.community-quote-mark,
.contact-direct-card,
.contact-form-shell,
.contact-route-band,
.contact-route-card,
.dist-control-panel,
.dist-network-card,
.dist-node i, .dist-control-icon, .dist-route-card i, .dist-requirement-card i,
.dist-route-card, .dist-requirement-card,
.dist-strip-inner,
.dmt-case-card,
.dmt-case-icon,
.dmt-control-section,
.dmt-mode,
.dmt-stage-section,
.dmt-summary-panel, .dmt-stage-card, .dmt-ledger-panel, .dmt-control-panel, .dmt-case-card,
.dmt-summary-row i, .dmt-stage-icon, .dmt-control-icon, .dmt-case-icon,
.duepe-community-section,
.duepe-growth-section,
.duepe-talk-section,
.flow-card,
.flow-number,
.gift-catalogue,
.gift-fulfil-card, .gift-control-panel, .gift-use-card,
.gift-order-section,
.gift-tag,
.gift-use-card,
.gift-voucher-card,
.gift-voucher-card i, .gift-state-icon, .gift-control-icon, .gift-use-icon,
.growth-chip-list li,
.growth-pillar-card,
.growth-pillar-icon,
.hero-main-phone::after,
.hero-service-card,
.recharge-control-item,
.recharge-feature-card, .recharge-step-card, .recharge-support-card, .recharge-audience-card,
.recharge-network-section,
.recharge-process-panel,
.recharge-process-row,
.recharge-section-soft,
.recharge-support-card,
.talk-live-badge,
.travel-after-panel, .travel-role-card,
.travel-life-icon,
.travel-life-row,
.travel-life-strip,
.travel-lifecycle,
.travel-queue-item i,
.travel-queue-panel,
.travel-queue-tag,
.travel-role-card,
.travel-role-card i,
.travel-service-line,
.travel-ticket-office {
  background-color: var(--neon-surface) !important;
  background-image: none !important;
  color: var(--neon-text) !important;
}

/* cool blue-white -> raised surface */
.about-approach-section,
.api-eyebrow--blue,
.api-spec-head,
.contact-form-area .form-control, .contact-form-area .form-select,
.dist-badge,
.dist-control-icon,
.dist-eyebrow-blue,
.dist-node,
.dist-requirement-card,
.dist-route-card i, .dist-requirement-card i,
.dist-strip-step,
.dmt-ledger-head,
.duepe-flow-section,
.gift-state,
.recharge-mini-stat,
.travel-queue-item,
.travel-service-head {
  background-color: var(--neon-surface-2) !important;
  background-image: none !important;
  color: var(--neon-text) !important;
}

/* warm cream -> deep base with an amber cast */
.about-hero-section,
.aeps-hero,
.aeps-services-section,
.api-eyebrow--amber,
.api-spec-band,
.bbps-flow-num,
.bbps-hero,
.bbps-rail-section,
.career-hero-section,
.career-process-number,
.contact-form-section,
.contact-hero,
.dist-eyebrow-amber,
.dist-portfolio,
.dmt-hero,
.dmt-ledger-section,
.gift-control-section,
.gift-hero,
.recharge-flow-band,
.recharge-hero,
.recharge-step-number,
.travel-after-section,
.travel-hero {
  background-color: var(--neon-bg-2) !important;
  background-image: none !important;
  color: var(--neon-text) !important;
}

/* mint tints -> surface with a lime cast */
.api-eyebrow--teal,
.dist-eyebrow-teal {
  background-color: rgba(57, 255, 158, 0.07) !important;
  color: var(--neon-lime) !important;
}

/* violet tints -> surface with a violet cast */
.api-eyebrow--violet {
  background-color: rgba(155, 92, 255, 0.10) !important;
  color: var(--neon-violet) !important;
}

/* --------------------------------------------------- GENERATED page text -- */
.about-floating-card strong,
.about-mini-metric strong,
.about-performance-top,
.app-live-badge,
.app-live-badge strong,
.community-proof strong,
.community-quote-card h5,
.flow-card h4,
.flow-number,
.growth-pillar-card h4,
.hero-service-title,
.talk-live-badge strong { color: var(--neon-heading) !important; }

.about-floating-card small,
.about-mini-metric span,
.app-live-badge small,
.career-snapshot-item span,
.community-proof span,
.community-quote-card .role,
.hero-service-kicker,
.talk-live-badge small { color: var(--neon-muted) !important; }

.about-kicker,
.aeps-eyebrow,
.api-eyebrow--blue,
.api-eyebrow--violet,
.bbps-eyebrow,
.career-eyebrow,
.career-hero-copy,
.career-service-list li,
.career-tag,
.community-kicker,
.community-quote p,
.contact-eyebrow,
.dist-badge,
.dist-eyebrow-blue,
.dmt-eyebrow,
.flow-card p,
.flow-section-kicker,
.gift-eyebrow,
.growth-chip-list li,
.growth-pillar-card p,
.recharge-check-list li,
.recharge-eyebrow,
.travel-eyebrow {
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 14px rgba(0, 229, 255, 0.35);
}

.api-eyebrow--amber,
.dist-eyebrow-amber {
  color: var(--neon-amber) !important;
  text-shadow: 0 0 14px rgba(255, 152, 18, 0.35);
}

.api-eyebrow--teal,
.dist-eyebrow-teal,
.growth-kicker {
  color: var(--neon-lime) !important;
  text-shadow: 0 0 14px rgba(57, 255, 158, 0.30);
}

/* none */ {
  color: var(--neon-violet) !important;
  text-shadow: 0 0 14px rgba(155, 92, 255, 0.35);
}

/* ----------------------------------------------------- borders and glow -- */
[class*="-card"],
[class*="-panel"],
[class*="-board"],
[class*="-item"],
[class*="-row"],
[class*="-strip"],
[class*="-shell"],
[class*="-band"],
.card {
  border-color: var(--neon-line) !important;
}

.card,
[class*="-card"]:not([class*="-cards"]),
[class*="-panel"] {
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.06), 0 1.25rem 2.75rem rgba(0, 0, 0, 0.55) !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.card:hover,
[class*="-card"]:not([class*="-cards"]):hover {
  border-color: rgba(0, 229, 255, 0.45) !important;
  box-shadow: var(--glow-cyan), 0 1.5rem 3rem rgba(0, 0, 0, 0.6) !important;
}

/* Icon chips: tinted in their own accent with a matching glow, rather than a
   flat white tile. color-mix keeps each card's colour instead of flattening
   everything to one cyan. */
[class*="-icon"],
[class*="-card"] > i,
[class*="-item"] > i,
[class*="-node"] > i,
[class*="-row"] > i {
  color: var(--accent, var(--neon-cyan)) !important;
  background-color: color-mix(in srgb, var(--accent, #00e5ff) 12%, transparent) !important;
  border: 0 !important;
  box-shadow: none;
}

/* Lineal icons get the same chip as the contact-card icons: a rounded,
   accent-tinted tile with a soft glow. Driven by currentColor, so each icon
   tints its own tile from whatever .text-* class the card already carries.
   No colour is declared here - that would flatten every icon to one hue. */
.icon-svg {
  border: 0 !important;
  background-color: color-mix(in srgb, currentColor 10%, transparent) !important;
  border-radius: 0.9rem;
  padding: 0.6rem;
  box-sizing: content-box;
  box-shadow: none;
  overflow: visible;
  /* The neon palette is very saturated (#ff2fd0, #39ff9e). At icon size that
     reads as glaring, so calm it while keeping each card's hue - the same
     restraint the contact-card icons have. */
  filter: saturate(0.62) brightness(0.92);
}

/* Navigation icons are inline glyphs, not chips. .dropdown-item matches
   [class*="-item"], so the chip rule above was boxing every menu icon.
   Keep the nav lean. */
.navbar i,
.navbar-nav i,
.dropdown-menu i,
.dropdown-item i,
.nav-link i,
.offcanvas-nav i,
.navbar-other i {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  color: inherit !important;
}

/* Lineal SVG icons.
   theme.js replaces <img class="svg-inject"> with an <svg> that KEEPS the
   classes, so the svg IS the element - an earlier ".svg-inject svg" selector
   never matched. Internally they are two-tone:
     .lineal-fill   -> a pale tint
     .lineal-stroke -> fill:#343f52, a dark slate outline
   That dark outline is nearly invisible on a near-black card. Drive both tones
   from currentColor instead, which each card already sets to its neon accent
   (.text-yellow, .text-red, .text-green, ...), keeping the two-tone look. */
.icon-svg .lineal-stroke,
svg.svg-inject .lineal-stroke {
  fill: currentColor !important;
}

.icon-svg .lineal-fill,
svg.svg-inject .lineal-fill {
  fill: currentColor !important;
  opacity: 0.32;
}

.icon-svg circle:not([class]),
.icon-svg path:not([class]),
svg.svg-inject circle:not([class]),
svg.svg-inject path:not([class]) {
  fill: currentColor !important;
}

/* Any icon still delivered as a raster <img> gets tinted to the accent. */
img.svg-inject { filter: brightness(0) saturate(100%) invert(72%) sepia(93%) saturate(1352%) hue-rotate(152deg) brightness(103%) contrast(101%); }

/* ---------------------------------------------------------------- links -- */
a { color: var(--neon-cyan); }
a:hover, a:focus-visible { color: #7df3ff; }

.link-white, .text-white { color: #e4eaf6 !important; }
.link-inverse { color: var(--neon-cyan) !important; }

.text-primary { color: var(--neon-cyan) !important; text-shadow: 0 0 16px rgba(0,229,255,0.4); }
.text-blue    { color: #5ec8ff !important; }
.text-aqua, .text-leaf, .text-green { color: var(--neon-lime) !important; }
.text-yellow, .text-orange { color: var(--neon-amber) !important; }
.text-red, .text-fuchsia { color: var(--neon-magenta) !important; }
.text-purple, .text-grape { color: var(--neon-violet) !important; }

.link-blue  { color: #5ec8ff !important; }
.link-green, .link-aqua { color: var(--neon-lime) !important; }
.link-yellow { color: var(--neon-amber) !important; }
.link-red   { color: var(--neon-magenta) !important; }
.link-purple { color: var(--neon-violet) !important; }

/* -------------------------------------------------------------- buttons -- */
.btn {
  border-width: 1px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: box-shadow 0.22s ease, transform 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #00e5ff 0%, #22a7ff 100%) !important;
  border-color: rgba(0, 229, 255, 0.9) !important;
  color: #01121c !important;
  box-shadow: var(--glow-cyan);
}
.btn-primary:hover, .btn-primary:focus-visible {
  box-shadow: 0 0 16px rgba(0,229,255,.7), 0 0 42px rgba(0,229,255,.32);
  transform: translateY(-1px);
  color: #01121c !important;
}

.btn-outline-primary, .btn-outline-white, .btn-white {
  background: transparent !important;
  border-color: rgba(0, 229, 255, 0.55) !important;
  color: var(--neon-cyan) !important;
  box-shadow: inset 0 0 12px rgba(0, 229, 255, 0.08);
}
.btn-outline-primary:hover, .btn-outline-white:hover, .btn-white:hover {
  background: rgba(0, 229, 255, 0.12) !important;
  border-color: var(--neon-cyan) !important;
  color: #ffffff !important;
  box-shadow: var(--glow-cyan);
}

[class*="btn-soft-"] {
  background: rgba(0, 229, 255, 0.10) !important;
  border-color: rgba(0, 229, 255, 0.28) !important;
  color: var(--neon-cyan) !important;
}
[class*="btn-soft-"]:hover { box-shadow: var(--glow-cyan); }

/* The theme's solid colour buttons (btn-green, btn-blue, ...) keep white text,
   which on their mid-tone fills lands around 2:1 on dark. Give them the same
   luminous treatment: bright fill, near-black label. */
.btn-green, .btn-aqua, .btn-leaf {
  background: linear-gradient(135deg, #39ff9e 0%, #12d9a0 100%) !important;
  border-color: rgba(57, 255, 158, 0.9) !important;
  color: #02150d !important;
  box-shadow: var(--glow-lime);
}
.btn-yellow, .btn-orange {
  background: linear-gradient(135deg, #ffb443 0%, #ff9812 100%) !important;
  border-color: rgba(255, 152, 18, 0.9) !important;
  color: #1a0f00 !important;
  box-shadow: var(--glow-amber);
}
.btn-red, .btn-fuchsia, .btn-pink {
  background: linear-gradient(135deg, #ff6fdd 0%, #ff2fd0 100%) !important;
  border-color: rgba(255, 47, 208, 0.9) !important;
  color: #1a0014 !important;
  box-shadow: var(--glow-magenta);
}
.btn-purple, .btn-grape, .btn-violet {
  background: linear-gradient(135deg, #b98cff 0%, #9b5cff 100%) !important;
  border-color: rgba(155, 92, 255, 0.9) !important;
  color: #0d0020 !important;
}
.btn-blue, .btn-navy {
  background: linear-gradient(135deg, #6fd2ff 0%, #22a7ff 100%) !important;
  border-color: rgba(34, 167, 255, 0.9) !important;
  color: #00121f !important;
}
.btn-green:hover, .btn-aqua:hover, .btn-leaf:hover,
.btn-yellow:hover, .btn-orange:hover,
.btn-red:hover, .btn-fuchsia:hover, .btn-pink:hover,
.btn-purple:hover, .btn-grape:hover, .btn-violet:hover,
.btn-blue:hover, .btn-navy:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* --------------------------------------------------------------- navbar -- */
.navbar,
.navbar.transparent,
.navbar-clone {
  background: rgba(5, 7, 15, 0.92) !important;
  border-bottom: 1px solid var(--neon-line);
}

/* The sticky clone specifically is fully opaque, and only its transform is
   allowed to animate. The theme transitions `all`, so an alpha < 1 background
   fades in from transparent and page text reads straight through the bar while
   it arrives - across the logo. See duepe-responsive.css section 12. */
.navbar-clone {
  transition-property: transform !important;
}

.navbar-clone.fixed,
.navbar-clone.navbar-stick,
.navbar.transparent.navbar-clone {
  background-color: #05070f !important;
}

/* Back-to-top: duepe-responsive.css gives it a white plate so it stays legible
   over the light sites dark footer. On dark that plate would be a bright disc,
   so restate it in the neon palette. */
.progress-wrap {
  background-color: rgba(14, 19, 38, 0.96) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 229, 255, 0.3),
    0 0.4rem 1.1rem rgba(0, 0, 0, 0.55) !important;
}

.progress-wrap::after { color: var(--neon-cyan) !important; }
.progress-wrap svg.progress-circle path { stroke: var(--neon-cyan) !important; }

/* backdrop-filter makes an element a containing block for fixed-position
   DESCENDANTS. The mobile drawer lives inside .navbar and is position:fixed,
   so putting the blur on .navbar collapsed the drawer to the navbar box
   (111px tall, offset below the topbar) instead of filling the viewport.
   Only apply the glass effect at widths where the drawer is not in use. */
@media (min-width: 1200px) {
  .navbar,
  .navbar.transparent,
  .navbar-clone {
    background: rgba(5, 7, 15, 0.82) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

.navbar-nav .nav-link { color: var(--neon-text) !important; }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible,
.navbar-nav .nav-link.active {
  color: var(--neon-cyan) !important;
}
.navbar-nav .nav-link::before { background: var(--neon-cyan) !important; box-shadow: var(--glow-cyan); }

.dropdown-menu {
  background: rgba(10, 14, 30, 0.97) !important;
  border: 1px solid var(--neon-line) !important;
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0,229,255,0.05) !important;
}
.dropdown-item { color: var(--neon-text) !important; }
.dropdown-item:hover, .dropdown-item:focus-visible {
  background: rgba(0, 229, 255, 0.12) !important;
  color: var(--neon-cyan) !important;
}

/* Top contact strip */
header.wrapper > .bg-primary {
  background: linear-gradient(90deg, #070b1a 0%, #0d1430 50%, #070b1a 100%) !important;
  border-bottom: 1px solid var(--neon-line);
}
header.wrapper > .bg-primary,
header.wrapper > .bg-primary a { color: #cfe9ff !important; }
header.wrapper > .bg-primary a:hover { color: var(--neon-cyan) !important; }
header.wrapper > .bg-primary i { color: var(--neon-cyan) !important; }

/* Mobile drawer */
.offcanvas-nav { background: #070b18 !important; border-right: 1px solid var(--neon-line); }
.offcanvas-nav .nav-link { color: var(--neon-text) !important; }
.hamburger span,
.hamburger span::before,
.hamburger span::after { background: var(--neon-cyan) !important; box-shadow: 0 0 8px rgba(0,229,255,.55); }

/* ---------------------------------------------------------------- forms -- */
.form-control, .form-select, textarea {
  background-color: rgba(255, 255, 255, 0.035) !important;
  border-color: var(--neon-line) !important;
  color: var(--neon-text) !important;
}
.form-control::placeholder { color: rgba(139, 149, 196, 0.7) !important; }

/* Bootstrap hides the placeholder inside .form-floating so only the floating
   label shows. The !important above was overriding that, so the label and the
   placeholder rendered on top of each other ("Nameme", "Emai@example.com").
   Re-assert transparency for floating fields only. */
.form-floating > .form-control::placeholder,
.form-floating > .form-control::-webkit-input-placeholder {
  color: transparent !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 0 0.18rem rgba(0, 229, 255, 0.16), var(--glow-cyan) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}
.form-floating > label { color: var(--neon-muted) !important; }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--neon-cyan) !important; }
.form-select option { background: #0e1326; color: var(--neon-text); }

/* ------------------------------------------------------------ accordion -- */
.accordion-item { border-color: var(--neon-line) !important; }
.accordion-button {
  background: var(--neon-surface) !important;
  color: var(--neon-heading) !important;
}
.accordion-button:not(.collapsed) {
  background: rgba(0, 229, 255, 0.08) !important;
  color: var(--neon-cyan) !important;
  box-shadow: inset 0 -1px 0 var(--neon-line);
}
.accordion-button::after { filter: invert(1) hue-rotate(160deg) brightness(1.6); }
.accordion-body { background: var(--neon-surface) !important; color: var(--neon-muted) !important; }

/* --------------------------------------------------------------- swiper -- */
.swiper-pagination-bullet { background: rgba(219, 227, 255, 0.35) !important; opacity: 1; }
.swiper-pagination-bullet-active { background: var(--neon-cyan) !important; box-shadow: var(--glow-cyan); }
.swiper-button-next, .swiper-button-prev { color: var(--neon-cyan) !important; }

/* --------------------------------------------------------------- footer -- */
.duepe-footer {
  background: linear-gradient(180deg, #070b18 0%, #04060e 100%) !important;
  border-top: 1px solid var(--neon-line);
}
.duepe-footer::before {
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent) !important;
  opacity: 0.9;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.5);
}
.duepe-footer a:hover, .duepe-footer a:focus-visible { color: var(--neon-cyan) !important; }
.footer-badge { color: var(--neon-cyan) !important; }
.footer-contact-item i { color: var(--neon-cyan) !important; background: rgba(0, 229, 255, 0.08) !important; }
/* The skyline art is already blue, which sits fine on the dark ground. An
   earlier hue-rotate(150deg) pushed it round to red and clashed badly - just
   dim it and nudge it very slightly toward cyan. */
.footer-art {
  opacity: 0.45;
  filter: hue-rotate(-18deg) saturate(1.15) brightness(0.85);
}

/* ------------------------------------------------------------- counters --
   The stat figures were rendering at 44px - LARGER than the page h1 (43px) -
   which inverted the hierarchy, and the band had no structure: bare numbers
   floating on a dark strip. Size them below the headline and give each stat a
   proper cell. */
.counter {
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.25);
  line-height: 1.1;
  margin-bottom: 0.35rem !important;
  letter-spacing: -0.01em;
}

.counter,
.counter-lg {
  font-size: clamp(1.5rem, 2.1vw, 1.95rem) !important;
}

/* Stat cells: a quiet surface so the row reads as a set rather than loose
   numbers, without competing with the section heading. Cells stretch to equal
   height so a label that wraps ("Corporate Clients / API") does not leave one
   cell taller than the rest. */
.counter-wrapper {
  align-items: stretch;
}

.counter-wrapper > [class*="col"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 0.8rem;
}

.counter-wrapper > [class*="col"] > * {
  position: relative;
}

.counter-wrapper > [class*="col"] {
  position: relative;
}

.counter-wrapper > [class*="col"]::before {
  content: "";
  position: absolute;
  inset: 0.25rem;
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(0, 229, 255, 0.14);
  pointer-events: none;
}

/* The map-backed stat band carried pb-12/pb-md-14, which left a large empty
   run under the figures. */
section.bg-map > .container {
  padding-bottom: 3.25rem !important;
}

/* The label under each figure. */
.counter-wrapper > [class*="col"] p:not(.counter),
.counter + p,
.counter + span {
  font-size: 0.76rem !important;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--neon-muted) !important;
  margin-bottom: 0 !important;
}

/* ------------------------------------------------- decorative + imagery -- */
.shape.bg-dot { color: var(--neon-cyan) !important; opacity: 0.22; }

/* Some illustrations (i2.png, abs.png) have an opaque light panel baked into
   the artwork rather than a transparent background, so on the dark theme they
   read as a pale box. Round the corners, settle the brightness, and vignette
   the outer edge so the panel fades into the page instead of ending on a hard
   line. Nothing here can be done in the image itself without re-exporting it. */
.app-live-image,
.talk-live-image {
  border-radius: 1.1rem;
  filter: brightness(0.92) saturate(1.04)
          drop-shadow(0 1.2rem 2.2rem rgba(0, 0, 0, 0.6)) !important;
}

.app-live-visual::after,
.talk-live-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: 1.1rem;
  background: radial-gradient(ellipse at 52% 50%,
              rgba(5, 7, 15, 0) 52%,
              rgba(5, 7, 15, 0.42) 82%,
              rgba(5, 7, 15, 0.72) 100%);
}

/* The illustrations are drawn for a light page; soften them so they sit on
   dark without a glaring white halo. */
figure img,
.card img,
[class*="-figure"] img {
  filter: saturate(1.05) contrast(1.02);
}

/* Partner logos are dark marks on transparent - invert so they read on dark.
   Matched by SRC, not by class: [class*="brand"] also matches .navbar-brand,
   which flattened the Duepe logo itself into a grey block.

   NOTE: no brightness(0) here. Flattening to black first destroys any internal
   structure, so a knockout logo - white type on a solid dark box, like the HDFC
   mark in c6.png - inverted to one featureless white rectangle and read as a
   broken image. invert() alone keeps the box and its type distinct. */
img[src*="/brands/"] {
  filter: invert(1) grayscale(1) contrast(0.92) opacity(0.72);
  transition: filter 0.25s ease;
}
img[src*="/brands/"]:hover { filter: invert(1) grayscale(1) contrast(0.92) opacity(1); }

/* The site logo must never be filtered. */
.navbar-brand img,
.site-header img { filter: none !important; }

/* --------------------------------------------------- big section washes --
   These wrappers paint multi-stop gradients that include near-white stops,
   which showed through as a pale diagonal band with unreadable dark headings
   sitting on top. Replace the whole image with a dark neon wash. */
.duepe-home-hero,
.duepe-flow-section,
.duepe-growth-section,
.duepe-community-section,
.duepe-talk-section,
.duepe-services-section,
/* Scoped to <section>. A bare [class*="-hero"] also matches .career-hero-title,
   .career-hero-copy, .career-hero-media and friends, so every one of those text
   elements painted its OWN copy of this wash - showing up as hard-edged tinted
   rectangles behind the headline and paragraph. Same trap as [class*="brand"]
   matching .navbar-brand earlier. */
section[class*="-hero"],
section[class*="-section"] {
  background-image:
    radial-gradient(38rem 26rem at 8% 6%, rgba(0, 229, 255, 0.08), transparent 62%),
    radial-gradient(34rem 24rem at 92% 12%, rgba(255, 47, 208, 0.07), transparent 62%) !important;
  background-color: transparent !important;
}

/* The angled section edges copy their parent's background; keep them dark. */
.angled::before,
.angled::after {
  background: var(--neon-bg) !important;
}

/* ------------------------------------------------------- specific fixes -- */
/* Role avatars fill with a per-card --accent and set white text. Several of
   those accents are bright (amber, coral), so white-on-accent fails contrast.
   A tinted chip with a glow reads better on dark and stays legible. */
.career-role-avatar {
  background: rgba(0, 229, 255, 0.12) !important;
  border: 1px solid rgba(0, 229, 255, 0.35);
  color: var(--neon-cyan) !important;
  box-shadow: var(--glow-cyan);
}

/* Quote marks and step numbers are white-on-white once the card goes dark. */
.community-quote-mark,
.flow-number,
.growth-pillar-icon,
.growth-chip-list li {
  background: rgba(0, 229, 255, 0.10) !important;
  color: var(--neon-cyan) !important;
  border-color: var(--neon-line) !important;
}

/* --------------------------------------------------------- reduce motion -- */
@media (prefers-reduced-motion: reduce) {
  .card, [class*="-card"], .btn { transition: none !important; }
}
