/* ═══════════════════════════════════════════════════════════════
   Pink Box — hero
   Sizing: --px is "one pixel of the 1536×1024 reference comp", so every
   value below can be written in the comp's own numbers and still scale.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* 16px at the 1536×1024 reference; also bounded by height so the whole
     composition keeps its proportions on short desktop viewports. */
  --k: clamp(0.62rem, min(1.0417vw, 1.75vh), 1.06rem);
  --px: calc(var(--k) / 16);

  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.80);
  --ink-dim: rgba(255, 255, 255, 0.62);
  --accent: #d591a2;
  --accent-hi: #ebbcc8;
  --accent-2: #ae83e3;    /* plum — secondary accent, the "midnight" half of the palette */
  --accent-2-hi: #cbb2f5;
  --plum-900: #342126;   /* = the hero backdrop, sampled from the plate */
  --plum-800: #382227;

  --glass: rgba(255, 255, 255, 0.055);
  --glass-line: rgba(255, 255, 255, 0.13);

  --ease: cubic-bezier(0.22, 0.8, 0.28, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* Any class that sets `display` outranks the UA rule for [hidden], which
   silently breaks every JS-toggled empty state. Make the attribute win. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--plum-900);
  color: var(--ink);
  font-family: Vazirmatn, "Segoe UI", Tahoma, system-ui, sans-serif;
  font-size: calc(16 * var(--px));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
.ico { flex: none; width: 1.25em; height: 1.25em; }

svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── stage ──────────────────────────────────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: clip;
  --mx: 0;              /* pointer parallax, -1 … 1 */
  --my: 0;

  /* copy + feature bar stack from the bottom against the inline-start (right) edge */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: clamp(18px, 8.7vh, calc(89 * var(--px)));
  padding: calc(150 * var(--px)) calc(132 * var(--px)) calc(74 * var(--px));
}

.hero__media { position: absolute; inset: 0; z-index: -3; }

.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the plate is 1800×1024: anchored left, a 3:2 viewport frames exactly the
     1536×1024 comp and wider viewports reveal the extra backdrop */
  object-position: 0% 18%;
  transform: scale(1.045) translate3d(calc(var(--mx) * -14px), calc(var(--my) * -10px), 0);
  transition: transform 900ms var(--ease);
  animation: photo-in 1400ms var(--ease-out) both;
}

/* soft rose key light that breathes behind the model */
.hero__glow {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(34% 40% at 44% 38%, rgba(217, 147, 164, 0.16), transparent 70%),
    radial-gradient(46% 52% at 76% 32%, rgba(167, 95, 113, 0.16), transparent 74%);
  mix-blend-mode: screen;
  animation: breathe 11s ease-in-out infinite;
}

.hero__vignette {
  position: absolute;
  inset: 0;
  background:
    /* the copy column sits over the right side of the frame (RTL start) —
       the photo's own tone can't be trusted to stay dark there, so this
       darkens that half on purpose regardless of what the plate looks like */
    linear-gradient(to right, transparent 38%, rgba(20, 10, 13, 0.42) 62%, rgba(20, 10, 13, 0.6) 100%),
    radial-gradient(120% 100% at 46% 44%, transparent 48%, rgba(25, 14, 17, 0.5) 100%),
    linear-gradient(to top, rgba(25, 14, 17, 0.26), transparent 30%);
}

/* dissolves the photo into the page colour instead of cutting it off.
   The last stop is exactly the colour .page starts from, so the join is seamless. */
.hero__hem {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 44%;
  /* Pure fade, no light of its own: the glow that crosses the join lives in
     .seam, which spans both sides, so there is nothing to colour-match.
     The last stop is the page's own colour, so only detail fades — not tone. */
  background:
    linear-gradient(to top,
      #322024 0%,
      rgba(50, 32, 36, 0.98) 9%,
      rgba(52, 33, 38, 0.88) 22%,
      rgba(53, 34, 39, 0.66) 40%,
      rgba(54, 34, 39, 0.42) 58%,
      rgba(55, 35, 40, 0.22) 75%,
      rgba(55, 35, 40, 0.07) 89%,
      transparent 100%);
}

