/* ============================================================================
   رِماية — hero «the product, live»
   ----------------------------------------------------------------------------
   Two columns inside the same container as the page: the copy on the start
   (right) side, and the product on the other — a phone running a storefront of
   «متجرك» with the Rimaya pocket open as a bottom sheet, plus exactly one
   floating merchant card.

   Brand: «Midnight Velvet». Tokens come from landing.css :root — near-black
   base, electric #5C17FD and violet #BB50F8 used as LIGHT (glows, hairlines,
   gradients), never as large flat fills. The product mock is LIGHT UI: a
   #f4f3f8 storefront, white cards, ink #1b1530 / #6b6680, and the widget accent
   is the store's own teal (#024e5c) because the pocket inherits the store theme.

   Every length inside the phone is `calc(N * var(--u))` with `--u` one design
   pixel at a 300px-wide phone, so the whole mock scales as one drawing at every
   breakpoint instead of reflowing.

   Motion: transform / opacity / filter only. The story is driven by one
   attribute (`data-st` 0→3), it is pausable (WCAG 2.2.2), and with JS off or
   under `prefers-reduced-motion` the mock shows its finished 3/3 frame.
   ========================================================================== */

/* --------------------------------------------------------------- the hero --- */
.hx {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 100vh; /* fallback */
  min-height: min(100svh, 920px);
  /* the top pad clears the fixed floating header (64–78px) plus air, so the
     phone's top can never touch the capsule */
  padding-block: clamp(104px, 13vh, 146px) clamp(44px, 5vw, 68px);
  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  overflow: clip;
  isolation: isolate;
}

/* ------------------------------------------------------------ background ---- */
.hx-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hx-aurora {
  position: absolute;
  inset: -14% -10% auto -10%;
  block-size: 118%;
}

.hx-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  will-change: transform;
}

/* Three atmospheres: deep (the velvet), electric, violet. Low alpha — they
   tint the black, they never become a colour field. */
.hx-blob--a {
  inset-block-start: -12%;
  inset-inline-end: -6%;
  inline-size: min(54vw, 760px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(58, 26, 110, 0.85), rgba(51, 23, 97, 0) 68%);
  animation: hx-drift-a 26s ease-in-out infinite alternate;
}

.hx-blob--b {
  inset-block-end: -22%;
  inset-inline-start: -12%;
  inline-size: min(46vw, 640px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(92, 23, 253, 0.38), rgba(92, 23, 253, 0) 70%);
  animation: hx-drift-b 31s ease-in-out infinite alternate;
}

.hx-blob--c {
  inset-block-start: 24%;
  inset-inline-start: 26%;
  inline-size: min(36vw, 500px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(187, 80, 248, 0.26), rgba(187, 80, 248, 0) 72%);
  animation: hx-drift-c 21s ease-in-out infinite alternate;
}

/* The grid floor: hairlines only, laid down flat and rotated away from the
   viewer, masked so it dissolves at the edges and toward the horizon. */
.hx-floor {
  position: absolute;
  inset-inline: -24%;
  inset-block-end: -6%;
  block-size: 74%;
  background-image:
    linear-gradient(to right, rgba(187, 80, 248, 0.26) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(92, 23, 253, 0.3) 1px, transparent 1px);
  background-size: 68px 68px;
  transform: perspective(520px) rotateX(66deg) scale(1.16);
  transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(120% 82% at 50% 100%, #000 0%, rgba(0, 0, 0, 0.5) 46%, transparent 76%);
  mask-image: radial-gradient(120% 82% at 50% 100%, #000 0%, rgba(0, 0, 0, 0.5) 46%, transparent 76%);
}

/* Pointer spotlight — desktop, fine pointer only. It is moved by transform, and
   the coordinates arrive from JS as *physical* px from the hero's top-left, so
   this one element is placed with physical top/left on purpose (a logical
   inset-inline-start would anchor it to the right edge in RTL). */
.hx-spot {
  position: absolute;
  top: 0;
  left: 0;
  inline-size: 640px;
  block-size: 640px;
  margin: -320px 0 0 -320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(187, 80, 248, 0.18), rgba(92, 23, 253, 0.085) 42%, transparent 70%);
  opacity: 0;
  transform: translate3d(var(--mx, 50%), var(--my, 30%), 0);
  transition: opacity 0.55s var(--ease);
  will-change: transform;
}

.hx.is-pointer .hx-spot {
  opacity: 1;
}

/* Bottom fade so the next section joins with no seam. */
.hx-fade {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: clamp(120px, 16vh, 190px);
  background: linear-gradient(to bottom, rgba(14, 11, 20, 0), var(--ink-1) 84%);
}

/* ------------------------------------------------------------- the layout --- */
/* The container reproduces `.wrap` (same min() of the same tokens) and then pads
   itself only when the floating capsule is narrower than that wrap, so the
   hero's copy edge and every section edge are the same vertical line. The
   capsule is `min(1220px, 100% - 32px)` — the same 1220 the sections use — so on
   desktop the padding is 0; on the narrow mobile geometry the capsule follows
   `100% - 44px`, which is `.wrap` too.
   Longhand: padding = max(0, (wrap − capsule) / 2). */
.hx-in {
  --hx-wrap: min(100% - (var(--gutter) * 2), var(--wrap));
  --hx-capsule: min(1220px, 100% - 32px);
  width: var(--hx-wrap);
  margin-inline: auto;
  padding-inline: max(0px, calc((var(--hx-wrap) - var(--hx-capsule)) / 2));
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 3.2vw, 44px);
}

