/* =============================================================
   BITNEKA — CODEX DARK SYSTEM v3
   Master override · Loads LAST · Maximum specificity
   BLACK-FIRST · EDITORIAL · PREMIUM · INTERNATIONAL-STANDARD
   ============================================================= */

/* ══════════════════════════════════════════════════════════
   1. DESIGN TOKENS
══════════════════════════════════════════════════════════ */
:root {
  /* ══════════════════════════════════════════════════════════
     CANONICAL GLOBAL DESIGN TOKENS
  ══════════════════════════════════════════════════════════ */
  --page-bg:             #000000;
  --surface-1:            #0C0C0C;
  --surface-2:            #111111;
  --surface-hover:        #181818;
  --text-primary:         #FFFFFF;
  --text-secondary:       #A0A0A0;
  --text-muted:           #64748b;
  --border-soft:          rgba(255, 255, 255, 0.08);
  --accent:               #4F6EF7;
  --container-wide:       1360px;
  --container-standard:   1240px;
  --container-reading:    780px;
  --section-space-xl:     clamp(80px, 8vw, 120px);
  --section-space-lg:     clamp(56px, 6vw, 84px);
  --section-space-md:     clamp(36px, 4vw, 56px);
  --mobile-gutter:        20px;

  /* ── Codex-Dark Aliases ── */
  --c-canvas:             var(--page-bg);
  --c-surface-0:          #060606;
  --c-surface-1:          var(--surface-1);
  --c-surface-2:          var(--surface-2);
  --c-surface-3:          var(--surface-hover);
  --c-card:               var(--surface-2);
  --c-card-hover:         var(--surface-hover);
  --c-elevated:           #1C1C1C;

  /* ── Typography ── */
  --c-text-primary:       var(--text-primary);
  --c-text-secondary:     var(--text-secondary);
  --c-text-muted:         var(--text-muted);
  --c-text-body:          #999999;

  /* ── Borders ── */
  --c-border:             var(--border-soft);
  --c-border-strong:      rgba(255, 255, 255, 0.12);
  --c-border-accent:      rgba(79, 110, 247, 0.22);

  /* ── Accent ── */
  --c-accent:             var(--accent);
  --c-accent-hover:       #7FA8FF;
  --c-accent-soft:        rgba(79, 110, 247, 0.09);
  --c-green:              #34d399;
  --c-green-soft:         rgba(52, 211, 153, 0.09);

  /* ── Geometry ── */
  --c-radius-sm:          6px;
  --c-radius:             10px;
  --c-radius-lg:          14px;
  --c-radius-pill:        999px;

  /* ── Spacing ── */
  --c-section:            var(--section-space-xl);
  --c-section-sm:         var(--section-space-md);
  --c-container:          var(--container-standard);

  /* ── Motion ── */
  --c-ease:               cubic-bezier(.22, 1, .36, 1);
  --c-dur-fast:           140ms;
  --c-dur:                240ms;
  --c-dur-slow:           420ms;

  /* ── Legacy token override (prevents other files fighting us) ── */
  --bg-primary:           #000000 !important;
  --bg-surface:           #0C0C0C !important;
  --bg-card:              #111111 !important;
  --bg-card-hover:        #191919 !important;
  --bg-page:              #000000 !important;
  --text-primary:         #FFFFFF !important;
  --text-body:            #999999 !important;
  --text-muted:           #5A5A5A !important;
  --text-secondary:       #A0A0A0 !important;
  --border-color:         rgba(255,255,255,0.07) !important;
  --border:               rgba(255,255,255,0.07) !important;
  --line:                 rgba(255,255,255,0.07) !important;
  --header-bg:            rgba(0,0,0,0.88) !important;
  --footer-bg:            #000000 !important;
  --surface:              #0C0C0C !important;
  --background-primary:   #000000 !important;
  --background-secondary: #0C0C0C !important;
  --background-tertiary:  #111111 !important;
  --surface-primary:      #111111 !important;
  --surface-secondary:    #141414 !important;
  --surface-elevated:     #191919 !important;
  --ent-navy:             #000000 !important;
  --ent-navy-2:           #0C0C0C !important;
  --ent-line:             rgba(255,255,255,0.07) !important;
  --ent-surface:          #0C0C0C !important;
  --primary:              #4F6EF7 !important;
  --blue:                 #4F6EF7 !important;
  --navy:                 #ffffff !important;
  --gray:                 #A0A0A0 !important;
}

/* ══════════════════════════════════════════════════════════
   2. BASE CANVAS — PURE BLACK
══════════════════════════════════════════════════════════ */
html,
html body {
  background: #000000 !important;
  color: #999999 !important;
  color-scheme: dark !important;
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

/* Kill every accidental non-black background */
section,
main,
article,
aside,
.wrap,
.container {
  background-color: transparent !important;
}

/* Remove legacy white/gradient backgrounds from style.css */
.services-section,
.partners-section,
.achievements-section,
.team-performance,
.contact-section,
.cta-section,
.careers-hero,
.page-hero {
  background: transparent !important;
  background-image: none !important;
}

/* ══════════════════════════════════════════════════════════
   2b. MASTER CONTAINER TIERS & ALIGNMENT SYSTEM
══════════════════════════════════════════════════════════ */
.wrap,
.container {
  width: 100% !important;
  max-width: var(--container-standard) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--mobile-gutter) !important;
  padding-right: var(--mobile-gutter) !important;
  box-sizing: border-box !important;
}

.wrap-wide,
.container-wide {
  width: 100% !important;
  max-width: var(--container-wide) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--mobile-gutter) !important;
  padding-right: var(--mobile-gutter) !important;
  box-sizing: border-box !important;
}

.wrap-reading,
.container-reading {
  width: 100% !important;
  max-width: var(--container-reading) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--mobile-gutter) !important;
  padding-right: var(--mobile-gutter) !important;
  box-sizing: border-box !important;
}

/* Master section spacing rhythm */
.section-pad {
  padding-top: var(--section-space-xl) !important;
  padding-bottom: var(--section-space-xl) !important;
}
.section-pad-sm {
  padding-top: var(--section-space-md) !important;
  padding-bottom: var(--section-space-md) !important;
}

/* Deliberate alignment helpers */
.editorial-left {
  text-align: left !important;
}
.editorial-left * {
  text-align: left;
}
.content-center {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ══════════════════════════════════════════════════════════
   3. TYPOGRAPHY SYSTEM
   Hierarchy through scale, not colour or boxes.
══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: Manrope, Inter, system-ui, sans-serif !important;
  color: #FFFFFF !important;
  letter-spacing: -0.025em !important;
  line-height: 1.08 !important;
}

/* Display / H1 — hero scale */
h1,
.hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
}

/* Section H2 — editorial statement */
h2 {
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
}

/* Card / subsection H3 */
h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.6rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

h4 {
  font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
  font-weight: 700 !important;
}

p {
  color: #999999 !important;
  line-height: 1.72 !important;
}

/* ── Eyebrow / Label ── */
.eyebrow,
.fq-eyebrow-tag,
.hero-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(52, 211, 153, 0.07) !important;
  border: 1px solid rgba(52, 211, 153, 0.20) !important;
  color: #34d399 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  margin-bottom: 18px !important;
  font-family: Manrope, Inter, sans-serif !important;
}
.eyebrow::before,
.eyebrow::after { display: none !important; }

.eyebrow--light {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.62) !important;
}

/* ── Gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, #7fa8ff 0%, #c084fc 50%, #7fa8ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* ══════════════════════════════════════════════════════════
   4. BUTTON SYSTEM
══════════════════════════════════════════════════════════ */
/* Primary — white pill, black text */
.btn-primary,
a.btn-primary,
.btn.btn-primary,
.btn.btn-primary.btn-hero,
#heroCtaBtn,
#navCtaBtn,
#ctaMainBtn,
.btn-cta-primary {
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  font-size: 14.5px !important;
  box-shadow: 0 4px 20px rgba(255,255,255,0.10) !important;
  transition: transform 0.22s var(--c-ease), box-shadow 0.22s ease !important;
  letter-spacing: -0.01em !important;
}
.btn-primary:hover,
a.btn-primary:hover,
.btn.btn-primary:hover,
#heroCtaBtn:hover,
#navCtaBtn:hover {
  background: #f0f0f0 !important;
  color: #000000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(255,255,255,0.18) !important;
}

/* Ghost — dark border pill */
a.btn-hero-ghost,
.btn-hero-ghost,
.btn-ghost,
.btn-cta-ghost {
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.9) !important;
  padding: 13px 28px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}
a.btn-hero-ghost:hover,
.btn-hero-ghost:hover,
.btn-ghost:hover,
.btn-cta-ghost:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: #ffffff !important;
}

/* Btn arrow motion */
.btn-arrow,
.btn svg,
.work-cta svg,
.srv-view-all svg {
  transition: transform 0.22s var(--c-ease) !important;
}
.btn:hover .btn-arrow,
.btn:hover svg,
a:hover .btn-arrow { transform: translateX(4px) !important; }

/* ══════════════════════════════════════════════════════════
   5. HEADER — BLACK GLASS
══════════════════════════════════════════════════════════ */
.site-header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 999 !important;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
}

.site-header.scrolled {
  background: rgba(0, 0, 0, 0.97) !important;
  box-shadow: 0 1px 40px rgba(0, 0, 0, 0.8) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

.nav-link {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: color 0.18s ease, background 0.18s ease !important;
}
.nav-link:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.nav-link--active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Mega panel */
.nav-mega-panel {
  background: #0D0D0D !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255,255,255,0.04) !important;
  border-radius: 16px !important;
}
.mega-col {
  border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
}
.mega-col-label,
.mega-group-label {
  color: rgba(255, 255, 255, 0.38) !important;
}
.mega-link strong,
.mega-text strong {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 13px !important;
}
.mega-link span,
.mega-text small {
  color: rgba(255, 255, 255, 0.42) !important;
  font-size: 11.5px !important;
}
.mega-link:hover,
.mega-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Mobile menu */
#mobileMenu,
.mobile-menu {
  background: #050505 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
}
.mm-top {
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
  background: transparent !important;
}
.mm-link,
.mobile-menu a {
  color: rgba(255, 255, 255, 0.75) !important;
  background: rgba(255,255,255,0.02) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.mm-link:hover,
.mobile-menu a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.mm-close-btn {
  color: rgba(255,255,255,0.6) !important;
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.mm-close-btn:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.08) !important;
}
.mm-footer {
  border-top-color: rgba(255,255,255,0.07) !important;
}
.nav-hamburger {
  border-color: rgba(255,255,255,0.14) !important;
  background: transparent !important;
}
.nav-hamburger span {
  background: rgba(255,255,255,0.72) !important;
}
.nav-hamburger:hover {
  border-color: rgba(255,255,255,0.30) !important;
  background: rgba(255,255,255,0.05) !important;
}
.mm-acc-item {
  color: rgba(255,255,255,0.68) !important;
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.07) !important;
}
.mm-acc-item:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.07) !important;
}
.mm-acc-item i { color: rgba(255,255,255,0.45) !important; }

/* ══════════════════════════════════════════════════════════
   6. HERO SECTION
   Full-bleed video · Black canvas · No navy overlay
══════════════════════════════════════════════════════════ */
.hero {
  background: #000000 !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
}

.hero-overlay {
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.93) 0%,
    rgba(0, 0, 0, 0.72) 45%,
    rgba(0, 0, 0, 0.38) 100%
  ) !important;
}

/* Hero blobs — purple only, very subtle */
.blob-1 {
  background: radial-gradient(circle, rgba(79,110,247,0.18) 0%, transparent 70%) !important;
}
.blob-2 {
  background: radial-gradient(circle, rgba(124,58,237,0.14) 0%, transparent 70%) !important;
}

.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
  margin-bottom: 22px !important;
}

.hero-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(52,211,153,0.07) !important;
  border: 1px solid rgba(52,211,153,0.20) !important;
  color: #34d399 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  margin-bottom: 22px !important;
}

.hero-sub {
  font-size: 17px !important;
  line-height: 1.72 !important;
  color: rgba(255,255,255,0.62) !important;
  max-width: 520px !important;
  margin-bottom: 32px !important;
}

.hero-stats { gap: 28px !important; }

.hstat b {
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  font-family: Manrope, sans-serif !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}
.hstat span {
  font-size: 12px !important;
  color: rgba(255,255,255,0.48) !important;
  font-weight: 500 !important;
  margin-top: 3px !important;
}

.hstat-div {
  width: 1px !important;
  height: 32px !important;
  background: rgba(255,255,255,0.12) !important;
  align-self: center !important;
}

