/* MasterGroup services page refinement v1.0.2
   Isolated overrides for /services. Keep this file modular and page-specific. */

.mg-services-page-hero{
    padding:8.25rem 0 4.75rem;
    background:
        radial-gradient(circle at 82% 14%,rgba(37,99,235,.13),transparent 32%),
        radial-gradient(circle at 8% 76%,rgba(124,58,237,.11),transparent 34%),
        linear-gradient(180deg,rgba(255,255,255,.9),var(--bg-main) 72%);
}
.dark .mg-services-page-hero{
    background:
        radial-gradient(circle at 82% 14%,rgba(37,99,235,.18),transparent 32%),
        radial-gradient(circle at 8% 76%,rgba(124,58,237,.16),transparent 34%),
        linear-gradient(180deg,#080a13,#05050a 74%);
}
.mg-services-hero-grid{
    grid-template-columns:minmax(0,1.03fr) minmax(330px,.72fr);
    gap:2.5rem;
}
.mg-services-hero-copy{
    max-width:720px;
}
.mg-services-page-title,
.mg-services-hero-copy h1#mg-services-page-title{
    max-width:720px;
    font-size:clamp(1.95rem,3.65vw,3.15rem);
    line-height:1.55;
    letter-spacing:-.025em;
    font-weight:950;
}
.mg-services-page-title span:first-child{
    display:block;
}
.mg-services-page-title .text-gradient{
    display:inline-block;
    margin-top:.15rem;
}
.mg-services-lead{
    max-width:660px;
    font-size:1rem;
    line-height:2.05;
    font-weight:600;
}
.mg-services-proof-list{
    display:grid;
    gap:.75rem;
    margin:1.35rem 0 0;
    padding:0;
    list-style:none;
    max-width:660px;
}
.mg-services-proof-list li{
    display:flex;
    align-items:flex-start;
    gap:.72rem;
    padding:.78rem .9rem;
    border-radius:1rem;
    background:rgba(255,255,255,.64);
    border:1px solid rgba(148,163,184,.16);
    color:var(--text-main);
    font-size:.9rem;
    line-height:1.9;
    font-weight:750;
    box-shadow:0 12px 28px rgba(15,23,42,.04);
}
.dark .mg-services-proof-list li{
    background:rgba(255,255,255,.045);
    border-color:rgba(255,255,255,.075);
}
.mg-services-proof-list i{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:1.85rem;
    height:1.85rem;
    border-radius:.75rem;
    background:rgba(37,99,235,.1);
    color:#2563eb;
    margin-top:.15rem;
}
.dark .mg-services-proof-list i{
    background:rgba(96,165,250,.13);
    color:#bfdbfe;
}
.mg-services-hero-actions{
    margin-top:1.75rem;
}
.mg-services-primary-btn,
.mg-services-secondary-btn{
    min-height:50px;
    border-radius:1rem;
    padding:.82rem 1.12rem;
}
.mg-services-hero-panel{
    min-height:auto;
    padding:1.15rem;
    border-radius:1.65rem;
    transform:none;
    box-shadow:0 24px 70px rgba(15,23,42,.09);
}
.dark .mg-services-hero-panel{
    box-shadow:0 28px 80px rgba(0,0,0,.36);
}
.mg-services-panel-body{
    gap:.72rem;
    margin:1rem 0;
}
.mg-services-panel-body div{
    padding:.9rem .95rem;
    border-radius:1rem;
}
.mg-services-panel-body strong{
    font-size:1.05rem;
}
.mg-services-panel-note{
    position:relative;
    z-index:1;
    padding:1rem;
    border-radius:1.1rem;
    background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(124,58,237,.08));
    border:1px solid rgba(37,99,235,.13);
}
.dark .mg-services-panel-note{
    background:linear-gradient(135deg,rgba(96,165,250,.1),rgba(196,181,253,.08));
    border-color:rgba(255,255,255,.08);
}
.mg-services-panel-note strong{
    display:block;
    color:var(--text-main);
    font-size:.96rem;
    font-weight:950;
    margin-bottom:.42rem;
}
.mg-services-panel-note p{
    margin:0;
    color:var(--text-muted);
    font-size:.82rem;
    line-height:2;
    font-weight:650;
}
.mg-services-panel-code{
    background:rgba(7,9,20,.94);
    margin-top:.9rem;
}
.mg-services-panel-code code{
    display:flex;
    align-items:center;
    gap:.55rem;
    color:#dbeafe;
    font-family:inherit;
    text-align:inherit;
}
.mg-services-panel-code i{
    color:#86efac;
}
.mg-services-bento-section{
    padding:4.75rem 0 5.5rem;
    background:
        linear-gradient(180deg,var(--bg-main),var(--bg-panel) 46%,var(--bg-main));
}
.mg-services-section-head{
    max-width:820px;
    margin-bottom:1.75rem;
}
.mg-services-section-head h2,
.mg-services-process-head h2,
.mg-services-cta-card h2{
    font-size:clamp(1.55rem,2.65vw,2.35rem);
    letter-spacing:-.025em;
    font-weight:950;
}
.mg-services-section-head p,
.mg-services-process-head p,
.mg-services-cta-card p{
    max-width:720px;
    font-size:.95rem;
    line-height:2.05;
    font-weight:600;
}
.mg-services-audience-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
    margin:0 auto 2rem;
}
.mg-services-audience-card{
    display:flex;
    align-items:flex-start;
    gap:.9rem;
    padding:1.1rem;
    border-radius:1.35rem;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(148,163,184,.16);
    box-shadow:0 18px 45px rgba(15,23,42,.055);
}
.dark .mg-services-audience-card{
    background:rgba(255,255,255,.045);
    border-color:rgba(255,255,255,.08);
    box-shadow:0 18px 50px rgba(0,0,0,.25);
}
.mg-services-audience-card > i{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:2.45rem;
    height:2.45rem;
    border-radius:.95rem;
    background:rgba(124,58,237,.1);
    color:#7c3aed;
    font-size:1rem;
}
.dark .mg-services-audience-card > i{
    background:rgba(196,181,253,.12);
    color:#ddd6fe;
}
.mg-services-audience-card h3{
    margin:0 0 .28rem;
    color:var(--text-main);
    font-size:1rem;
    line-height:1.75;
    font-weight:950;
}
.mg-services-audience-card p{
    margin:0;
    color:var(--text-muted);
    font-size:.84rem;
    line-height:2;
    font-weight:600;
}
.mg-services-bento-grid{
    gap:1.25rem;
    align-items:stretch;
}
.mg-service-bento-card{
    --svc-accent:#2563eb;
    --svc-accent-2:#7c3aed;
    --svc-rgb:37,99,235;
    position:relative;
    isolation:isolate;
    min-height:375px;
    border-radius:1.75rem;
    padding:1.38rem;
    background:
        linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,255,255,.58)),
        radial-gradient(circle at 10% 95%,rgba(var(--svc-rgb),.12),transparent 34%);
    border:1px solid rgba(var(--svc-rgb),.16);
    box-shadow:0 24px 70px rgba(15,23,42,.075),inset 0 1px 0 rgba(255,255,255,.7);
    overflow:hidden;
}
.mg-service-bento-card::before{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:4px;
    background:linear-gradient(90deg,var(--svc-accent),var(--svc-accent-2),transparent 82%);
    opacity:.95;
    z-index:1;
}
.mg-service-bento-card::after{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:calc(1.75rem - 1px);
    background:
        radial-gradient(circle at 88% 10%,rgba(var(--svc-rgb),.13),transparent 31%),
        linear-gradient(180deg,rgba(255,255,255,.34),transparent 40%);
    pointer-events:none;
    z-index:0;
}
.mg-service-bento-card:hover{
    transform:translateY(-7px);
    border-color:rgba(var(--svc-rgb),.28);
    box-shadow:0 30px 84px rgba(15,23,42,.12),0 14px 36px rgba(var(--svc-rgb),.13);
}
.dark .mg-service-bento-card{
    background:
        linear-gradient(145deg,rgba(15,23,42,.56),rgba(15,23,42,.28)),
        radial-gradient(circle at 12% 95%,rgba(var(--svc-rgb),.17),transparent 35%);
    border-color:rgba(var(--svc-rgb),.22);
    box-shadow:0 28px 78px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.08);
}
.dark .mg-service-bento-card::after{
    background:
        radial-gradient(circle at 88% 10%,rgba(var(--svc-rgb),.16),transparent 31%),
        linear-gradient(180deg,rgba(255,255,255,.045),transparent 42%);
}
.dark .mg-service-bento-card:hover{
    box-shadow:0 34px 90px rgba(0,0,0,.46),0 12px 36px rgba(var(--svc-rgb),.15);
}
.mg-service-bento-card.is-blue{--svc-accent:#2563eb;--svc-accent-2:#60a5fa;--svc-rgb:37,99,235;}
.mg-service-bento-card.is-purple{--svc-accent:#7c3aed;--svc-accent-2:#ec4899;--svc-rgb:124,58,237;}
.mg-service-bento-card.is-emerald{--svc-accent:#059669;--svc-accent-2:#34d399;--svc-rgb:5,150,105;}
.mg-service-bento-card.is-cyan{--svc-accent:#0891b2;--svc-accent-2:#22d3ee;--svc-rgb:8,145,178;}
.mg-service-bento-card.is-gold{--svc-accent:#b98a10;--svc-accent-2:#f59e0b;--svc-rgb:185,138,16;}
.mg-service-bento-card.is-rose{--svc-accent:#e11d48;--svc-accent-2:#fb7185;--svc-rgb:225,29,72;}
.mg-service-bento-card.is-steel{--svc-accent:#475569;--svc-accent-2:#94a3b8;--svc-rgb:71,85,105;}
.mg-service-bento-card.is-wide{
    grid-template-columns:minmax(0,1.06fr) minmax(230px,.68fr);
}
.mg-service-card-content{
    position:relative;
    z-index:2;
}
.mg-service-card-orb{
    background:rgba(var(--svc-rgb),.2);
    opacity:.55;
}
.mg-service-card-top{
    align-items:center;
    gap:.9rem;
    margin-bottom:1.25rem;
}
.mg-service-card-icon{
    width:3.25rem;
    height:3.25rem;
    border-radius:1.1rem;
    font-size:1.18rem;
    color:var(--svc-accent);
    background:linear-gradient(135deg,rgba(var(--svc-rgb),.15),rgba(var(--svc-rgb),.06));
    border-color:rgba(var(--svc-rgb),.19);
    box-shadow:0 16px 34px rgba(var(--svc-rgb),.1);
}
.mg-service-bento-card:hover .mg-service-card-icon{
    transform:scale(1.06) rotate(-2deg);
    box-shadow:0 18px 42px rgba(var(--svc-rgb),.17);
}
.mg-service-card-badge{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:.46rem;
    min-height:34px;
    padding:.48rem .78rem;
    border-radius:999px;
    background:linear-gradient(135deg,rgba(var(--svc-rgb),.12),rgba(255,255,255,.72));
    border:1px solid rgba(var(--svc-rgb),.2);
    color:var(--svc-accent);
    box-shadow:0 12px 28px rgba(var(--svc-rgb),.08);
    font-size:.7rem;
    font-weight:950;
    line-height:1.65;
    white-space:normal;
    text-align:right;
    max-width:12.5rem;
}
.mg-service-card-badge::before{
    content:"";
    width:.42rem;
    height:.42rem;
    flex:0 0 auto;
    border-radius:999px;
    background:var(--svc-accent);
    box-shadow:0 0 0 4px rgba(var(--svc-rgb),.12);
}
.mg-service-card-badge i{
    display:none;
}
.mg-service-card-badge.is-soft{
    color:var(--svc-accent);
    background:linear-gradient(135deg,rgba(var(--svc-rgb),.1),rgba(255,255,255,.64));
}
.dark .mg-service-card-badge,
.dark .mg-service-card-badge.is-soft{
    background:linear-gradient(135deg,rgba(var(--svc-rgb),.18),rgba(255,255,255,.055));
    border-color:rgba(var(--svc-rgb),.28);
    color:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,.24);
}
.mg-service-card-copy small{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    width:max-content;
    max-width:100%;
    margin-bottom:.38rem;
    padding:.25rem .58rem;
    border-radius:999px;
    font-family:inherit;
    letter-spacing:0;
    color:var(--svc-accent);
    background:rgba(var(--svc-rgb),.075);
    font-size:.75rem;
    font-weight:900;
}
.mg-service-card-copy small::before{
    content:"";
    width:.34rem;
    height:.34rem;
    border-radius:999px;
    background:currentColor;
    opacity:.68;
}
.mg-service-card-copy h3{
    margin-bottom:.72rem;
    font-size:1.29rem;
    line-height:1.62;
    letter-spacing:-.018em;
}
.mg-service-bento-card.is-wide .mg-service-card-copy h3{
    font-size:1.62rem;
}
.mg-service-card-copy p{
    font-size:.89rem;
    line-height:2.08;
    font-weight:650;
}
.mg-service-tags{
    margin:1.05rem 0;
}
.mg-service-tags span{
    font-family:inherit;
    border-radius:.78rem;
    background:rgba(var(--svc-rgb),.065);
    border-color:rgba(var(--svc-rgb),.14);
}
.dark .mg-service-tags span{
    background:rgba(var(--svc-rgb),.1);
    border-color:rgba(var(--svc-rgb),.17);
}
.mg-service-card-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.82rem;
    margin-top:auto;
    padding-top:1.05rem;
    border-top:1px solid rgba(148,163,184,.14);
}
.dark .mg-service-card-actions{
    border-top-color:rgba(255,255,255,.075);
}
.mg-service-card-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    min-height:43px;
    margin-top:0;
    padding:.68rem 1rem;
    border-radius:999px;
    width:auto;
    text-decoration:none;
    overflow:hidden;
    isolation:isolate;
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease,color .22s ease,gap .22s ease;
}
.mg-service-card-link::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.5),transparent 58%);
    opacity:.72;
    pointer-events:none;
    z-index:-1;
}
.mg-service-card-link i,
.mg-service-card-link span{
    position:relative;
    z-index:1;
}
.mg-service-card-link:not(.is-request){
    background:rgba(var(--svc-rgb),.08);
    border:1px solid rgba(var(--svc-rgb),.16);
    color:var(--svc-accent);
    box-shadow:0 10px 24px rgba(var(--svc-rgb),.065);
}
.mg-service-card-link:hover{
    transform:translateY(-2px);
    gap:.72rem;
}
.mg-service-card-link:not(.is-request):hover{
    color:var(--svc-accent);
    border-color:rgba(var(--svc-rgb),.28);
    box-shadow:0 14px 34px rgba(var(--svc-rgb),.12);
}
.mg-service-card-link.is-request{
    padding-inline:1.08rem 1.18rem;
    background:linear-gradient(135deg,var(--svc-accent),var(--svc-accent-2));
    border:1px solid rgba(255,255,255,.22);
    color:#fff;
    box-shadow:0 16px 38px rgba(var(--svc-rgb),.22);
}
.mg-service-card-link.is-request::after{
    content:"\f060";
    position:relative;
    z-index:1;
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    font-size:.78rem;
    transition:transform .22s ease;
}
.mg-service-card-link.is-request:hover{
    color:#fff;
    box-shadow:0 20px 48px rgba(var(--svc-rgb),.28);
}
.mg-service-card-link.is-request:hover::after{
    transform:translateX(-3px);
}
.dark .mg-service-card-link:not(.is-request){
    background:rgba(var(--svc-rgb),.11);
    border-color:rgba(var(--svc-rgb),.23);
    color:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.dark .mg-service-card-link:not(.is-request):hover{
    border-color:rgba(var(--svc-rgb),.36);
    color:#fff;
}
.dark .mg-service-card-link.is-request{
    color:#fff;
    border-color:rgba(255,255,255,.18);
    box-shadow:0 16px 42px rgba(var(--svc-rgb),.2);
}
.mg-service-visual{
    min-height:190px;
}
.mg-wireframe-mock,
.mg-shop-mock,
.mg-desktop-mock,
.mg-api-window{
    border-radius:1rem;
    box-shadow:0 18px 44px rgba(15,23,42,.1);
}
.mg-services-process-section{
    padding:4.8rem 0;
}
.mg-service-step{
    min-height:230px;
    border-radius:1.3rem;
}
.mg-services-final-cta{
    padding:5rem 0;
}
.mg-services-cta-card{
    border-radius:1.7rem;
}

@media(max-width:1180px){
    .mg-services-hero-grid{
        grid-template-columns:1fr;
    }
    .mg-services-audience-grid{
        grid-template-columns:1fr;
    }
}
@media(max-width:780px){
    .mg-services-page-hero{
        padding:7.15rem 0 3.6rem;
    }
    .mg-services-page-title,
    .mg-services-hero-copy h1#mg-services-page-title{
        font-size:clamp(1.55rem,8vw,2.1rem);
        line-height:1.7;
        letter-spacing:-.012em;
    }
    .mg-services-lead{
        font-size:.93rem;
        line-height:2;
    }
    .mg-services-proof-list li,
    .mg-services-audience-card{
        padding:.9rem;
        border-radius:1rem;
    }
    .mg-services-bento-section,
    .mg-services-process-section,
    .mg-services-final-cta{
        padding:3.6rem 0;
    }
    .mg-service-bento-card,
    .mg-service-bento-card.is-wide{
        border-radius:1.2rem;
        padding:1rem;
    }
    .mg-service-card-actions{
        display:grid;
        grid-template-columns:1fr;
    }
    .mg-service-card-actions{
        gap:.72rem;
        padding-top:.95rem;
    }
    .mg-service-card-link{
        width:100%;
        justify-content:center;
        min-height:44px;
    }
    .mg-service-visual{
        min-height:150px;
    }
}