.hx-copy {
  min-inline-size: 0;
}

.hx-visual {
  position: relative;
  min-inline-size: 0;
}

/* ------------------------------------------------------------------ copy --- */
.hx-title {
  margin-block-start: 0;
  font-size: clamp(40px, 4.5vw, 66px);
  font-weight: 700;
  /* Arabic needs air: the shadda in «سلّته» over the tall ك of «تكبر.» is the
     worst case, and 1.35 clears it at every width measured (1440/1024/390/320). */
  line-height: 1.35;
  letter-spacing: 0; /* Arabic: air comes from the line-height, not tracking */
  color: var(--white);
  text-wrap: balance;
}

/* each phrase is its own block, and balances within itself. `balance` alone
   still chose «عروضك» / «أمام عميلك.» on a 320px screen — the two splits are
   within 7px of each other — so the first two words are glued into a nowrap
   group and the phrase can only break after «أمام». */
.hx-ln {
  display: block;
  text-wrap: balance;
}

.hx-keep {
  white-space: nowrap;
}

.hx-w {
  display: inline-block;
}

.hx-w--em em {
  font-style: normal;
  background-image: linear-gradient(
    100deg,
    #8a5cff 0%,
    var(--violet) 28%,
    #f3e6ff 48%,
    #ffffff 52%,
    #f3e6ff 56%,
    var(--violet) 72%,
    #8a5cff 100%
  );
  background-size: 300% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--violet); /* fallback if background-clip:text is unsupported */
  animation: hx-shimmer 6s linear infinite;
}

.hx-sub {
  margin-block-start: clamp(16px, 1.8vw, 24px);
  max-inline-size: 34ch;
  font-size: clamp(18px, 1.32vw, 20px);
  line-height: 1.85;
  color: var(--text);
}

.hx-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block-start: clamp(26px, 3.2vw, 38px);
}

.hx-cta {
  /* landing.js writes --mag-x/--mag-y on [data-magnet]; the pill has to consume
     them itself or the magnet does nothing */
  --mag-x: 0px;
  --mag-y: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-block-size: 58px;
  padding-inline: clamp(22px, 2.4vw, 32px);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 500;
  line-height: 1;
  transform: translate3d(var(--mag-x), var(--mag-y), 0);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}

.hx-cta__ico {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
}

/* the primary CTA's «go» affordance: a clean Hugeicons-style arrow-up-left
   (45°, forwards in RTL) centred in a 28px disc at the pill's inline end */
.hx-cta__go {
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: background-color 0.35s var(--ease);
}

.hx-cta__go .hx-cta__ico {
  transition: transform 0.35s var(--ease);
}

.hx-cta--p:hover .hx-cta__go,
.hx-cta--p:focus-visible .hx-cta__go {
  background: rgba(255, 255, 255, 0.26);
}

.hx-cta--p:hover .hx-cta__ico,
.hx-cta--p:focus-visible .hx-cta__ico {
  transform: translate(-2px, -2px);
}

/* secondary: the play-in-circle, sized on a 20px box */
.hx-cta__play {
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  flex: none;
}

