/* ==========================================================================
   BITNEKA HOMEPAGE — HERO SECTION MASTER POLISH
   Exclusively scopes to .hero on index.html
   Pure Black Identity (#000000) · Codex Enterprise Atmosphere · Mastered Mobile
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   01. HERO CONTAINER & CANVAS INTEGRATION
   ────────────────────────────────────────────────────────────────────────── */
.hero {
  position: relative !important;
  background-color: #000000 !important;
  background-image: 
    radial-gradient(ellipse 65% 75% at 72% 42%, rgba(30, 64, 175, 0.16) 0%, rgba(15, 30, 90, 0.06) 48%, transparent 72%),
    radial-gradient(ellipse 40% 50% at 50% 100%, rgba(20, 35, 80, 0.08) 0%, transparent 60%) !important;
  min-height: calc(100vh - 68px) !important;
  display: flex !important;
  align-items: center !important;
  padding-top: clamp(80px, 12vh, 120px) !important;
  padding-bottom: clamp(54px, 7vh, 84px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Suppress distracting / artificial blue blobs */
.hero-blobs,
.hero .blob,
.hero .blob-1,
.hero .blob-2 {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   02. ROBOT ASSET ART DIRECTION (CLARITY · BALANCED BLEND · CODEX ATMOSPHERE)
   ────────────────────────────────────────────────────────────────────────── */
.hero-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 71% 35% !important;
  opacity: 0.90 !important;
  filter: contrast(1.15) brightness(1.02) saturate(0.96) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Multi-stop Overlay: 100% solid black over left content, clear studio illumination over robot, balanced left arm definition */
.hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 58% 72% at 71% 38%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0.22) 64%, rgba(0, 0, 0, 0.72) 88%, #000000 100%),
    linear-gradient(90deg, 
      #000000 0%, 
      #000000 42%, 
      rgba(0, 0, 0, 0.82) 49%, 
      rgba(0, 0, 0, 0.35) 56%, 
      rgba(0, 0, 0, 0.02) 63%, 
      rgba(0, 0, 0, 0.00) 71%, 
      rgba(0, 0, 0, 0.04) 79%, 
      rgba(0, 0, 0, 0.25) 88%, 
      rgba(0, 0, 0, 0.70) 100%
    ),
    linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.65) 5%, transparent 16%),
    linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.80) 8%, transparent 22%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   03. DESKTOP GRID & CONTENT COLUMN (ORDER: EYEBROW → H1 → COPY → CTA → METRICS)
   ────────────────────────────────────────────────────────────────────────── */
.hero-grid {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  align-items: center !important;
  gap: clamp(36px, 5.5vw, 68px) !important;
  width: 100% !important;
}

.hero-content {
  max-width: 620px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}

/* 1. Eyebrow */
.hero-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #4F6EF7 !important;
  background: rgba(79, 110, 247, 0.08) !important;
  border: 1px solid rgba(79, 110, 247, 0.22) !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  margin-top: 0 !important;
  margin-bottom: 22px !important;
}

/* 2. Hero H1 */
.hero h1 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: clamp(2.4rem, 4.4vw, 3.8rem) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
  margin: 0 0 22px 0 !important;
  text-align: left !important;
  text-wrap: balance !important;
}

.hero h1 .gradient-text {
  background: linear-gradient(135deg, #ffffff 40%, rgba(255, 255, 255, 0.65) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.hero-br {
  display: inline;
}

/* 3. Supporting Paragraph */
.hero-sub {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: clamp(15.5px, 1.22vw, 17.5px) !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  max-width: 530px !important;
  margin: 0 0 32px 0 !important;
  text-align: left !important;
}

/* 4. CTA Group */
.hero-ctas {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin: 0 0 36px 0 !important;
  width: auto !important;
}

.btn-hero {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  height: 48px !important;
  padding: 0 26px !important;
  background: #ffffff !important;
  color: #000000 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  border: none !important;
  text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.16) !important;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.btn-hero:hover {
  background-color: #f1f5f9 !important;
  color: #000000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(255, 255, 255, 0.26) !important;
}

.btn-hero svg {
  stroke: #000000 !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  transition: transform 0.2s ease !important;
}

.btn-hero:hover svg {
  transform: translateX(3px) !important;
}

.btn-hero-ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 48px !important;
  padding: 0 22px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.btn-hero-ghost:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* 5. Metrics (Clean Open Editorial Facts Row) */
.hero-stats {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: clamp(18px, 3vw, 32px) !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin: 0 !important;
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
}

.hstat {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
}

.hstat b {
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(22px, 2.4vw, 26px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  display: block !important;
  margin: 0 !important;
}

.hstat span {
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.62) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  display: block !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

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

/* ──────────────────────────────────────────────────────────────────────────
   04. RIGHT-SIDE VISUAL & TELEMETRY CARD (TECHNICAL INSTRUMENTATION)
   ────────────────────────────────────────────────────────────────────────── */
.hero-mockup {
  position: relative !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  min-height: 480px !important;
  padding-bottom: clamp(68px, 8.8vh, 88px) !important;
  padding-right: clamp(32px, 4.8vw, 64px) !important;
  width: 100% !important;
  margin: 0 !important;
  z-index: 2 !important;
}

.hero-mockup-card {
  width: 100% !important;
  max-width: 254px !important;
  background: rgba(10, 12, 16, 0.82) !important;
  backdrop-filter: blur(24px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.70), 0 0 0 1px rgba(79, 110, 247, 0.12) !important;
  animation: none !important;
  transform: none !important;
}

.mockup-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 6px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.mockup-dots {
  display: flex !important;
  gap: 4.5px !important;
}

.mockup-dot {
  width: 5.5px !important;
  height: 5.5px !important;
  border-radius: 50% !important;
  opacity: 0.75 !important;
}

.mockup-dot:nth-child(1) { background: #ef4444 !important; }
.mockup-dot:nth-child(2) { background: #f59e0b !important; }
.mockup-dot:nth-child(3) { background: #10b981 !important; }

.mockup-badge {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8.5px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.50) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4.5px !important;
  letter-spacing: 0.03em !important;
}

.mockup-metric {
  margin-bottom: 7px !important;
}

.mockup-metric-value {
  display: block !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(1.3rem, 1.5vw, 1.44rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
}

.mockup-metric-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  color: rgba(255, 255, 255, 0.46) !important;
  font-weight: 500 !important;
}

.mockup-bars {
  display: flex !important;
  align-items: flex-end !important;
  gap: 4.5px !important;
  height: 20px !important;
  margin-bottom: 8px !important;
  padding: 2px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.mockup-bar {
  flex: 1 !important;
  background: rgba(79, 110, 247, 0.45) !important;
  border-radius: 2px 2px 0 0 !important;
  transition: height 0.3s ease, background-color 0.2s ease !important;
}

.mockup-bar:hover {
  background-color: rgba(79, 110, 247, 0.85) !important;
}

.mockup-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 10px !important;
}

.mockup-status {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: rgba(255, 255, 255, 0.50) !important;
  font-weight: 500 !important;
  font-size: 9.5px !important;
  white-space: nowrap !important;
}

.mockup-status-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6) !important;
  flex-shrink: 0 !important;
}

.mockup-footer span {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  color: #93c5fd !important;
  background: rgba(79, 110, 247, 0.12) !important;
  border: 1px solid rgba(79, 110, 247, 0.22) !important;
  padding: 1.5px 5.5px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   05. TABLET RESPONSIVE PASS (768px – 1024px)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }

  .hero-mockup {
    min-height: 400px !important;
    padding-bottom: 36px !important;
    padding-right: 0 !important;
  }

  .hero-mockup-card {
    max-width: 240px !important;
    transform: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   06. MOBILE RESPONSIVE PASS (320px – 768px)
   ORDER: EYEBROW → H1 → COPY → CTAs → METRICS → DEDICATED VISUAL BLOCK
   STRICT LEFT ALIGNMENT · NO DISCONNECTED BLOCKS · BALANCED VISUAL STACK
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero {
    min-height: auto !important;
    padding-top: clamp(40px, 5.5vh, 48px) !important;
    padding-bottom: 16px !important;
    background-color: #000000 !important;
    background-image: 
      radial-gradient(ellipse 65% 40% at 50% 86%, rgba(24, 52, 145, 0.18) 0%, rgba(12, 24, 70, 0.05) 55%, transparent 75%) !important;
  }

  /* Robot video: Upper-body / three-quarter portrait; head and chest dominant, legs cropped */
  .hero-video {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -215px !important;
    top: auto !important;
    inset: auto 0 -215px 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 505px !important;
    object-fit: cover !important;
    object-position: 66% top !important;
    opacity: 0.90 !important;
    filter: contrast(1.15) brightness(1.02) saturate(0.96) !important;
    mask-image: linear-gradient(180deg, transparent 0%, black 8%, black 90%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 8%, black 90%, transparent 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* Pure black text protection over content; transparent studio window opens over robot upper body and HUD */
  .hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, 
      #000000 0%, 
      #000000 calc(100% - 305px), 
      rgba(0, 0, 0, 0.40) calc(100% - 290px), 
      transparent calc(100% - 275px), 
      transparent calc(100% - 14px), 
      #000000 100%
    ) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .hero-content {
    max-width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
    order: 1 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Eyebrow */
  .hero-eyebrow {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding: 4px 12px !important;
    font-size: 10.5px !important;
    align-self: flex-start !important;
    text-align: left !important;
  }

  /* Prevent forced desktop <br> from snapping words unnaturally */
  .hero h1 br.hero-br {
    display: none !important;
  }

  .hero h1 {
    font-size: clamp(1.95rem, 7.4vw, 2.3rem) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 12px !important;
    text-align: left !important;
  }

  .hero-sub {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 18px !important;
    max-width: 100% !important;
    text-align: left !important;
    color: rgba(255, 255, 255, 0.78) !important;
  }

  /* CTA Buttons */
  .hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
  }

  .btn-hero,
  .btn-hero-ghost {
    width: 100% !important;
    height: 48px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
    justify-content: center !important;
  }

  /* Clean, open 3-column metrics row — strictly left aligned */
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding-top: 16px !important;
    margin-bottom: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
  }

  .hstat {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 2px !important;
  }

  .hstat-div {
    display: none !important;
  }

  .hstat b {
    font-size: clamp(17px, 4.6vw, 20px) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
  }

  .hstat span {
    font-size: 11px !important;
    line-height: 1.25 !important;
    color: rgba(255, 255, 255, 0.58) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
  }

  /* Dedicated bounded visual container directly below mini stats */
  .hero-mockup {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-end !important;
    width: 100% !important;
    height: 270px !important;
    min-height: auto !important;
    padding: 0 0 6px clamp(12px, 3.8vw, 20px) !important;
    margin-top: 14px !important;
    order: 2 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Telemetry card: Small technical overlay docked to lower-left (overlapping lower waist, never face/chest) */
  .hero-mockup-card {
    width: 100% !important;
    max-width: 175px !important;
    background: rgba(8, 10, 15, 0.86) !important;
    backdrop-filter: blur(20px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 10px !important;
    padding: 6px 9px !important;
    margin: 0 !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(79, 110, 247, 0.14) !important;
    transform: none !important;
  }

  .mockup-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 3.5px !important;
    margin-bottom: 3.5px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  .mockup-dots {
    display: flex !important;
    gap: 3px !important;
  }

  .mockup-dot {
    width: 3.5px !important;
    height: 3.5px !important;
    border-radius: 50% !important;
    opacity: 0.75 !important;
  }

  .mockup-dot:nth-child(1) { background: #ef4444 !important; }
  .mockup-dot:nth-child(2) { background: #f59e0b !important; }
  .mockup-dot:nth-child(3) { background: #10b981 !important; }

  .mockup-badge {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 6.8px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.50) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    letter-spacing: 0.02em !important;
  }

  .mockup-metric {
    margin-bottom: 3px !important;
  }

  .mockup-metric-value {
    display: block !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    margin-bottom: 1px !important;
  }

  .mockup-metric-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 7.5px !important;
    color: rgba(255, 255, 255, 0.48) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
  }

  .mockup-bars {
    display: flex !important;
    align-items: flex-end !important;
    gap: 2px !important;
    height: 8px !important;
    margin-bottom: 4px !important;
    padding: 1px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  .mockup-bar {
    flex: 1 !important;
    background: rgba(79, 110, 247, 0.45) !important;
    border-radius: 1px 1px 0 0 !important;
  }

  .mockup-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 6.8px !important;
    gap: 3.5px !important;
  }

  .mockup-status {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    color: rgba(255, 255, 255, 0.50) !important;
    font-weight: 500 !important;
    font-size: 6.6px !important;
    white-space: nowrap !important;
  }

  .mockup-status-dot {
    width: 3.2px !important;
    height: 3.2px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.6) !important;
    flex-shrink: 0 !important;
  }

  .mockup-footer span {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 6.2px !important;
    font-weight: 600 !important;
    color: #93c5fd !important;
    background: rgba(79, 110, 247, 0.12) !important;
    border: 1px solid rgba(79, 110, 247, 0.22) !important;
    padding: 0.5px 3px !important;
    border-radius: 2.5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   07. NARROW SCREENS (320px – 360px)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .hero {
    padding-top: 38px !important;
    padding-bottom: 14px !important;
  }

  .hero h1 {
    font-size: 1.7rem !important;
    line-height: 1.15 !important;
    margin-bottom: 10px !important;
  }

  .hero-sub {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
  }

  .hero-ctas {
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  .btn-hero,
  .btn-hero-ghost {
    height: 44px !important;
    font-size: 13px !important;
  }

  .hero-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    padding-top: 14px !important;
  }

  .hstat b {
    font-size: 15px !important;
  }

  .hstat span {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  .hero-mockup {
    height: 250px !important;
    margin-top: 12px !important;
    padding: 0 0 6px 10px !important;
  }

  .hero-mockup-card {
    max-width: 162px !important;
    padding: 5px 7px !important;
    border-radius: 9px !important;
    transform: none !important;
  }

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

  .mockup-metric-label {
    font-size: 7.2px !important;
  }

  .mockup-bars {
    height: 7px !important;
  }

  .mockup-footer {
    font-size: 6.5px !important;
  }

  .mockup-status {
    font-size: 6.5px !important;
  }

  .mockup-footer span {
    font-size: 6px !important;
    padding: 1px 3px !important;
  }

  .hero-video {
    height: 460px !important;
    bottom: -196px !important;
    inset: auto 0 -196px 0 !important;
    object-position: 66% top !important;
  }

  .hero-overlay {
    background: linear-gradient(180deg, 
      #000000 0%, 
      #000000 calc(100% - 280px), 
      rgba(0, 0, 0, 0.40) calc(100% - 265px), 
      transparent calc(100% - 250px), 
      transparent calc(100% - 12px), 
      #000000 100%
    ) !important;
  }
}

/* ==========================================================================
   BITNEKA HOMEPAGE — DESKTOP SECTIONS MASTER POLISH (992px+)
   Scope: Sections 02 through 07 on index.html
   Target Range: 1280px · 1440px · 1600px+
   Pure Black Identity (#000000) · Senior Editorial Engineering Finish
   Hero Locked · Mobile Locked · No Overlap
   ========================================================================== */
@media (min-width: 992px) {

  /* ────────────────────────────────────────────────────────────────────────
     01. GLOBAL SECTION RHYTHM & BASELINE TOKENS
     ──────────────────────────────────────────────────────────────────────── */
  .trust-section,
  .services-section,
  .tech-section,
  .industries-section,
  .work-section,
  .scale-section,
  .process-section {
    background-color: #000000 !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /* Universal section eyebrow normalization for desktop */
  .services-section .eyebrow,
  .tech-section .eyebrow,
  .industries-section .eyebrow,
  .work-section .eyebrow,
  .scale-section .eyebrow,
  .process-section .eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #4F6EF7 !important;
    background: rgba(79, 110, 247, 0.08) !important;
    border: 1px solid rgba(79, 110, 247, 0.20) !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    width: fit-content !important;
    max-width: max-content !important;
    box-shadow: none !important;
  }

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

  /* Universal section H2 typography */
  .services-section h2,
  .tech-section h2,
  .industries-section h2,
  .work-section h2,
  .scale-section h2,
  .process-section h2 {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: clamp(2.2rem, 3.2vw, 3rem) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.035em !important;
    line-height: 1.12 !important;
    margin: 0 !important;
  }

  /* ────────────────────────────────────────────────────────────────────────
     02. TECHNOLOGY / PLATFORM LOGO STRIP (SECTION 02 TRUST)
     Significantly reduced footprint · Balanced optical height · Truthful claims
     ──────────────────────────────────────────────────────────────────────── */
  .trust-section {
    padding: 26px 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-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.42) !important;
    text-align: center !important;
    margin: 0 0 16px 0 !important;
    display: block !important;
  }

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

  .trust-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .trust-logo img {
    height: 20px !important;
    width: auto !important;
    max-width: 105px !important;
    object-fit: contain !important;
    opacity: 0.50 !important;
    filter: brightness(0) invert(1) !important;
    transition: opacity 0.22s ease, transform 0.22s ease !important;
  }

  .trust-logo img:hover {
    opacity: 0.88 !important;
    transform: translateY(-1px) !important;
  }

  /* Optical balancing across different logo aspect ratios */
  .trust-logo img[src*="shopify"] {
    max-width: 88px !important;
    height: 21px !important;
  }
  .trust-logo img[src*="Cisco"] {
    max-width: 74px !important;
    height: 18px !important;
  }
  .trust-logo img[src*="Simbiz"] {
    max-width: 84px !important;
    height: 19px !important;
  }

} /* ── Close @media (min-width: 992px) for Sections 01 & 02 ── */

/* ────────────────────────────────────────────────────────────────────────
   03. SERVICES BENTO & SECONDARY CAPABILITIES (SECTION 03 SERVICES)
   Senior-Engineered Full Responsive Architecture:
   • 1440px Desktop: Strict 2–3–1 Bento Hierarchy (AI & Software row,
     Mobile/Data/ERP row, Security & DevOps full span)
   • 1024px & 768px Tablet: Balanced 2-Column composition, eliminating
     cramped middle row and preserving copy legibility
   • Mobile (414px / 390px / 375px / 320px): Clean Single Column, zero
     horizontal overflow, content-driven responsive heights
   • Pure Black Identity (#000000) neutralizing legacy navy backgrounds
   • Single Padding System: 0 on .srv-card, intentional padding on .srv-content
     (eliminates legacy double-padding conflict)
   • Inactive .srv-overlay: localized background gradients are canonical
   • Image Art Direction: clear phone framing, visible hardware details,
     optimal contrast for readability
   • Additional Capabilities: refined secondary index, clean mobile wrapping
   • Reduced motion & coarse pointer accessibility support
   ──────────────────────────────────────────────────────────────────────── */

/* Section Canvas & Vertical Rhythm (Enforces pure black across all themes) */
html[data-theme="dark"] .services-section,
body[data-theme="dark"] .services-section,
[data-theme="dark"] .services-section,
body .services-section,
.services-section {
  background: #000000 !important;
  background-color: #000000 !important;
  padding: clamp(64px, 7vw, 96px) 0 clamp(40px, 5vw, 64px) 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
  border-top: none !important;
}

/* Services Section Header */
.services-section .srv-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-bottom: clamp(32px, 3.8vw, 44px) !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}

.services-section .srv-header-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  max-width: 720px !important;
}

.services-section .srv-header-right {
  display: flex !important;
  align-items: flex-end !important;
  padding-bottom: 4px !important;
}

/* Eyebrow badge */
.services-section .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #4F6EF7 !important;
  background: rgba(79, 110, 247, 0.08) !important;
  border: 1px solid rgba(79, 110, 247, 0.20) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  width: fit-content !important;
  max-width: max-content !important;
  box-shadow: none !important;
}

/* Section H2 Heading */
.services-section h2 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: clamp(28px, 3.6vw, 44px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.035em !important;
  line-height: 1.14 !important;
  margin: 0 !important;
}

/* CTA "Explore all services" */
.services-section .srv-view-all {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
  padding-bottom: 3px !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
  white-space: nowrap !important;
}

.services-section .srv-view-all:hover {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.70) !important;
}

.services-section .srv-view-all svg {
  stroke: currentColor !important;
  transition: transform 0.2s ease !important;
  flex-shrink: 0 !important;
}

.services-section .srv-view-all:hover svg {
  transform: translateX(3px) !important;
}

.services-section .srv-view-all:focus-visible {
  outline: 2px solid #7c9aff !important;
  outline-offset: 3px !important;
  border-radius: 2px !important;
}

/* ── Card Surface & Core Architecture ── */
/* Explicitly zero out card padding to eliminate legacy double-padding */
.services-section .srv-card {
  position: relative !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background-color: #07090e !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease !important;
}

/* Refined hover: subtle lift (-3px, overriding legacy -8px), soft border brightening */
.services-section .srv-card:hover {
  border-color: rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.65) !important;
}

