/* ============================================================
   AD HOLIC — section styles, in page order
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The void has to win at the bottom edge or the headline sits on
   moving video and stops being readable. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(19,7,20,.72) 0%,
    rgba(19,7,20,.38) 42%,
    var(--void) 100%);
}
.hero__in {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--s-8)) var(--gutter) var(--s-8);
}
.hero__eyebrow {
  margin-bottom: var(--s-5);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--lilac);
}
:root[data-lang="ar"] .hero__eyebrow { text-transform: none; }

.hero__h1 {
  max-width: 15ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}
.hero__h1 .word { margin-inline-end: .24em; }

.hero__sub {
  margin-top: var(--s-5);
  max-width: 46ch;
  font-size: var(--fs-lg);
  color: var(--lilac);
}
.hero__cta {
  margin-top: var(--s-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}
.hero__foot {
  margin-top: var(--s-9);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
}

/* Frequency strip — the brand's waveform motif as an equaliser. */
.eq { display: flex; align-items: flex-end; gap: 5px; height: 40px; }
.eq i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--ribbon-120);
  transform-origin: bottom;
  transform: scaleY(.25);
  animation: eq 1.15s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes eq {
  0%, 100% { transform: scaleY(.25); }
  50%      { transform: scaleY(1); }
}

.hero__scroll { display: none; flex-direction: column; align-items: center; gap: var(--s-2); }
.hero__scroll span {
  font-size: 10px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--lilac-dim);
}
.hero__scroll i {
  position: relative;
  display: block;
  width: 1px; height: 40px;
  background: var(--plum-high);
  overflow: hidden;
}
.hero__scroll i::after {
  content: "";
  position: absolute;
  inset-inline-start: 0; top: 0;
  width: 1px; height: 16px;
  background: var(--ice);
  animation: scroll-cue 1.6s ease-in-out infinite;
}
@keyframes scroll-cue {
  from { transform: translateY(-16px); }
  to   { transform: translateY(40px); }
}
@media (min-width: 768px) { .hero__scroll { display: flex; } }
@media (prefers-reduced-motion: reduce) {
  .eq i { animation: none; transform: scaleY(.6); }
  .hero__scroll i::after { animation: none; }
}

/* ============================================================
   MANIFESTO
   ============================================================ */

.manifesto__grid {
  display: grid;
  gap: var(--s-8);
  align-items: center;
}
@media (min-width: 900px) {
  .manifesto__grid { grid-template-columns: 7fr 5fr; gap: var(--s-9); }
}

.manifesto__line {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.6vw, 3.9rem);
  line-height: 1.14;
  letter-spacing: var(--tr-tight);
}
.manifesto__line .word { margin-inline-end: .26em; }
/* The three brand words each take their own pole of the ribbon. */
.tone-magenta { color: var(--magenta-soft); }
.tone-indigo  { color: var(--indigo-bright); }
.tone-royal   { color: var(--royal-soft); }
:root[data-lang="en"] .tone-magenta,
:root[data-lang="en"] .tone-indigo,
:root[data-lang="en"] .tone-royal { font-style: italic; }

.manifesto__para { margin-top: var(--s-7); max-width: 46ch; color: var(--lilac); }

/* The panel: a ribbon-edged frame around the campaign scene. */
.panel {
  position: relative;
  padding: 1px;
  border-radius: var(--r-3);
  background: var(--ribbon-120);
  box-shadow: var(--sh-3);
}
.panel__in {
  border-radius: calc(var(--r-3) - 1px);
  background: var(--plum);
  overflow: hidden;
  /* The grid stretches .panel to the tallest column, but the inner is
     only as tall as its content — leaving the gradient underneath
     showing as a solid block rather than a 1px edge. */
  height: 100%;
}

/* ---------- Campaign scene ----------
   The one deliberate light break in the dark page: an ad launches,
   reactions float off it, the results curve draws itself. Glow → Flow
   → Grow, literally. Laid out in percentages so the whole scene scales
   with the card rather than needing breakpoints of its own. */
