@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   Vertex Cloud Design System & Theme Variables
   ========================================================================== */
:root {
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Color Palette */
  --bg-dark: #030712;
  --bg-card: rgba(11, 15, 25, 0.7);
  --bg-card-hover: rgba(17, 24, 39, 0.85);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-glow: rgba(56, 189, 248, 0.35);

  --accent-cyan: #00F0FF;
  --accent-blue: #38BDF8;
  --accent-blue-deep: #1D4ED8;
  --accent-indigo: #6366F1;
  --accent-green: #10B981;
  --accent-purple: #A855F7;

  /* Discord Brand Glow */
  --discord-purple: #5865F2;

  /* Shadows & Glows */
  --glow-blue: 0 0 30px rgba(56, 189, 248, 0.25);
  --glow-cyan: 0 0 35px rgba(0, 240, 255, 0.3);
  --glow-subtle: 0 4px 20px rgba(0, 0, 0, 0.5);

  --glass-bg: rgba(15, 23, 42, 0.65);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: blur(20px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-dark);
  color: #F3F4F6;
  font-family: var(--font-body);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* Accessibility Focus States */
:focus-visible {
  outline: 2px solid var(--accent-cyan) !important;
  outline-offset: 3px !important;
  border-radius: 6px !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #030712;
}
::-webkit-scrollbar-thumb {
  background: #1E293B;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #38BDF8;
}

/* Background Canvas Overlay */
#network-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

.relative-content {
  position: relative;
  z-index: 10;
}

.max-w-1500 {
  max-width: 1500px;
}

/* Loading Screen Keyframes */
@keyframes loadingBar {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(30%); }
  100% { transform: translateX(100%); }
}

/* Hero Cyber Grid Pattern Background */
.hero-grid-bg {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Simple Navigation Link Hover Effect */
.discord-nav-link {
  transition: all 0.3s ease;
  cursor: pointer;
}

.discord-nav-link:hover {
  color: #5865F2 !important;
  text-shadow: 0 0 12px rgba(88, 101, 242, 0.6);
}

.discord-nav-link:hover svg {
  fill: #5865F2 !important;
  color: #5865F2 !important;
  filter: drop-shadow(0 0 8px rgba(88, 101, 242, 0.7));
}

/* Sticky Navbar Scrolled Glass Blur */
.header-glass {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-glass-scrolled {
  background: rgba(3, 7, 18, 0.92) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 240, 255, 0.15) !important;
}

/* ==========================================================================
   Glassmorphism & Base Card Styles (Strictly Vertical, No 3D Tilt or Skew)
   ========================================================================== */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.45);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card {
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.5), transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.glass-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 240, 255, 0.6);
  box-shadow: 0 20px 50px -10px rgba(0, 240, 255, 0.3), 0 0 30px rgba(0, 240, 255, 0.2);
}

.glass-card:hover::before {
  opacity: 1;
}

/* ==========================================================================
   SWEEPING GLASS REFLECTION STREAK (EVERY 8-10 SECONDS)
   ========================================================================== */
.diamond-featured-card::after,
.featured-card-gold::after,
.featured-card-purple::after,
.featured-card-red::after,
.service-card-mc::after,
.service-card-vps::after,
.service-card-bot::after,
.service-card-web::after {
  content: '';
  position: absolute;
  top: -120%;
  left: -120%;
  width: 85%;
  height: 350%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 45%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.2) 55%,
    transparent 100%
  );
  transform: rotate(30deg);
  pointer-events: none;
  animation: glassReflectionSweep 8.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}

@keyframes glassReflectionSweep {
  0% { left: -120%; top: -120%; }
  25%, 100% { left: 220%; top: 120%; }
}

/* ==========================================================================
   SUPERCHARGED 400% RGB NEON SERVICE CARDS (MINECRAFT, VPS, BOT, WEB)
   Strictly Front-Facing, Perfectly Vertical, No Tilt/Rotation
   Reference Style: Electric Neon Tubes + Ground Light Reflection + Colored Buttons
   ========================================================================== */

