/* Nova Partners — affiliate program demo · shared styles (flat CSS, no nesting) */

:root {
  --bg: #0b0620;
  --bg-2: #110930;
  --surface: rgba(255, 255, 255, 0.045);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --text: #f6f1ff;
  --muted: #bcb0dc;
  --dim: #9385bb;
  --pink: #ff4fc4;
  --violet: #8a5cff;
  --gold: #ffd166;
  --gold-2: #ffc44d;
  --green: #3ddc97;
  --ink: #1b0b33;
  --danger: #ff8fa8;
  --display: "Unbounded", "Manrope", system-ui, sans-serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --hdr: 72px;
  --gutter: 24px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img,
svg {
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
}

::selection {
  background: rgba(255, 79, 196, 0.4);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 300;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  transition: top 0.2s;
}

.skip:focus {
  top: 12px;
}

.wrap {
  width: calc(100% - var(--gutter) * 2);
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

.ico {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico--fill {
  fill: currentColor;
  stroke: none;
}

.grad {
  background: linear-gradient(100deg, #ffd166 0%, #ff8ad6 46%, #b994ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.sm-only {
  display: none;
}

/* ---------- Type ---------- */

.h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 1.1rem + 2.3vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  word-spacing: 0.05em;
  text-wrap: balance;
}

.h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.lead {
  margin: 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
  line-height: 1.65;
}

.h2 + .lead {
  margin-top: 18px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow .ico {
  width: 13px;
  height: 13px;
}

.eyebrow--center {
  justify-content: center;
}

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
}

.tlink .ico {
  width: 18px;
  height: 18px;
  transition: transform 0.25s var(--ease);
}

.tlink:hover .ico {
  transform: translateX(3px);
}

.linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255, 209, 102, 0.4);
  text-underline-offset: 3px;
}

.linkbtn:hover {
  text-decoration-color: currentColor;
}

.linkbtn--muted {
  color: var(--muted);
  text-decoration-color: rgba(255, 255, 255, 0.2);
  font-size: 0.88rem;
}

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s, background-color 0.25s, color 0.25s;
}

.btn .ico {
  width: 18px;
  height: 18px;
}

.btn--gold {
  color: var(--ink);
  background: linear-gradient(180deg, #ffe39a, #ffc44d);
  box-shadow: 0 12px 30px -12px rgba(255, 196, 77, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -2px 0 rgba(176, 104, 0, 0.25);
}

.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(255, 196, 77, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -2px 0 rgba(176, 104, 0, 0.25);
}

.btn--gold:active {
  transform: translateY(0);
}

.btn--glass {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.btn--glass:hover {
  background: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}

.btn--ghost {
  padding: 0 14px;
  color: var(--muted);
  background: transparent;
}

.btn--ghost:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.btn--sm {
  height: 40px;
  padding: 0 18px;
  font-size: 0.88rem;
}

.btn--xs {
  height: 34px;
  padding: 0 14px;
  font-size: 0.8rem;
}

.btn--lg {
  height: 56px;
  padding: 0 28px;
  font-size: 1rem;
}

.btn--block {
  width: 100%;
}

.btn.is-loading {
  color: transparent;
  pointer-events: none;
}

.btn.is-loading .ico {
  opacity: 0;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 2.5px solid rgba(27, 11, 51, 0.25);
  border-top-color: var(--ink);
  animation: spin 0.7s linear infinite;
}

.tg-dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: -8px;
  border-radius: 50%;
  background: #2aabee;
  color: #fff;
}

.tg-dot .ico {
  width: 15px;
  height: 15px;
  margin-left: -2px;
}

.round {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s, transform 0.2s;
}

.round:hover {
  background: rgba(255, 255, 255, 0.12);
}

.round:active {
  transform: scale(0.95);
}

.round:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------- Header ---------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
}

.hdr::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 6, 32, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
  opacity: 0;
  transition: opacity 0.3s;
}

.hdr.is-scrolled::before,
.hdr.is-menu::before {
  opacity: 1;
}

.hdr__in {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--hdr);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  flex: none;
}

.logo__mark {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 0 12px rgba(255, 79, 196, 0.45));
  transition: transform 0.6s var(--ease);
}

.logo:hover .logo__mark {
  transform: rotate(45deg);
}

.logo__text {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: -0.01em;
  line-height: 1;
}

.logo__text b {
  margin-left: 0.28em;
  color: var(--muted);
  font-weight: 500;
}

.nav {
  display: flex;
  gap: 2px;
  margin: 0 auto;
}

.nav a {
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}

.nav a:hover,
.nav a.is-active,
.nav a[aria-current="page"] {
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
}

.hdr__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hdr__login {
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s;
}

.hdr__login:hover {
  background: rgba(255, 255, 255, 0.07);
}

.burger {
  position: relative;
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  cursor: pointer;
}

.burger span {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.2s;
}

.burger span:nth-child(1) {
  top: 15px;
}

.burger span:nth-child(2) {
  top: 21px;
}

.burger span:nth-child(3) {
  top: 27px;
  width: 12px;
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
  width: 18px;
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile menu */

.mnav {
  position: fixed;
  inset: 0;
  z-index: 55;
  overflow-y: auto;
  background: radial-gradient(90% 60% at 100% 0%, rgba(123, 44, 255, 0.35), transparent 60%), radial-gradient(70% 50% at 0% 100%, rgba(255, 47, 185, 0.18), transparent 60%), #0b0620;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}

.mnav.is-open {
  opacity: 1;
  visibility: visible;
}

.mnav__in {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: calc(var(--hdr) + 16px) var(--gutter) 28px;
}

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

.mnav__links a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 6.5vw, 2.1rem);
  line-height: 1.1;
  text-decoration: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.mnav__links a span {
  color: var(--gold);
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 800;
}

.mnav__links a[aria-current="page"] {
  color: var(--gold);
}

.mnav.is-open .mnav__links a {
  opacity: 1;
  transform: none;
}

.mnav.is-open .mnav__links a:nth-child(2) {
  transition-delay: 0.04s;
}

.mnav.is-open .mnav__links a:nth-child(3) {
  transition-delay: 0.08s;
}

.mnav.is-open .mnav__links a:nth-child(4) {
  transition-delay: 0.12s;
}

.mnav.is-open .mnav__links a:nth-child(5) {
  transition-delay: 0.16s;
}

.mnav__cta {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: 32px;
}

.mnav__login {
  padding: 14px;
  border: 0;
  background: none;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}

.mnav__note {
  margin: 8px 0 0;
  color: var(--dim);
  font-size: 0.8rem;
  text-align: center;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  margin-top: calc(var(--hdr) * -1);
  padding: calc(var(--hdr) + clamp(28px, 5vw, 64px)) 0 clamp(40px, 5vw, 72px);
  overflow: hidden;
}

.hero__sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(55% 55% at 78% 38%, rgba(123, 44, 255, 0.38), transparent 70%), radial-gradient(40% 45% at 8% 0%, rgba(255, 47, 185, 0.2), transparent 70%), radial-gradient(45% 35% at 50% 105%, rgba(255, 209, 102, 0.09), transparent 70%);
}

.hero__sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 255, 255, 0.8), transparent), radial-gradient(1px 1px at 28% 62%, rgba(255, 255, 255, 0.55), transparent), radial-gradient(1.4px 1.4px at 44% 12%, rgba(255, 230, 170, 0.8), transparent), radial-gradient(1px 1px at 63% 78%, rgba(255, 255, 255, 0.5), transparent), radial-gradient(1.2px 1.2px at 86% 22%, rgba(255, 255, 255, 0.7), transparent), radial-gradient(1px 1px at 93% 64%, rgba(255, 200, 240, 0.7), transparent), radial-gradient(1px 1px at 6% 82%, rgba(255, 255, 255, 0.5), transparent), radial-gradient(1.3px 1.3px at 55% 40%, rgba(255, 255, 255, 0.5), transparent);
  background-size: 640px 520px;
  opacity: 0.7;
}

.hero__sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 70% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 70% 40%, #000 20%, transparent 75%);
}

.hero__in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  padding: 8px 15px 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.3;
}

.pill__dot {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
}

.pill__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.35;
  animation: ping 2.2s var(--ease) infinite;
}

.hero__title {
  margin: 0 0 22px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.1rem, 0.95rem + 3.7vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  word-spacing: 0.08em;
  text-wrap: balance;
}

.hero__deal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 18px;
  font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.12rem);
}

.hero__deal b {
  color: var(--gold);
  font-weight: 800;
}

.hero__deal i {
  color: var(--dim);
  font-style: normal;
}

.hero__lead {
  margin: 0 0 32px;
  max-width: 34em;
  color: var(--muted);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}

.hero__trust {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero__trust p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.hero__trust b {
  color: var(--text);
}

.hero__trust span {
  color: var(--dim);
}

.avs {
  display: flex;
  flex: none;
}

.avs span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: -10px;
  border-radius: 50%;
  background: var(--a);
  border: 2px solid var(--bg);
  color: #13082c;
  font-size: 0.7rem;
  font-weight: 800;
}

.avs span:first-child {
  margin-left: 0;
}

/* Hero visual (fixed 580×540 stage, scaled per breakpoint) */

.hero__visual {
  --hs: 1;
  position: relative;
  height: calc(540px * var(--hs));
}

.hv {
  --mx: 0;
  --my: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 580px;
  height: 540px;
  transform: scale(var(--hs));
  transform-origin: 100% 0;
}

.hv__glow {
  position: absolute;
  left: 60px;
  top: 70px;
  width: 460px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(138, 92, 255, 0.55), rgba(255, 79, 196, 0.16) 60%, transparent);
}

.hv__orbits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 1;
  stroke-dasharray: 2 7;
}

.hv__sat {
  stroke: none;
  animation: twinkle 3s ease-in-out infinite;
}

.hv__sat--a {
  fill: var(--gold);
}

.hv__sat--b {
  fill: var(--pink);
  animation-delay: 1.4s;
}

.hv__layer {
  --d: 10;
  position: absolute;
  transform: translate3d(calc(var(--mx) * var(--d) * 1px), calc(var(--my) * var(--d) * 1px), 0);
  transition: transform 0.7s var(--ease);
}

.hv__layer--dash {
  --d: 8;
  left: 104px;
  top: 112px;
  z-index: 2;
}

.hv__layer--nova {
  --d: 22;
  left: 4px;
  top: 30px;
  z-index: 3;
}

.hv__layer--pay {
  --d: 30;
  right: 0;
  top: 52px;
  z-index: 4;
}

.hv__layer--kick {
  --d: 16;
  left: 0;
  top: 412px;
  z-index: 3;
}

.hv__layer--toast {
  --d: 36;
  right: 18px;
  top: 448px;
  z-index: 5;
}

.float {
  --rot: 0deg;
  transform: rotate(var(--rot));
  animation: floatY 7s ease-in-out infinite;
}

.float--a {
  --rot: -6deg;
}

.float--b {
  --rot: 3deg;
  animation-duration: 6s;
  animation-delay: -2s;
}

.float--c {
  --rot: 4deg;
  animation-duration: 8s;
  animation-delay: -4s;
}

.float--d {
  --rot: -3deg;
  animation-duration: 9s;
  animation-delay: -1s;
}

