:root {
  --at-primary: #0d6efd;
  --at-bg: #f7f8fb;
  --at-text: #0f172a;
}

body {
  background: var(--at-bg);
  color: var(--at-text);
}

.at-hero {
  background: radial-gradient(1200px 600px at 10% 10%, #e9f1ff 0%, #f7f8fb 60%);
  border: 1px solid #eef0f6;
  border-radius: 24px;
}

.at-card {
  border: 1px solid #eef0f6;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.at-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.at-section-title {
  letter-spacing: 0.2px;
}

.at-chip {
  background: #eef2ff;
  color: #3730a3;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.85rem;
}

.at-navbar {
  backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid #eef0f6;
}

@media (max-width: 576px) {
  .at-navbar {
    backdrop-filter: none;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
  }

  .at-navbar .navbar-toggler {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 8px;
  }

  .at-navbar .navbar-collapse {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
  }
}

.at-footer {
  color: #6b7280;
}