/* WayCare AutoCare Hero Exact */

.wcahe-hero,
.wcahe-hero *{
    box-sizing:border-box;
    text-shadow:none !important;
}

.wcahe-hero{
    --wcahe-bg:none;
    --wcahe-fade-color:#ffffff;
    --wcahe-fade-stop:55%;
    --wcahe-navy:#122C4A;
    --wcahe-teal:#0E9F97;
    --wcahe-muted:#334155;
    --wcahe-border:#E2E8F0;
    position:relative;
    width:100%;
    min-height:650px;
    overflow:hidden;
    background:#fff;
    font-family:Poppins,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    padding:18px 36px 28px;
    isolation:isolate;
}

.wcahe-image-layer{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:72%;
    background-image:var(--wcahe-bg);
    background-size:cover;
    background-position:center center;
    z-index:0;
    transform:scale(1.002);
}

.wcahe-image-layer::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.22)),
        radial-gradient(circle at 74% 18%, rgba(255,255,255,.35), transparent 26%);
    pointer-events:none;
}

.wcahe-fade-layer{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(90deg,
            var(--wcahe-fade-color) 0%,
            rgba(255,255,255,.98) 22%,
            rgba(255,255,255,.82) 39%,
            rgba(255,255,255,.28) var(--wcahe-fade-stop),
            rgba(255,255,255,0) 72%
        );
    pointer-events:none;
}

.wcahe-shell{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1600px;
    margin:0 auto;
    min-height:inherit;
    display:flex;
    flex-direction:column;
}

/* NAV */
.wcahe-nav{
    min-height:82px;
    display:grid;
    grid-template-columns:minmax(220px, .75fr) 1fr auto;
    align-items:center;
    gap:28px;
    padding:0 24px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(226,232,240,.9);
    border-radius:20px;
    box-shadow:0 20px 56px rgba(15,23,42,.08);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.wcahe-logo{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
    text-decoration:none !important;
}

.wcahe-logo img{
    width:auto;
    max-width:230px;
    height:48px;
    object-fit:contain;
    display:block;
}

.wcahe-logo-mark{
    width:54px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:linear-gradient(135deg,#5BE3B8,#2ABFB7,#122C4A);
    color:#fff;
    font-weight:900;
    font-size:28px;
    line-height:1;
}

.wcahe-logo-text{
    display:block;
    color:var(--wcahe-navy);
    font-size:30px;
    line-height:1;
    font-weight:900;
    letter-spacing:.01em;
}

.wcahe-logo-subtitle{
    display:block;
    margin-top:4px;
    color:var(--wcahe-teal);
    font-size:11px;
    line-height:1;
    font-weight:900;
    letter-spacing:.28em;
}

.wcahe-menu{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(20px,3vw,48px);
}

.wcahe-nav-link{
    color:#0F172A;
    font-size:15px;
    line-height:1;
    font-weight:850;
    text-decoration:none !important;
    position:relative;
    transition:color .22s ease, transform .22s ease;
}

.wcahe-nav-link::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-10px;
    height:2px;
    background:var(--wcahe-teal);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .22s ease;
}

.wcahe-nav-link:hover{
    color:var(--wcahe-teal);
    transform:translateY(-1px);
}

.wcahe-nav-link:hover::after{
    transform:scaleX(1);
}

.wcahe-nav-button{
    min-height:54px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 28px;
    background:var(--wcahe-teal);
    color:#fff !important;
    border-radius:7px;
    font-size:15px;
    font-weight:900;
    text-decoration:none !important;
    box-shadow:0 16px 38px rgba(14,159,151,.28);
    transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
    white-space:nowrap;
}

.wcahe-nav-button:hover{
    filter:saturate(1.08);
    box-shadow:0 22px 50px rgba(14,159,151,.34);
}

.wcahe-mobile-menu-button{
    display:none;
    width:52px;
    height:52px;
    border:0;
    border-radius:16px;
    background:var(--wcahe-teal);
    box-shadow:0 16px 34px rgba(14,159,151,.22);
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
}

.wcahe-mobile-menu-button span{
    width:24px;
    height:3px;
    border-radius:999px;
    background:#fff;
    display:block;
}

/* MAIN */
.wcahe-main{
    position:relative;
    flex:1;
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(260px, .78fr);
    align-items:center;
    padding:70px 0 52px;
}

.wcahe-copy{
    max-width:650px;
    padding-left:8px;
}

.wcahe-eyebrow{
    color:var(--wcahe-teal);
    font-family:"Geist Mono",monospace;
    font-size:14px;
    line-height:1;
    font-weight:850;
    letter-spacing:.18em;
    text-transform:uppercase;
    margin-bottom:28px;
}

.wcahe-heading{
    margin:0;
    color:var(--wcahe-navy);
    font-family:Fraunces,Georgia,serif;
    font-size:clamp(58px,5.85vw,98px);
    font-weight:800;
    line-height:.94;
    letter-spacing:-.055em;
}

.wcahe-description{
    max-width:560px;
    margin:30px 0 0;
    color:var(--wcahe-muted);
    font-size:clamp(17px,1.45vw,24px);
    line-height:1.55;
    font-weight:550;
    letter-spacing:.01em;
}

.wcahe-buttons{
    display:flex;
    align-items:center;
    gap:30px;
    margin-top:46px;
}

.wcahe-button{
    min-height:62px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 34px;
    border-radius:7px;
    font-size:16px;
    line-height:1;
    font-weight:900;
    text-decoration:none !important;
    transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
    position:relative;
    overflow:hidden;
    white-space:nowrap;
}

.wcahe-button::before,
.wcahe-nav-button::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.26) 38%, transparent 68%);
    transform:translateX(-130%);
    transition:transform .65s ease;
}

