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

@font-face {
  font-family: 'FindSans Pro';
  src: url('../FindSansPro-Regular.woff2') format('woff2'),
       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.woff2') format('woff2'),
       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.woff2') format('woff2'),
       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-in-out: cubic-bezier(.77, 0, .175, 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;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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; }

/* The full legal stylesheet is loaded only when its footer entry points near
   the viewport. Keep the inert dialog out of layout before that happens. */
.legal-viewer[aria-hidden="true"] { display: none; }

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%);
}

.hero-ascii {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 38%;
}

.hero-ascii::before,
.hero-ascii::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-ascii::before {
  top: auto;
  height: 32%;
  background: linear-gradient(to bottom, transparent, #060606 94%);
}

.hero-ascii::after {
  background: radial-gradient(ellipse 56% 64% at 50% 45%, rgba(204, 249, 4, .055), transparent 72%);
}

.ascii-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-ascii .ascii-canvas {
  position: absolute;
  inset: 0;
}

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

.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background: #060704;
  color: #D7D8C6;
  font-family: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;
}

.preloader__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 58% 52% at 50% 50%, rgba(154, 188, 0, .13), transparent 68%),
    radial-gradient(ellipse 42% 40% at 84% 12%, rgba(204, 249, 4, .035), transparent 72%);
  opacity: .72;
}

.preloader__brand {
  position: absolute;
  top: max(clamp(52px, 8vh, 78px), calc(env(safe-area-inset-top, 0px) + 42px));
  left: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transform: translateX(-50%);
  color: var(--acid);
  font-family: 'Google Sans Flex', 'Roboto Flex', sans-serif;
  font-size: 17px;
  font-weight: 600;
  font-stretch: 116%;
  font-variation-settings: 'wdth' 116;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.preloader__brand img {
  width: 28px;
  height: 28px;
}

.preloader__stage {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.preloader__snapshot {
  position: absolute;
  inset: 0;
}

.preloader__flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: rgba(204, 249, 4, .055);
}

.preloader__flash.is-on { animation: preloader-flash .3s steps(3) both; }

@keyframes preloader-flash {
  0% { opacity: .9; }
  100% { opacity: 0; }
}

@media (max-width: 560px) {
  .preloader__brand {
    top: max(46px, calc(env(safe-area-inset-top, 0px) + 34px));
    gap: 7px;
    font-size: 15px;
  }

  .preloader__brand img {
    width: 24px;
    height: 24px;
  }

}

@media (max-height: 520px) and (orientation: landscape) {
  .preloader__brand {
    top: max(18px, env(safe-area-inset-top, 0px));
  }
}

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

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:
    max(clamp(18px, 3vh, 34px), env(safe-area-inset-top, 0px))
    max(20px, env(safe-area-inset-right, 0px))
    max(clamp(26px, 4.5vh, 52px), env(safe-area-inset-bottom, 0px))
    max(20px, env(safe-area-inset-left, 0px));
}