.scene {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ice);
  color: var(--plum);
  background-image: radial-gradient(rgba(35,34,104,.10) 1px, transparent 1.5px);
  background-size: 22px 22px;
  /* Percentage positioning needs a stable type scale, or the cards
     inside would grow with the page's own clamp()-driven sizes. */
  font-size: clamp(10px, 1.15cqw + 6px, 15px);
  container-type: inline-size;
}
@media (min-width: 900px) { .scene { aspect-ratio: 3 / 4; } }

.scene__tint {
  position: absolute;
  width: 66%; height: 66%;
  border-radius: 50%;
  filter: blur(70px);
}
.scene__tint--a { top: -25%; left: -25%; background: rgba(233,29,127,.10); }
.scene__tint--b { bottom: -25%; right: -25%; background: rgba(46,127,232,.10); }

.scene__pill {
  position: absolute;
  top: 7%; left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .55em 1.1em;
  border-radius: var(--r-pill);
  background: var(--plum);
  color: var(--ice);
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(40,6,40,.5);
}
:root[data-lang="ar"] .scene__pill { text-transform: none; letter-spacing: 0; }

/* The live dot: a solid core with a ring pulsing out of it. */
.scene__live { position: relative; display: inline-flex; width: .6em; height: .6em; }
.scene__live i {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #2edb84;
}
.scene__live i:first-child { animation: live-ping 1.6s ease-out infinite; }
@keyframes live-ping {
  from { transform: scale(1);   opacity: .7; }
  to   { transform: scale(2.2); opacity: 0; }
}

/* ---- the ad ---- */
.scene__ad {
  position: absolute;
  top: 22%; left: 10%;
  width: 46%;
  padding: .8em;
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 18px 36px -18px rgba(35,34,104,.35);
  animation: bob-a 5s ease-in-out infinite;
}
.scene__thumb {
  height: 5em;
  border-radius: .7em;
  background: linear-gradient(135deg, var(--magenta), var(--indigo-bright), var(--royal));
}
.scene__bar {
  height: .55em;
  margin-top: .7em;
  border-radius: var(--r-pill);
  background: rgba(40,6,40,.14);
}
.scene__bar + .scene__bar { margin-top: .45em; background: rgba(40,6,40,.09); }
.scene__adfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .9em;
}
.scene__cta {
  padding: .3em .9em;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--magenta), var(--royal));
  color: #fff;
  font-size: .72em;
  font-weight: 700;
  white-space: nowrap;
}
.scene__likes {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: .72em;
  font-weight: 700;
  color: rgba(40,6,40,.5);
}
.scene__likes svg { width: 1em; height: 1em; color: var(--magenta); }

/* Reactions drift up off the ad, like a live feed. */
.scene__react {
  position: absolute;
  top: 0;
  opacity: 0;
  animation: react var(--dur, 3.2s) ease-out infinite;
  animation-delay: var(--delay, 0s);
}
.scene__react svg { width: 1em; height: 1em; }
@keyframes react {
  0%   { transform: translate(0, .5em);              opacity: 0; }
  18%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0), -3.5em); opacity: 0; }
}

/* ---- the results ---- */
.scene__res {
  position: absolute;
  right: 9%; bottom: 9%;
  width: 52%;
  padding: 1em;
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 18px 36px -18px rgba(35,34,104,.35);
  animation: bob-b 5.6s ease-in-out infinite;
}
.scene__resh { display: flex; align-items: center; justify-content: space-between; gap: .5em; }
.scene__reslabel {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .7em;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(40,6,40,.5);
  white-space: nowrap;
}
:root[data-lang="ar"] .scene__reslabel { text-transform: none; letter-spacing: 0; }
.scene__reslabel svg { width: 1.1em; height: 1.1em; color: var(--royal); }
.scene__count {
  font-family: var(--font-display);
  font-size: 1.35em;
  font-variant-numeric: tabular-nums;
  color: var(--plum);
}
.scene__curve { width: 100%; margin-top: .5em; }
/* The curve draws itself, holds, then clears — on the same 8s cycle
   the counter climbs on. */