/* Accessible focus ring for keyboard navigation */
.services-section .srv-card:focus-visible {
  outline: 2px solid #7c9aff !important;
  outline-offset: 3px !important;
  border-color: rgba(124, 154, 255, 0.6) !important;
}

/* Suppress legacy duplicate / navy overlay */
.services-section .srv-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Content wrapper exclusively controls interior spacing */
.services-section .srv-content {
  position: relative !important;
  z-index: 2 !important;
  padding: 24px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Technical Category Tag */
.services-section .srv-tag {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #7c9aff !important;
  background: rgba(79, 110, 247, 0.10) !important;
  border: 1px solid rgba(79, 110, 247, 0.20) !important;
  padding: 3px 9px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-self: flex-start !important;
  margin-bottom: 10px !important;
  max-width: calc(100% - 44px) !important;
}

/* Card Titles */
.services-section .srv-card h3 {
  font-family: 'Manrope', sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 8px 0 !important;
}

/* Card Descriptions */
.services-section .srv-card p {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.70) !important;
  margin: 0 !important;
  max-width: 460px !important;
}

/* Normalized Action Arrow: Top-Right Architectural Badge */
.services-section .srv-arrow {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  bottom: auto !important;
  left: auto !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
  z-index: 3 !important;
}

.services-section .srv-card:hover .srv-arrow {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  color: #ffffff !important;
  transform: translate(2px, -2px) !important;
}

/* ── Secondary Capabilities Row (Shared Baseline) ── */
.services-section .srv-more {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 28px !important;
  padding: 16px 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: transparent !important;
}

.services-section .srv-more-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.45) !important;
  white-space: nowrap !important;
}

.services-section .srv-more-pipe {
  color: rgba(255, 255, 255, 0.14) !important;
  font-size: 12px !important;
}

