/* ============================================================
   hoenir land — стили
   цвета и типографика взяты из макета (figma KwXWC6BUjX0aKoaBa1hiDQ)
   ============================================================ */

:root {
  --dark: #242832;
  --slate: #3b4151;
  --light: #e2f1ff;
  --muted: #bbc7d3;
  --line: rgba(226, 241, 255, .18);

  --container: 1212px;
  --pad: 24px;

  --font-head: "Jura", "Trebuchet MS", sans-serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

  --h1: clamp(38px, 6.667vw, 96px);
  --h2: clamp(28px, 4.167vw, 60px);
  --h3: clamp(22px, 2.222vw, 32px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--dark);
  color: var(--light);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; border: 0; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  margin: 0;
  letter-spacing: -.05em;
  line-height: 1.13;
}

p { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--light);
  outline-offset: 4px;
}

/* ---------- общее ---------- */

.inner {
  width: 100%;
  max-width: calc(var(--container) + var(--pad) * 2);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 264px;
  height: 64px;
  padding: 0 16px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--light);
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
  transition: background .3s var(--ease), color .3s var(--ease);
}

.btn::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(226, 241, 255, .22);
  pointer-events: none;
  transition: border-color .3s var(--ease);
}

.btn:hover { background: #fff; }
.btn:hover::after { border-color: rgba(226, 241, 255, .5); }

.btn__icon { flex: none; }

.btn--light { color: var(--dark); }

/* ============================================================
   шапка
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-top: 12px;
  transition: background .35s var(--ease), padding .35s var(--ease), backdrop-filter .35s;
}

.nav.is-scrolled {
  padding-top: 0;
  background: rgba(36, 40, 50, .82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(226, 241, 255, .08);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: calc(var(--container) + var(--pad) * 2);
  margin: 0 auto;
  padding: 10px var(--pad);
}

.nav.is-scrolled .nav__inner { padding-top: 14px; padding-bottom: 14px; }

.nav__logo img { width: 237px; height: auto; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 42px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  position: relative;
  font-size: 16px;
  line-height: 1.5;
  color: var(--light);
  opacity: .92;
  transition: opacity .25s var(--ease);
}

.nav__link:hover,
.nav__link.is-active { opacity: 1; }

.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 28px;
  height: 4px;
  margin-left: -14px;
  background: var(--light);
}

.nav__phone {
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
  transition: opacity .25s var(--ease);
}

.nav__phone:hover { opacity: .7; }

.nav__cta {
  width: 150px;
  height: 32px;
  padding: 0 12px;
  gap: 12px;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.nav__cta::after { display: none; }

.nav__burger {
  display: none;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}

.nav__burger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--light);
  transition: transform .3s var(--ease), opacity .2s;
}

.nav__burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   главный экран
   ============================================================ */

.hero {
  position: relative;
  min-height: 849px;
  padding-top: 20px;
  background: var(--slate);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(226, 241, 255, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226, 241, 255, .03) 1px, transparent 1px);
  background-size: 113px 113px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(70% 70% at 50% 40%, #000 20%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(36, 40, 50, 0) 40%, rgba(36, 40, 50, .55) 100%);
  pointer-events: none;
}

.hero__decor {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 1440px;
  aspect-ratio: 1440 / 849;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}

.hero__decor img {
  position: absolute;
  height: auto;
}

.hero__glow { left: 24.44%; top: 11.19%; width: 57.36%; }
.hero__eye--main { left: 34.51%; top: 31.68%; width: 31.04%; }
.hero__eye--left { left: -10.76%; top: 64.9%; width: 29.38%; }
.hero__eye--right { left: 72.64%; top: -13.43%; width: 23.4%; }
.hero__runes { left: 31.46%; top: 26.15%; width: 36.46%; animation: spin 120s linear infinite; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: calc(var(--container) + var(--pad) * 2);
  margin: 0 auto;
  padding: 0 var(--pad);
  min-height: 829px;
}

.hero__title {
  margin-top: 119px;
  font-size: var(--h1);
  line-height: 1.083;
  letter-spacing: -.05em;
  text-align: center;
  text-shadow: 0 0 40px rgba(36, 40, 50, .45);
}

.hero__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-top: auto;
  padding-bottom: 103px;
}

