/* ════════════════════════════════════════════════════════════════
   VIRALL STANCE — GLOBAL VISIBILITY + HOVER FIX SYSTEM
   Apply LAST on all space-theme pages (after any other stylesheets).
   Covers: text contrast · heading shadows · hero overlay ·
           glass/card opacity · hover state integrity · mobile readability.
════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   GLOBAL CSS — DESIGN TOKEN OVERRIDES
────────────────────────────────────────────────────────────── */

:root {
  /* Muted text: was rgba(165,216,255,0.55) — 55% on dark bg fails WCAG AA.
     Lifted to 0.82 → comfortable reading without washing out the palette. */
  --muted:       rgba(200,228,255,0.82);
  /* Base body text: fractionally brighter than #e8f0ff for star interference */
  --text:        #f0f6ff;
  /* Borders: slightly more visible so glass edges read cleanly */
  --border:      rgba(79,142,255,0.20);
}

/* ──────────────────────────────────────────────────────────────
   GLOBAL CSS — FONT RENDERING
────────────────────────────────────────────────────────────── */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ──────────────────────────────────────────────────────────────
   GLOBAL CSS — HEADING TEXT SHADOWS
   Adds a translucent dark drop shadow so headings read over any
   animated background (stars, nebula blobs, canvas starfield).
────────────────────────────────────────────────────────────── */

/* ALL HEADINGS — electric blue → teal glow + depth shadow */
h1, h2, h3, h4,
.section-title,
.hero-h1,
.svc-name,
.why-cp h4,
.audit-left h4,
.testi-name,
.f-col h5 {
  text-shadow:
    0 0 8px  rgba(0,170,255,0.85),
    0 0 22px rgba(15,95,255,0.65),
    0 0 50px rgba(51,223,245,0.38),
    0 2px 6px rgba(0,0,0,0.75) !important;
}

/* ── GRADIENT TEXT — BRIGHT VIBRANT PALETTE ───────────────────
   The original gradient #7ee8fa → #d9a7ff was too muted.
   Upgraded to electric cyan → vivid violet for strong visibility.
   IMPORTANT: Never put filter: drop-shadow on background-clip:text
   elements — it creates a compositing conflict and kills the gradient.
   Glow is applied on the PARENT heading instead (see below).
────────────────────────────────────────────────────────────── */

/* ── GRADIENT FILL — electric blue → azure → light teal ────── */
.g-title,
.hero-h1 .word-swap,
.nav-logo,
.f-logo,
.stat-num,
.am-val,
.why-n,
.why-big-num,
.res-val {
  background: linear-gradient(95deg, #0f5fff 0%, #00aaff 52%, #33dff5 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #00aaff;       /* solid fallback if clip is unsupported */
  filter: none !important;
  /* Stronger glow for gradient text — overrides the heading base rule above */
  text-shadow:
    0 0 5px  rgba(0,200,255,1.00),
    0 0 14px rgba(0,170,255,0.95),
    0 0 30px rgba(15,95,255,0.80),
    0 0 55px rgba(51,223,245,0.55),
    0 0 90px rgba(0,140,255,0.30) !important;
}

/* ── OUTER GLOW — on the PARENT heading (safe for drop-shadow) ─
   Stronger + colour-matched to the gradient for a full halo.
────────────────────────────────────────────────────────────── */
.section-title,
.hero-h1 {
  filter:
    drop-shadow(0 0 10px rgba(0,170,255,0.65))
    drop-shadow(0 0 28px rgba(15,95,255,0.50))
    drop-shadow(0 0 60px rgba(51,223,245,0.30))
    drop-shadow(0 2px 5px rgba(0,0,0,0.65));
}

/* Nav logo */
.nav-logo {
  filter: drop-shadow(0 0 12px rgba(0,170,255,0.70)) !important;
}

/* Stat & card numbers — glow only via text-shadow (set above) */
.stat-num,
.am-val,
.why-big-num,
.res-val {
  filter: none !important;
}

/* Quote mark in testimonials: glow via parent filter on card heading area */
.testi-qm {
  opacity: 0.75 !important;
  background: linear-gradient(95deg,#0f5fff,#33dff5) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
}

/* ──────────────────────────────────────────────────────────────
   GLOBAL CSS — BODY COPY CONTRAST LIFT
   Applies to every paragraph-level element that used --muted.
────────────────────────────────────────────────────────────── */

p,
li,
.hero-sub,
.section-sub,
.svc-desc,
.res-desc,
.res-lbl,
.res-client,
.testi-text,
.testi-role,
.about-copy p,
.why-cp p,
.why-big-label,
.f-tag,
.stat-label,
.am-label,
.ticker-item,
.audit-left p,
.cta-trust {
  color: rgba(210,235,255,0.90) !important;
}

/* Hero subtitle: slightly brighter still — it sits directly over the globe glow */
.hero-sub {
  color: rgba(225,242,255,0.94) !important;
  text-shadow: 0 1px 12px rgba(0,0,0,0.60);
}

/* Section subtitle centred blocks */
.section-sub {
  color: rgba(210,235,255,0.88) !important;
}

/* Service card description */
.svc-desc {
  color: rgba(210,235,255,0.88) !important;
}

/* ──────────────────────────────────────────────────────────────
   GLOBAL CSS — SPACE BACKGROUND CONTROL
   Additive overlays that calm star/nebula brightness without
   removing any existing animated elements.
────────────────────────────────────────────────────────────── */

/* Global edge vignette — darkens only the outer rim where nebula
   blobs are brightest; centre (content area) remains unaffected */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse 110% 90% at 50% 50%,
    transparent 38%,
    rgba(6,9,18,0.30) 78%,
    rgba(6,9,18,0.55) 100%
  );
}

