@import "../fonts/fonts.css";

/* ═══════════════════════════════════════════════════════════════════════════
   Resonate / ALYA — rtaisolutions.com

   Design system carried over from the original resonate-site build: editorial
   serif on a semi-dark charcoal ground, with the cyan → blue → magenta brand
   gradient used sparingly as an accent.

   Two things changed in the port:
   1. Every directional property is logical (inline-start/end, not left/right),
      so the Arabic RTL pages need no second stylesheet.
   2. Muted text colours were lifted to clear 4.5:1 against the background —
      the originals sat at roughly 3.7:1, which is unreadable in sunlight and
      fails WCAG AA.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── ground ──────────────────────────────────────────────────────────────
     Sampled from the logo artwork: #00000C — near-black with a blue cast, not
     a neutral charcoal. The surfaces step up in the same hue so nothing on the
     page ever reads as grey. */
  --bg:          #00000C;
  --surface:     #07071A;
  --surface-2:   #0D0E23;
  --surface-3:   #15172F;
  --footer:      #000008;
  --line:        rgba(140, 170, 255, 0.12);
  --line-strong: rgba(140, 170, 255, 0.22);

  /* Cool white to match the logo's lettering. The previous warm off-white
     turned muddy against a blue-black ground. */
  --ink:   #F2F5FC;
  --muted: #A9B2CB;   /* 8.9:1 on --bg */
  --faint: #8A94AE;   /* 5.9:1 on --bg — clears AA */

  /* ── brand ───────────────────────────────────────────────────────────────
     The four hues that actually dominate the logo, measured by clustering every
     vivid pixel in it rather than eyedropping a guess. */
  --cyan:         #19A7F9;
  --accent:       #2686FC;   /* the logo blue — used for borders, glows, fills */
  --accent-hover: #4D9DFF;

  /* A deeper blue for anything carrying a white label. The logo blue is only
     3.56:1 against white, which fails AA for a 15px button — so the vivid one
     stays decorative and this one does the work where text sits on top. */
  --accent-solid: #1A63DC;   /* 5.44:1 */
  --accent-solid-hover: #1F6FE8;  /* 4.67:1 */
  --violet:       #544DE8;
  --magenta:      #F106C7;

  /* Four stops, not three — the logo's ring passes through indigo between blue
     and magenta, and skipping it loses most of what makes it look like theirs. */
  --grad: linear-gradient(100deg, #19A7F9 0%, #2686FC 32%, #544DE8 64%, #F106C7 100%);
  --grad-soft: linear-gradient(100deg,
      rgba(25,167,249,.16) 0%, rgba(38,134,252,.16) 32%,
      rgba(84,77,232,.16) 64%, rgba(241,6,199,.16) 100%);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius:    18px;
  --radius-sm: 12px;
  --maxw:      1160px;
  --gutter:    26px;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.45);
  --shadow-md: 0 14px 30px rgba(0,0,0,.5), 0 28px 56px rgba(0,0,0,.5);
  --glow:      0 0 40px -8px rgba(38,134,252,.55);

  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
}

/* Arabic: Amiri is a genuine Arabic serif, so it plays the same editorial role
   Fraunces does in English. Cairo carries the body text. */
[lang="ar"] {
  --serif: "Amiri", "Noto Naskh Arabic", Georgia, serif;
  --sans:  "Cairo", "Noto Sans Arabic", system-ui, sans-serif;
}

/* ── reset ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 90px;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.62;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[lang="ar"] body { font-size: 18px; line-height: 1.9; }

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(38, 134, 252, .30); }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -60px;
  z-index: 200;
  background: var(--accent-solid);
  color: #fff;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: 14px; }

/* ── layout ────────────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.section        { padding-block: clamp(64px, 9vw, 116px); }
.section--tight { padding-block: clamp(46px, 6vw, 74px); }
.band           { background: var(--surface); border-block: 1px solid var(--line); }

.section-head { max-width: 680px; margin-bottom: clamp(38px, 5vw, 60px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head .lead { margin-top: 18px; }

/* ── type ──────────────────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--cyan); flex-shrink: 0; }
[lang="ar"] .eyebrow { letter-spacing: .02em; text-transform: none; font-size: 13.5px; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
[lang="ar"] h1, [lang="ar"] h2,
[lang="ar"] h3, [lang="ar"] h4 { letter-spacing: 0; line-height: 1.45; font-weight: 700; }

.h-xl { font-size: clamp(2.7rem, 5.6vw, 4.4rem); }
.h-lg { font-size: clamp(2.1rem, 4vw, 3.1rem); }
.h-md { font-size: clamp(1.5rem, 2.4vw, 2rem); }

.lead {
  font-family: var(--sans);
  font-size: clamp(1.04rem, 1.3vw, 1.2rem);
  color: var(--muted);
  max-width: 58ch;
  line-height: 1.65;
}
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.mono { font-size: 12.5px; letter-spacing: .04em; color: var(--faint); }

/* ── buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 40px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease), color .2s var(--ease);
}
.btn-primary { background: var(--accent-solid); color: #fff; }
.btn-primary:hover { background: var(--accent-solid-hover); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-light { background: rgba(255,255,255,.06); color: var(--ink); border-color: var(--line-strong); }
.btn-light:hover { background: rgba(255,255,255,.12); }
.btn-sm { padding: 10px 18px; font-size: 14px; }

.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
[dir="rtl"] .arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(3px); }

.btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── header ────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0, 0, 12, .82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 18px; height: 70px; }

/* ── the lockup ────────────────────────────────────────────────────────────
   Modelled on the official artwork: thin, widely-tracked geometric caps with
   the first letter carrying the cyan end of the gradient and the last the
   magenta, over a smaller, even more widely tracked second line.

   The tracking is what does most of the work. At normal spacing this reads as
   ordinary bold type; at .3em it reads as a mark. */

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.brand-wm {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}

/* The RT signature mark sits where the typed "R T" used to. Height is tied to
   the wordmark's own size so the lockup scales as one unit.

   The glow is stacked drop-shadows rather than a box-shadow, because the PNG
   has a transparent background — drop-shadow follows the actual strokes of the
   signature, box-shadow would halo a rectangle. Three passes: a tight white
   core, a mid cyan, and a wide blue bloom. It breathes on a slow cycle. */
.wm-mark {
  display: block;
  height: 1.55em;
  width: auto;
  /* the artwork is cyan; nudge it onto the brand blue so it sits with --grad */
  filter: hue-rotate(6deg) saturate(1.05)
          drop-shadow(0 0 2px rgba(255, 255, 255, .55))
          drop-shadow(0 0 7px rgba(25, 167, 249, .75))
          drop-shadow(0 0 16px rgba(38, 134, 252, .45));
  animation: wm-glow 3.6s var(--ease) infinite;
}

@keyframes wm-glow {
  0%, 100% {
    filter: hue-rotate(6deg) saturate(1.05)
            drop-shadow(0 0 2px rgba(255, 255, 255, .55))
            drop-shadow(0 0 7px rgba(25, 167, 249, .75))
            drop-shadow(0 0 16px rgba(38, 134, 252, .45));
  }
  50% {
    filter: hue-rotate(6deg) saturate(1.12)
            drop-shadow(0 0 3px rgba(255, 255, 255, .8))
            drop-shadow(0 0 12px rgba(25, 167, 249, .95))
            drop-shadow(0 0 26px rgba(38, 134, 252, .6));
  }
}

/* Hovering the lockup lifts the bloom to full. */
.brand:hover .wm-mark {
  filter: hue-rotate(6deg) saturate(1.15)
          drop-shadow(0 0 3px rgba(255, 255, 255, .9))
          drop-shadow(0 0 14px rgba(25, 167, 249, 1))
          drop-shadow(0 0 30px rgba(38, 134, 252, .7));
  animation: none;
}

.wm-main {
  font-family: var(--sans);
  font-weight: 300;          /* thin strokes — the wordmark is not bold type */
  font-size: 19px;
  letter-spacing: .30em;
  /* Wide tracking adds space after the final letter too, which pushes the
     lockup off-centre against the mark. Pull it back. */
  margin-inline-end: -.30em;
  color: var(--ink);
  white-space: nowrap;
}

/* Still used by style_legal_name(): the registered entity is written with the
   logo's R-cyan / T-magenta coding. Kept even though the header wordmark is now
   the RT artwork rather than typed letters. */
