:root {
           
         
            --canvas: #f5f1ea;
            --canvas-bright: #fbfaf6;
            --ink: #111812;
            --ink-70: rgba(2, 2, 2, 0.7);
            --ink-48: rgba(5, 5, 5, 0.48);
            --line: rgba(0, 0, 0, 0.13);
            --moss: #E44E0A;
            --moss-deep: #B23A08;
            --lime: #FFB27A;
            --lime-soft: #FFDFC2;
            --amber: #ebae72;
            --blue: #6776d5;
            --serif: 'Plus Jakarta Sans', sans-serif;
            --sans: 'Inter', sans-serif;
            --nav-height: 82px;
            --ease-out: cubic-bezier(.16, 1, .3, 1);
            --ease-in-out: cubic-bezier(.65, 0, .35, 1);
            --section-padding: 100px;
            --radius-sm: 12px;
            --radius-md: 20px;
            --radius-lg: 28px;
            --radius-xl: 40px;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
            --shadow-md: 0 8px 32px rgba(0,0,0,0.06);
            --shadow-lg: 0 20px 60px rgba(0,0,0,0.08);
            --shadow-glow: 0 8px 40px rgba(232,93,4,0.15);
            --shadow-xl: 0 30px 80px rgba(0,0,0,0.12);
            --font-heading: 'Plus Jakarta Sans', sans-serif;
            --font-body: 'Inter', sans-serif;
        }
      
      
      /* ========== HEADER - Same bg as hero ========== */
        .site-header {
             position:fixed; z-index:1000; top:0; right:0; left:0;
            background: transparent;
            transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
            padding:0 clamp(20px, 4vw, 60px);
            /* backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%); */
            transition: all 0.3s ease;
            height: var(--nav-height);
            display: flex;
            align-items: center;
        }

        .site-header.is-scrolled {
            border-bottom: 1px solid rgba(17, 24, 18, .09);
            background: rgba(250, 249, 245, .82);
            box-shadow: 0 8px 24px rgba(29, 37, 29, .05);
            backdrop-filter: blur(16px) saturate(130%);
            -webkit-backdrop-filter: blur(16px) saturate(130%);
        }

        .site-nav {
            max-width: 1400px;
            margin: 0 auto;
            padding: 16px 60px;
            display:flex; align-items:center; width:100%;
            /* gap: 28px; */
        }

        /* LOGO - Bigger & clearer */
        .brand {
                      /* Fixed width */
            display:flex; align-items:center;
            flex: 0 0 180px;
            justify-content: flex-start;
            flex:0 0 auto;
             /* max-width:300px; */
        }
        .brand img {
            display:block;
            width:auto; height:auto;
            max-width:100%; max-height:90px;
            object-fit:contain; object-position:left center;
        }

        /* Desktop nav */
        .desktop-navigation {
            display:flex; align-items:center;
            justify-content:center; flex:1;
            gap:20px; margin-left:auto;
        }

        .nav-cluster { display:flex; align-items:center; gap:4px; }

        .nav-item { position:relative; }

        .nav-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 10px 15px;
            border: none;
            background: transparent;
            font-family: var(--font-body);
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-primary);
            cursor: pointer;
            border-radius: 10px;
            transition: all 0.3s ease;
            white-space: nowrap;
            letter-spacing: -0.01em;
        }

        .nav-link:hover,
        .nav-link:focus-visible,
        .nav-item.is-open > .nav-link { color:var(--ink); }

        .nav-link--trigger { border-radius:9px; }
        .nav-item.is-open > .nav-link--trigger { background:rgba(17,24,18,.055); }

        .nav-link__chevron {
            width:6px; height:6px;
            margin:-3px 0 0 8px;
            border-right:1.5px solid currentColor;
            border-bottom:1.5px solid currentColor;
            transform:rotate(45deg);
            transition:transform .25s var(--ease-out);
        }
        .nav-item.is-open .nav-link__chevron {
            transform:rotate(225deg) translate(-1px,-1px);
        }

        .nav-cta {
            display:inline-flex; align-items:center;
            justify-content:center; gap:10px;
            min-height:48px; padding:0 18px;
            border-radius:10px;
            color:#f8faf4; background:var(--ink);
            font-size:13px; font-weight:700;
            letter-spacing:-.02em;
            border:1px solid transparent;
            transition:transform .35s var(--ease-out), box-shadow .35s ease, color .25s ease, background .25s ease;
        }

        .nav-cta span { color:var(--lime); font-size:17px; line-height:1; }
        .nav-cta:hover {
            color:#fff; background:var(--moss-deep);
            transform:translateY(-2px);
            box-shadow:0 7px 14px rgba(178,58,8,.2);
        }

        /* MEGA MENU */
        .mega-menu {
            position:absolute;
            top:calc(100% + 16px);
            left:-25px;
            display:grid;
            width:720px;
            padding:17px;
            border:1px solid rgba(17,24,18,.1);
            border-radius:18px;
            background:rgba(252,252,249,.96);
            box-shadow:0 24px 60px rgba(31,41,31,.16);
            backdrop-filter:blur(20px);
            opacity:0; visibility:hidden;
            transform:translateY(-8px) scale(.985);
            transform-origin:top left;
            transition:opacity .27s ease, visibility .27s ease, transform .36s var(--ease-out);
            pointer-events:none;
        }

        .mega-menu::before{
    content:"";
    position:absolute;
    top:-16px;
    left:0;
    width:100%;
    height:16px;
}
        .nav-item.is-open .mega-menu {
            opacity:1; visibility:visible;
            transform:translateY(0) scale(1);
            pointer-events:auto;
        }

        .mega-menu--products { grid-template-columns:3.16fr 1.82fr 2.25fr; gap:11px; width: 820px;}
        .mega-menu--solutions { grid-template-columns:1fr 1.36fr; gap:22px; width:650px; }
        .mega-menu--services { grid-template-columns:1fr 1.36fr; gap:22px; width:650px; }

        .mega-menu__intro {
            display:flex; flex-direction:column;
            width: 300px;
            min-height:300px; padding:22px;
            border-radius:12px;
            color:#f5f5ed;
            background:linear-gradient(145deg, #7a2b0a, #3d1504 75%);
            overflow:hidden; position:relative;
        }
        .mega-menu__intro::before {
            content:''; position:absolute;
            width:180px; height:180px;
            right:-78px; bottom:-88px;
            border:1px solid rgba(255,178,122,.32);
            border-radius:50%;
            box-shadow:0 0 0 26px rgba(255,178,122,.04), 0 0 0 52px rgba(255,178,122,.025);
            pointer-events:none;
        }
        .mega-menu__intro::after {
            content:''; position:absolute;
            width:7px; height:7px;
            right:50px; bottom:72px;
            background:var(--lime);
            border-radius:50%;
            box-shadow:28px 25px 0 rgba(255,178,122,.55), -25px 38px 0 rgba(235,174,114,.8);
            pointer-events:none;
        }
        .menu-kicker {
            position:relative; z-index:1;
            color:var(--lime); font-size:10px;
            font-weight:700; letter-spacing:.13em;
            text-transform:uppercase;
        }

        .mega-menu__intro .producth2 {
            position:relative; z-index:1;
            margin:21px 0 auto;
            font-size:31px; font-weight:500;
            line-height:1.3; letter-spacing:-.02em;
        }

           .mega-menu__intro h2 {
            position:relative; z-index:1;
            margin:21px 0 auto;
            font-size:22px; font-weight:500;
            line-height:1.2; letter-spacing:-.01em;
        }

        .menu-text-link {
            position:relative; z-index:1;
            display:inline-flex; align-items:center; gap:9px;
            width:max-content;
            color:rgba(255,255,255,.9);
            font-size:12px; font-weight:600;
        }
        .menu-text-link span { color:var(--lime); font-size:16px; }

        .mega-menu__navigation {
            display:flex; flex-direction:column;
            gap:4px; padding:6px 0;
            
            width: 250px;
        }
        .mega-category {
            
            display:flex; align-items:center; gap:9px;
            width:100%; padding:11px 8px;
            border:0; border-radius:8px;
            color: black; background:transparent;
            font-size:16px; font-weight:600;
            text-align:left; cursor:pointer;
            transition:color .2s ease, background .2s ease;
        }
        .mega-category span { color:var(--ink-48); font-size:13px; font-weight:700; }
        .mega-category:hover,
        .mega-category:focus-visible,
        .mega-category.is-active { color:var(--ink); background:#f4ece5; outline:none; }
        .mega-category.is-active span { color:var(--moss); }

        .mega-menu__detail {
            position:relative; min-height:250px;
            padding:6px 0 6px 5px;
            border-left:1px solid var(--line);
        }
        .mega-subnav {
            display:flex; flex-direction:column;
            gap:4px; height:100%;
        }
        .mega-subnav[hidden] { display:none; }
        .mega-subnav__label {
            margin:7px 12px 8px;
            color:var(--ink-48); font-size:10px;
            font-weight:700; letter-spacing:.1em;
            text-transform:uppercase;
        }
        .mega-subnav a {
            display:block; padding:11px 12px;
            border-radius:8px;
            transition:background .2s ease, transform .2s ease;
        }
        .mega-subnav a:hover,
        .mega-subnav a:focus-visible { background:#f0f1ea; transform:translateX(3px); outline:none; }
        .mega-subnav strong {
            display:block; color:var(--ink);
            font-size:13px; letter-spacing:-.02em;
        }
        .mega-subnav span {
            display:block; margin-top:4px;
            color:var(--ink-70); font-size:11px; line-height:1.4;
        }

        .solution-links,
        .service-links {
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:8px; align-content:center;
        }
        .solution-links a,
        .service-links a {
            position:relative;
            display:flex; align-items:center; justify-content:space-between;
            min-height:74px; padding:16px;
            border:1px solid var(--line); border-radius:11px;
            color:var(--ink); font-size:13px; font-weight:600;
            overflow:hidden;
            transition:color .25s ease, border-color .25s ease, background .25s ease, transform .3s var(--ease-out);
        }
        .solution-links a::after,
        .service-links a::after {
            position:absolute; content:"";
            inset:auto -24px -35px auto;
            width:88px; height:88px;
            border-radius:50%;
            background:rgba(255,178,122,.55); filter:blur(4px);
            opacity:0; transform:scale(.3);
            transition:opacity .3s ease, transform .45s var(--ease-out);
        }
        .solution-links a:hover,
        .solution-links a:focus-visible,
        .service-links a:hover,
        .service-links a:focus-visible {
            border-color:rgba(228,78,10,.3);
            background:#fdefe4;
            transform:translateY(-3px);
            outline:none;
        }
        .solution-links a:hover::after,
        .solution-links a:focus-visible::after,
        .service-links a:hover::after,
        .service-links a:focus-visible::after { opacity:1; transform:scale(1); }
        .solution-links i { position:relative; z-index:1; color:var(--moss); font-size:17px; font-style:normal; }
        .service-links a { min-height:0; padding:16px; }

        /* MOBILE */
        .tablet-navigation,
        .mobile-menu-button,
        .mobile-navigation { display:none; }

        @media (max-width: 1149px) {
            .desktop-navigation { display:none; }
            .nav-cta { display:none; }
            .mobile-menu-button {
                display:flex;
                flex-direction:column;
                align-items:center; justify-content:center;
                width:44px; height:44px;
                margin-left:auto;
                gap:5px; padding:0;
                border:1px solid rgba(17,24,18,.12);
                border-radius:50%;
                background:rgba(255,255,255,.55);
                cursor:pointer;
                flex-shrink:0;
                z-index:1100;
            }
            .mobile-menu-button__bar {
                display:block;
                width:17px; height:1.5px;
                border-radius:1px;
                background:var(--ink);
                transition:transform .3s var(--ease-out), opacity .2s ease;
            }
            .mobile-menu-button.open .mobile-menu-button__bar:nth-child(1) {
                transform:translateY(6.5px) rotate(45deg);
            }
            .mobile-menu-button.open .mobile-menu-button__bar:nth-child(2) { opacity:0; }
            .mobile-menu-button.open .mobile-menu-button__bar:nth-child(3) {
                transform:translateY(-6.5px) rotate(-45deg);
            }
            .site-nav { min-height:70px; }
            .brand img { max-height:230px; max-width:230px; }
        }

        @media (max-width: 767px) {
            .site-header { padding:0 18px; }
            .site-nav { min-height:68px;padding: 16px 10px; }
            .brand img { max-height:160px; max-width:190px; }
        }



        /* Mobile navigation panel */
        .mobile-navigation {
            position:fixed; z-index:1050;
            inset:0;
            display:flex; flex-direction:column;
            min-height:100svh;
            padding:90px 20px 20px;
            color:#f8f8ef;
            background:#2b1108;
            clip-path:circle(0% at calc(100% - 42px) 42px);
            visibility:hidden;
            transition:clip-path .7s var(--ease-out), visibility 0s linear .7s;
            overflow-y:auto;
        }
        .mobile-navigation.is-open {
            clip-path:circle(155% at calc(100% - 42px) 42px);
            visibility:visible;
            transition:clip-path .7s var(--ease-out);
        }
        .mobile-navigation__close {
            position:absolute;
            top:20px; right:20px;
            display:grid;
            width:42px; height:42px;
            place-items:center; padding:0;
            border:1px solid rgba(255,255,255,.24);
            border-radius:50%;
            color:var(--lime); background:transparent;
            font-size:30px; font-weight:300;
            line-height:1; cursor:pointer;
            z-index:1;
        }
        .mobile-accordion { border-top:1px solid rgba(255,255,255,.18); }
        .mobile-accordion:last-of-type { border-bottom:1px solid rgba(255,255,255,.18); }
        .mobile-accordion summary {
            display:flex; align-items:center; justify-content:space-between;
            padding:17px 0;
            color:#fff;
            font-size:clamp(24px, 7vw, 35px);
            font-weight:500; letter-spacing:-.06em;
            list-style:none; cursor:pointer;
        }
        .mobile-accordion summary::-webkit-details-marker { display:none; }
        .mobile-accordion summary span { color:var(--lime); font-size:25px; font-weight:300; }
        .mobile-accordion[open] > summary span { transform:rotate(45deg); }
        .mobile-accordion__body {
            display:grid; gap:2px; padding:0 0 16px;
        }
        .mobile-accordion__body a {
            padding:8px 0;
            color:rgba(255,255,255,.76);
            font-size:14px; font-weight:600;
            letter-spacing:-.02em;
        }
        .mobile-navigation__secondary-links {
            display:flex; flex-wrap:wrap;
            gap:11px 22px; padding:18px 0;
        }
        .mobile-navigation__secondary-links a {
            color:rgba(255,255,255,.65);
            font-size:14px; font-weight:600;
        }
        .mobile-navigation__cta {
            display:flex; align-items:center; justify-content:space-between;
            min-height:58px; padding:0 20px;
            border-radius:10px;
            color:var(--ink); background:var(--lime);
            font-size:15px; font-weight:700;
            margin-top:auto;
        }




        
        .breadcrumb-section { padding: 98px 0 20px 40px; background: transparent; backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);}

        .breadcrumb-nav { display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--ink-60); font-weight:500; flex-wrap:wrap; }
        .breadcrumb-nav a { color:var(--ink-80); transition:color .3s ease; }
        .breadcrumb-nav a:hover { color:var(--moss); }
        .breadcrumb-nav .separator { color:var(--moss); }
        .breadcrumb-nav .current { color:var(--moss); font-weight:700; }


     
/* FOOTER SECTION */



        /* ========== FOOTER ========== */
        .footer-premium {
            background:#111812;
            color:rgba(255,255,255,.55);
            padding:60px 0 30px;
        }
        .footer-brand-name {
            /* font-family:var(--serif);
            font-size:1.5rem; font-weight:700; */
            color:#fff;
            display:flex; align-items:center; gap:0.5rem;
            margin-bottom:1rem;
            background-color: rgb(255, 253, 253);
            width: 200px;
            height: 60px;
            border-radius: 10px;
  
            justify-content: center;
        }

        .footer-brand-name img {
            /* font-family:var(--serif);
            font-size:1.5rem; font-weight:700; */
            height: 90px;
        }
        .footer-brand-name i { color:#FFB27A; }
        .footer-desc-text {
            color:rgba(255, 255, 255, 0.847);
            font-size:0.9rem; line-height:1.7;
            max-width:300px;
        }
        .footer-heading {
            font-family:var(--serif);
            font-size:0.85rem; font-weight:700;
            color:#fff; text-transform:uppercase;
            letter-spacing:1.5px; margin-bottom:1.25rem;
        }
        .footer-links-list {
            list-style:none; padding:0; margin:0;
        }
        .footer-links-list li { margin-bottom:0.5rem; }
        .footer-links-list a {
            color:rgba(255, 255, 255, 0.793);
            text-decoration:none; font-size:0.88rem;
            transition:all .3s ease;
            display:inline-flex; align-items:center; gap:0.4rem;
        }
        .footer-links-list a:hover {
            color:#FFB27A; padding-left:4px;
        }
        .footer-social-row {
            display:flex; gap:0.75rem; margin-top:1.5rem;
        }
        .footer-social-row a {
            width:40px; height:40px;
            border-radius: 50%;
            display:flex; align-items:center; justify-content:center;
            font-size:1.1rem; transition:all .3s ease;
            text-decoration:none;
        }
        .footer-social-row a.fb { background:#1877F2; color:#fff; }
        .footer-social-row a.ig { background:linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color:#fff; }
        .footer-social-row a.yt {background-color: #FF0000; color: #FFFFFF; transition: transform 0.2s ease, background-color 0.2s ease; /* Official YouTube Red Color */font-size: 28px; text-decoration: none; transition: transform 0.2s ease-in-out, color 0.2s; }
        .footer-social-row a.li { background:#0A66C2; color:#fff; }
        .footer-social-row a:hover {
            transform:translateY(-4px);
            box-shadow:0 8px 20px rgba(0,0,0,.3);
        }
        .footer-bottom-bar {
            border-top:1px solid rgba(255,255,255,.08);
            margin-top:3rem; padding-top:1.5rem; text-align:center;
        }
        .footer-bottom-bar p {
            color:rgba(255, 255, 255, 0.886);
            font-size:0.82rem; margin:0;
        }

        /* View All Button */
        .btn-view-all {
            display:inline-flex; align-items:center; gap:8px;
            padding:14px 32px;
            background:var(--ink); color:#fff;
            border-radius:100px;
            font-weight:700; font-size:0.95rem;
            text-decoration:none;
            font-family:var(--serif);
            transition:all .3s ease;
        }
        .btn-view-all:hover {
            background:var(--moss); color:#fff;
            transform:translateY(-3px);
            box-shadow:0 10px 30px rgba(228,78,10,.3);
        }                                                                    

        @media (max-width: 768px) {
            :root { --section-padding:60px; }
            .cta-form-card { padding:2rem 1.25rem; }
            .trust-header-block { flex-direction:column; align-items:flex-start; gap:1.5rem; }
        }