/* Hero directional overlay — left column gets a dark gradient shield
   so H1/subtitle text is always readable over the rotating globe */
#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(6,9,18,0.75) 0%,
    rgba(6,9,18,0.52) 35%,
    rgba(6,9,18,0.18) 55%,
    transparent       68%
  );
}

/* ──────────────────────────────────────────────────────────────
   COMPONENT FIXES — GLASS & CARD UI
   Raise background opacity from ~5% to ~10% so content inside
   cards is always legible regardless of what's behind them.
────────────────────────────────────────────────────────────── */

.glass {
  background: linear-gradient(
    135deg,
    rgba(0,212,255,0.10) 0%,
    rgba(123,94,248,0.10) 100%
  ) !important;
  border-color: rgba(79,142,255,0.24) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* Service cards */
.svc-card {
  background: linear-gradient(
    135deg,
    rgba(0,212,255,0.08) 0%,
    rgba(123,94,248,0.08) 100%
  ) !important;
  border: 1px solid rgba(79,142,255,0.20) !important;
}

/* About + Why feature cards */
.about-card,
.why-card {
  background: linear-gradient(
    135deg,
    rgba(0,212,255,0.08) 0%,
    rgba(123,94,248,0.09) 100%
  ) !important;
  border: 1px solid rgba(79,142,255,0.20) !important;
}

/* Result + Testimonial cards */
.res-card,
.testi-card {
  background: linear-gradient(
    135deg,
    rgba(0,212,255,0.07) 0%,
    rgba(123,94,248,0.08) 100%
  ) !important;
  border: 1px solid rgba(79,142,255,0.18) !important;
}

/* About metrics mini-cells */
.am {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(79,142,255,0.16) !important;
}

/* Pillar rows */
.pr {
  color: var(--text) !important;
}

/* Audit banner */
.audit-banner {
  background: linear-gradient(
    135deg,
    rgba(0,212,255,0.07),
    rgba(123,94,248,0.07)
  ) !important;
}

/* Delhi label card */
#delhi-label .dl-card {
  background: rgba(2,14,36,0.90) !important;
}

/* ──────────────────────────────────────────────────────────────
   COMPONENT FIXES — HERO SECTION
────────────────────────────────────────────────────────────── */

/* Ensure hero H1 white text always has depth shadow */
.hero-h1 {
  text-shadow: 0 2px 28px rgba(0,0,0,0.70), 0 1px 6px rgba(0,0,0,0.55) !important;
}

/* Hero tag badge: lift opacity */
.hero-tag {
  background: rgba(0,212,255,0.12) !important;
  border-color: rgba(0,212,255,0.32) !important;
}

/* Hero stats: ensure muted labels read */
.stat-label {
  color: rgba(200,228,255,0.88) !important;
}

/* ──────────────────────────────────────────────────────────────
   COMPONENT FIXES — SECTION LABELS & BADGES
────────────────────────────────────────────────────────────── */

.label {
  opacity: 1 !important;
  color: var(--cyan) !important;
}

/* Service card number (was opacity: 0.7) */
.svc-num {
  opacity: 0.92 !important;
  color: var(--cyan) !important;
}

/* Testimonial quote mark (was opacity: 0.4 — almost invisible) */
.testi-qm {
  opacity: 0.70 !important;
}

/* Testimonial stars */
.testi-stars {
  color: #00d4ff !important;
  opacity: 1 !important;
}

