/* ========================================
   Fonts (self-hosted)
   ========================================
   Served from this origin rather than fonts.gstatic.com, so no visitor IP is
   transmitted to a third party. Both are variable fonts covering the full
   weight range from a single file each. Latin subset only.
   ======================================== */
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  src: url('../assets/fonts/roboto-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ========================================
   CSS Custom Properties
   ======================================== */
:root {
  /* Colors */
  --color-bg: #111729;
  --color-card-bg: rgba(0, 0, 0, 0.37);
  --color-card-bg-light: rgba(0, 0, 0, 0.18);
  --color-white: #ffffff;
  --color-offwhite: #c7c7c7;
  --color-gray-light: #e5e5ea;
  --color-blue: #2b7fff;

  /* Fonts */
  --font-roboto: 'Roboto', sans-serif;
  --font-inter: 'Inter', sans-serif;

  /* Spacing (8px base scale) */
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 48px;
  --spacing-xxl: 80px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 100px;

  /* Max width */
  --max-width: 1440px;
}

/* ========================================
   Reset & Base
   ======================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: var(--font-roboto);
  background-color: var(--color-bg);
  color: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ========================================
   Accessibility
   ======================================== */

/* Visible only to screen readers. Not display:none, which would remove it
   from the accessibility tree entirely. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A single focus ring for every interactive element. The previous stylesheet
   had none at all, leaving keyboard users with no visible position. */
:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Only suppress the default ring where :focus-visible is supported, so
   older browsers keep theirs. */
:focus:not(:focus-visible) {
  outline: none;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  transform: translateY(-150%);
  background: var(--color-blue);
  /* Dark navy on the brand blue is 4.74:1; white on it is only 3.76:1, and at
     16px/500 the large-text exemption does not apply. */
  color: var(--color-bg);
  font-weight: 500;
  padding: 12px 20px;
  border-bottom-right-radius: var(--radius-md);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Respect the visitor's motion preference: the stylesheet is otherwise full
   of transitions and uses smooth scrolling unconditionally. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================
   Header
   ======================================== */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 48px;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-bg);
}

.header__logo {
  height: 48px;
  width: auto;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.header__links {
  display: flex;
  align-items: center;
  gap: 40px;
}

.header__link {
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-gray-light);
  transition: opacity 0.2s ease;
}

.header__link:hover {
  opacity: 0.7;
}

/* Language Toggle */
.header__lang {
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: var(--color-white);
  background: none;
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  user-select: none;
}

.header__lang:hover {
  border-color: var(--color-blue);
  background-color: rgba(43, 127, 255, 0.1);
}

/* ========================================
   Main Content
   ======================================== */
.main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxl);
  padding: var(--spacing-xl) 120px;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}

/* ========================================
   Hero Section
   ======================================== */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
}

.hero__info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.hero__title {
  font-family: var(--font-roboto);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.hero__subtitle {
  font-family: var(--font-roboto);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-offwhite);
}

.hero__description {
  font-family: var(--font-roboto);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-gray-light);
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  max-width: 480px;
}

.hero__bio {
  font-family: var(--font-roboto);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-gray-light);
}

.hero__bio a {
  color: var(--color-blue);
}

.hero__bio a:hover {
  text-decoration: underline;
}

/* ========================================
   Social Media Links
   ======================================== */
.social-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.social-links__icon {
  width: 40px;
  height: 40px;
  transition: opacity 0.2s ease;
}

.social-links__icon:hover {
  opacity: 0.7;
}

/* ========================================
   Projects Section
   ======================================== */
.projects {
  display: flex;
  gap: var(--spacing-xl);
  align-items: flex-start;
}

/* Project List (Left Sidebar) */
.project-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  flex-shrink: 0;
  position: sticky;
  top: 80px;
  align-self: flex-start;
  width: 200px;
}

.project-list__title {
  font-weight: 500;
  font-size: 28px;
  line-height: 36px;
}

.project-list__categories {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-list__category {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.project-list__category:hover {
  opacity: 0.7;
}

.project-list__category-line {
  width: 24px;
  height: 2px;
  background-color: var(--color-white);
  transition: width 0.3s ease;
}

.project-list__category--active .project-list__category-line {
  width: 40px;
}

.project-list__category-name {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-white);
}

/* Project Cards Container */
.project-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  flex: 1;
}

