:root {
  color-scheme: dark;
  --ink: #f4ebff;
  --button-top: #efe2ff;
  --button-bottom: #d7b6ff;
  --violet-deep: #5a3bca;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  background: #000;
  color: var(--ink);
  font-family: Rubik, Arial, sans-serif;
}

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

/* Последние 100svh — выход: экран с инструментами стоит на месте,
   а блок тарифов наезжает на него снизу (см. .pricing margin-top). */
.experience {
  position: relative;
  height: 700svh;
}

.viewport {
  position: sticky;
  z-index: 0;
  top: 0;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

.stage {
  container-type: size;
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

.glow {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}

/* Шапка вынесена из .stage, чтобы прилипать над всеми блоками.
   Геометрия та же — экран 100svh с container-type: size, поэтому
   проценты и cqw у меню считаются как раньше. */
.site-header {
  container-type: size;
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  width: 100vw;
  height: 100svh;
  pointer-events: none;
}

.site-header :is(.nav, .account) { pointer-events: auto; }

/* Логотип появляется, когда первый экран уходит (класс ставит script.js).
   Отступ слева равен правому отступу у «Пробного доступа» — 1.25cqw,
   по вертикали выровнен с кнопками аккаунта. 2.2222cqw = 32px при ширине макета 1440. */
.brand {
  position: absolute;
  z-index: 20;
  top: 2.5%;
  left: 1.25cqw;
  display: flex;
  height: 4.875%;
  align-items: center;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-.5cqw);
  pointer-events: none;
  transition:
    opacity 560ms cubic-bezier(.16, 1, .3, 1),
    filter 560ms cubic-bezier(.16, 1, .3, 1),
    transform 560ms cubic-bezier(.16, 1, .3, 1);
}

.brand :is(img, svg) {
  display: block;
  width: auto;
  height: 2.2222cqw;
}

.site-header.is-scrolled .brand {
  opacity: 1;
  filter: blur(0);
  transform: none;
  pointer-events: auto;
}

.nav {
  position: absolute;
  z-index: 20;
  top: 2.5%;
  left: 41.6667%;
  display: flex;
  width: 16.6667%;
  height: 4.25%;
  gap: .2778cqw;
  align-items: center;
  padding: .2778cqw;
  border-radius: .8333cqw;
  transition: filter 560ms cubic-bezier(.16, 1, .3, 1), opacity 560ms cubic-bezier(.16, 1, .3, 1);
}

/* Подложка меню — отдельным слоем, чтобы размывать её без активного пункта. */
.nav::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  content: "";
  background: rgba(244, 235, 255, .1);
  transition: filter 560ms cubic-bezier(.16, 1, .3, 1), opacity 560ms cubic-bezier(.16, 1, .3, 1);
}

.nav a {
  position: relative;
  display: grid;
  height: 1.8056cqw;
  place-items: center;
  padding: 0 .5556cqw;
  border-radius: .5556cqw;
  background: rgba(244, 235, 255, .1);
  font-size: .9722cqw;
  font-weight: 400;
  line-height: 1;
  backdrop-filter: blur(.6944cqw);
  transition: filter 560ms cubic-bezier(.16, 1, .3, 1), opacity 560ms cubic-bezier(.16, 1, .3, 1);
}

.nav a:nth-child(1) { width: 5.1389cqw; }
.nav a:nth-child(2) { width: 4.7917cqw; }
.nav a:nth-child(3) { width: 5.625cqw; }

.account {
  position: absolute;
  z-index: 20;
  top: 2.5%;
  left: 82.5694%;
  display: flex;
  width: 16.1806%;
  height: 4.875%;
  gap: .2778cqw;
  align-items: center;
  transition: filter 560ms cubic-bezier(.16, 1, .3, 1), opacity 560ms cubic-bezier(.16, 1, .3, 1);
}

