/* =========================================================
   AR CABLES HERO VIDEO
   ========================================================= */

.hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    z-index:1;
    pointer-events:none;
    background:#080a0d;
}

.hero-video + .hero-slider{
    position:relative;
    z-index:1;
}

.hero::before{
    z-index:2 !important;
    background:transparent !important;
    animation:none !important;
    transform:none !important;
    pointer-events:none;
}

.hero::after{
    z-index:3 !important;
    background:linear-gradient(
        90deg,
        rgba(0,0,0,.78),
        rgba(0,0,0,.45),
        rgba(0,0,0,.68)
    ) !important;
    pointer-events:none;
}

.hero .container{
    z-index:5 !important;
}

.hero-particles{
    z-index:4 !important;
}

.hero-visual{
    z-index:4 !important;
}

@media(max-width:768px){
    .hero-video{
        object-position:center center;
    }

    .hero::after{
        background:linear-gradient(
            180deg,
            rgba(0,0,0,.68),
            rgba(0,0,0,.55),
            rgba(0,0,0,.78)
        ) !important;
    }
}

/*==================================================
HOME PAGE
PART 1 - PREMIUM HERO
==================================================*/

.hero{

    position:relative;
    min-height:100vh;

    display:flex;
    align-items:center;

    overflow:hidden;

    padding:120px 0 80px;

    background:#111;

}

/*=========================
BACKGROUND
=========================*/

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:url("../images/banner1.jpg") center center/cover no-repeat;

    animation:heroSlider 18s infinite;

    transform:scale(1.08);

    z-index:1;

}

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.88),
        rgba(0,0,0,.60),
        rgba(0,0,0,.78)
    );

    z-index:2;

}



33%,63%{

background:url("../images/banner2.jpg") center/cover no-repeat;

}

66%,100%{

background:url("../images/banner3.jpg") center/cover no-repeat;

}

}

/*=========================
CONTENT
=========================*/

.hero .container{

    position:relative;

    z-index:5;

}

.hero-content{

    max-width:760px;

    color:#fff;

}

.section-subtitle{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(255,90,31,.18);

    color:#ff7b45;

    border:1px solid rgba(255,90,31,.35);

    font-size:15px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:25px;

}

.hero-content h1{

    font-size:68px;

    line-height:1.15;

    font-weight:800;

    margin-bottom:25px;

}

.hero-content p{

    font-size:20px;

    color:#ddd;

    line-height:1.9;

    margin-bottom:40px;

    max-width:650px;

}

/*=========================
BUTTONS
=========================*/

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.hero-buttons .btn{

    padding:16px 34px;

    border-radius:50px;

    transition:.4s;

}

.hero-buttons .btn:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 35px rgba(255,90,31,.35);

}

.btn-outline{

    background:transparent;

    border:2px solid #fff;

    color:#fff;

}

.btn-outline:hover{

    background:#fff;

    color:#111;

}
/*==================================================
PART 2
FLOATING EFFECTS + HERO ANIMATION
==================================================*/

/*=========================
FLOATING PARTICLES
=========================*/

.hero-particles{

    position:absolute;

    inset:0;

    z-index:3;

    overflow:hidden;

    pointer-events:none;

}

.hero-particles span{

    position:absolute;

    width:12px;

    height:12px;

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

    border-radius:50%;

    animation:particleMove 12s linear infinite;

}

.hero-particles span:nth-child(1){left:10%;animation-delay:0s;}
.hero-particles span:nth-child(2){left:25%;animation-delay:2s;}
.hero-particles span:nth-child(3){left:45%;animation-delay:4s;}
.hero-particles span:nth-child(4){left:70%;animation-delay:6s;}
.hero-particles span:nth-child(5){left:90%;animation-delay:8s;}

@keyframes particleMove{

0%{

transform:translateY(100vh) scale(.5);

opacity:0;

}

20%{

opacity:1;

}

80%{

opacity:1;

}

100%{

transform:translateY(-120px) scale(1.6);

opacity:0;

}

}

/*=========================
ORANGE GLOW
=========================*/

.hero-glow{

    position:absolute;

    width:450px;

    height:450px;

    background:radial-gradient(circle,
    rgba(255,90,31,.35),
    transparent 70%);

    filter:blur(50px);

    top:-120px;

    right:-100px;

    z-index:2;

}

.hero-glow-two{

    position:absolute;

    width:350px;

    height:350px;

    background:radial-gradient(circle,
    rgba(255,90,31,.25),
    transparent 70%);

    filter:blur(40px);

    bottom:-100px;

    left:-80px;

    z-index:2;

}

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

