/* Public site (landing, sign-in, sign-up): airy light panels that slide over each other, one light theme. LTR and RTL. */
:root {
  --page: #fffdfb;
  --paper: #ffffff;
  --paper-2: #fbf9ff;
  --hair: rgba(60, 50, 120, 0.1);
  --mute: #5e5b78;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dir: 1;
  --card-shadow: 0 30px 60px -30px rgba(70, 50, 170, 0.28), 0 10px 24px -16px rgba(255, 106, 77, 0.2);
  --wrap: 1160px;
}
[dir="rtl"] {
  --dir: -1;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}
body.site {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:where(body.site) a {
  color: inherit;
  text-decoration: none;
}
:where(body.site) :is(h1, h2, h3, p, ul, ol) {
  margin: 0;
  padding: 0;
}
:where(body.site) :is(ul, ol) {
  list-style: none;
}
.latin {
  font-family: "Outfit", system-ui, sans-serif;
  direction: ltr;
  unicode-bidi: isolate;
}
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 8px;
}
.wrap {
  width: min(var(--wrap), 100% - 32px);
  margin-inline: auto;
}
[lang="fa"] body.site,
body.site[data-lang="fa"] {
  line-height: 1.8;
}
body.site[data-lang="fa"] h1,
body.site[data-lang="fa"] h2,
body.site[data-lang="fa"] h3 {
  letter-spacing: 0;
}

/* --- Floating pill navigation -------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 16px 0 auto;
  z-index: 50;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 32px);
  padding: 6px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
  transition:
    background 0.4s,
    border-color 0.4s,
    color 0.4s,
    box-shadow 0.4s;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
}
[dir="rtl"] .logo {
  padding: 4px 4px 4px 14px;
}
.logo-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
}
.nav-panel {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-links {
  display: flex;
  gap: 2px;
}
.nav-links a {
  position: relative;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}
.nav-links a::after,
.cap-links a::after {
  content: "";
  position: absolute;
  inset: auto 14px 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
[dir="rtl"] .nav-links a::after,
[dir="rtl"] .cap-links a::after {
  transform-origin: right;
}
.nav-links a:hover::after,
.cap-links a:hover::after {
  transform: scaleX(1);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-actions [hidden] {
  display: none;
}
.pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    transform 0.3s var(--ease),
    background 0.3s,
    box-shadow 0.3s;
}
.pill.dark {
  background: var(--brand);
  color: #fff;
}
.pill.ghost:hover {
  background: rgba(127, 127, 127, 0.14);
}
.pill.dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -8px rgba(255, 106, 77, 0.55);
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
  color: var(--ink);
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s;
}
.lang-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.4);
}
.globe {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.6), transparent 45%),
    conic-gradient(var(--brand), #ffb4a0, var(--brand));
}
.menu-btn {
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
}

@media (max-width: 899px) {
  .nav-bar {
    width: min(560px, 100% - 32px);
  }
  .logo {
    margin-inline-end: auto;
  }
  .menu-btn {
    display: grid;
  }
  .nav-panel {
    position: absolute;
    inset: calc(100% + 10px) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--hair);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--ink);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.3);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transition:
      opacity 0.3s var(--ease),
      transform 0.4s var(--ease),
      visibility 0s 0.4s;
  }
  .nav.open .nav-panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  html:not(.js) .nav-panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    position: static;
    box-shadow: none;
    border: 0;
  }
  html:not(.js) .nav-bar {
    flex-wrap: wrap;
    border-radius: 28px;
  }
  .nav-links {
    flex-direction: column;
  }
  .nav-links a {
    padding: 12px 14px;
    font-size: 16px;
  }
  .nav-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .pill {
    justify-content: center;
    padding: 12px 16px;
  }
}

/* --- Shared bits ---------------------------------------------------------------------------- */
.btn-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 0;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(255, 106, 77, 0.75);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s,
    background 0.25s;
}
.btn-blue[hidden] {
  display: none;
}
.btn-blue:hover {
  transform: translateY(-2px);
  background: var(--brand-hot);
  box-shadow: 0 20px 34px -14px rgba(255, 106, 77, 0.7);
}
.btn-blue .arr {
  transition: transform 0.35s var(--ease);
}
.btn-blue:hover .arr {
  transform: translateX(calc(3px * var(--dir)));
}
[dir="rtl"] .arr {
  scale: -1 1;
}
.btn-blue.block {
  display: flex;
  width: 100%;
  padding: 13px 16px;
  font-size: 15px;
}
.badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.mark {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding-inline: 0.14em;
  margin-inline: -0.04em;
  color: var(--ink);
}
.mark::before {
  content: "";
  position: absolute;
  inset: 0.06em -0.02em 0.02em;
  z-index: -1;
  border-radius: 0.14em;
  background: var(--yellow);
  transform-origin: left;
}
[dir="rtl"] .mark::before {
  transform-origin: right;
}
.ydot {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.18);
}
.head {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
}
.head h2,
.hero h1 {
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.028em;
}
.head h2 {
  font-size: clamp(34px, 4.6vw, 62px);
}
[lang="fa"] .head h2,
[lang="fa"] .hero h1 {
  line-height: 1.3;
}
.head .sub {
  max-width: 560px;
  color: var(--mute);
  font-size: 18px;
}
.ln {
  display: block;
  overflow: hidden;
  padding: 0.08em 0.1em 0.16em;
  margin: -0.08em -0.1em -0.16em;
}
.ln > span {
  display: block;
}

/* --- Panels slide over each other ----------------------------------------------------------- */
.panel {
  position: relative;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--paper);
  overflow-x: clip;
}
.panel + .panel {
  margin-top: calc(var(--radius-lg) * -1);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-lg);
  box-shadow: 0 -24px 60px -34px rgba(0, 0, 0, 0.22);
}
.hero {
  z-index: 1;
  padding: 128px 0 0;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(255, 209, 102, 0.14), transparent 70%),
    radial-gradient(50% 36% at 85% 40%, rgba(188, 78, 51, 0.07), transparent 70%), var(--paper);
}
.features {
  z-index: 2;
  padding: 130px 0 150px;
  background: var(--paper-2);
}
.flow {
  z-index: 3;
  padding: 120px 0 170px;
}

/* --- Hero ------------------------------------------------------------------------------------ */
.hero-in {
  display: grid;
  justify-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
}
.hero h1 {
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.04;
}
.lead {
  max-width: 540px;
  margin-top: 32px;
  color: var(--mute);
  font-size: clamp(16px, 1.5vw, 19px);
}
.hero-cta {
  margin-top: 34px;
}