.login {
  position: relative;
  display: grid;
  width: 5cqw;
  height: 2.4306cqw;
  place-items: center;
  border-radius: .5556cqw;
  font-size: 1.1111cqw;
  font-weight: 400;
  line-height: 1;
  transition: filter 560ms cubic-bezier(.16, 1, .3, 1), opacity 560ms cubic-bezier(.16, 1, .3, 1);
}

.trial {
  position: relative;
  display: grid;
  width: 10.9028cqw;
  height: 2.7083cqw;
  place-items: center;
  border: .1389cqw solid rgba(108, 67, 255, .3);
  border-radius: .5556cqw;
  color: var(--violet-deep);
  background: linear-gradient(180deg, var(--button-top), var(--button-bottom));
  font-size: 1.1111cqw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  backdrop-filter: blur(.6944cqw);
  transition: filter 560ms cubic-bezier(.16, 1, .3, 1), opacity 560ms cubic-bezier(.16, 1, .3, 1);
}

.site-header:has(:is(.brand, .nav a, .login, .trial):is(:hover, :focus-visible))
  :is(.nav a, .login, .trial):not(:hover):not(:focus-visible),
.site-header.is-scrolled:has(:is(.brand, .nav a, .login, .trial):is(:hover, :focus-visible)) .brand:not(:hover):not(:focus-visible),
.site-header:has(:is(.brand, .nav a, .login, .trial):is(:hover, :focus-visible)) .nav::before {
  opacity: .5;
  filter: blur(4px);
}

.site-header :is(.nav a, .login, .trial):is(:hover, :focus-visible) {
  z-index: 1;
  opacity: 1;
  filter: blur(0);
}

.hero-copy {
  position: absolute;
  z-index: 3;
  /* Блок стоит по центру пустого пространства внутри орбиты: между нижним краем
     дальних карточек и верхним краем ближних. 5.07cqw — половина высоты
     содержимого, .39cqw — поправка на то, что ближние карточки крупнее дальних
     (масштаб 1 против .82 при высоте карточки 8.75cqw). */
  top: calc(50% - 5.07cqw - .39cqw);
  left: 38.9583%;
  width: 22.1528%;
  height: 17.625%;
  text-align: center;
  transition: filter 640ms cubic-bezier(.16, 1, .3, 1), opacity 640ms cubic-bezier(.16, 1, .3, 1);
}

.cup-mark {
  position: absolute;
  top: 0;
  left: 9.9653cqw;
  width: 2.2222cqw;
  height: 2.7778cqw;
}

h1 {
  position: absolute;
  top: 4.4444cqw;
  left: 1.3194cqw;
  width: 19.5139cqw;
  margin: 0;
  color: #fff;
  font-size: 1.6667cqw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  text-align: center;
}

