/* ============================================================
   FEATURES  —  the stage

   One frame, five clips, five acts. The frame holds a looping clip
   and the list beside it names what the clip is showing.

   THREE NUMBERS DRIVE EVERYTHING

   features.js writes --act (0..4, fractional), --accent (the
   nearest act's colour) and --dir (+1 / -1, which way the scroll
   is moving). Every width, glow, mask, icon stroke and rail fill
   below is derived from those plus each element's own --i, so
   adding or reordering an act is a markup change and not a code
   one.

   WHY THE FRAME DOES NOT CHANGE SHAPE

   It used to narrow into a phone on act 2 so that "responsive" was
   demonstrated rather than claimed. Once real footage arrived that
   stopped working: the responsive clip ALREADY shows a monitor, a
   tablet and a phone, and squeezing 16:9 into a 0.54 phone left
   only the middle third of the width -- it cropped away the tablet
   and the phone and kept a lone monitor. The morph was destroying
   the exact composition that made the point.

   So the frame holds still, matches the footage at 16:9 so nothing
   is thrown away, and the motion moved into the things around it:
   the bloom behind, the rail below, the icons in the list.
   ============================================================ */

:root {
  --features-scroll-height: 400vh;
}

.features {
  position: relative;
  height: var(--features-scroll-height);
  isolation: isolate;
  background-color: var(--c-bg);
  color: var(--c-text);
  border-start-start-radius: var(--r-section);
  border-start-end-radius: var(--r-section);
}

.features__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  box-sizing: border-box;
  padding-block: clamp(0.75rem, 2vh, 2.2rem);
  overflow: clip;
}

.features__sticky > .container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-height: 100%;
}

@property --act   { syntax: '<number>'; initial-value: 0; inherits: true; }
@property --prog  { syntax: '<number>'; initial-value: 0; inherits: true; }
@property --enter { syntax: '<number>'; initial-value: 0; inherits: true; }
@property --dir   { syntax: '<number>'; initial-value: 1; inherits: true; }

/* ---- the heading -------------------------------------------- */
.features__title {
  --enter: 0;
  position: relative;
  text-align: center;
  margin-block-end: clamp(1rem, 2.5vh, 2.2rem);
  background-image: linear-gradient(to left,
    rgb(var(--rgb-ink)) 0%,
    rgb(var(--rgb-ink)) calc(var(--enter) * 100%),
    transparent calc(var(--enter) * 100% + 6%),
    transparent 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 1px rgb(var(--rgb-ink) / calc(0.42 - var(--enter) * 0.30));
  font-variation-settings: 'wght' calc(500 + var(--enter) * 400);
  transition:
    font-variation-settings var(--dur-slow) var(--ease-out),
    -webkit-text-stroke-color var(--dur-base) var(--ease);
}

.features__title::after {
  content: '';
  position: absolute;
  inset-block-start: 62%;
  inset-inline: 50%;
  z-index: -1;
  inline-size: clamp(120px, 22vw, 260px);
  block-size: 46px;
  translate: 50% 0;
  border-radius: var(--r-pill);
  background-image: radial-gradient(ellipse at center,
    rgb(155 95 217 / calc(var(--enter) * 0.30)) 0%, transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}

:root:not(.js) .features__title { --enter: 1; }

:root:not(.js) .features,
@media (prefers-reduced-motion: reduce) {
  .features {
    height: auto;
    padding-block: var(--sp-section);
  }
  .features__sticky {
    position: static;
    height: auto;
    padding-block: 0;
    overflow: visible;
  }
  .features__title {
    --enter: 1;
    transition: none;
    margin-block-end: var(--sp-heading-gap);
  }
}

@media (max-width: 919px) {
  :root {
    --features-scroll-height: 350vh;
  }
  .features__sticky {
    padding-block-start: clamp(0.4rem, 1.2vh, 0.8rem);
    padding-block-end: calc(clamp(0.5rem, 1.2vh, 0.8rem) + 4.8rem);
  }
  .features__title {
    margin-block-end: clamp(0.25rem, 0.8vh, 0.5rem);
    font-size: clamp(1.4rem, 4.5vw, 1.85rem);
  }
  .stg {
    gap: clamp(0.35rem, 1.2vw, 0.65rem);
  }
  .stg__device {
    inline-size: 100%;
    max-inline-size: min(100%, calc(clamp(130px, 22vh, 180px) * 16 / 9));
    margin-inline: auto;
  }
  .stg__acts {
    gap: clamp(0.15rem, 0.5vh, 0.3rem);
    min-block-size: auto;
  }
  .stg__act {
    padding: clamp(0.25rem, 0.6vh, 0.45rem);
    gap: var(--sp-xs);
  }
  .stg__icon {
    inline-size: 1.7rem;
    block-size: 1.7rem;
  }
  .stg__icon svg {
    inline-size: 0.95rem;
    block-size: 0.95rem;
  }
  .stg__name {
    font-size: clamp(0.9rem, 2.3vw, 1.02rem);
  }
  .stg__desc {
    font-size: clamp(0.75rem, 1.9vw, 0.84rem);
  }
}

@media (max-height: 760px) and (min-width: 920px) {
  .features__sticky {
    padding-block: clamp(0.4rem, 1vh, 1rem);
  }
  .features__title {
    margin-block-end: clamp(0.3rem, 1vh, 0.6rem);
    font-size: clamp(1.75rem, 4vh, 2.2rem);
  }
  .stg {
    gap: clamp(0.6rem, 1.8vw, 1.2rem);
  }
  .stg__device {
    max-inline-size: min(100%, calc(clamp(160px, 34vh, 240px) * 16 / 9));
  }
  .stg__acts {
    gap: 0.3rem;
    min-block-size: auto;
  }
  .stg__act {
    padding: clamp(0.3rem, 0.7vh, 0.55rem);
  }
}

/* ------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------ */

.stg {
  --act: 0;
  --prog: 0;
  --dir: 1;
  --accent: #F0C45A;

  display: grid;
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: center;
  max-inline-size: 76rem;
  margin-inline: auto;
}

@media (min-width: 920px) {
  .stg { grid-template-columns: 1.25fr 1fr; }
}

/* ------------------------------------------------------------
   THE STAGE

   A column: the frame, then the rail under it. It used to be a
   fixed 4/3 box with the frame centred inside, which left dead
   space above and below once the frame went to 16:9. Now the
   contents set the height and the rail has somewhere to live.
   ------------------------------------------------------------ */

.stg__stage {
  position: relative;
  display: grid;
  gap: var(--sp-md);
}

/* THE BLOOM

   A wide, very soft pool of the act's accent behind the frame. The
   glow used to be a box-shadow clamped to the frame's edge, so the
   colour change was a rim and nothing more. Spilling it across the
   section means the whole area shifts hue as the acts change --
   the same trick 92-glow.css plays with violet elsewhere on the
   page, keyed to --accent instead of a fixed colour. */
.stg__stage::before {
  content: '';
  position: absolute;
  inset: -18% -12%;
  z-index: -1;
  border-radius: 50%;
  background-image: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--accent) 26%, transparent) 0%,
    transparent 68%);
  filter: blur(48px);
  opacity: 0.9;
  pointer-events: none;
  transition: background-image var(--dur-slow) var(--ease);
}