.services-section .srv-more-links {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.services-section .srv-more-link {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  text-decoration: none !important;
  transition: color 0.18s ease, border-color 0.18s ease !important;
  white-space: nowrap !important;
}

.services-section .srv-more-link:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.services-section .srv-more-link:focus-visible {
  outline: 2px solid #7c9aff !important;
  outline-offset: 3px !important;
  border-radius: 2px !important;
}

.services-section .srv-more-sep {
  color: rgba(255, 255, 255, 0.20) !important;
  font-size: 9px !important;
}


/* ==========================================================================
   VIEWPORT BREAKPOINT 1: DESKTOP (>= 1200px)
   Full 2–3–1 Bento Hierarchy · 6-Column CSS Grid
   ========================================================================== */
@media (min-width: 1200px) {
  .services-section .srv-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
  }

  /* Row 1: AI & Custom Software (3 columns each) */
  .services-section .srv-grid > .srv-card:nth-child(1) {
    grid-column: 1 / 4 !important;
    height: 320px !important;
    min-height: 320px !important;
    background: linear-gradient(90deg, rgba(2,3,6,0.96) 0%, rgba(2,3,6,0.85) 44%, rgba(2,3,6,0.22) 75%, rgba(2,3,6,0.32) 100%),
                url('../images/home/bento-ai.jpg') no-repeat right center / cover !important;
  }

  .services-section .srv-grid > .srv-card:nth-child(2) {
    grid-column: 4 / 7 !important;
    height: 320px !important;
    min-height: 320px !important;
    background: linear-gradient(90deg, rgba(2,3,6,0.96) 0%, rgba(2,3,6,0.84) 45%, rgba(2,3,6,0.18) 78%, rgba(2,3,6,0.28) 100%),
                url('../images/home/bento-software.jpg') no-repeat right center / cover !important;
  }

  /* Row 2: Mobile App, Data & Dynamics (2 columns each) */
  .services-section .srv-grid > .srv-card:nth-child(3) {
    grid-column: 1 / 3 !important;
    height: 280px !important;
    min-height: 280px !important;
    background: linear-gradient(180deg, rgba(2,3,6,0.16) 0%, rgba(2,3,6,0.48) 38%, rgba(2,3,6,0.92) 78%, rgba(2,3,6,0.98) 100%),
                url('../images/home/bento-mobile.jpg') no-repeat center 28% / cover !important;
  }

  .services-section .srv-grid > .srv-card:nth-child(4) {
    grid-column: 3 / 5 !important;
    height: 280px !important;
    min-height: 280px !important;
    background: linear-gradient(180deg, rgba(2,3,6,0.18) 0%, rgba(2,3,6,0.50) 40%, rgba(2,3,6,0.92) 80%, rgba(2,3,6,0.98) 100%),
                url('../images/home/bento-data.jpg') no-repeat center center / cover !important;
  }

  .services-section .srv-grid > .srv-card:nth-child(5) {
    grid-column: 5 / 7 !important;
    height: 280px !important;
    min-height: 280px !important;
    background: linear-gradient(180deg, rgba(2,3,6,0.20) 0%, rgba(2,3,6,0.52) 40%, rgba(2,3,6,0.92) 80%, rgba(2,3,6,0.98) 100%),
                url('../images/home/bento-dynamics.jpg') no-repeat center center / cover !important;
  }

  /* Row 3: Cybersecurity & DevOps (Full span across all 6 columns) */
  .services-section .srv-grid > .srv-card:nth-child(6) {
    grid-column: 1 / 7 !important;
    height: 210px !important;
    min-height: 210px !important;
    background: linear-gradient(90deg, rgba(2,3,6,0.96) 0%, rgba(2,3,6,0.84) 42%, rgba(2,3,6,0.18) 75%, rgba(2,3,6,0.34) 100%),
                url('../images/home/bento-security.jpg') no-repeat right center / cover !important;
  }

  /* Desktop card title emphasis */
  .services-section .srv-grid > .srv-card:nth-child(1) h3,
  .services-section .srv-grid > .srv-card:nth-child(2) h3 {
    font-size: 22px !important;
    max-width: 480px !important;
  }

  .services-section .srv-grid > .srv-card:nth-child(6) h3 {
    font-size: 21px !important;
    max-width: 480px !important;
  }
}


/* ==========================================================================
   VIEWPORT BREAKPOINT 2: TABLET (768px – 1199px)
   Balanced 2-Column Composition · Eliminates Cramped 3-Column Middle Row
   Addresses 1024px and 768px Tablet Screens
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
  .services-section .srv-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .services-section .srv-card {
    height: auto !important;
    min-height: 260px !important;
  }

  /* Card 1 (AI & Automation): Prominent top hero anchor across both columns */
  .services-section .srv-grid > .srv-card:nth-child(1) {
    grid-column: 1 / -1 !important;
    min-height: 280px !important;
    background: linear-gradient(90deg, rgba(2,3,6,0.96) 0%, rgba(2,3,6,0.85) 45%, rgba(2,3,6,0.22) 76%, rgba(2,3,6,0.32) 100%),
                url('../images/home/bento-ai.jpg') no-repeat right center / cover !important;
  }

  .services-section .srv-grid > .srv-card:nth-child(1) h3 {
    font-size: 21px !important;
    max-width: 520px !important;
  }

  /* Card 2 (Custom Software): Column 1 */
  .services-section .srv-grid > .srv-card:nth-child(2) {
    grid-column: 1 / 2 !important;
    background: linear-gradient(180deg, rgba(2,3,6,0.20) 0%, rgba(2,3,6,0.56) 42%, rgba(2,3,6,0.92) 80%, rgba(2,3,6,0.98) 100%),
                url('../images/home/bento-software.jpg') no-repeat right center / cover !important;
  }

  /* Card 3 (Mobile App): Column 2 */
  .services-section .srv-grid > .srv-card:nth-child(3) {
    grid-column: 2 / 3 !important;
    background: linear-gradient(180deg, rgba(2,3,6,0.16) 0%, rgba(2,3,6,0.46) 38%, rgba(2,3,6,0.92) 78%, rgba(2,3,6,0.98) 100%),
                url('../images/home/bento-mobile.jpg') no-repeat center 26% / cover !important;
  }

  /* Card 4 (Data & Intelligence): Column 1 */
  .services-section .srv-grid > .srv-card:nth-child(4) {
    grid-column: 1 / 2 !important;
    background: linear-gradient(180deg, rgba(2,3,6,0.18) 0%, rgba(2,3,6,0.50) 40%, rgba(2,3,6,0.92) 80%, rgba(2,3,6,0.98) 100%),
                url('../images/home/bento-data.jpg') no-repeat center center / cover !important;
  }

  /* Card 5 (Dynamics 365 & ERP): Column 2 */
  .services-section .srv-grid > .srv-card:nth-child(5) {
    grid-column: 2 / 3 !important;
    background: linear-gradient(180deg, rgba(2,3,6,0.20) 0%, rgba(2,3,6,0.52) 40%, rgba(2,3,6,0.92) 80%, rgba(2,3,6,0.98) 100%),
                url('../images/home/bento-dynamics.jpg') no-repeat center center / cover !important;
  }

  /* Card 6 (Cybersecurity & DevOps): Wide foundational anchor across both columns */
  .services-section .srv-grid > .srv-card:nth-child(6) {
    grid-column: 1 / -1 !important;
    min-height: 230px !important;
    background: linear-gradient(90deg, rgba(2,3,6,0.96) 0%, rgba(2,3,6,0.85) 45%, rgba(2,3,6,0.20) 76%, rgba(2,3,6,0.34) 100%),
                url('../images/home/bento-security.jpg') no-repeat right center / cover !important;
  }

  .services-section .srv-grid > .srv-card:nth-child(6) h3 {
    font-size: 21px !important;
    max-width: 520px !important;
  }
}


/* ==========================================================================
   VIEWPORT BREAKPOINT 3: MOBILE (< 768px: 414px, 390px, 375px, 320px)
   Single Clean Vertical Column · No Horizontal Carousel · Zero Overflow
   ========================================================================== */