/* Пока не загрузился 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 .hero-ascii { 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); }
.no-gsap .page .tabs__ring { display: none; }
.no-gsap .tab.is-active .tab__circle { box-shadow: 0 0 0 2px var(--acid); }

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

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

.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;
}

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

.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;
}

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

.media {
  position: relative;
  margin-top: clamp(12px, 2.2vh, 22px);
  width: min(640px, 92vw, max(320px, calc((100svh - 575px) * 1.7778)));
  min-width: 0;
  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__load {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  width: 100%;
  border: 0;
  border-radius: inherit;
  color: var(--white);
  background:
    radial-gradient(circle at 50% 42%, rgba(204, 249, 4, .13), transparent 31%),
    linear-gradient(145deg, rgba(15, 17, 11, .94), rgba(4, 5, 3, .985));
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.media__load[hidden] { display: none; }

.media__load-icon {
  position: relative;
  width: 50px;
  height: 50px;
  margin-bottom: 4px;
  border: 1.5px solid var(--acid);
  border-radius: 50%;
  transition: transform .22s var(--ease-out), background-color .22s var(--ease-out);
}

.media__load-icon::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 15px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid var(--acid);
}

.media__load-title {
  font-family: 'FindSans Pro', 'Roboto Flex', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
}

.media__load-note {
  color: rgba(242, 244, 236, .55);
  font-size: 11px;
  line-height: 1.2;
}

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

.media__load:disabled { cursor: progress; }
.media__load:disabled .media__load-icon { opacity: .72; }

.media__load:not(:disabled):active .media__load-icon { transform: scale(.94); }

@media (hover: hover) and (pointer: fine) {
  .media__load:not(:disabled):hover .media__load-icon {
    transform: scale(1.08);
    background: rgba(204, 249, 4, .08);
  }
}

.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('../assets/puws-logo-512.png') center / contain no-repeat;
          mask: url('../assets/puws-logo-512.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:focus-visible { outline: 2px solid #0A0B07; outline-offset: 3px; }

/* крестик закрытия сверху */
.launch__close {
  position: absolute;
  top: max(22px, env(safe-area-inset-top, 0px));
  right: max(26px, env(safe-area-inset-right, 0px));
  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:focus-visible { outline: 2px solid #0A0B07; outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .launch__fallback:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(10, 11, 7, .5);
  }

  .launch__close:hover {
    background: rgba(10, 11, 7, .1);
    transform: rotate(90deg);
  }
}

/* ============================================================
   Секции после 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;
  padding-bottom: .12em;
  margin-bottom: -.12em;
  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 {
  --feature-card-width: clamp(250px, calc((100vw - 108px) / 4), 333px);
  margin: 0;
  padding: 0;
  overflow: visible;
  background: #060606;
}

/* The whole composition is present before the story starts. The loader keeps
   it off-screen during page bootstrap, so there is no FOUC to mask here. */
.features .sect__label,
.features .hl-line,
.features .sect__sticker,
.features .fcard,
.features .fcard__title,
.features .fcard__sub,
.features .fring { opacity: 1; }

.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: flex;
  width: 100%;
  gap: 4px;
  margin-top: 24px;
  padding: 0 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

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

.features.is-story .fcards {
  display: grid;
  grid-template-columns: 333fr 333fr 333fr 257fr 59fr 13fr;
  width: 100%;
  padding-bottom: 0;
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
  pointer-events: none;
  contain: layout paint;
}

.features.is-story .fcard {
  width: auto;
  min-width: 0;
  overflow: hidden;
  scroll-snap-align: none;
  box-shadow: inset 0 0 0 0 rgba(204, 249, 4, 0);
  transition:
    background-color .36s var(--ease-out),
    box-shadow .28s var(--ease-out);
}

.features.is-story .fcard.is-active {
  box-shadow: inset 0 0 0 2px var(--acid);
}

.features.is-story .fcard__title,
.features.is-story .fcard__sub {
  flex: 0 0 auto;
  width: calc(var(--feature-card-width) - 24px);
}

.features.is-story .fring { display: none; }

.fcard {
  position: relative;
  flex: 0 0 var(--feature-card-width);
  min-width: 0;
  height: 271px;
  padding: 48px 0 0;   /* текст в фигме занимает всю ширину карточки */
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 24px;
  background-color: #111111;
  scroll-snap-align: start;
  -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__icon--morph {
  position: relative;
  isolation: isolate;
}

.fcard__icon-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-origin: 50% 50%;
}

.fcard__icon-layer--detail { z-index: 1; }

.fcard__icon-layer--compact {
  z-index: 2;
  opacity: 0;
  visibility: hidden;
}

.fcard__icon-layer--compact img {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}

.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: #858585;
  text-align: center;
}

/* скользящая лаймовая рамка активной карточки */
.fring {
  position: absolute;
  left: 0; top: 0;
  width: var(--feature-card-width); 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;
}