/* The bloom is the section's whole colour signature -- it is what
   makes the page shift hue as the acts change. At 26% these accents
   read clearly against a near-black page and all but vanish against
   a near-white one, so on light the section lost the one thing that
   told you anything had happened. Light needs both more of the
   colour and a multiply blend, or the pale gold simply washes into
   the background instead of tinting it. */
:root[data-theme='light'] .stg__stage::before {
  background-image: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--accent) 55%, transparent) 0%,
    transparent 66%);
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* ------------------------------------------------------------
   THE FRAME
   ------------------------------------------------------------ */

.stg__device {
  position: relative;
  inline-size: 100%;
  max-inline-size: min(100%, calc(clamp(200px, 44vh, 460px) * 16 / 9));
  /* 16:9 matches the footage and bespoke graphic frames. */
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  border-radius: 14px;
  background-color: rgb(var(--rgb-media));
  overflow: clip;
  container-type: inline-size;

  /* THE BEZEL

     A 2px border alone reads as a rectangle with a line round it.
     Four layers read as an object: a hairline top edge catching
     light from above, a darker bottom edge in its own shadow, the
     drop shadow that seats it on the page, and the accent rim.

     Split into parts so the landing keyframes and the light theme
     can each reuse them. Written out three times instead, any
     change to the bezel had to be made in three places and the
     light theme could not touch the seat without restating
     everything. */
  --bezel:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    inset 0 -1px 0 rgb(0 0 0 / 0.45),
    inset 0 0 0 1px rgb(var(--rgb-ink) / 0.14);
  --bezel-lit:
    inset 0 1px 0 rgb(255 255 255 / 0.30),
    inset 0 -1px 0 rgb(0 0 0 / 0.45),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
  --seat: 0 30px 60px rgb(var(--rgb-shadow) / 0.5);

  box-shadow: var(--bezel), var(--seat),
              0 0 34px color-mix(in srgb, var(--accent) 22%, transparent);

  transition: box-shadow var(--dur-base) var(--ease);
}

/* THE LIGHT THEME SEATS IT DIFFERENTLY

   --rgb-shadow is 0 0 0 on dark, where a black shadow on a
   near-black page is invisible and the accent rim does all the
   lifting. On light it is 16 24 40, and the same 0.5 alpha at 60px
   blur stops being a shadow and becomes a grey smudge under the
   frame. A tighter, much fainter one actually reads as the object
   sitting on the page. */
:root[data-theme='light'] .stg__device {
  --seat: 0 16px 34px rgb(var(--rgb-shadow) / 0.16);
}

/* THE LANDING FLASH

   A 420ms spike in the accent rim at the moment an act settles.
   Without it the swap happens in silence -- the clip changes and
   nothing marks that it did. features.js adds the class and takes
   it off again; the animation is the whole effect. */
.stg__device.is-landing { animation: stg-land 420ms var(--ease-out); }

@keyframes stg-land {
  0%   { box-shadow: var(--bezel), var(--seat),
           0 0 34px color-mix(in srgb, var(--accent) 22%, transparent); }
  35%  { box-shadow: var(--bezel-lit), var(--seat),
           0 0 64px color-mix(in srgb, var(--accent) 52%, transparent); }
  100% { box-shadow: var(--bezel), var(--seat),
           0 0 34px color-mix(in srgb, var(--accent) 22%, transparent); }
}

/* THE FOOTAGE

   Five clips stacked, all in the DOM. Only the nearest is opaque.
   Each was cut at its own best loop point and had its tail
   dissolved into its head, so none jumps when it repeats;
   features.js plays only the one on screen, because five
   simultaneous video decodes is not something a phone should be
   asked to do.

   object-position is CENTRE. The clips are 16:9 and the frame is
   16:9, so nothing is cropped -- but centre is still the right
   anchor for the scale-in, which does briefly overflow. */
.stg__shot {
  display: flex;
  align-items: center;
  justify-content: center;
  --near: max(0, calc(1 - max(calc(var(--i) - var(--act)), calc(var(--act) - var(--i)))));

  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  user-select: none;
  pointer-events: none;

  opacity: var(--near);

  transform:
    translateX(calc((1 - var(--near)) * var(--dir) * -3%))
    scale(calc(1.04 - var(--near) * 0.04));

  will-change: opacity, transform;
  transition:
    opacity 100ms ease-out,
    transform 120ms ease-out;
}

.stg__shot.is-active {
  pointer-events: auto;
}

.stg__shot video,
.stg__shot-video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* THE GLASS

   One fixed diagonal highlight. Deliberately NOT animated: a
   travelling sheen on a panel that already contains moving footage
   reads as a cheap effect layered on top, where a still one just
   says the frame has a surface. */
.stg__glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(115deg,
    rgb(255 255 255 / 0.07) 0%,
    rgb(255 255 255 / 0.02) 26%,
    transparent 46%);
}

/* THE VIGNETTE

   Darkens the corners. Two jobs: it gives the frame depth, and it
   pulls the eye to the middle -- which is where every one of these
   five clips puts its subject. */