@media (max-width: 767px) {
  .services-section {
    padding: 56px 0 36px 0 !important;
  }

  /* Header Stacking on Mobile */
  .services-section .srv-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
  }

  .services-section .srv-header-left {
    max-width: 100% !important;
  }

  .services-section .srv-header-right {
    align-items: flex-start !important;
    padding-bottom: 0 !important;
  }

  .services-section .srv-view-all {
    margin-bottom: 0 !important;
  }

  /* Single Column Card Grid */
  .services-section .srv-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: visible !important;
  }

  .services-section .srv-card {
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 215px !important;
    border-radius: 14px !important;
  }

  /* Mobile Content Spacing & Responsive Typography */
  .services-section .srv-content {
    padding: 20px 20px !important;
    min-height: 215px !important;
  }

  .services-section .srv-card h3 {
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
    max-width: calc(100% - 36px) !important;
  }

  .services-section .srv-card p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.68) !important;
  }

  /* Mobile Card Backgrounds: Vertical Gradients for Superior Mobile Legibility */
  .services-section .srv-grid > .srv-card:nth-child(1) {
    background: linear-gradient(180deg, rgba(2,3,6,0.18) 0%, rgba(2,3,6,0.56) 42%, rgba(2,3,6,0.92) 78%, rgba(2,3,6,0.98) 100%),
                url('../images/home/bento-ai.jpg') no-repeat right center / cover !important;
  }

  .services-section .srv-grid > .srv-card:nth-child(2) {
    background: linear-gradient(180deg, rgba(2,3,6,0.20) 0%, rgba(2,3,6,0.56) 42%, rgba(2,3,6,0.92) 80%, rgba(2,3,6,0.98) 100%),
                url('../images/home/bento-software.jpg') no-repeat right center / cover !important;
  }

  .services-section .srv-grid > .srv-card:nth-child(3) {
    background: linear-gradient(180deg, rgba(2,3,6,0.15) 0%, rgba(2,3,6,0.46) 38%, rgba(2,3,6,0.92) 78%, rgba(2,3,6,0.98) 100%),
                url('../images/home/bento-mobile.jpg') no-repeat center 24% / cover !important;
  }

  .services-section .srv-grid > .srv-card:nth-child(4) {
    background: linear-gradient(180deg, rgba(2,3,6,0.18) 0%, rgba(2,3,6,0.50) 40%, rgba(2,3,6,0.92) 80%, rgba(2,3,6,0.98) 100%),
                url('../images/home/bento-data.jpg') no-repeat center center / cover !important;
  }

  .services-section .srv-grid > .srv-card:nth-child(5) {
    background: linear-gradient(180deg, rgba(2,3,6,0.20) 0%, rgba(2,3,6,0.52) 40%, rgba(2,3,6,0.92) 80%, rgba(2,3,6,0.98) 100%),
                url('../images/home/bento-dynamics.jpg') no-repeat center center / cover !important;
  }

  .services-section .srv-grid > .srv-card:nth-child(6) {
    background: linear-gradient(180deg, rgba(2,3,6,0.18) 0%, rgba(2,3,6,0.54) 42%, rgba(2,3,6,0.92) 80%, rgba(2,3,6,0.98) 100%),
                url('../images/home/bento-security.jpg') no-repeat right center / cover !important;
  }
}

/* Secondary Capabilities Row: Mobile Clean Wrap & Badge Formatting (< 640px) */
@media (max-width: 640px) {
  .services-section .srv-more {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-top: 22px !important;
    padding: 16px 0 0 0 !important;
  }

  .services-section .srv-more-label {
    font-size: 10.5px !important;
    margin-bottom: 2px !important;
  }

  .services-section .srv-more-pipe,
  .services-section .srv-more-sep {
    display: none !important;
  }

  .services-section .srv-more-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .services-section .srv-more-link {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    min-height: 32px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
  }

  .services-section .srv-more-link:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    text-decoration: none !important;
  }
}

