/* ─── FINAL PRODUCTION OVERRIDES (Moved from index.html) ─── */

    /* ─── FAQ Card Pill ─── */
    .fq-section{padding:88px 0;background:#070b1c;border-top:1px solid rgba(255,255,255,0.06)}
    .fq-section>.wrap{max-width:820px;margin:0 auto;padding:0 24px}
    .fq-eyebrow-tag{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#4f6ef7;margin:0 0 16px}
    .fq-h{font-size:clamp(30px,5vw,50px);font-weight:900;letter-spacing:-.04em;line-height:1.05;color:#fff;margin:0 0 44px}
    .fq-list{display:flex;flex-direction:column;gap:12px;list-style:none;margin:0;padding:0}
    .fq-card{background:rgba(255,255,255,0.045);border:1px solid rgba(255,255,255,0.09);border-radius:14px;overflow:hidden;transition:border-color .2s,background .2s}
    .fq-card:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.15)}
    .fq-card.is-open{border-color:rgba(79,110,247,.4);background:rgba(79,110,247,.06)}
    .fq-trigger{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;width:100%;background:none;border:none;padding:20px 24px;cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;color:rgba(255,255,255,.86);line-height:1.5;text-align:left}
    .fq-trigger:hover{color:#fff}
    .fq-card.is-open .fq-trigger{color:#fff}
    .fq-plus-ico{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;min-width:32px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);font-size:22px;font-weight:300;line-height:1;transition:background .25s,border-color .25s,color .25s,transform .25s}
    .fq-card.is-open .fq-plus-ico{background:#4f6ef7;border-color:#4f6ef7;color:#fff;transform:rotate(45deg)}
    .fq-body{display:none;padding:0 24px 20px;font-size:14px;line-height:1.78;color:rgba(255,255,255,.55)}
    .fq-card.is-open .fq-body{display:block}
    @media(max-width:640px){
      .fq-section{padding:60px 0}
      .fq-h{margin-bottom:32px}
      .fq-trigger{padding:16px 18px;font-size:14px}
      .fq-body{padding:0 18px 18px;font-size:13.5px}
    }

    /* ─── GLOBAL STYLISH HERO BUTTONS (Pure White Pill + Black Text) ─── */
    a#heroCtaBtn,
    .btn.btn-primary.btn-hero,
    .sp-cta-actions .btn-primary,
    .btn-cta-primary,
    .ft-main-cta {
      background: #ffffff !important;
      border: none !important;
      border-radius: 999px !important;
      padding: 13px 28px !important;
      font-size: 14.5px !important;
      font-weight: 700 !important;
      color: #000000 !important;
      width: auto !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      box-shadow: 0 4px 20px rgba(255,255,255,0.12) !important;
      white-space: nowrap !important;
      line-height: 1.3 !important;
      transition: transform .2s, box-shadow .2s, background .2s !important;
      text-decoration: none !important;
    }
    a#heroCtaBtn:hover,
    .btn.btn-primary.btn-hero:hover,
    .sp-cta-actions .btn-primary:hover,
    .btn-cta-primary:hover,
    .ft-main-cta:hover {
      background: #f0f0f0 !important;
      color: #000000 !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 10px 28px rgba(255,255,255,0.22) !important;
    }

    a.btn-hero-ghost,
    .btn-hero-ghost,
    .btn-cta-ghost {
      border-radius: 999px !important;
      border: 1px solid rgba(255,255,255,0.22) !important;
      background: rgba(255,255,255,0.06) !important;
      color: #ffffff !important;
      padding: 13px 28px !important;
      font-size: 14.5px !important;
      font-weight: 600 !important;
      width: auto !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      white-space: nowrap !important;
      line-height: 1.3 !important;
      transition: background .2s, border-color .2s !important;
      text-decoration: none !important;
    }
    a.btn-hero-ghost:hover,
    .btn-hero-ghost:hover,
    .btn-cta-ghost:hover {
      background: rgba(255,255,255,0.12) !important;
      border-color: rgba(255,255,255,0.35) !important;
      color: #ffffff !important;
    }

    /* ─── NEON EMERALD ACCENT BADGES & PULSE ─── */
    .price-badge,
    .eyebrow {
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      background: rgba(16, 185, 129, 0.08) !important;
      border: 1px solid rgba(16, 185, 129, 0.25) !important;
      color: #34d399 !important;
      font-size: 11.5px !important;
      font-weight: 700 !important;
      letter-spacing: 0.08em !important;
      text-transform: uppercase !important;
      border-radius: 999px !important;
      padding: 6px 14px !important;
    }
    .price-badge i,
    .eyebrow i {
      color: #34d399 !important;
    }
    .eyebrow::before {
      display: none !important;
    }
    .pulse-dot-green {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 8px #10b981;
      margin-right: 6px;
      animation: pulseGreen 2s infinite ease-in-out;
    }
    @keyframes pulseGreen {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.45; transform: scale(0.85); }
    }
    
    /* ─── DESKTOP HERO FIT (Guarantee stats stay above fold) ─── */
    @media (min-width: 769px) {
      .hero {
        min-height: 100vh!important;
        min-height: 100svh!important;
        padding-top: clamp(40px, 6vh, 70px)!important; /* Reduced top padding to move it up */
      }
      .hero-content {
        margin-top: -24px!important; /* Pull up a bit */
      }
      .hero-grid {
        padding-bottom: 2vh!important;
      }
      .hero h1 {
        font-size: clamp(34px, min(5vw, 7vh), 64px)!important; /* Slightly larger heading too */
        margin-bottom: clamp(10px, 2vh, 20px)!important;
        line-height: 1.1!important;
      }
      .hero-sub {
        font-size: 16px!important; /* Bigger paragraph */
        line-height: 1.6!important;
        margin-bottom: clamp(16px, 3vh, 32px)!important;
        max-width: 90%;
      }
      .hero-ctas {
        margin-bottom: clamp(20px, 4vh, 40px)!important;
      }
      .hero-stats {
        gap: 24px!important;
        margin-bottom: 0!important;
      }
      .hstat b {
        font-size: clamp(20px, 3vh, 28px)!important;
      }
      .hstat span {
        font-size: 11px!important;
      }
      /* Scale mockup slightly if screen is very short */
      .hero-mockup {
        transform: scale(min(1, calc(100vh / 800)))!important;
        transform-origin: center right!important;
      }
    }
    
    /* ─── PREMIUM UI/UX DETAILS ─── */
    /* Custom Branded Selection */
    ::selection {
      background: rgba(124, 58, 237, 0.3)!important;
      color: #fff!important;
    }
    ::-moz-selection {
      background: rgba(124, 58, 237, 0.3)!important;
      color: #fff!important;
    }
    
    /* Sleek Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 10px;
    }
    ::-webkit-scrollbar-track {
      background: #0b0f19;
    }
    ::-webkit-scrollbar-thumb {
      background: #1e293b;
      border-radius: 10px;
      border: 2px solid #0b0f19;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #334155;
    }
    
    /* Glassmorphism Sticky Header */
    .site-header.scrolled {
      background: rgba(11, 15, 25, 0.75)!important;
      backdrop-filter: blur(16px)!important;
      -webkit-backdrop-filter: blur(16px)!important;
      border-bottom: 1px solid rgba(255,255,255,0.05)!important;
    }

    /* ─── PREMIUM HOVER EFFECTS (Cards & Buttons) ─── */
    .srv-card, .work-card {
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease!important;
    }
    .srv-card:hover {
      transform: translateY(-8px)!important;
      box-shadow: 0 24px 48px rgba(0,0,0,0.6)!important;
      z-index: 2;
    }
    .work-card:hover {
      transform: translateY(-8px)!important;
      box-shadow: 0 24px 48px rgba(0,0,0,0.6)!important;
    }
    .srv-card .srv-arrow {
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)!important;
    }
    .srv-card:hover .srv-arrow {
      transform: translateX(8px)!important;
    }
    /* Enhance the hero primary button hover */
    a#heroCtaBtn:hover, .btn.btn-primary.btn-hero:hover {
      transform: translateY(-2px) scale(1.02)!important;
      box-shadow: 0 12px 32px rgba(255,255,255,0.2)!important;
    }

    /* ─── GLOBAL TEAM METRICS TYPOGRAPHY ─── */
    .team-metric strong {
      font-family: 'Inter', sans-serif !important;
      font-weight: 900 !important;
      background: linear-gradient(135deg, #4f6ef7, #b485ff) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
    }
    .team-metric span {
      font-weight: 700 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.04em !important;
      color: rgba(255,255,255,0.7) !important;
    }

    /* ─── MOBILE HERO OVERRIDES (guaranteed) ─── */
    @media(max-width:768px){
      /* Full screen hero, content spread across full height */
      .hero{padding-top:56px!important;min-height:100svh!important;display:flex!important;flex-direction:column!important}
      .hero-grid{flex:1!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;padding-top:8px!important;padding-bottom:28px!important;gap:0!important}
      .hero-content{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:space-between!important;flex:1!important;gap:0!important}
      .hero-eyebrow{text-align:center!important;display:block!important;margin-top:32px!important;margin-bottom:16px!important}
      .hero h1{font-size:clamp(20px,6.5vw,28px)!important;line-height:1.18!important;margin-bottom:12px!important;text-align:center!important}
      .hero-sub{font-size:13px!important;line-height:1.6!important;text-align:center!important;margin-bottom:20px!important}

      /* Buttons: side-by-side, compact pill */
      .hero-ctas{display:flex!important;flex-direction:row!important;justify-content:center!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;margin-bottom:12px!important}

      /* Adjust button sizes for mobile */
      a#heroCtaBtn, .btn.btn-primary.btn-hero,
      a.btn-hero-ghost, .btn-hero-ghost {
        padding: 12px 22px !important;
        font-size: 13.5px !important;
        min-height: 42px !important;
      }


      /* Stats row — compact, visible */
      .hero-stats{display:flex!important;justify-content:center!important;gap:12px!important;flex-wrap:wrap!important;margin-top:8px!important;margin-bottom:6px!important}
      .hstat{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important}
      .hstat b{font-size:17px!important;font-weight:800!important;line-height:1!important}
      .hstat span{font-size:10px!important;line-height:1.3!important}
      .hstat-div{width:1px!important;height:28px!important;align-self:center!important}
      .social-proof-bar{justify-content:center!important;flex-wrap:wrap!important;gap:6px!important;margin-top:6px!important}

      /* Center video */
      .hero-video{object-position:center center!important;left:50%!important;width:100%!important;min-width:100%!important;transform:translateX(-50%)!important;position:absolute!important}

      /* Team Metrics Layout Fix */
      .team-metrics {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin-top: 50px !important; /* Moved even further down */
        padding-left: 12px !important; /* Moved slightly right */
        width: 100% !important;
      }
      .team-metric {
        align-items: flex-start !important;
        text-align: left !important;
      }
      .team-metric strong {
        font-size: 18px !important;
      }
      .team-metric span {
        font-size: 8.5px !important;
        line-height: 1.3 !important;
      }
    }

    /* ─── FOOTER MOBILE PREMIUM UX ─── */
    @media (max-width: 640px) {
      /* Keep EVERYTHING in a compact 2-column grid as requested */
      .ft-nav-inner {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 32px 12px !important;
      }
      
      /* Enhance Typography & Touch Targets while keeping it compact */
      .ft-nav-group a {
        font-size: 13px !important;
        padding: 4px 0 !important;
        color: rgba(255,255,255,0.85) !important;
      }
      .ft-nav-label {
        font-size: 10.5px !important;
        letter-spacing: 0.1em !important;
        margin-bottom: 12px !important;
        color: rgba(110,160,255,0.9) !important;
      }
      
      /* Contact Links */
      .ft-contact-item {
        font-size: 13px !important;
        padding: 6px 0 !important;
      }
      
      /* Stats Cards */
      .ft-mini-stat {
        padding: 8px 10px !important;
      }
      .ft-mini-stat strong {
        font-size: 15px !important;
      }
      .ft-mini-stat span {
        font-size: 9px !important;
        line-height: 1.2 !important;
      }
      
      /* Tags */
      .ft-tech-tags {
        gap: 6px !important;
      }
      .ft-tag {
        font-size: 11px !important;
        padding: 5px 10px !important;
        border-radius: 6px !important;
      }
    }

    /* ─── INSTAGRAM FEED SECTION ─── */
    .insta-section {
      padding: 80px 0 40px;
      background: #02040c; /* Matches footer */
      border-top: 1px solid rgba(255, 255, 255, 0.05);
    }
    .insta-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 40px;
    }
    .insta-eyebrow {
      display: block;
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #7c3aed;
      margin-bottom: 12px;
    }
    .insta-h {
      font-size: clamp(32px, 5vw, 48px);
      font-weight: 900;
      letter-spacing: -0.03em;
      line-height: 1.1;
      color: #fff;
      margin: 0;
    }
    .insta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 24px;
      background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      border-radius: 30px;
      text-decoration: none;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .insta-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(220, 39, 67, 0.4);
      color: #fff;
    }
    .insta-slider {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding-bottom: 16px;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .insta-slider::-webkit-scrollbar {
      display: none;
    }
    .insta-item {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      display: block;
      aspect-ratio: 1 / 1;
      background: #0a0d20;
      flex: 0 0 calc(33.333% - 14px);
      scroll-snap-align: start;
    }
    .insta-img-wrap {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .insta-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .insta-item:hover img {
      transform: scale(1.08);
    }
    .insta-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .insta-item:hover .insta-overlay {
      opacity: 1;
    }
    .insta-stats {
      display: flex;
      gap: 32px;
      color: #fff;
      font-weight: 700;
      font-size: 20px;
      transform: translateY(10px);
      transition: transform 0.4s ease;
    }
    .insta-item:hover .insta-stats {
      transform: translateY(0);
    }
    .insta-stats span {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    @media (max-width: 768px) {
      .insta-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
      }
      .insta-slider .insta-item {
        flex: 0 0 75%; /* Show 1 post and a peek of the next to encourage swiping */
      }
    }

    /* ─── FAQ REVAMP (Compact & Premium) ─── */
    .fq-section {
      padding: 80px 0 !important;
      background: #02040c !important; /* Premium dark background */
      border-top: none !important;
    }
    .fq-section .wrap {
      max-width: 820px !important; /* Constrain width so it's not huge */
      margin: 0 auto !important;
    }
    .fq-h {
      font-size: clamp(32px, 5vw, 48px) !important;
      text-align: center !important;
      margin-bottom: 48px !important;
    }
    .fq-eyebrow-tag {
      display: block !important;
      text-align: center !important;
      margin-bottom: 16px !important;
    }
    .fq-list {
      gap: 16px !important;
    }
    .fq-card {
      background: rgba(255, 255, 255, 0.02) !important;
      border: 1px solid rgba(255, 255, 255, 0.05) !important;
      border-radius: 16px !important;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
      overflow: hidden !important; /* Ensures body doesn't stick out */
    }
    .fq-card:hover {
      background: rgba(255, 255, 255, 0.04) !important;
      border-color: rgba(79, 110, 247, 0.3) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 12px 40px rgba(79, 110, 247, 0.1) !important;
    }
    .fq-trigger {
      width: 100% !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      padding: 24px 32px !important;
      font-size: 16px !important;
      font-weight: 600 !important;
      font-family: 'Inter', sans-serif !important;
      color: #fff !important;
      background: transparent !important;
      border: none !important;
      cursor: pointer !important;
      text-align: left !important;
      letter-spacing: -0.01em !important;
    }
    .fq-plus-ico {
      color: #4f6ef7 !important;
      font-size: 20px !important;
      font-weight: 400 !important;
      background: rgba(79, 110, 247, 0.1) !important;
      width: 36px !important;
      height: 36px !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      border-radius: 50% !important;
      transition: transform 0.4s ease, background 0.4s ease, color 0.4s ease !important;
      flex-shrink: 0 !important;
    }
    .fq-trigger[aria-expanded="true"] .fq-plus-ico,
    .fq-card.active .fq-plus-ico {
      transform: rotate(45deg) !important;
      background: #4f6ef7 !important;
      color: #fff !important;
    }
    .fq-body {
      padding: 0 32px 24px !important;
      font-size: 15px !important;
      line-height: 1.7 !important;
      color: rgba(255, 255, 255, 0.65) !important;
      display: none; /* Handled by JS, but just in case */
    }
    
    @media (max-width: 640px) {
      .fq-trigger {
        padding: 20px 24px !important;
        font-size: 15px !important;
      }
      .fq-body {
        padding: 0 24px 20px !important;
        font-size: 14px !important;
      }
    }

    /* ─── ENABLE CURSOR GLOW ─── */
    /* Overrides enterprise.css which sets it to display: none */
    .cursor-glow {
      display: block !important;
    }

    /* ─── MOBILE MENU BUG FIX & PREMIUM REDESIGN ─── */
    @media (max-width: 1024px) {
      /* Fix background scroll bug */
      body.no-scroll {
        overflow: hidden !important;
        overscroll-behavior: none !important;
        position: fixed !important;
        width: 100% !important;
      }

      /* ── Nav Links — larger card style with icon + text + arrow ── */
      .mm-nav {
        flex: 1 !important;
        padding: 14px 16px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
      }
      .mm-link {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        font-size: 16.5px !important;
        font-weight: 600 !important;
        padding: 12px 16px !important;
        color: rgba(255,255,255,0.92) !important;
        background: rgba(255,255,255,0.03) !important;
        border: 1px solid rgba(255,255,255,0.06) !important;
        border-radius: 12px !important;
        min-height: 52px !important;
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
        width: 100% !important;
        text-decoration: none !important;
        cursor: pointer !important;
      }
      .mm-link:hover, .mm-link:active {
        padding-left: 16px !important;
        color: #fff !important;
        background: rgba(99,130,255,0.1) !important;
        border-color: rgba(99,130,255,0.25) !important;
      }
      .mm-link:last-child { border-bottom: 1px solid rgba(255,255,255,0.06) !important; }

      .mm-link-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        background: rgba(99,130,255,0.12) !important;
        border: 1px solid rgba(99,130,255,0.22) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        color: #7fa8ff !important;
        flex-shrink: 0 !important;
        transition: all 0.2s ease !important;
      }
      .mm-link:hover .mm-link-icon {
        background: rgba(99,130,255,0.22) !important;
        border-color: rgba(99,130,255,0.4) !important;
        color: #fff !important;
      }

      .mm-link > span:nth-child(2) {
        flex: 1 !important;
        text-align: left !important;
        letter-spacing: -0.01em !important;
      }

      .mm-link-arrow,
      .mm-acc-chevron {
        margin-left: auto !important;
        color: rgba(255,255,255,0.35) !important;
        flex-shrink: 0 !important;
        transition: transform 0.22s ease, color 0.2s ease !important;
      }
      .mm-link:hover .mm-link-arrow {
        color: #7fa8ff !important;
        transform: translateX(3px) !important;
      }
      .mm-accordion-trigger.open .mm-acc-chevron {
        color: #7fa8ff !important;
        transform: rotate(180deg) !important;
      }

      /* Services accordion */
      .mm-accordion-body {
        display: none !important;
      }
      .mm-accordion-body.open {
        display: block !important;
      }
      .mm-acc-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 6px 0 10px 14px !important;
        margin: 4px 0 6px 12px !important;
        border-left: 2px solid rgba(99,130,255,0.25) !important;
      }
      .mm-acc-item {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 14px !important;
        border-radius: 9px !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        color: rgba(255,255,255,0.78) !important;
        text-decoration: none !important;
        background: rgba(255,255,255,0.025) !important;
        border: 1px solid rgba(255,255,255,0.05) !important;
        white-space: nowrap !important;
        min-height: unset !important;
        transition: background 0.15s ease, color 0.15s ease !important;
      }
      .mm-acc-item i {
        font-size: 13px !important;
        color: #7fa8ff !important;
        width: 18px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
      }
      .mm-acc-item:hover {
        background: rgba(99,130,255,0.15) !important;
        border-color: rgba(99,130,255,0.25) !important;
        color: #fff !important;
      }

      /* Close button */
      .mm-close-btn {
        background: rgba(255,255,255,0.06) !important;
        border-radius: 8px !important;
        color: rgba(255,255,255,0.8) !important;
      }

      /* Footer — centered column */
      .mm-footer {
        border-top: 1px solid rgba(255,255,255,0.08) !important;
        padding: 16px 18px 24px !important;
        align-items: center !important;
        gap: 14px !important;
        margin-top: auto !important;
      }
      .mm-cta-btn {
        background: linear-gradient(135deg, #0d5bff 0%, #7c3aed 100%) !important;
        border: none !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #fff !important;
        padding: 13px 20px !important;
        box-shadow: 0 6px 22px rgba(13,91,255,0.32) !important;
        width: 100% !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
      }
      .mm-footer-meta {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
      }
      .mm-contact-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 5px !important;
      }
      .mm-contact-info a {
        justify-content: center !important;
        font-size: 12.5px !important;
        color: rgba(255,255,255,0.5) !important;
        padding: 0 !important;
        min-height: unset !important;
      }
      .mm-socials {
        justify-content: center !important;
        gap: 8px !important;
      }
      .mm-socials a {
        min-height: unset !important;
        padding: 0 !important;
      }
    }
