:root {
      --background: 0 0% 100%;
      --foreground: 222.2 84% 4.9%;
      --secondary: 210 40% 96%;
      --secondary-foreground: 222.2 84% 4.9%;
      --accent: 210 40% 98%;
      --muted-foreground: 215.4 16.3% 46.9%;
      --petrol-light: 194 52% 72%;
      --gradient: linear-gradient(135deg,  #136BA9 0%, #0A7ED0 100%);
    }
    
    [data-theme="dark"] {
      --background: 222.2 84% 4.9%;
      --foreground: 210 40% 98%;
      --secondary: 217.2 32.6% 17.5%;
      --secondary-foreground: 210 40% 98%;
      --accent: 217.2 32.6% 17.5%;
    }

    body { 
      font-family: 'Inter', sans-serif; 
    }
    
    .font-display { font-family: 'Inter', sans-serif; font-weight: 800; }
    .gradient-hero {
      background: radial-gradient(ellipse at top, #0A7ED0 0%, transparent 70%),
                  radial-gradient(ellipse at bottom-right, #136BA9 0%, transparent 70%);
    }
    .blob-shape {
      border-radius: 50% 20% 60% 50% 60% 40% 20% 40%;
      filter: blur(40px);
    }
    .price-text { color: #0A7ED0; }
    .text-gradient {
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    @keyframes fade-in {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(180deg); }
    }
    .animate-fade-in { animation: fade-in 0.8s ease-out forwards; }
    .animate-float { animation: float 6s ease-in-out infinite; }

    .header { 
      background: white; 
      padding: 1rem 0; 
      box-shadow: 0 1px 10px rgba(0,0,0,0.1); 
    }

    .product-card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
      transition: all 0.3s ease;
    }
    .product-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }
    
    .filter-sidebar {
      background: #f8fafc;
      border-radius: 12px;
      padding: 1.5rem;
      height: fit-content;
    }
 
    .btn-hero {
      background: var(--gradient);
      color: white;
      padding: 1rem 2rem;
      border-radius: 12px;
      font-weight: 700;
      font-size: 1.1rem;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .btn-hero:hover { transform: scale(1.05); }
    .btn-outline {
      border: 2px solid #e2e8f0;
      color: #475569;
      padding: 0.875rem 2rem;
      border-radius: 12px;
      font-weight: 700;
      background: white;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .btn-outline:hover { background: #f1f5f9; }

    .offcanvas {
      background: linear-gradient(135deg, #f8fafc 0%, white 100%);
    }
    .offcanvas .nav-link {
      color: #374151;
      font-weight: 500;
      padding: 1rem 1.5rem;
      border-radius: 12px;
      margin: 0.25rem 1rem;
      transition: all 0.2s ease;
    }
    .offcanvas .nav-link:hover {
      background: rgba(59, 130, 246, 0.1);
      color: #0A7ED0;
      transform: translateX(4px);
    }