.plate {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 15px;
  border-radius: 18px;
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.plate__deal {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 700;
}

.plate__deal b {
  color: #fff;
  font-weight: 800;
}

.plate--mini {
  gap: 10px;
  padding: 13px 15px;
}

/* Brand plate backgrounds */

.plate--nova {
  background: radial-gradient(120% 110% at 100% 0%, rgba(255, 47, 185, 0.55), transparent 58%), radial-gradient(90% 90% at 0% 100%, rgba(255, 209, 102, 0.14), transparent 60%), linear-gradient(160deg, #3d1175, #170734);
}

.plate--kick {
  background: radial-gradient(100% 120% at 100% 0%, rgba(198, 255, 0, 0.16), transparent 55%), linear-gradient(150deg, #16306a, #0b1b3a 70%);
}

.plate--bravo {
  background: radial-gradient(110% 110% at 100% 0%, rgba(255, 201, 60, 0.28), transparent 55%), linear-gradient(160deg, #0f7a4e, #04261b 80%);
}

.plate--stern {
  background: radial-gradient(110% 120% at 0% 0%, rgba(20, 184, 166, 0.45), transparent 60%), radial-gradient(80% 80% at 100% 100%, rgba(242, 196, 109, 0.14), transparent 60%), linear-gradient(160deg, #0b3a40, #061a20);
}

.plate--harbor {
  background: radial-gradient(110% 110% at 100% 0%, rgba(34, 211, 238, 0.42), transparent 58%), radial-gradient(70% 70% at 0% 100%, rgba(251, 146, 60, 0.18), transparent 60%), linear-gradient(160deg, #0b3a66, #071a33);
}

.plate--velvet {
  background: radial-gradient(110% 110% at 100% 0%, rgba(244, 63, 94, 0.5), transparent 58%), radial-gradient(70% 70% at 0% 100%, rgba(253, 186, 116, 0.12), transparent 60%), linear-gradient(160deg, #5c1020, #24060e);
}

/* Brand logos (styled text + marks) */

.blogo {
  --fs: 18px;
  --k: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  color: #fff;
  font-size: calc(var(--fs) * var(--k));
  line-height: 1;
  white-space: nowrap;
}

.blogo--lg {
  --fs: 22px;
}

.blogo--xl {
  --fs: 27px;
}

.blogo .ico {
  width: 1.3em;
  height: 1.3em;
}

.blogo--nova {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.blogo--nova .ico {
  color: var(--gold);
  filter: drop-shadow(0 0 8px rgba(255, 209, 102, 0.7));
}

.blogo--nova b {
  color: #ff5cc8;
  font-weight: 700;
}

.blogo--kick {
  --k: 1.3;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.blogo__k {
  display: grid;
  place-items: center;
  width: 1.18em;
  height: 1.18em;
  border-radius: 0.2em;
  background: #c6ff00;
  color: #0b1b3a;
  font-size: 0.92em;
  transform: skewX(-8deg);
}

.blogo--bravo {
  --k: 1.06;
  font-family: "Luckiest Guy", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.blogo--bravo b {
  color: #ffc93c;
  font-weight: 400;
}

.blogo__seven {
  display: grid;
  place-items: center;
  width: 1.45em;
  height: 1.45em;
  padding-top: 0.14em;
  border-radius: 0.32em;
  background: linear-gradient(180deg, #fff2b3, #ffc93c 50%, #d98a00);
  color: #b3001b;
  box-shadow: 0 3px 0 #8a5600;
  transform: rotate(-8deg);
}

.blogo--stern {
  --k: 1.12;
  font-family: "Bricolage Grotesque", var(--body);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.blogo--stern .ico {
  color: #f2c46d;
  filter: drop-shadow(0 0 7px rgba(242, 196, 109, 0.6));
}

.blogo--harbor {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.blogo--harbor b {
  margin-left: 0.24em;
  color: #67e8f9;
  font-weight: 800;
}

.blogo--harbor .ico {
  color: #fb923c;
  stroke-width: 2.1;
}

.blogo--velvet {
  --k: 1.22;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 700;
}

.blogo--velvet b {
  margin-left: 0.16em;
  color: #fda4af;
  font-weight: 700;
}

.blogo--velvet .ico {
  width: 1em;
  height: 1em;
  color: #fb7185;
}

/* Dashboard card */

.dash {
  width: 372px;
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(38, 21, 82, 0.96), rgba(19, 10, 46, 0.97));
  box-shadow: 0 46px 90px -36px rgba(0, 0, 0, 0.9), 0 0 60px -20px rgba(138, 92, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.dash__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.dash__ava {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff4fc4, #8a5cff);
  font-size: 0.74rem;
  font-weight: 800;
}

.dash__who b {
  display: block;
  font-size: 0.9rem;
  line-height: 1.2;
}

.dash__who span {
  color: var(--dim);
  font-size: 0.74rem;
}

.dash__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(61, 220, 151, 0.1);
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 800;
}

.dash__live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: blink 1.6s ease-in-out infinite;
}

.dash__label {
  margin: 0;
  color: var(--dim);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dash__value {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.15rem;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.dash__value span {
  transition: color 0.4s;
}

.dash__value span.is-bump {
  color: var(--gold);
}

.dash__value em {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(61, 220, 151, 0.12);
  color: var(--green);
  font-family: var(--body);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0;
}

.dash__chart {
  width: 100%;
  height: 96px;
  overflow: visible;
}

.dash__grid {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
}

.dash__line {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
}

.js .dash__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.8s 0.5s var(--ease) forwards;
}

.dash__dot {
  fill: var(--gold);
  stroke: rgba(255, 209, 102, 0.35);
  stroke-width: 6;
}

.dash__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.dash__kpis div {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.dash__kpis span {
  display: block;
  color: var(--dim);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dash__kpis b {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

/* Payout card */

.payc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 14px 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(46, 26, 92, 0.96), rgba(28, 15, 62, 0.97));
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 209, 102, 0.26);
}

.payc__coin {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff4cf, #ffd166 45%, #c98a12);
  color: #5a3a00;
  box-shadow: 0 0 22px rgba(255, 209, 102, 0.45);
}

.payc__coin .ico {
  stroke-width: 2.2;
}

.payc__txt > span {
  display: block;
  color: var(--dim);
  font-size: 0.7rem;
  font-weight: 800;
}

.payc__txt b {
  display: block;
  margin: 3px 0 2px;
  color: var(--gold);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.payc__txt .payc__via {
  color: var(--muted);
  font-weight: 700;
}

.payc__ok {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: 6px;
  border-radius: 50%;
  background: rgba(61, 220, 151, 0.15);
  color: var(--green);
}

.payc__ok .ico {
  width: 14px;
  height: 14px;
  stroke-width: 2.6;
}

/* Hero toast */

.htoast {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 300px;
  padding: 12px 16px 12px 12px;
  border-radius: 18px;
  background: rgba(250, 247, 255, 0.97);
  color: var(--ink);
  box-shadow: 0 26px 50px -18px rgba(0, 0, 0, 0.75);
}

.htoast__ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff4fc4, #8a5cff);
  color: #fff;
}

.htoast__ico .ico {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}

.htoast__txt {
  min-width: 0;
  flex: 1;
}

.htoast__txt b {
  display: block;
  font-size: 0.86rem;
  line-height: 1.3;
  white-space: nowrap;
}

.htoast__txt span {
  display: block;
  color: #6c5d91;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.htoast__amt {
  color: #0d8f59;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.htoast.is-swap {
  animation: toastSwap 0.6s var(--ease);
}

/* Hero intro animation (JS + motion only) */

.js .hero__copy > * {
  animation: rise 0.9s var(--ease) both;
}

.js .hero__copy > :nth-child(2) {
  animation-delay: 0.08s;
}

.js .hero__copy > :nth-child(3) {
  animation-delay: 0.16s;
}

.js .hero__copy > :nth-child(4) {
  animation-delay: 0.22s;
}

.js .hero__copy > :nth-child(5) {
  animation-delay: 0.28s;
}

.js .hero__copy > :nth-child(6) {
  animation-delay: 0.34s;
}

.js .hv__layer > .dash,
.js .hv__layer > .htoast,
.js .float > * {
  animation: pop 1s var(--ease) both;
}

.js .hv__layer--dash > .dash {
  animation-delay: 0.15s;
}

.js .hv__layer--nova .plate {
  animation-delay: 0.35s;
}

.js .hv__layer--pay .payc {
  animation-delay: 0.5s;
}

.js .hv__layer--kick .plate {
  animation-delay: 0.6s;
}

.js .hv__layer--stern .plate {
  animation-delay: 0.7s;
}

.js .hv__layer--toast > .htoast {
  animation-delay: 0.95s;
}

/* ---------- Stats ---------- */

.stats {
  position: relative;
  padding: 0 0 clamp(40px, 6vw, 72px);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 0 0 1px var(--line);
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 26px;
}

.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  bottom: 26px;
  width: 1px;
  background: var(--line);
}

.stat dd {
  order: -1;
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.stat dt {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 800;
}

.stat p {
  margin: 2px 0 0;
  color: var(--dim);
  font-size: 0.84rem;
}

/* ---------- Sections ---------- */

.section {
  position: relative;
  padding: clamp(56px, 7.2vw, 104px) 0;
}

.stats + .section {
  padding-top: clamp(40px, 5vw, 72px);
}

.section--alt {
  background: linear-gradient(180deg, rgba(123, 44, 255, 0) 0%, rgba(123, 44, 255, 0.07) 18%, rgba(123, 44, 255, 0.07) 82%, rgba(123, 44, 255, 0) 100%);
}

.section--glow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 30%;
  width: min(1100px, 100%);
  height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(123, 44, 255, 0.2), transparent);
  pointer-events: none;
}

.shead {
  margin-bottom: clamp(32px, 5vw, 56px);
}

.shead--row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 20px 56px;
  align-items: end;
}

.shead__side .lead {
  margin-bottom: 16px;
}

.shead--center {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.shead--center .eyebrow {
  justify-content: center;
}

.shead--center .lead {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Geo badges (CSS mini flags) ---------- */

.geos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.geo,
.geo-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px 0 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
}

.geo-more {
  padding: 0 9px;
  color: var(--dim);
}

.geo::before {
  content: "";
  width: 16px;
  height: 11px;
  flex: none;
  border-radius: 2px;
  background-color: #8a86a0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.geos--mini {
  gap: 4px;
}

.geos--mini .geo {
  height: 24px;
  padding: 0 7px 0 5px;
  font-size: 0.7rem;
}

.geo--de::before {
  background: linear-gradient(#111 33.3%, #dd0000 0 66.6%, #ffce00 0);
}

.geo--at::before {
  background: linear-gradient(#ed2939 33.3%, #fff 0 66.6%, #ed2939 0);
}

.geo--ch::before {
  background: linear-gradient(#fff, #fff) 50% 50% / 56% 20% no-repeat, linear-gradient(#fff, #fff) 50% 50% / 16% 66% no-repeat, #da291c;
}

.geo--ca::before {
  background: radial-gradient(circle, #d52b1e 0 2px, transparent 2.5px), linear-gradient(90deg, #d52b1e 26%, #fff 0 74%, #d52b1e 0);
}

.geo--nz::before {
  background: radial-gradient(circle at 72% 32%, #e2203d 0 1px, transparent 1.6px), radial-gradient(circle at 84% 58%, #e2203d 0 1px, transparent 1.6px), radial-gradient(circle at 66% 74%, #e2203d 0 1px, transparent 1.6px), linear-gradient(#c8102e, #c8102e) 20% 0 / 10% 50% no-repeat, linear-gradient(#c8102e, #c8102e) 0 22% / 45% 12% no-repeat, linear-gradient(#fff, #fff) 19% 0 / 18% 50% no-repeat, linear-gradient(#fff, #fff) 0 20% / 45% 24% no-repeat, #012169;
}

.geo--fi::before {
  background: linear-gradient(#003580, #003580) 0 50% / 100% 26% no-repeat, linear-gradient(#003580, #003580) 34% 0 / 18% 100% no-repeat, #fff;
}

.geo--no::before {
  background: linear-gradient(#00205b, #00205b) 0 50% / 100% 14% no-repeat, linear-gradient(#00205b, #00205b) 33% 0 / 11% 100% no-repeat, linear-gradient(#fff, #fff) 0 50% / 100% 32% no-repeat, linear-gradient(#fff, #fff) 32% 0 / 22% 100% no-repeat, #ba0c2f;
}

.geo--ie::before {
  background: linear-gradient(90deg, #169b62 33.3%, #fff 0 66.6%, #ff883e 0);
}

.geo--it::before {
  background: linear-gradient(90deg, #009246 33.3%, #fff 0 66.6%, #ce2b37 0);
}

.geo--es::before {
  background: linear-gradient(#aa151b 25%, #f1bf00 0 75%, #aa151b 0);
}

.geo--mx::before {
  background: radial-gradient(circle, #8c6a3b 0 1.4px, transparent 1.9px), linear-gradient(90deg, #006847 33.3%, #fff 0 66.6%, #ce1126 0);
}

.geo--pe::before {
  background: linear-gradient(90deg, #d91023 33.3%, #fff 0 66.6%, #d91023 0);
}

.geo--cl::before {
  background: linear-gradient(#0039a6, #0039a6) 0 0 / 36% 50% no-repeat, linear-gradient(#fff 50%, #d52b1e 0);
}

.geo--ar::before {
  background: radial-gradient(circle, #f6b40e 0 1.4px, transparent 1.9px), linear-gradient(#74acdf 33.3%, #fff 0 66.6%, #74acdf 0);
}

.geo--br::before {
  background: radial-gradient(circle, #002776 0 2.3px, transparent 2.8px), radial-gradient(ellipse 44% 40% at 50% 50%, #ffdf00 0 92%, transparent 100%), #009c3b;
}

.geo--pt::before {
  background: radial-gradient(circle at 40% 50%, #ffe000 0 2px, transparent 2.5px), linear-gradient(90deg, #006600 40%, #ff0000 0);
}

.geo--jp::before {
  background: radial-gradient(circle, #bc002d 0 3px, transparent 3.5px), #fff;
}

.geo--pl::before {
  background: linear-gradient(#fff 50%, #dc143c 0);
}

.geo--cz::before {
  background: linear-gradient(to top right, #11457e 50%, transparent 0) 0 0 / 50% 50% no-repeat, linear-gradient(to bottom right, #11457e 50%, transparent 0) 0 100% / 50% 50% no-repeat, linear-gradient(#fff 50%, #d7141a 0);
}

.geo--gr::before {
  background: linear-gradient(#fff, #fff) 18% 0 / 8% 55% no-repeat, linear-gradient(#fff, #fff) 0 25% / 40% 11% no-repeat, linear-gradient(#0d5eaf, #0d5eaf) 0 0 / 40% 55% no-repeat, repeating-linear-gradient(#0d5eaf 0 11.1%, #fff 0 22.2%);
}

/* ---------- Home: brand cards ---------- */

.bgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.bcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}

.bcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--accent, #fff);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.bcard:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}

.bcard:hover::after {
  opacity: 0.45;
}

.bcard__plate {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
  overflow: hidden;
}

.bcard__plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.2px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
  mask-image: linear-gradient(90deg, transparent, #000 60%);
  opacity: 0.5;
}

.bcard__plate .blogo {
  position: relative;
  transition: transform 0.5s var(--ease);
}

.bcard:hover .bcard__plate .blogo {
  transform: scale(1.05);
}

.vtag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.bcard__plate .vtag {
  position: absolute;
  left: 14px;
  top: 14px;
}

.bcard__body {
  flex: 1;
  padding: 20px 22px 0;
}

.bcard__desc {
  margin: 0 0 16px;
  min-height: 4.65em;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.55;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 0;
}

.kpis div {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.kpis dt {
  color: var(--dim);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.kpis dd {
  margin: 3px 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}

.bcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 16px 22px 18px;
  border-top: 1px solid var(--line);
}

.bcard__deal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.bcard__deal b {
  margin-left: 3px;
  color: var(--gold);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.bcard__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 9px 12px 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 0.25s, color 0.25s;
}

.bcard__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bcard__link .ico {
  width: 16px;
  height: 16px;
  transition: transform 0.25s var(--ease);
}

.bcard:hover .bcard__link {
  background: var(--gold);
  color: var(--ink);
}

.bcard:hover .bcard__link .ico {
  transform: translateX(2px);
}

/* ---------- Commission ---------- */

.models {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.model {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 26px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px var(--line);
}

.model:first-child {
  background: radial-gradient(120% 80% at 100% 0%, rgba(255, 79, 196, 0.2), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(255, 79, 196, 0.38), 0 30px 80px -40px rgba(255, 79, 196, 0.5);
}

.model__badge {
  position: absolute;
  top: 24px;
  right: 22px;
  padding: 6px 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff4fc4, #8a5cff);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
}

.model__name {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.model__rate {
  display: flex;
  align-items: center;
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.3rem, 1.7rem + 1.8vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.model__rate small {
  margin: 0 0.4em 0 0;
  color: var(--muted);
  font-family: var(--body);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0;
}

.model__rate .plus {
  margin: 0 0.12em;
  color: var(--dim);
  font-family: var(--display);
  font-size: 0.6em;
  font-weight: 500;
}

.model__desc {
  margin: 0 0 20px;
  color: var(--muted);
}

.ticks {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.ticks li {
  position: relative;
  padding-left: 30px;
  font-size: 0.94rem;
  line-height: 1.5;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(61, 220, 151, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%233ddc97' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.model__best {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
  color: var(--gold);
  font-size: 0.86rem;
  font-weight: 800;
}

/* Calculator */

.calc {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(31, 17, 70, 0.92), rgba(17, 9, 42, 0.94));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11), 0 50px 120px -50px rgba(123, 44, 255, 0.55);
  overflow: hidden;
}

.calc__in {
  padding: clamp(22px, 3vw, 40px);
  border-right: 1px solid var(--line);
}

.calc__head p {
  margin: 8px 0 24px;
  color: var(--muted);
  font-size: 0.95rem;
}

.calc__out {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(22px, 3vw, 40px);
  background: radial-gradient(80% 50% at 80% 0%, rgba(255, 79, 196, 0.1), transparent);
}

.seg {
  --i: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  margin: 0 0 28px;
  padding: 4px;
  border: 0;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 0 1px var(--line);
}

.seg__opt {
  position: relative;
  z-index: 1;
}

.seg__opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.seg__opt span {
  display: block;
  padding: 11px 6px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 800;
  text-align: center;
  transition: color 0.3s;
  pointer-events: none;
}

.seg__opt input:checked + span {
  color: var(--ink);
}

.seg__opt input:focus-visible + span {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

html:not(.js) .seg__opt input:checked + span {
  background: var(--gold);
}

.seg__thumb {
  position: absolute;
  left: 4px;
  top: 4px;
  bottom: 4px;
  width: calc((100% - 8px) / 3);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffe39a, #ffc44d);
  box-shadow: 0 6px 18px -6px rgba(255, 196, 77, 0.7);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform 0.4s var(--ease);
}

html:not(.js) .seg__thumb {
  display: none;
}

.range {
  margin-bottom: 22px;
}

.range__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.range__head label {
  color: var(--muted);
  font-size: 0.93rem;
  font-weight: 700;
}

.range__head output {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  font-variant-numeric: tabular-nums;
}

.range__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  color: var(--dim);
  font-size: 0.74rem;
  font-weight: 700;
}

input[type="range"] {
  --p: 20%;
  display: block;
  width: 100%;
  height: 30px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, #ff4fc4, #ffd166) 0 0 / var(--p) 100% no-repeat, rgba(255, 255, 255, 0.11);
}

input[type="range"]::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 209, 102, 0.22), 0 4px 12px rgba(0, 0, 0, 0.5);
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow 0.2s;
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--gold);
}

input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 10px rgba(255, 209, 102, 0.25), 0 4px 12px rgba(0, 0, 0, 0.5);
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.11);
}

input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, #ff4fc4, #ffd166);
}

input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 209, 102, 0.22), 0 4px 12px rgba(0, 0, 0, 0.5);
}

input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--gold);
}

.tiers {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.tiers__label {
  margin: 0 0 10px;
  font-size: 0.86rem;
  font-weight: 800;
}

.tiers__label span {
  color: var(--dim);
  font-weight: 600;
}

.tiers__bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.tiers__bar span {
  padding: 8px 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--dim);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.76rem;
  text-align: center;
  transition: background-color 0.3s, color 0.3s;
}

.tiers__bar span.is-pass {
  background: rgba(255, 79, 196, 0.14);
  color: #ffb7e6;
}

.tiers__bar span.is-on {
  background: linear-gradient(180deg, #ffe39a, #ffc44d);
  color: var(--ink);
}

.tiers__note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.tiers__note b {
  color: var(--gold);
}

.calc__sum {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px;
  align-items: end;
  margin-bottom: 26px;
}

.calc__main > span {
  display: block;
  color: var(--dim);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.calc__main b {
  display: block;
  margin: 10px 0 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: linear-gradient(100deg, #ffe39a, #ffd166 40%, #ff8ad6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.calc__main em {
  color: var(--green);
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 800;
}

.calc__side {
  display: grid;
  gap: 8px;
}

.calc__side div {
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--line);
}

.calc__side span {
  display: block;
  color: var(--dim);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.calc__side b {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}

.chart {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: 240px auto;
}

.chart__y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding-right: 10px;
}

.chart__y span {
  height: 0;
  color: var(--dim);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chart__plot {
  position: relative;
  overflow: hidden;
}

.chart__grid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chart__grid span {
  height: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.09);
}

.chart__grid span:last-child {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.chart__groups,
.chart__x {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 4%;
  padding: 0 2%;
}

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

.cg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  height: 100%;
}

.cb {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 6px 6px 2px 2px;
}

.cb i {
  position: absolute;
  inset: 0;
  border-radius: 6px 6px 2px 2px;
  transform: translateY(100%);
  transition: transform 0.8s var(--ease), opacity 0.4s;
}

.cb--rs i {
  background: linear-gradient(180deg, #ff86d8, #a640ff);
}

.cb--cpa i {
  background: linear-gradient(180deg, #ffe39a, #f0a530);
}

.cb--hy i {
  background: linear-gradient(180deg, #8ff3ff, #3b82f6);
}

.cb.is-dim i {
  background: rgba(255, 255, 255, 0.07);
}

.cb--rs.is-dim i {
  box-shadow: inset 0 2px 0 rgba(255, 134, 216, 0.75);
}

.cb--cpa.is-dim i {
  box-shadow: inset 0 2px 0 rgba(255, 196, 77, 0.8);
}

.cb--hy.is-dim i {
  box-shadow: inset 0 2px 0 rgba(95, 195, 255, 0.8);
}

.cg__val {
  position: absolute;
  left: -30%;
  right: -30%;
  top: 0;
  height: 100%;
  pointer-events: none;
  transform: translateY(100%);
  transition: transform 0.8s var(--ease);
}

.cg__val span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  padding-bottom: 6px;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.chart__x {
  grid-column: 2;
  margin-top: 10px;
}

.chart__x span {
  color: var(--dim);
  font-size: 0.74rem;
  font-weight: 800;
  text-align: center;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 16px 0 22px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.legend__k {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.3s;
}

.legend__k::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.legend__k--rs::before {
  background: #ff86d8;
}

.legend__k--cpa::before {
  background: #ffc44d;
}

.legend__k--hy::before {
  background: #5fc3ff;
}

.legend__k.is-dim {
  opacity: 0.5;
}

.calc__cmp {
  margin-bottom: 22px;
}

.calc__cmp-h {
  margin: 0 0 10px;
  color: var(--dim);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.calc__cmp-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.calc__cmp-row div {
  position: relative;
  padding: 11px 14px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color 0.3s, box-shadow 0.3s;
}

.calc__cmp-row dt {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.calc__cmp-row dt::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.calc__cmp-row [data-m="rs"] dt::before {
  background: #ff86d8;
}

.calc__cmp-row [data-m="cpa"] dt::before {
  background: #ffc44d;
}

.calc__cmp-row [data-m="hy"] dt::before {
  background: #5fc3ff;
}

.calc__cmp-row dd {
  margin: 4px 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc__cmp-row div.is-on {
  background: rgba(255, 209, 102, 0.08);
  box-shadow: inset 0 0 0 1.5px rgba(255, 209, 102, 0.55);
}

.calc__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.calc__foot p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.calc__cta {
  flex: none;
}

.footnote {
  max-width: 1000px;
  margin: 20px auto 0;
  color: var(--dim);
  font-size: 0.8rem;
  line-height: 1.65;
}

.footnote b {
  color: var(--muted);
}

.footnote--left {
  max-width: 820px;
  margin: 28px 0 0;
}

/* ---------- Tools ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 4;
  min-width: 0;
  padding: 26px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}

.tile--track {
  grid-column: span 8;
}

.tile--bot {
  grid-row: span 2;
  background: radial-gradient(90% 50% at 50% 100%, rgba(42, 171, 238, 0.16), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
}

.tile--promo {
  grid-column: span 8;
}

.tile--lp {
  grid-column: span 12;
}

.tile__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

.tile__head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.tile__ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 79, 196, 0.22), rgba(138, 92, 255, 0.22));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: #ffb8e8;
}

.tile__ico--tg {
  background: #2aabee;
  color: #fff;
}

.tile__ico--tg .ico {
  margin-left: -2px;
}

.tile--lp .tile__head {
  max-width: 760px;
}

/* Link builder */

.builder {
  margin-top: auto;
  padding: 16px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 0 1px var(--line);
}

.builder__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.builder__sel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.85rem;
  font-weight: 800;
}

.builder__sel .ico {
  width: 16px;
  height: 16px;
  color: var(--gold);
}

.builder__sel--muted {
  color: var(--muted);
}

.builder__sel--muted .ico {
  color: var(--muted);
}

.builder__subs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.builder__subs label {
  display: flex;
  align-items: stretch;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.builder__subs label:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--gold);
}

.builder__subs span {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-right: 1px solid var(--line);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
}

.builder__subs input {
  flex: 1;
  min-width: 0;
  padding: 0 10px;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.84rem;
  font-weight: 600;
  outline: none;
}

.builder__out {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  border-radius: 12px;
  background: rgba(255, 209, 102, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.2);
}

.builder__out code {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.5;
  word-break: break-all;
}

.builder__out code i {
  color: var(--dim);
  font-style: normal;
}

.builder__out code b {
  color: var(--gold);
  font-weight: 600;
}

.copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  flex: none;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.25s, transform 0.2s;
}

.copy .ico {
  width: 16px;
  height: 16px;
}

.copy:active {
  transform: scale(0.96);
}

.copy.is-done {
  background: var(--green);
}

/* Phone mockup */

.phone {
  width: 100%;
  max-width: 290px;
  margin: 0 auto 20px;
  padding: 9px;
  border-radius: 38px;
  background: linear-gradient(160deg, #2e2650, #120c26);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 30px 60px -24px rgba(0, 0, 0, 0.85);
}

.phone__screen {
  display: flex;
  flex-direction: column;
  height: 486px;
  border-radius: 30px;
  background: #0e1621;
  overflow: hidden;
}

.phone__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 22px 5px;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
}

.phone__notch {
  width: 74px;
  height: 20px;
  border-radius: 99px;
  background: #000;
}

.phone__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #17212b;
}

.phone__head > .ico {
  width: 18px;
  height: 18px;
  color: #6ab3f3;
}

.phone__title {
  flex: 1;
  text-align: center;
  line-height: 1.25;
}

.phone__title b {
  display: block;
  font-size: 0.82rem;
}

.phone__title span {
  color: #7f91a4;
  font-size: 0.68rem;
}

.phone__ava {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8a6bff, #5b5bf6);
  color: #fff;
}

.phone__ava .ico {
  width: 18px;
  height: 18px;
}

.phone__chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 12px 10px;
  background: radial-gradient(70% 40% at 80% 20%, rgba(106, 179, 243, 0.08), transparent), linear-gradient(170deg, #0f1b2c, #0a121e);
}

.msg {
  position: relative;
  max-width: 88%;
  margin: 0;
  padding: 7px 10px 5px;
  border-radius: 14px;
  color: #e9eef4;
  font-size: 0.74rem;
  line-height: 1.42;
}

.msg small {
  display: block;
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.6rem;
  text-align: right;
}

.msg--out {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: #2b5278;
}

.msg--in {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: #182533;
}

.msg--alert b {
  color: #9be7c4;
}

.msg__plus {
  color: #5ee0a0;
  font-weight: 800;
}

.msg__tbl {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px 16px;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 0.68rem;
}

.msg__tbl span:nth-child(odd) {
  color: #8ea4bb;
}

.msg__kb {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: 88%;
  margin-bottom: 2px;
}

.msg__kb span {
  padding: 6px 0;
  border-radius: 8px;
  background: rgba(43, 82, 120, 0.6);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  text-align: center;
}

.phone__input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px 14px;
  background: #17212b;
  color: #6d7f92;
  font-size: 0.75rem;
}

.phone__input .ico {
  width: 18px;
  height: 18px;
  color: #6ab3f3;
}

.js .tile--bot .msg,
.js .tile--bot .msg__kb {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.js .tile--bot.is-in .msg,
.js .tile--bot.is-in .msg__kb {
  opacity: 1;
  transform: none;
}

.js .tile--bot.is-in .phone__chat > :nth-child(2) {
  transition-delay: 0.5s;
}

.js .tile--bot.is-in .phone__chat > :nth-child(3) {
  transition-delay: 0.8s;
}

.js .tile--bot.is-in .phone__chat > :nth-child(4) {
  transition-delay: 1.4s;
}

.js .tile--bot.is-in .phone__chat > :nth-child(5) {
  transition-delay: 2s;
}

.tile--bot .tlink {
  align-self: center;
  margin-top: auto;
}

/* Code */

.code {
  margin: auto 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 1px var(--line);
  color: #d4cbee;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.65;
  white-space: pre;
  overflow-x: auto;
  scrollbar-width: thin;
}

.c-m {
  color: var(--gold);
  font-weight: 700;
}

.c-v {
  color: #ff9ee0;
}

.c-k {
  color: #b4c0ff;
}

.c-s {
  color: #9be7c4;
}

.c-n {
  color: #ffd166;
}

.c-p {
  color: var(--dim);
}

.events {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.events span {
  padding: 5px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  transition: background-color 0.3s, color 0.3s;
}

.events span.is-on {
  background: rgba(61, 220, 151, 0.15);
  color: var(--green);
}

.events--api span {
  color: #b4c0ff;
}

.status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.2);
}

/* Banners */

.banners {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr) minmax(0, 1.3fr);
  gap: 16px;
  align-items: end;
  margin-top: auto;
}

.bnr {
  margin: 0;
  min-width: 0;
}

.bnr figcaption {
  margin-top: 8px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
}

.bnr__art {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.bnr--sq .bnr__art {
  aspect-ratio: 300 / 250;
  gap: 5px;
  padding: 10px;
}

.bnr__art--nova {
  background: radial-gradient(90% 70% at 50% 0%, rgba(255, 47, 185, 0.6), transparent 70%), radial-gradient(60% 50% at 50% 110%, rgba(255, 209, 102, 0.3), transparent 70%), linear-gradient(170deg, #3a0f6e, #12052b);
}

.bnr__logo {
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.bnr__logo b {
  color: #ff5cc8;
}

.bnr__logo--stern {
  font-family: "Bricolage Grotesque", var(--body);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0;
}

.bnr__big {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 1rem + 1.6vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #fff6d6, #ffd166 55%, #e0a23a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bnr__sub {
  font-size: 0.66rem;
  font-weight: 800;
  opacity: 0.92;
}

.bnr__btn {
  margin-top: 4px;
  padding: 5px 12px;
  border-radius: 99px;
  background: linear-gradient(180deg, #ffe39a, #ffc44d);
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 800;
  white-space: nowrap;
}

.bnr--story .bnr__art {
  aspect-ratio: 9 / 16;
  justify-content: space-between;
  padding: 14px 8px;
  background: radial-gradient(90% 45% at 50% 45%, rgba(20, 184, 166, 0.45), transparent 70%), linear-gradient(180deg, #0b3138, #061a20);
}

.bnr--story .bnr__sub {
  max-width: 9em;
  line-height: 1.3;
}

.bnr__boxes {
  display: flex;
  gap: 5px;
}

.bnr__boxes i {
  position: relative;
  width: 24px;
  height: 22px;
  border-radius: 4px;
  background: linear-gradient(180deg, #2dd4bf, #0f766e);
}

.bnr__boxes i:nth-child(2) {
  background: linear-gradient(180deg, #ff7a86, #c2253a);
  transform: translateY(-6px);
  box-shadow: 0 0 16px rgba(242, 196, 109, 0.6);
}

.bnr__boxes i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  margin-left: -2px;
  background: #f2c46d;
}

.bnr__boxes i::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: -3px;
  height: 7px;
  border-radius: 3px;
  background: inherit;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.bnr--lb {
  display: grid;
  gap: 10px;
}

.bnr--lb figcaption {
  margin-top: -2px;
}

.bnr--lb .bnr__art {
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
  aspect-ratio: 320 / 100;
  padding: 0 12px;
  text-align: left;
}

.bnr__art--kick {
  background: radial-gradient(80% 140% at 100% 50%, rgba(198, 255, 0, 0.18), transparent 60%), linear-gradient(100deg, #0b1b3a 50%, #16306a);
}

.bnr__art--bravo {
  background: radial-gradient(80% 140% at 0% 50%, rgba(255, 201, 60, 0.3), transparent 60%), linear-gradient(100deg, #04261b, #0c6b45);
}

.bnr__k {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 7px;
  background: #c6ff00;
  color: #0b1b3a;
  font-family: "Barlow Condensed", var(--body);
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 800;
  transform: skewX(-8deg);
}

.bnr__seven {
  flex: none;
  color: #ffc93c;
  font-family: "Luckiest Guy", Impact, sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 #8a5600;
}

.bnr__txt {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}

.bnr__txt b {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.bnr__txt span {
  display: block;
  font-size: 0.64rem;
  opacity: 0.75;
  white-space: nowrap;
}

.bnr__art--kick .bnr__btn {
  background: #c6ff00;
  color: #0b1b3a;
}

.bnr__art--bravo .bnr__btn {
  background: linear-gradient(180deg, #fff2b3, #ffc93c);
}

/* Manager */

.mgr {
  margin-top: auto;
}

.mgr__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.mgr__who b {
  display: block;
  line-height: 1.3;
}

.mgr__who > span:last-child > span {
  color: var(--muted);
  font-size: 0.84rem;
}

.mgr__ava {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffc46b, #ff4fc4);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.86rem;
}

.mgr__ava i {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 13px;
  height: 13px;
  border: 2.5px solid #1a1036;
  border-radius: 50%;
  background: var(--green);
}

.mgr__msg {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 16px 16px 16px 4px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.9rem;
  line-height: 1.5;
}

.mgr__facts {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
  margin: 0;
}

.mgr__facts div {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.mgr__facts dt {
  color: var(--dim);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mgr__facts dd {
  margin: 2px 0 0;
  font-size: 0.9rem;
  font-weight: 800;
}

/* Landing page thumbnails */

.lps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp {
  position: relative;
  display: block;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.35s var(--ease), background-color 0.35s, box-shadow 0.35s;
}

.lp:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.45), 0 24px 40px -24px rgba(0, 0, 0, 0.8);
}

.lp__thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
}

.lp__thumb i {
  position: absolute;
  display: block;
}

.lp__meta {
  display: flex;
  flex-direction: column;
  padding: 12px 30px 4px 6px;
  line-height: 1.35;
}

.lp__meta b {
  font-size: 0.92rem;
}

.lp__meta span {
  color: var(--dim);
  font-size: 0.78rem;
  font-weight: 600;
}

.lp__go {
  position: absolute;
  right: 14px;
  bottom: 18px;
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: color 0.25s, transform 0.25s var(--ease);
}

.lp:hover .lp__go {
  color: var(--gold);
  transform: translate(2px, -2px);
}

.lp__thumb--wheel {
  background: radial-gradient(60% 60% at 50% 50%, rgba(255, 47, 185, 0.45), transparent 70%), #12052b;
}

.lp__wheel {
  left: 50%;
  top: 14%;
  width: 52%;
  aspect-ratio: 1;
  margin-left: -26%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd166 0 9%, #3a0f6e 10% 13%, transparent 14%), conic-gradient(#ff2fb9 0 45deg, #7b2cff 0 90deg, #ffd166 0 135deg, #3a0f6e 0 180deg, #ff2fb9 0 225deg, #7b2cff 0 270deg, #3ef0ff 0 315deg, #3a0f6e 0);
  box-shadow: 0 0 0 3px #ffd166, 0 0 26px rgba(255, 47, 185, 0.6);
  transition: transform 1.4s var(--ease);
}

.lp:hover .lp__wheel {
  transform: rotate(225deg);
}

.lp__pin {
  left: 50%;
  top: 7%;
  width: 0;
  height: 0;
  margin-left: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 12px solid #fff;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

.lp__thumb--quiz {
  background: radial-gradient(60% 50% at 80% 0%, rgba(198, 255, 0, 0.18), transparent 70%), #0b1b3a;
}

.lp__q {
  left: 12%;
  right: 12%;
  top: 14%;
  color: #c6ff00;
  font-family: var(--display);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  text-align: center;
}

.lp__opt {
  left: 14%;
  right: 14%;
  height: 14%;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
}

.lp__opt:nth-of-type(2) {
  top: 38%;
}

.lp__opt:nth-of-type(3) {
  top: 57%;
}

.lp__opt:nth-of-type(4) {
  top: 76%;
}

.lp__opt.is-on {
  background: #c6ff00;
}

.lp__thumb--slots {
  background: radial-gradient(70% 60% at 50% 40%, rgba(255, 201, 60, 0.3), transparent 70%), #04261b;
}

.lp__reels {
  left: 12%;
  right: 12%;
  top: 26%;
  height: 48%;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 5%;
  padding: 5%;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffe08a, #d98a00);
  box-shadow: 0 0 24px rgba(255, 201, 60, 0.4);
}

.lp__reels b {
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #fffaf0;
  color: #d0021b;
  font-family: "Luckiest Guy", Impact, sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
  padding-top: 0.12em;
}

.lp__thumb--boxes {
  background: radial-gradient(60% 50% at 50% 60%, rgba(20, 184, 166, 0.4), transparent 70%), #061a20;
}

.lp__box {
  bottom: 24%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 6px;
  background: linear-gradient(180deg, #2dd4bf, #0f766e);
}

.lp__box::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 14%;
  margin-left: -7%;
  background: #f2c46d;
}

.lp__box::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: -10%;
  height: 28%;
  border-radius: 4px;
  background: inherit;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.lp__box:nth-of-type(1) {
  left: 13%;
}

.lp__box:nth-of-type(2) {
  left: 39%;
  bottom: 32%;
  background: linear-gradient(180deg, #ff7a86, #c2253a);
  box-shadow: 0 0 22px rgba(242, 196, 109, 0.6);
  transition: transform 0.5s var(--ease);
}

.lp__box:nth-of-type(3) {
  left: 65%;
}

.lp:hover .lp__box--up {
  transform: translateY(-8%) rotate(-6deg);
}

.lp__thumb--review {
  background: #fbf7ef;
}

.lp__row {
  left: 10%;
  right: 10%;
  height: 20%;
  border-radius: 6px;
  background: #fff linear-gradient(90deg, transparent 32%, #e9e2d3 32% 70%, transparent 70%) 0 50% / 100% 18% no-repeat;
  box-shadow: 0 2px 6px rgba(21, 26, 45, 0.12);
}

.lp__row::before {
  content: "";
  position: absolute;
  left: 6%;
  top: 20%;
  bottom: 20%;
  width: 18%;
  border-radius: 4px;
  background: linear-gradient(135deg, #ff2fb9, #7b2cff);
}

.lp__row::after {
  content: "";
  position: absolute;
  right: 6%;
  top: 30%;
  bottom: 30%;
  width: 18%;
  border-radius: 99px;
  background: #ff6a3d;
}

.lp__row:nth-of-type(1) {
  top: 14%;
}

.lp__row:nth-of-type(2) {
  top: 40%;
}

.lp__row:nth-of-type(2)::before {
  background: linear-gradient(135deg, #0c6b45, #ffc93c);
}

.lp__row:nth-of-type(3) {
  top: 66%;
}

.lp__row:nth-of-type(3)::before {
  background: linear-gradient(135deg, #0f766e, #22d3ee);
}

/* ---------- Payouts ---------- */

.payouts {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 40px clamp(32px, 5vw, 72px);
  align-items: center;
}

.facts {
  display: grid;
  gap: 14px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.facts li {
  display: flex;
  align-items: center;
  gap: 14px;
}

.facts li > span:last-child {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}

.facts b {
  display: block;
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
}

.facts__ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  background: rgba(255, 209, 102, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.22);
  color: var(--gold);
}

.methods {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--line);
}

.method b {
  display: block;
  line-height: 1.3;
}

.method > span:nth-child(2) > span {
  color: var(--dim);
  font-size: 0.82rem;
}

.method em {
  margin-left: auto;
  color: var(--green);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.method__ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
}

.method__ico--usdt {
  background: #1f9b76;
  color: #fff;
}

.method__ico--bank {
  background: rgba(138, 92, 255, 0.24);
  color: #cdbcff;
}

.method__ico--wallet {
  background: rgba(255, 79, 196, 0.2);
  color: #ffa6e3;
}

.cycle {
  position: relative;
  margin-bottom: 20px;
  padding: 26px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(38, 21, 82, 0.8), rgba(20, 11, 48, 0.8));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11), 0 40px 80px -40px rgba(123, 44, 255, 0.5);
}

.cycle__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 99px;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.chip--ok {
  background: rgba(61, 220, 151, 0.12);
  color: var(--green);
}

.cycle__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cycle__steps::before,
.cycle__steps::after {
  content: "";
  position: absolute;
  left: 9px;
  right: calc(25% - 18px);
  top: 36px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
}

.cycle__steps::after {
  background: linear-gradient(90deg, #8a5cff, #ff4fc4 60%, #ffd166);
  transform-origin: 0 50%;
  transition: transform 1.8s var(--ease) 0.2s;
}

.js .cycle__steps::after {
  transform: scaleX(0);
}

.js .cycle.is-in .cycle__steps::after {
  transform: none;
}

.cycle__steps li {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.cycle__day {
  height: 20px;
  color: var(--gold);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.74rem;
  line-height: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cycle__node {
  width: 18px;
  height: 18px;
  margin: 8px 0 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff86d8, #8a5cff);
  box-shadow: 0 0 0 4px rgba(255, 79, 196, 0.18);
  transition: background-color 0.4s, box-shadow 0.4s, transform 0.4s var(--ease);
}

.cycle__node--gold {
  background: linear-gradient(135deg, #fff1c2, #ffc44d);
  box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.22), 0 0 18px rgba(255, 209, 102, 0.6);
}

.js .cycle .cycle__node {
  transform: scale(0.6);
  background: #24164c;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.js .cycle.is-in .cycle__node {
  transform: none;
  background: linear-gradient(135deg, #ff86d8, #8a5cff);
  box-shadow: 0 0 0 4px rgba(255, 79, 196, 0.18);
}

.js .cycle.is-in .cycle__node--gold {
  background: linear-gradient(135deg, #fff1c2, #ffc44d);
  box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.22), 0 0 18px rgba(255, 209, 102, 0.6);
}

.js .cycle.is-in li:nth-child(2) .cycle__node {
  transition-delay: 0.6s;
}

.js .cycle.is-in li:nth-child(3) .cycle__node {
  transition-delay: 1.1s;
}

.js .cycle.is-in li:nth-child(4) .cycle__node {
  transition-delay: 1.6s;
}

.cycle__steps b {
  font-size: 0.92rem;
  line-height: 1.3;
}

.cycle__steps li > span:last-child {
  margin-top: 4px;
  color: var(--dim);
  font-size: 0.8rem;
  line-height: 1.45;
}

.ledger {
  padding: 22px 24px 12px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--line);
}

.ledger__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 8px;
}

.ledger__acc {
  color: var(--dim);
  font-size: 0.8rem;
  font-weight: 700;
}

.ledger__tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.ledger__tbl th {
  padding: 8px 0;
  color: var(--dim);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.ledger__tbl td {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.ledger__tbl th:nth-child(3),
.ledger__tbl td:nth-child(3) {
  text-align: right;
}

.ledger__tbl td:nth-child(3) {
  color: var(--text);
  font-family: var(--display);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ledger__tbl td:last-child {
  width: 76px;
  text-align: right;
}

.paid {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 99px;
  background: rgba(61, 220, 151, 0.12);
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 800;
}

/* ---------- How to join ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 24px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 0 0 1px var(--line);
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 46px;
  right: -16px;
  z-index: 1;
  width: 10px;
  height: 10px;
  border: solid rgba(255, 209, 102, 0.55);
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

.step__n {
  margin-bottom: 26px;
  color: transparent;
  font-family: var(--display);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.04em;
  -webkit-text-stroke: 1.4px rgba(255, 209, 102, 0.7);
}

.step p {
  margin: 10px 0 20px;
  color: var(--muted);
  font-size: 0.93rem;
}

.step__time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 800;
}

.step__time .ico {
  width: 16px;
  height: 16px;
}

/* ---------- Testimonials ---------- */

.tcar__ctrl {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.tcar__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 40px) / 3);
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

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

.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 28px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px var(--line);
  scroll-snap-align: start;
}

.tcard::before {
  content: "";
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13 7C7.5 9 4.5 13 4.5 18.5V25h9v-9H9c0-3.2 1.6-5.6 5-6.8zM27.5 7c-5.5 2-8.5 6-8.5 11.5V25h9v-9h-4.5c0-3.2 1.6-5.6 5-6.8z' fill='%23ff4fc4'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.22;
}

.tcard__metric {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.tcard__metric b {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: -0.03em;
}

.tcard blockquote {
  margin: 0 0 24px;
  font-size: 1rem;
  line-height: 1.65;
}

.tcard figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.tcard figcaption b {
  display: block;
  font-size: 0.95rem;
  line-height: 1.3;
}

.tcard figcaption > span:last-child > span {
  color: var(--dim);
  font-size: 0.8rem;
}

.tcard__ava {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--a);
  color: #13082c;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.74rem;
}

.tcar__dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 26px;
}

.tcar__dots button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.tcar__dots button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.25);
  transition: width 0.3s var(--ease), background-color 0.3s;
}

.tcar__dots button[aria-current="true"]::before {
  width: 24px;
  background: var(--gold);
}

/* ---------- FAQ ---------- */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.faq__side {
  position: sticky;
  top: calc(var(--hdr) + 32px);
}

.faq__side .lead {
  margin: 18px 0 28px;
}

.faq__list {
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__item h3 {
  margin: 0;
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
  font-weight: 800;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s;
}

.faq__q:hover {
  color: var(--gold);
}

.faq__ic {
  position: relative;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text);
  transition: transform 0.35s var(--ease), background-color 0.3s, color 0.3s;
}

.faq__ic::before,
.faq__ic::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.35s var(--ease);
}

.faq__ic::after {
  transform: rotate(90deg);
}

.faq__q[aria-expanded="true"] .faq__ic {
  background: var(--gold);
  box-shadow: none;
  color: var(--ink);
  transform: rotate(180deg);
}

.faq__q[aria-expanded="true"] .faq__ic::after {
  transform: rotate(0deg);
}

.faq__a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.4s var(--ease), visibility 0.4s;
}

.faq__a > div {
  min-height: 0;
  overflow: hidden;
}

.faq__a p {
  margin: 0;
  padding: 0 56px 24px 0;
  color: var(--muted);
  line-height: 1.7;
}

.faq__a a {
  color: var(--gold);
}

.js .faq__a {
  grid-template-rows: 0fr;
  visibility: hidden;
}

.js .faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
  visibility: visible;
}

/* ---------- Final CTA ---------- */

.final {
  padding: 0 0 clamp(72px, 10vw, 128px);
}

.final__box {
  position: relative;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px);
  border-radius: 36px;
  background: radial-gradient(80% 90% at 50% 0%, rgba(255, 79, 196, 0.26), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(123, 44, 255, 0.42), transparent 60%), linear-gradient(180deg, #1e0f47, #110830);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 40px 100px -50px rgba(123, 44, 255, 0.6);
  text-align: center;
  overflow: hidden;
}

.final__box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000, transparent 75%);
  pointer-events: none;
}

.final__box > * {
  position: relative;
}

.final__mark {
  position: absolute !important;
  right: 6%;
  top: 14%;
  width: 120px;
  height: 120px;
  fill: #ff86d8;
  opacity: 0.3;
  filter: drop-shadow(0 0 24px rgba(255, 79, 196, 0.6));
  animation: glint 7s ease-in-out infinite;
}

.final__mark--b {
  left: 7%;
  right: auto;
  top: auto;
  bottom: 16%;
  width: 64px;
  height: 64px;
  fill: var(--gold);
  filter: drop-shadow(0 0 18px rgba(255, 209, 102, 0.6));
  animation-delay: -3.5s;
}

.final__title {
  max-width: 17ch;
  margin: 0 auto 18px;
}

.final .lead {
  margin: 0 auto 32px;
}

.final__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.final__pts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.final__pts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.final__pts .ico {
  width: 18px;
  height: 18px;
  color: var(--green);
  stroke-width: 2.4;
}

/* ---------- Footer ---------- */

.ftr {
  padding: 64px 0 28px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 40%);
}

.ftr__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.85fr)) minmax(0, 1.25fr);
  gap: 32px;
}

.ftr__brand p {
  max-width: 32ch;
  margin: 16px 0 20px;
  color: var(--dim);
  font-size: 0.9rem;
}

.ftr__tg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(42, 171, 238, 0.12);
  box-shadow: inset 0 0 0 1px rgba(42, 171, 238, 0.32);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 0.2s;
}

.ftr__tg:hover {
  background: rgba(42, 171, 238, 0.2);
}

.ftr__tg .ico {
  width: 18px;
  height: 18px;
  color: #2aabee;
}

.ftr__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.ftr__h {
  margin: 0 0 6px;
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ftr__col a {
  color: var(--muted);
  font-size: 0.92rem;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.2s;
}

.ftr__col a:hover {
  color: var(--gold);
}

.ftr__hours {
  margin: 2px 0 0;
  color: var(--dim);
  font-size: 0.82rem;
}

.ftr__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.84rem;
}

.ftr__bottom p {
  margin: 0;
}

.ftr__rg {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 560px;
}

.age {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.32);
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.74rem;
}

.ftr__made a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.ftr__made a:hover {
  color: var(--gold);
}

/* ---------- Modals ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal[hidden] {
  display: none;
}

.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 3, 18, 0.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s;
}

.modal__box {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  padding: clamp(24px, 4vw, 36px);
  border-radius: 28px;
  background: radial-gradient(90% 40% at 100% 0%, rgba(255, 79, 196, 0.14), transparent 70%), linear-gradient(180deg, #1d1046, #120a2e);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 50px 120px -30px rgba(0, 0, 0, 0.9);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 0.3s, transform 0.45s var(--ease);
}

.modal__box:focus {
  outline: none;
}

.modal__box--login {
  max-width: 440px;
}

.modal.is-open .modal__scrim {
  opacity: 1;
}

.modal.is-open .modal__box {
  opacity: 1;
  transform: none;
}

.modal__x {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.2s;
}

.modal__x:hover {
  background: rgba(255, 255, 255, 0.14);
}

.join__head .eyebrow {
  margin-bottom: 10px;
}

.join__head .h3 {
  margin: 0 0 22px;
  padding-right: 44px;
}

.prog {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.prog li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--dim);
  font-size: 0.82rem;
  font-weight: 800;
  transition: color 0.3s;
}

.prog li span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22);
  color: var(--muted);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.7rem;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.prog li.is-on {
  color: var(--text);
}

.prog li.is-on span {
  background: var(--gold);
  box-shadow: none;
  color: var(--ink);
}

.prog li.is-done {
  color: var(--muted);
}

.prog li.is-done span {
  background: rgba(61, 220, 151, 0.16);
  box-shadow: none;
  color: var(--green);
}

.prog__bar {
  height: 4px;
  margin-bottom: 26px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.prog__bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ff4fc4, #ffd166);
  transform: scaleX(0.3333);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--ease);
}

.jstep {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.js .jstep {
  display: none;
}

.js .jstep.is-on {
  display: block;
  animation: stepIn 0.45s var(--ease);
}

.field {
  margin-bottom: 18px;
}

.field label,
.field__label {
  display: block;
  margin: 0 0 8px;
  font-size: 0.9rem;
  font-weight: 800;
}

.field__label span {
  margin-left: 6px;
  color: var(--dim);
  font-size: 0.82rem;
  font-weight: 600;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"] {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  outline: none;
  transition: box-shadow 0.2s, background-color 0.2s;
}

.field input::placeholder {
  color: #7d70a6;
  font-weight: 500;
}

.field input:focus {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 2px var(--gold);
}

.field input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px #ff6b8b;
}

.field__pre {
  position: relative;
}

.field__pre > span {
  position: absolute;
  left: 16px;
  top: 50%;
  color: var(--dim);
  font-weight: 800;
  transform: translateY(-52%);
  pointer-events: none;
}

.field__pre input[type="text"] {
  padding-left: 34px;
}

.field__hint {
  margin: 6px 0 0;
  color: var(--dim);
  font-size: 0.8rem;
}

.field__err {
  margin: 6px 0 0;
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 700;
}

.field__err:empty {
  display: none;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chipb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.chipb:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text);
}

.chipb[aria-pressed="true"] {
  background: rgba(255, 209, 102, 0.15);
  box-shadow: inset 0 0 0 1.5px var(--gold);
  color: var(--text);
}

.chipb .geo {
  height: auto;
  padding: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-size: 0.84rem;
}

.chips.is-invalid .chipb {
  box-shadow: inset 0 0 0 1px rgba(255, 107, 139, 0.6);
}

.vol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.vol label {
  position: relative;
  margin: 0;
}

.vol input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.vol span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 62px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  pointer-events: none;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.vol small {
  margin-top: 3px;
  color: var(--dim);
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 700;
}

.vol input:checked + span {
  background: rgba(255, 209, 102, 0.15);
  box-shadow: inset 0 0 0 1.5px var(--gold);
}

.vol input:focus-visible + span {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.vol.is-invalid span {
  box-shadow: inset 0 0 0 1px rgba(255, 107, 139, 0.6);
}

.join__intro {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.94rem;
}

.review {
  margin: 0 0 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--line);
}

.review > div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px 16px;
}

.review > div + div {
  border-top: 1px solid var(--line);
}

.review dt {
  color: var(--dim);
  font-size: 0.8rem;
  font-weight: 800;
}

.review dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.review__edit {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
  cursor: pointer;
}

.check input {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: 0;
  opacity: 0;
}

.check__box {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.32);
  color: transparent;
  transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.check__box .ico {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}

.check input:checked + .check__box {
  background: var(--gold);
  box-shadow: none;
  color: var(--ink);
}

.check input:focus-visible + .check__box {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.check input[aria-invalid="true"] + .check__box {
  box-shadow: inset 0 0 0 2px #ff6b8b;
}

.join__nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
}

.join__nav #joinNext {
  margin-left: auto;
}

.join__done {
  padding: 8px 0 2px;
  text-align: center;
}

.join__done:focus {
  outline: none;
}

.done__badge svg {
  width: 88px;
  height: 88px;
  margin: 0 auto;
}

.done__badge circle {
  fill: rgba(61, 220, 151, 0.12);
  stroke: var(--green);
  stroke-width: 3;
  stroke-dasharray: 227;
  stroke-dashoffset: 227;
  animation: dash 0.7s var(--ease) forwards;
}

.done__badge path {
  fill: none;
  stroke: var(--green);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: dash 0.5s 0.5s var(--ease) forwards;
}

.done__id {
  margin: 18px 0 8px;
  color: var(--gold);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.done__txt {
  max-width: 34ch;
  margin: 10px auto 22px;
  color: var(--muted);
}

.done__txt b {
  color: var(--text);
}

.done__mgr {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 12px 18px 12px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: left;
}

.done__mgr b {
  display: block;
  line-height: 1.3;
}

.done__mgr > span:last-child > span {
  color: var(--muted);
  font-size: 0.84rem;
}

.done__mgr .mgr__ava i {
  border-color: #1d1046;
}

.done__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.login {
  text-align: center;
}

.login__ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 79, 196, 0.26), rgba(138, 92, 255, 0.26));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: #ffc4ec;
}

.login .h3 {
  margin: 0 0 8px;
}

.login__sub {
  margin: 0 0 22px;
  color: var(--muted);
}

.login__preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 209, 102, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.22);
  text-align: left;
}

.login__preview > span {
  flex: none;
  color: var(--dim);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.login__preview code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login__preview code b {
  color: var(--gold);
}

.login__preview .ico {
  width: 18px;
  height: 18px;
  color: var(--gold);
}

.login__form {
  text-align: left;
}

.login__form .btn {
  margin-top: 6px;
}

.login__demo {
  padding: 18px;
  border-radius: 16px;
  background: rgba(255, 209, 102, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.3);
  text-align: left;
  animation: stepIn 0.45s var(--ease);
}

.login__demo p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.92rem;
}

.login__demo b {
  color: var(--text);
}

.login__alt {
  margin: 20px 0 0;
  color: var(--dim);
  font-size: 0.88rem;
}

/* Toasts */

.toasts {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 150;
  display: grid;
  gap: 8px;
  width: min(420px, calc(100% - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f7f3ff;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.65);
  pointer-events: auto;
  animation: toastUp 0.45s var(--ease);
  transition: opacity 0.3s, transform 0.3s;
}

.toast.is-out {
  opacity: 0;
  transform: translateY(10px);
}

.toast__ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff4fc4, #8a5cff);
  color: #fff;
}

.toast__ico .ico {
  width: 14px;
  height: 14px;
}

/* ---------- Reveal ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--rd, 0s);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Brands page ---------- */

.phero {
  position: relative;
  margin-top: calc(var(--hdr) * -1);
  padding: calc(var(--hdr) + clamp(28px, 4vw, 56px)) 0 clamp(36px, 5vw, 64px);
  overflow: hidden;
}

.phero__in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
  color: var(--dim);
  font-size: 0.86rem;
  font-weight: 700;
}

.crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--gold);
}

.crumbs .ico {
  width: 14px;
  height: 14px;
}

.crumbs span {
  color: var(--text);
}

.phero__title {
  margin: 0 0 20px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 1rem + 3.4vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.phero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 0;
}

.phero__facts div {
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--line);
}

.phero__facts dt {
  color: var(--dim);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.phero__facts dd {
  margin: 2px 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  white-space: nowrap;
}

.minis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mini {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-height: 108px;
  padding: 18px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}

.mini:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.mini__deal {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem;
  font-weight: 800;
}

.catalog {
  position: relative;
  padding: 0 0 clamp(64px, 8vw, 112px);
}

.tools-bar {
  position: sticky;
  top: var(--hdr);
  z-index: 40;
  padding: 12px 0;
}

.tools-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 6, 32, 0.84);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07), 0 -1px 0 rgba(255, 255, 255, 0.07);
  opacity: 0;
  transition: opacity 0.3s;
}

.tools-bar.is-stuck::before {
  opacity: 1;
}

.tools-bar__in {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 20px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  min-width: 0;
}

.fgroup {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.fgroup__label {
  color: var(--dim);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vchips {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--line);
}

.vchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.vchip span {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.68rem;
}

.vchip:hover {
  color: var(--text);
}

.vchip[aria-pressed="true"] {
  background: var(--gold);
  color: var(--ink);
}

.vchip[aria-pressed="true"] span {
  background: rgba(27, 11, 51, 0.14);
}

.select {
  position: relative;
  display: block;
}

.select select {
  width: 100%;
  min-width: 150px;
  height: 44px;
  padding: 0 38px 0 14px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: box-shadow 0.2s, background-color 0.2s;
}

.select select:hover {
  background: rgba(255, 255, 255, 0.08);
}

.select select:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--gold);
}

.select select.is-set {
  box-shadow: inset 0 0 0 1.5px rgba(255, 209, 102, 0.7);
}

.select option {
  background: #1a0f3d;
  color: var(--text);
}

.select .ico {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  color: var(--muted);
  pointer-events: none;
}

.view {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--line);
}

.view__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.view__btn .ico {
  width: 17px;
  height: 17px;
}

.view__btn:hover {
  color: var(--text);
}

.view__btn[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.results {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 22px 0 20px;
}

.results__count {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.results__count b {
  color: var(--text);
}

.bxgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.bx {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
  scroll-margin-top: calc(var(--hdr) + 96px);
}

.bx[hidden] {
  display: none;
}

.bx.is-flash {
  animation: flash 1.8s var(--ease);
}

.bx.is-enter {
  animation: cardIn 0.5s var(--ease) both;
}

.bx__plate {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  overflow: hidden;
}

.bx__plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1.2px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
  mask-image: linear-gradient(90deg, transparent, #000 70%);
  opacity: 0.5;
}

.bx__plate .blogo {
  position: relative;
}

.bx__tags {
  position: absolute;
  left: 16px;
  top: 16px;
  display: flex;
  gap: 6px;
}

.bx__since {
  position: absolute;
  right: 16px;
  top: 16px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
  font-weight: 800;
}

.bx__body {
  flex: 1;
  padding: 22px 24px 0;
}

.bx__name {
  margin: 0 0 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.bx__desc {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

.deals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.deal {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 209, 102, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.18);
}

.deal span {
  display: block;
  color: var(--dim);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.deal b {
  display: block;
  margin-top: 3px;
  color: var(--gold);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  white-space: nowrap;
}

.deal--off {
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px var(--line);
}

.deal--off b {
  color: var(--dim);
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 700;
}

.bx__row {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.bx__label {
  margin: 0;
  padding-top: 4px;
  color: var(--dim);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.srcs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.srcs li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px 0 7px;
  border-radius: 8px;
  background: rgba(61, 220, 151, 0.09);
  color: #bdf3da;
  font-size: 0.74rem;
  font-weight: 800;
}

.srcs li::before {
  content: "";
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%233ddc97' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.srcs li.no {
  background: rgba(255, 255, 255, 0.03);
  color: var(--dim);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.3);
}

.srcs li.no::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%239385bb' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.bstats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 6px 0 14px;
}

.bstats div {
  position: relative;
  padding: 11px 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.bstats dt {
  color: var(--dim);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bstats dd {
  margin: 3px 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}

.bstats i {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 7px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.bstats i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--w);
  border-radius: 3px;
  background: linear-gradient(90deg, #ff4fc4, #ffd166);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--ease) 0.3s;
}

.js .bx.reveal .bstats i::after {
  transform: scaleX(0);
}

.js .bx.reveal.is-in .bstats i::after {
  transform: none;
}

.bx__row--lps {
  align-items: center;
}

.lplinks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.lplinks a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(255, 209, 102, 0.45);
  text-underline-offset: 4px;
  transition: color 0.2s;
}

.lplinks a:hover {
  color: var(--gold);
}

.lplinks .ico {
  width: 16px;
  height: 16px;
  color: var(--gold);
}

.bx__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--line);
}

/* Comparison table */

.tbl-wrap {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
  animation: cardIn 0.45s var(--ease);
}

.tbl-wrap[hidden] {
  display: none;
}

.ctable {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.ctable thead th {
  position: relative;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line-2);
  color: var(--dim);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.ctable thead th:first-child,
.ctable tbody th {
  padding-left: 22px;
}

.sortb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: -6px -8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.sortb:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.sortb .ico {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

th[aria-sort="descending"] .sortb,
th[aria-sort="ascending"] .sortb {
  color: var(--gold);
}

th[aria-sort="descending"] .sortb .ico,
th[aria-sort="ascending"] .sortb .ico {
  opacity: 1;
}

.ctable tbody tr {
  transition: background-color 0.2s;
}

.ctable tbody tr:hover {
  background: rgba(255, 255, 255, 0.035);
}

.ctable tbody th,
.ctable tbody td {
  padding: 14px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.ctable tbody tr:first-child th,
.ctable tbody tr:first-child td {
  border-top: 0;
}

.ctable td:last-child {
  padding-right: 22px;
  text-align: right;
}

.ctable .num {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ctable .num b {
  color: var(--gold);
  font-family: var(--display);
  font-weight: 600;
}

.ctable .muted {
  color: var(--dim);
}

.tb-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
}

.tb-brand:hover {
  color: var(--gold);
}

.tb-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.tb-mark .ico {
  width: 18px;
  height: 18px;
}

.tb-mark.plate--nova .ico {
  color: var(--gold);
}

.tb-mark.plate--stern .ico {
  color: #f2c46d;
}

.tb-mark.plate--harbor .ico {
  color: #fb923c;
  stroke-width: 2.2;
}

.tb-mark.plate--velvet .ico {
  color: #fda4af;
}

.tb-k {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: #c6ff00;
  color: #0b1b3a;
  font-family: "Barlow Condensed", var(--body);
  font-style: italic;
  font-weight: 800;
  transform: skewX(-8deg);
}

.tb-7 {
  color: #ffc93c;
  font-family: "Luckiest Guy", Impact, sans-serif;
  font-size: 1.1rem;
  padding-top: 0.12em;
}

.empty {
  padding: clamp(40px, 6vw, 72px) 24px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: center;
  animation: cardIn 0.45s var(--ease);
}

.empty[hidden] {
  display: none;
}

.empty__art {
  width: 110px;
  height: 110px;
  margin: 0 auto 18px;
  fill: none;
  stroke-linecap: round;
}

.empty__art circle {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 3;
  stroke-dasharray: 4 8;
}

.empty__art path {
  fill: rgba(255, 79, 196, 0.25);
  stroke: #ff86d8;
  stroke-width: 2;
}

.empty__art .empty__x {
  fill: none;
  stroke: var(--gold);
  stroke-width: 6;
}

.empty p {
  max-width: 46ch;
  margin: 12px auto 24px;
  color: var(--muted);
}

.empty__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.final--brands {
  padding-top: 0;
}

.final__box--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px 48px;
  align-items: center;
  text-align: left;
}

.final__box--row .lead {
  margin: 16px 0 0;
}

.final__box--row .h2 {
  max-width: 18ch;
}

.final__box--row {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
}

.final__box--row .final__mark {
  right: 34%;
  top: 12%;
  width: 72px;
  height: 72px;
}

.final__box--row .final__mark--b {
  left: auto;
  right: 3%;
  top: auto;
  bottom: 10%;
  width: 40px;
  height: 40px;
}

.final__ctas--col {
  flex-direction: column;
  align-items: stretch;
}

/* ---------- Keyframes ---------- */

@keyframes floatY {
  0%,
  100% {
    transform: translateY(0) rotate(var(--rot));
  }
  50% {
    transform: translateY(-10px) rotate(var(--rot));
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes toastSwap {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes toastUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes stepIn {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes flash {
  0%,
  100% {
    box-shadow: inset 0 0 0 1px var(--line);
  }
  25%,
  60% {
    box-shadow: inset 0 0 0 2px var(--gold), 0 0 50px -10px rgba(255, 209, 102, 0.5);
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ping {
  0% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  80%,
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

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

@keyframes glint {
  0%,
  100% {
    opacity: 0.22;
    transform: scale(0.88) rotate(0deg);
  }
  50% {
    opacity: 0.5;
    transform: scale(1) rotate(15deg);
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .hero__visual {
    --hs: 0.86;
  }

  .ftr__top {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ftr__brand {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
  }

  .ftr__brand p {
    margin: 0;
    flex: 1;
    min-width: 240px;
  }
}

@media (max-width: 1080px) {
  .nav,
  .hdr__login {
    display: none;
  }

  .burger {
    display: inline-block;
  }

  .hdr__actions {
    margin-left: auto;
  }

  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile,
  .tile--track,
  .tile--promo {
    grid-column: span 1;
  }

  .tile--track,
  .tile--promo,
  .tile--lp {
    grid-column: 1 / -1;
  }

  .tile--bot {
    grid-row: span 2;
  }

  .tile--mgr {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
  }

  .tile--mgr .tile__head {
    margin-bottom: 0;
  }

  .lps {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lps li {
    grid-column: span 2;
  }

  .lps li:nth-child(n + 4) {
    grid-column: span 3;
  }

  .lp__thumb {
    aspect-ratio: auto;
    height: 150px;
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .tcar__track {
    grid-auto-columns: calc((100% - 20px) / 2);
  }

  .calc {
    grid-template-columns: minmax(0, 1fr);
  }

  .calc__in {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .tools-bar {
    position: relative;
    top: auto;
  }

  .bx {
    scroll-margin-top: calc(var(--hdr) + 16px);
  }
}

@media (max-width: 960px) {
  .hero__in {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__copy {
    max-width: 680px;
  }

  .hero__visual {
    --hs: 1;
  }

  .hv {
    right: auto;
    left: 50%;
    margin-left: -290px;
    transform-origin: 50% 0;
  }

  .shead--row {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat:nth-child(3)::before {
    display: none;
  }

  .stat:nth-child(3),
  .stat:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .bgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .models {
    grid-template-columns: minmax(0, 1fr);
  }


  .payouts {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq__side {
    position: static;
  }

  .phero__in {
    grid-template-columns: minmax(0, 1fr);
  }

  .minis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bxgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .final__box--row {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }

  .final__box--row .eyebrow {
    justify-content: center;
  }

  .final__box--row .h2,
  .final__box--row .lead {
    margin-left: auto;
    margin-right: auto;
  }

  .final__ctas--col {
    flex-direction: row;
    justify-content: center;
  }

  .final__box--row .final__mark {
    right: 16px;
    top: 14px;
    width: 40px;
    height: 40px;
  }

  .final__box--row .final__mark--b {
    right: auto;
    left: 18px;
    top: auto;
    bottom: 18px;
    width: 30px;
    height: 30px;
  }
}

@media (min-width: 761px) and (max-width: 1080px) {
  .method {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
  }

  .method em {
    margin-left: 0;
  }
}

@media (min-width: 600px) and (max-width: 960px) {
  .model {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    column-gap: 32px;
  }

  .model > * {
    grid-column: 1;
  }

  .model__badge {
    position: static;
    justify-self: start;
    margin-bottom: 14px;
  }

  .model .ticks {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin: 4px 0 18px;
  }

  .model .model__best {
    grid-column: 1 / -1;
  }

  .model__desc {
    margin-bottom: 0;
  }
}

@media (max-width: 760px) {
  :root {
    --gutter: 16px;
    --hdr: 64px;
  }

  .hero__visual {
    --hs: 0.72;
  }

  .stat {
    padding: 22px 20px;
  }

  .stat + .stat::before {
    top: 20px;
    bottom: 20px;
  }

  .bgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .tile,
  .tile--bot {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .tile {
    padding: 22px 20px;
  }

  .builder__subs {
    grid-template-columns: minmax(0, 1fr);
  }

  .banners {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  }

  .bnr--lb {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bnr--lb figcaption {
    grid-column: 1 / -1;
  }

  .tile--mgr {
    display: flex;
  }

  .tile--mgr .tile__head {
    margin-bottom: 22px;
  }

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

  .lps li,
  .lps li:nth-child(n + 4) {
    grid-column: auto;
  }

  .lp__thumb {
    aspect-ratio: 4 / 3;
    height: auto;
  }

  .lp {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
  }

  .lp__meta {
    padding: 0 26px 0 0;
  }

  .lp__meta b {
    font-size: 0.95rem;
  }

  .calc__sum {
    grid-template-columns: minmax(0, 1fr);
  }

  .calc__side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chart {
    grid-template-rows: 210px auto;
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .calc__foot {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

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

  .cycle {
    padding: 22px 20px;
  }

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

  .cycle__steps li {
    display: grid;
    grid-template-columns: 40px 18px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
  }

  .cycle__day {
    grid-row: 1 / 3;
    grid-column: 1;
  }

  .cycle__node {
    grid-row: 1 / 3;
    grid-column: 2;
    margin: 1px 0 0;
  }

  .cycle__steps b,
  .cycle__steps li > span:last-child {
    grid-column: 3;
  }

  .cycle__steps li > span:last-child {
    margin-top: 2px;
  }

  .cycle__steps::before,
  .cycle__steps::after {
    left: 62px;
    right: auto;
    top: 10px;
    bottom: 40px;
    width: 2px;
    height: auto;
  }

  .cycle__steps::after {
    background: linear-gradient(180deg, #8a5cff, #ff4fc4 60%, #ffd166);
    transform-origin: 50% 0;
  }

  .js .cycle__steps::after {
    transform: scaleY(0);
  }

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

  .step {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 16px;
    padding: 22px 20px;
  }

  .step__n {
    grid-row: 1 / 4;
    margin: 0;
    font-size: 2.2rem;
  }

  .step p {
    margin: 6px 0 12px;
  }

  .step::after {
    display: none;
  }

  .tcar__track {
    grid-auto-columns: 86%;
    gap: 14px;
  }

  .tcard {
    padding: 24px 22px;
  }

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

  .tcar__ctrl .round {
    width: 46px;
    height: 46px;
  }

  .faq__a p {
    padding-right: 8px;
  }

  .final__box {
    border-radius: 28px;
  }

  .final__mark {
    width: 64px;
    height: 64px;
    right: 7%;
    top: 4%;
  }

  .final__mark--b {
    width: 40px;
    height: 40px;
    left: 6%;
    top: auto;
    bottom: 4%;
  }

  .final__ctas .btn {
    width: 100%;
  }

  .final__ctas--col {
    flex-direction: column;
  }

  .ftr__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
  }

  .ftr__brand {
    display: block;
  }

  .ftr__brand p {
    margin: 14px 0 18px;
  }

  .ftr__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .modal {
    align-items: flex-end;
    padding: 0;
  }

  .modal__box {
    max-height: 94vh;
    border-radius: 26px 26px 0 0;
    transform: translateY(40px);
  }

  .vol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review > div {
    grid-template-columns: 82px minmax(0, 1fr) auto;
    padding: 12px 14px;
  }

  .prog li {
    font-size: 0.76rem;
  }

  .minis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mini {
    min-height: 96px;
    padding: 16px;
  }

  .mini .blogo {
    --fs: 16px;
  }

  .phero__facts div {
    flex: 1 1 40%;
  }

  .tools-bar__in {
    align-items: stretch;
  }

  .filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .filters .fgroup:first-child {
    grid-column: 1 / -1;
  }

  .vchips {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .vchip {
    flex: 1 0 auto;
    justify-content: center;
  }

  .select select {
    min-width: 0;
  }

  .view {
    width: 100%;
  }

  .view__btn {
    flex: 1;
    justify-content: center;
  }

  .bx__body {
    padding: 20px 18px 0;
  }

  .bx__foot {
    padding: 16px 18px 18px;
  }

  .bx__plate {
    height: 128px;
  }

  .bx__plate .blogo--xl {
    --fs: 23px;
  }

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

  .bx__label {
    padding-top: 0;
  }

  .bstats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .deal {
    padding: 10px;
  }

  .deal b {
    font-size: 0.86rem;
  }

  .deal--off b {
    font-size: 0.78rem;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .lg-only {
    display: none;
  }

  .sm-only {
    display: inline;
  }

  .hero__visual {
    --hs: 0.6;
  }

  .hero__ctas .btn {
    width: 100%;
  }

  .hero__deal {
    gap: 6px;
    font-size: 0.86rem;
  }

  .hero__deal i {
    display: none;
  }

  .hero__deal b {
    padding: 6px 10px;
    border-radius: 99px;
    background: rgba(255, 209, 102, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.22);
  }

  .lp__q {
    font-size: 0.56rem;
  }

  .logo__text {
    font-size: 0.96rem;
  }

  .logo__mark {
    width: 30px;
    height: 30px;
  }

  .shead--row .tlink {
    margin-top: 2px;
  }

  .kpis dd {
    font-size: 0.94rem;
  }

  .bcard__foot {
    padding: 14px 18px 16px;
  }

  .bcard__body {
    padding: 18px 18px 0;
  }

  .calc__side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calc__cmp-row {
    gap: 6px;
  }

  .calc__cmp-row div {
    padding: 10px;
  }

  .calc__cmp-row dd {
    font-size: 0.86rem;
  }

  .seg__opt span {
    font-size: 0.86rem;
  }

  .lp {
    grid-template-columns: 116px minmax(0, 1fr);
  }

  .banners {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
    gap: 12px;
  }

  .bnr--lb {
    grid-template-columns: minmax(0, 1fr);
  }

  .ledger {
    padding: 18px 16px 8px;
  }

  .ledger__tbl th:nth-child(2),
  .ledger__tbl td:nth-child(2) {
    display: none;
  }

  .method {
    padding: 12px 14px 12px 12px;
  }

  .ftr__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .ftr__brand {
    grid-column: 1 / -1;
  }

  .phero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .minis {
    gap: 10px;
  }

  .mini .blogo {
    --fs: 14px;
  }

  .mini__deal {
    font-size: 0.7rem;
  }

  .vchips {
    gap: 2px;
  }

  .vchip {
    gap: 5px;
    padding: 0 8px;
  }

  .bx__plate .blogo--xl {
    --fs: 20px;
  }

  .deals {
    grid-template-columns: minmax(0, 1fr);
  }

  .deal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .deal b {
    margin: 0;
    font-size: 0.98rem;
  }

  .bx__since {
    display: none;
  }

  .bx__foot .btn {
    flex: 1;
  }
}

@media (max-width: 380px) {
  .hero__visual {
    --hs: 0.555;
  }

  .mini .blogo {
    --fs: 12.5px;
  }

  .mini {
    padding: 14px;
  }

  .vchip span {
    display: none;
  }

  .vchip {
    padding: 0 9px;
  }
}

@media (max-width: 359px) {
  .hdr__in {
    gap: 8px;
  }

  .logo__text {
    font-size: 0.86rem;
  }

  .hdr__join {
    padding: 0 14px;
  }
}

@media (hover: none) {
  .bcard:hover,
  .lp:hover,
  .mini:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .js .dash__line {
    stroke-dashoffset: 0;
  }

  .float {
    animation: none;
  }
}