.hero-content{

    animation:fadeUp 1s ease;

}

.hero-content h1{

    animation:fadeLeft 1.2s ease;

}

.hero-content p{

    animation:fadeRight 1.4s ease;

}

.hero-buttons{

    animation:fadeUp 1.6s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(50px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeLeft{

0%{

opacity:0;

transform:translateX(-60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

0%{

opacity:0;

transform:translateX(60px);

}

}

/*=========================
SCROLL INDICATOR
=========================*/

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    z-index:5;

}

.scroll-indicator span{

    display:block;

    width:28px;

    height:48px;

    border:2px solid #fff;

    border-radius:30px;

    position:relative;

}

.scroll-indicator span::before{

    content:"";

    position:absolute;

    width:6px;

    height:10px;

    background:#fff;

    border-radius:20px;

    left:50%;

    top:8px;

    transform:translateX(-50%);

    animation:scrollMouse 2s infinite;

}

@keyframes scrollMouse{

0%{

opacity:0;

top:8px;

}

50%{

opacity:1;

}

100%{

opacity:0;

top:25px;

}

}
/*=========================
PRELOADER FIX
=========================*/

#preloader{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100vh;

    background:#111;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}


.loader-box{

    display:flex;

    justify-content:center;

    align-items:center;

}


.loader-logo{

    width:160px;

    height:auto;

    animation:none;

}



@keyframes logoPulse{

    0%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.08);

    }


    100%{

        transform:scale(1);

    }

}



/*=========================
PRELOADER HIDE
=========================*/


.preloader-hide{

    opacity:0;

    visibility:hidden;

    transition:.5s ease;

}
/* ======================================
TRUST BAR PREMIUM DESIGN
====================================== */

.trust-bar{

    padding:50px 0;
    background:#f8fafc;

}


.trust-bar .container{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;

}



.trust-item{

    background:#ffffff;
    padding:35px 20px;
    text-align:center;
    border-radius:15px;
    box-shadow:0 15px 35px rgba(0,0,0,0.08);
    transition:0.4s;
    position:relative;
    overflow:hidden;

}



.trust-item::before{

    content:"";
    position:absolute;
    width:0;
    height:0;
    background:#0066ff;
    border-radius:50%;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    transition:0.5s;
    z-index:0;

}



.trust-item:hover::before{

    width:300px;
    height:300px;

}



.trust-item h3,
.trust-item p{

    position:relative;
    z-index:1;
    transition:0.4s;

}



.trust-item h3{

    font-size:38px;
    color:#0066ff;
    margin-bottom:10px;

}



.trust-item p{

    color:#555;
    font-size:16px;

}



.trust-item:hover h3,
.trust-item:hover p{

    color:white;

}



.trust-item:hover{

    transform:translateY(-12px);

}





/* ======================================
INDUSTRIES SECTION
====================================== */


.industries{

    padding:90px 0;
    background:white;

}



.industry-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    margin-top:45px;

}



.industry-card{

    background:#fff;
    padding:35px 25px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,0.08);
    transition:0.4s;
    border-bottom:4px solid transparent;

}



.industry-card:first-letter{

    font-size:35px;

}



.industry-card:hover{

    transform:translateY(-15px);
    border-bottom:4px solid #0066ff;
    box-shadow:0 20px 50px rgba(0,102,255,0.18);

}



.industry-card h3{

    margin:20px 0 10px;
    font-size:22px;
    color:#111;

}



.industry-card p{

    color:#666;
    line-height:1.6;

}





/* ======================================
FAQ PREMIUM STYLE
====================================== */


.faq{

    padding:80px 0;
    background:#f8fafc;

}



.faq details{

    background:white;
    margin:15px 0;
    padding:22px 25px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.07);
    cursor:pointer;
    transition:0.3s;

}



.faq details:hover{

    transform:translateX(8px);

}



.faq summary{

    font-size:18px;
    font-weight:600;
    color:#111;
    list-style:none;

}



.faq summary::after{

    content:"+";
    float:right;
    font-size:25px;
    color:#0066ff;

}



.faq details[open] summary::after{

    content:"−";

}



.faq p{

    margin-top:15px;
    color:#666;
    line-height:1.7;

}





/* ======================================
SMOOTH SECTION ANIMATION
====================================== */


.trust-item,
.industry-card,
.faq details{

    animation:premiumFade 0.8s ease both;

}



@keyframes premiumFade{


from{

    opacity:0;
    transform:translateY(40px);

}


to{

    opacity:1;
    transform:translateY(0);

}


}





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