/* ── butterflies & dust ─────────────────────────────────────── */

.fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.bfly { position: absolute; will-change: transform; }
.bfly img { display: block; width: 100%; height: auto; }

.bfly--1 {
  top: 16%; right: 34%;
  width: calc(96 * var(--px));
  animation: drift-1 19s ease-in-out infinite;
  filter: drop-shadow(0 0 calc(14 * var(--px)) rgba(204, 126, 146, 0.45));
}
.bfly--2 {
  top: 47%; right: 18%;
  width: calc(64 * var(--px));
  opacity: 0.85;
  animation: drift-2 24s ease-in-out infinite;
  filter: drop-shadow(0 0 calc(12 * var(--px)) rgba(204, 126, 146, 0.4));
}
.bfly--3 {
  top: 68%; right: 8%;
  width: calc(48 * var(--px));
  opacity: 0.6;
  animation: drift-3 16s ease-in-out infinite;
}

.bfly img { animation: flutter 340ms ease-in-out infinite alternate; }
.bfly--2 img { animation-duration: 280ms; }
.bfly--3 img { animation-duration: 400ms; }

.dust { position: absolute; inset: 0; }
.dust i {
  position: absolute;
  bottom: -10px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(248, 216, 224, 0.9);
  box-shadow: 0 0 8px rgba(231, 164, 181, 0.9);
  animation: float-up linear infinite;
}

/* ── navigation ─────────────────────────────────────────────── */

.nav {
  position: absolute;
  inset-block-start: calc(24 * var(--px));
  inset-inline: calc(54 * var(--px));
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--px));
  animation: nav-in 900ms 120ms var(--ease-out) both;
}

.brand { display: flex; align-items: center; gap: calc(14 * var(--px)); }
.brand__text { display: grid; justify-items: end; line-height: 1.15; }
.brand__name { font-size: calc(22 * var(--px)); font-weight: 800; letter-spacing: .01em; }
.brand__tag { font-size: calc(11.5 * var(--px)); color: var(--ink-dim); font-weight: 400; }

.brand__mark {
  display: grid;
  place-items: center;
  width: calc(64 * var(--px));
  height: calc(64 * var(--px));
  border-radius: 50%;
  border: 1px solid rgba(234, 180, 193, 0.55);
  font-size: calc(24 * var(--px));
  font-weight: 800;
  background: rgba(255, 255, 255, 0.03);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease), border-color 400ms;
}
.brand:hover .brand__mark {
  transform: rotate(-8deg) scale(1.06);
  border-color: rgba(247, 208, 218, 0.9);
  box-shadow: 0 0 calc(26 * var(--px)) rgba(213, 145, 162, 0.45);
}

.nav__links { display: flex; align-items: center; gap: calc(10 * var(--px)); }

.nav__link {
  position: relative;
  padding: calc(11 * var(--px)) calc(18 * var(--px));
  border-radius: 999px;
  font-size: calc(15.5 * var(--px));
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 240ms var(--ease), background-color 240ms var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: calc(4 * var(--px));
  inset-inline: 50%;
  height: 1.5px;
  background: var(--accent-hi);
  border-radius: 2px;
  transition: inset-inline 300ms var(--ease), opacity 300ms;
  opacity: 0;
}
.nav__link:hover { color: #fff; }
.nav__link:hover::after { inset-inline: calc(20 * var(--px)); opacity: 1; }

.nav__link.is-active {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.09));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
}
.nav__link.is-active::after { display: none; }

.nav__tools { display: flex; align-items: center; gap: calc(11 * var(--px)); }

/* ── account menu under the user icon ───────────────────────────── */

.usermenu { position: relative; }

