:root { --primary:#289fbf; --midnight:#292d7a; }
    html { scroll-behavior: smooth; }
    .gradient-hero {
      background: radial-gradient(1200px 500px at 80% -10%, rgba(40,159,191,.25), transparent),
                  radial-gradient(900px 600px at -10% 10%, rgba(41,45,122,.28), transparent),
                  linear-gradient(180deg, #0b1027 0%, #0a0f25 100%);
    }
    .card-edge { border: 1px solid rgba(255,255,255,0.08); }
    .skew-divider { transform: skewY(-2.5deg); transform-origin: top left; }
    .fix-skew { transform: skewY(2.5deg); }
    .btn-pill { border-radius: 999px; }
    .product-card {
      background: rgba(30, 41, 59, 0.7);
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
    }
    .product-card:hover {
      transform: translateY(-4px);
      background: rgba(30, 41, 59, 0.9);
      border-color: rgba(40, 159, 191, 0.6);
    }