:root {
  color: #0f172a;
  background-color: #f5f7fb;
  --hero-gradient: linear-gradient(135deg, #4f46e5, #3b82f6);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: #edf1ff;
  color: #0f172a;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

main {
  background-color: #edf1ff;
}

header {
  background-image: var(--hero-gradient);
  color: #fff;
}

header h1 {
  letter-spacing: -0.03em;
}

.card {
  background-color: #fff;
}

button.btn-outline-primary {
  border-width: 2px;
  font-weight: 600;
}

button.btn-outline-primary .bi {
  font-size: 1.2rem;
}

nav [class^="btn"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

nav [class^="btn"]:hover, nav [class^="btn"]:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
}

.ratio iframe {
  border: 0;
}

.ratio > p {
  font-size: 0.95rem;
  padding: 1rem;
}

footer a {
  color: #2563eb;
  text-decoration: none;
}

@media (max-width: 768px) {
  header .container {
    text-align: center;
  }
}

@media (max-width: 768px) {
  nav.row {
    text-align: center;
  }
}