.wm-r {
  background: linear-gradient(180deg, #19A7F9 0%, #2686FC 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.wm-t { color: var(--magenta); }

.wm-sub {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 8.5px;
  letter-spacing: .34em;
  margin-inline-end: -.34em;
  color: var(--muted);
  white-space: nowrap;
}
.wm-ai { color: var(--accent); font-weight: 500; }

/* Arabic pages keep the Latin wordmark — a brand mark is not translated. */
[lang="ar"] .wm-main, [lang="ar"] .wm-sub { font-family: "Inter", system-ui, sans-serif; }

.site-footer .wm-sub { color: var(--faint); }

/* The mark tips very slightly on hover — the wordmark stays still, so the
   movement reads as the badge being an object rather than the whole lockup
   wobbling. */

@media (max-width: 420px) {
  .wm-sub { display: none; }
  .wm-main { font-size: 17px; }
}

.nav-links { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.nav-links a[aria-current="page"] { color: var(--ink); }

.nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.lang-switch {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 40px;
  padding: 9px 15px;
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}
.lang-switch:hover { border-color: var(--cyan); color: var(--cyan); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 9px;
  margin-inline-start: auto;
  color: var(--ink);
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: currentColor; margin: 5px 0; border-radius: 2px;
}

@media (max-width: 1040px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    inset-block-start: 70px;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 16px var(--gutter) 26px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
  }
  .nav-links[hidden] { display: none; }
  .nav-links a { padding: 13px 10px; font-size: 16px; }
  .nav-links .nav-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 16px;
  }
  .nav-links .nav-cta .btn,
  .nav-links .nav-cta .lang-switch { width: 100%; text-align: center; }
}

/* ── reveal on scroll ──────────────────────────────────────────────────── */

/* .reveal is VISIBLE by default. The script adds .reveal--armed before it hides
   anything, so if JavaScript never runs the page is simply all there. The
   animation itself lives in the MOTION section at the end of this file. */
.reveal { opacity: 1; }

/* ── hero ──────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding-block: clamp(62px, 8vw, 96px) clamp(70px, 9vw, 104px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero-aura {
  position: absolute;
  inset-block-start: -12%;
  inset-inline-end: -14%;
  width: min(760px, 88vw);
  opacity: .5;
  pointer-events: none;
}
.hero-aura svg { width: 100%; height: auto; }
.hero-aura .orbit { transform-origin: 300px 300px; animation: spin 34s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(38px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.04; margin-bottom: 24px; }
[lang="ar"] .hero h1 { line-height: 1.35; }
.hero .lead { max-width: 48ch; }
.hero-cta { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.hero-note { margin-top: 38px; font-size: 13.5px; color: var(--faint); max-width: 48ch; }

/* ── ALYA card ─────────────────────────────────────────────────────────── */

.alya-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow-md);
}
.alya-top { display: flex; align-items: center; margin-bottom: 6px; }
.rc-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
[lang="ar"] .rc-status { text-transform: none; letter-spacing: 0; }
.rc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; }

.alya-name { text-align: center; font-family: var(--serif); font-weight: 600; font-size: 24px; }
.alya-sub  { text-align: center; font-size: 13.5px; color: var(--muted); margin-bottom: 22px; }
.alya-label {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; margin-bottom: 12px;
}
[lang="ar"] .alya-label { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.alya-pkgs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.alya-pkg {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}
.alya-pkg .d { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-chat { background: var(--accent); }
.dot-voice { background: var(--cyan); }
.dot-admin { background: var(--violet); }
.dot-marketing { background: var(--magenta); }

/* ── package cards ─────────────────────────────────────────────────────── */

.pkg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1040px) { .pkg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pkg-grid { grid-template-columns: 1fr; } }

.pkg-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
a.pkg-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.sc-scene {
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--line);
  margin-bottom: 20px;
  overflow: hidden;
}
.sc-scene svg { width: 100%; height: auto; }
.pkg-head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.pkg-no { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--faint); }
.pkg-name { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; }
.pkg-line { color: var(--muted); font-size: 15px; }
.pkg-more {
  margin-top: auto; padding-top: 16px;
  font-size: 13.5px; font-weight: 600; color: var(--cyan);
}

/* ── steps ─────────────────────────────────────────────────────────────── */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .steps, .steps--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps, .steps--4 { grid-template-columns: 1fr; } }

.step { padding-top: 24px; border-top: 1px solid var(--line-strong); }
.step .n { font-size: 12.5px; color: var(--cyan); font-weight: 700; letter-spacing: .06em; }
.step h3 { font-size: 1.35rem; margin: 14px 0 9px; }
.step p { color: var(--muted); font-size: 15.5px; }

/* ── value grid ────────────────────────────────────────────────────────── */

.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 940px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .value-grid { grid-template-columns: 1fr; } }

.value-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.value-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.value-card .ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(38, 134, 252, .16);
  color: var(--accent);
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.value-card .ico svg { width: 21px; height: 21px; }
.value-card h3 { font-size: 1.25rem; margin-bottom: 9px; }
.value-card p { color: var(--muted); font-size: 15.5px; }

/* ── split feature ─────────────────────────────────────────────────────── */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.split--reverse .split-body { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split-body { order: 0; }
}

.point-list { list-style: none; margin-top: 30px; }
.point-list li { position: relative; padding-inline-start: 30px; margin-bottom: 20px; }
.point-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .62em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cyan);
}
.point-list strong { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; margin-bottom: 3px; }
.point-list span { color: var(--muted); font-size: 15.5px; }

/* ── proof panel ───────────────────────────────────────────────────────── */

.proof {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.proof-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, .2);
}
.proof-bar b { font-family: var(--serif); font-weight: 600; font-size: 15px; }
.proof-bar .rc-status { margin-inline-start: auto; }

.proof-foot {
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--faint);
  display: flex; align-items: center; gap: 9px;
}

.checklist { list-style: none; display: grid; gap: 11px; padding: 22px; }
.checklist li { display: flex; gap: 13px; align-items: flex-start; }
.checklist .tick {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(25, 167, 249, .14);
  color: var(--cyan);
  display: grid; place-items: center;
  margin-top: 2px;
}
.checklist .tick svg { width: 12px; height: 12px; }
.checklist b { display: block; font-family: var(--serif); font-weight: 600; font-size: 15.5px; }
.checklist span { font-size: 14.5px; color: var(--muted); }

/* ── chips ─────────────────────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  border-radius: 40px;
  padding: 9px 17px;
  font-size: 14.5px;
  color: var(--ink);
}
.chip-label {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); font-weight: 700; margin-bottom: 14px;
}
[lang="ar"] .chip-label { letter-spacing: 0; text-transform: none; font-size: 13px; }

/* ── comparison table ──────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
table { width: 100%; border-collapse: collapse; min-width: 640px; }
thead th {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint);
  text-align: start;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, .18);
}
thead th:last-child { color: var(--cyan); }
[lang="ar"] thead th { letter-spacing: 0; text-transform: none; font-size: 13.5px; }
tbody th {
  text-align: start;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15.5px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  min-width: 9rem;
}
tbody td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--muted);
  vertical-align: top;
}
tbody td:last-child { color: var(--ink); background: rgba(38, 134, 252, .06); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* ── pricing ───────────────────────────────────────────────────────────── */

.pricing-controls {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  margin-bottom: 36px;
}
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 40px; padding: 4px; }
.seg-btn {
  border: 0; background: none; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--muted);
  padding: 9px 18px; border-radius: 40px;
  transition: background .2s, color .2s;
}
.seg-btn[aria-pressed="true"] { background: var(--accent-solid); color: #fff; }

.cat-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-tab {
  border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--muted);
  padding: 9px 18px; border-radius: 40px;
  transition: border-color .2s, color .2s, background .2s;
}
.cat-tab:hover { color: var(--ink); }
.cat-tab[aria-selected="true"] { border-color: var(--cyan); color: var(--cyan); background: rgba(25,167,249,.09); }

.tier-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 980px) { .tier-cards { grid-template-columns: 1fr; } }

.tier-card {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
}
.tier-card.featured { border-color: rgba(38, 134, 252, .5); overflow: hidden; }
.tier-card.featured::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--grad);
}
.price-badge {
  position: absolute; top: 22px; inset-inline-end: 22px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: var(--cyan);
  border: 1px solid rgba(25, 167, 249, .4);
  background: rgba(25, 167, 249, .10);
  padding: 4px 10px; border-radius: 20px;
}
[lang="ar"] .price-badge { letter-spacing: 0; text-transform: none; }
.tier { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; margin-bottom: 7px; }
.tier-desc { font-size: 14.5px; color: var(--muted); min-height: 44px; }
.tier-price { margin: 22px 0 4px; display: grid; gap: 9px; }
.tp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tp-k { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
[lang="ar"] .tp-k { letter-spacing: 0; text-transform: none; font-size: 14px; }
.tp-v { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--ink); }
.tp-v em { font-style: normal; font-size: 13px; color: var(--muted); font-family: var(--sans); }
.tp-note { font-size: 12.5px; color: var(--faint); margin-bottom: 22px; }
.tier-card > .btn { width: 100%; }
.tp-list-title {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); font-weight: 700; margin: 26px 0 13px;
}
[lang="ar"] .tp-list-title { letter-spacing: 0; text-transform: none; font-size: 13.5px; }
.tp-list { list-style: none; display: grid; gap: 11px; }
.tp-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--muted); }
.tp-list .tick { color: var(--cyan); flex-shrink: 0; font-weight: 700; }

.bespoke {
  margin-top: 22px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
}
@media (max-width: 820px) { .bespoke { grid-template-columns: 1fr; } }
.bespoke p { color: var(--muted); font-size: 15px; margin-top: 10px; max-width: 62ch; }
.bespoke-side { display: grid; gap: 10px; min-width: 240px; }

.price-foot { margin-top: 26px; font-size: 13.5px; color: var(--faint); max-width: 76ch; }

/* Each package/payment combination is rendered server-side and toggled by
   class, so the whole price list is in the HTML for search engines and for
   anyone whose JavaScript fails. */
