/* ═══════════════════════════════════════════════════════
   SOCIAL STARDOM — PRO ENHANCEMENT LAYER
   Johny Ivy Design Studio
   GSAP + ScrollTrigger Powered Visual System
   All effects layer on top of existing styles
════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Permanent+Marker&family=Space+Mono:wght@400;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ── CSS CUSTOM PROPERTIES ─────────────────────────── */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.23, 1, 0.32, 1);
  --glow-orange: 0 0 30px rgba(255,153,51,0.4), 0 0 80px rgba(255,153,51,0.15);
  --glow-cyan: 0 0 30px rgba(0,229,255,0.3);
  --glow-yellow: 0 0 30px rgba(255,210,63,0.3);
}

/* ── SCROLL PROGRESS BAR ───────────────────────────── */
#ss-scroll-bar {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 3px;
  background: linear-gradient(90deg, #FF9933, #ffd23f, #FF9933);
  background-size: 200% 100%;
  animation: bar-shift 2s linear infinite;
  z-index: 999999;
  pointer-events: none;
  transform-origin: left center;
}
@keyframes bar-shift {
  0% { background-position: 0% 50% }
  100% { background-position: 200% 50% }
}

/* ── GLOBAL SELECTION ───────────────────────────────── */
::selection { background: #FF9933; color: #000; }

/* ── SMOOTH FONT RENDERING ──────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── HERO ENHANCEMENTS ─────────────────────────────── */
.hero {
  overflow: hidden !important;
}
.hero-inner,
.hero > .hero-inner {
  position: relative;
  z-index: 2;
}

/* Aurora orbs - injected by JS */
.ss-aurora {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* Particle canvas */
#ss-hero-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── NAV — UNIVERSAL IMPROVEMENTS ──────────────────── */
.ss-nav,
.top-nav,
nav.nav,
.nav {
  transition: all 0.4s var(--ease-out-expo) !important;
}
.ss-nav::after,
.top-nav::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,153,51,0.3), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}
.ss-nav.scrolled::after,
.top-nav.scrolled::after {
  opacity: 1;
}

/* ── TYPOGRAPHY SCALE IMPROVEMENTS ─────────────────── */
.stencil {
  letter-spacing: -0.01em !important;
  line-height: 0.9 !important;
}
.graffiti {
  line-height: 1.1 !important;
}
.label {
  font-size: 0.65rem !important;
  letter-spacing: 0.22em !important;
}

/* ── HERO H1 SCALE UP ───────────────────────────────── */
.hero-h1 {
  font-size: clamp(3.8rem, 16vw, 11rem) !important;
}
.hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem) !important;
  max-width: 540px !important;
}

/* ── TICKER IMPROVEMENT ─────────────────────────────── */
.ticker-wrap {
  padding: 0.9rem 0 !important;
  background: rgba(255,153,51,0.03) !important;
  border-top: 1px solid rgba(255,153,51,0.12) !important;
  border-bottom: 1px solid rgba(255,153,51,0.12) !important;
}
.ticker-item {
  font-size: 0.9rem !important;
  color: rgba(255,255,255,0.3) !important;
  padding: 0 2rem !important;
}
.ticker-item span {
  color: #FF9933 !important;
}

/* ── SECTION IMPROVEMENTS ───────────────────────────── */
.sec {
  position: relative !important;
  overflow: hidden;
}

/* Section accent line (top) */
.ss-sec-line {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,153,51,0.2) 30%, rgba(255,153,51,0.2) 70%, transparent 100%);
  pointer-events: none;
}

/* Big decorative background number */
.ss-sec-num {
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(6rem, 15vw, 14rem);
  color: rgba(255,255,255,0.022);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  letter-spacing: -0.02em;
}

/* ── SERVICE CARDS — DRAMATIC HOVER ─────────────────── */
.svc-card {
  transition: all 0.45s var(--ease-smooth) !important;
  border-radius: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
.svc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,153,51,0.07) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.svc-card:hover::after {
  opacity: 1;
}
.svc-card:hover {
  transform: translateX(8px) !important;
  box-shadow: -4px 0 30px rgba(255,153,51,0.12), inset 4px 0 0 rgba(255,153,51,0.5) !important;
  background: rgba(255,255,255,0.05) !important;
}
.svc-card h4 {
  font-size: 0.85rem !important;
  letter-spacing: 0.14em !important;
  color: rgba(255,255,255,0.9) !important;
}
.svc-card p {
  font-size: 0.92rem !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.5) !important;
}
.svc-num {
  font-size: 2.5rem !important;
  color: rgba(255,255,255,0.05) !important;
}

/* ── STATS SECTION ──────────────────────────────────── */
.stats-row {
  position: relative;
  z-index: 1;
}
.stat-cell {
  padding: 2.2rem 1.2rem !important;
  transition: background 0.3s;
  position: relative;
  overflow: hidden;
}
.stat-cell::before {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 2px;
  background: var(--cell-color, #FF9933);
  transition: width 0.5s var(--ease-out-expo);
}
.stat-cell:hover::before {
  width: 60%;
}
.stat-cell:hover {
  background: rgba(255,255,255,0.02);
}
.stat-num {
  font-size: clamp(2.8rem, 6vw, 4.5rem) !important;
  display: block !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}
.stat-num.r { color: #FF9933 !important; }
.stat-num.y { color: #ffd23f !important; }
.stat-num.p { color: #ff6b9d !important; }
.stat-num.c { color: #00e5ff !important; }
.stat-lbl {
  font-size: 0.56rem !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.3) !important;
  margin-top: 0.6rem !important;
  line-height: 1.5 !important;
}

/* ── CASE STUDY CARDS ───────────────────────────────── */
.cases-grid {
  margin-top: 2rem !important;
}
.case-card {
  transition: all 0.4s var(--ease-smooth) !important;
  border-radius: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 2rem !important;
}
.case-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--case-color, #FF9933), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}
.case-card:hover::before {
  opacity: 1;
}
.case-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 60px rgba(255,153,51,0.15) !important;
  border-color: rgba(255,153,51,0.25) !important;
  background: rgba(255,255,255,0.04) !important;
}
.case-metric {
  font-size: clamp(2.4rem, 5vw, 3.5rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  margin-bottom: 0.4rem !important;
  background: linear-gradient(135deg, currentColor, rgba(255,255,255,0.7));
  -webkit-background-clip: text;
  background-clip: text;
}
.case-tag {
  font-size: 0.6rem !important;
  letter-spacing: 0.18em !important;
}
.case-body {
  font-size: 0.88rem !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.38) !important;
}
.case-link {
  font-size: 0.6rem !important;
  letter-spacing: 0.12em !important;
}

/* Horizontal scroll wrapper for case studies */
.ss-h-scroll-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  margin-top: 2rem;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,153,51,0.3) transparent;
}
.ss-h-scroll-wrap:active { cursor: grabbing; }
.ss-h-scroll-wrap::-webkit-scrollbar { height: 3px; }
.ss-h-scroll-wrap::-webkit-scrollbar-track { background: transparent; }
.ss-h-scroll-wrap::-webkit-scrollbar-thumb { background: rgba(255,153,51,0.3); border-radius: 2px; }

.ss-h-scroll-track {
  display: flex;
  gap: 1.2rem;
  width: max-content;
  padding: 0.5rem 0;
}
.ss-h-scroll-track .case-card {
  flex-shrink: 0;
  width: 320px;
  scroll-snap-align: start;
}

/* Scroll arrows */
.ss-scroll-arrows {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  justify-content: flex-end;
}
.ss-scroll-arrow {
  width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s;
  font-size: 1.1rem;
  font-family: inherit;
}
.ss-scroll-arrow:hover {
  border-color: #FF9933;
  color: #FF9933;
  background: rgba(255,153,51,0.06);
  box-shadow: var(--glow-orange);
}

/* ── INDUSTRY CARDS ─────────────────────────────────── */
.ind-card {
  transition: all 0.4s var(--ease-smooth) !important;
  position: relative !important;
  overflow: hidden !important;
}
.ind-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 0;
  background: #FF9933;
  transition: height 0.4s var(--ease-out-expo);
}
.ind-card:hover::after {
  height: 100%;
}
.ind-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 50px rgba(255,153,51,0.12) !important;
  border-color: rgba(255,153,51,0.2) !important;
  background: rgba(255,153,51,0.04) !important;
}
.ind-card h4 {
  font-size: 1.35rem !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 0.6rem !important;
  transition: color 0.3s;
}
.ind-card:hover h4 {
  color: #FF9933 !important;
}
.ind-card p {
  font-size: 0.86rem !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.35) !important;
}

/* ── HOW WE WORK STEPS ──────────────────────────────── */
.hww-grid::before {
  background: linear-gradient(90deg, transparent, rgba(255,153,51,0.4), transparent) !important;
  height: 1px !important;
  top: 22px !important;
}
.hww-num {
  width: 48px !important; height: 48px !important;
  font-size: 0.7rem !important;
  background: rgba(255,153,51,0.1) !important;
  border-color: rgba(255,153,51,0.5) !important;
  box-shadow: 0 0 20px rgba(255,153,51,0.2);
  transition: all 0.3s;
}
.hww-step:hover .hww-num {
  background: #FF9933 !important;
  color: #000 !important;
  box-shadow: var(--glow-orange);
}
.hww-icon {
  font-size: 1.8rem !important;
  filter: drop-shadow(0 0 8px rgba(255,153,51,0.4));
  transition: transform 0.3s var(--ease-spring);
}
.hww-step:hover .hww-icon {
  transform: scale(1.2) rotate(5deg);
}
.hww-step h4 {
  font-size: 1.1rem !important;
  letter-spacing: 0.06em !important;
}
.hww-step p {
  font-size: 0.74rem !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.4) !important;
}

/* ── FUNNEL CARDS ───────────────────────────────────── */
.funnel-col {
  transition: all 0.4s var(--ease-smooth) !important;
  position: relative !important;
}
.funnel-col:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3) !important;
}
.funnel-col ul li {
  font-size: 0.82rem !important;
  color: rgba(255,255,255,0.48) !important;
  padding: 0.4rem 0 !important;
  border-bottom-color: rgba(255,255,255,0.05) !important;
  transition: color 0.2s;
}
.funnel-col ul li:hover {
  color: rgba(255,255,255,0.7) !important;
}
.funnel-col h4 {
  font-size: 1.4rem !important;
}

