/* Funis-specific styles */

    body {
      background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
      min-height: 100vh;
    }

    .glass-effect {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    .gradient-text {
      background: linear-gradient(135deg, #f59e0b, #ea580c);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .animate-fadeIn {
      animation: fadeIn 1s ease-in;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

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

    .btn-primary:hover {
      background: linear-gradient(135deg, #ea580c, #dc2626);
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(245, 158, 11, 0.4);
    }

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

    .product-thumbnail:hover {
      transform: scale(1.02);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    }

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

    .feature-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }

    .rating-stars {
      color: #fbbf24;
    }

    /* MOBILE RESPONSIVE CODE - Add this to your funis.css file */
/* ===== Mobile (<=768px) ===== */
@media (max-width: 768px) {
  /* Make the nav sticky on mobile */
  .mobile-sticky {                /* add this class to your header/nav element */
    position: -webkit-sticky;
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 1000;
  }

  /* DO NOT transform the sticky bar itself (or it won’t stick) */
  .mobile-sticky,
  .mobile-sticky * {
    -webkit-transform: none !important;
    transform: none !important;
    will-change: auto !important;
    filter: none !important;      /* filters can also break sticky */
  }

  /* But you can still accelerate other sections */
  section,
  .animate-fadeIn {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Only apply glass-effect tweaks if NOT the sticky bar */
  .glass-effect:not(.mobile-sticky) {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }

  /* Avoid clipping: any direct wrappers around the nav should not clip overflow */
  .mobile-nav-wrapper,
  header,
  .site-header {
    overflow: visible !important;
    contain: none !important;
  }

  /* Safe area + layering */
  html, body { overflow-x: hidden; }
}

/* Optional: readable frosted header if you keep glass on it */
.mobile-sticky.glass-effect {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(15, 15, 35, 0.55);
}