/* Floating isometric tiles */
.tiles {
  position: relative;
  width: min(1240px, 100% - 16px);
  margin: -6px auto 0;
  height: clamp(300px, 33vw, 470px);
}
.tile {
  position: absolute;
  width: var(--tw);
  will-change: transform;
  --tw: clamp(150px, 17vw, 240px);
}
.tile-f {
  position: relative;
  width: 100%;
  aspect-ratio: 1.15;
  animation: float calc(6s + var(--f) * 0.7s) ease-in-out calc(var(--f) * -1.3s) infinite;
}
.plate {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 22%;
  background: linear-gradient(135deg, #fff, #fff7f3);
  transform: translate(-50%, -50%) scaleY(0.58) rotate(45deg);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.035),
    5px 5px 0 #ece8fb,
    26px 34px 46px -14px rgba(0, 0, 0, 0.17);
}
.tile-ic {
  position: absolute;
  left: 50%;
  top: 36%;
  width: 40%;
  translate: -50% -50%;
  animation: bob 5s ease-in-out calc(var(--f) * -0.9s) infinite;
  filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.16));
}
.tile-ic svg {
  display: block;
  width: 100%;
  height: auto;
}
.t1 {
  inset-inline-start: 1%;
  top: 14%;
}
.t2 {
  inset-inline-start: 17%;
  top: 52%;
}
.t3 {
  inset-inline-start: 34%;
  top: 22%;
}
.t4 {
  inset-inline-start: 50%;
  top: 62%;
}
.t5 {
  inset-inline-start: 67%;
  top: 20%;
}
.t6 {
  inset-inline-start: 82%;
  top: 50%;
}
@media (max-width: 760px) {
  .tiles {
    height: 300px;
  }
  .tile {
    --tw: 124px;
  }
  .t1 {
    inset-inline-start: -2%;
    top: 4%;
  }
  .t2 {
    inset-inline-start: 31%;
    top: 22%;
  }
  .t3 {
    inset-inline-start: 62%;
    top: 2%;
  }
  .t4 {
    inset-inline-start: 4%;
    top: 52%;
  }
  .t5 {
    inset-inline-start: 36%;
    top: 62%;
  }
  .t6 {
    inset-inline-start: 66%;
    top: 40%;
  }
}
@keyframes float {
  50% {
    transform: translateY(-14px);
  }
}
@keyframes bob {
  50% {
    transform: translateY(-5px);
  }
}

/* --- Features -------------------------------------------------------------------------------- */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 64px auto 0;
  max-width: 1000px;
}
.card {
  padding: 22px 22px 34px;
  border: 1px solid var(--hair);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: var(--card-shadow);
  text-align: center;
}
.card h3 {
  margin-top: 28px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.card p {
  max-width: 400px;
  margin: 10px auto 0;
  color: var(--mute);
  font-size: 15px;
}
.mock {
  display: grid;
  place-items: center;
  height: 280px;
  padding: 24px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(180deg, #faf9ff, #f1eeff);
}
.m-win {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 380px;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 0 0 1px var(--hair),
    0 20px 40px -22px rgba(0, 0, 0, 0.3);
  text-align: start;
}
.m-dots {
  display: flex;
  gap: 5px;
}
.m-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff6b6b;
}
.m-dots i:nth-child(2) {
  background: #ffd166;
}
.m-dots i:nth-child(3) {
  background: #3ecf8e;
}
.m-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  background: #f6f4ff;
  transition: transform 0.6s var(--ease);
}
.m-row:first-of-type {
  background: #fff;
  box-shadow:
    0 0 0 1px var(--hair),
    0 14px 26px -14px rgba(0, 0, 0, 0.3);
  transform: translateX(calc(10px * var(--dir)));
}
.card:hover .m-row:first-of-type {
  transform: none;
}
.m-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 138, 92, 0.12);
  color: var(--pink);
  font-size: 12px;
  font-weight: 700;
}
.m-txt {
  display: grid;
  min-width: 0;
  flex: 1;
}
.m-txt b {
  font-size: 12px;
}
.m-txt small {
  overflow: hidden;
  color: var(--mute);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toggle {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #2fc772;
}
.toggle::after {
  content: "";
  position: absolute;
  inset-block: 2px;
  inset-inline-start: 2px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transform: translateX(calc(14px * var(--dir)));
}
.toggle.off {
  background: #d6d2ee;
}
.toggle.off::after {
  transform: none;
}
.m-wallet {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 380px;
}
.m-balance {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(190, 175, 255, 0.2);
  border-radius: 18px;
  background: radial-gradient(120% 100% at 100% 0%, rgba(255, 106, 77, 0.45), transparent 55%), #fff;
  color: #fff;
  text-align: start;
  box-shadow: 0 24px 40px -22px rgba(0, 0, 0, 0.6);
}
.m-balance small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}
.m-balance b {
  font-size: 34px;
  letter-spacing: -0.03em;
}
.m-top {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--brand);
  font-size: 12px;
  font-weight: 600;
}
.m-lines {
  display: grid;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--hair);
}
.m-line {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.m-line b {
  color: var(--mute);
  font-weight: 600;
}
.mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.mini {
  padding: 22px 22px 24px;
  border: 1px solid var(--hair);
  border-radius: 22px;
  background: var(--paper);
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s;
}
.mini:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow);
}
.mini-ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--brand);
  background: rgba(255, 106, 77, 0.12);
}
.mini-ic.c1 {
  color: #7a5200;
  background: rgba(255, 209, 102, 0.4);
}
.mini-ic.c2 {
  color: var(--pink);
  background: rgba(255, 138, 92, 0.1);
}
.mini h3 {
  margin-top: 16px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mini p {
  margin-top: 6px;
  color: var(--mute);
  font-size: 14px;
}

/* --- Flow diagram ---------------------------------------------------------------------------- */
.tree {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0;
  margin-top: 60px;
}
.fnode {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  box-shadow: 0 20px 36px -16px rgba(255, 106, 77, 0.6);
}
.latin-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
}
.fnode::after {
  content: "";
  position: absolute;
  inset: 100% 50% auto;
  width: 2px;
  height: 36px;
  background: #e2defa;
}
.fgrid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 20px;
  width: 100%;
  max-width: 1000px;
  margin-top: 72px;
}
.fgrid::before {
  content: "";
  position: absolute;
  inset: -36px calc((100% - 60px) / 8) auto;
  border-top: 2px solid #e2defa;
}
.fcard {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 112px;
  padding: 18px 20px;
  border: 1px solid var(--hair);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 36px -24px rgba(0, 0, 0, 0.22);
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s;
}
.fcard:hover {
  transform: translateY(-4px);
}
.fcard::before {
  content: "";
  position: absolute;
  inset: -36px 50% auto;
  width: 2px;
  height: 36px;
  background: #e2defa;
}
.fcard:nth-child(n + 5) {
  grid-row: 2;
}
.fcard:nth-child(5) {
  grid-column: 2;
}
.fcard:nth-child(6) {
  grid-column: 3;
}
.fdot {
  width: 9px;
  height: 9px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(255, 106, 77, 0.16);
}
.fcard b {
  font-size: 16px;
  font-weight: 600;
}
.fcard small {
  color: var(--mute);
  font-size: 13px;
  line-height: 1.45;
}

