/* ============================================
           ORIENT ELECTRONICS — DEMONSTRATION WEBSITE
           Slider: Orient Ceramica Style
           Products: Haier Pakistan Style
           ============================================ */

        :root {
            --orient-blue: #034EA2;
            --orient-blue-dark: #02397A;
            --orient-blue-light: #0A6FD9;
            --orient-navy: #0A1628;
            --orient-white: #FFFFFF;
            --orient-off-white: #F8F9FC;
            --orient-gray-100: #F1F3F7;
            --orient-gray-200: #E2E6ED;
            --orient-gray-400: #9CA3AF;
            --orient-gray-600: #6B7280;
            --orient-gray-800: #1F2937;
            --orient-gold: #C8A96E;
            --orient-gold-light: #E8D5AA;

            --font-heading: 'Montserrat', sans-serif;
            --font-body: 'Inter', sans-serif;

            --header-height: 80px;
            --transition-smooth: cubic-bezier(0.22, 1, 0.36, 1);
            --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

            --ui-scale: 1;
        }

        /* =====================
           THEME 2: ORIENT NOIR
           Premium Dark Mode
           ===================== */
        html.theme-noir {
            --orient-blue: #2B7CFF;
            --orient-blue-dark: #1B5ED6;
            --orient-blue-light: #69A7FF;
            --orient-navy: #050709;
            --orient-white: #0A0A0F;
            --orient-off-white: #111118;
            --orient-gray-100: #1A1A24;
            --orient-gray-200: rgba(255,255,255,0.08);
            --orient-gray-400: rgba(255,255,255,0.4);
            --orient-gray-600: rgba(255,255,255,0.6);
            --orient-gray-800: #EAF1FF;
            --orient-gold: #D4AF37;
            --orient-gold-light: #FFD700;
        }

        /* =====================
           THEME 3: ORIENT LUXE
           Warm Heritage Premium
           ===================== */
        html.theme-luxe {
            --orient-blue: #B8860B;
            --orient-blue-dark: #8B6914;
            --orient-blue-light: #CD7F32;
            --orient-navy: #1A120B;
            --orient-white: #FDF8F0;
            --orient-off-white: #F5EDE0;
            --orient-gray-100: #EDE4D3;
            --orient-gray-200: rgba(184,115,51,0.15);
            --orient-gray-400: #8B7355;
            --orient-gray-600: #6A5A4A;
            --orient-gray-800: #1A120B;
            --orient-gold: #B87333;
            --orient-gold-light: #E0A96D;
        }

        /* ========================
           THEME 4: AURORA
           Futuristic Teal + Violet
           ======================== */
        html.theme-aurora {
            --orient-blue: #22D3EE;
            --orient-blue-dark: #0891B2;
            --orient-blue-light: #A5F3FC;
            --orient-navy: #070A12;
            --orient-white: #060812;
            --orient-off-white: #0B1020;
            --orient-gray-100: #141B2E;
            --orient-gray-200: rgba(255,255,255,0.08);
            --orient-gray-400: rgba(255,255,255,0.4);
            --orient-gray-600: rgba(255,255,255,0.6);
            --orient-gray-800: #E0F2FE;
            --orient-gold: #A78BFA;
            --orient-gold-light: #C4B5FD;
        }

        /* ========================
           THEME 5: ZEN
           Sage Green + Porcelain
           ======================== */
        html.theme-zen {
            --orient-blue: #2F6F64;
            --orient-blue-dark: #1F4D46;
            --orient-blue-light: #5EAAA0;
            --orient-navy: #121A1A;
            --orient-white: #FAFAF5;
            --orient-off-white: #F2F3ED;
            --orient-gray-100: #EAECE5;
            --orient-gray-200: rgba(47,111,100,0.10);
            --orient-gray-400: #9AA396;
            --orient-gray-600: #687068;
            --orient-gray-800: #2B332F;
            --orient-gold: #C7A24A;
            --orient-gold-light: #E6D3A2;
        }

        /* =============================================
           BRAND PALETTES (Derived from Orient Blue #034EA2)
           ============================================= */

        /* Palette 1: OCEAN — Cool blues + teal accent */
        html.palette-ocean {
            --orient-blue: #034EA2;
            --orient-blue-dark: #023a78;
            --orient-blue-light: #357abd;
            --orient-navy: #011f4b;
            --orient-white: #ffffff;
            --orient-off-white: #f0f7f9;
            --orient-gray-100: #e8f1f5;
            --orient-gray-200: #d0e3ec;
            --orient-gray-400: #8bb0c4;
            --orient-gray-600: #5b8a9e;
            --orient-gray-800: #1a3a4a;
            --orient-gold: #00a8b5;
            --orient-gold-light: #b2ebf2;
        }

        /* Palette 2: MIDNIGHT — Deep dark theme + electric blue (Dark) */
        html.palette-midnight {
            --orient-blue: #4c8edb;
            --orient-blue-dark: #034EA2;
            --orient-blue-light: #7eb8ff;
            --orient-navy: #050a0f;
            --orient-white: #0a1118;
            --orient-off-white: #121b26;
            --orient-gray-100: #1a242f;
            --orient-gray-200: rgba(255,255,255,0.08);
            --orient-gray-400: rgba(255,255,255,0.4);
            --orient-gray-600: rgba(255,255,255,0.6);
            --orient-gray-800: #f4f6f6;
            --orient-gold: #00d4ff;
            --orient-gold-light: #005f73;
        }

        /* Palette 3: GLACIER — Icy cool + silver frost accent */
        html.palette-glacier {
            --orient-blue: #034EA2;
            --orient-blue-dark: #002d62;
            --orient-blue-light: #82b1ff;
            --orient-navy: #1a2a3a;
            --orient-white: #fcfdfe;
            --orient-off-white: #f0f4f8;
            --orient-gray-100: #e8edf2;
            --orient-gray-200: #d1dbe5;
            --orient-gray-400: #90a4ae;
            --orient-gray-600: #607d8b;
            --orient-gray-800: #263238;
            --orient-gold: #90caf9;
            --orient-gold-light: #d0ebff;
        }

        /* Palette 4: SUNSET — Warm blue + coral accent */
        html.palette-sunset {
            --orient-blue: #034EA2;
            --orient-blue-dark: #023670;
            --orient-blue-light: #5c9ce6;
            --orient-navy: #1a1410;
            --orient-white: #ffffff;
            --orient-off-white: #fff9f6;
            --orient-gray-100: #fdf5f0;
            --orient-gray-200: #f0e6df;
            --orient-gray-400: #c4aa98;
            --orient-gray-600: #8c7e74;
            --orient-gray-800: #2e2824;
            --orient-gold: #ff6b6b;
            --orient-gold-light: #ffdada;
        }

        /* Palette 5: FOREST — Blue-green + emerald accent */
        html.palette-forest {
            --orient-blue: #034EA2;
            --orient-blue-dark: #01356e;
            --orient-blue-light: #4a90e2;
            --orient-navy: #0b252e;
            --orient-white: #ffffff;
            --orient-off-white: #f2f9f4;
            --orient-gray-100: #e8f0ea;
            --orient-gray-200: #d0dfd4;
            --orient-gray-400: #8ba88f;
            --orient-gray-600: #5a745e;
            --orient-gray-800: #1a2e1e;
            --orient-gold: #2ecc71;
            --orient-gold-light: #d5f5e3;
        }

        /* Palette 6: ROYAL — Rich blue + amethyst accent (Dark) */
        html.palette-royal {
            --orient-blue: #6a5acd;
            --orient-blue-dark: #034EA2;
            --orient-blue-light: #9b89e6;
            --orient-navy: #0d0221;
            --orient-white: #0f0a1e;
            --orient-off-white: #18122b;
            --orient-gray-100: #231d38;
            --orient-gray-200: rgba(255,255,255,0.08);
            --orient-gray-400: rgba(255,255,255,0.4);
            --orient-gray-600: rgba(255,255,255,0.65);
            --orient-gray-800: #f0ecff;
            --orient-gold: #9b59b6;
            --orient-gold-light: #6a3d80;
        }

        /* Palette 7: MONOCHROME — Pure blue-only */
        html.palette-monochrome {
            --orient-blue: #034EA2;
            --orient-blue-dark: #023a78;
            --orient-blue-light: #4c8edb;
            --orient-navy: #011f4b;
            --orient-white: #ffffff;
            --orient-off-white: #eef3fa;
            --orient-gray-100: #dde6f2;
            --orient-gray-200: #c0d0e4;
            --orient-gray-400: #7a9bc4;
            --orient-gray-600: #4a6f9c;
            --orient-gray-800: #0a2540;
            --orient-gold: #1a73e8;
            --orient-gold-light: #c4dafa;
        }

        /* Dark palette overrides (Midnight, Royal) — same as Noir pattern */
        html.palette-midnight .header--scrolled,
        html.palette-royal .header--scrolled {
            background: rgba(10,10,20,0.95);
            box-shadow: 0 1px 20px rgba(0,0,0,0.4);
        }
        html.palette-midnight .header--scrolled .nav-desktop__link,
        html.palette-royal .header--scrolled .nav-desktop__link { color: #EAF1FF; }
        html.palette-midnight .header--scrolled .header__search-btn svg,
        html.palette-royal .header--scrolled .header__search-btn svg { color: #EAF1FF; }
        html.palette-midnight .header--scrolled .hamburger span,
        html.palette-royal .header--scrolled .hamburger span { background: #EAF1FF; }
        html.palette-midnight .header--scrolled .header__logo img,
        html.palette-royal .header--scrolled .header__logo img { filter: brightness(0) invert(1); }
        html.palette-midnight .category-card,
        html.palette-royal .category-card {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
            backdrop-filter: blur(12px);
        }
        html.palette-midnight .category-card:hover,
        html.palette-royal .category-card:hover { box-shadow: 0 30px 60px rgba(0,0,0,0.3); }
        html.palette-midnight .category-card__image,
        html.palette-royal .category-card__image { background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%); }
        html.palette-midnight .category-card--cutout .category-card__image img,
        html.palette-royal .category-card--cutout .category-card__image img { filter: drop-shadow(0 16px 28px rgba(0,0,0,0.3)); }
        html.palette-midnight .category-card--cutout .category-card__image::before,
        html.palette-royal .category-card--cutout .category-card__image::before { background: radial-gradient(closest-side, rgba(0,0,0,0.2), transparent); }
        html.palette-midnight .featured__card,
        html.palette-royal .featured__card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
        html.palette-midnight .featured__card-img,
        html.palette-royal .featured__card-img { background: rgba(255,255,255,0.03); }
        html.palette-midnight .news-card,
        html.palette-royal .news-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); }
        html.palette-midnight .mobile-menu,
        html.palette-royal .mobile-menu { background: #0A0A0F; }
        html.palette-midnight .mobile-menu__link,
        html.palette-midnight .mobile-menu__accordion,
        html.palette-royal .mobile-menu__link,
        html.palette-royal .mobile-menu__accordion { color: #EAF1FF; border-color: rgba(255,255,255,0.08); }
        html.palette-midnight .mega-menu,
        html.palette-royal .mega-menu { background: #111118; }
        html.palette-midnight .mega-menu__col + .mega-menu__col,
        html.palette-royal .mega-menu__col + .mega-menu__col { border-left-color: rgba(255,255,255,0.06); }
        html.palette-midnight .mega-menu__item:hover,
        html.palette-royal .mega-menu__item:hover { background: rgba(255,255,255,0.04); }
        html.palette-midnight .footer.footer-magazine,
        html.palette-royal .footer.footer-magazine {
            background: #111118; color: rgba(255,255,255,0.7);
        }
        html.palette-midnight .footer.footer-magazine .footer__brand-tagline,
        html.palette-royal .footer.footer-magazine .footer__brand-tagline { color: #EAF1FF; }
        html.palette-midnight .footer.footer-magazine .footer__col-title,
        html.palette-royal .footer.footer-magazine .footer__col-title { color: var(--orient-blue-light); }
        html.palette-midnight .footer.footer-magazine .footer__link,
        html.palette-royal .footer.footer-magazine .footer__link { color: rgba(255,255,255,0.6); }
        html.palette-midnight .footer.footer-magazine .footer__bottom,
        html.palette-royal .footer.footer-magazine .footer__bottom { border-top-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); }
        html.palette-midnight .footer.footer-magazine .footer__logo,
        html.palette-royal .footer.footer-magazine .footer__logo { filter: brightness(0) invert(1); }

        /* Dark palette overrides for new components */
        html.palette-midnight .testimonial-card,
        html.palette-royal .testimonial-card {
            background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08);
        }
        html.palette-midnight .testimonial-card__quote,
        html.palette-royal .testimonial-card__quote { color: rgba(255,255,255,0.85); }
        html.palette-midnight .testimonial-card__name,
        html.palette-royal .testimonial-card__name { color: #EAF1FF; }
        html.palette-midnight .showcase-card,
        html.palette-royal .showcase-card {
            background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08);
        }
        html.palette-midnight .showcase-card__name,
        html.palette-royal .showcase-card__name { color: #EAF1FF; }
        html.palette-midnight .highlight-card,
        html.palette-royal .highlight-card {
            background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08);
        }
        html.palette-midnight .highlight-card__title,
        html.palette-royal .highlight-card__title { color: #EAF1FF; }
        html.palette-midnight .highlight-card__desc,
        html.palette-royal .highlight-card__desc { color: rgba(255,255,255,0.6); }
        html.palette-midnight .timeline__year,
        html.palette-royal .timeline__year { color: var(--orient-blue-light); }
        html.palette-midnight .timeline__label,
        html.palette-royal .timeline__label { color: #EAF1FF; }
        html.palette-midnight .timeline__desc,
        html.palette-royal .timeline__desc { color: rgba(255,255,255,0.5); }
        html.palette-midnight .timeline__track::before,
        html.palette-royal .timeline__track::before { background: rgba(255,255,255,0.1); }

        /* Theme transition engine */
        html {
            transition: --orient-white 0.6s ease,
                        --orient-off-white 0.6s ease,
                        --orient-gray-800 0.6s ease;
        }

        /* Reset */
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            font-family: var(--font-body);
            color: var(--orient-gray-800);
            line-height: 1.6;
            overflow-x: hidden;
            background: var(--orient-white);
            transition: background 0.6s ease, color 0.6s ease;
        }
        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }
        img { max-width: 100%; display: block; }
        button { cursor: pointer; border: none; background: none; font-family: inherit; }

        /* =====================
           HEADER / NAVIGATION
           ===================== */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            transition: all 0.4s var(--transition-smooth);
            background: transparent;
        }
        .header--scrolled {
            background: rgba(255, 255, 255, 0.97);
            backdrop-filter: saturate(180%) blur(20px);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            box-shadow: 0 1px 20px rgba(0, 0, 0, 0.08);
        }
        .header__container {
            max-width: 1440px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 40px;
            height: var(--header-height);
        }
        .header__logo img {
            height: 40px;
            transition: filter 0.3s ease;
        }
        .header--scrolled .header__logo img {
            filter: none;
        }
        .header:not(.header--scrolled) .header__logo img {
            filter: brightness(0) invert(1);
        }

        /* Desktop Navigation */
        .nav-desktop { display: flex; align-items: center; gap: 0; }
        .nav-desktop__list { display: flex; align-items: center; gap: 0; }
        .nav-desktop__item { position: relative; }
        .nav-desktop__item::after {
            content: ''; position: absolute; top: 100%; left: -20px; right: -20px;
            height: 28px; background: transparent;
        }
        .nav-desktop__link {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 28px 20px;
            font-family: var(--font-heading);
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--orient-white);
            transition: color 0.3s ease;
        }
        .header--scrolled .nav-desktop__link {
            color: var(--orient-gray-800);
        }
        .nav-desktop__link:hover {
            color: var(--orient-blue-light);
        }
        .header--scrolled .nav-desktop__link:hover {
            color: var(--orient-blue);
        }
        .nav-desktop__link svg {
            width: 10px;
            height: 10px;
            transition: transform 0.3s ease;
        }
        .nav-desktop__item:hover .nav-desktop__link svg {
            transform: rotate(180deg);
        }

        /* Mega Menu Dropdown — Enhanced Full-Width */
        .mega-menu {
            position: fixed;
            top: var(--header-height);
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            width: calc(100vw - 80px);
            max-width: 1400px;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            background: var(--orient-white);
            border-radius: 0 0 16px 16px;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
            padding: 0;
            border-top: 3px solid var(--orient-blue);
            transition: opacity 0.35s var(--transition-smooth), transform 0.35s var(--transition-smooth), visibility 0s 0.4s;
            z-index: 999;
        }
        .nav-desktop__item:hover .mega-menu {
            opacity: 1;
            visibility: visible;
            pointer-events: all;
            transform: translateX(-50%) translateY(0);
            transition-delay: 0s;
        }
        .mega-menu__grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1.2fr 0.8fr;
            gap: 0;
            padding: 32px 40px;
        }
        .mega-menu__col {
            padding-right: 32px;
        }
        .mega-menu__col:last-child { padding-right: 0; }
        .mega-menu__col + .mega-menu__col { border-left: 1px solid var(--orient-gray-100); padding-left: 32px; }
        .mega-menu__section-title {
            font-family: var(--font-heading);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--orient-blue);
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 2px solid var(--orient-gold);
        }
        .mega-menu__item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 10px 14px;
            border-radius: 10px;
            border-left: 3px solid transparent;
            transition: all 0.3s ease;
            margin-bottom: 4px;
            opacity: 0;
            animation: megaFadeIn 0.4s ease forwards;
        }
        .mega-menu__item:nth-child(2) { animation-delay: 0.05s; }
        .mega-menu__item:nth-child(3) { animation-delay: 0.1s; }
        .mega-menu__item:nth-child(4) { animation-delay: 0.15s; }
        .mega-menu__item:hover {
            background: var(--orient-gray-100);
            border-left-color: var(--orient-blue);
            transform: translateX(6px);
        }
        @keyframes megaFadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .mega-menu__item-icon {
            font-size: 20px;
            line-height: 1;
            flex-shrink: 0;
            width: 28px;
            text-align: center;
        }
        .mega-menu__item-text { flex: 1; }
        .mega-menu__link {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: var(--orient-gray-800);
            transition: color 0.2s ease;
            margin-bottom: 2px;
        }
        .mega-menu__item:hover .mega-menu__link { color: var(--orient-blue); }
        .mega-menu__link-sub {
            font-size: 12px;
            color: var(--orient-gray-400);
            font-weight: 400;
            line-height: 1.4;
        }
        /* Featured product in mega menu */
        .mega-menu__featured {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            background: linear-gradient(135deg, var(--orient-navy) 0%, var(--orient-blue) 100%);
            padding: 24px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
        .mega-menu__featured-badge {
            position: absolute;
            top: 16px;
            left: 16px;
            background: var(--orient-gold);
            color: var(--orient-navy);
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .mega-menu__featured-img {
            max-height: 140px;
            width: auto;
            object-fit: contain;
            margin: 0 auto 16px;
            filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
        }
        .mega-menu__featured h4 {
            color: white;
            font-family: var(--font-heading);
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 4px;
        }
        .mega-menu__featured p {
            color: rgba(255,255,255,0.7);
            font-size: 12px;
            margin-bottom: 12px;
        }
        .mega-menu__featured-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--orient-gold);
            color: var(--orient-navy);
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            width: fit-content;
        }
        .mega-menu__featured-btn:hover {
            background: white;
            transform: translateY(-2px);
        }
        /* Quick links in mega menu */
        .mega-menu__quick-link {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border-radius: 8px;
            transition: all 0.3s ease;
            margin-bottom: 4px;
            font-size: 14px;
            font-weight: 500;
            color: var(--orient-gray-800);
        }
        .mega-menu__quick-link:hover {
            background: var(--orient-blue);
            color: white;
            transform: translateX(4px);
        }
        .mega-menu__quick-icon { font-size: 16px; }
        /* Mega menu bottom promo bar */
        .mega-menu__promo {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 40px;
            background: var(--orient-navy);
            border-radius: 0 0 16px 16px;
            font-size: 14px;
            color: rgba(255,255,255,0.8);
        }
        .mega-menu__promo strong { color: var(--orient-gold); }
        .mega-menu__promo-btn {
            background: var(--orient-gold);
            color: var(--orient-navy);
            padding: 8px 20px;
            border-radius: 6px;
            font-weight: 700;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
        }
        .mega-menu__promo-btn:hover { background: white; }

        /* Noir theme mega menu */
        html.theme-noir .mega-menu {
            background: #111118;
            border-top-color: var(--orient-blue-light);
        }
        html.theme-noir .mega-menu__col + .mega-menu__col { border-left-color: rgba(255,255,255,0.06); }
        html.theme-noir .mega-menu__item:hover { background: rgba(255,255,255,0.04); }
        html.theme-noir .mega-menu__promo { background: #050709; }

        /* Simple dropdown for non-mega items */
        .dropdown {
            position: absolute;
            top: calc(100% + 20px);
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            background: var(--orient-white);
            border-radius: 12px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
            padding: 12px 0;
            min-width: 220px;
            transition: opacity 0.35s var(--transition-smooth), transform 0.35s var(--transition-smooth), visibility 0s 0.4s;
        }
        .nav-desktop__item:hover .dropdown {
            opacity: 1;
            visibility: visible;
            pointer-events: all;
            transform: translateX(-50%) translateY(0);
            transition-delay: 0s;
        }
        .dropdown__link {
            display: block;
            padding: 10px 24px;
            font-size: 14px;
            font-weight: 500;
            color: var(--orient-gray-800);
            transition: all 0.2s ease;
        }
        .dropdown__link:hover {
            background: var(--orient-gray-100);
            color: var(--orient-blue);
        }

        /* Header Actions */
        .header__actions { display: flex; align-items: center; gap: 16px; }
        .header__search-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background 0.3s ease;
        }
        .header__search-btn:hover {
            background: rgba(255, 255, 255, 0.15);
        }
        .header--scrolled .header__search-btn:hover {
            background: var(--orient-gray-100);
        }
        .header__search-btn svg {
            width: 20px;
            height: 20px;
            color: var(--orient-white);
            transition: color 0.3s ease;
        }
        .header--scrolled .header__search-btn svg {
            color: var(--orient-gray-800);
        }

        /* Hamburger */
        .hamburger {
            display: none;
            width: 32px;
            height: 24px;
            flex-direction: column;
            justify-content: space-between;
        }
        .hamburger span {
            display: block;
            width: 100%;
            height: 2px;
            background: var(--orient-white);
            transition: all 0.3s ease;
            border-radius: 2px;
        }
        .header--scrolled .hamburger span {
            background: var(--orient-gray-800);
        }
        .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); }
        .hamburger.active span:nth-child(2) { opacity: 0; }
        .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

        /* =====================
           HERO SLIDER
           Orient Ceramica Style
           ===================== */
        .hero {
            position: relative;
            width: 100%;
            height: 100vh;
            min-height: 600px;
            overflow: hidden;
            background: var(--orient-navy);
        }
        .hero__slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            z-index: 1;
            transition: opacity 0s;
        }
        .hero__slide.active {
            opacity: 1;
            z-index: 2;
        }
        .hero__slide.exiting {
            opacity: 1;
            z-index: 1;
        }

        /* Background Image */
        .hero__bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            transform: scale(1.08);
            opacity: 0;
            transition: transform 1.2s var(--transition-smooth),
                        opacity 0.8s ease;
        }
        .hero__slide.active .hero__bg {
            transform: scale(1);
            opacity: 1;
        }

        /* Overlay Gradient */
        .hero__overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                135deg,
                rgba(3, 78, 162, 0.6) 0%,
                rgba(10, 22, 40, 0.7) 50%,
                rgba(10, 22, 40, 0.85) 100%
            );
            z-index: 2;
            opacity: var(--overlay-opacity, 1);
            transition: opacity 0.4s ease;
        }

        /* Content */
        .hero__content {
            position: relative;
            z-index: 3;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 80px;
            max-width: 1440px;
            margin: 0 auto;
        }
        .hero__series {
            font-family: var(--font-heading);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--orient-gold);
            margin-bottom: 16px;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s var(--transition-smooth);
            transition-delay: 0.2s;
        }
        .hero__title {
            font-family: var(--font-heading);
            font-size: clamp(36px, 5.5vw, 72px);
            font-weight: 800;
            color: var(--orient-white);
            line-height: 1.05;
            margin-bottom: 20px;
            max-width: 700px;
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.9s var(--transition-smooth);
            transition-delay: 0.35s;
        }
        .hero__description {
            font-size: clamp(15px, 1.3vw, 18px);
            color: rgba(255, 255, 255, 0.8);
            max-width: 520px;
            margin-bottom: 32px;
            line-height: 1.7;
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.9s var(--transition-smooth);
            transition-delay: 0.5s;
        }
        .hero__cta-group {
            display: flex;
            gap: 16px;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s var(--transition-smooth);
            transition-delay: 0.65s;
        }
        .hero__slide.active .hero__series,
        .hero__slide.active .hero__title,
        .hero__slide.active .hero__description,
        .hero__slide.active .hero__cta-group {
            opacity: 1;
            transform: translateY(0);
        }

        /* CTA Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 32px;
            font-family: var(--font-heading);
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            border-radius: 50px;
            transition: all 0.4s var(--transition-smooth);
        }
        .btn--primary {
            background: var(--orient-white);
            color: var(--orient-blue);
        }
        .btn--primary:hover {
            background: var(--orient-blue);
            color: var(--orient-white);
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(3, 78, 162, 0.4);
        }
        .btn--outline {
            border: 2px solid rgba(255, 255, 255, 0.4);
            color: var(--orient-white);
        }
        .btn--outline:hover {
            border-color: var(--orient-white);
            background: rgba(255, 255, 255, 0.1);
        }
        .btn--blue {
            background: var(--orient-blue);
            color: var(--orient-white);
        }
        .btn--blue:hover {
            background: var(--orient-blue-dark);
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(3, 78, 162, 0.3);
        }
        .btn--ghost {
            border: 2px solid var(--orient-gray-200);
            color: var(--orient-gray-800);
        }
        .btn--ghost:hover {
            border-color: var(--orient-blue);
            color: var(--orient-blue);
        }
        .btn svg { width: 16px; height: 16px; }

        /* Slider Navigation Arrows */
        .hero__arrows {
            position: absolute;
            bottom: 60px;
            right: 80px;
            display: flex;
            gap: 8px;
            z-index: 10;
        }
        .hero__arrow {
            width: 56px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.3);
            color: var(--orient-white);
            transition: all 0.3s ease;
            backdrop-filter: blur(8px);
        }
        .hero__arrow:hover {
            border-color: var(--orient-white);
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
        }
        .hero__arrow svg { width: 20px; height: 20px; }

        /* Slider Dots / Progress */
        .hero__dots {
            position: absolute;
            bottom: 60px;
            left: 80px;
            display: flex;
            align-items: center;
            gap: 12px;
            z-index: 10;
        }
        .hero__dot {
            width: 40px;
            height: 3px;
            border-radius: 3px;
            background: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        .hero__dot:hover { background: rgba(255, 255, 255, 0.5); }
        .hero__dot.active { width: 60px; }
        .hero__dot-progress {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background: var(--orient-white);
            border-radius: 3px;
            width: 0;
        }

        /* Slide counter */
        .hero__counter {
            position: absolute;
            top: 50%;
            right: 40px;
            transform: translateY(-50%) rotate(90deg);
            z-index: 10;
            font-family: var(--font-heading);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 3px;
            color: rgba(255, 255, 255, 0.5);
        }
        .hero__counter-current {
            color: var(--orient-white);
            font-size: 16px;
        }

        /* =====================
           SECTION STYLES
           ===================== */
        .section {
            padding: 100px 40px;
        }
        .container {
            max-width: 1280px;
            margin: 0 auto;
        }
        .section-header {
            text-align: center;
            margin-bottom: 64px;
        }
        .section-eyebrow {
            font-family: var(--font-heading);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--orient-blue);
            margin-bottom: 12px;
        }
        .section-title {
            font-family: var(--font-heading);
            font-size: clamp(28px, 3.5vw, 44px);
            font-weight: 800;
            color: var(--orient-gray-800);
            line-height: 1.15;
            margin-bottom: 16px;
        }
        .section-subtitle {
            font-size: 17px;
            color: var(--orient-gray-600);
            max-width: 560px;
            margin: 0 auto;
        }

        /* Scroll reveal */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s var(--transition-smooth);
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* =====================
           PRODUCT CATEGORIES
           Haier Pakistan Style
           ===================== */
        .categories { background: var(--orient-off-white); }
        .categories__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
        }
        .category-card {
            background: var(--orient-white);
            border-radius: 20px;
            overflow: hidden;
            transition: all 0.5s var(--transition-smooth);
            position: relative;
        }
        .category-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 30px 60px rgba(3, 78, 162, 0.12);
        }
        .category-card__image {
            aspect-ratio: 1 / 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(circle at 50% 40%, var(--orient-white) 0%, var(--orient-gray-100) 100%);
            overflow: hidden;
            position: relative;
        }
        /* Subtle vignette overlay for unified studio feel */
        .category-card__image::after {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(120% 90% at 50% 35%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 55%),
                         radial-gradient(120% 100% at 50% 85%, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0) 55%);
            pointer-events: none;
            z-index: 1;
        }
        .category-card__image img {
            width: 100%;
            height: 100%;
            transition: transform 0.6s var(--transition-smooth), filter 0.4s ease;
        }
        /* Default: lifestyle photos fill the frame */
        .category-card--lifestyle .category-card__image img {
            object-fit: cover;
            object-position: center;
        }
        /* Cutout PNGs: contain with padding + drop-shadow for depth */
        .category-card--cutout .category-card__image img {
            object-fit: contain;
            padding: 12%;
            filter: drop-shadow(0 16px 28px rgba(3, 78, 162, 0.15));
        }
        /* Studio floor shadow for cutouts */
        .category-card--cutout .category-card__image::before {
            content: "";
            position: absolute;
            left: 18%;
            right: 18%;
            bottom: 8%;
            height: 18%;
            background: radial-gradient(closest-side, rgba(3, 78, 162, 0.12), transparent);
            filter: blur(12px);
            z-index: 0;
        }
        .category-card:hover .category-card__image img {
            transform: scale(1.06);
        }
        .category-card--cutout:hover .category-card__image img {
            filter: drop-shadow(0 20px 36px rgba(3, 78, 162, 0.22));
        }
        .category-card__badge {
            position: absolute;
            top: 16px;
            right: 16px;
            background: var(--orient-blue);
            color: var(--orient-white);
            font-family: var(--font-heading);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 6px 12px;
            border-radius: 20px;
        }
        .category-card__content {
            padding: 28px;
        }
        .category-card__name {
            font-family: var(--font-heading);
            font-size: 20px;
            font-weight: 700;
            color: var(--orient-gray-800);
            margin-bottom: 8px;
        }
        .category-card__desc {
            font-size: 14px;
            color: var(--orient-gray-600);
            line-height: 1.6;
            margin-bottom: 20px;
        }
        .category-card__series {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 20px;
        }
        .category-card__tag {
            font-size: 11px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 20px;
            background: var(--orient-gray-100);
            color: var(--orient-gray-600);
            transition: all 0.3s ease;
        }
        .category-card:hover .category-card__tag {
            background: rgba(3, 78, 162, 0.08);
            color: var(--orient-blue);
        }
        .category-card__link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-heading);
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.5px;
            color: var(--orient-blue);
            transition: all 0.3s ease;
        }
        .category-card__link svg {
            width: 16px;
            height: 16px;
            transition: transform 0.3s ease;
        }
        .category-card:hover .category-card__link svg {
            transform: translateX(4px);
        }

        /* Staggered card animations */
        .category-card:nth-child(1) { transition-delay: 0s; }
        .category-card:nth-child(2) { transition-delay: 0.08s; }
        .category-card:nth-child(3) { transition-delay: 0.16s; }
        .category-card:nth-child(4) { transition-delay: 0.24s; }
        .category-card:nth-child(5) { transition-delay: 0.32s; }
        .category-card:nth-child(6) { transition-delay: 0.4s; }

        /* =====================
           FEATURED PRODUCTS
           ===================== */
        .featured {
            background: var(--orient-white);
        }
        .featured__scroll {
            display: flex;
            gap: 24px;
            overflow-x: auto;
            padding: 20px 0;
            scrollbar-width: none;
            -ms-overflow-style: none;
            scroll-snap-type: x mandatory;
        }
        .featured__scroll::-webkit-scrollbar { display: none; }
        .featured__card {
            flex: 0 0 300px;
            scroll-snap-align: start;
            background: var(--orient-white);
            border-radius: 16px;
            border: 1px solid var(--orient-gray-200);
            overflow: hidden;
            transition: all 0.4s var(--transition-smooth);
        }
        .featured__card:hover {
            border-color: var(--orient-blue);
            box-shadow: 0 20px 40px rgba(3, 78, 162, 0.1);
        }
        .featured__card-img {
            height: 240px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: var(--orient-gray-100);
        }
        .featured__card-img img {
            max-height: 200px;
            object-fit: contain;
            transition: transform 0.5s var(--transition-smooth);
        }
        .featured__card:hover .featured__card-img img {
            transform: scale(1.05);
        }
        .featured__card-body {
            padding: 20px;
        }
        .featured__card-series {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--orient-blue);
            margin-bottom: 4px;
        }
        .featured__card-name {
            font-family: var(--font-heading);
            font-size: 16px;
            font-weight: 600;
            color: var(--orient-gray-800);
            margin-bottom: 4px;
        }
        .featured__card-price {
            font-size: 14px;
            color: var(--orient-gray-600);
        }

        /* =====================
           QUALITY BANNER
           ===================== */
        .quality {
            background: linear-gradient(135deg, var(--orient-blue) 0%, var(--orient-navy) 100%);
            color: var(--orient-white);
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .quality::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
            border-radius: 50%;
        }
        .quality__stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;
            margin-top: 48px;
        }
        .quality__stat {
            text-align: center;
        }
        .quality__stat-number {
            font-family: var(--font-heading);
            font-size: 48px;
            font-weight: 800;
            color: var(--orient-gold);
            line-height: 1;
            margin-bottom: 8px;
        }
        .quality__stat-label {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            letter-spacing: 0.5px;
        }

        /* =====================
           PARTNERS MARQUEE
           ===================== */
        .partners {
            background: var(--orient-white);
            padding: 60px 40px;
            border-top: 1px solid var(--orient-gray-200);
            border-bottom: 1px solid var(--orient-gray-200);
        }
        .partners__title {
            text-align: center;
            font-family: var(--font-heading);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--orient-gray-400);
            margin-bottom: 32px;
        }
        .partners__track {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 60px;
            flex-wrap: wrap;
        }
        .partners__logo {
            font-family: var(--font-heading);
            font-size: 24px;
            font-weight: 700;
            color: var(--orient-gray-200);
            letter-spacing: 2px;
            transition: color 0.3s ease;
        }
        .partners__logo:hover {
            color: var(--orient-gray-600);
        }

        /* =====================
           NEWS & EVENTS
           ===================== */
        .news { background: var(--orient-off-white); }
        .news__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
        }
        .news-card {
            background: var(--orient-white);
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.4s var(--transition-smooth);
        }
        .news-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        .news-card__image {
            height: 200px;
            background: var(--orient-gray-200);
            overflow: hidden;
            position: relative;
        }
        .news-card__image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s var(--transition-smooth);
        }
        .news-card:hover .news-card__image img {
            transform: scale(1.08);
        }
        .news-card__category {
            position: absolute;
            top: 12px;
            left: 12px;
            background: var(--orient-blue);
            color: var(--orient-white);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 5px 12px;
            border-radius: 20px;
        }
        .news-card__body { padding: 24px; }
        .news-card__date {
            font-size: 12px;
            color: var(--orient-gray-400);
            margin-bottom: 8px;
        }
        .news-card__title {
            font-family: var(--font-heading);
            font-size: 17px;
            font-weight: 700;
            color: var(--orient-gray-800);
            line-height: 1.4;
            margin-bottom: 12px;
        }
        .news-card__excerpt {
            font-size: 14px;
            color: var(--orient-gray-600);
            line-height: 1.6;
            margin-bottom: 16px;
        }
        .news-card__link {
            font-family: var(--font-heading);
            font-size: 13px;
            font-weight: 600;
            color: var(--orient-blue);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: gap 0.3s ease;
        }
        .news-card:hover .news-card__link { gap: 10px; }

        /* =====================
           FOOTER
           ===================== */
        .footer {
            background: var(--orient-navy);
            color: rgba(255, 255, 255, 0.7);
            padding: 80px 40px 40px;
        }
        .footer__grid {
            display: grid;
            grid-template-columns: 1.5fr repeat(3, 1fr);
            gap: 60px;
            max-width: 1280px;
            margin: 0 auto;
        }
        .footer__brand-tagline {
            font-size: 15px;
            line-height: 1.7;
            margin: 20px 0;
            max-width: 280px;
        }
        .footer__socials {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }
        .footer__social {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: rgba(255, 255, 255, 0.6);
            transition: all 0.3s ease;
        }
        .footer__social:hover {
            border-color: var(--orient-blue-light);
            color: var(--orient-blue-light);
            background: rgba(3, 78, 162, 0.1);
        }
        .footer__social svg { width: 18px; height: 18px; }
        .footer__col-title {
            font-family: var(--font-heading);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--orient-white);
            margin-bottom: 24px;
        }
        .footer__link {
            display: block;
            padding: 6px 0;
            font-size: 14px;
            transition: all 0.2s ease;
        }
        .footer__link:hover {
            color: var(--orient-white);
            transform: translateX(4px);
        }
        .footer__bottom {
            max-width: 1280px;
            margin: 60px auto 0;
            padding-top: 24px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
        }
        .footer__legal {
            display: flex;
            gap: 24px;
        }
        .footer__legal a:hover { color: var(--orient-white); }
        .footer__logo {
            height: 32px;
            filter: brightness(0) invert(1);
        }

        /* =====================
           MOBILE MENU
           ===================== */
        .mobile-menu {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100vh;
            background: var(--orient-white);
            z-index: 1001;
            transform: translateX(100%);
            transition: transform 0.5s var(--transition-smooth);
            padding: 0;
            overflow-y: auto;
        }
        .mobile-menu.open { transform: translateX(0); }
        .mobile-menu__close {
            display: flex; align-items: center; justify-content: space-between;
            padding: 24px 32px; border-bottom: 1px solid var(--orient-gray-200);
        }
        .mobile-menu__close-logo { height: 28px; }
        .mobile-menu__close-btn {
            width: 40px; height: 40px; border-radius: 50%; border: none;
            background: var(--orient-gray-100); color: var(--orient-gray-600);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: all 0.2s ease;
        }
        .mobile-menu__close-btn:hover { background: var(--orient-blue); color: white; }
        .mobile-menu__close-btn svg { width: 18px; height: 18px; }
        .mobile-menu__nav { padding: 20px 32px 40px; }
        .mobile-menu__link {
            display: block;
            padding: 16px 0;
            font-family: var(--font-heading);
            font-size: 24px;
            font-weight: 700;
            color: var(--orient-gray-800);
            border-bottom: 1px solid var(--orient-gray-200);
        }
        .mobile-menu__accordion {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 16px 0;
            font-family: var(--font-heading);
            font-size: 24px;
            font-weight: 700;
            color: var(--orient-gray-800);
            border-bottom: 1px solid var(--orient-gray-200);
            background: transparent; border-left: none; border-right: none; border-top: none;
            cursor: pointer; text-align: left;
        }
        .mobile-menu__accordion svg { transition: transform 0.3s ease; }
        .mobile-menu__accordion.open svg { transform: rotate(180deg); }
        .mobile-menu__panel {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            background: var(--orient-gray-100);
            border-radius: 12px; margin-bottom: 4px;
        }
        .mobile-menu__panel.open { max-height: 500px; padding: 8px 0; }
        .mobile-menu__sublink {
            display: block;
            padding: 12px 20px;
            font-size: 16px;
            color: var(--orient-gray-600);
            transition: color 0.2s ease;
        }
        .mobile-menu__sublink:hover { color: var(--orient-blue); }

        /* =====================
           RESPONSIVE
           ===================== */
        @media (max-width: 1024px) {
            .nav-desktop { display: none; }
            .hamburger { display: flex; }
            .hero__content { padding: 0 40px; }
            .hero__arrows { right: 40px; bottom: 40px; }
            .hero__dots { left: 40px; bottom: 40px; }
            .categories__grid { grid-template-columns: repeat(2, 1fr); }
            .quality__stats { grid-template-columns: repeat(2, 1fr); gap: 30px; }
            .news__grid { grid-template-columns: repeat(2, 1fr); }
            .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
        }
        @media (max-width: 768px) {
            :root { --header-height: 64px; }
            .header__container { padding: 0 20px; }
            .hero__content { padding: 0 20px; }
            .hero__arrows { right: 20px; bottom: 24px; }
            .hero__dots { left: 20px; bottom: 24px; }
            .hero__arrow { width: 44px; height: 44px; }
            .hero__counter { display: none; }
            .section { padding: 60px 20px; }
            .categories__grid { grid-template-columns: 1fr; }
            .featured__card { flex: 0 0 260px; }
            .quality__stats { grid-template-columns: repeat(2, 1fr); }
            .news__grid { grid-template-columns: 1fr; }
            .footer__grid { grid-template-columns: 1fr; gap: 32px; }
            .footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
            .partners__track { gap: 30px; }
        }

        /* =====================
           LOADING ANIMATION
           ===================== */
        .preloader {
            position: fixed;
            inset: 0;
            background: var(--orient-navy);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: opacity 0.6s ease, visibility 0.6s ease;
        }
        .preloader.hide {
            opacity: 0;
            visibility: hidden;
        }
        .preloader__logo {
            height: 48px;
            filter: brightness(0) invert(1);
            animation: preloaderPulse 1.5s ease-in-out infinite;
        }
        .preloader__bar {
            width: 120px;
            height: 2px;
            background: rgba(255, 255, 255, 0.15);
            margin-top: 24px;
            border-radius: 2px;
            overflow: hidden;
        }
        .preloader__fill {
            height: 100%;
            background: var(--orient-gold);
            width: 0;
            animation: preloaderFill 1.5s ease forwards;
        }
        @keyframes preloaderPulse {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }
        @keyframes preloaderFill {
            to { width: 100%; }
        }

        /* Smooth number counter */
        @keyframes countUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ============================================
           WOW EFFECTS & THEME ENHANCEMENTS
           ============================================ */

        /* --- THEME-SPECIFIC OVERRIDES --- */

        /* Noir: Header scrolled */
        html.theme-noir .header--scrolled {
            background: rgba(10, 10, 15, 0.95);
            box-shadow: 0 1px 20px rgba(0, 0, 0, 0.4);
        }
        html.theme-noir .header--scrolled .nav-desktop__link { color: #EAF1FF; }
        html.theme-noir .header--scrolled .header__search-btn svg { color: #EAF1FF; }
        html.theme-noir .header--scrolled .hamburger span { background: #EAF1FF; }
        html.theme-noir .header--scrolled .header__logo img { filter: brightness(0) invert(1); }

        /* Noir: Hero */
        html.theme-noir .hero__overlay {
            background: linear-gradient(135deg, rgba(10,10,15,0.85) 0%, rgba(43,124,255,0.15) 50%, rgba(10,10,15,0.9) 100%);
        }

        /* Noir: Cards glassmorphism */
        html.theme-noir .category-card {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        html.theme-noir .category-card:hover {
            box-shadow: 0 30px 60px rgba(43,124,255,0.15);
            border-color: rgba(43,124,255,0.2);
        }
        html.theme-noir .category-card__image {
            background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
        }
        html.theme-noir .category-card--cutout .category-card__image img {
            filter: drop-shadow(0 16px 28px rgba(43, 124, 255, 0.2));
        }
        html.theme-noir .category-card--cutout:hover .category-card__image img {
            filter: drop-shadow(0 20px 36px rgba(43, 124, 255, 0.3));
        }
        html.theme-noir .category-card--cutout .category-card__image::before {
            background: radial-gradient(closest-side, rgba(43, 124, 255, 0.15), transparent);
        }
        html.theme-noir .featured__card {
            background: rgba(255,255,255,0.04);
            border-color: rgba(255,255,255,0.08);
        }
        html.theme-noir .featured__card:hover {
            border-color: rgba(43,124,255,0.3);
            box-shadow: 0 20px 40px rgba(43,124,255,0.12);
        }
        html.theme-noir .featured__card-img { background: rgba(255,255,255,0.03); }
        html.theme-noir .news-card {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.06);
        }
        html.theme-noir .news-card:hover {
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        }
        html.theme-noir .quality {
            background: linear-gradient(135deg, rgba(43,124,255,0.2) 0%, #050709 50%, rgba(43,124,255,0.1) 100%);
        }
        html.theme-noir .mobile-menu {
            background: #0A0A0F;
        }
        html.theme-noir .mobile-menu__link,
        html.theme-noir .mobile-menu__accordion { color: #EAF1FF; border-color: rgba(255,255,255,0.08); }
        html.theme-noir .mobile-menu__sublink { color: rgba(255,255,255,0.6); }

        /* Noir: Footer glow line */
        html.theme-noir .footer::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(43,124,255,0.5), transparent);
        }
        html.theme-noir .footer { position: relative; }

        /* Noir: Magazine Footer fix — dark theme needs light text on light bg override */
        html.theme-noir .footer.footer-magazine {
            background: #111118;
            color: rgba(255,255,255,0.7);
        }
        html.theme-noir .footer.footer-magazine .footer__brand-tagline { color: #EAF1FF; }
        html.theme-noir .footer.footer-magazine .footer__col-title { color: var(--orient-blue-light); }
        html.theme-noir .footer.footer-magazine .footer__link { color: rgba(255,255,255,0.6); }
        html.theme-noir .footer.footer-magazine .footer__link:hover { color: var(--orient-blue-light); }
        html.theme-noir .footer.footer-magazine .footer__social { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); }
        html.theme-noir .footer.footer-magazine .footer__social:hover { border-color: var(--orient-blue-light); color: var(--orient-blue-light); background: rgba(43,124,255,0.1); }
        html.theme-noir .footer.footer-magazine .footer__links-area { border-left-color: rgba(255,255,255,0.1); }
        html.theme-noir .footer.footer-magazine .footer__bottom { border-top-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); }
        html.theme-noir .footer.footer-magazine .footer__bottom a { color: rgba(255,255,255,0.4); }
        html.theme-noir .footer.footer-magazine .footer__newsletter input {
            background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); color: #EAF1FF;
        }
        html.theme-noir .footer.footer-magazine .footer__newsletter input::placeholder { color: rgba(255,255,255,0.3); }
        html.theme-noir .footer.footer-magazine .footer__logo { filter: brightness(0) invert(1); }

        /* Luxe: Magazine Footer fix */
        html.theme-luxe .footer.footer-magazine {
            background: #F5EDE0;
        }

        /* Luxe: Overrides */
        html.theme-luxe .hero__overlay {
            background: linear-gradient(135deg, rgba(26,18,11,0.85) 0%, rgba(184,134,11,0.15) 50%, rgba(26,18,11,0.9) 100%);
        }
        html.theme-luxe .header--scrolled {
            background: rgba(253,248,240,0.97);
        }
        html.theme-luxe .category-card {
            border: 1px solid rgba(184,115,51,0.12);
        }
        html.theme-luxe .category-card:hover {
            box-shadow: 0 30px 60px rgba(184,115,51,0.12);
        }
        html.theme-luxe .category-card--cutout .category-card__image img {
            filter: drop-shadow(0 16px 28px rgba(184, 115, 51, 0.18));
        }
        html.theme-luxe .category-card--cutout:hover .category-card__image img {
            filter: drop-shadow(0 20px 36px rgba(184, 115, 51, 0.25));
        }
        html.theme-luxe .category-card--cutout .category-card__image::before {
            background: radial-gradient(closest-side, rgba(184, 115, 51, 0.1), transparent);
        }
        html.theme-luxe .quality {
            background: linear-gradient(135deg, #B87333 0%, #034EA2 50%, #E0A96D 100%);
        }
        html.theme-luxe .footer {
            background: #0D1B2E;
        }

        /* ===========================
           AURORA THEME: Component Overrides
           =========================== */

        /* Aurora: Header scrolled */
        html.theme-aurora .header--scrolled {
            background: rgba(6, 8, 18, 0.95);
            box-shadow: 0 1px 30px rgba(34, 211, 238, 0.15);
        }
        html.theme-aurora .header--scrolled .nav-desktop__link { color: #E0F2FE; }
        html.theme-aurora .header--scrolled .header__search-btn svg { color: #E0F2FE; }
        html.theme-aurora .header--scrolled .hamburger span { background: #E0F2FE; }
        html.theme-aurora .header--scrolled .header__logo img { filter: brightness(0) invert(1); }

        /* Aurora: Hero — Northern lights overlay */
        html.theme-aurora .hero__overlay {
            background:
                radial-gradient(900px 500px at 20% 25%, rgba(34, 211, 238, 0.25), transparent 60%),
                radial-gradient(700px 420px at 80% 30%, rgba(139, 92, 246, 0.22), transparent 62%),
                radial-gradient(600px 400px at 55% 85%, rgba(167, 139, 250, 0.10), transparent 60%),
                linear-gradient(180deg, rgba(6,8,18,0.4) 0%, rgba(6,8,18,0.88) 70%, rgba(6,8,18,0.98) 100%);
        }

        /* Aurora: Cards — Frosted aurora glass */
        html.theme-aurora .category-card {
            background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
            border: 1px solid rgba(34, 211, 238, 0.12);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }
        html.theme-aurora .category-card:hover {
            box-shadow: 0 30px 60px rgba(34, 211, 238, 0.12), 0 0 40px rgba(139, 92, 246, 0.08);
            border-color: rgba(34, 211, 238, 0.25);
        }
        html.theme-aurora .category-card__image {
            background: radial-gradient(circle at 50% 40%, rgba(34, 211, 238, 0.06) 0%, rgba(255,255,255,0.01) 100%);
        }
        html.theme-aurora .category-card--cutout .category-card__image img {
            filter: drop-shadow(0 16px 28px rgba(34, 211, 238, 0.2));
        }
        html.theme-aurora .category-card--cutout:hover .category-card__image img {
            filter: drop-shadow(0 20px 36px rgba(34, 211, 238, 0.3));
        }
        html.theme-aurora .category-card--cutout .category-card__image::before {
            background: radial-gradient(closest-side, rgba(34, 211, 238, 0.12), transparent);
        }

        /* Aurora: Featured cards */
        html.theme-aurora .featured__card {
            background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
            border-color: rgba(34, 211, 238, 0.10);
            backdrop-filter: blur(12px);
        }
        html.theme-aurora .featured__card:hover {
            border-color: rgba(167, 139, 250, 0.3);
            box-shadow: 0 20px 40px rgba(139, 92, 246, 0.12);
        }
        html.theme-aurora .featured__card-img {
            background: rgba(34, 211, 238, 0.03);
        }

        /* Aurora: Quality section */
        html.theme-aurora .quality {
            background: linear-gradient(135deg, rgba(34, 211, 238, 0.2) 0%, #060812 50%, rgba(139, 92, 246, 0.15) 100%);
        }

        /* Aurora: News cards */
        html.theme-aurora .news-card {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(34, 211, 238, 0.06);
        }
        html.theme-aurora .news-card:hover {
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        }

        /* Aurora: Mobile menu */
        html.theme-aurora .mobile-menu { background: #060812; }
        html.theme-aurora .mobile-menu__link,
        html.theme-aurora .mobile-menu__accordion { color: #E0F2FE; border-color: rgba(255,255,255,0.08); }
        html.theme-aurora .mobile-menu__sublink { color: rgba(255,255,255,0.6); }

        /* Aurora: Mega menu */
        html.theme-aurora .mega-menu {
            background: #0B1020;
            border-top-color: var(--orient-blue);
        }
        html.theme-aurora .mega-menu__col + .mega-menu__col { border-left-color: rgba(255,255,255,0.06); }
        html.theme-aurora .mega-menu__item:hover { background: rgba(34, 211, 238, 0.06); }
        html.theme-aurora .mega-menu__promo { background: #060812; }

        /* Aurora: Footer with aurora glow line */
        html.theme-aurora .footer { position: relative; background: #060812; }
        html.theme-aurora .footer::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, #22D3EE, #8B5CF6, transparent);
        }
        html.theme-aurora .footer.footer-magazine {
            background: #0B1020;
            color: rgba(255,255,255,0.7);
        }
        html.theme-aurora .footer.footer-magazine .footer__brand-tagline { color: #E0F2FE; }
        html.theme-aurora .footer.footer-magazine .footer__col-title { color: #22D3EE; }
        html.theme-aurora .footer.footer-magazine .footer__link { color: rgba(255,255,255,0.6); }
        html.theme-aurora .footer.footer-magazine .footer__link:hover { color: #A5F3FC; }
        html.theme-aurora .footer.footer-magazine .footer__social { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); }
        html.theme-aurora .footer.footer-magazine .footer__social:hover { border-color: #22D3EE; color: #22D3EE; background: rgba(34, 211, 238, 0.08); }
        html.theme-aurora .footer.footer-magazine .footer__links-area { border-left-color: rgba(255,255,255,0.1); }
        html.theme-aurora .footer.footer-magazine .footer__bottom { border-top-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); }
        html.theme-aurora .footer.footer-magazine .footer__bottom a { color: rgba(255,255,255,0.4); }
        html.theme-aurora .footer.footer-magazine .footer__newsletter input {
            background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); color: #E0F2FE;
        }
        html.theme-aurora .footer.footer-magazine .footer__newsletter input::placeholder { color: rgba(255,255,255,0.3); }
        html.theme-aurora .footer.footer-magazine .footer__logo { filter: brightness(0) invert(1); }

        /* Aurora: Parallax band */
        html.theme-aurora .parallax-band__overlay {
            background: linear-gradient(135deg, rgba(6,8,18,0.85) 0%, rgba(34,211,238,0.15) 50%, rgba(6,8,18,0.9) 100%);
        }

        /* Aurora: Grain texture */
        html.theme-aurora body::after { opacity: 0.03; }

        /* ===========================
           ZEN THEME: Component Overrides
           =========================== */

        /* Zen: Header scrolled */
        html.theme-zen .header--scrolled {
            background: rgba(250, 250, 245, 0.97);
            box-shadow: 0 1px 20px rgba(47, 111, 100, 0.08);
        }

        /* Zen: Hero — Soft showroom wash */
        html.theme-zen .hero__overlay {
            background:
                radial-gradient(800px 500px at 20% 30%, rgba(47, 111, 100, 0.18), transparent 62%),
                radial-gradient(600px 400px at 80% 35%, rgba(199, 162, 74, 0.12), transparent 62%),
                linear-gradient(180deg, rgba(250,250,245,0.25) 0%, rgba(250,250,245,0.80) 55%, rgba(242,243,237,0.98) 100%);
        }

        /* Zen: Cards — Soft elevation, organic warmth */
        html.theme-zen .category-card {
            background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,245,0.85));
            border: 1px solid rgba(47, 111, 100, 0.08);
            box-shadow: 0 8px 24px rgba(18, 26, 26, 0.06);
        }
        html.theme-zen .category-card:hover {
            box-shadow: 0 24px 50px rgba(47, 111, 100, 0.10);
            border-color: rgba(47, 111, 100, 0.18);
        }
        html.theme-zen .category-card__image {
            background: radial-gradient(circle at 50% 45%, #FAFAF5 0%, #EAECE5 100%);
        }
        html.theme-zen .category-card--cutout .category-card__image img {
            filter: drop-shadow(0 14px 24px rgba(47, 111, 100, 0.12));
        }
        html.theme-zen .category-card--cutout:hover .category-card__image img {
            filter: drop-shadow(0 18px 32px rgba(47, 111, 100, 0.18));
        }
        html.theme-zen .category-card--cutout .category-card__image::before {
            background: radial-gradient(closest-side, rgba(47, 111, 100, 0.08), transparent);
        }

        /* Zen: Featured cards */
        html.theme-zen .featured__card {
            background: rgba(255,255,255,0.9);
            border-color: rgba(47, 111, 100, 0.08);
        }
        html.theme-zen .featured__card:hover {
            border-color: rgba(47, 111, 100, 0.2);
            box-shadow: 0 20px 40px rgba(47, 111, 100, 0.08);
        }

        /* Zen: Quality section — Sage + brass gradient */
        html.theme-zen .quality {
            background: linear-gradient(135deg, #2F6F64 0%, #1F4D46 50%, #C7A24A 100%);
        }

        /* Zen: News cards */
        html.theme-zen .news-card {
            border: 1px solid rgba(47, 111, 100, 0.06);
        }
        html.theme-zen .news-card:hover {
            box-shadow: 0 16px 32px rgba(18, 26, 26, 0.08);
        }

        /* Zen: Hero text — dark on light overlay */
        html.theme-zen .hero__title { color: #121A1A; }
        html.theme-zen .hero__description { color: rgba(18, 26, 26, 0.7); }
        html.theme-zen .hero__series { color: #2F6F64; }
        html.theme-zen .hero__cta { background: #2F6F64; color: #FAFAF5; border-color: #2F6F64; }
        html.theme-zen .hero__cta:hover { background: #1F4D46; }
        html.theme-zen .hero__cta--outline { background: transparent; color: #2F6F64; border-color: rgba(47,111,100,0.3); }
        html.theme-zen .hero__cta--outline:hover { background: rgba(47,111,100,0.08); }
        html.theme-zen .hero__dot { background: rgba(47,111,100,0.25); }
        html.theme-zen .hero__dot.active { background: #2F6F64; }
        html.theme-zen .hero__arrow { background: rgba(47,111,100,0.08); color: #2F6F64; border-color: rgba(47,111,100,0.15); }
        html.theme-zen .hero__arrow:hover { background: rgba(47,111,100,0.15); }
        html.theme-zen .hero__counter { color: rgba(18, 26, 26, 0.5); }
        html.theme-zen .parallax-band__overlay {
            background: linear-gradient(135deg, rgba(250,250,245,0.82) 0%, rgba(242,243,237,0.88) 100%);
        }
        html.theme-zen .parallax-band__title { color: #121A1A; }
        html.theme-zen .parallax-band__sub { color: rgba(18, 26, 26, 0.7); }

        /* Zen: Footer */
        html.theme-zen .footer {
            background: #1F2F2B;
        }
        html.theme-zen .footer.footer-magazine {
            background: #F2F3ED;
        }
        html.theme-zen .footer.footer-magazine .footer__brand-tagline { color: #121A1A; }
        html.theme-zen .footer.footer-magazine .footer__col-title { color: #2F6F64; }
        html.theme-zen .footer.footer-magazine .footer__link { color: #687068; }
        html.theme-zen .footer.footer-magazine .footer__link:hover { color: #2F6F64; }
        html.theme-zen .footer.footer-magazine .footer__social { border-color: rgba(47,111,100,0.15); color: #687068; }
        html.theme-zen .footer.footer-magazine .footer__social:hover { border-color: #2F6F64; color: #2F6F64; background: rgba(47,111,100,0.05); }
        html.theme-zen .footer.footer-magazine .footer__bottom { border-top-color: rgba(47,111,100,0.1); }

        /* =========================================================
           LAYOUT CONTROLS: Menu Position / Menu Width / Content Width
           Applied via classes on <html>
           ========================================================= */

        /* --- MENU POSITION: ABOVE SLIDER --- */
        html.menupos-above .header {
            position: sticky;
            top: 0;
            background: var(--orient-white);
            box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
        }
        /* Above slider: always show normal (non-inverted) logo */
        html.menupos-above .header .header__logo img { filter: none !important; }
        /* Nav links dark on solid bg */
        html.menupos-above .header .nav-desktop__link { color: var(--orient-gray-800); }
        html.menupos-above .header .header__search-btn svg { color: var(--orient-gray-800); }
        html.menupos-above .header .hamburger span { background: var(--orient-gray-800); }
        /* Hero adjusts — header is above, not overlapping */
        html.menupos-above .hero {
            height: calc(100vh - var(--header-height));
            min-height: 500px;
        }
        /* Scrolled state deepens shadow only */
        html.menupos-above .header--scrolled {
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.10);
        }
        /* Above + dark themes: solid dark bg */
        html.menupos-above.theme-noir .header,
        html.menupos-above.theme-aurora .header {
            background: var(--orient-white);
        }
        html.menupos-above.theme-noir .header .nav-desktop__link,
        html.menupos-above.theme-aurora .header .nav-desktop__link { color: var(--orient-gray-800); }
        html.menupos-above.theme-noir .header .header__search-btn svg,
        html.menupos-above.theme-aurora .header .header__search-btn svg { color: var(--orient-gray-800); }
        html.menupos-above.theme-noir .header .hamburger span,
        html.menupos-above.theme-aurora .header .hamburger span { background: var(--orient-gray-800); }
        html.menupos-above.theme-noir .header .header__logo img,
        html.menupos-above.theme-aurora .header .header__logo img { filter: brightness(0) invert(1) !important; }
        html.menupos-above.theme-noir .header--scrolled,
        html.menupos-above.theme-aurora .header--scrolled {
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
        }

        /* --- MENU WIDTH: BOXED --- */
        html.menuwidth-boxed .header {
            width: min(calc(100% - 32px), 1280px);
            left: 50%;
            transform: translateX(-50%);
            border-radius: 16px;
            border: 1px solid rgba(0, 0, 0, 0.06);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            backdrop-filter: saturate(1.4) blur(16px);
            -webkit-backdrop-filter: saturate(1.4) blur(16px);
        }
        /* Boxed + On Slider: float down from top */
        html:not(.menupos-above).menuwidth-boxed .header {
            top: 14px;
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.18);
        }
        html:not(.menupos-above).menuwidth-boxed .header--scrolled {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(0, 0, 0, 0.06);
            box-shadow: 0 14px 45px rgba(0, 0, 0, 0.12);
        }
        /* Boxed + Above: centered card in flow */
        html.menupos-above.menuwidth-boxed .header {
            position: sticky;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 12px;
            margin-bottom: 12px;
            background: var(--orient-white);
        }
        /* Boxed: inner container fills card */
        html.menuwidth-boxed .header__container {
            max-width: none;
            padding: 0 24px;
        }
        /* Boxed + dark themes (on slider) */
        html:not(.menupos-above).menuwidth-boxed.theme-noir .header,
        html:not(.menupos-above).menuwidth-boxed.theme-aurora .header {
            background: rgba(10, 10, 15, 0.25);
            border-color: rgba(255, 255, 255, 0.12);
        }
        html:not(.menupos-above).menuwidth-boxed.theme-noir .header--scrolled {
            background: rgba(10, 10, 15, 0.92);
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow: 0 14px 45px rgba(0, 0, 0, 0.4);
        }
        html:not(.menupos-above).menuwidth-boxed.theme-aurora .header--scrolled {
            background: rgba(6, 8, 18, 0.92);
            border-color: rgba(34, 211, 238, 0.15);
            box-shadow: 0 14px 45px rgba(34, 211, 238, 0.08);
        }
        html:not(.menupos-above).menuwidth-boxed.theme-luxe .header {
            border-color: rgba(184, 115, 51, 0.12);
        }
        html:not(.menupos-above).menuwidth-boxed.theme-luxe .header--scrolled {
            background: rgba(253, 248, 240, 0.95);
        }
        html:not(.menupos-above).menuwidth-boxed.theme-zen .header {
            border-color: rgba(47, 111, 100, 0.10);
        }
        html:not(.menupos-above).menuwidth-boxed.theme-zen .header--scrolled {
            background: rgba(250, 250, 245, 0.95);
        }
        /* Boxed + Above + dark themes */
        html.menupos-above.menuwidth-boxed.theme-noir .header,
        html.menupos-above.menuwidth-boxed.theme-aurora .header {
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
        }

        /* --- CONTENT WIDTH: FULL --- */
        html.contentwidth-full .container {
            max-width: none;
            padding-left: clamp(20px, 3vw, 48px);
            padding-right: clamp(20px, 3vw, 48px);
        }
        html.contentwidth-full .categories__grid { gap: 32px; }
        html.contentwidth-full .hero__content {
            max-width: none;
            padding: 0 clamp(40px, 5vw, 100px);
        }

        /* Responsive: boxed menu */
        @media (max-width: 640px) {
            html.menuwidth-boxed .header {
                width: calc(100% - 16px);
                border-radius: 14px;
            }
            html:not(.menupos-above).menuwidth-boxed .header { top: 8px; }
        }

        /* --- 1. FLOATING GRADIENT ORBS (Hero) --- */
        .hero__orbs {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
            overflow: hidden;
        }
        .orb {
            position: absolute;
            border-radius: 50%;
            will-change: transform;
            filter: blur(2px);
            opacity: 0.35;
        }
        .orb--1 {
            width: 300px; height: 300px;
            top: 5%; left: 5%;
            background: radial-gradient(circle at 30% 70%, var(--orient-blue) 0%, transparent 70%);
            animation: orbFloat1 25s ease-in-out infinite;
        }
        .orb--2 {
            width: 200px; height: 200px;
            top: 50%; right: 10%;
            background: radial-gradient(circle at 70% 30%, var(--orient-gold) 0%, transparent 70%);
            animation: orbFloat2 30s ease-in-out infinite;
        }
        .orb--3 {
            width: 250px; height: 250px;
            bottom: 15%; left: 25%;
            background: radial-gradient(circle at 50% 50%, var(--orient-blue-light) 0%, transparent 70%);
            animation: orbFloat3 35s ease-in-out infinite;
        }
        .orb--4 {
            width: 180px; height: 180px;
            top: 30%; right: 30%;
            background: radial-gradient(circle at 40% 60%, var(--orient-gold) 0%, transparent 70%);
            animation: orbFloat4 28s ease-in-out infinite;
        }
        @keyframes orbFloat1 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(40px, -30px) scale(1.1); }
            66% { transform: translate(-20px, 20px) scale(0.95); }
        }
        @keyframes orbFloat2 {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            50% { transform: translate(-30px, -20px) rotate(180deg); }
        }
        @keyframes orbFloat3 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            40% { transform: translate(30px, 15px) scale(1.08); }
            70% { transform: translate(-15px, -25px) scale(0.92); }
        }
        @keyframes orbFloat4 {
            0%, 100% { transform: translate(0, 0); }
            50% { transform: translate(25px, -35px); }
        }

        /* --- 2. LIGHT SWEEP EFFECT (Cards) --- */
        .category-card::after {
            content: '';
            position: absolute;
            inset: -40%;
            background: linear-gradient(120deg,
                rgba(255,255,255,0) 35%,
                rgba(255,255,255,0.15) 50%,
                rgba(255,255,255,0) 65%);
            transform: translateX(-70%) rotate(10deg);
            transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
            pointer-events: none;
            z-index: 5;
        }
        .category-card { position: relative; overflow: hidden; }
        .category-card:hover::after {
            transform: translateX(50%) rotate(10deg);
        }

        /* --- 3. PULSING GLOW (Product Images on Hover) --- */
        /* Glow uses a child span instead of ::after (which is the vignette overlay) */
        .category-card__glow {
            position: absolute;
            bottom: 0; left: 50%;
            transform: translateX(-50%);
            width: 60%; height: 40%;
            background: var(--orient-blue);
            filter: blur(40px);
            opacity: 0;
            transition: opacity 0.5s ease;
            border-radius: 50%;
            z-index: 0;
            pointer-events: none;
        }
        .category-card:hover .category-card__glow {
            opacity: 0.15;
            animation: pulseGlow 2s ease-in-out infinite;
        }
        @keyframes pulseGlow {
            0%, 100% { opacity: 0.1; transform: translateX(-50%) scale(1); }
            50% { opacity: 0.2; transform: translateX(-50%) scale(1.1); }
        }

        /* --- 4. TEXT REVEAL ANIMATION --- */
        .section-title .title-word {
            display: inline-block;
            opacity: 0;
            transform: translateY(30px);
            filter: blur(4px);
            transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .section-title.animate .title-word {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }

        /* --- 5. ANIMATED NAV UNDERLINE --- */
        .nav-desktop__link::after {
            content: '';
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 20px;
            height: 2px;
            background: var(--orient-gold);
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .nav-desktop__link { position: relative; }
        .nav-desktop__link:hover::after {
            transform: scaleX(1);
            transform-origin: left;
        }

        /* --- 6. QUALITY BANNER AURA --- */
        .quality {
            background-size: 200% 200%;
            animation: qualityAura 8s ease-in-out infinite;
        }
        @keyframes qualityAura {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* --- 7. FILM GRAIN OVERLAY --- */
        body::after {
            content: '';
            position: fixed;
            inset: 0;
            opacity: 0.025;
            pointer-events: none;
            z-index: 9998;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        }
        html.theme-noir body::after { opacity: 0.04; }

        /* --- 8. PARALLAX TILT GLOW (Card inner light) --- */
        .category-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(300px 200px at var(--mx, 50%) var(--my, 50%),
                rgba(255,255,255,0.12), transparent 60%);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            z-index: 4;
            border-radius: 20px;
        }
        .category-card:hover::before { opacity: 1; }

        /* =============================================
           OPTION B: PRODUCT-FOCUSED HOMEPAGE
           ============================================= */
        /* Hide Option B sections by default, show when .homepage-b active */
        .homepage-b-content { display: none; }
        html.homepage-b .homepage-a-content { display: none; }
        html.homepage-b .homepage-b-content { display: block; }

        /* --- Trust Bar --- */
        .trust-bar {
            display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;
            padding: 20px 40px;
            background: var(--orient-gray-100);
            border-bottom: 1px solid var(--orient-gray-200);
        }
        .trust-bar__item {
            display: flex; align-items: center; gap: 10px;
            font-family: var(--font-heading); font-size: 12px; font-weight: 600;
            letter-spacing: 0.5px; text-transform: uppercase;
            color: var(--orient-gray-600);
        }
        .trust-bar__item svg { width: 20px; height: 20px; color: var(--orient-blue); }

        /* --- Product Finder Teaser --- */
        .finder-teaser {
            padding: 60px 0;
            background: var(--orient-navy);
            position: relative; overflow: hidden;
        }
        .finder-teaser::before {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(ellipse at 30% 50%, rgba(3,78,162,0.15) 0%, transparent 70%);
        }
        .finder-teaser .container { position: relative; z-index: 1; }
        .finder-teaser__inner {
            display: flex; align-items: center; gap: 48px;
            padding: 48px; border-radius: 20px;
            background: rgba(255,255,255,0.04);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.08);
        }
        .finder-teaser__text { flex: 1; }
        .finder-teaser__title {
            font-family: var(--font-heading); font-size: 28px; font-weight: 700;
            color: var(--orient-white); margin: 0 0 12px;
        }
        html.theme-classic .finder-teaser__title,
        html.theme-luxe .finder-teaser__title,
        html.theme-zen .finder-teaser__title { color: #fff; }
        .finder-teaser__sub {
            font-family: var(--font-body); font-size: 15px;
            color: rgba(255,255,255,0.6); line-height: 1.6; margin: 0 0 24px;
        }
        .finder-teaser__steps {
            display: flex; gap: 24px;
        }
        .finder-teaser__step {
            display: flex; align-items: center; gap: 10px;
            font-size: 13px; color: rgba(255,255,255,0.5);
            font-family: var(--font-body);
        }
        .finder-teaser__step-num {
            width: 28px; height: 28px; border-radius: 50%;
            background: rgba(3,78,162,0.3); color: var(--orient-blue-light);
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 12px; font-family: var(--font-heading);
        }
        .finder-teaser__btn {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 14px 32px; border-radius: 12px;
            background: var(--orient-blue); color: white;
            font-family: var(--font-heading); font-size: 14px; font-weight: 600;
            text-decoration: none; border: none; cursor: pointer;
            transition: all 0.3s var(--transition-smooth);
            box-shadow: 0 4px 20px rgba(3,78,162,0.3);
        }
        .finder-teaser__btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(3,78,162,0.5);
        }

        /* --- 3D Category Cards --- */
        .categories-3d { perspective: 1200px; }
        .categories-3d .category-card {
            transform-style: preserve-3d;
            transition: transform 0.15s ease-out;
        }
        .categories-3d .category-card__glare {
            position: absolute; inset: 0; border-radius: 20px;
            background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.15) 0%, transparent 80%);
            opacity: 0; transition: opacity 0.3s ease;
            pointer-events: none; z-index: 5;
        }
        .categories-3d .category-card:hover .category-card__glare { opacity: 1; }

        /* --- Split Product Showcase --- */
        .split-showcase { padding: 0; }
        .split-row {
            display: grid; grid-template-columns: 1fr 1fr;
            min-height: 520px; overflow: hidden;
        }
        .split-row--reverse { direction: rtl; }
        .split-row--reverse > * { direction: ltr; }
        .split-row__image {
            position: relative; overflow: hidden;
            display: flex; align-items: center; justify-content: center;
            padding: 40px;
        }
        .split-row__image img {
            max-width: 85%; max-height: 420px;
            object-fit: contain;
            filter: drop-shadow(0 20px 50px rgba(0,0,0,0.15));
            transition: transform 0.6s var(--transition-smooth);
        }
        .split-row:hover .split-row__image img { transform: scale(1.05); }
        .split-row__image-bg {
            position: absolute; inset: 0; z-index: -1;
        }
        .split-row__content {
            display: flex; flex-direction: column; justify-content: center;
            padding: 60px 48px;
        }
        .split-row__eyebrow {
            font-family: var(--font-heading); font-size: 11px; font-weight: 700;
            letter-spacing: 2px; text-transform: uppercase;
            color: var(--orient-blue); margin-bottom: 12px;
        }
        .split-row__title {
            font-family: var(--font-heading); font-size: 36px; font-weight: 800;
            color: var(--orient-gray-800); line-height: 1.15; margin: 0 0 16px;
        }
        .split-row__sub {
            font-family: var(--font-body); font-size: 16px;
            color: var(--orient-gray-600); line-height: 1.7; margin: 0 0 24px;
        }
        .split-row__specs {
            display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;
        }
        .split-row__spec {
            padding: 6px 14px; border-radius: 20px;
            background: var(--orient-gray-100);
            font-family: var(--font-heading); font-size: 11px; font-weight: 600;
            color: var(--orient-gray-600); letter-spacing: 0.5px;
        }
        .split-row__price {
            font-family: var(--font-heading); font-size: 24px; font-weight: 700;
            color: var(--orient-gray-800); margin-bottom: 24px;
        }
        .split-row__price span {
            font-size: 14px; font-weight: 400; color: var(--orient-gray-400);
        }
        .split-row__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
        .split-row__cta {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 12px 28px; border-radius: 10px;
            font-family: var(--font-heading); font-size: 13px; font-weight: 600;
            text-decoration: none; cursor: pointer;
            transition: all 0.3s var(--transition-smooth);
        }
        .split-row__cta--primary {
            background: var(--orient-blue); color: white; border: none;
            box-shadow: 0 4px 15px rgba(3,78,162,0.25);
        }
        .split-row__cta--primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(3,78,162,0.4);
        }
        .split-row__cta--secondary {
            background: transparent; color: var(--orient-gray-800);
            border: 1.5px solid var(--orient-gray-200);
        }
        .split-row__cta--secondary:hover {
            border-color: var(--orient-blue); color: var(--orient-blue);
        }

        /* Split showcase backgrounds per product */
        .split-row--ac .split-row__image-bg { background: linear-gradient(135deg, #0A1628 0%, #034EA2 100%); }
        .split-row--tv .split-row__image-bg { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
        .split-row--fridge .split-row__image-bg { background: linear-gradient(135deg, #2d1b3d 0%, #44274e 100%); }
        .split-row--wm .split-row__image-bg { background: linear-gradient(135deg, #1a2332 0%, #2c3e50 100%); }

        /* --- Connected Home Section --- */
        .connected-home {
            padding: 80px 0; background: var(--orient-navy);
            position: relative; overflow: hidden;
        }
        .connected-home::before {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(circle at 50% 50%, rgba(3,78,162,0.08) 0%, transparent 70%);
        }
        .connected-home .container { position: relative; z-index: 1; }
        .connected-home__grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
            align-items: center;
        }
        .connected-home__visual {
            position: relative; border-radius: 20px; overflow: hidden;
            aspect-ratio: 16/10;
        }
        .connected-home__visual img {
            width: 100%; height: 100%; object-fit: cover;
        }
        .connected-home__text h2 {
            font-family: var(--font-heading); font-size: 32px; font-weight: 800;
            color: #fff; margin: 0 0 16px;
        }
        .connected-home__text p {
            font-family: var(--font-body); font-size: 15px;
            color: rgba(255,255,255,0.6); line-height: 1.7; margin: 0 0 28px;
        }
        .connected-home__features {
            display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
        }
        .connected-home__feature {
            display: flex; align-items: center; gap: 12px;
            padding: 14px 16px; border-radius: 12px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.06);
        }
        .connected-home__feature svg { width: 22px; height: 22px; color: var(--orient-blue-light); flex-shrink: 0; }
        .connected-home__feature span {
            font-family: var(--font-heading); font-size: 12px; font-weight: 600;
            color: rgba(255,255,255,0.8); letter-spacing: 0.3px;
        }

        /* --- Partners Grid (Option B) --- */
        .partners-grid {
            padding: 60px 0; background: var(--orient-off-white);
        }
        .partners-grid__title {
            font-family: var(--font-heading); font-size: 12px; font-weight: 700;
            letter-spacing: 2px; text-transform: uppercase;
            color: var(--orient-gray-400); text-align: center; margin-bottom: 32px;
        }
        .partners-grid__logos {
            display: flex; justify-content: center; align-items: center;
            gap: 48px; flex-wrap: wrap;
        }
        .partners-grid__logo {
            font-family: var(--font-heading); font-size: 20px; font-weight: 700;
            color: var(--orient-gray-400); opacity: 0.4;
            transition: all 0.4s cubic-bezier(0.25,1,0.5,1);
            letter-spacing: 2px;
        }
        .partners-grid__logo:hover { opacity: 1; color: var(--orient-blue); }

        /* --- Deals Strip --- */
        .deals-strip {
            padding: 48px 0;
            background: linear-gradient(135deg, var(--orient-blue) 0%, var(--orient-blue-dark) 100%);
        }
        .deals-strip .container {
            display: flex; align-items: center; justify-content: space-between;
            gap: 32px; flex-wrap: wrap;
        }
        .deals-strip__text h3 {
            font-family: var(--font-heading); font-size: 24px; font-weight: 700;
            color: white; margin: 0 0 6px;
        }
        .deals-strip__text p {
            font-family: var(--font-body); font-size: 14px;
            color: rgba(255,255,255,0.7); margin: 0;
        }
        .deals-strip__cta {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 14px 32px; border-radius: 12px;
            background: white; color: var(--orient-blue);
            font-family: var(--font-heading); font-size: 14px; font-weight: 700;
            text-decoration: none; border: none; cursor: pointer;
            transition: all 0.3s var(--transition-smooth);
        }
        .deals-strip__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }

        /* --- Social Proof Wall --- */
        .social-proof { padding: 80px 0; }
        .social-proof__grid {
            display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px;
        }
        .social-proof__card {
            padding: 32px; border-radius: 16px;
            background: var(--orient-off-white);
            border: 1px solid var(--orient-gray-200);
        }
        .social-proof__card h4 {
            font-family: var(--font-heading); font-size: 14px; font-weight: 700;
            color: var(--orient-gray-800); margin: 0 0 16px;
            letter-spacing: 0.5px; text-transform: uppercase;
        }
        .social-proof__rating {
            display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px;
        }
        .social-proof__rating-num {
            font-family: var(--font-heading); font-size: 48px; font-weight: 800;
            color: var(--orient-gray-800); line-height: 1;
        }
        .social-proof__rating-max {
            font-family: var(--font-body); font-size: 18px;
            color: var(--orient-gray-400);
        }
        .social-proof__stars { color: #f59e0b; font-size: 20px; margin-bottom: 8px; }
        .social-proof__count {
            font-family: var(--font-body); font-size: 13px;
            color: var(--orient-gray-400);
        }
        .social-proof__review {
            padding: 16px 0; border-bottom: 1px solid var(--orient-gray-200);
        }
        .social-proof__review:last-child { border-bottom: none; }
        .social-proof__review-text {
            font-family: var(--font-body); font-size: 14px;
            color: var(--orient-gray-600); line-height: 1.6;
            font-style: italic; margin-bottom: 8px;
        }
        .social-proof__review-author {
            font-family: var(--font-heading); font-size: 12px; font-weight: 600;
            color: var(--orient-gray-800);
        }
        .social-proof__cert {
            display: flex; align-items: center; gap: 12px;
            padding: 12px 0; border-bottom: 1px solid var(--orient-gray-200);
        }
        .social-proof__cert:last-child { border-bottom: none; }
        .social-proof__cert svg { width: 24px; height: 24px; color: var(--orient-blue); flex-shrink: 0; }
        .social-proof__cert span {
            font-family: var(--font-body); font-size: 13px;
            color: var(--orient-gray-600);
        }

        /* --- News + Social + Newsletter Combined --- */
        .news-social-band { padding: 80px 0; background: var(--orient-off-white); }
        .news-social-band__grid {
            display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px;
        }
        .news-social-band__col h4 {
            font-family: var(--font-heading); font-size: 14px; font-weight: 700;
            color: var(--orient-gray-800); margin: 0 0 20px;
            letter-spacing: 0.5px; text-transform: uppercase;
        }
        .nsb-news-item {
            padding: 16px 0; border-bottom: 1px solid var(--orient-gray-200);
        }
        .nsb-news-item:last-child { border-bottom: none; }
        .nsb-news-date {
            font-family: var(--font-body); font-size: 11px;
            color: var(--orient-gray-400); margin-bottom: 4px;
        }
        .nsb-news-title {
            font-family: var(--font-heading); font-size: 14px; font-weight: 600;
            color: var(--orient-gray-800); line-height: 1.4;
        }
        .nsb-social-links { display: flex; gap: 12px; margin-bottom: 20px; }
        .nsb-social-link {
            width: 44px; height: 44px; border-radius: 12px;
            background: var(--orient-gray-100); border: 1px solid var(--orient-gray-200);
            display: flex; align-items: center; justify-content: center;
            color: var(--orient-gray-600); text-decoration: none;
            transition: all 0.3s ease;
        }
        .nsb-social-link:hover { background: var(--orient-blue); color: white; border-color: var(--orient-blue); }
        .nsb-social-link svg { width: 20px; height: 20px; }
        .nsb-newsletter-form {
            display: flex; gap: 8px;
        }
        .nsb-newsletter-form input {
            flex: 1; padding: 12px 16px; border-radius: 10px;
            border: 1px solid var(--orient-gray-200); background: var(--orient-white);
            font-family: var(--font-body); font-size: 14px; color: var(--orient-gray-800);
            outline: none;
        }
        .nsb-newsletter-form input:focus { border-color: var(--orient-blue); }
        .nsb-newsletter-form button {
            padding: 12px 20px; border-radius: 10px;
            background: var(--orient-blue); color: white; border: none;
            font-family: var(--font-heading); font-size: 13px; font-weight: 600;
            cursor: pointer; transition: all 0.3s ease;
        }
        .nsb-newsletter-form button:hover { background: var(--orient-blue-dark); }

        /* --- Homepage A/B Toggle --- */
        .cp-homepage-toggle {
            display: flex; gap: 4px; margin-bottom: 16px;
            padding: 4px; border-radius: 12px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.08);
        }
        .cp-homepage-btn {
            flex: 1; padding: 10px 8px; border-radius: 9px;
            border: none; cursor: pointer;
            font-family: var(--font-heading); font-size: 11px; font-weight: 700;
            letter-spacing: 0.8px; text-transform: uppercase;
            background: transparent; color: rgba(255,255,255,0.4);
            transition: all 0.3s ease;
        }
        .cp-homepage-btn.active {
            background: rgba(3,78,162,0.3); color: white;
            box-shadow: 0 2px 8px rgba(3,78,162,0.2);
        }
        .cp-homepage-btn:not(.active):hover { color: rgba(255,255,255,0.7); }

        /* Mobile responsive for Option B */
        @media (max-width: 768px) {
            .trust-bar { gap: 16px; padding: 16px 20px; }
            .trust-bar__item { font-size: 10px; gap: 6px; }
            .trust-bar__item svg { width: 16px; height: 16px; }
            .finder-teaser__inner { flex-direction: column; padding: 32px 24px; gap: 24px; }
            .finder-teaser__steps { flex-direction: column; gap: 12px; }
            .split-row { grid-template-columns: 1fr; min-height: auto; }
            .split-row--reverse { direction: ltr; }
            .split-row__image { padding: 32px 24px; min-height: 300px; }
            .split-row__content { padding: 32px 24px; }
            .split-row__title { font-size: 26px; }
            .connected-home__grid { grid-template-columns: 1fr; gap: 32px; }
            .social-proof__grid { grid-template-columns: 1fr; }
            .news-social-band__grid { grid-template-columns: 1fr; }
            .deals-strip .container { flex-direction: column; text-align: center; }
        }

        /* --- THEME SWITCHER UI --- */
        /* --- CONTROL PANEL --- */
        .control-panel {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 10000;
            animation: switcherEntrance 0.8s 2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }
        @keyframes switcherEntrance {
            from { transform: translateX(80px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        .control-panel__toggle {
            width: 52px; height: 52px;
            border-radius: 50%;
            background: rgba(10, 15, 30, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.15);
            color: white;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: absolute; bottom: 0; right: 0;
            z-index: 2;
        }
        .control-panel__toggle:hover { transform: scale(1.1) rotate(30deg); }
        .control-panel.open .control-panel__toggle { transform: rotate(90deg); background: rgba(3,78,162,0.9); }
        .control-panel__body {
            position: absolute; bottom: 64px; right: 0;
            background: rgba(10, 15, 30, 0.92);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 20px;
            padding: 20px;
            width: 260px;
            max-height: calc(100vh - 120px);
            overflow-y: auto;
            opacity: 0; visibility: hidden;
            transform: translateY(10px) scale(0.95);
            transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
            box-shadow: 0 20px 60px rgba(0,0,0,0.4);
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.15) transparent;
        }
        .control-panel__body::-webkit-scrollbar { width: 4px; }
        .control-panel__body::-webkit-scrollbar-track { background: transparent; }
        .control-panel__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
        .control-panel.open .control-panel__body {
            opacity: 1; visibility: visible; transform: translateY(0) scale(1);
        }
        /* --- Tab bar --- */
        .cp-tabs {
            display: flex;
            gap: 2px;
            margin-bottom: 14px;
            background: rgba(255,255,255,0.04);
            border-radius: 10px;
            padding: 3px;
        }
        .cp-tab {
            flex: 1;
            display: flex; flex-direction: column; align-items: center; gap: 3px;
            padding: 7px 4px 5px;
            border-radius: 8px;
            border: none;
            background: transparent;
            color: rgba(255,255,255,0.35);
            cursor: pointer;
            transition: all 0.25s ease;
            font-family: var(--font-heading);
            font-size: 7px; font-weight: 700;
            letter-spacing: 1px; text-transform: uppercase;
        }
        .cp-tab svg { width: 16px; height: 16px; opacity: 0.5; transition: opacity 0.25s ease; }
        .cp-tab:hover { color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.04); }
        .cp-tab:hover svg { opacity: 0.7; }
        .cp-tab.active {
            color: white;
            background: rgba(3,78,162,0.25);
            box-shadow: 0 2px 8px rgba(3,78,162,0.15);
        }
        .cp-tab.active svg { opacity: 1; }
        .cp-tab-panel { display: none; }
        .cp-tab-panel.active { display: block; }
        .cp-section { margin-bottom: 16px; }
        .cp-section:last-child { margin-bottom: 0; }

        /* Overlay toggle + slider */
        .cp-overlay-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .cp-toggle {
            position: relative;
            width: 36px;
            height: 20px;
            flex-shrink: 0;
        }
        .cp-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
        .cp-toggle__track {
            position: absolute;
            inset: 0;
            background: rgba(255,255,255,0.12);
            border-radius: 20px;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        .cp-toggle__track::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 16px;
            height: 16px;
            background: rgba(255,255,255,0.5);
            border-radius: 50%;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .cp-toggle input:checked + .cp-toggle__track {
            background: rgba(3,78,162,0.6);
        }
        .cp-toggle input:checked + .cp-toggle__track::after {
            left: 18px;
            background: white;
        }
        .cp-range {
            flex: 1;
            -webkit-appearance: none;
            appearance: none;
            height: 4px;
            border-radius: 4px;
            background: rgba(255,255,255,0.12);
            outline: none;
            transition: opacity 0.3s ease;
        }
        .cp-range::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: white;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            transition: transform 0.2s ease;
        }
        .cp-range::-webkit-slider-thumb:hover {
            transform: scale(1.2);
        }
        .cp-range::-moz-range-thumb {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: white;
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        }
        .cp-range:disabled {
            opacity: 0.3;
            pointer-events: none;
        }
        .cp-range-val {
            font-family: var(--font-heading);
            font-size: 10px;
            font-weight: 600;
            color: rgba(255,255,255,0.5);
            min-width: 28px;
            text-align: right;
        }
        .cp-label {
            font-family: var(--font-heading);
            font-size: 9px; font-weight: 700;
            letter-spacing: 2px; text-transform: uppercase;
            color: rgba(255,255,255,0.45);
            margin-bottom: 8px;
        }
        .cp-options { display: flex; gap: 8px; }
        .cp-btn {
            border: 2px solid rgba(255,255,255,0.12);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex; align-items: center; justify-content: center;
        }
        .cp-btn:hover { border-color: rgba(255,255,255,0.4); transform: scale(1.08); }
        .cp-btn.active { border-color: rgba(3,78,162,0.8); box-shadow: 0 0 12px rgba(3,78,162,0.3); background: rgba(3,78,162,0.15) !important; }
        .cp-color {
            width: 36px; height: 36px; border-radius: 50%;
        }
        .cp-icon {
            width: 44px; height: 36px; background: rgba(255,255,255,0.04);
            color: rgba(255,255,255,0.6);
        }
        .cp-icon.active { color: white; }
        .cp-type {
            width: 44px; height: 36px; background: rgba(255,255,255,0.04);
            color: rgba(255,255,255,0.6);
        }
        .cp-type.active { color: white; }
        @media (max-width: 768px) {
            .control-panel__body { width: calc(100vw - 48px); right: -12px; }
            .cp-tab { font-size: 6px; letter-spacing: 0.5px; padding: 6px 2px 4px; }
            .cp-tab svg { width: 14px; height: 14px; }
        }

        /* UI Scale for control panel */
        .control-panel__body { width: calc(260px * var(--ui-scale)); padding: calc(20px * var(--ui-scale)); }
        .cp-tabs { margin-bottom: calc(14px * var(--ui-scale)); padding: calc(3px * var(--ui-scale)); border-radius: calc(10px * var(--ui-scale)); }
        .cp-tab { font-size: calc(7px * var(--ui-scale)); padding: calc(7px * var(--ui-scale)) calc(4px * var(--ui-scale)) calc(5px * var(--ui-scale)); border-radius: calc(8px * var(--ui-scale)); }
        .cp-tab svg { width: calc(16px * var(--ui-scale)); height: calc(16px * var(--ui-scale)); }
        .cp-label { font-size: calc(9px * var(--ui-scale)); letter-spacing: calc(2px * var(--ui-scale)); margin-bottom: calc(8px * var(--ui-scale)); }
        .cp-section { margin-bottom: calc(14px * var(--ui-scale)); }
        .cp-btn { border-radius: calc(10px * var(--ui-scale)); }
        .cp-color { width: calc(36px * var(--ui-scale)); height: calc(36px * var(--ui-scale)); }
        .cp-icon { width: calc(44px * var(--ui-scale)); height: calc(36px * var(--ui-scale)); }
        .cp-type { width: calc(44px * var(--ui-scale)); height: calc(36px * var(--ui-scale)); }
        .cp-options { gap: calc(8px * var(--ui-scale)); }
        .cp-range-val { font-size: calc(10px * var(--ui-scale)); min-width: calc(28px * var(--ui-scale)); }
        .control-panel__toggle { width: calc(52px * var(--ui-scale)); height: calc(52px * var(--ui-scale)); }
        .control-panel__toggle svg { width: calc(20px * var(--ui-scale)); height: calc(20px * var(--ui-scale)); }

        .theme-switcher__label {
            font-family: var(--font-heading);
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.6);
            text-align: center;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            margin: 4px 0;
        }

        /* Tooltip for theme buttons */
        .theme-btn::before {
            content: attr(data-label);
            position: absolute;
            right: calc(100% + 12px);
            top: 50%;
            transform: translateY(-50%) translateX(8px);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 6px 12px;
            border-radius: 8px;
            font-family: var(--font-heading);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.5px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
        }
        .theme-btn:hover::before {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
        }

        @media (prefers-reduced-motion: reduce) {
            .orb, .quality { animation: none !important; }
            .category-card::after { transition: none; }
        }

        /* ============================================
           TYPOGRAPHY SYSTEMS
           ============================================ */
        html.typo-modern {
            --font-heading: 'Montserrat', sans-serif;
            --font-body: 'Inter', sans-serif;
            --font-accent: 'Montserrat', sans-serif;
            --heading-weight: 800;
            --heading-transform: uppercase;
            --heading-spacing: -0.03em;
            --heading-line-height: 1.05;
            --body-size: 16px;
            --body-line-height: 1.6;
            --eyebrow-size: 11px;
            --eyebrow-weight: 700;
            --eyebrow-spacing: 3px;
            --eyebrow-transform: uppercase;
            --eyebrow-style: normal;
            --nav-weight: 600;
            --nav-transform: uppercase;
            --nav-spacing: 1.5px;
            --nav-size: 13px;
            --tag-font: 'Inter', sans-serif;
            --tag-size: 11px;
        }
        html.typo-editorial {
            --font-heading: 'Playfair Display', serif;
            --font-body: 'Source Sans 3', sans-serif;
            --font-accent: 'Playfair Display', serif;
            --heading-weight: 700;
            --heading-transform: none;
            --heading-spacing: -0.01em;
            --heading-line-height: 1.2;
            --body-size: 17px;
            --body-line-height: 1.8;
            --eyebrow-size: 13px;
            --eyebrow-weight: 400;
            --eyebrow-spacing: 0.5px;
            --eyebrow-transform: none;
            --eyebrow-style: italic;
            --nav-weight: 400;
            --nav-transform: none;
            --nav-spacing: 0.5px;
            --nav-size: 15px;
            --tag-font: 'Source Sans 3', sans-serif;
            --tag-size: 12px;
        }
        html.typo-swiss {
            --font-heading: 'Space Grotesk', sans-serif;
            --font-body: 'Space Grotesk', sans-serif;
            --font-accent: 'JetBrains Mono', monospace;
            --heading-weight: 300;
            --heading-transform: none;
            --heading-spacing: -0.05em;
            --heading-line-height: 1.05;
            --body-size: 16px;
            --body-line-height: 1.5;
            --eyebrow-size: 11px;
            --eyebrow-weight: 500;
            --eyebrow-spacing: 2px;
            --eyebrow-transform: uppercase;
            --eyebrow-style: normal;
            --nav-weight: 400;
            --nav-transform: lowercase;
            --nav-spacing: 0px;
            --nav-size: 14px;
            --tag-font: 'JetBrains Mono', monospace;
            --tag-size: 10px;
        }
        /* Apply typography vars globally */
        body { font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-line-height); }
        .hero__title, .section-title { font-family: var(--font-heading); font-weight: var(--heading-weight); text-transform: var(--heading-transform); letter-spacing: var(--heading-spacing); line-height: var(--heading-line-height); }
        .section-eyebrow, .hero__series { font-family: var(--font-accent); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: var(--eyebrow-spacing); text-transform: var(--eyebrow-transform); font-style: var(--eyebrow-style); }
        .nav-desktop__link { font-family: var(--font-heading); font-weight: var(--nav-weight); text-transform: var(--nav-transform); letter-spacing: var(--nav-spacing); font-size: var(--nav-size); }
        .category-card__tag { font-family: var(--tag-font); font-size: var(--tag-size); }
        .category-card__name, .news-card__title, .featured__card-name { font-family: var(--font-heading); }
        .footer__col-title, .mega-menu__section-title { font-family: var(--font-accent); }
        .btn { font-family: var(--font-heading); }
        html.typo-editorial .hero__title { font-size: clamp(34px, 5vw, 68px); }
        html.typo-editorial .hero__description { font-family: 'Source Sans 3', sans-serif; font-size: 18px; }
        html.typo-swiss .hero__title { font-size: clamp(40px, 7vw, 88px); font-weight: 300; }
        html.typo-swiss .category-card__tag { font-family: 'JetBrains Mono', monospace; letter-spacing: 1px; }
        html.typo-swiss .section-title { font-size: clamp(32px, 4vw, 56px); }

        /* Typography 4: Geometric — Jost + Outfit + Space Mono */
        html.typo-geometric {
            --font-heading: 'Jost', sans-serif;
            --font-body: 'Outfit', sans-serif;
            --font-accent: 'Space Mono', monospace;
            --heading-weight: 600;
            --heading-transform: none;
            --heading-spacing: -0.02em;
            --heading-line-height: 1.1;
            --body-size: 16px;
            --body-line-height: 1.65;
            --eyebrow-size: 11px;
            --eyebrow-weight: 700;
            --eyebrow-spacing: 3px;
            --eyebrow-transform: uppercase;
            --eyebrow-style: normal;
            --nav-weight: 500;
            --nav-transform: uppercase;
            --nav-spacing: 2px;
            --nav-size: 12px;
            --tag-font: 'Space Mono', monospace;
            --tag-size: 10px;
        }
        html.typo-geometric .hero__title { font-size: clamp(38px, 5.5vw, 76px); }
        html.typo-geometric .category-card__tag { font-family: 'Space Mono', monospace; letter-spacing: 0.5px; }

        /* Typography 5: Heritage — Cormorant Garamond + EB Garamond */
        html.typo-heritage {
            --font-heading: 'Cormorant Garamond', serif;
            --font-body: 'EB Garamond', serif;
            --font-accent: 'Cormorant Garamond', serif;
            --heading-weight: 700;
            --heading-transform: none;
            --heading-spacing: 0em;
            --heading-line-height: 1.15;
            --body-size: 18px;
            --body-line-height: 1.8;
            --eyebrow-size: 13px;
            --eyebrow-weight: 600;
            --eyebrow-spacing: 2px;
            --eyebrow-transform: uppercase;
            --eyebrow-style: normal;
            --nav-weight: 600;
            --nav-transform: none;
            --nav-spacing: 1px;
            --nav-size: 15px;
            --tag-font: 'EB Garamond', serif;
            --tag-size: 13px;
        }
        html.typo-heritage .hero__title { font-size: clamp(40px, 6vw, 82px); }
        html.typo-heritage .hero__description { font-family: 'EB Garamond', serif; font-size: 19px; }

        /* Typography 6: Minimal — Plus Jakarta Sans + Manrope */
        html.typo-minimal {
            --font-heading: 'Plus Jakarta Sans', sans-serif;
            --font-body: 'Manrope', sans-serif;
            --font-accent: 'Plus Jakarta Sans', sans-serif;
            --heading-weight: 700;
            --heading-transform: none;
            --heading-spacing: -0.03em;
            --heading-line-height: 1.1;
            --body-size: 15px;
            --body-line-height: 1.6;
            --eyebrow-size: 11px;
            --eyebrow-weight: 600;
            --eyebrow-spacing: 2px;
            --eyebrow-transform: uppercase;
            --eyebrow-style: normal;
            --nav-weight: 600;
            --nav-transform: none;
            --nav-spacing: 0.5px;
            --nav-size: 14px;
            --tag-font: 'Manrope', sans-serif;
            --tag-size: 11px;
        }
        html.typo-minimal .hero__title { font-size: clamp(36px, 5vw, 70px); }
        html.typo-minimal .section-title { font-size: clamp(28px, 3.5vw, 48px); }

        /* ============================================
           MENU LAYOUTS
           ============================================ */
        /* Menu 2: Centered (logo center, nav below) */
        .header.menu-centered .header__container {
            flex-direction: column; height: auto; padding-top: 16px; padding-bottom: 0;
        }
        .header.menu-centered .header__logo { margin-bottom: 12px; }
        .header.menu-centered .nav-desktop {
            width: 100%; border-top: 1px solid rgba(255,255,255,0.15);
        }
        .header.menu-centered.header--scrolled .nav-desktop { border-top-color: var(--orient-gray-200); }
        .header.menu-centered .nav-desktop__list { justify-content: center; width: 100%; }
        .header.menu-centered .nav-desktop__link { padding: 16px 24px; letter-spacing: 3px; font-size: 11px; }
        .header.menu-centered .header__actions { position: absolute; right: 40px; top: 16px; }
        .header.menu-centered .mega-menu {
            top: auto; width: calc(100vw - 40px);
        }
        .header.menu-centered .nav-desktop__item:hover .mega-menu { transform: translateX(-50%) translateY(0); }

        /* Menu 3: Minimal (hamburger only, full-screen overlay) */
        .header.menu-minimal .nav-desktop { display: none !important; }
        .header.menu-minimal .hamburger { display: flex !important; }
        .fullscreen-menu {
            position: fixed; inset: 0; background: var(--orient-navy);
            z-index: 998; display: flex; flex-direction: column;
            justify-content: center; align-items: center;
            opacity: 0; visibility: hidden;
            transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .fullscreen-menu.open { opacity: 1; visibility: visible; }
        .fullscreen-menu__link {
            display: block; font-family: var(--font-heading);
            font-size: clamp(28px, 5vw, 48px); font-weight: var(--heading-weight);
            color: rgba(255,255,255,0.6); padding: 10px 0;
            letter-spacing: 2px; transition: all 0.4s ease;
            transform: translateY(20px); opacity: 0;
        }
        .fullscreen-menu.open .fullscreen-menu__link { transform: translateY(0); opacity: 1; }
        .fullscreen-menu__link:nth-child(1) { transition-delay: 0.1s; }
        .fullscreen-menu__link:nth-child(2) { transition-delay: 0.15s; }
        .fullscreen-menu__link:nth-child(3) { transition-delay: 0.2s; }
        .fullscreen-menu__link:nth-child(4) { transition-delay: 0.25s; }
        .fullscreen-menu__link:hover { color: white; transform: translateX(10px) !important; }
        .fullscreen-menu__helpline {
            margin-top: 40px; font-family: var(--font-heading);
            font-size: 14px; font-weight: 600; color: var(--orient-gold);
            letter-spacing: 2px; opacity: 0; transition: opacity 0.4s 0.35s ease;
        }
        .fullscreen-menu.open .fullscreen-menu__helpline { opacity: 1; }

        /* ============================================
           MENU SUB-STYLE OPTIONS
           ============================================ */
        /* --- Classic: Bordered --- */
        .header.menu-classic.menustyle-bordered .nav-desktop__link {
            border-bottom: 2px solid transparent; padding-bottom: 6px;
        }
        .header.menu-classic.menustyle-bordered .nav-desktop__link:hover { border-bottom-color: currentColor; }
        .header.menu-classic.menustyle-bordered.header--scrolled .nav-desktop__link:hover { border-bottom-color: var(--orient-blue); }

        /* --- Classic: Pill --- */
        .header.menu-classic.menustyle-pill .nav-desktop__link {
            margin: 0 4px; border-radius: 50px; padding: 10px 20px;
        }
        .header.menu-classic.menustyle-pill .nav-desktop__link:hover { background: rgba(255,255,255,0.15); }
        .header.menu-classic.menustyle-pill.header--scrolled .nav-desktop__link:hover { background: rgba(3,78,162,0.08); }

        /* --- Classic: Underline --- */
        .header.menu-classic.menustyle-underline .nav-desktop__link { position: relative; }
        .header.menu-classic.menustyle-underline .nav-desktop__link::after {
            content: ''; position: absolute; bottom: 18px; left: 20px; right: 20px;
            height: 2px; background: currentColor; transform: scaleX(0);
            transform-origin: right; transition: transform 0.4s var(--transition-smooth);
        }
        .header.menu-classic.menustyle-underline .nav-desktop__link:hover::after { transform: scaleX(1); transform-origin: left; }
        .header.menu-classic.menustyle-underline.header--scrolled .nav-desktop__link::after { background: var(--orient-blue); }

        /* --- Centered: Stacked --- */
        .header.menu-centered.menustyle-stacked .header__container { gap: 8px; padding-top: 20px; }
        .header.menu-centered.menustyle-stacked .header__logo img { height: 48px; }
        .header.menu-centered.menustyle-stacked .nav-desktop__link { padding: 18px 28px; font-size: 12px; letter-spacing: 4px; }

        /* --- Centered: Ribbon --- */
        .header.menu-centered.menustyle-ribbon .nav-desktop {
            background: var(--orient-blue); width: calc(100% + 80px); margin: 0 -40px;
            border-top: none; padding: 0 40px;
        }
        .header.menu-centered.menustyle-ribbon .nav-desktop__link { color: white !important; padding: 14px 24px; font-size: 11px; }
        .header.menu-centered.menustyle-ribbon .nav-desktop__link:hover { background: rgba(255,255,255,0.15); }
        .header.menu-centered.menustyle-ribbon.header--scrolled .nav-desktop { background: var(--orient-blue); }

        /* --- Centered: Floating --- */
        .header.menu-centered.menustyle-floating .nav-desktop { border-top: none; gap: 8px; padding: 8px 0; }
        .header.menu-centered.menustyle-floating .nav-desktop__list { gap: 8px; }
        .header.menu-centered.menustyle-floating .nav-desktop__link {
            background: rgba(255,255,255,0.1); padding: 10px 20px; border-radius: 10px;
            backdrop-filter: blur(8px); transition: all 0.3s ease;
        }
        .header.menu-centered.menustyle-floating .nav-desktop__link:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }
        .header.menu-centered.menustyle-floating.header--scrolled .nav-desktop__link {
            background: var(--orient-gray-100); color: var(--orient-gray-800);
        }
        .header.menu-centered.menustyle-floating.header--scrolled .nav-desktop__link:hover {
            background: var(--orient-blue); color: white;
        }

        /* --- Minimal: Slide (from right) --- */
        .fullscreen-menu.menustyle-slide {
            opacity: 1 !important; visibility: hidden;
            transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.77,0,0.175,1), visibility 0s 0.5s;
        }
        .fullscreen-menu.menustyle-slide.open { visibility: visible; transform: translateX(0); transition: transform 0.5s cubic-bezier(0.77,0,0.175,1), visibility 0s; }
        .fullscreen-menu.menustyle-slide .fullscreen-menu__link { opacity: 1; transform: translateX(40px); }
        .fullscreen-menu.menustyle-slide.open .fullscreen-menu__link { transform: translateX(0); }

        /* --- Minimal: Curtain (from top) --- */
        .fullscreen-menu.menustyle-curtain {
            opacity: 1 !important; visibility: hidden;
            clip-path: inset(0 0 100% 0); transition: clip-path 0.6s cubic-bezier(0.19,1,0.22,1), visibility 0s 0.6s;
        }
        .fullscreen-menu.menustyle-curtain.open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 0.6s cubic-bezier(0.19,1,0.22,1), visibility 0s; }
        .fullscreen-menu.menustyle-curtain .fullscreen-menu__link { opacity: 1; transform: translateY(-30px); }
        .fullscreen-menu.menustyle-curtain.open .fullscreen-menu__link { transform: translateY(0); }

        /* --- Minimal: Circular (radial layout) --- */
        .fullscreen-menu.menustyle-circular { opacity: 0; visibility: hidden; transition: all 0.5s ease; }
        .fullscreen-menu.menustyle-circular.open { opacity: 1; visibility: visible; }
        .fullscreen-menu.menustyle-circular.open .fullscreen-menu__link {
            opacity: 1; transform: none;
        }
        .fullscreen-menu.menustyle-circular .fullscreen-menu__link {
            text-align: center; font-size: clamp(20px, 3.5vw, 36px);
            padding: 16px 40px; border: 1px solid rgba(255,255,255,0.1);
            border-radius: 50px; margin: 6px 0;
        }
        .fullscreen-menu.menustyle-circular .fullscreen-menu__link:hover {
            background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3);
            transform: scale(1.05) !important;
        }

        /* ============================================
           SLIDER DOT STYLES
           ============================================ */
        /* --- Horizontal: Circles --- */
        .hero.dots-h-circles .hero__dot {
            width: 10px; height: 10px; border-radius: 50%;
            background: rgba(255,255,255,0.35); overflow: hidden;
        }
        .hero.dots-h-circles .hero__dot.active { width: 10px; background: rgba(255,255,255,0.95); }
        .hero.dots-h-circles .hero__dot-progress { display: none; }

        /* --- Horizontal: Numbers --- */
        .hero.dots-h-numbers .hero__dots { counter-reset: heroDot; gap: 14px; }
        .hero.dots-h-numbers .hero__dot {
            width: auto; height: auto; padding: 4px 0; background: transparent; overflow: visible;
        }
        .hero.dots-h-numbers .hero__dot::before {
            counter-increment: heroDot; content: counter(heroDot, decimal-leading-zero);
            font: 600 13px/1 var(--font-heading); letter-spacing: 0.08em;
            color: rgba(255,255,255,0.4); transition: color 0.3s ease;
        }
        .hero.dots-h-numbers .hero__dot.active::before { color: rgba(255,255,255,0.95); }
        .hero.dots-h-numbers .hero__dot-progress {
            top: auto; bottom: -3px; height: 2px; border-radius: 2px;
        }

        /* --- Vertical (shared) --- */
        .hero.dots-v-bars .hero__dots,
        .hero.dots-v-circles .hero__dots,
        .hero.dots-v-numbers .hero__dots {
            right: 40px; left: auto; top: 50%; bottom: auto;
            transform: translateY(-50%); flex-direction: column;
            align-items: center; justify-content: center;
        }
        .hero.dots-v-bars .hero__arrows,
        .hero.dots-v-circles .hero__arrows,
        .hero.dots-v-numbers .hero__arrows { right: 80px; }

        /* --- Vertical: Bars --- */
        .hero.dots-v-bars .hero__dot { width: 4px; height: 40px; border-radius: 4px; }
        .hero.dots-v-bars .hero__dot.active { width: 4px; height: 60px; }
        .hero.dots-v-bars .hero__dot-progress { width: 100% !important; left: 0; bottom: 0; top: auto; }

        /* --- Vertical: Circles --- */
        .hero.dots-v-circles .hero__dot {
            width: 10px; height: 10px; border-radius: 50%;
            background: rgba(255,255,255,0.35); overflow: hidden;
        }
        .hero.dots-v-circles .hero__dot.active { width: 10px; background: rgba(255,255,255,0.95); }
        .hero.dots-v-circles .hero__dot-progress { display: none; }

        /* --- Vertical: Numbers --- */
        .hero.dots-v-numbers .hero__dots { counter-reset: heroDot; gap: 14px; align-items: flex-end; }
        .hero.dots-v-numbers .hero__dot {
            width: auto; height: auto; padding: 4px 0; background: transparent; overflow: visible;
        }
        .hero.dots-v-numbers .hero__dot::before {
            counter-increment: heroDot; content: counter(heroDot, decimal-leading-zero);
            font: 600 13px/1 var(--font-heading); letter-spacing: 0.08em;
            color: rgba(255,255,255,0.4); transition: color 0.3s ease;
        }
        .hero.dots-v-numbers .hero__dot.active::before { color: rgba(255,255,255,0.95); }
        .hero.dots-v-numbers .hero__dot-progress { display: none; }

        /* ============================================
           SLIDER DOTS ALIGNMENT
           ============================================ */
        /* -- Horizontal Dots: Left (default), Center, Right -- */
        .hero.dotalign-h-center .hero__dots {
            left: 50%; right: auto; transform: translateX(-50%);
        }
        .hero.dotalign-h-right .hero__dots {
            left: auto; right: 80px; transform: none;
        }
        /* -- Vertical Dots: Horizontal position — Left, Right (default) -- */
        .hero.dotalign-v-left .hero__dots {
            left: 40px; right: auto;
        }
        /* (right is default for vertical, no class needed) */

        /* -- Vertical Dots: Vertical position — Top, Middle (default), Bottom -- */
        .hero.dotalign-v-top .hero__dots {
            top: 120px; bottom: auto; transform: none;
        }
        .hero.dotalign-v-bottom .hero__dots {
            top: auto; bottom: 60px; transform: none;
        }
        /* (middle is default for vertical — already top:50%; transform:translateY(-50%)) */

        /* ============================================
           SLIDER ARROWS ALIGNMENT
           ============================================ */
        /* -- Arrows: Bottom-Right (default) -- */

        /* -- Arrows: Bottom-Left -- */
        .hero.arrowalign-bl .hero__arrows {
            right: auto; left: 80px; bottom: 60px; top: auto;
            flex-direction: row;
        }
        /* -- Arrows: Bottom-Center -- */
        .hero.arrowalign-bc .hero__arrows {
            right: auto; left: 50%; bottom: 60px; top: auto;
            transform: translateX(-50%); flex-direction: row;
        }
        /* -- Arrows: Middle-Left (vertical stack) -- */
        .hero.arrowalign-ml .hero__arrows {
            right: auto; left: 40px; top: 50%; bottom: auto;
            transform: translateY(-50%); flex-direction: column;
        }
        /* -- Arrows: Middle-Right (vertical stack) -- */
        .hero.arrowalign-mr .hero__arrows {
            right: 40px; left: auto; top: 50%; bottom: auto;
            transform: translateY(-50%); flex-direction: column;
        }
        /* -- Arrows: Split Sides (prev left, next right, center-aligned) -- */
        .hero.arrowalign-split .hero__arrows {
            position: static; display: contents;
        }
        .hero.arrowalign-split .hero__arrow {
            position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
        }
        .hero.arrowalign-split .hero__arrow:first-child { left: 40px; }
        .hero.arrowalign-split .hero__arrow:last-child { right: 40px; }
        /* -- Arrows: Top-Right -- */
        .hero.arrowalign-tr .hero__arrows {
            right: 80px; left: auto; top: 100px; bottom: auto;
            flex-direction: row;
        }

        /* Override vertical-dot arrow shift when explicit arrow alignment is set */
        .hero[class*="arrowalign-"][class*="dots-v-"] .hero__arrows { right: auto; }
        .hero.arrowalign-br[class*="dots-v-"] .hero__arrows { right: 80px; }
        .hero.arrowalign-mr[class*="dots-v-"] .hero__arrows { right: 40px; }
        .hero.arrowalign-tr[class*="dots-v-"] .hero__arrows { right: 80px; }

        /* Responsive overrides for alignment */
        @media (max-width: 1024px) {
            .hero.dotalign-h-right .hero__dots { right: 40px; }
            .hero.arrowalign-bl .hero__arrows { left: 40px; }
            .hero.arrowalign-tr .hero__arrows { right: 40px; }
            .hero.arrowalign-split .hero__arrow:first-child { left: 20px; }
            .hero.arrowalign-split .hero__arrow:last-child { right: 20px; }
        }
        @media (max-width: 768px) {
            .hero.dotalign-h-right .hero__dots { right: 20px; }
            .hero.dotalign-h-center .hero__dots { left: 50%; }
            .hero.dotalign-v-left .hero__dots { left: 20px; }
            .hero.arrowalign-bl .hero__arrows { left: 20px; }
            .hero.arrowalign-bc .hero__arrows { bottom: 24px; }
            .hero.arrowalign-ml .hero__arrows { left: 16px; }
            .hero.arrowalign-mr .hero__arrows { right: 16px; }
            .hero.arrowalign-tr .hero__arrows { right: 20px; top: 90px; }
        }

        /* ============================================
           SLIDER TRANSITION STYLES
           ============================================ */
        /* --- Zoom --- */
        .hero.slide-zoom .hero__slide { transform: scale(1.05); transition: opacity 0.7s ease, transform 0.7s ease; }
        .hero.slide-zoom .hero__slide.active { transform: scale(1); }
        .hero.slide-zoom .hero__slide.exiting { transform: scale(0.97); opacity: 0; }

        /* --- Horizontal Slide --- */
        .hero.slide-slide .hero__slide { transform: translateX(6%); transition: opacity 0.7s ease, transform 0.7s ease; }
        .hero.slide-slide .hero__slide.active { transform: translateX(0); }
        .hero.slide-slide .hero__slide.exiting { transform: translateX(-6%); opacity: 0; }

        /* --- Blur --- */
        .hero.slide-blur .hero__slide { filter: blur(12px); transform: scale(1.02); transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s ease; }
        .hero.slide-blur .hero__slide.active { filter: blur(0); transform: scale(1); }
        .hero.slide-blur .hero__slide.exiting { filter: blur(12px); opacity: 0; }

        /* --- 3D Flip --- */
        .hero.slide-flip { perspective: 1200px; }
        .hero.slide-flip .hero__slide { transform: rotateY(12deg); transition: opacity 0.8s ease, transform 0.8s ease; backface-visibility: hidden; }
        .hero.slide-flip .hero__slide.active { transform: rotateY(0deg); }
        .hero.slide-flip .hero__slide.exiting { transform: rotateY(-12deg); opacity: 0; }

        /* --- Curtain Wipe --- */
        .hero.slide-curtain .hero__slide { clip-path: inset(0 0 100% 0); opacity: 1; transition: clip-path 0.8s ease; }
        .hero.slide-curtain .hero__slide.active { clip-path: inset(0 0 0 0); }
        .hero.slide-curtain .hero__slide.exiting { clip-path: inset(100% 0 0 0); }

        /* ============================================
           SLIDER TEXT STYLES
           ============================================ */
        /* --- Bold (Oversized dramatic) --- */
        .hero.stext-bold .hero__title {
            font-size: clamp(44px, 8vw, 96px); font-weight: 900;
            text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.95;
        }
        .hero.stext-bold .hero__series { opacity: 0; visibility: hidden; height: 0; margin: 0; }
        .hero.stext-bold .hero__description { display: none; }
        .hero.stext-bold .hero__cta-group { margin-top: 40px; }

        /* --- Elegant (Serif, warm) --- */
        .hero.stext-elegant .hero__title {
            font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400;
            font-size: clamp(34px, 6vw, 72px); color: #FFF8E7; line-height: 1.15;
        }
        .hero.stext-elegant .hero__series {
            color: #C8A96E; letter-spacing: 6px; position: relative; padding-left: 24px;
        }
        .hero.stext-elegant .hero__series::before {
            content: ''; position: absolute; left: 0; top: 50%; width: 16px; height: 1px; background: #C8A96E;
        }
        .hero.stext-elegant .hero__description { color: #F5E6CC; font-weight: 300; }

        /* --- Neon (Gradient tech) --- */
        .hero.stext-neon .hero__title {
            background: linear-gradient(90deg, #0066FF 0%, #00E5FF 100%);
            -webkit-background-clip: text; background-clip: text; color: transparent;
            font-size: clamp(36px, 7vw, 80px); font-weight: 800; line-height: 1;
        }
        .hero.stext-neon .hero__series { color: #00E5FF; letter-spacing: 4px; text-shadow: 0 0 10px rgba(0,229,255,0.5); }
        .hero.stext-neon .hero__description { color: rgba(255,255,255,0.7); font-family: 'JetBrains Mono', monospace; font-size: 14px; }

        /* --- Minimal (Understated) --- */
        .hero.stext-minimal .hero__title {
            color: rgba(255,255,255,0.6); font-weight: 300;
            font-size: clamp(28px, 4vw, 48px); letter-spacing: 0.02em;
        }
        .hero.stext-minimal .hero__series { color: rgba(255,255,255,0.35); font-size: 10px; letter-spacing: 6px; }
        .hero.stext-minimal .hero__description { display: none; }
        .hero.stext-minimal .hero__cta-group { margin-top: 48px; }
        .hero.stext-minimal .btn { background: transparent; border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.6); }

        /* --- Cinematic (Letterboxed, film) --- */
        .hero.stext-cinematic::before, .hero.stext-cinematic::after {
            content: ''; position: absolute; left: 0; width: 100%; height: 100px;
            background: #000; z-index: 5; pointer-events: none;
        }
        .hero.stext-cinematic::before { top: 0; }
        .hero.stext-cinematic::after { bottom: 0; }
        .hero.stext-cinematic .hero__content { text-align: center; align-items: center; }
        .hero.stext-cinematic .hero__title {
            color: #FFD54F; font-size: clamp(32px, 5vw, 64px); font-weight: 700;
            letter-spacing: 0.05em; text-transform: uppercase;
        }
        .hero.stext-cinematic .hero__series { color: #FF8F00; letter-spacing: 6px; }
        .hero.stext-cinematic .hero__description { color: rgba(255,255,255,0.8); text-align: center; }
        .hero.stext-cinematic .hero__cta-group { justify-content: center; }

        /* --- CP: Menu sub-options row --- */
        .cp-substyle-row { display: flex; gap: 4px; margin-top: 6px; }
        .cp-substyle-btn {
            flex: 1; padding: 4px 2px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1);
            background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5);
            font-family: var(--font-heading); font-size: 7px; font-weight: 600;
            letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer;
            transition: all 0.3s ease; text-align: center; line-height: 1.2;
        }
        .cp-substyle-btn:hover { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.8); }
        .cp-substyle-btn.active { border-color: rgba(255,255,255,0.6); color: white; background: rgba(255,255,255,0.1); }

        /* --- CP: Slider options grids --- */
        .cp-dots-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
        .cp-dots-btn {
            padding: 6px 4px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1);
            background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5);
            font-family: var(--font-heading); font-size: 7px; font-weight: 600;
            letter-spacing: 0.3px; text-transform: uppercase; cursor: pointer;
            transition: all 0.3s ease; text-align: center; line-height: 1.3;
        }
        .cp-dots-btn:hover { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.8); }
        .cp-dots-btn.active { border-color: rgba(255,255,255,0.6); color: white; background: rgba(255,255,255,0.1); }
        .cp-dots-label { font-size: 7px; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin: 6px 0 3px; font-family: var(--font-heading); }

        .cp-transition-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
        .cp-stext-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }

        /* ============================================
           FONT SIZE SCALING
           ============================================ */
        html { --font-scale: 1; }
        body { font-size: calc(16px * var(--font-scale)); }
        .hero__title { font-size: calc(clamp(36px, 5.5vw, 72px) * var(--font-scale)); }
        .hero__description { font-size: calc(clamp(15px, 1.3vw, 18px) * var(--font-scale)); }
        .hero__series { font-size: calc(12px * var(--font-scale)); }
        .section-title { font-size: calc(clamp(32px, 4vw, 52px) * var(--font-scale)); }
        .section-subtitle { font-size: calc(16px * var(--font-scale)); }
        .section-eyebrow { font-size: calc(11px * var(--font-scale)); }
        .nav-desktop__link { font-size: calc(13px * var(--font-scale)); }
        .highlight-card__title { font-size: calc(16px * var(--font-scale)); }
        .highlight-card__desc { font-size: calc(14px * var(--font-scale)); }
        .news-card__title { font-size: calc(18px * var(--font-scale)); }
        .news-card__excerpt { font-size: calc(14px * var(--font-scale)); }
        .footer__col-title { font-size: calc(12px * var(--font-scale)); }
        .footer__link { font-size: calc(14px * var(--font-scale)); }
        .btn { font-size: calc(13px * var(--font-scale)); }
        .timeline__year { font-size: calc(22px * var(--font-scale)); }
        .timeline__label { font-size: calc(12px * var(--font-scale)); }
        .timeline__desc { font-size: calc(12px * var(--font-scale)); }
        .heritage__label { font-size: calc(20px * var(--font-scale)); }
        .heritage__desc { font-size: calc(14px * var(--font-scale)); }
        .heritage__year { font-size: calc(13px * var(--font-scale)); }
        .heritage__header-sub { font-size: calc(14px * var(--font-scale)); }
        .breadcrumb { font-size: calc(13px * var(--font-scale)); }

        /* ============================================
           ACCESSIBILITY OPTIONS
           ============================================ */
        /* --- High Contrast --- */
        html.a11y-contrast {
            --orient-gray-400: #555;
            --orient-gray-600: #333;
            filter: contrast(1.25);
        }
        html.a11y-contrast .hero__overlay {
            background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.85) 100%) !important;
        }
        html.a11y-contrast .hero__description { color: rgba(255,255,255,0.95); }
        html.a11y-contrast .btn--outline { border-color: white; color: white; }
        html.a11y-contrast .category-card__name,
        html.a11y-contrast .section-subtitle { color: var(--orient-gray-800); }

        /* --- Reduced Motion --- */
        html.a11y-nomotion *,
        html.a11y-nomotion *::before,
        html.a11y-nomotion *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
        html.a11y-nomotion .hero__slide { transition: none !important; }
        html.a11y-nomotion .hero__slide .hero__bg { transition: none !important; transform: scale(1) !important; }
        html.a11y-nomotion .hero__slide.active .hero__series,
        html.a11y-nomotion .hero__slide.active .hero__title,
        html.a11y-nomotion .hero__slide.active .hero__description,
        html.a11y-nomotion .hero__slide.active .hero__cta-group {
            transition: none !important; opacity: 1 !important; transform: none !important;
        }

        /* --- Focus Outlines --- */
        html.a11y-focus *:focus-visible {
            outline: 3px solid #FFD600 !important;
            outline-offset: 3px !important;
            box-shadow: 0 0 0 6px rgba(255,214,0,0.25) !important;
        }
        html.a11y-focus a:focus-visible,
        html.a11y-focus button:focus-visible {
            outline: 3px solid #FFD600 !important;
            outline-offset: 3px !important;
        }

        /* --- Dyslexia Font --- */
        html.a11y-dyslexia {
            --font-body: 'Lexend', sans-serif;
            --font-heading: 'Lexend', sans-serif;
        }
        html.a11y-dyslexia body { letter-spacing: 0.04em; word-spacing: 0.12em; line-height: 1.8; }
        html.a11y-dyslexia p,
        html.a11y-dyslexia li,
        html.a11y-dyslexia span { letter-spacing: 0.04em; word-spacing: 0.12em; }

        /* --- Underline Links --- */
        html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; }
        html.a11y-links .btn,
        html.a11y-links .hero__arrow,
        html.a11y-links .footer__social,
        html.a11y-links .cp-btn { text-decoration: none !important; }

        /* --- Large Cursor --- */
        html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 2l20 12-9 2-5 10z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 5 2, auto !important; }
        html.a11y-cursor a, html.a11y-cursor button, html.a11y-cursor [role="button"],
        html.a11y-cursor input, html.a11y-cursor select, html.a11y-cursor textarea {
            cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M10 4v24l5-6h9z' fill='%23034EA2' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 10 4, pointer !important;
        }

        /* --- Reading Guide (horizontal line follows scroll) --- */
        .a11y-reading-guide {
            display: none;
            position: fixed; left: 0; width: 100%;
            height: 3px; background: rgba(255,214,0,0.7);
            z-index: 99999; pointer-events: none;
            box-shadow: 0 0 8px rgba(255,214,0,0.4);
            transition: top 0.05s linear;
        }
        html.a11y-guide .a11y-reading-guide { display: block; }

        /* --- Saturation (grayscale) --- */
        html.a11y-grayscale { filter: grayscale(1); }
        html.a11y-grayscale.a11y-contrast { filter: grayscale(1) contrast(1.25); }

        /* ============================================
           CP: ACCESSIBILITY PANEL STYLES
           ============================================ */
        .cp-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
        .cp-a11y-btn {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 3px; padding: 8px 4px; border-radius: 6px;
            border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03);
            color: rgba(255,255,255,0.45); cursor: pointer;
            font-family: var(--font-heading); font-size: 7px; font-weight: 600;
            letter-spacing: 0.5px; text-transform: uppercase; text-align: center;
            transition: all 0.3s ease; line-height: 1.2;
        }
        .cp-a11y-btn:hover { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); }
        .cp-a11y-btn.active { border-color: #FFD600; color: #FFD600; background: rgba(255,214,0,0.08); }
        .cp-a11y-btn svg { width: 16px; height: 16px; opacity: 0.6; }
        .cp-a11y-btn.active svg { opacity: 1; }

        .cp-fontsize-row {
            display: flex; align-items: center; gap: 8px;
        }
        .cp-fontsize-label {
            font-family: var(--font-heading); font-weight: 800;
            color: rgba(255,255,255,0.7); min-width: 24px; text-align: center;
        }
        .cp-fontsize-label--sm { font-size: 10px; }
        .cp-fontsize-label--lg { font-size: 16px; }
        .cp-fontsize-val {
            font-family: var(--font-heading); font-size: 10px; font-weight: 600;
            color: rgba(255,255,255,0.5); min-width: 32px; text-align: right;
        }
        .cp-reset-btn {
            display: block; width: 100%; margin-top: 6px; padding: 5px;
            border-radius: 4px; border: 1px solid rgba(255,255,255,0.1);
            background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.35);
            font-family: var(--font-heading); font-size: 7px; font-weight: 600;
            letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
            transition: all 0.3s ease; text-align: center;
        }
        .cp-reset-btn:hover { border-color: rgba(255,70,70,0.4); color: rgba(255,70,70,0.7); }

        /* ============================================
           FOOTER LAYOUTS
           ============================================ */
        /* Footer 2: Magazine (light, 60/40 split, newsletter) */
        .footer.footer-magazine { background: var(--orient-off-white); color: var(--orient-gray-800); }
        .footer.footer-magazine .footer__grid { grid-template-columns: 3fr 2fr; }
        .footer.footer-magazine .footer__logo { filter: none; height: 40px; }
        .footer.footer-magazine .footer__brand-tagline {
            font-family: var(--font-heading); font-size: clamp(22px, 2.5vw, 32px);
            font-weight: var(--heading-weight); letter-spacing: var(--heading-spacing);
            line-height: 1.25; color: var(--orient-gray-800); max-width: 400px;
        }
        .footer.footer-magazine .footer__socials { gap: 16px; margin-top: 24px; }
        .footer.footer-magazine .footer__social {
            border-color: var(--orient-gray-200); color: var(--orient-gray-600); width: 48px; height: 48px;
        }
        .footer.footer-magazine .footer__social:hover {
            border-color: var(--orient-blue); color: var(--orient-blue); background: rgba(3,78,162,0.05);
        }
        .footer.footer-magazine .footer__grid > div:nth-child(n+2):not(.footer__links-area) { display: none; }
        .footer__links-area { display: none; }
        .footer.footer-magazine .footer__links-area {
            display: flex !important; flex-direction: column; gap: 28px;
            border-left: 2px solid var(--orient-gray-200); padding-left: 32px;
        }
        .footer.footer-magazine .footer__col-title { color: var(--orient-blue); }
        .footer.footer-magazine .footer__link { color: var(--orient-gray-600); }
        .footer.footer-magazine .footer__link:hover { color: var(--orient-blue); }
        .footer.footer-magazine .footer__bottom { border-top-color: var(--orient-gray-200); color: var(--orient-gray-400); }
        .footer.footer-magazine .footer__bottom a { color: var(--orient-gray-400); }
        .footer__newsletter { display: none; margin-top: 24px; gap: 8px; }
        .footer.footer-magazine .footer__newsletter { display: flex; }
        .footer__newsletter input {
            flex: 1; padding: 12px 20px; border: 1px solid var(--orient-gray-200);
            border-radius: 50px; font-family: var(--font-body); font-size: 14px;
            background: var(--orient-white); color: var(--orient-gray-800); outline: none;
        }
        .footer__newsletter input:focus { border-color: var(--orient-blue); }
        .footer__newsletter button {
            padding: 12px 24px; background: var(--orient-blue); color: white;
            border-radius: 50px; font-family: var(--font-heading); font-size: 12px;
            font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; border: none;
        }

        /* Footer 3: Minimal (centered single column) */
        .footer.footer-minimal { text-align: center; padding: 60px 40px 30px; }
        .footer.footer-minimal .footer__grid {
            display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 600px;
        }
        .footer.footer-minimal .footer__grid > div:nth-child(n+2):not(.footer__inline-links) { display: none; }
        .footer.footer-minimal .footer__brand-tagline { max-width: 400px; text-align: center; }
        .footer.footer-minimal .footer__socials { justify-content: center; }
        .footer__inline-links { display: none; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
        .footer.footer-minimal .footer__inline-links { display: flex; }
        .footer__inline-links a {
            font-size: 14px; color: rgba(255,255,255,0.5); transition: color 0.3s ease; position: relative;
        }
        .footer__inline-links a::after {
            content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px;
            background: var(--orient-blue-light); transform: scaleX(0); transition: transform 0.3s ease;
        }
        .footer__inline-links a:hover { color: rgba(255,255,255,0.9); }
        .footer__inline-links a:hover::after { transform: scaleX(1); }
        .footer.footer-minimal .footer__bottom { border-top: none; padding-top: 16px; }
        .footer.footer-minimal .footer__legal { display: none; }

        /* Layout transitions */
        .header, .footer { transition: opacity 0.15s ease, background 0.5s ease; }

        /* ============================================
           NEW SHOWCASE COMPONENTS
           ============================================ */

        /* --- Parallax Image Band --- */
        .parallax-band {
            height: 50vh;
            min-height: 380px;
            background-attachment: fixed;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .parallax-band__overlay {
            position: absolute; inset: 0;
            background: linear-gradient(135deg, rgba(3,78,162,0.75) 0%, rgba(10,22,40,0.8) 100%);
        }
        .parallax-band__content { position: relative; z-index: 2; max-width: 700px; padding: 0 40px; }
        .parallax-band__title {
            font-family: var(--font-heading);
            font-size: clamp(28px, 4vw, 52px);
            font-weight: var(--heading-weight, 800);
            color: white;
            margin-bottom: 12px;
            text-shadow: 0 2px 20px rgba(0,0,0,0.3);
        }
        .parallax-band__sub { font-size: 17px; color: rgba(255,255,255,0.8); }
        @media (max-width: 768px) { .parallax-band { background-attachment: scroll; height: 40vh; } }

        /* --- Testimonials --- */
        .testimonials { background: var(--orient-white); }
        .testimonial-wrapper { position: relative; max-width: 720px; margin: 0 auto; min-height: 260px; }
        .testimonial-card {
            position: absolute; inset: 0;
            background: var(--orient-white);
            border: 1px solid var(--orient-gray-200);
            border-radius: 20px;
            padding: 40px 48px;
            text-align: center;
            opacity: 0;
            transition: opacity 0.6s ease;
        }
        .testimonial-card.active { opacity: 1; position: relative; }
        .testimonial-card__quote {
            font-size: 18px;
            font-style: italic;
            color: var(--orient-gray-800);
            line-height: 1.7;
            margin-bottom: 24px;
        }
        .testimonial-card__quote::before {
            content: '\201C';
            display: block;
            font-size: 48px;
            color: var(--orient-gold);
            font-family: serif;
            line-height: 1;
            margin-bottom: 8px;
        }
        .testimonial-card__stars { color: var(--orient-gold); font-size: 18px; margin-bottom: 8px; letter-spacing: 3px; }
        .testimonial-card__name { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--orient-gray-800); }
        .testimonial-card__location { font-size: 13px; color: var(--orient-gray-400); }
        .testimonial-dots {
            display: flex; justify-content: center; gap: 8px; margin-top: 24px;
        }
        .testimonial-dot {
            width: 10px; height: 10px; border-radius: 50%;
            background: var(--orient-gray-200); cursor: pointer;
            transition: all 0.3s ease; border: none;
        }
        .testimonial-dot.active { background: var(--orient-blue); transform: scale(1.3); }

        /* --- Product Showcase Carousel --- */
        .showcase { background: var(--orient-off-white); }
        .showcase__track {
            display: flex; gap: 24px; overflow-x: auto;
            padding: 20px 0; scrollbar-width: none;
            scroll-snap-type: x mandatory;
        }
        .showcase__track::-webkit-scrollbar { display: none; }
        .showcase-card {
            flex: 0 0 320px; scroll-snap-align: start;
            background: var(--orient-white); border-radius: 20px;
            border: 1px solid var(--orient-gray-200);
            overflow: hidden; transition: all 0.4s var(--transition-smooth);
        }
        .showcase-card:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(0,0,0,0.12); }
        .showcase-card__img {
            height: 220px; display: flex; align-items: center; justify-content: center;
            padding: 24px; background: var(--orient-gray-100);
        }
        .showcase-card__img img { max-height: 180px; object-fit: contain; transition: transform 0.5s ease; }
        .showcase-card:hover .showcase-card__img img { transform: scale(1.08); }
        .showcase-card__body { padding: 24px; }
        .showcase-card__name { font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: var(--orient-gray-800); margin-bottom: 8px; }
        .showcase-card__specs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
        .showcase-card__spec {
            font-size: 10px; font-weight: 600; padding: 4px 10px; border-radius: 20px;
            background: rgba(3,78,162,0.08); color: var(--orient-blue);
        }
        .showcase-card__price {
            font-family: var(--font-heading); font-size: 20px; font-weight: 800;
            color: var(--orient-gold); margin-bottom: 16px;
        }
        .showcase-card__btn {
            width: 100%; padding: 12px; background: var(--orient-blue); color: white;
            border: none; border-radius: 10px; font-family: var(--font-heading);
            font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
            cursor: pointer; transition: all 0.3s ease;
        }
        .showcase-card__btn:hover { background: var(--orient-blue-dark); transform: translateY(-2px); }

        /* --- Before/After Comparison --- */
        .comparison { background: var(--orient-gray-100); }
        .comparison__box {
            max-width: 800px; margin: 0 auto; position: relative;
            height: 360px; border-radius: 20px; overflow: hidden;
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
        }
        .comparison__side {
            position: absolute; top: 0; height: 100%; display: flex;
            flex-direction: column; align-items: center; justify-content: center;
            padding: 40px; text-align: center;
        }
        .comparison__before {
            left: 0; width: 50%;
            background: linear-gradient(135deg, #dc3545, #ff6b6b);
            color: white; z-index: 1;
        }
        .comparison__after {
            right: 0; width: 100%;
            background: linear-gradient(135deg, var(--orient-blue), var(--orient-navy));
            color: white;
        }
        .comparison__side-label {
            font-family: var(--font-heading); font-size: 11px; font-weight: 700;
            letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px;
            opacity: 0.7;
        }
        .comparison__side-value {
            font-family: var(--font-heading); font-size: clamp(24px, 4vw, 42px);
            font-weight: 800; margin-bottom: 8px;
        }
        .comparison__side-detail { font-size: 14px; opacity: 0.8; }
        .comparison__handle {
            position: absolute; top: 0; left: 50%; width: 4px; height: 100%;
            background: white; transform: translateX(-50%); cursor: ew-resize; z-index: 3;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }
        .comparison__handle-circle {
            position: absolute; top: 50%; left: 50%; width: 44px; height: 44px;
            background: white; border-radius: 50%; transform: translate(-50%,-50%);
            box-shadow: 0 4px 16px rgba(0,0,0,0.2);
            display: flex; align-items: center; justify-content: center;
            font-size: 16px; color: var(--orient-navy);
        }
        .comparison__labels {
            display: flex; justify-content: space-between; max-width: 800px;
            margin: 16px auto 0; font-family: var(--font-heading);
            font-size: 12px; font-weight: 600; letter-spacing: 1px;
            text-transform: uppercase; color: var(--orient-gray-600);
        }

        /* --- Video Hero / Promo Banner --- */
        .video-hero {
            height: 60vh; min-height: 400px;
            background-size: cover; background-position: center;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            text-align: center; position: relative; overflow: hidden;
        }
        .video-hero__overlay {
            position: absolute; inset: 0;
            background: rgba(0,0,0,0.45);
        }
        .video-hero__content { position: relative; z-index: 2; max-width: 550px; padding: 0 40px; }
        .video-hero__title {
            font-family: var(--font-heading);
            font-size: clamp(28px, 4vw, 44px);
            font-weight: var(--heading-weight, 800);
            color: white; margin-bottom: 8px;
        }
        .video-hero__sub { font-size: 16px; color: rgba(255,255,255,0.8); margin-bottom: 32px; }
        .video-hero__play {
            width: 80px; height: 80px; border-radius: 50%;
            background: rgba(255,255,255,0.9); border: none;
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto; cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
        }
        .video-hero__play:hover { transform: scale(1.15); background: white; }
        .video-hero__play svg { width: 28px; height: 28px; color: var(--orient-navy); margin-left: 4px; }

        /* --- Timeline --- */
        .timeline { background: var(--orient-white); overflow: hidden; }
        .timeline__track {
            display: flex; gap: 0; overflow-x: auto;
            padding: 20px 0 40px; scrollbar-width: none;
            position: relative;
        }
        .timeline__track::-webkit-scrollbar { display: none; }
        .timeline__track::before {
            content: ''; position: absolute; top: 38px;
            left: 0; right: 0; height: 2px;
            background: var(--orient-gray-200);
        }
        .timeline__item {
            flex: 0 0 200px; text-align: center;
            position: relative; padding-top: 60px;
        }
        .timeline__dot {
            position: absolute; top: 22px; left: 50%;
            transform: translateX(-50%);
            width: 32px; height: 32px; border-radius: 50%;
            background: var(--orient-blue); color: white;
            display: flex; align-items: center; justify-content: center;
            font-size: 10px; font-weight: 700;
            box-shadow: 0 4px 12px rgba(3,78,162,0.3);
            transition: all 0.3s ease; z-index: 1;
        }
        .timeline__item:hover .timeline__dot { transform: translateX(-50%) scale(1.2); }
        .timeline__year {
            font-family: var(--font-heading); font-size: 22px; font-weight: 800;
            color: var(--orient-blue); margin-bottom: 4px;
        }
        .timeline__label {
            font-family: var(--font-heading); font-size: 12px; font-weight: 700;
            color: var(--orient-gray-800); margin-bottom: 4px; text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .timeline__desc { font-size: 12px; color: var(--orient-gray-600); padding: 0 12px; }

        /* --- Heritage Timeline (Alternate) --- */
        .heritage-timeline { display: none; }
        html.timeline-heritage .timeline { display: none; }
        html.timeline-heritage .heritage-timeline { display: block; }

        .heritage-timeline {
            background: var(--orient-navy); color: white;
            padding: 100px 40px; overflow: hidden;
        }
        .heritage__container { max-width: 1000px; margin: 0 auto; }
        .heritage__header { text-align: center; margin-bottom: 80px; }
        .heritage__counter {
            font-family: var(--font-heading); font-size: clamp(5rem, 12vw, 9rem);
            font-weight: 800; line-height: 1; letter-spacing: -4px; margin: 0;
            background: linear-gradient(180deg, #ffffff 20%, var(--orient-gold, #C8A96E) 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .heritage__header-sub {
            font-family: var(--font-heading); font-size: 14px; font-weight: 600;
            letter-spacing: 5px; text-transform: uppercase;
            color: var(--orient-gold, #C8A96E); margin-top: 8px;
        }
        .heritage__header-line {
            width: 60px; height: 2px; margin: 24px auto 0;
            background: linear-gradient(90deg, transparent, var(--orient-gold, #C8A96E), transparent);
        }

        /* Vertical spine */
        .heritage__path { position: relative; padding: 20px 0; }
        .heritage__path::before {
            content: ''; position: absolute; left: 50%; transform: translateX(-50%);
            top: 0; bottom: 0; width: 1px;
            background: linear-gradient(to bottom, transparent 0%, var(--orient-gold, #C8A96E) 10%, var(--orient-gold, #C8A96E) 90%, transparent 100%);
        }

        /* Milestone cards - zigzag */
        .heritage__milestone {
            position: relative; width: 50%; margin-bottom: 48px;
            opacity: 0; transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        .heritage__milestone.visible { opacity: 1; transform: translateY(0); }
        .heritage__milestone:nth-child(odd) {
            padding-right: 60px; text-align: right;
        }
        .heritage__milestone:nth-child(even) {
            margin-left: 50%; padding-left: 60px; text-align: left;
        }

        .heritage__card {
            background: rgba(255,255,255,0.04);
            backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px; padding: 28px 32px;
            transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
        }
        .heritage__card:hover {
            transform: translateY(-6px);
            border-color: rgba(200,169,110,0.4);
            box-shadow: 0 12px 40px rgba(200,169,110,0.08);
        }
        .heritage__year {
            font-family: var(--font-heading); font-size: 13px; font-weight: 700;
            letter-spacing: 3px; color: var(--orient-gold, #C8A96E); margin-bottom: 6px;
        }
        .heritage__label {
            font-family: var(--font-heading); font-size: 20px; font-weight: 700;
            color: white; margin-bottom: 8px; line-height: 1.3;
        }
        .heritage__desc {
            font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.7;
        }

        /* Node dots on the spine */
        .heritage__node {
            position: absolute; top: 32px; width: 14px; height: 14px;
            background: var(--orient-gold, #C8A96E); border-radius: 50%;
            box-shadow: 0 0 20px rgba(200,169,110,0.5), 0 0 40px rgba(200,169,110,0.2);
            z-index: 2;
        }
        .heritage__milestone:nth-child(odd) .heritage__node { right: -7px; }
        .heritage__milestone:nth-child(even) .heritage__node { left: -7px; }

        /* Stagger animation delays */
        .heritage__milestone:nth-child(1) { transition-delay: 0.05s; }
        .heritage__milestone:nth-child(2) { transition-delay: 0.15s; }
        .heritage__milestone:nth-child(3) { transition-delay: 0.25s; }
        .heritage__milestone:nth-child(4) { transition-delay: 0.35s; }
        .heritage__milestone:nth-child(5) { transition-delay: 0.45s; }
        .heritage__milestone:nth-child(6) { transition-delay: 0.55s; }

        /* Mobile: single column */
        @media (max-width: 768px) {
            .heritage-timeline { padding: 60px 20px; }
            .heritage__counter { letter-spacing: -2px; }
            .heritage__path::before { left: 16px; }
            .heritage__milestone,
            .heritage__milestone:nth-child(odd),
            .heritage__milestone:nth-child(even) {
                width: 100%; margin-left: 0; padding-left: 48px; padding-right: 0; text-align: left;
            }
            .heritage__milestone:nth-child(odd) .heritage__node,
            .heritage__milestone:nth-child(even) .heritage__node {
                left: 9px; right: auto;
            }
            .heritage__header { margin-bottom: 48px; }
        }

        /* Theme overrides for heritage section */
        html.theme-luxe .heritage-timeline { background: #1A120B; }
        html.theme-luxe .heritage__counter {
            background: linear-gradient(180deg, #FDF8F0 20%, #B87333 100%);
            -webkit-background-clip: text; background-clip: text;
        }
        html.theme-zen .heritage-timeline { background: #0D1A14; }
        html.theme-zen .heritage__counter {
            background: linear-gradient(180deg, #F5F2ED 20%, #C7A24A 100%);
            -webkit-background-clip: text; background-clip: text;
        }
        html.theme-aurora .heritage-timeline { background: #070A12; }
        html.theme-aurora .heritage__counter {
            background: linear-gradient(180deg, #E0F2FE 20%, #A78BFA 100%);
            -webkit-background-clip: text; background-clip: text;
        }
        html.theme-aurora .heritage__year,
        html.theme-aurora .heritage__header-sub { color: #A78BFA; }
        html.theme-aurora .heritage__node { background: #A78BFA; box-shadow: 0 0 20px rgba(167,139,250,0.5); }
        html.theme-aurora .heritage__path::before {
            background: linear-gradient(to bottom, transparent, #A78BFA, transparent);
        }
        html.theme-aurora .heritage__card:hover { border-color: rgba(167,139,250,0.4); box-shadow: 0 12px 40px rgba(167,139,250,0.1); }
        html.theme-aurora .heritage__header-line { background: linear-gradient(90deg, transparent, #A78BFA, transparent); }

        /* --- Feature Highlights Grid --- */
        .highlights { background: var(--orient-off-white); }
        .highlights__grid {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
        }
        .highlight-card {
            background: var(--orient-white); padding: 36px 28px;
            border-radius: 16px; text-align: center;
            border: 1px solid var(--orient-gray-200);
            transition: all 0.4s var(--transition-smooth);
            position: relative; overflow: hidden;
        }
        .highlight-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 16px 40px rgba(3,78,162,0.1);
            border-color: var(--orient-blue);
        }
        .highlight-card__icon {
            font-size: 36px; margin-bottom: 16px;
            display: block; line-height: 1; color: var(--orient-blue);
        }
        .highlight-card__title {
            font-family: var(--font-heading); font-size: 16px; font-weight: 700;
            color: var(--orient-gray-800); margin-bottom: 8px;
        }
        .highlight-card__desc { font-size: 13px; color: var(--orient-gray-600); line-height: 1.6; }
        @media (max-width: 768px) { .highlights__grid { grid-template-columns: 1fr; } }

        /* --- Newsletter CTA Band --- */
        .cta-band {
            background: linear-gradient(135deg, var(--orient-navy) 0%, var(--orient-blue) 100%);
            color: white; text-align: center; padding: 80px 40px;
            position: relative; overflow: hidden;
        }
        .cta-band::before {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(circle at 70% 30%, rgba(200,169,110,0.1), transparent 50%);
        }
        .cta-band__content { position: relative; z-index: 1; max-width: 580px; margin: 0 auto; }
        .cta-band__title {
            font-family: var(--font-heading); font-size: clamp(24px, 3vw, 36px);
            font-weight: var(--heading-weight, 800); margin-bottom: 12px;
        }
        .cta-band__sub { font-size: 15px; color: rgba(255,255,255,0.75); margin-bottom: 32px; }
        .cta-band__form { display: flex; gap: 8px; max-width: 480px; margin: 0 auto; }
        .cta-band__input {
            flex: 1; padding: 14px 24px; border: none; border-radius: 50px;
            font-family: var(--font-body); font-size: 14px;
            outline: none;
        }
        .cta-band__btn {
            padding: 14px 28px; background: var(--orient-gold); color: var(--orient-navy);
            border: none; border-radius: 50px; font-family: var(--font-heading);
            font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
            text-transform: uppercase; cursor: pointer;
            transition: all 0.3s ease; white-space: nowrap;
        }
        .cta-band__btn:hover { background: #e0c57a; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,169,110,0.4); }
        @media (max-width: 600px) { .cta-band__form { flex-direction: column; } }

        /* Palette control buttons */
        .cp-palette-grid {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
        }
        .cp-palette {
            width: 100%; height: 28px; border-radius: 6px;
            cursor: pointer; border: 2px solid rgba(255,255,255,0.08);
            transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
            position: relative;
        }
        .cp-palette:hover { border-color: rgba(255,255,255,0.4); transform: scale(1.08); }
        .cp-palette.active { border-color: rgba(255,255,255,0.8); box-shadow: 0 0 12px rgba(255,255,255,0.2); }
        .cp-palette-off {
            width: 100%; height: 28px; border-radius: 6px;
            cursor: pointer; border: 2px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.06);
            transition: all 0.3s ease;
            font-family: var(--font-heading); font-size: 8px;
            font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
            color: rgba(255,255,255,0.4); display: flex; align-items: center;
            justify-content: center;
        }
        .cp-palette-off:hover { border-color: rgba(255,255,255,0.4); }
        .cp-palette-off.active { border-color: rgba(255,255,255,0.8); color: white; }