.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);
}

.why__line {
  display: block;
  overflow: hidden;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}

.why__line > span {
  display: block;
}

.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;
}

.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;
}

.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: #858585;
}

/* Сцена большой карточки: внутренний 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;
}

.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;
}

.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;
}

.start__sigil {
  position: absolute;
  left: 78.84972cqw;
  top: 0;
  width: 21.15028cqw;
  height: 21.15028cqw;
}

.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;
}

.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;
}

.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;
}

.start-step__node img {
  position: relative;
  z-index: 2;
  width: 4.45269cqw;
  height: 4.45269cqw;
}

.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;
}

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

.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: #858585;
}

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

.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;
  padding-bottom: .12em;
  margin-bottom: -.12em;
  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 .12em 0;
  margin-bottom: -.105em;
}

.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;
}

.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;
}

.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);
}

.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;
  padding-bottom: .06em;
  margin-bottom: -.06em;
  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: #858585;
}

.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;
  padding-bottom: .06em;
  margin-bottom: -.06em;
  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: #858585;
}

.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: #858585;
}

.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 mandatory;
    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;
}

.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;
}

.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__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: #858585;
}

.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: #858585;
  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;
  --faq-flow: 0;
  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: calc(57px + .12em);
  overflow: hidden;
  padding: 0 0 .12em;
  margin-bottom: -.12em;
}

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

.faq__globe {
  position: absolute;
  z-index: 1;
  left: 390px;
  top: -28px;
  width: 140px;
  height: 140px;
  object-fit: contain;
  image-rendering: pixelated;
}

.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: #8A8A8A;
}

.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;
  transition: background-color 220ms cubic-bezier(.23, 1, .32, 1);
}

.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;
}

.faq-item.is-open .faq-item__question {
  color: #8A8A8A;
  transform: translateY(var(--faq-question-shift)) scale(var(--faq-question-scale));
}

.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;
}

.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;
}

.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;
  pointer-events: none;
}

.closing-cta__glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .5s ease;
}

.closing-cta__glass.is-live { opacity: 1; }

/* Shown until (or instead of) the WebGL wall: the same panels of tapering
   glass, flattened into repeating gradients. */
.closing-cta__fallback {
  position: absolute;
  inset: -2px -40px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .78) 0%,
      rgba(255, 255, 255, .12) 13%,
      rgba(255, 255, 255, 0) 34%,
      rgba(255, 255, 255, .3) 78%,
      rgba(255, 255, 255, .82) 100%
    ),
    radial-gradient(
      ellipse 46% 56% at 50% 46%,
      rgba(176, 214, 8, .5) 0%,
      rgba(198, 238, 26, .22) 44%,
      rgba(204, 249, 4, 0) 100%
    ),
    repeating-linear-gradient(
      93deg,
      rgba(255, 255, 255, .92) 0px,
      rgba(233, 255, 150, .3) 7px,
      rgba(204, 249, 4, 0) 34px,
      rgba(150, 190, 0, .26) 84px,
      rgba(204, 249, 4, 0) 128px,
      rgba(255, 255, 255, .5) 174px,
      rgba(255, 255, 255, .92) 180px
    ),
    #CCF904;
}

/* Эллипс-подсветка из макета (Ellipse 17): бокс секции, раздутый на 128px
   по вертикали и 9px по горизонтали от кадра 1920×736, радиальная заливка
   #BCE504 от 100% в центре до 0% на границе эллипса. Проценты вместо
   пикселей — чтобы пропорция сохранялась на укороченной мобильной секции. */
.closing-cta__glow {
  position: absolute;
  inset: -17.39% -.47%;
  background: radial-gradient(
    closest-side,
    rgba(188, 229, 4, 1) 0%,
    rgba(188, 229, 4, 0) 100%
  );
  pointer-events: none;
}

.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 0 .12em;
  margin-bottom: -.12em;
}

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