/* 199 is the path's real length (measured with getTotalLength). It was
   260, which meant the line finished drawing ~23% early and then sat
   static while the counter kept climbing. */
.scene__curve path {
  stroke-dasharray: 199;
  stroke-dashoffset: 199;
  animation: draw 8s linear infinite;
}
@keyframes draw {
  0%   { stroke-dashoffset: 199; opacity: 1; }
  40%  { stroke-dashoffset: 0;   opacity: 1; }
  92%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}

@keyframes bob-a { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
@keyframes bob-b { 0%, 100% { transform: translateY(4px); }  50% { transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .scene__ad, .scene__res { animation: none; }
  .scene__react { animation: none; opacity: 0; }
  .scene__live i:first-child { animation: none; opacity: 0; }
  .scene__curve path { animation: none; stroke-dashoffset: 0; }
}

/* ============================================================
   APPROACH — Glow · Flow · Grow
   ============================================================ */

.approach__title .word { margin-inline-end: .3em; }
.approach__body { position: relative; margin-top: var(--s-9); }

/* The spine. Desktop draws it across the row; phones run it down
   the leading edge, threading the three nodes. */
.approach__spine {
  position: absolute;
  inset-inline: 0;
  top: 40px;
  height: 1px;
  background: var(--ribbon);
  display: none;
}
.approach__spine--y {
  position: absolute;
  inset-block: 0 40px;
  inset-inline-start: 40px;
  width: 1px;
  height: auto;
  background: linear-gradient(180deg, var(--magenta), var(--indigo-bright), var(--royal));
}
@media (min-width: 820px) {
  .approach__spine { display: block; }
  .approach__spine--y { display: none; }
}

.approach__list { display: grid; gap: var(--s-8); }
@media (min-width: 820px) { .approach__list { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }

.stage { position: relative; display: flex; gap: var(--s-6); }
@media (min-width: 820px) { .stage { display: block; } }

.stage__node {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 1px solid var(--node);
  background: var(--void);
  color: var(--node);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
}
:root[data-lang="en"] .stage__node { font-style: italic; }
/* Soft pulse ring. Runs on transform/opacity only — an animated
   box-shadow would repaint the ring every frame. */
.stage__node::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--pulse);
  animation: node-pulse 2.6s ease-out infinite;
}
@keyframes node-pulse {
  0%        { transform: scale(1);    opacity: .6; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .stage__node::after { content: none; }
  .scene__dot { animation: none; }
}

.stage__body { margin-top: 0; }
@media (min-width: 820px) { .stage__body { margin-top: var(--s-6); } }
.stage__title { font-family: var(--font-display); font-size: var(--fs-xl); }
.stage__desc { margin-top: var(--s-3); max-width: 34ch; font-size: var(--fs-sm); color: var(--lilac); }

/* ============================================================
   SERVICES
   ============================================================ */

.svc__grid { display: grid; gap: var(--s-5); margin-top: var(--s-8); }
@media (min-width: 760px) { .svc__grid { grid-template-columns: repeat(3, 1fr); } }

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: var(--s-7);
  border-radius: var(--r-3);
  background: var(--plum);
  overflow: hidden;
  transition: transform var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out);
}
.svc:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-3), var(--glow-magenta);
}

/* A ribbon edge lights up around the card. Drawn as an inset ring on a
   pseudo-element rather than a real border, so nothing reflows and the
   whole thing is a composited fade. */
.svc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--ribbon-120);
  /* Mask out the middle so only the 1px edge shows. */
  -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, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
  pointer-events: none;
}
.svc:hover::after,
.svc:focus-within::after { opacity: 1; }
/* Cursor-following glow, positioned by main.js. */
.svc__glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-2);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(233,29,127,.14), transparent 65%);
}
.svc:hover .svc__glow { opacity: 1; }
.svc__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--r-2);
  background: rgba(19,7,20,.6);
  color: var(--magenta-soft);
  transition: transform var(--dur-3) var(--ease-out),
              background var(--dur-3) var(--ease-out),
              color var(--dur-3) var(--ease-out);
}
/* The chip fills with the ribbon and the glyph flips to ice — the clearest
   single signal that the card is live. */