.usermenu__pop {
  position: absolute;
  inset-block-start: calc(100% + 10 * var(--px));
  /* the tools sit at the physical left in RTL, so pin the menu's left edge to
     the button and let it open rightwards — never off the screen edge */
  inset-inline-end: 0;
  z-index: 90;
  min-width: calc(220 * var(--px));
  padding: calc(8 * var(--px));
  border-radius: calc(16 * var(--px));
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(39, 22, 26, 0.94);
  backdrop-filter: blur(20px) saturate(130%);
  box-shadow: 0 calc(20 * var(--px)) calc(48 * var(--px)) rgba(18, 8, 11, 0.55);
  animation: menu-in 220ms var(--ease-out) both;
}
.usermenu__pop[hidden] { display: none; }

.usermenu__who {
  display: grid;
  gap: calc(3 * var(--px));
  padding: calc(10 * var(--px)) calc(12 * var(--px)) calc(12 * var(--px));
  margin-block-end: calc(6 * var(--px));
  border-block-end: 1px solid rgba(255, 255, 255, 0.09);
}
.usermenu__who span { font-size: calc(11.5 * var(--px)); font-weight: 300; color: var(--ink-dim); }
.usermenu__who b { font-size: calc(14 * var(--px)); font-weight: 600; font-variant-numeric: tabular-nums; }

.usermenu__pop a,
.usermenu__pop button {
  display: flex;
  align-items: center;
  gap: calc(11 * var(--px));
  width: 100%;
  padding: calc(11 * var(--px)) calc(12 * var(--px));
  border: 0;
  border-radius: calc(11 * var(--px));
  background: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: calc(13.5 * var(--px));
  font-weight: 500;
  text-align: start;
  cursor: pointer;
  transition: color 200ms, background-color 220ms var(--ease);
}
.usermenu__pop svg { flex: none; width: calc(17 * var(--px)); height: calc(17 * var(--px)); }
.usermenu__pop a:hover,
.usermenu__pop button:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.usermenu__pop .is-out:hover { color: #f0a0b4; background: rgba(226, 113, 143, 0.12); }

@keyframes menu-in {
  from { opacity: 0; transform: translateY(calc(-6 * var(--px))) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.iconbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(52 * var(--px));
  height: calc(52 * var(--px));
  border: 1px solid var(--glass-line);
  border-radius: calc(15 * var(--px));
  background: var(--glass);
  backdrop-filter: blur(14px);
  color: #fff;
  cursor: pointer;
  transition: transform 260ms var(--ease), background-color 260ms, border-color 260ms;
}
.iconbtn svg { width: calc(21 * var(--px)); height: calc(21 * var(--px)); }
.iconbtn:hover {
  transform: translateY(calc(-3 * var(--px)));
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.28);
}
.iconbtn:active { transform: translateY(0) scale(0.96); }

.iconbtn__badge {
  position: absolute;
  inset-block-start: calc(-6 * var(--px));
  inset-inline-start: calc(-6 * var(--px));
  min-width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  padding-inline: calc(5 * var(--px));
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #c47186, #984a5e);
  font-size: calc(11 * var(--px));
  font-weight: 700;
  box-shadow: 0 calc(3 * var(--px)) calc(10 * var(--px)) rgba(152, 74, 94, 0.6);
  animation: badge-pop 2.8s var(--ease) infinite;
}

.iconbtn--menu { display: none; }

/* ── copy block ─────────────────────────────────────────────── */

.copy {
  position: relative;
  z-index: 2;
  width: calc(468 * var(--px));
  text-align: start;
  transform: translate3d(calc(var(--mx) * 10px), calc(var(--my) * 7px), 0);
  transition: transform 900ms var(--ease);
}

.eyebrow {
  margin: 0 0 calc(26 * var(--px));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(14 * var(--px));
  font-size: calc(14.5 * var(--px));
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: .01em;
  text-shadow: 0 calc(2 * var(--px)) calc(12 * var(--px)) rgba(15, 6, 9, 0.5);
  animation: rise 800ms 260ms var(--ease-out) both;
}
.eyebrow i {
  width: calc(30 * var(--px));
  height: 1px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}
.eyebrow i:last-child { background: linear-gradient(to right, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); }

.title {
  margin: 0 0 calc(30 * var(--px));
  font-size: calc(88 * var(--px));
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -0.01em;
  text-shadow:
    0 calc(2 * var(--px)) calc(10 * var(--px)) rgba(15, 6, 9, 0.5),
    0 calc(6 * var(--px)) calc(34 * var(--px)) rgba(34, 14, 19, 0.6);
}
.title .line { display: block; overflow: hidden; padding-block: 0.06em; }
.title .line > span {
  display: block;
  animation: line-in 1100ms var(--ease-out) both;
}
.title .line:nth-child(1) > span { animation-delay: 340ms; }
.title .line:nth-child(2) > span { animation-delay: 460ms; }

.title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent-hi) 0 38%, #fceff2 48%, var(--accent-hi) 58% 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s 1.6s ease-in-out infinite;
}

