/* ==========================================================================
   CYBROMEDIA - DEDICATED MOBILE & TABLET RESPONSIVE STYLESHEET
   Strictly scoped to <= 991px (Tablets & Mobile Phones)
   * Desktop (> 991px) remains 100% UNTOUCHED and PRESERVED *
   ========================================================================== */

@media (max-width: 991px) {
  /* Global Viewport & Container Reset */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --------------------------------------------------------------------------
     1. HEADER (Tablet & Mobile)
     -------------------------------------------------------------------------- */
  .cybroHeader {
    padding: 12px 16px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .cybroHeader__main {
    min-height: 62px !important;
    padding: 8px 16px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(77, 24, 255, 0.1) !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .cybroHeader__logo img {
    width: 135px !important;
    height: auto !important;
    max-height: 38px !important;
  }

  .cybroNav,
  .cybroHeader__cta,
  .cybroMegaMenu {
    display: none !important;
  }

  .cybroMenuButton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: rgba(77, 24, 255, 0.06) !important;
    border: 1px solid rgba(77, 24, 255, 0.12) !important;
    color: var(--color-purple) !important;
    cursor: pointer !important;
  }

  /* --------------------------------------------------------------------------
     2. HERO SECTION (.cyHero)
     -------------------------------------------------------------------------- */
  .cyHero {
    background: radial-gradient(circle at 50% 0%, rgba(112, 56, 255, 0.08) 0%, rgba(237, 61, 157, 0.04) 40%, #FAFAFF 80%) !important;
    padding-top: 14px !important;
    padding-bottom: 30px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-height: auto !important;
    overflow-x: hidden !important;
  }

  .cyHero__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 0 16px !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .cyHero__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Eyebrow Pill */
  .cyHero__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(112, 56, 255, 0.06) !important;
    border: 1px solid rgba(112, 56, 255, 0.14) !important;
    padding: 5px 14px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--color-violet) !important;
    margin: 0 0 14px 0 !important;
    box-shadow: none !important;
  }

  .cyHero__badge svg {
    width: 13px !important;
    height: 13px !important;
    stroke: #7038FF !important;
  }

  /* Title */
  .cyHero__title {
    font-size: clamp(27px, 7.4vw, 36px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.035em !important;
    font-weight: 800 !important;
    color: var(--text-heading) !important;
    margin: 0 0 12px 0 !important;
    text-align: left !important;
    width: 100% !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .cyHero__title br {
    display: inline !important;
  }

  .cyHero__gradientText {
    background: linear-gradient(115deg, #6025FF 0%, #B829E3 50%, #ED3D9D 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }

  /* Description */
  .cyHero__description {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #55607A !important;
    margin: 0 0 18px 0 !important;
    text-align: left !important;
    max-width: 480px !important;
  }

  /* Action Buttons */
  .cyHero__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 16px 0 !important;
    width: 100% !important;
  }

  .cyHero__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 46px !important;
    padding: 0 22px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }

  .cyHero__button--primary {
    background: linear-gradient(105deg, #4D18FF 0%, #7138FF 30%, #EC4899 70%, #FF671D 100%) !important;
    color: var(--text-on-dark) !important;
    border: none !important;
    box-shadow: 0 8px 22px -4px rgba(236, 72, 153, 0.38) !important;
  }

  .cyHero__button--outline {
    background: var(--bg-primary) !important;
    color: var(--text-heading) !important;
    border: 1.5px solid rgba(112, 56, 255, 0.2) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
  }

  .cyHero__trust {
    display: none !important;
  }

  /* Tags line: Strategy • Content • Ads • Websites • Branding */
  .cyHero__services {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  .cyHero__services span {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .cyHero__services i {
    display: inline-block !important;
    width: 3.5px !important;
    height: 3.5px !important;
    border-radius: 50% !important;
    background: #A855F7 !important;
  }

  /* 3D Visual Stage */
  .cyHero__visual {
    width: 100% !important;
    max-width: 380px !important;
    margin: 8px auto 0 auto !important;
    height: 360px !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .cyHero__visual::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 260px !important;
    height: 260px !important;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.20) 0%, rgba(236, 72, 153, 0.14) 45%, transparent 70%) !important;
    filter: blur(32px) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* Center Smartphone Card */
  .cyHero__mainCard {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 215px !important;
    border-radius: 22px !important;
    background: var(--bg-primary) !important;
    border: 3px solid #1E293B !important;
    box-shadow: 0 18px 44px -8px rgba(15, 23, 42, 0.25) !important;
    z-index: 5 !important;
    overflow: hidden !important;
  }

  .cyHero__mainHeader {
    padding: 8px 10px 5px !important;
  }

  .cyHero__mainImage {
    height: 130px !important;
  }

  .cyHero__mainContent {
    padding: 8px 10px 8px !important;
  }

  .cyHero__mainTitle {
    font-size: 12.5px !important;
    font-weight: 700 !important;
  }

  .cyHero__mainMeta {
    font-size: 10px !important;
  }

  /* Floating Satellites */
  .cyHero__aiCard {
    position: absolute !important;
    top: 25px !important;
    left: 4px !important;
    z-index: 6 !important;
    border-radius: 14px !important;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(112, 56, 255, 0.16) !important;
    box-shadow: 0 10px 24px rgba(77, 24, 255, 0.15) !important;
    transform: rotate(-3deg) scale(0.9) !important;
  }

  .cyHero__performanceCard {
    position: absolute !important;
    bottom: 20px !important;
    right: 4px !important;
    z-index: 6 !important;
    border-radius: 14px !important;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(112, 56, 255, 0.16) !important;
    box-shadow: 0 10px 24px rgba(77, 24, 255, 0.15) !important;
    transform: rotate(3deg) scale(0.9) !important;
    width: 135px !important;
  }

  .cyHero__googleCard,
  .cyHero__engagementCard {
    display: none !important;
  }

  /* --------------------------------------------------------------------------
     3. TRUSTED ACROSS INDUSTRIES & STATS (.cyProof)
     Ultra-Premium Mobile Refinement
     -------------------------------------------------------------------------- */
  .cyProof {
    padding: 24px 0 20px 0 !important;
    background: var(--bg-primary) !important;
  }

  .cyProof__container {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .cyProof__badge {
    margin-bottom: 12px !important;
    justify-content: center !important;
    display: flex !important;
    padding: 0 16px !important;
  }

  .cyProof__badgeBox {
    background: rgba(112, 56, 255, 0.06) !important;
    border: 1px solid rgba(112, 56, 255, 0.16) !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: 1.8px !important;
    color: var(--color-violet) !important;
    text-transform: uppercase !important;
    padding: 6px 16px !important;
    border-radius: var(--radius-pill) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 3px 12px rgba(112, 56, 255, 0.05) !important;
  }

  .cyProof__badgeBox svg,
  .cyProof__spark,
  .cyProof__title,
  .cyProof__mainDivider,
  .cyProof__message {
    display: none !important;
  }

  .cyProof__main {
    display: block !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
  }

  /* Brands: 5 luxury horizontal cards with custom scrollbar */
  .cyTrust__brands {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    gap: 12px !important;
    padding: 6px 16px 10px 16px !important;
    margin-bottom: 0 !important;
    scrollbar-width: none !important;
  }

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

  /* Dedicated ultra-clean scrollbar indicator for all mobile browsers */
  .cyTrust__scrollTrack {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 130px !important;
    height: 5px !important;
    background: rgba(112, 56, 255, 0.12) !important;
    border-radius: 999px !important;
    margin: 8px auto 14px auto !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
  }

  .cyTrust__scrollThumb {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 40% !important;
    background: linear-gradient(90deg, #7038ff 0%, #ff5e3a 100%) !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 6px rgba(112, 56, 255, 0.35) !important;
    will-change: transform !important;
    transition: transform 0.08s ease-out !important;
  }

  .cyTrust__brand {
    flex: 0 0 135px !important;
    width: 135px !important;
    height: 82px !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1px solid rgba(112, 56, 255, 0.12) !important;
    box-shadow: 0 6px 20px rgba(45, 24, 105, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    scroll-snap-align: start !important;
    transition: transform 0.2s ease !important;
  }

  .cyTrust__brand:active {
    transform: scale(0.97) !important;
  }

  .cyTrust__brand img {
    max-height: 50px !important;
    max-width: 98px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.04)) !important;
  }

  /* Stats Card: Unified luxury white card */
  /* Stats Card: Unified luxury white card */
  .cyProof__stats {
    background: var(--bg-primary) !important;
    border-radius: 22px !important;
    border: 1px solid rgba(112, 56, 255, 0.12) !important;
    box-shadow: 0 14px 38px rgba(45, 24, 105, 0.07), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    padding: 16px 14px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 8px !important;
    margin: 4px 16px 0 16px !important;
  }

  .cyProof__stat {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    border: none !important;
    min-width: 0 !important;
  }

  .cyProof__statIcon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .cyProof__statIcon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .cyProof__statIcon--purple {
    background: linear-gradient(135deg, rgba(112, 56, 255, 0.15), rgba(112, 56, 255, 0.05)) !important;
    border: 1.5px solid rgba(112, 56, 255, 0.25) !important;
    color: var(--color-violet) !important;
    box-shadow: 0 4px 14px rgba(112, 56, 255, 0.15) !important;
  }
  .cyProof__statIcon--pink {
    background: linear-gradient(135deg, rgba(237, 61, 157, 0.15), rgba(237, 61, 157, 0.05)) !important;
    border: 1.5px solid rgba(237, 61, 157, 0.25) !important;
    color: var(--color-pink) !important;
    box-shadow: 0 4px 14px rgba(237, 61, 157, 0.15) !important;
  }
  .cyProof__statIcon--orange {
    background: linear-gradient(135deg, rgba(255, 103, 29, 0.15), rgba(255, 103, 29, 0.05)) !important;
    border: 1.5px solid rgba(255, 103, 29, 0.25) !important;
    color: var(--color-orange) !important;
    box-shadow: 0 4px 14px rgba(255, 103, 29, 0.15) !important;
  }

  .cyProof__stat:last-child .cyProof__statIcon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05)) !important;
    border: 1.5px solid rgba(59, 130, 246, 0.25) !important;
    color: #3B82F6 !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.15) !important;
  }

  .cyProof__statText {
    min-width: 0 !important;
  }

  .cyProof__statText strong {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: var(--text-heading) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    display: block !important;
  }

  .cyProof__statText span {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
    display: block !important;
    white-space: nowrap !important;
  }

  .cyProof__statText--location strong {
    font-size: 13.5px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    letter-spacing: -0.01em !important;
  }

  .cyProof__statText--location span {
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* --------------------------------------------------------------------------
     4. OUR GROWTH SYSTEM (.growth-system)
     Ultra-Premium Stacked 4 Horizontal Cards
     -------------------------------------------------------------------------- */
  .growth-system {
    padding: 38px 0 30px 0 !important;
    background: radial-gradient(circle at 50% 0%, rgba(112, 56, 255, 0.05) 0%, transparent 60%), #FAFAFF !important;
  }

  .growth-container {
    max-width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .system-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--color-violet) !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    background: rgba(112, 56, 255, 0.06) !important;
    border: 1px solid rgba(112, 56, 255, 0.16) !important;
    padding: 5px 16px !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 2px 8px rgba(112, 56, 255, 0.04) !important;
    margin-bottom: 10px !important;
  }

  .system-badge span {
    display: none !important;
  }

  .growth-system h2 {
    font-size: clamp(28px, 7.8vw, 34px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    color: var(--text-heading) !important;
    margin: 0 0 8px 0 !important;
    padding: 0 16px !important;
  }

  .growth-system h2 span {
    background: linear-gradient(115deg, #6025FF 0%, #B829E3 50%, #ED3D9D 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }

  .system-description {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #55607A !important;
    margin: 0 auto 24px auto !important;
    max-width: 380px !important;
    padding: 0 16px !important;
  }

  .growth-scroll {
    overflow: hidden !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .growth-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Ultra-Premium Horizontal List Card */
  .growth-card {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 28px !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    align-items: center !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 13px 16px !important;
    border-radius: 18px !important;
    background: var(--bg-primary) !important;
    border: 1px solid rgba(112, 56, 255, 0.08) !important;
    box-shadow: 0 8px 24px rgba(45, 24, 105, 0.04), 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    text-align: left !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    flex: none !important;
    overflow: hidden !important;
  }

  .step-number,
  .growth-card .tag,
  .growth-card .tags,
  .card-arrow {
    display: none !important;
  }

  /* Right-side chevron arrow on all cards */
  .growth-card::after {
    content: '\203A' !important;
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: rgba(112, 56, 255, 0.05) !important;
    border: 1px solid rgba(112, 56, 255, 0.12) !important;
    color: var(--color-violet) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    justify-self: end !important;
    box-shadow: 0 2px 6px rgba(112, 56, 255, 0.04) !important;
  }

  .foundation-art,
  .visibility-art,
  .demand-art,
  .proof-art {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    flex: none !important;
    border-radius: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  .foundation-art {
    background: linear-gradient(135deg, rgba(112, 56, 255, 0.14), rgba(112, 56, 255, 0.04)) !important;
    border: 1.5px solid rgba(112, 56, 255, 0.2) !important;
    box-shadow: 0 4px 14px rgba(112, 56, 255, 0.12) !important;
  }

  .visibility-art {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(139, 92, 246, 0.04)) !important;
    border: 1.5px solid rgba(139, 92, 246, 0.2) !important;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.12) !important;
  }

  .demand-art {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.14), rgba(236, 72, 153, 0.04)) !important;
    border: 1.5px solid rgba(236, 72, 153, 0.2) !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.12) !important;
  }

  .proof-art {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(14, 165, 233, 0.04)) !important;
    border: 1.5px solid rgba(14, 165, 233, 0.2) !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.12) !important;
  }

  .growthImg {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
  }

  .growth-card h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: var(--text-heading) !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.015em !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  .growth-card p {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 12px !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  .growth-card p br {
    display: none !important;
  }

  /* Bottom link */
  .system-bottom {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 20px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
  }

  .system-bottom span {
    display: none !important;
  }

  .system-bottom p {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
  }

  .system-bottom p b {
    display: none !important;
  }

  .system-bottom p::after {
    content: 'Explore all services →' !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    color: var(--color-violet) !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 9px 24px !important;
    border-radius: var(--radius-pill) !important;
    background: rgba(112, 56, 255, 0.05) !important;
    border: 1px solid rgba(112, 56, 255, 0.14) !important;
    box-shadow: 0 2px 8px rgba(112, 56, 255, 0.04) !important;
    transition: all var(--transition-fast) !important;
  }

  /* --------------------------------------------------------------------------
     5. HOW WE GET YOU FOUND — AND CHOSEN (.cy-services)
     -------------------------------------------------------------------------- */
  .cy-services {
    padding: 34px 16px 26px !important;
    background: var(--bg-primary) !important;
  }

  .cy-services__container {
    max-width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .cy-services__badge {
    color: var(--color-violet) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
  }

  .cy-services__badge span,
  .cy-services__badge i {
    display: none !important;
  }

  .cy-services h2 {
    font-size: clamp(26px, 7vw, 32px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--text-heading) !important;
    margin: 0 0 6px 0 !important;
  }

  .cy-services__intro {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: var(--text-muted) !important;
    margin: 0 auto 18px auto !important;
    max-width: 380px !important;
  }

  .cy-services__slider {
    overflow: visible !important;
    padding: 0 !important;
  }

  .cy-services__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .cy-service-card {
    background: var(--bg-primary) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    border: 1px solid rgba(112, 56, 255, 0.08) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
    text-align: left !important;
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .cy-service-card__flag {
    display: none !important;
  }

  .cy-service-card__top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
  }

  .cy-service-card__icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: rgba(112, 56, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .cy-service-card__icon img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
  }

  .cy-service-card__number strong {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--color-violet) !important;
  }

  .cy-service-card h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-heading) !important;
    line-height: 1.25 !important;
    margin: 0 0 6px 0 !important;
  }

  .cy-service-card p {
    font-size: 11.5px !important;
    color: var(--text-muted) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  .cy-service-card a,
  .cy-service-card__line {
    display: none !important;
  }

  /* --------------------------------------------------------------------------
     6. INDUSTRIES (.cy-industries)
     Compact cards with round icon badges
     -------------------------------------------------------------------------- */
  .cy-industries {
    padding: 34px 16px 26px !important;
    background: #FAFAFF !important;
  }

  .cy-industries__container {
    max-width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .cy-industries__badge {
    color: var(--color-violet) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
  }

  .cy-industries h2 {
    font-size: clamp(26px, 7vw, 32px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--text-heading) !important;
    margin: 0 0 6px 0 !important;
  }

  .cy-industries__intro {
    font-size: 13.5px !important;
    color: var(--text-muted) !important;
    margin: 0 auto 18px auto !important;
    max-width: 380px !important;
  }

  .cy-industries__slider {
    overflow: visible !important;
    padding: 0 !important;
  }

  .cy-industries__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .cy-industry-card {
    background: var(--bg-primary) !important;
    border-radius: 16px !important;
    padding: 16px 12px !important;
    border: 1px solid rgba(112, 56, 255, 0.08) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .cy-industry-card__art {
    display: none !important;
  }

  .cy-industry-card__icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(112, 56, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 10px auto !important;
    color: var(--color-violet) !important;
  }

  .cy-industry-card__icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  .cy-industry-card h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-heading) !important;
    margin: 0 0 4px 0 !important;
  }

  .cy-industry-card p {
    font-size: 11.5px !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
  }

  .cy-industry-card a {
    display: none !important;
  }

  /* --------------------------------------------------------------------------
     7. REAL RESULTS (.cybrProofSection)
     -------------------------------------------------------------------------- */
  .cybrProofSection {
    padding: 34px 16px 26px !important;
    background: var(--bg-primary) !important;
  }

  .cybrProofSection__container {
    max-width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .cybrProofSection__label {
    color: var(--color-violet) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
    display: inline-flex !important;
  }

  .cybrProofSection__title {
    font-size: clamp(26px, 7vw, 32px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--text-heading) !important;
    margin: 0 0 6px 0 !important;
  }

  .cybrProofSection__subtitle {
    font-size: 13.5px !important;
    color: var(--text-muted) !important;
    margin: 0 auto 20px auto !important;
    max-width: 380px !important;
  }

  .cybrProofSection__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .cybrProofSection__featured,
  .cybrProofSection__caseCard {
    background: var(--bg-primary) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(112, 56, 255, 0.09) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden !important;
    text-align: left !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .cybrProofSection__featuredImage,
  .cybrProofSection__caseImage {
    height: 175px !important;
    width: 100% !important;
    position: relative !important;
  }

  .cybrProofSection__featuredImage img,
  .cybrProofSection__caseImage img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .cybrProofSection__featuredContent,
  .cybrProofSection__caseContent {
    padding: 16px !important;
  }

  .cybrProofSection__featuredBody {
    display: block !important;
  }

  .cybrProofSection__featuredStats {
    display: flex !important;
    gap: 16px !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  /* --------------------------------------------------------------------------
     8. WHY BUSINESSES CHOOSE CYBROMEDIA (.cyChoiceMedia)
     -------------------------------------------------------------------------- */
  .cyChoiceMedia {
    padding: 34px 16px 26px !important;
    background: #FAFAFF !important;
  }

  .cyChoiceMedia__container {
    max-width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .cyChoiceMedia__eyebrow {
    color: var(--color-violet) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
  }

  .cyChoiceMedia__heading {
    font-size: clamp(26px, 7vw, 32px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--text-heading) !important;
    margin: 0 0 6px 0 !important;
  }

  .cyChoiceMedia__subheading {
    font-size: 13.5px !important;
    color: var(--text-muted) !important;
    margin: 0 auto 18px auto !important;
    max-width: 380px !important;
  }

  .cyChoiceMedia__layout {
    display: block !important;
  }

  .cyChoiceMedia__features {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .cyChoiceMedia__card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    background: var(--bg-primary) !important;
    border: 1px solid rgba(112, 56, 255, 0.08) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
    gap: 14px !important;
    text-align: left !important;
    min-height: auto !important;
    height: auto !important;
    position: relative !important;
  }

  .cyChoiceMedia__card::after {
    content: '›' !important;
    margin-left: auto !important;
    color: var(--color-violet) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
  }

  .cyChoiceMedia__icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: var(--radius-md) !important;
    background: rgba(112, 56, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .cyChoiceMedia__icon img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
  }

  .cyChoiceMedia__cardContent h3 {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--text-heading) !important;
    margin: 0 0 2px 0 !important;
  }

  .cyChoiceMedia__cardContent p {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
    line-height: 1.35 !important;
  }

  .cyChoiceMedia__founderCard,
  .cyChoiceMedia__bottom {
    display: none !important;
  }

  /* --------------------------------------------------------------------------
     9. HOW WE WORK PROCESS (.cyProcessFlow)
     - Tablet (601px - 991px): 2 × 2 compact balanced grid, reduced height (~450px)
     - Mobile (≤ 600px): Clean centered cards with small visual & corner badge, zero collision
     -------------------------------------------------------------------------- */
  .cyProcessFlow {
    padding: 34px 16px 24px !important;
    background: var(--bg-primary) !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .cyProcessFlow::before,
  .cyProcessFlow::after {
    display: none !important;
  }

  .cyProcessFlow__container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .cyProcessFlow__header {
    margin-bottom: 18px !important;
    text-align: center !important;
  }

  .cyProcessFlow__eyebrow {
    margin-bottom: 10px !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .cyProcessFlow__eyebrow > span {
    width: 24px !important;
  }

  .cyProcessFlow__eyebrowText {
    padding: 5px 14px !important;
    font-size: 11px !important;
    letter-spacing: 1.4px !important;
  }

  .cyProcessFlow__title {
    font-size: clamp(21px, 6vw, 28px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.8px !important;
    color: var(--text-heading) !important;
    line-height: 1.15 !important;
    margin: 0 0 6px 0 !important;
    padding-inline: 14px !important;
    overflow-wrap: break-word !important;
  }

  .cyProcessFlow__subtitle {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: var(--text-muted) !important;
    margin: 0 auto 16px auto !important;
    max-width: 440px !important;
  }

  /* TABLET (601px - 991px): 2 × 2 Compact Grid */
  @media (min-width: 601px) {
    .cyProcessFlow__steps {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 14px !important;
      max-width: 680px !important;
      margin: 0 auto !important;
      padding: 0 !important;
    }

    .cyProcessFlow__arrow {
      display: none !important;
    }

    .cyProcessFlow__card {
      position: relative !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      padding: 14px 16px 16px !important;
      border-radius: var(--radius-lg) !important;
      min-height: 0 !important;
      height: auto !important;
      background: #FAFAFF !important;
      border: 1px solid rgba(112, 56, 255, 0.1) !important;
      box-shadow: 0 4px 16px rgba(45, 24, 105, 0.04) !important;
    }

    .cyProcessFlow__number {
      position: absolute !important;
      top: 12px !important;
      left: 14px !important;
      width: 32px !important;
      height: 32px !important;
      font-size: 13.5px !important;
      font-weight: 800 !important;
      display: grid !important;
      place-items: center !important;
      border-radius: 50% !important;
      color: var(--text-on-dark) !important;
      z-index: 2 !important;
    }

    .cyProcessFlow__visual {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      height: 76px !important;
      margin: 2px auto 6px !important;
    }

    .cyProcessFlow__visual img,
    .cyProcessFlow__visual .growthImg {
      max-height: 70px !important;
      max-width: 90px !important;
      width: auto !important;
      height: auto !important;
      object-fit: contain !important;
      display: block !important;
    }

    .cyProcessFlow__cardTitle {
      font-size: 17.5px !important;
      font-weight: 700 !important;
      margin: 0 0 3px 0 !important;
      color: var(--text-primary) !important;
    }

    .cyProcessFlow__cardText {
      font-size: 12px !important;
      line-height: 1.38 !important;
      color: var(--text-muted) !important;
      max-width: 230px !important;
      margin: 0 !important;
    }

    .cyProcessFlow__tag {
      display: inline-flex !important;
      align-items: center !important;
      min-height: 25px !important;
      padding: 3px 12px !important;
      font-size: 10.5px !important;
      font-weight: 700 !important;
      letter-spacing: 0.5px !important;
      border-radius: 30px !important;
      margin-top: 8px !important;
    }
  }

  /* MOBILE (≤ 600px): Sleek Compact Cards with Center Alignment & Corner Badge */
  @media (max-width: 600px) {
    .cyProcessFlow {
      padding: 26px 14px 20px !important;
    }

    .cyProcessFlow__steps {
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
      width: 100% !important;
      max-width: 340px !important;
      margin: 0 auto !important;
      padding: 0 !important;
    }

    .cyProcessFlow__arrow {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      height: 14px !important;
      font-size: 12px !important;
      color: #8B5CF6 !important;
      transform: rotate(90deg) !important;
      margin: -2px 0 !important;
    }

    .cyProcessFlow__card {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      position: relative !important;
      padding: 12px 14px 14px !important;
      border-radius: 18px !important;
      min-height: 0 !important;
      height: auto !important;
      width: 100% !important;
      background: #FAFAFF !important;
      border: 1px solid rgba(112, 56, 255, 0.1) !important;
      box-shadow: 0 4px 14px rgba(45, 24, 105, 0.04) !important;
    }

    .cyProcessFlow__number {
      position: absolute !important;
      top: 10px !important;
      left: 12px !important;
      width: 26px !important;
      height: 26px !important;
      font-size: 11.5px !important;
      font-weight: 800 !important;
      border-radius: 50% !important;
      display: grid !important;
      place-items: center !important;
      color: var(--text-on-dark) !important;
      z-index: 2 !important;
    }

    .cyProcessFlow__visual {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      height: 60px !important;
      margin: 2px auto 4px !important;
    }

    .cyProcessFlow__visual img,
    .cyProcessFlow__visual .growthImg {
      max-height: 54px !important;
      max-width: 72px !important;
      width: auto !important;
      height: auto !important;
      object-fit: contain !important;
      display: block !important;
    }

    .cyProcessFlow__cardTitle {
      font-size: 16px !important;
      font-weight: 700 !important;
      margin: 0 0 2px 0 !important;
      color: var(--text-primary) !important;
    }

    .cyProcessFlow__cardText {
      font-size: 11.5px !important;
      line-height: 1.35 !important;
      color: var(--text-muted) !important;
      max-width: 250px !important;
      margin: 0 auto !important;
    }

    .cyProcessFlow__tag {
      display: inline-flex !important;
      align-items: center !important;
      min-height: 22px !important;
      padding: 2px 10px !important;
      font-size: 9.5px !important;
      font-weight: 700 !important;
      letter-spacing: 0.5px !important;
      border-radius: var(--radius-lg) !important;
      margin-top: 6px !important;
    }
  }

  .cyProcessFlow__bottom {
    margin-top: 14px !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    gap: 6px !important;
    padding-inline: 16px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* --------------------------------------------------------------------------
     10. TESTIMONIALS & FAQ (.cyClientVoice & .cyFaqReplica)
     -------------------------------------------------------------------------- */
  .cyClientVoice {
    padding: 34px 16px 26px !important;
    background: #FAFAFF !important;
  }

  .cyClientVoice__container {
    max-width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .cyClientVoice__heading {
    font-size: clamp(26px, 7vw, 32px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--text-heading) !important;
    margin: 0 0 6px 0 !important;
  }

  .cyClientVoice__subheading {
    font-size: 13.5px !important;
    color: var(--text-muted) !important;
    margin: 0 auto 18px auto !important;
  }

  .cyClientVoice__layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .cyClientVoice__mainCard,
  .cyClientVoice__smallCard {
    background: var(--bg-primary) !important;
    border-radius: 18px !important;
    padding: 18px !important;
    border: 1px solid rgba(112, 56, 255, 0.08) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
    text-align: left !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* FAQ Accordion */
  .cyFaqReplica {
    padding: 34px 16px 26px !important;
    background: var(--bg-primary) !important;
  }

  .cyFaqReplica__container {
    max-width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .cyFaqReplica__heading {
    font-size: clamp(26px, 7vw, 32px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--text-heading) !important;
    margin: 0 0 6px 0 !important;
  }

  .cyFaqReplica__intro {
    padding: 0 0 16px 0 !important;
    font-size: 13.5px !important;
    color: var(--text-muted) !important;
  }

  .cyFaqReplica__question {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    background: #FAFAFF !important;
    border-radius: 14px !important;
    border: 1px solid rgba(112, 56, 255, 0.08) !important;
    margin-bottom: 8px !important;
  }

  .cyFaqReplica__questionText {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-heading) !important;
    text-align: left !important;
  }

  .cyFaqReplica__number {
    display: none !important;
  }

  /* --------------------------------------------------------------------------
     11. BOTTOM STUDIO CTA (.cyStudioCta)
     Cosmic card with dual buttons
     -------------------------------------------------------------------------- */
  .cyStudioCta {
    padding: 38px 16px 40px !important;
    background: #090D1F !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .cyStudioCta__container {
    max-width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .cyStudioCta__eyebrow {
    margin-bottom: 8px !important;
    justify-content: center !important;
    display: flex !important;
  }

  .cyStudioCta__eyebrow-text {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.6px !important;
    color: #A78BFA !important;
    text-transform: uppercase !important;
  }

  .cyStudioCta__heading {
    font-size: clamp(23px, 6.8vw, 32px) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: var(--text-on-dark) !important;
    margin: 0 0 10px 0 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    padding: 0 4px !important;
  }

  .cyStudioCta__subheading {
    font-size: 13.5px !important;
    color: var(--text-subtle) !important;
    margin: 0 auto 20px auto !important;
    max-width: 380px !important;
    line-height: 1.5 !important;
  }

  .cyStudioCta__actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  .cyStudioCta__button-primary {
    width: 100% !important;
    height: 48px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    background: linear-gradient(105deg, #FF671D 0%, #ED3D9D 60%, #7138FF 100%) !important;
    color: var(--text-on-dark) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 24px -4px rgba(237, 61, 157, 0.4) !important;
  }

  .cyStudioCta__link-secondary {
    width: 100% !important;
    height: 48px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    background: var(--color-whatsapp) !important;
    color: var(--text-on-dark) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.25) !important;
  }
}

/* --------------------------------------------------------------------------
   TABLET RESPONSIVE ENHANCEMENTS (768px - 991px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  .cyHero__container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    gap: 24px !important;
    padding: 0 28px !important;
  }

  .cyHero__visual {
    margin: 0 !important;
    height: 420px !important;
  }

  .cyProof__stats {
    grid-template-columns: repeat(4, 1fr) !important;
    padding: 16px 20px !important;
  }

  .cyTrust__brands {
    justify-content: center !important;
  }

  .growth-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .cy-services__grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .cy-industries__grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .cyStudioCta__actions {
    flex-direction: row !important;
    justify-content: center !important;
    max-width: 100% !important;
  }

  .cyStudioCta__button-primary,
  .cyStudioCta__link-secondary {
    width: auto !important;
    padding: 0 28px !important;
  }
}