.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;
}

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

.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: 386px;
  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__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 21px;
  border-bottom: 1px solid #111111;
}

.site-footer__nav {
  height: 158px;
  padding-top: 22px;
  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;
  bottom: 0;
  right: -16px;
  width: 1px;
  height: auto;
  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-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: -.06em;
  color: #5B5B5A;
  text-decoration: none;
}

.site-footer__bottom {
  padding-top: 24px;
  display: flex;
  align-items: center;
  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: #7A7A7A;
}

/* Подпись студии: «Designed in» и лого Blueprint по правому краю. */
.site-footer__credit {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.site-footer__credit-label {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: -.07em;
  white-space: nowrap;
  color: #5B5B5A;
}

.site-footer__credit-lockup {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 22px;
  text-decoration: none;
}

.site-footer__credit-mark {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  object-fit: contain;
}

.site-footer__credit-word {
  font-family: 'Google Sans Flex', 'FindSans Pro', sans-serif;
  font-size: 20px;
  font-weight: 650;
  line-height: 22px;
  font-stretch: 116%;
  font-variation-settings: 'wdth' 116;
  letter-spacing: -.06em;
  white-space: nowrap;
  color: #FFFFFF;
}

.site-footer__care {
  display: flex;
  align-items: center;
  gap: 7px;
}

.site-footer__heart {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  object-fit: contain;
  image-rendering: pixelated;
}

.site-footer__care p {
  font-family: 'Onest', 'FindSans Pro', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  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;
}

.faq-item__trigger:focus-visible {
  outline: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--acid);
}

.faq-item.is-open .faq-item__trigger:focus-visible {
  box-shadow: inset 0 0 0 2px #F4F6EE;
}

.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; }
  .site-footer__credit-lockup:hover .site-footer__credit-word { color: #E1FF5D; }
}

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

@media (max-width: 1300px) and (min-width: 769px) {
  .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: 769px) {
  .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;
    top: -18px;
    width: 96px;
    height: 96px;
  }

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