.lede {
  margin: 0 0 calc(46 * var(--px));
  font-size: calc(19.5 * var(--px));
  font-weight: 300;
  line-height: 2.1;
  color: var(--ink-soft);
  text-shadow: 0 calc(2 * var(--px)) calc(14 * var(--px)) rgba(15, 6, 9, 0.45);
  animation: rise 900ms 620ms var(--ease-out) both;
}

.actions {
  display: flex;
  align-items: center;
  gap: calc(38 * var(--px));
  animation: rise 900ms 760ms var(--ease-out) both;
}

.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(18 * var(--px));
  width: calc(218 * var(--px));
  height: calc(72 * var(--px));
  border-radius: 999px;
  font-size: calc(19 * var(--px));
  font-weight: 600;
  background: linear-gradient(to left, rgba(120, 72, 84, 0.94), rgba(92, 52, 62, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 calc(16 * var(--px)) calc(42 * var(--px)) rgba(66, 30, 39, 0.55);
  backdrop-filter: blur(8px);
  transition: transform 260ms var(--ease), box-shadow 320ms var(--ease), background-color 320ms;
  will-change: transform;
}
.btn:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 calc(20 * var(--px)) calc(52 * var(--px)) rgba(162, 78, 99, 0.55);
}
.btn:active { transform: scale(0.975) !important; }

.btn__label { white-space: nowrap; }

.btn__arrow {
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  transition: transform 320ms var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(calc(-5 * var(--px))); }

.btn__shine {
  position: absolute;
  inset-block: -50%;
  inset-inline-start: -60%;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.30), transparent);
  transform: skewX(-16deg);
  animation: sweep 5.5s 2s var(--ease) infinite;
}