/* Narrow Mobile / 320px Constraints (<= 360px) */
@media (max-width: 360px) {
  .services-section {
    padding: 48px 0 28px 0 !important;
  }

  .services-section h2 {
    font-size: 26px !important;
  }

  /* Prevent awkward forced line-break on 320px */
  .services-section h2 br {
    display: inline !important;
    content: ' ' !important;
  }

  .services-section .srv-card {
    min-height: 195px !important;
  }

  .services-section .srv-content {
    padding: 16px 14px !important;
    min-height: 195px !important;
  }

  .services-section .srv-card h3 {
    font-size: 17px !important;
  }

  .services-section .srv-card p {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  .services-section .srv-arrow {
    top: 14px !important;
    right: 14px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }
}

/* Touch & Coarse Pointer Accessibility: Prevent Sticky Hover on Mobile/Tablet */
@media (hover: none) {
  .services-section .srv-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }

  .services-section .srv-card:hover .srv-arrow {
    transform: none !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }

  .services-section .srv-view-all:hover svg {
    transform: none !important;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .services-section .srv-card,
  .services-section .srv-arrow,
  .services-section .srv-view-all,
  .services-section .srv-view-all svg,
  .services-section .srv-more-link {
    transition: none !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MASTER LOWER HOMEPAGE: SECTIONS 04 THROUGH 14 (TECHNOLOGY → FINAL CTA)
   • Pure Black Canvas (#000000) across all themes and viewports
   • Unified Enterprise Spacing & Rhythm (eliminates legacy 110px dead zones)
   • Canonical Breakpoint Hierarchy: Desktop (>=1024px/1200px), Tablet (768-1199px),
     Mobile (<768px), Narrow Mobile (<=360px/320px)
   • Zero Horizontal Overflow · Accessible Triggers (>=44px) · Focus Visible
   ══════════════════════════════════════════════════════════════════════════ */

/* ── GLOBAL BLACK CANVAS FOR REMAINING SECTIONS ── */
html[data-theme="dark"] .tech-section,
html[data-theme="dark"] .industries-section,
html[data-theme="dark"] .work-section,
html[data-theme="dark"] .scale-section,
html[data-theme="dark"] .process-section,
html[data-theme="dark"] .testimonials-section,
html[data-theme="dark"] .team-section,
html[data-theme="dark"] .why-section,
html[data-theme="dark"] .insta-section,
html[data-theme="dark"] .fq-section,
html[data-theme="dark"] .cta-section,
body .tech-section,
body .industries-section,
body .work-section,
body .scale-section,
body .process-section,
body .testimonials-section,
body .team-section,
body .why-section,
body .insta-section,
body .fq-section,
body .cta-section,
.tech-section,
.industries-section,
.work-section,
.scale-section,
.process-section,
.testimonials-section,
.team-section,
.why-section,
.insta-section,
.fq-section,
.cta-section {
  background: #000000 !important;
  background-color: #000000 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Normalized section headings & eyebrows for remaining sections */
.tech-section h2,
.industries-section h2,
.work-section h2,
.scale-section h2,
.process-section h2,
.testimonials-section h2,
.team-section h2,
.why-section h2,
.insta-section h2,
.fq-section h2,
.cta-section h2 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: clamp(28px, 3.4vw, 42px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.035em !important;
  line-height: 1.15 !important;
  margin: 0 0 16px 0 !important;
}

.tech-section .eyebrow,
.industries-section .eyebrow,
.work-section .eyebrow,
.scale-section .eyebrow,
.process-section .eyebrow,
.testimonials-section .eyebrow,
.team-section .eyebrow,
.why-section .eyebrow,
.insta-section .insta-eyebrow,
.fq-section .fq-eyebrow-tag,
.cta-section .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #4F6EF7 !important;
  background: rgba(79, 110, 247, 0.08) !important;
  border: 1px solid rgba(79, 110, 247, 0.20) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  width: fit-content !important;
  max-width: max-content !important;
  box-shadow: none !important;
}


/* ────────────────────────────────────────────────────────────────────────
   04. ENTERPRISE PLATFORMS & STATUS STRIP (SECTION 04 TECHNOLOGY)
   4 Clean Capability Columns · Typographic Lists · Open Status Baseline
   ──────────────────────────────────────────────────────────────────────── */
.tech-section {
  padding: clamp(60px, 6.5vw, 84px) 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.tech-header {
  margin-bottom: clamp(28px, 3.5vw, 40px) !important;
}

/* Desktop layout (>= 1200px): 4 open capability columns */
@media (min-width: 1200px) {
  .tech-groups {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: transparent !important;
  }

  .tech-group-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 28px 24px 28px 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .tech-groups > .tech-group-card:nth-child(2),
  .tech-groups > .tech-group-card:nth-child(3),
  .tech-groups > .tech-group-card:nth-child(4) {
    padding-left: 24px !important;
  }

  .tech-groups > .tech-group-card:nth-child(4) {
    border-right: none !important;
    padding-right: 0 !important;
  }
}

/* Tablet layout (768px – 1199px): deliberate 2x2 capability grid */
@media (min-width: 768px) and (max-width: 1199px) {
  .tech-groups {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    border-top: none !important;
    border-bottom: none !important;
    background: transparent !important;
  }

  .tech-group-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 24px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

/* Card Head & Icon */
.tech-group-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.tech-card-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(79, 110, 247, 0.08) !important;
  border: 1px solid rgba(79, 110, 247, 0.18) !important;
  color: #7c9aff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

.tech-group-label {
  font-family: 'Manrope', sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

/* Typographic list of technologies (no heavy pills) */
.tech-pills {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.tech-pills li {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.68) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035) !important;
  display: flex !important;
  align-items: center !important;
  transition: color 0.18s ease !important;
}

.tech-pills li:hover {
  color: #ffffff !important;
}

/* Open Horizontal Status Strip */
.tech-cred-banner {
  margin-top: 28px !important;
  padding: 16px 0 0 0 !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

.tech-cred-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.tech-cred-item i {
  color: #34d399 !important;
  font-size: 12px !important;
  margin: 0 !important;
}

.tech-cred-dot {
  color: rgba(255, 255, 255, 0.16) !important;
}

/* Mobile layout (< 768px): clean accordion */
@media (max-width: 767px) {
  .tech-section {
    padding: 56px 0 !important;
  }

  .tech-groups {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .tech-group-card {
    background: #07080a !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease !important;
  }

  .tech-group-card.is-open,
  .tech-group-card.tech-group--open {
    border-color: rgba(124, 154, 255, 0.35) !important;
  }

  .tech-group-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 18px !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    cursor: pointer !important;
    user-select: none !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
  }

  .tech-group-head::after {
    content: '+' !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    margin-left: auto !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
  }

  .tech-group-card.is-open .tech-group-head::after,
  .tech-group-card.tech-group--open .tech-group-head::after {
    content: '−' !important;
    color: #7c9aff !important;
  }

  .tech-pills {
    padding: 0 18px 16px 18px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 12px !important;
  }

  .tech-pills li {
    padding: 6px 0 !important;
    font-size: 12.5px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  }

  .tech-cred-banner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
    justify-content: flex-start !important;
    margin-top: 22px !important;
  }

  .tech-cred-dot {
    display: none !important;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   05. INDUSTRIES (SECTION 05 INDUSTRIES)
   Compact Eyebrow · Proportional Split Panel · Precise Active Rail
   ──────────────────────────────────────────────────────────────────────── */
.industries-section {
  padding: clamp(64px, 6.5vw, 84px) 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#industriesHeading {
  margin: 0 0 clamp(24px, 3.2vw, 36px) 0 !important;
  max-width: 680px !important;
}

/* Desktop layout (>= 1024px) */
@media (min-width: 1024px) {
  .industries-panel {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    background: #07080a !important;
    overflow: hidden !important;
    min-height: 380px !important;
  }

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

  .ind-tab {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.50) !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    cursor: pointer !important;
    transition: color 0.18s ease, background 0.18s ease !important;
    border-left: 2px solid transparent !important;
  }

  .ind-tab--active,
  .ind-tab[aria-selected="true"] {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-left: 2px solid #ffffff !important;
    padding-left: 18px !important;
  }

  .ind-panel {
    padding: 36px 44px !important;
  }
}

/* Tablet layout (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .industries-panel {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    background: #07080a !important;
    overflow: hidden !important;
    min-height: 360px !important;
  }

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

  .ind-tab {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.50) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    cursor: pointer !important;
    border-left: 2px solid transparent !important;
  }

  .ind-tab--active,
  .ind-tab[aria-selected="true"] {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-left: 2px solid #ffffff !important;
  }

  .ind-panel {
    padding: 28px 28px !important;
  }
}

/* Card details shared styles */
.industries-content {
  background: #08090c !important;
  display: flex !important;
  align-items: center !important;
}

.ind-num {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.30) !important;
}

.ind-tab--active .ind-num,
.ind-tab[aria-selected="true"] .ind-num {
  color: #7c9aff !important;
}

.ind-panel-tag {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #7c9aff !important;
  margin-bottom: 12px !important;
  display: inline-block !important;
}

.ind-panel-body h3 {
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.28 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 12px 0 !important;
  max-width: 580px !important;
}

.ind-panel-body p {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.68) !important;
  max-width: 580px !important;
  margin: 0 0 20px 0 !important;
}

.ind-caps {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
}

.ind-caps li {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
}

.ind-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.70) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.20) !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.60) !important;
}

/* Mobile layout (< 768px): clean accordion */
@media (max-width: 767px) {
  .industries-section {
    padding: 56px 0 !important;
  }

  .industries-panel {
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }

  .industries-tabs {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
  }

  .ind-tab {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.70) !important;
    background: #080a0e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
  }

  .ind-tab--active {
    background: #0e121a !important;
    border-color: rgba(124, 154, 255, 0.40) !important;
    color: #ffffff !important;
    border-radius: 10px 10px 0 0 !important;
    border-bottom-color: transparent !important;
  }

  .ind-panel {
    background: #080a0e !important;
    border: 1px solid rgba(124, 154, 255, 0.40) !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    padding: 20px 18px !important;
    margin-top: -8px !important;
    margin-bottom: 8px !important;
  }

  .ind-panel-body h3 {
    font-size: 17px !important;
  }

  .ind-panel-body p {
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }

  .ind-caps {
    margin-bottom: 18px !important;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   06. SELECTED WORK (SECTION 05b SELECTED WORK)
   Equal 3-Column Balance · 16:10 Imagery · Concise Proof Hierarchy
   ──────────────────────────────────────────────────────────────────────── */
.work-section {
  padding: clamp(64px, 6.5vw, 84px) 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.work-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-bottom: clamp(32px, 3.8vw, 42px) !important;
  gap: 24px !important;
}

.work-header-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.work-header-right {
  display: flex !important;
  align-items: flex-end !important;
}

@media (min-width: 992px) {
  .work-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
  }
}

@media (min-width: 641px) and (max-width: 991px) {
  .work-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 16px !important;
  }
  .work-card:first-child {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .work-card:first-child .work-card-image {
    height: 100% !important;
    min-height: 305px !important;
    aspect-ratio: auto !important;
    border-radius: 13px 0 0 13px !important;
  }
  .work-card:first-child .work-card-body {
    border-top: 0 !important;
    border-left: 1px solid rgba(255,255,255,.08) !important;
    justify-content: center !important;
  }
}

@media (max-width: 640px) {
  .work-section { padding: 56px 0 !important; }
  .work-grid {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  .work-card { width: 100% !important; max-width: none !important; margin: 0 !important; }
  .work-card-body { padding: 20px !important; }
  .work-card-meta { flex-wrap: wrap !important; }
}

.work-card {
  background: #090b0e !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
  box-shadow: none !important;
}

.work-card:hover {
  border-color: rgba(255, 255, 255, 0.20) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65) !important;
}

.work-card-image {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: #07080a !important;
  border-radius: 13px 13px 0 0 !important;
  transition: filter 0.3s ease !important;
}

.work-card:hover .work-card-image {
  filter: brightness(1.06) !important;
}

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

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

.work-type {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #7c9aff !important;
  background: rgba(79, 110, 247, 0.10) !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}

.work-industry {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.40) !important;
}

.work-card-title {
  font-family: 'Manrope', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  letter-spacing: -0.015em !important;
}

.work-card-summary {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 0 10px 0 !important;
  flex: 1 !important;
}

.work-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.70) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  padding-bottom: 2px !important;
  margin-top: auto !important;
  align-self: flex-start !important;
  transition: color 0.18s ease, border-color 0.18s ease !important;
}

.work-cta:hover {
  color: #ffffff !important;
  border-bottom-color: rgba(255, 255, 255, 0.60) !important;
}

.work-cta svg {
  transition: transform 0.2s ease !important;
}

.work-cta:hover svg {
  transform: translateX(3px) !important;
}


/* ────────────────────────────────────────────────────────────────────────
   07. TRACK RECORD (SECTION 06 SCALE)
   Compact Vertical Rhythm · 4 Numbers With Thin Dividers · Fact-Safe
   ──────────────────────────────────────────────────────────────────────── */
