/* ===========================================================================
   استریم منیجر — the home page, second version (/v2/).

   Hand-written, no framework: one HTML file, this sheet and v2.js. Colours
   are the brand's (the logo's cyan and violet on deep navy); headings in
   Lalezar, text in Vazirmatn, both served from /assets/fonts.

   The tokens at the top use the same names as the current site's bundle
   (--neon, --background, …) so site-look.js and site-look.css — the trailer
   player and the notice card — work here unchanged.
   =========================================================================== */

:root {
  --background: #050812;
  --foreground: #eaf0fa;
  --muted-foreground: #97a6bf;
  --faint: #66758f;
  --neon: #22d3ee;
  --neon-soft: #67e8f9;
  --azure: #3b82f6;
  --violet: #7c5cff;
  --amber: #fbbf24;
  --green: #34d399;
  --rose: #fb7185;
  --border: rgba(148, 163, 184, 0.14);
  --line: rgba(148, 163, 184, 0.09);
  --panel: rgba(13, 21, 40, 0.78);
  --panel-solid: #0c1426;
  --grad: linear-gradient(135deg, #22d3ee 0%, #7c5cff 100%);
  --shadow-neon: 0 0 0 1px rgba(34, 211, 238, 0.35), 0 18px 60px -18px rgba(34, 211, 238, 0.45);
  --radius: 22px;
  --wrap: 1200px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

.wrap {
  width: min(var(--wrap), calc(100% - 32px));
  margin-inline: auto;
}

.display {
  font-family: "Lalezar", "Vazirmatn", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 16px;
  font: inherit;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.25s, background 0.25s, border-color 0.25s;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: var(--grad);
  color: #041019;
  box-shadow: 0 14px 40px -14px rgba(34, 211, 238, 0.8);
}

.btn--primary:hover {
  box-shadow: 0 18px 50px -12px rgba(34, 211, 238, 0.95);
}

.btn--ghost {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.035);
  color: var(--foreground);
}

.btn--ghost:hover {
  border-color: rgba(34, 211, 238, 0.4);
  background: rgba(34, 211, 238, 0.07);
}

.btn--sm {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 13px;
  font-size: 14px;
}

.btn__play {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--grad);
}

.btn__play::before {
  content: "";
  margin-inline-start: 2px;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #041019;
}

/* --- header -------------------------------------------------------------- */

.top {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 8, 18, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

.top__in {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand img {
  width: 40px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(34, 211, 238, 0.45));
}

.brand b {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

.brand small {
  display: block;
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
}

.nav {
  display: flex;
  gap: 4px;
  margin-inline-start: auto;
}

.nav a {
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--muted-foreground);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}

.nav a:hover {
  color: var(--foreground);
  background: rgba(255, 255, 255, 0.05);
}

.top__cta {
  display: flex;
  gap: 8px;
}

@media (max-width: 960px) {
  .nav {
    display: none;
  }

  .top__cta {
    margin-inline-start: auto;
  }
}

@media (max-width: 520px) {
  .top__cta .btn--ghost {
    display: none;
  }
}

/* --- hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 72px 0 56px;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: center;
}

@media (max-width: 1000px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero__ghost {
    display: none;
  }
}

.hero__copy {
  position: relative;
}

/* The product's name, outlined, behind the heading — sunrp does this with
   its city's name; here it is ours. */
.hero__ghost {
  position: absolute;
  top: -42px;
  inset-inline-end: -6px;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(148, 163, 184, 0.12);
  font-family: "Vazirmatn", sans-serif;
  font-size: clamp(60px, 9vw, 128px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  direction: ltr;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(34, 211, 238, 0.3);
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.07);
  color: var(--neon-soft);
  font-size: 13px;
  font-weight: 700;
}

.dot-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
  animation: live 1.8s infinite;
}

@keyframes live {
  70% {
    box-shadow: 0 0 0 8px rgba(52, 211, 153, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
  }
}

.hero h1 {
  margin: 22px 0 18px;
  font-size: clamp(42px, 6.2vw, 82px);
  line-height: 1.12;
}

.hero h1 span {
  display: block;
}

.hero__lede {
  max-width: 560px;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 18px;
  line-height: 2;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.facts li {
  display: flex;
  flex-direction: column;
}

.facts b {
  font-family: "Lalezar", sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
}

.facts span {
  color: var(--faint);
  font-size: 13px;
}

/* --- the live console in the hero --------------------------------------- */

.console {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(18, 28, 52, 0.92), rgba(9, 15, 30, 0.92));
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.025) inset;
  overflow: hidden;
}

/* A line of light along the top edge. */
.console::before {
  content: "";
  position: absolute;
  inset: 0 12% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.8), transparent);
}

.console__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.console__title {
  font-weight: 800;
  font-size: 15px;
}

.console__note {
  color: var(--faint);
  font-size: 12px;
}

.live-tag {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(251, 113, 133, 0.12);
  color: var(--rose);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.live-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose);
  animation: blink 1.2s infinite;
}

@keyframes blink {
  50% {
    opacity: 0.3;
  }
}

.console__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}

.console__stat {
  padding: 12px 16px;
  text-align: center;
}

.console__stat + .console__stat {
  border-inline-start: 1px solid var(--line);
}

.console__stat b {
  display: block;
  font-family: "Lalezar", sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
}

.console__stat span {
  color: var(--faint);
  font-size: 11px;
}

.feed {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  height: 330px;
  margin: 0;
  padding: 14px 16px;
  list-style: none;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0, #000 70px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 70px);
}

.feed li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.7;
  animation: feed-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes feed-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.feed__av {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #041019;
  font-size: 12px;
  font-weight: 900;
}

.feed__body {
  min-width: 0;
}

.feed__user {
  /* Physical, not logical: the name is set left-to-right, so its own
     "inline end" is the wrong side for a right-to-left line. */
  margin-left: 7px;
  font-weight: 800;
  direction: ltr;
  unicode-bidi: isolate;
}

.feed__tag {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

/* What the bot does to a message, shown on it. */
.feed li.is-bad {
  border-color: rgba(251, 113, 133, 0.25);
  background: rgba(251, 113, 133, 0.06);
}

.feed li.is-bad .feed__text {
  text-decoration: line-through;
  opacity: 0.45;
  filter: blur(1.5px);
  transition: opacity 0.4s, filter 0.4s;
}

.feed li.is-bad .feed__tag {
  background: rgba(251, 113, 133, 0.15);
  color: var(--rose);
}

.feed li.is-warn {
  border-color: rgba(251, 191, 36, 0.22);
  background: rgba(251, 191, 36, 0.05);
}

.feed li.is-warn .feed__tag {
  background: rgba(251, 191, 36, 0.15);
  color: var(--amber);
}

.feed li.is-bot {
  border-color: rgba(34, 211, 238, 0.25);
  background: rgba(34, 211, 238, 0.06);
}

.feed li.is-bot .feed__av {
  background: var(--grad);
}

.feed li.is-donate {
  border-color: rgba(52, 211, 153, 0.3);
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.1), rgba(124, 92, 255, 0.08));
}