.svc:hover .svc__ico,
.svc:focus-within .svc__ico {
  transform: scale(1.1) rotate(6deg);
  background: var(--ribbon-120);
  color: var(--ice);
}
.svc__ico svg { width: 22px; height: 22px; }

.svc__title {
  margin-top: auto;
  padding-top: var(--s-8);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  transition: color var(--dur-3) var(--ease-out);
}
.svc__blurb {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--lilac);
  transition: color var(--dur-3) var(--ease-out);
}
/* Copy lifts out of the secondary tone as the card comes forward. */
.svc:hover .svc__blurb,
.svc:focus-within .svc__blurb { color: var(--ice); }

.svc > * { position: relative; }

/* Support disciplines — chips, not cards. They are the long tail. */
.svc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-7);
}
.chip {
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--plum-high);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--lilac);
  transition: border-color var(--dur-2), color var(--dur-2), background var(--dur-2);
}
.chip:hover { border-color: var(--magenta); color: var(--ice); background: var(--plum); }

/* ============================================================
   WORK — a swipeable rail of case cards
   ============================================================ */

/* No overflow clipping here. `overflow: hidden` on the section would
   make it the nearest scroll container, and position:sticky then has
   nothing to stick against — the pinned inner would simply sit at the
   top of the section. The clipping belongs on .work__stick. */
.work { position: relative; }
.work__stick { position: relative; overflow: hidden; }
.work__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
}
.work__arrows { display: none; gap: var(--s-3); flex: none; }
@media (min-width: 900px) { .work__arrows { display: flex; } }
.work__arrow {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--plum-high);
  border-radius: 50%;
  background: rgba(19,7,20,.6);
  color: var(--ice);
  transition: border-color var(--dur-2), color var(--dur-2);
}
.work__arrow:hover { border-color: var(--magenta); color: var(--magenta-soft); }
.work__arrow svg { width: 20px; height: 20px; }
.work__arrow[disabled] { opacity: .35; pointer-events: none; }

/* Two modes for one row.

   Phones: a native swipe rail. Under a thumb, scroll-jacking fights
   the user, so the browser keeps the scrolling.

   Desktop ([data-pinned]): the section becomes tall, its inner sticks
   to the viewport, and the row is dragged sideways by scroll progress
   — the cinematic showcase. The arrows nudge the page, which drives
   the same transform, so there is only ever one behaviour. */
.work__rail {
  display: flex;
  gap: var(--s-5);
  margin-top: var(--s-8);
  padding-inline: var(--gutter);
  padding-bottom: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--gutter);
  scrollbar-width: none;
}
.work__rail::-webkit-scrollbar { display: none; }

.work[data-pinned="true"] {
  height: 320vh;
  padding-block: 0;
}
.work[data-pinned="true"] .work__stick {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100svh;
  overflow: hidden;
  padding-block: var(--s-8);
}
.work[data-pinned="true"] .work__rail {
  overflow: visible;
  scroll-snap-type: none;
  padding-bottom: 0;
  will-change: transform;
}
.work[data-pinned="true"] .case { scroll-snap-align: none; }

/* The showcase is lit from behind by the flow clip. */
.work__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .25;
}
.work__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--void), transparent 35%, transparent 65%, var(--void));
}
.work__stick > .wrap,
.work__stick > .work__rail { position: relative; }

.case {
  position: relative;
  flex: none;
  width: min(20rem, 78vw);
  padding: var(--s-6);
  border-radius: var(--r-3);
  background: rgba(29, 11, 34, .8);
  backdrop-filter: blur(4px);
  scroll-snap-align: start;
  overflow: hidden;
  transition: transform var(--dur-3) var(--ease-out);
}
@media (min-width: 760px) { .case { width: 24rem; } }
.case:hover { transform: translateY(-6px); }

/* A muted preview fades in behind the card on hover. It is loaded with
   preload="none" and only played while hovered, so it costs nothing
   until someone actually reaches for the card. */
