@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
        body {
            font-family: 'Roboto', sans-serif;
            background: radial-gradient(900px 500px at 10% 10%, rgba(245, 102, 141, 0.10), rgba(255, 255, 255, 0) 60%),
                        radial-gradient(900px 500px at 90% 20%, rgba(52, 22, 30, 0.08), rgba(255, 255, 255, 0) 60%),
                        linear-gradient(180deg, #ffffff 0%, #fff8fb 50%, #ffffff 100%);
            background-attachment: fixed;
        }
        /* Define custom colors based on prompt */
        :root {
            --color-primary: #34161E; /* Dark Maroon/Burgundy */
            --color-accent: #FFF0F5; /* Soft Pink Background */
            --color-cta: #F5668D; /* Pink/Red CTA */
            --color-cta-2: #FF3D7F;
            --color-primary-2: #4B1C2A;
            --color-surface: rgba(255, 255, 255, 0.86);
            --shadow-soft: 0 12px 30px rgba(17, 24, 39, 0.10);
            --shadow-strong: 0 18px 45px rgba(17, 24, 39, 0.16);
        }
        .bg-primary {
            background-color: var(--color-primary);
            background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-2) 100%);
        }
        .text-primary { color: var(--color-primary); }
        .bg-accent { background-color: var(--color-accent); }
        .bg-cta { background-color: var(--color-cta); background-image: linear-gradient(135deg, var(--color-cta) 0%, var(--color-cta-2) 100%); }
        .text-cta { color: var(--color-cta); }

        html {
            scroll-behavior: smooth;
        }

        a {
            text-decoration-thickness: 2px;
            text-underline-offset: 4px;
        }

        .border-gray-100 {
            border-color: rgba(52, 22, 30, 0.08) !important;
        }

        header.sticky {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        a.bg-cta, button.bg-cta {
            box-shadow: var(--shadow-soft);
        }
        a.bg-cta:hover, button.bg-cta:hover {
            box-shadow: var(--shadow-strong);
            transform: translateY(-1px);
        }

        footer a:hover {
            text-decoration: underline;
            text-underline-offset: 4px;
        }

        ::selection {
            background: rgba(245, 102, 141, 0.25);
        }

        .bg-gray-50 {
            background-color: #fff4f8 !important;
            background-image: radial-gradient(700px 260px at 20% 20%, rgba(245, 102, 141, 0.10), rgba(255, 255, 255, 0) 60%),
                              radial-gradient(700px 260px at 80% 10%, rgba(52, 22, 30, 0.06), rgba(255, 255, 255, 0) 60%);
        }

        .shadow-lg {
            box-shadow: var(--shadow-soft) !important;
        }
        .shadow-xl, .shadow-2xl {
            box-shadow: var(--shadow-strong) !important;
        }

        .hover\:shadow-xl:hover {
            box-shadow: var(--shadow-strong) !important;
        }

        a[class*="shadow"], button[class*="shadow"], div[class*="shadow"] {
            transition: transform 220ms ease, box-shadow 220ms ease;
        }

        a.hover\:shadow-xl:hover, a.hover\:shadow-lg:hover, div.hover\:shadow-xl:hover, div.hover\:shadow-lg:hover {
            transform: translateY(-2px);
        }

        .ring-gray-100 {
            --tw-ring-color: rgba(255, 255, 255, 0.55) !important;
        }
        
        /* --- Custom Styles for Owl Carousel Navigation --- */

        /* Style and position the individual arrows for visibility on all devices */
        .owl-theme .owl-nav [class*='owl-'] {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            /* Use a dark background */
            background: var(--color-primary) !important; 
            color: white !important;
            font-size: 1.5rem !important;
            height: 40px;
            width: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 9999px; /* Fully rounded */
            line-height: 1; 
            z-index: 10; 
            opacity: 0.8;
            transition: opacity 0.2s ease;
        }

        .owl-theme .owl-nav [class*='owl-']:hover {
            opacity: 1; /* Fully opaque on hover */
        }
        
        /* Adjust positioning for next/prev buttons */
        .owl-theme .owl-prev {
            left: 0;
            margin-left: -15px; /* Pull arrow halfway outside the card edge */
        }

        .owl-theme .owl-next {
            right: 0;
            margin-right: -15px; /* Pull arrow halfway outside the card edge */
        }

        /* Responsive adjustments for mobile view (to ensure arrows are visible inside the padding area) */
        @media (max-width: 640px) {
            .owl-theme .owl-prev, .owl-theme .owl-next {
                margin-left: 5px; 
                margin-right: 5px;
            }
        }

        /* --- Remove Dots/Pagination Indicators --- */
        .owl-theme .owl-dots {
            display: none; /* Explicitly hide the dots for all carousels */
        }

        /* --- Custom Bento Grid for Complements Section --- */
        /* Desktop/Tablet: 3-column layout with 2 items spanning 2 rows/columns */
        .bento-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem; /* gap-6 */
        }
        .bento-item-tall {
            grid-row: span 2 / span 2;
        }
        .bento-item-wide {
            grid-column: span 2 / span 2;
        }
        
        /* Mobile: All items stack (1 column) */
        @media (max-width: 767px) {
            .bento-grid {
                grid-template-columns: 1fr;
            }
            .bento-item-tall, .bento-item-wide {
                grid-row: span 1 / span 1;
                grid-column: span 1 / span 1;
            }
        }
        /* Mobile Constraint: Hide the central logo element */
        #bento-center-logo {
            display: none;
        }
        /* Desktop/Tablet Constraint: Show the central logo element */
        @media (min-width: 768px) {
            #bento-center-logo {
                display: flex;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 20; /* Overlays the grid items */
            }
        }