.feed li.is-donate .feed__tag,
.feed li.is-mc .feed__tag {
  background: rgba(52, 211, 153, 0.15);
  color: var(--green);
}

.feed li.is-mc {
  border-color: rgba(52, 211, 153, 0.2);
  background: rgba(52, 211, 153, 0.05);
}

.feed__amount {
  margin-left: 6px;
  color: var(--green);
  font-weight: 900;
}

/* The notices, along the bottom of the console. */
.ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 14px 14px;
  padding: 6px 6px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.ticker[hidden] {
  display: none;
}

.ticker__open {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 10px;
  border: 0;
  background: none;
  color: var(--foreground);
  font: inherit;
  font-size: 13.5px;
  text-align: start;
  cursor: pointer;
}

.ticker__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(34, 211, 238, 0.12);
  color: var(--neon);
}

.ticker__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.ticker__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--faint);
  font-size: 12px;
}

.ticker__nav button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted-foreground);
  font: inherit;
  cursor: pointer;
}

.ticker__nav button:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* --- sections ------------------------------------------------------------ */

.section {
  padding: 72px 0;
}

.section__head {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--neon);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.section h2 {
  margin: 0;
  font-size: clamp(32px, 4.2vw, 50px);
  line-height: 1.25;
}

.section__lede {
  margin: 14px 0 0;
  color: var(--muted-foreground);
  font-size: 17px;
}

/* --- what it does: a bento of cards ------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
}

.tile {
  /* The picture has a height of its own and the text starts under it, so a
     longer text makes the tile taller instead of running over the picture. */
  --art-h: 170px;
  --tone: var(--neon);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-height: 240px;
  padding: calc(var(--art-h) + 8px) 22px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 70% 55% at 50% 18%, color-mix(in oklab, var(--tone) 22%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(17, 27, 50, 0.85), rgba(10, 16, 31, 0.92));
  overflow: hidden;
}

/* The art floats in the top of the card on its own transparency. */
.tile__art {
  position: absolute;
  top: 14px;
  left: 50%;
  width: auto;
  max-width: 88%;
  height: var(--art-h);
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.55));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: art-bob 6s ease-in-out infinite;
}

.tile:nth-child(2n) .tile__art {
  animation-delay: -2s;
}

.tile:nth-child(3n) .tile__art {
  animation-delay: -4s;
}

@keyframes art-bob {
  50% {
    translate: 0 -6px;
  }
}

.tile:hover .tile__art {
  transform: translateX(-50%) scale(1.06);
}

.tile h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.5;
}

.tile p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.9;
}

.tile--big {
  --art-h: 300px;
  grid-column: span 2;
  grid-row: span 2;
  padding-inline: 28px;
  padding-bottom: 28px;
}

/* The big tile is as tall as the two rows beside it. Its picture runs to
   the tile's edges — the art has almost no margin of its own, so its width is
   what limits its height — and picture and words sit together in the middle:
   whatever the rows leave over is shared above and below, never one band. */
.tile--big {
  justify-content: center;
  padding-top: 22px;
}

.tile--big .tile__art {
  position: relative;
  top: auto;
  left: auto;
  flex: none;
  width: calc(100% + 56px);
  max-width: none;
  height: auto;
  aspect-ratio: 760 / 518;
  margin: 0 -28px 8px;
  object-fit: contain;
  transform: scale(1.06);
}

.tile--big:hover .tile__art {
  transform: scale(1.1);
}

.tile--big h3 {
  font-size: 26px;
}

.tile--big p {
  font-size: 15.5px;
}

.tile--wide {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  padding: 22px;
}

.tile--wide .tile__art {
  position: relative;
  top: auto;
  left: auto;
  flex: none;
  width: 46%;
  max-width: none;
  height: 170px;
  transform: none;
  order: 2;
}

.tile--wide:hover .tile__art {
  transform: scale(1.06);
}

.tile--wide .tile__text {
  flex: 1;
}

.checks {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: var(--foreground);
  font-size: 14px;
}

.checks li::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-inline-end: 8px;
  border-radius: 6px;
  background: rgba(52, 211, 153, 0.14);
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 1000px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .bento {
    grid-template-columns: 1fr;
  }

  .tile--big {
    --art-h: 220px;
    grid-column: auto;
    grid-row: auto;
  }

  .tile--wide {
    grid-column: auto;
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--art-h) + 8px) 22px 22px;
  }

  .tile--wide .tile__art {
    position: absolute;
    top: 14px;
    left: 50%;
    width: auto;
    max-width: 88%;
    height: var(--art-h);
    transform: translateX(-50%);
  }
}

.more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

/* --- four steps ---------------------------------------------------------- */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

/* The line the four steps sit on. */
.steps::before {
  content: "";
  position: absolute;
  top: 34px;
  inset-inline: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.45), rgba(124, 92, 255, 0.45), transparent);
}

.step {
  position: relative;
  padding: 0 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  counter-increment: step;
  text-align: center;
}

.step::before {
  content: counter(step, persian);
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: -1px auto 14px;
  border-radius: 0 0 20px 20px;
  background: var(--grad);
  color: #041019;
  font-family: "Lalezar", sans-serif;
  font-size: 30px;
  box-shadow: 0 14px 30px -12px rgba(34, 211, 238, 0.8);
}

.step h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 900;
}

.step p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps::before {
    display: none;
  }
}

@media (max-width: 520px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* --- trailer and panel --------------------------------------------------- */

.show {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 32px;
  align-items: center;
}

@media (max-width: 900px) {
  .show {
    grid-template-columns: 1fr;
  }
}

.show__video {
  position: relative;
  border-radius: 26px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.6), rgba(124, 92, 255, 0.4), rgba(148, 163, 184, 0.1));
  box-shadow: 0 40px 100px -40px rgba(34, 211, 238, 0.45);
}

.show__video .sm-trailer {
  border-radius: 25px;
  overflow: hidden;
}

.show__copy h2 {
  margin: 0 0 12px;
}

.show__copy p {
  margin: 0 0 20px;
  color: var(--muted-foreground);
}

.shots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 40px;
}

@media (max-width: 900px) {
  .shots {
    grid-template-columns: repeat(2, 1fr);
  }
}

.shot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: zoom-in;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 16px;
  object-fit: cover;
  transition: transform 0.4s, border-color 0.3s;
}

.shot:hover img {
  transform: translateY(-3px);
  border-color: rgba(34, 211, 238, 0.4);
}

.shot b {
  font-size: 15px;
}

.shot span {
  color: var(--faint);
  font-size: 13px;
  line-height: 1.7;
}