.stg__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(ellipse 78% 78% at center,
    transparent 42%, rgb(0 0 0 / 0.34) 100%);
}

/* THE TAG

   Reads "۰۱ ⁄ اجزا". This used to be a lone "نسخهٔ ۲٫۴" that
   appeared on act 5 only -- the last survivor of an overlay system
   that was removed, attached to nothing. Now every act has one and
   it is part of the set. features.js fills the text from the active
   button's data-tag. */
.stg__chip {
  position: absolute;
  inset-block-start: 5.5%;
  inset-inline-start: 4%;
  padding: 0.32em 0.8em;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: rgb(var(--rgb-media));
  background-color: var(--accent);
  pointer-events: none;
  transition: background-color var(--dur-base) var(--ease);
}

/* THE RAIL

   The only thing in the section that follows the FRACTIONAL value
   of --act. Everything else snaps between five states, which is why
   the scroll itself was invisible: you could see that things
   changed but not that you were moving. Four gaps between five
   acts, so the fill is --act / 4. */
.stg__rail {
  position: relative;
  block-size: 2px;
  border-radius: var(--r-pill);
  background-color: rgb(var(--rgb-ink) / 0.12);
  overflow: hidden;
}

.stg__rail i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: block;
  inline-size: calc(var(--prog, calc(var(--act) / 4)) * 100%);
  border-radius: inherit;
  background-color: var(--accent);
  transition: background-color var(--dur-base) var(--ease);
}

/* ------------------------------------------------------------
   THE ACT LIST
   ------------------------------------------------------------ */

.stg__acts {
  display: grid;
  gap: clamp(0.3rem, 1vw, 0.55rem);
  margin: 0;
  padding: 0;
  list-style: none;
  min-block-size: 20rem;
  align-content: center;
}

.stg__act {
  --near: max(0, calc(1 - max(calc(var(--i) - var(--act)), calc(var(--act) - var(--i))) * 0.8));

  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--sp-sm);
  align-items: start;
  inline-size: 100%;
  padding: clamp(0.6rem, 1.4vw, 1rem);
  padding-inline-start: clamp(0.9rem, 2vw, 1.4rem);
  border: 0;
  border-radius: var(--r-tile);
  text-align: start;
  cursor: pointer;
  font: inherit;

  background-color: rgb(var(--rgb-ink) / calc(var(--near) * 0.05));
  transition: background-color 180ms var(--ease);
}

/* The active row's marker. A 5% background tint alone was too weak
   to say which of five rows is live; a solid bar in the act's own
   colour says it at a glance. It grows from the centre rather than
   from an end, so it does not read as a progress bar. */
.stg__act::before {
  content: '';
  position: absolute;
  inset-block: 50%;
  inset-inline-start: 0;
  inline-size: 3px;
  block-size: calc(var(--near) * 62%);
  translate: 0 -50%;
  border-radius: var(--r-pill);
  background-color: var(--ink-c);
  transition: block-size 180ms var(--ease-out);
}

.stg__act:focus-visible {
  outline: 2px solid var(--ink-c);
  outline-offset: 2px;
}

/* The accents are picked to sit against the footage, which is gold
   on deep violet. Bright accents chosen for a dark panel do not
   survive the light theme's near-white one, so they are mixed 70%
   with black there: that puts the five between 3.14 and 5.77
   against the 3:1 minimum for non-text UI, where undarkened they
   would fail. Against the dark panel the undarkened colours are
   already 5.84 to 11.88.

   It has to go through a derived property: --dot-c is set inline in
   the markup, so a stylesheet rule can never override it. --ink-c
   is set here, so the light theme can. */
.stg__act { --ink-c: var(--dot-c); }
:root[data-theme='light'] .stg__act {
  --ink-c: color-mix(in srgb, var(--dot-c) 70%, #000);
}

.stg__num {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  line-height: 2.4;
  /* 0.28 was chosen to look subdued and measured 2.12:1 dark and
     1.87:1 light -- below even the 3:1 floor for non-text. These
     are aria-hidden decoration, so they are technically exempt, but
     they are still glyphs a sighted reader uses to tell position,
     and at that alpha they were guesswork rather than reading. 0.59
     is the minimum that clears 4.5:1 in BOTH themes (light is the
     binding one; dark clears it at 0.52). */
  color: rgb(var(--rgb-ink) / calc(0.59 + var(--near) * 0.30));
  transition: color var(--dur-base) var(--ease);
}

.stg__icon {
  display: grid;
  place-items: center;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  border-radius: var(--r-tile);
  border: 1px solid color-mix(in srgb, var(--ink-c) calc(var(--near) * 70%), rgb(var(--rgb-ink) / 0.14));
  color: color-mix(in srgb, var(--ink-c) calc(var(--near) * 100%), rgb(var(--rgb-ink) / 0.45));
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.stg__icon svg { inline-size: 1.2rem; block-size: 1.2rem; }

/* THE ICON DRAWS ITSELF

   Every path carries pathLength="1", which normalises it to unit
   length whatever its real geometry. That is what makes one rule
   work for all five: every icon draws at the same rate and finishes
   at the same moment, instead of at a speed set by how long its own
   path happens to be.

   The RESTING state is fully drawn. Deriving the offset from --near
   instead -- so the icon was genuinely half-drawn when the act was
   half-arrived -- was the obvious version and it was wrong: it left
   the four inactive icons at offset 1, which is not "dimmed", it is
   invisible. Four empty rounded squares read as icons that failed
   to load, not as icons waiting their turn.

   So the draw is an ENTRANCE, played once when an act becomes
   active, over an icon that is otherwise complete. */
.stg__icon svg :is(path, rect, circle) {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.stg__act.is-live .stg__icon svg :is(path, rect, circle) {
  animation: stg-draw 620ms var(--ease-out);
}

@keyframes stg-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

.stg__body { min-inline-size: 0; }

.stg__name {
  display: block;
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
  font-variation-settings: 'wght' calc(300 + var(--near) * 550);
  color: rgb(var(--rgb-ink) / calc(0.60 + var(--near) * 0.40));
  transition:
    font-variation-settings 180ms var(--ease-out),
    color 180ms var(--ease);
}

/* Open/closed is DISCRETE, driven by aria-expanded rather than by
   --near. Sizing it from --near instead left a neighbouring act
   parked at a fractional height for as long as the reader stopped
   scrolling there, which clips the last line mid-word and reads as
   broken text rather than as a transition. Exactly one description
   is open, and it is the one the button already announces as
   expanded -- so the visual state and the accessible state cannot
   drift apart.

   The 0fr..1fr grid trick is the usual way to animate a collapse
   without picking a height, and it cannot be used: `fr` is not a
   permitted unit inside calc(), so a continuous value is
   impossible, and CSS.supports('grid-template-rows','calc(0.5 *
   1fr)') is false in Chrome. 12rem is far above the ~5rem these
   three-line descriptions occupy at the narrowest layout. */
.stg__desc {
  display: block;
  overflow: hidden;
  max-block-size: 0;
  margin: 0;
  padding-block-start: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  opacity: 0;
  color: rgb(var(--rgb-ink) / 0.90);
  transition:
    max-block-size 220ms cubic-bezier(0.16, 1, 0.3, 1),
    padding-block-start 220ms ease,
    opacity 180ms ease;
}

.stg__act[aria-expanded='true'] .stg__desc {
  max-block-size: 5.5rem;
  padding-block-start: var(--sp-2xs);
  opacity: 1;
}

/* ============================================================
   BESPOKE FEATURE ANIMATIONS
   ============================================================ */

.stg__anim {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3cqw, 2rem);
  box-sizing: border-box;
}

/* Ambient Canvas Background */
.anim-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.anim-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.04) 1px, transparent 1px);
  background-size: clamp(16px, 3.5cqw, 28px) clamp(16px, 3.5cqw, 28px);
  mask-image: radial-gradient(circle at center, black 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 85%);
}

