:root {
  color-scheme: light;
  color: #121e32;
  background: #f8fafb;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid #c53d24; outline-offset: 5px; }
.wrap { width: min(1140px, calc(100% - 48px)); margin-inline: auto; }
.site-header { background: white; border-bottom: 1px solid #dfe6eb; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.logo { display: block; width: 124px; height: auto; }
.languages { display: flex; gap: clamp(.55rem, 2vw, 1.25rem); font-size: .875rem; }
.languages a { color: #405068; text-decoration: none; }
.languages a[aria-current] { color: #121e32; font-weight: 700; text-decoration: underline; text-underline-offset: .3em; }
.hero { background: #edf2f5; border-bottom: 1px solid #dfe6eb; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 1.5rem; padding-block: clamp(2.5rem, 6vw, 5.5rem); }
.preview { display: inline-block; color: #405068; border: 1px solid #bdcbd4; border-radius: 20px; padding: .2rem .7rem; font-size: .8rem; }
.eyebrow { color: #96301e; font-size: .85rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; margin-top: 1.5rem; }
h1 { font-size: clamp(2.25rem, 5vw, 4.25rem); letter-spacing: -.04em; line-height: 1.06; margin: .6rem 0 1.25rem; text-wrap: balance; }
.intro { max-width: 36rem; font-size: 1.125rem; color: #3c4d62; }
.actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: 1.65rem; }
.primary { border: none; border-radius: .45rem; background: #122742; color: white; padding: .78rem 1.15rem; font: inherit; font-weight: 650; cursor: pointer; }
.primary:hover { background: #253f60; }
.gyro { display: block; width: min(100%, 480px); height: auto; justify-self: center; }
.technology { padding-block: 3.5rem; max-width: 56rem; }
.technology h2 { margin: 0 0 .7rem; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; }
.technology p { color: #3c4d62; max-width: 43rem; }
.site-footer { border-top: 1px solid #dfe6eb; padding-block: 1.7rem 5.5rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: .7rem 2rem; }
@media (max-width: 680px) {
  .wrap { width: calc(100% - 32px); }
  .logo { width: 95px; }
  .hero .wrap { grid-template-columns: 1fr; }
  .gyro { width: min(82%, 320px); }
}