/* --- Dark band, quatrefoil corners ----------------------------------------------------------- */
.band {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(520px, 70vh, 760px);
  padding: 140px 0 100px;
  overflow: hidden;
  text-align: center;
}
.band .wrap {
  position: relative;
  z-index: 1;
}
.big {
  font-size: clamp(38px, 6.4vw, 96px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.028em;
}
[lang="fa"] .big {
  line-height: 1.35;
}
.band .chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 760px;
  margin: 44px auto 0;
}
.chip {
  padding: 8px 16px;
  border: 1px solid rgba(190, 175, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #3a3757;
  font-size: 14px;
  font-weight: 500;
}
.quat {
  position: absolute;
  width: clamp(170px, 24vw, 340px);
  height: auto;
  animation: drift 14s ease-in-out infinite;
}
.q1 {
  inset: -6% auto auto -5%;
}
.q2 {
  inset: -4% -6% auto auto;
  animation-delay: -4s;
}
.q3 {
  inset: auto auto 3% -5%;
  animation-delay: -8s;
}
.q4 {
  inset: auto -6% 5% auto;
  animation-delay: -11s;
}
[dir="rtl"] .q1 {
  inset: -6% -5% auto auto;
}
[dir="rtl"] .q2 {
  inset: -4% auto auto -6%;
}
[dir="rtl"] .q3 {
  inset: auto -5% 3% auto;
}
[dir="rtl"] .q4 {
  inset: auto auto 5% -6%;
}
.q1 .quat-dot,
.q4 .quat-dot {
  transform: translate(-6px, -6px);
}
.q2 .quat-dot,
.q3 .quat-dot {
  transform: translate(-100px, 0);
}
@keyframes drift {
  50% {
    transform: translateY(-14px) rotate(4deg);
  }
}

/* --- Pricing --------------------------------------------------------------------------------- */
.pricing {
  padding: 110px 0 100px;
}
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1040px;
  margin: 84px auto 0;
}
.plan {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 52px 24px 24px;
  border: 1px solid rgba(190, 175, 255, 0.2);
  border-radius: 26px;
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 6px rgba(255, 255, 255, 0.015),
    0 30px 60px -30px rgba(0, 0, 0, 0.8);
  transition:
    transform 0.5s var(--ease),
    border-color 0.4s;
}
.plan:hover {
  border-color: rgba(200, 185, 255, 0.4);
}
.plan.hot {
  border-color: rgba(255, 209, 102, 0.5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), #fff);
}
.plan-badge {
  position: absolute;
  inset-block-start: -28px;
  inset-inline-start: 24px;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 5px solid var(--tint-lilac);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 1px #333;
}
.plan-pill {
  justify-self: start;
  padding: 4px 12px;
  border: 1px solid #333;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #3a3757;
  font-size: 12px;
  font-weight: 600;
}
.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.price b {
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}
.price small {
  color: var(--mute);
  font-size: 16px;
}
.plan-tag {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--mute);
  font-size: 14px;
}
.plan-list {
  display: grid;
  gap: 12px;
  margin-block: 6px 10px;
}
.plan-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #3a3757;
  font-size: 14px;
  line-height: 1.5;
}
.plan-list svg {
  flex: none;
  margin-top: 1px;
  color: var(--mute);
}
.plan .btn-blue[hidden] {
  display: none;
}
.price-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 44px auto 0;
  padding: 14px 22px;
  border: 1px solid rgba(190, 175, 255, 0.2);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  color: #3a3757;
  font-size: 15px;
  text-align: start;
}

/* --- FAQ ------------------------------------------------------------------------------------- */
.faq {
  padding: 60px 0 110px;
}
.acc {
  display: grid;
  gap: 12px;
  max-width: 820px;
  margin: 48px auto 0;
}
.acc details {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  transition:
    border-color 0.3s,
    background 0.3s;
}
.acc details[open] {
  border-color: rgba(255, 255, 255, 0.2);
  background: #fff;
}
.acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.acc summary::-webkit-details-marker {
  display: none;
}
.plus {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition:
    transform 0.45s var(--ease),
    background 0.3s;
}
.plus::before,
.plus::after {
  content: "";
  position: absolute;
  inset: 50% 9px auto;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: #fff;
}
.plus::after {
  transform: rotate(90deg);
}
details[open] .plus {
  transform: rotate(45deg);
  background: var(--yellow);
}
details[open] .plus::before,
details[open] .plus::after {
  background: var(--ink);
}
.acc details p {
  padding: 0 22px 22px;
  color: var(--mute);
  font-size: 15.5px;
  animation: fade 0.5s var(--ease);
}
.acc details[open] summary {
  padding-bottom: 12px;
}
@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* --- Final call to action -------------------------------------------------------------------- */
.cta {
  position: relative;
  padding: 40px 0 100px;
  text-align: center;
}
.cap {
  flex-wrap: wrap;
  justify-content: center;
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 10px;
}
.cap .logo,
.cap-links {
  padding: 6px;
  border: 1px solid rgba(190, 175, 255, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.cap .logo {
  padding: 6px 14px 6px 8px;
  white-space: nowrap;
}
[dir="rtl"] .cap .logo {
  padding: 6px 8px 6px 14px;
}
.cap-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
}
.cap-links a {
  position: relative;
  padding: 8px 14px;
  font-size: 14px;
  color: #3a3757;
}
.cta-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 40px);
  width: min(900px, 100%);
  margin: 64px auto 0;
  padding: clamp(30px, 5vw, 56px) 20px;
  border: 1px solid rgba(190, 175, 255, 0.2);
  border-radius: 24px;
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 40px 80px -40px #000;
}
.cta-panel h2 {
  font-size: clamp(36px, 6.4vw, 92px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.028em;
}
[lang="fa"] .cta-panel h2 {
  line-height: 1.3;
}
.cta-panel .ydot {
  width: clamp(10px, 1.3vw, 14px);
  height: clamp(10px, 1.3vw, 14px);
}
.pulse {
  animation: pulse 2.4s ease-in-out infinite;
}
.pulse:last-child {
  animation-delay: -1.2s;
}
@keyframes pulse {
  50% {
    transform: scale(1.5);
    box-shadow: 0 0 0 10px rgba(255, 209, 102, 0.1);
  }
}
.cta-sub {
  margin-top: 28px;
  color: var(--mute);
  font-size: 17px;
}
.cta-btn {
  margin-top: 22px;
}
.cta-btn [hidden] {
  display: none;
}
.socials {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  height: 92px;
  margin-top: 46px;
}
.socials a {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(190, 175, 255, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  color: #3a3757;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: float 6s ease-in-out infinite;
  transition:
    background 0.3s,
    color 0.3s;
}
.socials a:nth-child(1) {
  margin-top: 0;
  animation-delay: 0s;
}
.socials a:nth-child(2) {
  margin-top: 8px;
  animation-delay: -1.4s;
}
.socials a:nth-child(3) {
  margin-top: 16px;
  animation-delay: -2.8s;
}
.socials a:nth-child(4) {
  margin-top: 24px;
  animation-delay: -4.2s;
}
.socials a:hover {
  background: #fff;
  color: var(--ink);
}
.foot {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--mute);
  font-size: 14px;
}
.foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 26px;
}
.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.foot a:hover {
  color: #fff;
}