.case__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-4) var(--ease-out);
}
.case:hover .case__bg,
.case:focus-within .case__bg { opacity: .25; }
/* Everything after the video has to sit above it. */
.case > *:not(.case__bg) { position: relative; }

.case__bar {
  width: 56px; height: 4px;
  border-radius: var(--r-pill);
  background: var(--hue, var(--magenta));
  transition: width var(--dur-3) var(--ease-out);
}
.case:hover .case__bar { width: 96px; }
.case__sector {
  margin-top: var(--s-5);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--lilac);
}
:root[data-lang="ar"] .case__sector { text-transform: none; letter-spacing: 0; }
.case__client { margin-top: var(--s-2); font-family: var(--font-display); font-size: 1.75rem; }
.case__work { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--lilac); }
.case__result {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--plum-high);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: var(--lh-snug);
}

/* ============================================================
   RESULTS — the numbers, on their own lit card
   ============================================================ */

.results {
  position: relative;
  border-radius: 2.5rem;
  background: var(--plum);
  overflow: hidden;
}
.results__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .3;
}
/* The figures sit on the leading side, so the clip is masked out from
   under them and left showing on the trailing side. */
.results__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--plum), rgba(29,11,34,.7) 45%, transparent);
}
:root[dir="rtl"] .results__scrim {
  background: linear-gradient(270deg, var(--plum), rgba(29,11,34,.7) 45%, transparent);
}
.results__in {
  position: relative;
  padding: var(--s-8) var(--s-6);
}
@media (min-width: 760px) { .results__in { padding: var(--s-9) var(--s-8); } }

.stats { display: grid; gap: var(--s-6); margin-top: var(--s-8); }
@media (min-width: 620px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat { padding-top: var(--s-5); border-top: 1px solid var(--plum-high); }
.stat__n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  line-height: 1;
  letter-spacing: var(--tr-tight);
  background: var(--ribbon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* The gradient is clipped to the glyphs, so the box must not
     collapse before the counter has written its first digits. */
  min-height: 1em;
}
.stat__l { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--lilac); max-width: 28ch; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */

.quotes { display: grid; gap: var(--s-5); margin-top: var(--s-8); }
@media (min-width: 860px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-7);
  border-radius: var(--r-3);
  background: var(--plum);
  border-top: 2px solid var(--hue, var(--magenta));
}
.quote__mark {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: .8;
  color: var(--hue, var(--magenta));
  opacity: .5;
}
.quote__body { margin-top: var(--s-4); font-size: var(--fs-lg); line-height: 1.6; }
.quote__role {
  margin-top: auto;
  padding-top: var(--s-6);
  font-size: var(--fs-xs);
  color: var(--lilac);
}

/* ============================================================
   CLIENTS — two marquee rows running against each other
   ============================================================ */

.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  /* Fade both ends so names enter and leave rather than being cut. */
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marquee + .marquee { margin-top: var(--s-4); }
.marquee__track {
  display: flex;
  flex: none;
  gap: var(--s-4);
  padding-inline-end: var(--s-4);
  animation: marquee var(--speed, 44s) linear infinite;
}
.marquee--rev .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
/* RTL flips the axis the track travels along, otherwise the second
   copy of the list starts off-screen on the wrong side and the row
   shows a gap on every loop. */
:root[dir="rtl"] .marquee__track { animation-name: marquee-rtl; }
@keyframes marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}
.marquee__item {
  flex: none;
  padding: var(--s-4) var(--s-6);
  border: 1px solid var(--plum-high);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--lilac);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { mask-image: none; -webkit-mask-image: none; flex-wrap: wrap; }
  .marquee__track { flex-wrap: wrap; }
}

/* ============================================================
   CONTACT
   ============================================================ */

.contact__grid { display: grid; gap: var(--s-8); }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 5fr 6fr; gap: var(--s-9); } }

.contact__title { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: var(--lh-snug); }
.contact__para { margin-top: var(--s-5); max-width: 44ch; color: var(--lilac); }