/* primary: electric→violet body, 1px top highlight, light sweep on hover */
.hx-cta--p {
  overflow: hidden;
  color: var(--white);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 54%),
    linear-gradient(135deg, var(--electric), #7a2bff 54%, var(--violet));
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.34) inset,
    0 22px 48px -22px rgba(92, 23, 253, 0.95),
    0 0 0 1px rgba(187, 80, 248, 0.36);
}

.hx-cta--p::after {
  content: "";
  position: absolute;
  inset-block: -40%;
  inset-inline-start: -50%;
  inline-size: 46%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(0) skewX(-16deg);
  transition: transform 0.8s var(--ease);
  pointer-events: none;
}

.hx-cta--p:hover::after,
.hx-cta--p:focus-visible::after {
  transform: translateX(-420%) skewX(-16deg);
}

.hx-cta--p:hover,
.hx-cta--p:focus-visible {
  transform: translate3d(var(--mag-x), calc(var(--mag-y) - 2px), 0);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.4) inset,
    0 30px 64px -22px rgba(92, 23, 253, 1),
    0 0 0 1px rgba(187, 80, 248, 0.6);
}

/* secondary: glass pill with a play-in-circle */
.hx-cta--s {
  color: var(--text);
  border-color: var(--hair-2);
  background: var(--glass);
  backdrop-filter: blur(12px);
}

.hx-cta--s .hx-cta__ico {
  color: var(--violet);
}

.hx-cta--s:hover,
.hx-cta--s:focus-visible {
  color: var(--white);
  border-color: rgba(187, 80, 248, 0.5);
  background: rgba(187, 80, 248, 0.1);
  transform: translate3d(var(--mag-x), calc(var(--mag-y) - 2px), 0);
}

.hx-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-block-start: clamp(20px, 2.6vw, 30px);
  font-size: clamp(13px, 1vw, 14.5px);
  line-height: 1.6;
  color: var(--text-2);
}

.hx-facts li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hx-facts svg {
  inline-size: 15px;
  block-size: 15px;
  flex: none;
  color: var(--violet);
}

/* Mobile entry point for راكان: the floating character is deliberately tucked
   while the hero is on screen, so the hero itself carries one labelled door. */
.hx-voice {
  display: none;
  align-items: center;
  gap: 9px;
  inline-size: fit-content;
  min-block-size: 44px;
  margin-block-start: 14px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--text);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.hx-voice__ico {
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  background: rgba(187, 80, 248, 0.14);
  color: var(--violet);
}

.hx-voice__ico svg {
  inline-size: 15px;
  block-size: 15px;
}

.hx-voice:hover,
.hx-voice:focus-visible {
  color: var(--white);
  border-color: rgba(187, 80, 248, 0.5);
}

/* ============================================================================
   The visual column
   ----------------------------------------------------------------------------
   `.hx-device` is the phone's own box and stays centred in its column; at
   ≥1024 it is nudged 56px toward the copy, which is what leaves the merchant
   card its ≥32px of air from the `.wrap` edge (the card hangs 84px off the
   phone's outer side). The card is hidden below 1024, where the nudging goes
   away with it.
   ========================================================================== */
.hx-stage {
  position: relative;
  inline-size: 100%;
}

.hx-device {
  --hx-shift: 0px;
  --hx-w: clamp(272px, 22vw, 300px);
  /* one design pixel at a 300px-wide phone: every length inside the mock is
     `calc(N * var(--u))`, so the whole drawing scales as one piece */
  --u: calc(var(--hx-w) / 300);
  position: relative;
  inline-size: var(--hx-w);
  margin-inline: auto;
  translate: var(--hx-shift);
  z-index: 1;
}

/* exactly the phone's box — the positioning context for the glow, the floor
   pool and the merchant card */
.hx-frame {
  position: relative;
  inline-size: var(--hx-w);
}

/* the violet atmosphere the phone sits in, and the pool of light under it */
.hx-aura {
  position: absolute;
  inset-inline: -18%;
  inset-block-start: 10%;
  block-size: 68%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(92, 23, 253, 0.42), rgba(187, 80, 248, 0.14) 52%, transparent 74%);
  filter: blur(34px);
  z-index: 0;
}

.hx-pool {
  position: absolute;
  inset-inline: -8%;
  inset-block-end: -12px;
  block-size: 52px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(122, 43, 255, 0.5), rgba(187, 80, 248, 0.12) 55%, transparent 76%);
  filter: blur(13px);
  transform: scaleY(0.52);
  z-index: 0;
}