/* Hero mockup card */
.hero-mockup-card {
  background: rgba(14,14,14,0.92) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06) !important;
}
.mockup-header {
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}
.mockup-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
}
.mockup-dots .mockup-dot:nth-child(1) { background: #ef4444 !important; }
.mockup-dots .mockup-dot:nth-child(2) { background: #f59e0b !important; }
.mockup-dots .mockup-dot:nth-child(3) { background: #22c55e !important; }

.mockup-metric-value {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.04em !important;
  font-family: Manrope, sans-serif !important;
}
.mockup-metric-label {
  font-size: 12px !important;
  color: rgba(255,255,255,0.45) !important;
  margin-top: 4px !important;
}

.mockup-bar {
  border-radius: 3px 3px 0 0 !important;
  background: linear-gradient(180deg, rgba(79,110,247,0.9) 0%, rgba(79,110,247,0.4) 100%) !important;
  flex: 1 !important;
}
.mockup-footer {
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  padding-top: 12px !important;
  margin-top: 14px !important;
}
.mockup-status-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #34d399 !important;
  box-shadow: 0 0 6px rgba(52,211,153,0.6) !important;
  animation: pulseGreen 2s ease-in-out infinite !important;
}
@keyframes pulseGreen {
  0%, 100% { box-shadow: 0 0 6px rgba(52,211,153,0.6); }
  50%       { box-shadow: 0 0 12px rgba(52,211,153,0.9); }
}

/* ══════════════════════════════════════════════════════════
   7. TRUST BAR
   Single row logos · Pure black · No block background
══════════════════════════════════════════════════════════ */
.trust-section {
  background: #000000 !important;
  padding: 32px 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.trust-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.3) !important;
  text-align: center !important;
  margin-bottom: 22px !important;
  display: block !important;
}

.trust-logos {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(24px, 4vw, 56px) !important;
  flex-wrap: wrap !important;
}

.trust-logo img {
  height: 24px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.32 !important;
  transition: opacity 0.22s ease !important;
}
.trust-logo:hover img {
  opacity: 0.65 !important;
}

/* ══════════════════════════════════════════════════════════
   8. SERVICES SECTION
   Bento image grid — NOT generic card grid
══════════════════════════════════════════════════════════ */
.services-section {
  background: #000000 !important;
  padding: clamp(80px, 9vw, 128px) 0 !important;
}

.srv-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  margin-bottom: 48px !important;
  gap: 24px !important;
}

.srv-header h2 {
  margin-bottom: 0 !important;
}

.srv-view-all {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.55) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding-bottom: 4px !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}
.srv-view-all:hover {
  color: #ffffff !important;
  border-bottom-color: rgba(255,255,255,0.45) !important;
}
.srv-view-all svg {
  transition: transform 0.22s var(--c-ease) !important;
}
.srv-view-all:hover svg { transform: translateX(4px) !important; }

/* Bento grid */
.srv-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 16px !important;
}

.srv-card {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: #111111 !important;
  aspect-ratio: 4 / 3 !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.35s var(--c-ease), border-color 0.35s ease, box-shadow 0.35s ease !important;
}
.srv-card:first-child {
  grid-column: 1 / 3 !important;
  grid-row: 1 / 2 !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 16px !important;
}
.srv-card:nth-child(3) { border-radius: 16px !important; }
.srv-card:nth-child(4) { border-radius: 16px !important; }
.srv-card:last-child   { border-radius: 16px !important; }
.srv-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6) !important;
}

.srv-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    0deg,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.30) 55%,
    rgba(0,0,0,0.08) 100%
  ) !important;
  transition: background 0.4s ease !important;
}
.srv-card:hover .srv-overlay {
  background: linear-gradient(
    0deg,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.50) 60%,
    rgba(0,0,0,0.15) 100%
  ) !important;
}

.srv-content {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 24px !important;
  z-index: 2 !important;
}

.srv-tag {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.55) !important;
  margin-bottom: 8px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.srv-content h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem) !important;
  color: #ffffff !important;
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
}

.srv-content p {
  font-size: 13px !important;
  color: rgba(255,255,255,0.50) !important;
  line-height: 1.6 !important;
  margin-bottom: 12px !important;
  max-width: 340px !important;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}
.srv-card:hover .srv-content p {
  opacity: 1;
  transform: translateY(0);
}

.srv-arrow {
  font-size: 18px !important;
  color: rgba(255,255,255,0.55) !important;
  transition: transform 0.3s var(--c-ease), color 0.2s ease !important;
}
.srv-card:hover .srv-arrow {
  transform: translateX(6px) !important;
  color: #ffffff !important;
}

.srv-card:hover {
  transform: none !important;
}

.srv-more {
  margin-top: 24px !important;
  padding-top: 20px !important;
}
.srv-more p {
  font-size: 13px !important;
  color: rgba(255,255,255,0.38) !important;
}
.srv-more a {
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  transition: color 0.18s ease, border-color 0.18s ease !important;
}
.srv-more a:hover {
  color: rgba(255,255,255,0.88) !important;
  border-bottom-color: rgba(255,255,255,0.4) !important;
}

/* ══════════════════════════════════════════════════════════
   9. TECHNOLOGY SECTION
   Open text layout · No card boxes
══════════════════════════════════════════════════════════ */
.tech-section {
  background: #060606 !important;
  padding: clamp(80px, 9vw, 120px) 0 !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

.tech-header {
  max-width: 600px !important;
  margin-bottom: 56px !important;
}
.tech-header h2 { margin-bottom: 0 !important; }

.tech-groups {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.tech-group {
  padding: 28px !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
  background: transparent !important;
}
.tech-group:last-child { border-right: none !important; }

.tech-group-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.35) !important;
  margin-bottom: 18px !important;
  display: block !important;
}

.tech-pills {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.tech-pills li {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.62) !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  transition: color 0.18s ease !important;
}
.tech-pills li:last-child { border-bottom: none !important; }
.tech-pills li:hover { color: rgba(255,255,255,0.92) !important; }

/* ══════════════════════════════════════════════════════════
   10. INDUSTRIES SECTION
   Tab panel · Full-width · Clean structure
══════════════════════════════════════════════════════════ */
.industries-section {
  background: #000000 !important;
  padding: clamp(80px, 9vw, 128px) 0 !important;
}

.industries-section > .wrap > .eyebrow { display: inline-flex !important; }
.industries-section > .wrap > h2 {
  margin-bottom: 48px !important;
}

.industries-panel {
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  gap: 0 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: transparent !important;
}

.industries-tabs {
  display: flex !important;
  flex-direction: column !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
  background: #080808 !important;
}

.ind-tab {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 18px 24px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.48) !important;
  text-align: left !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: color 0.18s ease, background 0.18s ease !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  font-family: inherit !important;
}
.ind-tab:last-child { border-bottom: none !important; }
.ind-tab:hover { color: rgba(255,255,255,0.78) !important; background: rgba(255,255,255,0.03) !important; }
.ind-tab--active,
.ind-tab[aria-selected="true"] {
  color: #ffffff !important;
  background: rgba(255,255,255,0.05) !important;
}

.ind-num {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: rgba(255,255,255,0.25) !important;
  font-family: Manrope, sans-serif !important;
}
.ind-tab--active .ind-num,
.ind-tab[aria-selected="true"] .ind-num {
  color: #4F6EF7 !important;
}

.industries-content {
  background: transparent !important;
  padding: 0 !important;
}

.ind-panel {
  padding: 48px 48px !important;
  display: none !important;
}
.ind-panel--active,
.ind-panel:not([hidden]) {
  display: block !important;
}

.ind-panel-tag {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #4F6EF7 !important;
  margin-bottom: 16px !important;
}
.ind-panel-body h3 {
  font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
  margin-bottom: 16px !important;
  max-width: 520px !important;
}
.ind-panel-body > p {
  font-size: 15px !important;
  line-height: 1.75 !important;
  max-width: 520px !important;
  margin-bottom: 28px !important;
}

.ind-caps {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 32px !important;
}
.ind-caps li {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.62) !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  letter-spacing: 0.01em !important;
}

.ind-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.14) !important;
  padding-bottom: 2px !important;
  transition: color 0.18s ease, border-color 0.18s ease !important;
}
.ind-cta:hover {
  color: #ffffff !important;
  border-bottom-color: rgba(255,255,255,0.45) !important;
}
.ind-cta svg { transition: transform 0.22s var(--c-ease) !important; }
.ind-cta:hover svg { transform: translateX(4px) !important; }

/* ══════════════════════════════════════════════════════════
   11. SELECTED WORK
   Editorial case study layout · Dark image cards
══════════════════════════════════════════════════════════ */
.work-section {
  background: #000000 !important;
  padding: clamp(80px, 9vw, 128px) 0 !important;
}

.work-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  margin-bottom: 48px !important;
  gap: 24px !important;
}

.work-grid {
  display: grid !important;
  grid-template-columns: 1.35fr 1fr 1fr !important;
  gap: 20px !important;
}

.work-card {
  background: #0E0E0E !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.35s var(--c-ease), border-color 0.35s ease, box-shadow 0.35s ease !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}
.work-card:hover {
  background: #121212 !important;
  transform: translateY(-4px) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6) !important;
}

.work-card-image {
  width: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: #0A0A0A !important;
  aspect-ratio: 16 / 10 !important;
  border-radius: 15px 15px 0 0 !important;
  transition: filter 0.4s ease !important;
}
.work-card:hover .work-card-image {
  filter: brightness(1.08) !important;
}

.work-card-body {
  padding: 24px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}

.work-card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.work-type {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #4F6EF7 !important;
  background: rgba(79,110,247,0.08) !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
}

.work-industry {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.35) !important;
}

.work-card h3 {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem) !important;
  margin-bottom: 4px !important;
}

.work-card-story { display: flex; flex-direction: column; gap: 10px; }

.work-story-item { display: flex; flex-direction: column; gap: 4px; }

.work-story-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.30) !important;
}
.work-story-item p {
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.55) !important;
  margin: 0 !important;
}

.work-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.40) !important;
  text-decoration: none !important;
  margin-top: auto !important;
  transition: color 0.18s ease !important;
}
.work-cta:hover { color: rgba(255,255,255,0.85) !important; }
.work-cta svg { transition: transform 0.22s var(--c-ease) !important; }
.work-cta:hover svg { transform: translateX(4px) !important; }

/* ══════════════════════════════════════════════════════════
   12. SCALE / STATS SECTION
   Large open numbers · No card containers · Pure typography
══════════════════════════════════════════════════════════ */
.scale-section {
  background: #000000 !important;
  padding: clamp(80px, 9vw, 128px) 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.scale-header {
  text-align: center !important;
  max-width: 580px !important;
  margin: 0 auto 64px !important;
}
.scale-header h2 { margin-bottom: 0 !important; }

.scale-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
}

.scale-stat {
  text-align: center !important;
  padding: 32px 24px !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.scale-stat:last-child { border-right: none !important; }

.scale-num {
  margin-bottom: 10px !important;
}
.scale-num span {
  font-size: clamp(2.8rem, 5vw, 4.5rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  font-family: Manrope, sans-serif !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}

.scale-stat > p {
  font-size: 13px !important;
  color: rgba(255,255,255,0.40) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

/* ══════════════════════════════════════════════════════════
   13. PROCESS SECTION
   Numbered editorial list · Split layout · No card boxes
══════════════════════════════════════════════════════════ */
.process-section {
  background: #060606 !important;
  padding: clamp(80px, 9vw, 128px) 0 !important;
}

.process-header {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 80px !important;
  margin-bottom: 64px !important;
  align-items: end !important;
}

.process-header h2 { margin-bottom: 0 !important; }

.process-intro {
  font-size: 16px !important;
  color: rgba(255,255,255,0.50) !important;
  align-self: end !important;
  max-width: 400px !important;
}

.process-steps {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}

.process-row {
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  gap: 48px !important;
  align-items: start !important;
  padding: 32px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: none !important;
}
.process-row:last-child { border-bottom: none !important; }

.process-badge {
  display: flex !important;
  align-items: baseline !important;
  gap: 14px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.process-num {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.25) !important;
  letter-spacing: 0.06em !important;
  font-family: Manrope, sans-serif !important;
}

.process-title {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.process-desc {
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,0.50) !important;
  margin: 0 !important;
  align-self: center !important;
}

/* ══════════════════════════════════════════════════════════
   14. TESTIMONIALS SECTION
   Dark cards on black · Not navy blocks
══════════════════════════════════════════════════════════ */
.testimonials-section {
  background: #000000 !important;
  padding: clamp(80px, 9vw, 128px) 0 !important;
}

.testi-header {
  text-align: center !important;
  max-width: 600px !important;
  margin: 0 auto 56px !important;
}
.testi-subtitle {
  font-size: 15px !important;
  color: rgba(255,255,255,0.38) !important;
  margin: 12px 0 0 !important;
}

.testi-slider-wrap {
  position: relative !important;
  overflow: hidden !important;
  background: none !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 0 0 8px !important;
}

.testi-track {
  display: flex !important;
  gap: 16px !important;
  transition: transform 0.5s var(--c-ease) !important;
}

.testi-slide {
  background: #111111 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px !important;
  padding: 28px !important;
  min-width: calc(33.333% - 11px) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  transition: border-color 0.22s ease, background 0.22s ease !important;
}
.testi-slide:hover {
  background: #151515 !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.testi-photo-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid rgba(255,255,255,0.12) !important;
  flex-shrink: 0 !important;
}
.testi-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.testi-stars {
  font-size: 13px !important;
  color: #f59e0b !important;
  letter-spacing: 1px !important;
}

.testi-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  display: block !important;
}
.testi-role {
  font-size: 12px !important;
  color: rgba(255,255,255,0.40) !important;
  display: block !important;
}

.testi-text {
  font-size: 13.5px !important;
  line-height: 1.72 !important;
  color: rgba(255,255,255,0.60) !important;
  margin: 4px 0 0 !important;
  font-style: italic !important;
}

/* Arrows */
.testi-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.65) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 5 !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}
.testi-arrow:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
}
.testi-arrow-prev { left: -20px !important; }
.testi-arrow-next { right: -20px !important; }