.pricing-pane[hidden] { display: none; }
.pay-im .pay-ot, .pay-ot .pay-im { display: none; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.faq { max-width: 780px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 24px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.06rem;
  display: flex;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-inline-start: auto;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 300;
  color: var(--cyan);
  line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq-a { padding: 20px 24px; color: var(--muted); font-size: 15.5px; }

/* ── prose ─────────────────────────────────────────────────────────────── */

.prose { max-width: 46rem; }
.prose h3 { font-size: 1.4rem; margin: 2.2em 0 .6em; }
.prose h3:first-child { margin-top: 0; }
.prose p { color: var(--muted); margin-bottom: 1.1em; }
.prose p:last-child { margin-bottom: 0; }
.prose ul { color: var(--muted); padding-inline-start: 1.3em; margin-bottom: 1.1em; }
.prose li { margin-bottom: .5em; }

.callout {
  border-inline-start: 3px solid var(--cyan);
  background: var(--surface-2);
  padding: 20px 24px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 1.8em 0;
  font-size: 15px;
  color: var(--muted);
}
[dir="rtl"] .callout { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }

/* ── CTA band ──────────────────────────────────────────────────────────── */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(44px, 6vw, 74px) clamp(24px, 4vw, 48px);
  text-align: center;
}
.cta-band::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--grad); }
.cta-band::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(460px 200px at 50% 0%, rgba(38,134,252,.14), transparent 70%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { margin-bottom: 16px; }
.cta-band p { color: var(--muted); max-width: 52ch; margin: 0 auto 30px; }
.cta-band .btns { justify-content: center; }

/* ── contact ───────────────────────────────────────────────────────────── */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 56px); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-line { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-line:last-child { border-bottom: 0; }
.contact-line .ico {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: rgba(38, 134, 252, .16);
  color: var(--accent);
  display: grid; place-items: center;
}
.contact-line .ico svg { width: 18px; height: 18px; }
.contact-line .k {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); font-weight: 700; margin-bottom: 3px;
}
[lang="ar"] .contact-line .k { letter-spacing: 0; text-transform: none; font-size: 13px; }
.contact-line .v { font-size: 16px; color: var(--ink); }
.contact-line .v a:hover { color: var(--cyan); text-decoration: underline; }
.contact-line .v .pending { color: var(--faint); font-size: 15px; }

.form-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: transparent; }
.form-note { font-size: 12.5px; color: var(--faint); margin-top: 14px; }

/* ── footer ────────────────────────────────────────────────────────────── */

.site-footer { background: var(--footer); border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 72px) 28px; }
.footer-top {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) { .footer-top { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand p { color: var(--muted); font-size: 14.5px; margin-top: 16px; max-width: 34ch; }
.footer-col h4 {
  font-family: var(--sans);
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); font-weight: 700; margin-bottom: 16px;
}
[lang="ar"] .footer-col h4 { letter-spacing: 0; text-transform: none; font-size: 13.5px; }
.footer-col a { display: block; color: var(--muted); font-size: 14.5px; margin-bottom: 11px; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center;
}
.footer-bottom .spacer { margin-inline-start: auto; }

/* ── 404 ───────────────────────────────────────────────────────────────── */

.notfound { text-align: center; padding-block: clamp(70px, 12vw, 140px); }
.notfound .code {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(4rem, 12vw, 7.5rem);
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}
.notfound .lead { margin-inline: auto; }
.notfound ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin: 30px 0; }
.notfound a { color: var(--cyan); }

/* ── print ─────────────────────────────────────────────────────────────── */

