/* =========================================
   PREMIUM PAGE - OBSIDIAN GLASS EDITION
   ========================================= */

:root {
  --premium-accent: #00d2ff;
  --premium-accent-glow: rgba(0, 210, 255, 0.3);
  --premium-card-bg: rgba(0, 0, 0, 0.9);
  --premium-card-border: rgba(255, 255, 255, 0.08);
}

.premium-page main {
  background: #000000;
  position: relative;
}

/* Base Transition for all Premium elements - Optimized to not fight GSAP */
.premium-card, .btn-premium, .feature-item {
    transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* Pricing Grid Refinement */
.premium-card {
    background: var(--premium-card-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--premium-card-border);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.premium-card:hover {
    transform: translateY(-8px);
    border-color: rgba(34, 211, 238, 0.4);
    background: rgba(0, 0, 0, 0.95);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 20px rgba(34, 211, 238, 0.1);
}

/* Feature Items Refinement */
.feature-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.feature-item:hover {
    border-color: rgba(34, 211, 238, 0.25);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-4px);
}

/* FAQ Items Refinement */
.faq-item {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s ease;
}

.faq-item:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
}

/* High Contrast Pricing */
.premium-card .price-value {
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.02em;
}

/* Custom Scrollbar for the entire page */
.premium-page ::-webkit-scrollbar {
    width: 6px;
}

.premium-page ::-webkit-scrollbar-track {
    background: var(--obsidian);
}

.premium-page ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.premium-page ::-webkit-scrollbar-thumb:hover {
    background: var(--premium-accent);
}