/* ---------------------------------------------------------------- phone ----- */
.hx-phone {
  /* the storefront mock's own palette (light UI, per the shared rules) */
  --mock-canvas: #f4f3f8;
  --mock-card: #ffffff;
  --mock-line: #ece9f5;
  --mock-ink: #1b1530;
  --mock-ink-2: #6b6680;
  --mock-teal: #024e5c;
  --mock-teal-soft: #eef3f4;
  position: relative;
  z-index: 2;
  inline-size: var(--hx-w);
  aspect-ratio: 300 / 620;
  /* the thin bezel and its metallic rim */
  padding: calc(10 * var(--u));
  border-radius: calc(46 * var(--u));
  background:
    linear-gradient(
      152deg,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0.05) 19%,
      rgba(255, 255, 255, 0.02) 52%,
      rgba(255, 255, 255, 0.12) 80%,
      rgba(255, 255, 255, 0.3)
    ),
    linear-gradient(180deg, #1c1626, #0a0810 48%, #141020);
  box-shadow:
    0 40px 90px -44px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 70px -16px rgba(92, 23, 253, 0.55);
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

.hx-island {
  position: absolute;
  top: calc(9 * var(--u));
  left: 50%;
  inline-size: calc(74 * var(--u));
  block-size: calc(22 * var(--u));
  transform: translateX(-50%);
  border-radius: 999px;
  background: #05040a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
  z-index: 3;
}

.hx-screen {
  position: absolute;
  inset: calc(10 * var(--u));
  border-radius: calc(36 * var(--u));
  overflow: hidden;
  background: var(--mock-canvas);
}

/* ----------------------------------------------------------- storefront ----- */
.hx-store {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-inline: calc(12 * var(--u));
  background: var(--mock-canvas);
}

/* the phone's status bar: time on the left, radios on the right, the island
   floating over the middle */
.hx-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: calc(30 * var(--u));
  direction: ltr;
  color: var(--mock-ink);
}

.hx-status__t {
  font-size: calc(12 * var(--u));
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hx-status__ic {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
}

.hx-status__ic svg {
  inline-size: calc(15 * var(--u));
  block-size: calc(11 * var(--u));
}

.hx-status__ic svg:last-child {
  inline-size: calc(20 * var(--u));
}

/* the store's top bar: monogram, name, cart */
.hx-bar {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  block-size: calc(40 * var(--u));
}

.hx-mark {
  display: grid;
  place-items: center;
  inline-size: calc(32 * var(--u));
  block-size: calc(32 * var(--u));
  flex: none;
  border-radius: 50%;
  background: var(--mock-teal);
  color: #fff;
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: 1;
}

.hx-bar__n {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: 1.4;
  color: var(--mock-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hx-minicart {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--mock-ink);
}

.hx-minicart svg {
  inline-size: calc(21 * var(--u));
  block-size: calc(21 * var(--u));
}

.hx-minicart__n {
  position: absolute;
  top: calc(-5 * var(--u));
  left: calc(-6 * var(--u));
  display: grid;
  place-items: center;
  min-inline-size: calc(18 * var(--u));
  block-size: calc(18 * var(--u));
  padding-inline: calc(4 * var(--u));
  border-radius: 999px;
  background: var(--mock-teal);
  color: #fff;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--mock-canvas);
}

/* a store with an empty cart shows no badge (the real storefront hides it) */
.hx .hx-phone[data-st="0"] .hx-minicart__n {
  opacity: 0;
}

.hx-search {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  block-size: calc(34 * var(--u));
  margin-block-start: calc(8 * var(--u));
  padding-inline: calc(11 * var(--u));
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--mock-line);
  color: var(--mock-ink-2);
}

.hx-search svg {
  inline-size: calc(15 * var(--u));
  block-size: calc(15 * var(--u));
  flex: none;
}

.hx-search span {
  font-size: calc(12.5 * var(--u));
  line-height: 1;
}

/* the four products, 2 × 2 */
.hx-prods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(8 * var(--u));
  margin-block-start: calc(8 * var(--u));
}

.hx-p {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: calc(7 * var(--u));
  padding: calc(6 * var(--u));
  overflow: hidden;
  border-radius: calc(14 * var(--u));
  background: var(--mock-card);
  box-shadow: inset 0 0 0 1px var(--mock-line);
  color: var(--mock-teal);
}

.hx-p img {
  grid-row: 1 / 3;
  inline-size: calc(52 * var(--u));
  block-size: calc(52 * var(--u));
  border-radius: calc(10 * var(--u));
  background: #efecf6;
  object-fit: cover;
}

