*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Wix Madefor Text","Segoe UI",Arial,Helvetica,sans-serif;
}

body{
    background:#f4f4f2;
    color:#08173a;
}

a{
    color:inherit;
    text-decoration:none;
}

.services-page{
    width:100%;
}

.services-hero,
.service-section,
.services-cta{
    width:min(88%, 1500px);
    margin:0 auto;
}

.services-hero{
    padding:40px 0 70px;
}

.eyebrow,
.section-label{
    font-size:12px;
    letter-spacing:8px;
    text-transform:uppercase;
}

.services-hero h1,
.section-copy h2{
    font-family:"Wix Madefor Display","Segoe UI",Arial,Helvetica,sans-serif;
    font-weight:900;
    line-height:.92;
}

.services-hero h1{
    font-size:clamp(48px, 5.5vw, 80px);
    max-width:460px;
    margin-top:14px;
}

.services-hero h1 .hero-line{
    white-space:nowrap;
    display:inline-block;
}

.service-grid{
    margin-top:95px;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:42px;
}

.service-card{
    background:#fff;
    display:flex;
    flex-direction:column;
    min-height:520px;
    box-shadow:0 0 0 1px rgba(8,19,53,.04);
}

.service-card img{
    width:100%;
    height:355px;
    object-fit:cover;
    display:block;
    background:#e9ebef;
}

.service-card-body{
    padding:28px 28px 34px;
    min-height:165px;
    display:flex;
    align-items:flex-start;
}

.service-card-body h2{
    font-family:"Wix Madefor Display","Segoe UI",Arial,Helvetica,sans-serif;
    font-size:clamp(26px, 2.1vw, 36px);
    line-height:1.02;
}

.service-section{
    padding:48px 0 110px;
    border-top:2px solid rgba(8,23,58,.16);
}

.section-copy{
    margin-bottom:48px;
}

.section-copy h2{
    font-size:clamp(36px, 7vw, 88px);
    margin-top:10px;
}

.section-copy h3{
    font-family:"Wix Madefor Display","Segoe UI",Arial,Helvetica,sans-serif;
    font-size:clamp(26px, 2.8vw, 38px);
    line-height:1.12;
    max-width:980px;
    margin-top:18px;
}

.lede{
    font-size:clamp(18px, 1.9vw, 24px);
    line-height:1.55;
    max-width:1240px;
    margin-top:34px;
}

.detail-layout{
    display:grid;
    grid-template-columns:1.4fr .95fr;
    gap:64px;
    align-items:start;
}

.detail-layout.reverse{
    grid-template-columns:1.4fr .95fr;
}

.detail-layout img{
    width:100%;
    height:420px;
    object-fit:cover;
    border-radius:14px;
    background:#e0e5ea;
}

#addon .detail-layout img{
    object-fit:contain;
    object-position:center;
    background:#fff;
}

#sync .detail-layout img{
    object-fit:contain;
    object-position:center;
    background:#fff;
}

.detail-card{
    background:#dbe2e9;
    padding:38px 40px 34px;
    border-radius:18px;
}

.detail-card h4,
.benefit-block h4{
    font-family:"Wix Madefor Display","Segoe UI",Arial,Helvetica,sans-serif;
    font-size:clamp(30px, 2.8vw, 50px);
    line-height:1.05;
    margin-bottom:20px;
}

.detail-card ul,
.benefit-block ul{
    padding-left:22px;
}

.detail-card li,
.benefit-block li{
    font-size:18px;
    line-height:1.45;
    margin-bottom:10px;
}

.benefit-block{
    margin-top:56px;
    max-width:1120px;
}

.benefit-block p{
    font-size:18px;
    line-height:1.6;
    color:#5a6475;
    margin-bottom:22px;
    max-width:680px;
}

.services-cta{
    padding:20px 0 0;
    display:flex;
    justify-content:flex-end;
    border-top:2px solid rgba(8,23,58,.16);
}

.services-cta a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:260px;
    padding:14px 28px;
    background:#1d2a53;
    color:#fff;
    font-size:18px;
    border-radius:2px;
}

.service-section-last{
    padding-bottom:70px;
}

@media(max-width:1100px){
    .service-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .detail-layout,
    .detail-layout.reverse{
        grid-template-columns:1fr;
    }

    .services-cta{
        justify-content:flex-start;
    }
}

@media(max-width:768px){
    .services-hero,
    .service-section,
    .services-cta{
        width:92%;
    }

    .service-grid{
        grid-template-columns:1fr;
        gap:24px;
        margin-top:52px;
    }

    .service-card{
        min-height:unset;
    }

    .service-card img,
    .detail-layout img{
        height:280px;
    }

    .service-card-body{
        min-height:unset;
    }

    .detail-card,
    .benefit-block{
        padding-left:24px;
        padding-right:24px;
    }

    .services-cta a{
        width:100%;
    }
}

/* Smooth card hover */
.service-card {
    transition: transform .22s ease, box-shadow .22s ease;
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(8,23,58,.12);
}

/* btn in services */
.services-cta a {
    transition: background .2s, transform .15s;
}
.services-cta a:hover { background: #08173a; transform: translateY(-2px); }

/* Subtle page animation */
.services-hero,
.service-section,
.services-cta {
    animation: fadeUp .6s ease both;
}

.service-grid .service-card {
    animation: cardRise .65s ease both;
}

.service-grid .service-card:nth-child(2) { animation-delay: .08s; }
.service-grid .service-card:nth-child(3) { animation-delay: .16s; }

.services-hero h1,
.service-grid .service-card,
.section-copy,
.detail-layout,
.benefit-block,
.services-cta {
    will-change: transform, opacity;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes cardRise {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}