.hero-copy p {
  position: absolute;
  top: 9.0278cqw;
  left: 0;
  width: 22.1528cqw;
  margin: 0;
  color: var(--ink);
  font-size: 1.1111cqw;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.primary-cta {
  position: absolute;
  z-index: 3;
  top: 88.5%;
  left: 43.5417%;
  display: flex;
  width: 12.9861%;
  height: 6.5%;
  gap: .5556cqw;
  align-items: center;
  justify-content: center;
  border: .1389cqw solid rgba(108, 67, 255, .3);
  border-radius: .5556cqw;
  background: linear-gradient(180deg, var(--button-top), var(--button-bottom));
  box-shadow: 0 .2778cqw 2.7778cqw rgba(244, 235, 255, .3);
}

/* Свечение кнопок — как в Figma, фрейм «Hover Button» (9:637).
   Поверх кнопки лежит её копия: заливка #ac77f0 → #411675, Layer blur 80
   и режим Linear Dodge. В CSS это ::after с blur(40px) — у Figma радиус
   размытия вдвое больше CSS-значения — и mix-blend-mode: plus-lighter:
   копия добавляет свет, поэтому сама кнопка светлеет, а вокруг — фиолетовый ореол.
   --glow-blur — 40px макета: в cqw для шапки и первого экрана, в --px для тарифов. */
:is(.primary-cta, .trial, .plan__button, .signup__submit, .footer__cta) {
  --glow-blur: 2.7778cqw;
}

:is(.primary-cta, .trial, .plan__button, .signup__submit, .footer__cta)::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
  opacity: 0;
  background: linear-gradient(180deg, #ac77f0, #411675);
  filter: blur(var(--glow-blur));
  mix-blend-mode: plus-lighter;
  transform: scale(.8);
  transition: opacity 640ms cubic-bezier(.16, 1, .3, 1), transform 640ms cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

:is(.primary-cta, .trial, .plan__button, .signup__submit, .footer__cta):is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: none;
}

.stage:has(.primary-cta:is(:hover, :focus-visible)) .hero-copy,
.stage:has(.primary-cta:is(:hover, :focus-visible)) .orbit-scene {
  opacity: .5;
  filter: blur(10px);
}

body:has(.primary-cta:is(:hover, :focus-visible)) .nav,
body:has(.primary-cta:is(:hover, :focus-visible)) .account {
  opacity: .5;
  filter: blur(4px);
}

.primary-cta img { width: 1.6667cqw; height: 1.6667cqw; }

/* Подсказка «листайте вниз» — только на телефоне (mobile.css). */
.scroll-hint { display: none; }

.primary-cta span {
  color: var(--violet-deep);
  font-size: 1.3889cqw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
}

.orbit-scene {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transition: filter 640ms cubic-bezier(.16, 1, .3, 1), opacity 640ms cubic-bezier(.16, 1, .3, 1);
}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
}

.orbit-card {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 14cqw;
  height: 8.75cqw;
  flex-direction: column;
  gap: .6em;
  overflow: hidden;
  padding: .9em 1.05em 1em;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: .7em;
  opacity: 0;
  color: #fafafa;
  background: linear-gradient(180deg, #121212 0%, #0a0a0a 100%);
  box-shadow: 0 1.1111cqw 3.3333cqw rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
  /* 1em = 1/16 ширины карточки: всё содержимое масштабируется вместе с ней. */
  font-family: Geist, Rubik, system-ui, sans-serif;
  font-size: .875cqw;
  line-height: 1.25;
  text-align: left;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  transition: border-color 300ms ease, box-shadow 300ms ease;
  will-change: transform, opacity;
}

.feature-layer {
  position: absolute;
  z-index: 10;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.feature-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .88);
  opacity: 0;
  -webkit-backdrop-filter: blur(60px);
  backdrop-filter: blur(60px);
  will-change: opacity;
}

/* Мобильный Safari не вытягивает размытие фона на весь экран, да и стоит оно
   дорого — на тач-устройствах просто затемнение. */
