:root {
            --orange: #EF7722;
            --cyan: #0BA6DF;
            --light-gray: #EBEBEB;
            --soft-yellow: #FAA533;
            --black: #1A1A1A;
            --white: #FFFFFF;
        }

        body {
            font-family: 'Ysabeau Office', sans-serif;
            background-color: var(--white);
            color: var(--black);
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        /* Typography Weights */
        .title-weight { font-weight: 900; }
        .subtitle-weight { font-weight: 600; }
        .body-weight { font-weight: 400; }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--light-gray); }
        ::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 10px; }

        /* Header Styles */
        header.sticky-nav {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            transition: all 0.4s ease;
        }
        header.scrolled { padding-top: 0.5rem; padding-bottom: 0.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

        /* Page Transitions */
        .page { display: none; min-height: 100vh; }
        .page.active { display: block; animation: pageFadeIn 0.8s ease forwards; }
        @keyframes pageFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Hero Image Animation */
        .hero-img-container {
            position: relative;
            overflow: hidden;
            border: 2px solid var(--cyan);
            transition: transform 0.5s ease;
        }
        .hero-img-container:hover { transform: scale(1.02); }
        .hero-bg-animate {
            background-size: cover;
            background-position: center;
            animation: panBG 20s infinite alternate ease-in-out;
        }
        @keyframes panBG { 0% { transform: scale(1); } 100% { transform: scale(1.2); } }

        /* Diagonal Overlay */
        .diagonal-accent {
            position: absolute;
            bottom: -50px;
            right: -50px;
            width: 200px;
            height: 200px;
            background: var(--soft-yellow);
            transform: rotate(45deg);
            z-index: 10;
        }

        /* Product Cards */
        .card-gray { background: var(--light-gray); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .card-gray:hover { transform: translateY(-12px); border: 2px solid var(--cyan); box-shadow: 0 15px 45px rgba(11, 166, 223, 0.2); }

        /* Interactive Elements */
        .btn-primary { background: var(--orange); color: white; transition: 0.3s; }
        .btn-primary:hover { filter: brightness(1.1); transform: translateY(-2px); }
        .btn-secondary { border: 2px solid var(--cyan); background: transparent; transition: 0.3s; }
        .btn-secondary:hover { background: var(--cyan); color: white; }

        /* Inspiration Scroll */
        .scroll-container { display: flex; overflow-x: auto; gap: 2rem; padding: 20px 0; scrollbar-width: none; }
        .scroll-container::-webkit-scrollbar { display: none; }
        .scroll-item { min-width: 350px; position: relative; box-shadow: 10px 10px 20px rgba(0,0,0,0.1); border: 5px solid white; transition: 0.3s; }
        .scroll-item:hover { transform: scale(1.05); z-index: 20; }
        .caption-overlay { position: absolute; bottom: 20px; left: 0; background: var(--cyan); color: white; padding: 10px 20px; font-weight: 700; }

        /* Blog Filter */
        .blog-img { filter: grayscale(100%); transition: 0.5s; }
        .blog-card:hover .blog-img { filter: grayscale(0%); }
        .blog-card:hover h4 { text-decoration: underline; text-decoration-color: var(--cyan); }

        /* Modals */
        #quickview-modal { display: none; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); }
        
        /* Reveal on Scroll */
        .reveal { opacity: 0; transform: translateY(40px); transition: 0.8s all ease; }
        .reveal.visible { opacity: 1; transform: translateY(0); }
    /* Text animation classes */
  .hero-text {
    transition: opacity 1s ease, transform 1s ease;
  }
  .hero-text.animate {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* Image sliding animation */
  .hero-bg-animate {
    animation: slideHero 15s ease-in-out infinite alternate;
  }

  @keyframes slideHero {
    0% { transform: translateX(0); }
    50% { transform: translateX(-10%); }
    100% { transform: translateX(0); }
  }