.hero__lead {
  max-width: 335px;
  font-size: 20px;
  line-height: 1.4;
}

.hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 280px;
}

.competitors img { width: 280px; height: auto; }

/* ============================================================
   второй экран
   ============================================================ */

.intro {
  position: relative;
  min-height: 800px;
  padding: 0;
  overflow: hidden;
}

.intro__decor {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1440px;
  height: 800px;
  transform: translateX(-50%);
  pointer-events: none;
}

.intro__knot {
  position: absolute;
  left: 358px;
  top: 39px;
  width: 723px;
  opacity: .35;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

.intro__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(var(--container) + var(--pad) * 2);
  margin: 0 auto;
  padding: 225px var(--pad) 110px;
  text-align: center;
}

.intro__text {
  max-width: 620px;
  margin: 0 auto;
  font-size: 24px;
  line-height: 1.333;
}

.intro__text + .intro__text { margin-top: 32px; }

.intro__cta {
  position: absolute;
  left: 50%;
  margin-left: 338px;
  top: 610px;
}

/* ============================================================
   третий экран
   ============================================================ */

.pulse {
  position: relative;
  min-height: 800px;
  padding-bottom: 80px;
  overflow: hidden;
}

.pulse__eyes {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1440px;
  height: 800px;
  transform: translateX(-50%);
  pointer-events: none;
}

.pulse__eye { position: absolute; height: auto; }
.pulse__eye--orb { left: 873px; top: 146px; width: 507px; }
.pulse__eye--amber { left: 1363px; top: 0; width: 358px; opacity: .9; }
.pulse__eye--blue { left: 1250px; top: 577px; width: 358px; animation: float 16s ease-in-out infinite reverse; }

.pulse__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(var(--container) + var(--pad) * 2);
  margin: 0 auto;
  padding: 246px var(--pad) 0;
}

.pulse__title {
  font-size: var(--h2);
  line-height: 1.13;
  max-width: 650px;
  margin-left: 18px;
}

.pulse__lead {
  max-width: 665px;
  margin-top: 16px;
  margin-left: 18px;
  padding-left: 16px;
  border-left: 1px solid var(--line);
  font-size: 20px;
  line-height: 1.4;
}

.pulse__list {
  margin-top: 60px;
  max-width: 665px;
  margin-left: 18px;
}

.pulse__item { border-top: 1px solid transparent; }

.pulse__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  padding: 10px 0 10px 16px;
  text-align: left;
  border-left: 1px solid var(--line);
}

.pulse__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--h3);
  line-height: 1.25;
  letter-spacing: -.05em;
  transition: opacity .3s var(--ease);
  opacity: .55;
}

.pulse__item.is-open .pulse__name { opacity: 1; }
.pulse__head:hover .pulse__name { opacity: .85; }

.pulse__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
  margin-left: 0;
  border-left: 1px solid var(--line);
  padding-left: 16px;
}

.pulse__body > p {
  overflow: hidden;
  font-size: 20px;
  line-height: 1.4;
  color: var(--light);
}

.pulse__item.is-open .pulse__body { grid-template-rows: 1fr; }
.pulse__item.is-open .pulse__body > p { padding-bottom: 20px; }

/* ============================================================
   четвертый экран — карточки
   ============================================================ */

.graph {
  position: relative;
  min-height: 1287px;
  padding: 386px 0 200px;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--dark) 0, var(--dark) 236px, var(--slate) 236px);
}

.graph__ornament {
  position: absolute;
  top: -162px;
  left: calc(50% + 224px);
  width: 366px;
  opacity: .35;
  pointer-events: none;
}

.graph__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(var(--container) + var(--pad) * 2);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.graph__title {
  font-size: var(--h2);
  line-height: 1.13;
}

.graph__controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  font-size: 16px;
}

.graph__label { opacity: .9; }

.segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--light);
}

.segmented__opt {
  padding: 4px 12px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--dark);
  opacity: .55;
  transition: opacity .25s var(--ease), background .25s var(--ease);
}

.segmented__opt.is-active {
  opacity: 1;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(36, 40, 50, .06);
}