.contact__list { margin-top: var(--s-8); display: flex; flex-direction: column; gap: var(--s-4); }
.contact__row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 44px;
  color: var(--lilac);
  transition: color var(--dur-2);
}
.contact__row:hover { color: var(--ice); }
.contact__row svg { width: 20px; height: 20px; flex: none; color: var(--magenta-soft); }

.social { display: flex; gap: var(--s-3); margin-top: var(--s-7); }
.social a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--plum-high);
  border-radius: 50%;
  color: var(--lilac);
  transition: border-color var(--dur-2), color var(--dur-2), transform var(--dur-2);
}
.social a:hover { border-color: var(--magenta); color: var(--ice); transform: translateY(-2px); }
.social svg { width: 20px; height: 20px; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer { border-top: 1px solid var(--plum-high); padding-block: var(--s-8) var(--s-6); }
.footer__grid { display: grid; gap: var(--s-7); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--s-8); } }
.footer__lockup { width: 150px; height: auto; }
.footer__blurb { margin-top: var(--s-5); max-width: 40ch; font-size: var(--fs-sm); color: var(--lilac); }
.footer__h {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--lilac-dim);
  margin-bottom: var(--s-4);
}
:root[data-lang="ar"] .footer__h { text-transform: none; letter-spacing: 0; }
.footer__links { display: flex; flex-direction: column; gap: var(--s-3); }
.footer__links a { font-size: var(--fs-sm); color: var(--lilac); transition: color var(--dur-2); }
.footer__links a:hover { color: var(--ice); }

.footer__bar {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--plum-high);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--fs-xs);
  color: var(--lilac-dim);
}
.footer__credit a { color: var(--lilac); transition: color var(--dur-2); }
.footer__credit a:hover { color: var(--magenta-soft); }

/* ============================================================
   FLOATING ACTIONS
   ============================================================ */

.fab {
  position: fixed;
  inset-block-end: var(--s-5);
  z-index: var(--z-header);
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  box-shadow: var(--sh-2);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2);
}
.fab:hover { transform: scale(1.08); }
.fab svg { width: 26px; height: 26px; }

.fab--wa {
  inset-inline-end: var(--s-5);
  background: #25d366;
  color: #08130b;
}
.fab--top {
  inset-inline-start: var(--s-5);
  width: 46px; height: 46px;
  border: 1px solid var(--plum-high);
  background: rgba(19,7,20,.8);
  backdrop-filter: blur(8px);
  color: var(--lilac);
  opacity: 0;
  visibility: hidden;
}
.fab--top[data-show="true"] { opacity: 1; visibility: visible; }
.fab--top svg { width: 20px; height: 20px; }

/* ============================================================
   PRICING — the shelf, the cart, the two plans

   The builder is the section's hero: an e-commerce shelf on the
   left, a live cart on the right. The cart is sticky on desktop
   so the number never leaves the screen while you shop, which
   means NOTHING in this block may carry `overflow: hidden` —
   the nearest clipping ancestor becomes the scroll container and
   position: sticky quietly stops working.
   ============================================================ */

/* An interior page has no full-bleed hero to sit under the fixed
   header, so its first section clears the header itself. On the home
   page the hero does this and the modifier is never used. */
.section--first { padding-top: calc(var(--header-h) + var(--section-y) * .6); }

.pricing .lede { margin-top: var(--s-5); }

/* ---------- The builder shell ---------- */

.build {
  position: relative;
  margin-top: var(--s-8);
  border: 1px solid var(--plum-high);
  border-radius: var(--r-3);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(233,29,127,.07), transparent 60%),
    var(--plum);
  box-shadow: var(--sh-2);
}
/* The ribbon rides the top edge — the section's only hard neon. */
.build::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--ribbon);
  border-radius: var(--r-3) var(--r-3) 0 0;
}

.build__head {
  padding: var(--s-7) var(--s-6) var(--s-5);
  text-align: center;
}
.build__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--plum-high);
  background: rgba(19,7,20,.6);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--magenta-soft);
}
.build__chip svg { width: 14px; height: 14px; }
.build__title {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
.build__sub { margin-top: var(--s-2); color: var(--lilac); font-size: var(--fs-sm); }

.build__grid {
  display: grid;
  gap: var(--s-6);
  padding: 0 var(--s-5) var(--s-5);
}

/* ---------- The shelf ---------- */

.shelf { display: grid; gap: var(--s-6); }
.shelf__label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--lilac-dim);
}
.shelf__list { list-style: none; display: grid; gap: var(--s-3); margin-top: var(--s-3); }