/* 1. MINECRAFT HOSTING (ELECTRIC CYAN GLOW #00F0FF) */
.service-card-mc {
  background: rgba(11, 19, 36, 0.95) !important;
  filter: brightness(1.12) !important;
  border: 3px solid #00F0FF !important;
  box-shadow: 
    0 0 25px #00F0FF,
    0 0 55px rgba(0, 240, 255, 0.8),
    0 0 95px rgba(0, 240, 255, 0.5),
    0 0 140px rgba(0, 240, 255, 0.3),
    inset 0 0 35px rgba(0, 240, 255, 0.35) !important;
  animation: ultraCyanBreathing 3s ease-in-out infinite alternate, featuredFloat 4s ease-in-out infinite !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.service-card-mc:hover {
  transform: translateY(-12px) !important;
  border-color: #00F0FF !important;
  box-shadow: 
    0 0 35px #00F0FF,
    0 0 85px rgba(0, 240, 255, 1),
    0 0 140px rgba(0, 240, 255, 0.75),
    0 0 180px rgba(0, 240, 255, 0.45),
    inset 0 0 50px rgba(0, 240, 255, 0.5) !important;
  filter: brightness(1.25) !important;
}

.btn-neon-cyan {
  background: rgba(0, 240, 255, 0.12) !important;
  border: 2px solid #00F0FF !important;
  color: #00F0FF !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.6) !important;
  transition: all 0.3s ease !important;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.8) !important;
}

.btn-neon-cyan:hover {
  background: #00F0FF !important;
  color: #030712 !important;
  box-shadow: 0 0 35px #00F0FF, 0 0 15px #FFFFFF !important;
  text-shadow: none !important;
}

/* 2. VPS HOSTING (ROYAL BLUE GLOW #38BDF8 / #2563EB) */
.service-card-vps {
  background: rgba(11, 19, 36, 0.95) !important;
  filter: brightness(1.12) !important;
  border: 3px solid #38BDF8 !important;
  box-shadow: 
    0 0 25px #38BDF8,
    0 0 55px rgba(56, 189, 248, 0.8),
    0 0 95px rgba(37, 99, 235, 0.5),
    0 0 140px rgba(56, 189, 248, 0.3),
    inset 0 0 35px rgba(56, 189, 248, 0.35) !important;
  animation: ultraBlueBreathing 3s ease-in-out infinite alternate, featuredFloat 4.2s ease-in-out infinite !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.service-card-vps:hover {
  transform: translateY(-12px) !important;
  border-color: #38BDF8 !important;
  box-shadow: 
    0 0 35px #38BDF8,
    0 0 85px rgba(56, 189, 248, 1),
    0 0 140px rgba(37, 99, 235, 0.75),
    0 0 180px rgba(56, 189, 248, 0.45),
    inset 0 0 50px rgba(56, 189, 248, 0.5) !important;
  filter: brightness(1.25) !important;
}

.btn-neon-blue {
  background: rgba(56, 189, 248, 0.12) !important;
  border: 2px solid #38BDF8 !important;
  color: #38BDF8 !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.6) !important;
  transition: all 0.3s ease !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.8) !important;
}

.btn-neon-blue:hover {
  background: #38BDF8 !important;
  color: #030712 !important;
  box-shadow: 0 0 35px #38BDF8, 0 0 15px #FFFFFF !important;
  text-shadow: none !important;
}

/* 3. BOT HOSTING (NEON PURPLE GLOW #A855F7) */
.service-card-bot {
  background: rgba(11, 19, 36, 0.95) !important;
  filter: brightness(1.12) !important;
  border: 3px solid #A855F7 !important;
  box-shadow: 
    0 0 25px #A855F7,
    0 0 55px rgba(168, 85, 247, 0.8),
    0 0 95px rgba(168, 85, 247, 0.5),
    0 0 140px rgba(168, 85, 247, 0.3),
    inset 0 0 35px rgba(168, 85, 247, 0.35) !important;
  animation: ultraPurpleBreathing 3s ease-in-out infinite alternate, featuredFloat 4.4s ease-in-out infinite !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.service-card-bot:hover {
  transform: translateY(-12px) !important;
  border-color: #A855F7 !important;
  box-shadow: 
    0 0 35px #A855F7,
    0 0 85px rgba(168, 85, 247, 1),
    0 0 140px rgba(168, 85, 247, 0.75),
    0 0 180px rgba(168, 85, 247, 0.45),
    inset 0 0 50px rgba(168, 85, 247, 0.5) !important;
  filter: brightness(1.25) !important;
}

.btn-neon-purple {
  background: rgba(168, 85, 247, 0.12) !important;
  border: 2px solid #A855F7 !important;
  color: #C084FC !important;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.6) !important;
  transition: all 0.3s ease !important;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.8) !important;
}

