@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');

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

/* A fast second tap on controls must trigger the control again, not Safari's
   double-tap page zoom. Pinch zoom and normal page scrolling stay available. */
button,
a {
  touch-action: manipulation;
}

html, body {
  width: 100%;
  overflow-x: hidden;
}

body {
  background: #030303;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Scale wrapper: the fixed 390px design is uniformly scaled by JS to fill the wrapper's own
   width, 1:1 with the macet. Capped at 480px and centered so the site stays phone-narrow on
   desktop instead of stretching edge-to-edge — full-bleed only below that width (phones). */
.scale-wrap {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
}

.page {
  position: relative;
  width: 390px;
  transform-origin: top left;
  background: #030303;
}

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #030303;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/bg-glow.webp?v=20260809-1');
  background-size: cover;
  background-position: center top;
  opacity: 0.9;
}

.hero__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 15% 78%, rgba(0,0,0,0.55), transparent 70%),
    radial-gradient(ellipse 65% 45% at 90% 72%, rgba(0,0,0,0.5), transparent 70%),
    radial-gradient(ellipse 70% 30% at 50% 100%, rgba(115,140,165,0.25), transparent 70%);
  mix-blend-mode: overlay;
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding: 0 20px 40px;
  display: flex;
  flex-direction: column;
}

/* Top bar */
.hero__topbar {
  position: relative;
  height: 53px;
  margin-bottom: 11px;
}

.hero__logo {
  position: absolute;
  left: 4px;
  top: 15px;
  width: 27px;
  height: 34px;
}

