:root{



/* =========================
   SERVICE PAGE - GARDENER SYSTEM
========================= */

--service-page-bg:
linear-gradient(
180deg,
#0a120d 0%,
#0b1510 50%,
#0a110c 100%
);

--service-page-text:rgba(245,245,245,0.88);
--service-page-padding:170px 0 120px;

/* background glow */
--service-page-overlay:
radial-gradient(circle at 80% 20%, rgba(159,216,176,0.06), transparent 55%);

/* ACCENT */
--service-accent:#9fd8b0;
--service-accent-soft:#bfe9cc;

/* HERO */
--service-hero-gap:70px;
--service-hero-margin:0 0 90px;

/* LABEL */
--service-label-bg:rgba(159,216,176,0.06);
--service-label-border:1px solid rgba(159,216,176,0.18);
--service-label-color:#9fd8b0;
--service-card-color-number:rgba(235,240,235,0.60);

/* TITLE */
--service-hero-title-size:clamp(34px,4.2vw,58px);
--service-hero-title-line:1.02;
--service-hero-title-spacing:-2px;

/* TEXT */
--service-lead-size:15px;
--service-lead-line:1.9;
--service-lead-color:rgba(235,240,235,0.70);

/* FEATURES */
--service-feature-bg:rgba(255,255,255,0.03);
--service-feature-border:1px solid rgba(159,216,176,0.10);
--service-feature-radius:14px;

--service-feature-hover-border:rgba(159,216,176,0.28);
--service-feature-hover-lift:-4px;

/* IMAGE */
--service-image-height:500px;
--service-image-radius:28px;
--service-image-shadow:0 30px 70px rgba(0,0,0,0.45);

--service-image-overlay:
linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55));

/* BADGE */
--service-badge-bg:rgba(10,10,10,0.78);
--service-badge-border:1px solid rgba(159,216,176,0.10);
--service-badge-radius:16px;
--service-badge-blur:14px;

/* BLOCKS */
--service-block-margin:75px;

--service-block-title-size:clamp(24px,2vw,30px);
--service-block-title-spacing:-1px;

--service-block-text-color:rgba(235,240,235,0.72);

/* LIST */
--service-list-indent:18px;

/* GRID */
--service-grid-gap:25px;

/* CARD */
--service-card-bg:
linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));

--service-card-border:1px solid rgba(159,216,176,0.12);
--service-card-radius:24px;

--service-card-hover-border:rgba(159,216,176,0.28);
--service-card-hover-shadow:0 20px 40px rgba(0,0,0,0.45);
--service-card-hover-lift:-8px;

/* CTA */
--service-cta-bg:
linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));

--service-cta-border:1px solid rgba(159,216,176,0.10);
--service-cta-radius:30px;
--service-cta-padding:70px;

--service-cta-btn-bg:#9fd8b0;
--service-cta-btn-text:#0b0f0c;
--service-cta-btn-hover-shadow:0 15px 35px rgba(159,216,176,0.25);

/* NUMBERS */
--service-number-color:rgba(235,240,235,0.35);

/* TRANSITION */
--service-transition:.4s ease;


}



.service-page{
    background:var(--service-page-bg);
    color:var(--service-page-text);
    padding:var(--service-page-padding);
    position:relative;
    overflow:hidden;
}

.service-page::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--service-page-overlay);
    pointer-events:none;
}

/* HERO */

.service-hero{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--service-hero-gap);
    align-items:center;
    margin-bottom:var(--service-hero-margin);
}

.service-hero-content{
    max-width:620px;
}

.service-label{
    display:inline-flex;
    padding:10px 14px;
    border-radius:50px;
    background:var(--service-label-bg);
    border:var(--service-label-border);
    color:var(--service-label-color);
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:24px;
}

/* TITLE */

.service-hero-content h1{
    font-size:var(--service-hero-title-size);
    line-height:var(--service-hero-title-line);
    font-weight:900;
    letter-spacing:var(--service-hero-title-spacing);
    margin-bottom:22px;
}

