@font-face {
  font-family: "NeueHaas";
  src: url("./Neue Haas Grotesk Display Pro 65 Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --text: #000000;
  --font-main: "NeueHaas", "Segoe UI", "Inter", "Arial", "Helvetica", sans-serif;
  --ui-scale: 1.6;
}

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

html,
body {
  margin: 0;
  height: 100%;
  color: var(--text);
  background: var(--bg);
}

html {
  font-family: var(--font-main) !important;
}

body {
  padding: 0;
}

.frame {
  position: relative;
  width: calc(100vw / var(--ui-scale));
  height: calc(100vh / var(--ui-scale));
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: var(--bg);
  overflow: auto;
  zoom: var(--ui-scale);
  transform-origin: top left;
}

.focus-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #000000;
  display: none;
  pointer-events: none;
}

.topbar,
.bottombar {
  position: absolute;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  left: 14px;
  right: 14px;
}

.lang {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
}

.corner-block {
  max-width: none;
}

.corner-about {
  text-align: left;
}

.corner-contact {
  text-align: right;
  margin-left: auto;
}

.topbar {
  top: 14px;
}

.bottombar {
  bottom: 14px;
}

.content {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  pointer-events: none;
}

.hero {
  margin: 0;
  white-space: nowrap;
  font-size: clamp(16px, 2.1vw, 30px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}

.caret {
  display: inline-block;
  margin-left: 2px;
  animation: blink 0.9s steps(1) infinite;
}

.page-title {
  margin: 0;
  font-size: clamp(16px, 2.1vw, 30px);
  line-height: 1;
  font-weight: 400;
}

.page-text {
  margin: 4px 0 0;
  font-size: clamp(16px, 2.1vw, 30px);
  line-height: 1;
  font-weight: 400;
}

.corner-contact .page-title {
  margin-bottom: 10px;
}

.corner-contact .title-line {
  display: block;
  white-space: nowrap;
}

.corner-about .page-title,
.corner-about .page-text {
  font-size: clamp(16px, 2.1vw, 30px);
  line-height: 1;
  white-space: nowrap;
}

.contact-links {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin-top: 0;
  width: max-content;
  margin-left: auto;
}

.phone-link,
.telegram-link {
  position: relative;
  z-index: 9999;
  color: var(--text);
  text-decoration: none;
  display: inline-block;
  font-size: clamp(14px, 1.6vw, 24px);
  line-height: 1;
  padding: 0;
  text-align: right;
  white-space: nowrap;
}

.telegram-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.phone-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.focus-phone .focus-overlay,
body.focus-telegram .focus-overlay {
  display: block;
}

body.focus-phone .corner-contact,
body.focus-telegram .corner-contact {
  z-index: 9999;
}

body.focus-phone #contactHeading,
body.focus-phone #telegramLink,
body.focus-telegram #contactHeading,
body.focus-telegram #phoneLink {
  visibility: hidden;
}

body.focus-phone #phoneLink,
body.focus-telegram #telegramLink,
body.focus-phone #phoneLink:visited,
body.focus-telegram #telegramLink:visited {
  visibility: visible;
  color: #ffffff !important;
}

.year {
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 400;
}

.lang {
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 400;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lang.is-active {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* Телефоны, iPad (включая Pro до 1366px по ширине), узкие окна: центр + углы, без zoom */
@media (max-width: 1366px) {
  html {
    height: 100%;
    height: -webkit-fill-available;
  }

  body {
    min-height: 100%;
    min-height: -webkit-fill-available;
  }

  .frame {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    height: auto;
    margin: 0;
    zoom: 1;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .topbar,
  .bottombar {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
  }

  .topbar {
    top: max(12px, env(safe-area-inset-top));
  }

  .bottombar {
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .content {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  /* Главная строка по центру, один визуальный ряд как на десктопе */
  .hero {
    white-space: nowrap;
    font-size: clamp(11px, min(3.4vw, 2.8vh), 20px);
    line-height: 1.05;
    max-width: min(94vw, 100%);
    margin-left: auto;
    margin-right: auto;
  }

  .page-title,
  .page-text {
    font-size: clamp(12px, min(3.2vw, 2.6vh), 20px);
  }

  .corner-about .page-title,
  .corner-about .page-text {
    font-size: clamp(12px, min(3.2vw, 2.6vh), 20px);
  }

  .phone-link,
  .telegram-link {
    font-size: clamp(11px, min(2.9vw, 2.4vh), 18px);
  }

  .year,
  .lang {
    font-size: clamp(12px, min(2.8vw, 2.3vh), 17px);
  }
}

/* Смартфоны: делаем шрифты заметно крупнее */
@media (max-width: 768px) {
  .hero {
    font-size: clamp(18px, 5.8vw, 34px);
    max-width: 96vw;
  }

  .page-title,
  .page-text,
  .corner-about .page-title,
  .corner-about .page-text {
    font-size: clamp(16px, 4.9vw, 28px);
  }

  .phone-link,
  .telegram-link {
    font-size: clamp(15px, 4.6vw, 24px);
  }

  .year,
  .lang {
    font-size: clamp(14px, 4.1vw, 22px);
  }
}

/* Очень узкие экраны: немного ужимаем только центральную строку */
@media (max-width: 380px) {
  .hero {
    font-size: clamp(14px, 5.2vw, 24px);
  }
}