:root{
/* =========================
   COLORS (ELECTRIC SYSTEM FIX)
========================= */

/* =========================
   SIGNATURE SECTION
========================= */

--signature-bg:var(--exp-bg);

--signature-accent:#9fd8b0;

--signature-accent-light:#bfe9cc;



/* text */

--signature-white:rgba(235,240,235,0.86);

--signature-text-muted:rgba(235,240,235,0.62);

--signature-text-light:rgba(235,240,235,0.42);



/* glow / borders */

--signature-accent-glow:rgba(159,216,176,0.08);

--signature-accent-grid:rgba(159,216,176,0.03);

--signature-border:rgba(159,216,176,0.14);

--signature-border-light:rgba(159,216,176,0.20);

--signature-border-frame:rgba(159,216,176,0.26);



/* shadow */

--signature-shadow-main:
0 28px 80px rgba(0,0,0,0.65),
inset 0 0 0 1px rgba(255,255,255,0.03),
inset 0 0 0 1px rgba(159,216,176,0.10);



/* =========================
   SIZES (unchanged layout)
========================= */

--signature-section-padding:80px;

--signature-mobile-padding:100px;

--signature-container-width:min(92%,1400px);

--signature-grid-gap:60px;

--signature-preview-height:460px;

--signature-preview-height-desktop:520px;

--signature-preview-radius:28px;

--signature-frame-radius:22px;

--signature-image-radius:24px;

--signature-item-padding:22px 0;

--signature-item-padding-desktop:20px 0;

--signature-service-gap:28px;

--signature-mobile-image-height:240px;



/* =========================
   TYPOGRAPHY
========================= */

--signature-number-size:13px;

--signature-text-size:14px;

--signature-title-size:clamp(34px,3vw,56px);

--signature-mobile-title-size:30px;

--signature-small-number-size:12px;

--signature-title-spacing:-2px;

--signature-title-line:0.95;

--signature-text-line:1.6;



/* =========================
   ANIMATION
========================= */

--signature-transition:.35s ease;

--signature-transition-image:.5s ease;

--signature-transition-preview:.6s ease;
}




.signature-services{

    position:relative;
    min-height:100vh;
    padding:var(--signature-section-padding) 0;

    background:var(--signature-bg);

    color:var(--signature-white);

    display:flex;
    align-items:center;

    overflow:hidden;
}

.signature-services::before{

    content:"";
    position:absolute;
    inset:0;

    background:
    linear-gradient(
    90deg,
    transparent 0%,
    var(--signature-accent-grid) 50%,
    transparent 100%
    );

    opacity:.7;

    transform:skewY(-6deg);

    pointer-events:none;
}

/* WRAPPER */

.services-container{

    width:var(--signature-container-width);

    margin:auto;

    display:grid;

    grid-template-columns:1fr .8fr;

    gap:var(--signature-grid-gap);

    align-items:center;
}

/* LIST */

.services-list{

    display:flex;
    flex-direction:column;
}

.service-item{

    display:flex;

    gap:var(--signature-service-gap);

    padding:var(--signature-item-padding);

    border-bottom:1px solid var(--signature-border);

    cursor:pointer;

    transition:var(--signature-transition);

    position:relative;
}

.service-item:hover{

    transform:translateX(6px);
}

.service-item::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0%;

    height:1px;

    background:
    linear-gradient(
    90deg,
    var(--signature-accent),
    transparent
    );

    transition:.5s ease;
}

.service-item:hover::after{

    width:60%;
}

.service-item.active::before{

    content:"";

    position:absolute;

    left:-12px;
    top:10px;
    bottom:10px;

    width:2px;

    background:var(--signature-accent);

    border-radius:4px;

    animation:glowPulse 1.8s infinite;
}

@keyframes glowPulse{

0%,100%{
opacity:.5;
}

50%{
opacity:1;
}

}

/* NUMBER */

.service-number{

    font-size:var(--signature-number-size);

    color:var(--signature-text-light);

    min-width:40px;

    padding-top:6px;
}

.service-item.active .service-number{

    color:var(--signature-accent-light);
}

/* TITLE */

.service-content h2{

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

    font-weight:900;

    letter-spacing:var(--signature-title-spacing);

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

    margin-bottom:10px;

    transition:.3s ease;
}

.service-item:hover h2{

    transform:translateX(2px);
}

/* TEXT */

.service-content p{

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

    line-height:var(--signature-text-line);

    color:var(--signature-text-muted);
}

/* IMAGE */

.services-preview{

    position:relative;

    height:var(--signature-preview-height);

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:var(--signature-preview-radius);

    overflow:hidden;

    background:var(--signature-preview-bg);

    box-shadow:var(--signature-shadow-main);
}

.services-preview::before{

    content:"";

    position:absolute;

    inset:14px;

    border-radius:var(--signature-frame-radius);

    border:1px solid var(--signature-border-frame);

    pointer-events:none;
}

.services-preview::after{

    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
    to bottom,
    transparent 40%,
    rgba(0,0,0,.85) 100%
    );

    pointer-events:none;
}

.preview-image{

    position:absolute;

    width:90%;
    height:90%;

    opacity:0;

    transform:scale(1.05);

    transition:var(--signature-transition-preview);
}

.preview-image.active{

    opacity:1;

    transform:scale(1);
}

.preview-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:var(--signature-image-radius);

    filter:
    brightness(.78)
    contrast(1.08);

    transition:var(--signature-transition-image);
}

.preview-image.active img{

    transform:scale(1.02);
}

/* MOBILE IMAGE */

.inline-mobile-img{

display:none;
margin-top:15px;
}

.service-item.active .inline-mobile-img{

display:none;
}

.inline-mobile-img img{

width:100%;
height:var(--signature-mobile-image-height);

object-fit:cover;

border-radius:20px;

display:block;
}

/* DESKTOP */

@media(min-width:769px){

.services-preview{

height:var(--signature-preview-height-desktop);
}

.service-item{

padding:var(--signature-item-padding-desktop);
}

}

/* MOBILE */

@media(max-width:768px){

.signature-services{

padding:var(--signature-mobile-padding) 0;
}

.services-container{

display:flex;
flex-direction:column;
}

.service-item.active .inline-mobile-img{

display:block;
}

.services-preview{

display:none!important;
}

.service-item:hover{

transform:none;
}

}

/* SMALL MOBILE */

@media(max-width:480px){

.service-content h2{

font-size:var(--signature-mobile-title-size);
}

.service-number{

font-size:var(--signature-small-number-size);
}

}