/* --- plans --------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 960px) {
  .plans {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: var(--panel);
}

.plan--hot {
  border-color: rgba(34, 211, 238, 0.45);
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.09), rgba(124, 92, 255, 0.07)), var(--panel-solid);
  box-shadow: 0 30px 80px -30px rgba(34, 211, 238, 0.5);
}

.plan__badge {
  position: absolute;
  top: -13px;
  inset-inline-start: 28px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--grad);
  color: #041019;
  font-size: 12px;
  font-weight: 900;
}

.plan__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
}

.plan h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 400;
}

.plan__for {
  margin: 4px 0 14px;
  color: var(--muted-foreground);
  font-size: 14px;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.plan__price b {
  font-family: "Lalezar", sans-serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
}

.plan__price span {
  color: var(--faint);
  font-size: 13px;
}

.plan .checks {
  flex: 1;
  margin: 0 0 22px;
  gap: 10px;
  color: var(--muted-foreground);
}

.plan .btn {
  width: 100%;
}

.free {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  margin-top: 24px;
  color: var(--muted-foreground);
  font-size: 15px;
  text-align: center;
}

.free b {
  color: var(--foreground);
}

/* --- tutorials ----------------------------------------------------------- */

.learn {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .learn {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .learn {
    grid-template-columns: 1fr;
  }
}

.lcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--panel);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.3s, transform 0.3s;
}

.lcard:hover {
  border-color: rgba(34, 211, 238, 0.35);
  transform: translateY(-3px);
}

.lcard img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.lcard div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 18px;
}

.lcard small {
  color: var(--neon);
  font-size: 12px;
  font-weight: 800;
}

.lcard b {
  font-size: 15.5px;
  line-height: 1.7;
}

/* --- questions ----------------------------------------------------------- */

.faq {
  display: grid;
  gap: 10px;
  max-width: 820px;
  margin: 0 auto;
}

.faq details {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel);
  transition: border-color 0.3s;
}

.faq details[open] {
  border-color: rgba(34, 211, 238, 0.3);
}

.faq summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  margin-inline-start: auto;
  border-radius: 10px;
  background: rgba(34, 211, 238, 0.1);
  color: var(--neon);
  font-size: 18px;
  transition: transform 0.3s;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq p {
  margin: 0;
  padding: 0 20px 20px;
  color: var(--muted-foreground);
}

/* --- the end of the page ------------------------------------------------- */

.cta {
  position: relative;
  padding: 56px 32px;
  border: 1px solid rgba(34, 211, 238, 0.3);
  border-radius: 32px;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(34, 211, 238, 0.22), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(124, 92, 255, 0.25), transparent 55%),
    var(--panel-solid);
  text-align: center;
  overflow: hidden;
}

.cta h2 {
  margin: 0 0 12px;
  font-size: clamp(30px, 4vw, 48px);
}

.cta p {
  max-width: 560px;
  margin: 0 auto 26px;
  color: var(--muted-foreground);
}

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

.foot {
  margin-top: 72px;
  padding: 40px 0 28px;
  border-top: 1px solid var(--line);
  background: rgba(3, 6, 14, 0.6);
}

.foot__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 28px;
}