.hx-p__t,
.hx-p__p {
  line-height: 1.3;
}

/* the name may take two lines rather than trail off: the image already sets the
   card's height, so the text never has to be clipped */
.hx-p__t {
  display: -webkit-box;
  align-self: end;
  overflow: hidden;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  color: var(--mock-ink);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hx-p__p {
  align-self: start;
  overflow: hidden;
  font-size: calc(13 * var(--u));
  font-weight: 600;
  color: var(--mock-teal);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* the tap that lands on a card, one beat at a time */
.hx-p__rip {
  position: absolute;
  top: 50%;
  left: 50%;
  inline-size: 2px;
  block-size: 2px;
  margin: -1px 0 0 -1px;
  border-radius: 50%;
  background: rgba(2, 78, 92, 0.5);
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------- the pocket: bottom sheet - */
.hx-sheet {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  block-size: 55%;
  padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
  border-start-start-radius: calc(24 * var(--u));
  border-start-end-radius: calc(24 * var(--u));
  background: #fff;
  color: var(--mock-ink);
  box-shadow: 0 calc(-14 * var(--u)) calc(34 * var(--u)) calc(-14 * var(--u)) rgba(20, 12, 48, 0.34);
}

.hx-grab {
  align-self: center;
  inline-size: calc(42 * var(--u));
  block-size: calc(4 * var(--u));
  border-radius: 999px;
  background: #d8d5e2;
}

.hx-sheet__t {
  font-size: calc(15.5 * var(--u));
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

.hx-goal {
  font-size: calc(13 * var(--u));
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  color: var(--mock-ink-2);
}

.hx-goal b {
  font-weight: 700;
  color: var(--mock-ink);
}

/* the slots: a dashed ring with «+» while the piece is missing, then the
   product inside a 2px accent ring with a check badge. `--on` is 0 or 1. */
.hx-slots {
  display: flex;
  justify-content: center;
  gap: calc(10 * var(--u));
}

.hx-slot {
  --on: 1;
  position: relative;
  isolation: isolate;
  inline-size: calc(46 * var(--u));
  block-size: calc(46 * var(--u));
  border: calc(1.5 * var(--u)) dashed rgba(27, 21, 48, 0.18);
  border-radius: 50%;
  background: #f5f4f9;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

.hx-slot__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border-radius: 50%;
  background: #efecf6;
  object-fit: cover;
  opacity: var(--on);
  transform: scale(calc(0.6 + 0.4 * var(--on)));
  transition:
    opacity 0.28s var(--ease) 0.14s,
    transform 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) 0.14s;
}

.hx-slot__plus {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(19 * var(--u));
  line-height: 1;
  color: #9b98a6;
  opacity: calc(1 - var(--on));
  transition: opacity 0.3s var(--ease);
}

.hx-slot__tick {
  position: absolute;
  z-index: 1;
  inset-block-end: calc(-1 * var(--u));
  inset-inline-end: calc(-1 * var(--u));
  display: grid;
  place-items: center;
  inline-size: calc(19 * var(--u));
  block-size: calc(19 * var(--u));
  border-radius: 50%;
  background: var(--mock-teal);
  color: #fff;
  box-shadow: 0 0 0 calc(2 * var(--u)) #fff;
  opacity: var(--on);
  transform: scale(var(--on));
  transition:
    opacity 0.25s var(--ease),
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hx-slot__tick svg {
  inline-size: calc(11 * var(--u));
  block-size: calc(11 * var(--u));
}

/* «الخطوة التالية» and the CTA live in one soft box */
.hx-plan {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(10 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--mock-teal-soft);
}

.hx-plan__ico {
  display: grid;
  place-items: center;
  inline-size: calc(34 * var(--u));
  block-size: calc(34 * var(--u));
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mock-teal) 12%, #fff);
  color: var(--mock-teal);
}

.hx-plan__ico svg {
  inline-size: calc(18 * var(--u));
  block-size: calc(18 * var(--u));
}

.hx-plan__txt {
  display: flex;
  flex-direction: column;
  /* fills the box so the icon is pushed to the far end (the real widget's
     layout), instead of sitting next to the text */
  flex: 1 1 auto;
  min-inline-size: 0;
}

.hx-plan__k {
  font-size: calc(12 * var(--u));
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mock-ink-2);
}

.hx-plan__txt b {
  overflow: hidden;
  font-size: calc(13.5 * var(--u));
  font-weight: 700;
  line-height: 1.5;
  color: var(--mock-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hx-sheet__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  block-size: calc(42 * var(--u));
  border-radius: 999px;
  background: var(--mock-teal);
  color: #fff;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: 1;
}

.hx-sheet__chev {
  inline-size: calc(16 * var(--u));
  block-size: calc(16 * var(--u));
  flex: none;
}

/* confetti: 12 particles, one keyframe, per-particle angle + reach, from the
   sheet's own top edge so it tracks the layout at every size. */
.hx-burst {
  position: absolute;
  top: 0;
  left: 50%;
  inline-size: 0;
  block-size: 0;
  z-index: 6;
  pointer-events: none;
}

.hx-burst span {
  position: absolute;
  top: 0;
  left: 0;
  inline-size: 6px;
  block-size: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 2px;
  opacity: 0;
  background: var(--violet);
}

/* --------------------------------------------------- the merchant card ------ */
/* One card, light, hanging ~40px over the phone's outer (left) side at ~35% of
   its height. Physical `right` on purpose: a logical inset would put it on the
   wrong side in RTL. */
.hx-card {
  position: absolute;
  top: 46%;
  right: calc(100% - 14px);
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 2px 8px;
  inline-size: 124px;
  padding: 11px 11px 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 20px 44px -22px rgba(10, 4, 32, 0.6),
    0 2px 8px -4px rgba(10, 4, 32, 0.28);
  color: #1b1530;
  animation: hx-float 6.5s ease-in-out infinite;
}

.hx-card__k {
  grid-column: 1 / -1;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #6b6680;
}

.hx-card__v {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: #11795a;
}

.hx-card__spark {
  inline-size: 44px;
  block-size: 18px;
}

.hx-card__line {
  stroke: #11795a;
  stroke-width: 1.6;
}

.hx-card__area {
  fill: rgba(17, 121, 90, 0.12);
}

.hx-card__dot {
  fill: #11795a;
}

/* ---- the phone's footnote: demo label + the 2.2.2 pause control ---- */
.hx-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: 42px;
  margin-block-start: 10px;
}

.hx-cap {
  font-size: 12.5px;
  color: var(--text-3);
}

.hx-motion {
  position: relative;
  display: none;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
    background-color 0.3s var(--ease);
}

/* the disc stays 34px so it never fights the caption; the *target* is the 44px
   button, and this pseudo-element is only the visible circle */
.hx-motion::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--hair-2);
  border-radius: 50%;
  background: var(--glass);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.js .hx-motion {
  display: grid;
}

.hx-motion:hover,
.hx-motion:focus-visible {
  color: var(--white);
}

.hx-motion:hover::before,
.hx-motion:focus-visible::before {
  border-color: rgba(187, 80, 248, 0.5);
  background: rgba(187, 80, 248, 0.1);
}

.hx-motion svg {
  position: relative;
  inline-size: 14px;
  block-size: 14px;
}

.hx-motion .hx-motion__pause {
  display: block;
}

.hx-motion .hx-motion__play {
  display: none;
}

.hx-motion[aria-pressed="true"] .hx-motion__pause {
  display: none;
}

.hx-motion[aria-pressed="true"] .hx-motion__play {
  display: block;
}

/* ============================================================================
   The demo story — one attribute (`data-st` 0→3) drives the slots, the goal
   line, the next step, the CTA and the tap ripple. With JS off (or reduced
   motion) `data-st` is absent and the mock shows its finished 3/3 frame.

   Specificity note: the driven rules are written `.hx .hx-phone[data-st=…]`
   (0,4,0 and up) so they outrank the plain defaults *by weight*, never by
   source order. Every rule is independent of where it sits.
   ========================================================================== */
/* No JS: every slot is filled, the goal reads as met, the badge counts 3. */
.hx-phone .hx-slot {
  --on: 1;
  border-color: var(--mock-teal);
  background-color: transparent;
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--mock-teal);
}