.anim-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(clamp(25px, 6cqw, 55px));
  opacity: 0.38;
  pointer-events: none;
}

/* ------------------------------------------------------------
   SCENE 1: اجزای انحصاری (Exclusive Components - Gold)
   ------------------------------------------------------------ */
.anim-orb--comp {
  inline-size: 55cqw;
  block-size: 55cqw;
  inset-block-start: -15%;
  inset-inline-end: -10%;
  background: radial-gradient(circle, #F0C45A 0%, transparent 70%);
}

.comp-canvas {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: 1fr auto;
  gap: clamp(0.6rem, 2cqw, 1.2rem);
  align-items: center;
}

.comp-card {
  background: rgb(18 20 27 / 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgb(240 196 90 / 0.24);
  border-radius: clamp(8px, 1.8cqw, 14px);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.12);
  padding: clamp(0.6rem, 2cqw, 1.2rem);
  color: #fff;
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.comp-card--main {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.8cqw, 1rem);
}

.comp-card__header {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.9cqw, 7px);
  padding-block-end: clamp(0.3rem, 1cqw, 0.6rem);
  border-block-end: 1px solid rgb(255 255 255 / 0.08);
}

.comp-card__dot {
  inline-size: clamp(6px, 1.2cqw, 9px);
  block-size: clamp(6px, 1.2cqw, 9px);
  border-radius: 50%;
  background: rgb(240 196 90 / 0.5);
}

.comp-card__title {
  font-size: clamp(0.7rem, 2cqw, 0.88rem);
  font-weight: 600;
  margin-inline-start: 4px;
  color: rgb(240 196 90 / 0.95);
}

.comp-card__body {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.8cqw, 0.9rem);
}

.comp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.comp-label {
  font-size: clamp(0.65rem, 1.8cqw, 0.82rem);
  color: rgb(255 255 255 / 0.85);
}

/* Toggle Switch */
.comp-switch {
  position: relative;
  inline-size: clamp(34px, 6.5cqw, 44px);
  block-size: clamp(18px, 3.5cqw, 24px);
  border-radius: 999px;
  background: rgb(240 196 90 / 0.2);
  border: 1px solid rgb(240 196 90 / 0.5);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.3);
  padding: 2px;
  box-sizing: border-box;
}

.comp-switch__knob {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: clamp(12px, 2.5cqw, 18px);
  block-size: clamp(12px, 2.5cqw, 18px);
  border-radius: 50%;
  background: #F0C45A;
  box-shadow: 0 0 8px #F0C45A;
  animation: comp-switch-shift 3.6s ease-in-out infinite;
}

@keyframes comp-switch-shift {
  0%, 15%, 100% {
    transform: translateX(0);
    background: #F0C45A;
    box-shadow: 0 0 8px #F0C45A;
  }
  50%, 65% {
    transform: translateX(calc(clamp(34px, 6.5cqw, 44px) - clamp(12px, 2.5cqw, 18px) - 6px));
    background: #50E3C2;
    box-shadow: 0 0 8px #50E3C2;
  }
}

/* Progress bar */
.comp-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.comp-progress-info {
  display: flex;
  justify-content: space-between;
  font-size: clamp(0.6rem, 1.6cqw, 0.76rem);
  color: rgb(255 255 255 / 0.7);
}

.comp-val {
  font-weight: 700;
  color: #F0C45A;
}

.comp-progress-bar {
  inline-size: 100%;
  block-size: clamp(6px, 1.2cqw, 8px);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  overflow: hidden;
  position: relative;
}

.comp-progress-fill {
  block-size: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #EE9F5C, #F0C45A);
  box-shadow: 0 0 8px rgb(240 196 90 / 0.6);
  animation: comp-bar-breathe 4s ease-in-out infinite;
}

@keyframes comp-bar-breathe {
  0%, 100% { inline-size: 76%; }
  50% { inline-size: 92%; }
}

.comp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(4px, 1cqw, 8px);
  margin-block-start: 2px;
}

.comp-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  font-size: clamp(0.55rem, 1.5cqw, 0.72rem);
  background: rgb(240 196 90 / 0.12);
  border: 1px solid rgb(240 196 90 / 0.28);
  color: #F0C45A;
}