.wcahe-button:hover::before,
.wcahe-nav-button:hover::before{
    transform:translateX(130%);
}

.wcahe-primary{
    color:#fff !important;
    background:var(--wcahe-teal);
    border:1px solid var(--wcahe-teal);
    box-shadow:0 16px 38px rgba(14,159,151,.25);
}

.wcahe-primary:hover{
    box-shadow:0 22px 50px rgba(14,159,151,.32);
}

.wcahe-secondary{
    color:var(--wcahe-teal) !important;
    background:rgba(255,255,255,.86);
    border:2px solid rgba(14,159,151,.35);
    box-shadow:0 10px 26px rgba(15,23,42,.04);
}

.wcahe-secondary:hover{
    background:#fff;
    border-color:var(--wcahe-teal);
    box-shadow:0 16px 38px rgba(15,23,42,.09);
}

/* FLOATING CARDS */
.wcahe-float{
    position:absolute;
    right:0;
    width:172px;
    min-height:138px;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(226,232,240,.9);
    border-radius:14px;
    padding:25px 22px;
    box-shadow:0 22px 60px rgba(15,23,42,.16);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    animation:wcaheFloat 5.4s ease-in-out infinite;
}

.wcahe-float small{
    display:block;
    color:var(--wcahe-muted);
    font-size:15px;
    font-weight:700;
    line-height:1.2;
}

.wcahe-float strong{
    display:block;
    margin-top:12px;
    color:var(--wcahe-navy);
    font-size:38px;
    line-height:1.08;
    font-weight:900;
    letter-spacing:-.035em;
}

.wcahe-float-price{
    top:130px;
}

.wcahe-float-price strong{
    color:var(--wcahe-teal);
    font-size:54px;
}

.wcahe-float-time{
    top:310px;
    animation-delay:.9s;
}

.wcahe-float-icon{
    display:block;
    color:var(--wcahe-teal);
    font-size:34px;
    line-height:1;
    margin-bottom:14px;
}

@keyframes wcaheFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-8px)}
}