@media (hover: none) and (pointer: coarse) {
  .feature-scrim { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.feature-panel {
  position: absolute;
  inset: 0;
  transform: translate3d(0, 100%, 0);
  will-change: transform;
}

.feature-menu {
  position: absolute;
  top: 43.5%;
  left: 1.5278%;
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
  gap: min(1.1111cqw, 2cqh);
  list-style: none;
}

.feature-menu li {
  display: flex;
  min-height: min(.5556cqw, 1cqh);
  gap: min(1.5278cqw, 2.75cqh);
  align-items: center;
  color: rgba(255, 255, 255, .3);
  font-size: min(.8333cqw, 1.5cqh);
  font-weight: 400;
  line-height: 1;
  filter: blur(min(.0694cqw, .125cqh));
  transition: color 180ms ease, filter 180ms ease;
}

.feature-menu li span {
  width: min(.5556cqw, 1cqh);
  height: min(.5556cqw, 1cqh);
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.feature-menu li.is-active {
  color: rgba(255, 255, 255, .8);
  filter: none;
}

.feature-stack {
  position: absolute;
  top: 16.75%;
  left: 50%;
  width: min(55.5556cqw, 100cqh);
  transform: translate3d(-50%, 0, 0);
  will-change: transform;
}

.feature-content {
  position: relative;
  width: 100%;
  height: 100cqh;
  text-align: center;
}

.feature-content h2 {
  margin: 0;
  color: #fff;
  font-size: min(2.5cqw, 4.5cqh);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
}

.feature-content p {
  min-height: min(3.6111cqw, 6.5cqh);
  margin: min(1.1111cqw, 2cqh) 0 min(1.9444cqw, 3.5cqh);
  color: rgba(255, 255, 255, .8);
  font-size: min(1.3889cqw, 2.5cqh);
  font-weight: 400;
  line-height: 1.3;
}

.feature-preview {
  display: block;
  width: 100%;
  aspect-ratio: 800 / 477;
  border-radius: min(.5556cqw, 1cqh);
  object-fit: cover;
}

/* ---------- Блок 3 · Тарифы ----------
   Тот же подход, что у первого экрана: макет 1440px, масштаб через cqw.
   --px — один пиксель макета, поэтому размеры читаются как в Figma. */

.pricing {
  --px: calc(100cqw / 1440);
  --muted: rgba(244, 235, 255, .58);
  --line: rgba(244, 235, 255, .08);
  --glass: rgba(244, 235, 255, .04);
  --ease: cubic-bezier(.16, 1, .3, 1);

  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  margin-top: -100svh;
  padding: calc(var(--px) * 160) calc(var(--px) * 20) calc(var(--px) * 180);
  background: #000;
}

/* Контейнер нужен, чтобы 100cqw внутри считались от ширины секции. */
main { container-type: inline-size; }

.pricing__glow {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse 38% 22% at 50% 0%, rgba(215, 182, 255, .12), transparent 72%),
    radial-gradient(ellipse 30% 34% at 50% 62%, rgba(108, 67, 255, .12), transparent 76%);
  pointer-events: none;
}

.pricing__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(var(--px) * 56);
  text-align: center;
}

.pricing__head h2 {
  margin: 0;
  color: #fff;
  font-size: calc(var(--px) * 36);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
}

.pricing__head p {
  margin: calc(var(--px) * 16) 0 0;
  color: rgba(255, 255, 255, .8);
  font-size: calc(var(--px) * 20);
  font-weight: 400;
  line-height: 1.3;
}

.plans {
  display: grid;
  grid-template-columns: repeat(3, calc(var(--px) * 328));
  gap: calc(var(--px) * 8);
  justify-content: center;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: calc(var(--px) * 24);
  border: 1px solid var(--line);
  border-radius: calc(var(--px) * 12);
  background: var(--glass);
  backdrop-filter: blur(calc(var(--px) * 12));
  transition: filter 560ms var(--ease), opacity 560ms var(--ease), transform 560ms var(--ease), border-color 560ms var(--ease);
}

.plan--accent {
  border-color: rgba(215, 182, 255, .28);
  background:
    linear-gradient(180deg, rgba(108, 67, 255, .18), rgba(108, 67, 255, .04) 60%),
    var(--glass);
  box-shadow: 0 calc(var(--px) * 4) calc(var(--px) * 40) rgba(108, 67, 255, .18);
}

.plan__badge {
  position: absolute;
  top: calc(var(--px) * -12);
  left: 50%;
  display: grid;
  height: calc(var(--px) * 24);
  place-items: center;
  padding: 0 calc(var(--px) * 10);
  border: 1px solid rgba(108, 67, 255, .3);
  border-radius: calc(var(--px) * 6);
  color: var(--violet-deep);
  background: linear-gradient(180deg, var(--button-top), var(--button-bottom));
  font-size: calc(var(--px) * 12);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  transform: translateX(-50%);
}

.plan__head h3 {
  margin: 0;
  color: #fff;
  font-size: calc(var(--px) * 24);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
}

.plan__head p {
  min-height: calc(var(--px) * 40);
  margin: calc(var(--px) * 12) 0 0;
  color: var(--muted);
  font-size: calc(var(--px) * 16);
  line-height: 1.25;
}

.plan__metric {
  display: flex;
  align-items: baseline;
  gap: calc(var(--px) * 6);
  margin: calc(var(--px) * 32) 0 calc(var(--px) * 24);
  padding-top: calc(var(--px) * 24);
  border-top: 1px solid var(--line);
}

.plan__metric small,
.plan__metric span {
  color: var(--muted);
  font-size: calc(var(--px) * 16);
  line-height: 1;
}

.plan__metric strong {
  color: #fff;
  font-size: calc(var(--px) * 48);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.04em;
}

/* Вторичная кнопка — стекло, как пункты навигации. Главная — градиент, как «Пробный доступ». */
.plan__button {
  position: relative;
  display: grid;
  height: calc(var(--px) * 44);
  place-items: center;
  border: 1px solid var(--line);
  border-radius: calc(var(--px) * 8);
  color: var(--ink);
  background: rgba(244, 235, 255, .1);
  font-size: calc(var(--px) * 16);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  --glow-blur: calc(var(--px) * 40);
  transition: background-color 560ms var(--ease);
}

.plan__button:is(:hover, :focus-visible) { background: rgba(244, 235, 255, .16); }

.plan--accent .plan__button {
  border: calc(var(--px) * 2) solid rgba(108, 67, 255, .3);
  color: var(--violet-deep);
  background: linear-gradient(180deg, var(--button-top), var(--button-bottom));
  box-shadow: 0 calc(var(--px) * 4) calc(var(--px) * 40) rgba(244, 235, 255, .3);
}


.plan__button:focus-visible { outline: calc(var(--px) * 2) solid var(--button-bottom); outline-offset: calc(var(--px) * 2); }

.plan__features {
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 14);
  margin: calc(var(--px) * 28) 0 0;
  padding: 0;
  list-style: none;
}