/* --- Reveal motion (only when script is on; content is visible without it) ------------------- */
.js .rv {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 100ms + 150ms);
}
.js .in .rv,
.js .rv.in {
  opacity: 1;
  transform: none;
}
.js .ln > span {
  transform: translateY(112%);
  transition: transform 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .in .ln > span {
  transform: none;
}
.js .mark::before {
  transform: scaleX(0);
  transition: transform 0.9s var(--ease) 0.55s;
}
.js .in .mark::before {
  transform: none;
}
.hero .tile-r {
  animation: tile-in 1.1s var(--ease) both;
  animation-delay: calc(var(--i) * 110ms + 400ms);
}
@keyframes tile-in {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .rv,
  .js .ln > span,
  .js .mark::before {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .tile-f,
  .tile-ic,
  .quat,
  .pulse,
  .socials a,
  .hero .tile-r,
  .acc details p {
    animation: none;
  }
}

/* --- Responsive ------------------------------------------------------------------------------ */
@media (max-width: 960px) {
  .mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .plans {
    grid-template-columns: 1fr;
    max-width: 440px;
    gap: 56px;
  }
  .fgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fgrid::before {
    inset-inline: calc((100% - 20px) / 4);
  }
  .fcard:nth-child(n) {
    grid-row: auto;
    grid-column: auto;
  }
  .fcard:nth-child(n + 3)::before {
    inset: -36px 50% auto;
  }
}
@media (max-width: 680px) {
  .hero {
    padding-top: 124px;
  }
  .features {
    padding: 90px 0 110px;
  }
  .flow {
    padding: 90px 0 120px;
  }
  .duo,
  .mini-grid {
    grid-template-columns: 1fr;
  }
  .duo {
    margin-top: 44px;
  }
  .mock {
    height: 250px;
    padding: 16px;
  }
  .fgrid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-inline-start: 28px;
  }
  .fgrid::before {
    inset: -36px auto 24px 8px;
    width: 0;
    border-top: 0;
    border-inline-start: 2px solid #e2defa;
  }
  [dir="rtl"] .fgrid::before {
    inset: -36px 8px 24px auto;
  }
  .fcard::before {
    inset: 50% auto auto -28px;
    width: 20px;
    height: 2px;
  }
  [dir="rtl"] .fcard::before {
    inset: 50% -28px auto auto;
  }
  .fcard:nth-child(n + 3)::before {
    inset: 50% auto auto -28px;
  }
  [dir="rtl"] .fcard:nth-child(n + 3)::before {
    inset: 50% -28px auto auto;
  }
  .fnode::after {
    height: 36px;
  }
  .band {
    min-height: 480px;
    padding: 110px 0 80px;
  }
  .pricing {
    padding: 80px 0;
  }
  .price-note {
    flex-direction: column;
    text-align: center;
  }
  .cta-panel {
    gap: 12px;
    padding-inline: 12px;
  }
  .cta-panel h2 {
    font-size: 8.2vw;
  }
  .socials a {
    width: 48px;
    height: 48px;
  }
}

/* --- Sign-in and sign-up --------------------------------------------------------------------- */
.auth-page {
  background: var(--paper);
}
.auth {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  min-height: 100vh;
}
.auth-side {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 36px clamp(28px, 5vw, 64px);
  overflow: hidden;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--tint-peach);
  color: var(--ink);
}
[dir="rtl"] .auth-side {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.auth-side .logo-mark {
  background: var(--grad);
  color: #fff;
}
.auth-side .logo,
.auth-copy,
.auth-side small {
  position: relative;
  z-index: 1;
}
.auth-side .logo {
  align-self: flex-start;
}
.auth-side .quat {
  width: 260px;
}
.auth-side .q1 {
  inset: -50px auto auto -60px;
}
.auth-side .q4 {
  inset: auto -70px -60px auto;
}
[dir="rtl"] .auth-side .q1 {
  inset: -50px -60px auto auto;
}
[dir="rtl"] .auth-side .q4 {
  inset: auto auto -60px -70px;
}
.auth-copy h2 {
  max-width: 14ch;
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
[lang="fa"] .auth-copy h2 {
  max-width: 18ch;
  line-height: 1.4;
}
.auth-copy p {
  max-width: 380px;
  margin-top: 16px;
  color: var(--mute);
}
.auth-copy .plan-list {
  margin-top: 28px;
}
.auth-side small {
  color: var(--mute);
}
.auth-main {
  display: flex;
  flex-direction: column;
  padding: 24px clamp(20px, 5vw, 64px) 40px;
}
.auth-top {
  display: flex;
  justify-content: flex-end;
}
.auth-box {
  width: min(420px, 100%);
  margin: auto;
  padding-block: 24px;
}
.auth-box h1 {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.028em;
}
[lang="fa"] .auth-box h1 {
  line-height: 1.4;
}
.auth-box .sub {
  margin-top: 8px;
  color: var(--mute);
}
.field {
  display: grid;
  gap: 6px;
  margin-top: 18px;
}
.field label {
  font-size: 14px;
  font-weight: 600;
}
.field input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(60, 50, 120, 0.22);
  border-radius: 12px;
  background: #fff;
  /* The page is always light: without an explicit colour a dark OS theme turns the text white on white. */
  color: #16132b;
  color-scheme: light;
  font: inherit;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.field input::placeholder {
  color: #7a7796;
  opacity: 1;
}
.field input:-webkit-autofill {
  -webkit-text-fill-color: #16132b;
  box-shadow: 0 0 0 40px #fff inset;
}
.field input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus);
}
.field small {
  color: var(--mute);
  font-size: 13px;
}
#auth-form .btn-blue {
  margin-top: 24px;
}
#auth-form .btn-blue:disabled {
  opacity: 0.55;
  cursor: wait;
}
.form-error {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(214, 52, 42, 0.4);
  border-radius: 12px;
  background: rgba(214, 52, 42, 0.07);
  color: #a8202f;
  font-size: 14px;
}
.form-error[hidden] {
  display: none;
}
.auth-alt {
  margin-top: 18px;
  color: var(--mute);
  font-size: 15px;
}
.auth-alt a {
  color: var(--brand);
  font-weight: 600;
}
.auth-alt a:hover {
  text-decoration: underline;
}
@media (max-width: 860px) {
  .auth {
    grid-template-columns: 1fr;
  }
  .auth-side {
    gap: 20px;
    padding: 24px 24px 32px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
  [dir="rtl"] .auth-side {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
  .auth-copy .plan-list,
  .auth-side small {
    display: none;
  }
  .auth-copy h2 {
    max-width: none;
  }
}

/* --- Polish: studio window, blobs, marquee, stats, glow, accordion ---------------------------- */
:root {
  --glow: rgba(255, 138, 92, 0.16);
}
body.site[data-lang="fa"] * {
  letter-spacing: 0;
}
body.site[data-lang="fa"] .lead {
  line-height: 1.95;
}
body.site[data-lang="fa"] h1 {
  line-height: 1.32;
}

/* Everything that loops is paused by script when it leaves the viewport. */
.paused,
.paused *,
.paused *::before,
.paused *::after {
  animation-play-state: paused !important;
}

/* Soft drifting colour behind the hero (transform only) */
.blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.blobs i {
  position: absolute;
  width: min(620px, 80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  will-change: transform;
}
.b1 {
  inset-block-start: -22%;
  inset-inline-start: 50%;
  margin-inline-start: -310px;
  background: radial-gradient(closest-side, rgba(255, 209, 102, 0.26), transparent);
  animation: drift-a 26s ease-in-out infinite;
}
.b2 {
  inset-block-start: 22%;
  inset-inline-end: -10%;
  background: radial-gradient(closest-side, rgba(255, 154, 61, 0.2), transparent);
  animation: drift-b 32s ease-in-out infinite;
}
.b3 {
  inset-block-start: 38%;
  inset-inline-start: -12%;
  background: radial-gradient(closest-side, rgba(255, 138, 92, 0.1), transparent);
  animation: drift-a 36s ease-in-out -9s infinite reverse;
}
@keyframes drift-a {
  50% {
    transform: translate3d(5%, 8%, 0) scale(1.08);
  }
}
@keyframes drift-b {
  50% {
    transform: translate3d(-8%, -6%, 0) scale(1.1);
  }
}
.hero {
  background: var(--paper);
  padding-top: 112px;
}
.hero-in {
  z-index: 2;
}
.hero .lead {
  margin-top: 22px;
}
.hero-cta {
  margin-top: 26px;
}
.trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #3a3757;
  font-size: 13.5px;
  font-weight: 500;
}
.trust li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.28);
}