.btn-neon-purple:hover {
  background: #A855F7 !important;
  color: #030712 !important;
  box-shadow: 0 0 35px #A855F7, 0 0 15px #FFFFFF !important;
  text-shadow: none !important;
}

/* 4. WEB HOSTING (NEON EMERALD GLOW #10B981) */
.service-card-web {
  background: rgba(11, 19, 36, 0.95) !important;
  filter: brightness(1.12) !important;
  border: 3px solid #10B981 !important;
  box-shadow: 
    0 0 25px #10B981,
    0 0 55px rgba(16, 185, 129, 0.8),
    0 0 95px rgba(16, 185, 129, 0.5),
    0 0 140px rgba(16, 185, 129, 0.3),
    inset 0 0 35px rgba(16, 185, 129, 0.35) !important;
  animation: ultraEmeraldBreathing 3s ease-in-out infinite alternate, featuredFloat 4.6s ease-in-out infinite !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.service-card-web:hover {
  transform: translateY(-12px) !important;
  border-color: #10B981 !important;
  box-shadow: 
    0 0 35px #10B981,
    0 0 85px rgba(16, 185, 129, 1),
    0 0 140px rgba(16, 185, 129, 0.75),
    0 0 180px rgba(16, 185, 129, 0.45),
    inset 0 0 50px rgba(16, 185, 129, 0.5) !important;
  filter: brightness(1.25) !important;
}

.btn-neon-emerald {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 2px solid #10B981 !important;
  color: #34D399 !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.6) !important;
  transition: all 0.3s ease !important;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.8) !important;
}

.btn-neon-emerald:hover {
  background: #10B981 !important;
  color: #030712 !important;
  box-shadow: 0 0 35px #10B981, 0 0 15px #FFFFFF !important;
  text-shadow: none !important;
}

/* Service Card Ultra Breathing Keyframe Loops */
@keyframes ultraCyanBreathing {
  0% {
    box-shadow: 
      0 0 20px #00F0FF,
      0 0 45px rgba(0, 240, 255, 0.7),
      0 0 85px rgba(0, 240, 255, 0.4),
      0 0 130px rgba(0, 240, 255, 0.25),
      inset 0 0 25px rgba(0, 240, 255, 0.3);
  }
  100% {
    box-shadow: 
      0 0 32px #00F0FF,
      0 0 68px rgba(0, 240, 255, 0.9),
      0 0 115px rgba(0, 240, 255, 0.6),
      0 0 160px rgba(0, 240, 255, 0.35),
      inset 0 0 42px rgba(0, 240, 255, 0.45);
  }
}

@keyframes ultraBlueBreathing {
  0% {
    box-shadow: 
      0 0 20px #38BDF8,
      0 0 45px rgba(56, 189, 248, 0.7),
      0 0 85px rgba(37, 99, 235, 0.4),
      0 0 130px rgba(56, 189, 248, 0.25),
      inset 0 0 25px rgba(56, 189, 248, 0.3);
  }
  100% {
    box-shadow: 
      0 0 32px #38BDF8,
      0 0 68px rgba(56, 189, 248, 0.9),
      0 0 115px rgba(37, 99, 235, 0.6),
      0 0 160px rgba(56, 189, 248, 0.35),
      inset 0 0 42px rgba(56, 189, 248, 0.45);
  }
}