@media(max-width:900px){


.trust-bar .container{

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

}



.industry-grid{

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

}


}



@media(max-width:600px){


.trust-bar .container,
.industry-grid{

    grid-template-columns:1fr;

}



.trust-item h3{

    font-size:32px;

}


}
/* REMOVE TOP EMPTY SPACE ABOVE HERO */

body{
    margin:0;
    padding:0;
}


.hero{
    margin-top:0;
    padding-top:0;
}


.header + .hero{
    margin-top:0;
}


#preloader{
    margin:0;
}
/* =========================================
   HERO MOBILE POSITIONING
========================================= */

@media(max-width:768px){
    .hero{
        height:auto !important;
        min-height:calc(100svh - 68px) !important;
        overflow:hidden !important;
    }

    .hero-content{
        position:relative;
        z-index:5;
    }

    .hero .container{
        position:relative;
        z-index:5;
    }

    .about{
        position:relative;
        z-index:10;
    }
}

/* =========================================
   PRODUCT CARD IMAGE — PROFESSIONAL FIT
========================================= */

.product-image,
.product-card-image{
    width:100% !important;
    height:230px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background:#fff !important;
    border-radius:16px !important;
}

.product-image img,
.product-card-image img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    display:block !important;
    padding:14px 20px !important;
    margin:0 !important;
    transform:none !important;
    transition:transform .4s ease, filter .4s ease !important;
}

.product-image:hover img,
.product-card-image:hover img{
    transform:scale(1.035) !important;
}

@media(min-width:768px){
    .product-image,
    .product-card-image{
        height:245px !important;
    }
}

@media(max-width:600px){
    .product-image,
    .product-card-image{
        height:210px !important;
        border-radius:14px !important;
    }

    .product-image img,
    .product-card-image img{
        padding:12px 18px !important;
    }
}


/* ==================================================
   HERO — PREMIUM WITHOUT BANNER
   ================================================== */

.hero{
    min-height:calc(100svh - 72px) !important;
    padding:88px 0 72px !important;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(255,90,31,.12),
            transparent 27%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(255,90,31,.06),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #080a0d 0%,
            #101318 55%,
            #090b0f 100%
        ) !important;
}

.hero .container{
    width:min(1180px,calc(100% - 40px));
}

.hero-content{
    max-width:720px !important;
    padding:60px 0 70px !important;
}

.hero-content h1{
    max-width:760px;
    font-size:clamp(44px,5.6vw,72px) !important;
    line-height:1.04 !important;
    letter-spacing:-2.6px;
    margin:20px 0 18px !important;
}

.hero-content p{
    max-width:590px !important;
    font-size:14px !important;
    line-height:1.85 !important;
    color:rgba(255,255,255,.72) !important;
    margin-bottom:27px !important;
}

.hero-buttons{
    gap:10px !important;
}

.hero-buttons .btn{
    min-height:45px;
    padding:11px 20px !important;
    border-radius:10px !important;
    font-size:11px;
}

