/* ============================================================
   NEON MEDICAL — LIGHT THEME
   نسخه: 2.0 (روشن)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap');

/* ===== VARIABLES — LIGHT ===== */
:root {
  --bg: #f0f7f5;
  --bg2: #e6f0ee;
  --bg3: #d9e8e4;
  
  --card: #ffffff;
  --glass: rgba(255, 255, 255, 0.85);
  --glass-strong: rgba(255, 255, 255, 0.95);
  
  --accent: #00b37e;
  --accent-glow: #00c98c;
  --accent2: #e8890c;
  --accent3: #e63968;
  --accent4: #7c3aed;
  --accent5: #0891b2;
  
  --grad-primary: linear-gradient(135deg, #00b37e 0%, #0891b2 100%);
  --grad-purple: linear-gradient(135deg, #7c3aed 0%, #0891b2 100%);
  --grad-mesh: radial-gradient(at 20% 20%, rgba(0, 179, 126, 0.08) 0%, transparent 50%),
               radial-gradient(at 80% 30%, rgba(124, 58, 237, 0.06) 0%, transparent 50%),
               radial-gradient(at 50% 80%, rgba(8, 145, 178, 0.06) 0%, transparent 50%);
  
  --text: #0f1e2e;
  --text2: #475569;
  --text3: #94a3b8;
  
  --border: rgba(15, 30, 46, 0.08);
  --border-glow: rgba(0, 179, 126, 0.35);
  --border-purple: rgba(124, 58, 237, 0.25);
  
  --glow: 0 8px 32px rgba(0, 179, 126, 0.2);
  --shadow-card: 0 12px 40px rgba(0, 179, 126, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 24px 64px rgba(15, 30, 46, 0.1);
  
  --radius: 24px;
  --radius-sm: 16px;
  --radius-lg: 32px;
}

/* ============================================================
   BACKGROUND — روشن با گرادیان نرم
   ============================================================ */

html,
body {
  background: #f0f7f5 !important;
}

body {
  background-image: 
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 179, 126, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(124, 58, 237, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 80%, rgba(8, 145, 178, 0.08), transparent 60%),
    linear-gradient(180deg, #f0f7f5 0%, #eaf5f2 50%, #f0f7f5 100%) !important;
  background-attachment: fixed !important;
  background-color: #f0f7f5 !important;
  color: var(--text) !important;
}

.page {
  background: transparent !important;
}

/* گرید نقطه‌ای روشن */
body::before {
  background-image: radial-gradient(rgba(15, 30, 46, 0.05) 1px, transparent 1px) !important;
  background-size: 36px 36px !important;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%) !important;
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%) !important;
}

/* اسکرول‌بار */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #e6f0ee;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--accent), var(--accent5));
  border-radius: 6px;
}

/* ============================================================
   HERO SECTION
   ============================================================ */

.hero-blob {
  filter: blur(120px);
  opacity: 0.18;
}

.blob-1 { background: radial-gradient(circle, var(--accent) 0%, transparent 70%); }
.blob-2 { background: radial-gradient(circle, var(--accent4) 0%, transparent 70%); }
.blob-3 { background: radial-gradient(circle, var(--accent5) 0%, transparent 70%); }

.hero-badge {
  background: rgba(0, 179, 126, 0.1);
  border: 1px solid rgba(0, 179, 126, 0.3);
  color: var(--accent);
  box-shadow: 
    0 4px 20px rgba(0, 179, 126, 0.15),
    inset 0 1px 2px rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  font-weight: 700;
  letter-spacing: 1.8px;
}

.badge-pulse {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent), 0 0 24px rgba(0, 179, 126, 0.5);
}