/* ── ABM STRIP ──────────────────────────────────────── */
.abm-strip {
  transition: all 0.4s !important;
}
.abm-strip:hover {
  background: linear-gradient(135deg, rgba(255,153,51,0.09), rgba(255,210,63,0.06)) !important;
  border-color: rgba(255,153,51,0.35) !important;
}
.abm-tag {
  transition: all 0.25s !important;
}
.abm-tag:hover {
  background: rgba(255,153,51,0.15) !important;
  color: #FF9933 !important;
}

/* ── BHARAT SECTION ─────────────────────────────────── */
.bharat-stat {
  transition: all 0.35s var(--ease-smooth) !important;
}
.bharat-stat:hover {
  background: rgba(255,255,255,0.04) !important;
  transform: translateX(4px);
  border-left-color: rgba(255,153,51,0.7) !important;
}
.b-num {
  font-size: 2.2rem !important;
  letter-spacing: -0.02em !important;
}
.bharat-lang-pill {
  transition: all 0.25s !important;
}
.bharat-lang-pill:hover {
  background: rgba(255,153,51,0.2) !important;
  color: #FF9933 !important;
  border-color: rgba(255,153,51,0.5) !important;
}

/* ── MANIFESTO SECTION ─────────────────────────────── */
.big-q {
  font-size: clamp(1.4rem, 4vw, 2.6rem) !important;
  line-height: 1.4 !important;
  color: rgba(255,255,255,0.92) !important;
}
.manifesto-attr {
  font-size: 0.65rem !important;
  letter-spacing: 0.2em !important;
}

/* ── CONTACT FORM ───────────────────────────────────── */
.contact-title {
  font-size: clamp(2.5rem, 8vw, 5.5rem) !important;
}
.ff input,
.ff select,
.ff textarea {
  background: rgba(255,255,255,0.03) !important;
  border: none !important;
  border-bottom: 2px solid rgba(255,255,255,0.1) !important;
  padding: 1rem 0.75rem 0.75rem !important;
  border-radius: 0 !important;
  transition: all 0.3s !important;
}
.ff input:focus,
.ff select:focus,
.ff textarea:focus {
  border-bottom-color: #FF9933 !important;
  background: rgba(255,153,51,0.03) !important;
  outline: none !important;
}
.ff label {
  font-size: 0.6rem !important;
  letter-spacing: 0.16em !important;
}
.submit-btn {
  letter-spacing: 0.15em !important;
  transition: all 0.3s var(--ease-smooth) !important;
}
.submit-btn:hover {
  box-shadow: 0 0 60px rgba(255,153,51,0.4) !important;
}

/* ── BUTTONS — GLOBAL ENHANCEMENT ──────────────────── */
.btn-red,
.btn-primary,
.ss-nav-cta,
.nav-cta-btn,
.btn-full.btn-red {
  letter-spacing: 0.12em !important;
  transition: all 0.3s var(--ease-smooth) !important;
  position: relative !important;
  overflow: hidden !important;
}
.btn-red:hover,
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 40px rgba(255,153,51,0.4) !important;
}
.btn-red:active,
.btn-primary:active {
  transform: translateY(0px) !important;
}
.btn-outline:hover {
  transform: translateY(-2px) !important;
}

/* Ripple effect on click */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  width: 0; height: 0;
  transform: translate(-50%, -50%);
  animation: btn-ripple 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes btn-ripple {
  to {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

/* ── URGENCY STRIP ENHANCEMENT ─────────────────────── */
.urgency-strip {
  position: relative !important;
  overflow: hidden !important;
}
.urgency-strip::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  animation: strip-sweep 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes strip-sweep {
  0% { left: -60%; }
  100% { left: 100%; }
}
.urgency-strip p {
  font-size: clamp(0.95rem, 2.5vw, 1.3rem) !important;
  font-weight: 400 !important;
}

/* ── FINAL CTA SECTION ─────────────────────────────── */
.final-cta h2 {
  font-size: clamp(2.2rem, 6vw, 4.5rem) !important;
}

/* ── FOOTER ENHANCEMENT ─────────────────────────────── */
.ss-footer,
footer {
  position: relative;
  overflow: hidden;
}
.ss-footer::before,
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,153,51,0.2), transparent);
  pointer-events: none;
}
.ss-foot-col a,
.foot-col a {
  transition: all 0.2s !important;
}
.ss-foot-col a:hover,
.foot-col a:hover {
  color: #FF9933 !important;
  padding-left: 6px !important;
}

/* ── LANGUAGE SELECTOR ENHANCEMENT ─────────────────── */
.ss-lang-btn {
  animation: lang-pulse 3s ease-in-out infinite !important;
}
@keyframes lang-pulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(255,153,51,0.35); }
  50% { box-shadow: 0 8px 30px rgba(255,153,51,0.55); }
}

/* ── WAVE DIVIDERS ──────────────────────────────────── */
.ss-wave-divider {
  position: relative;
  height: 50px;
  overflow: hidden;
  pointer-events: none;
}
.ss-wave-divider svg {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 100%;
}
.ss-wave-divider.flip {
  transform: rotate(180deg);
}

/* ── GSAP INITIAL STATES ────────────────────────────── */
.gsap-hidden {
  opacity: 0 !important;
  visibility: hidden;
}

/* ── ANIMATED GRADIENT BG ───────────────────────────── */
.ss-morph-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(255,153,51,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(0,229,255,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 60% 20%, rgba(255,210,63,0.05) 0%, transparent 60%);
  animation: morph-shift 20s ease-in-out infinite alternate;
}
@keyframes morph-shift {
  0% {
    background:
      radial-gradient(ellipse 60% 40% at 20% 30%, rgba(255,153,51,0.07) 0%, transparent 60%),
      radial-gradient(ellipse 50% 60% at 80% 70%, rgba(0,229,255,0.04) 0%, transparent 60%),
      radial-gradient(ellipse 40% 50% at 60% 20%, rgba(255,210,63,0.05) 0%, transparent 60%);
  }
  50% {
    background:
      radial-gradient(ellipse 50% 60% at 50% 50%, rgba(255,153,51,0.05) 0%, transparent 60%),
      radial-gradient(ellipse 60% 40% at 20% 80%, rgba(0,229,255,0.05) 0%, transparent 60%),
      radial-gradient(ellipse 50% 50% at 80% 20%, rgba(255,153,51,0.06) 0%, transparent 60%);
  }
  100% {
    background:
      radial-gradient(ellipse 70% 50% at 80% 40%, rgba(255,210,63,0.06) 0%, transparent 60%),
      radial-gradient(ellipse 40% 70% at 30% 60%, rgba(255,153,51,0.08) 0%, transparent 60%),
      radial-gradient(ellipse 50% 40% at 60% 80%, rgba(0,229,255,0.03) 0%, transparent 60%);
  }
}

/* ── HERO KICKER ENHANCEMENT ────────────────────────── */
.hero-kicker {
  font-size: 0.7rem !important;
  letter-spacing: 0.3em !important;
}
.hero-kicker::before {
  width: 32px !important;
  height: 2px !important;
}
.hero-note {
  font-size: clamp(0.9rem, 1.8vw, 1.2rem) !important;
}

/* ── PRELOADER IMPROVEMENTS ─────────────────────────── */
#preloader {
  background: #040404 !important;
}
.stomp-word.w1 {
  font-size: clamp(4.5rem, 22vw, 14rem) !important;
}

/* ── MOBILE IMPROVEMENTS ────────────────────────────── */
@media (max-width: 768px) {
  .ss-h-scroll-track .case-card {
    width: 280px !important;
  }
  .build-heading {
    font-size: clamp(2.2rem, 8vw, 4rem) !important;
  }
  .hero-h1 {
    font-size: clamp(3.2rem, 14vw, 7rem) !important;
  }
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stat-cell:nth-child(2) { border-right: none !important; }
  .stat-cell:nth-child(3) { border-top: 1px solid rgba(255,255,255,0.07) !important; }
}
@media (max-width: 480px) {
  .abm-strip {
    grid-template-columns: 1fr !important;
  }
}

/* ── CODEPEN EMBED STYLES ───────────────────────────── */
.ss-codepen-section {
  padding: clamp(3rem, 8vw, 5rem) clamp(1.25rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
}
.ss-codepen-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* ── PAGE HERO ENHANCEMENTS (non-homepage) ──────────── */
.hero-kicker::before,
.hero-kicker::after {
  transition: width 0.5s var(--ease-out-expo);
}
.ss-page-hero {
  min-height: 55vh;
  display: flex;
  align-items: center;
  padding-top: 7rem;
  position: relative;
  overflow: hidden;
}
.ss-page-hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 9vw, 7rem);
  letter-spacing: -0.01em;
  line-height: 0.9;
  overflow: hidden;
}

/* ── CUSTOM CURSOR ─────────────────────────────────── */
.ss-cursor {
  position: fixed;
  width: 12px; height: 12px;
  background: #FF9933;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999998;
  transform: translate(-50%, -50%);
  transition: transform 0.15s, width 0.3s, height 0.3s, opacity 0.3s;
  mix-blend-mode: difference;
  will-change: transform;
}
.ss-cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1.5px solid rgba(255,153,51,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999997;
  transform: translate(-50%, -50%);
  transition: all 0.4s var(--ease-smooth);
  will-change: transform;
}
.ss-cursor.link-hover {
  width: 8px; height: 8px;
  background: #FF9933;
}
.ss-cursor-ring.link-hover {
  width: 60px; height: 60px;
  border-color: #FF9933;
  background: rgba(255,153,51,0.05);
}
@media (pointer: coarse) {
  .ss-cursor, .ss-cursor-ring { display: none !important; }
}

