:root {
  --site-bg: var(--bg-color);
  --site-surface: color-mix(in srgb, var(--bg-color) 78%, #ffffff 22%);
  --site-surface-2: color-mix(in srgb, var(--bg-color) 90%, #ffffff 10%);
  --site-border: rgba(255, 255, 255, 0.12);
  --site-border-2: rgba(255, 255, 255, 0.18);
  --site-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
  --site-shadow-2: 0 12px 34px rgba(0, 0, 0, 0.22);
  --site-radius: 24px;
  --site-radius-sm: 16px;
  --site-muted: color-mix(in srgb, var(--text-color) 68%, transparent);
  --site-title: color-mix(in srgb, var(--text-color) 92%, transparent);
  --site-primary: var(--main-color);
}

[data-theme="light"] {
  --site-surface: #ffffff;
  --site-surface-2: #f6f8fb;
  --site-border: rgba(15, 23, 42, 0.12);
  --site-border-2: rgba(15, 23, 42, 0.16);
  --site-shadow: 0 22px 70px rgba(15, 23, 42, 0.12);
  --site-shadow-2: 0 12px 34px rgba(15, 23, 42, 0.1);
  --site-muted: rgba(15, 23, 42, 0.62);
  --site-title: rgba(15, 23, 42, 0.9);
}

section {
  min-height: auto;
  padding: 10rem 9% 7rem;
}

.heading {
  color: var(--site-title);
  letter-spacing: 0.2px;
}

.heading span {
  color: var(--site-title);
}

.heading span:last-child {
  color: var(--site-primary);
}

.btn {
  border-radius: 999px;
  padding: 1.1rem 2.2rem;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--site-primary) 22%, transparent);
  font-weight: 800;
  letter-spacing: 0.2px;
}

.btn:hover {
  transform: translateY(-1px);
}

.home {
  gap: 5rem;
}

.home-content h3 {
  color: var(--site-muted);
  font-weight: 800;
  letter-spacing: 0.2px;
}

.home-content h1 {
  color: var(--site-title);
  font-weight: 1000;
  letter-spacing: 0.2px;
}

.home-content p {
  color: var(--site-muted);
  font-size: 1.6rem;
  max-width: 62ch;
}

.social-media a {
  border-color: color-mix(in srgb, var(--site-primary) 70%, transparent);
}

.social-media a:hover {
  box-shadow: 0 14px 30px color-mix(in srgb, var(--site-primary) 26%, transparent);
}

.profile-photo {
  border: 0.35rem solid color-mix(in srgb, var(--site-primary) 72%, transparent);
  box-shadow: var(--site-shadow);
}

.about,
.skills,
.testimonials,
.contact {
  background: transparent;
}

.about {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3.2rem;
  align-items: center;
}

@media (max-width: 992px) {
  .about {
    grid-template-columns: 1fr;
  }
}

.about-content h3 {
  color: var(--site-title);
  font-weight: 900;
}

.about-content p {
  color: var(--site-muted);
}

.contact-info {
  background: var(--site-surface);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
  padding: 1.6rem 1.8rem;
  box-shadow: var(--site-shadow-2);
}

.skills-container {
  gap: 1.6rem;
}

.skills-box {
  background: var(--site-surface);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow-2);
}

.skills-box:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--site-primary) 40%, var(--site-border));
}

.skill-bar {
  background: color-mix(in srgb, var(--site-surface-2) 88%, transparent);
  border: 1px solid var(--site-border);
}

.skill-level {
  border-radius: 999px;
}

.portfolio-filters {
  margin: -1rem 0 2.6rem;
}

.portfolio-filters .category-btn {
  background: var(--site-surface);
  border: 1px solid var(--site-border);
  box-shadow: var(--site-shadow-2);
}

.portfolio-filters .category-btn.active {
  box-shadow: 0 16px 36px color-mix(in srgb, var(--site-primary) 22%, transparent);
}

.portfolio-container {
  gap: 1.8rem;
}

.portfolio-container .portfolio-box {
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow-2);
}

.portfolio-box .portfolio-layer {
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.04) 0%, rgba(2, 6, 23, 0.92) 100%);
}

[data-theme="light"] .portfolio-box .portfolio-layer {
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.04) 0%, rgba(2, 6, 23, 0.78) 100%);
}

.testimonial-box {
  background: var(--site-surface);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow-2);
}

.contact form {
  background: var(--site-surface);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow-2);
  padding: 2rem;
}

.contact form .input-box input,
.contact form textarea {
  background: var(--site-surface-2);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-sm);
  color: var(--site-title);
}

.contact form .input-box input::placeholder,
.contact form textarea::placeholder {
  color: var(--site-muted);
}

.footer {
  background: transparent;
  border-top: 1px solid var(--site-border);
}