.hero-buttons .btn:not(.btn-outline){
    background:linear-gradient(135deg,#ff7138,#f04f15) !important;
    box-shadow:0 12px 28px rgba(255,90,31,.22);
}

.hero-buttons .btn-outline{
    background:rgba(255,255,255,.04) !important;
    border:1px solid rgba(255,255,255,.20) !important;
}

.hero-buttons .btn:hover{
    transform:translateY(-3px);
}

.hero-trust{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:18px;
}

.hero-trust-item{
    padding:8px 10px !important;
    border:1px solid rgba(255,255,255,.09);
    border-radius:9px;
    background:rgba(255,255,255,.035);
    backdrop-filter:blur(10px);
    font-size:9px;
}


/* ==================================================
   CLEAN SECTION POLISH
   ================================================== */

.trust-bar,
.industries,
.faq{
    position:relative;
}

.trust-item,
.industry-card,
.faq details{
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.trust-item:hover,
.industry-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(15,23,42,.09);
}

.faq details:hover{
    border-color:rgba(255,90,31,.25);
}


/* =========================================================
   AR CABLES — FINAL HOME POLISH
   ========================================================= */

/* Never load/show a banner in the hero */
.hero{
    background:
        radial-gradient(circle at 82% 18%, rgba(255,90,31,.12), transparent 27%),
        radial-gradient(circle at 12% 82%, rgba(255,90,31,.06), transparent 30%),
        linear-gradient(135deg,#080a0d 0%,#101318 55%,#090b0f 100%) !important;
}

.hero::before{
    background:
        radial-gradient(circle at 78% 24%, rgba(255,90,31,.13), transparent 27%),
        radial-gradient(circle at 18% 78%, rgba(255,90,31,.06), transparent 30%) !important;
    animation:none !important;
    transform:none !important;
}

.hero::after{
    background:linear-gradient(135deg,rgba(5,7,10,.10),rgba(5,7,10,.35)) !important;
}

.hero-slider,
.hero-slider .slide{
    display:none !important;
    background-image:none !important;
}

/* =========================================================
   NAVIGATION — SAME INTERACTION FOR HOME AND OTHER LINKS
   No permanent red line.
   ========================================================= */

.header{
    position:relative;
    z-index:1000;
}

.header .navbar ul{
    display:flex;
    align-items:center;
    gap:5px;
}

.header .navbar ul li{
    list-style:none;
}

.header .navbar ul li a{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 14px;
    border-radius:10px;

    color:rgba(255,255,255,.78) !important;
    background:transparent !important;
    text-decoration:none !important;

    font-size:13px;
    font-weight:600;
    line-height:1;

    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

/* Kill the old permanent underline completely */
.header .navbar ul li a::before,
.header .navbar ul li a::after,
.header .navbar ul li.active > a::before,
.header .navbar ul li.active > a::after,
.header .navbar ul li a.active::before,
.header .navbar ul li a.active::after{
    content:none !important;
    display:none !important;
}

/* Home now gets the SAME hover/focus/press effect */
.header .navbar ul li a:hover,
.header .navbar ul li a:focus-visible,
.header .navbar ul li a:active{
    color:#fff !important;
    background:linear-gradient(
        135deg,
        rgba(255,90,31,.18),
        rgba(255,90,31,.07)
    ) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,90,31,.22),
        0 7px 20px rgba(0,0,0,.12);

    transform:translateY(-1px);
}

/* Current Home page: subtle state only — NO LINE */
.header .navbar ul li a.active{
    color:#fff !important;
    background:rgba(255,255,255,.045) !important;
}

/* When Home is hovered/tapped it becomes identical to others */
.header .navbar ul li a.active:hover,
.header .navbar ul li a.active:focus-visible,
.header .navbar ul li a.active:active{
    color:#fff !important;
    background:linear-gradient(
        135deg,
        rgba(255,90,31,.18),
        rgba(255,90,31,.07)
    ) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,90,31,.22),
        0 7px 20px rgba(0,0,0,.12);

    transform:translateY(-1px);
}

/* Quote button */
.header .quote-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 20px;
    border-radius:10px;

    background:linear-gradient(135deg,#ff7138,#f04f15) !important;
    color:#fff !important;

    font-size:12px;
    font-weight:700;
    text-decoration:none;

    box-shadow:0 9px 24px rgba(255,90,31,.20);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}

.header .quote-btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.05);
    box-shadow:0 13px 30px rgba(255,90,31,.30);
}

.header .quote-btn:active{
    transform:translateY(0) scale(.98);
}

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

.hero{
    min-height:calc(100svh - 72px) !important;
    padding:88px 0 72px !important;
}

.hero-content h1{
    font-size:clamp(44px,5.6vw,72px) !important;
    line-height:1.04 !important;
    letter-spacing:-2.6px !important;
    margin:20px 0 18px !important;
}

/* =========================================================
   PRODUCT IMAGE — CLEAN FIT
   ========================================================= */

.product-image,
.product-card-image{
    width:100% !important;
    height:230px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background:#fff !important;
    border-radius:16px !important;
}

.product-image img,
.product-card-image img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    display:block !important;
    padding:14px 20px !important;
    margin:0 !important;
    transform:none !important;
    transition:transform .35s ease !important;
}

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

@media(max-width:768px){

    .header .navbar ul{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
    }

    .header .navbar ul li a{
        justify-content:flex-start;
        min-height:44px;
        padding:0 16px;
        border-radius:10px;
    }

    .header .navbar ul li a.active{
        background:rgba(255,255,255,.045) !important;
    }

    .header .navbar ul li a:hover,
    .header .navbar ul li a:focus-visible,
    .header .navbar ul li a:active{
        transform:none;
    }

    .hero{
        min-height:calc(100svh - 68px) !important;
        padding:0 !important;
    }

    .hero .container{
        width:calc(100% - 30px) !important;
    }

    .hero-content{
        max-width:100% !important;
        padding:56px 0 62px !important;
    }

    .hero-content h1{
        font-size:clamp(34px,9.5vw,44px) !important;
        line-height:1.06 !important;
        letter-spacing:-1.3px !important;
    }

    .hero-content p{
        font-size:12.5px !important;
        line-height:1.75 !important;
    }

    .hero-buttons{
        display:grid !important;
        grid-template-columns:1fr 1fr;
        gap:8px !important;
    }

    .hero-buttons .btn{
        width:100%;
        min-height:43px;
        padding:9px 7px !important;
        font-size:10px;
    }

    .hero-trust{
        display:grid !important;
        grid-template-columns:repeat(3,1fr);
        gap:6px !important;
    }

    .hero-trust-item{
        padding:7px 3px !important;
        font-size:7px;
        text-align:center;
    }

}