@media print {
  .site-header, .cta-band, .hero-aura, .btns, .hero-cta { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  h1, h2, h3, .tier, .tp-v { color: #000; }
  .lead, p, .tp-list li { color: #222; }
  .tier-card, .value-card, .pkg-card { border: 1px solid #ccc; background: none; break-inside: avoid; }
  .pricing-pane[hidden] { display: block !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITIES
   These exist because the Content-Security-Policy sets `style-src 'self'` with
   no `'unsafe-inline'`, so inline style attributes are dropped by the browser.
   Anything that previously used one is a class now.
   ═══════════════════════════════════════════════════════════════════════════ */

.u-center       { text-align: center; }
.u-center-x     { margin-inline: auto; }
.u-measure      { max-width: 74ch; }
.u-btns-center  { justify-content: center; }
.u-stack-sm     { margin-block: 14px 22px; }
.u-stack-md     { margin-bottom: 26px; }
.u-step-gap     { margin-bottom: 24px; }
.u-note         { font-size: 15px; margin-top: 18px; }
.u-form-intro   { font-size: 15px; margin: 10px 0 24px; }
.u-full         { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION

   House rules:
   · Nothing animates on load except the hero — everything else waits until it
     is scrolled into view, so the page is not busy before it is read.
   · Only `transform` and `opacity` are animated. Those run on the compositor;
     animating width, height or top forces layout on every frame and turns a
     mid-range Android into a slideshow.
   · Stagger comes from :nth-of-type(), never an inline custom property — see
     the CSP note above.
   · Every rule here is switched off wholesale by the reduced-motion block at
     the end of this file. Vestibular disorders are not an edge case, and iOS
     users turn Reduce Motion on for battery.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── hero aura ─────────────────────────────────────────────────────────────
   The aura is the one thing that moves unprompted. It sits behind the headline
   at low opacity, so it reads as atmosphere rather than as something demanding
   attention. */

.aura-core { animation: breathe 7s var(--ease) infinite; transform-origin: 300px 300px; }

.aura-ring { transform-origin: 300px 300px; animation: ringPulse 9s var(--ease) infinite; }
.aura-ring:nth-of-type(1) { animation-delay: 0s; }
.aura-ring:nth-of-type(2) { animation-delay: .5s; }
.aura-ring:nth-of-type(3) { animation-delay: 1s; }
.aura-ring:nth-of-type(4) { animation-delay: 1.5s; }
.aura-ring:nth-of-type(5) { animation-delay: 2s; }

.aura-orbit { transform-origin: 300px 300px; animation: spin 34s linear infinite; }
.aura-orbit--slow { animation-duration: 76s; animation-direction: reverse; }

.mote { transform-origin: 300px 300px; animation: drift 16s var(--ease) infinite; }
.mote:nth-of-type(1) { animation-delay: 0s; }
.mote:nth-of-type(2) { animation-delay: -4s; }
.mote:nth-of-type(3) { animation-delay: -8s; }
.mote:nth-of-type(4) { animation-delay: -12s; }

@keyframes breathe  { 0%, 100% { transform: scale(1); opacity: .85; }
                      50%      { transform: scale(1.09); opacity: 1; } }
@keyframes ringPulse{ 0%, 100% { transform: scale(1); }
                      50%      { transform: scale(1.022); } }
@keyframes drift    { 0%, 100% { transform: rotate(0) translateY(0); opacity: .8; }
                      50%      { transform: rotate(180deg) translateY(-8px); opacity: .3; } }

/* ── the hero headline arrives ─────────────────────────────────────────────
   A short, one-time entrance. Anything longer than about 700ms starts to feel
   like waiting rather than like polish. */

.hero-grid > div > * { animation: heroIn .7s var(--ease) both; }
.hero-grid > div > *:nth-child(1) { animation-delay: .05s; }
.hero-grid > div > *:nth-child(2) { animation-delay: .13s; }
.hero-grid > div > *:nth-child(3) { animation-delay: .21s; }
.hero-grid > div > *:nth-child(4) { animation-delay: .29s; }
.hero-grid > div > *:nth-child(5) { animation-delay: .37s; }
.hero-grid > div:last-child { animation: heroIn .8s var(--ease) .22s both; }

@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } }

/* ── scroll reveal ─────────────────────────────────────────────────────────
   `.reveal` starts visible in CSS and the script adds `.reveal--armed` before
   hiding anything. If the script never runs, nothing is ever hidden — a page
   that is invisible without JavaScript is the worst possible failure here. */

.reveal--armed { opacity: 0; transform: translateY(18px); }
.reveal--armed.in { opacity: 1; transform: none;
  transition: opacity .65s var(--ease), transform .65s var(--ease); }

/* ── live status dot ───────────────────────────────────────────────────────
   The one moving element inside the ALYA card. It is doing real work: it says
   "this is a live system" without a word of copy. */

.rc-dot { position: relative; }
.rc-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--cyan);
  animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(.6); opacity: .9; }
                  70%, 100% { transform: scale(1.9); opacity: 0; } }

/* ── ALYA card ─────────────────────────────────────────────────────────────
   The package chips settle in one after another, which reads as capabilities
   being switched on — the exact claim the card is making. */

@keyframes orbFloat { 0%, 100% { transform: translateY(0); }
                      50%      { transform: translateY(-6px); } }

.alya-pkg { transition: border-color .25s var(--ease), transform .25s var(--ease); }
.alya-pkg:hover { border-color: var(--line-strong); transform: translateX(2px); }
[dir="rtl"] .alya-pkg:hover { transform: translateX(-2px); }
.alya-pkg .d { animation: dotPop 4.5s var(--ease) infinite; }
.alya-pkg:nth-of-type(1) .d { animation-delay: 0s; }
.alya-pkg:nth-of-type(2) .d { animation-delay: .3s; }
.alya-pkg:nth-of-type(3) .d { animation-delay: .6s; }
.alya-pkg:nth-of-type(4) .d { animation-delay: .9s; }
@keyframes dotPop { 0%, 82%, 100% { transform: scale(1); }
                    88%           { transform: scale(1.7); } }

/* ── package card scenes ───────────────────────────────────────────────────
   These loop, because the point is to show the behaviour rather than a still of
   it — so they are gated on `.playing`, which the script toggles as the card
   enters and leaves the viewport. They deliberately do NOT use `.in`: that class
   is one-shot and shared with the scroll reveal, so removing it to pause a scene
   would also fade the card back out. */

.sc-scene { position: relative; }
.pkg-card .scene { opacity: .55; transition: opacity .4s var(--ease); }
.pkg-card:hover .scene, .pkg-card:focus-within .scene { opacity: 1; }

/* ── AI CHAT ───────────────────────────────────────────────────────────────
   A message arrives, she thinks, the answer lands — and the channel rail shows
   which inbox it came in on. */

.playing .scene--chat .s-in { animation: msgIn 6s var(--ease) infinite; transform-origin: left center; }
[dir="rtl"] .playing .scene--chat .s-in { transform-origin: right center; }
.playing .scene--chat .s-in:nth-of-type(1) { animation-delay: 0s; }
.playing .scene--chat .s-in:nth-of-type(2) { animation-delay: 1.1s; }
.playing .scene--chat .s-in:nth-of-type(3) { animation-delay: 2.6s; }
@keyframes msgIn { 0%       { opacity: 0; transform: translateY(7px) scale(.96); }
                   10%, 84% { opacity: 1; transform: none; }
                   100%     { opacity: 0; } }

.playing .scene--chat .ch-typing { animation: msgIn 6s var(--ease) 3.6s infinite; }
.playing .scene--chat .typing { animation: typing 1.2s var(--ease) infinite; }
.playing .scene--chat .typing:nth-of-type(2) { animation-delay: .15s; }
.playing .scene--chat .typing:nth-of-type(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; }
                    30%           { transform: translateY(-4px); opacity: 1; } }

/* The active channel travels down the rail, so the card says "every channel,
   one inbox" without a word of copy. */
.playing .scene--chat .ch-dot { animation: chanIdle 6s var(--ease) infinite; }
.playing .scene--chat .ch-dot:nth-of-type(1) { animation-name: chanOn; animation-delay: 0s; }
.playing .scene--chat .ch-dot:nth-of-type(2) { animation-name: chanOn; animation-delay: 1.5s; }
.playing .scene--chat .ch-dot:nth-of-type(3) { animation-name: chanOn; animation-delay: 3s; }
.playing .scene--chat .ch-dot:nth-of-type(4) { animation-name: chanOn; animation-delay: 4.5s; }
@keyframes chanIdle { 0%, 100% { opacity: .25; } }
@keyframes chanOn   { 0%, 100% { opacity: .22; transform: scale(1); }
                      8%       { opacity: 1;   transform: scale(1.6); }
                      22%      { opacity: .5;  transform: scale(1); } }
.scene--chat .ch-dot { transform-box: fill-box; transform-origin: center; }

/* ── AI VOICE ──────────────────────────────────────────────────────────────
   Speech-shaped waveform, a playhead crossing it, and rings leaving the
   mouthpiece as she speaks. */

.playing .scene--voice .bar { transform-origin: center 75px; animation: speak 1.1s var(--ease) infinite; }
.playing .scene--voice .bar:nth-of-type(3n+1) { animation-duration: .9s; }
.playing .scene--voice .bar:nth-of-type(3n+2) { animation-duration: 1.35s; }
.playing .scene--voice .bar:nth-of-type(4n)   { animation-duration: .72s; }
.playing .scene--voice .bar:nth-of-type(1)  { animation-delay: -.05s; }
.playing .scene--voice .bar:nth-of-type(2)  { animation-delay: -.42s; }
.playing .scene--voice .bar:nth-of-type(3)  { animation-delay: -.18s; }
.playing .scene--voice .bar:nth-of-type(4)  { animation-delay: -.66s; }
.playing .scene--voice .bar:nth-of-type(5)  { animation-delay: -.30s; }
.playing .scene--voice .bar:nth-of-type(6)  { animation-delay: -.88s; }
.playing .scene--voice .bar:nth-of-type(7)  { animation-delay: -.12s; }
.playing .scene--voice .bar:nth-of-type(8)  { animation-delay: -.54s; }
.playing .scene--voice .bar:nth-of-type(9)  { animation-delay: -.24s; }
.playing .scene--voice .bar:nth-of-type(10) { animation-delay: -.72s; }
.playing .scene--voice .bar:nth-of-type(11) { animation-delay: -.38s; }
.playing .scene--voice .bar:nth-of-type(12) { animation-delay: -.92s; }
.playing .scene--voice .bar:nth-of-type(13) { animation-delay: -.16s; }
.playing .scene--voice .bar:nth-of-type(14) { animation-delay: -.60s; }
.playing .scene--voice .bar:nth-of-type(15) { animation-delay: -.28s; }
.playing .scene--voice .bar:nth-of-type(16) { animation-delay: -.80s; }
@keyframes speak { 0%, 100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }

.scene--voice .vc-rings circle { transform-box: fill-box; transform-origin: center; opacity: 0; }
.playing .scene--voice .vc-rings circle { animation: emit 3s cubic-bezier(.16,.7,.3,1) infinite; }
.playing .scene--voice .vc-rings circle:nth-of-type(2) { animation-delay: 1.5s; }
.scene--voice .vc-mouth { transform-box: fill-box; transform-origin: center; }
.playing .scene--voice .vc-mouth { animation: breathe 3s var(--ease) infinite; }

.playing .scene--voice .vc-head { animation: playhead 5.5s linear infinite; }
@keyframes playhead { 0% { transform: translateX(0); opacity: 0; }
                      6%, 94% { opacity: .7; }
                      100% { transform: translateX(232px); opacity: 0; } }
[dir="rtl"] .playing .scene--voice .vc-head { animation-name: playheadRtl; }
@keyframes playheadRtl { 0% { transform: translateX(0); opacity: 0; }
                         6%, 94% { opacity: .7; }
                         100% { transform: translateX(232px); opacity: 0; } }

/* ── AI ADMIN ──────────────────────────────────────────────────────────────
   The queue drains: each item ticks off, its line dims, and the bar tracks it. */

.playing .scene--admin .task-tick { stroke-dasharray: 22; stroke-dashoffset: 22;
  animation: draw 5.5s var(--ease) infinite; }
.playing .scene--admin .task:nth-of-type(1) .task-tick { animation-delay: .2s; }
.playing .scene--admin .task:nth-of-type(2) .task-tick { animation-delay: 1.4s; }
.playing .scene--admin .task:nth-of-type(3) .task-tick { animation-delay: 2.6s; }

.scene--admin .task-box { transform-box: fill-box; transform-origin: center; }
.playing .scene--admin .task-box { animation: boxFill 5.5s var(--ease) infinite; }
.playing .scene--admin .task:nth-of-type(1) .task-box { animation-delay: .2s; }
.playing .scene--admin .task:nth-of-type(2) .task-box { animation-delay: 1.4s; }
.playing .scene--admin .task:nth-of-type(3) .task-box { animation-delay: 2.6s; }

.playing .scene--admin .task-line { animation: lineDone 5.5s var(--ease) infinite; }
.playing .scene--admin .task:nth-of-type(1) .task-line { animation-delay: .2s; }
.playing .scene--admin .task:nth-of-type(2) .task-line { animation-delay: 1.4s; }
.playing .scene--admin .task:nth-of-type(3) .task-line { animation-delay: 2.6s; }

.scene--admin .ad-progress { transform-box: fill-box; transform-origin: left center; }
[dir="rtl"] .scene--admin .ad-progress { transform-origin: right center; }
.playing .scene--admin .ad-progress { animation: progress 5.5s var(--ease) infinite; }

@keyframes draw     { 0%, 3% { stroke-dashoffset: 22; } 14%, 90% { stroke-dashoffset: 0; }
                      100%   { stroke-dashoffset: 22; } }
@keyframes boxFill  { 0%, 3% { opacity: .22; transform: scale(.9); }
                      14%, 90% { opacity: 1; transform: scale(1); }
                      100%   { opacity: .22; transform: scale(.9); } }
@keyframes lineDone { 0%, 3% { opacity: 1; } 16%, 90% { opacity: .3; } 100% { opacity: 1; } }
@keyframes progress { 0%   { transform: scaleX(0); }
                      12%  { transform: scaleX(.33); }
                      34%  { transform: scaleX(.66); }
                      56%, 90% { transform: scaleX(1); }
                      100% { transform: scaleX(0); } }

/* ── AI MARKETING ──────────────────────────────────────────────────────────
   Bars grow, the trend draws itself over them, the points land. */

.scene--marketing .mk-bars rect { transform-box: fill-box; transform-origin: bottom; }
.playing .scene--marketing .mk-bars rect { animation: grow 7s var(--ease) infinite; }
.playing .scene--marketing .mk-bars rect:nth-of-type(1) { animation-delay: .1s; }
.playing .scene--marketing .mk-bars rect:nth-of-type(2) { animation-delay: .25s; }
.playing .scene--marketing .mk-bars rect:nth-of-type(3) { animation-delay: .40s; }
.playing .scene--marketing .mk-bars rect:nth-of-type(4) { animation-delay: .55s; }
.playing .scene--marketing .mk-bars rect:nth-of-type(5) { animation-delay: .70s; }
.playing .scene--marketing .mk-bars rect:nth-of-type(6) { animation-delay: .85s; }
@keyframes grow { 0%, 2% { transform: scaleY(0); } 16%, 90% { transform: scaleY(1); }
                  100%   { transform: scaleY(0); } }

.playing .scene--marketing .mk-line { stroke-dasharray: 330; stroke-dashoffset: 330;
  animation: draw2 7s var(--ease) infinite; }
.playing .scene--marketing .mk-fill { animation: fadeLoop 7s var(--ease) infinite; }
.scene--marketing .mk-dots circle { transform-box: fill-box; transform-origin: center; }
.playing .scene--marketing .mk-dots circle { animation: popIn 7s var(--ease) infinite; }
.playing .scene--marketing .mk-dots circle:nth-of-type(1) { animation-delay: 1.0s; }
.playing .scene--marketing .mk-dots circle:nth-of-type(2) { animation-delay: 1.3s; }
.playing .scene--marketing .mk-dots circle:nth-of-type(3) { animation-delay: 1.6s; }
.playing .scene--marketing .mk-dots circle:nth-of-type(4) { animation-delay: 1.9s; }
.playing .scene--marketing .mk-dots circle:nth-of-type(5) { animation-delay: 2.2s; }
.playing .scene--marketing .mk-dots circle:nth-of-type(6) { animation-delay: 2.5s; }
@keyframes draw2    { 0%, 12% { stroke-dashoffset: 330; } 46%, 90% { stroke-dashoffset: 0; }
                      100%    { stroke-dashoffset: 330; } }
@keyframes fadeLoop { 0%, 18% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes popIn    { 0%, 12% { opacity: 0; transform: scale(0); }
                      20%, 90% { opacity: 1; transform: scale(1); }
                      100%    { opacity: 0; transform: scale(0); } }

/* ── section artwork ───────────────────────────────────────────────────────── */

.art { width: 100%; height: auto; }
.art--orbit { max-width: 420px; margin-inline: auto; }

.in .art--orbit .spoke { stroke-dasharray: 130; stroke-dashoffset: 130;
  animation: drawSpoke 1.1s var(--ease) forwards; }
.in .art--orbit .spoke:nth-of-type(1) { animation-delay: .1s; }
.in .art--orbit .spoke:nth-of-type(2) { animation-delay: .2s; }
.in .art--orbit .spoke:nth-of-type(3) { animation-delay: .3s; }
.in .art--orbit .spoke:nth-of-type(4) { animation-delay: .4s; }
.in .art--orbit .spoke:nth-of-type(5) { animation-delay: .5s; }
.in .art--orbit .spoke:nth-of-type(6) { animation-delay: .6s; }
.in .art--orbit .spoke:nth-of-type(7) { animation-delay: .7s; }
@keyframes drawSpoke { to { stroke-dashoffset: 0; } }

.in .art--orbit .node { transform-box: fill-box; transform-origin: center;
  animation: nodeIn .5s var(--ease) both; }
.in .art--orbit .node:nth-of-type(1) { animation-delay: .35s; }
.in .art--orbit .node:nth-of-type(2) { animation-delay: .45s; }
.in .art--orbit .node:nth-of-type(3) { animation-delay: .55s; }
.in .art--orbit .node:nth-of-type(4) { animation-delay: .65s; }
.in .art--orbit .node:nth-of-type(5) { animation-delay: .75s; }
.in .art--orbit .node:nth-of-type(6) { animation-delay: .85s; }
.in .art--orbit .node:nth-of-type(7) { animation-delay: .95s; }
@keyframes nodeIn { from { opacity: 0; transform: scale(.4); } }

.art--orbit .orbit-core { transform-box: fill-box; transform-origin: center;
  animation: breathe 5.5s var(--ease) infinite; }

@keyframes drawLine { to { stroke-dashoffset: 0; } }
.in .art--process .process-fill { stroke-dasharray: 520; stroke-dashoffset: 520;
  animation: drawLine 2.2s var(--ease) .2s forwards; }
.in .art--process .process-stops circle { transform-box: fill-box; transform-origin: center;
  animation: nodeIn .45s var(--ease) both; }
.in .art--process .process-stops circle:nth-of-type(1) { animation-delay: .2s; }
.in .art--process .process-stops circle:nth-of-type(2) { animation-delay: .8s; }
.in .art--process .process-stops circle:nth-of-type(3) { animation-delay: 1.4s; }
.in .art--process .process-stops circle:nth-of-type(4) { animation-delay: 2s; }

/* ── checklist panel ───────────────────────────────────────────────────── */

.in .checklist li { animation: pointIn .45s var(--ease) both; }
.in .checklist li:nth-of-type(1) { animation-delay: .1s; }
.in .checklist li:nth-of-type(2) { animation-delay: .2s; }
.in .checklist li:nth-of-type(3) { animation-delay: .3s; }
.in .checklist li:nth-of-type(4) { animation-delay: .4s; }
.in .checklist li:nth-of-type(5) { animation-delay: .5s; }

/* ── interaction polish ────────────────────────────────────────────────────── */

.value-card .ico { transition: transform .3s var(--ease), background .3s var(--ease); }
.value-card:hover .ico { transform: scale(1.08) rotate(-4deg); background: rgba(38,134,252,.26); }

.pkg-card, .tier-card { transition: transform .25s var(--ease), border-color .25s var(--ease); }
.tier-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }

/* The price re-renders on toggle; a quick fade stops the number snapping. */
.tp-v { transition: color .2s var(--ease); }
.tier-cards, .bespoke { animation: fadeIn .35s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } }

