/* =============================
   DESIGN SYSTEM MODERNO
============================= */

:root {
  --bg-main: #020617;
  --bg-soft: #020617;
  --card-bg: rgba(255,255,255,0.04);
  --border-soft: rgba(255,255,255,0.08);

  --text-main: #e5e7eb;
  --text-soft: #94a3b8;

  --primary: #6366f1;
  --accent: #22d3ee;

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
}

/* Typography */
body {
  background: radial-gradient(1200px 600px at 50% -200px, rgba(99,102,241,.15), transparent),
              #020617;
  color: var(--text-main);
}

/* Cards */
.card,
.feature,
.blog-post,
.feedback,
.faq-item {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  transition: transform .25s ease, border-color .25s ease;
}

.card:hover,
.feature:hover {
  transform: translateY(-4px);
  border-color: rgba(99,102,241,.5);
}

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: var(--radius-md);
  font-weight: 600;
}