/* ── SCROLL INDICATOR ───────────────────────────────── */
.ss-scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
  opacity: 0.4;
  transition: opacity 0.3s;
}
.ss-scroll-indicator:hover { opacity: 0.8; }
.ss-scroll-indicator span {
  font-family: 'Space Mono', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.ss-scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(255,153,51,0.6), transparent);
  animation: scroll-line-drop 1.8s ease-in-out infinite;
}
@keyframes scroll-line-drop {
  0% { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ── SECTION TAG BADGES ─────────────────────────────── */
.ss-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(255,153,51,0.25);
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,153,51,0.7);
  background: rgba(255,153,51,0.06);
  margin-bottom: 1rem;
}
.ss-badge::before {
  content: '';
  width: 5px; height: 5px;
  background: #FF9933;
  border-radius: 50%;
  animation: badge-blink 2s ease-in-out infinite;
}
@keyframes badge-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── GLOW CARD EFFECT ────────────────────────────────── */
.svc-card:nth-child(1):hover { box-shadow: -4px 0 30px rgba(255,153,51,0.15), inset 0 0 30px rgba(255,153,51,0.05) !important; }
.svc-card:nth-child(2):hover { box-shadow: -4px 0 30px rgba(255,210,63,0.15), inset 0 0 30px rgba(255,210,63,0.05) !important; }
.svc-card:nth-child(3):hover { box-shadow: -4px 0 30px rgba(255,107,157,0.15), inset 0 0 30px rgba(255,107,157,0.05) !important; }
.svc-card:nth-child(4):hover { box-shadow: -4px 0 30px rgba(0,229,255,0.15), inset 0 0 30px rgba(0,229,255,0.05) !important; }

/* ── MANIFESTO ENHANCEMENT ──────────────────────────── */
.manifesto-bg {
  animation: manifesto-pulse 10s ease-in-out infinite alternate !important;
}
@keyframes manifesto-pulse {
  0% {
    background:
      radial-gradient(ellipse 80% 60% at 20% 50%, rgba(255,153,51,0.08) 0%, transparent 60%),
      radial-gradient(ellipse 60% 80% at 80% 30%, rgba(255,210,63,0.05) 0%, transparent 60%),
      linear-gradient(160deg, #0d0808 0%, #080808 50%, #080505 100%);
  }
  100% {
    background:
      radial-gradient(ellipse 70% 70% at 60% 60%, rgba(255,153,51,0.10) 0%, transparent 60%),
      radial-gradient(ellipse 80% 60% at 20% 70%, rgba(255,107,157,0.04) 0%, transparent 60%),
      linear-gradient(160deg, #0a0808 0%, #080808 50%, #050808 100%);
  }
}

/* ── GRID LINE DECORATIONS ──────────────────────────── */
.ss-grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at center, black 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 100% 100% at center, black 30%, transparent 80%);
}

/* ── TOOLTIP ENHANCEMENTS ─────────────────────────────── */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8,8,8,0.95);
  border: 1px solid rgba(255,153,51,0.3);
  color: rgba(255,255,255,0.8);
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.8rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
[data-tooltip]:hover::after {
  opacity: 1;
}

/* ── FORM TRUST BADGES ──────────────────────────────── */
.form-trust {
  gap: 2rem !important;
  margin-top: 1.5rem !important;
}

/* ── VERTICAL TICKER ────────────────────────────────── */
.ss-v-ticker {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  height: 1.2em;
}
.ss-v-ticker-inner {
  animation: v-tick 4s linear infinite;
}
@keyframes v-tick {
  0% { transform: translateY(0); }
  33.33% { transform: translateY(-33.33%); }
  66.66% { transform: translateY(-66.66%); }
  100% { transform: translateY(0); }
}

/* ── SHINY TEXT EFFECT ──────────────────────────────── */
@keyframes shine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.ss-shine {
  background: linear-gradient(90deg, #fff 0%, #FF9933 25%, #ffd23f 50%, #FF9933 75%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 4s linear infinite;
}

/* ═══════════════════════════════════════════════════════
   EXTENDED EFFECTS — JOHNY IVY PHASE 2
════════════════════════════════════════════════════════ */

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

/* ── STACKING PANELS (pinned sections) ──────────────── */
.ss-stack-wrap {
  position: relative;
  z-index: 1;
}
.ss-stack-panel {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ss-stack-panel:nth-child(1) { z-index: 1; }
.ss-stack-panel:nth-child(2) { z-index: 2; }
.ss-stack-panel:nth-child(3) { z-index: 3; }
.ss-stack-panel:nth-child(4) { z-index: 4; }

/* ── CARD TILT (3D mouse tracking) ─────────────────── */
.ss-tilt {
  transform-style: preserve-3d;
  transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  transition: transform 0.15s ease;
}
.ss-tilt-inner {
  transform: translateZ(20px);
}

/* ── TEXT SCRAMBLE ───────────────────────────────────── */
.ss-scramble {
  display: inline-block;
}

/* ── BLOG CARDS ENHANCED ─────────────────────────────── */
.blog-card {
  position: relative;
  overflow: hidden !important;
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.blog-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,153,51,0.06), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.blog-card:hover::before {
  opacity: 1;
}
.blog-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
}
.blog-card h3,
.blog-card h3 a {
  transition: color 0.3s !important;
}
.blog-card:hover h3,
.blog-card:hover h3 a {
  color: #FF9933 !important;
}
.blog-card .blog-link {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.3s !important;
}
.blog-card:hover .blog-link {
  gap: 0.6rem;
}

/* ── PRICING CARDS ENHANCED ─────────────────────────── */
.pricing-card,
.price-card {
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.pricing-card::before,
.price-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, transparent, #FF9933, transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pricing-card:hover::before,
.price-card:hover::before {
  transform: scaleX(1);
}
.pricing-card::after,
.price-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top center, rgba(255,153,51,0.06), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.pricing-card:hover::after,
.price-card:hover::after {
  opacity: 1;
}
.pricing-card:hover,
.price-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 25px 60px rgba(255,153,51,0.2) !important;
  border-color: rgba(255,153,51,0.35) !important;
}
.pricing-card.featured::before {
  background: linear-gradient(90deg, #FF9933, #ffd23f, #FF9933) !important;
  transform: scaleX(1) !important;
}
.pricing-badge {
  position: relative !important;
  overflow: hidden !important;
}
.pricing-badge::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: strip-sweep 2s ease-in-out infinite;
}

/* ── CONTACT FORM ENHANCED ───────────────────────────── */
.form-section,
.contact-form-wrap {
  position: relative;
  overflow: hidden;
}
.form-section::before,
.contact-form-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,153,51,0.05), transparent 70%);
  pointer-events: none;
}
.form-group {
  position: relative;
}
.form-group input:not([type="submit"]),
.form-group select,
.form-group textarea {
  transition: all 0.3s ease !important;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(255,153,51,0.6) !important;
  box-shadow: 0 0 0 3px rgba(255,153,51,0.08) !important;
  background: rgba(255,153,51,0.03) !important;
  outline: none !important;
}

/* ── CONTACT OPTION CARDS ────────────────────────────── */
.contact-card,
.contact-option {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.contact-card::after,
.contact-option::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,153,51,0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.contact-card:hover::after,
.contact-option:hover::after {
  opacity: 1;
}
.contact-card:hover,
.contact-option:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(255,153,51,0.3) !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.4) !important;
}

/* ── ABOUT PAGE VISUAL SECTIONS ─────────────────────── */
.ss-origin-visual {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,153,51,0.05), rgba(8,8,8,0.8));
  border: 1px solid rgba(255,255,255,0.07);
}
.ss-org-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── OFFICE MAP SECTION ──────────────────────────────── */
.map-placeholder {
  background: linear-gradient(135deg, rgba(255,153,51,0.06), rgba(8,8,8,0.8)) !important;
  border: 1px solid rgba(255,153,51,0.15) !important;
  transition: all 0.3s !important;
}
.map-placeholder:hover {
  border-color: rgba(255,153,51,0.35) !important;
  box-shadow: 0 10px 40px rgba(255,153,51,0.1) !important;
}

/* ── PHILOSOPHY CARDS ────────────────────────────────── */
.philosophy-card,
.service-card {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.philosophy-card::before,
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 0;
  background: #FF9933;
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.philosophy-card:hover::before,
.service-card:hover::before {
  height: 100%;
}
.philosophy-card:hover,
.service-card:hover {
  transform: translateX(6px) !important;
  border-color: rgba(255,153,51,0.25) !important;
  background: rgba(255,153,51,0.04) !important;
}

/* ── ANIMATED COUNTER CELLS ──────────────────────────── */
.stat-item,
.origin-stat {
  transition: all 0.35s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
.stat-item::after,
.origin-stat::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: #FF9933;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.stat-item:hover::after,
.origin-stat:hover::after {
  width: 100%;
}
.stat-item:hover,
.origin-stat:hover {
  background: rgba(255,153,51,0.04) !important;
  transform: scale(1.03) !important;
}

/* ── INLINE CODE STYLE ───────────────────────────────── */
code, .ss-code {
  font-family: 'Space Mono', monospace;
  background: rgba(255,153,51,0.08);
  padding: 0.15em 0.4em;
  border-radius: 2px;
  font-size: 0.85em;
  color: #FF9933;
}

/* ── LOADING SKELETON ────────────────────────────────── */
.ss-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── VALUE CARDS ─────────────────────────────────────── */
.value-card,
.india-item,
.phase-card,
.card {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* ── MICRO-ANIMATION: PULSE DOT ──────────────────────── */
.ss-pulse-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: #FF9933;
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(255,153,51,0.4);
}
@keyframes pulse-dot {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,153,51,0.4); }
  50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(255,153,51,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,153,51,0); }
}

/* ── HERO SOCIAL PROOF ROW ───────────────────────────── */
.ss-social-proof {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.ss-avatars {
  display: flex;
}
.ss-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(8,8,8,0.8);
  background: linear-gradient(135deg, #FF9933, #ffd23f);
  margin-left: -8px;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-weight: 700;
  font-family: 'Space Mono', monospace;
  position: relative;
}
.ss-avatar:first-child { margin-left: 0; }
.ss-proof-text {
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}
.ss-proof-text strong {
  color: #FF9933;
  font-weight: 700;
}

/* ── FLOATING LABEL INPUTS ───────────────────────────── */
.ss-float-group {
  position: relative;
  margin-bottom: 1.5rem;
}
.ss-float-group input,
.ss-float-group select,
.ss-float-group textarea {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 1.2rem 1rem 0.6rem;
  color: rgba(242,237,230,0.9);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  transition: all 0.3s;
}
.ss-float-group label {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.4);
  pointer-events: none;
  transition: all 0.25s;
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}
.ss-float-group input:focus ~ label,
.ss-float-group input:not(:placeholder-shown) ~ label,
.ss-float-group select:focus ~ label,
.ss-float-group textarea:focus ~ label,
.ss-float-group textarea:not(:placeholder-shown) ~ label {
  top: 0.4rem;
  transform: none;
  font-size: 0.55rem;
  color: #FF9933;
  letter-spacing: 0.15em;
}
.ss-float-group input:focus,
.ss-float-group select:focus,
.ss-float-group textarea:focus {
  border-color: rgba(255,153,51,0.5);
  box-shadow: 0 0 0 3px rgba(255,153,51,0.06);
  background: rgba(255,153,51,0.02);
  outline: none;
}

/* ── PROCESS TIMELINE ────────────────────────────────── */
.ss-timeline {
  position: relative;
  padding-left: 2.5rem;
}
.ss-timeline::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, #FF9933, rgba(255,153,51,0.1));
}
.ss-timeline-item {
  position: relative;
  margin-bottom: 3rem;
}
.ss-timeline-item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 0.4rem;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #FF9933;
  box-shadow: 0 0 10px rgba(255,153,51,0.5);
}

/* ── HERO PAGE ENHANCEMENT: non-home ──────────────────── */
.kicker {
  font-family: 'Space Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.25em !important;
  color: rgba(255,153,51,0.7) !important;
  text-transform: uppercase !important;
  margin-bottom: 1.2rem !important;
  display: block !important;
}

/* ── CTA SECTION ─────────────────────────────────────── */
.cta-section {
  text-align: center;
  padding: 4rem 2rem;
  background: linear-gradient(135deg, rgba(255,153,51,0.05), rgba(8,8,8,0.5));
  border: 1px solid rgba(255,153,51,0.12);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,153,51,0.08), transparent 70%);
  pointer-events: none;
}

/* ── SECTION INTRO TEXT ──────────────────────────────── */
.sec-intro {
  font-size: clamp(1rem, 2vw, 1.15rem) !important;
  color: rgba(255,255,255,0.55) !important;
  max-width: 640px !important;
  line-height: 1.75 !important;
  margin-bottom: 3rem !important;
}