.chip { transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease); }
.chip:hover { border-color: var(--line-strong); background: rgba(255,255,255,.07); transform: translateY(-2px); }

.faq summary::after { transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(180deg); }

.nav-links a, .footer-col a { transition: color .2s var(--ease); }

/* ── reduced motion ────────────────────────────────────────────────────────
   One switch that stops everything above. Content still appears — nothing here
   is the only way to see something. */

@media (prefers-reduced-motion: reduce) {
  .aura-core, .aura-ring, .aura-orbit, .mote, .rc-dot::after,
  .alya-pkg .d, .hero-grid > div > *, .hero-grid > div:last-child,
  .scene *, .art *, .checklist li, .sc-step,
  .tier-cards, .bespoke {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .reveal--armed, .reveal--armed.in { opacity: 1 !important; transform: none !important; }
  .pkg-card .scene { opacity: 1; }
}

/* ── artwork placement ─────────────────────────────────────────────────────
   Three shapes of illustration slot, so a drawing never dictates the layout
   around it. */

.art-wrap  { display: grid; place-items: center; }
.art-hero  { max-width: 400px; margin: 0 auto clamp(36px, 5vw, 56px); }
.art-track { max-width: 720px; margin: 0 auto clamp(28px, 4vw, 46px); }

.chip-stack { display: grid; gap: clamp(28px, 4vw, 44px); align-content: start; }

@media (max-width: 900px) {
  .art-wrap { order: -1; max-width: 340px; margin-inline: auto; }
  .art-hero { max-width: 300px; }
}

/* ── wordmark ──────────────────────────────────────────────────────────────
   "RT" carries the two ends of the brand gradient; "AI SOLUTIONS" sits back so
   the monogram reads first at small sizes. */

/* ═══════════════════════════════════════════════════════════════════════════
   ALYA — the product's identity

   The company mark is a rounded square; ALYA's is a circle. That difference is
   doing work: a circle reads as an avatar, a square reads as a logo, so the two
   sitting together look like a company and its product rather than two brands
   competing for the same slot.

   The animation is the point of the mark, not an addition to it. A static orb
   is a logo; an orb that emits, listens and breathes is a presence — which is
   what "an AI employee" has to feel like within a second of landing.
   ═══════════════════════════════════════════════════════════════════════════ */

.alya-hero { display: grid; place-items: center; margin: 6px 0 16px; }
.alya-mark { width: 150px; height: 150px; overflow: visible; }

/* ── the orb ─────────────────────────────────────────────────────────────── */

.alya-mark .mk-glow { animation: breathe 6.5s var(--ease) infinite; }

.alya-mark .mk-orb { animation: orbFloat 6.5s var(--ease) infinite; }
/* Only the base disc casts the shadow — putting it on all three layers triples
   the blur cost for no visible gain. */
.alya-mark .mk-orb:nth-of-type(1) {
  filter: drop-shadow(0 14px 30px rgba(38, 134, 252, .5));
}

/* ── presence: rings leaving the orb ─────────────────────────────────────── */

.alya-mark .mk-signal circle {
  animation: emit 4.2s cubic-bezier(.16, .7, .3, 1) infinite;
  opacity: 0;
}
.alya-mark .mk-signal circle:nth-of-type(2) { animation-delay: 1.4s; }
.alya-mark .mk-signal circle:nth-of-type(3) { animation-delay: 2.8s; }
@keyframes emit {
  0%   { transform: scale(.96); opacity: 0; }
  12%  { opacity: .55; }
  100% { transform: scale(1.72); opacity: 0; }
}

/* ── reach: counter-rotating arcs ────────────────────────────────────────── */

/* transform-origin is set on the <g>, not on each path — a path's own fill-box
   is its bounding box, so rotating about "center" would spin each arc on itself
   rather than around the orb. */
.alya-mark .mk-arcs { transform-origin: 80px 80px; }
.alya-mark .mk-arc  { transform-origin: 80px 80px; }
.alya-mark .mk-arc:nth-of-type(1) { animation: spin 20s linear infinite; }
.alya-mark .mk-arc:nth-of-type(2) { animation: spin 20s linear infinite; }
.alya-mark .mk-arc:nth-of-type(3) { animation: spin 32s linear infinite reverse; }
.alya-mark .mk-arc:nth-of-type(4) { animation: spin 32s linear infinite reverse; }
.alya-mark .mk-arc:nth-of-type(5) { animation: spin 54s linear infinite; }
.alya-mark .mk-arc:nth-of-type(6) { animation: spin 54s linear infinite; }

.alya-mark .mk-motes { transform-origin: 80px 80px; animation: spin 30s linear infinite reverse; }
.alya-mark .mk-glow, .alya-mark .mk-orb, .alya-mark .mk-signal circle {
  transform-origin: 80px 80px;
}

/* ── the glyph ───────────────────────────────────────────────────────────── */

/* The legs draw on and the crossbar dot lands after — she assembles rather than
   simply appearing. Runs once; a looping logo is a distraction, not a feature. */
.alya-mark .mk-glyph path {
  stroke-dasharray: 92;
  stroke-dashoffset: 92;
  animation: drawGlyph 1.1s var(--ease) .25s forwards;
}
.alya-mark .mk-bar {
  transform-box: fill-box; transform-origin: center;
  animation: barIn .45s var(--ease) 1.15s both;
}
@keyframes drawGlyph { to { stroke-dashoffset: 0; } }
@keyframes barIn { from { opacity: 0; transform: scale(0); } }

/* Hover: she leans in. Cheap, and it makes the card feel like an object. */
.alya-card:hover .alya-mark .mk-orb { animation-duration: 3.2s; }
.alya-card:hover .alya-mark .mk-arc:nth-of-type(1) { animation-duration: 9s; }
.alya-card:hover .alya-mark .mk-arc:nth-of-type(2) { animation-duration: 13s; }

/* The card lifts slightly on hover — it is the hero object, it should feel
   like an object. */
.alya-card { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.alya-card:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(0,0,0,.42), 0 40px 80px rgba(0,0,0,.4); }

@media (prefers-reduced-motion: reduce) {
  .alya-mark *, .alya-pulse .pbar, .alya-card {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

.panel-stack { display: grid; gap: 20px; align-content: start; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION, SECOND PASS

   Everything below still obeys the house rules: transform and opacity only,
   nothing starts until it is on screen, and the reduced-motion block at the end
   of this file switches all of it off.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── directional reveals ───────────────────────────────────────────────────
   A grid that arrives from below and a split that arrives from the side reads
   as composed rather than as one uniform fade repeated forty times. */

.split .split-body.reveal--armed  { transform: translate3d(-22px, 0, 0); }
.split .panel-stack.reveal--armed { transform: translate3d(22px, 0, 0); }
[dir="rtl"] .split .split-body.reveal--armed  { transform: translate3d(22px, 0, 0); }
[dir="rtl"] .split .panel-stack.reveal--armed { transform: translate3d(-22px, 0, 0); }
.split .split-body.reveal--armed.in,
.split .panel-stack.reveal--armed.in { transform: none; }

@media (max-width: 900px) {
  /* Sideways motion on a narrow screen risks a horizontal scrollbar. */
  .split .split-body.reveal--armed,
  .split .panel-stack.reveal--armed { transform: translate3d(0, 18px, 0); }
}

/* ── bullet points arrive in sequence ──────────────────────────────────── */

.in .point-list li { animation: pointIn .5s var(--ease) both; }
.in .point-list li:nth-of-type(1) { animation-delay: .08s; }
.in .point-list li:nth-of-type(2) { animation-delay: .16s; }
.in .point-list li:nth-of-type(3) { animation-delay: .24s; }
.in .point-list li:nth-of-type(4) { animation-delay: .32s; }
.in .point-list li:nth-of-type(5) { animation-delay: .40s; }
.in .point-list li:nth-of-type(6) { animation-delay: .48s; }
@keyframes pointIn { from { opacity: 0; transform: translateY(8px); } }

/* the marker draws itself rather than simply being there */
.in .point-list li::before { animation: dotIn .45s var(--ease) both; }
.in .point-list li:nth-of-type(1)::before { animation-delay: .18s; }
.in .point-list li:nth-of-type(2)::before { animation-delay: .26s; }
.in .point-list li:nth-of-type(3)::before { animation-delay: .34s; }
.in .point-list li:nth-of-type(4)::before { animation-delay: .42s; }
.in .point-list li:nth-of-type(5)::before { animation-delay: .50s; }
.in .point-list li:nth-of-type(6)::before { animation-delay: .58s; }
@keyframes dotIn { from { transform: scale(0); } }

/* ── the step track fills as you read it ──────────────────────────────── */

.step.in { position: relative; }
.step.in::after {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  height: 1px;
  width: 0;
  background: var(--grad);
  animation: fillTrack .9s var(--ease) forwards;
}
.steps .step.in:nth-of-type(1)::after { animation-delay: .1s; }
.steps .step.in:nth-of-type(2)::after { animation-delay: .3s; }
.steps .step.in:nth-of-type(3)::after { animation-delay: .5s; }
.steps .step.in:nth-of-type(4)::after { animation-delay: .7s; }
@keyframes fillTrack { to { width: 100%; } }

/* ── table rows settle in ─────────────────────────────────────────────── */

.table-wrap.in tbody tr { animation: pointIn .45s var(--ease) both; }
.table-wrap.in tbody tr:nth-of-type(1) { animation-delay: .05s; }
.table-wrap.in tbody tr:nth-of-type(2) { animation-delay: .11s; }
.table-wrap.in tbody tr:nth-of-type(3) { animation-delay: .17s; }
.table-wrap.in tbody tr:nth-of-type(4) { animation-delay: .23s; }
.table-wrap.in tbody tr:nth-of-type(5) { animation-delay: .29s; }
.table-wrap.in tbody tr:nth-of-type(6) { animation-delay: .35s; }
/* the ALYA column glows on arrival, so the eye lands on the right column */
.table-wrap.in tbody td:last-child { animation: colGlow 1.4s var(--ease) .4s both; }
@keyframes colGlow {
  0%   { background: rgba(38,134,252,.06); }
  35%  { background: rgba(38,134,252,.20); }
  100% { background: rgba(38,134,252,.06); }
}

/* ── chips cascade ────────────────────────────────────────────────────── */

.in .chips .chip { animation: chipIn .4s var(--ease) both; }
.in .chips .chip:nth-of-type(1) { animation-delay: .04s; }
.in .chips .chip:nth-of-type(2) { animation-delay: .09s; }
.in .chips .chip:nth-of-type(3) { animation-delay: .14s; }
.in .chips .chip:nth-of-type(4) { animation-delay: .19s; }
.in .chips .chip:nth-of-type(5) { animation-delay: .24s; }
.in .chips .chip:nth-of-type(6) { animation-delay: .29s; }
.in .chips .chip:nth-of-type(7) { animation-delay: .34s; }
@keyframes chipIn { from { opacity: 0; transform: translateY(8px) scale(.94); } }

/* ── package cards ────────────────────────────────────────────────────── */

.pkg-card { position: relative; overflow: hidden; }
/* A gradient hairline wipes across the top edge on hover — the same device the
   CTA band and the featured price card already use, so it reads as a family. */
.pkg-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
[dir="rtl"] .pkg-card::before { transform-origin: right; }
a.pkg-card:hover::before, a.pkg-card:focus-visible::before { transform: scaleX(1); }
a.pkg-card:hover .pkg-more .arrow { transform: translateX(4px); }
[dir="rtl"] a.pkg-card:hover .pkg-more .arrow { transform: scaleX(-1) translateX(4px); }
.pkg-more .arrow { transition: transform .25s var(--ease); }

/* ── value cards ──────────────────────────────────────────────────────── */

.value-card.in { animation: cardIn .55s var(--ease) both; }
.value-grid .value-card.in:nth-of-type(1) { animation-delay: .05s; }
.value-grid .value-card.in:nth-of-type(2) { animation-delay: .12s; }
.value-grid .value-card.in:nth-of-type(3) { animation-delay: .19s; }
.value-grid .value-card.in:nth-of-type(4) { animation-delay: .26s; }
.value-grid .value-card.in:nth-of-type(5) { animation-delay: .33s; }
.value-grid .value-card.in:nth-of-type(6) { animation-delay: .40s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }

/* ── the CTA band's top hairline sweeps ───────────────────────────────── */

.cta-band.in::before { animation: sweep 1.1s var(--ease) .2s both; transform-origin: left; }
[dir="rtl"] .cta-band.in::before { transform-origin: right; }
@keyframes sweep { from { transform: scaleX(0); } }

/* ── buttons get a light sweep on hover ───────────────────────────────── */

.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease);
  pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(120%); }

/* ── the brand tile breathes ──────────────────────────────────────────── */

/* ── FAQ answers slide rather than snap ───────────────────────────────── */

.faq details[open] .faq-a { animation: faqIn .35s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }

/* ── pricing cards ────────────────────────────────────────────────────── */

.tier-cards .tier-card.in:nth-of-type(1) { animation-delay: .05s; }
.tier-cards .tier-card.in:nth-of-type(2) { animation-delay: .13s; }
.tier-cards .tier-card.in:nth-of-type(3) { animation-delay: .21s; }
.tier-card.featured::before { transform-origin: left; animation: sweep 1s var(--ease) .3s both; }
[dir="rtl"] .tier-card.featured::before { transform-origin: right; }

@media (prefers-reduced-motion: reduce) {
  .point-list li, .point-list li::before, .step::after, tbody tr, tbody td:last-child,
  .chips .chip, .value-card, .cta-band::before, .btn-primary::after, .tier-card,
  .wm-mark { animation: none !important; }
  .tier-card.featured::before, .faq-a, .pkg-card::before {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3D

   Real perspective, not a drop-shadow pretending to be depth. Three techniques,
   used sparingly enough that they still read as craft rather than as a demo of
   CSS:

     1. **Perspective containers.** A grid gets `perspective`, so its children
        can rotate in a shared vanishing point instead of each having their own.
     2. **Layered depth.** Inside a card, elements are pushed apart on the Z
        axis with `translateZ`, so tilting the card makes the contents move
        against each other — which is what actually sells depth. A flat tilt
        just looks like a skewed rectangle.
     3. **Pointer tilt.** The card follows the cursor, driven by two custom
        properties the script writes. Set through the CSSOM, never as an inline
        style attribute — the CSP blocks those.

   Everything is transform-only, so it stays on the compositor, and all of it is
   switched off by the reduced-motion block at the end of this file. 3D motion is
   the single worst offender for vestibular discomfort, so that is not optional.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── perspective containers ────────────────────────────────────────────── */

.pkg-grid,
.value-grid,
.tier-cards,
.hero-grid,
.steps { perspective: 1400px; perspective-origin: 50% 40%; }

/* ── cards arrive by rotating up out of the page ───────────────────────── */

.pkg-card.in   { animation: card3dIn .85s var(--ease) both; }
.value-card.in { animation: card3dIn .8s  var(--ease) both; }
.tier-card.in  { animation: card3dIn .8s  var(--ease) both; }

.pkg-grid .pkg-card.in:nth-of-type(1) { animation-delay: .05s; }
.pkg-grid .pkg-card.in:nth-of-type(2) { animation-delay: .13s; }
.pkg-grid .pkg-card.in:nth-of-type(3) { animation-delay: .21s; }
.pkg-grid .pkg-card.in:nth-of-type(4) { animation-delay: .29s; }

@keyframes card3dIn {
  from {
    opacity: 0;
    transform: perspective(1400px) rotateX(14deg) translate3d(0, 26px, -60px);
  }
  to {
    opacity: 1;
    transform: perspective(1400px) rotateX(0) translate3d(0, 0, 0);
  }
}

/* ── pointer tilt ──────────────────────────────────────────────────────── */

/* `.tilt` is added by the script only on devices with a real pointer — a tilt
   that responds to a fingertip is just a jitter. */
.tilt {
  transform-style: preserve-3d;
  transition: transform .35s var(--ease);
  will-change: transform;
}
.tilt.is-tilting { transition: transform .08s linear; }
.tilt.is-tilting,
.tilt:hover {
  transform:
    perspective(1400px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translate3d(0, var(--lift), 22px);
}

/* Contents sit at different depths, so the tilt parallaxes them against each
   other. Without this the card is a skewed rectangle, not an object. */
.tilt .sc-scene   { transform: translateZ(28px); }
.tilt .pkg-head   { transform: translateZ(20px); }
.tilt .pkg-line   { transform: translateZ(12px); }
.tilt .pkg-more   { transform: translateZ(16px); }
.tilt .ico        { transform: translateZ(26px); }
.tilt h3          { transform: translateZ(16px); }
.tilt .tier       { transform: translateZ(22px); }
.tilt .tier-price { transform: translateZ(18px); }
.tilt .price-badge{ transform: translateZ(30px); }

/* A glare that tracks the pointer. Cheap, and it is what makes the surface read
   as glass rather than as a rotated div. */
.tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--gx, 50%) var(--gy, 0%),
    rgba(255, 255, 255, .09),
    transparent 45%);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
  z-index: 4;
}
.tilt.is-tilting::after { opacity: 1; }

.value-card, .tier-card { position: relative; }

/* ── the ALYA card gains depth ─────────────────────────────────────────── */

/* Depth is applied to the HTML elements around the mark, never to shapes inside
   the SVG. Two reasons: 3D transforms on SVG children are unreliable across
   browsers, and a static `translateZ` on an element that is already animating
   `transform` simply loses — the animation wins and the depth silently vanishes.
   Layering the wrappers gets the same parallax and keeps every animation. */
.alya-card { transform-style: preserve-3d; perspective: 1000px; }
.alya-card .alya-hero  { transform: translateZ(40px); }
.alya-card .alya-name  { transform: translateZ(28px); }
.alya-card .alya-sub   { transform: translateZ(22px); }
.alya-card .alya-pulse { transform: translateZ(18px); }
.alya-card .alya-pkgs  { transform: translateZ(12px); }
.alya-card .alya-stats { transform: translateZ(8px); }
.alya-card .alya-top   { transform: translateZ(16px); }

/* ── the hero drifts with the pointer ──────────────────────────────────── */

.hero-grid > div:last-child {
  transform-style: preserve-3d;
  transition: transform .6s var(--ease);
}
.hero.is-tracking .hero-grid > div:last-child {
  transform: perspective(1600px)
             rotateY(calc(var(--px, 0) * 4deg))
             rotateX(calc(var(--py, 0) * -3deg))
             translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 8px), 0);
}
/* The aura sits further back, so it moves less — the whole point of parallax. */
.hero.is-tracking .hero-aura {
  transform: translate3d(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -12px), 0);
  transition: transform .8s var(--ease);
}

