/* ==========================================================================
   landing.css — главная страница
   ========================================================================== */

/* Герой ==================================================================== */
.hero { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 64px) 0 clamp(56px, 6vw, 104px); }
/* Розетка: сам блок сдвигается и поворачивается вслед за прокруткой (motion.js),
   рисунок внутри появляется и медленно вращается (motion.css) */
.hero__art {
  position: absolute; z-index: 0; pointer-events: none;
  width: 620px; aspect-ratio: 1; right: -300px; top: -240px;
  opacity: .75;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--sr, 0deg));
}
.hero__art::before { content: ""; position: absolute; inset: 0; background: url("../img/rosette.svg") center / contain no-repeat; }
@media (min-width: 1024px) { .hero__art { width: 980px; right: -250px; top: -250px; opacity: 1; } }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 512px); gap: 72px; align-items: center; } }
.hero h1 { max-width: 17ch; }
.hero .lede { margin-top: 22px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__facts { display: grid; gap: 10px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); max-width: 520px; list-style: none; padding-left: 0; }
.hero__facts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: .9375rem; color: var(--ink-2); }
.hero__facts .ic { margin-top: 2px; color: var(--violet); }

/* Досье направления — визовая наклейка */
.visa-stage { perspective: 1400px; }
.visa { padding: 8px; box-shadow: var(--sh-3); overflow: hidden; }
.visa__tabs { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
/* Белая плашка под выбранной вкладкой: одна на все вкладки, переезжает к выбранной */
.visa__ink { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 14px; background: #fff; box-shadow: var(--sh-1); pointer-events: none; }
.visa__tab {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 6px; padding: 10px 2px 8px;
  border: 0; border-radius: 14px; background: transparent;
  font-weight: 500; font-size: .8125rem; line-height: 1.2; color: var(--ink-2);
  transition: background var(--fast), color var(--fast), box-shadow var(--fast);
}
.visa__tab:hover { background: rgba(255, 255, 255, .5); color: var(--ink); }
.visa__tab[aria-selected="true"] { background: transparent; color: var(--ink); }
/* Иридисцентный слой и блик: без движения это просто фон карточки */
.foil { position: absolute; inset: 0; z-index: -2; background: var(--iris); border-radius: inherit; pointer-events: none; }
.visa__sheen { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; }
.visa__body { margin-top: 8px; padding: 20px; background: rgba(255, 255, 255, .95); border-radius: 18px; }
@media (min-width: 720px) { .visa__body { padding: 26px 28px; } }
.visa__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.visa__head h2 { font-size: clamp(1.625rem, 1.4rem + 1vw, 2rem); line-height: 1.1; }
.visa__head .price { font-size: 1.375rem; }
.visa__tagline { margin-top: 8px; color: var(--ink-2); font-size: .9375rem; }
.visa__rows { margin-top: 14px; }
.visa__rows dd small { display: block; font-weight: 400; color: var(--ink-3); font-size: .8125rem; margin-top: 1px; }
.visa__mrz { padding: 12px 12px 6px; }
.visa__mrz .mrz { color: rgba(14, 26, 58, .62); font-size: .6875rem; }

/* «Платформа» и «Вы» ======================================================= */
.ledger { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.ledger__col { padding: 24px; border-radius: var(--r-box); }
@media (min-width: 720px) { .ledger__col { padding: 32px; } }
.ledger__col--ai { background: var(--paper); box-shadow: var(--sh-2); }
.ledger__col--you { border: 1px solid var(--line-2); }
.ledger__who { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ledger__who span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: #fff; }
.ledger__col--you .ledger__who span { background: var(--ink); }
.ledger__who h3 { font-family: var(--display); font-weight: 400; font-size: 1.375rem; }
.ledger .ticks li { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ledger .ticks li:last-child { border-bottom: 0; padding-bottom: 0; }
.ledger__col--you .ticks li::before { background: var(--ink-3); -webkit-mask-image: var(--i-arrow-right); mask-image: var(--i-arrow-right); }

/* Финальный блок =========================================================== */
.final { position: relative; overflow: hidden; padding: clamp(36px, 5vw, 64px); text-align: center; }
.final > * { position: relative; }
.final > .foil { position: absolute; }
.final__seal { position: absolute !important; z-index: -1; width: 420px; aspect-ratio: 1; right: -170px; bottom: -230px; background: url("../img/rosette.svg") center / contain no-repeat; opacity: .9; mix-blend-mode: multiply; pointer-events: none; }
@media (min-width: 900px) { .final__seal { width: 620px; right: -220px; bottom: -330px; } }
.final h2 { max-width: 20ch; margin-inline: auto; }
.final .lede { margin: 14px auto 0; color: var(--ink-2); }
.final .row { justify-content: center; margin-top: 26px; }