/* ── INTERACTIVE AGENT TERMINAL ─────────────────────── */
.ss-terminal {
  background: rgba(8,8,8,0.95);
  border: 1px solid rgba(255,153,51,0.2);
  border-radius: 8px;
  overflow: hidden;
  font-family: 'Space Mono', monospace;
}
.ss-terminal-bar {
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ss-terminal-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.ss-terminal-dot:nth-child(1) { background: #ff5f57; }
.ss-terminal-dot:nth-child(2) { background: #febc2e; }
.ss-terminal-dot:nth-child(3) { background: #28c840; }
.ss-terminal-body {
  padding: 1.5rem;
  font-size: 0.78rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.6);
}
.ss-terminal-line {
  display: block;
  margin-bottom: 0.3rem;
}
.ss-terminal-prompt {
  color: #FF9933;
}
.ss-terminal-output {
  color: rgba(0,229,255,0.8);
  padding-left: 1.2rem;
}
.ss-terminal-success {
  color: #4ecdc4;
  padding-left: 1.2rem;
}
.ss-terminal-cursor {
  display: inline-block;
  width: 8px; height: 1em;
  background: #FF9933;
  vertical-align: text-bottom;
  animation: terminal-blink 1.2s step-end infinite;
}
@keyframes terminal-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── ROI CALCULATOR STYLE ────────────────────────────── */
.ss-calc {
  background: rgba(17,17,17,0.8);
  border: 1px solid rgba(255,153,51,0.15);
  border-radius: 8px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.ss-calc-input {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.ss-calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.ss-calc-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}
.ss-calc-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  color: #FF9933;
  letter-spacing: 0.02em;
}
.ss-calc-result {
  border-top: 1px solid rgba(255,153,51,0.15);
  padding-top: 1.5rem;
  text-align: center;
}
.ss-calc-result-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.5rem;
  color: #FF9933;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ── SLIDE-IN SIDE PANEL ─────────────────────────────── */
@keyframes slide-right {
  from { transform: translateX(-40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.ss-slide-in { animation: slide-right 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* ── RADIAL GLOW CORNERS ─────────────────────────────── */
.ss-glow-tl::before {
  content: '';
  position: absolute;
  top: -50px; left: -50px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,153,51,0.08), transparent 70%);
  pointer-events: none;
}
.ss-glow-br::after {
  content: '';
  position: absolute;
  bottom: -50px; right: -50px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(0,229,255,0.05), transparent 70%);
  pointer-events: none;
}

/* ── ANIMATED UNDERLINE ──────────────────────────────── */
.ss-ul {
  position: relative;
  display: inline-block;
}
.ss-ul::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, #FF9933, #ffd23f);
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ss-ul:hover::after {
  transform-origin: left;
  transform: scaleX(1);
}

/* ── FLOATING ACTION INDICATOR ─────────────────────── */
.ss-float-indicator {
  position: fixed;
  bottom: 100px;
  right: 30px;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.ss-float-indicator.visible {
  opacity: 1;
  pointer-events: auto;
}
.ss-float-wa {
  width: 48px; height: 48px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  transition: all 0.3s;
  text-decoration: none;
  animation: float-bounce 3s ease-in-out infinite;
}
.ss-float-wa:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 30px rgba(37,211,102,0.5);
}
@keyframes float-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ── GLASSMORPHISM CARDS ─────────────────────────────── */
.ss-glass {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}

/* ── NUMBER FLIP ANIMATION ───────────────────────────── */
@keyframes num-flip {
  0% { transform: rotateX(-90deg) translateY(-10px); opacity: 0; }
  100% { transform: rotateX(0deg) translateY(0); opacity: 1; }
}
.ss-num-flip {
  animation: num-flip 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── RESPONSIVE: KEEP EFFECTS SUBTLE ON MOBILE ────────── */
@media (max-width: 768px) {
  .ss-stack-panel {
    position: relative;
    min-height: auto;
  }
  .ss-stack-panel > div {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .ss-float-indicator {
    bottom: 80px;
    right: 20px;
  }
  .ss-terminal-body {
    font-size: 0.65rem;
  }
  /* Hide second child on mobile for stacking panels */
  .ss-stack-panel > div > div:first-child ~ div:last-child {
    order: -1;
  }
}


/* ═══════════════════════════════════════════════════════
   GLOBAL READABILITY OVERHAUL — Phase 3
   KD / Johny Ivy — April 2026
════════════════════════════════════════════════════════ */

/* ── DARK / LIGHT MODE VARIABLES ───────────────────── */
:root {
  --body-bg: #080808;
  --body-text: rgba(255,255,255,0.85);
  --desc-text: rgba(255,255,255,0.72);
  --label-text: rgba(255,153,51,0.85);
  --border-subtle: rgba(255,255,255,0.08);
  --card-bg: rgba(255,255,255,0.03);
  --heading-color: #ffffff;
}
body.light-mode {
  --body-bg: #f4f1ec;
  --body-text: rgba(0,0,0,0.88);
  --desc-text: rgba(0,0,0,0.65);
  --label-text: rgba(180,80,0,0.9);
  --border-subtle: rgba(0,0,0,0.1);
  --card-bg: rgba(0,0,0,0.03);
  --heading-color: #0a0a0a;
  background-color: var(--body-bg) !important;
}
body.light-mode,
body.light-mode p,
body.light-mode li,
body.light-mode span,
body.light-mode div {
  color: var(--body-text);
}
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5 {
  color: var(--heading-color) !important;
}
body.light-mode .hero,
body.light-mode .sec,
body.light-mode section {
  background-color: var(--body-bg) !important;
}

/* ── SUN/MOON TOGGLE BUTTON ─────────────────────────── */
#ss-theme-toggle {
  position: fixed;
  bottom: 5.5rem;
  right: 1.5rem;
  z-index: 99999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,153,51,0.3);
  background: rgba(8,8,8,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  transform: translateY(10px);
}
#ss-theme-toggle.visible {
  opacity: 1;
  transform: translateY(0);
}
#ss-theme-toggle:hover {
  border-color: #FF9933;
  background: rgba(255,153,51,0.12);
  box-shadow: 0 0 20px rgba(255,153,51,0.3);
  transform: scale(1.1);
}
body.light-mode #ss-theme-toggle {
  background: rgba(244,241,236,0.9);
  border-color: rgba(180,80,0,0.4);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
@media (pointer: coarse) {
  #ss-theme-toggle { bottom: 5rem; right: 1rem; }
}

/* ── DESCRIPTION TEXT — GLOBAL BOOST ───────────────── */
/* Make all body/desc text visibly lighter and larger */
.sec p,
section p,
.svc-card p,
.ind-card p,
.case-body,
.hww-step p,
.funnel-col p,
.funnel-col ul li,
.blog-card p,
.post-body,
.philosophy-card p,
.service-card p,
.pricing-card p,
.price-card p,
.about-body p,
.contact-body p,
.faq-answer,
.timeline-body,
.result-body,
p.desc,
.desc-text,
[class*="desc"] p,
[class*="body"] p,
.hero-sub {
  color: rgba(255,255,255,0.75) !important;
  font-size: clamp(0.9rem, 1.6vw, 1rem) !important;
  line-height: 1.75 !important;
}
/* bullet points under content areas */
.sec li,
section li,
.svc-card li,
.philosophy-card li,
.pricing-card li,
.price-card li {
  color: rgba(255,255,255,0.72) !important;
  font-size: clamp(0.88rem, 1.5vw, 0.98rem) !important;
  line-height: 1.72 !important;
}
body.light-mode .sec p,
body.light-mode section p,
body.light-mode .sec li,
body.light-mode section li {
  color: rgba(0,0,0,0.68) !important;
}

/* ── SMALL LABEL / TAG TEXT — MORE READABLE ─────────── */
.label,
.sec-tag,
.kicker,
.hero-kicker,
.badge-label,
.tag-label,
.stat-lbl,
.case-tag,
.ind-tag,
.abm-tag,
.blog-tag,
.meta-tag,
.manifesto-attr,
.ss-badge,
[class*="-label"],
[class*="tag"],
[class*="kicker"] {
  font-size: 0.72rem !important;
  letter-spacing: 0.18em !important;
  opacity: 1 !important;
  color: rgba(255,153,51,0.9) !important;
}
/* Stat labels specifically */
.stat-lbl {
  font-size: 0.7rem !important;
  color: rgba(255,255,255,0.6) !important;
  letter-spacing: 0.12em !important;
}
/* case/blog tags */
.case-tag,
.blog-tag,
.ind-tag {
  color: rgba(255,153,51,0.88) !important;
  border-color: rgba(255,153,51,0.25) !important;
}

/* ── SECTION HEADINGS — CENTER ALIGN ────────────────── */
.sec h2,
.sec h3,
section h2,
section h3,
.sec-heading,
.section-title {
  text-align: center !important;
}
/* But NOT inside cards, lists, left-aligned content areas */
.svc-card h2, .svc-card h3, .svc-card h4,
.case-card h2, .case-card h3, .case-card h4,
.ind-card h2, .ind-card h3, .ind-card h4,
.philosophy-card h2, .philosophy-card h3, .philosophy-card h4,
.pricing-card h2, .pricing-card h3, .pricing-card h4,
.price-card h2, .price-card h3, .price-card h4,
.blog-card h2, .blog-card h3, .blog-card h4,
.hww-step h4,
.funnel-col h4,
.abm-strip h3, .abm-strip h4,
.foot-col h5, .footer h5,
.bharat-stat h4,
.contact-card h3, .contact-card h4,
.timeline-item h3, .timeline-item h4,
.hero-inner h2, .hero-inner h3 {
  text-align: left !important;
}
/* hero stays left */
.hero h1, .hero h2 {
  text-align: left !important;
}

/* ── ICON GRIDS — BIGGER ICONS & LABELS ─────────────── */
/* catch all common icon grid patterns */
.icon-grid .icon,
.icons-grid .icon,
.icon-set .icon,
.feature-icon,
.service-icon,
.ind-icon,
.hww-icon,
.phase-icon,
.value-icon,
.step-icon,
[class*="icon-wrap"],
[class*="icon-box"] {
  font-size: 2.4rem !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.icon-grid p,
.icons-grid p,
.icon-set p,
.icon-grid span,
.icons-grid span,
[class*="icon-grid"] p,
[class*="icon-grid"] span {
  font-size: 0.85rem !important;
  color: rgba(255,255,255,0.72) !important;
  margin-top: 0.5rem !important;
}
.icon-grid h4,
.icons-grid h4,
.icon-set h4,
[class*="icon-grid"] h4 {
  font-size: 1rem !important;
  color: rgba(255,255,255,0.92) !important;
}
/* hww (how we work) icons */
.hww-icon {
  font-size: 2.2rem !important;
}
.hww-step h4 {
  font-size: 1.05rem !important;
  color: rgba(255,255,255,0.9) !important;
}
.hww-step p {
  font-size: 0.87rem !important;
  color: rgba(255,255,255,0.65) !important;
}

/* ── BACKGROUND WATERMARK TEXT — STAR FLICKER ───────── */
@keyframes ss-bg-flicker {
  0%, 100% { opacity: 0.04; }
  25%       { opacity: 0.065; }
  50%       { opacity: 0.03; }
  60%       { opacity: 0.07; }
  75%       { opacity: 0.04; }
  85%       { opacity: 0.06; }
}
@keyframes ss-bg-scanline {
  0%   { transform: translateY(0); }
  100% { transform: translateY(6px); }
}
.ss-bg-text,
.watermark,
.watermark-text,
.bg-text,
[class*="bg-heading"],
[class*="watermark"],
.manifesto-x,
.ss-sec-num,
.hero-bg-word,
[class*="bg-word"],
[class*="back-text"] {
  animation: ss-bg-flicker 4s ease-in-out infinite !important;
  will-change: opacity;
}
/* Slightly different timing for variety */
.ss-sec-num { animation-delay: 0.8s !important; }
.manifesto-x { animation-delay: 1.4s !important; }
[class*="watermark"]:nth-child(2n) { animation-delay: 0.4s !important; }

/* ── IMPROVED CARD BODY TEXTS ────────────────────────── */
.case-body {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.91rem !important;
}
.svc-card p {
  color: rgba(255,255,255,0.68) !important;
  font-size: 0.93rem !important;
}
.ind-card p {
  color: rgba(255,255,255,0.68) !important;
  font-size: 0.9rem !important;
}
.philosophy-card p,
.service-card p {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.92rem !important;
}

/* ── HEADING COLOR REFINEMENT ───────────────────────── */
.sec h2,
section h2,
.sec-heading {
  color: rgba(255,255,255,0.97) !important;
}
.sec h3,
section h3 {
  color: rgba(255,255,255,0.9) !important;
}

/* ── LINK TEXT IMPROVEMENTS ─────────────────────────── */
.sec a:not([class]),
section a:not([class]) {
  color: rgba(255,153,51,0.85) !important;
  text-decoration: underline;
  text-decoration-color: rgba(255,153,51,0.3);
}
.sec a:not([class]):hover,
section a:not([class]):hover {
  color: #FF9933 !important;
}

/* ── TICKER ITEMS READABLE ──────────────────────────── */
.ticker-item {
  color: rgba(255,255,255,0.45) !important;
  font-size: 0.85rem !important;
}

/* ── FAQ IMPROVEMENTS ───────────────────────────────── */
.faq-question,
.faq-q {
  font-size: 1rem !important;
  color: rgba(255,255,255,0.92) !important;
}
.faq-answer,
.faq-a {
  font-size: 0.93rem !important;
  color: rgba(255,255,255,0.7) !important;
  line-height: 1.75 !important;
}

/* ── MOBILE LABEL READABLE ──────────────────────────── */
@media (max-width: 768px) {
  .label, .sec-tag, .kicker, .hero-kicker,
  .badge-label, .tag-label, .stat-lbl,
  .case-tag, .ind-tag, .abm-tag, .blog-tag,
  .meta-tag, .manifesto-attr {
    font-size: 0.68rem !important;
  }
  .sec p, section p {
    font-size: 0.92rem !important;
  }
  .hww-icon, .feature-icon, .service-icon, .ind-icon {
    font-size: 2rem !important;
  }
}

/* ── LIGHT MODE LABEL COLORS ────────────────────────── */
body.light-mode .label,
body.light-mode .sec-tag,
body.light-mode .kicker,
body.light-mode .hero-kicker,
body.light-mode .badge-label,
body.light-mode .ss-badge,
body.light-mode .case-tag,
body.light-mode .blog-tag,
body.light-mode .ind-tag {
  color: rgba(180,80,0,0.9) !important;
}
body.light-mode .stat-lbl {
  color: rgba(0,0,0,0.55) !important;
}
body.light-mode .case-body,
body.light-mode .svc-card p,
body.light-mode .ind-card p {
  color: rgba(0,0,0,0.65) !important;
}

/* ═══════════════════════════════════════════════════════
   GLOBAL ICON + CONTENT READABILITY — Phase 3b
   Targeting real class names found across all pages
════════════════════════════════════════════════════════ */

/* ── ALL ICON ELEMENTS — LARGER ─────────────────────── */
.agent-icon,
.b-icon,
.dim-icon,
.feature-icon,
.hiw-icon,
.hww-icon,
.ind-icon,
.opt-icon,
.pillar-icon,
.pj-icon,
.revenue-icon,
.step-icon,
.success-icon {
  font-size: 2.2rem !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 56px !important;
  min-height: 56px !important;
}

/* ── STEP / PHASE CONTENT ───────────────────────────── */
.step-body,
.step-sub,
.proc-step p,
.process-step p,
.conv-step p,
.pj-step p,
.sf-step p,
.lstep p {
  color: rgba(255,255,255,0.72) !important;
  font-size: clamp(0.88rem, 1.5vw, 0.97rem) !important;
  line-height: 1.72 !important;
}
.step-label,
.step-meta,
.step-number,
.step-num,
.phase-num {
  font-size: 0.72rem !important;
  letter-spacing: 0.15em !important;
  color: rgba(255,153,51,0.85) !important;
}

/* ── FEATURE CARDS ──────────────────────────────────── */
.feature-card {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.feature-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(255,153,51,0.25) !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.4) !important;
}
.feature-title {
  color: rgba(255,255,255,0.92) !important;
  font-size: 1rem !important;
}
.feature-desc,
.feature-card p {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.9rem !important;
  line-height: 1.72 !important;
}

/* ── GRIDS — HEADING CENTER ─────────────────────────── */
.benefits-grid + h2,
.features-grid + h2,
.services-grid > h2,
.what-grid + h2,
.approach-grid + h2,
.usp-grid + h2,
.pillars-grid + h2,
.opt-grid + h2,
.india-grid + h2,
.hipaa-grid + h2,
.compliance-grid + h2,
.metrics-grid + h2 {
  text-align: center !important;
}

/* ── VALUE CARDS ────────────────────────────────────── */
.value-card {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.value-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(255,153,51,0.2) !important;
}
.value-card p {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.9rem !important;
}
.value-card h4, .value-card h3 {
  color: rgba(255,255,255,0.92) !important;
}

/* ── STEP CARDS ─────────────────────────────────────── */
.step-card {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.step-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(255,153,51,0.2) !important;
}
.step-card p {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.9rem !important;
  line-height: 1.72 !important;
}
.step-card h4, .step-card h3 {
  color: rgba(255,255,255,0.92) !important;
}
.step-dots {
  color: rgba(255,153,51,0.5) !important;
}

/* ── PHASE CARDS ────────────────────────────────────── */
.phase-card p {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.9rem !important;
}
.phase-card h4, .phase-card h3 {
  color: rgba(255,255,255,0.92) !important;
}

/* ── PILLAR / USP SECTIONS ──────────────────────────── */
.pillar-grid p,
.usp-grid p,
.opt-grid p {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.9rem !important;
  line-height: 1.72 !important;
}

/* ── REVENUE / RESELL GRIDS ─────────────────────────── */
.revenue-grid p,
.resell-grid p {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.9rem !important;
}

/* ── COMPAT / COMPLIANCE / METRICS ─────────────────── */
.compat-grid p,
.compliance-grid p,
.metrics-grid p,
.hipaa-grid p {
  color: rgba(255,255,255,0.68) !important;
  font-size: 0.88rem !important;
}

/* ── CULTURE / ABOUT SECTIONS ───────────────────────── */
.culture-values p,
.india-grid p {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.9rem !important;
}

/* ── PROC / PROCESS STEPS ───────────────────────────── */
.process-grid p,
.process-steps p,
.proc-step p {
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.9rem !important;
}

/* ── BHARAT / B-ICON SECTION ────────────────────────── */
.bharat-grid p {
  color: rgba(255,255,255,0.7) !important;
}
.b-icon {
  font-size: 2rem !important;
}

/* ── BUILD GRID HEADINGS CENTERED ───────────────────── */
.build-grid > h2,
.build-grid > h3,
.bc-grid > h2 {
  text-align: center !important;
}

/* ── PRICING FEATURES LIST ──────────────────────────── */
.price-features li,
.pricing-features li,
.tier-features li {
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.9rem !important;
}

/* ── FORM GRID / CONTACT FORM ───────────────────────── */
.form-grid label,
.form-grid-2 label {
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
}

/* ── STATS VALUE / ORIGIN STAT ──────────────────────── */
.stat-value,
.origin-stat-value {
  color: #FF9933 !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  letter-spacing: -0.02em !important;
}

/* ── STENCIL BG TEXT — FLICKER (position:absolute only) */
.svc-card .stencil,
.case-card .stencil,
[class*="-card"] .stencil,
.sec > .stencil,
section > .stencil {
  animation: ss-bg-flicker 5s ease-in-out infinite !important;
}

/* ── SECTION HEADING CENTERING AMPLIFIED ────────────── */
/* Target h2/h3 that are direct children of .sec, section, or common wrappers */
.sec > h2,
.sec > h3,
section > h2,
section > h3,
.inner > h2,
.inner > h3,
.inner > .sec-title,
.container > h2,
.container > h3,
[class*="inner"] > h2,
[class*="inner"] > h3,
[class*="-sec"] > h2,
[class*="-sec"] > h3,
[class*="-section"] > h2,
[class*="-section"] > h3 {
  text-align: center !important;
}
/* Exclusions — left-align in specific contexts */
.hero-inner > h2,
.hero-inner > h3,
.hero > h2,
.abm-strip > h3,
.foot-inner > h2,
.foot-inner > h3,
footer h2, footer h3 {
  text-align: left !important;
}

/* ── WIDER DESC TEXT LINE LENGTH ─────────────────────── */
.sec > p,
section > p,
.inner > p,
.sec-sub,
.section-sub,
.sec-desc,
.page-desc {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  color: rgba(255,255,255,0.72) !important;
  font-size: clamp(0.95rem, 1.8vw, 1.05rem) !important;
  line-height: 1.78 !important;
}

/* ── HERO SUB BETTER READABLE ───────────────────────── */
.hero-sub,
.page-sub {
  color: rgba(255,255,255,0.8) !important;
  font-size: clamp(1rem, 2vw, 1.18rem) !important;
  line-height: 1.7 !important;
}

/* ── HIGHLIGHT SPANS READABLE ───────────────────────── */
.sec em,
section em,
.sec strong,
section strong {
  color: rgba(255,153,51,0.95) !important;
  font-style: normal !important;
}

/* ═══════════════════════════════════════════════════════
   DEFINITIVE HEADING CENTER-ALIGN — Phase 3c
   Targets every real section wrapper class found on site
════════════════════════════════════════════════════════ */

/* Every real section-level wrapper → headings centered */
.sec h2, .sec h3,
section h2, section h3,
.pricing h2, .pricing h3,
.funnel-sec h2, .funnel-sec h3,
.funnel h2, .funnel h3,
.svc-section > h2, .svc-section > h3,
.abm-sec > h2, .abm-sec > h3,
.abm-sec .abm-inner > h2, .abm-sec .abm-inner > h3,
.cta-block h2, .cta-block h3,
.cta-banner h2, .cta-banner h3,
.cta-section h2, .cta-section h3,
.cta-box h2, .cta-box h3,
.cta h2, .cta h3,
.why-section h2, .why-section h3,
.wall > h2, .wall > h3,
.origin h2, .origin h3,
.philosophy h2, .philosophy h3,
.culture h2, .culture h3,
.culture-intro h2, .culture-intro h3,
.india h2, .india h3,
.pillars h2, .pillars h3,
.benefits-grid > h2, .benefits-grid > h3,
.features-grid > h2, .features-grid > h3,
.manifesto-sec h2, .manifesto-sec h3,
.final-cta h2, .final-cta h3,
.two-col > h2, .two-col > h3,
.different h2, .different h3,
.revenue-section h2, .revenue-section h3,
.approach h2, .approach h3,
.explainer h2, .explainer h3,
.next-steps h2, .next-steps h3,
.office-section h2, .office-section h3,
.faq-section h2, .faq-section h3,
.form-section h2, .form-section h3,
.section-block h2, .section-block h3,
.pain-grid > h2, .pain-grid > h3,
.tiers-section h2, .tiers-section h3,
.build-grid > h2, .build-grid > h3,
.contact-options > h2, .contact-options > h3,
.success-box h2, .success-box h3,
.abm-inner h2, .abm-inner h3 {
  text-align: center !important;
}

/* Precise exclusions — things that must stay LEFT aligned */
.svc-card h2, .svc-card h3, .svc-card h4,
.svc-body h2, .svc-body h3,
.case-card h2, .case-card h3, .case-card h4,
.ind-card h2, .ind-card h3, .ind-card h4,
.philosophy-card h2, .philosophy-card h3, .philosophy-card h4,
.pricing-card h2, .pricing-card h3, .pricing-card h4,
.price-card h2, .price-card h3, .price-card h4,
.blog-card h2, .blog-card h3, .blog-card h4,
.benefit-card h2, .benefit-card h3, .benefit-card h4,
.feature-card h2, .feature-card h3, .feature-card h4,
.step-card h2, .step-card h3, .step-card h4,
.value-card h2, .value-card h3, .value-card h4,
.service-card h2, .service-card h3, .service-card h4,
.contact-card h2, .contact-card h3, .contact-card h4,
.hww-step h4,
.funnel-col h4,
.abm-strip h2, .abm-strip h3, .abm-strip h4,
.bharat-stat h4,
.step-body h3, .step-body h4,
.proc-body h3, .proc-body h4,
.faq-item h3, .faq-item h4,
.hero h1, .hero h2, .hero-section h1, .hero-section h2,
footer h2, footer h3, footer h4,
.foot-inner h2, .foot-inner h3,
.foot-col h5, .foot-col h4,
.pain-card h3, .pain-card h4,
.india-item h3, .india-item h4,
.origin-content h3, .origin-content h4,
.culture-values h3, .culture-values h4,
.two-col .col h3, .two-col .col h4 {
  text-align: left !important;
}

/* ── ALSO FIX INLINE-STYLED HEADINGS THAT RESIST CSS ── */
/* Funnel section overrides inline style on its h2 */
.funnel-sec > div > h2,
.funnel-sec > h2 {
  text-align: center !important;
}
/* Pricing heading */
.pricing > div > h2,
.pricing > h2 {
  text-align: center !important;
}
/* ABM inner heading */
.abm-sec h2,
.abm-sec h3 {
  text-align: center !important;
}
/* CTA heading override */
.cta-block > h2,
.cta-block > div > h2,
.cta-section > h2,
.cta-section > div > h2 {
  text-align: center !important;
}

/* ═══════════════════════════════════════════════════════
   PHASE 4 — READABILITY, CENTERING, THEMING
   Driven by direct client feedback:
   • Descriptions lighter/whiter & larger
   • Every body copy passes AA contrast on dark bg
   • Headings centered across every section wrapper
   • All in-background text inherits the star flicker
   • Icon grid + icon size bumped for scannability
   • Dark/light theme tokens + .theme-toggle button
════════════════════════════════════════════════════════ */

/* ---- THEME TOKENS ------------------------------------ */
:root {
  /* Dark (default) */
  --ss-bg:            #080808;
  --ss-bg-elev:       #101010;
  --ss-surface:       rgba(255,255,255,0.03);
  --ss-surface-2:     rgba(255,255,255,0.05);
  --ss-border:        rgba(255,255,255,0.09);
  --ss-border-strong: rgba(255,255,255,0.18);
  --ss-heading:       rgba(255,255,255,0.98);
  --ss-body:          rgba(255,255,255,0.88);  /* brighter than before */
  --ss-body-muted:    rgba(255,255,255,0.72);
  --ss-label:         rgba(255,255,255,0.55);
  --ss-accent:        #FF9933;
  --ss-accent-2:      #ffd23f;
  --ss-link:          #ffb259;
  --ss-shadow-text:   0 1px 2px rgba(0,0,0,.55);
}
body.light-mode, html.light-mode body {
  --ss-bg:            #f6f2ea;
  --ss-bg-elev:       #ffffff;
  --ss-surface:       rgba(0,0,0,0.03);
  --ss-surface-2:     rgba(0,0,0,0.05);
  --ss-border:        rgba(0,0,0,0.09);
  --ss-border-strong: rgba(0,0,0,0.18);
  --ss-heading:       #0a0a0a;
  --ss-body:          rgba(10,10,10,0.86);
  --ss-body-muted:    rgba(10,10,10,0.68);
  --ss-label:         rgba(10,10,10,0.55);
  --ss-accent:        #C2410C;        /* deeper orange for contrast on light */
  --ss-accent-2:      #B45309;
  --ss-link:          #9a3412;
  --ss-shadow-text:   none;
}

/* ---- SMOOTH THEME TRANSITION ------------------------- */
body, body *, .sec, section, .ss-nav, .top-nav, footer,
.svc-card, .price-card, .case-card, .ind-card, .pain-card,
.feature-card, .step-card, .value-card, .fcol, .phase-card {
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease !important;
}

/* =======================================================
   A) DESCRIPTIONS — LIGHTER/WHITER + LARGER
   Applied to every paragraph-ish selector found across the site.
   These override previous .72 / .88rem values.
======================================================= */
.svc-desc,
.svc-card p,
.svc-card .svc-desc,
.case-card p, .case-body,
.ind-card p, .ind-desc,
.pain-card p,
.feature-card p, .feature-desc,
.value-card p,
.step-card p, .step-body, .step-sub,
.phase-card p,
.philosophy-card p, .service-card p,
.pricing-card p, .price-card p,
.blog-card p,
.benefit-card p,
.contact-card p,
.abm-inner p,
.cta-block p, .cta-section p, .cta-box p,
.hero-sub, .page-sub,
.sec > p, section > p,
.inner > p,
.sec-sub, .section-sub, .sec-desc, .page-desc,
.funnel-inner > p,
.pricing-inner > p,
.services-intro p,
.india-item p,
.culture-values p,
.pillar-grid p, .usp-grid p, .opt-grid p,
.revenue-grid p, .resell-grid p,
.compat-grid p, .compliance-grid p, .metrics-grid p, .hipaa-grid p,
.process-grid p, .process-steps p, .proc-step p, .proc-body p,
.bharat-grid p,
.fcol p, .fcol ul li,
.what-migrate p,
.connects-grid p, .connectors-grid p, .conn-grid p,
.origin-content p, .origin-stat-label,
.two-col .col p {
  color: var(--ss-body) !important;
  font-size: clamp(0.98rem, 1.45vw, 1.08rem) !important;
  line-height: 1.78 !important;
  font-weight: 400 !important;
  text-shadow: var(--ss-shadow-text);
}

/* Bullet/feature list items: slightly smaller but still bright */
.svc-features li, .price-card ul li, .pricing-features li,
.tier-features li, .pain-card ul li, .feature-card ul li,
.svc-body ul li, .value-card ul li, .step-card ul li,
.what-migrate li, .wm-row li {
  color: var(--ss-body) !important;
  font-size: clamp(0.92rem, 1.3vw, 1rem) !important;
  line-height: 1.7 !important;
  opacity: 1 !important;
}

/* Mobile bump — prevent tiny text */
@media (max-width: 768px) {
  .svc-desc, .svc-card p, .case-body,
  .ind-card p, .pain-card p, .feature-card p,
  .value-card p, .step-card p, .phase-card p,
  .sec > p, section > p, .inner > p,
  .pricing-inner > p, .funnel-inner > p {
    font-size: 0.98rem !important;
    line-height: 1.78 !important;
  }
  .svc-features li, .price-card ul li {
    font-size: 0.92rem !important;
  }
}

/* =======================================================
   B) HEADINGS CENTERED — BLANKET RULE
   Any heading that isn't inside a CARD component
   gets centered. Hero H1s and nav exempt.
======================================================= */
.sec h2, .sec h3, .sec p.label, .sec .label, .sec .kicker,
section > h2, section > h3,
.inner > h2, .inner > h3, .inner > p.label, .inner > .label,
.svc-section > h2, .svc-section > h3,
.funnel-inner > h2, .funnel-inner > h3,
.pricing-inner > h2, .pricing-inner > h3,
.abm-inner > h2, .abm-inner > h3,
.cta-block h2, .cta-section h2, .cta-box h2,
.cta-block p, .cta-section p, .cta-box p,
.final-cta h2, .final-cta h3, .final-cta p,
.sec > .label, .inner > .label,
.sec > .kicker, .inner > .kicker,
.sec > .eyebrow, .inner > .eyebrow,
section > p:first-of-type.label {
  text-align: center !important;
}
/* Center the kicker pseudo-elements too */
.sec > .label, .inner > .label {
  margin-left: auto !important;
  margin-right: auto !important;
  display: table !important;
}

/* Re-exempt cards + hero + footer (cards keep their left-align) */
.svc-card h2, .svc-card h3, .svc-card h4, .svc-card p, .svc-card .svc-desc,
.case-card *, .ind-card *, .pain-card *, .feature-card *,
.value-card *, .step-card *, .phase-card *,
.philosophy-card *, .pricing-card *, .price-card *,
.blog-card *, .benefit-card *, .contact-card *,
.service-card *,
.hero-inner *, .hero > h1, .hero > h2,
footer *, .foot-inner *, .foot-col *,
.abm-strip * {
  text-align: initial;
}
.svc-card h2, .svc-card h3, .svc-card h4,
.case-card h2, .case-card h3, .case-card h4,
.ind-card h2, .ind-card h3, .ind-card h4 {
  text-align: left !important;
}
/* Hero h1 stays its original alignment — often center already */

/* =======================================================
   C) BACKGROUND / WATERMARK TEXT — UNIVERSAL FLICKER
   Extend the star-flicker motif to every ghost text
   used as a background decoration.
======================================================= */
@keyframes ss-bg-flicker-strong {
  0%, 100% { opacity: 0.045; filter: drop-shadow(0 0 0 transparent); }
  18%      { opacity: 0.085; }
  26%      { opacity: 0.03; }
  34%      { opacity: 0.095; filter: drop-shadow(0 0 6px rgba(255,153,51,0.25)); }
  48%      { opacity: 0.04; }
  62%      { opacity: 0.075; }
  70%      { opacity: 0.025; }
  82%      { opacity: 0.08;  filter: drop-shadow(0 0 4px rgba(255,210,63,0.18)); }
  91%      { opacity: 0.05; }
}

/* Services-page stencils + hero pseudo-text + all decorative ghosts */
.stencil,
.svc-card .stencil,
.svc-bg-num,
.ss-sec-num,
.ss-bg-text,
.bg-text,
.watermark,
.watermark-text,
.manifesto-x,
.hero-bg-word,
.ghost-heading,
.ghost-text,
.hero::before,
.cta-block::before,
.svc-section::before,
[class*="bg-heading"],
[class*="bg-word"],
[class*="back-text"],
[class*="watermark"] {
  animation: ss-bg-flicker-strong 5.5s ease-in-out infinite !important;
  will-change: opacity, filter;
}
/* Apply flicker to the ::before pseudo text via a shared rule.
   (Pseudo-element animation fires from parent selector above.) */
.hero, .cta-block, .svc-section, .pricing, .funnel-sec, .abm-sec {
  position: relative;
}
/* Per-element staggered delays for visual variety */
.stencil                  { animation-delay: 0s   !important; }
.svc-card:nth-child(2) .stencil { animation-delay: 0.7s !important; }
.svc-card:nth-child(3) .stencil { animation-delay: 1.4s !important; }
.svc-card:nth-child(4) .stencil { animation-delay: 2.1s !important; }
.svc-bg-num               { animation-delay: 0.3s !important; }
.ss-sec-num               { animation-delay: 1.1s !important; }
.hero::before             { animation-delay: 0.5s !important; }

/* Keep the services-page heading stencils ("BE THE ANSWER", "YOUR BRAND. OUR ENGINE.")
   visible enough to see the flicker */
.svc-card .stencil {
  opacity: 0.065 !important;
}
.svc-card:hover .stencil {
  opacity: 0.11 !important;
}

/* =======================================================
   D) ICON GRID — BIGGER ICONS + TEXT
======================================================= */
.agent-icon, .b-icon, .dim-icon, .feature-icon,
.hiw-icon, .hww-icon, .ind-icon, .opt-icon,
.pillar-icon, .pj-icon, .revenue-icon, .step-icon,
.success-icon, .service-icon,
.conn-item .icon, .conn-card .icon,
.connector-icon, .tool-icon, .integration-icon,
.connects-grid img, .connectors-grid img, .conn-grid img,
.connects-grid svg, .connectors-grid svg, .conn-grid svg {
  font-size: 2.6rem !important;
  width: auto;
  height: auto;
  min-width: 64px !important;
  min-height: 64px !important;
  line-height: 1.1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Connector grids (Tally, SAP, Zoho etc. grid shown in screenshot) */
.connects-grid,
.connectors-grid,
.conn-grid,
.integration-grid,
.compat-grid,
.tools-grid {
  gap: 1.4rem !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
}
.conn-item, .conn-card,
.connector-card, .integration-card,
.compat-item, .tool-card {
  padding: 1.6rem 1rem !important;
  min-height: 120px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
}
.conn-item img, .conn-card img,
.connector-card img, .integration-card img, .tool-card img,
.conn-item svg, .conn-card svg,
.connector-card svg, .integration-card svg, .tool-card svg {
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 0.7rem !important;
}
/* Emoji/text logo */
.compat-item .ci-logo,
.conn-item .logo, .conn-card .logo,
.integration-card .logo, .connector-card .logo {
  font-size: 2.4rem !important;
  margin-bottom: 0.6rem !important;
  line-height: 1 !important;
}
/* Label text (was 0.52rem — too small) */
.conn-item .label, .conn-card .label,
.conn-item .name,  .conn-card .name,
.conn-item > span, .conn-card > span,
.connector-card .name, .integration-card .name, .tool-card .name,
.compat-item .ci-name, .compat-item .name {
  font-size: 0.82rem !important;
  letter-spacing: 0.12em !important;
  color: var(--ss-body) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  line-height: 1.35 !important;
}
.compat-tag {
  font-size: 0.75rem !important;
  color: var(--ss-body-muted) !important;
  padding: 0.35rem 0.7rem !important;
}

/* =======================================================
   E) LABEL / KICKER / TAG — BIGGER, HIGHER CONTRAST
======================================================= */
.label, .sec-tag, .kicker, .hero-kicker,
.eyebrow, .section-label, .tag-label, .badge-label {
  font-size: clamp(0.72rem, 1.1vw, 0.8rem) !important;
  letter-spacing: 0.22em !important;
  color: var(--ss-accent) !important;
  opacity: 0.95 !important;
  font-weight: 600 !important;
}
.svc-tag {
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  padding: 0.4rem 0.85rem !important;
}

/* =======================================================
   F) PAIN CARDS (RPA problem grid — hard-to-read in screenshot)
======================================================= */
.pain-card {
  padding: 1.6rem 1.4rem !important;
  background: var(--ss-surface) !important;
  border: 1px solid var(--ss-border) !important;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease !important;
}
.pain-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,153,51,0.3) !important;
  background: var(--ss-surface-2) !important;
}
.pain-card h3, .pain-card h4 {
  color: var(--ss-heading) !important;
  font-size: clamp(1rem, 1.6vw, 1.1rem) !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.25 !important;
}
.pain-card p {
  color: var(--ss-body) !important;
  font-size: clamp(0.95rem, 1.35vw, 1rem) !important;
  line-height: 1.72 !important;
}

/* =======================================================
   G) SERVICES CARDS — DESCRIPTIONS POP
======================================================= */
.svc-card .svc-desc,
.svc-card p.svc-desc {
  color: var(--ss-body) !important;
  font-size: clamp(0.98rem, 1.4vw, 1.05rem) !important;
  line-height: 1.78 !important;
  opacity: 1 !important;
  text-shadow: var(--ss-shadow-text);
}
.svc-features li {
  color: var(--ss-body) !important;
  font-size: clamp(0.92rem, 1.3vw, 0.98rem) !important;
  padding: 0.55rem 0 0.55rem 1.5rem !important;
  line-height: 1.55 !important;
}
.svc-card:hover .svc-features li {
  color: var(--ss-heading) !important;
}
.svc-arrow {
  opacity: 0.65 !important;  /* was 0.3 — too faint */
  font-size: 1rem !important;
}

/* =======================================================
   H) THEME TOGGLE — SUN/MOON BUTTON
======================================================= */
.theme-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ss-border-strong);
  background: transparent;
  color: var(--ss-heading);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s ease;
  margin: 0 0.6rem;
  padding: 0;
  flex-shrink: 0;
  vertical-align: middle;
}
.theme-toggle:hover {
  border-color: var(--ss-accent);
  color: var(--ss-accent);
  box-shadow: 0 0 20px rgba(255,153,51,0.25);
  transform: rotate(15deg);
}
.theme-toggle svg {
  width: 20px;
  height: 20px;
  transition: opacity 0.3s ease, transform 0.5s ease;
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
body.light-mode .theme-toggle .icon-sun  { display: block; }
body.light-mode .theme-toggle .icon-moon { display: none; }
body.light-mode .theme-toggle {
  border-color: rgba(0,0,0,0.2);
  color: #0a0a0a;
}

/* Compact variant inside flex navs */
.ss-nav-links .theme-toggle,
.nav-links .theme-toggle,
.nav-right .theme-toggle {
  width: 36px;
  height: 36px;
  margin: 0 0.4rem;
}
.ss-nav-links .theme-toggle svg,
.nav-links .theme-toggle svg,
.nav-right .theme-toggle svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 900px) {
  .ss-nav-links .theme-toggle,
  .nav-links .theme-toggle {
    display: none; /* hide when nav collapses; user uses mobile menu */
  }
}