.graph__layout {
  display: grid;
  grid-template-columns: 800px 386px;
  gap: 34px;
  margin-top: 22px;
}

.cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 246px);
  gap: 31px;
  width: 800px;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, rgba(0, 0, 0, .15) 100%);
  mask-image: linear-gradient(to bottom, #000 88%, rgba(0, 0, 0, .15) 100%);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 234px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(94, 104, 130, .5), rgba(0, 0, 0, .35));
  box-shadow: inset 0 0 0 1px rgba(226, 241, 255, .07);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .55;
  background: radial-gradient(120% 90% at 20% 0%, var(--card-tint, rgba(109, 80, 89, .55)), transparent 60%);
  pointer-events: none;
}

.card > * { position: relative; }

.card--red { --card-tint: rgba(109, 80, 89, .65); --dot: #b3687b; }
.card--warn { --card-tint: rgba(109, 100, 80, .6); --dot: #b39b68; }
.card--good { --card-tint: rgba(80, 109, 90, .6); --dot: #68b383; }

.card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px rgba(226, 241, 255, .22);
}

.card__status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: -.03em;
  text-transform: lowercase;
  opacity: .8;
}

.card__status i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot);
}

.card__title {
  margin-top: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__text {
  margin-top: auto;
  font-size: 14px;
  line-height: 1.28;
  opacity: .85;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -.03em;
}

.card__score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.card__score i {
  width: 16px;
  height: 16px;
  display: block;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.card__score i[data-icon="bad"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Ccircle cx='9' cy='9.5' r='1.3'/%3E%3Ccircle cx='15' cy='9.5' r='1.3'/%3E%3Cpath d='M7.5 16c1.3-1.4 2.8-2 4.5-2s3.2.6 4.5 2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
}

.card__score i[data-icon="warn"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Ccircle cx='9' cy='9.5' r='1.3'/%3E%3Ccircle cx='15' cy='9.5' r='1.3'/%3E%3Cpath d='M8.5 15.5h7' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
}

.card__score i[data-icon="good"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Ccircle cx='9' cy='9.5' r='1.3'/%3E%3Ccircle cx='15' cy='9.5' r='1.3'/%3E%3Cpath d='M8 15c1.2 1.3 2.6 2 4 2s2.8-.7 4-2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
}

.cards__connector {
  position: absolute;
  left: 123px;
  width: 559px;
  pointer-events: none;
  opacity: .9;
}

.cards__connector--a { top: 234px; }
.cards__connector--b { top: 499px; }

/* вид «цепочка» */
.cards[data-view="chain"] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-mask-image: none;
  mask-image: none;
}

.cards[data-view="chain"] .card { height: auto; min-height: 150px; }

.cards[data-view="chain"] .cards__connector { display: none; }

.graph__text {
  max-width: 386px;
  font-size: 20px;
  line-height: 1.36;
  padding-top: 3px;
}

.graph__text p + p { margin-top: 20px; }

.market {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.market__label {
  font-size: 13px;
  letter-spacing: .02em;
  opacity: .5;
}

.market__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.4;
}

.market__list li:not(:last-child)::after {
  content: "·";
  margin: 0 8px;
  opacity: .4;
}

.market__list a {
  opacity: .8;
  border-bottom: 1px solid transparent;
  transition: opacity .2s var(--ease), border-color .2s var(--ease);
}

.market__list a:hover {
  opacity: 1;
  border-bottom-color: rgba(226, 241, 255, .5);
}

/* ============================================================
   пятый экран — как это работает
   ============================================================ */

.steps {
  position: relative;
  padding: 118px 0 0;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--slate) 0, var(--dark) 420px);
}

.steps__title {
  width: 100%;
  max-width: calc(var(--container) + var(--pad) * 2);
  margin: 0 auto;
  padding: 0 var(--pad);
  font-size: var(--h2);
  line-height: 1.13;
  text-align: center;
}

.steps__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 90px 120px;
  width: 100%;
  max-width: calc(var(--container) + var(--pad) * 2);
  margin: 150px auto 0;
  padding: 0 var(--pad) 111px;
  list-style: none;
}

.step {
  display: flex;
  gap: 16px;
  max-width: 573px;
}

.step:nth-child(even) { padding-top: 120px; }