.hx-phone .hx-goal {
  color: var(--mock-teal);
}

.hx-phone .hx-goal b {
  color: var(--mock-teal);
}

/* locked look for states 0–2: empty dashed rings, an ink goal line */
.hx .hx-phone[data-st="0"] .hx-slot,
.hx .hx-phone[data-st="1"] .hx-slot,
.hx .hx-phone[data-st="2"] .hx-slot {
  --on: 0;
  border-color: rgba(27, 21, 48, 0.18);
  background-color: #f5f4f9;
  box-shadow: none;
}

.hx .hx-phone[data-st="0"] .hx-goal,
.hx .hx-phone[data-st="1"] .hx-goal,
.hx .hx-phone[data-st="2"] .hx-goal {
  color: var(--mock-ink-2);
}

.hx .hx-phone[data-st="0"] .hx-goal b,
.hx .hx-phone[data-st="1"] .hx-goal b,
.hx .hx-phone[data-st="2"] .hx-goal b {
  color: var(--mock-ink);
}

.hx .hx-phone[data-st="1"] .hx-slot:nth-child(1),
.hx .hx-phone[data-st="2"] .hx-slot:nth-child(-n + 2),
.hx .hx-phone[data-st="3"] .hx-slot:nth-child(-n + 3) {
  --on: 1;
  border-color: var(--mock-teal);
  background-color: transparent;
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--mock-teal);
}

