/* ============================================================
   Puws.Cloud — Хостинг под любые задачи
   ============================================================ */

@font-face {
  font-family: 'FindSans Pro';
  src: url('../FindSansPro-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FindSans Pro';
  src: url('../FindSansPro-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Onest';
  src: url('../Onest-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:          #060606;
  --bg-frame:    #0C0D09;
  --acid:        #CCF904;   /* фирменный лайм из фигмы */
  --acid-bright: #DEFF57;
  --acid-dim:    rgba(204, 249, 4, .16);
  --white:       #F4F6EE;
  --text-dim:    #8B9078;
  --circle-bg:   #292A26;
  --circle-bg-h: #34352F;
  --circle-icon: #E9EAE4;
  --corner:      #CCF904;
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }
html { background: #060606; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: 'FindSans Pro', 'Roboto Flex', system-ui, -apple-system, sans-serif;
  font-optical-sizing: auto;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-loading { overflow: hidden; }

button { font: inherit; border: 0; background: none; color: inherit; cursor: pointer; }
img { display: block; }

::selection { background: var(--acid); color: #0A0B07; }

/* ---------- фон: слабая фактура + радиальные дымки ---------- */

.grain {
  position: absolute;
  top: calc(-4vh - 50px);
  top: calc(-4svh - 50px);
  left: 0;
  right: 0;
  height: calc(104vh + 100px);
  height: calc(104svh + 100px);
  pointer-events: none;
  z-index: 60;
  opacity: .012;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ambient {
  position: absolute;
  top: -4vh;
  top: -4svh;
  left: 0;
  right: 0;
  height: 104vh;
  height: 104svh;
  pointer-events: none;
  z-index: 0;
  /* Четыре плоские Figma-заливки; альфа уже учитывает
     10% общей прозрачности слоя Background. */
  background:
    radial-gradient(46% 38% at 54% 25%, rgba(255, 255, 255, .006), rgba(255, 255, 255, 0) 100%),
    radial-gradient(34% 45% at 51% 53%, rgba(204, 249, 4, .10), rgba(204, 249, 4, 0) 100%),
    radial-gradient(50% 60% at 78% 25%, rgba(204, 249, 4, .05), rgba(204, 249, 4, 0) 100%),
    radial-gradient(54% 44% at 14% 70%, rgba(204, 249, 4, .03), rgba(204, 249, 4, 0) 100%);
}

.ambient::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(to bottom, rgba(6, 6, 6, 0), #060606 90%);
}

/* ---------- preloader ---------- */

.preloader {
  position: fixed; inset: 0;
  z-index: 100;
  display: grid; place-items: center;
  background: #060704;
}

.preloader__inner { display: grid; justify-items: center; gap: 18px; }

.preloader__mark {
  width: 64px; height: 64px;
}

.preloader__word {
  font-family: 'Google Sans Flex', 'Roboto Flex', sans-serif;
  font-size: 19px;
  font-weight: 600;
  font-stretch: 116%;
  font-variation-settings: 'wdth' 116;
  letter-spacing: -.04em;
  color: var(--acid);
}

.preloader__track {
  width: 132px; height: 2px;
  margin-top: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.preloader__bar {
  display: block;
  width: 100%; height: 100%;
  border-radius: 2px;
  background: var(--acid);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---------- каркас страницы ---------- */

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(18px, 3vh, 34px) 20px clamp(26px, 4.5vh, 52px);
}

/* Пока не загрузился JS/GSAP — прячем то, что будет анимироваться */
.page .brand,
.page .hl-line,
.page .tab,
.page .tabs__ring,
.page .media,
.page .btn,
.sect .hl-line,
.sect__label,
.sect__sticker,
.fcard,
.fcard__title,
.fcard__sub,
.fring { opacity: 0; }

.no-gsap .page .brand,
.no-gsap .page .hl-line,
.no-gsap .page .tab,
.no-gsap .page .tabs__ring,
.no-gsap .page .media,
.no-gsap .page .btn,
.no-gsap .sect .hl-line,
.no-gsap .sect__label,
.no-gsap .sect__sticker,
.no-gsap .fcard,
.no-gsap .fcard__title,
.no-gsap .fcard__sub { opacity: 1; }
.no-gsap .preloader { display: none; }
.no-gsap body.is-loading { overflow: auto; }

/* статичный фолбэк без GSAP: рамка активной карточки */
.no-gsap .fring { display: none; }
.no-gsap .fcard.is-active { box-shadow: inset 0 0 0 2px var(--acid); }

/* ---------- шапка ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  will-change: transform;
}

.brand__badge { display: grid; place-items: center; }

.brand__badge img {
  width: 40px; height: 40px;
}

.brand__name {
  /* по фигме: Google Sans Flex, wdth 116, 22px, letter-spacing −4% */
  font-family: 'Google Sans Flex', 'Roboto Flex', sans-serif;
  font-size: 22px;
  font-weight: 600;
  font-stretch: 116%;
  font-variation-settings: 'wdth' 116;
  line-height: normal;
  letter-spacing: -.04em;
  color: var(--acid);
}

/* ---------- hero ---------- */

.hero {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero__title {
  margin-top: clamp(10px, 3.2vh, 40px);
  text-align: center;
  font-family: 'FindSans Pro', 'Roboto Flex', system-ui, sans-serif;
  font-size: clamp(38px, 6.8vh, 66px);
  font-weight: 700;   /* FindSansPro-Bold — только для главного заголовка */
  line-height: 1.03;
  letter-spacing: -.02em;
  color: var(--white);
}

.hl-mask {
  display: block;
  overflow: hidden;
  padding: 0 .14em .12em;
  margin: 0 -.14em -.12em;
}

.hl-line {
  display: block;
  will-change: transform;
}

/* ---------- табы-иконки ---------- */

.tabs {
  position: relative;
  display: flex;
  gap: 10px;
  margin-top: clamp(22px, 4.6vh, 56px);
  flex-wrap: wrap;
  justify-content: center;
}

.tab {
  position: relative;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.tab__circle {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tab-size, 52px);
  height: var(--tab-size, 52px);
  border-radius: 50%;
  background: var(--circle-bg);
  transition:
    background .45s var(--ease-out),
    transform  .45s var(--ease-spring),
    box-shadow .45s var(--ease-out);
  overflow: visible;
}

.tab:not(.is-active):hover .tab__circle {
  background: var(--circle-bg-h);
  transform: scale(1.09);
}

/* активный раздел, как в референсе: размер НЕ меняется, заливки нет —
   только лаймовое кольцо-контур (едет отдельным элементом) и лаймовая иконка */
.tab.is-active { z-index: 3; }

.tab.is-active .tab__circle,
.tab.is-active:hover .tab__circle {
  background: transparent;
}

.tab__icon {
  width: 24px; height: 24px;
  background-color: var(--circle-icon);
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
          mask-position: center;         mask-size: contain;         mask-repeat: no-repeat;
  transition: background-color .45s var(--ease-out);
}

.tab:hover .tab__icon { background-color: #FFFFFF; }
.tab.is-active .tab__icon { background-color: var(--acid); }

/* скользящее кольцо активного таба */
.tabs__ring {
  position: absolute;
  top: 0; left: 0;
  z-index: 4;                       /* кольцо — над всем рядом кружков */
  width: var(--tab-size, 52px);
  height: var(--tab-size, 52px);
  border-radius: 50%;
  border: 2px solid var(--acid);    /* stroke weight 2 из фигмы */
  pointer-events: none;
  will-change: transform;
}

/* волна при клике */
.tab .ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--acid);
  pointer-events: none;
}

/* ---------- подпись раздела ---------- */

.section-label {
  position: relative;
  height: 1.5em;
  width: 100%;
  margin-top: clamp(14px, 2.6vh, 24px);
  font-family: 'FindSans Pro', 'Roboto Flex', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--acid);
  text-align: center;
}

.label-line {
  position: absolute;
  left: 0; right: 0; top: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding-bottom: .18em;
}

.label-line .char {
  display: inline-block;
  white-space: pre;
  will-change: transform;
}

/* ---------- медиа-рамка ---------- */

.media {
  position: relative;
  margin-top: clamp(12px, 2.2vh, 22px);
  width: min(640px, 92vw, calc((100vh - 575px) * 1.7778));
  min-width: min(480px, 92vw);
  will-change: transform;
}

.media__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-frame);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .045);   /* только тонкая кромка, без тени */
  transform: translateZ(0);
}

.media-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  will-change: transform, clip-path;
}

.media-layer.is-on { opacity: 1; visibility: visible; }

.media-layer video {
  width: 100%; height: 100%;
  object-fit: cover;
}

.media__vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .22), transparent 18%, transparent 84%, rgba(0, 0, 0, .3)),
    radial-gradient(120% 100% at 50% 50%, transparent 68%, rgba(0, 0, 0, .28) 100%);
}