.comp-tag svg {
  inline-size: clamp(10px, 1.8cqw, 13px);
  block-size: clamp(10px, 1.8cqw, 13px);
}

/* Action Card */
.comp-card--action {
  background: linear-gradient(135deg, rgb(30 28 20 / 0.85), rgb(18 20 27 / 0.85));
  border: 1px solid rgb(240 196 90 / 0.4);
  position: relative;
  overflow: hidden;
}

.comp-action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: clamp(0.65rem, 1.8cqw, 0.82rem);
  font-weight: 600;
  color: #fff;
}

.comp-card--action::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inline-size: 40%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.2), transparent);
  transform: skewX(-20deg) translateX(-150%);
  animation: comp-shimmer 3.2s ease-in-out infinite;
}

@keyframes comp-shimmer {
  0%, 20% { transform: skewX(-20deg) translateX(-150%); }
  60%, 100% { transform: skewX(-20deg) translateX(350%); }
}

/* Metric Card */
.comp-card--metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.comp-metric-top {
  display: flex;
  flex-direction: column;
}

.comp-metric-num {
  font-size: clamp(0.9rem, 2.8cqw, 1.35rem);
  font-weight: 800;
  color: #F0C45A;
  line-height: 1.1;
  text-shadow: 0 0 12px rgb(240 196 90 / 0.4);
}

.comp-metric-label {
  font-size: clamp(0.55rem, 1.5cqw, 0.72rem);
  color: rgb(255 255 255 / 0.65);
}

.comp-bars {
  display: flex;
  align-items: flex-end;
  gap: clamp(3px, 0.8cqw, 6px);
  block-size: clamp(24px, 4.5cqw, 34px);
}

.comp-bar {
  inline-size: clamp(5px, 1.1cqw, 8px);
  block-size: var(--h, 60%);
  border-radius: 999px;
  background: linear-gradient(180deg, #F0C45A, rgb(240 196 90 / 0.25));
  transform-origin: bottom;
  animation: comp-bar-wave 2.4s ease-in-out infinite alternate;
}

.comp-bar:nth-child(1) { animation-delay: 0s; }
.comp-bar:nth-child(2) { animation-delay: 0.3s; }
.comp-bar:nth-child(3) { animation-delay: 0.6s; }
.comp-bar:nth-child(4) { animation-delay: 0.15s; }

@keyframes comp-bar-wave {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1.05); }
}

/* ------------------------------------------------------------
   SCENE 2: ساخت کد تعالی (Clean Code - Orange)
   ------------------------------------------------------------ */
.anim-orb--code {
  inline-size: 55cqw;
  block-size: 55cqw;
  inset-block-end: -18%;
  inset-inline-start: 10%;
  background: radial-gradient(circle, #EE9F5C 0%, transparent 70%);
}

.anim-code-bracket {
  position: absolute;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: clamp(4.5rem, 14cqw, 9rem);
  font-weight: 300;
  line-height: 1;
  color: rgb(238 159 92 / 0.08);
  pointer-events: none;
  user-select: none;
}

.anim-code-bracket--left {
  inset-block-start: 2%;
  inset-inline-start: 2%;
  transform: rotate(-10deg);
}

.anim-code-bracket--right {
  inset-block-end: 2%;
  inset-inline-end: 2%;
  transform: rotate(10deg);
}

.code-window {
  position: relative;
  z-index: 1;
  inline-size: 94%;
  block-size: 88%;
  display: flex;
  flex-direction: column;
  background: rgb(13 17 23 / 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgb(238 159 92 / 0.32);
  border-radius: clamp(8px, 1.8cqw, 14px);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.6), 0 0 28px rgb(238 159 92 / 0.14);
  overflow: hidden;
}

.code-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(0.35rem, 1.2cqw, 0.6rem) clamp(0.6rem, 2cqw, 1rem);
  background: rgb(22 27 34 / 0.85);
  border-block-end: 1px solid rgb(255 255 255 / 0.08);
}

.code-traffic {
  display: flex;
  gap: clamp(4px, 1cqw, 7px);
}