.project-category {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.project-category__title {
  font-weight: 500;
  font-size: 28px;
  line-height: 36px;
}

/* Project Card */
.project-card {
  display: flex;
  gap: var(--spacing-lg);
  align-items: stretch;
  padding: 20px;
  background: var(--color-card-bg);
  border-radius: 12px;
}

.project-card__image-wrapper {
  flex: 0 0 45%;
  /* Fixed 4:3, height derived from the fluid 45% width — so the image
     scales with the viewport but never changes shape. The earlier
     alternative (stretching to the row height) kept image and text the
     same height, but let the crop shape vary card to card.
     align-self keeps the image at the top instead of stretching, so every
     image's top edge lines up with its project title down a category. The
     text column is usually the taller of the two, so card background shows
     below the image on narrower rows — that void is the accepted cost. */
  aspect-ratio: 4 / 3;
  align-self: flex-start;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.project-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.project-card__image--active {
  opacity: 1;
  pointer-events: auto;
}

.project-card:hover .project-card__image--active {
  transform: scale(1.03);
}

/* Carousel Arrows */
.project-card__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  z-index: 10;
}

/* :focus-within matters as much as :hover here — the arrows are buttons, and
   without it a keyboard user tabs onto a control with opacity 0. */
.project-card__image-wrapper:hover .project-card__arrow,
.project-card__image-wrapper:focus-within .project-card__arrow {
  opacity: 1;
}

.project-card__arrow:hover {
  background: rgba(0, 0, 0, 0.7);
}

.project-card__arrow--prev {
  left: 12px;
}

.project-card__arrow--next {
  right: 12px;
}

/* Carousel Dots */
.project-card__dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.project-card__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  /* Raised from 0.4 alpha, which fell below the 3:1 minimum for
     non-text UI components against the card image. */
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.project-card__dot:hover {
  background: var(--color-white);
}

.project-card__dot--active {
  background: var(--color-white);
  transform: scale(1.2);
}

.project-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0;
}

.project-card__header {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.3px;
}

.project-card__description {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-offwhite);
  margin-top: 10px;
}

.project-card__details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--spacing-md);
}

.project-card__details-title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-offwhite);
}

.project-card__details-list {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.project-card__detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  line-height: 1.4;
}

.project-card__detail-label {
  color: var(--color-gray-light);
  font-weight: 400;
}

.project-card__detail-value {
  color: var(--color-white);
  font-weight: 500;
}

.project-card__detail-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Project Links */
.project-card__links {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 12px;
}

.project-card__link {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.project-card__link-content {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-blue);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.project-card__link-icon {
  width: 12px;
  height: 12px;
}

.project-card__link-underline {
  height: 1.5px;
  background-color: var(--color-blue);
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.project-card__link:hover .project-card__link-underline {
  transform: scaleX(1);
}

/* ========================================
   How I Build Section
   ======================================== */
.build {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.build__title {
  font-weight: 500;
  font-size: 28px;
  line-height: 36px;
}

.build__cards {
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-start;
}

.build-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex: 1;
}

.build-card__image-wrapper {
  width: 100%;
  height: 280px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.build-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.build-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
}

.build-card__title {
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
}

.build-card__description {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-gray-light);
}

/* ========================================
   Contact Section
   ======================================== */
.contact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  width: 100%;
}

.contact__title {
  font-weight: 600;
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.contact__card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  background: var(--color-card-bg);
  padding: 40px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  align-items: flex-start;
}

.contact__intro {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-offwhite);
}

.contact__email-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.contact__email {
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  color: var(--color-white);
  text-decoration: none;
  border-bottom: 2px solid var(--color-blue);
  padding-bottom: 2px;
  transition: color 0.2s ease;
  overflow-wrap: anywhere;
}

.contact__email:hover {
  color: var(--color-blue);
}

.contact__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 10px 18px;
  font-family: var(--font-roboto);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.contact__copy:hover {
  border-color: var(--color-blue);
  background: rgba(43, 127, 255, 0.12);
}

.contact__copy--copied {
  border-color: var(--color-blue);
  background: rgba(43, 127, 255, 0.2);
}

.contact__copy-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.project-cards__error {
  color: var(--color-offwhite);
  font-size: 18px;
  padding: var(--spacing-xl) 0;
}

/* ========================================
   Legal pages (Datenschutz)
   ======================================== */
.legal {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacing-xl) 0;
}

.legal h1 {
  font-weight: 600;
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: var(--spacing-lg);
}

.legal h2 {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
}

.legal p,
.legal li {
  color: var(--color-offwhite);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: var(--spacing-md);
}

.legal ul {
  list-style: disc;
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.legal li {
  margin-bottom: var(--spacing-sm);
}

.legal a {
  color: var(--color-blue);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.legal__updated {
  font-size: 14px;
  color: var(--color-gray-light);
  margin-top: var(--spacing-xl);
}

/* ========================================
   Footer
   ======================================== */
.footer {
  background: var(--color-card-bg-light);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  align-items: center;
  padding: var(--spacing-xl) var(--spacing-md);
  width: 100%;
}

.footer__logo {
  height: 48px;
  width: auto;
}

.footer__text {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
  max-width: 560px;
  color: var(--color-gray-light);
}

.footer__legal {
  display: flex;
  align-items: center;
  gap: 32px;
}

.footer__legal-link {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-white);
  transition: opacity 0.2s ease;
}

.footer__legal-link:hover {
  opacity: 0.7;
}

/* ========================================
   Hamburger Menu (hidden on desktop)
   ======================================== */
.header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.header__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-white);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.header__hamburger--active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header__hamburger--active span:nth-child(2) {
  opacity: 0;
}

