:root {
  /* Primary Colors */
  --primary: #ff6a00;        /* Orange */
  --primary-dark: #cc5500;
  --primary-light: #ff8c33;

  /* Neutral Colors */
  --black: #000000;
  --dark: #121212;
  --gray-dark: #333333;
  --gray: #777777;
  --light-gray: #f5f5f5;

  /* White */
  --white: #ffffff;

  /* Backgrounds */
  --bg-main: #ffffff;
  --bg-dark: #121212;

  /* Text Colors */
  --text-dark: #000000;
  --text-light: #ffffff;
  --text-muted: #777777;

  /* Borders */
  --border-light: #e0e0e0;
}

 :root {
            --primary: #ff6a00;
            --primary-dark: #cc5500;
            --primary-light: #ff8c33;
            --black: #000000;
            --dark: #121212;
            --gray-dark: #333333;
            --gray: #777777;
            --light-gray: #f5f5f5;
            --white: #ffffff;
            --bg-main: #ffffff;
            --bg-dark: #121212;
            --text-dark: #000000;
            --text-light: #ffffff;
            --text-muted: #777777;
            --border-light: #e0e0e0;

            /* Section extras */
            --card-radius: 24px;
            --gap: 14px;
            --orange-pale: #fff3eb;
            --orange-mid: #ffe5cc;
            --dark-card: #181818;
            --warm-card: #fdf6f0;
        }



        /* ─── CATEGORY SECTIONS ─── */
        .categories-wrapper {
            background: #f5f3ef;
            padding: 72px 0px;
        }

        .categories-wrapper>.section-intro {
            margin-bottom: 56px;
        }

        .section-intro .products-label {
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--primary);
            margin-bottom: 6px;
        }

        .section-intro .products-title {
            font-size: 32px;
            font-weight: 700;
            color: #111;
            line-height: 1.2;
        }

        /* ─── SINGLE CATEGORY BLOCK ─── */
        .category-block {
            margin-bottom: 60px;
        }

        .category-block:last-child {
            margin-bottom: 0;
        }

        .category-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 14px;
            border-bottom: 2px solid #e8e3db;
        }

        .category-header-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .category-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: rgba(255, 106, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .category-icon svg {
            width: 18px;
            height: 18px;
            stroke: var(--primary);
        }

        .category-name {
            font-family: 'DM Sans', sans-serif;
            font-size: 20px;
            font-weight: 700;
            color: #111;
            line-height: 1.2;
        }

        .category-subtitle {
            font-size: 12px;
            color: #999;
            font-weight: 400;
            margin-top: 2px;
        }

        .btn-view-all {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 500;
            color: var(--primary);
            text-decoration: none;
            border: 1.5px solid rgba(255, 106, 0, 0.35);
            padding: 8px 16px;
            border-radius: 4px;
            background: #fff8f4;
            transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
            white-space: nowrap;
        }

        .btn-view-all:hover {
            background: rgba(255, 106, 0, 0.08);
            border-color: var(--primary);
            box-shadow: 0 2px 10px rgba(255, 106, 0, 0.12);
        }

        /* ─── PRODUCT GRID ─── */
        .products-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
        }

        .product-card {
            background: #fff;
            border-radius: 14px;
            overflow: hidden;
            text-decoration: none;
            border: 1px solid #6e6c6c2f;
            transition: transform 0.22s ease, box-shadow 0.22s ease;
        }

        .product-card:hover .product-info h3 {
            color: var(--primary);
            transition: color 0.2s ease;
        }

        .product-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.09);
        }

        .product-img-wrap {
            background: #f0ece6;
            aspect-ratio: 1 / 1;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding: 8px;
        }

        .product-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
            border-radius: 14px;
        }

        .product-card:hover .product-img-wrap img {
            transform: scale(1.05);
        }

        .product-info {
            padding: 10px 12px 12px;
            border-top: 1px solid #f0ece6;
        }

        .product-info h3 {
            font-size: 13px;
            /* was 14px */
            margin-bottom: 2px;
            font-weight: 600;
            color: #111;

        }

        .product-info span {
            font-size: 11px;
            color: #999;
        }

        /* ─── RESPONSIVE ─── */
        @media (max-width: 768px) {
            .products-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .section-intro .products-title {
                font-size: 26px;
            }

            .category-name {
                font-size: 17px;
            }
        }

        @media (max-width: 480px) {
            .products-grid {
                grid-template-columns: 1fr;
            }

            .category-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }
        }
   
   
   
  
        /* WHAT MAKES LUGG UNIQUE SECTION */
        .lugg-unique-section {
            background: linear-gradient(135deg, rgba(255, 106, 0, 0.03) 0%, rgba(123, 92, 239, 0.03) 100%);
            padding: 60px 0;
            position: relative;
            overflow: hidden;
        }

        /* Background Decorative Elements */
        .lugg-unique-section::before {
            content: '';
            position: absolute;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(255, 106, 0, 0.08) 0%, transparent 70%);
            border-radius: 50%;
            top: -100px;
            right: -100px;
            z-index: 0;
        }

        .lugg-unique-section::after {
            content: '';
            position: absolute;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(123, 92, 239, 0.08) 0%, transparent 70%);
            border-radius: 50%;
            bottom: -80px;
            left: -80px;
            z-index: 0;
        }

        .lugg-unique-section .container {
            position: relative;
            z-index: 1;
        }

        /* SECTION HEADER */
        .section-header {
            text-align: center;
            margin-bottom: 52px;
        }



        .section-title .highlight {
            color: var(--primary);
            position: relative;
            display: inline-block;
        }

        .section-title .highlight::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 6px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            bottom: -8px;
            left: 0;
            border-radius: 3px;
            opacity: 0.3;
        }

        .section-subtitle {
            font-size: 12px;
            color: var(--text-muted);
            margin: 0;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* UNIQUE GRID */
        .unique-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 17px;
            margin-bottom: 60px;
        }

        /* UNIQUE CARD */
        .unique-card {
            background: var(--white);
            border-radius: var(--card-radius);
            padding: 40px 32px;
            text-align: center;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid var(--border-light);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Card Background Gradient on Hover */
        .unique-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 106, 0, 0.05) 0%, rgba(123, 92, 239, 0.05) 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: -1;
        }

        .unique-card:hover {
            /* transform: translateY(-16px) scale(1.02); */
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
            border-color: var(--primary);
        }

        .unique-card:hover::before {
            opacity: 1;
        }

        /* CARD ICON */
        .card-icon-wrapper {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            font-size: 25px;
            color: var(--white);
            box-shadow: 0 8px 24px rgba(255, 106, 0, 0.2);
            transition: all 0.4s ease;
            position: relative;
        }

        .unique-card:hover .card-icon-wrapper {
            transform: rotateY(360deg) scale(1.1);
            box-shadow: 0 12px 32px rgba(255, 106, 0, 0.3);
        }

        /* CARD TITLE */
        .card-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--text-dark);
            margin: 0 0 16px 0;
            line-height: 1.3;
            transition: color 0.3s ease;
        }

        .unique-card:hover .card-title {
            color: var(--primary);
        }

        /* CARD DESCRIPTION */
        .card-description {
            font-size: 12px;
            color: var(--text-muted);
            text-align: justify;
            line-height: 1.7;
            flex-grow: 1;
            transition: color 0.3s ease;
        }

        .unique-card:hover .card-description {
            color: var(--text-dark);
        }

        /* CARD ICON ACCENT */
        .card-icon-accent {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background-color: var(--orange-pale);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 20px;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            margin-top: 8px;
        }

        .unique-card:hover .card-icon-accent {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: var(--white);
            transform: translateX(8px) rotate(90deg);
            box-shadow: 0 8px 20px rgba(255, 106, 0, 0.25);
        }

        /* CTA SECTION */
        .unique-cta {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: var(--card-radius);
            padding: 60px;
            text-align: center;
            box-shadow: 0 12px 32px rgba(255, 106, 0, 0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 24px;
            flex-wrap: wrap;
            transition: all 0.4s ease;
        }

        .unique-cta:hover {
            /* transform: translateY(-8px); */
            box-shadow: 0 16px 40px rgba(255, 106, 0, 0.35);
        }

        .cta-text {
            font-size: 18px;
            font-weight: 600;
            color: var(--white);
            margin: 0;
            letter-spacing: 0.5px;
        }

        .cta-button {
            padding: 14px 32px;
            background-color: var(--white);
            color: var(--primary);
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
            background-color: var(--light-gray);
        }

        .cta-button i {
            font-size: 16px;
            transition: transform 0.3s ease;
        }

        .cta-button:hover i {
            transform: translateX(2px);
        }

        /* RESPONSIVE DESIGN */
        @media (max-width: 1024px) {
            .section-title {
                font-size: 42px;
            }

            .unique-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
            }

            .unique-card {
                padding: 36px 28px;
            }

            .card-icon-wrapper {
                width: 72px;
                height: 72px;
                font-size: 32px;
            }

            .card-title {
                font-size: 20px;
            }

            .unique-cta {
                padding: 48px 40px;
                flex-direction: column;
                text-align: center;
            }

            .cta-text {
                font-size: 16px;
            }
        }

        @media (max-width: 768px) {
            .lugg-unique-section {
                padding: 80px 0;
            }

            .section-header {
                margin-bottom: 60px;
            }

            .section-title {
                font-size: 32px;
                margin-bottom: 12px;
            }

            .section-subtitle {
                font-size: 14px;
            }

            .unique-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .unique-card {
                padding: 32px 24px;
            }

            .card-icon-wrapper {
                width: 64px;
                height: 64px;
                font-size: 28px;
                margin-bottom: 20px;
            }

            .card-title {
                font-size: 18px;
                margin-bottom: 14px;
            }

            .card-description {
                font-size: 13px;
                margin-bottom: 20px;
            }

            .unique-cta {
                padding: 40px 24px;
                flex-direction: column;
            }

            .cta-text {
                font-size: 15px;
            }

            .cta-button {
                padding: 12px 28px;
                font-size: 14px;
                justify-content: center;
            }

            .lugg-unique-section::before {
                width: 300px;
                height: 300px;
                top: -80px;
                right: -80px;
            }

            .lugg-unique-section::after {
                width: 200px;
                height: 200px;
                bottom: -60px;
                left: -60px;
            }
        }

        @media (max-width: 480px) {
            .lugg-unique-section {
                padding: 35px 0;
            }

            .section-header {
                margin-bottom: 48px;
            }

            .section-title {
                font-size: 26px;
                margin-bottom: 10px;
            }

            .section-subtitle {
                font-size: 13px;
            }

            .unique-grid {
                gap: 16px;
            }

            .unique-card {
                padding: 28px 20px;
            }

            .card-icon-wrapper {
                width: 56px;
                height: 56px;
                font-size: 24px;
                margin-bottom: 16px;
            }

            .card-title {
                font-size: 16px;
                margin-bottom: 12px;
            }

            .card-description {
                font-size: 12px;
                margin-bottom: 16px;
                line-height: 1.6;
            }

            .card-link {
                font-size: 12px;
            }

            .unique-cta {
                padding: 32px 20px;
                gap: 16px;
            }

            .cta-text {
                font-size: 14px;
            }

            .cta-button {
                padding: 11px 24px;
                font-size: 12px;
            }

            .lugg-unique-section::before {
                width: 200px;
                height: 200px;
            }

            .lugg-unique-section::after {
                width: 150px;
                height: 150px;
            }
        }

        /* ===== SCROLL-TRIGGERED ANIMATIONS ===== */

        /* Section header fade-in */
        .section-header {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.7s ease, transform 0.7s ease;
        }

        .section-header.animate-in {
            opacity: 1;
            transform: translateY(0);
        }

        /* Cards stagger in */
        .unique-card {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.6s ease, transform 0.6s ease,
                box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                border-color 0.4s ease;
        }

        .unique-card.animate-in {
            opacity: 1;
            transform: translateY(0);
        }

        /* CTA fade-in */
        .unique-cta {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease,
                box-shadow 0.4s ease;
        }

        .unique-cta.animate-in {
            opacity: 1;
            transform: translateY(0);
        }

        /* Icon pulse on card hover */
        @keyframes iconPulse {
            0% {
                box-shadow: 0 8px 24px rgba(255, 106, 0, 0.2);
            }

            50% {
                box-shadow: 0 8px 32px rgba(255, 106, 0, 0.45);
            }

            100% {
                box-shadow: 0 8px 24px rgba(255, 106, 0, 0.2);
            }
        }

        .unique-card:hover .card-icon-wrapper {
            animation: iconPulse 1.4s ease-in-out infinite;
        }

        /* Eyebrow badge slide-in */
        .lugg-trust__eyebrow {
            opacity: 0;
            transform: translateY(-12px);
            transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
        }

        .section-header.animate-in .lugg-trust__eyebrow {
            opacity: 1;
            transform: translateY(0);
        }

        /* Title and subtitle cascade */
        .lugg-trust__title {
            opacity: 0;
            transform: translateY(16px);
            transition: opacity 0.55s ease 0.2s, transform 0.55s ease 0.2s;
        }

        .section-header.animate-in .lugg-trust__title {
            opacity: 1;
            transform: translateY(0);
        }

        .section-subtitle {
            opacity: 0;
            transform: translateY(12px);
            transition: opacity 0.5s ease 0.35s, transform 0.5s ease 0.35s;
        }

        .section-header.animate-in .section-subtitle {
            opacity: 1;
            transform: translateY(0);
        }

        /* ===== CTA SECTION ANIMATIONS ===== */

        .unique-cta {
            opacity: 0;
            transform: translateY(30px) scale(0.98);
            transition: opacity 0.7s ease, transform 0.7s ease,
                box-shadow 0.4s ease;
        }

        .unique-cta.animate-in {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* CTA text fade in */
        .unique-cta .cta-text {
            opacity: 0;
            transform: translateX(-20px);
            transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
        }

        .unique-cta.animate-in .cta-text {
            opacity: 1;
            transform: translateX(0);
        }

        /* Button pop in */
        .unique-cta .cta-button {
            opacity: 0;
            transform: translateX(20px) scale(0.95);
            transition: opacity 0.5s ease 0.45s, transform 0.5s ease 0.45s;
        }

        .unique-cta.animate-in .cta-button {
            opacity: 1;
            transform: translateX(0) scale(1);
        }

        /* Button hover */
        .unique-cta .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .unique-cta .cta-button:active {
            transform: scale(0.97);
        }

        /* Bag icon bounce on hover */
        @keyframes bagBounce {
            0% {
                transform: translateY(0) rotate(0deg);
            }

            30% {
                transform: translateY(-5px) rotate(-8deg);
            }

            60% {
                transform: translateY(-2px) rotate(5deg);
            }

            100% {
                transform: translateY(0) rotate(0deg);
            }
        }

        .unique-cta .cta-button:hover i {
            animation: bagBounce 0.55s ease forwards;
        }

        /* Subtle shimmer sweep on the CTA bar */
        @keyframes shimmerSweep {
            0% {
                background-position: -200% center;
            }

            100% {
                background-position: 200% center;
            }
        }

        .unique-cta.animate-in {
            background-size: 200% auto;
            animation: shimmerSweep 3s linear 0.8s 1 forwards;
        }
        
        
        
       
        /* LATEST PRODUCTS SECTION */
        .latest-products {
            background-color: var(--bg-main);
            padding: 80px 0;
            position: relative;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* MAIN WRAPPER - TWO COLUMN LAYOUT */
        .products-wrapper {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 60px;
            align-items: center;
        }

        /* LEFT CONTENT SECTION */
        .products-content {
            padding-right: 40px;
        }

        .section-label {
            display: block;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 2px;
            color: var(--primary);
            margin-bottom: 16px;
            text-transform: uppercase;
        }

        .products-title {
            font-size: 48px;
            font-weight: 700;
            color: var(--text-dark);
            margin: 0 0 24px 0;
            line-height: 1.2;
        }

        .products-title .highlight {
            color: var(--primary);
        }

        .products-description {
            font-size: 14px;
            color: var(--text-muted);
            line-height: 1.7;
            margin: 0 0 32px 0;
        }

        /* EXPLORE BUTTON */
        .explore-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: var(--white);
            border: none;
            padding: 14px 32px;
            border-radius: 28px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 16px rgba(255, 106, 0, 0.2);
        }

        .explore-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 24px rgba(255, 106, 0, 0.3);
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
        }

        .explore-btn:active {
            transform: translateY(0);
        }

        .explore-btn .arrow {
            transition: transform 0.3s ease;
        }

        .explore-btn:hover .arrow {
            transform: translateX(4px);
        }

        /* RIGHT CAROUSEL WRAPPER */
        .products-carousel-wrapper {
            display: flex;
            align-items: center;
            gap: 16px;
            position: relative;
        }

        /* CAROUSEL NAVIGATION BUTTONS */
        .carousel-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: var(--primary);
            border: none;
            color: var(--white);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.3s ease;
            z-index: 10;
            box-shadow: 0 4px 12px rgba(255, 106, 0, 0.2);
        }

        .carousel-btn:hover {
            background-color: var(--primary-dark);
            transform: scale(1.08);
            box-shadow: 0 6px 16px rgba(255, 106, 0, 0.3);
        }

        .carousel-btn:active {
            transform: scale(0.95);
        }

        .carousel-btn svg {
            width: 24px;
            height: 24px;
        }

        /* PRODUCTS GRID */
        .products-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            flex: 1;
        }

        /* PRODUCT CARD */
        .product-card {
            background-color: var(--white);
            border-radius: var(--card-radius);
            overflow: hidden;
            transition: all 0.3s ease;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }

        .product-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
        }

        /* PRODUCT IMAGE WRAPPER */
        .product-image-wrapper {
            position: relative;
            width: 100%;
            padding-top: 100%;
            background-color: #f9f1e6;
            overflow: hidden;
        }

        .product-bg-pink {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #fbe8f0 0%, #f5e5f0 100%);
            z-index: 0;
        }

        .product-image {
            position: absolute;
            top: 5%;
            left: 5%;
            width: 90%;
            height: 90%;
            object-fit: cover;
            transition: transform 0.3s ease;
            z-index: 2;
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
        }

        .product-card:hover .product-image {
            transform: scale(1.08);
        }

        /* DISCOUNT BADGE */
        .discount-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: var(--white);
            padding: 6px 14px;
            border-radius: 24px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.5px;
            z-index: 5;
            box-shadow: 0 4px 12px rgba(255, 106, 0, 0.25);
            text-transform: uppercase;
        }

        /* ADD TO CART BUTTON */
        .add-to-cart-btn {
            position: absolute;
            bottom: 12px;
            right: 12px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, #7c5cef 0%, #6b4ce6 100%);
            border: none;
            color: var(--white);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 6px 16px rgba(123, 92, 239, 0.35);
            opacity: 0;
            transform: translateY(10px) scale(0.8);
            z-index: 4;
        }

        .product-card:hover .add-to-cart-btn {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .add-to-cart-btn:hover {
            background: linear-gradient(135deg, #8b6df6 0%, #7a5ef0 100%);
            transform: scale(1.1);
            box-shadow: 0 8px 20px rgba(123, 92, 239, 0.45);
        }

        .add-to-cart-btn:active {
            transform: scale(0.95);
        }

        /* PRODUCT INFO */
        .product-info {
            padding: 18px 16px;
        }

        .product-name {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-dark);
            margin: 0 0 8px 0;
            line-height: 1.4;
        }

        /* RATING */
        .product-rating {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .stars {
            display: flex;
            gap: 2px;
        }

        .star {
            font-size: 13px;
            line-height: 1;
        }

        .star.filled {
            color: #ffa500;
        }

        .star.empty {
            color: #ddd;
        }

        /* RESPONSIVE DESIGN */
        @media (max-width: 1024px) {
            .products-wrapper {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .products-content {
                padding-right: 0;
            }

            .products-title {
                font-size: 42px;
            }

            .products-carousel-wrapper {
                gap: 12px;
            }

            .products-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 16px;
            }
        }

        @media (max-width: 768px) {
            .latest-products {
                padding: 60px 0;
            }

            .container {
                padding: 0 16px;
            }

            .products-wrapper {
                gap: 30px;
            }

            .products-title {
                font-size: 32px;
            }

            .products-description {
                font-size: 13px;
                line-height: 1.6;
            }

            .explore-btn {
                padding: 12px 28px;
                font-size: 14px;
            }

            .carousel-btn {
                width: 40px;
                height: 40px;
            }

            .products-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 14px;
            }

            .product-image {
                width: 85%;
                height: 85%;
                top: 7.5%;
                left: 7.5%;
            }

            .discount-badge {
                padding: 5px 12px;
                font-size: 10px;
            }

            .add-to-cart-btn {
                width: 44px;
                height: 44px;
            }

            .product-info {
                padding: 14px;
            }

            .product-name {
                font-size: 14px;
            }

            .star {
                font-size: 12px;
            }
        }

        @media (max-width: 480px) {
            .latest-products {
                padding: 40px 0;
            }

            .container {
                padding: 0 12px;
            }

            .section-label {
                font-size: 11px;
                margin-bottom: 12px;
            }

            .products-title {
                font-size: 26px;
                margin-bottom: 16px;
            }

            .products-description {
                font-size: 12px;
                margin-bottom: 24px;
            }

            .explore-btn {
                padding: 11px 24px;
                font-size: 13px;
                gap: 8px;
            }

            .products-carousel-wrapper {
                gap: 8px;
            }

            .carousel-btn {
                width: 36px;
                height: 36px;
            }

            .carousel-btn svg {
                width: 18px;
                height: 18px;
            }

            .products-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .product-info {
                padding: 12px;
            }

            .product-name {
                font-size: 13px;
                margin-bottom: 6px;
            }

            .star {
                font-size: 11px;
            }

            .add-to-cart-btn {
                width: 40px;
                height: 40px;
            }
        }

        /* ===== LATEST PRODUCTS SECTION ANIMATIONS ===== */

        /* Left content block */
        /*.latest-products .products-content {*/
        /*    opacity: 0;*/
        /*    transform: translateX(-40px);*/
        /*    transition: opacity 0.75s ease, transform 0.75s ease;*/
        /*}*/

        .latest-products .products-content.animate-in {
            opacity: 1;
            transform: translateX(0);
        }

        /* Eyebrow */
        .latest-products .lugg-trust__eyebrow {
            opacity: 0;
            transform: translateY(-10px);
            transition: opacity 0.45s ease 0.1s, transform 0.45s ease 0.1s;
        }

        .latest-products .products-content.animate-in .lugg-trust__eyebrow {
            opacity: 1;
            transform: translateY(0);
        }

        /* Title */
        .latest-products .lugg-trust__title {
            opacity: 0;
            transform: translateY(18px);
            transition: opacity 0.55s ease 0.22s, transform 0.55s ease 0.22s;
        }

        .latest-products .products-content.animate-in .lugg-trust__title {
            opacity: 1;
            transform: translateY(0);
        }

        /* Description */
        .latest-products .products-description {
            opacity: 0;
            transform: translateY(14px);
            transition: opacity 0.5s ease 0.38s, transform 0.5s ease 0.38s;
        }

        .latest-products .products-content.animate-in .products-description {
            opacity: 1;
            transform: translateY(0);
        }

        /* Explore button */
        .latest-products .explore-btn {
            opacity: 0;
            transform: translateY(12px);
            transition: opacity 0.45s ease 0.52s, transform 0.45s ease 0.52s;
        }

        .latest-products .products-content.animate-in .explore-btn {
            opacity: 1;
            transform: translateY(0);
        }

        /* Explore button hover */
        .explore-btn {
            transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease,
                opacity 0.45s ease 0.52s;
        }

        .explore-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(255, 106, 0, 0.25);
        }

        .explore-btn:hover .arrow {
            animation: arrowBounce 0.6s ease infinite alternate;
        }

        @keyframes arrowBounce {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(5px);
            }
        }

        /* Carousel wrapper slides in from right */
        /*.latest-products .products-carousel-wrapper {*/
        /*    opacity: 0;*/
        /*    transform: translateX(40px);*/
        /*    transition: opacity 0.75s ease 0.2s, transform 0.75s ease 0.2s;*/
        /*}*/

        .latest-products .products-carousel-wrapper.animate-in {
            position:relative;
            opacity: 1;
            transform: translateX(0);
        }

        /* Product cards stagger */
        /*.product-card {*/
        /*    opacity: 0;*/
        /*    transform: translateY(36px) scale(0.97);*/
        /*    transition: opacity 0.6s ease, transform 0.6s ease;*/
        /*}*/

        .product-card.animate-in {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* Product image zoom on hover */
        .product-image-wrapper {
            overflow: hidden;
        }

        .product-image {
            transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .product-card:hover .product-image {
            transform: scale(1.07);
        }

        /* Badge pulse on hover */
        .discount-badge {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .product-card:hover .discount-badge {
            transform: scale(1.08);
            box-shadow: 0 4px 14px rgba(255, 106, 0, 0.3);
        }

        /* Product name lift */
        .product-name {
            transition: transform 0.3s ease, color 0.3s ease;
        }

        .product-card:hover .product-name {
            transform: translateY(-3px);
            color: var(--primary);
        }

        /* Stars shimmer on hover */
        @keyframes starShimmer {
            0% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: 0.7;
                transform: scale(1.2);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        .product-card:hover .star.filled {
            animation: starShimmer 0.5s ease forwards;
        }

        .product-card:hover .star:nth-child(1) {
            animation-delay: 0s;
        }

        .product-card:hover .star:nth-child(2) {
            animation-delay: 0.07s;
        }

        .product-card:hover .star:nth-child(3) {
            animation-delay: 0.14s;
        }

        .product-card:hover .star:nth-child(4) {
            animation-delay: 0.21s;
        }

        /* Carousel buttons */
        .carousel-btn {
            position:absolute;
            transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
        }

        .carousel-btn:hover {
            transform: scale(1.12);
            box-shadow: 0 6px 18px rgba(255, 106, 0, 0.2);
        }
        .carousel-prev{
            left:0;
        }
        .carousel-next{
            right:0;
        }

        .carousel-btn:active {
            transform: scale(0.95);
        }
        
        /* Safe animation: only hides when JS marks section as ready */
.latest-products.anim-ready .products-content {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.latest-products.anim-ready .products-carousel-wrapper {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.75s ease 0.2s, transform 0.75s ease 0.2s;
}

.latest-products.anim-ready .product-card {
    opacity: 0;
    transform: translateY(36px) scale(0.97);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
   

   
        .lugg-trust {
            width: 100%;
            padding: 72px 0px;
            background: var(--bg-main);
            font-family: 'DM Sans', sans-serif;
        }

        .lugg-trust__inner {
            max-width: 1200px;
            margin: 0 auto;
        }

        .lugg-trust__head {
            text-align: center;
            margin-bottom: 52px;
        }

        .lugg-trust__eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--primary);
            margin-bottom: 14px;
        }

        .lugg-trust__eyebrow::before,
        .lugg-trust__eyebrow::after {
            content: '';
            display: block;
            width: 32px;
            height: 1px;
            background: var(--primary);
            opacity: 0.5;
        }

        .lugg-trust__title {
            /* font-family: 'Cormorant Garamond', serif; */
            font-size: clamp(26px, 4vw, 32px);
            font-weight: 900;
            color: var(--dark);
            line-height: 1.05;
            margin-bottom: 8px;
        }

        .lugg-trust__title em {
            font-style: italic;
            color: var(--primary);
        }


        .bento {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-auto-rows: 1fr;
            /* rows grow equally */
            gap: var(--gap);
        }


        .b-card {
            border-radius: var(--card-radius);
            padding: 32px;
            position: relative;
            overflow: hidden;
            transition: transform 0.35s cubic-bezier(.25, .8, .25, 1),
                box-shadow 0.35s cubic-bezier(.25, .8, .25, 1);
            /* staggered fade-in */
            animation: bentoPop 0.55s ease both;
        }

        .b-card:nth-child(1) {
            animation-delay: 0.05s
        }

        .b-card:nth-child(2) {
            animation-delay: 0.10s
        }

        .b-card:nth-child(3) {
            animation-delay: 0.15s
        }

        .b-card:nth-child(4) {
            animation-delay: 0.20s
        }

        .b-card:nth-child(5) {
            animation-delay: 0.25s
        }

        .b-card:nth-child(6) {
            animation-delay: 0.30s
        }

        .b-card:nth-child(7) {
            animation-delay: 0.35s
        }

        .b-card:nth-child(8) {
            animation-delay: 0.40s
        }

        .b-card:nth-child(9) {
            animation-delay: 0.45s
        }

        @keyframes bentoPop {
            from {
                opacity: 0;
                transform: translateY(18px) scale(0.98);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .b-card:hover {
            transform: translateY(-5px) scale(1.005);
            box-shadow: 0 24px 56px rgba(0, 0, 0, 0.11);
            z-index: 2;
        }



        /* Row 1 */
        .b-stat-a {
            grid-column: span 3;
        }

        .b-logo-a {
            grid-column: span 3;
        }

        .b-quote-a {
            grid-column: span 6;
        }

        /* Row 2 */
        .b-quote-b {
            grid-column: span 6;
        }

        .b-logo-b {
            grid-column: span 2;
        }

        .b-stat-b {
            grid-column: span 3;
        }

        .b-logo-c {
            grid-column: span 3;
        }

        /* Row 3 */
        .b-logo-d {
            grid-column: span 3;
        }

        .b-strip {
            grid-column: span 9;
        }


        /* ── STAT A – Big orange ── */
        .b-stat-a {
            background: var(--primary);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            min-height: 230px;
        }

        .b-stat-a::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 170px;
            height: 170px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.13);
            transition: transform 0.4s ease;
        }

        .b-stat-a:hover::before {
            transform: scale(1.15);
        }

        .b-stat-a::after {
            content: '';
            position: absolute;
            bottom: -30px;
            left: -20px;
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.07);
        }

        .stat-big {
            font-family: 'Cormorant Garamond', serif;
            font-size: 58px;
            font-weight: 900;
            color: var(--white);
            line-height: 1;
            position: relative;
        }

        .stat-lbl {
            font-size: 12.5px;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.78);
            margin-top: 8px;
            line-height: 1.5;
            position: relative;
        }

        /* ── STAT B – Pale tint ── */
        .b-stat-b {
            background: var(--orange-pale);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            min-height: 230px;
        }

        .b-stat-b::before {
            content: '';
            position: absolute;
            bottom: -35px;
            left: -25px;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: rgba(255, 106, 0, 0.09);
        }

        .b-stat-b .stat-big {
            color: var(--primary);
            font-size: 50px;
        }

        .b-stat-b .stat-lbl {
            color: var(--gray-dark);
        }

        /* ── LOGO CARDS ── */
        .b-logo-a,
        .b-logo-b,
        .b-logo-c,
        .b-logo-d {
            background: var(--light-gray);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 230px;
        }

        .logo-wordmark {
            font-family: 'Cormorant Garamond', serif;
            font-size: 26px;
            font-weight: 700;
            color: var(--dark);
            letter-spacing: -0.02em;
            opacity: 0.42;
            transition: opacity 0.3s ease, color 0.3s ease, transform 0.3s ease;
            text-align: center;
            line-height: 1.2;
        }

        .b-logo-a:hover .logo-wordmark,
        .b-logo-b:hover .logo-wordmark,
        .b-logo-c:hover .logo-wordmark,
        .b-logo-d:hover .logo-wordmark {
            opacity: 1;
            color: var(--primary);
            transform: scale(1.06);
        }

        /* smaller wordmark for 2-col logos */
        .b-logo-b .logo-wordmark,
        .b-logo-c .logo-wordmark {
            font-size: 20px;
        }

        /* ── QUOTE A – Dark ── */
        .b-quote-a {
            background: var(--dark-card);
            min-height: 230px;
        }

        /* ── QUOTE B – Warm ── */
        .b-quote-b {
            background: var(--warm-card);
            min-height: 230px;
        }

        /* shared quote internals */
        .q-mark {
            font-family: 'Cormorant Garamond', serif;
            font-size: 90px;
            line-height: 0.55;
            color: var(--primary);
            display: block;
            margin-bottom: 18px;
            opacity: 0.9;
        }

        .q-text {
            font-size: 14.5px;
            font-weight: 400;
            line-height: 1.72;
            margin-bottom: 22px;
            font-style: normal;
        }

        .b-quote-a .q-text {
            color: rgba(255, 255, 255, 0.88);
        }

        .b-quote-b .q-text {
            color: var(--gray-dark);
        }

        .q-author {
            display: flex;
            align-items: center;
            gap: 11px;
        }

        .q-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            color: var(--white);
            flex-shrink: 0;
            letter-spacing: 0.02em;
        }

        .b-quote-a .q-avatar {
            box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.35);
        }

        .q-name {
            font-size: 12.5px;
            font-weight: 600;
            line-height: 1.3;
        }

        .q-role {
            font-size: 11px;
            margin-top: 2px;
            line-height: 1.3;
        }

        .b-quote-a .q-name {
            color: var(--white);
        }

        .b-quote-a .q-role {
            color: var(--gray);
        }

        .b-quote-b .q-name {
            color: var(--dark);
        }

        .b-quote-b .q-role {
            color: var(--gray);
        }

        /* star rating inside quote */
        .q-stars {
            font-size: 13px;
            color: var(--primary);
            margin-bottom: 12px;
            letter-spacing: 2px;
        }

        /* ── BRAND STRIP ── */
        .b-strip {
            background: var(--light-gray);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
            min-height: 100px;
            padding: 28px 36px;
        }

        .strip-label {
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--gray);
            white-space: nowrap;
            flex-shrink: 0;
        }

        .strip-logos {
            display: flex;
            align-items: center;
            gap: 36px;
            flex-wrap: wrap;
        }

        .strip-brand {
            font-family: 'Cormorant Garamond', serif;
            font-size: 18px;
            font-weight: 700;
            color: var(--dark);
            opacity: 0.38;
            letter-spacing: -0.01em;
            transition: opacity 0.28s, color 0.28s;
            cursor: default;
        }

        .strip-brand:hover {
            opacity: 1;
            color: var(--primary);
        }



        /* Section background */
        .lugg-trust {
            background:
                radial-gradient(ellipse 60% 50% at 10% 20%, rgba(255, 106, 0, 0.07) 0%, transparent 70%),
                radial-gradient(ellipse 50% 60% at 90% 80%, rgba(255, 106, 0, 0.05) 0%, transparent 65%),
                radial-gradient(ellipse 80% 40% at 50% 50%, rgba(245, 245, 245, 0.6) 0%, transparent 100%),
                #ffffff;
            position: relative;
            overflow: hidden;
        }

        /* Grain texture overlay */
        .lugg-trust::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
            background-repeat: repeat;
            background-size: 180px 180px;
            pointer-events: none;
            z-index: 0;
            opacity: 0.6;
        }

        /* Make inner content sit above background layers */
        .lugg-trust__inner {
            position: relative;
            z-index: 1;
        }

        /* ── Decorative shape 1 — Large soft orange circle, top-left ── */
        .lugg-trust__shape-1 {
            position: absolute;
            top: -120px;
            left: -100px;
            width: 420px;
            height: 420px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 106, 0, 0.10) 0%, transparent 70%);
            pointer-events: none;
            animation: shapeFloat 8s ease-in-out infinite;
        }

        /* ── Decorative shape 2 — Medium circle, bottom-right ── */
        .lugg-trust__shape-2 {
            position: absolute;
            bottom: -80px;
            right: -60px;
            width: 320px;
            height: 320px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 106, 0, 0.08) 0%, transparent 70%);
            pointer-events: none;
            animation: shapeFloat 10s ease-in-out infinite reverse;
        }

        /* ── Decorative shape 3 — Ring outline, top-right ── */
        .lugg-trust__shape-3 {
            position: absolute;
            top: 60px;
            right: 80px;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            border: 1.5px solid rgba(255, 106, 0, 0.12);
            pointer-events: none;
            animation: shapeSpin 20s linear infinite;
        }

        /* ── Decorative shape 4 — Small filled dot cluster, mid-left ── */
        .lugg-trust__shape-4 {
            position: absolute;
            top: 45%;
            left: -40px;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 140, 51, 0.09) 0%, transparent 70%);
            pointer-events: none;
            animation: shapeFloat 12s ease-in-out infinite 2s;
        }

        /* ── Decorative shape 5 — Dotted ring, bottom-left ── */
        .lugg-trust__shape-5 {
            position: absolute;
            bottom: 80px;
            left: 60px;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            border: 1.5px dashed rgba(255, 106, 0, 0.14);
            pointer-events: none;
            animation: shapeSpin 25s linear infinite reverse;
        }

        /* ── Decorative shape 6 — Subtle horizontal streak ── */
        .lugg-trust__shape-6 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-12deg);
            width: 700px;
            height: 300px;
            border-radius: 50%;
            background: radial-gradient(ellipse, rgba(255, 106, 0, 0.04) 0%, transparent 65%);
            pointer-events: none;
        }

        /* Floating animation */
        @keyframes shapeFloat {

            0%,
            100% {
                transform: translateY(0px) scale(1);
            }

            50% {
                transform: translateY(-18px) scale(1.03);
            }
        }

        /* Slow spin */
        @keyframes shapeSpin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        /* Mobile — reduce shape sizes */
        @media (max-width: 767px) {
            .lugg-trust__shape-1 {
                width: 260px;
                height: 260px;
                top: -80px;
                left: -80px;
            }

            .lugg-trust__shape-2 {
                width: 200px;
                height: 200px;
            }

            .lugg-trust__shape-3 {
                width: 110px;
                height: 110px;
                top: 30px;
                right: 20px;
            }

            .lugg-trust__shape-4,
            .lugg-trust__shape-5 {
                display: none;
            }
        }



        /* Tablet: 768–1023 → 6 columns */
        @media (max-width: 1023px) {
            .lugg-trust {
                padding: 72px 0px;
            }

            :root {
                --gap: 12px;
            }

            .bento {
                grid-template-columns: repeat(6, 1fr);
                grid-auto-rows: auto;
            }

            .b-stat-a {
                grid-column: span 3;
                min-height: 200px;
            }

            .b-logo-a {
                grid-column: span 3;
                min-height: 200px;
            }

            .b-quote-a {
                grid-column: span 6;
                min-height: 200px;
            }

            .b-quote-b {
                grid-column: span 6;
                min-height: 200px;
            }

            .b-logo-b {
                grid-column: span 2;
                min-height: 180px;
            }

            .b-stat-b {
                grid-column: span 3;
                min-height: 180px;
            }

            .b-logo-c {
                grid-column: span 3;
                min-height: 180px;
            }

            .b-logo-d {
                grid-column: span 3;
                min-height: 160px;
            }

            .b-strip {
                grid-column: span 3;
            }
        }

        /* Mobile: ≤ 767 → 2 columns */
        @media (max-width: 767px) {
            .lugg-trust {
                padding: 56px 0px;
            }

            :root {
                --gap: 10px;
                --card-radius: 18px;
            }

            .bento {
                grid-template-columns: repeat(2, 1fr);
                grid-auto-rows: auto;
            }

            /* Row 1 */
            .b-stat-a {
                grid-column: span 1;
                min-height: 180px;
                padding: 24px;
            }

            .b-logo-a {
                grid-column: span 1;
                min-height: 180px;
                padding: 24px;
            }

            /* Row 2 */
            .b-quote-a {
                grid-column: span 2;
                min-height: 210px;
                padding: 24px;
            }

            /* Row 3 */
            .b-quote-b {
                grid-column: span 2;
                min-height: 210px;
                padding: 24px;
            }

            /* Row 4 */
            .b-logo-b {
                grid-column: span 1;
                min-height: 150px;
                padding: 20px;
            }

            .b-stat-b {
                grid-column: span 1;
                min-height: 150px;
                padding: 20px;
            }

            /* Row 5 */
            .b-logo-c {
                grid-column: span 1;
                min-height: 140px;
            }

            .b-logo-d {
                grid-column: span 1;
                min-height: 140px;
            }

            /* Row 6 */
            .b-strip {
                grid-column: span 2;
                flex-direction: column;
                align-items: flex-start;
                gap: 14px;
                padding: 24px;
            }

            .stat-big {
                font-size: 44px;
            }

            .q-mark {
                font-size: 68px;
            }

            .q-text {
                font-size: 13.5px;
            }

            .logo-wordmark {
                font-size: 20px;
            }

            .strip-logos {
                gap: 20px;
            }
        }

        @media (max-width:480px) {
            .lugg-trust__head {
                margin-bottom: 33px;
            }


        }

        /* Very small: ≤ 380px */
        @media (max-width: 380px) {
            .stat-big {
                font-size: 38px;
            }

            .lugg-trust__title {
                font-size: 26px;
            }
        }

        /* ===== LUGG TRUST SECTION ANIMATIONS ===== */

        /* Header */
        .lugg-trust .lugg-trust__head {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity 0.7s ease, transform 0.7s ease;
        }

        .lugg-trust .lugg-trust__head.animate-in {
            opacity: 1;
            transform: translateY(0);
        }

        .lugg-trust .lugg-trust__eyebrow {
            opacity: 0;
            transform: translateY(-10px);
            transition: opacity 0.45s ease 0.1s, transform 0.45s ease 0.1s;
        }

        .lugg-trust .lugg-trust__head.animate-in .lugg-trust__eyebrow {
            opacity: 1;
            transform: translateY(0);
        }

        .lugg-trust .lugg-trust__title {
            opacity: 0;
            transform: translateY(16px);
            transition: opacity 0.55s ease 0.22s, transform 0.55s ease 0.22s;
        }

        .lugg-trust .lugg-trust__head.animate-in .lugg-trust__title {
            opacity: 1;
            transform: translateY(0);
        }

        /* ── Bento cards base ── */
        .b-card {
            opacity: 0;
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        /* Stat cards — scale up from center */
        .b-stat-a,
        .b-stat-b {
            transform: scale(0.88);
        }

        .b-stat-a.animate-in,
        .b-stat-b.animate-in {
            opacity: 1;
            transform: scale(1);
        }

        /* Logo cards — fade + slight rise */
        .b-logo-a,
        .b-logo-c {
            transform: translateY(20px);
        }

        .b-logo-a.animate-in,
        .b-logo-c.animate-in {
            opacity: 1;
            transform: translateY(0);
        }

        /* Quote cards — slide in from sides */
        .b-quote-a {
            transform: translateX(-30px);
        }

        .b-quote-a.animate-in {
            opacity: 1;
            transform: translateX(0);
        }

        .b-quote-b {
            transform: translateX(30px);
        }

        .b-quote-b.animate-in {
            opacity: 1;
            transform: translateX(0);
        }

        /* ── Stat number count-up shimmer ── */
        @keyframes statPop {
            0% {
                transform: scale(0.85);
                opacity: 0;
            }

            60% {
                transform: scale(1.08);
                opacity: 1;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .b-stat-a.animate-in .stat-big,
        .b-stat-b.animate-in .stat-big {
            animation: statPop 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both;
        }

        .b-stat-a.animate-in .stat-lbl,
        .b-stat-b.animate-in .stat-lbl {
            opacity: 0;
            animation: fadeSlideUp 0.45s ease 0.55s forwards;
        }

        @keyframes fadeSlideUp {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ── Stars ripple on quote cards ── */
        @keyframes starRipple {
            0% {
                opacity: 0;
                transform: scale(0) translateY(6px);
            }

            60% {
                transform: scale(1.2) translateY(-2px);
                opacity: 1;
            }

            100% {
                transform: scale(1) translateY(0);
                opacity: 1;
            }
        }

        .b-quote-a.animate-in .q-stars,
        .b-quote-b.animate-in .q-stars {
            animation: starRipple 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.35s both;
        }

        /* Quote text reveal */
        .b-quote-a.animate-in .q-text,
        .b-quote-b.animate-in .q-text {
            opacity: 0;
            animation: fadeSlideUp 0.5s ease 0.45s forwards;
        }

        /* Author slide up */
        .b-quote-a.animate-in .q-author,
        .b-quote-b.animate-in .q-author {
            opacity: 0;
            animation: fadeSlideUp 0.45s ease 0.6s forwards;
        }

        /* Avatar spin-in */
        @keyframes avatarSpin {
            from {
                transform: rotate(-15deg) scale(0.7);
                opacity: 0;
            }

            to {
                transform: rotate(0deg) scale(1);
                opacity: 1;
            }
        }

        .b-quote-a.animate-in .q-avatar,
        .b-quote-b.animate-in .q-avatar {
            animation: avatarSpin 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.62s both;
        }

        /* Opening quote mark drop */
        @keyframes quoteDrop {
            from {
                transform: translateY(-20px) scale(1.3);
                opacity: 0;
            }

            to {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }

        .b-quote-a.animate-in .q-mark,
        .b-quote-b.animate-in .q-mark {
            animation: quoteDrop 0.4s ease 0.25s both;
        }

        /* ── Logo wordmark typewriter feel ── */
        @keyframes logoReveal {
            from {
                clip-path: inset(0 100% 0 0);
                opacity: 0;
            }

            to {
                clip-path: inset(0 0% 0 0);
                opacity: 1;
            }
        }

        .b-logo-a.animate-in .logo-wordmark,
        .b-logo-c.animate-in .logo-wordmark {
            animation: logoReveal 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0.2s both;
        }

        /* ── Hover interactions ── */

        /* Stat cards gentle pulse on hover */
        @keyframes statHoverPulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.04);
            }

            100% {
                transform: scale(1);
            }
        }

        .b-stat-a:hover .stat-big,
        .b-stat-b:hover .stat-big {
            animation: statHoverPulse 0.7s ease;
        }

        /* Quote card subtle lift */
        .b-quote-a,
        .b-quote-b {
            transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.35s ease;
        }

        .b-quote-a:hover,
        .b-quote-b:hover {
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
        }

        /* Logo cards brightness on hover */
        .b-logo-a,
        .b-logo-c {
            transition: opacity 0.6s ease, transform 0.6s ease, filter 0.3s ease;
        }

        .b-logo-a:hover,
        .b-logo-c:hover {
            filter: brightness(1.08);
        }

        .b-logo-a:hover .logo-wordmark,
        .b-logo-c:hover .logo-wordmark {
            letter-spacing: 2px;
            transition: letter-spacing 0.4s ease;
        }
  
        /* ============ PRODUCT PORTFOLIO BENTO GRID ============ */

        .product-portfolio {
            padding: 72px 0;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            position: relative;
            overflow: hidden;
        }

        .portfolio-bento {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-auto-rows: 280px;
            gap: 24px;
            margin-top: 60px;
            position: relative;
        }

        /* Card Layout - 5 item Bento Grid */
        .portfolio-card:nth-child(1) {
            grid-column: span 8;
            grid-row: span 2;
        }

        .portfolio-card:nth-child(2) {
            grid-column: span 4;
        }

        .portfolio-card:nth-child(3) {
            grid-column: span 4;
        }

        .portfolio-card:nth-child(4) {
            grid-column: span 6;
        }

        .portfolio-card:nth-child(5) {
            grid-column: span 6;
        }

        /* Base Card */
        .portfolio-card {
            position: relative;
            border-radius: 24px;
            overflow: hidden;
            cursor: pointer;
            background: var(--white);
            border: 2px solid var(--border-light);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .portfolio-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: filter 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* Glow Border */
        .portfolio-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 106, 0, 0) 0%, rgba(255, 106, 0, 0.4) 50%, rgba(255, 106, 0, 0) 100%);
            border-radius: 24px;
            opacity: 0;
            transition: opacity 0.6s ease;
            pointer-events: none;
            z-index: 1;
        }

        /* Overlay */
        .card-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
            transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 2;
        }

        /* Card Info */
        .card-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            padding: 24px;
            background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0.95) 100%);
            color: white;
            z-index: 3;
            transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            min-height: 80px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }

        .card-info h3 {
            font-size: 1.15rem;
            font-weight: 700;
            margin: 0;
            letter-spacing: -0.3px;
            transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            color: rgba(255, 255, 255, 1);
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .subcategories {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 5px;
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            margin: 0;
            padding: 0;
        }

        .subcategories li {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.8);
            font-weight: 500;
            letter-spacing: 0.2px;
            transition: all 0.3s ease;
            transform: translateY(-5px);
            opacity: 0;
            margin: 0;
        }

        /* HOVER EFFECTS */
        .portfolio-card:hover {
            transform: translateY(-10px) scale(1.02);
            border-color: var(--primary);
            box-shadow: 0 20px 60px rgba(255, 106, 0, 0.2), 0 0 40px rgba(255, 106, 0, 0.15);
        }

        .portfolio-card:hover img {
            filter: blur(5px) brightness(0.4) saturate(1.1);
        }

        .portfolio-card:hover::before {
            opacity: 1;
        }

        .portfolio-card:hover .card-overlay {
            background: linear-gradient(135deg, rgba(255, 106, 0, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%);
            backdrop-filter: blur(10px);
        }

        .portfolio-card:hover .card-info {
            background: linear-gradient(180deg, rgba(255, 106, 0, 0.1) 0%, rgba(255, 106, 0, 0.05) 30%, rgba(0, 0, 0, 0.85) 100%);
            min-height: 100%;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 40px 32px;
        }

        .portfolio-card:hover .card-info h3 {
            font-size: 1.5rem;
            margin-bottom: 12px;
            text-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
        }

        .portfolio-card:hover .subcategories {
            opacity: 1;
            max-height: 300px;
        }

        .portfolio-card:hover .subcategories li {
            opacity: 1;
            transform: translateY(0);
            animation: slideInItem 0.5s ease forwards;
        }

        .portfolio-card:hover .subcategories li:nth-child(1) {
            animation-delay: 0.05s;
        }

        .portfolio-card:hover .subcategories li:nth-child(2) {
            animation-delay: 0.1s;
        }

        .portfolio-card:hover .subcategories li:nth-child(3) {
            animation-delay: 0.15s;
        }

        .portfolio-card:hover .subcategories li:nth-child(4) {
            animation-delay: 0.2s;
        }

        @keyframes slideInItem {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Spotlight Effect */
        .portfolio-card::after {
            content: '';
            position: absolute;
            width: 150px;
            height: 150px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 0.6s ease;
            pointer-events: none;
            z-index: 4;
        }

        .portfolio-card:hover::after {
            opacity: 1;
            animation: spotlightPulse 0.8s ease-in-out;
        }

        @keyframes spotlightPulse {
            0% {
                transform: translate(-50%, -50%) scale(0.8);
            }

            50% {
                transform: translate(-50%, -50%) scale(1.1);
            }

            100% {
                transform: translate(-50%, -50%) scale(1);
            }
        }

        /* Accent Colors */
        .portfolio-card:nth-child(1)::before {
            background: linear-gradient(135deg, rgba(255, 106, 0, 0) 0%, rgba(255, 106, 0, 0.3) 50%, rgba(255, 106, 0, 0) 100%);
        }

        .portfolio-card:nth-child(2)::before {
            background: linear-gradient(135deg, rgba(255, 140, 51, 0) 0%, rgba(255, 140, 51, 0.3) 50%, rgba(255, 140, 51, 0) 100%);
        }

        .portfolio-card:nth-child(3)::before {
            background: linear-gradient(135deg, rgba(255, 120, 0, 0) 0%, rgba(255, 120, 0, 0.35) 50%, rgba(255, 120, 0, 0) 100%);
        }

        .portfolio-card:nth-child(4)::before {
            background: linear-gradient(135deg, rgba(255, 90, 0, 0) 0%, rgba(255, 90, 0, 0.3) 50%, rgba(255, 90, 0, 0) 100%);
        }

        .portfolio-card:nth-child(5)::before {
            background: linear-gradient(135deg, rgba(255, 106, 0, 0) 0%, rgba(255, 106, 0, 0.3) 50%, rgba(255, 106, 0, 0) 100%);
        }

        .portfolio-card:nth-child(6)::before {
            background: linear-gradient(135deg, rgba(255, 75, 0, 0) 0%, rgba(255, 75, 0, 0.3) 50%, rgba(255, 75, 0, 0) 100%);
        }

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

        @media (max-width: 1200px) {
            .portfolio-bento {
                grid-template-columns: repeat(12, 1fr);
                grid-auto-rows: 240px;
                gap: 20px;
            }

            .portfolio-card:nth-child(1) {
                grid-column: span 8;
                grid-row: span 2;
            }

            .portfolio-card:nth-child(2) {
                grid-column: span 4;
            }

            .portfolio-card:nth-child(3) {
                grid-column: span 4;
            }

            .portfolio-card:nth-child(4) {
                grid-column: span 6;
            }

            .portfolio-card:nth-child(5) {
                grid-column: span 6;
            }

            .card-info h3 {
                font-size: 1.05rem;
            }

            .portfolio-card:hover .card-info h3 {
                font-size: 1.35rem;
            }
        }

        @media (max-width: 992px) {
            .portfolio-bento {
                grid-template-columns: repeat(6, 1fr);
                grid-auto-rows: 240px;
                gap: 18px;
            }

            .portfolio-card:nth-child(1) {
                grid-column: span 6;
                grid-row: span 2;
            }

            .portfolio-card:nth-child(2) {
                grid-column: span 3;
            }

            .portfolio-card:nth-child(3) {
                grid-column: span 3;
            }

            .portfolio-card:nth-child(4) {
                grid-column: span 3;
            }

            .portfolio-card:nth-child(5) {
                grid-column: span 3;
            }

            .card-info {
                padding: 20px;
                min-height: 70px;
            }

            .card-info h3 {
                font-size: 1rem;
            }

            .portfolio-card:hover .card-info h3 {
                font-size: 1.25rem;
            }

            .subcategories li {
                font-size: 0.7rem;
            }
        }

        @media (max-width: 768px) {
            .portfolio-bento {
                grid-template-columns: repeat(2, 1fr);
                grid-auto-rows: 200px;
                gap: 16px;
            }

            .portfolio-card:nth-child(1) {
                grid-column: span 2;
                grid-row: span 2;
            }

            .portfolio-card:nth-child(2) {
                grid-column: span 1;
            }

            .portfolio-card:nth-child(3) {
                grid-column: span 1;
            }

            .portfolio-card:nth-child(4) {
                grid-column: span 1;
            }

            .portfolio-card:nth-child(5) {
                grid-column: span 1;
            }

            .card-info {
                padding: 16px;
                min-height: 60px;
            }

            .card-info h3 {
                font-size: 0.95rem;
            }

            .portfolio-card:hover .card-info h3 {
                font-size: 1.15rem;
            }

            .subcategories li {
                font-size: 0.65rem;
            }

            .portfolio-card:hover {
                transform: translateY(-6px) scale(1.01);
            }
        }

        @media (max-width: 480px) {
            .product-portfolio {}

            .portfolio-bento {
                grid-template-columns: 1fr;
                grid-auto-rows: 180px;
                gap: 12px;
            }

            .portfolio-card:nth-child(1) {
                grid-column: span 1;
                grid-row: span 2;
            }

            .portfolio-card:nth-child(2) {
                grid-column: span 1;
            }

            .portfolio-card:nth-child(3) {
                grid-column: span 1;
            }

            .portfolio-card:nth-child(4) {
                grid-column: span 1;
            }

            .portfolio-card:nth-child(5) {
                grid-column: span 1;
            }

            .card-info {
                padding: 14px;
                min-height: 50px;
            }

            .card-info h3 {
                font-size: 0.9rem;
            }

            .portfolio-card:hover .card-info h3 {
                font-size: 1rem;
            }

            .subcategories li {
                font-size: 0.6rem;
            }

            .portfolio-card:hover {
                transform: translateY(-4px) scale(1);
            }
        }

        @media (prefers-reduced-motion: reduce) {

            .portfolio-card,
            .portfolio-card img,
            .card-overlay,
            .card-info,
            .card-info h3,
            .subcategories,
            .subcategories li {
                transition: none;
                animation: none;
            }
        }

        /* ===== PORTFOLIO SECTION ANIMATIONS ===== */

        /* Section header */
        .product-portfolio .lugg-trust__head {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.7s ease, transform 0.7s ease;
        }

        .product-portfolio .lugg-trust__head.animate-in {
            opacity: 1;
            transform: translateY(0);
        }

        /* Eyebrow, title cascade */
        .product-portfolio .lugg-trust__eyebrow {
            opacity: 0;
            transform: translateY(-12px);
            transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
        }

        .product-portfolio .lugg-trust__head.animate-in .lugg-trust__eyebrow {
            opacity: 1;
            transform: translateY(0);
        }

        .product-portfolio .lugg-trust__title {
            opacity: 0;
            transform: translateY(16px);
            transition: opacity 0.55s ease 0.22s, transform 0.55s ease 0.22s;
        }

        .product-portfolio .lugg-trust__head.animate-in .lugg-trust__title {
            opacity: 1;
            transform: translateY(0);
        }

        /* Cards - hidden initially */
        .portfolio-card {
            opacity: 0;
            transform: translateY(50px) scale(0.97);
            transition: opacity 0.65s ease, transform 0.65s ease;
        }

        .portfolio-card.animate-in {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* Subcategory items stagger on card hover */
        .subcategories li {
            transform: translateX(-8px);
            opacity: 0.7;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

        .portfolio-card:hover .subcategories li {
            transform: translateX(0);
            opacity: 1;
        }

        .portfolio-card:hover .subcategories li:nth-child(1) {
            transition-delay: 0s;
        }

        .portfolio-card:hover .subcategories li:nth-child(2) {
            transition-delay: 0.06s;
        }

        .portfolio-card:hover .subcategories li:nth-child(3) {
            transition-delay: 0.12s;
        }

        .portfolio-card:hover .subcategories li:nth-child(4) {
            transition-delay: 0.18s;
        }

        /* Card title subtle lift on hover */
        .portfolio-card .card-info h3 {
            transition: transform 0.35s ease, letter-spacing 0.35s ease;
        }

        .portfolio-card:hover .card-info h3 {
            transform: translateY(-4px);
            letter-spacing: 0.5px;
        }

        /* Image zoom on hover */
        .portfolio-card img {
            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .portfolio-card:hover img {
            transform: scale(1.08);
        }

        /**************************/
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            filter: invert(1);
            /* makes arrows white */
        }

        .carousel-indicators [data-bs-target] {
            background-color: orange;
        }

        header,
        .navbar {
            margin-bottom: 0 !important;
        }

        .demo-body {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }

        #bannerSlider {
            margin-top: 0;
            width:100%;
        }



        /* Tablet */
        @media (max-width: 991px) {
            .carousel-item img {
                height: 45vh;
            }
        }

        /* Mobile */
        @media (max-width: 576px) {
            .carousel-item img {
                height: 26vh;
            }
        }
   
   
   
   
   
         /* ── HERO ────────────────────────────────────────── */
        .hero {
            background: linear-gradient(135deg, #111111 0%, #1e0d00 50%, #3a1a00 100%);
                padding: 40px 0 30px;
            position: relative;
            overflow: hidden;
            min-height: 240px;
            display: flex;
            align-items: center;
            justify-content: center; /* Center content horizontally */
        }

        /* Decorative orbs */
        .hero::before {
            content: '';
            position: absolute;
            width: 560px; height: 560px;
            background: radial-gradient(circle, rgba(255,106,0,0.18) 0%, transparent 70%);
            border-radius: 50%;
            top: -180px; right: -120px;
            animation: floatOrb 9s ease-in-out infinite;
        }
        .hero::after {
            content: '';
            position: absolute;
            width: 380px; height: 380px;
            background: radial-gradient(circle, rgba(255,106,0,0.1) 0%, transparent 70%);
            border-radius: 50%;
            bottom: -120px; left: -80px;
            animation: floatOrb 12s ease-in-out infinite reverse;
        }

        @keyframes floatOrb {
            0%, 100% { transform: translateY(0); }
            50%       { transform: translateY(30px); }
        }

        /* Cross-hatch pattern overlay */
        .hero-pattern {
            position: absolute;
            inset: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ff6a00' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            pointer-events: none;
        }

        /* Right side image panel */
        .hero-image-panel {
            position: absolute;
            right: 0; top: 0; bottom: 0;
            width: 50%;
            overflow: hidden;
            z-index: 1;
            /* Mask to create a soft, non-linear blend from the left */
            mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.8) 40%, black 100%);
            -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.8) 40%, black 100%);
        }
        .hero-image-panel img {
            width: 100%; height: 100%;
            object-fit: cover;
            opacity: 0.45; /* Increased visibility */
            filter: contrast(1.1) brightness(0.9);
            transition: transform 1.5s ease;
        }
        .hero:hover .hero-image-panel img {
            transform: scale(1.05);
        }
        .hero-image-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            /* Multi-layer gradient for complex blending */
            background: linear-gradient(90deg, rgba(30,13,0,1) 0%, rgba(30,13,0,0.4) 30%, transparent 100%);
            z-index: 2;
        }

        .hero-inner {
            position: relative;
            z-index: 2;
            width: 100%;
          
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr;
            padding:0 24px;
        }

        .hero-content-box {
            max-width: 640px;
            position: relative;
            z-index: 3;
        }

        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,106,0,0.15);
            border: 1px solid rgba(255,106,0,0.3);
            color: var(--primary-light);
            font-size: clamp(10px, 1.2vw, 11px);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            padding: 6px 14px;
            border-radius: 20px;
            margin-bottom: 14px;
            opacity: 0;
            transform: translateY(-10px);
            animation: dropIn 0.5s ease 0.25s forwards;
            width:fit-content;
        }

        @keyframes dropIn { to { opacity: 1; transform: translateY(0); } }

        .hero-title {
            font-size: clamp(2rem, 4vw, 3.2rem);
            font-weight: 700;
            color: var(--white);
            line-height: 1.12;
            margin-bottom: 12px;
            opacity: 0;
            transform: translateY(22px);
            animation: riseUp 0.6s ease 0.35s forwards;
        }
        .hero-title em { font-style: normal; color: var(--primary); }

        @keyframes riseUp { to { opacity: 1; transform: translateY(0); } }

        .hero-sub {
            font-size: clamp(13px, 1.5vw, 15px);
            color: rgba(255,255,255,0.62);
            line-height: 1.6;
            margin-bottom: 16px;
            max-width: 480px;
            opacity: 0;
            animation: riseUp 0.55s ease 0.48s forwards;
        }

        .hero-actions {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
            opacity: 0;
            animation: riseUp 0.5s ease 0.58s forwards;
        }

        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 36px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: var(--white);
            border: none;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 8px 24px rgba(255,106,0,0.35);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(255,106,0,0.45); }

        .btn-ghost {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 36px;
            background: rgba(255,255,255,0.08);
            color: var(--white);
            border: 1.5px solid rgba(255,255,255,0.25);
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
        }
        .btn-ghost:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.5); transform: translateY(-3px); }

        .hero-breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 16px;
            font-size: clamp(11px, 1.2vw, 12px);
            opacity: 0;
            animation: riseUp 0.45s ease 0.68s forwards;
        }
        .hero-breadcrumb a { color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.3s; }
        .hero-breadcrumb a:hover { color: var(--primary-light); }
        .hero-breadcrumb span { color: rgba(255,255,255,0.25); }
        .hero-breadcrumb strong { color: var(--primary-light); font-weight: 600; }

        /* Hero stat pills */
        .hero-pills {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            margin-top: 16px;
            opacity: 0;
            animation: riseUp 0.5s ease 0.72s forwards;
        }
        .hero-pill {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 50px;
            padding: 8px 16px;
            font-size: 12px;
            color: rgba(255,255,255,0.75);
            font-weight: 600;
        }
        .hero-pill i { color: var(--primary-light); font-size: 14px; }

        /* ── SCROLL INDICATOR ────────────────────────────── */
        .scroll-hint {
            position: absolute;
            bottom: 28px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            color: rgba(255,255,255,0.35);
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            z-index: 3;
            animation: riseUp 0.5s ease 1s forwards;
            opacity: 0;
        }
        .scroll-arrow {
            width: 28px; height: 28px;
            border: 1.5px solid rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: scrollBounce 2s ease-in-out infinite;
        }
        @keyframes scrollBounce {
            0%, 100% { transform: translateY(0); }
            50%       { transform: translateY(6px); }
        }

        /* ── STORY SECTION ───────────────────────────────── */
        .story {
            padding: 72px 0 80px;
            background: linear-gradient(180deg, var(--white) 0%, #fafafa 100%);
        }

        .story-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 72px;
            align-items: center;
        }

        .section-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--orange-pale);
            color: var(--primary);
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            padding: 7px 16px;
            border-radius: 20px;
            margin-bottom: 18px;
        }

        .section-h2 {
            font-size: clamp(1.5rem, 4vw, 2.8rem);
            font-weight: 700;
            line-height: 1.2;
        }
        .section-h2 .highlight {
            background: linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .story-text {
            font-size: 14px;
            color: var(--text-muted);
            line-height: 1.85;
            margin-bottom: 20px;
        }

        .story-highlights {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 32px;
        }
        .highlight-pill {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--orange-pale);
            border: 1px solid rgba(255,106,0,0.15);
            border-radius: 50px;
            padding: 9px 18px;
            font-size: 13px;
            font-weight: 600;
            color: var(--primary-dark);
            transition: all 0.3s ease;
        }
        .highlight-pill:hover { background: var(--primary); color: var(--white); transform: translateY(-2px); }
        .highlight-pill i { font-size: 15px; }

        .story-image-wrap {
            position: relative;
            opacity: 0;
            transform: translateX(36px);
            transition: opacity 0.7s ease, transform 0.7s ease;
        }
        .story-image-wrap.animate-in { opacity: 1; transform: translateX(0); }

        .story-img {
            width: 100%;
            aspect-ratio: 4/3;
            border-radius: 28px;
            overflow: hidden;
            box-shadow: 0 28px 70px rgba(255,106,0,0.18);
        }
        .story-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
        .story-img:hover img { transform: scale(1.05); }

        /* Floating badge on image */
        .story-badge {
            position: absolute;
            bottom: -20px;
            left: -24px;
            background: var(--white);
            border: 1.5px solid var(--border-light);
            border-radius: 18px;
            padding: 16px 22px;
            display: flex;
            align-items: center;
            gap: 14px;
            box-shadow: 0 12px 36px rgba(0,0,0,0.1);
            animation: floatBadge 4s ease-in-out infinite;
        }
        @keyframes floatBadge {
            0%, 100% { transform: translateY(0); }
            50%       { transform: translateY(-8px); }
        }
        .badge-icon {
            width: 44px; height: 44px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-size: 20px;
            flex-shrink: 0;
        }
        .badge-num { font-size: 20px; font-weight: 700; color: var(--text-dark); line-height: 1; }
        .badge-lbl { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

        .story-content {
            opacity: 0;
            transform: translateX(-36px);
            transition: opacity 0.7s ease, transform 0.7s ease;
        }
        .story-content.animate-in { opacity: 1; transform: translateX(0); }

        /* ── STATS ───────────────────────────────────────── */
        .stats-section {
            padding: 80px 0;
            background: linear-gradient(135deg, #111 0%, #1e0d00 100%);
            position: relative;
            overflow: hidden;
        }
        .stats-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ff6a00' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            pointer-events: none;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2px;
            position: relative;
        }

        .stat-item {
            text-align: center;
            padding: 52px 32px;
            border-right: 1px solid rgba(255,255,255,0.08);
            opacity: 0;
            transform: translateY(28px);
            transition: opacity 0.55s ease, transform 0.55s ease;
        }
        .stat-item:last-child { border-right: none; }
        .stat-item.animate-in { opacity: 1; transform: translateY(0); }
        .stat-item:hover { background: rgba(255,106,0,0.06); }

        .stat-icon-wrap {
            width: 56px; height: 56px;
            background: rgba(255,106,0,0.15);
            border: 1px solid rgba(255,106,0,0.3);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: var(--primary-light);
            margin: 0 auto 20px;
            transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .stat-item:hover .stat-icon-wrap { background: var(--primary); color: var(--white); transform: scale(1.12) rotate(-6deg); border-color: var(--primary); }

        .stat-number {
            font-size: 2.6rem;
            font-weight: 700;
            color: var(--white);
            line-height: 1;
            margin-bottom: 10px;
        }
        .stat-number span { color: var(--primary); }

        .stat-label {
            font-size: 11px;
            font-weight: 700;
            color: rgba(255,255,255,0.45);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* ── BUSINESS SECTION ────────────────────────────── */
        .business {
            padding: 100px 0;
            background: linear-gradient(180deg, #fafafa 0%, var(--white) 100%);
        }

        .center-header {
            text-align: center;
            margin-bottom: 64px;
            opacity: 0;
            transform: translateY(22px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        .center-header.animate-in { opacity: 1; transform: translateY(0); }

        .center-header p {
            font-size: 14px;
            color: var(--text-muted);
            max-width: 560px;
            margin: 10px auto 0;
            line-height: 1.7;
        }

        .business-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 28px;
        }

        .business-card {
            background: var(--white);
            border: 1.5px solid var(--border-light);
            border-radius: 20px;
            padding: 40px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            opacity: 0;
            transform: translateY(32px) scale(0.97);
            transition: opacity 0.55s ease, transform 0.55s ease, border-color 0.35s ease, box-shadow 0.35s ease;
        }
        .business-card.animate-in { opacity: 1; transform: translateY(0) scale(1); }
        /* .business-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease;
        } */
        .business-card:hover { border-color: rgba(255,106,0,0.25); box-shadow: 0 20px 56px rgba(255,106,0,0.1); transform: translateY(-8px) scale(1) !important; }
        .business-card:hover::before { transform: scaleX(1); }

        .business-icon {
            width: 64px; height: 64px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            color: var(--white);
            margin-bottom: 24px;
            box-shadow: 0 10px 28px rgba(255,106,0,0.25);
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
        }
        .business-card:hover .business-icon { transform: rotateY(360deg) scale(1.12); box-shadow: 0 16px 40px rgba(255,106,0,0.35); }

        .business-title { font-size: 1.25rem; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; }
        .business-desc  { font-size: 13px; color: var(--text-muted); line-height: 1.75; margin-bottom: 22px; }

        .features-list { display: flex; flex-direction: column; gap: 10px; }
        .feature-item  { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-dark); transition: all 0.3s ease; }
        .feature-item:hover { padding-left: 6px; color: var(--primary); }
        .feature-item i { color: var(--primary); font-size: 15px; flex-shrink: 0; transition: transform 0.3s ease; }
        .feature-item:hover i { transform: scale(1.25) rotate(10deg); }

        /* ── VALUES ──────────────────────────────────────── */
        .values {
            padding: 100px 0;
            background: linear-gradient(135deg, rgba(255,106,0,0.03) 0%, rgba(204,85,0,0.03) 100%);
        }

        .values-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px;
        }

        .value-card {
            background: var(--white);
            border: 1.5px solid var(--border-light);
            border-radius: 20px;
            padding: 52px 44px;
            text-align: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            opacity: 0;
            transform: translateY(28px);
            transition: opacity 0.55s ease, transform 0.55s ease, border-color 0.35s ease, box-shadow 0.35s ease;
        }
        .value-card.animate-in { opacity: 1; transform: translateY(0); }
        .value-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 5px;
            background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .value-card:hover { border-color: rgba(255,106,0,0.25); box-shadow: 0 20px 56px rgba(0,0,0,0.1); transform: translateY(-10px) !important; }
        .value-card:hover::before { transform: scaleX(1); }

        .value-icon {
            font-size: 3.2rem;
            color: var(--primary);
            margin-bottom: 22px;
            display: inline-block;
            transition: all 0.4s ease;
        }
        .value-card:hover .value-icon { transform: rotateX(360deg) scale(1.2); filter: drop-shadow(0 6px 16px rgba(255,106,0,0.3)); }
        .value-card h3 { font-size: 1.4rem; font-weight: 700; color: var(--text-dark); margin-bottom: 14px; }
        .value-card p  { font-size: 13px; color: var(--text-muted); line-height: 1.75; }

        /* ── TEAM / PILLARS ──────────────────────────────── */
        .features-section {
            padding: 100px 0;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }

        .feature-card {
            background: var(--white);
            border: 1.5px solid var(--border-light);
            border-radius: 20px;
            padding: 42px 28px;
            text-align: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 16px rgba(0,0,0,0.05);
            opacity: 0;
            transform: translateY(32px) scale(0.97);
            transition: opacity 0.55s ease, transform 0.55s ease, border-color 0.35s ease, box-shadow 0.35s ease;
        }
        .feature-card.animate-in { opacity: 1; transform: translateY(0) scale(1); }
        .feature-card:hover { border-color: var(--primary); box-shadow: 0 16px 44px rgba(255,106,0,0.12); transform: translateY(-10px) scale(1) !important; }

        .feature-icon-box {
            width: 72px; height: 72px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: var(--white);
            margin: 0 auto 22px;
            box-shadow: 0 10px 28px rgba(255,106,0,0.25);
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
        }
        .feature-card:hover .feature-icon-box { transform: rotateY(360deg) scale(1.15); box-shadow: 0 16px 40px rgba(255,106,0,0.35); }
        .feature-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; transition: color 0.3s; }
        .feature-card:hover h3 { color: var(--primary); }
        .feature-card p  { font-size: 12.5px; color: var(--text-muted); line-height: 1.7; }

        

        /* ── STATEMENT ───────────────────────────────────── */
        .statement {
            padding: 100px 0;
            text-align: center;
            background: linear-gradient(135deg, #111 0%, #2a1200 60%, #ff6a00 100%);
            position: relative;
            overflow: hidden;
        }
        .statement::before {
            content: '';
            position: absolute;
            inset: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ff6a00' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            pointer-events: none;
        }

        .statement-inner {
            position: relative;
            z-index: 1;
            opacity: 0;
            transform: translateY(28px);
            transition: opacity 0.65s ease, transform 0.65s ease;
        }
        .statement-inner.animate-in { opacity: 1; transform: translateY(0); }

        .quote-mark {
            font-size: 100px;
            line-height: 0.5;
            color: rgba(255,106,0,0.3);
            font-family: Georgia, serif;
            display: block;
            margin-bottom: 28px;
        }
        .statement h2 {
            font-size: clamp(1.8rem, 4vw, 2.8rem);
            font-weight: 700;
            color: var(--white);
            line-height: 1.3;
            margin-bottom: 22px;
            max-width: 820px;
            margin-left: auto;
            margin-right: auto;
        }
        .statement h2 em { font-style: normal; color: var(--primary-light); }
        .statement p {
            font-size: 15px;
            color: rgba(255,255,255,0.55);
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.8;
        }

        /* ── FINAL CTA ───────────────────────────────────── */
        .final-cta {
            padding: 100px 0;
            text-align: center;
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.65s ease, transform 0.65s ease;
        }
        .final-cta.animate-in { opacity: 1; transform: translateY(0); }

        .cta-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--orange-pale);
            color: var(--primary);
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            padding: 7px 16px;
            border-radius: 20px;
            margin-bottom: 20px;
        }
        .cta-h2 {
            font-size: clamp(1.8rem, 4vw, 2.6rem);
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 14px;
            line-height: 1.2;
        }
        .cta-h2 span { color: var(--primary); }
        .cta-sub {
            font-size: 14px;
            color: var(--text-muted);
            max-width: 480px;
            margin: 0 auto 40px;
            line-height: 1.7;
        }
        .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

        .cta-btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 15px 40px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: var(--white);
            border: none;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 8px 24px rgba(255,106,0,0.28);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .cta-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(255,106,0,0.42); }

        .cta-btn-outline {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 15px 40px;
            background: var(--white);
            color: var(--primary);
            border: 2px solid var(--primary);
            border-radius: 12px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
        }
        .cta-btn-outline:hover { background: var(--primary); color: var(--white); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(255,106,0,0.25); }

        /* ── REDUCED MOTION ──────────────────────────────── */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
        }

        /* ── RESPONSIVE ──────────────────────────────────── */
        @media (max-width: 1100px) {
            .story-grid { grid-template-columns: 1fr; gap: 48px; }
            .stats-grid  { grid-template-columns: repeat(2, 1fr); }
            .stat-item   { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
            .stat-item:nth-child(2n) { border-right: none; }
            .features-grid { grid-template-columns: repeat(2, 1fr); }
            .timeline::before { left: 24px; }
            .timeline-item { grid-template-columns: 60px 1fr; }
            .timeline-item:nth-child(odd) .timeline-content,
            .timeline-item:nth-child(even) .timeline-content { grid-column: 2; }
            .timeline-item:nth-child(odd) .timeline-center,
            .timeline-item:nth-child(even) .timeline-center  { grid-column: 1; grid-row: 1; }
            .timeline-empty { display: none; }
            .timeline-item:nth-child(odd),
            .timeline-item:nth-child(even) { transform: translateY(20px); }
        }

        @media (max-width: 768px) {
            .hero { min-height: auto; padding: 72px 0 56px; }
            .hero-image-panel { display: none; }
            .hero-title { font-size: 2.4rem; }
            .stats-grid { grid-template-columns: 1fr; }
            .business-grid, .values-grid { grid-template-columns: 1fr; }
            .scroll-hint { display: none; }
        }

        @media (max-width: 480px) {
            .container { padding: 0 16px; }
            .hero-title { font-size: 1.9rem; }
            .features-grid { grid-template-columns: 1fr; }
            .story, .business, .values, .features-section, .statement, .final-cta, .timeline-section, .stats-section { padding: 64px 0; }
            .business-card, .value-card { padding: 28px 24px; }
            .feature-card { padding: 32px 22px; }
        }
        
        
        
                /* ── HERO BANNER ─────────────────────────────────── */
        .contact-hero {
            background: linear-gradient(135deg, #121212 0%, #1a1a1a 40%, #2d1a00 100%);
            position: relative;
            overflow: hidden;
            padding: 40px 0 30px;
            min-height: 240px;
            display: flex;
            align-items: center;
        }

        .contact-hero::before {
            content: '';
            position: absolute;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(255, 106, 0, 0.18) 0%, transparent 70%);
            border-radius: 50%;
            top: -150px;
            right: -100px;
        }

        .contact-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ff6a00' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            pointer-events: none;
        }

        .hero-inner {
            position: relative;
            z-index: 1;
            padding: 0 24px;
        }

        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 106, 0, 0.15);
            border: 1px solid rgba(255, 106, 0, 0.3);
            color: var(--primary-light);
            font-size: clamp(10px, 1.2vw, 11px);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            padding: 6px 14px;
            border-radius: 20px;
            margin-bottom: 14px;
            opacity: 0;
            transform: translateY(-10px);
            animation: slideDown 0.5s ease 0.25s forwards;
        }

        @keyframes slideDown {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .hero-title {
            font-size: clamp(2.2rem, 4.5vw, 3.5rem);
            font-weight: 700;
            color: var(--white);
            line-height: 1.15;
            margin-bottom: 12px;
            opacity: 0;
            transform: translateY(20px);
            animation: slideUp 0.6s ease 0.35s forwards;
        }

        .hero-title em {
            font-style: normal;
            color: var(--primary);
        }

        @keyframes slideUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .hero-sub {
            font-size: clamp(13px, 1.5vw, 15px);
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.6);
            max-width: 480px;
            opacity: 0;
            animation: slideUp 0.55s ease 0.48s forwards;
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 16px;
            font-size: clamp(11px, 1.2vw, 12px);
            opacity: 0;
            animation: slideUp 0.45s ease 0.55s forwards;
        }

        .breadcrumb a {
            color: rgba(255, 255, 255, 0.55);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .breadcrumb a:hover {
            color: var(--primary-light);
        }

        .breadcrumb-sep {
            color: rgba(255, 255, 255, 0.3);
        }

        .breadcrumb-current {
            color: var(--primary-light);
            font-weight: 600;
        }

        /* ── MAIN CONTENT ────────────────────────────────── */
        .contact-section {
            padding: 72px 0 80px;
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 40px;
            align-items: start;
        }

        /* ── INFO CARDS ──────────────────────────────────── */
        .info-col {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .info-card {
            background: var(--white);
            border: 1.5px solid var(--border-light);
            border-radius: 20px;
            padding: 28px 24px;
            display: flex;
            align-items: flex-start;
            gap: 20px;
            transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
            opacity: 0;
            transform: translateX(-28px);
        }

        .info-card.animate-in {
            opacity: 1;
            transform: translateX(0);
        }

        .info-card:hover {
            border-color: var(--primary);
            box-shadow: 0 12px 36px rgba(255, 106, 0, 0.1);
            transform: translateX(6px);
        }

        .info-icon {
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: var(--white);
            flex-shrink: 0;
            box-shadow: 0 8px 20px rgba(255, 106, 0, 0.25);
            transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.35s ease;
        }

        .info-card:hover .info-icon {
            transform: scale(1.12) rotate(-6deg);
            box-shadow: 0 12px 28px rgba(255, 106, 0, 0.35);
        }

        .info-body {}

        .info-label {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--primary);
            margin-bottom: 6px;
        }

        .info-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 6px;
        }

        .info-value {
            font-size: 13px;
            color: var(--text-muted);
            line-height: 1.7;
        }

        .info-value a {
            color: var(--text-muted);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .info-value a:hover {
            color: var(--primary);
        }

        .info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        /* ── FORM CARD ───────────────────────────────────── */
        .form-card {
            background: var(--white);
            border: 1.5px solid var(--border-light);
            border-radius: var(--card-radius);
            padding: 44px 40px;
            opacity: 0;
            transform: translateX(28px);
            transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
            position: relative;
            overflow: hidden;
        }

        .form-card.animate-in {
            opacity: 1;
            transform: translateX(0);
        }

        .form-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
        }

        .form-head {
            margin-bottom: 20px;
        }

        .form-eyebrow {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            color: var(--primary);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .form-eyebrow::before {
            content: '';
            width: 20px;
            height: 2px;
            background: var(--primary);
            border-radius: 1px;
        }

        .form-title {
            font-size: 30px;
            font-weight: 700;
            color: var(--text-dark);
            line-height: 1.2;
        }

        .form-title em {
            font-style: normal;
            color: var(--primary);
        }

        .form-subtitle {
            font-size: 14px;
            color: var(--text-muted);
            margin-top: 8px;
        }

        /* Form fields */
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 4px;
        }

        .field-group {
            display: flex;
            flex-direction: column;
            gap: 7px;
            margin-bottom: 16px;
        }

        .field-label {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-dark);
            text-transform: uppercase;
            letter-spacing: 0.6px;
        }

        .field-input,
        .field-textarea,
        .field-select {
            width: 100%;
            padding: 13px 16px;
            border: 1.5px solid var(--border-light);
            border-radius: 12px;
            font-size: 14px;
            color: var(--text-dark);
            background: var(--white);
            transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
            outline: none;
            font-family: inherit;
        }

        .field-input::placeholder,
        .field-textarea::placeholder {
            color: #bbb;
        }

        .field-input:focus,
        .field-textarea:focus,
        .field-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.1);
            transform: translateY(-1px);
        }

        .field-textarea {
            height: 130px;
            resize: vertical;
            line-height: 1.6;
        }

        .field-select {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            padding-right: 36px;
        }

        .input-wrapper {
            position: relative;
        }

        .input-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 16px;
            pointer-events: none;
            transition: color 0.3s ease;
        }

        .input-wrapper:focus-within .input-icon {
            color: var(--primary);
        }

        .input-wrapper .field-input {
            padding-left: 42px;
        }

        /* Submit button */
        .submit-btn {
            width: 100%;
            padding: 15px 32px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: var(--white);
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 6px 20px rgba(255, 106, 0, 0.25);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
            margin-top: 8px;
        }

        .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 32px rgba(255, 106, 0, 0.38);
        }

        .submit-btn:active {
            transform: scale(0.98);
        }

        @keyframes ripple {
            from {
                transform: scale(0);
                opacity: 0.4;
            }

            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        .submit-btn::after {
            content: '';
            position: absolute;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            opacity: 0;
        }

        .submit-btn:active::after {
            animation: ripple 0.55s ease forwards;
        }

        /* Success state */
        .form-success {
            display: none;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 40px 20px;
            gap: 16px;
        }

        .success-icon {
            width: 72px;
            height: 72px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: var(--white);
            animation: successPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

        @keyframes successPop {
            from {
                transform: scale(0);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .success-title {
            font-size: 22px;
            font-weight: 700;
            color: var(--text-dark);
        }

        .success-text {
            font-size: 14px;
            color: var(--text-muted);
            max-width: 320px;
            line-height: 1.7;
        }

        /* ── MAP SECTION ─────────────────────────────────── */
        .map-section {
            padding-bottom: 0;
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.65s ease, transform 0.65s ease;
        }

        .map-section.animate-in {
            opacity: 1;
            transform: translateY(0);
        }

        .map-wrapper {
            position: relative;
            border-radius: var(--card-radius) var(--card-radius) 0 0;
            overflow: hidden;
            height: 380px;
            border: 1.5px solid var(--border-light);
            border-bottom: none;
        }

        .map-wrapper iframe {
            width: 100%;
            height: 100%;
            border: none;
            filter: saturate(0.85) contrast(1.05);
            transition: filter 0.4s ease;
        }

        .map-wrapper:hover iframe {
            filter: saturate(1) contrast(1);
        }

        .map-overlay-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--white);
            border: 1.5px solid var(--border-light);
            border-radius: 14px;
            padding: 12px 18px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
            font-size: 13px;
            font-weight: 700;
            color: var(--text-dark);
        }

        .map-pin {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-size: 16px;
            animation: pinBounce 2s ease-in-out infinite;
        }

        @keyframes pinBounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-5px);
            }
        }

        /* ── RESPONSIVE ──────────────────────────────────── */
        @media (max-width: 1024px) {
            .contact-grid {
                grid-template-columns: 1fr;
            }

            .form-card {
                transform: translateY(20px);
            }

            .form-card.animate-in {
                transform: translateY(0);
            }

            .info-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 40px;
            }

            .form-card {
                padding: 32px 24px;
            }

            .form-row {
                grid-template-columns: 1fr;
            }

            .map-wrapper {
                height: 280px;
            }
        }

        @media (max-width: 480px) {
            .hero-title {
                font-size: 30px;
            }

            .contact-section {
                padding: 48px 0 56px;
            }

            .info-grid {
                grid-template-columns: 1fr;
            }

            .form-title {
                font-size: 24px;
            }

            .map-wrapper {
                height: 240px;
            }
        }

        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ── HERO IMAGE PANEL ────────────────────────────── */
        .hero-image-panel {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 50%;
            overflow: hidden;
            z-index: 0;
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40%);
            mask-image: linear-gradient(to right, transparent 0%, black 40%);
        }

        .hero-image-panel img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.45;
            filter: contrast(1.1) brightness(0.9);
        }

        .hero-image-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, #1a1a1a 0%, transparent 100%);
            z-index: 1;
        }

        @media (max-width: 768px) {
            .hero-image-panel {
                display: none;
            }
        }