@media (max-width: 860px) {
  .foot__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.foot p {
  margin: 10px 0 0;
  color: var(--faint);
  font-size: 14px;
}

.foot h4 {
  margin: 0 0 10px;
  font-size: 14px;
}

.foot ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot ul a {
  color: var(--muted-foreground);
  font-size: 14px;
  text-decoration: none;
}

.foot ul a:hover {
  color: var(--neon);
}

.seal {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.seal img {
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
}

.foot__end {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 13px;
}

/* --- a picture, opened --------------------------------------------------- */

.zoom {
  position: fixed;
  inset: 0;
  z-index: 960;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(5, 8, 18, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: zoom-out;
  animation: fade 0.25s;
}

.zoom img {
  max-width: min(1200px, 100%);
  max-height: calc(100vh - 32px);
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 18px;
  box-shadow: var(--shadow-neon);
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===========================================================================
   The sky: the page's live background.

   Layers, back to front: a base gradient; three nebulae that breathe and
   drift; two star fields that twinkle, drift slowly, and lean away from the
   mouse (--px/--py) and the scroll (--sy), the far field less than the near
   one; a grid floor running toward the viewer; film grain. All of it is
   transform and opacity, so the compositor does the work, not the page.
   =========================================================================== */
.sky {
  --px: 0;
  --py: 0;
  --sy: 0;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.sky > div {
  position: absolute;
}

.sky__base {
  inset: 0;
  background:
    /* The home page's light from above (2026-10-18): the owner liked its background better. */
    radial-gradient(60% 50% at 50% 0%, rgba(34, 211, 238, 0.12), transparent 70%),
    radial-gradient(ellipse 110% 60% at 70% -10%, #0f1b38 0%, transparent 60%),
    radial-gradient(ellipse 100% 70% at 20% 120%, rgba(124, 92, 255, 0.12) 0%, transparent 65%),
    linear-gradient(180deg, #060a16 0%, #050812 60%, #04060e 100%);
}

/* 2026-10-18: the lights of the home page — whole discs of colour, blurred,
   not gradients that fade out before they show — and, after vmp.ir, they take
   turns: one comes up while the other goes down, slowly, like a siren far
   away. Drift (transform) and turns (opacity) are separate animations. */
.sky__nebula {
  width: 44vmax;
  height: 44vmax;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform, opacity;
}

.sky__nebula--a {
  top: -18vmax;
  right: 12vw;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.52) 0%, rgba(34, 211, 238, 0.32) 45%, transparent 72%);
  animation:
    nebula-a 22s ease-in-out infinite alternate,
    nebula-turn 11s ease-in-out infinite;
}

.sky__nebula--b {
  top: 28vh;
  left: -16vmax;
  width: 38vmax;
  height: 38vmax;
  background: radial-gradient(circle, rgba(59, 110, 246, 0.54) 0%, rgba(59, 110, 246, 0.32) 45%, transparent 72%);
  animation:
    nebula-b 26s ease-in-out infinite alternate,
    nebula-turn 11s ease-in-out -5.5s infinite;
}

.sky__nebula--c {
  bottom: -24vmax;
  right: -8vw;
  width: 40vmax;
  height: 40vmax;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.5) 0%, rgba(124, 92, 255, 0.28) 45%, transparent 72%);
  animation:
    nebula-c 30s ease-in-out infinite alternate,
    nebula-turn 15s ease-in-out -3s infinite;
}

@keyframes nebula-a {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-8vw, 5vh, 0) scale(1.12); }
}

@keyframes nebula-b {
  0% { transform: translate3d(0, 0, 0) scale(1.05); }
  100% { transform: translate3d(9vw, -6vh, 0) scale(0.92); }
}

@keyframes nebula-c {
  0% { transform: translate3d(0, 0, 0) scale(0.95); }
  100% { transform: translate3d(-10vw, -8vh, 0) scale(1.1); }
}

@keyframes nebula-turn {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* The hero answers the mouse (v2.js): the chat leans, the tiles float at
   their own depths. Eased in the script; here only what stays still. */
.hero__visual .console {
  transform-style: preserve-3d;
  will-change: transform;
}

.sky__stars {
  inset: -60px;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 34% 9%, rgba(186, 230, 253, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 28%, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 79% 14%, rgba(196, 181, 253, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 34%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 45% 41%, rgba(255, 255, 255, 0.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 63%, rgba(165, 243, 252, 0.6) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 67% 72%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 86%, rgba(255, 255, 255, 0.45) 50%, transparent 51%);
  background-size: 520px 420px;
  /* The mouse and the scroll move the field; v2.js sets the variables. */
  translate: calc(var(--px) * -10px) calc(var(--py) * -8px + var(--sy) * -0.04px);
  animation: twinkle 5s ease-in-out infinite, star-drift 120s linear infinite;
}

.sky__stars--2 {
  background-size: 340px 300px;
  opacity: 0.55;
  translate: calc(var(--px) * -22px) calc(var(--py) * -16px + var(--sy) * -0.1px);
  animation-duration: 7s, 80s;
  animation-delay: -2.7s, 0s;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.35; }
}

@keyframes star-drift {
  to { background-position: -520px 210px; }
}

/* A floor of light lines running toward the viewer, faded into the dark. */
.sky__grid {
  left: -20%;
  right: -20%;
  bottom: -2%;
  height: 46%;
  background-image:
    linear-gradient(rgba(34, 211, 238, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.1) 1px, transparent 1px);
  background-size: 70px 70px;
  transform: perspective(520px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 85%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 85%);
  animation: grid-run 6s linear infinite;
  opacity: 0.7;
}

@keyframes grid-run {
  to { background-position: 0 70px; }
}

.sky__grain {
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* ===========================================================================
   Scroll animations, AOS's own: the same names, distances and 400ms. They
   play when a thing comes into view and again if it leaves below and comes
   back. Only with the script running (html.aos-ready), so a page without it
   is simply all there.
   =========================================================================== */
html.aos-ready [data-aos] {
  transition-property: opacity, transform, border-color, box-shadow;
  transition-duration: 0.4s;
  transition-timing-function: ease;
}

html.aos-ready [data-aos^="fade"],
html.aos-ready [data-aos^="zoom"] {
  opacity: 0;
}

html.aos-ready [data-aos="fade-up"] { transform: translate3d(0, 100px, 0); }
html.aos-ready [data-aos="fade-down"] { transform: translate3d(0, -100px, 0); }
html.aos-ready [data-aos="fade-left"] { transform: translate3d(100px, 0, 0); }
html.aos-ready [data-aos="fade-right"] { transform: translate3d(-100px, 0, 0); }
html.aos-ready [data-aos="zoom-in"] { transform: scale(0.6); }
html.aos-ready [data-aos="zoom-in-up"] { transform: translate3d(0, 100px, 0) scale(0.6); }
html.aos-ready [data-aos="zoom-out"] { transform: scale(1.2); }

html.aos-ready [data-aos].aos-animate {
  opacity: 1;
  transform: none;
}

/* ===========================================================================
   Cards that answer the mouse, the main site's own: a spotlight under the
   pointer (240px, the neon at 22%), the card tilting up to 6° toward it, and
   — new here — the border lighting up in the card's colour around the
   pointer. v2.js sets --mx/--my and the tilt.
   =========================================================================== */
.glow-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  isolation: isolate;
}

.glow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx) var(--my), color-mix(in oklab, var(--tone, var(--neon)) 22%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.glow-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(300px circle at var(--mx) var(--my), var(--tone, var(--neon)), color-mix(in oklab, var(--violet) 75%, transparent) 38%, transparent 68%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.glow-card:hover::before,
.glow-card:hover::after {
  opacity: 1;
}

.glow-card:hover {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--tone, var(--neon)) 35%, transparent), 0 22px 60px -22px color-mix(in oklab, var(--tone, var(--neon)) 60%, transparent);
}

/* Tilt comes from the inline transform v2.js writes; this smooths it. */
html.aos-ready [data-tilt].aos-animate,
[data-tilt] {
  transition: transform 0.3s ease-out, box-shadow 0.3s, border-color 0.3s, opacity 0.4s;
}

/* ===========================================================================
   The four steps, each acting out what it says. They play once the row is
   in view (.is-playing on the list) and then keep looping, softly.
   =========================================================================== */
.step__scene {
  position: relative;
  display: grid;
  place-items: center;
  height: 150px;
  margin: 4px 0 14px;
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 60%, rgba(34, 211, 238, 0.1), transparent 70%), rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  overflow: hidden;
}

/* 1 — a phone, a code arriving digit by digit, a tick. */
.phone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 92px;
  height: 128px;
  padding-top: 26px;
  border: 2px solid rgba(148, 163, 184, 0.45);
  border-radius: 18px;
  background: linear-gradient(180deg, #111a30, #0a1120);
}

.phone__notch {
  position: absolute;
  top: 7px;
  width: 26px;
  height: 5px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.35);
}

.phone__label {
  color: var(--faint);
  font-size: 10px;
}

.phone__code {
  display: flex;
  gap: 3px;
  direction: ltr;
}

.phone__code i {
  display: grid;
  place-items: center;
  width: 16px;
  height: 20px;
  border-radius: 5px;
  background: rgba(34, 211, 238, 0.12);
  color: var(--neon-soft);
  font-style: normal;
  font-weight: 800;
  font-size: 12px;
  opacity: 0;
}

.phone__ok {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--green);
  color: #041019;
  font-size: 12px;
  font-weight: 900;
  opacity: 0;
  transform: scale(0.4);
}

.is-playing .phone__code i { animation: digit 4.8s infinite; }
.is-playing .phone__code i:nth-child(2) { animation-delay: 0.25s; }
.is-playing .phone__code i:nth-child(3) { animation-delay: 0.5s; }
.is-playing .phone__code i:nth-child(4) { animation-delay: 0.75s; }
.is-playing .phone__ok { animation: tick 4.8s infinite 1.1s; }

@keyframes digit {
  0%, 4% { opacity: 0; transform: translateY(6px); }
  10%, 80% { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; }
}

@keyframes tick {
  0% { opacity: 0; transform: scale(0.4); }
  8%, 70% { opacity: 1; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(0.4); }
}

/* 2 — three ways in, the light moving from one to the next. */
.step__scene--choice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
}

.choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 12.5px;
}

.choice small {
  color: var(--faint);
  font-size: 10.5px;
}