/* ──────────────────────────────────────────────────────────────
   COMPONENT FIXES — HOVER STATES (VERY IMPORTANT)
   Rule: on hover, contrast must increase or stay equal.
   Never drop opacity on text. Never use a lighter color on text.
────────────────────────────────────────────────────────────── */

/* ── Buttons ── */

/* Primary button: text stays #fff, no opacity drop */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  color: #fff !important;
  opacity: 1 !important;
}

/* Ghost button hover: go from muted to bright cyan — contrast increase */
.btn-ghost:hover,
.btn-ghost:focus {
  color: #00d4ff !important;
  opacity: 1 !important;
  background: rgba(0,212,255,0.10) !important;
  border-color: rgba(0,212,255,0.48) !important;
  text-shadow: 0 0 18px rgba(0,212,255,0.50);
}

/* Sticky CTA */
.s-cta,
.s-cta:hover {
  color: #fff !important;
  opacity: 1 !important;
}

/* ── Navigation links ── */

.nav-links a {
  color: rgba(200,228,255,0.80) !important;
}
.nav-links a:hover {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 0 18px rgba(0,212,255,0.55);
}
.nav-links a.active {
  color: var(--cyan) !important;
  opacity: 1 !important;
}

/* ── Mobile nav — was opacity: 0.7 on gradient text ── */

.mob-nav a {
  opacity: 1 !important;
  filter: drop-shadow(0 2px 12px rgba(0,212,255,0.35));
}
.mob-nav a:hover {
  opacity: 1 !important;
  filter: drop-shadow(0 2px 28px rgba(0,212,255,0.70));
}

/* ── Service cards ── */

/* Background on hover: slightly more opaque (contrast increase) */
.svc-card:hover {
  background: linear-gradient(
    135deg,
    rgba(0,212,255,0.14) 0%,
    rgba(123,94,248,0.14) 100%
  ) !important;
}