@media (max-width: 768px),
       (max-width: 932px) and (max-height: 520px) and (orientation: landscape) and (hover: none),
       (max-width: 932px) and (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  .brand { min-height: 44px; }

  .launch__fallback {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .closing {
    margin: 0 8px 8px;
    border-radius: 24px;
  }

  .faq {
    --faq-row: 60px;
    --faq-row-open: 60px;
    --faq-panel: 0px;
    --faq-question: 13px;
    --faq-question-open: 13px;
    --faq-question-scale: 1;
    --faq-question-shift: 0px;
    --faq-answer: 12px;
    --faq-flow: 1;
    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 {
    height: auto;
    min-height: var(--faq-row);
    border-radius: 14px;
  }

  .faq-item__trigger,
  .faq-item.is-open .faq-item__trigger {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: var(--faq-row);
    height: auto;
    padding: 14px 56px 14px 14px;
    align-items: center;
  }

  .faq-item__question {
    display: block;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.25;
    -webkit-line-clamp: unset;
  }

  .faq-item.is-open .faq-item__question {
    font-size: var(--faq-question-open);
    line-height: 1.25;
    transform: none;
  }

  .faq-item__panel,
  .faq-item.is-open .faq-item__panel {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 0;
    min-height: 0;
    visibility: hidden;
  }

  .faq-item.is-open .faq-item__panel {
    height: auto;
    visibility: visible;
  }

  .faq-item__panel-inner { padding: 0 14px 16px; }
  .faq-item__panel p {
    display: block;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    font-size: var(--faq-answer);
    line-height: 1.35;
  }
  .faq-item__toggle { right: 8px; }

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

  .closing-cta__fallback {
    inset: -2px -20px;
    background-size: auto, auto, 132px 100%, auto;
  }

  .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 {
    min-height: 0;
    margin-top: -36px;
    border-radius: 24px;
  }

  .site-footer__inner {
    width: 100%;
    padding: 44px 20px 24px;
  }

  .site-footer__top {
    gap: 18px;
    padding-bottom: 20px;
  }

  .site-footer__column { padding-left: 0; padding-right: 24px; }
  .site-footer__column:nth-child(2) { padding-left: 24px; padding-right: 0; }
  .site-footer__column:not(:last-child)::after { right: 0; }
  .site-footer__column h2 { font-size: 20px; }
  .site-footer__column a { font-size: 12px; }

  .site-footer__bottom {
    padding-top: 18px;
  }

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

  .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; padding-top: 18px; }

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

  .site-footer__column h2 { margin-bottom: 4px; }

  .site-footer__column:nth-child(2) { padding-left: 0; padding-right: 0; }

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

  .site-footer__column:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .site-footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .site-footer__credit { justify-items: start; gap: 6px; }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .site-footer__care {
    width: 100%;
    gap: 8px;
  }

  .site-footer__care p {
    line-height: 1.25;
    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: 769px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Ход sticky = дистанция, за которую проигрывается история, плюс полоса
     settle перед релизом. Полосу закладываем в саму высоту секции: если
     вычитать её из готового хода, история проигрывается на четверть быстрее.

     У .why и .start ход дополнительно увеличен: это две сцены, где элементы
     физически въезжают в кадр, и им нужна дистанция, чтобы движение читалось
     спокойным, а не мельканием. */
  html.has-scroll-scenes .why {
    height: calc(100vh + clamp(1800px, 235vh, 2850px));
    height: calc(100svh + clamp(1800px, 235svh, 2850px));
  }

  html.has-scroll-scenes .start {
    height: calc(100vh + clamp(1340px, 174vh, 1980px));
    height: calc(100svh + clamp(1340px, 174svh, 1980px));
  }

  html.has-scroll-scenes .benefits {
    height: calc(100vh + clamp(1000px, 122vh, 1360px));
    height: calc(100svh + clamp(1000px, 122svh, 1360px));
  }

  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 .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: 768px),
       (max-width: 932px) and (max-height: 520px) and (orientation: landscape) and (hover: none),
       (max-width: 932px) and (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  .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 mandatory;
    scrollbar-width: none;
  }

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

  .benefits__stage {
    position: relative;
    left: auto;
    width: max-content;
    height: auto;
    margin-left: 0;
    padding-top: 0;
    padding-right: max(20px, env(safe-area-inset-right, 0px), calc((100% - min(82vw, 295px)) / 2));
    padding-bottom: 10px;
    padding-left: max(20px, env(safe-area-inset-left, 0px), calc((100% - min(82vw, 295px)) / 2));
    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;
    transition: opacity 180ms var(--ease-out);
  }

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

  .benefits__stage .benefit-card__outline { display: none; }

  .benefits__stage .benefit-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    border: 2px solid var(--acid);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms var(--ease-out);
  }

  .benefits__stage .benefit-card.is-active::after { opacity: 1; }

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

@media (max-width: 768px),
       (max-width: 932px) and (max-height: 520px) and (orientation: landscape) and (hover: none),
       (max-width: 932px) and (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  .sect.tariffs { padding-inline: 0; }

  .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-top: 0;
    padding-right: max(20px, env(safe-area-inset-right, 0px), calc((100% - min(82vw, 300px)) / 2 + 20px));
    padding-bottom: 10px;
    padding-left: max(20px, env(safe-area-inset-left, 0px), calc((100% - min(82vw, 300px)) / 2 + 20px));
  }

  .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: 768px),
       (max-width: 932px) and (max-height: 520px) and (orientation: landscape) and (hover: none),
       (max-width: 932px) and (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  .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: 768px),
       (max-width: 932px) and (max-height: 520px) and (orientation: landscape) and (hover: none),
       (max-width: 932px) and (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  .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: clamp(120px, 38vw, 148px);
    height: clamp(120px, 38vw, 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-top: 0;
    padding-right: max(20px, env(safe-area-inset-right, 0px), calc((100% - min(84vw, 360px)) / 2));
    padding-bottom: 10px;
    padding-left: max(20px, env(safe-area-inset-left, 0px), calc((100% - min(84vw, 360px)) / 2));
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    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) {
  .features { --feature-card-width: clamp(240px, 44vw, 300px); }

  .fcards {
    margin-left: -48px;
    margin-right: -48px;
    width: calc(100% + 96px);
    padding: 0 48px 10px;
  }

  .fcard { scroll-snap-align: center; }

  .features.is-story .fcards {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    padding: 0;
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
}

@media (max-height: 619px) {
  .features__pin {
    height: auto;
    min-height: 0;
    padding-top: 32px;
    padding-bottom: 32px;
    overflow: hidden;
  }
}

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

.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: 768px),
       (max-width: 932px) and (max-height: 520px) and (orientation: landscape) and (hover: none),
       (max-width: 932px) and (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  :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;
    width: calc(100% + 40px);
    padding-top: 0;
    padding-right: max(20px, env(safe-area-inset-right, 0px), calc((100% - var(--feature-card-width)) / 2 + 20px));
    padding-bottom: 10px;
    padding-left: max(20px, env(safe-area-inset-left, 0px), calc((100% - var(--feature-card-width)) / 2 + 20px));
  }
}