/* Stage: tiles orbit the studio window */
.stage {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  margin-top: 44px;
  padding-bottom: 110px;
}
.stage .tiles {
  position: absolute;
  inset: -30px 0 0;
  width: auto;
  height: auto;
  margin: 0;
}
.stage .tile {
  --tw: clamp(110px, 13.5vw, 196px);
}
.stage .t1 {
  inset-inline-start: 0;
  top: 2%;
}
.stage .t2 {
  inset-inline-start: 9%;
  top: 46%;
}
.stage .t3 {
  inset-inline-start: 1%;
  top: 74%;
}
.stage .t4 {
  inset-inline-start: auto;
  inset-inline-end: 1%;
  top: 74%;
}
.stage .t5 {
  inset-inline-start: auto;
  inset-inline-end: 0;
  top: 2%;
}
.stage .t6 {
  inset-inline-start: auto;
  inset-inline-end: 9%;
  top: 46%;
}
.studio {
  position: relative;
  z-index: 3;
  width: min(660px, 100%);
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.5),
    0 50px 90px -40px rgba(20, 24, 40, 0.4),
    0 18px 36px -24px rgba(20, 24, 40, 0.2);
  text-align: start;
}
.st-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--hair);
  background: #faf9ff;
  font-size: 13px;
}
.st-file {
  color: #3a3757;
  font-weight: 600;
}
.st-live {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-inline-start: auto;
  color: #3a3757;
  font-size: 12.5px;
  font-weight: 600;
}
.st-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-1);
  animation: pulse 1.8s ease-in-out infinite;
}
.st-body {
  display: grid;
  grid-template-columns: 168px 22px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 24px 24px 20px;
}
.st-slide {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  aspect-ratio: 16 / 10;
  padding: 14px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.3);
}
.st-h,
.st-l {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--ink);
}
.st-h {
  width: 56%;
}
.st-l {
  height: 5px;
  width: 86%;
  background: #e4e0fa;
}
.st-l.s {
  width: 62%;
}
.st-chart {
  position: absolute;
  inset-inline-end: 14px;
  inset-block-end: 24px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 34px;
}
.st-chart i {
  width: 9px;
  border-radius: 3px 3px 1px 1px;
  background: var(--yellow);
}
.st-chart i:nth-child(1) {
  height: 40%;
}
.st-chart i:nth-child(2) {
  height: 70%;
  background: #ff6a4d;
}
.st-chart i:nth-child(3) {
  height: 55%;
}
.st-chart i:nth-child(4) {
  height: 100%;
  background: var(--brand-1);
}
.st-slide small {
  position: absolute;
  inset-inline-start: 14px;
  inset-block-end: 8px;
  color: #5e5b78;
  font-size: 10.5px;
  font-weight: 500;
}
.st-arrow {
  color: #a29fc4;
}
[dir="rtl"] .st-arrow svg {
  transform: scaleX(-1);
}
.st-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 96px;
  direction: ltr;
}
.st-wave i {
  flex: 1;
  max-width: 9px;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffd166, #ff6a4d);
  transform: scaleY(calc(var(--h) / 100));
  animation: breathe 1.7s ease-in-out var(--d) infinite;
}
@keyframes breathe {
  50% {
    transform: scaleY(calc(var(--h) / 260));
  }
}
.st-subs {
  display: grid;
  margin: 0 20px 20px;
  padding: 14px 18px;
  border-radius: 16px;
  background: #16132b;
  color: #fff;
}
.sub-line {
  display: flex;
  grid-area: 1 / 1;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  animation: sub-cycle calc(var(--n) * 3.6s) var(--ease) calc(var(--k) * 3.6s) infinite;
}
.sub-line b {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
}
.sub-line span {
  unicode-bidi: isolate;
}
@keyframes sub-cycle {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  3%,
  22% {
    opacity: 1;
    transform: none;
  }
  25%,
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.sub-line:first-child {
  animation-delay: 0s;
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 9.2vw;
  }
  body.site[data-lang="fa"] .hero h1 {
    font-size: 8vw;
  }
}
@media (max-width: 760px) {
  .stage {
    margin-top: 44px;
    padding-bottom: 72px;
  }
  .stage .tiles {
    display: none;
  }
  .st-body {
    grid-template-columns: 104px 16px minmax(0, 1fr);
    gap: 10px;
    padding: 16px 14px 14px;
  }
  .st-slide {
    padding: 9px;
    gap: 6px;
  }
  .st-slide small {
    display: none;
  }
  .st-chart {
    inset-block-end: 9px;
    inset-inline-end: 9px;
    height: 24px;
  }
  .st-wave {
    height: 72px;
    gap: 2px;
  }
  .st-subs {
    margin: 0 12px 12px;
    padding: 12px;
  }
  .sub-line {
    font-size: 15.5px;
  }
  .st-bar {
    padding: 11px 14px;
  }
}