/* Service name: gradient text on hover; solid fallback ensures it's never invisible */
.svc-card:hover .svc-name {
  color: #7ee8fa !important;                /* solid fallback */
  background: linear-gradient(90deg,#7ee8fa,#d9a7ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Description, number, tags on hover: never fade or drop opacity */
.svc-card:hover .svc-desc {
  color: rgba(215,238,255,0.94) !important;
  opacity: 1 !important;
}
.svc-card:hover .svc-num {
  opacity: 1 !important;
  color: var(--cyan) !important;
}
.svc-card:hover .tag {
  color: rgba(0,212,255,0.96) !important;
  opacity: 1 !important;
  border-color: rgba(0,212,255,0.30) !important;
}

/* ── Result cards ── */

.res-card:hover {
  background: linear-gradient(
    135deg,
    rgba(0,212,255,0.11) 0%,
    rgba(123,94,248,0.12) 100%
  ) !important;
}
.res-card:hover .res-desc,
.res-card:hover .res-lbl,
.res-card:hover .res-client {
  color: rgba(210,235,255,0.92) !important;
  opacity: 1 !important;
}

/* ── Testimonial cards ── */

.testi-card:hover {
  background: linear-gradient(
    135deg,
    rgba(0,212,255,0.11) 0%,
    rgba(123,94,248,0.11) 100%
  ) !important;
}
.testi-card:hover .testi-text,
.testi-card:hover .testi-role {
  color: rgba(210,235,255,0.92) !important;
  opacity: 1 !important;
}
.testi-card:hover .testi-name {
  color: #fff !important;
}

/* ── About metric cells ── */

.am:hover {
  background: rgba(0,212,255,0.08) !important;
  border-color: rgba(0,212,255,0.28) !important;
}
.am:hover .am-val {
  /* gradient-clip element — glow via parent filter, not here */
  filter: none !important;
}
.am:hover .am-label {
  color: rgba(210,235,255,0.94) !important;
  opacity: 1 !important;
}

/* ── Why section items ── */

.why-item:hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(79,142,255,0.22) !important;
}
.why-item:hover .why-cp h4 {
  color: #ffffff !important;
  text-shadow: 0 0 16px rgba(0,212,255,0.30);
}
.why-item:hover .why-cp p {
  color: rgba(210,235,255,0.92) !important;
  opacity: 1 !important;
}

/* ── Pillar rows ── */

.pr:hover {
  color: var(--text) !important;
}

/* ── Footer links ── */

.f-links a {
  color: rgba(200,228,255,0.80) !important;
}
.f-links a:hover {
  color: var(--cyan) !important;
  opacity: 1 !important;
}

.f-bot a:hover {
  color: var(--cyan) !important;
  opacity: 1 !important;
}

/* Social buttons: opacity never drops on hover */
.sb {
  color: rgba(200,228,255,0.75) !important;
}
.sb:hover {
  opacity: 1 !important;
}

/* ── Progress bar labels ── */

.prog-head {
  color: rgba(210,235,255,0.90) !important;
}
.prog-val {
  color: var(--cyan) !important;
}

/* ── Why badge ── */

.why-badge {
  color: #c4aaff !important;
}

/* ── Neon border card hover — ensure text stays readable ── */

.nb:hover > * {
  position: relative;
  z-index: 1;
}

/* ──────────────────────────────────────────────────────────────
   COMPONENT FIXES — TICKER
────────────────────────────────────────────────────────────── */

.ticker-item {
  color: rgba(200,228,255,0.82) !important;
}

/* ──────────────────────────────────────────────────────────────
   COMPONENT FIXES — CTA SECTION
────────────────────────────────────────────────────────────── */

.cta-trust {
  color: rgba(200,228,255,0.82) !important;
}
.cta-box .section-title {
  text-shadow: 0 2px 28px rgba(0,0,0,0.65), 0 1px 6px rgba(0,0,0,0.50) !important;
}

/* ──────────────────────────────────────────────────────────────
   MOBILE RESPONSIVENESS
   On mobile: remove heavy glows (GPU cost, contrast loss),
   bump all text to near-full opacity, strengthen hero overlay.
────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* Strip heavy text-shadows on plain text — hurt legibility on small OLED.
     Gradient text elements (.g-title etc.) keep their glow via the
     more specific rule below (declared later → wins the cascade). */
  * {
    text-shadow: none !important;
  }

  /* Restore glow for all headings on mobile — reduced intensity */
  h1, h2, h3, h4,
  .section-title,
  .hero-h1,
  .svc-name,
  .why-cp h4,
  .audit-left h4,
  .testi-name,
  .f-col h5 {
    text-shadow:
      0 0 6px  rgba(0,170,255,0.70),
      0 0 16px rgba(15,95,255,0.50),
      0 2px 6px rgba(0,0,0,0.80) !important;
  }

  /* Hero: full-width so left gradient covers the full viewport */
  #hero::after {
    background: linear-gradient(
      180deg,
      rgba(6,9,18,0.55) 0%,
      rgba(6,9,18,0.35) 60%,
      transparent 100%
    ) !important;
  }

  /* Boost all muted text to near-full opacity on mobile */
  p,
  li,
  .hero-sub,
  .section-sub,
  .svc-desc,
  .res-desc,
  .testi-text,
  .about-copy p,
  .why-cp p,
  .f-tag,
  .stat-label,
  .am-label,
  .ticker-item {
    color: rgba(225,242,255,0.96) !important;
  }

  /* Gradient-clip elements: filter stays none; glow comes from text-shadow */
  .g-title,
  .stat-num,
  .am-val,
  .why-big-num,
  .res-val {
    filter: none !important;
    /* Lighter glow on mobile — preserves readability on OLED */
    text-shadow:
      0 0 5px  rgba(0,170,255,0.90),
      0 0 14px rgba(15,95,255,0.65),
      0 0 28px rgba(51,223,245,0.40) !important;
  }

  /* Parent outer glow: reduced for mobile */
  .section-title,
  .hero-h1 {
    filter:
      drop-shadow(0 0 8px rgba(0,170,255,0.42))
      drop-shadow(0 0 22px rgba(15,95,255,0.28))
      drop-shadow(0 2px 5px rgba(0,0,0,0.70)) !important;
  }
  .nav-logo {
    filter: drop-shadow(0 0 10px rgba(0,170,255,0.50)) !important;
  }

  /* Reduce backdrop blur on mobile for performance */
  .glass,
  .svc-card,
  .about-card,
  .why-card,
  .res-card,
  .testi-card {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  /* Increase body text size floor for readability */
  p, li, .svc-desc, .about-copy p, .why-cp p {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }

  .hero-sub {
    font-size: 15px !important;
    line-height: 1.80 !important;
    color: rgba(225,242,255,0.96) !important;
  }

  /* Navigation tap targets */
  .mob-nav a {
    min-height: 44px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Footer links tap targets */
  .f-links a {
    min-height: 40px;
    display: flex !important;
    align-items: center !important;
  }
}

@media (max-width: 480px) {

  .section-sub,
  .res-desc,
  .testi-text {
    font-size: 14px !important;
    line-height: 1.72 !important;
  }

  /* Tighten section padding — more content visible above fold */
  section {
    padding: 72px 0 !important;
  }

  /* Reduce mob-nav tap target height on very small phones */
  .mob-nav a {
    min-height: 36px !important;
  }
}