/* Fixed floating variant — shown on mobile, hidden on desktop (nav has its own) */
.theme-toggle.floating {
  position: fixed;
  top: 1.1rem;
  right: 5.5rem;
  z-index: 10000;
  background: rgba(8,8,8,0.85);
  backdrop-filter: blur(10px);
}
body.light-mode .theme-toggle.floating {
  background: rgba(255,255,255,0.85);
}
/* Hide floating when a nav-injected toggle exists above 900px */
@media (min-width: 901px) {
  .theme-toggle.floating.ss-mobile-only {
    display: none;
  }
}
@media (max-width: 900px) {
  .theme-toggle.floating {
    top: 0.7rem;
    right: 4rem;
    width: 38px;
    height: 38px;
  }
  .theme-toggle.floating svg { width: 16px; height: 16px; }
}

/* =======================================================
   I) LIGHT MODE — RESKIN THE WHOLE SITE
======================================================= */
body.light-mode {
  background: var(--ss-bg) !important;
  color: var(--ss-body) !important;
}
body.light-mode .top-nav,
body.light-mode .ss-nav,
body.light-mode nav.nav {
  background: rgba(246,242,234,0.92) !important;
  border-bottom: 1px solid var(--ss-border) !important;
}
body.light-mode .nav-right a,
body.light-mode .ss-nav a,
body.light-mode nav a {
  color: rgba(10,10,10,0.68) !important;
}
body.light-mode .nav-right a:hover,
body.light-mode .nav-right a.active {
  color: var(--ss-accent) !important;
}
body.light-mode .nav-logo,
body.light-mode .foot-logo {
  color: var(--ss-accent) !important;
}
body.light-mode .nav-cta {
  color: var(--ss-accent) !important;
  border-color: var(--ss-accent) !important;
}
body.light-mode .nav-cta:hover {
  background: var(--ss-accent) !important;
  color: #fff !important;
}
body.light-mode .sec,
body.light-mode section,
body.light-mode .funnel-sec,
body.light-mode .pricing,
body.light-mode .abm-sec,
body.light-mode .svc-section,
body.light-mode .cta-block {
  background: transparent !important;
  color: var(--ss-body) !important;
}
body.light-mode .svc-card,
body.light-mode .case-card,
body.light-mode .ind-card,
body.light-mode .pain-card,
body.light-mode .feature-card,
body.light-mode .value-card,
body.light-mode .step-card,
body.light-mode .phase-card,
body.light-mode .price-card,
body.light-mode .fcol,
body.light-mode .conn-item,
body.light-mode .conn-card {
  background: #fff !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.05);
}
body.light-mode .svc-card h2,
body.light-mode .svc-card h3,
body.light-mode .pain-card h3,
body.light-mode .feature-card h3,
body.light-mode .value-card h3,
body.light-mode .step-card h3,
body.light-mode .phase-card h3,
body.light-mode .price-card h3,
body.light-mode .sec h2,
body.light-mode .sec h3,
body.light-mode section h2,
body.light-mode section h3 {
  color: var(--ss-heading) !important;
  text-shadow: none !important;
}
body.light-mode .svc-card p,
body.light-mode .svc-desc,
body.light-mode .case-body,
body.light-mode .ind-card p,
body.light-mode .pain-card p,
body.light-mode .feature-card p,
body.light-mode .value-card p,
body.light-mode .step-card p,
body.light-mode .phase-card p,
body.light-mode .price-card p,
body.light-mode .sec p,
body.light-mode section p,
body.light-mode .inner p,
body.light-mode .fcol ul li,
body.light-mode .svc-features li,
body.light-mode .price-card ul li {
  color: var(--ss-body) !important;
  text-shadow: none !important;
}
body.light-mode footer,
body.light-mode .foot-inner {
  background: #f0ebe2 !important;
  border-top: 1px solid var(--ss-border) !important;
}
body.light-mode .foot-col h4,
body.light-mode .foot-col h5 {
  color: var(--ss-heading) !important;
}
body.light-mode .foot-col a,
body.light-mode .foot-desc,
body.light-mode .foot-bottom {
  color: rgba(10,10,10,0.6) !important;
}
body.light-mode .foot-col a:hover {
  color: var(--ss-accent) !important;
}
body.light-mode .btn-red {
  background: var(--ss-accent) !important;
  color: #fff !important;
  border-color: var(--ss-accent) !important;
}
body.light-mode .btn-outline {
  color: var(--ss-heading) !important;
  border-color: rgba(0,0,0,0.25) !important;
}
body.light-mode .ticker-wrap {
  background: rgba(255,153,51,0.05) !important;
  border-color: rgba(255,153,51,0.18) !important;
}
body.light-mode .ticker-item {
  color: rgba(10,10,10,0.55) !important;
}
/* In light mode, grain/scanline overlays are distracting */
body.light-mode::before,
body.light-mode::after {
  display: none !important;
}
body.light-mode .stencil,
body.light-mode .svc-bg-num,
body.light-mode .ss-sec-num,
body.light-mode [class*="watermark"],
body.light-mode .ss-bg-text,
body.light-mode .bg-text {
  color: rgba(10,10,10,0.08) !important;
  mix-blend-mode: multiply;
}
/* Light-mode pain-card (problem grid) */
body.light-mode .pain-card {
  background: #fff !important;
}
body.light-mode .pain-card h3 {
  color: var(--ss-heading) !important;
}
/* Orange star cursor is invisible on white — swap */
@media(pointer:fine) {
  body.light-mode {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpolygon points='10,1 12.5,7.5 19,7.5 14,12 16,18.5 10,14.5 4,18.5 6,12 1,7.5 7.5,7.5' fill='%23C2410C' stroke='%23000' stroke-width='0.5'/%3E%3C/svg%3E") 10 10, auto !important;
  }
}