.testi-dots {
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 28px !important;
}
.testi-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.18) !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.18s ease, transform 0.18s ease !important;
}
.testi-dot.active {
  background: rgba(255,255,255,0.75) !important;
  transform: scale(1.4) !important;
}

/* ══════════════════════════════════════════════════════════
   15. TEAM SECTION
   Split layout · Photo grid · No generic cards
══════════════════════════════════════════════════════════ */
.team-section {
  background: #060606 !important;
  padding: clamp(80px, 9vw, 128px) 0 !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.team-layout {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 80px !important;
  align-items: center !important;
}

.team-copy h2 { margin-bottom: 16px !important; }
.team-copy > p {
  font-size: 15px !important;
  line-height: 1.78 !important;
  color: rgba(255,255,255,0.50) !important;
  margin-bottom: 28px !important;
  max-width: 440px !important;
}

.team-caps {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 32px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.team-caps li {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.55) !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 5px !important;
  padding: 5px 12px !important;
}

.team-metrics {
  display: flex !important;
  gap: 32px !important;
  padding-top: 28px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}
.team-metric {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.team-metric strong {
  font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  font-family: Manrope, sans-serif !important;
  letter-spacing: -0.04em !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
}
.team-metric span {
  font-size: 12px !important;
  color: rgba(255,255,255,0.40) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Photo grid */
.team-photo-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3px !important;
}
.team-photo {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  display: block !important;
  background: #111111 !important;
  filter: grayscale(20%) !important;
  transition: filter 0.3s ease !important;
}
.team-photo:hover { filter: grayscale(0%) !important; }
.team-photo:first-child { border-radius: 10px 0 0 0 !important; }
.team-photo:nth-child(2) { border-radius: 0 10px 0 0 !important; }
.team-photo:nth-child(3) { border-radius: 0 0 0 10px !important; }
.team-photo:last-child   { border-radius: 0 0 10px 0 !important; }

.team-visual-card {
  margin-top: 12px !important;
  padding: 16px 20px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.team-visual-card > span:first-child {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.75) !important;
}
.team-visual-sub {
  font-size: 12px !important;
  color: rgba(255,255,255,0.38) !important;
}

/* ══════════════════════════════════════════════════════════
   16. WHY BITNEKA SECTION
   Editorial numbered list · Not card grid
══════════════════════════════════════════════════════════ */
.why-section {
  background: #000000 !important;
  padding: clamp(80px, 9vw, 128px) 0 !important;
}

.why-header {
  max-width: 520px !important;
  margin-bottom: 56px !important;
}

.why-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  border-left: 1px solid rgba(255,255,255,0.07) !important;
}

.why-item {
  padding: 36px 32px !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background 0.22s ease !important;
}
.why-item:hover { background: rgba(255,255,255,0.02) !important; }

.why-num {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: rgba(255,255,255,0.22) !important;
  margin-bottom: 18px !important;
  font-family: Manrope, sans-serif !important;
}

.why-body h3 {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem) !important;
  margin-bottom: 10px !important;
}
.why-body p {
  font-size: 13.5px !important;
  line-height: 1.72 !important;
  color: rgba(255,255,255,0.48) !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   17. LIFE AT BITNEKA / INSTA / FEATURED CONTENT
══════════════════════════════════════════════════════════ */
.life-section,
.insta-section,
[class*="life-"],
[class*="insta-"] {
  background: #060606 !important;
}

/* ══════════════════════════════════════════════════════════
   18. FAQ SECTION
   Accordion · Minimal · Black canvas
══════════════════════════════════════════════════════════ */
.fq-section {
  padding: 96px 0 !important;
  background: #000000 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

.fq-h {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  color: #ffffff !important;
  margin-bottom: 48px !important;
}

.fq-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
}
.fq-card:hover {
  background: rgba(255,255,255,0.055) !important;
  border-color: rgba(255,255,255,0.13) !important;
}
.fq-card.is-open {
  border-color: rgba(79,110,247,0.32) !important;
  background: rgba(79,110,247,0.04) !important;
}
.fq-trigger {
  color: rgba(255,255,255,0.80) !important;
  font-size: 15px !important;
}
.fq-trigger:hover { color: #ffffff !important; }
.fq-card.is-open .fq-trigger { color: #ffffff !important; }
.fq-body {
  color: rgba(255,255,255,0.48) !important;
  font-size: 14px !important;
  line-height: 1.76 !important;
}

/* ══════════════════════════════════════════════════════════
   19. FINAL CTA SECTION
   Full-width statement · Black + subtle glow
══════════════════════════════════════════════════════════ */
.final-cta-section,
section[class*="cta-final"],
.cta-banner {
  background: #000000 !important;
  border: none !important;
  border-radius: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: clamp(80px, 9vw, 128px) 0 !important;
}

/* The old .cta-section with blue gradient — override to black */
.cta-section {
  background: #000000 !important;
  border-radius: 0 !important;
  position: relative !important;
}
.cta-section::before { display: none !important; }
.cta-section h2 { color: #ffffff !important; }

/* ══════════════════════════════════════════════════════════
   20. SERVICE PAGES (sp-*)
   Used by inner service pages
══════════════════════════════════════════════════════════ */
.sp-hero,
.sp-hero-inner,
[class*="sp-section"],
.sp-section {
  background: #000000 !important;
}
.sp-hero-bg { background: #000000 !important; }

.sp-hero h1 {
  font-size: clamp(2.2rem, 5vw, 4rem) !important;
  letter-spacing: -0.035em !important;
}

.sp-card,
.sp-highlight-card {
  background: #111111 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
}
.sp-card:hover,
.sp-highlight-card:hover {
  border-color: rgba(255,255,255,0.13) !important;
  background: #161616 !important;
}

.sp-hero-card {
  background: #111111 !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 16px !important;
}

/* ══════════════════════════════════════════════════════════
   21. DATA-REVEAL ANIMATIONS
   Coherent motion language · Subtle · Purposeful
══════════════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  transition: opacity 0.7s var(--c-ease), transform 0.7s var(--c-ease) !important;
}
[data-reveal].in-view {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
[data-reveal-delay="0"] { transition-delay: 0ms !important; }
[data-reveal-delay="1"] { transition-delay: 100ms !important; }
[data-reveal-delay="2"] { transition-delay: 200ms !important; }
[data-reveal-delay="3"] { transition-delay: 300ms !important; }
[data-reveal-delay="4"] { transition-delay: 400ms !important; }
[data-reveal-delay="5"] { transition-delay: 500ms !important; }

/* ══════════════════════════════════════════════════════════
   22. GLOBAL UTILITIES
══════════════════════════════════════════════════════════ */

/* Pulse dot (used in hero mockup and badges) */
.pulse-dot-green {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 0 0 rgba(16,185,129,0.5);
  animation: pulseDotGreen 2s ease infinite !important;
  flex-shrink: 0;
}
@keyframes pulseDotGreen {
  0%   { box-shadow: 0 0 0 0   rgba(16,185,129,0.5); }
  60%  { box-shadow: 0 0 0 6px rgba(16,185,129,0);   }
  100% { box-shadow: 0 0 0 0   rgba(16,185,129,0);   }
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #080808; }
::-webkit-scrollbar-thumb {
  background: #1e1e1e;
  border-radius: 8px;
  border: 2px solid #080808;
}
::-webkit-scrollbar-thumb:hover { background: #2a2a2a; }

/* Text selection */
::selection {
  background: rgba(79,110,247,0.28) !important;
  color: #ffffff !important;
}

/* Scroll progress */
.scroll-progress {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #4F6EF7, #c084fc) !important;
  z-index: 10000 !important;
  transition: none !important;
}

/* Noise overlay — very subtle */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* WhatsApp float */
.whatsapp-float {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
}

/* ══════════════════════════════════════════════════════════
   23. RESPONSIVE — TABLET ≤ 1024px
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Services: 2 columns */
  .srv-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .srv-card:first-child {
    grid-column: 1 / -1 !important;
    border-radius: 12px 12px 0 0 !important;
    aspect-ratio: 21 / 9 !important;
  }
  .srv-card:nth-child(3) { border-radius: 0 !important; }
  .srv-card:nth-child(4) { border-radius: 0 0 0 12px !important; }
  .srv-card:last-child   { border-radius: 0 0 12px 0 !important; }

  /* Work: 2 + 1 */
  .work-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .work-card--featured {
    grid-column: 1 / -1 !important;
  }
  .work-card:first-child { border-radius: 12px 12px 0 0 !important; }
  .work-card:last-child  { border-radius: 0 0 12px 12px !important; }

  /* Tech: 2x2 */
  .tech-groups {
    grid-template-columns: 1fr 1fr !important;
  }
  .tech-group:nth-child(2) { border-right: none !important; }
  .tech-group:nth-child(1),
  .tech-group:nth-child(2) {
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }

  /* Industries: collapse to stacked */
  .industries-panel {
    grid-template-columns: 1fr !important;
  }
  .industries-tabs {
    flex-direction: row !important;
    overflow-x: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }
  .ind-tab {
    white-space: nowrap !important;
    border-bottom: none !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
    flex-shrink: 0 !important;
  }
  .ind-panel { padding: 32px 28px !important; }

  /* Process: single column */
  .process-header {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
  }
  .process-row {
    grid-template-columns: 160px 1fr !important;
    gap: 28px !important;
  }

  /* Team */
  .team-layout {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .team-copy > p { max-width: none !important; }

  /* Why: 2 cols */
  .why-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Scale: 2x2 */
  .scale-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .scale-stat:nth-child(2) { border-right: none !important; }
  .scale-stat:nth-child(1),
  .scale-stat:nth-child(2) {
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   24. RESPONSIVE — MOBILE ≤ 768px
   Intentional mobile layouts · Not compressed desktop
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Hero ── */
  .hero {
    padding-top: 80px !important;
    min-height: 100svh !important;
    display: flex !important;
    align-items: stretch !important;
  }
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 32px 0 40px !important;
  }
  .hero-mockup { display: none !important; }

  .hero h1 {
    font-size: clamp(2.1rem, 8.5vw, 2.8rem) !important;
    text-align: center !important;
    letter-spacing: -0.03em !important;
  }
  .hero-eyebrow { text-align: center !important; display: block !important; }
  .hero-sub {
    font-size: 15px !important;
    text-align: center !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-ctas {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  .hero-stats {
    justify-content: center !important;
    gap: 16px !important;
  }
  .hstat { align-items: center !important; text-align: center !important; }
  .hstat b { font-size: 1.5rem !important; }
  .hstat span { font-size: 11px !important; }

  /* ── Trust ── */
  .trust-logos { gap: 20px !important; }
  .trust-logo img { height: 18px !important; }

  /* ── Services ── */
  .srv-grid {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
  .srv-card,
  .srv-card:first-child,
  .srv-card:nth-child(3),
  .srv-card:nth-child(4),
  .srv-card:last-child {
    grid-column: auto !important;
    grid-row: auto !important;
    border-radius: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }
  .srv-card:first-child  { border-radius: 12px 12px 0 0 !important; }
  .srv-card:last-child   { border-radius: 0 0 12px 12px !important; }

  .srv-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-bottom: 28px !important;
  }

  /* ── Tech ── */
  .tech-groups {
    grid-template-columns: 1fr 1fr !important;
    border-radius: 10px !important;
  }
  .tech-group {
    padding: 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }
  .tech-group:nth-child(3),
  .tech-group:nth-child(4) { border-bottom: none !important; }
  .tech-group:nth-child(2),
  .tech-group:nth-child(4) { border-right: none !important; }

  /* ── Industries ── */
  .industries-tabs { gap: 0 !important; }
  .ind-tab {
    padding: 14px 16px !important;
    font-size: 12.5px !important;
  }
  .ind-num { display: none !important; }
  .ind-panel { padding: 24px 20px !important; }

  /* ── Work ── */
  .work-grid {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
  .work-card,
  .work-card--featured {
    grid-column: auto !important;
    border-radius: 0 !important;
  }
  .work-card:first-child { border-radius: 12px 12px 0 0 !important; }
  .work-card:last-child  { border-radius: 0 0 12px 12px !important; }
  .work-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 28px !important;
  }

  /* ── Scale stats ── */
  .scale-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .scale-stat:nth-child(2) { border-right: none !important; }
  .scale-stat:nth-child(1),
  .scale-stat:nth-child(2) {
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }
  .scale-num span { font-size: clamp(2.2rem, 9vw, 3.5rem) !important; }
  .scale-header { margin-bottom: 40px !important; }

  /* ── Process ── */
  .process-header {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 32px !important;
  }
  .process-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 24px 0 !important;
  }
  .process-badge {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* ── Testimonials ── */
  .testi-slide {
    min-width: calc(100% - 8px) !important;
  }
  .testi-arrow { display: none !important; }
  .testi-header { margin-bottom: 36px !important; }

  /* ── Team ── */
  .team-layout {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .team-metrics {
    flex-direction: row !important;
    gap: 24px !important;
  }

  /* ── Why ── */
  .why-grid {
    grid-template-columns: 1fr !important;
  }
  .why-item { padding: 28px 20px !important; }

  /* ── Buttons: comfortable tap targets ── */
  .btn,
  a.btn,
  .btn-primary,
  a.btn-primary,
  .btn-hero-ghost,
  a.btn-hero-ghost {
    padding: 13px 24px !important;
    font-size: 14px !important;
    min-height: 46px !important;
  }

  /* ── Section padding ── */
  .services-section,
  .tech-section,
  .industries-section,
  .work-section,
  .scale-section,
  .process-section,
  .testimonials-section,
  .team-section,
  .why-section,
  .life-section,
  .fq-section,
  .final-cta-section,
  .trust-section {
    padding-top: clamp(60px, 12vw, 96px) !important;
    padding-bottom: clamp(60px, 12vw, 96px) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   25. EXTRA SMALL ≤ 480px
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  h1, .hero h1 {
    font-size: clamp(1.9rem, 8vw, 2.4rem) !important;
  }
  h2 {
    font-size: clamp(1.75rem, 7vw, 2.2rem) !important;
  }
  .trust-logos { gap: 16px !important; }
  .team-metrics {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 16px !important;
  }
  .scale-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════
   26. REDUCED MOTION COMPLIANCE
══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .gradient-text { animation: none !important; }
  .mockup-status-dot { animation: none !important; }
  .pulse-dot-green { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   27. INSIGHTS PREVIEW / BLOG SECTION
   Latest articles strip on homepage
══════════════════════════════════════════════════════════ */
.insights-preview-section {
  background: #060606 !important;
  padding: clamp(80px, 9vw, 120px) 0 !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.insights-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  margin-bottom: 48px !important;
  gap: 24px !important;
}

.insights-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2px !important;
}

.insight-card {
  background: #0E0E0E !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  transition: background 0.22s ease !important;
}
.insight-card:first-child { border-radius: 12px 0 0 12px !important; }
.insight-card:last-child  { border-radius: 0 12px 12px 0 !important; }
.insight-card:hover { background: #131313 !important; }

.insight-card-thumb {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  background: #0A0A0A !important;
  filter: grayscale(20%) !important;
  transition: filter 0.3s ease !important;
}
.insight-card:hover .insight-card-thumb { filter: grayscale(0%) !important; }

.insight-card-body {
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  flex: 1 !important;
}

.insight-tag {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #4F6EF7 !important;
}

.insight-card h3 {
  font-size: clamp(1rem, 1.4vw, 1.2rem) !important;
  line-height: 1.35 !important;
  color: rgba(255,255,255,0.88) !important;
  margin: 0 !important;
}

.insight-meta {
  font-size: 12px !important;
  color: rgba(255,255,255,0.30) !important;
  margin-top: auto !important;
}

@media (max-width: 768px) {
  .insights-grid {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
  .insight-card,
  .insight-card:first-child,
  .insight-card:last-child {
    border-radius: 0 !important;
  }
  .insights-grid .insight-card:first-child { border-radius: 12px 12px 0 0 !important; }
  .insights-grid .insight-card:last-child  { border-radius: 0 0 12px 12px !important; }
  .insights-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 28px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   28. CTA SECTION (override production.css navy gradient)
   Black canvas with subtle radial glow
══════════════════════════════════════════════════════════ */
.cta-section {
  background: #000000 !important;
  background-image: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(79,110,247,0.08) 0%, transparent 70%) !important;
  border-radius: 0 !important;
  padding: clamp(80px, 9vw, 128px) 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  overflow: hidden !important;
}
.cta-section::before { display: none !important; }
.cta-shape-one,
.cta-shape-two { display: none !important; }

.cta-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 12px !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

.cta-section .subtitle {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.38) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 4px !important;
  display: block !important;
}

.cta-section h2 {
  font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
  color: #ffffff !important;
  letter-spacing: -0.035em !important;
  line-height: 1.08 !important;
  margin-bottom: 28px !important;
  max-width: none !important;
}

.cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 32px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #000000 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: transform 0.22s var(--c-ease), box-shadow 0.22s ease !important;
  box-shadow: 0 4px 20px rgba(255,255,255,0.12) !important;
}
.cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(255,255,255,0.20) !important;
  background: #f0f0f0 !important;
  color: #000000 !important;
}
.cta-arrow {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #000000 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
}

/* ══════════════════════════════════════════════════════════
   29. CONTACT FORM (inner page) — DARK
══════════════════════════════════════════════════════════ */
.contact-section {
  background: #000000 !important;
  padding: clamp(80px, 9vw, 128px) 0 !important;
}
.contact-form {
  background: #0E0E0E !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.contact-group label {
  color: rgba(255,255,255,0.45) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.contact-group input,
.contact-group textarea,
.contact-group select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.88) !important;
  border-radius: 10px !important;
}
.contact-group input:focus,
.contact-group textarea:focus {
  border-color: rgba(79,110,247,0.45) !important;
  background: rgba(79,110,247,0.04) !important;
  box-shadow: 0 0 0 3px rgba(79,110,247,0.10) !important;
}
.contact-group input::placeholder,
.contact-group textarea::placeholder {
  color: rgba(255,255,255,0.22) !important;
}
.contact-left h2 { color: #ffffff !important; }
.contact-intro { color: rgba(255,255,255,0.48) !important; }
.contact-right h2 { color: #ffffff !important; }
.submit-btn {
  background: #ffffff !important;
  color: #000000 !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  font-size: 15px !important;
  box-shadow: 0 4px 20px rgba(255,255,255,0.10) !important;
}
.submit-btn:hover {
  background: #f0f0f0 !important;
  color: #000000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(255,255,255,0.18) !important;
}
.submit-arrow {
  background: #000000 !important;
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════
   30. INSTA SECTION OVERRIDE
══════════════════════════════════════════════════════════ */
.insta-section {
  background: #000000 !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

/* ══════════════════════════════════════════════════════════
   31. PAGE HERO (inner pages) — FORCE BLACK
══════════════════════════════════════════════════════════ */
.page-hero {
  background: #000000 !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  padding: 130px 0 60px !important;
}
.page-hero h1 {
  font-size: clamp(2.2rem, 5vw, 4rem) !important;
  color: #ffffff !important;
  letter-spacing: -0.035em !important;
}
.page-hero p {
  color: rgba(255,255,255,0.52) !important;
  font-size: 17px !important;
  max-width: 640px !important;
}
.careers-hero {
  background: #000000 !important;
  background-image: none !important;
}

/* ══════════════════════════════════════════════════════════
   32. PARTNERS / TECHNOLOGY LOGOS STRIP
   Inside trust section and partner cards
══════════════════════════════════════════════════════════ */
.partner-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.partner-card:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  transform: none !important;
}
.partner-card img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.40 !important;
  transition: opacity 0.22s ease !important;
}
.partner-card:hover img { opacity: 0.70 !important; }

/* Partners section container */
.partners-section {
  background: #000000 !important;
  padding: clamp(56px, 7vw, 96px) 0 !important;
}
.partners-heading h2 { color: #ffffff !important; }
.partners-heading p { color: rgba(255,255,255,0.40) !important; }

/* ══════════════════════════════════════════════════════════
   33. RESTORATION INTEGRITY
   Defeat legacy theme-qualified navy rules and preserve the
   natural, screenshot-matched mobile hero composition.
══════════════════════════════════════════════════════════ */
[data-theme="dark"] .industries-section,
[data-theme="dark"] .testimonials-section {
  background: #000000 !important;
  background-image: none !important;
}

[data-theme="dark"] .team-section {
  background: #060606 !important;
  background-image: none !important;
}

[data-theme="dark"] .sp-section--alt {
  background: #060606 !important;
  background-image: none !important;
}

[data-theme="dark"] .mobile-menu,
[data-theme="dark"] .mm-footer {
  background: #050505 !important;
}

[data-theme="dark"] .site-header.scrolled,
[data-theme="dark"] .site-header.nav-scrolled {
  background: rgba(0, 0, 0, 0.88) !important;
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

@media (max-width: 1100px) {
  .nav-hamburger {
    display: flex !important;
  }

  #navCtaBtn,
  .nav-cta-btn {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: auto !important;
    padding: 84px 0 48px !important;
    display: block !important;
  }

  .hero-grid {
    display: flex !important;
    flex: none !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 26px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .hero-content {
    display: flex !important;
    flex: none !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    order: 0 !important;
  }

  .hero-eyebrow {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }

  .hero h1 {
    font-size: clamp(2rem, 9vw, 2.65rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 18px !important;
  }

  .hero-sub {
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin-bottom: 24px !important;
  }

  .hero-ctas {
    width: 100% !important;
    max-width: none !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin-bottom: 24px !important;
  }

  .hero-stats {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr auto 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .hstat span {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  .hero-mockup {
    display: flex !important;
    width: min(76vw, 264px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    order: 1 !important;
  }

  .hero-mockup-card {
    padding: 16px !important;
    background: rgba(8, 8, 10, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.42) !important;
  }

  .mockup-metric-value {
    font-size: 2.15rem !important;
  }

  .sp-hero {
    padding-top: 84px !important;
    padding-bottom: 48px !important;
  }
}

@media (max-width: 480px) {
  .hero-ctas {
    gap: 8px !important;
  }

  .hero-ctas .btn,
  .hero-ctas a.btn {
    min-width: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero-mockup {
    width: min(84vw, 250px) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   34. ACCESSIBLE INTERACTION POLISH
   Shared focus, form, selector, and prototype-preview states.
══════════════════════════════════════════════════════════ */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid rgba(160, 184, 255, 0.95) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(79, 110, 247, 0.18) !important;
}

.contact-form label {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.contact-form input:not([type="hidden"]),
.contact-form textarea,
#careerApplicationForm input:not([type="hidden"]),
#careerApplicationForm textarea {
  min-height: 46px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.contact-form textarea,
#careerApplicationForm textarea {
  min-height: 128px !important;
}

.contact-form input:not([type="hidden"]):focus,
.contact-form textarea:focus,
#careerApplicationForm input:not([type="hidden"]):focus,
#careerApplicationForm textarea:focus {
  border-color: rgba(160, 184, 255, 0.72) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.service-pill,
.portfolio-filter-pill {
  min-height: 42px !important;
}

.mockup-img-link {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: inherit;
  background: transparent;
}

.mockup-img-link:focus-visible {
  outline-offset: -4px !important;
}

.prototype-modal:focus {
  outline: none;
}

/* ══════════════════════════════════════════════════════════
   35. SURFACE HARMONY
   Keep legacy card families inside the same black-first system.
   Blue remains an accent, never the dominant surface.
══════════════════════════════════════════════════════════ */
.services-section .srv-card,
.work-section .work-card,
.stat-box,
.partner-card,
.testimonial-card,
.bento-card,
.testi-featured,
.testi-arrow,
.service-pill,
.industries-tabs,
.ind-caps li,
.team-caps li {
  background-color: #0d0d0d !important;
}

.services-section .srv-overlay {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.40) 60%, rgba(0, 0, 0, 0.15) 100%) !important;
}

.testi-featured-right {
  background: rgba(255, 255, 255, 0.035) !important;
}

[data-theme="dark"] .ind-tab--active {
  background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .stat-box,
[data-theme="dark"] .partner-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .bento-card {
  background: #0d0d0d !important;
}

[data-theme="dark"] ::-webkit-scrollbar {
  background: #050505 !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #2a2a2a !important;
}

/* ══════════════════════════════════════════════════════════
   36. DEFINITIVE MOBILE & RESPONSIVE REFINEMENTS
   Matches Historical Target Screen Proportions (18-21 Sept)
══════════════════════════════════════════════════════════ */

/* Mobile Header: Zero Crowd, No Cut-Off */
@media (max-width: 900px) {
  .nav-desktop { display: none !important; }
  .nav-cta-btn, #navCtaBtn { display: none !important; }
  .nav-search-btn, #headerSearchBtn, #globalSearchTrigger { display: none !important; }
  .nav-actions {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    gap: 0 !important;
  }
  .nav-hamburger, #mmOpen {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    cursor: pointer !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    z-index: 100 !important;
  }
  .nav-hamburger span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    margin: 2px 0 !important;
  }
  .nav-inner {
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Mobile Hero Heading & Collision Prevention */
@media (max-width: 768px) {
  .hero {
    min-height: auto !important;
    padding: 96px 0 54px !important;
    overflow-x: clip !important;
    max-width: 100vw !important;
  }
  .hero-blobs {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    max-width: 100% !important;
  }
  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .hero h1 {
    font-size: clamp(1.85rem, 7.2vw, 2.45rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    margin-bottom: 18px !important;
  }
  .hero-sub {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
  }
  .hero-ctas {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }
  .hero-ctas .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  .hstat b {
    font-size: clamp(1.25rem, 5vw, 1.65rem) !important;
  }
  .hstat span {
    font-size: clamp(9px, 2.6vw, 11px) !important;
    line-height: 1.25 !important;
  }
  .hstat-div { display: none !important; }

  /* Testimonials slider containment */
  .testi-section,
  .testi-slider-wrap,
  .testi-slider,
  .testi-track {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Service Pages Mobile Headings & Wrapping */
  .sp-hero-title {
    font-size: clamp(1.85rem, 7.2vw, 2.6rem) !important;
    line-height: 1.15 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
}

/* Bento & Card Imagery Contrast Enhancements */
.srv-card .srv-overlay {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.40) 60%, rgba(0, 0, 0, 0.15) 100%) !important;
}
.srv-card:hover .srv-overlay {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0.05) 100%) !important;
}

/* Life at Bitneka / Instagram Section Alignment */
.insta-section {
  background: #000000 !important;
  padding: clamp(60px, 8vw, 100px) 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.insta-header {
  text-align: center !important;
  margin-bottom: 40px !important;
}
.insta-eyebrow {
  display: inline-block !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #34d399 !important;
  margin-bottom: 8px !important;
}
.insta-h {
  font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
  color: #ffffff !important;
  margin-bottom: 14px !important;
}
.insta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(225,48,108,0.15) 0%, rgba(131,58,180,0.15) 100%) !important;
  border: 1px solid rgba(225,48,108,0.3) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}
.insta-btn:hover {
  background: linear-gradient(135deg, rgba(225,48,108,0.3) 0%, rgba(131,58,180,0.3) 100%) !important;
  transform: translateY(-2px) !important;
}
.insta-slider {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}
@media (max-width: 768px) {
  .insta-slider {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}
.insta-item {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #0E0E0E !important;
  display: block !important;
  transition: transform 0.35s ease, border-color 0.35s ease !important;
}
.insta-item:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.insta-img-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
}
.insta-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}
.insta-item:hover .insta-img-wrap img {
  transform: scale(1.04) !important;
}
.insta-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 16px !important;
}
.insta-stats {
  display: flex !important;
  gap: 16px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════
   HOMEPAGE FINAL HISTORICAL RESTORATION & SURGICAL POLISH
   Target: Historical DNA (18-21 Sept) + Modern UX Stability
   ══════════════════════════════════════════════════════════ */

/* ── Global Canvas & Container Alignment ── */
body, main, #mainContent {
  background-color: #000000 !important;
}
.wrap {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 4vw, 40px) !important;
  padding-right: clamp(20px, 4vw, 40px) !important;
  box-sizing: border-box !important;
}

/* ── Eliminate Repetitive Neon Glow Dividers ── */
.nav-border,
.divider-glow,
.accent-line-teal {
  display: none !important;
}

/* ── 02 Trust Logo Strip ── */
.trust-section {
  background: #000000 !important;
  padding: 36px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.trust-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.4) !important;
  text-align: center !important;
  margin-bottom: 24px !important;
}
.trust-logos {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(28px, 6vw, 64px) !important;
  flex-wrap: wrap !important;
}
.trust-logo img {
  height: 22px !important;
  width: auto !important;
  max-width: 110px !important;
  object-fit: contain !important;
  opacity: 0.55 !important;
  filter: brightness(0) invert(1) !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}
.trust-logo img:hover {
  opacity: 0.95 !important;
  transform: translateY(-1px) !important;
}

/* ── 03 Services Bento Box Composition ── */
.services-section {
  background: #000000 !important;
  padding: clamp(60px, 7vw, 96px) 0 !important;
  position: relative !important;
}
.srv-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-bottom: 36px !important;
}
.srv-header h2 {
  font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.12 !important;
  margin: 10px 0 0 0 !important;
}
.srv-view-all {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}
.srv-view-all:hover {
  color: #ffffff !important;
  transform: translateX(3px) !important;
}

/* Desktop Bento Grid: 2 top, 3 middle, 1 bottom */
@media (min-width: 992px) {
  .services-section .srv-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 16px !important;
    overflow: visible !important;
  }
  /* Row 1: 2 cards (AI, Custom Software) */
  .services-section .srv-grid > .srv-card:nth-child(1) {
    grid-column: 1 / 4 !important;
    min-height: 280px !important;
    height: 280px !important;
  }
  .services-section .srv-grid > .srv-card:nth-child(2) {
    grid-column: 4 / 7 !important;
    min-height: 280px !important;
    height: 280px !important;
  }
  /* Row 2: 3 cards (Mobile, Data, Dynamics) */
  .services-section .srv-grid > .srv-card:nth-child(3) {
    grid-column: 1 / 3 !important;
    min-height: 250px !important;
    height: 250px !important;
  }
  .services-section .srv-grid > .srv-card:nth-child(4) {
    grid-column: 3 / 5 !important;
    min-height: 250px !important;
    height: 250px !important;
  }
  .services-section .srv-grid > .srv-card:nth-child(5) {
    grid-column: 5 / 7 !important;
    min-height: 250px !important;
    height: 250px !important;
  }
  /* Row 3: 1 wide card (Cybersecurity & Resilience) - CRITICAL: fixed from 840px to 220px */
  .services-section .srv-grid > .srv-card:nth-child(6) {
    grid-column: 1 / 7 !important;
    min-height: 220px !important;
    height: 220px !important;
    max-height: 240px !important;
  }
}

/* Service Card Core Geometry & Surface */
.services-section .srv-card {
  position: relative !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background-color: #0d0d0d !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  text-decoration: none !important;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease !important;
}
.services-section .srv-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7) !important;
}

/* Background imagery with dark contrast gradient overlay */
.services-section .srv-grid > .srv-card:nth-child(1) {
  background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.8) 100%),
              url('../images/home/bento-ai.jpg') no-repeat right center !important;
  background-size: cover !important;
}
.services-section .srv-grid > .srv-card:nth-child(2) {
  background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.8) 100%),
              url('../images/home/bento-software.jpg') no-repeat right center !important;
  background-size: cover !important;
}
.services-section .srv-grid > .srv-card:nth-child(3) {
  background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.85) 100%),
              url('../images/home/bento-mobile.jpg') no-repeat center center !important;
  background-size: cover !important;
}
.services-section .srv-grid > .srv-card:nth-child(4) {
  background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.85) 100%),
              url('../images/home/bento-data.jpg') no-repeat center center !important;
  background-size: cover !important;
}
.services-section .srv-grid > .srv-card:nth-child(5) {
  background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.85) 100%),
              url('../images/home/bento-dynamics.jpg') no-repeat center center !important;
  background-size: cover !important;
}
.services-section .srv-grid > .srv-card:nth-child(6) {
  background: linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.3) 100%),
              url('../images/home/bento-security.jpg') no-repeat right center !important;
  background-size: cover !important;
}

