.service-hero {
        position: relative;
        min-height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .service-hero-center {
        max-width: 1200px;
        margin: 0 auto;
        padding: 140px 5% 80px;
        position: relative;
        z-index: 2;
        width: 100%;
        text-align: center;
      }
      .service-hero-center .main-title { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.06; margin: 1rem auto; max-width: 900px; }
      .service-hero-center .description { margin: 0 auto 2.5rem; font-size: 1.1rem; max-width: 600px; }
      .service-hero-center .hero-btns { justify-content: center; }

      /* Team Preview Cards adapted to global theme */
      .team-preview { display: flex; gap: 1.2rem; justify-content: center; margin-top: 4rem; flex-wrap: wrap; }
      .dev-card {
        background: #141625;
        border: 1px solid rgba(124,58,237,0.2);
        border-radius: 16px;
        padding: 1.5rem;
        text-align: center;
        width: 160px;
        transition: all .3s;
      }
      .dev-card:hover { border-color: #a78bfa; transform: translateY(-6px); box-shadow: 0 20px 50px rgba(124,58,237,.2); }
      .dev-avatar {
        width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 1rem;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.6rem; font-weight: 700; font-family: 'Outfit', sans-serif; color: #fff;
      }
      .dev-name { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .9rem; margin-bottom: .3rem; color: #f1f5f9; }
      .dev-role { font-size: .75rem; color: #94a3b8; }
      .dev-tags { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; margin-top: .8rem; }
      .dtag { background: rgba(124,58,237,.12); border-radius: 4px; padding: .15rem .4rem; font-size: .65rem; color: #a78bfa; }

      /* Roles Grid */
      .roles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 3rem; }
      .role-card { background: #141625; border: 1px solid rgba(124,58,237,0.2); border-radius: 14px; padding: 1.5rem; text-align: center; transition: all .3s; }
      .role-card:hover { border-color: #7c3aed; transform: translateY(-4px); box-shadow: 0 16px 40px rgba(124,58,237,.15); }
      .role-icon { font-size: 2.2rem; margin-bottom: 1rem; }
      .role-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.05rem; margin-bottom: .5rem; color: #f1f5f9; }
      .role-desc { color: #94a3b8; font-size: .85rem; line-height: 1.5; }

      /* Steps Grid with Arrows */
      .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; }
      .step-card { background: #141625; border: 1px solid rgba(124,58,237,0.2); border-radius: 16px; padding: 2rem 1.5rem; text-align: center; transition: all .3s; position: relative; }
      .step-card:not(:last-child)::after {
        content: '→'; position: absolute; right: -1.2rem; top: 50%; transform: translateY(-50%);
        color: #a78bfa; font-size: 1.5rem; z-index: 2;
      }
      .step-num {
        width: 48px; height: 48px; border-radius: 12px; margin: 0 auto 1.2rem;
        background: linear-gradient(135deg, #7c3aed, #06b6d4);
        display: flex; align-items: center; justify-content: center;
        font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.2rem; color: #fff;
      }
      .step-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.05rem; margin-bottom: .5rem; color: #f1f5f9; }
      .step-desc { color: #94a3b8; font-size: .9rem; line-height: 1.5; }

      @media (max-width: 1024px) {
        .steps-grid { grid-template-columns: 1fr 1fr; }
        .step-card::after { display: none; }
      }
      @media (max-width: 600px) {
        .steps-grid { grid-template-columns: 1fr; }
        .service-hero-center .main-title { font-size: 2.2rem; }
      }