:root {
      --bg-dark: #0a0f1e;
      --bg-surface: #0d1530;
      --accent-blue: #2563eb;
      --accent-teal: #06b6d4;
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
    }

    body {
      font-family: 'Vazirmatn', sans-serif;
      background-color: var(--bg-dark);
      color: var(--text-main);
      overflow-x: hidden;
      min-height: 100vh;
    }

    /* Glassmorphism Classes */
    .glass-panel {
      background: rgba(13, 21, 48, 0.65);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
    }

    .glass-card {
      background: rgba(255, 255, 255, 0.04);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.09);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .glass-card:hover {
      transform: translateY(-4px);
      background: rgba(255, 255, 255, 0.07);
      border-color: rgba(59, 130, 246, 0.4);
      box-shadow: 0 12px 30px -10px rgba(37, 99, 235, 0.25);
    }

    .glass-card-featured {
      background: linear-gradient(145deg, rgba(37, 99, 235, 0.12), rgba(6, 182, 212, 0.08));
      backdrop-filter: blur(16px);
      border: 1.5px solid rgba(59, 130, 246, 0.5);
      box-shadow: 0 10px 35px -5px rgba(37, 99, 235, 0.35);
    }

    /* Animated Ambient Mesh / Blobs */
    .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      z-index: 0;
      opacity: 0.45;
      animation: float-blob 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
    }

    .blob-1 {
      top: -10%;
      right: 5%;
      width: 480px;
      height: 480px;
      background: radial-gradient(circle, #1e40af 0%, #0a0f1e 70%);
      animation-duration: 18s;
    }

    .blob-2 {
      top: 30%;
      left: -10%;
      width: 420px;
      height: 420px;
      background: radial-gradient(circle, #0891b2 0%, #0a0f1e 70%);
      animation-duration: 24s;
      animation-delay: -5s;
    }

    .blob-3 {
      bottom: 10%;
      right: 20%;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, #2563eb 0%, #0a0f1e 75%);
      animation-duration: 22s;
      animation-delay: -10s;
    }

    @keyframes float-blob {
      0% {
        transform: translate(0, 0) scale(1);
      }
      50% {
        transform: translate(40px, -60px) scale(1.1);
      }
      100% {
        transform: translate(-30px, 40px) scale(0.95);
      }
    }

    /* Section Page Transitions */
    .spa-section {
      display: none;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.35s ease, transform 0.35s ease;
    }

    .spa-section.active {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #0a0f1e;
    }
    ::-webkit-scrollbar-thumb {
      background: #1e293b;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #334155;
    }