/* Shared page styles for every language version (was an inline <style>). */
@layer base{html,body{margin:0;padding:0;}body{overscroll-behavior:none;}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}

/* Section links (header, mobile menu, footer) glide to their target and stop
   just below the fixed 4rem header. Reduced motion keeps the instant jump. */
html {
  scroll-padding-top: 4rem;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.mockup-interactive-target {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  will-change: transform;
}
.project-card-interactive {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.magnetic-cta {
  will-change: transform;
}
.magnetic-cta-inner {
  will-change: transform;
}

/* Localized pages (/ru/, /ua/) stay hidden until js/i18n has mounted the
   translated markup, so the empty shell never flashes. */
html[data-i18n-pending] body {
  visibility: hidden;
}

/* Plus Jakarta Sans ships only the cyrillic-ext subset, not basic Cyrillic,
   so Russian and Ukrainian headings would fall back to a system font. Those
   pages set headings in Manrope instead — the closest geometric match on
   Google Fonts. Only the /ru/ and /ua/ shells load it; English never does. */
:lang(ru) [class*='font-headline'],
:lang(ru) [class*='font-display'],
:lang(uk) [class*='font-headline'],
:lang(uk) [class*='font-display'] {
  font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif;
}

/* Russian and Ukrainian words run long ("технологических" is ~1.5× the
   width of "technology"), so below md the hero headline scales with the
   viewport until its longest word fits one line. Sized per language from
   measured word widths. English only needs it below ~370px, where
   "companies." (5.5em wide) no longer fits between the page margins. */
@media (max-width: 767.98px) {
  :lang(en) [data-hero] h1 {
    font-size: min(3.75rem, (100vw - 2.5rem) * 0.18);
  }

  :lang(ru) [data-hero] h1 {
    font-size: min(3.75rem, 10.5vw);
  }

  :lang(uk) [data-hero] h1 {
    font-size: min(3.75rem, 12.5vw);
  }
}

/* Last resort on the narrowest phones (< 360px): let long Cyrillic words in
   section headings hyphenate instead of overflowing. */
@media (max-width: 359.98px) {
  :lang(ru) :is(h2, h3),
  :lang(uk) :is(h2, h3) {
    hyphens: auto;
    overflow-wrap: break-word;
  }
}