/* уголки-скобки */
/* скобки повторяют скругление рамки с небольшим зазором:
   радиус рамки 18 + зазор 3 + линия 3 = внешний радиус 24px;
   z-index поверх рамки, чтобы при анимации линии не ныряли под видео */
.corner {
  position: absolute;
  z-index: 5;
  width: 34px; height: 34px;
  border: 3px solid var(--corner);
  pointer-events: none;
  will-change: transform;
}

.corner--tl { top: -6px;    left: -6px;  border-right: 0; border-bottom: 0; border-radius: 24px 0 0 0; }
.corner--tr { top: -6px;    right: -6px; border-left: 0;  border-bottom: 0; border-radius: 0 24px 0 0; }
.corner--bl { bottom: -6px; left: -6px;  border-right: 0; border-top: 0;    border-radius: 0 0 0 24px; }
.corner--br { bottom: -6px; right: -6px; border-left: 0;  border-top: 0;    border-radius: 0 0 24px 0; }

/* сканирующая линия при переключении */
.scan {
  position: absolute;
  left: -2%; right: -2%;
  top: -4px;
  height: 3px;
  border-radius: 2px;
  display: none;
  background: none;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  will-change: transform;
}

.scan::before {
  content: '';
  position: absolute;
  left: 2%; right: 2%;
  bottom: 2px;
  height: 84px;
  display: none;
  background: none;
}

/* ---------- заглушка раздела ---------- */

.ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(130% 130% at 50% -10%, #141810 0%, #0B0D07 52%, #070804 100%);
}

.ph__grid {
  position: absolute; inset: -60px;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255, 255, 255, .035) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 46px);
  -webkit-mask: radial-gradient(75% 85% at 50% 50%, #000 30%, transparent 78%);
          mask: radial-gradient(75% 85% at 50% 50%, #000 30%, transparent 78%);
  animation: ph-drift 17s linear infinite;
}

@keyframes ph-drift {
  to { transform: translate(46px, 46px); }
}

.ph__halo {
  position: absolute;
  width: 330px; height: 330px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(195, 244, 44, .09) 55deg,
    transparent 120deg,
    rgba(195, 244, 44, .04) 220deg,
    transparent 300deg);
  filter: none;
  opacity: .32;
  animation: ph-spin 9s linear infinite;
}

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

.ph__rings { position: absolute; width: 0; height: 0; }

.ph__rings i {
  position: absolute;
  left: -66px; top: -66px;
  width: 132px; height: 132px;
  border-radius: 50%;
  border: 1px solid rgba(195, 244, 44, .28);
  animation: ph-ping 3.4s cubic-bezier(0, .4, .3, 1) infinite;
}

.ph__rings i:nth-child(2) { animation-delay: 1.13s; }
.ph__rings i:nth-child(3) { animation-delay: 2.26s; }

@keyframes ph-ping {
  0%   { transform: scale(.62); opacity: 0; }
  18%  { opacity: .9; }
  100% { transform: scale(2.15); opacity: 0; }
}

.ph__icon {
  position: relative;
  width: 88px; height: 88px;
  background-color: var(--acid);
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
          mask-position: center;         mask-size: contain;         mask-repeat: no-repeat;
  filter: none;
  animation: ph-breath 3.4s ease-in-out infinite alternate;
}

@keyframes ph-breath {
  from { transform: scale(1);    opacity: .92; }
  to   { transform: scale(1.07); opacity: 1; }
}

.ph__stars i {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--acid);
  opacity: .3;
  animation: ph-float 6s ease-in-out infinite alternate;
}

.ph__stars i:nth-child(1) { left: 14%; top: 26%; animation-duration: 5.2s; }
.ph__stars i:nth-child(2) { left: 24%; top: 70%; animation-duration: 7.1s; animation-delay: .6s; }
.ph__stars i:nth-child(3) { left: 38%; top: 16%; animation-duration: 6.4s; animation-delay: 1.4s; }
.ph__stars i:nth-child(4) { left: 66%; top: 22%; animation-duration: 5.7s; animation-delay: .9s; }
.ph__stars i:nth-child(5) { left: 78%; top: 58%; animation-duration: 7.6s; animation-delay: .2s; }
.ph__stars i:nth-child(6) { left: 88%; top: 34%; animation-duration: 6.1s; animation-delay: 1.8s; }
.ph__stars i:nth-child(7) { left: 52%; top: 82%; animation-duration: 6.9s; animation-delay: 1.1s; }

@keyframes ph-float {
  from { transform: translateY(-7px); opacity: .16; }
  to   { transform: translateY(7px);  opacity: .5; }
}

.ph__caption {
  position: absolute;
  bottom: 17px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.ph__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: none;
  animation: ph-pulse 1.6s ease-in-out infinite;
}

@keyframes ph-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.72); }
}

/* заглушки не тратят ресурсы, пока скрыты */
.media-layer:not(.is-on) .ph__grid,
.media-layer:not(.is-on) .ph__halo,
.media-layer:not(.is-on) .ph__rings i,
.media-layer:not(.is-on) .ph__icon,
.media-layer:not(.is-on) .ph__stars i,
.media-layer:not(.is-on) .ph__dot { animation-play-state: paused; }

/* ---------- кнопки ---------- */

.actions {
  display: flex;
  gap: 14px;
  margin-top: clamp(20px, 4vh, 42px);
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  position: relative;
  height: 48px;
  padding: 0 27px;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

.btn__label {
  position: relative;
  z-index: 3;
  /* по фигме: Onest SemiBold 14 / line-height 89.6% / letter-spacing 0 */
  font-family: 'Onest', 'FindSans Pro', 'Roboto Flex', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: .896;
  letter-spacing: 0;
  transition: color .38s var(--ease-out);
}

.btn__fill {
  position: absolute;
  z-index: 1;
  left: 0; top: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
}

.btn__shine {
  position: absolute;
  z-index: 2;
  top: -45%; bottom: -45%;
  left: 0;
  width: 46%;
  transform: translateX(-160%) skewX(-18deg);
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent);
  pointer-events: none;
}

