body { font-family: 'Manrope', system-ui, -apple-system, sans-serif; }

.gradient-text {
  background: linear-gradient(135deg, #00B4FF 0%, #5ee0ff 40%, #FF6B00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-glow {
  background:
    radial-gradient(ellipse 80% 60% at 70% 10%, rgba(0, 180, 255, 0.22), transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(255, 107, 0, 0.14), transparent 50%),
    linear-gradient(180deg, #1a2332 0%, #0F172A 55%);
}

.grid-bg {
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

.card-premium {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card-premium:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 180, 255, 0.14);
  border-color: rgba(0, 180, 255, 0.45);
}

.btn-primary {
  background: linear-gradient(135deg, #00B4FF, #0090d0);
  box-shadow: 0 8px 32px rgba(0, 180, 255, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 180, 255, 0.45);
}

.portal-card { position: relative; overflow: hidden; }

.portal-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,180,255,0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

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

.case-card {
  background: linear-gradient(145deg, #1E2937 0%, #0F172A 100%);
}

.faq-item[open] summary { color: #00B4FF; }

.faq-item summary {
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }