:root {
  --background: #121214;
  --foreground: #f5f5f5;
  --card-bg: #1c1c1e;
  --card-border: #2a2a2e;
  --badge-bg: #4a7c59;

  --font-body: "Outfit", system-ui, sans-serif;

  --step--2: clamp(0.64rem, 0.61rem + 0.15vw, 0.72rem);
  --step--1: clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);
  --step-0: clamp(1rem, 0.95rem + 0.24vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.18rem + 0.35vw, 1.406rem);
  --step-2: clamp(1.563rem, 1.46rem + 0.51vw, 1.758rem);
  --step-3: clamp(1.953rem, 1.81rem + 0.72vw, 2.197rem);
  --step-4: clamp(2.441rem, 2.24rem + 1.01vw, 2.747rem);

  --space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.313rem);
  --space-2xs: clamp(0.5rem, 0.47rem + 0.15vw, 0.563rem);
  --space-xs: clamp(0.75rem, 0.7rem + 0.24vw, 0.875rem);
  --space-s: clamp(1rem, 0.95rem + 0.24vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.42rem + 0.39vw, 1.688rem);
  --space-l: clamp(2rem, 1.9rem + 0.49vw, 2.25rem);
  --space-xl: clamp(3rem, 2.85rem + 0.73vw, 3.375rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  background-color: var(--background);
  color: var(--foreground);
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

.main-layout {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.container {
  width: min(100% - var(--space-m), 960px);
  margin-inline: auto;
}

header {
  padding-block: var(--space-m);
}

.profile-info {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: var(--space-m);
}

.profile-info img {
  border-radius: 8px;
  width: clamp(80px, 10vw, 120px);
  height: clamp(80px, 10vw, 120px);
  object-fit: cover;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.profile-info img:hover {
  transform: scale(1.05);
}

.profile-info h1 {
  font-size: var(--step-4);
  line-height: 1.1;
  font-weight: 700;
}

.profile-info p {
  font-size: var(--step-1);
  font-weight: 500;
  opacity: 0.8;
}

section {
  padding-block: var(--space-l);
}

section h2 {
  font-size: var(--step-3);
  font-weight: 600;
  margin-bottom: var(--space-s);
}

section > .container > p {
  font-size: var(--step-0);
  line-height: 1.7;
  opacity: 0.85;
  max-width: 65ch;
}

.card-projects,
.services-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-m);
  margin-top: var(--space-m);
}

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-xs);
  background-color: var(--card-bg);
  padding: var(--space-m);
  border-radius: 8px;
  border: 1px solid var(--card-border);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.card h3 {
  font-size: var(--step--1);
  font-weight: 600;
}

.card p {
  font-size: var(--step--1);
  line-height: 1.5;
  opacity: 0.85;
}

.badge-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: auto;
  padding-top: var(--space-xs);
}

.badge-container > span {
  font-size: var(--step--2);
  font-weight: 600;
}

.badge-container div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
}

.badge {
  background: var(--badge-bg);
  color: var(--foreground);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: 4px;
  font-size: var(--step--2);
  font-weight: 500;
}

.social-media {
  margin-top: var(--space-l);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.social-media a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  border: 1px solid var(--card-border);
  padding: var(--space-xs) var(--space-m);
  border-radius: 4px;
  font-size: var(--step--1);
  font-weight: 500;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.social-media a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffff;
}

.social-media img {
  width: 20px;
  height: 20px;
}

footer {
  padding-block: var(--space-m);
  text-align: center;
}

footer p {
  font-size: var(--step--1);
}

footer a {
  color: var(--badge-bg);
  transition: text-decoration 0.2s ease;
}

footer a:hover {
  text-decoration: underline;
}