.is-playing .choice { animation: choose 6s infinite; }
.is-playing .choice.is-b { animation-delay: 2s; }
.is-playing .choice.is-c { animation-delay: 4s; }

@keyframes choose {
  0%, 30% {
    border-color: rgba(34, 211, 238, 0.65);
    background: rgba(34, 211, 238, 0.1);
    box-shadow: 0 0 22px -8px rgba(34, 211, 238, 0.9);
  }
  36%, 100% {
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.025);
    box-shadow: none;
  }
}

/* 3 — the link typing itself into a field, then found. */
/* Flex for the column, centred both ways like the grid it replaces. */
.step__scene--link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.field {
  display: flex;
  align-items: center;
  width: 86%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 11px;
  background: rgba(6, 10, 20, 0.7);
  direction: ltr;
  overflow: hidden;
}

.field__text {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--foreground);
  font-family: ui-monospace, monospace;
  font-size: 12px;
}

.field__caret {
  width: 2px;
  height: 16px;
  margin-left: 2px;
  background: var(--neon);
  animation: blink 0.9s steps(2, end) infinite;
}

.field__ok {
  color: var(--green);
  font-size: 12.5px;
  font-weight: 800;
  opacity: 0;
}

.is-playing .field__text { animation: type 5s steps(26, end) infinite; }
.is-playing .field__ok { animation: found 5s infinite; }

@keyframes type {
  0%, 6% { max-width: 0; }
  50%, 88% { max-width: 230px; }
  100% { max-width: 0; }
}

@keyframes found {
  0%, 52% { opacity: 0; transform: translateY(4px); }
  58%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

/* 4 — the switch flips, the light comes on. */
.step__scene--power {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.power {
  position: relative;
  width: 86px;
  height: 44px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.power__knob {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e8eef8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.power__state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--faint);
  font-size: 12.5px;
  font-weight: 800;
}

.power__state i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
}

.is-playing .power { animation: power-bg 4s infinite; }
.is-playing .power__knob { animation: power-knob 4s infinite; }
.is-playing .power__state { animation: power-text 4s infinite; }
.is-playing .power__state i { animation: power-dot 4s infinite; }

@keyframes power-bg {
  0%, 20% { background: rgba(148, 163, 184, 0.2); box-shadow: none; }
  30%, 85% { background: linear-gradient(135deg, #22d3ee, #7c5cff); box-shadow: 0 0 30px -4px rgba(34, 211, 238, 0.8); }
  95%, 100% { background: rgba(148, 163, 184, 0.2); box-shadow: none; }
}

@keyframes power-knob {
  0%, 20% { right: 6px; }
  30%, 85% { right: 46px; }
  95%, 100% { right: 6px; }
}

@keyframes power-text {
  0%, 25% { color: var(--faint); }
  32%, 85% { color: var(--green); }
  95%, 100% { color: var(--faint); }
}

@keyframes power-dot {
  0%, 25% { background: var(--faint); box-shadow: none; }
  32%, 85% { background: var(--green); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.2); }
  95%, 100% { background: var(--faint); box-shadow: none; }
}

/* The line under the steps fills as they come into view. */
.steps::after {
  content: "";
  position: absolute;
  top: 34px;
  right: 8%;
  height: 2px;
  width: 0;
  background: linear-gradient(270deg, var(--neon), var(--violet));
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.8);
  transition: width 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s;
}

.steps.is-playing::after {
  width: 84%;
}

@media (max-width: 900px) {
  .steps::after {
    display: none;
  }
}

/* --- add-ons ------------------------------------------------------------- */
.addons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.addon {
  --tone: var(--neon);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(17, 27, 50, 0.85), rgba(10, 16, 31, 0.92));
}

.addon__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.addon__img {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(34, 211, 238, 0.08);
}

.addon__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(124, 92, 255, 0.22));
  font-size: 24px;
}

.addon h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}

.addon__tagline {
  margin: 2px 0 0;
  color: var(--neon-soft);
  font-size: 13px;
  font-weight: 700;
}

.addon__desc {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.9;
  white-space: pre-line;
}

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

.addon__tag {
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted-foreground);
  font-size: 12px;
}

.addon__tag--plan {
  border-color: rgba(251, 191, 36, 0.35);
  color: var(--amber);
}

.addon__tag--solo {
  border-color: rgba(52, 211, 153, 0.35);
  color: var(--green);
}

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

.addon__price b {
  font-family: "Lalezar", sans-serif;
  font-size: 26px;
  font-weight: 400;
}

.addon__price span {
  margin-inline-start: 6px;
  color: var(--faint);
  font-size: 12.5px;
}

/* --- guest ticket -------------------------------------------------------- */
.guest {
  --tone: #22d3ee;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 28px;
  align-items: center;
  padding: 40px;
  border: 1px solid rgba(34, 211, 238, 0.28);
  border-radius: 30px;
  background:
    radial-gradient(ellipse at 90% 0%, rgba(34, 211, 238, 0.16), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(124, 92, 255, 0.18), transparent 55%),
    var(--panel-solid);
}

.guest h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.6vw, 44px);
}

.guest p {
  margin: 0 0 22px;
  color: var(--muted-foreground);
}

.guest .cta__ctas {
  justify-content: flex-start;
}

.guest__art {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bubble {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.8;
}

.bubble--me {
  align-self: flex-start;
  border-start-start-radius: 4px;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.3);
}

.bubble--them {
  align-self: flex-end;
  border-start-end-radius: 4px;
  background: rgba(124, 92, 255, 0.14);
  border: 1px solid rgba(124, 92, 255, 0.32);
}

.bubble--small {
  font-size: 13px;
}

@media (max-width: 860px) {
  .guest {
    grid-template-columns: 1fr;
    padding: 26px;
  }
}

/* --- quiet versions ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .sky__nebula,
  .sky__stars,
  .sky__grid,
  .tile__art,
  .feed li,
  .dot-live,
  .live-tag::before,
  .field__caret {
    animation: none !important;
  }

  .is-playing .phone__code i,
  .is-playing .phone__ok,
  .is-playing .choice,
  .is-playing .field__text,
  .is-playing .field__ok,
  .is-playing .power,
  .is-playing .power__knob,
  .is-playing .power__state,
  .is-playing .power__state i {
    animation: none !important;
  }

  .phone__code i,
  .phone__ok,
  .field__ok {
    opacity: 1;
    transform: none;
  }

  .field__text {
    max-width: 230px;
  }
}

.addon__paused {
  color: var(--muted, #97a6bf);
  font-size: 13px;
  font-weight: 700;
}

/* ===========================================================================
   2026-10-06
   =========================================================================== */

/* --- the hero's live page: a game, and the chat beside it ----------------- */