@keyframes ultraPurpleBreathing {
  0% {
    box-shadow: 
      0 0 20px #A855F7,
      0 0 45px rgba(168, 85, 247, 0.7),
      0 0 85px rgba(168, 85, 247, 0.4),
      0 0 130px rgba(168, 85, 247, 0.25),
      inset 0 0 25px rgba(168, 85, 247, 0.3);
  }
  100% {
    box-shadow: 
      0 0 32px #A855F7,
      0 0 68px rgba(168, 85, 247, 0.9),
      0 0 115px rgba(168, 85, 247, 0.6),
      0 0 160px rgba(168, 85, 247, 0.35),
      inset 0 0 42px rgba(168, 85, 247, 0.45);
  }
}

@keyframes ultraEmeraldBreathing {
  0% {
    box-shadow: 
      0 0 20px #10B981,
      0 0 45px rgba(16, 185, 129, 0.7),
      0 0 85px rgba(16, 185, 129, 0.4),
      0 0 130px rgba(16, 185, 129, 0.25),
      inset 0 0 25px rgba(16, 185, 129, 0.3);
  }
  100% {
    box-shadow: 
      0 0 32px #10B981,
      0 0 68px rgba(16, 185, 129, 0.9),
      0 0 115px rgba(16, 185, 129, 0.6),
      0 0 160px rgba(16, 185, 129, 0.35),
      inset 0 0 42px rgba(16, 185, 129, 0.45);
  }
}

/* Ground Reflective Color Light Spill */
.service-ground-cyan {
  position: absolute;
  bottom: -40px;
  left: 10%;
  right: 10%;
  height: 60px;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.5) 0%, rgba(0, 240, 255, 0) 75%);
  filter: blur(15px);
  pointer-events: none;
}

.service-ground-blue {
  position: absolute;
  bottom: -40px;
  left: 10%;
  right: 10%;
  height: 60px;
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.5) 0%, rgba(56, 189, 248, 0) 75%);
  filter: blur(15px);
  pointer-events: none;
}

.service-ground-purple {
  position: absolute;
  bottom: -40px;
  left: 10%;
  right: 10%;
  height: 60px;
  background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.5) 0%, rgba(168, 85, 247, 0) 75%);
  filter: blur(15px);
  pointer-events: none;
}

.service-ground-emerald {
  position: absolute;
  bottom: -40px;
  left: 10%;
  right: 10%;
  height: 60px;
  background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.5) 0%, rgba(16, 185, 129, 0) 75%);
  filter: blur(15px);
  pointer-events: none;
}

/* ==========================================================================
   ULTRA-PROMINENT FEATURED PRICING CARDS (DIAMOND, PREMIUM, ULTRA, EXTREME)
   ========================================================================== */

/* 1. DIAMOND PLAN (FLAGSHIP CYAN NEON GLOW) */
.diamond-featured-card {
  background: rgba(15, 23, 42, 0.94) !important;
  filter: brightness(1.1) !important;
  border: 2.5px solid rgba(0, 240, 255, 0.95) !important;
  box-shadow: 
    0 0 20px rgba(0, 240, 255, 0.9),
    0 0 45px rgba(0, 240, 255, 0.65),
    0 0 85px rgba(56, 189, 248, 0.4),
    inset 0 0 30px rgba(0, 240, 255, 0.3) !important;
  z-index: 25 !important;
  animation: diamondBreathing 3.5s ease-in-out infinite alternate, featuredFloat 4s ease-in-out infinite !important;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.diamond-featured-card:hover {
  transform: translateY(-12px) !important;
  border-color: #00F0FF !important;
  box-shadow: 
    0 0 35px rgba(0, 240, 255, 1),
    0 0 75px rgba(0, 240, 255, 0.9),
    0 0 130px rgba(56, 189, 248, 0.6),
    inset 0 0 45px rgba(0, 240, 255, 0.5) !important;
  filter: brightness(1.22) !important;
}

.diamond-price-text {
  transition: all 0.3s ease;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.9), 0 0 40px rgba(59, 130, 246, 0.6);
}