@media(max-width:430px){

    .hero-content{
        padding:48px 0 56px !important;
    }

    .hero-content h1{
        font-size:34px !important;
    }

    .hero-buttons{
        grid-template-columns:1fr !important;
    }

    .hero-trust{
        grid-template-columns:1fr !important;
    }

    .hero-trust-item{
        min-height:30px;
        font-size:8px;
    }

    .product-image,
    .product-card-image{
        height:205px !important;
    }
}
/* =========================================================
   AR CABLES — FINAL PREMIUM HEADER
   ========================================================= */

/* Header stays visible while scrolling */
.header{
    position:sticky !important;
    top:0;
    left:0;
    width:100%;
    z-index:9999;
}

/* Keep header above hero effects */
.header .navbar{
    position:relative;
    z-index:10000;
}

/* Main navigation row */
.header .navbar,
.header .navbar .container{
    width:100%;
}

.header .navbar > .container,
.header .navbar .nav-container,
.header .navbar .header-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

/* =========================================================
   LOGO — SLIGHTLY LARGER
   ========================================================= */

.header .logo,
.header .navbar-logo,
.header .brand-logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.header .logo img,
.header .navbar-logo img,
.header .brand-logo img{
    width:58px !important;
    height:auto !important;
    max-width:none !important;
    display:block;
    object-fit:contain;
}

/* If the logo itself is an image */
.header > .logo img{
    width:58px !important;
    height:auto !important;
}

/* =========================================================
   DESKTOP NAV LINKS
   ========================================================= */

.header .navbar ul{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    margin:0;
    padding:0;
}

/* Remove old permanent underline */
.header .navbar ul li a::before,
.header .navbar ul li a::after,
.header .navbar ul li.active > a::before,
.header .navbar ul li.active > a::after,
.header .navbar ul li a.active::before,
.header .navbar ul li a.active::after{
    content:none !important;
    display:none !important;
}

/* Same interaction for every navigation item */
.header .navbar ul li a:hover,
.header .navbar ul li a:focus-visible,
.header .navbar ul li a:active{
    color:#fff !important;
    background:linear-gradient(
        135deg,
        rgba(255,90,31,.18),
        rgba(255,90,31,.07)
    ) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,90,31,.22),
        0 7px 20px rgba(0,0,0,.12);

    transform:translateY(-1px);
}

/* Current page — subtle, no permanent line */
.header .navbar ul li a.active{
    color:#fff !important;
    background:rgba(255,255,255,.045) !important;
}

/* =========================================================
   GET QUOTE BUTTON
   ========================================================= */

.header .quote-btn,
.header .get-quote{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:42px;
    padding:0 20px;

    margin-left:auto;
    border:0;
    border-radius:10px;

    background:linear-gradient(
        135deg,
        #ff7138,
        #f04f15
    ) !important;

    color:#fff !important;
    font-size:12px;
    font-weight:700;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;

    box-shadow:0 9px 24px rgba(255,90,31,.20);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}

.header .quote-btn:hover,
.header .get-quote:hover{
    transform:translateY(-2px);
    filter:brightness(1.05);
    box-shadow:0 13px 30px rgba(255,90,31,.30);
}

.header .quote-btn:active,
.header .get-quote:active{
    transform:translateY(0) scale(.98);
}

/* =========================================================
   MOBILE HEADER
   Logo + Menu + Get Quote ALWAYS stay on one row
   ========================================================= */