.btn--ghost {
  background: #14160E;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.btn--ghost .btn__label { color: #EDEFE3; }
.btn--ghost .btn__fill  { background: #F2F4EC; }
.btn--ghost.is-filled .btn__label { color: #0A0B07; }

.btn--acid {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--acid);
}
.btn--acid .btn__label { color: var(--acid); }
.btn--acid .btn__fill  { background: linear-gradient(135deg, var(--acid-bright), var(--acid)); }
.btn--acid.is-filled .btn__label { color: #0A0B07; }

/* ---------- переход на биллинг ---------- */

.launch {
  position: fixed; inset: 0;
  z-index: 55;                /* под зерном (60): плёнка ложится на лайм */
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}

.launch.is-on { visibility: visible; pointer-events: all; }

.launch__wave {
  position: absolute;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--acid);
  transform: scale(0);
  will-change: transform;
}

.launch__wave--dark { background: #0E100A; }

.launch__inner {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0;
}

.launch__core { display: grid; justify-items: center; gap: 22px; }

.launch__emblem {
  position: relative;
  width: 128px; height: 128px;
  display: grid; place-items: center;
}

/* кольцо и марка отрисованы в максимальном размере и анимируются
   только вниз по scale — растр никогда не растягивается, край гладкий */
.launch__ring {
  display: none;
}

.launch__rays span {
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 22px;
  margin: -11px 0 0 -1.5px;
  border-radius: 2px;
  background: #0A0B07;
  opacity: 0;
}

.launch__mark {
  width: 100px; height: 100px;
  background-color: #0A0B07;
  -webkit-mask: url('../Logo_Transparent.png') center / contain no-repeat;
          mask: url('../Logo_Transparent.png') center / contain no-repeat;
}

.launch__text {
  font-family: 'FindSans Pro', 'Roboto Flex', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #0A0B07;
  letter-spacing: .01em;
}

.launch__text .char { display: inline-block; white-space: pre; }

/* запасная кнопка, если переход не случился */
.launch__fallback {
  margin-top: 4px;
  padding: 13px 26px;
  border-radius: 999px;
  background: #0A0B07;
  color: var(--acid);
  font-family: 'Onest', 'FindSans Pro', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: .896;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-out);
}

.launch__fallback:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(10, 11, 7, .5); }
.launch__fallback:focus-visible { outline: 2px solid #0A0B07; outline-offset: 3px; }

/* крестик закрытия сверху */
.launch__close {
  position: absolute;
  top: 22px; right: 26px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(10, 11, 7, .55);
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: transform .35s var(--ease-spring), background .3s var(--ease-out);
}

.launch__close span {
  position: absolute;
  width: 18px; height: 2px;
  border-radius: 1px;
  background: #0A0B07;
}

.launch__close span:first-child { transform: rotate(45deg); }
.launch__close span:last-child  { transform: rotate(-45deg); }

.launch__close:hover { background: rgba(10, 11, 7, .1); transform: rotate(90deg); }
.launch__close:focus-visible { outline: 2px solid #0A0B07; outline-offset: 3px; }

/* ============================================================
   Секции после hero
   ============================================================ */

.sect {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 48px;          /* 48px по краям = сетка фигмы (1344 при 1440) */
  scroll-margin-top: 26px;
}

.sect__inner {
  max-width: 1344px;
  margin: 0 auto;
}

.sect__label {
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--acid);
}

.sect__label .char { display: inline-block; white-space: pre; }

.sect__title {
  position: relative;
  margin-top: 24px;
  font-size: clamp(34px, 3.34vw, 48px);   /* 48px при 1440, как в фигме */
  font-weight: 700;
  line-height: 1.19;                      /* строка 57px из макета */
  letter-spacing: -.01em;
  color: var(--white);
}

/* стикер-эмблема у заголовка: эллипс со звездой (Cyber Y2K Set-113) */
.sect__sticker {
  position: absolute;
  left: 8.2em;
  top: -.8em;
  width: 3.17em;             /* 152px при заголовке 48px — пропорции макета */
  height: 3.17em;
  pointer-events: none;
}

.stk__img { display: block; width: 100%; height: 100%; }

/* отблеск поверх звезды на стикере */
.stk__glint {
  position: absolute;
  left: 29.5%;
  top: 36.5%;
  width: 25%;
  height: 25%;
  opacity: 0;
}

/* ---------- «Что может Puws.Cloud?» ---------- */

.features {
  margin: 0;
  padding: 0;
  overflow: visible;
  background: #060606;
}

.features__pin {
  width: 100%;
  height: 100vh;
  height: 100svh;
  padding: clamp(32px, 6svh, 72px) 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  overflow: clip;
}

.features .sect__inner {
  width: 100%;
  min-width: 0;
}

.fcards {
  position: relative;
  display: grid;
  grid-template-columns: 333fr 333fr 333fr 268fr 61fr;  /* ширины карточек из фигмы */
  gap: 4px;
  margin-top: 24px;
}

.fcard {
  position: relative;
  min-width: 0;
  height: 271px;
  padding: 48px 0 0;   /* текст в фигме занимает всю ширину карточки */
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 24px;
  background-color: #111111;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .5s var(--ease-out);
}

/* активная карточка: заливки нет — прозрачная, поверх едет лаймовая рамка */
.fcard.is-active { background-color: rgba(17, 17, 17, 0); }

.fcard__icon { width: 120px; height: 120px; }

.fcard__icon img,
.fcard__icon svg { display: block; width: 100%; height: 100%; }

.fcard__title {
  margin-top: 24px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  transition: color .45s var(--ease-out);
}

.fcard.is-active .fcard__title { color: var(--acid); }

.fcard__sub {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.1;
  color: #747474;
  text-align: center;
}

/* узкая карточка «(···)» — листает активную возможность дальше */
.fcard--more { padding: 0; display: grid; place-items: center; }

.fcard--more .fcard__icon--sm { width: 36px; height: 36px; }

/* скользящая лаймовая рамка активной карточки */
.fring {
  position: absolute;
  left: 0; top: 0;
  width: 333px; height: 271px;
  border: 2px solid var(--acid);
  border-radius: 24px;
  pointer-events: none;
  z-index: 2;
  will-change: transform;
}

/* ---------- «Для чего нужен сервер?» ---------- */

.why {
  z-index: 1;
  padding: 0;
  scroll-margin-top: 0;
  overflow: visible;
  background: #060606;
}

.why__pin {
  width: 100%;
  height: 100vh;
  height: 100svh;
  /* The Figma composition sits 0–24px below the mathematical centre. Keeping
     that offset on the wrapper leaves the canvas transform free for the
     scroll-follow motion. */
  padding-top: clamp(0px, 5.8vh, 48px);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.why__canvas {
  position: relative;
  width: min(894px, calc(100vw - 48px), calc((100svh - 56px) * 1.100985));
  max-width: calc(100vw - 48px);
  aspect-ratio: 894 / 812;
  container-type: inline-size;
}

.why__sigil {
  position: absolute;
  left: 38.3669%;
  top: 0;
  width: 23.2662%;
  height: 25.6158%;
  pointer-events: none;
  will-change: transform, opacity;
}

.why__title {
  position: absolute;
  left: 18.7919%;
  top: 15.0246%;
  width: 62.4161%;
  font-family: 'FindSans Pro', 'Roboto Flex', sans-serif;
  font-size: 7.15884cqw;
  font-weight: 700;
  line-height: .896;
  letter-spacing: -.01em;
  text-align: center;
  color: var(--white);
  will-change: transform, opacity;
}

.why__line {
  display: block;
  overflow: hidden;
}

.why__line > span {
  display: block;
  will-change: transform, opacity;
}

.why__line--acid { color: var(--acid); }

.why__board {
  position: absolute;
  left: 0;
  top: 40.6404%;
  width: 100%;
  height: 59.3596%;
  display: grid;
  grid-template-columns: 445fr 220.5fr 220.5fr;
  grid-template-rows: 239fr 239fr;
  gap: .44743cqw;
  outline: none;
}

.why__board:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 7px;
  border-radius: 1.78971cqw;
}

.why-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 1.78971cqw;
  background: #111111;
  isolation: isolate;
  will-change: transform, opacity;
}

.why-card--sites { grid-area: 1 / 1 / 3 / 2; }
.why-card--game  { grid-area: 1 / 2 / 2 / 3; }
.why-card--bot   { grid-area: 1 / 3 / 2 / 4; }
.why-card--vpn   { grid-area: 2 / 2 / 3 / 4; }

.why-card__copy {
  position: absolute;
  left: 1.78971cqw;
  right: 1.78971cqw;
  bottom: 1.78971cqw;
  z-index: 3;
  will-change: transform, opacity;
}

.why-card__copy h3 {
  font-family: 'FindSans Pro', 'Roboto Flex', sans-serif;
  font-size: 1.56599cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: #FFFFFF;
}

.why-card__copy p {
  margin-top: .89485cqw;
  font-family: 'FindSans Pro', 'Roboto Flex', sans-serif;
  font-size: 1.34228cqw;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: #747474;
}

/* Сцена большой карточки: внутренний artboard 403×283 из референса. */
.why-sites {
  position: absolute;
  left: 1.78971cqw;
  top: 1.78971cqw;
  width: 46.19687cqw;
  height: 41.16331cqw;
  /* Финальную обрезку выполняет сама карточка; здесь не режем пиксельные
     края наклонённых телефонов во время GSAP-входа и hover-реакции. */
  overflow: visible;
}

.why-shot {
  position: absolute;
  display: block;
  will-change: transform, opacity;
}

.why-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.why-shot--left {
  left: 4.65%;
  top: 34.48%;
  width: 29.18%;
  height: 44.57%;
  overflow: hidden;
  z-index: 1;
}

.why-shot--right {
  left: 63.97%;
  top: 34.48%;
  width: 29.18%;
  height: 44.57%;
  overflow: hidden;
  z-index: 1;
}

.why-shot--main {
  left: 3.53%;
  top: 28.02%;
  width: 90.7%;
  z-index: 2;
}

.why-stack {
  position: absolute;
  left: 1.78971cqw;
  top: 1.78971cqw;
  display: flex;
  align-items: center;
  z-index: 2;
}

.why-avatar,
.why-app {
  position: relative;
  width: 4.02685cqw;
  height: 4.02685cqw;
  flex: 0 0 auto;
  margin-right: -1.78971cqw;
  border: .22371cqw solid #111111;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  will-change: transform, opacity;
}

.why-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-app { background: #292A26; }

.why-app img {
  width: 2.23714cqw;
  height: 2.23714cqw;
}

@media (hover: hover) and (pointer: fine) {
  .why-card { transition: background-color .3s var(--ease-out); }
  .why-card:hover { background-color: #151513; }
}

/* ---------- «С чего начать?» ---------- */

.start {
  z-index: 1;
  padding: 0;
  scroll-margin-top: 0;
  overflow: visible;
  background: #060606;
}

.start__pin {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* 539 × 630 — точный габарит композиции из Figma. Все внутренние
   координаты заданы через cqw, поэтому композиция не ломается по высоте. */
.start__canvas {
  position: relative;
  width: min(539px, calc(100vw - 48px), calc((100svh - 96px) * .855556));
  max-width: calc(100vw - 48px);
  aspect-ratio: 539 / 630;
  container-type: inline-size;
}

.start__head {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.start__title {
  position: absolute;
  left: 0;
  top: 0;
  /* Строка «начать?» у локального FindSans шире Figma-frame заголовка.
     Расширяем только невидимую reveal-маску, не меняя размер или позицию. */
  width: 70cqw;
  font-family: 'FindSans Pro', 'Roboto Flex', sans-serif;
  font-size: 11.87384cqw;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.01em;
  color: #FFFFFF;
}

.start__title-line {
  display: block;
  overflow: hidden;
}

.start__title-line > span {
  display: block;
  will-change: transform, opacity;
}

.start__sigil {
  position: absolute;
  left: 78.84972cqw;
  top: 0;
  width: 21.15028cqw;
  height: 21.15028cqw;
  will-change: transform, clip-path, opacity;
}

.start__journey {
  position: absolute;
  left: 0;
  top: 29.12801cqw;
  width: 100cqw;
  height: 87.75510cqw;
}

.start__route {
  position: absolute;
  z-index: 1;
  left: 6.58627cqw;
  top: 6.67904cqw;
  bottom: 6.67904cqw;
  width: 2px;
  pointer-events: none;
}

.start__rail,
.start__rail-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  transform-origin: center top;
}

.start__rail {
  height: 100%;
  background: #111111;
}

/* Финальный кадр остаётся точным референсу: лайм до активного второго шага,
   а продолжение к третьему — тёмное. */
.start__rail-fill {
  height: 50%;
  background: var(--acid);
}

.start__packet {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 1px;
  background: var(--acid);
  opacity: 0;
  will-change: transform, opacity;
}

.start__steps {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  list-style: none;
}

.start-step {
  position: absolute;
  left: 0;
  width: 100%;
  height: 13.35807cqw;
  will-change: transform, opacity;
}

.start-step:nth-child(1) { top: 0; }
.start-step:nth-child(2) { top: 37.19852cqw; }
.start-step:nth-child(3) { top: 74.39703cqw; }

.start-step__node {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 13.35807cqw;
  height: 13.35807cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  will-change: transform, opacity;
}

.start-step__node img {
  position: relative;
  z-index: 2;
  width: 4.45269cqw;
  height: 4.45269cqw;
  will-change: transform, clip-path, opacity;
}

.start-step--done .start-step__node { background: var(--acid); }

.start-step--current .start-step__node {
  border: 2px solid var(--acid);
  background: #060606;
}

.start-step--next .start-step__node { background: #111111; }

.start-step__echo {
  position: absolute;
  z-index: 1;
  inset: -2px;
  border: 1px solid var(--acid);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.start-step__copy {
  position: absolute;
  left: 17.81076cqw;
  top: 0;
  width: 82.18924cqw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  will-change: transform, opacity;
}

.start-step__copy h3 {
  font-family: 'FindSans Pro', 'Roboto Flex', sans-serif;
  font-size: clamp(14px, 2.96846cqw, 16px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: #FFFFFF;
}

.start-step--current .start-step__copy h3 { color: var(--acid); }

.start-step__copy p {
  margin-top: .74212cqw;
  font-family: 'FindSans Pro', 'Roboto Flex', sans-serif;
  font-size: clamp(12px, 2.59740cqw, 14px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0;
  color: #747474;
}

/* ---------- Тарифы ---------- */

.tariffs {
  padding: 0;
  overflow: visible;
  background: #060606;
}

.tariff-icons {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.tariffs__pin {
  width: 100%;
  height: auto;
  min-height: 710px;
  padding: 72px 48px 76px;
  display: block;
  overflow: clip;
}

.tariffs__canvas {
  width: 100%;
  max-width: 1344px;
  margin: 0 auto;
}

.tariffs__head {
  position: relative;
  min-height: 144px;
}

.tariffs__eyebrow {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--acid);
}

.tariffs__title {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  font-family: 'FindSans Pro', 'Roboto Flex', sans-serif;
  font-size: clamp(46px, 4.45vw, 64px);
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.02em;
  color: #FFFFFF;
}

.tariffs__title-line {
  display: block;
  overflow: hidden;
  padding: .01em .03em .015em 0;
}

.tariffs__title-line > span { display: inline-block; white-space: nowrap; }

.tariffs__star {
  position: absolute;
  top: -40px;
  left: 568px;
  width: 234px;
  height: 234px;
  z-index: 0;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  will-change: transform, opacity;
}

.tariff-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin-top: 24px;
}

.tariff-ring {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  border: 2px solid var(--acid);
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  will-change: clip-path, opacity;
}

.tariff-card {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 397px;
  padding: 0 4px 19px;
  display: grid;
  grid-template-rows: 75px 196px 61px 46px;
  border-radius: 20px;
  background: #111111;
  transition: background-color .28s var(--ease-out);
  will-change: transform, opacity;
}

.tariff-card.is-active { background: #060606; }

.tariff-card__head {
  position: relative;
  min-width: 0;
  padding: 20px 16px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.tariff-card__head h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
}

.tariff-card__head p {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #747474;
}

.tariff-card__badge {
  position: absolute;
  top: 8px;
  right: 4px;
  width: 100px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--acid);
  font-family: 'Onest', sans-serif;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  color: #090A06;
}

.tariff-card__specs {
  min-width: 0;
  padding: 14px 12px;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  list-style: none;
  border-radius: 20px;
  background: #1B1B1B;
}

.tariff-spec {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 14px max-content minmax(100px, 1fr) 3px;
  align-items: center;
  column-gap: 6px;
  font-size: 12px;
  line-height: 1;
}

.tariff-spec svg {
  width: 14px;
  height: 14px;
  overflow: visible;
  fill: none;
  stroke: #747474;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  shape-rendering: crispEdges;
}

.tariff-spec b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  color: #FFFFFF;
}

.tariff-spec > span {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 400;
  color: #747474;
}

.tariff-meter {
  position: relative;
  width: 3px;
  height: 16px;
  justify-self: end;
  overflow: hidden;
  background: #0D0D0D;
}

.tariff-meter > i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--level);
  background: #F4F6EE;
  transform-origin: 50% 100%;
}

.tariff-card.is-active .tariff-meter > i { background: var(--acid); }

.tariff-card__price {
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tariff-card__price strong {
  font-size: clamp(30px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
}

.tariff-card__price span {
  align-self: flex-end;
  margin-bottom: 9px;
  font-size: 12px;
  color: #747474;
}

.tariff-card__cta {
  height: 36px;
  margin: 10px 16px 0;
  border: 1px solid #292929;
  border-radius: 999px;
  font-family: 'Onest', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  transition: transform 150ms var(--ease-out), border-color 180ms ease, color 180ms ease;
}

.tariff-card.is-active .tariff-card__cta {
  border: 2px solid var(--acid);
  color: var(--acid);
}

.tariff-card__cta:active { transform: scale(.97); }

.tariff-card__cta:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

.no-gsap .tariff-ring { display: none; }
.no-gsap .tariff-card.is-active { box-shadow: inset 0 0 0 2px var(--acid); }

@media (hover: hover) and (pointer: fine) {
  .tariff-card:not(.is-active):hover { background: #151513; }
  .tariff-card__cta:hover { border-color: #5A5A5A; }
  .tariff-card.is-active .tariff-card__cta:hover { border-color: var(--acid); }
}

@media (max-width: 1180px) {
  .tariffs__head { padding-right: 210px; }
  .tariffs__star { left: auto; right: 0; top: -22px; width: 190px; height: 190px; }

  .tariff-grid {
    display: flex;
    margin-left: -48px;
    margin-right: -48px;
    padding: 0 48px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .tariff-grid::-webkit-scrollbar { display: none; }
  .tariff-card { flex: 0 0 265.6px; scroll-snap-align: center; }
}

/* ---------- Вместе с Puws.Cloud ---------- */

.benefits {
  padding: 0;
  overflow: visible;
  background: #060606;
}

.benefits__pin {
  width: 100%;
  height: 100vh;
  height: 100svh;
  padding-top: clamp(24px, 5svh, 48px);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.benefits__canvas {
  width: 100%;
  min-width: 0;
}

.benefits__viewport {
  width: 100%;
  height: 255px;
  overflow: hidden;
}

/* Figma artboard is always a centred 1440px composition on desktop. */
.benefits__stage {
  position: relative;
  left: 50%;
  width: 1440px;
  height: 255px;
  margin-left: -720px;
}

.benefit-card {
  position: absolute;
  overflow: hidden;
  border-radius: 16px;
  background: #111111;
  container-type: inline-size;
  color: #F4F6EE;
  will-change: transform, opacity;
}

.benefit-card--panel {
  left: 118px;
  top: 41.059px;
  width: 200px;
  height: 172.881px;
  z-index: 1;
  opacity: .25;
  border-radius: 10.847px;
}

.benefit-card--support {
  left: 322.5px;
  top: 21.178px;
  width: 246px;
  height: 212.644px;
  z-index: 2;
  opacity: .48;
  border-radius: 13.342px;
}

.benefit-card--instant {
  left: 573px;
  top: 0;
  width: 295px;
  height: 255px;
  z-index: 4;
  opacity: 1;
  background: #060606;
}

.benefit-card--speed {
  left: 872.5px;
  top: 21.178px;
  width: 246px;
  height: 212.644px;
  z-index: 2;
  opacity: .48;
  border-radius: 13.342px;
}

.benefit-card--uptime {
  left: 1122px;
  top: 41.059px;
  width: 200px;
  height: 172.881px;
  z-index: 1;
  opacity: .25;
  border-radius: 10.847px;
}

.benefit-card__outline {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 2px solid var(--acid);
  border-radius: inherit;
  pointer-events: none;
  will-change: clip-path, opacity;
}

.benefit-card__content {
  position: absolute;
  inset: 0;
}

.benefit-card__icon {
  position: absolute;
  left: 5.42373cqw;
  top: 5.42373cqw;
  width: 8.13559cqw;
  height: 8.13559cqw;
  object-fit: contain;
  image-rendering: pixelated;
}

.benefit-card__icon--line {
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: square;
  stroke-linejoin: miter;
  shape-rendering: geometricPrecision;
}

.benefit-card__title {
  position: absolute;
  left: 5.42373cqw;
  right: 5.42373cqw;
  top: 25.76271cqw;
  font-family: 'FindSans Pro', 'Roboto Flex', sans-serif;
  font-size: 8.13559cqw;
  font-weight: 700;
  line-height: .9;
  letter-spacing: 0;
  color: #F4F6EE;
}

.benefit-card__copy {
  position: absolute;
  left: 5.42373cqw;
  right: 5.42373cqw;
  top: 47.45763cqw;
  font-family: 'FindSans Pro', 'Roboto Flex', sans-serif;
  font-size: 4.74576cqw;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: 0;
  color: #747474;
}

.benefit-card__link {
  position: absolute;
  left: 5.42373cqw;
  bottom: 5.42373cqw;
  font-family: 'FindSans Pro', 'Roboto Flex', sans-serif;
  font-size: 4.74576cqw;
  font-weight: 700;
  line-height: 1;
  color: #747474;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease, transform 150ms var(--ease-out);
}

.benefit-card.is-active .benefit-card__link { color: var(--acid); }

.benefit-card__link:focus-visible {
  outline: 1px solid var(--acid);
  outline-offset: 4px;
}

.benefit-card__link:active { transform: translateY(1px); }

@media (hover: hover) and (pointer: fine) {
  .benefit-card__link:hover { color: var(--acid); }
}

.benefits__caption {
  margin-top: 16px;
  font-family: 'FindSans Pro', 'Roboto Flex', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: #F4F6EE;
}

.benefits__caption span { color: var(--acid); }

/* ---------- Финальные блоки: FAQ / CTA / footer ---------- */

.site-shell {
  position: relative;
  min-width: 0;
  overflow-x: clip;
}

body.is-launching { overflow: hidden; }

.closing {
  position: relative;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: 32px;
  background: #111111;
}

/* FAQ */

.faq {
  --faq-row: 64px;
  --faq-row-open: 68px;
  --faq-panel: 37px;
  --faq-question: 16px;
  --faq-question-open: 11px;
  --faq-question-scale: .6875;
  --faq-question-shift: -17px;
  --faq-answer: 14px;
  --faq-open-pad: 7px;
  --faq-toggle: 32px;
  position: relative;
  z-index: 3;
  height: 536px;
  min-height: 0;
  padding: 56px 0 0;
  overflow: hidden;
  border-radius: 0 0 40px 40px;
  background: #060606;
}

.faq__inner {
  width: min(1344px, calc(100% - 80px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 506px minmax(0, 782px);
  gap: 56px;
  align-items: start;
}

.faq__intro {
  position: relative;
  z-index: 2;
  width: 629px;
  min-width: 0;
}

.faq__heading-row {
  position: relative;
  width: 629px;
  display: block;
}

.faq__title {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 629px;
  height: 114px;
  font-family: 'FindSans Pro', 'Roboto Flex', sans-serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 57px;
  letter-spacing: -.015em;
  color: #F4F6EE;
}

.faq__title-mask {
  display: block;
  width: 629px;
  height: 57px;
  overflow: hidden;
  padding: 0;
}

.faq__title-mask > span {
  display: inline-block;
  will-change: transform;
}

.faq__globe {
  position: absolute;
  z-index: 1;
  left: 384px;
  top: 4px;
  width: 126px;
  height: 126px;
  object-fit: contain;
  image-rendering: pixelated;
  will-change: transform;
}

.faq__note {
  margin-top: 12px;
  font-family: 'Onest', 'FindSans Pro', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
  color: #5F5F5F;
}

.faq__note a {
  color: var(--acid);
  text-decoration: none;
}

.faq__list {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.faq-item {
  position: relative;
  height: var(--faq-row);
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: clamp(14px, .833vw, 16px);
  background: #111111;
  color: #F4F6EE;
  will-change: transform, opacity;
}

.faq-item.is-open {
  height: var(--faq-row-open);
  border-color: var(--acid);
}

.faq-item h3 {
  margin: 0;
  font: inherit;
}

.faq-item__trigger {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  padding: 0 60px 0 16px;
  display: flex;
  align-items: center;
  text-align: left;
  color: #F4F6EE;
}

.faq-item.is-open .faq-item__trigger {
  height: auto;
  padding-top: 0;
  align-items: center;
}

.faq-item__question {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'FindSans Pro', 'Roboto Flex', sans-serif;
  font-size: var(--faq-question);
  font-weight: 700;
  line-height: 1;
  color: #F4F6EE;
  transform-origin: left center;
  will-change: transform, color, opacity;
}

.faq-item.is-open .faq-item__question {
  font-size: var(--faq-question-open);
  font-weight: 400;
  color: #5F5F5F;
  transform: translateY(var(--faq-question-shift));
}

.faq-item__toggle {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 12px;
  width: var(--faq-toggle);
  height: var(--faq-toggle);
  margin-top: calc(var(--faq-toggle) / -2);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  will-change: transform, background-color;
}

.faq-item.is-open .faq-item__toggle { background: var(--acid); }

.faq-item__chevron {
  position: absolute;
  inset: 0;
  margin: auto;
  object-fit: contain;
  image-rendering: pixelated;
  will-change: opacity, transform;
}

.faq-item__chevron--down {
  width: var(--faq-toggle);
  height: var(--faq-toggle);
  opacity: 1;
}

.faq-item__chevron--up {
  width: clamp(18px, 1.042vw, 20px);
  height: clamp(18px, 1.042vw, 20px);
  opacity: 0;
}

.faq-item.is-open .faq-item__chevron--down { opacity: 0; }
.faq-item.is-open .faq-item__chevron--up { opacity: 1; }

.faq-item__panel {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--faq-panel);
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.faq-item.is-open .faq-item__panel {
  height: var(--faq-panel);
  visibility: visible;
}

.faq-item__panel-inner {
  padding: 0 60px 0 16px;
}

.faq-item__panel p {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  font-family: 'FindSans Pro', 'Roboto Flex', sans-serif;
  font-size: var(--faq-answer);
  font-weight: 700;
  line-height: 1.15;
  color: #F4F6EE;
}

/* CTA */

.closing-cta {
  position: relative;
  z-index: 1;
  height: 736px;
  margin-top: -38px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #CCF904;
  color: #060606;
  container-type: inline-size;
}

.closing-cta__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1500px;
  perspective-origin: 50% 50%;
  pointer-events: none;
}

.closing-cta__tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.closing-cta__liquid {
  position: absolute;
  left: -38px;
  top: -8px;
  width: calc(100% + 76px);
  height: calc(100% + 16px);
  will-change: transform;
}

.closing-cta__slice-shell,
.closing-cta__slice-depth {
  transform-box: fill-box;
  transform-origin: center;
}

.closing-cta__slice-shell--mid,
.closing-cta__slice-depth--mid { display: none; }

.closing-cta__radial {
  position: absolute;
  left: 50%;
  top: -128px;
  width: 1938px;
  height: 992px;
  margin-left: -969px;
  background: radial-gradient(
    ellipse 48% 58% at 50% 50%,
    rgba(191, 230, 16, 1) 0%,
    rgba(193, 231, 23, .88) 30%,
    rgba(204, 249, 4, 0) 100%
  );
}

.closing-cta__glass-light {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1240px;
  height: 840px;
  margin: -420px 0 0 -620px;
  background: radial-gradient(
    ellipse 28% 38% at 50% 50%,
    rgba(255, 255, 255, .56) 0%,
    rgba(255, 255, 255, .2) 36%,
    rgba(255, 255, 255, 0) 72%
  );
  opacity: 0;
}

.closing-cta__content {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  padding: 0 298px;
  display: grid;
  justify-items: center;
  gap: 36px;
}

.closing-cta__title {
  width: 100%;
  height: 114px;
  min-width: 0;
  font-family: 'FindSans Pro', 'Roboto Flex', sans-serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 57px;
  letter-spacing: -.02em;
  text-align: center;
  color: #060606;
}

.closing-cta__title-mask {
  display: block;
  overflow: hidden;
  padding: 0;
}

.closing-cta__title-mask > span {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}

.closing-cta__button {
  position: relative;
  width: 454px;
  height: 160px;
  padding: 12px 24px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #060606;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}

.closing-cta__button-plane {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.closing-cta__button-label {
  position: relative;
  z-index: 2;
  font-family: 'Onest', 'FindSans Pro', sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 22px;
  color: #060606;
}

.closing-cta__button-wash {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 360px;
  height: 360px;
  margin: -180px 0 0 -180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .24);
  transform: scale(0);
  pointer-events: none;
  will-change: transform;
}

.closing-cta__button-corner {
  position: absolute;
  z-index: 3;
  width: 32px;
  height: 32px;
  border: 2px solid #060606;
  pointer-events: none;
  will-change: transform;
}

.closing-cta__button-corner--tl {
  left: 0;
  top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 20px 0 0 0;
}

.closing-cta__button-corner--tr {
  right: 0;
  top: 0;
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 20px 0 0;
}

.closing-cta__button-corner--bl {
  left: 0;
  bottom: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0 0 0 20px;
}

.closing-cta__button-corner--br {
  right: 0;
  bottom: 0;
  border-left: 0;
  border-top: 0;
  border-radius: 0 0 20px 0;
}

/* Footer */

.site-footer {
  position: relative;
  z-index: 4;
  min-height: 347px;
  height: 347px;
  margin-top: -52px;
  border-radius: 32px;
  background: #060606;
  color: #F4F6EE;
}

.site-footer__inner {
  width: min(1186px, calc(100% - 48px));
  margin: 0 auto;
  padding: 62px 0 45px;
}

.site-footer__nav {
  height: 158px;
  padding-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 374px));
  column-gap: 32px;
  border-bottom: 1px solid #111111;
}

.site-footer__column {
  position: relative;
  min-height: 110px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-footer__column:first-child { padding-left: 0; }
.site-footer__column:last-child { padding-right: 0; }

.site-footer__column:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  right: -16px;
  width: 1px;
  height: 110px;
  background: #111111;
  transform-origin: 50% 0;
  transform: scaleY(var(--divider-scale, 1));
}

.site-footer__column h2 {
  margin-bottom: 8px;
  font-family: 'FindSans Pro', 'Roboto Flex', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 22px;
  color: #F4F6EE;
}

.site-footer__column a {
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  color: #555555;
  text-decoration: none;
}

.site-footer__bottom {
  height: 82px;
  padding-top: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.site-footer__brand-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 171px;
  height: 29px;
  color: var(--acid);
  text-decoration: none;
}

.site-footer__brand-mark {
  position: relative;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  overflow: hidden;
}

.site-footer__brand-mark img {
  position: absolute;
  left: -11.56px;
  top: -10.43px;
  width: 52.13px;
  height: 52.13px;
  max-width: none;
  object-fit: contain;
}

.site-footer__brand-word {
  min-width: 135px;
  font-family: 'Google Sans Flex', 'FindSans Pro', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  font-stretch: 116%;
  font-variation-settings: 'wdth' 116;
  letter-spacing: -.04em;
}

.site-footer__brand p {
  width: 258px;
  margin-top: 12px;
  font-family: 'Onest', 'FindSans Pro', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 17px;
  white-space: nowrap;
  color: #5F5F5F;
}

.site-footer__care {
  display: grid;
  justify-items: end;
}

.site-footer__heart {
  width: 36px;
  height: 36px;
  object-fit: contain;
  image-rendering: pixelated;
  will-change: transform;
}

.site-footer__care p {
  width: 187px;
  margin-top: 12px;
  font-family: 'Onest', 'FindSans Pro', sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 10px;
  text-align: right;
  white-space: nowrap;
  color: var(--acid);
}

.faq-item__trigger:focus-visible,
.faq__note a:focus-visible,
.closing-cta__button:focus-visible,
.site-footer a:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

.closing-cta__button:focus-visible { outline-color: #060606; }

@media (hover: hover) and (pointer: fine) {
  .faq-item:not(.is-open):hover { background: #151515; }
  .faq__note a:hover { color: #E1FF5D; }
  .site-footer__column a:hover { color: var(--acid); }
  .site-footer__brand-link:hover { color: #E1FF5D; }
}

@media (min-width: 721px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .closing-cta__tilt,
  .closing-cta__glass-light,
  .closing-cta__button-plane { will-change: transform, opacity; }
}

@media (max-width: 1600px) {
  .closing-cta__slice-shell--wide,
  .closing-cta__slice-depth--wide { display: none; }

  .closing-cta__slice-shell--mid,
  .closing-cta__slice-depth--mid { display: inline; }

  .closing-cta__liquid {
    left: -55px;
    width: calc(100% + 110px);
  }

  .closing-cta__radial { left: calc(50% - 48px); }
}

@media (max-width: 1300px) and (min-width: 721px) {
  .closing-cta__content { padding-inline: 48px; }

  .closing-cta__title {
    height: auto;
    font-size: clamp(44px, 5vw, 64px);
    line-height: .890625;
  }

  .site-footer__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0;
  }

  .site-footer__column { padding-inline: 24px; }
  .site-footer__column:first-child { padding-left: 0; }
  .site-footer__column:last-child { padding-right: 0; }
  .site-footer__column:not(:last-child)::after { right: 0; }
}

@media (max-width: 1180px) {
  .faq {
    height: auto;
    padding-bottom: 72px;
  }

  .faq__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
  }

  .faq__list { width: 100%; }
}

@media (max-width: 980px) and (min-width: 721px) {
  .faq__intro,
  .faq__heading-row,
  .faq__title {
    width: min(629px, 100%);
  }

  .faq__title {
    height: auto;
    font-size: clamp(52px, 7vw, 64px);
    line-height: .890625;
  }

  .faq__title-mask {
    width: calc(100% + 8px);
    height: auto;
  }

  .faq__globe {
    left: auto;
    right: 0;
    width: 96px;
    height: 96px;
  }

  .faq__note { font-size: 12px; }
}

@media (max-width: 720px) {
  .closing {
    margin: 0 8px 8px;
    border-radius: 24px;
  }

  .faq {
    --faq-row: 60px;
    --faq-row-open: 84px;
    --faq-panel: 52px;
    --faq-question: 12px;
    --faq-question-open: 10px;
    --faq-question-scale: .833333;
    --faq-question-shift: -20px;
    --faq-answer: 11px;
    height: auto;
    padding: 76px 20px 88px;
    border-radius: 0 0 24px 24px;
  }

  .faq__inner { width: 100%; gap: 42px; }
  .faq__inner { grid-template-columns: 1fr; }
  .faq__intro { width: 100%; }

  .faq__heading-row {
    min-height: 96px;
    width: 100%;
  }

  .faq__title {
    width: 100%;
    height: auto;
    font-size: clamp(38px, 10.3vw, 44px);
    line-height: .9;
  }

  .faq__title-mask {
    width: calc(100% + 8px);
    height: auto;
  }

  .faq__globe {
    left: auto;
    right: 0;
    top: 0;
    width: 92px;
    height: 92px;
    margin-top: 0;
  }

  .faq__note {
    margin-top: 12px;
    font-size: 12px;
    white-space: normal;
  }

  .faq__list { gap: 6px; }

  .faq-item,
  .faq-item.is-open { border-radius: 14px; }

  .faq-item__trigger { padding-left: 14px; padding-right: 56px; }
  .faq-item__question {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.12;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .faq-item__panel-inner { padding: 0 52px 0 14px; }
  .faq-item__panel p {
    display: block;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.1;
  }
  .faq-item__toggle { right: 8px; }

  .closing-cta {
    height: 560px;
    margin-top: -24px;
  }

  .closing-cta__liquid {
    left: -120px;
    width: calc(100% + 240px);
  }

  .closing-cta__radial {
    left: 50%;
    top: -100px;
    width: 1000px;
    height: 760px;
    margin-left: -500px;
  }

  .closing-cta__glass-light {
    width: 760px;
    height: 620px;
    margin: -310px 0 0 -380px;
  }

  .closing-cta__content {
    gap: 30px;
    padding: 0 16px;
  }

  .closing-cta__title {
    height: auto;
    font-size: clamp(26px, 7.2vw, 34px);
    line-height: .9;
  }

  .closing-cta__button {
    width: min(320px, calc(100vw - 64px));
    height: 128px;
  }

  .closing-cta__button-label { font-size: 19px; }
  .closing-cta__button-corner { width: 30px; height: 30px; }

  .site-footer {
    height: auto;
    min-height: 0;
    margin-top: -36px;
    border-radius: 24px;
  }

  .site-footer__inner {
    width: 100%;
    padding: 62px 20px 28px;
  }

  .site-footer__column { padding-left: 0; padding-right: 24px; }
  .site-footer__column h2 { font-size: 20px; }
  .site-footer__column a { font-size: 12px; }

  .site-footer__bottom {
    height: auto;
    padding-top: 24px;
    align-items: start;
  }

  .site-footer__nav {
    height: auto;
    padding-top: 0;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0;
    row-gap: 34px;
  }

  .site-footer__column--contacts {
    grid-column: 1 / -1;
    min-height: 104px;
    padding-left: 0;
  }

  .site-footer__column:nth-child(2)::after { display: none; }
}

@media (max-width: 520px) {
  .faq__heading-row { align-items: center; }
  .faq__globe { width: 76px; height: 76px; }
  .faq-item__question { max-width: 100%; }

  .site-footer__nav { grid-template-columns: 1fr; gap: 0; }

  .site-footer__column,
  .site-footer__column--contacts {
    grid-column: auto;
    min-height: 0;
    padding: 0 0 26px;
    margin-bottom: 26px;
    border-bottom: 1px solid #111111;
  }

  .site-footer__column::after { display: none; }

  .site-footer__bottom {
    flex-direction: column;
    gap: 28px;
  }

  .site-footer__care {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }

  .site-footer__heart { flex: 0 0 36px; }

  .site-footer__care p {
    width: auto;
    margin-top: 0;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
  }
}

/* Desktop presentation mode: native scroll + CSS sticky. ScrollTrigger
   only moves the inner timelines, so section handoffs never switch an
   element abruptly between normal flow and position: fixed. */
@media (min-width: 721px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.has-scroll-scenes .features {
    height: calc(100vh + clamp(520px, 68vh, 760px));
    height: calc(100svh + clamp(520px, 68svh, 760px));
  }

  html.has-scroll-scenes .why {
    height: calc(100vh + clamp(820px, 105vh, 1120px));
    height: calc(100svh + clamp(820px, 105svh, 1120px));
  }

  html.has-scroll-scenes .start {
    height: calc(100vh + clamp(600px, 74vh, 840px));
    height: calc(100svh + clamp(600px, 74svh, 840px));
  }

  html.has-scroll-scenes .benefits {
    height: calc(100vh + clamp(720px, 88vh, 980px));
    height: calc(100svh + clamp(720px, 88svh, 980px));
  }

  html.has-scroll-scenes .features__pin,
  html.has-scroll-scenes .why__pin,
  html.has-scroll-scenes .start__pin,
  html.has-scroll-scenes .benefits__pin {
    position: sticky;
    top: 0;
  }

  /* Only these inner surfaces trail the native scroll. The sticky wrappers
     keep their exact geometry, avoiding layout work and abrupt pin handoffs. */
  html.has-scroll-scenes .features .sect__inner,
  html.has-scroll-scenes .why__canvas,
  html.has-scroll-scenes .start__canvas,
  html.has-scroll-scenes .tariffs__canvas,
  html.has-scroll-scenes .benefits__canvas {
    will-change: transform;
  }
}

@media (max-width: 720px) {
  .benefits {
    padding: 96px 0 112px;
    overflow: hidden;
  }

  .benefits__pin {
    height: auto;
    min-height: 0;
    padding-top: 0;
    display: block;
    overflow: visible;
  }

  .benefits__viewport {
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .benefits__viewport::-webkit-scrollbar { display: none; }

  .benefits__stage {
    position: relative;
    left: auto;
    width: max-content;
    height: auto;
    margin-left: 0;
    padding: 0 20px 10px;
    display: flex;
    gap: 8px;
  }

  .benefits__stage .benefit-card {
    position: relative;
    left: auto;
    top: auto;
    width: min(82vw, 295px);
    height: auto;
    flex: 0 0 min(82vw, 295px);
    aspect-ratio: 295 / 255;
    border-radius: 16px;
    z-index: 1;
    opacity: .68;
    scroll-snap-align: center;
    transform: none;
    will-change: auto;
  }

  .benefits__stage .benefit-card.is-active {
    z-index: 2;
    opacity: 1;
  }

  .benefits__caption { margin-top: 24px; }
}

@media (max-width: 720px) {
  .tariffs__pin {
    height: auto;
    min-height: 0;
    padding: 96px 20px 112px;
    display: block;
    overflow: hidden;
  }

  .tariffs__head {
    min-height: 174px;
    padding-right: 0;
  }

  .tariffs__eyebrow { font-size: 13px; }

  .tariffs__title {
    margin-top: 18px;
    font-size: clamp(40px, 12vw, 56px);
    line-height: .9;
  }

  .tariffs__star {
    top: 12px;
    right: -28px;
    width: 142px;
    height: 142px;
  }

  .tariff-grid {
    margin: 24px -20px 0;
    padding: 0 20px 10px;
  }

  .tariff-card { flex-basis: min(82vw, 300px); }
  .tariff-card__head h3 { font-size: 19px; }
  .tariff-spec { font-size: 13px; }
  .tariff-card__price strong { font-size: 34px; }
}

@media (max-width: 720px) {
  .sect.start {
    padding: 96px 20px 112px;
    overflow: hidden;
  }

  .start__pin {
    height: auto;
    min-height: 0;
    display: block;
    overflow: visible;
  }

  .start__canvas {
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    container-type: normal;
  }

  .start__head {
    position: relative;
    inset: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(8px, 3vw, 18px);
  }

  .start__title {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    font-size: clamp(38px, 12vw, 56px);
    line-height: .9;
  }

  .start__sigil {
    position: relative;
    left: auto;
    top: auto;
    width: clamp(64px, 19.2vw, 96px);
    height: clamp(64px, 19.2vw, 96px);
    flex: 0 0 clamp(64px, 19.2vw, 96px);
    margin-top: -8px;
  }

  .start__journey {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    margin-top: 62px;
  }

  .start__route {
    left: 27px;
    top: 28px;
    bottom: 28px;
  }

  .start__steps { height: auto; }

  .start-step,
  .start-step:nth-child(1),
  .start-step:nth-child(2),
  .start-step:nth-child(3) {
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 56px;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
  }

  .start-step:not(:last-child) { margin-bottom: 72px; }

  .start-step__node {
    position: relative;
    width: 56px;
    height: 56px;
  }

  .start-step__node img {
    width: 20px;
    height: 20px;
  }

  .start-step__copy {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    display: block;
  }

  .start-step__copy h3 { font-size: 15px; }

  .start-step__copy p {
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.3;
  }
}

/* На телефоне тот же DOM становится нативной горизонтальной лентой. */
@media (max-width: 720px) {
  .sect.why {
    padding: 96px 0 100px;
    overflow: hidden;
  }

  .why__pin {
    height: auto;
    min-height: 0;
    padding-top: 0;
    display: block;
    overflow: visible;
  }

  .why__canvas {
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    container-type: normal;
    transform: none;
  }

  .why__sigil {
    position: relative;
    left: auto;
    top: auto;
    width: 148px;
    height: 148px;
    margin: 0 auto -12px;
  }

  .why__title {
    position: relative;
    left: auto;
    top: auto;
    width: calc(100% - 40px);
    margin: 0 auto;
    font-size: clamp(46px, 14.35vw, 58px);
    line-height: .9;
  }

  .why__board {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    margin-top: 56px;
    padding: 0 20px 10px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 20px;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .why__board::-webkit-scrollbar { display: none; }

  .why__board:focus-visible {
    outline-offset: -4px;
    border-radius: 0;
  }

  .why-card {
    flex: 0 0 min(84vw, 360px);
    width: min(84vw, 360px);
    height: min(112vw, 430px);
    min-height: 390px;
    border-radius: 20px;
    scroll-snap-align: center;
  }

  .why-card__copy {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .why-card__copy h3 { font-size: 14px; }

  .why-card__copy p {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
  }

  .why-sites {
    left: 16px;
    right: 16px;
    top: 16px;
    width: auto;
    height: auto;
    aspect-ratio: 413 / 368;
  }

  .why-stack {
    left: 16px;
    top: 16px;
  }

  .why-avatar,
  .why-app {
    width: 36px;
    height: 36px;
    margin-right: -16px;
    border-width: 2px;
  }

  .why-app img { width: 20px; height: 20px; }
}

/* планшет: ряд превращается в горизонтальную ленту со снапом */
@media (max-width: 1060px) {
  .fcards {
    display: flex;
    margin-left: -48px;
    margin-right: -48px;
    padding: 0 48px 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .fcards::-webkit-scrollbar { display: none; }
  .fcard { flex: 0 0 clamp(240px, 44vw, 333px); scroll-snap-align: center; }
  .fcard--more { flex: 0 0 61px; }
  .features.is-pinned-layout .fcards {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
}

/* ---------- фокус с клавиатуры ---------- */

.tab:focus-visible { outline: none; }

.tab:focus-visible .tab__circle,
.btn:focus-visible,
.fcard:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

/* ---------- адаптив ---------- */

@media (max-width: 720px) {
  :root { --tab-size: 44px; }
  .tab__icon { width: 24px; height: 24px; }
  .tabs { gap: 8px; }
  .hero__title { font-size: clamp(38px, 11vw, 56px); }
  .media { width: 92vw; min-width: 0; }
  .brand__name { font-size: 19px; }
  .corner { width: 27px; height: 27px; border-width: 2.5px; }
  .corner--tl, .corner--tr { top: -5px; }
  .corner--bl, .corner--br { bottom: -5px; }
  .corner--tl, .corner--bl { left: -5px; }
  .corner--tr, .corner--br { right: -5px; }

  .sect { padding: 0 20px; }
  .sect.features { padding: 0; }
  .sect__title { font-size: clamp(30px, 8.6vw, 40px); }
  .sect__sticker {
    left: auto;
    right: -.35em;
    top: -1.05em;
    width: 2.75em;
    height: 2.75em;
  }
  .features { margin: 0; padding: 0; }
  .features__pin {
    height: auto;
    min-height: 0;
    padding: 96px 20px;
    display: block;
    overflow: hidden;
  }
  .fcards {
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px 10px;
  }
}

@media (max-height: 760px) and (min-width: 721px) {
  .hero__title { font-size: clamp(36px, 7.2vh, 60px); }
  .media { width: min(560px, 92vw, calc((100vh - 420px) * 1.7778)); }
}

@media (prefers-reduced-motion: reduce) {
  .ph__grid, .ph__halo, .ph__rings i, .ph__icon, .ph__stars i, .ph__dot { animation: none; }
  .start__packet, .start-step__echo { display: none; }
  * { transition-duration: .01ms !important; }
}