.stage {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.stage__game {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #1a1446 0%, #3b1d5e 36%, #a8476f 60%, #f29c6b 72%, #24183a 72.5%);
}

.stage__sun {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe2a8 0%, #ffb36b 55%, rgba(255, 140, 90, 0) 72%);
  transform: translate(-50%, -50%);
}

.stage__hill {
  position: absolute;
  inset: auto 0 0;
}

.stage__hill--far {
  height: 46%;
  background: #2b1d48;
  clip-path: polygon(0 55%, 12% 30%, 24% 48%, 38% 18%, 52% 42%, 66% 22%, 80% 46%, 92% 28%, 100% 40%, 100% 100%, 0 100%);
}

.stage__hill--near {
  height: 32%;
  background: linear-gradient(180deg, #160f2c, #0c0819);
  clip-path: polygon(0 40%, 18% 62%, 34% 30%, 50% 58%, 64% 36%, 82% 64%, 100% 34%, 100% 100%, 0 100%);
}

.stage__cross {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  background: linear-gradient(#fff, #fff) center / 2px 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 2px no-repeat;
  opacity: 0.7;
}

.stage__hud {
  position: absolute;
  left: 4%;
  bottom: 9%;
  display: flex;
  gap: 4px;
}

.stage__hud i {
  width: 26px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #f43f5e, #fb7185);
}

.stage__hud i:last-child {
  background: rgba(255, 255, 255, 0.25);
}

/* What a Minecraft donation sends into the game. */
.stage__spawn {
  position: absolute;
  left: 34%;
  bottom: 18%;
  font-size: 30px;
  opacity: 0;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}

.stage__spawn.is-on {
  animation: spawn 3.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes spawn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.4);
  }
  15%,
  80% {
    opacity: 1;
    transform: none;
  }
  60% {
    transform: translateX(26px);
  }
  100% {
    opacity: 0;
    transform: translateX(40px);
  }
}

.stage__live {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 9px;
  border-radius: 6px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.stage__viewers {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(5, 8, 18, 0.7);
  color: #e2e8f0;
  font-size: 12px;
}

.stage__viewers i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  animation: blink 1.4s infinite;
}

/* «در حال خواندن با صدای فارسی», over the game. */
.stage__voice {
  position: absolute;
  inset: auto 10px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(5, 8, 18, 0.82);
  border: 1px solid rgba(52, 211, 153, 0.45);
  color: #ecfdf5;
  font-size: 13px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.stage__voice.is-on {
  opacity: 1;
  transform: none;
}

.stage__voice-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wave {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  flex: none;
}

.wave i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--green);
  animation: wave 0.9s ease-in-out infinite;
  transform-origin: center;
}

.wave i:nth-child(2) { animation-delay: 0.1s; }
.wave i:nth-child(3) { animation-delay: 0.25s; }
.wave i:nth-child(4) { animation-delay: 0.05s; }
.wave i:nth-child(5) { animation-delay: 0.3s; }
.wave i:nth-child(6) { animation-delay: 0.15s; }
.wave i:nth-child(7) { animation-delay: 0.2s; }

@keyframes wave {
  0%,
  100% {
    transform: scaleY(0.25);
  }
  50% {
    transform: scaleY(1);
  }
}

.chat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.chat__title {
  font-weight: 900;
  font-size: 14px;
}

.chat__bot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  padding: 2px 10px 2px 4px;
  border: 1px solid rgba(34, 211, 238, 0.3);
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.07);
  color: var(--neon-soft);
  font-size: 11.5px;
  font-weight: 700;
}

.chat__bot img {
  width: 20px;
  height: 16px;
  object-fit: contain;
}

/* The chat itself: rows, not boxes, as in Aparat. The whole box now — the
   little game above it is gone — so the chat has its height. */
.console .feed {
  height: 470px;
  gap: 4px;
  padding: 10px 12px;
}

.console .feed li {
  border: 0;
  border-radius: 12px;
  padding: 6px 8px;
  background: none;
}

.feed__msg {
  transition: opacity 0.5s, filter 0.5s, transform 0.5s;
}

.console .feed__av {
  width: 26px;
  height: 26px;
  font-size: 11px;
}

/* The bot's own face, in the dark tile of /app/'s cards. */
.console .feed__av--bot {
  border-radius: 9px;
  background:
    radial-gradient(circle at 30% 25%, rgba(34, 211, 238, 0.45), transparent 70%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(34, 211, 238, 0.4);
  box-shadow: 0 0 16px -6px var(--neon);
}

.feed__av--bot img {
  width: 18px;
  height: 15px;
  object-fit: contain;
}

.feed__text {
  color: #dbe4f3;
}

.feed__user--bot {
  color: var(--neon-soft);
}

/* A message the bot is taking down: red, struck, gone. */
.console .feed li.is-caught {
  background: rgba(251, 113, 133, 0.1);
  box-shadow: inset -3px 0 0 var(--rose);
}

.feed__msg.is-caught .feed__text {
  text-decoration: line-through;
  color: var(--rose);
  filter: blur(1.2px);
  opacity: 0.6;
  transition: filter 0.4s, opacity 0.4s;
}

.console .feed li.feed__gone {
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  color: var(--faint);
  font-size: 12.5px;
  font-style: italic;
}

.feed__gone-icon {
  font-style: normal;
  opacity: 0.8;
}

.console .feed li.is-bot {
  background: rgba(34, 211, 238, 0.06);
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.18);
}

.console .feed li.is-bot.is-warn {
  background: rgba(251, 191, 36, 0.07);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.25);
}

.console .feed li.is-bot.is-warn .feed__user--bot {
  color: var(--amber);
}

.console .feed li.is-bot.is-mc {
  background: rgba(52, 211, 153, 0.07);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.25);
}

/* The message an answer is to, quoted above it as Aparat quotes replies. */
.feed__quote {
  display: block;
  margin-bottom: 2px;
  padding: 1px 8px;
  border-inline-start: 2px solid rgba(34, 211, 238, 0.6);
  color: var(--faint);
  font-size: 12px;
}

.feed__quote b {
  color: var(--muted-foreground);
  direction: ltr;
  unicode-bidi: isolate;
}

.console .feed li.is-donate {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.12), rgba(52, 211, 153, 0.08));
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.35);
}

.console .feed li.is-donate .feed__amount {
  color: var(--amber);
}

.is-typing .feed__dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 26px;
}

.feed__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neon-soft);
  animation: dots 1s infinite;
}

.feed__dots i:nth-child(2) { animation-delay: 0.15s; }
.feed__dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes dots {
  0%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.chat__stats {
  display: flex;
  border-top: 1px solid var(--line);
}

.chat__stats span {
  flex: 1;
  display: grid;
  justify-items: center;
  padding: 8px 4px;
  color: var(--faint);
  font-size: 11.5px;
}

.chat__stats span + span {
  border-inline-start: 1px solid var(--line);
}

.chat__stats b {
  font-family: "Lalezar", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--foreground);
}

