

/* ===== Extracted from catalogue.html — inline style block 1 ===== */
/* =========================================================
           AR CABLES — PROFESSIONAL CATALOGUE PAGE
           ========================================================= */

        :root{
            --ar-orange:#ff5a1f;
            --ar-orange-2:#ff784a;
            --ar-navy:#091426;
            --ar-navy-2:#10213b;
            --ar-ink:#111827;
            --ar-text:#536174;
            --ar-muted:#718096;
            --ar-line:#e5eaf0;
            --ar-soft:#f6f8fb;
            --ar-white:#fff;
            --ar-shadow:0 12px 35px rgba(15,23,42,.08);
            --ar-shadow-lg:0 25px 65px rgba(15,23,42,.14);
        }

        html{
            scroll-behavior:smooth;
            overflow-x:hidden;
        }

        body{
            margin:0;
            padding-top:76px !important;
            overflow-x:hidden;
            background:#f7f9fc;
            color:var(--ar-ink);
        }

        /* =========================
           HEADER
           ========================= */

        .header{
            position:fixed !important;
            top:0 !important;
            left:0 !important;
            right:0 !important;
            width:100% !important;
            height:76px !important;
            min-height:76px !important;
            z-index:99999 !important;
            background:rgba(7,13,25,.96) !important;
            border-bottom:1px solid rgba(255,255,255,.08) !important;
            box-shadow:0 8px 28px rgba(0,0,0,.17) !important;
            backdrop-filter:blur(18px);
            -webkit-backdrop-filter:blur(18px);
        }

        .header .container{
            width:min(94%,1320px) !important;
            height:76px !important;
            min-height:76px !important;
            margin:auto !important;
            padding:0 !important;

            display:grid !important;
            grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr) !important;
            align-items:center !important;
            gap:20px !important;
        }

        .header .logo{
            justify-self:start !important;
        }

        .header .logo img{
            width:62px !important;
            height:62px !important;
            object-fit:contain !important;
            display:block !important;
        }

        .header .navbar{
            justify-self:center !important;
        }

        .header .navbar ul{
            display:flex !important;
            align-items:center !important;
            gap:3px !important;
            margin:0 !important;
            padding:0 !important;
        }

        .header .navbar li{
            margin:0 !important;
            padding:0 !important;
        }

        .header .navbar a{
            display:flex !important;
            align-items:center !important;
            justify-content:center !important;
            min-height:40px !important;
            padding:8px 13px !important;
            border-radius:10px !important;
            color:#e8edf5 !important;
            font-size:12px !important;
            font-weight:600 !important;
            transition:.22s ease !important;
        }

        .header .navbar a:hover,
        .header .navbar a.active{
            color:#fff !important;
            background:rgba(255,90,31,.13) !important;
        }

        .header .navbar a::after{
            display:none !important;
        }

        .header .quote-btn{
            justify-self:end !important;
            display:inline-flex !important;
            align-items:center !important;
            justify-content:center !important;
            width:auto !important;
            min-width:100px !important;
            height:44px !important;
            min-height:44px !important;
            padding:0 17px !important;
            border-radius:11px !important;
            background:linear-gradient(135deg,var(--ar-orange),var(--ar-orange-2)) !important;
            color:#fff !important;
            font-size:11px !important;
            font-weight:700 !important;
            white-space:nowrap !important;
            box-shadow:0 9px 23px rgba(255,90,31,.20) !important;
        }

        .header .quote-btn:hover{
            transform:translateY(-2px) !important;
            box-shadow:0 14px 30px rgba(255,90,31,.30) !important;
        }

        .mobile-menu-btn{
            display:none !important;
        }

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

        .catalogue-hero{
            position:relative;
            min-height:480px;
            display:flex;
            align-items:center;
            overflow:hidden;
            padding:85px 0 !important;

            background:
                radial-gradient(circle at 78% 28%,rgba(255,90,31,.18),transparent 28%),
                linear-gradient(135deg,#07101f,#12243f) !important;
            color:#fff;
        }

        .catalogue-hero::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(90deg,rgba(3,8,18,.35),transparent),
                radial-gradient(circle at 85% 70%,rgba(255,255,255,.045),transparent 25%);
            pointer-events:none;
        }

        .catalogue-hero::after{
            content:"";
            position:absolute;
            width:360px;
            height:360px;
            right:-160px;
            top:-150px;
            border:1px solid rgba(255,255,255,.08);
            border-radius:50%;
            box-shadow:
                0 0 0 45px rgba(255,255,255,.025),
                0 0 0 90px rgba(255,255,255,.018);
        }

        .catalogue-hero .container{
            position:relative;
            z-index:2;
            max-width:900px !important;
        }

        .catalogue-subtitle{
            display:inline-flex;
            align-items:center;
            padding:8px 14px;
            border:1px solid rgba(255,255,255,.14);
            border-radius:999px;
            background:rgba(255,255,255,.065);
            color:#ff9875;
            font-size:10px;
            font-weight:800;
            letter-spacing:1.5px;
            backdrop-filter:blur(10px);
        }

        .catalogue-hero h1{
            max-width:760px;
            margin:18px 0 16px !important;
            color:#fff !important;
            font-size:clamp(38px,5vw,64px) !important;
            line-height:1.08 !important;
            letter-spacing:-1.5px !important;
        }

        .catalogue-hero p{
            max-width:700px;
            margin:0 0 28px !important;
            color:rgba(255,255,255,.78) !important;
            font-size:15px !important;
            line-height:1.85 !important;
        }

        .catalogue-hero .btn{
            min-height:49px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:0 23px !important;
            border-radius:11px !important;
            background:var(--ar-orange) !important;
            color:#fff !important;
            box-shadow:0 11px 28px rgba(255,90,31,.24);
        }

        .catalogue-hero .btn:hover{
            background:#ff6d38 !important;
            transform:translateY(-3px);
        }

        /* =========================
           FEATURES
           ========================= */

        .catalogue-features{
            padding:90px 0 !important;
            background:#fff !important;
        }

        .catalogue-features .section-heading{
            max-width:720px;
            margin:0 auto 42px !important;
            text-align:center;
        }

        .section-subtitle{
            display:inline-flex;
            padding:7px 13px;
            border:1px solid rgba(255,90,31,.14);
            border-radius:999px;
            background:rgba(255,90,31,.065);
            color:var(--ar-orange) !important;
            font-size:10px !important;
            font-weight:800 !important;
            letter-spacing:1.4px;
        }

        .section-title{
            margin:14px 0 12px !important;
            color:var(--ar-ink) !important;
            font-size:clamp(30px,4vw,44px) !important;
            line-height:1.15 !important;
            letter-spacing:-.8px;
        }

        .section-description{
            margin:0;
            color:var(--ar-muted) !important;
            font-size:14px !important;
            line-height:1.8 !important;
        }

        .feature-grid{
            max-width:1120px;
            margin:auto;
            display:grid !important;
            grid-template-columns:repeat(4,minmax(0,1fr)) !important;
            gap:18px !important;
        }

        .feature-box{
            position:relative;
            min-height:210px;
            padding:28px 22px !important;
            border:1px solid var(--ar-line) !important;
            border-radius:18px !important;
            background:#fff !important;
            box-shadow:var(--ar-shadow) !important;
            overflow:hidden;
            transition:.3s cubic-bezier(.2,.75,.2,1) !important;
        }

        .feature-box::after{
            content:"";
            position:absolute;
            width:110px;
            height:110px;
            right:-60px;
            bottom:-60px;
            border-radius:50%;
            background:rgba(255,90,31,.045);
        }

        .feature-box:hover{
            transform:translateY(-7px) !important;
            border-color:rgba(255,90,31,.25) !important;
            box-shadow:var(--ar-shadow-lg) !important;
        }

        .feature-icon{
            width:58px !important;
            height:58px !important;
            display:flex !important;
            align-items:center !important;
            justify-content:center !important;
            margin-bottom:19px;
            border-radius:16px !important;
            background:linear-gradient(135deg,var(--ar-orange),var(--ar-orange-2)) !important;
            color:#fff !important;
            font-size:24px !important;
            box-shadow:0 10px 22px rgba(255,90,31,.18);
        }

        .feature-box h3{
            margin:0 0 8px !important;
            color:var(--ar-ink) !important;
            font-size:15px !important;
        }

        .feature-box p{
            margin:0 !important;
            color:var(--ar-muted) !important;
            font-size:11px !important;
            line-height:1.7 !important;
        }

        /* =========================
           PDF PREVIEW
           ========================= */

        .pdf-preview{
            padding:95px 0 !important;
            background:linear-gradient(180deg,#f7f9fc,#fff) !important;
        }

        .pdf-preview .section-heading{
            max-width:760px;
            margin:0 auto 38px !important;
            text-align:center;
        }

        .pdf-box{
            position:relative;
            width:min(100%,1000px);
            height:650px;
            margin:0 auto;
            padding:8px;
            border:1px solid var(--ar-line);
            border-radius:20px;
            background:#fff;
            box-shadow:var(--ar-shadow-lg);
            overflow:hidden;
        }

        .pdf-box::before{
            content:"AR CABLES • PRODUCT CATALOGUE";
            position:absolute;
            top:17px;
            left:22px;
            z-index:2;
            padding:5px 9px;
            border-radius:999px;
            background:rgba(9,20,38,.88);
            color:#fff;
            font-size:8px;
            font-weight:700;
            letter-spacing:1px;
            pointer-events:none;
        }

        .pdf-box iframe{
            width:100%;
            height:100%;
            display:block;
            border:0;
            border-radius:14px;
            background:#eef2f6;
        }

        .pdf-buttons{
            display:flex;
            justify-content:center;
            align-items:center;
            gap:10px;
            margin-top:24px;
        }

        .pdf-buttons .btn{
            min-height:47px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:0 20px !important;
            border-radius:11px !important;
        }

        .pdf-buttons .btn-outline{
            color:var(--ar-ink) !important;
            border:1px solid #dce2e9 !important;
            background:#fff !important;
        }

        .pdf-buttons .btn-outline:hover{
            color:#fff !important;
            border-color:var(--ar-orange) !important;
            background:var(--ar-orange) !important;
        }

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

        .catalogue-download{
            position:relative;
            padding:80px 0 !important;
            overflow:hidden;
            background:
                radial-gradient(circle at 85% 20%,rgba(255,90,31,.15),transparent 28%),
                linear-gradient(135deg,#081323,#132541) !important;
            text-align:center;
            color:#fff;
        }

        .catalogue-download::before{
            content:"";
            position:absolute;
            width:300px;
            height:300px;
            left:-180px;
            bottom:-180px;
            border-radius:50%;
            border:1px solid rgba(255,255,255,.07);
        }

        .catalogue-download .container{
            position:relative;
            z-index:2;
        }

        .catalogue-download h2{
            margin:0 0 12px !important;
            color:#fff !important;
            font-size:clamp(28px,4vw,42px) !important;
            letter-spacing:-.8px;
        }

        .catalogue-download p{
            max-width:650px;
            margin:0 auto 25px !important;
            color:#b9c6d6 !important;
            font-size:13px !important;
            line-height:1.8 !important;
        }

        .catalogue-download .btn{
            min-height:48px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:0 23px !important;
            border-radius:11px !important;
            background:var(--ar-orange) !important;
            color:#fff !important;
            box-shadow:0 10px 25px rgba(255,90,31,.20);
        }

        /* =========================
           FOOTER
           ========================= */

        .footer{
            padding:65px 0 0 !important;
            background:#07101f !important;
            border-top:1px solid rgba(255,255,255,.07);
        }

        .footer-container{
            width:min(92%,1180px) !important;
            display:grid !important;
            grid-template-columns:1.3fr .8fr 1fr !important;
            gap:45px !important;
        }

        .footer-box h2{
            color:#fff !important;
        }

        .footer-box h2 span{
            color:#ff7650 !important;
        }

        .footer-box h3{
            color:#fff !important;
        }

        .footer-box p,
        .footer-box li a{
            color:#94a3b8 !important;
            font-size:12px !important;
        }

        .footer-box li a:hover{
            color:#ff7650 !important;
        }

        .footer-bottom{
            margin-top:45px !important;
            border-top:1px solid rgba(255,255,255,.07) !important;
            color:#718096 !important;
        }

        /* =========================
           WHATSAPP
           ========================= */

        .whatsapp-float{
            position:fixed !important;
            right:22px !important;
            bottom:22px !important;
            z-index:99990 !important;
            width:58px !important;
            height:58px !important;
            padding:7px !important;
            border-radius:50% !important;
            background:#25d366 !important;
            box-shadow:0 12px 30px rgba(37,211,102,.28) !important;
            transition:.25s ease !important;
        }

        .whatsapp-float:hover{
            transform:translateY(-4px) scale(1.05) !important;
        }

        .whatsapp-float img{
            width:100% !important;
            height:100% !important;
            object-fit:contain !important;
        }

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

        @media(max-width:760px){

            body{
                padding-top:68px !important;
            }

            .header{
                height:68px !important;
                min-height:68px !important;
            }

            .header .container{
                width:calc(100% - 14px) !important;
                height:68px !important;
                min-height:68px !important;
                grid-template-columns:minmax(0,1fr) 43px auto !important;
                gap:6px !important;
            }

            .header .logo img{
                width:56px !important;
                height:56px !important;
            }

            .header .navbar{
                position:absolute !important;
                top:calc(100% + 8px) !important;
                left:7px !important;
                right:7px !important;
                width:auto !important;
                display:block !important;
                padding:8px !important;
                border:1px solid rgba(255,255,255,.09) !important;
                border-radius:16px !important;
                background:rgba(7,13,25,.985) !important;
                box-shadow:0 22px 55px rgba(0,0,0,.35) !important;
                opacity:0 !important;
                visibility:hidden !important;
                pointer-events:none !important;
                transform:translateY(-8px) !important;
                transition:.22s ease !important;
            }

            .header .navbar.mobile-open{
                opacity:1 !important;
                visibility:visible !important;
                pointer-events:auto !important;
                transform:translateY(0) !important;
            }

            .header .navbar ul{
                display:grid !important;
                grid-template-columns:1fr !important;
                gap:2px !important;
            }

            .header .navbar a{
                width:100% !important;
                min-height:43px !important;
                justify-content:flex-start !important;
                padding:10px 13px !important;
            }

            .mobile-menu-btn{
                display:flex !important;
                visibility:visible !important;
                opacity:1 !important;
                align-items:center !important;
                justify-content:center !important;
                flex-direction:column !important;
                gap:5px !important;
                width:43px !important;
                height:43px !important;
                min-width:43px !important;
                min-height:43px !important;
                margin:0 !important;
                padding:0 !important;
                border:1px solid rgba(255,255,255,.14) !important;
                border-radius:11px !important;
                background:rgba(255,255,255,.07) !important;
                cursor:pointer !important;
                z-index:100000 !important;
            }

            .mobile-menu-btn span{
                display:block !important;
                width:20px !important;
                height:2px !important;
                min-height:2px !important;
                margin:0 !important;
                background:#fff !important;
                border-radius:999px !important;
                transition:.22s ease !important;
            }

            .mobile-menu-btn.is-open span:nth-child(1){
                transform:translateY(7px) rotate(45deg) !important;
            }

            .mobile-menu-btn.is-open span:nth-child(2){
                opacity:0 !important;
            }

            .mobile-menu-btn.is-open span:nth-child(3){
                transform:translateY(-7px) rotate(-45deg) !important;
            }

            .header .quote-btn{
                min-width:86px !important;
                width:auto !important;
                height:43px !important;
                min-height:43px !important;
                padding:0 11px !important;
                font-size:10px !important;
            }

            /* Hero */
            .catalogue-hero{
                min-height:430px;
                padding:65px 0 !important;
            }

            .catalogue-hero h1{
                font-size:38px !important;
                line-height:1.1 !important;
            }

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

            .catalogue-hero .btn{
                width:100%;
                max-width:250px;
            }

            /* Features */
            .catalogue-features,
            .pdf-preview{
                padding:65px 0 !important;
            }

            .feature-grid{
                grid-template-columns:1fr 1fr !important;
                gap:10px !important;
            }

            .feature-box{
                min-height:190px;
                padding:21px 15px !important;
                border-radius:15px !important;
            }

            .feature-icon{
                width:50px !important;
                height:50px !important;
                margin-bottom:14px;
                font-size:21px !important;
            }

            .feature-box h3{
                font-size:12px !important;
            }

            .feature-box p{
                font-size:9px !important;
                line-height:1.6 !important;
            }

            .section-title{
                font-size:30px !important;
            }

            .section-description{
                font-size:12px !important;
            }

            /* PDF */
            .pdf-box{
                height:520px;
                padding:5px;
                border-radius:16px;
            }

            .pdf-box::before{
                top:12px;
                left:14px;
                font-size:7px;
            }

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

            .pdf-buttons .btn{
                width:100%;
                padding:0 8px !important;
                font-size:10px !important;
            }

            /* CTA */
            .catalogue-download{
                padding:62px 0 !important;
            }

            .catalogue-download h2{
                font-size:30px !important;
            }

            .catalogue-download p{
                font-size:12px !important;
            }

            .catalogue-download .btn{
                width:100%;
                max-width:260px;
            }

            /* Footer */
            .footer{
                padding-top:52px !important;
            }

            .footer-container{
                grid-template-columns:1fr !important;
                gap:28px !important;
            }

            .footer-bottom{
                margin-top:35px !important;
            }

            .whatsapp-float{
                width:52px !important;
                height:52px !important;
                right:14px !important;
                bottom:14px !important;
            }
        }

        @media(max-width:420px){

            body{
                padding-top:64px !important;
            }

            .header,
            .header .container{
                height:64px !important;
                min-height:64px !important;
            }

            .header .container{
                width:calc(100% - 10px) !important;
                grid-template-columns:minmax(0,1fr) 40px auto !important;
                gap:5px !important;
            }

            .header .logo img{
                width:52px !important;
                height:52px !important;
            }

            .mobile-menu-btn{
                width:40px !important;
                height:40px !important;
                min-width:40px !important;
                min-height:40px !important;
            }

            .header .quote-btn{
                min-width:79px !important;
                height:40px !important;
                min-height:40px !important;
                padding:0 9px !important;
                font-size:9px !important;
            }

            .catalogue-hero{
                min-height:400px;
                padding:52px 0 !important;
            }

            .catalogue-hero h1{
                font-size:31px !important;
            }

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

            .feature-box{
                min-height:auto;
            }

            .pdf-box{
                height:430px;
            }

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