@media(max-width:768px){

    .header{
        position:sticky !important;
        top:0;
        width:100%;
        z-index:9999;
    }

    .header .navbar > .container,
    .header .navbar .nav-container,
    .header .navbar .header-container{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        width:100% !important;
        min-height:68px;
        gap:8px !important;
        padding-left:15px;
        padding-right:15px;
    }

    /* Logo stays on the left */
    .header .logo,
    .header .navbar-logo,
    .header .brand-logo{
        flex:0 0 auto !important;
        margin:0 !important;
    }

    .header .logo img,
    .header .navbar-logo img,
    .header .brand-logo img{
        width:58px !important;
        height:auto !important;
    }

    /* Desktop navigation is hidden; hamburger remains visible */
    .header .navbar ul{
        flex-direction:column;
        align-items:stretch;
        gap:4px;
    }

    /* Hamburger / mobile menu button */
    .header .mobile-menu,
    .header .menu-toggle,
    .header .hamburger,
    .header .mobile-toggle{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        width:46px !important;
        height:46px !important;

        flex:0 0 46px !important;
        margin-left:auto !important;
    }

    /* Get Quote remains beside hamburger */
    .header .quote-btn,
    .header .get-quote{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        height:46px !important;
        min-height:46px !important;

        flex:0 0 auto !important;
        margin:0 0 0 2px !important;
        padding:0 17px !important;

        font-size:12px !important;
        white-space:nowrap !important;
    }

    /* Prevent the three controls from wrapping */
    .header .navbar > .container,
    .header .navbar .nav-container,
    .header .navbar .header-container{
        flex-wrap:nowrap !important;
    }

    /* Hero begins correctly below the sticky header */
    .hero{
        min-height:calc(100svh - 68px) !important;
    }

    .hero-content{
        max-width:100% !important;
        padding:50px 0 58px !important;
    }
}

/* =========================================================
   SMALL PHONES
   ========================================================= */

@media(max-width:480px){

    .header .navbar > .container,
    .header .navbar .nav-container,
    .header .navbar .header-container{
        min-height:64px;
        padding-left:12px;
        padding-right:12px;
        gap:6px !important;
    }

    .header .logo img,
    .header .navbar-logo img,
    .header .brand-logo img{
        width:54px !important;
    }

    .header .mobile-menu,
    .header .menu-toggle,
    .header .hamburger,
    .header .mobile-toggle{
        width:43px !important;
        height:43px !important;
        flex-basis:43px !important;
    }

    .header .quote-btn,
    .header .get-quote{
        height:43px !important;
        min-height:43px !important;
        padding:0 15px !important;
        font-size:11px !important;
    }

    .hero{
        min-height:calc(100svh - 64px) !important;
    }

    .hero-content{
        padding:45px 0 54px !important;
    }
}

/* =========================================================
   VERY SMALL PHONES — KEEP HEADER IN ONE LINE
   ========================================================= */

@media(max-width:380px){

    .header .navbar > .container,
    .header .navbar .nav-container,
    .header .navbar .header-container{
        padding-left:9px;
        padding-right:9px;
        gap:4px !important;
    }

    .header .logo img,
    .header .navbar-logo img,
    .header .brand-logo img{
        width:50px !important;
    }

    .header .mobile-menu,
    .header .menu-toggle,
    .header .hamburger,
    .header .mobile-toggle{
        width:40px !important;
        height:40px !important;
        flex-basis:40px !important;
    }

    .header .quote-btn,
    .header .get-quote{
        height:40px !important;
        min-height:40px !important;
        padding:0 11px !important;
        font-size:10px !important;
    }
}

/* =========================================================
   SAFETY — NO HORIZONTAL OVERFLOW
   ========================================================= */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

.header,
.hero{
    max-width:100%;
}

/* AR CABLES SUBTLE HERO WAVE */
.hero, .hero-section, .home-hero { position:relative; overflow:hidden; }
.hero::after, .hero-section::after, .home-hero::after {
 content:""; position:absolute; left:-5%; right:-5%; bottom:-42px; height:82px;
 background:#fff; border-radius:50% 50% 0 0 / 100% 100% 0 0;
 pointer-events:none; z-index:5;
}


/* =========================================================
   AR CABLES — FINAL PREMIUM HERO SYSTEM
   ========================================================= */