/* PILLS */
.wcahe-pill-shell{
    width:min(920px,100%);
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    background:rgba(255,255,255,.92);
    border:1px solid rgba(14,159,151,.18);
    border-radius:8px;
    box-shadow:0 14px 38px rgba(15,23,42,.06);
    overflow:hidden;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.wcahe-pill{
    min-height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:var(--wcahe-muted);
    font-size:14px;
    font-weight:800;
    border-right:1px solid rgba(226,232,240,.92);
    text-align:center;
    padding:0 14px;
}

.wcahe-pill:last-child{
    border-right:0;
}

.wcahe-pill-icon{
    color:var(--wcahe-teal);
    font-size:20px;
    line-height:1;
}

/* TABLET */
@media (max-width:1100px){
    .wcahe-hero{
        padding:16px 18px 26px;
    }

    .wcahe-nav{
        grid-template-columns:minmax(180px,1fr) auto auto;
    }

    .wcahe-menu{
        display:none;
    }

    .wcahe-mobile-menu-button{
        display:flex;
    }

    .wcahe-main{
        grid-template-columns:1fr;
        padding-top:62px;
    }

    .wcahe-image-layer{
        width:100%;
        opacity:.58;
    }

    .wcahe-fade-layer{
        background:
            linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.88) 48%, rgba(255,255,255,.20) 100%),
            linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.78));
    }

    .wcahe-float{
        right:22px;
    }

    .wcahe-pill-shell{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .wcahe-pill:nth-child(2){
        border-right:0;
    }

    .wcahe-pill:nth-child(1),
    .wcahe-pill:nth-child(2){
        border-bottom:1px solid rgba(226,232,240,.92);
    }
}

/* MOBILE */
@media (max-width:767px){
    .wcahe-hero{
        min-height:auto !important;
        padding:14px 12px 18px;
        background:#fff;
    }

    .wcahe-image-layer{
        top:96px;
        left:12px;
        right:12px;
        bottom:auto;
        width:auto;
        height:330px;
        opacity:1;
        border-radius:28px;
        overflow:hidden;
        background-position:center center;
    }

    .wcahe-image-layer::after{
        background:
            linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.72)),
            linear-gradient(90deg, rgba(255,255,255,.65), rgba(255,255,255,.02));
    }

    .wcahe-fade-layer{
        background:
            linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.52) 230px, #fff 425px, #fff 100%);
    }

    .wcahe-nav{
        min-height:72px;
        grid-template-columns:1fr auto;
        padding:0 14px;
        border-radius:18px;
        gap:12px;
        position:relative;
        z-index:5;
    }

    .wcahe-logo img{
        height:42px;
        max-width:190px;
    }

    .wcahe-logo-text{
        font-size:24px;
    }

    .wcahe-logo-subtitle{
        font-size:9px;
    }

    .wcahe-nav-button{
        display:none;
    }

    .wcahe-mobile-menu-button{
        display:flex;
        width:54px;
        height:54px;
        border-radius:18px;
    }

    .wcahe-main{
        display:block;
        padding:370px 0 0;
    }

    .wcahe-copy{
        max-width:100%;
        padding:0 8px;
        position:relative;
        z-index:2;
    }

    .wcahe-eyebrow{
        font-size:11px;
        margin-bottom:14px;
        letter-spacing:.16em;
    }

    .wcahe-heading{
        font-size:clamp(42px,11.5vw,58px);
        line-height:.98;
        letter-spacing:-.05em;
    }

    .wcahe-description{
        margin-top:18px;
        font-size:15px;
        line-height:1.5;
        max-width:100%;
    }

    .wcahe-buttons{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        margin-top:24px;
    }

    .wcahe-button{
        width:100%;
        min-height:54px;
        font-size:14px;
        padding:0 18px;
    }

    .wcahe-float{
        width:112px;
        min-height:88px;
        padding:13px 12px;
        border-radius:16px;
        right:24px;
        z-index:3;
        animation:none;
    }

    .wcahe-float small{
        font-size:10.5px;
    }

    .wcahe-float strong{
        font-size:23px;
        margin-top:7px;
    }

    .wcahe-float-price{
        top:120px;
    }

    .wcahe-float-price strong{
        font-size:33px;
    }

    .wcahe-float-time{
        top:224px;
    }

    .wcahe-float-icon{
        font-size:21px;
        margin-bottom:6px;
    }

    .wcahe-pill-shell{
        width:100%;
        grid-template-columns:repeat(2,minmax(0,1fr));
        margin-top:22px;
        border-radius:18px;
    }

    .wcahe-pill{
        min-height:54px;
        flex-direction:column;
        gap:3px;
        font-size:11px;
        padding:8px 6px;
    }

    .wcahe-pill-icon{
        font-size:17px;
    }
}