.textlink {
  position: relative;
  font-size: calc(18 * var(--px));
  font-weight: 500;
  color: var(--ink-soft);
  padding-block: calc(10 * var(--px));
  transition: color 240ms;
}
.textlink::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: calc(14 * var(--px));
  width: calc(66 * var(--px));
  height: 1.5px;
  border-radius: 2px;
  background: var(--accent);
  transition: width 340ms var(--ease), inset-inline-start 340ms var(--ease), background-color 240ms;
}
.textlink:hover { color: #fff; }
.textlink:hover::after { width: 100%; inset-inline-start: 0; background: var(--accent-hi); }

/* ── feature bar ────────────────────────────────────────────── */

.features {
  position: relative;
  z-index: 2;
  width: calc(600 * var(--px));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: calc(22 * var(--px)) calc(10 * var(--px)) calc(26 * var(--px));
  border-radius: calc(22 * var(--px));
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 calc(22 * var(--px)) calc(60 * var(--px)) rgba(29, 12, 16, 0.42);
  animation: rise 1000ms 900ms var(--ease-out) both;
}

.feat {
  display: grid;
  justify-items: center;
  gap: calc(4 * var(--px));
  padding-inline: calc(6 * var(--px));
  text-align: center;
  cursor: default;
  transition: transform 320ms var(--ease);
  animation: rise 700ms var(--ease-out) both;
}
.feat:nth-child(1) { animation-delay: 1000ms; }
.feat:nth-child(2) { animation-delay: 1080ms; }
.feat:nth-child(3) { animation-delay: 1160ms; }
.feat:nth-child(4) { animation-delay: 1240ms; }

.feat:hover { transform: translateY(calc(-5 * var(--px))); }

.feat__icon {
  width: calc(30 * var(--px));
  height: calc(30 * var(--px));
  margin-block-end: calc(12 * var(--px));
  color: #fff;
  transition: transform 380ms var(--ease), filter 380ms;
}
.feat:hover .feat__icon {
  transform: scale(1.14) rotate(-4deg);
  filter: drop-shadow(0 0 calc(12 * var(--px)) rgba(231, 164, 181, 0.8));
}

.feat__title { font-size: calc(14.5 * var(--px)); font-weight: 600; }
.feat__sub { font-size: calc(12.5 * var(--px)); font-weight: 300; color: var(--ink-dim); }

/* ── scroll cue ─────────────────────────────────────────────── */

.scrollcue {
  position: absolute;
  z-index: 2;
  inset-block-end: calc(26 * var(--px));
  inset-inline-end: calc(54 * var(--px));
  display: grid;
  place-items: center;
  width: calc(40 * var(--px));
  height: calc(40 * var(--px));
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--ink-soft);
  animation: rise 800ms 1400ms var(--ease-out) both;
}
.scrollcue svg {
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  animation: nudge 2.2s var(--ease) infinite;
}
.scrollcue:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }

/* ── keyframes ──────────────────────────────────────────────── */