.header__hamburger--active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Nav Overlay */
.mobile-nav {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg);
  z-index: 90;
  padding-top: 100px;
}

.mobile-nav--open {
  display: flex;
}

.mobile-nav__link {
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 24px;
  color: var(--color-gray-light);
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 1200px) {
  .main {
    padding: var(--spacing-xl) var(--spacing-xxl);
  }

  .header__links {
    gap: 32px;
  }
}

@media (max-width: 1024px) {
  .main {
    padding: var(--spacing-lg) var(--spacing-lg);
  }

  .header {
    padding: 16px 24px;
  }

  .header__links {
    gap: var(--spacing-lg);
  }

  .header__link {
    font-size: 15px;
  }

  .hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__text {
    max-width: 100%;
  }

  .build__cards {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  html {
    scroll-padding-top: 60px;
  }

  .main {
    padding: var(--spacing-md) var(--spacing-md);
    gap: var(--spacing-xl);
  }

  .header {
    padding: 12px 16px;
  }

  .header__logo {
    height: 36px;
  }

  .header__links {
    display: none;
  }

  .header__hamburger {
    display: flex;
  }

  /* The legal pages have no hamburger to fall back on, so keep their two
     links in the bar rather than leaving them with no navigation at all. */
  .header--simple .header__links {
    display: flex;
    gap: var(--spacing-md);
  }

  .header--simple .header__link {
    font-size: 14px;
  }

  .header__lang {
    font-size: 13px;
    padding: 5px 12px;
  }

  .hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__text {
    max-width: 100%;
  }

  .hero__title {
    font-size: 36px;
  }

  /* Projects: stacked layout with sticky list */
  .projects {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .project-list {
    position: sticky;
    top: 60px;
    z-index: 50;
    background-color: var(--color-bg);
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-md);
    width: 100%;
    gap: var(--spacing-md);
  }

  .project-list__title {
    font-size: 22px;
  }

  .project-list__categories {
    flex-direction: column;
    gap: 8px;
  }

  .project-list__category-line {
    width: 20px;
  }

  .project-list__category--active .project-list__category-line {
    width: 32px;
  }

  .project-list__category-name {
    font-size: 13px;
  }

  .project-category__title {
    font-size: 22px;
  }

  .project-card {
    flex-direction: column;
    padding: 16px;
    gap: var(--spacing-md);
    border-radius: 10px;
  }

  .project-card__image-wrapper {
    flex: none;
    width: 100%;
    /* The base rule's align-self:flex-start acts on the cross axis, which is
       horizontal once the card stacks — it would shrink the image to its
       content width. Reset it explicitly rather than relying on width:100%
       to mask it. The 4:3 ratio is inherited from the base rule. */
    align-self: stretch;
  }

  .project-card__arrow {
    width: 32px;
    height: 32px;
    opacity: 1;
  }

  .project-card__arrow--prev {
    left: 8px;
  }

  .project-card__arrow--next {
    right: 8px;
  }

  .project-card__dots {
    bottom: 8px;
    gap: 6px;
  }

  .project-card__dot {
    width: 6px;
    height: 6px;
  }

  .project-card__info {
    gap: var(--spacing-md);
    padding: 0;
  }

  .project-card__header {
    font-size: 20px;
  }

  .project-card__description {
    font-size: 14px;
    margin-top: 8px;
  }

  .project-card__details {
    padding-top: var(--spacing-sm);
  }

  .project-card__links {
    margin-top: 10px;
  }

  .social-links__icon {
    width: 36px;
    height: 36px;
  }

  .build-card__image-wrapper {
    height: 200px;
  }

  /* Contact mobile */
  .contact__title {
    font-size: 28px;
  }

  .contact__card {
    padding: 24px;
    gap: var(--spacing-md);
    border-radius: 12px;
  }

  .contact__intro {
    font-size: 16px;
  }

  .contact__email {
    font-size: 19px;
  }

  .contact__copy {
    width: 100%;
    justify-content: center;
  }

  .footer__legal {
    flex-direction: column;
    gap: var(--spacing-md);
  }
}

@media (max-width: 480px) {
  .hero__title {
    font-size: 32px;
  }

  .hero__info {
    gap: var(--spacing-lg);
  }

  .social-links__icon {
    width: 32px;
    height: 32px;
  }

  .social-links {
    gap: 12px;
  }
}