/* ── section artwork lifts off the page ────────────────────────────────── */

.art-wrap { perspective: 1200px; }
.in .art--orbit {
  animation: art3dIn 1.2s var(--ease) both;
  transform-style: preserve-3d;
}
@keyframes art3dIn {
  from { opacity: 0; transform: perspective(1200px) rotateX(22deg) scale(.9) translateZ(-80px); }
  to   { opacity: 1; transform: perspective(1200px) rotateX(0) scale(1) translateZ(0); }
}

/* ── the brand tile flips ──────────────────────────────────────────────── */

.brand { perspective: 500px; }

/* ── the CTA band tips toward you ──────────────────────────────────────── */

.cta-band.in { animation: band3dIn 1s var(--ease) both; }
@keyframes band3dIn {
  from { opacity: 0; transform: perspective(1600px) rotateX(8deg) translateZ(-50px); }
  to   { opacity: 1; transform: perspective(1600px) rotateX(0) translateZ(0); }
}

/* ── the comparison table settles ──────────────────────────────────────── */

.table-wrap { perspective: 1800px; }
.table-wrap.in table { animation: card3dIn .9s var(--ease) both; }

/* ── buttons press inward ──────────────────────────────────────────────── */

.btn { transform-style: preserve-3d; }
.btn:active { transform: perspective(600px) translateZ(-6px) scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .pkg-card, .value-card, .tier-card, .cta-band, .table-wrap table,
  .art--orbit, .alya-card, .tilt, .tilt::after,
  .hero-grid > div:last-child, .hero-aura, .btn:active {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .alya-card .alya-hero, .alya-card .alya-name, .alya-card .alya-sub,
  .alya-card .alya-pulse, .alya-card .alya-pkgs, .alya-card .alya-stats,
  .alya-card .alya-top { transform: none !important; }
}

/* Touch devices get the entrances but never the tilt — there is no pointer to
   follow, and `:hover` on touch sticks after a tap. */
@media (hover: none) {
  .tilt:hover { transform: none; }
  .tilt::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEXTURE

   The logo artwork is not flat black — it has a fine tooth, and deep atmospheric
   glows behind the mark. A large dark area with neither reads as cheap, and
   shows visible banding wherever a radial gradient falls off.

   Two layers, both fixed to the viewport so they never scroll with content:
     · a tiled grain sheet at 3.5% — enough to break up the flat fill and kill
       the banding, not enough to notice on its own
     · two wide brand-coloured glows, one cool and one magenta, sitting far
       enough apart to suggest depth rather than a spotlight
   ═══════════════════════════════════════════════════════════════════════════ */

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* atmosphere */
body::before {
  background:
    radial-gradient(1100px 700px at 78% -10%, rgba(38, 134, 252, .16), transparent 62%),
    radial-gradient(900px 640px at 8% 108%,  rgba(241, 6, 199, .10), transparent 60%),
    radial-gradient(700px 520px at 50% 45%,  rgba(84, 77, 232, .06), transparent 70%);
}

/* grain */
body::after {
  background-image: url("/assets/img/grain.png");
  background-repeat: repeat;
  background-size: 140px 140px;
  opacity: .035;
  mix-blend-mode: overlay;
}

/* Content must sit above both layers, and anything with its own background
   needs a stacking context or the glows bleed through it. */
.site-header, main, .site-footer { position: relative; z-index: 1; }

/* Section bands are translucent now, so the atmosphere shows through them
   rather than blocking it — which is what makes the page feel deep instead of
   striped. */
.band { background: rgba(7, 7, 26, .72); backdrop-filter: blur(1px); }

.hero { position: relative; z-index: 1; }

/* Cards get a hairline of brand light along their top edge — the same device as
   the logo's arcs, at 1px. */
.pkg-card, .value-card, .tier-card, .alya-card, .panel, .proof, .photo-frame {
  background-image: linear-gradient(rgba(140, 170, 255, .04), transparent 120px);
}

/* ── package card capabilities ─────────────────────────────────────────────
   Three concrete things per package, so all four are described at the same
   depth. Without these the Chat card was carried by the rest of the homepage
   while Voice, Admin and Marketing had one line each. */

.pkg-points {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.pkg-points li {
  position: relative;
  padding-inline-start: 15px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--faint);
  margin: 0;
}
.pkg-points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--grad);
}
a.pkg-card:hover .pkg-points li { color: var(--muted); }
.pkg-points li { transition: color .25s var(--ease); }