/* =======================================================
   J) FIX SQUASHED TEXT — ensure <br>s keep a space buffer
   If a <br> gets collapsed by an extension/overlay,
   the pseudo-space prevents "AUTOMATIONCOSTS" / "DOESTHE".
======================================================= */
.svc-card h2 br,
.svc-card h3 br,
.sec h2 br,
section h2 br,
h2.rr br,
.pain-card h3 br {
  content: " ";
  display: inline;
  white-space: pre;
}
/* Safari/Firefox fallback: inject a thin space if br is unsupported */
.svc-card h2 br::after,
.sec h2 br::after,
h2.rr br::after {
  content: " ";
  white-space: pre;
}

/* =======================================================
   K) EXTRA POLISH — match screenshot critique
======================================================= */
/* Card stencil captions (BE THE ANSWER, YOUR BRAND. OUR ENGINE.) bigger on wide */
@media (min-width: 960px) {
  .svc-card .stencil {
    font-size: 3.2rem !important;
    letter-spacing: 0.02em !important;
  }
}
/* Pain grid — tighten columns, widen gaps, keep 4-up on desktop */
.pain-grid {
  gap: 1.4rem !important;
}
@media (min-width: 960px) {
  .pain-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Hero sub line — always readable */
.hero-sub, .page-sub, .hero p {
  color: var(--ss-body) !important;
  font-weight: 400 !important;
}

/* Footer description text — client said "too small/too dark" */
.foot-desc, .foot-col a, .foot-col p {
  color: rgba(255,255,255,0.62) !important;
  font-size: 0.88rem !important;
  line-height: 1.7 !important;
}
.foot-col h4, .foot-col h5 {
  color: var(--ss-heading) !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.9rem !important;
}

/* Ticker: brighter so it pops */
.ticker-item {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.9rem !important;
}

/* What we migrate (legacy -> modernised) — ensure legacy labels still visible */
.wm-label, .wm-legacy-label, .wm-modern-label,
[class*="migrate"] .label,
.what-migrate .label {
  color: var(--ss-accent) !important;
  opacity: 0.85 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
}

/* =======================================================
   L) CATCH-ALL: bump stat labels, small meta, blog excerpts
======================================================= */
.stat-label, .stat-lbl,
.blog-excerpt, .blog-meta, .blog-card p,
.case-desc, .card-desc, .card-body,
.origin-desc, .philosophy-desc, .india-desc,
.build-sub, .hero-note,
.meta-tag, .origin-meta,
.step-meta, .phase-meta {
  color: var(--ss-body) !important;
  font-size: clamp(0.85rem, 1.2vw, 0.95rem) !important;
  line-height: 1.6 !important;
  opacity: 1 !important;
}

/* Section kickers (small orange uppercase labels) — make them pop */
div[style*="color:var(--red)"][style*="Space Mono"],
div[style*="color: var(--red)"][style*="Space Mono"] {
  font-weight: 600 !important;
  opacity: 0.95 !important;
  letter-spacing: 0.22em !important;
}

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
  .stencil, .svc-bg-num, .ss-sec-num,
  [class*="watermark"], .bg-text, .ss-bg-text,
  .hero::before, .cta-block::before {
    animation: none !important;
  }
}