/* Language marquee */
.band {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 52px;
  padding-bottom: 80px;
}
.band .wrap {
  width: min(var(--wrap), 100% - 32px);
}
.marquee {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.track {
  display: flex;
  width: max-content;
  animation: marq 42s linear infinite;
}
.marquee:hover .track {
  animation-play-state: paused;
}
.run {
  display: flex;
  gap: 12px;
  padding-inline-end: 12px;
}
.marquee .chip {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 17px;
  white-space: nowrap;
}
.marquee .chip b {
  color: #fff;
  font-weight: 600;
}
.marquee .chip small {
  color: var(--mute);
  font-size: 14px;
}
@keyframes marq {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
.stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 820px;
  text-align: center;
}
.stats li {
  display: grid;
  gap: 6px;
  padding: 6px 16px;
}
.stats li + li {
  border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
}
.stats b {
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stats b::after {
  content: "";
  display: block;
  width: 28px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: 2px;
  background: var(--yellow);
}
.stats small {
  color: var(--mute);
  font-size: 14px;
}

/* Cards: hover lift and a glow that follows the cursor */
.card,
.mini,
.fcard,
.plan {
  position: relative;
  --mx: 50%;
  --my: 0%;
}
.card::after,
.mini::after,
.fcard::after,
.plan::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx) var(--my), var(--glow), transparent 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.plan::after {
  --glow: rgba(255, 255, 255, 0.07);
}
.plan.hot::after {
  --glow: rgba(255, 209, 102, 0.16);
}
@media (hover: hover) {
  .card:hover::after,
  .mini:hover::after,
  .fcard:hover::after,
  .plan:hover::after {
    opacity: 1;
  }
}
.js .settled .rv {
  transition-delay: 0ms;
  transition-duration: 0.5s;
}
.card:hover {
  transform: translateY(-6px);
}
.js .settled .rv:is(.card, .mini, .fcard, .plan) {
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease),
    border-color 0.4s,
    opacity 0.5s;
}
.card {
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.card:hover,
.mini:hover,
.fcard:hover {
  box-shadow: 0 40px 70px -34px rgba(0, 0, 0, 0.26);
}
.panel .head {
  position: relative;
}

/* Pricing: middle card glows */
.plans {
  align-items: stretch;
  margin-top: 90px;
}
.plan:hover {
  transform: translateY(-6px);
}
.plan.hot {
  border-color: rgba(255, 209, 102, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 6px rgba(255, 209, 102, 0.05),
    0 0 90px -14px rgba(255, 209, 102, 0.3),
    0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.plan-flag {
  position: absolute;
  inset-block-start: -13px;
  inset-inline-end: 22px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 18px -8px rgba(255, 209, 102, 0.7);
}
.plan > *:not(.plan-badge, .plan-flag) {
  position: relative;
  z-index: 1;
}
@media (min-width: 961px) {
  .plans .hot {
    translate: 0 -12px;
    padding-block-end: 36px;
  }
}

/* FAQ: height transition where the browser supports ::details-content */
.acc details {
  interpolate-size: allow-keywords;
}
.acc details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.5s var(--ease),
    content-visibility 0.5s allow-discrete;
}
.acc details[open]::details-content {
  block-size: auto;
}
.acc summary {
  border-radius: 20px;
  transition: color 0.3s;
}
.acc summary:hover {
  color: var(--yellow);
}
.acc summary:focus-visible {
  outline-color: var(--yellow);
  outline-offset: -3px;
}

/* Footer */
.foot {
  border-top: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), #fff);
  font-size: 14px;
}
.foot-in {
  padding-block: 40px 44px;
}
.foot-brand {
  display: grid;
  gap: 4px;
}
.foot-brand span {
  color: var(--ink);
  font-weight: 500;
}
.foot-brand small {
  color: var(--mute);
  font-size: 13.5px;
}
.foot nav a {
  padding-block: 4px;
  color: #3a3757;
}
.foot a:focus-visible {
  outline-color: var(--yellow);
}

@media (max-width: 680px) {
  .band {
    gap: 40px;
  }
  .marquee .chip {
    padding: 10px 18px;
    font-size: 15px;
  }
  .stats li {
    padding-inline: 6px;
  }
  .stats small {
    font-size: 12.5px;
  }
  .plan-flag {
    inset-inline-end: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .blobs i,
  .st-wave i,
  .st-live i,
  .track {
    animation: none;
  }
  .sub-line {
    animation: none;
  }
  .sub-line:first-child {
    opacity: 1;
  }
  .st-wave i {
    transform: scaleY(calc(var(--h) / 160));
  }
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .track {
    width: auto;
    justify-content: center;
  }
  .run {
    flex-wrap: wrap;
    justify-content: center;
  }
  .run[aria-hidden="true"] {
    display: none;
  }
  .acc details::details-content {
    transition: none;
  }
}

/* ===== v4: aurora, glass, gradient brand ======================================================== */
:root {
  --grad: linear-gradient(135deg, #ff6a4d 0%, #ff9a3d 100%);
  --grad-text: linear-gradient(100deg, #ff5a3c 0%, #ff8a3d 45%, #7c6cff 100%);
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.5'/></svg>");
}
body.site {
  background: var(--page);
}
:focus-visible {
  outline-color: var(--lilac);
}

/* Nav: glass capsule */
.nav-bar {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(60, 50, 120, 0.07),
    0 14px 40px -16px rgba(80, 60, 200, 0.3);
}
.logo-mark {
  background: var(--grad);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 6px 14px -6px rgba(255, 106, 77, 0.8);
}
.logo-mark svg {
  width: 17px;
  height: 17px;
}
.auth-side .logo-mark {
  background: var(--grad);
  color: #fff;
}
.nav-links a::after,
.cap-links a::after {
  background: var(--grad);
}
.pill.dark,
.btn-blue,
.menu-btn {
  position: relative;
  overflow: hidden;
  background: var(--brand-btn);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 12px 26px -10px rgba(255, 106, 77, 0.75);
}
.pill.dark,
.btn-blue {
  font-weight: 700;
}
.pill.dark::after,
.btn-blue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.38) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.8s var(--ease);
  pointer-events: none;
}
.pill.dark:hover::after,
.btn-blue:hover::after {
  transform: translateX(130%);
}
.pill.dark:hover,
.btn-blue:hover {
  background: var(--brand-btn-hot);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 5px rgba(255, 138, 92, 0.18),
    0 18px 34px -12px rgba(255, 106, 77, 0.85);
}
.btn-blue {
  border-radius: 14px;
  will-change: transform;
}
.btn-blue.magnet {
  transition:
    box-shadow 0.35s,
    background 0.25s;
}
.lang-btn {
  background: rgba(255, 255, 255, 0.8);
}
.globe {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.7), transparent 45%),
    conic-gradient(#ff6a4d, #7c6cff, #4cc3ff, #ff9a3d, #ff6a4d);
}
.pill.ghost:hover {
  background: rgba(124, 108, 255, 0.1);
}

/* Badges, markers, gradient emphasis */
.badge {
  border: 1px solid rgba(255, 154, 61, 0.35);
  background: linear-gradient(135deg, #fff1d6, #ffe3d6);
  color: #7a2a10;
  box-shadow: 0 6px 16px -8px rgba(255, 154, 61, 0.6);
}
.mark::before {
  background: linear-gradient(100deg, #ffd166, #ffc2a0);
  box-shadow: 0 8px 22px -8px rgba(255, 154, 61, 0.7);
}
.panel .head h2 .ln:last-child > span,
.auth-box h1 em {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ydot {
  background: var(--grad);
  box-shadow: 0 0 0 4px rgba(255, 154, 61, 0.22);
}
.latin-dot {
  background: #ffd166;
}
.hero h1,
.head h2 {
  color: var(--ink);
}

/* Aurora behind hero and sections */
.hero {
  background: var(--page);
}
.b1 {
  background: radial-gradient(closest-side, rgba(255, 217, 199, 0.85), transparent);
}
.b2 {
  background: radial-gradient(closest-side, rgba(217, 210, 255, 0.8), transparent);
}
.b3 {
  background: radial-gradient(closest-side, rgba(207, 235, 255, 0.85), transparent);
}
.blobs i {
  opacity: 0.9;
}
.features {
  background:
    radial-gradient(50% 30% at 100% 0%, rgba(217, 210, 255, 0.45), transparent 70%),
    radial-gradient(44% 28% at 0% 70%, rgba(255, 217, 199, 0.4), transparent 70%), var(--paper-2);
}
.flow {
  background:
    radial-gradient(44% 24% at 50% 0%, rgba(207, 235, 255, 0.45), transparent 70%),
    radial-gradient(40% 26% at 90% 100%, rgba(255, 217, 199, 0.4), transparent 70%), #fff;
}
.panel + .panel {
  box-shadow: 0 -24px 60px -30px rgba(80, 60, 200, 0.3);
}
.trust li {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px -10px rgba(80, 60, 200, 0.3);
  color: #3a3757;
}
.trust li::before {
  background: var(--grad);
  box-shadow: 0 0 0 3px rgba(255, 154, 61, 0.2);
}
.trust li:nth-child(2)::before {
  background: linear-gradient(135deg, #7c6cff, #4cc3ff);
  box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.2);
}
.trust li:nth-child(3)::before {
  background: linear-gradient(135deg, #4cc3ff, #7c6cff);
  box-shadow: 0 0 0 3px rgba(76, 195, 255, 0.25);
}

/* Tiles: glossy glass plates */
.plate {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 243, 255, 0.9));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.8),
    5px 5px 0 rgba(217, 210, 255, 0.7),
    26px 34px 46px -14px rgba(80, 60, 200, 0.28);
}
.tile-ic {
  filter: drop-shadow(0 14px 12px rgba(80, 40, 160, 0.22));
}

/* Studio window: glass */
.studio {
  border-color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 8px rgba(255, 255, 255, 0.4),
    0 50px 100px -40px rgba(90, 60, 220, 0.5),
    0 20px 40px -24px rgba(255, 106, 77, 0.28);
}
.st-bar {
  background: rgba(250, 249, 255, 0.7);
}
.st-live i {
  background: #2fd08a;
  box-shadow: 0 0 0 4px rgba(47, 208, 138, 0.2);
}
.st-slide {
  background: rgba(255, 255, 255, 0.95);
}
.st-h {
  background: var(--grad);
}
.st-chart i {
  background: var(--sky);
}
.st-chart i:nth-child(2) {
  background: var(--lilac);
}
.st-chart i:nth-child(4) {
  background: var(--grad);
}
.st-wave i {
  background: linear-gradient(180deg, #ff9a3d, #ff6a4d 55%, #7c6cff);
}
.st-wave {
  position: relative;
  overflow: hidden;
}
.st-wave::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: shimmer-w 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer-w {
  60%,
  100% {
    transform: translateX(120%);
  }
}
.st-subs {
  background: linear-gradient(135deg, #1c1640, #35205f);
  box-shadow: 0 16px 30px -16px rgba(58, 31, 94, 0.7);
}
.sub-line b {
  background: var(--grad);
  color: #fff;
}

/* Feature cards: glass, gradient hairline */
.card,
.mini,
.fcard {
  border-color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(60, 50, 120, 0.06),
    var(--card-shadow);
}
.card:hover,
.mini:hover,
.fcard:hover {
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(124, 108, 255, 0.18),
    0 40px 70px -32px rgba(80, 60, 220, 0.4);
}
.mock {
  background:
    radial-gradient(70% 70% at 100% 0%, rgba(255, 217, 199, 0.7), transparent 70%),
    radial-gradient(70% 70% at 0% 100%, rgba(217, 210, 255, 0.7), transparent 70%), #f8f6ff;
}
.m-win {
  box-shadow:
    0 0 0 1px var(--hair),
    0 20px 40px -22px rgba(80, 60, 200, 0.4);
}
.m-num {
  background: rgba(255, 106, 77, 0.12);
  color: #c2381a;
}
.toggle {
  background: linear-gradient(135deg, #ff6a4d, #ff9a3d);
}
.toggle.off {
  background: #d6d2ee;
}
.m-balance {
  border-color: rgba(190, 175, 255, 0.25);
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(255, 106, 77, 0.5), transparent 60%),
    radial-gradient(70% 70% at 0% 100%, rgba(124, 108, 255, 0.45), transparent 65%),
    linear-gradient(135deg, #14102b, #3a1f5e);
}
.m-top {
  background: var(--brand-btn);
}
.mini-ic {
  color: #c2381a;
  background: linear-gradient(135deg, rgba(255, 106, 77, 0.16), rgba(255, 154, 61, 0.16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.mini-ic.c1 {
  color: #5a48e0;
  background: linear-gradient(135deg, rgba(124, 108, 255, 0.18), rgba(217, 210, 255, 0.4));
}
.mini-ic.c2 {
  color: #0a74b0;
  background: linear-gradient(135deg, rgba(76, 195, 255, 0.22), rgba(207, 235, 255, 0.5));
}
.fnode {
  background: var(--brand-btn);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 20px 40px -14px rgba(255, 106, 77, 0.7);
}
.fdot {
  background: var(--grad);
  box-shadow: 0 0 0 4px rgba(255, 106, 77, 0.16);
}
.fcard:nth-child(3n + 2) .fdot {
  background: linear-gradient(135deg, #7c6cff, #a99cff);
  box-shadow: 0 0 0 4px rgba(124, 108, 255, 0.16);
}
.fcard:nth-child(3n) .fdot {
  background: linear-gradient(135deg, #4cc3ff, #7ad6ff);
  box-shadow: 0 0 0 4px rgba(76, 195, 255, 0.2);
}
.fnode::after,
.fcard::before,
.fgrid::before {
  background: linear-gradient(180deg, rgba(124, 108, 255, 0.5), rgba(255, 154, 61, 0.5));
}
.fgrid::before {
  background: none;
  border-top-color: rgba(124, 108, 255, 0.3);
}

/* One light theme: closing sections are glass on pastel aurora, tints alternate white / peach / lilac. */
:root {
  --tint-peach: #fff7f2;
  --tint-lilac: #f6f4ff;
  --ink-2: #3a3757;
  --glass: rgba(255, 255, 255, 0.74);
  --glass-edge: rgba(255, 255, 255, 0.95);
  --glass-line: rgba(124, 108, 255, 0.16);
}
.closing {
  position: relative;
  z-index: 4;
  margin-top: calc(var(--radius-lg) * -1);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: #fff;
  color: var(--ink);
  overflow-x: clip;
  box-shadow: 0 -24px 60px -30px rgba(80, 60, 200, 0.3);
}
.closing > section,
.closing > footer {
  position: relative;
  overflow: clip;
}
.band {
  padding-top: 170px;
  background:
    radial-gradient(52% 44% at 0% 0%, rgba(255, 217, 199, 0.75), transparent 70%),
    radial-gradient(46% 40% at 100% 100%, rgba(217, 210, 255, 0.6), transparent 70%),
    radial-gradient(40% 30% at 70% 0%, rgba(207, 235, 255, 0.5), transparent 70%), var(--tint-peach);
}
.pricing {
  background:
    radial-gradient(46% 30% at 100% 0%, rgba(255, 217, 199, 0.55), transparent 70%),
    radial-gradient(44% 30% at 0% 100%, rgba(207, 235, 255, 0.6), transparent 70%), var(--tint-lilac);
}
.faq {
  background:
    radial-gradient(42% 40% at 100% 20%, rgba(217, 210, 255, 0.4), transparent 70%),
    radial-gradient(40% 36% at 0% 90%, rgba(255, 217, 199, 0.4), transparent 70%), #fff;
}
.cta {
  background:
    radial-gradient(50% 60% at 100% 0%, rgba(255, 217, 199, 0.7), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(217, 210, 255, 0.6), transparent 70%),
    radial-gradient(36% 40% at 50% 100%, rgba(207, 235, 255, 0.5), transparent 70%), var(--tint-peach);
}
.band .big,
.cta-panel h2 {
  color: var(--ink);
}
.cta-sub {
  color: var(--mute);
}
.quat {
  filter: drop-shadow(0 24px 30px rgba(110, 80, 220, 0.18));
}
.chip {
  border: 1px solid var(--glass-line);
  background: var(--glass);
  color: var(--ink);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 8px 20px -14px rgba(80, 60, 200, 0.35);
}
.marquee .chip b {
  color: var(--ink);
}
.marquee .chip small {
  color: var(--mute);
}
.stats b {
  background: linear-gradient(180deg, #16132b 35%, #4a3bb8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stats b::after {
  background: var(--grad);
}
.stats li + li {
  border-inline-start-color: rgba(60, 50, 120, 0.14);
}
.stats small {
  color: var(--mute);
}
.plan {
  border: 1px solid var(--glass-edge);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(60, 50, 120, 0.07),
    var(--card-shadow);
}
.plan:hover {
  border-color: #fff;
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(124, 108, 255, 0.22),
    0 40px 70px -32px rgba(80, 60, 220, 0.4);
}
.plan.hot {
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, #fff, #fffaf6) padding-box,
    conic-gradient(from var(--ang, 0deg), #ff6a4d, #ff9a3d, #ffd166, #7c6cff, #4cc3ff, #ff6a4d) border-box;
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 90px -20px rgba(255, 106, 77, 0.45),
    0 30px 60px -30px rgba(110, 70, 220, 0.4);
  animation: spin-border 8s linear infinite;
}
.plan::after {
  --glow: rgba(124, 108, 255, 0.1);
}
.plan.hot::after {
  --glow: rgba(255, 154, 61, 0.14);
}
@property --ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes spin-border {
  to {
    --ang: 360deg;
  }
}
.plan-badge {
  border: 5px solid var(--tint-lilac);
  background: #fff;
  box-shadow: 0 0 0 1px var(--glass-line);
}
.plan-pill {
  border: 1px solid var(--glass-line);
  background: rgba(124, 108, 255, 0.1);
  color: #4a3bb8;
}
.price b {
  color: var(--ink);
}
.price small,
.plan-tag {
  color: var(--mute);
}
.plan-tag {
  border-bottom-color: rgba(60, 50, 120, 0.12);
}
.plan-list li {
  color: var(--ink-2);
}
.plan-list svg {
  color: #e8641a;
}
.plan-flag {
  background: var(--brand-btn);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(217, 60, 24, 0.7);
}
.price-note {
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  color: var(--ink-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(60, 50, 120, 0.06),
    0 16px 36px -24px rgba(80, 60, 200, 0.35);
}
.acc details {
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(60, 50, 120, 0.06),
    0 14px 30px -24px rgba(80, 60, 200, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.acc details[open] {
  border-color: rgba(255, 154, 61, 0.45);
  background: rgba(255, 255, 255, 0.94);
}
.acc summary:hover {
  color: #c2381a;
}
.acc summary:focus-visible,
.foot a:focus-visible {
  outline-color: var(--lilac);
}
.acc details p {
  color: var(--mute);
}
.plus {
  background: rgba(124, 108, 255, 0.12);
}
.plus::before,
.plus::after {
  background: var(--ink);
}
details[open] .plus {
  background: var(--grad);
}
details[open] .plus::before,
details[open] .plus::after {
  background: #fff;
}
.cap .logo,
.cap-links {
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(60, 50, 120, 0.06),
    0 12px 28px -20px rgba(80, 60, 200, 0.4);
}
.cap-links a {
  color: var(--ink-2);
}
.cta-panel {
  border: 1px solid var(--glass-edge);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(255, 154, 61, 0.2), transparent 65%),
    radial-gradient(70% 90% at 0% 100%, rgba(124, 108, 255, 0.18), transparent 65%), var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(60, 50, 120, 0.06),
    0 40px 80px -40px rgba(90, 60, 220, 0.4);
}
.socials a {
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  color: var(--ink-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(60, 50, 120, 0.06),
    0 10px 22px -14px rgba(80, 60, 200, 0.4);
}
.socials a:hover {
  background: var(--brand-btn);
  color: #fff;
}
.foot {
  border-top: 1px solid var(--hair);
  background: #fff;
  color: var(--mute);
}
.foot-brand span {
  color: var(--ink);
}
.foot-brand small {
  color: var(--mute);
}
.foot nav a {
  color: var(--ink-2);
}
.foot a:hover {
  color: #c2381a;
}

/* In-mock cards stay light too */
.st-subs {
  background: linear-gradient(135deg, #fff, #f6f4ff);
  box-shadow:
    0 0 0 1px var(--hair),
    0 16px 30px -18px rgba(80, 60, 200, 0.4);
  color: var(--ink);
}
.sub-line b {
  background: var(--brand-btn);
  color: #fff;
}
.m-balance {
  border-color: var(--glass-line);
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(255, 154, 61, 0.35), transparent 60%),
    radial-gradient(70% 70% at 0% 100%, rgba(124, 108, 255, 0.28), transparent 65%), #fff;
  color: var(--ink);
  box-shadow: 0 18px 36px -22px rgba(80, 60, 200, 0.45);
}
.m-balance small {
  color: var(--mute);
}

/* Auth */
.auth-page {
  background:
    radial-gradient(46% 38% at 100% 0%, rgba(255, 180, 160, 0.34), transparent 70%),
    radial-gradient(40% 34% at 0% 100%, rgba(207, 235, 255, 0.5), transparent 70%), #fffdfb;
}
.auth-side {
  background:
    radial-gradient(70% 50% at 0% 0%, rgba(255, 217, 199, 0.85), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(217, 210, 255, 0.8), transparent 70%),
    radial-gradient(50% 40% at 80% 10%, rgba(207, 235, 255, 0.6), transparent 70%), var(--tint-peach);
  box-shadow: 0 0 0 1px var(--hair);
  isolation: isolate;
}
.field input {
  border-color: rgba(60, 50, 120, 0.2);
  background: rgba(255, 255, 255, 0.9);
  color: #16132b;
}
.field input:focus {
  border-color: var(--lilac);
  box-shadow: 0 0 0 4px rgba(124, 108, 255, 0.2);
}
.auth-alt a {
  color: #c2381a;
}
.auth-box {
  padding: 36px clamp(22px, 4vw, 40px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 40px 80px -40px rgba(80, 60, 220, 0.35);
}
.form-error {
  border-color: rgba(201, 40, 58, 0.4);
  background: rgba(201, 40, 58, 0.07);
  color: #a8202f;
}

@media (prefers-reduced-motion: reduce) {
  .st-wave::after,
  .plan.hot {
    animation: none;
  }
  .btn-blue::after,
  .pill.dark::after {
    transition: none;
  }
}

@media (max-width: 680px) {
  .band .quat {
    width: 120px;
    opacity: 0.85;
  }
  .band .q3,
  .band .q4 {
    bottom: -4%;
  }
}