.diamond-featured-card:hover .diamond-price-text {
  transform: scale(1.08);
  text-shadow: 0 0 30px rgba(0, 240, 255, 1), 0 0 55px rgba(59, 130, 246, 0.9) !important;
}

.diamond-btn {
  background: linear-gradient(135deg, #00F0FF 0%, #3B82F6 50%, #1D4ED8 100%) !important;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.6) !important;
  transition: all 0.3s ease !important;
}

.diamond-featured-card:hover .diamond-btn {
  box-shadow: 0 0 40px rgba(0, 240, 255, 0.9), 0 0 20px #FFFFFF !important;
  transform: scale(1.05);
}

/* 2. PREMIUM PLAN (GOLD + CYAN NEON GLOW) */
.featured-card-gold {
  background: rgba(15, 23, 42, 0.94) !important;
  filter: brightness(1.1) !important;
  border: 2.5px solid rgba(245, 158, 11, 0.95) !important;
  box-shadow: 
    0 0 20px rgba(245, 158, 11, 0.9),
    0 0 45px rgba(245, 158, 11, 0.65),
    0 0 85px rgba(0, 240, 255, 0.35),
    inset 0 0 30px rgba(245, 158, 11, 0.3) !important;
  z-index: 25 !important;
  animation: goldBreathing 3.5s ease-in-out infinite alternate, featuredFloat 4.2s ease-in-out infinite !important;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.featured-card-gold:hover {
  transform: translateY(-12px) !important;
  border-color: #F59E0B !important;
  box-shadow: 
    0 0 35px rgba(245, 158, 11, 1),
    0 0 75px rgba(245, 158, 11, 0.9),
    0 0 130px rgba(0, 240, 255, 0.55),
    inset 0 0 45px rgba(245, 158, 11, 0.5) !important;
  filter: brightness(1.22) !important;
}

.price-glow-gold {
  transition: all 0.3s ease;
  text-shadow: 0 0 20px rgba(245, 158, 11, 0.9), 0 0 40px rgba(0, 240, 255, 0.6);
}

.featured-card-gold:hover .price-glow-gold {
  transform: scale(1.08);
  text-shadow: 0 0 30px rgba(245, 158, 11, 1), 0 0 55px rgba(0, 240, 255, 0.9) !important;
}

.btn-gold {
  background: linear-gradient(135deg, #F59E0B 0%, #00F0FF 100%) !important;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.6) !important;
  transition: all 0.3s ease !important;
}

.featured-card-gold:hover .btn-gold {
  box-shadow: 0 0 40px rgba(245, 158, 11, 0.9), 0 0 20px #FFFFFF !important;
  transform: scale(1.05);
}

/* 3. ULTRA PLAN (PURPLE + BLUE NEON GLOW) */
.featured-card-purple {
  background: rgba(15, 23, 42, 0.94) !important;
  filter: brightness(1.1) !important;
  border: 2.5px solid rgba(168, 85, 247, 0.95) !important;
  box-shadow: 
    0 0 20px rgba(168, 85, 247, 0.9),
    0 0 45px rgba(168, 85, 247, 0.65),
    0 0 85px rgba(59, 130, 246, 0.4),
    inset 0 0 30px rgba(168, 85, 247, 0.3) !important;
  z-index: 25 !important;
  animation: purpleBreathing 3.5s ease-in-out infinite alternate, featuredFloat 4.4s ease-in-out infinite !important;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.featured-card-purple:hover {
  transform: translateY(-12px) !important;
  border-color: #A855F7 !important;
  box-shadow: 
    0 0 35px rgba(168, 85, 247, 1),
    0 0 75px rgba(168, 85, 247, 0.9),
    0 0 130px rgba(59, 130, 246, 0.6),
    inset 0 0 45px rgba(168, 85, 247, 0.5) !important;
  filter: brightness(1.22) !important;
}

.price-glow-purple {
  transition: all 0.3s ease;
  text-shadow: 0 0 20px rgba(168, 85, 247, 0.9), 0 0 40px rgba(59, 130, 246, 0.6);
}

.featured-card-purple:hover .price-glow-purple {
  transform: scale(1.08);
  text-shadow: 0 0 30px rgba(168, 85, 247, 1), 0 0 55px rgba(59, 130, 246, 0.9) !important;
}

.btn-purple {
  background: linear-gradient(135deg, #A855F7 0%, #3B82F6 100%) !important;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.6) !important;
  transition: all 0.3s ease !important;
}

.featured-card-purple:hover .btn-purple {
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.9), 0 0 20px #FFFFFF !important;
  transform: scale(1.05);
}

/* 4. EXTREME PLAN (RED + PINK NEON GLOW) */
.featured-card-red {
  background: rgba(15, 23, 42, 0.94) !important;
  filter: brightness(1.1) !important;
  border: 2.5px solid rgba(239, 68, 68, 0.95) !important;
  box-shadow: 
    0 0 20px rgba(239, 68, 68, 0.9),
    0 0 45px rgba(239, 68, 68, 0.65),
    0 0 85px rgba(236, 72, 153, 0.4),
    inset 0 0 30px rgba(239, 68, 68, 0.3) !important;
  z-index: 25 !important;
  animation: redBreathing 3.5s ease-in-out infinite alternate, featuredFloat 4.6s ease-in-out infinite !important;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.featured-card-red:hover {
  transform: translateY(-12px) !important;
  border-color: #EF4444 !important;
  box-shadow: 
    0 0 35px rgba(239, 68, 68, 1),
    0 0 75px rgba(239, 68, 68, 0.9),
    0 0 130px rgba(236, 72, 153, 0.6),
    inset 0 0 45px rgba(239, 68, 68, 0.5) !important;
  filter: brightness(1.22) !important;
}

.price-glow-red {
  transition: all 0.3s ease;
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.9), 0 0 40px rgba(236, 72, 153, 0.6);
}

.featured-card-red:hover .price-glow-red {
  transform: scale(1.08);
  text-shadow: 0 0 30px rgba(239, 68, 68, 1), 0 0 55px rgba(236, 72, 153, 0.9) !important;
}

.btn-red-glow {
  background: linear-gradient(135deg, #EF4444 0%, #EC4899 100%) !important;
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.6) !important;
  transition: all 0.3s ease !important;
}

.featured-card-red:hover .btn-red-glow {
  box-shadow: 0 0 40px rgba(239, 68, 68, 0.9), 0 0 20px #FFFFFF !important;
  transform: scale(1.05);
}

/* Keyframes for Multi-Layer Breathing Animations */
@keyframes diamondBreathing {
  0% {
    box-shadow: 
      0 0 15px rgba(0, 240, 255, 0.8),
      0 0 35px rgba(0, 240, 255, 0.5),
      0 0 70px rgba(56, 189, 248, 0.3),
      inset 0 0 25px rgba(0, 240, 255, 0.25);
  }
  100% {
    box-shadow: 
      0 0 28px rgba(0, 240, 255, 1),
      0 0 60px rgba(0, 240, 255, 0.8),
      0 0 100px rgba(56, 189, 248, 0.5),
      inset 0 0 40px rgba(0, 240, 255, 0.4);
  }
}

@keyframes goldBreathing {
  0% {
    box-shadow: 
      0 0 15px rgba(245, 158, 11, 0.8),
      0 0 35px rgba(245, 158, 11, 0.5),
      0 0 70px rgba(0, 240, 255, 0.25),
      inset 0 0 25px rgba(245, 158, 11, 0.25);
  }
  100% {
    box-shadow: 
      0 0 28px rgba(245, 158, 11, 1),
      0 0 60px rgba(245, 158, 11, 0.8),
      0 0 100px rgba(0, 240, 255, 0.45),
      inset 0 0 40px rgba(245, 158, 11, 0.4);
  }
}

@keyframes purpleBreathing {
  0% {
    box-shadow: 
      0 0 15px rgba(168, 85, 247, 0.8),
      0 0 35px rgba(168, 85, 247, 0.5),
      0 0 70px rgba(59, 130, 246, 0.3),
      inset 0 0 25px rgba(168, 85, 247, 0.25);
  }
  100% {
    box-shadow: 
      0 0 28px rgba(168, 85, 247, 1),
      0 0 60px rgba(168, 85, 247, 0.8),
      0 0 100px rgba(59, 130, 246, 0.5),
      inset 0 0 40px rgba(168, 85, 247, 0.4);
  }
}

@keyframes redBreathing {
  0% {
    box-shadow: 
      0 0 15px rgba(239, 68, 68, 0.8),
      0 0 35px rgba(239, 68, 68, 0.5),
      0 0 70px rgba(236, 72, 153, 0.3),
      inset 0 0 25px rgba(239, 68, 68, 0.25);
  }
  100% {
    box-shadow: 
      0 0 28px rgba(239, 68, 68, 1),
      0 0 60px rgba(239, 68, 68, 0.8),
      0 0 100px rgba(236, 72, 153, 0.5),
      inset 0 0 40px rgba(239, 68, 68, 0.4);
  }
}

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

.glass-pill {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border-radius: 9999px;
  transition: all 0.3s ease;
}

.glass-pill:hover {
  border-color: rgba(0, 240, 255, 0.5);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}

/* ==========================================================================
   Typography & Gradient Accents
   ========================================================================== */
.text-gradient-cyan {
  background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 40%, #00F0FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-blue {
  background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 50%, #1D4ED8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-purple {
  background: linear-gradient(135deg, #C084FC 0%, #A855F7 50%, #6366F1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   Ultra-Premium Eye-Catching Badge Styles & Animations
   ========================================================================== */
.premium-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF;
  backdrop-filter: blur(12px);
  overflow: hidden;
  animation: badgeFloat 3.5s ease-in-out infinite, badgePulseScale 2s ease-in-out infinite alternate;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.premium-badge::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 60%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: rotate(25deg);
  animation: shineSweep 3s infinite;
}

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

@keyframes badgePulseScale {
  0% { scale: 1.0; }
  50% { scale: 1.05; }
  100% { scale: 1.0; }
}

@keyframes shineSweep {
  0% { left: -100%; }
  35%, 100% { left: 200%; }
}

.badge-blue-glow {
  background: linear-gradient(135deg, #00F0FF 0%, #3B82F6 50%, #1D4ED8 100%);
  border: 1px solid rgba(0, 240, 255, 0.6);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.6), 0 0 35px rgba(59, 130, 246, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.badge-gold-glow {
  background: linear-gradient(135deg, #FF6B00 0%, #F59E0B 50%, #EAB308 100%);
  border: 1px solid rgba(253, 224, 71, 0.7);
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.7), 0 0 38px rgba(255, 107, 0, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.badge-purple-glow {
  background: linear-gradient(135deg, #A855F7 0%, #6366F1 50%, #3B82F6 100%);
  border: 1px solid rgba(192, 132, 252, 0.7);
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.7), 0 0 38px rgba(99, 102, 241, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.badge-red-glow {
  background: linear-gradient(135deg, #EF4444 0%, #EC4899 50%, #8B5CF6 100%);
  border: 1px solid rgba(248, 113, 113, 0.7);
  box-shadow: 0 0 22px rgba(239, 68, 68, 0.7), 0 0 38px rgba(236, 72, 153, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Real Linux Terminal Styling & Glow */
.terminal-window {
  background: #090D16;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 16px;
  font-family: var(--font-mono);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 240, 255, 0.2);
  position: relative;
  overflow: hidden;
  animation: featuredFloat 5s ease-in-out infinite;
}

.terminal-header {
  background: rgba(15, 23, 42, 0.95);
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.terminal-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.btn-red { background: #EF4444; }
.btn-yellow { background: #F59E0B; }
.btn-green { background: #10B981; }

.cursor-blink {
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Custom UI Controls (Sliders, Switches) */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: rgba(30, 41, 59, 0.8);
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #00F0FF;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.9);
  cursor: pointer;
  transition: all 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 25px rgba(0, 240, 255, 1);
}

/* Reveal Scroll Animation Classes */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}