.services-section .srv-overlay {
  display: none !important;
}

.services-section .srv-content {
  position: relative !important;
  z-index: 2 !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.services-section .srv-tag {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #7c9aff !important;
  background: rgba(124, 154, 255, 0.12) !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  margin-bottom: 12px !important;
  align-self: flex-start !important;
}
.services-section .srv-card h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  margin: 0 0 8px 0 !important;
}
.services-section .srv-grid > .srv-card:nth-child(1) h3,
.services-section .srv-grid > .srv-card:nth-child(2) h3 {
  font-size: 21px !important;
}
.services-section .srv-card p {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 0 12px 0 !important;
  max-width: 460px !important;
}
.services-section .srv-arrow {
  color: #ffffff !important;
  font-size: 16px !important;
  opacity: 0.7 !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
  align-self: flex-start !important;
}
.services-section .srv-card:hover .srv-arrow {
  opacity: 1 !important;
  transform: translateX(4px) !important;
}

/* Mobile Services: Compact, eliminates excessive scrolling */
@media (max-width: 768px) {
  .services-section {
    padding: 48px 0 !important;
  }
  .services-section .srv-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .services-section .srv-card {
    min-height: 190px !important;
    max-height: 220px !important;
    height: auto !important;
  }
  .services-section .srv-content {
    padding: 18px 16px !important;
  }
  .services-section .srv-card h3 {
    font-size: 16.5px !important;
    margin-bottom: 6px !important;
  }
  .services-section .srv-card p {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

.srv-more {
  margin-top: 28px !important;
  text-align: center !important;
  font-size: 13.5px !important;
  color: rgba(255, 255, 255, 0.45) !important;
}
.srv-more a {
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
}
.srv-more a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* ── 04 Enterprise Technology & Platform Hierarchy ── */
.tech-section {
  background: #000000 !important;
  padding: clamp(60px, 7vw, 96px) 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.tech-header {
  margin-bottom: 36px !important;
}
.tech-header h2 {
  font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.12 !important;
  margin: 10px 0 0 0 !important;
}
.tech-groups {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
}
.tech-group-card {
  background: #0d0d0d !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 26px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color 0.25s ease, transform 0.25s ease !important;
}
.tech-group-card:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-2px) !important;
}
.tech-group-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.tech-card-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: rgba(124, 154, 255, 0.12) !important;
  color: #7c9aff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
}
.tech-group-label {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
}
.tech-pills {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.tech-pills li {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
}
.tech-cred-banner {
  margin-top: 32px !important;
  padding: 16px 24px !important;
  background: #0d0d0d !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.7) !important;
}
.tech-cred-item i {
  color: #34d399 !important;
  margin-right: 6px !important;
}
.tech-cred-dot {
  color: rgba(255, 255, 255, 0.25) !important;
}
@media (max-width: 991px) and (min-width: 641px) {
  .tech-groups {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .tech-groups {
    grid-template-columns: 1fr !important;
  }
}

/* ── 05 Industry Section Refinement (No Navy / No Neon Line) ── */
.industries-section {
  background: #000000 !important;
  padding: clamp(60px, 7vw, 96px) 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.industries-panel {
  background: #0c0c0c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}
.industries-tabs {
  background: #080808 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.ind-tab {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.6) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: all 0.2s ease !important;
}
.ind-tab:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  color: #ffffff !important;
}
.ind-tab--active {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
  border-left: 3px solid #ffffff !important;
}
.ind-tab--active::after {
  display: none !important;
}
.ind-panel {
  background: #0c0c0c !important;
}
.ind-caps li {
  background: #141414 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
}
@media (max-width: 768px) {
  .industries-panel {
    grid-template-columns: 1fr !important;
  }
  .industries-tabs {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .ind-tab {
    white-space: nowrap !important;
    border-bottom: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 14px 18px !important;
    border-left: none !important;
  }
  .ind-tab--active {
    border-bottom: 2px solid #ffffff !important;
    border-left: none !important;
  }
}

/* ── 06 Scale / Results: Pure Black with Vertical Dividers ── */
.scale-section {
  background: #000000 !important;
  background-image: none !important;
  padding: clamp(50px, 6vw, 80px) 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.scale-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  padding: 10px 0 !important;
}
.scale-stat {
  padding: 16px 24px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  text-align: center !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.scale-stat:last-child {
  border-right: none !important;
}
.scale-num span {
  font-size: clamp(2.4rem, 4vw, 3.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
  line-height: 1 !important;
}
.scale-stat p {
  font-size: 13.5px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin-top: 8px !important;
  font-weight: 500 !important;
}
@media (max-width: 640px) {
  .scale-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .scale-stat:nth-child(2) {
    border-right: none !important;
  }
  .scale-stat:nth-child(1),
  .scale-stat:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
}

/* ── 07 Process: Clean Editorial List ── */
.process-section {
  background: #000000 !important;
  padding: clamp(60px, 7vw, 96px) 0 !important;
}
.process-section .process-list,
.process-list {
  display: flex !important;
  flex-direction: column !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-top: 36px !important;
}
.process-section .process-row,
.process-row {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  align-items: baseline !important;
  padding: 28px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  gap: 32px !important;
  transform: none !important;
}
.process-section .process-row:hover,
.process-row:hover {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  transform: none !important;
}
.process-col-head {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}
.process-num {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #000000 !important;
  background: #ffffff !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
}
.process-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
}
.process-desc {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 !important;
  max-width: 680px !important;
}
@media (max-width: 768px) {
  .process-section .process-row,
  .process-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 20px 0 !important;
  }
  .process-desc {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}

/* ── 08 Testimonials: Human-First Editorial Direction ── */
.testimonials-section {
  background: #000000 !important;
  padding: clamp(60px, 8vw, 100px) 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.testi-header {
  text-align: center !important;
  margin-bottom: 44px !important;
}
.testi-header h2 {
  font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.12 !important;
  margin: 10px 0 0 0 !important;
}
.testi-subtitle {
  font-size: 15px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-top: 8px !important;
}

/* Remove bulky grey card containers */
.testi-slider-wrap {
  position: relative !important;
  overflow: hidden !important;
  padding: 10px 54px 20px 54px !important;
}
.testi-track {
  display: flex !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform !important;
}
.testi-slide {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 16px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Human-First Large Circular Portrait */
.testi-photo-wrap {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  padding: 3px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(124,154,255,0.25)) !important;
  margin-bottom: 14px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}
.testi-photo {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}
.testi-stars {
  color: #f59e0b !important;
  font-size: 14px !important;
  letter-spacing: 3px !important;
  margin-bottom: 8px !important;
}
.testi-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 3px !important;
}
.testi-role {
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin-bottom: 6px !important;
  max-width: 260px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}
.testi-text {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  max-width: 290px !important;
  font-style: normal !important;
  text-align: center !important;
  margin: 10px auto 0 auto !important;
}

/* Testimonial slider controls */
.testi-arrow {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #0d0d0d !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}
.testi-arrow:hover {
  background: #1a1a1a !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-50%) scale(1.05) !important;
}
.testi-arrow-prev { left: 0 !important; }
.testi-arrow-next { right: 0 !important; }

@media (max-width: 640px) {
  .testi-slider-wrap {
    padding: 10px 42px 20px 42px !important;
  }
}

.testi-dots {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 24px !important;
}
.testi-dot {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
}
.testi-dot::before {
  content: '' !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  transition: width 0.25s ease, background 0.25s ease !important;
}
.testi-dot.active::before {
  width: 24px !important;
  background: #ffffff !important;
}

/* ── 09b Why Serious Teams Choose Us: 4-Column Balanced Grid ── */
.why-section {
  background: #000000 !important;
  padding: clamp(60px, 7vw, 96px) 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.why-header {
  margin-bottom: 36px !important;
}
.why-header h2 {
  font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.12 !important;
  margin: 10px 0 0 0 !important;
}
.why-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
}
.why-item {
  background: #0d0d0d !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 30px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  transition: transform 0.25s ease, border-color 0.25s ease !important;
}
.why-item:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
.why-num {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #7c9aff !important;
  background: rgba(124, 154, 255, 0.12) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
}
.why-body h3 {
  font-size: 17.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  margin: 0 0 10px 0 !important;
}
.why-body p {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin: 0 !important;
}
@media (max-width: 991px) and (min-width: 641px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .why-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Life at Bitneka & Instagram Showcase ── */
.insta-section {
  background: #000000 !important;
  padding: clamp(60px, 7vw, 96px) 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.insta-header {
  text-align: center !important;
  margin-bottom: 36px !important;
}
.insta-header h2 {
  font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.12 !important;
  margin: 8px 0 0 0 !important;
}
.insta-sub {
  font-size: 15px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin: 8px 0 20px 0 !important;
}
.insta-gradient-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 20px rgba(220, 39, 67, 0.35) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
.insta-gradient-pill:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 26px rgba(220, 39, 67, 0.5) !important;
}
.insta-slider {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}
.insta-item {
  background: #0d0d0d !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  transition: transform 0.28s ease, border-color 0.28s ease !important;
}
.insta-item:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
@media (max-width: 640px) {
  .insta-slider {
    grid-template-columns: 1fr !important;
  }
}

/* ── FAQ: Confident Full-Width Accordion ── */
.fq-section {
  background: #000000 !important;
  padding: clamp(60px, 7vw, 96px) 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.fq-list {
  max-width: 880px !important;
  margin: 32px auto 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
}
.fq-card {
  background: #0d0d0d !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease !important;
}
.fq-card:hover {
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.fq-trigger {
  width: 100% !important;
  padding: 20px 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-align: left !important;
  cursor: pointer !important;
}
.fq-body {
  padding: 0 24px 20px 24px !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

/* ── 10 Final CTA: Historical Black / Charcoal Treatment ── */
html[data-theme="dark"] .cta-section,
body .cta-section,
.cta-section {
  background: #000000 !important;
  background-image: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(79, 110, 247, 0.08) 0%, transparent 70%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: clamp(80px, 9vw, 120px) 0 !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}
.cta-section::before,
.cta-sweep,
.cta-grid-bg {
  display: none !important;
}
.cta-inner {
  max-width: 680px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
}
.cta-content h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.035em !important;
  line-height: 1.1 !important;
  margin: 12px 0 16px 0 !important;
}
.cta-content p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin: 0 auto 32px auto !important;
  max-width: 540px !important;
}
.cta-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}
.btn-cta-primary {
  background: #ffffff !important;
  color: #000000 !important;
  border-radius: 999px !important;
  padding: 14px 30px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
.btn-cta-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(255, 255, 255, 0.25) !important;
  color: #000000 !important;
}

/* ── Footer Polish & Double-Ending Resolution ── */
.ft {
  background: #000000 !important;
  border-top: none !important;
}
.ft-statement {
  background: #000000 !important;
  padding-top: 36px !important;
  padding-bottom: 24px !important;
}
.ft-headline {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem) !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
  margin-bottom: 20px !important;
}
.ft-headline-accent {
  background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.7) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════
   36. GLOBAL MASTER BUTTON RECONCILIATION
══════════════════════════════════════════════════════════ */
.btn-secondary,
a.btn-secondary,
.btn.btn-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 13px 28px !important;
  font-size: 14.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}
.btn-secondary:hover,
a.btn-secondary:hover,
.btn.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.btn-tertiary,
a.btn-tertiary {
  background: transparent !important;
  color: #a0a0a0 !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  padding: 8px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.btn-tertiary:hover,
a.btn-tertiary:hover {
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════
   37. PORTFOLIO FILTER SYSTEM RESTORATION
   Historical standard: White/off-white pill + black text
══════════════════════════════════════════════════════════ */
.portfolio-filter-bar {
  background: rgba(12, 12, 12, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  padding: 6px !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.portfolio-filter-pill {
  color: #a0a0a0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.portfolio-filter-pill:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.portfolio-filter-pill.active {
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 700 !important;
  border-color: #ffffff !important;
  box-shadow: 0 2px 14px rgba(255, 255, 255, 0.18) !important;
}
.portfolio-filter-pill .count {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #888888 !important;
  border-radius: 999px !important;
  padding: 2px 7px !important;
  font-size: 11px !important;
  margin-left: 6px !important;
}
.portfolio-filter-pill.active .count {
  background: rgba(0, 0, 0, 0.14) !important;
  color: #000000 !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════
   38. EDITORIAL ARTICLE READING SYSTEM
══════════════════════════════════════════════════════════ */
.article-body,
.blog-post-body,
.post-content,
.blog-article-content,
.article-reading-flow {
  max-width: 780px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: #b0b0b0 !important;
}
.article-body h2,
.blog-post-body h2,
.post-content h2 {
  font-size: clamp(24px, 3.2vw, 34px) !important;
  color: #ffffff !important;
  margin-top: 48px !important;
  margin-bottom: 20px !important;
  letter-spacing: -0.02em !important;
}
.article-body h3,
.blog-post-body h3,
.post-content h3 {
  font-size: clamp(20px, 2.4vw, 24px) !important;
  color: #f1f5f9 !important;
  margin-top: 36px !important;
  margin-bottom: 16px !important;
}
.article-body p,
.blog-post-body p,
.post-content p {
  margin-bottom: 24px !important;
}
.article-body pre,
.blog-post-body pre,
.post-content pre {
  max-width: 100% !important;
  overflow-x: auto !important;
  background: #080808 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 18px 20px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.article-body table,
.blog-post-body table,
.post-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 32px 0 !important;
  display: table !important;
  overflow-x: auto !important;
}

/* ══════════════════════════════════════════════════════════
   39. ELIMINATE REMAINING BLUE/NAVY CTA PANELS
══════════════════════════════════════════════════════════ */
.sp-cta,
.service-cta,
.cta-banner,
.consultation-cta,
.audit-cta,
.section-cta {
  background: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}
.sp-cta h2,
.service-cta h2,
.cta-banner h2 {
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════
   40. MOBILE RECOMPOSITION & READABILITY (<768px & <480px)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Stack multi-column architecture cards to avoid miniaturization */
  .arch-grid,
  .srv-cards,
  .capability-grid,
  .capabilities-grid,
  .deliverables-grid,
  .roles-grid,
  .careers-role-grid,
  .pricing-grid,
  .sp-benefits-grid,
  .sp-caps-grid,
  .sp-process-grid,
  .sp-deliv-grid,
  .sp-why-grid,
  .sp-cases-grid,
  .ab-values-grid,
  .ab-standards-grid,
  div[style*="grid-template-columns: 260px"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Keep readable font scale */
  body, p, li, .card-desc, .feature-desc, .service-desc {
    font-size: 15.5px !important;
    line-height: 1.65 !important;
  }

  /* Legal and policy page readability */
  .legal-content p,
  .legal-section p,
  .terms-content p,
  .privacy-content p {
    font-size: 15.5px !important;
    line-height: 1.72 !important;
    color: #a8a8a8 !important;
  }

  /* Interactive touch target baseline */
  .btn,
  .nav-link,
  .portfolio-filter-pill,
  .mm-link,
  .faq-question,
  .fq-trigger {
    min-height: 44px !important;
  }

  /* Master footer mobile reflow */
  .ft-statement-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 28px !important;
  }
  .ft-statement-actions {
    flex-direction: column !important;
    width: 100% !important;
  }
  .ft-statement-actions .ft-main-cta,
  .ft-statement-actions .ft-email-link {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .ft-nav-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 20px !important;
  }
  .ft-nav-sep {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .ft-nav-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .ft-mini-stats {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════
   FINAL 110% MASTER POLISH:
   TYPOGRAPHY, HEADINGS, ICONS, SPACING, RHYTHM & ALIGNMENT
   ══════════════════════════════════════════════════════════ */

/* ── 1. Text Rendering & Antialiasing ── */
*, *::before, *::after {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* ── 2. Master Container & Left-Edge Alignment ── */
.wrap,
.container,
.nav-inner,
.ft-nav-inner,
.ft-statement-inner,
.price-hero-inner,
.industries-panel,
.tech-groups,
.work-grid,
.srv-grid,
.team-layout,
.cta-inner,
.sp-wrap,
.port-wrap,
.blog-wrap,
.cs-wrap {
  width: 100% !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 4vw, 40px) !important;
  padding-right: clamp(20px, 4vw, 40px) !important;
  box-sizing: border-box !important;
}

/* ── 3. Master Section Spacing & Vertical Rhythm ── */
.services-section,
.trust-section,
.tech-section,
.industries-section,
.work-section,
.scale-section,
.process-section,
.testimonials-section,
.team-section,
.why-section,
.insta-section,
.fq-section,
.cta-section,
.price-models-section,
.estimator-section,
.ab-story-section,
.ab-pillars-section,
.ab-delivery-section,
.ab-leadership-section,
.ab-standards-section,
.sp-section,
.legal-section {
  padding-top: clamp(80px, 8vw, 120px) !important;
  padding-bottom: clamp(80px, 8vw, 120px) !important;
  box-sizing: border-box !important;
}

/* Hero Section Spacing */
.hero,
.page-hero,
.price-hero,
.careers-hero,
.ab-hero,
.sp-hero,
.cs-hero {
  padding-top: clamp(120px, 12vw, 160px) !important;
  padding-bottom: clamp(60px, 7vw, 90px) !important;
  box-sizing: border-box !important;
}

/* ── 4. Precision Headings System ── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: #ffffff !important;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11' !important;
}

/* H1 / Page Display Title */
h1,
.hero h1,
.page-hero h1,
.price-hero h1,
.careers-hero h1,
.ab-hero h1,
.sp-hero h1,
.cs-hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.06 !important;
  margin-top: 0 !important;
  margin-bottom: clamp(16px, 2.5vw, 24px) !important;
}

/* Section H2 — Editorial & Technical Statement */
h2,
.srv-header h2,
.tech-header h2,
.work-header h2,
.scale-header h2,
.process-header h2,
.testi-header h2,
.team-copy h2,
.why-header h2,
.insta-header h2,
.fq-h,
.cta-content h2,
.ab-pillar-h2,
.sp-section-h2,
.cs-hero-h1 {
  font-size: clamp(1.9rem, 3.6vw, 3rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.12 !important;
  margin-top: 0 !important;
  margin-bottom: clamp(14px, 2vw, 20px) !important;
}

/* Card / Component H3 */
h3,
.srv-content h3,
.tech-group-label,
.work-card h3,
.process-title,
.why-body h3,
.sp-cap-card h3,
.ab-pillar-card h3,
.price-card-name {
  font-size: clamp(1.2rem, 1.8vw, 1.55rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

/* Subsection / Minor H4 */
h4 {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.35 !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* ── 5. Body Text & Lead Paragraphs ── */
p,
.body-text,
.legal-content p,
.terms-content p,
.privacy-content p {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.72 !important;
  color: #a0a0a0 !important;
  margin-top: 0 !important;
}

.hero p,
.hero-sub,
.price-hero p,
.srv-header p,
.tech-header p,
.testi-subtitle,
.cta-content p,
.process-intro,
.sp-hero-desc,
.lead {
  font-size: clamp(16px, 1.8vw, 18px) !important;
  line-height: 1.65 !important;
  color: #b5b5b5 !important;
  max-width: 640px !important;
  margin-top: 0 !important;
  margin-bottom: clamp(28px, 3.5vw, 40px) !important;
}

/* ── 6. Eyebrows & Badges ── */
.eyebrow,
.price-badge,
.hero-eyebrow,
.fq-eyebrow-tag,
.insta-eyebrow,
.sp-eyebrow,
.ab-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  vertical-align: middle !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(79, 110, 247, 0.08) !important;
  border: 1px solid rgba(79, 110, 247, 0.25) !important;
  color: #7fa8ff !important;
  margin-bottom: 14px !important;
  line-height: 1 !important;
}

.eyebrow--light {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ── 7. Global Icon Alignment & Standardization ── */
/* Inline icon vertical centering */
i.fas, i.fab, i.far, i.fa {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: -0.12em !important;
  line-height: 1 !important;
}

/* Button icons */
.btn i, .btn svg,
a.btn i, a.btn svg,
.btn-arrow,
.btn-primary svg,
.btn-hero svg,
.ft-main-cta svg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.btn:hover .btn-arrow,
.btn:hover svg,
.ft-main-cta:hover svg {
  transform: translateX(3px) !important;
}

/* Card & Feature Icon Boxes */
.tech-card-icon,
.mega-link-icon,
.ft-ci,
.contact-icon,
.srv-icon-box,
.sp-cap-icon,
.ab-pillar-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: #141414 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #4f6ef7 !important;
  font-size: 17px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.25s ease !important;
}

.tech-group-card:hover .tech-card-icon,
.mega-link:hover .mega-link-icon,
.why-item:hover .why-num {
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
}

/* List Item Checkmarks */
ul li i.fa-check-circle,
ul li i.fa-check,
.ind-caps li i,
.sp-benefits-list i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  font-size: 13px !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
}

/* ── 8. Technical Numbers & Metadata ── */
.hstat b,
.scale-num span,
.team-metric strong,
.ft-mini-stat strong,
.mockup-metric-value,
.code-stat,
.ind-num,
.why-num,
.process-num,
.price-value,
kbd {
  font-family: 'JetBrains Mono', monospace !important;
  font-feature-settings: 'tnum' on, 'zero' on !important;
}

/* ── 9. Grid Rhythm & Gap Harmonization ── */
.srv-grid,
.work-grid,
.tech-groups,
.why-grid,
.scale-grid,
.team-metrics,
.sp-caps-grid,
.sp-benefits-grid,
.sp-process-grid,
.sp-deliv-grid,
.ab-pillars-grid {
  gap: 22px !important;
}

/* ── 10. Mobile Responsiveness & Alignment Assurance ── */
@media (max-width: 768px) {
  .wrap,
  .container,
  .nav-inner,
  .ft-nav-inner,
  .ft-statement-inner,
  .price-hero-inner,
  .sp-wrap,
  .port-wrap,
  .blog-wrap,
  .cs-wrap {
    padding-left: clamp(16px, 4vw, 22px) !important;
    padding-right: clamp(16px, 4vw, 22px) !important;
  }

  /* Single-column stacking for content-heavy blocks */
  .arch-grid,
  .srv-cards,
  .sp-benefits-grid,
  .sp-caps-grid,
  .sp-process-grid,
  .sp-deliv-grid,
  .sp-why-grid,
  .sp-cases-grid,
  .team-layout,
  .pricing-cards,
  .ab-pillars-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Headings size balance on mobile */
  h1,
  .hero h1,
  .page-hero h1,
  .price-hero h1,
  .careers-hero h1,
  .ab-hero h1 {
    font-size: clamp(2rem, 8vw, 2.75rem) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
  }

  h2,
  .srv-header h2,
  .tech-header h2,
  .work-header h2,
  .process-header h2,
  .testi-header h2,
  .why-header h2,
  .insta-header h2,
  .fq-h,
  .cta-content h2 {
    font-size: clamp(1.65rem, 6.5vw, 2.15rem) !important;
    letter-spacing: -0.025em !important;
    line-height: 1.15 !important;
  }

  /* Mobile text legibility */
  p,
  .body-text,
  .srv-content p,
  .work-story-item p,
  .why-body p,
  .testi-text {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  /* Interactive control heights */
  .btn,
  .nav-link,
  .portfolio-filter-pill,
  .mm-link,
  .fq-trigger,
  input,
  select,
  textarea {
    min-height: 48px !important;
  }
}

/* ======================================================================
   HISTORICAL 90% VISUAL RESTORATION (22 SEPTEMBER 2026)
   Exact historical section composition restoration for:
   1. Services / Bento Grid
   2. How We Work / Process
   3. Client Reviews / Testimonials
   4. Our Team / Senior Talent
   5. Why Serious Teams Choose Us
   6. Life at Bitneka / Culture
   7. Questions & Answers / FAQ
====================================================================== */

/* ── 1. SERVICES / BENTO GRID ── */
.services-section {
  background: #000000 !important;
  padding: 100px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.services-section .wrap {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
.services-section .srv-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-bottom: 40px !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
.services-section .srv-header h2 {
  font-size: clamp(32px, 3.4vw, 46px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}
.services-section .srv-view-all {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #60a5fa !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.services-section .srv-view-all:hover {
  color: #93c5fd !important;
}

@media (min-width: 1024px) {
  .services-section .srv-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 16px !important;
  }
  /* Row 1: 2 equal cards (AI & Automation, Engineering) */
  .services-section .srv-grid > .srv-card:nth-child(1) {
    grid-column: 1 / 4 !important;
    width: 100% !important;
    min-height: 310px !important;
  }
  .services-section .srv-grid > .srv-card:nth-child(2) {
    grid-column: 4 / -1 !important;
    width: 100% !important;
    min-height: 310px !important;
  }
  /* Row 2: 3 equal cards (Product, Data, Enterprise) */
  .services-section .srv-grid > .srv-card:nth-child(3) {
    grid-column: 1 / 3 !important;
    width: 100% !important;
    min-height: 260px !important;
  }
  .services-section .srv-grid > .srv-card:nth-child(4) {
    grid-column: 3 / 5 !important;
    width: 100% !important;
    min-height: 260px !important;
  }
  .services-section .srv-grid > .srv-card:nth-child(5) {
    grid-column: 5 / -1 !important;
    width: 100% !important;
    min-height: 260px !important;
  }
  /* Row 3: 1 wide full-width card (Security & DevOps) */
  .services-section .srv-grid > .srv-card:nth-child(6) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 240px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  .services-section .srv-grid > .srv-card:nth-child(6) .srv-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    max-width: 480px !important;
    width: auto !important;
    gap: 0 !important;
  }
  .services-section .srv-grid > .srv-card:nth-child(6) .srv-content h3 {
    margin: 0 0 10px 0 !important;
    white-space: normal !important;
  }
  .services-section .srv-grid > .srv-card:nth-child(6) .srv-content p {
    margin: 0 0 16px 0 !important;
    max-width: 440px !important;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .services-section .srv-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .services-section .srv-grid > .srv-card:nth-child(6) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  .services-section .srv-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  .services-section .srv-card {
    width: 100% !important;
    min-height: 220px !important;
    padding: 24px 22px !important;
  }
}

.services-section .srv-card {
  position: relative !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background-color: #0b0d13 !important;
  background-size: cover !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 28px 28px !important;
  transition: border-color 0.25s ease, transform 0.25s ease !important;
}
.services-section .srv-card:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
}
.services-section .srv-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(8, 11, 18, 0.96) 0%, rgba(8, 11, 18, 0.88) 45%, rgba(8, 11, 18, 0.45) 75%, rgba(8, 11, 18, 0.2) 100%) !important;
}
.services-section .srv-content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-width: 480px !important;
  padding: 0 !important;
  background: transparent !important;
}
.services-section .srv-tag {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #7c9aff !important;
  background: rgba(124, 154, 255, 0.12) !important;
  border: 1px solid rgba(124, 154, 255, 0.2) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  margin-bottom: 12px !important;
  align-self: flex-start !important;
}
.services-section .srv-card h3 {
  font-size: clamp(18px, 1.6vw, 22px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  margin: 0 0 10px 0 !important;
}
.services-section .srv-grid > .srv-card:nth-child(1) h3,
.services-section .srv-grid > .srv-card:nth-child(2) h3 {
  font-size: clamp(20px, 1.8vw, 24px) !important;
}
.services-section .srv-card p,
.services-section .srv-content p {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 0 auto 0 !important;
  max-width: 440px !important;
}
.services-section .srv-arrow {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 18px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-top: 18px !important;
  transition: transform 0.25s ease, color 0.25s ease !important;
  align-self: flex-start !important;
}
.services-section .srv-card:hover .srv-arrow {
  transform: translateX(5px) !important;
  color: #ffffff !important;
}
.services-section .srv-more {
  margin-top: 28px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  text-align: center !important;
  font-size: 13.5px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}
.services-section .srv-more a {
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
}
.services-section .srv-more a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* ── 2. HOW WE WORK / PROCESS ── */
.process-section {
  background: #000000 !important;
  padding: 110px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.process-section .wrap {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
.process-section .process-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 48px !important;
  gap: 40px !important;
}
.process-section .process-header-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  max-width: 360px !important;
}
.process-section .eyebrow {
  display: inline-flex !important;
  width: auto !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-bottom: 12px !important;
}
.process-section .process-intro {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin: 0 !important;
}
.process-section .process-header-right h2 {
  font-size: clamp(32px, 3.4vw, 48px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  text-align: left !important;
}
.process-section .process-list,
.process-section .process-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin-top: 0 !important;
}
.process-section .process-row {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  align-items: center !important;
  padding: 26px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  transition: border-color 0.25s ease !important;
  transform: none !important;
}
.process-section .process-row:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.process-section .process-row:hover {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  transform: none !important;
}
.process-section .process-col-head,
.process-section .process-badge {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  min-width: auto !important;
}
.process-section .process-num {
  width: 38px !important;
  height: 38px !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  font-family: 'Manrope', sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.process-section .process-row:hover .process-num,
.process-section .process-row:first-child .process-num,
.process-section .process-row.active .process-num {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.25) !important;
}
.process-section .process-title {
  font-size: 21px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
}
.process-section .process-col-body,
.process-section .process-desc {
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin: 0 !important;
  max-width: 720px !important;
}

@media (max-width: 768px) {
  .process-section .process-header {
    flex-direction: column !important;
    gap: 14px !important;
    margin-bottom: 32px !important;
  }
  .process-section .process-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 20px 0 !important;
  }
}

/* ── 3. CLIENT REVIEWS / TESTIMONIALS ── */
.testimonials-section {
  background: #000000 !important;
  padding: 110px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.testimonials-section .wrap {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
.testimonials-section .testi-header {
  text-align: center !important;
  margin-bottom: 48px !important;
}
.testimonials-section .testi-header h2 {
  font-size: clamp(28px, 3.2vw, 44px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 12px 0 !important;
  letter-spacing: -0.02em !important;
}
.testimonials-section .testi-subtitle {
  font-size: 15px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin: 0 auto !important;
  max-width: 520px !important;
}
.testi-slider-wrap {
  position: relative !important;
  padding: 0 60px !important;
  overflow: hidden !important;
}
.testi-track {
  display: flex !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform !important;
}
.testi-slide {
  padding: 16px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.testi-photo-wrap {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  padding: 3px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(124,154,255,0.25)) !important;
  margin-bottom: 14px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}
.testi-photo {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}
.testi-stars {
  color: #f59e0b !important;
  font-size: 14px !important;
  letter-spacing: 3px !important;
  margin-bottom: 8px !important;
}
.testi-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 3px !important;
}
.testi-role {
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin-bottom: 6px !important;
  max-width: 280px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}
.testi-slide span[style*="color:#10b981"],
.testi-slide span[style*="color: #10b981"] {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #10b981 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
}
.testi-text {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  max-width: 320px !important;
  font-style: normal !important;
  text-align: center !important;
  margin: 0 auto !important;
}
.testi-arrow {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #0c0d12 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}
.testi-arrow:hover {
  background: #1a1a1a !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-50%) scale(1.05) !important;
}
.testi-arrow-prev {
  left: 4px !important;
}
.testi-arrow-next {
  right: 4px !important;
}
.testi-dots {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 32px !important;
}
.testi-dot {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  transform: none !important;
}
.testi-dot.active {
  background: transparent !important;
  transform: none !important;
}
.testi-dot::before {
  content: '' !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  transition: width 0.25s ease, background 0.25s ease !important;
}
.testi-dot.active::before {
  width: 24px !important;
  background: #ffffff !important;
}

@media (max-width: 640px) {
  .testi-slider-wrap {
    padding: 0 44px !important;
  }
}

/* ── 4. OUR TEAM / SENIOR TALENT ── */
.team-section {
  background: #000000 !important;
  padding: 110px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.team-section .wrap {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
.team-section .team-layout {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 56px !important;
  align-items: center !important;
}
.team-section .team-copy h2 {
  font-size: clamp(32px, 3.2vw, 46px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  margin: 0 0 20px 0 !important;
}
.team-section .team-copy p {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 0 24px 0 !important;
}
.team-section .team-caps {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 32px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.team-section .team-caps li {
  background: #0d0f15 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
.team-section .team-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}
.team-section .team-metric {
  background: #0d0f15 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 16px 14px !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
}
.team-section .team-metric strong {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  margin-bottom: 4px !important;
}
.team-section .team-metric span {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  line-height: 1.3 !important;
}
.team-section .team-photo-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  position: relative !important;
}
.team-section .team-photo {
  aspect-ratio: 4/5 !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  border-radius: 12px !important;
}
.team-section .team-visual-card {
  position: absolute !important;
  bottom: 16px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: 90% !important;
  background: rgba(10, 12, 18, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  padding: 10px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  text-align: center !important;
  white-space: nowrap !important;
  z-index: 10 !important;
}
.team-section .team-visual-card strong {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}
.team-section .team-visual-sub {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

@media (max-width: 860px) {
  .team-section .team-layout {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .team-section .team-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }
  .team-section .team-photo {
    width: 100% !important;
    aspect-ratio: 4/5 !important;
  }
  .team-section .team-visual-card {
    grid-column: 1 / -1 !important;
    position: static !important;
    transform: none !important;
    margin: 16px auto 0 auto !important;
    width: 100% !important;
    max-width: 320px !important;
  }
}

/* ── 5. WHY SERIOUS TEAMS CHOOSE US ── */
.why-section {
  background: #000000 !important;
  padding: 110px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.why-section .wrap {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
.why-section .why-header h2 {
  font-size: clamp(32px, 3.4vw, 46px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  margin: 0 0 44px 0 !important;
}
@media (min-width: 1025px) {
  .why-section .why-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .why-section .why-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}
@media (max-width: 640px) {
  .why-section .why-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}
.why-section .why-item {
  background: #0c0d12 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 240px !important;
  transition: border-color 0.25s ease, transform 0.25s ease !important;
}
.why-section .why-item:hover {
  border-color: rgba(255, 255, 255, 0.16) !important;
  transform: translateY(-3px) !important;
}
.why-section .why-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 20px !important;
  font-family: 'Manrope', sans-serif !important;
}
.why-section .why-body h3 {
  font-size: 17.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.3 !important;
}
.why-section .why-body p {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.58) !important;
  margin: 0 !important;
}

/* ── 6. LIFE AT BITNEKA / CULTURE ── */
.insta-section {
  background: #000000 !important;
  padding: 110px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}
.insta-section .wrap {
  max-width: 1240px !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 24px !important;
}
.insta-section .insta-header {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.insta-section .insta-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-bottom: 12px !important;
}
.insta-section .insta-h {
  font-size: clamp(30px, 3.2vw, 44px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 10px 0 !important;
}
.insta-section .insta-sub {
  font-size: 15px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin: 0 0 24px 0 !important;
}
.insta-gradient-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 20px rgba(225, 48, 108, 0.35) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.insta-gradient-pill:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 26px rgba(225, 48, 108, 0.5) !important;
}
.insta-handle {
  background: rgba(0,0,0,0.25) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}
.insta-slider {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  margin-top: 44px !important;
}
.insta-item {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #0c0d12 !important;
  aspect-ratio: 1/1 !important;
  position: relative !important;
  display: block !important;
  transition: border-color 0.25s ease, transform 0.25s ease !important;
}
.insta-item:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-3px) !important;
}
.insta-img-wrap,
.insta-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.insta-item .insta-img-wrap::after {
  content: '\f16d' !important;
  font-family: 'Font Awesome 6 Brands', 'Font Awesome 5 Brands', sans-serif !important;
  font-weight: 400 !important;
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 15px !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
@media (max-width: 640px) {
  .insta-slider {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ── 7. QUESTIONS & ANSWERS / FAQ ── */
.fq-section {
  background: #000000 !important;
  padding: 110px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.fq-section .wrap {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  text-align: center !important;
}
.fq-section .fq-eyebrow-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 auto 12px auto !important;
}
.fq-section .fq-h {
  font-size: clamp(32px, 3.4vw, 46px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  margin: 0 0 44px 0 !important;
}
.fq-list {
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  text-align: left !important;
}
.fq-card {
  background: #0b0c11 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: border-color 0.25s ease, background 0.25s ease !important;
}
.fq-card:hover {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: #0e0f16 !important;
}
.fq-trigger {
  width: 100% !important;
  padding: 22px 28px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  text-align: left !important;
  gap: 20px !important;
  font-family: inherit !important;
}
.fq-trigger span:first-child {
  font-size: clamp(17px, 1.4vw, 19.5px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.35 !important;
}
.fq-plus-ico {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
}
.fq-card.open .fq-plus-ico,
.fq-trigger[aria-expanded="true"] .fq-plus-ico {
  transform: rotate(45deg) !important;
  background: rgba(255, 255, 255, 0.14) !important;
}
.fq-body {
  padding: 0 28px 24px 28px !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

/* ══════════════════════════════════════════════════════════
   8. MASTER MOBILE-FIRST RESPONSIVE & ACCESSIBILITY SYSTEM
   Strict adherence to international product design standards
   Breakpoints: 1024px, 768px, 480px, 360px
   ══════════════════════════════════════════════════════════ */

/* Global overflow containment and text wrapping */
h1, h2, h3, h4, h5, h6, p, span, a, li, blockquote {
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

pre, code {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Base interactive touch target guarantee */
button,
input[type="submit"],
input[type="button"],
.btn,
.btn-primary-pill,
.btn-secondary-pill,
.btn-cta-primary,
.btn-cta-ghost,
.nav-hamburger,
.fq-trigger,
.service-pill,
.blog-cat-btn,
.portfolio-filter-pill {
  min-height: 44px;
}

/* ── TABLET / SMALL DESKTOP (<= 1024px) ── */
@media (max-width: 1024px) {
  .ab-values-grid,
  .ab-pillars-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }

  .sp-overview-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
}

/* ── MOBILE SCREENS (<= 768px) ── */
@media (max-width: 768px) {
  /* Headings normalization */
  h1, .sp-hero-title, .hero h1 {
    font-size: clamp(28px, 7vw, 42px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
  }

  h2, .sp-heading-h2, .fq-h, .final-cta-box h2, .sp-cta-box h2 {
    font-size: clamp(22px, 5.5vw, 32px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
  }

  /* Body copy readable typography */
  p, .sp-hero-lead, .hero-sub, .article-body p {
    font-size: 15.5px !important;
    line-height: 1.68 !important;
    color: #A0A0A0 !important;
  }

  /* 1-column layouts for critical grids */
  .jobs-grid,
  .portfolio-grid,
  .price-models-grid,
  .pricing-grid,
  .ab-values-grid,
  .ab-pillars-grid,
  .ab-leadership-grid,
  .contact-main-grid,
  .contact-form-grid,
  .form-inputs-row,
  .sp-capabilities-grid,
  .case-problem-solution,
  .problem-solution-grid,
  .hiring-stages-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Hero layouts stacking */
  .sp-hero-grid,
  .sp-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .sp-hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .sp-hero-actions .btn,
  .sp-hero-actions a {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Case study metadata strip wrap */
  .project-meta-strip,
  .case-meta-strip,
  .meta-grid {
    flex-wrap: wrap !important;
    gap: 12px 24px !important;
  }

  /* Filter bars horizontal scroll */
  .portfolio-filter-bar,
  .blog-filter-bar,
  .filter-bar {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    padding-bottom: 8px !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }

  .portfolio-filter-pill,
  .blog-cat-btn {
    flex-shrink: 0 !important;
  }

  /* Statistics 2x2 grid */
  .sp-hero-stats,
  .achievement-stats,
  .portfolio-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Responsive tables */
  table {
    min-width: 540px !important;
  }

  /* Architecture & visual diagrams */
  .sp-arch-visual,
  .arch-diagram-box,
  .case-visual-module {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ── SMALL MOBILE (<= 480px) ── */
@media (max-width: 480px) {
  :root {
    --mobile-gutter: 16px;
  }

  .wrap,
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Section vertical breathing room */
  .section-pad,
  .sp-section,
  .fq-section {
    padding: 56px 0 !important;
  }

  /* Primary CTA cards */
  .sp-cta-box,
  .final-cta-box,
  .cta-banner {
    padding: 40px 18px !important;
    border-radius: 18px !important;
  }

  /* Accordion headers */
  .fq-trigger {
    padding: 16px 14px !important;
    gap: 12px !important;
  }

  .fq-trigger span:first-child {
    font-size: 15.5px !important;
  }

  .fq-plus-ico {
    width: 32px !important;
    height: 32px !important;
    font-size: 17px !important;
  }

  .fq-body {
    padding: 0 14px 18px !important;
    font-size: 14px !important;
  }
}