.hero__center {
  position: absolute;
  left: 50%;
  top: 15px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero__badge {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px 0 14px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 150px;
  box-sizing: border-box;
  white-space: nowrap;
}

.hero__badge span {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.hero__badge-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  animation: badge-dot-blink 1.6s ease-in-out infinite;
}

@keyframes badge-dot-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.hero__lang {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 150px;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}

.hero__menu {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 315px;
  top: 24px;
  width: 41px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 5;
}

.hero__menu img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Photo carousel — card is 370px wide (10px bleed past the 20px inner padding on each side) */
.hero__carousel {
  position: relative;
  width: calc(100% + 20px);
  margin-top: 10px;
  margin-left: -10px;
  margin-right: -10px;
  aspect-ratio: 370 / 240;
  overflow: hidden;
  margin-bottom: 27px;
  cursor: grab;
  touch-action: pan-y;
}

.hero__carousel:active {
  cursor: grabbing;
}

.hero__carousel-track {
  display: flex;
  gap: 12px;
  height: 100%;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Each slide is its own separate rounded rectangle — with the 12px gap above, a genuine
   dark gap slides across between two independent cards, instead of one photo just
   swapping content inside a single fixed rounded frame. */
.hero__carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.hero__carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Carousel pagination dots — overlaid on the photo, 18px above its bottom edge */
.hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hero__dot {
  appearance: none;
  -webkit-appearance: none;
  width: 5px;
  height: 5px;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.hero__dot.is-active {
  background-color: #fff;
  transform: scale(1.4);
}

/* Title */
.hero__title {
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 200;
  font-size: 45px;
  line-height: 49px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #fff;
  margin-left: 9px;
  margin-bottom: 8px;
}

.hero__title-accent {
  color: #7f97b0;
}

/* Subtitle */
.hero__subtitle {
  display: flex;
  gap: 10px;
  margin-left: 9px;
  margin-bottom: 18px;
}

.hero__dash {
  width: 25px;
  height: 1px;
  margin-top: 9px;
  flex-shrink: 0;
}

.hero__subtitle-text {
  max-width: 269px;
  font-size: 15px;
  font-weight: 300;
  line-height: 18px;
  color: #fff;
}

.hero__subtitle-text .accent {
  color: #7f97b0;
  font-weight: 400;
}

html[lang="en"] .hero__subtitle-text {
  max-width: 300px;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.1px;
}

/* "new 2026" badge overlaid on the bottom-right corner of the photo carousel.
   Lives as a sibling of .hero__carousel (not a child) since the carousel has
   overflow:hidden for its slide track and would clip the badge's bottom edge. */
.hero__new-badge {
  position: absolute;
  left: 288px;
  top: 263px;
  width: 77px;
  height: 77px;
}

.hero__new-badge-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(151, 22, 61, 0.65);
  border: 1px solid rgba(183, 196, 212, 0.1);
  animation: new-badge-pulse 1.6s ease-out infinite;
}

@keyframes new-badge-pulse {
  0% { transform: scale(0.766); opacity: 0.85; }
  70% { transform: scale(1.2); opacity: 0; }
  100% { transform: scale(1.2); opacity: 0; }
}

.hero__new-badge-dot {
  position: absolute;
  left: 9px;
  top: 9px;
  width: 59px;
  height: 59px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #97163d;
  border: 1px solid rgba(183, 196, 212, 0.1);
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  color: #fff;
}

/* Price panel — "было $40 / сейчас $20" + CTA, replacing the old two-pill price row.
   350px wide = the 390px design width minus the standard 20px inner padding each side,
   so it sits full-width in .hero__inner without needing its own left offset. */
.hero__panel {
  position: relative;
  width: 100%;
  height: 200px;
  margin-bottom: 18px;
  border-radius: 10px;
  border: 1px solid rgba(127, 151, 176, 0.1);
  background-image:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 350 200' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.3'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(4.2307e-15 16.818 -18.5 3.662e-15 175 -4.4409e-14)'><stop stop-color='rgba(127,151,176,1)' offset='0'/><stop stop-color='rgba(127,151,176,0)' offset='1'/></radialGradient></defs></svg>"),
    linear-gradient(90deg, rgb(23, 25, 25) 0%, rgb(23, 25, 25) 100%);
}

.hero__panel-badge {
  position: absolute;
  left: 94px;
  top: 0;
  width: 162px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 7px 7px;
  background: #baf16e;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  color: #000;
}

/* Exact coordinates measured from the Figma node's own metadata (get_metadata on 252:326),
   verified pixel-for-pixel against a native 350x200 render of that node. "было"/"$40" are
   normal line-height text boxes in the macet; "сейчас"/"$20" are cap-height-trimmed boxes
   (Figma's text-box-trim), which is why they need the matching CSS property here — without
   it a normal-line-height box has extra leading above the glyphs that pushes them down
   relative to the trimmed pair, which is exactly what kept drifting out of alignment. */
.hero__panel-was {
  position: absolute;
  left: 36px;
  top: 63px;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 18px;
  color: #bfc1c1;
  white-space: nowrap;
}

.hero__panel-was-value {
  position: absolute;
  left: 89px;
  top: 57px;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 28px;
  color: #bfc1c1;
  white-space: nowrap;
  text-decoration: line-through;
  text-decoration-color: #e2311b;
  text-decoration-thickness: 2px;
}

.hero__panel-divider {
  position: absolute;
  left: 150px;
  top: 52px;
  width: 1px;
  height: 45px;
  background: #bfc1c1;
}

.hero__panel-now {
  position: absolute;
  left: 162px;
  top: 67px;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #baf16e;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.hero__panel-now-value {
  position: absolute;
  left: 239px;
  top: 58px;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 400;
  font-size: 46px;
  color: #fff;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.hero__panel-cta {
  position: absolute;
  left: 20px;
  top: 120px;
  width: 310px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 150px;
  background: linear-gradient(76.4deg, #7f97b0 44.5%, #b7c4d4 96%);
  text-decoration: none;
}

.hero__panel-cta span {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: #fff;
}

.hero__cta-arrow {
  width: 13px;
  height: 13px;
  transform: rotate(-135deg);
}

/* Start-date note */
.hero__start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #fff;
}

.hero__start img {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

/* ======================= Block 2 — Reasons ("Для кого этот курс") ======================= */
.reasons {
  position: relative;
  width: 100%;
  background: #030303;
  padding: 60px 19px 0;
}

.reasons__title {
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 200;
  font-size: 46px;
  line-height: 49px;
  letter-spacing: 0.92px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 34px;
}

.reasons__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reason-card {
  position: relative;
  width: 100%;
  height: 133px;
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
}

/* Alternating entrance direction: odd cards slide in from the left, even ones from the right */
.reason-card:nth-child(odd) {
  transform: translateX(-50px);
}

.reason-card:nth-child(even) {
  transform: translateX(50px);
}

.reason-card.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reason-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.reason-card--flip .reason-card__bg {
  transform: scaleY(-1);
}

.reason-card__num {
  position: absolute;
  left: 26px;
  top: 16px;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 22px;
  color: #525252;
}

.reason-card__text {
  position: absolute;
  left: 26px;
  top: 52px;
  margin: 0;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 20px;
  text-transform: uppercase;
  color: #fff;
}

html[lang="en"] .reason-card:nth-child(1) .reason-card__text {
  width: 290px !important;
}

html[lang="en"] .reason-card:nth-child(2) .reason-card__text {
  width: 315px;
  font-size: 16px;
}

/* ======================= Block 3 — Benefits ("Инкрустация — новый уровень чека") ======================= */
.benefits {
  position: relative;
  width: 100%;
  background: #030303;
  padding: 60px 19px 70px;
}

.benefits__title {
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 200;
  font-size: 46px;
  line-height: 49px;
  letter-spacing: 0.92px;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.benefits__subtitle {
  width: 248px;
  margin: 4px 0 0 83px;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 21px;
  text-transform: uppercase;
  color: #b7c4d4;
}

html[lang="en"] .benefits__subtitle {
  width: 320px;
  margin-left: 30px;
}

.benefits__list {
  list-style: none;
  margin: 43px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.benefit-card {
  position: relative;
  border-radius: 15px;
  border: 1px solid rgba(183, 196, 212, 0.1);
  overflow: hidden;
  opacity: 0;
  transform: translateY(50px);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
}

.benefit-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.benefit-card--tall {
  height: 280px;
  background-image:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 351 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.2'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0.34412 14.778 -22.141 1.3438 311.08 0.0000085342)'><stop stop-color='rgba(127,151,176,1)' offset='0'/><stop stop-color='rgba(127,151,176,0)' offset='1'/></radialGradient></defs></svg>"),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 351 280' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.2'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(1.6566e-15 -15.111 13.824 -2.1058e-7 108.74 280)'><stop stop-color='rgba(127,151,176,1)' offset='0'/><stop stop-color='rgba(127,151,176,0)' offset='1'/></radialGradient></defs></svg>"),
    linear-gradient(90deg, rgb(12, 12, 12) 0%, rgb(12, 12, 12) 100%);
}

.benefit-card--short {
  height: 260px;
  background-image:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 351 260' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.2'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0.34412 13.722 -22.141 1.2478 311.08 0.0000079246)'><stop stop-color='rgba(127,151,176,1)' offset='0'/><stop stop-color='rgba(127,151,176,0)' offset='1'/></radialGradient></defs></svg>"),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 351 260' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.2'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(1.6566e-15 -14.032 13.824 -1.9554e-7 108.74 260)'><stop stop-color='rgba(127,151,176,1)' offset='0'/><stop stop-color='rgba(127,151,176,0)' offset='1'/></radialGradient></defs></svg>"),
    linear-gradient(90deg, rgb(12, 12, 12) 0%, rgb(12, 12, 12) 100%);
}

html[lang="en"] .benefit-card:nth-child(2) {
  height: 260px;
}

.benefit-card__photo {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.benefit-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Source photos are portrait shots; rotating a portrait-cropped region 90deg turns it into
   the wide landscape band the card needs (same trick the macet itself uses), instead of
   just squashing/stretching a portrait photo into a short wide box. */
.benefit-card__photo--rotate img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 351px;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.benefit-card__row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 20px 0 23px;
}

.benefit-card__icon {
  flex-shrink: 0;
  display: block;
  margin-top: 2px;
}

.benefit-card__text {
  margin: 0;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
}

/* ======================= Block 4 — Program ("Чему вы научитесь") ======================= */
.program {
  position: relative;
  width: 100%;
  background: #030303;
  padding: 60px 19px 70px 20px;
}

.program__title {
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 200;
  font-size: 46px;
  line-height: 49px;
  letter-spacing: 0.92px;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

/* Two info cards */
.program__cards {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-card {
  position: relative;
  height: 76px;
  border-radius: 15px;
  border: 1px solid rgba(183, 196, 212, 0.1);
  overflow: hidden;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
}

.info-card:nth-child(odd) {
  transform: translateX(-50px);
}

.info-card:nth-child(even) {
  transform: translateX(50px);
}

.info-card.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.info-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.info-card__icon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 19px;
  margin-left: 19px;
  margin-right: 19px;
  display: flex;
  justify-content: center;
}

.info-card__icon img {
  display: block;
}

.info-card__text {
  position: relative;
  z-index: 1;
  width: 274px;
  margin: 0;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 21px;
  text-transform: uppercase;
  color: #fff;
}

/* Checklist */
.program__list {
  list-style: none;
  margin: 50px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.program-item {
  display: flex;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(50px);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
}

.program-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.program-item__check {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-left: 9px;
  margin-right: 13px;
  margin-top: 1px;
}

.program-item__check img {
  width: 17px;
  height: 17px;
  display: block;
}

.program-item__text {
  margin: 0;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
}

/* Bonus card */
.bonus {
  position: relative;
  margin-top: 60px;
  margin-bottom: 25px;
  height: 182px;
  border-radius: 30px;
  background: linear-gradient(202deg, #97163D 16.6%, #7C0E2F 71.8%);
  padding: 27px 26px 0;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.88);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
}

.bonus.is-visible {
  opacity: 1;
  transform: scale(1);
}

.bonus__head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.bonus__icon {
  width: 35px;
  height: 35px;
  display: flex;
  flex-shrink: 0;
}

.bonus__icon img {
  display: block;
}

.bonus__title {
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 200;
  font-size: 35px;
  line-height: 1;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #fff;
}

.bonus__text {
  width: 256px;
  margin: 16px 0 0;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
}

.bonus__text-strong {
  font-weight: 500;
}

html[lang="en"] .bonus__text {
  width: 298px;
  font-size: 15px;
  line-height: 19px;
}

html[lang="en"] .invest__item:nth-child(4) p {
  width: 280px !important;
  font-size: 15px;
}

/* Shared CTA button (matches the hero CTA) */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 70px;
  margin-top: 10px;
  border-radius: 150px;
  background: linear-gradient(76.4deg, #7f97b0 44.5%, #b7c4d4 96%);
  text-decoration: none;
}

.cta span {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: #fff;
}

.cta__arrow {
  width: 13px;
  height: 13px;
  transform: rotate(-135deg);
}

/* ======================= Block 5 — What's included ("Что входит в курс") ======================= */
.whatsin {
  position: relative;
  width: 100%;
  min-height: 595px;
  background: #030303;
  overflow: hidden;
  padding: 67px 0 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.whatsin__bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 525px;
  background: url('assets/whatsin-bg.webp?v=20260809-1') center/cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
  pointer-events: none;
}

.whatsin__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.whatsin__title {
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 200;
  font-size: 46px;
  line-height: 49px;
  letter-spacing: 0.92px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  margin: 0;
}

.whatsin__slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 36px;
}

.whatsin__num {
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 200;
  font-size: 60px;
  line-height: 0.85;
  letter-spacing: 2px;
  color: #738ca5;
}

.whatsin__text {
  width: 330px;
  max-width: 90vw;
  height: 44px;
  margin: 12px 0 0;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  color: #fff;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.whatsin__text.is-out {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.whatsin__text.is-in-start {
  opacity: 0;
  transform: scale(0.85);
  transition: none;
}

.whatsin__ruler-wrap {
  position: relative;
  width: 483px;
  height: 50px;
  margin-top: 50px;
  flex-shrink: 0;
}

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

.whatsin__ruler-marker {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 50px;
  background: #fff;
  transform: translateX(-1px);
  transition: left 0.15s ease, height 0.12s ease;
}

.whatsin__ruler-marker.is-shrink {
  height: 36px;
}

.whatsin__nav {
  display: flex;
  gap: 13px;
  margin-top: 50px;
}

.whatsin__arrow {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  border: none;
  background: none;
  width: 90px;
  height: 90px;
  cursor: pointer;
}

.whatsin__arrow img {
  display: block;
  width: 90px;
  height: 90px;
}

/* ======================= Block 6 — Reviews ("Результаты после курса") ======================= */
.reviews {
  position: relative;
  width: 100%;
  background: #030303;
  padding: 60px 0 60px 20px;
}

.reviews__title {
  width: 351px;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 200;
  font-size: 46px;
  line-height: 49px;
  letter-spacing: 0.92px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 40px;
}

.reviews__title-accent {
  color: #7f97b0;
}

.reviews__viewport {
  width: 100%;
  height: 449px;
  overflow: hidden;
  background: #030303;
  touch-action: pan-y;
  cursor: grab;
  /* Forces its own GPU compositing layer with hard-pixel bounds — works around a Safari
     seam/ghosting artifact that can appear at the clip edge when a transformed ancestor
     (our page-wide scale wrapper) contains an animated transform descendant. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.reviews__viewport:active {
  cursor: grabbing;
}

.reviews__track {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  height: 449px;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  transform: translateX(0) translateZ(0);
  -webkit-transform: translateX(0) translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.review-card {
  flex: 0 0 auto;
  width: 296px;
  height: 414px;
  border-radius: 15px;
  overflow: hidden;
  transform: translateY(35px);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The active (in-focus) card rises to its natural position; every other card sits lowered by 35px —
   never goes negative, so nothing clips against the track's overflow */
.review-card.is-active {
  transform: translateY(0);
}

.review-card__photo {
  width: 100%;
  height: 100%;
}

.review-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reviews__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 20px;
  margin-top: 25px;
}

.reviews__swipe {
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #4d4d4d;
}

.reviews__nav {
  display: flex;
  gap: 10px;
}

.reviews__arrow {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  border: none;
  background: none;
  width: 70px;
  height: 70px;
  cursor: pointer;
}

.reviews__arrow img {
  display: block;
  width: 70px;
  height: 70px;
}

.reviews > .cta {
  margin: 45px 20px 0 0;
}

/* ======================= Block 7 — Investment ("Инвестиция") ======================= */
.invest {
  position: relative;
  width: 100%;
  background: #030303;
  padding: 60px 20px 70px;
}

.invest__price-card {
  position: relative;
  height: 334px;
  border-radius: 30px;
  background: linear-gradient(87deg, #7f97b0 44.5%, #b7c4d4 96%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 46px;
  opacity: 0;
  transform: scale(0.88);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
}

.invest__price-card.is-visible {
  opacity: 1;
  transform: scale(1);
}

.invest__title {
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 200;
  font-size: 46px;
  line-height: 49px;
  letter-spacing: 0.92px;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.invest__subtitle {
  width: 220px;
  margin: 8px 0 0;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: underline;
  color: #fff;
}

.invest__price-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 32px 0 0;
}

.invest__price-old {
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 48px;
  color: #d2e1f4;
  text-decoration: line-through;
  text-decoration-color: #e2311b;
  text-decoration-thickness: 2px;
  margin-bottom: 28px;
}

.invest__price {
  margin: 0;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 400;
  font-size: 125px;
  line-height: 1;
  letter-spacing: -2px;
  color: #fff;
}

.invest__price-sign {
  font-size: 65px;
  letter-spacing: 1.3px;
  vertical-align: 20px;
}

.invest__list-title {
  width: 336px;
  max-width: 100%;
  margin: 40px 0 0;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 18px;
  text-transform: uppercase;
  color: #fff;
}

.invest__list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.invest__item {
  display: flex;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(50px);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
}

.invest__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.invest__item img.invest__icon {
  flex-shrink: 0;
  margin-right: 20px;
}

.invest__item p {
  margin: 0;
  width: 211px;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
}

.invest__bonus {
  position: relative;
  z-index: 0;
  margin-top: 60px;
  border-radius: 30px;
  background: linear-gradient(202deg, #97163D 16.6%, #7C0E2F 71.8%);
  box-shadow: 0 10px 35px rgba(151, 22, 61, 0.55);
  padding: 25px 20px 27px;
  opacity: 0;
  transform: scale(0.88);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
}

.invest__bonus.is-visible {
  opacity: 1;
  transform: scale(1);
}

.invest__bonus-text {
  width: 310px;
  max-width: 100%;
  margin: 0 0 25px;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
}

.invest__bonus-row {
  position: relative;
  padding-left: 48px;
  min-height: 33px;
  display: flex;
  align-items: center;
}

.invest__bonus-icon {
  position: absolute;
  left: 0;
  top: 0;
}

.invest__bonus-strong {
  width: 260px;
  max-width: 100%;
  margin: 0;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
}

.invest > .cta {
  position: relative;
  z-index: 1;
  margin-top: 10px;
}

/* ======================= Block 8 — Author ("Кто ведёт курс") ======================= */
.author {
  position: relative;
  width: 100%;
  background: #030303;
  padding: 60px 0 70px;
  overflow: hidden;
}

.author__head {
  position: relative;
}

.author__title {
  margin: 0 0 0 19px;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 200;
  font-size: 46px;
  line-height: 49px;
  letter-spacing: 0.92px;
  text-transform: uppercase;
  color: #fff;
}

.author__label {
  position: absolute;
  left: 161px;
  top: 65px;
  margin: 0;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 18px;
  text-transform: uppercase;
  color: #7f97b0;
  white-space: nowrap;
}

html[lang="en"] .author__label {
  position: static;
  margin: 30px 0 0 19px;
}

html[lang="en"] .author-item:nth-child(6) p {
  width: 300px !important;
}

.author__photo-wrap {
  position: relative;
  margin-top: 14px;
}

.author__photo {
  width: 100%;
  aspect-ratio: 390 / 470;
  -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
}

/* Two nail-work close-ups overlapping the main photo's corners, matching the macet —
   siblings of .author__photo (not children) so they aren't clipped by its bottom fade mask. */
.author__inset {
  position: absolute;
  width: 37.44%;
  aspect-ratio: 146 / 82;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(203, 203, 203, 0.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.author__inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.author__inset--bl {
  left: 4.87%;
  top: calc(74% - 20px);
}

.author__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.author__name {
  margin: -30px 0 0;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 35px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  position: relative;
  z-index: 1;
}

.author__ig-frame {
  width: 352px;
  max-width: calc(100% - 38px);
  margin: 30px auto 0;
  background: #0c0f14;
  border: 1px solid #2c2c2c;
  border-radius: 20px;
  padding: 5px 22px;
}

.author__ig {
  display: block;
  width: 100%;
  border-radius: 8px;
}

.author__list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0 19px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.author-item {
  display: flex;
  align-items: flex-start;
}

.author-item__check {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-right: 13px;
  margin-top: 1px;
}

.author-item__check img {
  width: 17px;
  height: 17px;
  display: block;
}

.author-item p {
  margin: 0;
  width: 321px;
  max-width: 100%;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
}

.author__quote {
  width: 343px;
  max-width: calc(100% - 38px);
  margin: 50px auto 0 19px;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 16px;
  line-height: 20px;
  color: #7f97b0;
}

/* ======================= Block 9 — FAQ ("Часто задаваемые вопросы") =======================
   Real accordion: collapsed by default, expands on click (grid-template-rows 0fr->1fr trick
   for a smooth height animation without measuring content height in JS). */
.faq {
  position: relative;
  width: 100%;
  background: #030303;
  padding: 60px 20px 70px;
}

.faq__title {
  margin: 0 0 30px;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 200;
  font-size: 46px;
  line-height: 49px;
  letter-spacing: 0.92px;
  text-transform: uppercase;
  color: #fff;
}

.faq__list {
  display: flex;
  flex-direction: column;
}

.faq-item__line {
  height: 1px;
  background: #fff;
  margin-bottom: 23px;
}

.faq-item__head {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}

.faq-item__num {
  flex-shrink: 0;
  width: 20px;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 25px;
  color: #fff;
}

.faq-item__q {
  flex: 1;
  width: 266px;
  max-width: 100%;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 25px;
  text-transform: uppercase;
  color: #fff;
}

.faq-item__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  transition: transform 0.3s ease;
}

.faq-item__icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(-45deg);
}

.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.faq-item.is-open .faq-item__panel {
  grid-template-rows: 1fr;
}

.faq-item__panel-inner {
  overflow: hidden;
  min-height: 0;
  padding-left: 28px;
}

.faq-item__a {
  width: 303px;
  max-width: 100%;
  margin: 0 0 20px;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
}

html[lang="en"] .faq-item:nth-child(5) .faq-item__a {
  font-size: 15px;
}

.faq__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 70px;
  margin-top: 40px;
  border-radius: 150px;
  background: linear-gradient(76.4deg, #7f97b0 44.5%, #b7c4d4 96%);
  text-decoration: none;
}

.faq__cta span {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: #fff;
}

.faq__cta-arrow {
  width: 13px;
  height: 13px;
  transform: rotate(-135deg);
}

/* ======================= Block 10 — Footer ======================= */
.footer {
  position: relative;
  width: 100%;
  background: #030303;
  padding: 60px 20px calc(60px + 70px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer__logo {
  width: 46px;
  height: 58px;
  margin-bottom: 33px;
}

.footer__text {
  width: 282px;
  max-width: 100%;
  margin: 0 0 26px;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 25px;
  color: #fff;
}

.footer__rights {
  width: 266px;
  max-width: 100%;
  margin: 20px 0 41px;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
}

.footer__links {
  margin: 0;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
}

.footer__links a {
  color: #fff;
  text-decoration: underline;
}

.footer__payments {
  display: block;
  width: 350px;
  max-width: 100%;
  height: auto;
  margin-top: 40px;
}

/* ======================= Sticky bottom CTA bar ======================= 
   Lives outside .page/.scale-wrap (position:fixed inside a transformed ancestor would be
   trapped inside that ancestor's box instead of the real viewport). Sized in vw relative
   to the 390px macet width so it scales in step with the rest of the page. */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20.513vw;
  max-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(22.5px);
  -webkit-backdrop-filter: blur(22.5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: none;
  border-radius: 7.692vw 7.692vw 0 0;
  max-width: 480px;
  margin: 0 auto;
  z-index: 100;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.55s ease;
  pointer-events: none;
}

.sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sticky-cta__btn {
  width: 68.718vw;
  max-width: 268px;
  height: 12.821vw;
  max-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(75.5deg, #7f97b0 44.5%, #b7c4d4 96%);
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 400;
  font-size: 3.590vw;
  line-height: 1.205;
  letter-spacing: normal;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  text-decoration: none;
}

@media (min-width: 480px) {
  .sticky-cta__btn {
    font-size: 14px;
  }
}

.author__quote-strong {
  font-weight: 400;
  color: #fff;
}

/* ======================= Slide-in menu panel ======================= 
   Lives outside .page/.scale-wrap for the same reason as the sticky CTA (position:fixed
   inside a transformed ancestor gets trapped inside that ancestor instead of the real
   viewport). Slides in from the right, per explicit request. */
/* .menu-panel is the full-viewport slide mechanism (must clear the whole real viewport
   width on translateX(100%), not just a capped column) — .menu-panel__inner is the actual
   visible content, capped and centered so it stays phone-narrow on desktop. Splitting these
   two is required: a translateX(100%) slide and a margin:auto horizontal center can't both
   live on the same element without the slide falling short on wide screens. */
.menu-panel {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}

.menu-panel.is-open {
  transform: translateX(0);
}

.menu-panel__inner {
  position: relative;
  min-height: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15.385vw 0;
}

.menu-panel__close {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 6.154vw;
  right: 6.154vw;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.menu-panel__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 1.5px;
  background: #000;
  transform-origin: center;
}

.menu-panel__close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu-panel__close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.menu-panel__logo {
  display: block;
  width: 40px;
  height: 51px;
  margin-bottom: 7.308vw;
  background-color: #7f97b0;
  -webkit-mask-image: url('assets/logo.svg?v=20260809-1');
  mask-image: url('assets/logo.svg?v=20260809-1');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.menu-panel__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.846vw;
  width: 100%;
}

.menu-panel__nav a {
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 5.128vw;
  line-height: 2;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  text-align: center;
}

.menu-panel__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 81.026vw;
  max-width: 316px;
  height: 17.949vw;
  max-height: 70px;
  margin-top: 16.154vw;
  border-radius: 999px;
  background: linear-gradient(78deg, #7f97b0 44.5%, #b7c4d4 96%);
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 4.103vw;
  letter-spacing: 0.43vw;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .menu-panel__inner {
    padding: 60px 0;
  }
  .menu-panel__close {
    top: 24px;
    right: 24px;
  }
  .menu-panel__logo {
    margin-bottom: 28.5px;
  }
  .menu-panel__nav {
    gap: 15px;
  }
  .menu-panel__nav a {
    font-size: 20px;
  }
  .menu-panel__cta {
    margin-top: 63px;
    font-size: 16px;
    letter-spacing: 1.68px;
  }
}

body.menu-open {
  overflow: hidden;
}

/* ======================= Hero text entrance animations ======================= */
/* .reveal-line is the static mask — it clips whatever slides through it so the line's
   own layout position never moves. .reveal-inner is what actually drives in from off
   to the side, sliding into place instead of just unmasking in place. */
.reveal-line {
  display: block;
  overflow: hidden;
}

.reveal-inner {
  display: block;
  animation-duration: 0.95s;
  /* Apple's UIKit-style deceleration curve — very fluid, no snap at the end */
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  animation-fill-mode: both;
}

.reveal-ltr {
  animation-name: reveal-ltr;
}

.reveal-rtl {
  animation-name: reveal-rtl;
}

@keyframes reveal-ltr {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes reveal-rtl {
  from {
    transform: translateX(110%);
  }
  to {
    transform: translateX(0);
  }
}

.reveal-up {
  opacity: 0;
  animation: reveal-up 0.85s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ======================= Payment method popup =======================
   Lives outside .page/.scale-wrap for the same fixed-position reason as the menu panel.
   Reuses the exact "390px design, scaled by JS to fill the viewport" approach as the main
   page (instead of converting every macet value to vw by hand), so every position/size
   below is the literal px number from the Figma frame — no manual rounding. */
.paypop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #030303;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.paypop.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.paypop__scalewrap {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
}

.paypop__page {
  position: relative;
  width: 390px;
  height: 737px;
  transform-origin: top left;
  background: #030303;
}

.paypop__close {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 342px;
  top: 13px;
  width: 31.396px;
  height: 31.396px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  z-index: 1;
}

.paypop__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22.2px;
  height: 1.5px;
  background: #fff;
  transform-origin: center;
}

.paypop__close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.paypop__close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.paypop__title {
  position: absolute;
  left: 50%;
  top: 36px;
  width: 284px;
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 200;
  font-size: 32px;
  line-height: 35px;
  letter-spacing: 0.64px;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}

.paypop__subtitle {
  position: absolute;
  left: 50%;
  top: 121px;
  width: 278px;
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 16px;
  letter-spacing: 0.3px;
  text-align: center;
  color: #c6c6c6;
}

.paypop__card {
  position: absolute;
  left: 20px;
  width: 351px;
  border-radius: 15px;
  border: 1px solid;
}

.paypop__card--stripe {
  top: 174px;
  height: 240px;
  border-color: rgba(99, 91, 255, 0.2);
  background-image:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 351 240' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.2'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-1.8743e-14 17.365 -30.351 -0.064368 311.08 0.000011395)'><stop stop-color='rgba(99,91,255,1)' offset='0'/><stop stop-color='rgba(99,91,255,0)' offset='1'/></radialGradient></defs></svg>"),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 351 240' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.3'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-0.12412 -17.788 18.985 -0.26402 108.74 240)'><stop stop-color='rgba(99,91,255,1)' offset='0'/><stop stop-color='rgba(99,91,255,0)' offset='1'/></radialGradient></defs></svg>"),
    linear-gradient(90deg, rgb(9, 8, 28) 0%, rgb(9, 8, 28) 100%);
}

.paypop__card--other {
  top: 424px;
  height: 230px;
  border-color: rgba(255, 255, 255, 0.2);
  background-image:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 351 230' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.2'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-1.8743e-14 16.641 -30.351 -0.061686 311.08 0.00001092)'><stop stop-color='rgba(255,255,255,1)' offset='0'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>"),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 351 230' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.2'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-0.12412 -17.047 18.985 -0.25302 108.74 230)'><stop stop-color='rgba(255,255,255,1)' offset='0'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>"),
    linear-gradient(90deg, rgb(14, 14, 14) 0%, rgb(14, 14, 14) 100%);
}

.paypop__badge {
  position: absolute;
  left: 114px;
  top: 22px;
  width: 185px;
  height: 27px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
  border-radius: 5px;
  background: #1a1849;
  border: 1px solid #211f5c;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.24px;
  color: #635bff;
}

.paypop__badge img {
  width: 14px;
  height: 14px;
  flex: none;
}

html[lang="en"] .paypop__badge {
  width: max-content;
  padding: 0 10px;
}

.paypop__icon {
  position: absolute;
  left: 21px;
  width: 71px;
  height: 71px;
  border-radius: 50%;
  overflow: hidden;
}

.paypop__icon--stripe {
  top: 67px;
  background: #635bff;
}

.paypop__icon--other {
  top: 29px;
  background: #0e0e0e;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.paypop__icon-chat {
  width: 34px;
  height: 34px;
}

.paypop__icon-mask {
  position: absolute;
  overflow: hidden;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 71px 71px;
  mask-size: 71px 71px;
}

.paypop__icon-mask img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.paypop__icon-mask--stripe {
  left: -17px;
  top: 6px;
  width: 105px;
  height: 59px;
  -webkit-mask-image: url('assets/popup-mask-circle.svg?v=20260809-1');
  mask-image: url('assets/popup-mask-circle.svg?v=20260809-1');
  -webkit-mask-position: 17px -6px;
  mask-position: 17px -6px;
}

.paypop__card-title {
  position: absolute;
  left: 114px;
  margin: 0;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 35px;
  letter-spacing: 0.4px;
  color: #fff;
}

.paypop__card--stripe .paypop__card-title { top: 60px; width: 169px; }
.paypop__card--other .paypop__card-title { left: 109px; top: 19px; width: 197px; }

.paypop__card-desc {
  position: absolute;
  left: 114px;
  margin: 0;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.26px;
  color: #c6c6c6;
}

.paypop__card--stripe .paypop__card-desc { top: 97px; width: 229px; }
.paypop__card-desc--other { left: 109px; top: 59px; width: 205px; }

.paypop__btn {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 23px;
  width: 304px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  border: 1px solid transparent;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.32px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

/* Border is a gradient (per the macet's stroke paint, bottom → top), which plain
   border-color can't express — the padding-box/border-box double-background trick
   lets the fill and the gradient stroke coexist while still respecting border-radius. */
.paypop__btn--stripe {
  top: 167px;
  background:
    linear-gradient(180deg, #817bff, #635bff) padding-box,
    linear-gradient(to top, #4f48e6, #aaa5ff) border-box;
}

.paypop__btn--other {
  top: 159px;
  background:
    linear-gradient(180deg, #676560, #4a463e) padding-box,
    linear-gradient(to top, #3c3831, #86847d) border-box;
}

.paypop__footnote {
  position: absolute;
  left: 70px;
  top: 674px;
  width: 250px;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  font-family: 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 14px;
  color: #999;
}

.paypop__footnote img {
  width: 20px;
  height: 20px;
  flex: none;
}

html[lang="en"] .paypop__footnote {
  left: 50%;
  width: max-content;
  align-items: center;
  transform: translateX(-50%);
}

body.paypop-open {
  overflow: hidden;
}