.chat__stats b.is-bumped {
  animation: bumped 0.6s ease-out;
}

@keyframes bumped {
  30% {
    color: var(--neon-soft);
    transform: scale(1.25);
  }
}

/* --- lightning ------------------------------------------------------------ */

.bolts {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.bolts canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bolts__flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
  background:
    radial-gradient(ellipse 60% 70% at var(--x, 50%) 0%, rgba(165, 243, 252, 0.32), transparent 62%),
    radial-gradient(ellipse 90% 60% at var(--x, 50%) 10%, rgba(124, 92, 255, 0.16), transparent 70%);
}

/* --- four steps: the line behind them, the numbers in /app/'s tiles ------- */

.steps::before,
.steps::after {
  z-index: 0;
  top: 47px;
}

.step {
  z-index: 1;
  background: linear-gradient(180deg, rgba(19, 30, 54, 0.98), rgba(12, 19, 36, 0.98));
}

.step::before {
  --tone: #22d3ee;
  width: 58px;
  height: 58px;
  margin: 18px auto 14px;
  border-radius: 16px;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--tone) 42%, transparent), transparent 70%), #0d1830;
  border: 1px solid color-mix(in srgb, var(--tone) 50%, transparent);
  color: color-mix(in srgb, var(--tone) 60%, #ffffff);
  font-size: 28px;
  box-shadow: 0 0 26px -8px var(--tone), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-shadow: 0 0 14px color-mix(in srgb, var(--tone) 70%, transparent);
}

.step:nth-child(2)::before {
  --tone: #a78bfa;
}

.step:nth-child(3)::before {
  --tone: #34d399;
}

.step:nth-child(4)::before {
  --tone: #fbbf24;
}

/* --- the add-on cards' icon, in the same tile ---------------------------- */

.addon__icon {
  background: radial-gradient(circle at 30% 25%, rgba(34, 211, 238, 0.42), transparent 70%), rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(34, 211, 238, 0.38);
  box-shadow: 0 0 24px -8px var(--neon);
}

/* --- the footer ----------------------------------------------------------- */

.foot .foot__power {
  margin-top: 14px;
  color: var(--neon);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-align: right;
}

.seal-box {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
}

.seal-box h4 {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .bolts {
    display: none;
  }

  .wave i,
  .feed__dots i,
  .stage__spawn.is-on {
    animation: none;
  }
}

/* A button the page hides (the header's «ورود» for somebody already signed in). */
.btn[hidden] {
  display: none;
}

/* @name in a line: a mention, as the chat draws one. */
.feed__at {
  color: var(--neon-soft);
  font-weight: 700;
}

/* The bot thanking a donor: the donation's own gold, in the bot's row. */
.console .feed li.is-bot.is-donate {
  background: rgba(251, 191, 36, 0.07);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.28);
}

/* The feature's own name, small, above the line that says what it changes. */
.tile__tag {
  align-self: flex-start;
  margin-bottom: 2px;
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone, #22d3ee) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, #22d3ee) 35%, transparent);
  color: var(--tone, #22d3ee);
  font-size: 11.5px;
  font-weight: 800;
}

/* ===========================================================================
   The light version, for phones and weaker computers (html.lite, set in the
   page's head). The same page, without what a phone's graphics chip pays for
   on every frame: the blurred nebulae (a 70px blur over three screen-sized
   layers, scaled forever), the drifting star fields and the running grid
   (background-position animations repaint the whole layer each frame), the
   film grain (an SVG noise filter blended over everything), and the frosted
   header (a blur of whatever scrolls under it). Colour is kept: the glows
   the nebulae gave are painted once into the base.
   =========================================================================== */
.lite .sky__nebula,
.lite .sky__grain {
  display: none;
}

.lite .sky__base {
  background:
    radial-gradient(ellipse 80% 40% at 85% 0%, rgba(34, 211, 238, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 90% 45% at 0% 45%, rgba(124, 92, 255, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 110% 60% at 70% -10%, #0f1b38 0%, transparent 60%),
    radial-gradient(ellipse 100% 70% at 20% 120%, rgba(124, 92, 255, 0.12) 0%, transparent 65%),
    linear-gradient(180deg, #060a16 0%, #050812 60%, #04060e 100%);
}

.lite .sky__stars,
.lite .sky__grid {
  animation: none;
  translate: none;
}

.lite .top {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(5, 8, 18, 0.97);
}

.lite .zoom {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(5, 8, 18, 0.96);
}

/* Bobbing pictures: still. Their shadows are painted once and kept. */
.lite .tile__art {
  animation: none;
}

/* Nothing slides in from a hundred pixels away on a phone: it is all there. */
html.lite.aos-ready [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ===========================================================================
   2026-10-12 — the first screen, again, and «چه چیزی عوض می‌شود» smaller
   =========================================================================== */

/* The heading: two lines that each fit on one line of the column, instead of
   four broken ones at 82px. */
.hero {
  padding: 64px 0 72px;
}

@media (min-width: 1001px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
  }
}

.hero h1 {
  margin: 20px 0 16px;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.35;
  text-wrap: balance;
}

/* Each half of the sentence on its own line, whole, on a computer. */
@media (min-width: 1001px) {
  .hero h1 span {
    white-space: nowrap;
  }
}

.hero h1 span:first-child {
  color: #f4f7fd;
}

.hero__lede {
  max-width: 540px;
  font-size: 17px;
  line-height: 2.05;
}

/* The three facts as small dark tiles with a light in their colour, like the
   tiles of /app/ and the panel. */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 600px;
  margin-top: 34px;
}

.facts li {
  --tone: var(--neon);
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklab, var(--tone) 22%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in oklab, var(--tone) 14%, transparent), transparent 60%),
    rgba(10, 16, 31, 0.72);
}

.facts li > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.facts b {
  font-size: 22px;
}

.facts small {
  color: var(--faint);
  font-size: 12px;
  line-height: 1.5;
}

.facts__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid color-mix(in oklab, var(--tone) 45%, transparent);
  border-radius: 12px;
  background: radial-gradient(circle at 50% 35%, color-mix(in oklab, var(--tone) 30%, transparent), #070b16 72%);
  color: var(--tone);
  box-shadow: 0 0 18px -6px var(--tone);
}

/* The chat, standing in a ring of light, with room on its left for what the
   bot just did: the tiles there touch the chat's edge, never its words. */
.hero__visual {
  position: relative;
  padding: 24px 0;
}

.hero__visual .console {
  margin-inline-end: 168px;
}

.hero__ring {
  position: absolute;
  inset: -4% -2%;
  z-index: -1;
  pointer-events: none;
}

.hero__ring::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(34, 211, 238, 0.2), transparent 70%),
    radial-gradient(closest-side at 70% 70%, rgba(124, 92, 255, 0.22), transparent 70%);
  filter: blur(20px);
}

