.service-hero {
        position: relative;
        min-height: 100vh;
        overflow: hidden;
      }
      .service-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        padding: 160px 5% 80px;
        position: relative;
        z-index: 2;
      }
      .service-hero-content { text-align: left; }
      .service-hero-content .main-title { font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1.1; margin: 1rem 0; }
      .service-hero-content .description { margin-bottom: 2rem; font-size: 1.1rem; max-width: 500px; }
      .service-hero-content .hero-btns { justify-content: flex-start; }

      .hero-visual { position: relative; }
      .browser-mockup {
        background: #141625;
        border-radius: 16px;
        border: 1px solid rgba(124,58,237,0.2);
        overflow: hidden;
        box-shadow: 0 32px 80px rgba(0,0,0,.6);
        transform: perspective(1000px) rotateY(-8deg) rotateX(3deg);
        transition: transform .6s ease;
      }
      .browser-mockup:hover { transform: perspective(1000px) rotateY(0deg) rotateX(0deg); }
      .browser-bar {
        background: #1e2035;
        padding: .7rem 1rem;
        display: flex;
        align-items: center;
        gap: .5rem;
        border-bottom: 1px solid rgba(255,255,255,.05);
      }
      .browser-dot { width: 10px; height: 10px; border-radius: 50%; }
      .browser-url {
        flex: 1;
        background: rgba(255,255,255,.05);
        border-radius: 6px;
        padding: .3rem .8rem;
        font-size: .75rem;
        color: #94a3b8;
        margin: 0 .5rem;
      }
      .browser-content { padding: 1.5rem; min-height: 280px; background: linear-gradient(180deg,#141625,#0f1021); }
      .mock-header {
        height: 40px;
        background: linear-gradient(90deg,rgba(124,58,237,.3),rgba(6,182,212,.2));
        border-radius: 8px;
        margin-bottom: 1rem;
        position: relative;
        overflow: hidden;
      }
      .mock-header::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
        animation: shimmer 2s infinite;
      }
      .mock-row { height: 12px; background: rgba(255,255,255,.06); border-radius: 4px; margin-bottom: .6rem; }
      .mock-row.w60 { width: 60%; } .mock-row.w80 { width: 80%; } .mock-row.w40 { width: 40%; }
      .mock-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .6rem; margin-top: 1rem; }
      .mock-card { height: 70px; background: rgba(124,58,237,.12); border-radius: 8px; border: 1px solid rgba(124,58,237,.2); }
      @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

      @media (max-width: 960px) {
        .service-hero-grid { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
        .service-hero-content { text-align: center; }
        .service-hero-content .description { margin: 0 auto 2rem; }
        .service-hero-content .hero-btns { justify-content: center; }
        .hero-visual { display: none; }
      }
      
      /* Utilities for simplified skill grid on this page */
      .simple-skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; max-width: 1000px; margin: 2rem auto 0; }