* { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; padding: 0; }
    
    @keyframes glitch {
      0%, 100% { transform: translate(0); }
      20% { transform: translate(-2px, 2px); }
      40% { transform: translate(2px, -2px); }
      60% { transform: translate(-1px, -1px); }
      80% { transform: translate(1px, 1px); }
    }
    
    @keyframes drift {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      25% { transform: translate(5px, -5px) rotate(1deg); }
      50% { transform: translate(-3px, 3px) rotate(-1deg); }
      75% { transform: translate(2px, -2px) rotate(0.5deg); }
    }
    
    @keyframes slideInDown {
      from { transform: translateY(-100%); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    
    @keyframes fadeInScale {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    .font-bebas { font-family: 'Bebas Neue', sans-serif; }
    .font-cormorant { font-family: 'Cormorant', serif; }
    .font-mono { font-family: 'Space Mono', monospace; }
    .font-poppins { font-family: 'Poppins', sans-serif; }
    
    .glitch:hover { animation: glitch 0.3s ease infinite; }
    .float-shape { animation: drift 8s ease-in-out infinite; }
    
    .btn-brutal {
      position: relative;
      transition: all 0.2s ease;
    }
    
    .btn-brutal::before {
      content: '';
      position: absolute;
      top: 4px;
      left: 4px;
      right: -4px;
      bottom: -4px;
      background: #1A1A1A;
      z-index: -1;
      transition: all 0.2s ease;
    }
    
    .btn-brutal:hover::before {
      top: 6px;
      left: 6px;
    }
    
    .btn-brutal:hover {
      transform: translate(-2px, -2px);
    }
    
    .card-brutal {
      transition: all 0.3s ease;
    }
    
    .card-brutal:hover {
      transform: translate(-5px, -5px);
      box-shadow: 8px 8px 0 #FF00AA;
    }
    
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(26, 26, 26, 0.95);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      animation: fadeInScale 0.3s ease;
    }
    
    .modal-overlay.active {
      display: flex;
    }
    
    .modal-content {
      background: white;
      padding: 2rem;
      max-width: 500px;
      width: 90%;
      position: relative;
      border-2px solid #1A1A1A;
    }
    
    .hero-bg {
      background: linear-gradient(135deg, #1A1A1A 0%, #2a2a2a 50%, #1A1A1A 100%);
      position: relative;
      overflow: hidden;
      background-size: cover;
      background-position: center;
    }
    
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: rgba(26, 26, 26, 0.7);
    }
    
    .hero-bg::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255,0,170,0.1) 1px, transparent 1px);
      background-size: 50px 50px;
      animation: drift 20s linear infinite;
    }
    
    .product-image {
      background: linear-gradient(135deg, #f5f5f5 0%, #e5e5e5 100%);
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4rem;
      font-weight: bold;
      color: #ddd;
      overflow: hidden;
    }
    
    .product-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .toast {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #FF00AA;
      color: white;
      padding: 1rem 1.5rem;
      border-radius: 0;
      border: 2px solid #1A1A1A;
      font-family: 'Space Mono', monospace;
      font-size: 0.75rem;
      z-index: 2000;
      animation: slideInDown 0.3s ease;
    }
    
    .page { display: none; }
    .page.active { display: block; }
    
    .image-container {
      overflow: hidden;
      background: #f5f5f5;
    }
    
    .roval-logo {
      display: inline-block;
      width: 200px;
      height: auto;
    }