.hero__ring i {
  position: absolute;
  inset: 4% 2%;
  border: 1px solid rgba(34, 211, 238, 0.14);
  border-radius: 50%;
  animation: ring-turn 28s linear infinite;
}

.hero__ring i::before {
  content: "";
  position: absolute;
  top: 12%;
  left: 13%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 14px 3px rgba(34, 211, 238, 0.7);
}

.hero__ring i + i {
  inset: 14% 10%;
  border-color: rgba(124, 92, 255, 0.16);
  animation-duration: 40s;
  animation-direction: reverse;
}

.hero__ring i + i::before {
  background: #a78bfa;
  box-shadow: 0 0 14px 3px rgba(167, 139, 250, 0.7);
}

@keyframes ring-turn {
  to {
    rotate: 360deg;
  }
}

.hero__visual .console {
  border-color: rgba(34, 211, 238, 0.2);
  box-shadow:
    0 50px 120px -50px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 0 80px -30px rgba(34, 211, 238, 0.35);
}

.hero__visual .console .feed {
  height: 430px;
}

/* What the bot just did, floating at the chat's edges. */
.float {
  --tone: var(--neon);
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 12px;
  border: 1px solid color-mix(in oklab, var(--tone) 35%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, var(--tone) 16%, transparent), transparent 60%),
    rgba(8, 13, 27, 0.92);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9), 0 0 24px -12px var(--tone);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: float-bob 7s ease-in-out infinite;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.float > span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

.float b {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.float small {
  color: var(--faint);
  font-size: 11.5px;
  white-space: nowrap;
}

.float__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  background: radial-gradient(circle at 50% 35%, color-mix(in oklab, var(--tone) 32%, transparent), #070b16 75%);
  color: var(--tone);
}

.float__icon svg {
  width: 18px;
  height: 18px;
}

.float--a {
  top: 16%;
  inset-inline-end: 14px;
}

.float--b {
  top: 43%;
  inset-inline-end: 0;
  animation-delay: -2.4s;
}

.float--c {
  top: 70%;
  inset-inline-end: 18px;
  animation-delay: -4.6s;
}

/* The chat just did this one: it lights up for a moment. */
.float.is-ping {
  border-color: var(--tone);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9), 0 0 34px -6px var(--tone);
}

.float.is-ping .float__icon {
  animation: float-ping 0.7s ease-out;
}

@keyframes float-bob {
  50% {
    translate: 0 -8px;
  }
}

@keyframes float-ping {
  40% {
    scale: 1.18;
  }
}

@media (max-width: 1000px) {
  .hero__visual {
    max-width: 640px;
    margin-inline: auto;
    padding: 20px 0;
  }
}

@media (max-width: 640px) {
  .facts {
    grid-template-columns: 1fr;
  }

  .float {
    display: none;
  }

  .hero__visual .console {
    margin-inline-end: 0;
  }

  .hero__visual .console .feed {
    height: 380px;
  }
}

.lite .float,
.lite .hero__ring i {
  animation: none;
}

.lite .float {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .float,
  .hero__ring i {
    animation: none;
  }
}

/* --- «چه چیزی عوض می‌شود»: eight even tiles in two rows ------------------
   It was a two-by-two tile with a 300px picture and a wide one beside six
   others — a screen and a half for one heading. Now every tile is the same
   size, with the picture smaller, and the list under the first tile goes
   (its points are in /plans/). */
#features .section__head {
  margin-bottom: 28px;
}

#features .section__head .display {
  font-size: clamp(28px, 3.2vw, 40px);
}

#features .bento {
  grid-auto-rows: auto;
  gap: 14px;
}

#features .tile,
#features .tile--big,
#features .tile--wide {
  --art-h: 112px;
  grid-column: auto;
  grid-row: auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
  padding: calc(var(--art-h) + 22px) 20px 20px;
}

#features .tile__art,
#features .tile--big .tile__art,
#features .tile--wide .tile__art {
  position: absolute;
  top: 14px;
  left: 50%;
  width: auto;
  max-width: 80%;
  height: var(--art-h);
  margin: 0;
  aspect-ratio: auto;
  transform: translateX(-50%);
  order: 0;
}

#features .tile:hover .tile__art {
  transform: translateX(-50%) scale(1.06);
}

#features .tile--wide .tile__text {
  display: contents;
}

#features .tile h3,
#features .tile--big h3 {
  font-size: 16.5px;
}

#features .tile p,
#features .tile--big p {
  font-size: 13.5px;
  line-height: 1.85;
}

#features .tile .checks {
  display: none;
}

#features .tile__tag {
  align-self: flex-start;
}

/* ---------------------------------------------------------------------------
   2026-10-13: the feature at work, as a small label beside the bot's name
   («جواب با هوش مصنوعی»، «امتیاز بیننده‌ها»…), and Aparat subs and rubies.
   ------------------------------------------------------------------------ */

.feed__tag {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 7px;
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.1);
  color: var(--neon-soft);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: 1px;
  white-space: nowrap;
}

.console .feed li.feed__gone .feed__tag {
  border-color: rgba(251, 113, 133, 0.35);
  background: rgba(251, 113, 133, 0.1);
  color: #fda4af;
}

.console .feed li.is-bot.is-warn .feed__tag {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.1);
  color: var(--amber);
}

.console .feed li.is-bot.is-mc .feed__tag {
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(52, 211, 153, 0.1);
  color: #6ee7b7;
}

/* An Aparat sub or ruby: violet, Aparat's own colour for support. */
.console .feed li.is-bot.is-sub {
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.14), rgba(244, 114, 182, 0.08));
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.38);
}

.console .feed li.is-bot.is-sub .feed__tag {
  border-color: rgba(167, 139, 250, 0.45);
  background: rgba(167, 139, 250, 0.14);
  color: #c4b5fd;
}

.console .feed li.is-bot.is-donate .feed__tag {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.1);
  color: var(--amber);
}

@media (max-width: 560px) {
  .feed__tag {
    font-size: 9.5px;
    padding: 0 6px;
  }
}

/* «پخش زنده» and the footer's Instagram (2026-10-20). */
.eyebrow--live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: rgba(239, 68, 68, 0.45) !important;
  background: rgba(239, 68, 68, 0.1) !important;
  color: #fecaca !important;
}

.eyebrow--live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.9);
  animation: smc-blink 1.4s ease-in-out infinite;
}

.foot__insta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  padding: 7px 14px;
  border: 1px solid rgba(236, 72, 153, 0.4);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.14), rgba(168, 85, 247, 0.14));
  color: #fbcfe8;
  font-weight: 800;
  text-decoration: none;
}

.foot__insta:hover {
  border-color: rgba(236, 72, 153, 0.75);
}