.item {
  display: grid;
  grid-template-columns: 38px 1fr;
  /* Control on the leading edge, price trailing. The obvious order is
     the other way round, but the floating WhatsApp button is fixed to
     the bottom trailing corner — put the Add buttons there and it sits
     on top of the one thing this page exists to let you tap. A price is
     safe to have a button pass over; a control is not. */
  grid-template-areas:
    "ico txt"
    "act price";
  align-items: center;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--plum-high);
  border-radius: var(--r-2);
  background: rgba(19,7,20,.45);
  transition:
    border-color var(--dur-2) var(--ease-out),
    background    var(--dur-2) var(--ease-out),
    box-shadow    var(--dur-2) var(--ease-out);
}
.item:hover { border-color: var(--plum-lift); background: rgba(19,7,20,.75); }
.item[data-on="true"] {
  border-color: transparent;
  background: rgba(43,17,54,.55);
  box-shadow: inset 0 0 0 1px rgba(233,29,127,.45);
}

.item__ico {
  grid-area: ico;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-1);
  border: 1px solid var(--plum-high);
  color: var(--lilac);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.item__ico svg { width: 19px; height: 19px; }
.item[data-on="true"] .item__ico {
  background: var(--ribbon-120);
  border-color: transparent;
  color: var(--ice);
}

.item__txt { grid-area: txt; display: block; min-width: 0; }
.item__name { display: block; font-weight: 700; font-size: var(--fs-sm); }
.item__note {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--lilac);
}

.item__price {
  grid-area: price;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}
.item__price b {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
}
.item__per { font-style: normal; font-size: var(--fs-xs); color: var(--lilac-dim); }

.item__act { grid-area: act; display: flex; justify-content: flex-start; }

/* ---------- Add toggle ---------- */

.add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 var(--s-4);
  border: 1px solid var(--plum-high);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--lilac);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur-1), color var(--dur-1), background var(--dur-2);
}
.add:hover { border-color: var(--magenta); color: var(--ice); }
.add svg { width: 15px; height: 15px; flex: none; }
.add__on { display: none; }
.add[aria-pressed="true"] {
  border-color: transparent;
  background: var(--ribbon-120);
  color: var(--ice);
}
.add[aria-pressed="true"] .add__off { display: none; }
.add[aria-pressed="true"] .add__on  { display: inline; }

/* ---------- Quantity stepper ---------- */

.qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--plum-high);
  border-radius: var(--r-pill);
  transition: border-color var(--dur-1);
}
.item[data-on="true"] .qty { border-color: rgba(233,29,127,.45); }
.qty button {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--lilac);
  cursor: pointer;
  transition: background var(--dur-1), color var(--dur-1);
}
.qty button:hover { background: var(--plum-lift); color: var(--ice); }
.qty button[disabled] { opacity: .3; pointer-events: none; }
.qty button svg { width: 15px; height: 15px; }
.qty output {
  min-width: 26px;
  text-align: center;
  font-weight: 800;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ice);
}

/* ---------- The cart ---------- */

.sum__in {
  position: relative;
  padding: var(--s-6);
  border: 1px solid var(--plum-high);
  border-radius: var(--r-3);
  background: linear-gradient(180deg, rgba(43,17,54,.7), rgba(19,7,20,.85));
}
.sum__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
}
.sum__n {
  display: inline-grid;
  place-items: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--ribbon-120);
  color: var(--ice);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 800;
}
.sum__empty {
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--lilac-dim);
}