/* the tap ripple, one card per beat */
.hx .hx-phone[data-st="1"] .hx-p:nth-child(1) .hx-p__rip,
.hx .hx-phone[data-st="2"] .hx-p:nth-child(2) .hx-p__rip,
.hx .hx-phone[data-st="3"] .hx-p:nth-child(3) .hx-p__rip {
  animation: hx-tap 0.72s var(--ease-out) both;
}

/* the 12-particle burst, once, when the third piece lands */
.hx .hx-phone[data-st="3"] .hx-burst span {
  animation: hx-pop 1.15s var(--ease-out) var(--pd, 0s) both;
}

/* the driven strings: four fixed variants, one shown at a time */
.hx-phone .hx-st {
  display: none;
}

.hx-phone .hx-st--c {
  display: block;
}

.hx .hx-phone[data-st="0"] .hx-st--0,
.hx .hx-phone[data-st="1"] .hx-st--a,
.hx .hx-phone[data-st="2"] .hx-st--b,
.hx .hx-phone[data-st="3"] .hx-st--c {
  display: block;
}

.hx .hx-phone[data-st="0"] .hx-st--c,
.hx .hx-phone[data-st="1"] .hx-st--c,
.hx .hx-phone[data-st="2"] .hx-st--c {
  display: none;
}

/* ============================================================================
   Motion: entrances and loops
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* the headline rises in, word by word, blur → sharp */
  .js .hx-w {
    opacity: 0;
    animation: hx-word 0.9s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 70ms + 70ms);
  }
}

@keyframes hx-word {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(9px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes hx-shimmer {
  0%,
  62% {
    background-position: 100% 50%;
  }
  100% {
    background-position: -100% 50%;
  }
}

@keyframes hx-drift-a {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-5%, 6%, 0) scale(1.12);
  }
}

@keyframes hx-drift-b {
  from {
    transform: translate3d(0, 0, 0) scale(1.06);
  }
  to {
    transform: translate3d(6%, -5%, 0) scale(1);
  }
}

@keyframes hx-drift-c {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-6%, -6%, 0) scale(1.16);
  }
}

@keyframes hx-float {
  0%,
  100% {
    transform: translateY(-4px);
  }
  50% {
    transform: translateY(4px);
  }
}

@keyframes hx-tap {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(46);
    opacity: 0;
  }
}

@keyframes hx-pop {
  0% {
    transform: rotate(var(--a, 0deg)) translate(0, 0) scale(0.35);
    opacity: 1;
  }
  62% {
    opacity: 1;
  }
  100% {
    transform: rotate(var(--a, 0deg)) translate(0, calc(-1 * var(--r, 44px))) scale(0.8);
    opacity: 0;
  }
}

/* twelve hand-placed particles so the burst never looks machine-made. The reach
   is `calc(N * var(--u))`, so the burst scales with the phone. */
.hx-burst span:nth-child(1) {
  --a: -92deg;
  --r: calc(62 * var(--u));
  --pd: 0s;
  background: #bb50f8;
}

.hx-burst span:nth-child(2) {
  --a: -64deg;
  --r: calc(48 * var(--u));
  --pd: 0.02s;
  background: #5c17fd;
}

.hx-burst span:nth-child(3) {
  --a: -38deg;
  --r: calc(57 * var(--u));
  --pd: 0.04s;
  background: #024e5c;
}