.scale-section {
  padding: clamp(52px, 5.5vw, 72px) 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;
  margin-bottom: clamp(32px, 3.8vw, 42px) !important;
}

@media (min-width: 1024px) {
  .scale-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    padding: 8px 0 !important;
  }

  .scale-stat {
    padding: 10px 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;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .scale-stat:last-child {
    border-right: none !important;
  }
}

@media (max-width: 1023px) {
  .scale-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 16px !important;
    padding: 8px 0 !important;
  }

  .scale-stat {
    padding: 12px 14px !important;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}

.scale-num {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  height: 56px !important;
  margin-bottom: 8px !important;
}

.scale-num span {
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(2.4rem, 3.8vw, 3.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

.scale-stat p {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.58) !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}


/* ────────────────────────────────────────────────────────────────────────
   08. PROCESS (SECTION 07 PROCESS)
   Split Editorial Header · 5 Clean Rows With Open Dividers · Calm Rhythm
   ──────────────────────────────────────────────────────────────────────── */
.process-section {
  padding: clamp(64px, 6.5vw, 84px) 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.process-header {
  display: grid !important;
  grid-template-columns: 1fr 1.4fr !important;
  gap: clamp(32px, 5vw, 64px) !important;
  align-items: flex-end !important;
  margin-bottom: clamp(36px, 4vw, 48px) !important;
}

.process-header-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.process-intro {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.60) !important;
  margin: 0 !important;
  max-width: 380px !important;
}

.process-list {
  display: flex !important;
  flex-direction: column !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin: 0 !important;
}

.process-row {
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  align-items: center !important;
  padding: 22px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
  transition: border-color 0.2s ease !important;
  gap: 32px !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.process-row:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.process-col-head {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.process-num {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: #000000 !important;
  background: #ffffff !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.process-title {
  font-family: 'Manrope', sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
}

.process-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.68) !important;
  margin: 0 !important;
  max-width: 640px !important;
}

@media (max-width: 767px) {
  .process-section { padding: 56px 0 !important; }
  .process-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    align-items: flex-start !important;
    margin-bottom: 28px !important;
  }
  .process-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 18px 0 !important;
  }
  .process-desc {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   09. CLIENT TESTIMONIALS (SECTION 08 TESTIMONIALS)
   Verified Human Reviews · Responsive Slider · Touch Safe Arrows & Dots
   ──────────────────────────────────────────────────────────────────────── */
.testimonials-section {
  padding: clamp(64px, 6.5vw, 84px) 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.testi-header {
  text-align: center !important;
  margin-bottom: clamp(32px, 4vw, 48px) !important;
}

.testi-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  color: rgba(255, 255, 255, 0.58) !important;
  margin: 6px auto 0 auto !important;
  max-width: 480px !important;
}

.testi-slider-wrap {
  position: relative !important;
  overflow: hidden !important;
  padding: 10px 0 !important;
}

.testi-track {
  display: flex !important;
  column-gap: 20px !important;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform !important;
}

.testi-slide {
  background: #08090d !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease !important;
}

.testi-slide:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.testi-photo-wrap {
  margin-bottom: 14px !important;
}

.testi-photo {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.testi-stars {
  color: #fbbf24 !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  margin-bottom: 10px !important;
}

.testi-name {
  font-family: 'Manrope', sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 2px !important;
  display: block !important;
}

.testi-role {
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.50) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.testi-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.70) !important;
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}

/* Accessible Arrows */
.testi-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(10, 12, 18, 0.85) !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;
  cursor: pointer !important;
  z-index: 10 !important;
  backdrop-filter: blur(8px) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.testi-arrow:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

.testi-arrow-prev { left: 4px !important; }
.testi-arrow-next { right: 4px !important; }

.testi-arrow:focus-visible {
  outline: 2px solid #7c9aff !important;
  outline-offset: 2px !important;
}

/* Dots */
.testi-dots {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 24px !important;
}

.testi-dot {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.testi-dot::before {
  content: '' !important;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  transition: width 0.22s ease, background-color 0.22s ease !important;
}

.testi-dot.active::before {
  width: 20px !important;
  background: #7c9aff !important;
}

.testi-dot:focus-visible {
  outline: 2px solid #7c9aff !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}


/* ────────────────────────────────────────────────────────────────────────
   10. TEAM (SECTION 09 TEAM)
   Split Editorial Layout · 2x2 Portrait Grid · Mobile-Safe Founder Badge
   ──────────────────────────────────────────────────────────────────────── */
.team-section {
  padding: clamp(64px, 6.5vw, 84px) 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

@media (min-width: 992px) {
  .team-layout {
    display: grid !important;
    grid-template-columns: 1.1fr 1fr !important;
    gap: 56px !important;
    align-items: center !important;
  }
}

.team-copy p {
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.68) !important;
  margin: 0 0 20px 0 !important;
  max-width: 540px !important;
}

.team-caps {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px 0 !important;
}

.team-caps li {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
}

.team-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.team-metric strong {
  font-family: 'Manrope', sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.03em !important;
  display: block !important;
  line-height: 1.1 !important;
  margin-bottom: 4px !important;
}

.team-metric span {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.50) !important;
  line-height: 1.3 !important;
  display: block !important;
}

/* Photo grid */
.team-photo-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  position: relative !important;
}

.team-photo {
  width: 100% !important;
  aspect-ratio: 1 / 1.08 !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #090a0e !important;
}