/* تیتر اصلی — گرادیان تیره روی روشن */
.hero-heading h1 {
  background: linear-gradient(135deg, #0f1e2e 0%, #00b37e 70%, #0891b2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}

.hero-heading h2 {
  color: var(--text2);
  font-weight: 500;
}

.hero-desc {
  color: var(--text2);
  font-size: 0.92rem;
  line-height: 2.1;
}

/* ============================================================
   HERO VISUAL
   ============================================================ */

.hv-ring-1 {
  border-color: rgba(0, 179, 126, 0.4);
  box-shadow: 0 0 20px rgba(0, 179, 126, 0.15);
}

.hv-ring-2 {
  border-color: rgba(8, 145, 178, 0.4);
  box-shadow: 0 0 20px rgba(8, 145, 178, 0.15);
}

.hv-ring-3 {
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.15);
}

.hv-center-glow {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, 
    rgba(0, 179, 126, 0.25) 0%, 
    rgba(8, 145, 178, 0.15) 30%, 
    transparent 70%);
  filter: blur(20px);
}

.hv-dot {
  box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.enter-btn-logo-box {
  background: rgba(0, 179, 126, 0.06);
  border: 1.5px solid rgba(0, 179, 126, 0.3);
  border-radius: 16px;
  box-shadow: 
    0 8px 24px rgba(0, 179, 126, 0.15),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);
  transition: all 0.4s;
}

.enter-btn:hover .enter-btn-logo-box {
  border-color: var(--accent);
  background: rgba(0, 179, 126, 0.12);
  box-shadow: 
    0 12px 40px rgba(0, 179, 126, 0.35),
    0 0 60px rgba(0, 179, 126, 0.2);
  transform: translateY(-4px) scale(1.05);
}

/* Ghost Buttons — روشن */
.btn-ghost {
  background: #ffffff;
  border: 1.5px solid rgba(0, 179, 126, 0.3);
  color: var(--accent);
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 179, 126, 0.08);
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-primary);
  opacity: 0;
  transition: opacity 0.35s;
  z-index: -1;
  border-radius: inherit;
}

.btn-ghost:hover {
  color: #ffffff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 179, 126, 0.3);
}

.btn-ghost:hover::before {
  opacity: 1;
}

/* ============================================================
   STATS BOXES — کارت‌های سفید
   ============================================================ */

.stat-box {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.stat-box::before {
  background: var(--grad-mesh);
  opacity: 0.7;
}

.stat-box:hover {
  border-color: var(--border-glow);
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 179, 126, 0.2);
}