/* The comparison is per-package now, so the first column carries product names
   rather than one-word labels and needs more room. */
tbody th { min-width: 11rem; }

/* ── comparison table on a phone ───────────────────────────────────────────
   As a horizontally scrolling table, the final column — the one that says what
   ALYA actually does — sat off the right edge. A visitor could read the whole
   "how it works today" column and never reach the payoff. Nobody scrolls a
   table sideways on a phone unless something tells them to.

   Below 780px each row becomes a card: the package name as a heading, then the
   two columns stacked with their headings printed above them, and the ALYA
   column visibly emphasised so it reads as the answer rather than as a second
   paragraph. */

@media (max-width: 780px) {
  .table-wrap {
    overflow: visible;
    border: 0;
    background: none;
    border-radius: 0;
  }

  table { min-width: 0; width: 100%; }

  /* The column headings are printed per-cell via data-label, so the real thead
     is redundant visually — but kept in the accessibility tree. */
  thead {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  tbody, tbody tr, tbody th, tbody td { display: block; width: 100%; }

  tbody tr {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 14px;
    overflow: hidden;
  }
  tbody tr:last-child { margin-bottom: 0; }

  tbody th {
    font-size: 1.15rem;
    padding: 18px 18px 0;
    border: 0;
    min-width: 0;
  }

  tbody td {
    padding: 12px 18px 18px;
    border: 0;
    font-size: 14.5px;
  }

  tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    letter-spacing: .11em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--faint);
    margin-bottom: 7px;
  }

  /* The ALYA column, made unmissable. */
  tbody td:last-child {
    background: rgba(38, 134, 252, .09);
    border-top: 1px solid var(--line);
    color: var(--ink);
    position: relative;
  }
  tbody td:last-child::before { color: var(--cyan); }
  tbody td:last-child::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--grad);
  }

  [lang="ar"] tbody td::before { text-transform: none; letter-spacing: 0; font-size: 12px; }

  /* The row-arrival stagger is written for table rows; as cards it should come
     from below like every other card on the page. */
  .table-wrap.in tbody tr { animation: cardIn .5s var(--ease) both; }
  .table-wrap.in tbody td:last-child { animation: none; background: rgba(38, 134, 252, .09); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCENARIO PANELS

   A short scene that plays itself, one per package. The chat conversation was
   the most persuasive thing on the packages page and the other three had
   bullet lists, so a visitor came away having *watched* Chat work and merely
   *read* about the rest.

   Four modes rather than one chat window with different words in it: a
   conversation, a phone call, a morning of admin clearing, a week of content
   shipping. Each demonstrates its own kind of work.

   Steps cascade in on a shared cycle, hold, then cascade out and repeat —
   gated on `.playing`, so a panel that is off-screen is not animating.
   ═══════════════════════════════════════════════════════════════════════════ */

.scenario { --cycle: 15s; --gap: 1.5s; }
.sc-body { padding: 18px; display: grid; gap: 11px; }

.sc-step { opacity: 0; }
/* Without JS nothing toggles `.playing`, so show everything rather than an
   empty panel. */
.scenario:not(.playing) .sc-step { opacity: 1; }

.playing .sc-step { animation: scStep var(--cycle) var(--ease) infinite; }
.playing .sc-step:nth-of-type(1) { animation-delay: calc(var(--gap) * 0); }
.playing .sc-step:nth-of-type(2) { animation-delay: calc(var(--gap) * 1); }
.playing .sc-step:nth-of-type(3) { animation-delay: calc(var(--gap) * 2); }
.playing .sc-step:nth-of-type(4) { animation-delay: calc(var(--gap) * 3); }
.playing .sc-step:nth-of-type(5) { animation-delay: calc(var(--gap) * 4); }

@keyframes scStep {
  0%       { opacity: 0; transform: translateY(9px) scale(.985); }
  5%, 62%  { opacity: 1; transform: none; }
  70%, 100%{ opacity: 0; transform: translateY(-4px); }
}

.sc-text { display: block; }
.sc-step small {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.45;
  opacity: .72;
}

/* ── chat & call ───────────────────────────────────────────────────────── */

.sc-msg {
  max-width: 88%;
  padding: 11px 15px;
  border-radius: 15px;
  font-size: 14.5px;
  line-height: 1.55;
}
.sc-msg--in  { background: var(--surface-3); border-start-start-radius: 5px; margin-inline-end: auto; }
.sc-msg--out { background: var(--accent-solid); color: #fff; border-start-end-radius: 5px; margin-inline-start: auto; }

.sc-who {
  display: block;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .6;
  margin-bottom: 4px;
}
[lang="ar"] .sc-who { letter-spacing: 0; text-transform: none; font-size: 11.5px; }

/* The waveform sits above the call and moves only while ALYA is the one
   speaking — she stops listening while she talks, and the panel should not
   imply otherwise. */
.sc-wave { padding: 14px 18px 0; }
.sc-wave .alya-pulse { width: 100%; max-width: none; opacity: .3; margin: 0; transition: opacity .4s var(--ease); }
.sc-wave .alya-pulse .pbar { animation-play-state: paused; }
.playing .scenario--call .sc-wave .alya-pulse,
.scenario--call.playing .sc-wave .alya-pulse { opacity: .95; }
.scenario--call.playing .sc-wave .alya-pulse .pbar { animation-play-state: running; }

/* ── admin tasks ───────────────────────────────────────────────────────── */

.sc-task {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .02);
  font-size: 14px;
  line-height: 1.5;
}
.sc-tick {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(16, 185, 129, .16);
  color: #34D399;
  margin-top: 1px;
}
.sc-task--wait { background: rgba(255,255,255,.04); color: var(--muted); }
.sc-task--wait .sc-tick { background: rgba(255,255,255,.06); color: var(--faint); }
.sc-task--wait .sc-tick svg { opacity: .35; }
.sc-task--done .sc-text { color: var(--ink); }

/* ── marketing week ────────────────────────────────────────────────────── */

.sc-post {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: start;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .02);
  font-size: 14px;
  line-height: 1.5;
}
.sc-day {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
  padding-top: 2px;
}
[lang="ar"] .sc-day { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
@media (max-width: 420px) { .sc-post { grid-template-columns: 1fr; gap: 4px; } }

/* Five-step scenes need a longer cycle than four-step ones, or the last step
   barely appears before the reset. */
.scenario[data-steps="5"] { --cycle: 17s; }

@media (prefers-reduced-motion: reduce) {
  .sc-step { opacity: 1 !important; animation: none !important; transform: none !important; }
  .sc-wave .alya-pulse { opacity: .6 !important; }
  .sc-wave .alya-pulse .pbar { animation: none !important; }
}

/* ── address ───────────────────────────────────────────────────────────────
   Multi-line on the contact page, because someone reads it off a phone while
   standing in a lobby — a single wrapped line is much harder to follow. */

.contact-line .addr { display: block; line-height: 1.55; }
.addr-map {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan);
}
.addr-map:hover { text-decoration: underline; }
.addr-map .arrow { transition: transform .2s var(--ease); display: inline-block; }
.addr-map:hover .arrow { transform: translateX(3px); }
[dir="rtl"] .addr-map:hover .arrow { transform: scaleX(-1) translateX(3px); }