.team-visual-card {
  position: absolute !important;
  bottom: 12px !important;
  left: 12px !important;
  right: 12px !important;
  background: rgba(6, 8, 12, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  text-align: center !important;
}

.team-visual-card strong {
  display: block !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.team-visual-sub {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: #7c9aff !important;
}

/* Tablet / Mobile stacking */
@media (max-width: 991px) {
  .team-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 36px !important;
  }
  .team-visual {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 640px) {
  .team-section { padding: 56px 0 !important; }
  .team-metrics { gap: 10px !important; }
  .team-metric strong { font-size: 22px !important; }
  .team-photo-grid { gap: 10px !important; }
  /* Mobile safe founder badge: ensure it never covers faces */
  .team-visual-card {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    grid-column: 1 / -1 !important;
    margin-top: 4px !important;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   11. WHY BITNEKA (SECTION 09b WHY BITNEKA)
   4 Balanced Reasons · Content-Driven Mobile Height (Zero Dead Space)
   ──────────────────────────────────────────────────────────────────────── */
.why-section {
  padding: clamp(64px, 6.5vw, 84px) 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.why-header {
  margin-bottom: clamp(28px, 3.5vw, 40px) !important;
}

@media (min-width: 1024px) {
  .why-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .why-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

.why-item {
  background: #08090d !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 26px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}

.why-item:hover {
  border-color: rgba(255, 255, 255, 0.20) !important;
  transform: translateY(-2px) !important;
}

.why-num {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #7c9aff !important;
  background: rgba(79, 110, 247, 0.08) !important;
  border: 1px solid rgba(79, 110, 247, 0.18) !important;
  border-radius: 6px !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
}

.why-body h3 {
  font-family: 'Manrope', sans-serif !important;
  font-size: 17.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: -0.015em !important;
}

.why-body p {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 !important;
}

/* Mobile: Eliminate 240px min-height trap! */
@media (max-width: 767px) {
  .why-section { padding: 56px 0 !important; }
  .why-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .why-item {
    min-height: auto !important;
    height: auto !important;
    padding: 20px 18px !important;
  }
  .why-num { margin-bottom: 12px !important; }
  .why-body h3 { font-size: 16.5px !important; margin-bottom: 6px !important; }
  .why-body p { font-size: 13px !important; line-height: 1.5 !important; }
}


/* ────────────────────────────────────────────────────────────────────────
   12. CULTURE / LIFE AT BITNEKA (SECTION 10 CULTURE)
   Desktop Grid · Mobile Contained Scroll-Snap Gallery (Native & Smooth)
   ──────────────────────────────────────────────────────────────────────── */
.insta-section {
  padding: clamp(64px, 6.5vw, 84px) 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.insta-header {
  text-align: center !important;
  margin-bottom: clamp(28px, 3.5vw, 42px) !important;
}

.insta-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  color: rgba(255, 255, 255, 0.60) !important;
  margin: 8px auto 18px auto !important;
}

.insta-gradient-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.insta-gradient-pill:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

.insta-gradient-pill i {
  color: #e1306c !important;
  font-size: 14px !important;
}

.insta-handle {
  color: #7c9aff !important;
}

@media (min-width: 768px) {
  .insta-slider {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }
}

.insta-item {
  display: block !important;
  text-decoration: none !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #08090d !important;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}

.insta-item:hover {
  border-color: rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-3px) !important;
}

.insta-img-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

.insta-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.insta-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(3, 4, 8, 0.65) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.insta-item:hover .insta-overlay {
  opacity: 1 !important;
}

.insta-stats {
  display: flex !important;
  gap: 16px !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.insta-stats span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Mobile (< 768px): Contained Horizontal Scroll-Snap Gallery */
@media (max-width: 767px) {
  .insta-section {
    padding: 56px 0 !important;
    overflow: hidden !important;
  }

  .insta-slider {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 14px !important;
    padding: 4px 20px 16px 20px !important;
    margin: 0 -20px !important;
    scrollbar-width: none !important;
  }

  .insta-slider::-webkit-scrollbar {
    display: none !important;
  }

  .insta-item {
    flex: 0 0 84vw !important;
    max-width: 320px !important;
    scroll-snap-align: center !important;
    border-radius: 12px !important;
  }

  .insta-overlay {
    display: none !important;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   13. FAQ (SECTION 11 FAQ)
   Clean Centered Accordion · Single State Model · Accessible Triggers (>=44px)
   ──────────────────────────────────────────────────────────────────────── */
.fq-section {
  padding: clamp(64px, 6.5vw, 84px) 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.fq-section .wrap {
  max-width: 820px !important;
}

.fq-h {
  margin: 0 0 clamp(24px, 3.2vw, 36px) 0 !important;
}

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

.fq-card {
  background: #08090d !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

.fq-card.is-open {
  border-color: rgba(124, 154, 255, 0.35) !important;
  background: #0a0c12 !important;
}

.fq-trigger {
  width: 100% !important;
  min-height: 52px !important;
  padding: 16px 20px !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  cursor: pointer !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.fq-trigger:focus-visible {
  outline: 2px solid #7c9aff !important;
  outline-offset: -2px !important;
  border-radius: 10px !important;
}

.fq-trigger span:first-child {
  font-family: 'Manrope', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.35 !important;
}

.fq-plus-ico {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.65) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, color 0.2s ease !important;
}

.fq-card.is-open .fq-plus-ico {
  transform: rotate(45deg) !important;
  background: rgba(79, 110, 247, 0.15) !important;
  border-color: rgba(79, 110, 247, 0.35) !important;
  color: #7c9aff !important;
}

.fq-body {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, padding 0.25s ease !important;
  opacity: 0 !important;
  padding: 0 20px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.70) !important;
  box-sizing: border-box !important;
}

.fq-card.is-open .fq-body {
  max-height: 320px !important;
  opacity: 1 !important;
  padding: 0 20px 20px 20px !important;
}

@media (max-width: 640px) {
  .fq-section { padding: 56px 0 !important; }
  .fq-trigger { padding: 14px 16px !important; }
  .fq-trigger span:first-child { font-size: 15px !important; }
  .fq-body { font-size: 13.5px !important; line-height: 1.55 !important; }
  .fq-card.is-open .fq-body { padding: 0 16px 16px 16px !important; }
}


/* ────────────────────────────────────────────────────────────────────────
   14. FINAL CTA (SECTION 12 CTA)
   Dominant End-of-Page Conversion Moment · Subordinated Footer Below
   ──────────────────────────────────────────────────────────────────────── */
.cta-section {
  padding: clamp(72px, 8vw, 104px) 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: radial-gradient(ellipse 65% 55% at 50% 100%, rgba(79, 110, 247, 0.09) 0%, transparent 70%), #000000 !important;
  position: relative !important;
  text-align: center !important;
}

.cta-inner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

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

.cta-content h2 {
  font-size: clamp(30px, 4.4vw, 50px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.035em !important;
  margin: 0 0 16px 0 !important;
}

.cta-content p {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(14.5px, 1.8vw, 16.5px) !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.68) !important;
  margin: 0 0 32px 0 !important;
  max-width: 540px !important;
}

.cta-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.btn-cta-primary {
  padding: 14px 28px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.btn-cta-primary svg {
  transition: transform 0.2s ease !important;
}

.btn-cta-primary:hover svg {
  transform: translateX(4px) !important;
}

@media (max-width: 640px) {
  .cta-section { padding: 56px 0 !important; }
  .cta-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .cta-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   LOCKED SECTION OVERRIDES (HERO, TRUST, NAVIGATION) — PRESERVED STRICTLY
   ══════════════════════════════════════════════════════════════════════════ */

/* Mobile hero: keep the robot portrait visible above the fold and dock telemetry away from its face. */
@media (max-width: 768px) {
  .hero { min-height: auto !important; padding-bottom: 0 !important; overflow: hidden !important; }
  .hero-grid { flex: none !important; display: flex !important; gap: 0 !important; padding-bottom: 0 !important; }
  .hero-content { flex: none !important; align-items: flex-start !important; }
  .hero-eyebrow, .hero h1, .hero-sub { text-align: left !important; }
  .hero-eyebrow { margin-top: 0 !important; }
  .hero h1 { font-size: clamp(29px, 7.8vw, 36px) !important; line-height: 1.13 !important; }
  .hero-ctas { flex-direction: column !important; align-items: stretch !important; margin-bottom: 18px !important; }
  .hero-stats { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; justify-content: stretch !important; }
  .hstat { align-items: flex-start !important; text-align: left !important; }
  .hstat-div { display: none !important; }
  .hero-mockup { height: 315px !important; min-height: 0 !important; margin-top: 12px !important; padding: 0 !important; position: relative !important; justify-content: flex-start !important; align-items: flex-end !important; }
  .hero-mockup-card { position: absolute !important; left: 0 !important; bottom: 14px !important; margin: 0 !important; max-width: 174px !important; transform: none !important; }
  .hero-video { inset: auto 0 -65px 0 !important; left: 0 !important; transform: none !important; width: 100% !important; height: 520px !important; object-position: 66% top !important; }
  .hero-overlay { background: linear-gradient(180deg, #000 0%, #000 calc(100% - 355px), rgba(0,0,0,.64) calc(100% - 320px), transparent calc(100% - 270px), transparent calc(100% - 18px), #000 100%) !important; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 28px !important; }
  .hero-mockup { height: 285px !important; }
  .hero-video { height: 485px !important; bottom: -65px !important; inset: auto 0 -65px 0 !important; }
}

/* Homepage mobile section rhythm: trust marks. */
@media (max-width: 768px) {
  .trust-section { padding: 38px 0 34px !important; }
  .trust-label { margin-bottom: 24px !important; }
  .trust-logos { gap: 16px 20px !important; justify-content: center !important; }
  .trust-logo { min-height: 28px !important; }
}

/* Tablet hero facts remain in one aligned row while preserving the desktop hero. */
@media (min-width: 769px) and (max-width: 1100px) {
  .hero-stats { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
  .hero-stats .hstat-div { display: none !important; }
  .hero-stats .hstat { min-width: 0 !important; }
  .hero-stats .hstat span { white-space: normal !important; font-size: 11px !important; line-height: 1.25 !important; }
  .hero-stats .hstat b { font-size: 21px !important; }
}

/* Homepage mobile navigation remains legible if the external icon font is unavailable. */
@media (max-width: 1024px) {
  #mobileMenu .mm-nav > .mm-link .mm-link-icon { display: none !important; }
  #mobileMenu .mm-nav > .mm-link { padding-left: 20px !important; }
  #mobileMenu .mm-nav > .mm-link > span:nth-child(2) { flex: 1 !important; }
}