/* Mobile hardening: preserve the desktop composition while making every
   flow section safe for narrow screens, display cutouts and touch input. */
@media (max-width: 768px),
       (max-width: 932px) and (max-height: 520px) and (orientation: landscape) and (hover: none),
       (max-width: 932px) and (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  .closing {
    margin-right: max(8px, env(safe-area-inset-right, 0px));
    margin-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    margin-left: max(8px, env(safe-area-inset-left, 0px));
  }

  .features__pin,
  .tariffs__pin,
  .sect.start {
    padding-right: max(20px, env(safe-area-inset-right, 0px));
    padding-left: max(20px, env(safe-area-inset-left, 0px));
  }

  .fcards,
  .tariff-grid,
  .why__board,
  .benefits__viewport {
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .why__title {
    width: auto;
    margin-right: max(20px, env(safe-area-inset-right, 0px));
    margin-left: max(20px, env(safe-area-inset-left, 0px));
  }

  .why__board {
    padding-right: max(20px, env(safe-area-inset-right, 0px), calc((100% - min(84vw, 360px)) / 2));
    padding-left: max(20px, env(safe-area-inset-left, 0px), calc((100% - min(84vw, 360px)) / 2));
    scroll-padding-right: max(20px, env(safe-area-inset-right, 0px), calc((100% - min(84vw, 360px)) / 2));
    scroll-padding-left: max(20px, env(safe-area-inset-left, 0px), calc((100% - min(84vw, 360px)) / 2));
  }

  .why-card--sites {
    height: min(112vw, 430px);
    min-height: 390px;
  }

  .why-card:not(.why-card--sites) {
    height: clamp(240px, 72vw, 300px);
    min-height: 240px;
    align-self: center;
  }

  .tariffs__head { min-height: clamp(130px, 31vw, 174px); }

  .tariffs__title {
    font-size: clamp(25px, 8.2vw, 60px);
    line-height: .92;
  }

  .tariffs__star {
    top: 18px;
    right: -10px;
    width: clamp(104px, 30vw, 142px);
    height: clamp(104px, 30vw, 142px);
  }

  .tariff-card {
    height: 405px;
    grid-template-rows: 75px 196px 61px 54px;
  }

  .tariff-card__cta {
    height: 44px;
    min-height: 44px;
  }

  .benefits__stage {
    padding-right: max(20px, env(safe-area-inset-right, 0px), calc((100% - min(82vw, 295px)) / 2));
    padding-left: max(20px, env(safe-area-inset-left, 0px), calc((100% - min(82vw, 295px)) / 2));
  }

  .benefits__viewport {
    scroll-padding-right: max(20px, env(safe-area-inset-right, 0px), calc((100% - min(82vw, 295px)) / 2));
    scroll-padding-left: max(20px, env(safe-area-inset-left, 0px), calc((100% - min(82vw, 295px)) / 2));
  }

  .benefits__stage .benefit-card:not(.is-active) { opacity: .76; }
  .benefits__stage .benefit-card {
    height: 292px;
    aspect-ratio: auto;
  }
  .benefit-card__copy { color: #AFAFAF; }

  .benefit-card__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: #C8C8C8;
  }

  .closing-cta__title {
    font-size: clamp(22px, 7vw, 34px);
    line-height: .92;
  }

  .site-footer__inner {
    padding-right: max(20px, env(safe-area-inset-right, 0px));
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
    padding-left: max(20px, env(safe-area-inset-left, 0px));
  }

  /* 38px, а не 44px: тап-таргет остаётся комфортным, но на узких экранах
     столбик из четырёх ссылок с 44px растягивал подвал на лишний экран.
     Правило живёт здесь, а не в блоке 520px, потому что этот @media идёт
     ниже по файлу и при равной специфичности перебивал бы его. */
  .site-footer__column a {
    min-height: 38px;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.25;
    color: #9A9A9A;
  }

  .site-footer__brand-link { min-height: 44px; }

  .site-footer__brand p {
    width: auto;
    max-width: 100%;
    white-space: normal;
    color: #8A8A8A;
  }
}

/* Phone hero: the desktop tab row becomes one native rail instead of
   jumping between two and three wrapped rows at neighbouring widths. */
@media (max-width: 768px),
       (max-width: 932px) and (max-height: 520px) and (orientation: landscape) and (hover: none),
       (max-width: 932px) and (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  .tabs {
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    padding: 6px calc(50% - 22px);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: calc(50% - 22px);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

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

  .tab {
    flex: 0 0 var(--tab-size);
    scroll-snap-align: center;
    scroll-snap-stop: normal;
  }

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

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

  .actions {
    width: min(100%, 360px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .actions .btn {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding-inline: 10px;
  }

  .actions .btn__label {
    font-size: clamp(11.5px, 3.35vw, 13px);
    white-space: nowrap;
  }

  .faq__title {
    font-size: clamp(30px, 9.5vw, 44px);
  }

  .faq__note a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .faq {
    --faq-answer: 13px;
  }

  .fcards,
  .tariff-grid {
    scroll-snap-type: x mandatory;
  }

  .fcards {
    scroll-padding-inline: 0;
  }

  .tariff-grid {
    scroll-padding-left: max(20px, env(safe-area-inset-left, 0px), calc((100% - min(82vw, 300px)) / 2 + 20px));
    scroll-padding-right: max(20px, env(safe-area-inset-right, 0px), calc((100% - min(82vw, 300px)) / 2 + 20px));
  }

  .fcard,
  .tariff-card,
  .benefits__stage .benefit-card,
  .why-card {
    scroll-snap-stop: always;
  }
}

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

@media (max-width: 768px) and (max-height: 520px) and (orientation: landscape),
       (min-width: 769px) and (max-width: 932px) and (max-height: 520px) and (orientation: landscape) and (hover: none),
       (min-width: 769px) and (max-width: 932px) and (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  .page {
    min-height: 0;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
  }

  .hero { justify-content: flex-start; }

  .hero__title {
    margin-top: 8px;
    font-size: clamp(32px, 10svh, 42px);
    line-height: .94;
  }

  .tabs { margin-top: 12px; }
  .section-label { margin-top: 8px; }

  .media {
    width: min(420px, 72vw);
    margin-top: 8px;
  }

  .actions { margin-top: 14px; }
}

@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; }
  .preloader__flash { animation: none !important; }
  * { transition-duration: .01ms !important; }
}