@keyframes photo-in {
  from { transform: scale(1.12); opacity: 0; }
  55%  { opacity: 1; }
  to   { transform: scale(1.045); opacity: 1; }
}
@keyframes breathe {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
@keyframes nav-in {
  from { opacity: 0; transform: translateY(calc(-18 * var(--px))); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(calc(26 * var(--px))); }
  to   { opacity: 1; transform: none; }
}
@keyframes line-in {
  from { opacity: 0; transform: translateY(112%) rotate(2deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes shimmer {
  0%, 70%, 100% { background-position: 150% 0; }
  32%           { background-position: -60% 0; }
}
@keyframes sweep {
  0%, 62%  { transform: translateX(0) skewX(-16deg); }
  92%, 100% { transform: translateX(-420%) skewX(-16deg); }
}
@keyframes badge-pop {
  0%, 88%, 100% { transform: scale(1); }
  93%           { transform: scale(1.22); }
}
@keyframes nudge {
  0%, 100% { transform: translateY(-2px); opacity: .7; }
  50%      { transform: translateY(3px);  opacity: 1; }
}
@keyframes flutter {
  from { transform: scaleX(1)    rotate(0deg); }
  to   { transform: scaleX(0.62) rotate(-6deg); }
}
@keyframes drift-1 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-3vw, -4vh) rotate(-8deg); }
  50%  { transform: translate(1.5vw, -7vh) rotate(6deg); }
  75%  { transform: translate(-2vw, -3vh) rotate(-4deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes drift-2 {
  0%   { transform: translate(0, 0) rotate(4deg); }
  33%  { transform: translate(2.5vw, -6vh) rotate(-6deg); }
  66%  { transform: translate(-2vw, -2vh) rotate(9deg); }
  100% { transform: translate(0, 0) rotate(4deg); }
}
@keyframes drift-3 {
  0%   { transform: translate(0, 0) rotate(-6deg); }
  50%  { transform: translate(-2.5vw, -5vh) rotate(8deg); }
  100% { transform: translate(0, 0) rotate(-6deg); }
}
@keyframes float-up {
  from { transform: translateY(0) translateX(0); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  to   { transform: translateY(-104vh) translateX(var(--dx, 20px)); opacity: 0; }
}

/* ── responsive ─────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .hero { padding-inline: calc(74 * var(--px)); }
  .copy { width: calc(430 * var(--px)); }
  .features { width: calc(560 * var(--px)); }
  .nav { inset-inline: calc(34 * var(--px)); }
  .scrollcue { inset-inline-end: calc(34 * var(--px)); }
}

@media (max-width: 900px) {
  :root { --k: clamp(0.8rem, 2.4vw, 1.15rem); }

  .hero {
    align-items: stretch;
    gap: 0;
    padding: 0;
  }

  .hero__photo { object-position: 16% 4%; }
  .hero__vignette {
    background:
      linear-gradient(to top, rgba(29, 15, 18, 0.97) 34%, rgba(29, 15, 18, 0.62) 56%, transparent 82%),
      radial-gradient(120% 90% at 50% 20%, transparent 45%, rgba(25, 14, 17, 0.6) 100%);
  }

  .nav {
    position: relative;
    inset: auto;
    order: -1;
    margin-block-end: auto;
    align-self: stretch;
    flex-wrap: wrap;
    padding: calc(18 * var(--px)) calc(20 * var(--px)) 0;
  }
  .nav__tools { order: 2; gap: calc(9 * var(--px)); }
  .iconbtn { width: calc(44 * var(--px)); height: calc(44 * var(--px)); border-radius: calc(13 * var(--px)); }
  .iconbtn--menu { display: grid; }
  .brand__mark { width: calc(50 * var(--px)); height: calc(50 * var(--px)); font-size: calc(19 * var(--px)); }

  .nav__links {
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: calc(2 * var(--px));
    margin-block-start: calc(12 * var(--px));
    padding: calc(8 * var(--px));
    border-radius: calc(18 * var(--px));
    border: 1px solid var(--glass-line);
    background: rgba(36, 20, 24, 0.72);
    backdrop-filter: blur(18px);
    display: none;
  }
  .nav__links.is-open { display: flex; animation: rise 320ms var(--ease-out) both; }
  .nav__link { padding: calc(13 * var(--px)) calc(16 * var(--px)); border-radius: calc(12 * var(--px)); }

  .copy {
    transform: none;
    width: auto;
    padding: 0 calc(24 * var(--px)) calc(18 * var(--px));
  }
  .title { font-size: calc(52 * var(--px)); margin-block-end: calc(20 * var(--px)); }
  .lede { font-size: calc(17 * var(--px)); line-height: 1.95; margin-block-end: calc(30 * var(--px)); }
  .lede br { display: none; }
  .actions { gap: calc(26 * var(--px)); }
  .btn { width: calc(190 * var(--px)); height: calc(62 * var(--px)); font-size: calc(17 * var(--px)); }

  .features {
    width: auto;
    margin: calc(26 * var(--px)) calc(24 * var(--px)) calc(28 * var(--px));
    grid-template-columns: repeat(2, 1fr);
    gap: calc(22 * var(--px)) 0;
  }

  .scrollcue { display: none; }
  .bfly--2, .bfly--3 { display: none; }
  .bfly--1 { top: 10%; right: 6%; width: calc(74 * var(--px)); }
}

@media (max-width: 420px) {
  .title { font-size: calc(44 * var(--px)); }
  .actions { flex-wrap: wrap; gap: calc(18 * var(--px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero__photo { transform: scale(1.02); }
  .dust, .bfly { display: none; }
}

/* the club row in the account menu carries a live balance on its trailing edge */
.usermenu__pts {
  margin-inline-start: auto;
  font-style: normal;
  font-size: 0.82em;
  color: var(--accent-hi);
  white-space: nowrap;
}