.hero{
    min-height:clamp(680px,92svh,860px);
    background:
        radial-gradient(circle at 76% 45%,rgba(255,92,30,.16),transparent 23%),
        radial-gradient(circle at 88% 78%,rgba(255,150,70,.08),transparent 24%),
        linear-gradient(115deg,#07090c 0%,#0b0e12 54%,#11151a 100%);
}

.hero-slider{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.hero-slider .slide{
    position:absolute;
    inset:0;
    background:none!important;
    transform:none!important;
}

.hero-slider::before{
    content:"";
    position:absolute;
    width:720px;
    height:720px;
    right:-250px;
    top:50%;
    transform:translateY(-50%);
    border-radius:50%;
    background:
        radial-gradient(circle,
        rgba(255,98,35,.16) 0,
        rgba(255,98,35,.055) 28%,
        transparent 68%);
}

.hero-slider::after{
    background:
        linear-gradient(90deg,
        rgba(4,6,9,.98) 0%,
        rgba(4,6,9,.82) 42%,
        rgba(4,6,9,.28) 75%,
        rgba(4,6,9,.12) 100%)!important;
}

.hero-content{
    position:relative;
    z-index:20;
    padding:90px 0 125px;
}

.hero .section-subtitle{
    border-color:rgba(255,111,58,.32);
    background:rgba(255,92,30,.08);
    color:#ffb394;
    letter-spacing:1.5px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.hero h1{
    max-width:760px;
    margin-top:24px;
    font-size:clamp(43px,6vw,78px);
    letter-spacing:-3.5px;
}

.hero h1 span{
    color:#ff6427;
    text-shadow:0 0 32px rgba(255,90,31,.12);
}

.hero p{
    max-width:625px;
    color:rgba(255,255,255,.72);
    font-size:15px;
    line-height:1.9;
}

.hero-buttons .btn{
    min-height:50px;
    border-radius:12px;
}

.hero-buttons .btn:not(.btn-outline){
    box-shadow:0 15px 36px rgba(255,90,31,.24);
}

.hero-trust{
    margin-top:36px;
}

.hero-trust-item{
    padding:10px 13px;
    border-color:rgba(255,255,255,.09);
    background:rgba(255,255,255,.035);
}

/* Premium abstract electrical visual */
.hero-visual{
    position:absolute;
    z-index:4;
    right:5%;
    top:50%;
    width:min(43vw,520px);
    aspect-ratio:1;
    transform:translateY(-50%);
    pointer-events:none;
    filter:drop-shadow(0 25px 60px rgba(0,0,0,.35));
}

.hero-ring{
    position:absolute;
    inset:10%;
    border:1px solid rgba(255,111,58,.20);
    border-radius:50%;
    transform:rotate(-18deg);
}

.hero-ring-1{
    inset:8%;
    border-width:1px;
    border-left-color:rgba(255,111,58,.72);
    border-bottom-color:rgba(255,111,58,.08);
    animation:arSpin 18s linear infinite;
}

.hero-ring-2{
    inset:19%;
    transform:rotate(42deg) scaleX(.68);
    border-color:rgba(255,180,120,.18);
    animation:arSpinReverse 13s linear infinite;
}

.hero-ring-3{
    inset:31%;
    transform:rotate(-30deg) scaleX(.52);
    border-color:rgba(255,111,58,.25);
}

.hero-core{
    position:absolute;
    left:50%;
    top:50%;
    width:112px;
    height:112px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:
        radial-gradient(circle at 35% 30%,#ffb080 0,#ff6427 18%,#d83e0c 46%,#35170d 72%,transparent 73%);
    box-shadow:
        0 0 45px rgba(255,90,31,.35),
        0 0 120px rgba(255,90,31,.14);
}

.hero-core span{
    position:absolute;
    inset:25px;
    border:1px solid rgba(255,255,255,.42);
    border-radius:50%;
    box-shadow:0 0 18px rgba(255,180,130,.3);
}

.hero-visual-label{
    position:absolute;
    right:4%;
    bottom:18%;
    padding:12px 15px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:13px;
    background:rgba(10,12,16,.62);
    backdrop-filter:blur(15px);
    box-shadow:0 16px 35px rgba(0,0,0,.22);
    text-align:left;
}

.hero-visual-label strong{
    display:block;
    color:#fff;
    font-size:10px;
    letter-spacing:1.5px;
}

.hero-visual-label small{
    display:block;
    margin-top:4px;
    color:#ff9b72;
    font-size:8px;
    letter-spacing:1px;
}

@keyframes arSpin{
    to{transform:rotate(342deg)}
}

@keyframes arSpinReverse{
    to{transform:rotate(-318deg) scaleX(.68)}
}

/* Refined wave */
.hero::after{
    content:"";
    position:absolute;
    z-index:6;
    left:-5%;
    bottom:-125px;
    width:110%;
    height:205px;
    background:#fff;
    border-radius:50% 50% 0 0 / 100% 100% 0 0;
    transform:rotate(-1.2deg);
    box-shadow:0 -2px 0 rgba(255,90,31,.45);
    pointer-events:none;
}

.hero::before{
    content:"";
    position:absolute;
    z-index:7;
    left:-4%;
    bottom:20px;
    width:108%;
    height:70px;
    border-top:1px solid rgba(255,116,63,.32);
    border-radius:50%;
    transform:rotate(-1.2deg);
    pointer-events:none;
}

.hero-shape{
    display:none!important;
}

@media(max-width:900px){
    .hero-visual{
        right:-13%;
        width:55vw;
        opacity:.42;
    }
}

@media(max-width:760px){
    .hero{
        min-height:760px;
        padding-top:68px;
    }

    .hero-content{
        padding:76px 0 135px;
    }

    .hero h1{
        font-size:clamp(39px,11vw,58px);
        letter-spacing:-2.3px;
    }

    .hero p{
        font-size:14px;
    }

    .hero-visual{
        right:-22%;
        top:52%;
        width:78vw;
        opacity:.25;
    }

    .hero::after{
        left:-18%;
        bottom:-72px;
        width:136%;
        height:135px;
    }

    .hero::before{
        left:-15%;
        bottom:10px;
        width:130%;
    }
}

@media(max-width:480px){
    .hero{
        min-height:720px;
    }

    .hero-content{
        padding-top:62px;
    }

    .hero-buttons{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .hero-buttons .btn{
        min-width:0;
        width:100%;
    }

    .hero-trust{
        display:grid;
        grid-template-columns:1fr;
    }

    .hero-visual{
        width:92vw;
        right:-35%;
        top:54%;
        opacity:.18;
    }
}


/* =========================================================
   AR CABLES — FINAL MOBILE HOME POLISH
   Scoped only to the home hero. No desktop structure changed.
   ========================================================= */
@media (max-width:760px){
    .hero{
        min-height:calc(100svh - 68px) !important;
        height:auto !important;
        padding:0 !important;
        display:flex !important;
        align-items:flex-start !important;
        overflow:hidden !important;
    }

    .hero .container{
        width:calc(100% - 32px) !important;
        max-width:520px !important;
        margin:0 auto !important;
    }

    .hero-content{
        width:100% !important;
        max-width:520px !important;
        padding:54px 0 48px !important;
        margin:0 !important;
        text-align:left !important;
    }

    .hero-content .section-subtitle{
        margin:0 0 15px !important;
        padding:8px 13px !important;
        font-size:9px !important;
        letter-spacing:1.3px !important;
        line-height:1 !important;
    }

    .hero-content h1{
        max-width:100% !important;
        margin:0 0 17px !important;
        font-size:clamp(35px,10.2vw,45px) !important;
        line-height:1.06 !important;
        letter-spacing:-1.4px !important;
    }

    .hero-content h1 span{
        display:block !important;
        margin-top:3px !important;
    }

    .hero-content p{
        max-width:100% !important;
        margin:0 0 23px !important;
        font-size:13px !important;
        line-height:1.72 !important;
        color:rgba(255,255,255,.74) !important;
    }

    .hero-buttons{
        width:auto !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:8px !important;
        flex-wrap:nowrap !important;
        margin:0 !important;
    }

    .hero-buttons .btn{
        flex:0 0 auto !important;
        width:auto !important;
        min-width:132px !important;
        max-width:165px !important;
        min-height:42px !important;
        height:42px !important;
        padding:0 14px !important;
        border-radius:10px !important;
        font-size:10px !important;
        white-space:nowrap !important;
    }

    .hero-trust{
        width:100% !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:7px !important;
        margin-top:22px !important;
    }

    .hero-trust-item{
        width:100% !important;
        min-height:38px !important;
        padding:0 12px !important;
        border:1px solid rgba(255,255,255,.09) !important;
        border-radius:10px !important;
        background:rgba(255,255,255,.035) !important;
        gap:8px !important;
        font-size:9px !important;
    }

    .hero-trust-dot{
        width:6px !important;
        height:6px !important;
        flex-basis:6px !important;
    }

    /* Keep the mobile hero clean and text-led. */
    .hero-visual{
        display:none !important;
    }

    .hero-particles{
        opacity:.35 !important;
    }
}

@media (max-width:420px){
    .hero .container{
        width:calc(100% - 28px) !important;
    }

    .hero-content{
        padding-top:48px !important;
        padding-bottom:42px !important;
    }

    .hero-content h1{
        font-size:34px !important;
        letter-spacing:-1.2px !important;
    }

    .hero-content p{
        font-size:12.5px !important;
    }

    .hero-buttons{
        gap:7px !important;
    }

    .hero-buttons .btn{
        min-width:126px !important;
        min-height:40px !important;
        height:40px !important;
        padding:0 11px !important;
        font-size:9.5px !important;
    }
}