/* ============================================================
           CSS VARIABLES
        ============================================================ */
        :root {
            --color-black:       #111111;
            --color-white:       #ffffff;
            --color-off-white:   #f5f5f5;
            --color-light-gray:  #e8e8e8;
            --color-mid-gray:    #888888;
            --color-dark-gray:   #444444;
            --color-text:        #1a1a1a;
            --color-star:        #f5a623;
            --color-border:      #e2e2e2;
            --color-card-bg:     #ffffff;
            --color-section-bg:  #f9f9f9;

            --font-family:       'Inter', sans-serif;
            --font-size-xs:      0.75rem;
            --font-size-sm:      0.875rem;
            --font-size-base:    1rem;
            --font-size-md:      1.125rem;
            --font-size-lg:      1.25rem;
            --font-size-xl:      1.5rem;

            --space-xs:          0.5rem;
            --space-sm:          1rem;
            --space-md:          1.5rem;
            --space-lg:          2.5rem;
            --space-xl:          4rem;
            --space-2xl:         6rem;

            --radius-sm:         4px;
            --radius-md:         8px;
            --radius-lg:         12px;
            --radius-full:       9999px;

            --shadow-sm:         0 1px 4px rgba(0,0,0,0.08);
            --shadow-md:         0 4px 16px rgba(0,0,0,0.10);
            --shadow-lg:         0 8px 32px rgba(0,0,0,0.14);
            --shadow-hover:      0 12px 40px rgba(0,0,0,0.18);

            --transition-base:   0.3s ease;
            --transition-fast:   0.18s ease;

            --container-max:     1280px;
            --container-pad:     1.5rem;
            --header-height:     70px;
            --mega-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --total-header: calc(var(--header-height) + var(--topbar-height));
  --black: #111111;
  --gray-50: #f9f9f9;
  --gray-100: #f2f2f2;
  --gray-200: #e5e5e5;
  --gray-400: #9a9a9a;
  --gray-600: #555555;
  --accent: #c8a882;
  --accent-dark: #a3825a;
  --sale: #d63b2f;
  --sale-bg: #fdf0ef;
  --tag-new: #1a6b3c;
  --tag-new-bg: #e6f4ed;
  --tag-hot: #b7410e;
  --tag-hot-bg: #fdf0ea;
  --tag-trend: #1a4db7;
  --tag-trend-bg: #e8effe;
  --color-hero-bg:#f8f5ee;
    --spacing-xxl:120px;
    --container-pad:20px;
    --max-width:1400px;
    --color-black:#000;
    --color-white:#fff;
    --font-size-hero:     clamp(28px, 5vw, 52px);
    --spacing-xl:         60px;
     --max-width:          1280px;
  --container-pad:      24px;
  --mid-gray:     #9e9c97;
  --off-white:    #f7f6f3;
  --nav-h: 66px;
  --light-border: #e4e2dd;
  --article-max: 820px;
            
        }

        /* ============================================================
           RESET & BASE
        ============================================================ */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; font-size: 16px; }
        body {
            font-family: var(--font-family);
            color: var(--color-text);
            background: var(--color-white);
            line-height: 1.6;
            overflow-x: hidden;
        }
        img { display: block; max-width: 100%; height: auto; }
        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }
        button { cursor: pointer; border: none; background: none; font-family: inherit; }

        /* ============================================================
           SCROLL REVEAL
        ============================================================ */
        .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
        .reveal.revealed { opacity: 1; transform: none; }
        .reveal-delay-1 { transition-delay: 0.1s; }
        .reveal-delay-2 { transition-delay: 0.2s; }
        .reveal-delay-3 { transition-delay: 0.3s; }
        .reveal-delay-4 { transition-delay: 0.4s; }
        .reveal-delay-5 { transition-delay: 0.5s; }

        /* ============================================================
           CONTAINER
        ============================================================ */
        .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }