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

/* ===== DESIGN TOKENS ===== */
:root {
  --pad-x: 2.08vw;
  --section-gap: 6vw;
  --grid-gap: 1.11vw;
  --radius-sm: 1.04vw;
  --radius-lg: 2.08vw;
  --border: 1px solid rgba(0, 0, 0, 0.08);
  --h2-lg: 3vw;
  --h2-md: 2.94vw;
  --h2-sm: 1.67vw;
  --separator: 6vw;
}

/* ===== PAGE INTRO (load animation) ===== */
.intro {
  opacity: 0;
  transform: translateY(20px);
  animation: intro-in 0.7s ease-out forwards;
  animation-delay: var(--intro-delay, 0s);
}
@keyframes intro-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .intro {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== UTILITY CLASSES ===== */
.separator { height: var(--separator); }

/* ===== HEADING CLASSES ===== */
.h2-lg {
  font-size: var(--h2-lg);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.104vw;
  margin-bottom: 3.47vw;
}
.h2-md {
  font-size: var(--h2-md);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.1vw;
}
.h2-sm {
  font-size: var(--h2-sm);
  font-weight: 400;
  line-height: 1.17;
  letter-spacing: -0.054vw;
}

@font-face {
  font-family: 'Google Sans';
  src: url('/fonts/GoogleSans-Variable.ttf') format('truetype-variations'),
       url('/fonts/GoogleSans-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans';
  src: url('/fonts/GoogleSans-Italic-Variable.ttf') format('truetype-variations'),
       url('/fonts/GoogleSans-Italic-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

html {
  font-family: 'Google Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Чёрный фон под body — закрашивает safe-area-inset-bottom
     и rubber-band overscroll на iOS Safari (зона home-indicator под футером) */
  background: #000;
}

body {
  background: #fff;
  color: #000;
  overflow-x: hidden;
  touch-action: manipulation;
}

/* ================================================
   TABLET — max-width: 1100px
   ================================================ */
@media (max-width: 1100px) {
  :root {
    --pad-x: 2.73vw;
    --grid-gap: 1.36vw;
    --radius-sm: 1.36vw;
    --radius-lg: 2.73vw;
    --h2-lg: 5.27vw;
    --h2-md: 3.82vw;
    --h2-sm: 2.18vw;
    --separator: 6vw;
  }

  .h2-lg { letter-spacing: -0.17vw; margin-bottom: 4.82vw; }
}

/* ================================================
   MOBILE — max-width: 576px
   ================================================ */
@media (max-width: 576px) {
  :root {
    --pad-x: 15px;
    --section-gap: 35px;
    --grid-gap: 20px;
    --radius-sm: 10px;
    --radius-lg: 0;
    --h2-lg: 38px;
    --h2-md: 32px;
    --h2-sm: 24px;
    --separator: 35px;
  }

  .h2-lg { letter-spacing: -1.5px; margin-bottom: 40px; }
  .h2-md { letter-spacing: -1.5px; }
  .h2-sm { letter-spacing: -0.78px; }

}