.hx-burst span:nth-child(4) {
  --a: -12deg;
  --r: calc(44 * var(--u));
  --pd: 0.01s;
  background: #bb50f8;
}

.hx-burst span:nth-child(5) {
  --a: 16deg;
  --r: calc(52 * var(--u));
  --pd: 0.05s;
  background: #7a2bff;
}

.hx-burst span:nth-child(6) {
  --a: 42deg;
  --r: calc(60 * var(--u));
  --pd: 0.03s;
  background: #024e5c;
}

.hx-burst span:nth-child(7) {
  --a: 68deg;
  --r: calc(46 * var(--u));
  --pd: 0.06s;
  background: #bb50f8;
}

.hx-burst span:nth-child(8) {
  --a: 96deg;
  --r: calc(55 * var(--u));
  --pd: 0s;
  background: #5c17fd;
}

.hx-burst span:nth-child(9) {
  --a: 128deg;
  --r: calc(43 * var(--u));
  --pd: 0.04s;
  background: #024e5c;
}

.hx-burst span:nth-child(10) {
  --a: 158deg;
  --r: calc(58 * var(--u));
  --pd: 0.02s;
  background: #bb50f8;
}

.hx-burst span:nth-child(11) {
  --a: -132deg;
  --r: calc(50 * var(--u));
  --pd: 0.05s;
  background: #7a2bff;
}

.hx-burst span:nth-child(12) {
  --a: -160deg;
  --r: calc(40 * var(--u));
  --pd: 0.03s;
  background: #024e5c;
}

/* ============================================================================
   Reduced motion: everything static. The mock keeps its finished 3/3 frame and
   every text stays visible; no loop, no entrance, no drift.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hx-blob,
  .hx-w--em em,
  .hx-card,
  .hx-burst span,
  .hx-p__rip {
    animation: none !important;
  }

  .hx-slot,
  .hx-slot__img,
  .hx-slot__plus,
  .hx-slot__tick {
    transition: none;
  }

  .js .hx-motion {
    display: none;
  }
}

/* ============================================================================
   Responsive
   ========================================================================== */
/* the merchant card needs the column's air; below 1024 it goes and the phone
   re-centres in its column */
@media (min-width: 1024px) {
  .hx-device {
    --hx-shift: 56px;
  }
}

@media (max-width: 1023px) {
  .hx-card {
    display: none;
  }

  .hx-device {
    --hx-w: min(260px, 74vw);
  }
}

@media (max-width: 960px) {
  .hx {
    min-height: 0;
    padding-block: clamp(96px, 15vh, 128px) clamp(40px, 7vw, 64px);
  }

  /* below the header's own breakpoint its capsule content edge is already the
     `.wrap` edge, so the container needs no extra padding. The two-column grid
     stays: it only collapses at 760px. */
  .hx-in {
    padding-inline: 0;
  }
}

@media (max-width: 759px) {
  /* the fixed «تكلّم مع راكان» float sits in the bottom corner, so the hero
     keeps 120px of air under the phone */
  .hx {
    padding-block-end: clamp(112px, 22vw, 150px);
  }

  .hx-in {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(30px, 7vw, 48px);
  }

  /* stacked: the copy reads better centred once the phone drops below it */
  .hx-copy {
    text-align: center;
  }

  .hx-sub {
    margin-inline: auto;
  }

  .hx-ctas,
  .hx-facts {
    justify-content: center;
  }

  .hx-voice {
    display: inline-flex;
    margin-inline: auto;
  }

  .hx-device {
    --hx-w: min(270px, 76vw);
  }
}

@media (max-width: 720px) {
  .hx-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .hx-cta {
    inline-size: 100%;
    justify-content: center;
    min-block-size: 54px;
  }

  .hx-facts {
    gap: 8px 16px;
  }
}

@media (max-width: 400px) {
  .hx-cta {
    min-block-size: 52px;
  }
}

/* On the narrowest phones the 40px clamp minimum makes «عروضك أمام عميلك.» too
   wide for one line, so it breaks after «أمام» and the headline runs to three.
   Shrink with the viewport instead, so the first phrase always fits its line and
   the headline stays exactly two lines down to 320px (line-height stays 1.35). */
@media (max-width: 430px) {
  .hx-title {
    font-size: clamp(28px, 10vw, 40px);
  }
}

/* desktop-only pointer affordances */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .hx-phone {
    will-change: transform;
  }
}

@media (hover: none), (pointer: coarse) {
  .hx-spot {
    display: none;
  }
}