.stat-num {
  background: linear-gradient(135deg, #00b37e 0%, #0891b2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  color: var(--text2);
  font-weight: 500;
}

/* ============================================================
   MAKERS
   ============================================================ */

.maker-chip {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(15, 30, 46, 0.06);
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.maker-chip:hover {
  border-color: var(--border-glow);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 179, 126, 0.15);
}

.maker-name {
  color: var(--text);
  font-weight: 700;
}

.maker-role {
  color: var(--text2);
}

.makers-label {
  color: var(--text2);
}

/* ============================================================
   TOP NAV
   ============================================================ */

.top-nav {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 4px 24px rgba(15, 30, 46, 0.06);
}

.nav-brand {
  color: var(--accent);
  font-weight: 800;
}

.nav-back {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(15, 30, 46, 0.04);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-back:hover {
  background: var(--grad-primary);
  color: #ffffff;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 179, 126, 0.3);
}

/* ============================================================
   TAG PILL — دکمه‌های پمفلت
   ============================================================ */

.tag-pill--link {
  background: linear-gradient(160deg, #ffffff 0%, #f5fbf9 100%);
  border: 2px solid rgba(124, 58, 237, 0.4);
  box-shadow: 
    0 12px 40px rgba(124, 58, 237, 0.15),
    0 4px 16px rgba(0, 179, 126, 0.1);
}

.tag-pill--link::before {
  background: linear-gradient(160deg, #ffffff 0%, #f5fbf9 100%);
}

.tag-pill--link .tag-pill-text {
  background: linear-gradient(160deg, #ffffff 0%, #f5fbf9 100%);
  color: #1a0f2e;
  font-weight: 800;
  text-shadow: none;
}

.tag-pill--link .spin-layer {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 60deg,
    #00b37e 100deg,
    #7c3aed 140deg,
    #0891b2 180deg,
    transparent 220deg,
    transparent 360deg
  );
  opacity: 0.9;
}

.tag-pill--link:hover {
  border-color: #7c3aed;
  box-shadow: 
    0 0 40px rgba(124, 58, 237, 0.4),
    0 20px 50px rgba(124, 58, 237, 0.25);
}

/* ============================================================
   SECTION HEADER
   ============================================================ */

.section-header h2 {
  background: linear-gradient(135deg, #0f1e2e 0%, #00b37e 70%, #0891b2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-header p {
  color: var(--text2);
}

/* ============================================================
   SEARCH BAR
   ============================================================ */

.disease-search {
  background: #ffffff;
  border: 1.5px solid rgba(0, 179, 126, 0.3);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 179, 126, 0.08);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.disease-search:hover {
  border-color: rgba(0, 179, 126, 0.5);
  box-shadow: 0 8px 24px rgba(0, 179, 126, 0.15);
}

.disease-search:focus-within {
  border: 1.5px solid var(--accent);
  box-shadow: 
    0 0 0 4px rgba(0, 179, 126, 0.12),
    0 8px 24px rgba(0, 179, 126, 0.15);
}

.disease-search input {
  color: var(--text);
}

.disease-search input::placeholder {
  color: var(--text3);
}

.disease-search-icon {
  color: var(--accent);
}

.disease-search-results {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(15, 30, 46, 0.12);
}

.search-result-item {
  border-bottom: 1px solid rgba(15, 30, 46, 0.05);
}

.search-result-item:hover,
.search-result-item:focus-visible {
  background: rgba(0, 179, 126, 0.08);
}

.search-result-name {
  color: var(--text);
}

.search-result-dept {
  color: var(--accent);
}

.search-result-brief {
  color: var(--text2);
}

.search-no-results {
  color: var(--text2);
}

/* ============================================================
   SERVICE CARDS
   ============================================================ */

.svc-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-card::before {
  background: var(--grad-mesh);
  opacity: 0;
}

.svc-card:hover {
  transform: translateY(-10px);
  border-color: var(--border-glow);
  box-shadow: 
    0 24px 60px rgba(0, 179, 126, 0.15),
    0 8px 24px rgba(15, 30, 46, 0.08);
}

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

.svc-card-visual {
  background: linear-gradient(135deg, 
    rgba(0, 179, 126, 0.08) 0%, 
    rgba(124, 58, 237, 0.06) 50%,
    rgba(8, 145, 178, 0.08) 100%);
}

.svc-card-visual::after {
  background: linear-gradient(to bottom, transparent 50%, #ffffff 100%);
}

.svc-name {
  color: var(--text);
  font-weight: 800;
}

.svc-desc {
  color: var(--text2);
}

.svc-badge {
  background: rgba(0, 179, 126, 0.08);
  border: 1px solid rgba(0, 179, 126, 0.2);
  color: var(--accent);
  font-weight: 600;
}

.svc-footer {
  border-top: 1px solid var(--border);
}

.svc-count {
  color: var(--text2);
}

.svc-arrow {
  background: rgba(0, 179, 126, 0.08);
  border: 1px solid rgba(0, 179, 126, 0.2);
  color: var(--accent);
}

.svc-card:hover .svc-arrow {
  background: var(--grad-primary);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 0 20px rgba(0, 179, 126, 0.4);
  transform: scale(1.1) rotate(-45deg);
}

/* ============================================================
   DISEASE CARDS
   ============================================================ */

.dis-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(15, 30, 46, 0.05);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.dis-card::before {
  background: var(--grad-primary);
}

.dis-card:hover {
  transform: translateX(-6px);
  border-color: var(--border-glow);
  box-shadow: 
    0 12px 40px rgba(0, 179, 126, 0.15),
    0 4px 12px rgba(15, 30, 46, 0.06);
}

.dis-card:hover::before {
  box-shadow: 0 0 20px var(--accent);
}

.dis-name {
  color: var(--text);
  font-weight: 700;
}

.dis-brief {
  color: var(--text2);
}

.dtag {
  background: rgba(0, 179, 126, 0.08);
  border: 1px solid rgba(0, 179, 126, 0.2);
  color: var(--accent);
  font-weight: 600;
}

/* ============================================================
   DISEASE HERO
   ============================================================ */

.disease-hero {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.dh-info h2 {
  color: var(--text);
  font-weight: 900;
}

.dh-info p {
  color: var(--text2);
}

.breadcrumb {
  color: var(--text2);
}

.breadcrumb span:hover {
  color: var(--accent);
}

.breadcrumb .bc-current {
  color: var(--accent);
}

/* ============================================================
   DETAIL PAGE
   ============================================================ */

.detail-hero {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.detail-hero::before {
  background: radial-gradient(circle, rgba(0, 179, 126, 0.08) 0%, transparent 70%);
}

.dh-title h1 {
  color: var(--text);
  font-weight: 900;
}

.meta-tag.mt-accent {
  background: rgba(0, 179, 126, 0.1);
  border: 1px solid rgba(0, 179, 126, 0.25);
  color: var(--accent);
}

.meta-tag.mt-warn {
  background: rgba(232, 137, 12, 0.1);
  border: 1px solid rgba(232, 137, 12, 0.25);
  color: var(--accent2);
}

.meta-tag.mt-danger {
  background: rgba(230, 57, 104, 0.1);
  border: 1px solid rgba(230, 57, 104, 0.25);
  color: var(--accent3);
}

.meta-tag.mt-info {
  background: rgba(8, 145, 178, 0.1);
  border: 1px solid rgba(8, 145, 178, 0.25);
  color: var(--accent5);
}

/* ============================================================
   TABS
   ============================================================ */

.tabs-bar {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 6px;
  box-shadow: 0 4px 16px rgba(15, 30, 46, 0.05);
}

.tab-btn {
  color: var(--text2);
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.tab-btn.active {
  background: var(--grad-primary);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 
    0 8px 24px rgba(0, 179, 126, 0.3),
    0 0 20px rgba(0, 179, 126, 0.2);
}

.tab-btn:not(.active):hover {
  background: rgba(0, 179, 126, 0.08);
  color: var(--accent);
}

/* ============================================================
   INFO ITEMS & TEXT BLOCKS
   ============================================================ */

.info-item {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(15, 30, 46, 0.04);
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.info-item:hover {
  border-color: var(--border-glow);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 179, 126, 0.12);
}

.info-item h4 {
  color: var(--text2);
}

.info-item p {
  color: var(--text);
  font-weight: 700;
}

.text-block {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(15, 30, 46, 0.04);
}

.text-block h3 {
  color: var(--accent);
  border-bottom: 1px solid rgba(0, 179, 126, 0.15);
}

.text-block ul li {
  color: var(--text2);
  border-bottom: 1px solid rgba(15, 30, 46, 0.04);
}

.text-block ul li::before {
  background: var(--grad-primary);
}

.text-block p {
  color: var(--text2);
}

/* ============================================================
   ALERTS
   ============================================================ */

.alert-danger {
  background: rgba(230, 57, 104, 0.08);
  border: 1px solid rgba(230, 57, 104, 0.3);
  color: #9b1c3d;
}

.alert-success {
  background: rgba(0, 179, 126, 0.08);
  border: 1px solid rgba(0, 179, 126, 0.25);
  color: #006b4a;
}

.alert-warn {
  background: rgba(232, 137, 12, 0.08);
  border: 1px solid rgba(232, 137, 12, 0.3);
  color: #8a4f00;
}

/* ============================================================
   MEDIA CARDS
   ============================================================ */

.media-card {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(15, 30, 46, 0.05);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.media-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-glow);
  box-shadow: 0 16px 40px rgba(0, 179, 126, 0.15);
}

.media-thumb {
  background: linear-gradient(145deg, #e6f0ee, #f0f7f5);
}

.media-play-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--accent);
  color: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 179, 126, 0.25);
}

.media-card-btn:hover .media-play-btn {
  background: var(--accent);
  color: #ffffff;
  transform: scale(1.15);
  box-shadow: 0 12px 40px rgba(0, 179, 126, 0.5);
}

.media-type,
.media-duration {
  background: rgba(15, 30, 46, 0.85);
  color: #ffffff;
}

.media-soon {
  color: var(--text2);
  border: 1px dashed var(--border);
}

.media-body h4 {
  color: var(--text);
}

.media-body p {
  color: var(--text2);
}

/* ============================================================
   VIDEO PLAYER MODAL
   ============================================================ */

.vp-overlay.open {
  background: rgba(15, 30, 46, 0.6);
}

.vp-box {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 32px 100px rgba(15, 30, 46, 0.25);
}

.vp-header {
  background: #f5fbf9;
  border-bottom: 1px solid var(--border);
}

.vp-header h4 {
  color: var(--text);
}

.vp-close {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text2);
}

.vp-close:hover {
  background: rgba(230, 57, 104, 0.1);
  border-color: rgba(230, 57, 104, 0.4);
  color: var(--accent3);
}

/* ============================================================
   DOWNLOAD BUTTONS
   ============================================================ */

.dl-btn {
  background: #ffffff;
  border: 1px solid rgba(0, 179, 126, 0.2);
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0, 179, 126, 0.06);
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.dl-btn:hover {
  border-color: var(--accent);
  background: rgba(0, 179, 126, 0.06);
  transform: translateX(-6px);
  box-shadow: 0 12px 32px rgba(0, 179, 126, 0.2);
}

.dl-icon-box {
  background: var(--grad-primary);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 179, 126, 0.3);
}

.dl-text h4 {
  color: var(--text);
}

.dl-text p {
  color: var(--text2);
}

.dl-size {
  color: var(--text2);
  background: rgba(15, 30, 46, 0.05);
}

/* ============================================================
   INFO MODALS
   ============================================================ */

.info-modal-overlay.open {
  background: rgba(15, 30, 46, 0.6);
}

.info-modal {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 32px 100px rgba(15, 30, 46, 0.25);
}

.info-modal-close {
  background: rgba(0, 179, 126, 0.08);
  border: 1px solid rgba(0, 179, 126, 0.25);
  color: var(--accent);
}

.info-modal-close:hover {
  background: rgba(0, 179, 126, 0.18);
  border-color: var(--accent);
}

.info-modal-title {
  color: var(--accent);
}

.info-modal-body {
  color: var(--text2);
}

.info-modal-body strong {
  color: var(--text);
}

.info-modal-list li {
  color: var(--text2);
}

.info-modal-list li::before {
  background: var(--accent);
}

.contact-item {
  color: var(--text);
  border-bottom: 1px dashed rgba(0, 179, 126, 0.25);
}

a.contact-item:hover {
  color: var(--accent);
}

.contact-item:last-child {
  color: var(--text2);
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background: rgba(255, 255, 255, 0.9);
  border-top: 1px solid var(--border);
  color: var(--text2);
}

.site-footer strong {
  color: var(--accent);
}

/* ============================================================
   LOADING
   ============================================================ */

.loading-overlay {
  background: var(--bg);
}

.loader-ring {
  border: 3px solid rgba(0, 179, 126, 0.15);
  border-top-color: var(--accent);
}

.loader-text {
  color: var(--accent);
}

.loader-fill {
  background: var(--grad-primary);
}

/* ============================================================
   ENHANCED ANIMATIONS
   ============================================================ */

@keyframes neonPulseLight {
  0%, 100% {
    box-shadow: 
      0 4px 16px rgba(0, 179, 126, 0.1),
      inset 0 1px 2px rgba(255, 255, 255, 0.6);
  }
  50% {
    box-shadow: 
      0 8px 32px rgba(0, 179, 126, 0.2),
      inset 0 1px 2px rgba(255, 255, 255, 0.8);
  }
}

.hero-badge,
.stat-box {
  animation: neonPulseLight 4s ease-in-out infinite;
}

@keyframes spinLayer {
  to { transform: rotate(360deg); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  .hero-blob {
    filter: blur(80px);
    opacity: 0.15;
  }
  
  .enter-btn:hover .enter-btn-logo-box {
    transform: translateY(-2px) scale(1.02);
  }
  
  .svc-card:hover {
    transform: translateY(-6px);
  }
  
  .dis-card:hover {
    transform: translateX(-3px);
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .hero-badge,
  .stat-box {
    animation: none !important;
  }
  
  * {
    transition-duration: 0.01ms !important;
  }
}