.code-dot {
  inline-size: clamp(7px, 1.3cqw, 10px);
  block-size: clamp(7px, 1.3cqw, 10px);
  border-radius: 50%;
}
.code-dot--red { background: #ff5f56; }
.code-dot--yellow { background: #ffbd2e; }
.code-dot--green { background: #27c93f; }

.code-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: clamp(0.6rem, 1.6cqw, 0.78rem);
  color: rgb(255 255 255 / 0.9);
  padding: 0.2em 0.8em;
  background: rgb(13 17 23 / 0.9);
  border-radius: 6px;
  border: 1px solid rgb(255 255 255 / 0.1);
}

.code-tab__icon {
  inline-size: clamp(11px, 1.8cqw, 14px);
  block-size: clamp(11px, 1.8cqw, 14px);
  color: #3178c6;
}

.code-badge {
  font-size: clamp(0.5rem, 1.3cqw, 0.68rem);
  color: rgb(238 159 92 / 0.9);
  background: rgb(238 159 92 / 0.12);
  padding: 0.15em 0.6em;
  border-radius: 999px;
  border: 1px solid rgb(238 159 92 / 0.25);
}

.code-content {
  flex: 1;
  padding: clamp(0.5rem, 1.6cqw, 0.9rem) clamp(0.6rem, 2cqw, 1.1rem);
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(0.6rem, 1.65cqw, 0.86rem);
  line-height: 1.55;
  color: #e6edf3;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.code-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.code-line {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

.code-ln {
  display: inline-block;
  inline-size: clamp(1.4rem, 3.2cqw, 2rem);
  color: rgb(255 255 255 / 0.22);
  user-select: none;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.c-kw { color: #FF7B72; font-weight: 600; }
.c-fn { color: #D2A8FF; }
.c-var { color: #FFA657; }
.c-prop { color: #79C0FF; }
.c-str { color: #7EE787; }
.c-num { color: #F0C45A; }
.c-bool { color: #FF7B72; }

.c-cursor {
  display: inline-block;
  inline-size: 2px;
  block-size: 1.15em;
  background: #EE9F5C;
  box-shadow: 0 0 8px #EE9F5C;
  margin-inline-start: 2px;
  vertical-align: -2px;
  animation: code-cursor-flash 1.05s infinite;
}

@keyframes code-cursor-flash {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.code-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(0.3rem, 1cqw, 0.45rem) clamp(0.6rem, 2cqw, 1rem);
  background: rgb(22 27 34 / 0.95);
  border-block-start: 1px solid rgb(255 255 255 / 0.08);
  font-size: clamp(0.55rem, 1.4cqw, 0.72rem);
  color: rgb(255 255 255 / 0.75);
}

.code-status-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.code-check-icon {
  inline-size: clamp(11px, 1.6cqw, 13px);
  block-size: clamp(11px, 1.6cqw, 13px);
  color: #27c93f;
}

.code-status-dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: #27c93f;
  box-shadow: 0 0 6px #27c93f;
}

.code-status-item--end {
  color: rgb(238 159 92 / 0.9);
  font-weight: 500;
}

/* ------------------------------------------------------------
   SCENE 3: کاملاً واکنش‌گرا (Responsive - Rose)
   ------------------------------------------------------------ */
.anim-orb--resp {
  inline-size: 55cqw;
  block-size: 55cqw;
  inset-block-start: 5%;
  inset-inline-end: 10%;
  background: radial-gradient(circle, #E87598 0%, transparent 70%);
}

.resp-ruler {
  position: absolute;
  inset-block-start: clamp(8px, 2cqw, 14px);
  inset-inline: clamp(1.2rem, 5cqw, 3rem);
  background: rgb(20 22 30 / 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgb(232 117 152 / 0.28);
  border-radius: 999px;
  padding: clamp(3px, 0.8cqw, 5px) clamp(8px, 2cqw, 14px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
}

.resp-ruler__track {
  position: relative;
  inline-size: 100%;
  block-size: 3px;
  background: rgb(255 255 255 / 0.1);
  border-radius: 999px;
}

.resp-ruler__indicator {
  position: absolute;
  inset-block-start: -2px;
  inline-size: clamp(18px, 4cqw, 28px);
  block-size: 7px;
  border-radius: 999px;
  background: #E87598;
  box-shadow: 0 0 10px #E87598;
  animation: resp-ruler-glide 5s ease-in-out infinite alternate;
}

@keyframes resp-ruler-glide {
  0% { inset-inline-start: 5%; }
  50% { inset-inline-start: 48%; }
  100% { inset-inline-start: 86%; }
}

.resp-ruler__labels {
  display: flex;
  justify-content: space-between;
  font-size: clamp(0.5rem, 1.3cqw, 0.65rem);
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: rgb(255 255 255 / 0.6);
}

.resp-devices {
  position: relative;
  z-index: 1;
  inline-size: 92%;
  block-size: 70%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.4rem, 1.8cqw, 1.2rem);
  margin-block-start: clamp(1rem, 3cqw, 1.8rem);
}

.device-mockup {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease);
}

.device-frame {
  background: rgb(18 20 28 / 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgb(232 117 152 / 0.35);
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.55);
  overflow: hidden;
}

.device-mockup--desktop {
  inline-size: 48%;
  block-size: 85%;
  z-index: 1;
}

.device-mockup--desktop .device-frame {
  inline-size: 100%;
  block-size: calc(100% - clamp(8px, 1.8cqw, 14px));
  border-radius: clamp(6px, 1.3cqw, 10px);
  display: flex;
  flex-direction: column;
}

.device-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px clamp(5px, 1cqw, 8px);
  background: rgb(26 28 38 / 0.95);
  border-block-end: 1px solid rgb(255 255 255 / 0.08);
}

.device-dot {
  inline-size: clamp(4px, 0.9cqw, 6px);
  block-size: clamp(4px, 0.9cqw, 6px);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.25);
}

.device-url {
  font-size: clamp(0.45rem, 1.2cqw, 0.62rem);
  font-family: ui-monospace, monospace;
  color: rgb(255 255 255 / 0.6);
  background: rgb(0 0 0 / 0.3);
  padding: 1px 8px;
  border-radius: 4px;
  margin-inline-start: 4px;
}

.device-stand {
  align-self: center;
  inline-size: 24%;
  block-size: clamp(6px, 1.5cqw, 10px);
  background: linear-gradient(180deg, rgb(40 42 55 / 0.9), rgb(20 22 30 / 0.9));
  border-radius: 0 0 4px 4px;
  border: 1px solid rgb(232 117 152 / 0.2);
  border-block-start: none;
}

.device-mockup--tablet {
  inline-size: 28%;
  block-size: 72%;
  z-index: 2;
  margin-inline-end: -2%;
}

.device-mockup--tablet .device-frame {
  inline-size: 100%;
  block-size: 100%;
  border-radius: clamp(7px, 1.4cqw, 11px);
  padding: clamp(3px, 0.8cqw, 5px);
  box-sizing: border-box;
}

.device-mockup--mobile {
  inline-size: 17%;
  block-size: 60%;
  z-index: 3;
  margin-inline-start: -2%;
}

.device-mockup--mobile .device-frame {
  inline-size: 100%;
  block-size: 100%;
  border-radius: clamp(9px, 1.8cqw, 13px);
  border-color: rgb(232 117 152 / 0.5);
  display: flex;
  flex-direction: column;
  padding: clamp(2px, 0.6cqw, 4px);
  box-sizing: border-box;
}

.device-notch {
  align-self: center;
  inline-size: 32%;
  block-size: 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.35);
  margin-block-end: 3px;
}

.device-screen {
  flex: 1;
  background: rgb(12 14 20 / 0.95);
  border-radius: 4px;
  overflow: hidden;
  padding: clamp(3px, 0.8cqw, 6px);
  box-sizing: border-box;
}

.mock-layout {
  inline-size: 100%;
  block-size: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.8cqw, 5px);
}

.mock-nav {
  inline-size: 100%;
  block-size: clamp(4px, 1cqw, 7px);
  border-radius: 2px;
  background: rgb(232 117 152 / 0.25);
}

.mock-hero {
  inline-size: 100%;
  block-size: clamp(10px, 2.4cqw, 18px);
  border-radius: 3px;
  background: linear-gradient(90deg, rgb(232 117 152 / 0.35), rgb(240 196 90 / 0.2));
  animation: mock-shimmer 3s ease-in-out infinite alternate;
}

.mock-grid {
  flex: 1;
  display: grid;
  gap: clamp(2px, 0.6cqw, 4px);
}

.mock-grid--3col { grid-template-columns: repeat(3, 1fr); }
.mock-grid--2col { grid-template-columns: repeat(2, 1fr); }
.mock-grid--1col { grid-template-columns: 1fr; }

.mock-card {
  border-radius: 2px;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(232 117 152 / 0.18);
  animation: mock-shimmer 3.2s ease-in-out infinite alternate;
}

@keyframes mock-shimmer {
  0% { opacity: 0.45; }
  100% { opacity: 0.9; }
}

.resp-floating-badge {
  position: absolute;
  inset-block-end: clamp(6px, 1.8cqw, 12px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.28em 0.85em;
  border-radius: 999px;
  background: rgb(20 22 30 / 0.9);
  border: 1px solid rgb(232 117 152 / 0.45);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.4);
  font-size: clamp(0.55rem, 1.4cqw, 0.75rem);
  font-weight: 500;
  color: #fff;
  z-index: 4;
}

.resp-floating-badge svg {
  inline-size: clamp(11px, 1.8cqw, 14px);
  block-size: clamp(11px, 1.8cqw, 14px);
  color: #E87598;
}

/* ------------------------------------------------------------
   SCENE 4: سرعت و بهینگی (Speed & Performance - Violet)
   ------------------------------------------------------------ */
.anim-orb--speed {
  inline-size: 60cqw;
  block-size: 60cqw;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #C778E0 0%, transparent 68%);
}

.speed-trails {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.speed-trail {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 70%;
  block-size: 2px;
  background: linear-gradient(90deg, #C778E0, transparent);
  transform-origin: left center;
}

.speed-trail--1 { --r: 35deg; animation: speed-trail-zoom 2.4s ease-out infinite; }
.speed-trail--2 { --r: 145deg; animation: speed-trail-zoom 2.4s ease-out 0.6s infinite; }
.speed-trail--3 { --r: 215deg; animation: speed-trail-zoom 2.4s ease-out 1.2s infinite; }
.speed-trail--4 { --r: 325deg; animation: speed-trail-zoom 2.4s ease-out 1.8s infinite; }

@keyframes speed-trail-zoom {
  0% { opacity: 0; transform: rotate(var(--r, 35deg)) scaleX(0.1); }
  50% { opacity: 0.7; }
  100% { opacity: 0; transform: rotate(var(--r, 35deg)) scaleX(1.3); }
}

.speed-stage {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: clamp(0.6rem, 2.5cqw, 1.5rem);
}

.speed-gauge {
  position: relative;
  inline-size: clamp(130px, 28cqw, 190px);
  block-size: clamp(130px, 28cqw, 190px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.speed-gauge__svg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  transform: rotate(135deg);
}

.speed-gauge__track {
  fill: none;
  stroke: rgb(255 255 255 / 0.09);
  stroke-width: 14;
  stroke-dasharray: 502;
  stroke-dashoffset: 125;
}

.speed-gauge__fill {
  fill: none;
  stroke: url(#speedGrad);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 502;
  stroke-dashoffset: 135;
  filter: drop-shadow(0 0 10px #C778E0);
  animation: speed-gauge-pulse 3.8s ease-in-out infinite alternate;
}

@keyframes speed-gauge-pulse {
  0% { stroke-dashoffset: 145; }
  100% { stroke-dashoffset: 128; }
}

.speed-gauge__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.speed-gauge__val {
  font-size: clamp(1.8rem, 5.5cqw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #fff 30%, #C778E0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgb(199 120 224 / 0.4);
}

.speed-gauge__unit {
  font-size: clamp(0.55rem, 1.4cqw, 0.72rem);
  color: rgb(255 255 255 / 0.7);
  margin-block: 2px 4px;
}

.speed-gauge__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  background: rgb(199 120 224 / 0.18);
  border: 1px solid rgb(199 120 224 / 0.4);
  color: #50E3C2;
  font-size: clamp(0.5rem, 1.2cqw, 0.65rem);
  font-weight: 600;
}

.speed-gauge__badge svg {
  inline-size: 10px;
  block-size: 10px;
}

.speed-gauge__needle {
  position: absolute;
  inline-size: 3px;
  block-size: 38%;
  background: linear-gradient(to top, #50E3C2, #fff);
  box-shadow: 0 0 10px #50E3C2;
  border-radius: 999px;
  transform-origin: center bottom;
  inset-block-start: 12%;
  transform: rotate(115deg);
  animation: speed-needle-quiver 2.2s ease-in-out infinite alternate;
}

@keyframes speed-needle-quiver {
  0% { transform: rotate(110deg); }
  50% { transform: rotate(124deg); }
  100% { transform: rotate(118deg); }
}

.speed-metrics {
  display: flex;
  flex-direction: column;
  gap: clamp(0.45rem, 1.6cqw, 0.85rem);
  inline-size: 100%;
  max-inline-size: clamp(160px, 32cqw, 240px);
}

.speed-card {
  background: rgb(20 22 32 / 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgb(199 120 224 / 0.25);
  border-radius: clamp(6px, 1.4cqw, 10px);
  padding: clamp(0.4rem, 1.4cqw, 0.75rem);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.4);
}

.speed-card__header {
  display: flex;
  align-items: center;
  gap: 4px;
}

.speed-card__icon {
  font-size: clamp(0.7rem, 1.8cqw, 0.95rem);
}

.speed-card__label {
  font-size: clamp(0.55rem, 1.4cqw, 0.72rem);
  color: rgb(255 255 255 / 0.7);
}

.speed-card__val {
  font-size: clamp(0.85rem, 2.2cqw, 1.15rem);
  font-weight: 700;
  color: #50E3C2;
  text-shadow: 0 0 10px rgb(80 227 194 / 0.4);
}

.speed-card__badge {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: clamp(0.5rem, 1.2cqw, 0.65rem);
  padding: 0.2em 0.6em;
  border-radius: 999px;
  background: rgb(80 227 194 / 0.15);
  border: 1px solid rgb(80 227 194 / 0.35);
  color: #50E3C2;
  font-weight: 600;
}

/* ------------------------------------------------------------
   SCENE 5: پشتیبانی و به‌روزرسانی (Support & Updates - Indigo)
   ------------------------------------------------------------ */
.anim-orb--supp {
  inline-size: 55cqw;
  block-size: 55cqw;
  inset-block-start: -10%;
  inset-inline-start: 25%;
  background: radial-gradient(circle, #8E7BF2 0%, transparent 70%);
}

.radar-center {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: clamp(120px, 25cqw, 200px);
  block-size: clamp(120px, 25cqw, 200px);
  pointer-events: none;
}

.radar-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgb(142 123 242 / 0.4);
  animation: radar-expand 4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

.radar-ring--1 { animation-delay: 0s; }
.radar-ring--2 { animation-delay: 1.3s; }
.radar-ring--3 { animation-delay: 2.6s; }

@keyframes radar-expand {
  0% { transform: scale(0.2); opacity: 0.9; border-color: rgb(142 123 242 / 0.7); }
  100% { transform: scale(2.2); opacity: 0; border-color: rgb(142 123 242 / 0); }
}

.radar-pulse-dot {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: #8E7BF2;
  box-shadow: 0 0 16px #8E7BF2;
}

.supp-cards {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(0.6rem, 2.2cqw, 1.3rem);
  align-items: center;
}

.supp-card {
  background: rgb(20 22 34 / 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgb(142 123 242 / 0.28);
  border-radius: clamp(8px, 1.8cqw, 14px);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
  padding: clamp(0.6rem, 2cqw, 1.2rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 1.4cqw, 0.8rem);
}

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

.supp-chat__avatar {
  position: relative;
  inline-size: clamp(28px, 5.5cqw, 38px);
  block-size: clamp(28px, 5.5cqw, 38px);
  border-radius: 50%;
  background: linear-gradient(135deg, #8E7BF2, #C778E0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(0.75rem, 2cqw, 1rem);
  color: #fff;
  box-shadow: 0 0 12px rgb(142 123 242 / 0.5);
}

.supp-chat__status {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: clamp(8px, 1.6cqw, 11px);
  block-size: clamp(8px, 1.6cqw, 11px);
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid rgb(20 22 34);
  box-shadow: 0 0 8px #22c55e;
}

.supp-chat__meta {
  display: flex;
  flex-direction: column;
}

.supp-chat__name {
  font-size: clamp(0.65rem, 1.8cqw, 0.85rem);
  font-weight: 600;
  color: #fff;
}

.supp-chat__online {
  font-size: clamp(0.5rem, 1.3cqw, 0.68rem);
  color: #22c55e;
}

.supp-chat__bubble {
  background: rgb(142 123 242 / 0.15);
  border: 1px solid rgb(142 123 242 / 0.35);
  border-radius: clamp(6px, 1.4cqw, 10px) clamp(6px, 1.4cqw, 10px) 0 clamp(6px, 1.4cqw, 10px);
  padding: clamp(0.4rem, 1.4cqw, 0.75rem);
  font-size: clamp(0.55rem, 1.5cqw, 0.74rem);
  line-height: 1.45;
  color: rgb(255 255 255 / 0.95);
}

.supp-chat__typing {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(0.5rem, 1.3cqw, 0.68rem);
  color: rgb(255 255 255 / 0.6);
}

.typing-dots {
  display: inline-flex;
  gap: 3px;
}

.typing-dots span {
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: #8E7BF2;
  animation: typing-bounce 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

.supp-card--sync {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(0.6rem, 2cqw, 1rem);
  background: linear-gradient(135deg, rgb(28 30 48 / 0.85), rgb(18 20 32 / 0.85));
}

.supp-sync__icon-wrap {
  inline-size: clamp(34px, 6.5cqw, 48px);
  block-size: clamp(34px, 6.5cqw, 48px);
  border-radius: 50%;
  background: rgb(142 123 242 / 0.2);
  border: 1px solid rgb(142 123 242 / 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgb(142 123 242 / 0.35);
}

.supp-sync__icon {
  inline-size: clamp(16px, 3.2cqw, 24px);
  block-size: clamp(16px, 3.2cqw, 24px);
  color: #8E7BF2;
  animation: supp-sync-rotate 6s linear infinite;
}

@keyframes supp-sync-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.supp-sync__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.supp-sync__tag {
  font-size: clamp(0.5rem, 1.2cqw, 0.65rem);
  color: rgb(255 255 255 / 0.6);
}

.supp-sync__version {
  font-size: clamp(0.75rem, 2cqw, 0.95rem);
  font-weight: 700;
  color: #fff;
}

.supp-sync__status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(0.55rem, 1.4cqw, 0.72rem);
  color: #50E3C2;
}

.supp-sync__status svg {
  inline-size: 12px;
  block-size: 12px;
}

/* ------------------------------------------------------------
   WITHOUT SCRIPT / REDUCED MOTION
   ------------------------------------------------------------ */
:root:not(.js) .stg__act { --near: 1; }
:root:not(.js) .stg__desc { max-block-size: none; opacity: 1; padding-block-start: var(--sp-2xs); }
:root:not(.js) .stg__stage { display: none; }

@media (prefers-reduced-motion: reduce) {
  .stg__act { --near: 1; }
  .stg__desc { max-block-size: none; opacity: 1; padding-block-start: var(--sp-2xs); }
  .stg__act.is-live .stg__icon svg :is(path, rect, circle) { animation: none; }
  .stg__device, .stg__shot { transition-duration: 1ms; }
  .stg__device.is-landing { animation: none; }
  .stg__shot { transform: none; }
  .stg__anim * { animation: none !important; transition: none !important; }
}

@media (max-width: 620px) {
  .stg__stage::before { inset: -10% -6%; filter: blur(34px); }
  .stg__act { gap: var(--sp-xs); }
}