:root {
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-accent: #02b8d4;
  --color-accent-border: #02b8d4;
  --color-on-accent: #ffffff;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-regular: 400;
  --font-semibold: 600;
  --font-bold: 700;

  --size-h1: 67.5px;
  --lh-h1: 119px;
  --size-body: 17.5px;
  --lh-body: 31px;
  --size-body-tight: 17.3px;
  --size-button: 17.8px;
  --size-lead: 17.8px;
  --lh-lead: 22px;
  --size-link: 18.1px;
  --size-phone-label: 18.1px;
  --size-phone-num: 17.3px;

  --space-page-x: 143px;
  --space-page-y-top: 51px;
  --space-page-y-bottom: 80px;
  --space-after-logo: 40px;
  --space-after-h1: 24px;
  --space-between-paragraphs: 18px;
  --space-before-button: 24px;
  --space-after-button: 48px;
  --space-after-lead: 16px;
  --space-list-row: 12px;
  --space-between-lists: 32px;
  --space-before-footer: 40px;

  --btn-min-h: 55px;
  --btn-min-w: 240px;
  --btn-radius: 30px;
  --btn-pad-x: 32px;

  --icon-size: 21px;
  --icon-text-gap: 9px;

  --hero-size: 427px;
  --layout-max-width: 1440px;
  --layout-gap: 72px;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--font-regular);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

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

.page {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: var(--space-page-y-top) var(--space-page-x) var(--space-page-y-bottom);
}

.page__header {
  margin-bottom: var(--space-after-logo);
}

.brand {
  display: inline-block;
  line-height: 0;
}

.brand__mark {
  width: 160px;
  height: auto;
}

.page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hero-size);
  gap: var(--layout-gap);
  align-items: start;
}

.page__main {
  min-width: 0;
  max-width: 720px;
}

.page__hero {
  position: sticky;
  top: var(--space-page-y-top);
  justify-self: end;
}

.page__hero-img {
  width: var(--hero-size);
  height: var(--hero-size);
  object-fit: contain;
}

.heading-xl {
  margin: 0 0 var(--space-after-h1);
  font-weight: var(--font-bold);
  font-size: var(--size-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.02em;
}

.text-body {
  margin: 0 0 var(--space-between-paragraphs);
  font-size: var(--size-body);
  line-height: var(--lh-body);
}

.text-body:last-of-type {
  margin-bottom: 0;
}

.text-body--footer {
  margin-top: var(--space-before-footer);
  font-size: var(--size-body-tight);
}

.text-lead {
  margin: var(--space-after-button) 0 var(--space-after-lead);
  font-weight: var(--font-bold);
  font-size: var(--size-lead);
  line-height: var(--lh-lead);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-before-button);
  min-height: var(--btn-min-h);
  min-width: var(--btn-min-w);
  padding: 0 var(--btn-pad-x);
  border-radius: var(--btn-radius);
  border: 1px solid var(--color-accent-border);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: inherit;
  font-weight: var(--font-semibold);
  font-size: var(--size-button);
  line-height: var(--lh-body);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.button:hover {
  filter: brightness(1.03);
}

.button:active {
  filter: brightness(0.97);
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list--sites {
  margin-top: var(--space-between-lists);
}

.list__row {
  display: flex;
  align-items: center;
  gap: var(--icon-text-gap);
  min-height: calc(var(--icon-size) + 4px);
}

.list__row + .list__row {
  margin-top: var(--space-list-row);
}

.list__icon {
  flex: 0 0 var(--icon-size);
  width: var(--icon-size);
  height: var(--icon-size);
  object-fit: contain;
}

.link-underline {
  color: inherit;
  font-weight: var(--font-bold);
  font-size: var(--size-link);
  line-height: var(--lh-body);
  text-decoration: none;
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 1px;
}

.link-underline:hover {
  opacity: 0.85;
}

.phone-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--icon-text-gap);
  margin: var(--space-between-paragraphs) 0 0;
  font-weight: var(--font-bold);
  font-size: var(--size-phone-label);
  line-height: var(--lh-body);
}

.phone-line__icon {
  flex: 0 0 var(--icon-size);
  width: var(--icon-size);
  height: var(--icon-size);
  object-fit: contain;
}

.phone-line__label {
  margin-left: 2px;
}

.phone-line__number {
  font-size: var(--size-phone-num);
}

@media (max-width: 1100px) {
  :root {
    --space-page-x: 24px;
    --layout-gap: 40px;
  }

  .page__grid {
    grid-template-columns: 1fr;
  }

  .page__hero {
    position: static;
    justify-self: center;
    order: -1;
    margin-bottom: 32px;
  }

  .page__main {
    max-width: none;
  }
}

@media (max-width: 720px) {
  :root {
    --size-h1: 42px;
    --lh-h1: 1.15;
    --size-body: 16px;
    --lh-body: 26px;
    --size-lead: 16px;
    --lh-lead: 1.35;
    --size-link: 16px;
    --size-button: 16px;
    --hero-size: min(100vw - 48px, 427px);
  }

  .brand__mark {
    width: 140px;
  }
}