:root {
  --bg: #0b1220;
  --bg-soft: #111a2e;
  --accent: #2f7dff;
  --accent-soft: #1e3a6b;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: #e6edf7;
}

.hero-grid {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(47, 125, 255, 0.18), transparent 45%),
    radial-gradient(circle at 80% 0%, rgba(47, 125, 255, 0.12), transparent 40%),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px;
}

.lang-btn {
  padding: 0.15rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #8ea3c4;
  transition: all 0.15s ease;
}

.lang-btn:hover {
  color: #e6edf7;
}

.lang-active {
  background: var(--accent);
  color: #fff !important;
}

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.card:hover {
  border-color: rgba(47, 125, 255, 0.55);
  transform: translateY(-3px);
}

.field {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e6edf7;
  border-radius: 0.6rem;
  padding: 0.7rem 0.9rem;
  width: 100%;
  transition: border-color 0.15s ease;
}

.field:focus {
  outline: none;
  border-color: var(--accent);
}

.field::placeholder {
  color: #6f80a0;
}