/* =========================
SERVICE PAGE
========================= */

.service-page{
background:#0b0b0b;
color:rgb(220, 219, 219);
padding:170px 0 120px;
position:relative;
overflow:hidden;
}

.service-page::before{
content:"";
position:absolute;
inset:0;

background:
radial-gradient(
circle at 80% 20%,
rgba(255,120,0,.08),
transparent 50%
);

pointer-events:none;
}


/* =========================
HERO
========================= */

.service-hero{

display:grid;

grid-template-columns:
1fr
1fr;

gap:70px;

align-items:center;

margin-bottom:90px;

}

.service-hero-content{

max-width:620px;

}

.service-label{

display:inline-flex;

padding:10px 14px;

border-radius:50px;

background:rgba(255,120,0,.08);

border:1px solid rgba(255,120,0,.15);

font-size:11px;
font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:#ff8c38;

margin-bottom:24px;

}


/* HERO TITLE */

.service-hero-content h1{

font-size:clamp(34px,4.2vw,58px);

line-height:1.02;

font-weight:900;

letter-spacing:-2px;

margin-bottom:22px;

}

.service-lead{

font-size:15px;

line-height:1.9;

color:rgba(255,255,255,.72);

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:14px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.06);

font-size:13px;

transition:.35s ease;

}

.service-hero-features div:hover{

transform:translateY(-4px);

border-color:rgba(255,120,0,.3);

}


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

.service-hero-image{

position:relative;

height:500px; /* menší */

max-width:500px;

width:100%;

margin-left:auto;

border-radius:28px;

overflow:hidden;

box-shadow:
0 30px 70px rgba(0,0,0,.45);

}

.service-hero-image img{

width:100%;
height:100%;

object-fit:cover;

filter:
brightness(.82)
contrast(1.05);

transition:.7s;

}

.service-hero-image:hover img{

transform:scale(1.05);

}

.service-hero-image::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
180deg,
transparent 40%,
rgba(0,0,0,.5)
);

}


/* EST */

.service-badge{

position:absolute;

top:25px;
left:25px;

z-index:5;

padding:16px 18px;

border-radius:16px;

background:rgba(15,15,15,.85);

backdrop-filter:blur(14px);

border:1px solid rgba(255,255,255,.06);

}

.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:75px;

}

.service-block h2{

font-size:clamp(24px,2vw,30px);

margin-bottom:18px;

letter-spacing:-1px;

line-height:1.15;

}

.service-block p{

font-size:15px;

line-height:1.9;

color:rgba(255,255,255,.72);

margin-bottom:20px;

}

.service-block ul{

padding-left:18px;

}

.service-block li{

margin-bottom:14px;

line-height:1.8;

color:rgba(255,255,255,.72);

}


/* =========================
CARDS
========================= */

.service-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:25px;

margin-bottom:80px;

}

.service-card{

padding:35px;

border-radius:24px;

background:

linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(255,255,255,.015)
);

border:
1px solid rgba(255,255,255,.06);

transition:.4s;

}

.service-card:hover{

transform:translateY(-8px);

border-color:rgba(255,120,0,.25);

box-shadow:
0 20px 40px rgba(255,120,0,.05);

}

.service-card span{

font-size:28px;

font-weight:900;

display:block;

margin-bottom:12px;

color:#ff8c38;

}

.service-card h3{

font-size:18px;

font-weight:800;

margin-bottom:10px;

}

.service-card p{

font-size:14px;

line-height:1.7;

color:rgba(255,255,255,.68);

}


/* =========================
CTA
========================= */

.service-cta{

text-align:center;

padding:70px;

border-radius:30px;

background:

linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(255,255,255,.01)
);

border:
1px solid rgba(255,255,255,.08);

}

.service-cta h2{

font-size:clamp(28px,3vw,40px);

margin-bottom:14px;

letter-spacing:-1px;

}

.service-cta p{

font-size:15px;

color:rgba(255,255,255,.7);

margin-bottom:28px;

}

.service-cta a{

display:inline-flex;

padding:16px 30px;

border-radius:50px;

background:#ff7a00;

color:#fff;

font-weight:700;

transition:.35s;

}

.service-cta a:hover{

transform:translateY(-5px);

box-shadow:
0 15px 35px rgba(255,120,0,.25);

}


/* =========================
TABLET
========================= */

@media(max-width:991px){

.service-hero{

grid-template-columns:1fr;

gap:45px;

}

.service-grid{

grid-template-columns:1fr;

}

.service-hero-image{

height:420px;

max-width:100%;

margin:auto;

}

}


/* =========================
MOBILE
========================= */

@media(max-width:768px){

.service-page{

padding:140px 0 80px;

}

.service-hero-content h1{

font-size:42px;

}

.service-hero-image{

height:300px;

border-radius:22px;

}

.service-cta{

padding:40px 25px;

}

.service-block{

margin-bottom:55px;

}

}