.step__num {
  flex: none;
  font-size: 20px;
  line-height: 1.4;
  opacity: .7;
  padding-top: 6px;
}

.step__body {
  border-left: 1px solid var(--line);
  padding-left: 16px;
}

.step__body h3 {
  font-size: var(--h3);
  line-height: 1.25;
}

.step__body p {
  margin-top: 16px;
  font-size: 20px;
  line-height: 1.4;
  opacity: .85;
}

.steps__zigzag {
  position: absolute;
  left: 50%;
  top: 330px;
  width: 188%;
  max-width: 2706px;
  transform: translateX(-50%);
  opacity: .16;
  pointer-events: none;
}

/* ============================================================
   доступ и стоимость
   ============================================================ */

.access {
  position: relative;
  padding: 0 var(--pad);
  background: var(--dark);
}

.access__inner {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 243px 115px;
  color: var(--dark);
  background: var(--light);
  clip-path: polygon(
    68px 0, calc(100% - 68px) 0, 100% 68px,
    100% calc(100% - 68px), calc(100% - 68px) 100%, 68px 100%,
    0 calc(100% - 68px), 0 68px
  );
}

.access__row {
  display: grid;
  grid-template-columns: 693px 1fr;
  gap: 0 20px;
  align-items: start;
  padding-top: 24px;
  border-top: 1px solid rgba(36, 40, 50, .2);
}

.access__row + .access__row { margin-top: 36px; }

.access__row h2 {
  font-size: var(--h2);
  line-height: 1.18;
}

.access__row p {
  max-width: 487px;
  font-size: 20px;
  line-height: 1.4;
}

/* ============================================================
   подвал
   ============================================================ */

.footer {
  position: relative;
  padding: 150px 0 0;
  background: var(--slate);
  overflow: hidden;
}

.footer__bg {
  position: absolute;
  left: 50%;
  top: 0;
  width: 600px;
  height: 770px;
  margin-left: 210px;
  object-fit: cover;
  opacity: .55;
  pointer-events: none;
}

.footer__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(var(--container) + var(--pad) * 2);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.footer__title {
  font-size: var(--h2);
  line-height: 1.18;
}

.footer__text {
  max-width: 517px;
  margin-top: 16px;
  font-size: 20px;
  line-height: 1.4;
}

.contacts {
  display: grid;
  grid-template-columns: repeat(2, 312px);
  gap: 78px 0;
  margin-top: 80px;
}

.contacts__item:nth-child(3) { grid-row: 2; }

.contacts__label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.18;
  letter-spacing: -.05em;
}

.contacts__value {
  display: inline-block;
  margin-top: 16px;
  font-size: 20px;
  line-height: 1.4;
  transition: opacity .25s var(--ease);
}

.contacts__value:hover { opacity: .65; }

.footer__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  max-width: calc(var(--container) + var(--pad) * 2);
  margin: 150px auto 0;
  padding: 0 var(--pad);
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: .75;
  transition: opacity .25s var(--ease);
}

.footer__logo:hover { opacity: 1; }

.footer__logo span {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.09em;
}

.footer__dots { width: 115px; height: 25px; }

.footer__nav {
  display: flex;
  gap: 42px;
  font-size: 16px;
  line-height: 1.5;
}

.footer__nav a { opacity: .8; transition: opacity .25s var(--ease); }
.footer__nav a:hover { opacity: 1; }

.socials { display: flex; gap: 20px; }