.footer-addr {
  padding-top: 22px;
  margin-top: 4px;
}
.footer-addr .mono { color: var(--faint); }

/* The company name in body copy carries the logo's colour coding. The wordmark
   rules set their own weight and tracking, so reset those here — this is a name
   inside a sentence, not a lockup. */
.prose .wm-r, .prose .wm-t { font-weight: inherit; letter-spacing: inherit; font-size: inherit; }

/* ── the single price on the page ──────────────────────────────────────────
   One entry figure, stated once and given real weight. Per-tier numbers were
   removed deliberately: what a client pays depends on channels, volume and
   which third parties are involved, and a figure sitting on a page invites a
   comparison against a competitor selling something different. */

.starts-at {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto clamp(36px, 5vw, 54px);
  padding: clamp(26px, 4vw, 38px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.starts-at::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 2px; background: var(--grad);
}
.starts-at__label {
  display: block;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--faint); margin-bottom: 12px;
}
[lang="ar"] .starts-at__label { letter-spacing: 0; text-transform: none; font-size: 13.5px; }
.starts-at__figure {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
  letter-spacing: -.02em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[lang="ar"] .starts-at__figure { font-family: "Cairo", sans-serif; letter-spacing: 0; }
.starts-at__note {
  display: block;
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 40rem;
  margin-inline: auto;
}

.tp-quote {
  margin: 20px 0 18px;
  padding: 10px 0;
  border-block: 1px solid var(--line);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cyan);
  text-align: center;
}
[lang="ar"] .tp-quote { letter-spacing: 0; text-transform: none; font-size: 14px; }

.pricing-controls { justify-content: center; }
.bespoke-side { min-width: 0; }