body {
      box-sizing: border-box;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', sans-serif;
      overflow-x: hidden;
    }

    .font-poppins {
      font-family: 'Poppins', sans-serif;
    }

    .font-roboto {
      font-family: 'Roboto', sans-serif;
    }

    .font-jetbrains {
      font-family: 'JetBrains Mono', monospace;
    }

    .gradient-bg {
      background: linear-gradient(135deg, #F6F7F9 0%, #FFFFFF 100%);
    }

    .hero-gradient {
      background: linear-gradient(135deg, rgba(0,255,255,0.1) 0%, rgba(165,102,255,0.1) 100%);
    }

    .card-glow:hover {
      box-shadow: 0 0 30px rgba(0,255,255,0.4), 0 10px 40px rgba(0,0,0,0.1);
      transform: translateY(-8px);
    }

    .neon-border {
      border: 2px solid transparent;
      background: linear-gradient(#2B2E4A, #2B2E4A) padding-box,
                  linear-gradient(135deg, #00FFFF, #A566FF) border-box;
    }

    @keyframes typewriter {
      from { width: 0; }
      to { width: 100%; }
    }

    @keyframes blink {
      50% { border-color: transparent; }
    }

    .typewriter {
      overflow: hidden;
      border-right: 3px solid #00FFFF;
      white-space: nowrap;
      animation: typewriter 3s steps(40) 1s forwards, blink 0.75s step-end infinite;
      width: 0;
    }

    .floating-icon {
      animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
    }

    .slide-in {
      animation: slideIn 0.5s ease-out forwards;
    }

    @keyframes slideIn {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    .fade-in {
      animation: fadeIn 0.8s ease-out forwards;
      opacity: 0;
    }

    @keyframes fadeIn {
      to { opacity: 1; }
    }

    .mobile-menu {
      transform: translateX(100%);
      transition: transform 0.3s ease-out;
    }

    .mobile-menu.active {
      transform: translateX(0);
    }

    .cart-badge {
      animation: pulse 0.3s ease-out;
    }

    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }

    .product-card {
      transition: all 0.3s ease;
    }

    .product-card:hover .product-image {
      transform: scale(1.1);
    }

    .product-image {
      transition: transform 0.3s ease;
    }

    .modal-backdrop {
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(5px);
    }

    .quick-view-modal {
      animation: modalSlideIn 0.3s ease-out;
    }

    @keyframes modalSlideIn {
      from {
        transform: scale(0.9);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }

    .carousel-slide {
      transition: opacity 1s ease-in-out;
    }

    .btn-primary {
      background: linear-gradient(135deg, #00FFFF, #00CED1);
      transition: all 0.3s ease;
    }

    .btn-primary:hover {
      transform: scale(1.05);
      box-shadow: 0 0 20px rgba(0,255,255,0.5);
    }

    .filter-btn.active {
      background: #00FFFF;
      color: #2B2E4A;
    }

    .toast {
      animation: toastSlideIn 0.3s ease-out;
    }

    @keyframes toastSlideIn {
      from {
        transform: translateY(-100%);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .tutorial-content h3,
    .blog-content h3,
    .policy-content h3 {
      color: #1C1C1C;
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1.5rem;
      margin-top: 2rem;
      margin-bottom: 1rem;
    }

    .tutorial-content h4,
    .blog-content h4,
    .policy-content h4 {
      color: #00FFFF;
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 1.25rem;
      margin-top: 1.5rem;
      margin-bottom: 0.75rem;
    }

    .tutorial-content p,
    .blog-content p,
    .policy-content p {
      color: #4B5563;
      line-height: 1.8;
      margin-bottom: 1rem;
    }

    .tutorial-content ul,
    .blog-content ul,
    .policy-content ul,
    .tutorial-content ol,
    .blog-content ol,
    .policy-content ol {
      margin-left: 1.5rem;
      margin-bottom: 1rem;
      color: #4B5563;
      line-height: 1.8;
    }

    .tutorial-content li,
    .blog-content li,
    .policy-content li {
      margin-bottom: 0.5rem;
    }

    .tutorial-content strong,
    .blog-content strong,
    .policy-content strong {
      color: #1C1C1C;
      font-weight: 600;
    }

    .tutorial-content a,
    .blog-content a,
    .policy-content a {
      color: #00FFFF;
      text-decoration: underline;
    }

    .tutorial-content a:hover,
    .blog-content a:hover,
    .policy-content a:hover {
      color: #00CED1;
    }