.plan__features li {
  display: flex;
  gap: calc(var(--px) * 10);
  align-items: flex-start;
  color: rgba(255, 255, 255, .8);
  font-size: calc(var(--px) * 16);
  line-height: 1.25;
}

.plan__icon {
  width: calc(var(--px) * 16);
  height: calc(var(--px) * 16);
  flex: 0 0 auto;
  margin-top: calc(var(--px) * 2);
  fill: none;
  stroke: var(--button-bottom);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan__features li.is-lead { color: #fff; font-weight: 500; }
.plan__features li.is-off { color: rgba(244, 235, 255, .3); }
.plan__features li.is-off .plan__icon { stroke: rgba(244, 235, 255, .3); }

/* Фирменный приём шапки: в фокусе одна карточка, соседние уходят в размытие. */
@media (hover: hover) {
  .plans:has(.plan:hover) .plan:not(:hover) {
    opacity: .5;
    filter: blur(4px);
  }
}

/* Появление: из размытия снизу вверх, как выезжает панель возможностей.
   Анимацией, а не transition — чтобы наведение на карточки жило со своим таймингом. */
.pricing [data-reveal]:not(.is-visible) { opacity: 0; }

.pricing [data-reveal].is-visible {
  animation: pricing-reveal 900ms var(--ease) backwards;
}

.plans .plan:nth-child(2) { animation-delay: 90ms; }
.plans .plan:nth-child(3) { animation-delay: 180ms; }

@keyframes pricing-reveal {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(0, calc(var(--px) * 40), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing [data-reveal] { opacity: 1 !important; animation: none !important; }
}

/* Узкие экраны: макет перестаёт масштабироваться, карточки встают в колонку. */
@media (max-width: 900px) {
  .pricing { --px: 1px; padding: 96px 16px 112px; }
  .plans { grid-template-columns: minmax(0, 420px); gap: 24px; }
  .plan__head p { min-height: 0; }
}