.service-lead{
    font-size:var(--service-lead-size);
    line-height:var(--service-lead-line);
    color:var(--service-lead-color);
    margin-bottom:30px;
    max-width:560px;
}

/* FEATURES */

.service-hero-features{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.service-hero-features div{
    padding:12px 18px;
    border-radius:var(--service-feature-radius);
    background:var(--service-feature-bg);
    border:var(--service-feature-border);
    font-size:13px;
    transition:var(--service-transition);
}

.service-hero-features div:hover{
    transform:translateY(var(--service-feature-hover-lift));
    border-color:var(--service-feature-hover-border);
}

/* IMAGE */

.service-hero-image{
    position:relative;
    height:var(--service-image-height);
    width:100%;
    max-width:500px;
    margin-left:auto;
    border-radius:var(--service-image-radius);
    overflow:hidden;
    box-shadow:var(--service-image-shadow);
}

.service-hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:brightness(.82) contrast(1.05);
    transition:.7s ease;
}

.service-hero-image:hover img{
    transform:scale(1.05);
}

.service-hero-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:var(--service-image-overlay);
}

/* BADGE */

.service-badge{
    position:absolute;
    top:25px;
    left:25px;
    z-index:5;
    padding:16px 18px;
    border-radius:var(--service-badge-radius);
    background:var(--service-badge-bg);
    backdrop-filter:blur(var(--service-badge-blur));
    border:var(--service-badge-border);
}

.service-badge span{
    display:block;
    font-size:10px;
    letter-spacing:2px;
    opacity:.65;
    margin-bottom:3px;
}

.service-badge strong{
    font-size:24px;
    font-weight:900;
}

/* CONTENT */

.service-content{
    max-width:950px;
    margin:auto;
}

.service-block{
    margin-bottom:var(--service-block-margin);
}

.service-block h2{
    font-size:var(--service-block-title-size);
    letter-spacing:var(--service-block-title-spacing);
    margin-bottom:18px;
}

.service-block p,
.service-block li{
    color:var(--service-block-text-color);
    line-height:1.9;
}

/* GRID */

.service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--service-grid-gap);
    margin-bottom:80px;
}

.service-card{
    padding:35px;
    border-radius:var(--service-card-radius);
    background:var(--service-card-bg);
    border:var(--service-card-border);
    transition:var(--service-transition);
}

.service-card:hover{
    transform:translateY(var(--service-card-hover-lift));
    border-color:var(--service-card-hover-border);
    box-shadow:var(--service-card-hover-shadow);
}

.service-card span{
    font-size:28px;
    font-weight:900;
    color:var(--service-card-color-number);
    display:block;
    margin-bottom:12px;
}

.service-card h3{
    font-size:18px;
    font-weight:800;
    margin-bottom:10px;
}

.service-card p{
    font-size:14px;
    line-height:1.7;
}

/* CTA */

.service-cta{
    text-align:center;
    padding:var(--service-cta-padding);
    border-radius:var(--service-cta-radius);
    background:var(--service-cta-bg);
    border:var(--service-cta-border);
}

.service-cta a{
    display:inline-flex;
    padding:16px 30px;
    border-radius:50px;
    background:var(--service-cta-btn-bg);
    color:var(--service-cta-btn-text);
    font-weight:700;
    transition:var(--service-transition);
}

.service-cta a:hover{
    transform:translateY(-5px);
    box-shadow:var(--service-cta-btn-hover-shadow);
}

/* RESPONSIVE */

@media(max-width:991px){
    .service-hero{
        grid-template-columns:1fr;
    }

    .service-grid{
        grid-template-columns:1fr;
    }

    .service-hero-image{
        height:420px;
        max-width:100%;
        margin:auto;
    }
}

@media(max-width:768px){
    .service-page{
        padding:140px 0 80px;
    }

    .service-hero-content h1{
        font-size:42px;
    }

    .service-hero-image{
        height:300px;
    }

    .service-cta{
        padding:40px 25px;
    }
}