:root{

/* =========================
   CTA SECTION (GARDENER CLEAN)
========================= */

/* spacing */
--cta-padding:150px 0;
--cta-mobile-padding:110px 0;



/* background */
--cta-bg:linear-gradient(
180deg,
#0a120d 0%,
#0b1510 50%,
#0a110c 100%
);



/* text */
--cta-text:rgba(245,245,245,0.88);
--cta-text-soft:rgba(235,240,235,0.70);



/* accent system (green gardener) */
--cta-accent:#9fd8b0;
--cta-accent-soft:#bfe9cc;
--cta-accent-mid:#7fc99a;



/* grid effects */
--cta-grid-white:rgba(255,255,255,0.03);
--cta-grid-white-soft:rgba(255,255,255,0.02);



/* label */
--cta-label:rgba(159,216,176,0.70);
--cta-label-size:11px;
--cta-label-spacing:6px;



/* title */
--cta-title-size:clamp(46px,6vw,110px);
--cta-title-spacing:-4px;



/* text */
--cta-text-size:16px;



/* BUTTON – CLEAN GARDENER STYLE */
--cta-button-text:#161616;

--cta-button-bg:#6fdc8c;

--cta-button-shadow:
0 20px 50px rgba(0,0,0,0.45);

--cta-button-hover-shadow:
0 28px 70px rgba(0,0,0,0.55);

--cta-button-hover-bg:var(--cta-accent-soft);



/* SHINE */
--cta-shine:rgba(159,216,176,0.18);



/* BUTTON SIZING (NOT HERO DEPENDENT) */
--cta-button-height:62px;
--cta-button-padding:0 38px;
--cta-button-radius:999px;

--cta-button-font-size:13px;
--cta-button-spacing:2px;
  
}




/* =====================================================
   CTA — ROOFERS ORANGE PREMIUM (ANIMATED, NO HOVER)
===================================================== */

.cta-section{

    position:relative;

    padding:var(--cta-padding);

    color:var(--cta-text);

    overflow:hidden;

    text-align:center;
  background:var(--cta-bg);
    
}

.cta-section::before{

    content:"";
    position:absolute;
    inset:-20%;

    background:
    radial-gradient(circle,
    var(--cta-atmosphere),
    transparent 60%);

    animation:orangeDrift 6s ease-in-out infinite alternate;

    filter:blur(60px);

    opacity:.8;

    pointer-events:none;
}

@keyframes orangeDrift{

    0%{
        transform:translate(-2%,-2%) scale(1);
    }

    100%{
        transform:translate(2%,2%) scale(1.1);
    }
}

.cta-section::after{

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

    background:
    linear-gradient(
    90deg,
    var(--cta-grid-white) 1px,
    transparent 1px),

    linear-gradient(
    180deg,
    var(--cta-grid-white-soft) 1px,
    transparent 1px);

    background-size:90px 90px;

    opacity:.25;

    pointer-events:none;
}

/* content */

.cta-inner{

    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    align-items:center;

    animation:ctaFade .8s ease-out;
}

@keyframes ctaFade{

    from{
        opacity:0;
        transform:translateY(18px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* label */

.cta-label{

    font-size:var(--cta-label-size);

    letter-spacing:var(--cta-label-spacing);

    color:var(--cta-label);

    margin-bottom:18px;

    text-transform:uppercase;
}

/* heading */

.cta-section h2{

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

    line-height:.9;

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

    font-weight:900;

    margin-bottom:22px;

    text-transform:uppercase;

    color:var(--cta-text);

    position:relative;
}

.cta-section h2::after{

    content:"";
    position:absolute;

    left:50%;
    bottom:-14px;

    transform:translateX(-50%);

    width:65%;
    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--cta-orange),
        var(--cta-orange-soft),
        var(--cta-orange),
        transparent
    );

    background-size:200% 100%;

    animation:underlineMove 2.6s linear infinite;

    opacity:.9;
}

@keyframes underlineMove{

    0%{
        background-position:0% 50%;
    }

    100%{
        background-position:200% 50%;
    }
}

/* paragraph */

.cta-section p{

    max-width:560px;

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

    line-height:1.8;

    color:var(--cta-text-soft);

    margin-bottom:40px;
}

/* button */

.cta-button{

    position:relative;

    display:inline-flex;

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

    height:var(--cta-button-height);

    padding:var(--cta-button-padding);

    border-radius:var(--cta-button-radius);

    background:
    linear-gradient(
    135deg,
    var(--cta-button-bg));

    color:var(--cta-button-text);

    font-size:var(--cta-button-font-size);

    font-weight:900;

    letter-spacing:var(--cta-button-spacing);

    text-transform:uppercase;

    box-shadow:var(--cta-button-shadow);

    overflow:hidden;

    will-change:transform;
}

.cta-button::before{

    content:"";
    position:absolute;

    top:0;
    left:-120%;

    width:120%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        var(--cta-shine),
        transparent
    );

    transform:skewX(-20deg);

    transition:.8s ease;
}

.cta-button:hover::before{

    left:120%;
}

.cta-button:hover{

    transform:translateY(-2px);

    box-shadow:var(--cta-button-hover-shadow);

    transition:.25s ease;
}

/* mobile */

@media(max-width:768px){

    .cta-section{
        padding:var(--cta-mobile-padding);
    }

    .cta-section h2{
        letter-spacing:-2px;
    }
}