/* SMALL PHONES */
@media (max-width:390px){
    .wcahe-hero{
        padding-left:10px;
        padding-right:10px;
    }

    .wcahe-image-layer{
        left:10px;
        right:10px;
        height:310px;
    }

    .wcahe-main{
        padding-top:350px;
    }

    .wcahe-heading{
        font-size:39px;
    }

    .wcahe-float{
        right:18px;
    }

    .wcahe-float-price{
        top:116px;
    }

    .wcahe-float-time{
        top:216px;
    }
}


/* v1.1 — match first mockup fade, remove nav by default, clean mobile */
.wcahe-hero{
    background:#fff !important;
}

/* Cleaner first-mockup fade: white content area, soft center fade, image remains clear on right */
.wcahe-image-layer{
    width:74% !important;
    opacity:1 !important;
}

.wcahe-image-layer::after{
    background:
        linear-gradient(90deg,
            rgba(255,255,255,.18) 0%,
            rgba(255,255,255,.08) 30%,
            rgba(255,255,255,0) 58%
        ) !important;
}

.wcahe-fade-layer{
    --wcahe-fade-stop:58%;
    background:
        linear-gradient(90deg,
            var(--wcahe-fade-color) 0%,
            rgba(255,255,255,1) 22%,
            rgba(255,255,255,.94) 34%,
            rgba(255,255,255,.72) 45%,
            rgba(255,255,255,.26) 55%,
            rgba(255,255,255,0) 68%
        ) !important;
}

/* When nav is hidden, keep spacing like the reference instead of a huge empty top gap */
.wcahe-shell > .wcahe-main:first-child,
.wcahe-shell > .wcahe-main{
    padding-top:clamp(70px,7vw,120px);
}

.wcahe-float-time{
    width:210px !important;
}

.wcahe-float-time strong{
    white-space:nowrap !important;
    font-size:36px !important;
    line-height:1 !important;
}

.wcahe-float-time br{
    display:none !important;
}

.wcahe-float-price{
    width:190px !important;
}

.wcahe-float-price strong{
    white-space:nowrap;
}

/* smoother premium button animation */
.wcahe-button,
.wcahe-nav-button{
    will-change:transform, box-shadow, filter;
}

.wcahe-button:hover,
.wcahe-nav-button:hover{
    filter:saturate(1.08) brightness(1.02);
}

/* Mobile: no image, no cards. Clean conversion-first hero. */
@media (max-width:767px){
    .wcahe-hero{
        min-height:auto !important;
        padding:34px 16px 34px !important;
        background:
            radial-gradient(circle at 90% 0%, rgba(31,199,182,.14), transparent 34%),
            linear-gradient(180deg,#ffffff 0%, #F8FAFC 100%) !important;
    }

    .wcahe-image-layer,
    .wcahe-fade-layer,
    .wcahe-float{
        display:none !important;
    }

    .wcahe-main{
        display:block !important;
        padding:0 !important;
    }

    .wcahe-copy{
        padding:0 !important;
        max-width:100% !important;
    }

    .wcahe-eyebrow{
        font-size:11px !important;
        margin-bottom:16px !important;
    }

    .wcahe-heading{
        font-size:clamp(42px,12vw,56px) !important;
        line-height:.98 !important;
        max-width:100% !important;
    }

    .wcahe-description{
        max-width:100% !important;
        margin-top:18px !important;
        font-size:15.5px !important;
        line-height:1.55 !important;
    }

    .wcahe-buttons{
        margin-top:26px !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:11px !important;
    }

    .wcahe-button{
        min-height:56px !important;
        width:100% !important;
        border-radius:16px !important;
    }

    .wcahe-pill-shell{
        margin-top:22px !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        border-radius:20px !important;
        background:#fff !important;
    }
}

@media (max-width:390px){
    .wcahe-hero{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .wcahe-heading{
        font-size:39px !important;
    }
}