.sum__list { list-style: none; margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.sum__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--fs-xs);
  color: var(--lilac);
}
.sum__list b {
  flex: none;
  color: var(--ice);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sum__list em {
  font-style: normal;
  color: var(--magenta-soft);
  font-weight: 700;
}

.sum__rows { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.sum__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--plum-high);
  font-size: var(--fs-sm);
  color: var(--lilac);
}
.sum__row b {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--ice);
  font-variant-numeric: tabular-nums;
}
.sum__row--first b {
  background: var(--ribbon-120);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.sum__nudge {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-1);
  border: 1px solid rgba(233,29,127,.3);
  background: rgba(233,29,127,.07);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ice);
}

/* The running total sits on its own line under the label. Squeezed
   onto the same line it wrapped mid-phrase — "Get my / custom plan /
   · 40,000 EGP / month" — in English, and worse in Arabic. */
.sum__cta { width: 100%; margin-top: var(--s-5); flex-wrap: wrap; row-gap: 2px; }
.sum__cta .btn__ico { order: 2; }
.sum__ctaNum {
  order: 3;
  flex-basis: 100%;
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}
.sum__alt {
  margin-top: var(--s-4);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--lilac-dim);
}
.sum__alt a { color: var(--magenta-soft); text-decoration: underline; text-underline-offset: 3px; }
.sum__alt a:hover { color: var(--ice); }
.sum__micro {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--plum-high);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--lilac-dim);
}

/* ---------- The two ready-made plans ---------- */

.plans__lead {
  margin-top: var(--s-9);
  text-align: center;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--lilac-dim);
}

.plans { display: grid; gap: var(--s-5); margin-top: var(--s-5); }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  border: 1px solid var(--plum-high);
  border-radius: var(--r-3);
  background: var(--plum);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
.plan--pro {
  border-color: transparent;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(233,29,127,.12), transparent 62%),
    var(--plum);
  box-shadow: inset 0 0 0 1px rgba(233,29,127,.5), var(--sh-2);
}
.plan--pro:hover { box-shadow: inset 0 0 0 1px rgba(233,29,127,.5), var(--sh-3), var(--glow-magenta); }

.plan__badge {
  position: absolute;
  top: -11px;
  inset-inline-start: var(--s-6);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--ribbon-120);
  color: var(--ice);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.plan__name { font-family: var(--font-display); font-size: var(--fs-xl); }
.plan__tag { margin-top: 2px; font-size: var(--fs-sm); color: var(--lilac); }
.plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.plan__price b {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1;
  letter-spacing: var(--tr-tight);
  font-variant-numeric: tabular-nums;
}
.plan__price i { font-style: normal; font-size: var(--fs-sm); color: var(--lilac); }

.plan__list {
  list-style: none;
  display: grid;
  gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--plum-high);
  font-size: var(--fs-sm);
  color: var(--lilac);
}
.plan__list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.plan__list li::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  margin-top: .55em;
  border-radius: 50%;
  background: var(--ribbon-120);
}
.plan__cta { margin-top: auto; width: 100%; }

.pricing__terms {
  margin-top: var(--s-6);
  text-align: center;
  font-size: var(--fs-micro);
  line-height: 1.7;
  color: var(--lilac-dim);
}

/* ---------- Wider than a phone ---------- */

@media (min-width: 560px) {
  .item {
    grid-template-columns: 38px 1fr auto auto;
    grid-template-areas: "ico txt price act";
  }
  /* One line, so the control returns to the trailing edge where it
     reads as the end of the row. */
  .item__act { justify-content: flex-end; }
  /* Every row is its own grid, so `auto` columns do NOT line up with
     each other — the price and the control would sit at a different x
     on every line. Pinning both columns to a fixed footprint is what
     keeps the right edge of the shelf a straight edge. */
  .item__act { width: 118px; flex: none; }
  .item__price { min-width: 156px; justify-content: flex-end; }
}

@media (min-width: 1000px) {
  .build__head { padding: var(--s-8) var(--s-7) var(--s-6); }
  .build__grid {
    grid-template-columns: minmax(0, 1fr) 366px;
    gap: var(--s-7);
    padding: 0 var(--s-7) var(--s-7);
    align-items: start;
  }
  .sum { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .plans { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}

@media (prefers-reduced-motion: reduce) {
  .plan:hover { transform: none; }
}