.socials a {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  opacity: .8;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.socials a:hover { opacity: 1; transform: translateY(-2px); }
.socials svg { width: 20px; height: 20px; }

.footer__copy {
  position: relative;
  z-index: 2;
  padding: 56px 0 40px;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  opacity: .6;
}

/* ============================================================
   появление при скролле
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__runes, .intro__knot, .pulse__eye--blue { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ============================================================
   1440+
   ============================================================ */

@media (min-width: 1600px) {
  .hero { min-height: 920px; }
  .hero__inner { min-height: 900px; }
}

/* ============================================================
   планшет: 1200 и меньше
   ============================================================ */

@media (max-width: 1200px) {
  .nav.is-menu-open {
    backdrop-filter: none;
    background: transparent;
    box-shadow: none;
  }

  .nav__menu {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    padding: 0 40px;
    background: rgba(36, 40, 50, .97);
    backdrop-filter: blur(20px);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .45s var(--ease), opacity .35s var(--ease);
    z-index: 90;
  }

  .nav__menu.is-open {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .nav__list { flex-direction: column; align-items: flex-start; gap: 24px; }
  .nav__link { font-size: 24px; }
  .nav__burger { display: flex; position: relative; z-index: 95; }

  .hero { min-height: auto; padding-bottom: 0; }
  .hero__inner { min-height: 720px; }
  .hero__title { margin-top: 90px; }
  .hero__bottom { padding-bottom: 56px; }

  .intro { min-height: auto; padding-bottom: 90px; }
  .intro__inner { padding: 150px var(--pad) 0; }
  .intro__knot { left: 50%; width: 620px; margin-left: -310px; top: 20px; opacity: .3; }
  .intro__text { max-width: 620px; }
  .intro__cta { position: static; margin: 44px auto 0; }

  .pulse { min-height: auto; padding-bottom: 90px; }
  .pulse__inner { padding-top: 150px; }
  .pulse__title, .pulse__lead, .pulse__list { margin-left: 0; }
  .pulse__eyes {
    left: auto;
    right: 0;
    width: 62%;
    max-width: 760px;
    height: 100%;
    transform: none;
    opacity: .5;
  }
  .pulse__eye--orb { left: auto; right: -6%; top: 60px; width: 56%; }
  .pulse__eye--amber { left: auto; right: -14%; top: -40px; width: 34%; }
  .pulse__eye--blue { left: auto; right: 4%; top: 78%; width: 40%; }

  .graph { padding: 300px 0 120px; }
  .graph__layout { grid-template-columns: 1fr; gap: 48px; }
  .graph__text { max-width: 640px; }
  .graph__ornament { left: auto; right: -120px; opacity: .25; }
  .cards { width: 100%; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .cards__connector { display: none; }
  .card { height: auto; min-height: 220px; }

  .steps { padding-top: 110px; }
  .steps__list { margin-top: 90px; gap: 60px 48px; padding-bottom: 100px; }
  .step:nth-child(even) { padding-top: 60px; }

  .access__inner { padding: 120px 60px; }
  .access__row { grid-template-columns: 1fr; gap: 20px; }
  .access__row p { max-width: 560px; }

  .footer { padding-top: 110px; }
  .footer__bg { margin-left: 46%; width: 460px; height: 600px; opacity: .4; }
  .contacts { margin-top: 72px; }
  .footer__bar { margin-top: 90px; }
}

/* ============================================================
   мобилка: 760 и меньше
   ============================================================ */

@media (max-width: 760px) {
  :root { --pad: 17px; }

  body { font-size: 16px; line-height: 1.5; }

  .nav { padding-top: 8px; }
  .nav__logo img { width: 168px; }
  .nav__phone { display: none; }
  .nav__cta { width: 220px; height: 46px; padding: 0 16px; gap: 10px; }
  .nav__cta svg { width: 18px; }
  .nav__burger span { width: 22px; }
  .nav__burger { width: 22px; }

  /* главный экран */
  .hero { min-height: 0; padding-top: 8px; }
  .hero__inner { min-height: 0; padding-top: 40px; padding-bottom: 40px; }
  .hero__title {
    margin-top: 56px;
    font-size: 28px;
    line-height: 1.28;
    letter-spacing: -.04em;
    text-align: left;
  }
  .hero__decor { top: 0; height: 100%; aspect-ratio: auto; }
  .hero__lines { display: none; }
  .hero__glow { left: 10%; top: 12%; width: 120%; }
  .hero__eye--main { left: 32%; top: 15%; width: 62%; }
  .hero__eye--left { left: -26%; top: 42%; width: 55%; }
  .hero__eye--right { left: 74%; top: 2%; width: 44%; }
  .hero__runes { left: 18%; top: 10%; width: 72%; }

  .hero__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    margin-top: 140px;
    padding-bottom: 0;
  }

  .hero__lead { font-size: 16px; max-width: 260px; }
  .hero__aside { width: 100%; gap: 14px; }
  .competitors img { width: 100%; max-width: 290px; }
  .btn { width: 100%; max-width: 286px; height: 56px; font-size: 11px; }
  .btn::after { inset: -8px; }

  /* второй экран */
  .intro { padding-bottom: 70px; }
  .intro__inner { padding: 60px var(--pad) 0; text-align: left; }
  .intro__knot { width: 300px; margin-left: -150px; top: 0; opacity: .25; }
  .intro__text { font-size: 16px; line-height: 1.5; }
  .intro__text + .intro__text { margin-top: 24px; }
  .intro__cta { margin: 32px 0 0; }

  /* третий экран */
  .pulse { padding-bottom: 60px; }
  .pulse__inner { padding-top: 40px; }
  .pulse__eyes { position: relative; width: 100%; height: 300px; right: auto; margin-top: 30px; opacity: 1; }
  .pulse__eye--orb { left: auto; right: -12%; top: 0; width: 78%; }
  .pulse__eye--amber { left: auto; right: 44%; top: 150px; width: 40%; }
  .pulse__eye--blue { left: auto; right: -16%; top: 190px; width: 52%; }
  .pulse__title { font-size: 30px; line-height: 1.2; }
  .pulse__lead { font-size: 16px; margin-top: 14px; }
  .pulse__list { margin-top: 34px; }
  .pulse__name { font-size: 20px; }

  /* четвертый экран */
  .graph {
    padding: 90px 0 80px;
    background: linear-gradient(to bottom, var(--dark) 0, var(--dark) 60px, var(--slate) 60px);
  }
  .graph__title { font-size: 28px; line-height: 1.28; }
  .graph__controls { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 20px; font-size: 15px; }
  .graph__layout { margin-top: 20px; gap: 32px; }
  .cards { grid-template-columns: 1fr; gap: 12px; -webkit-mask-image: none; mask-image: none; }
  .card { min-height: 0; padding: 14px; }
  .card__title { font-size: 15px; }
  .card__text { font-size: 13px; margin-top: 12px; -webkit-line-clamp: 4; }
  .graph__text { font-size: 16px; line-height: 1.5; }
  .graph__text p + p { margin-top: 14px; }
  .graph__ornament { display: none; }

  /* шаги */
  .steps { padding-top: 70px; }
  .steps__title { font-size: 28px; line-height: 1.28; text-align: left; }
  .steps__list {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-top: 36px;
    padding-bottom: 60px;
  }
  .step, .step:nth-child(even) { padding-top: 0; max-width: none; }
  .step__body h3 { font-size: 20px; }
  .step__body p { margin-top: 10px; font-size: 16px; }
  .steps__zigzag { width: 320%; top: 300px; opacity: .14; }

  /* доступ */
  .access { padding: 0; }
  .access__inner {
    padding: 60px 22px;
    clip-path: polygon(32px 0, calc(100% - 32px) 0, 100% 32px, 100% calc(100% - 32px), calc(100% - 32px) 100%, 32px 100%, 0 calc(100% - 32px), 0 32px);
  }
  .access__row { padding-top: 18px; }
  .access__row + .access__row { margin-top: 24px; }
  .access__row h2 { font-size: 26px; line-height: 1.2; }
  .access__row p { font-size: 16px; }

  /* подвал */
  .footer { padding-top: 70px; }
  .footer__bg { width: 300px; height: 380px; margin-left: 32%; opacity: .25; }
  .footer__title { font-size: 28px; line-height: 1.2; }
  .footer__text { font-size: 16px; margin-top: 14px; }
  .contacts { grid-template-columns: 1fr; gap: 26px; margin-top: 40px; }
  .contacts__item:nth-child(3) { grid-row: auto; }
  .contacts__label { font-size: 18px; }
  .contacts__value { margin-top: 8px; font-size: 16px; }
  .footer__bar { flex-direction: column; align-items: flex-start; gap: 22px; margin-top: 50px; }
  .footer__nav { flex-wrap: wrap; gap: 14px 22px; font-size: 14px; }
  .footer__logo span { font-size: 32px; }
  .footer__dots { width: 92px; height: 20px; }
  .footer__copy { padding: 28px 0 26px; text-align: left; font-size: 12px; }
}