:root{

/* =========================
   SERVICES SECTION
========================= */

--services-padding:150px 0;

/* background = zem + mech + jemné světlo (NE čistý dark, NE zelená plocha) */
--services-bg:
linear-gradient(
180deg,
#08120c 0%,
#0b1510 45%,
#0a0f0c 100%
);



/* header */

--services-head-width:700px;

--services-head-margin:0 auto 70px;

--services-title-size:clamp(34px,5vw,46px);

--services-title-weight:900;

--services-title-line:1.05;

--services-title-margin:12px;

--services-text-margin:14px;

/* text = přírodní světlo, ne šedá ani zelená */
--services-text-color:rgba(230,238,232,0.74);



/* grid */

--services-grid-columns:repeat(4,1fr);

--services-grid-gap:28px;

--services-grid-tablet:repeat(2,1fr);

--services-grid-mobile:1fr;



/* =========================
   CARD (hlavní vizuální identita)
========================= */

--service-card-bg:
linear-gradient(
180deg,
rgba(255,255,255,0.03) 0%,
rgba(8,18,12,0.55) 100%
);

--service-card-color:rgba(245,245,240,0.88);

--service-card-border:1px solid rgba(150,190,160,0.16);

--service-card-radius:18px;

--service-card-transition:.4s ease;

--service-card-transform:translateY(0);

--service-card-hover-transform:translateY(-12px);

/* hover = světlo v lese, ne neon green */
--service-card-hover-border:rgba(190,220,200,0.28);

--service-card-hover-shadow:
0 35px 90px rgba(0,0,0,0.55);



/* =========================
   IMAGE
========================= */

--service-img-height:230px;

--service-img-transition:.7s ease;

--service-img-hover-scale:scale(1.06);



/* =========================
   BODY
========================= */

--service-body-padding:22px;

--service-title-size:20px;

--service-title-margin:12px;

--service-text-size:14px;

/* text = “papírové světlo”, ne šedý UI */
--service-text-color:rgba(235,240,235,0.72);

--service-text-height:44px;



/* =========================
   LINK
========================= */

--service-link-margin:14px;

--service-link-size:12px;

--service-link-weight:800;

--service-link-spacing:1px;

/* default neutral */
--service-link-color:rgba(255,255,255,0.78);

/* hover = živý list, ale ne dominance */
--service-link-hover-color:#9fd8b0;

--service-link-transition:.3s ease;

--service-link-hover:translateX(6px); 

}



/* =====================================================
   SERVICES MODERN GRID
===================================================== */

.services-modern{

    padding:var(--services-padding);

    background:var(--services-bg);

    position:relative;

    overflow:hidden;
}

/* ambient glow */

.services-modern::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;
}

/* header */

.services-head{

    text-align:center;

    max-width:var(--services-head-width);

    margin:var(--services-head-margin);
}

.services-head h2{

    font-size:var(--services-title-size);

    font-weight:var(--services-title-weight);

    text-transform:uppercase;

    line-height:var(--services-title-line);

    margin-top:var(--services-title-margin);
}

.services-head p{

    margin-top:var(--services-text-margin);

    color:var(--services-text-color);
}

/* grid */

.services-grid{

    display:grid;

    grid-template-columns:var(--services-grid-columns);

    gap:var(--services-grid-gap);
}

/* card */

.service-card{

    text-decoration:none;

    color:var(--service-card-color);

    background:var(--service-card-bg);

    border:var(--service-card-border);

    border-radius:var(--service-card-radius);

    overflow:hidden;

    transition:var(--service-card-transition);

    transform:var(--service-card-transform);

    position:relative;
}

/* hover */

.service-card:hover{

    transform:var(--service-card-hover-transform);

    border-color:var(--service-card-hover-border);

    box-shadow:var(--service-card-hover-shadow);
}

/* image */

.service-img{

    position:relative;

    height:var(--service-img-height);

    overflow:hidden;
}

.service-img img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:var(--service-img-transition);
}

.service-card:hover .service-img img{

    transform:var(--service-img-hover-scale);
}

/* content */

.service-body{

    padding:var(--service-body-padding);
}

.service-body h3{

    font-size:var(--service-title-size);

    margin-bottom:var(--service-title-margin);
}

.service-body p{

    font-size:var(--service-text-size);

    color:var(--service-text-color);

    min-height:var(--service-text-height);
}

/* link */

.service-link{

    display:inline-block;

    margin-top:var(--service-link-margin);

    font-size:var(--service-link-size);

    font-weight:var(--service-link-weight);

    letter-spacing:var(--service-link-spacing);

    color:var(--service-link-color);

    transition:var(--service-link-transition);
}

.service-card:hover .service-link{

    transform:var(--service-link-hover);
}

/* responsive */

@media(max-width:1100px){

.services-grid{

grid-template-columns:var(--services-grid-tablet);

}

}

@media(max-width:600px){

.services-grid{

grid-template-columns:var(--services-grid-mobile);

}

}