/* ═══════════════════════════════════════════════════════════════
   PRICING & ENGAGEMENT MODELS (.price-*)
═══════════════════════════════════════════════════════════════ */
.price-hero {
  position: relative;
  padding: clamp(120px, 12vw, 150px) 0 clamp(40px, 5vw, 64px);
  text-align: center;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(79,110,247,0.15) 0%, transparent 70%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.price-hero-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}
.price-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(79,110,247,0.12);
  border: 1px solid rgba(79,110,247,0.3);
  color: #7c9aff;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.price-hero h1 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 18px;
}
.price-hero p {
  font-size: clamp(16px, 1.5vw, 18.5px);
  color: rgba(255,255,255,0.7);
  line-height: 1.65;
  max-width: 680px;
  margin: 0 auto 32px;
}
.price-models-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 50px 0;
}
.price-card {
  position: relative;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.price-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(79,110,247,0.4);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.price-card--featured {
  background: linear-gradient(180deg, rgba(79,110,247,0.1) 0%, rgba(255,255,255,0.04) 100%);
  border-color: rgba(79,110,247,0.45);
  box-shadow: 0 12px 36px rgba(79,110,247,0.15);
}
.price-card-popular {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #4f6ef7, #7c3aed);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(79,110,247,0.4);
}
.price-card-head {
  margin-bottom: 24px;
}
.price-card-title {
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}
.price-card-tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  min-height: 42px;
}
.price-card-rate {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 24px;
}
.price-card-amount {
  font-family: 'Manrope', sans-serif;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
}
.price-card-period {
  font-size: 13.5px;
  color: rgba(255,255,255,0.5);
}
.price-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex: 1;
}
.price-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.8);
}
.price-features-list li i {
  color: #4f6ef7;
  font-size: 13px;
  margin-top: 4px;
  flex-shrink: 0;
}
.price-features-list li strong {
  color: #fff;
}
.price-card-btn {
  width: 100%;
  text-align: center;
  padding: 13px 20px;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   SITEMAP DIRECTORY (.sm-*)
═══════════════════════════════════════════════════════════════ */
.sm-hero {
  position: relative;
  padding: clamp(120px, 12vw, 150px) 0 clamp(36px, 4vw, 54px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sm-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.sm-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.sm-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.sm-jump-btn:hover {
  background: rgba(79,110,247,0.15);
  border-color: rgba(79,110,247,0.4);
  color: #fff;
}
.sm-group {
  margin-bottom: 56px;
}
.sm-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sm-group-title {
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sm-group-title i {
  color: #4f6ef7;
  font-size: 18px;
}
.sm-group-count {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);
  padding: 4px 10px;
  border-radius: 999px;
}
.sm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}
.sm-card {
  position: relative;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.sm-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(79,110,247,0.4);
  transform: translateY(-2px);
}
.sm-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(79,110,247,0.12);
  border: 1px solid rgba(79,110,247,0.22);
  color: #7c9aff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}
.sm-card:hover .sm-card-icon {
  background: #4f6ef7;
  color: #fff;
  transform: scale(1.05);
}
.sm-card-body {
  flex: 1;
}
.sm-card-title {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sm-card-title svg {
  color: rgba(255,255,255,0.3);
  transition: transform 0.2s, color 0.2s;
}
.sm-card:hover .sm-card-title svg {
  color: #4f6ef7;
  transform: translate(2px, -2px);
}
.sm-card-desc {
  font-size: 13.5px;
  color: rgba(255,255,255,0.58);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 1024px) {
  .price-models-grid { grid-template-columns: 1fr; max-width: 580px; margin: 36px auto; }
}
@media (max-width: 768px) {
  .sm-grid { grid-template-columns: 1fr; gap: 14px; }
  .sm-group-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 640px) {
  .price-card {
    padding: 24px 18px !important;
    border-radius: 16px !important;
  }
  .price-card-amount {
    font-size: 28px !important;
  }
  .price-card-tagline {
    min-height: unset !important;
  }
  .price-features-list {
    gap: 10px !important;
    margin-bottom: 22px !important;
  }
  .price-features-list li {
    font-size: 13.5px !important;
  }
  .sm-hero {
    padding: clamp(96px, 12vw, 120px) 0 28px !important;
  }
  .sm-jump-nav {
    gap: 8px !important;
    margin-top: 18px !important;
  }
  .sm-jump-btn {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
  .sm-card {
    padding: 16px 14px !important;
    gap: 12px !important;
    border-radius: 12px !important;
  }
  .sm-card-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 15px !important;
  }
  .sm-card-title {
    font-size: 15px !important;
  }
  .sm-card-desc {
    font-size: 13px !important;
  }
}

/* ─── GLOBAL ICON & TYPOGRAPHY ALIGNMENT HARMONY ─── */
.btn i, .btn svg,
.price-badge i, .eyebrow i,
.sp-card-tag i, .job-type i,
.ft-pill i, .sm-jump-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}

/* Prevent text overflow on narrow viewports (320px - 390px) */
@media (max-width: 480px) {
  .price-badge {
    font-size: 11px !important;
    padding: 5px 12px !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }
  .sp-card-tag {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }
}

/* ==========================================================================
   MOBILE RESPONSIVE FLOW: CLEAN 100% SINGLE-COLUMN CARDS
   (Refactored from forced 84% peek-carousel to stable readable layout)
   ========================================================================== */
@media (max-width: 768px) {
  .srv-grid,
  .sp-caps-grid,
  .sp-deliv-grid,
  .sp-why-grid,
  .sp-benefits-grid,
  .ab-leadership-grid,
  .ab-values-grid,
  .case-features-grid,
  .related-cases-grid {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .srv-grid::-webkit-scrollbar,
  .sp-caps-grid::-webkit-scrollbar,
  .sp-deliv-grid::-webkit-scrollbar,
  .sp-why-grid::-webkit-scrollbar,
  .sp-benefits-grid::-webkit-scrollbar,
  .ab-leadership-grid::-webkit-scrollbar,
  .ab-values-grid::-webkit-scrollbar,
  .case-features-grid::-webkit-scrollbar,
  .related-cases-grid::-webkit-scrollbar {
    display: none !important;
  }

  /* Full 100% width cards for readable, accessible mobile stacking */
  .srv-grid > *,
  .sp-caps-grid > *,
  .sp-deliv-grid > *,
  .sp-why-grid > *,
  .sp-benefits-grid > *,
  .ab-leadership-grid > *,
  .ab-values-grid > *,
  .case-features-grid > *,
  .related-cases-grid > *,
  .srv-grid > .srv-card,
  .sp-caps-grid > .sp-cap-card,
  .sp-deliv-grid > .sp-deliv-card,
  .sp-why-grid > .sp-why-card,
  .sp-benefits-grid > .sp-benefit-card,
  .ab-leadership-grid > .ab-leader-card,
  .ab-values-grid > .ab-value-card,
  .case-features-grid > .feature-box {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    scroll-snap-align: none !important;
    box-sizing: border-box !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .srv-grid > .srv-card {
    min-height: auto !important;
  }

  /* Compact ergonomic mobile padding and strictly contained section boundary */
  .sp-section,
  section,
  main {
    overflow-x: clip !important;
  }
  .sp-section {
    padding: clamp(40px, 6vw, 64px) 0 !important;
  }
}

/* ==========================================================================
   HOMEPAGE MASTER CODEX/DARK THEME RECONSTRUCTION & POLISH (INDEX.HTML)
   Authoritative rules matching 02_homepage_desktop_black_reference_latest.jpg
   and 03_homepage_mobile_black_reference.png
   ========================================================================== */

/* ── 1. Master Header Actions ── */
#navCtaBtn,
.nav-cta-btn {
  background: #ffffff !important;
  color: #000000 !important;
  border-radius: 999px !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  padding: 9px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.12) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  text-decoration: none !important;
}
#navCtaBtn:hover,
.nav-cta-btn:hover {
  background: #f1f5f9 !important;
  color: #000000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(255, 255, 255, 0.22) !important;
}

/* ── 2. Services Bento Grid (2 - 3 - 1 layout on desktop) ── */
@media (min-width: 1024px) {
  .services-section .srv-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 16px !important;
    overflow: visible !important;
  }
  /* Row 1: 2 equal cards (AI & Automation, Engineering) */
  .services-section .srv-grid > .srv-card:nth-child(1) {
    grid-column: 1 / 4 !important;
    min-height: 290px !important;
  }
  .services-section .srv-grid > .srv-card:nth-child(2) {
    grid-column: 4 / 7 !important;
    min-height: 290px !important;
  }
  /* Row 2: 3 equal cards (Product, Data, Enterprise) */
  .services-section .srv-grid > .srv-card:nth-child(3) {
    grid-column: 1 / 3 !important;
    min-height: 250px !important;
  }
  .services-section .srv-grid > .srv-card:nth-child(4) {
    grid-column: 3 / 5 !important;
    min-height: 250px !important;
  }
  .services-section .srv-grid > .srv-card:nth-child(5) {
    grid-column: 5 / 7 !important;
    min-height: 250px !important;
  }
  /* Row 3: 1 full-width card (Security & DevOps) */
  .services-section .srv-grid > .srv-card:nth-child(6) {
    grid-column: 1 / 7 !important;
    min-height: 220px !important;
  }
}

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

@media (max-width: 768px) {
  .services-section .srv-grid {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: visible !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    gap: 16px !important;
  }
  .services-section .srv-grid > .srv-card {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 240px !important;
  }
}

/* Bento card styling */
.services-section .srv-card {
  position: relative !important;
  background-color: #080d1a !important;
  background-size: cover !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
  padding: 32px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-decoration: none !important;
}
.services-section .srv-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(8, 13, 26, 0.95) 0%, rgba(8, 13, 26, 0.85) 45%, rgba(8, 13, 26, 0.4) 100%) !important;
  z-index: 1 !important;
}
.services-section .srv-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 480px !important;
}
.services-section .srv-tag {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #60a5fa !important;
  background: rgba(96, 165, 250, 0.1) !important;
  border: 1px solid rgba(96, 165, 250, 0.2) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  margin-bottom: 14px !important;
}
.services-section .srv-content h3 {
  font-size: clamp(18px, 1.6vw, 24px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  margin: 0 0 10px 0 !important;
}
.services-section .srv-content p {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 !important;
}
.services-section .srv-arrow {
  position: absolute !important;
  bottom: 24px !important;
  left: 28px !important;
  z-index: 2 !important;
  color: #ffffff !important;
  font-size: 18px !important;
  display: none !important;
}

/* ── 3. Selected Work Grid (3 symmetrical columns) ── */
.work-section .work-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.work-section .work-card {
  background: #080d1a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.work-section .work-card-image {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  background-size: cover !important;
  background-position: center !important;
}
.work-section .work-card--featured .work-card-image {
  aspect-ratio: 16 / 10 !important;
}
.work-section .work-card-body {
  padding: 24px 28px 30px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
@media (max-width: 900px) {
  .work-section .work-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ── 4. Process Horizontal Row Cards ── */
.process-section .process-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin-top: 40px !important;
}
.process-section .process-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  padding: 24px 32px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  transition: all 0.25s ease !important;
}
.process-section .process-row:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(99, 130, 255, 0.25) !important;
  transform: translateX(4px) !important;
}
.process-section .process-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  min-width: 180px !important;
  flex-shrink: 0 !important;
}
.process-section .process-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  font-family: 'Manrope', sans-serif !important;
  flex-shrink: 0 !important;
}
.process-section .process-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
}
.process-section .process-desc {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 !important;
  flex: 1 !important;
  max-width: 680px !important;
}
@media (max-width: 768px) {
  .process-section .process-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 18px 20px !important;
  }
  .process-section .process-badge { min-width: auto !important; }
}

/* ── 5. Life at Bitneka Center Layout ── */
.insta-section {
  padding: 90px 0 50px !important;
  background: #02040c !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.insta-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin-bottom: 44px !important;
  gap: 12px !important;
}
.insta-eyebrow {
  margin-bottom: 0 !important;
}
.insta-h {
  margin-bottom: 6px !important;
}
@media (min-width: 769px) {
  .insta-slider {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    overflow: visible !important;
  }
  .insta-slider .insta-item {
    flex: none !important;
    width: 100% !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
}