@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. */
  /* Header height. The lockup drives it: the RT mark is sized to match the
     width of "AI SOLUTIONS" beneath it, which makes the mark ~87px tall, and
     the bar has to contain that. Everything that has to line up with the
     header — the mobile menu's top edge, its max-height, the scroll offset
     for in-page anchors — reads this instead of repeating a literal. */
  --nav-h: 74px;
  --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 the artwork rather than eyedropping a guess. The mark's own
     legs are cyan and pink and they cross through a pale lavender, so the whole
     palette sits warmer and lighter than the indigo-heavy set it replaces. */
  --cyan:         #2DDEFE;
  --accent:       #30B8FF;   /* the logo's blue-cyan — borders, glows, fills */
  --accent-hover: #6FD3FF;

  /* 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: #0E6FA8;   /* 5.44:1 */
  --accent-solid-hover: #1478B8;  /* 4.76:1 */
  --violet:       #BBADFF;
  --magenta:      #FF41A9;

  /* 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, #2DDEFE 0%, #30B8FF 32%, #BBADFF 64%, #FF41A9 100%);
  --grad-soft: linear-gradient(100deg,
      rgba(45, 222, 254,.16) 0%, rgba(48, 184, 255,.16) 32%,
      rgba(187, 173, 255,.16) 64%, rgba(255, 65, 169,.16) 100%);

  --serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-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(48, 184, 255,.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: "Cairo", "Noto Sans Arabic", system-ui, sans-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: calc(var(--nav-h) + 20px);
}

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(48, 184, 255, .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: 600;
  line-height: 1.08;
  letter-spacing: -.022em;
  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: var(--nav-h); }

/* ── 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 {
  /* inline-block, so the box shrinks to the widest of its two lines. */
  display: inline-block;
  line-height: 1;
  /* THE single knob for the whole lockup, and it has to live here rather than on
     .wm-main. .wm-sub is a SIBLING of .wm-main, not a child, so an em on the
     sub-line resolves against this element. When the size sat on .wm-main the
     sub-line silently took the body's 17px instead of the intended 19px — it
     rendered 11% small and stopped scaling at the breakpoints entirely, because
     those only moved .wm-main. Both lines now measure against this one value. */
  font-size: 19px;
}

/* 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. */


/* The R and the T glow. Two keyframe sets rather than one, because each letter
   glows in its own end of the ramp — a single shared animation would have to
   pick one colour and the pair would stop reading as a gradient.

   drop-shadow rather than text-shadow: these glyphs are painted by a
   background clipped to the text, and drop-shadow works on what was actually
   rendered, so the halo follows the letter. It also stays correct if the fill
   ever changes. The global prefers-reduced-motion rule stops both. */
@keyframes wmGlowR {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(45, 222, 254, .45))
                     drop-shadow(0 0 7px rgba(45, 222, 254, .28)); }
  50%      { filter: drop-shadow(0 0 3px rgba(45, 222, 254, .75))
                     drop-shadow(0 0 13px rgba(45, 222, 254, .5)); }
}
@keyframes wmGlowT {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 65, 169, .45))
                     drop-shadow(0 0 7px rgba(255, 65, 169, .28)); }
  50%      { filter: drop-shadow(0 0 3px rgba(255, 65, 169, .75))
                     drop-shadow(0 0 13px rgba(255, 65, 169, .5)); }
}

/* 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(45, 222, 254, 1))
          drop-shadow(0 0 30px rgba(48, 184, 255, .7));
  animation: none;
}

.wm-main {
  display: block;
  font-weight: 300;          /* thin — a wordmark, not a headline */
  font-size: .95em;
  letter-spacing: .15em;
  /* Tracking adds space after the final E too, which would push the word off
     centre against the line beneath it. Pull it back. */
  margin-inline-end: -.15em;
  line-height: 1.05;
  color: var(--ink);
  white-space: nowrap;
}

/* The R and the T — the two letters the company shortens to. Each carries one
   end of the brand ramp rather than the whole of it, so together they read as
   the same cyan-to-pink sweep the ALYA mark makes, just interrupted by the
   letters in between. background-clip:text needs the -webkit- prefix as well;
   without it Safari paints a gradient block over the glyph. */
.wm-hi {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wm-hi--r {
  background-image: linear-gradient(150deg, #2DDEFE 0%, #45C4FF 100%);
  animation: wmGlowR 4.2s var(--ease) infinite;
}
.wm-hi--t {
  background-image: linear-gradient(150deg, #A78BFF 0%, #FF41A9 100%);
  /* offset so the two breathe alternately rather than in lockstep, which reads
     as one flashing object instead of two letters */
  animation: wmGlowT 4.2s var(--ease) -2.1s infinite;
}

/* Hovering the lockup takes both to full. */
.brand:hover .wm-hi--r { animation-duration: 1.9s; }
.brand:hover .wm-hi--t { animation-duration: 1.9s; }


/* 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, #2DDEFE 0%, #30B8FF 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.wm-t { color: var(--magenta); }

.wm-sub {
  font-family: var(--sans);
  font-weight: 400;
  /* In em, not px, so the descriptor scales with .wm-main exactly as the mark
     does. Against the 19px base this is the 8.5px it has always rendered at, but
     it now holds its proportion at the mobile sizes too — previously the mark
     shrank on small screens while this line stayed 8.5px and overhung it. */
  font-size: .447em;
  letter-spacing: .5537em;
  /* Tracking adds space after the final S as well, which would push the line
     off-centre under the mark. Pull it back. */
  margin-inline-end: -.5537em;
  /* block, not inline — margin-top is ignored on an inline box, so the pull-up
     below would silently do nothing. */
  display: block;
  /* A positive nudge now, where the signature needed a negative one: that
     artwork carried 17px of invisible padding on its bottom edge and the
     sub-line had to be pulled up through it. The monogram's viewBox is cropped
     to its ink, so the box ends exactly where the letters end and the two lines
     would otherwise touch. In em of this element, which is itself em of
     .brand-wm, so it holds at every breakpoint. */
  margin-top: .34em;
  color: var(--muted);
  white-space: nowrap;
}
.wm-ai { color: var(--accent); font-weight: 500; }

/* The A in "AI SOLUTIONS" is the ALYA glyph rather than a typed A.
   Sized to the letter it replaces: 0.661em is Inter's advance width for A and
   0.727em its cap height, so the line's total width does not move and .wm-mark
   stays flush with it. The viewBox is cropped to the ink, and an inline SVG
   aligns its bottom edge to the baseline, so the letter sits on the baseline
   with no nudging. It fits by height and centres in the advance, which gives it
   the side bearings a letter would have. currentColor takes the accent from
   .wm-ai so the A and the I match. */
.wm-a {
  /* REQUIRED. The blanket "img, svg" rule near the top of this file sets
     display block on every svg, and it applies here too. A block-level glyph
     takes its own line, which put the A above the I instead of beside it.
     This is a letter, so it has to be inline; inline-block rather than inline
     so that width and height are honoured. */
  display: inline-block;
  /* Deliberately bigger than the letters it sits among — at cap height and in a
     flat colour this shape was indistinguishable from a typed A. Wider than the
     .661em advance A would occupy, which is why .wm-mark is 4.39em rather than
     4.3em: the line is 1.18px wider now, and the mark tracks it to stay flush. */
  /* 1.1628em wide to 1em tall — the artwork's own aspect. Pinning a different
     ratio would distort it, so the width follows the height rather than being
     chosen. Tracking below absorbs the change in line width. */
  width: 1.1628em;
  height: 1em;
  /* Taller than the strut's 7.34px ascent, so it grows the line box by 0.91px
     and would push the whole line down. .wm-sub's margin-top carries an equal
     correction — change either and the sub-line drifts away from the mark. */
  vertical-align: -.05em;
}

/* The wordmark is a mark, not copy — it stays Latin on the Arabic pages so
   nothing inherits Cairo. */
[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. */

/* The lockup scales as a unit because the mark is sized in em: dropping the
   wordmark's font-size shrinks the mark with it, so the bar can come down too. */
@media (max-width: 640px) {
  :root { --nav-h: 68px; }
  .brand-wm { font-size: 16px; }
}
@media (max-width: 420px) {
  :root { --nav-h: 64px; }
  .wm-sub { display: none; }   /* mark alone — no descriptor to match */
  .brand-wm { font-size: 15px; }
}

.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: var(--nav-h);
    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 - var(--nav-h));
    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; }
/* Cairo sets its diacritics higher than the naskh serif did, so a display
   line that was comfortable at 1.35 now brings a shadda within a hair of
   the descender above it. Arabic display text carrying marks wants more
   leading than Latin, not less. */
[lang="ar"] .hero h1 { line-height: 1.5; }
.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: 18px;
  overflow: hidden;
}
.sc-scene svg { width: 100%; height: auto; }
/* The heading now leads the card, above the illustration, so this margin
   opens the gap down to the picture rather than to the paragraph. */
.pkg-head { display: flex; align-items: baseline; gap: 11px; margin-bottom: 13px; }
.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(48, 184, 255, .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(45, 222, 254, .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(48, 184, 255, .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(45, 222, 254,.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(48, 184, 255, .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(45, 222, 254, .4);
  background: rgba(45, 222, 254, .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(48, 184, 255,.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(48, 184, 255, .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; }

/* ── footer on phones ──────────────────────────────────────────────────────
   Two things go wrong below the breakpoint where .footer-bottom wraps.

   First, `.spacer` pushes the tagline to the right so the two sit at opposite
   ends of one row. The moment they wrap onto separate lines that auto margin
   is still in force, so the tagline lands mid-line — measured at x=123 on a
   390px screen while every other block starts at x=26. That single stranded
   line is what reads as "the page is not aligned".

   Second, the footer is simply too loud for a phone: at the desktop sizes it
   ran 782px tall, so it took most of a screen to say very little. Everything
   below trims type and spacing rather than changing the design. */
@media (max-width: 640px) {
  .footer-bottom { gap: 6px; padding-top: 18px; }
  .footer-bottom .spacer { margin-inline-start: 0; }   /* align with everything else */
  .footer-bottom .mono { font-size: 11.5px; line-height: 1.5; }

  .site-footer { padding-block: 40px 22px; }
  .footer-top { gap: 24px; padding-bottom: 24px; }
  .footer-col h4 { font-size: 10.5px; margin-bottom: 10px; }
  .footer-col a { font-size: 13px; margin-bottom: 7px; line-height: 1.45; }
  .footer-brand p { font-size: 13px; line-height: 1.5; }
  .footer-addr, .footer-addr .mono { font-size: 11.5px; line-height: 1.5; }
}

/* ── 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(48, 184, 255,.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; }
/* The ALYA mark is the supplied artwork, so it is an <img> rather than the
   drawn SVG this once was. Every .mk-* rule that used to animate its arcs,
   orbs, motes and glyph went with it — they matched nothing once the SVG was
   gone, and dead selectors are worse than no selectors because they read as
   working code. The identity now comes from the artwork itself; all that is
   left here is a slow breath so the hero is not completely static.

   Sized on width with height auto: the artwork is 1.1628 wide to 1 tall, and
   pinning both axes to 150px would squash it. */
.alya-mark {
  width: 150px;
  height: auto;
  animation: alyaBreathe 7s var(--ease) infinite;
}

@keyframes alyaBreathe {
  0%, 100% { transform: scale(1);     filter: drop-shadow(0 0 10px rgba(48, 184, 255, .30)); }
  50%      { transform: scale(1.035); filter: drop-shadow(0 0 22px rgba(255, 65, 169, .34)); }
}

/* Hover: she leans in. Cheap, and it makes the card feel like an object. */
.alya-card:hover .alya-mark { animation-duration: 3.4s; }

/* 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(48, 184, 255,.06); }
  35%  { background: rgba(48, 184, 255,.20); }
  100% { background: rgba(48, 184, 255,.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(48, 184, 255, .16), transparent 62%),
    radial-gradient(900px 640px at 8% 108%,  rgba(255, 65, 169, .10), transparent 60%),
    radial-gradient(700px 520px at 50% 45%,  rgba(187, 173, 255, .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. */
/* Lift the page above the fixed atmosphere layers. The header is deliberately
   NOT in this list: it declares `position: sticky; z-index: 100` of its own, and
   naming it here flattened it to 1 — the same as main. With equal z-index the
   later element in the document wins, so <main> painted over the open mobile
   menu and every tap on a nav link landed on the hero section behind it. The
   menu looked fine and did nothing, which is the worst kind of broken. */
main, .site-footer { position: relative; z-index: 1; }
.site-header { position: sticky; z-index: 100; }

/* 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); -webkit-backdrop-filter:blur(1px);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(48, 184, 255, .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(48, 184, 255, .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;
  /* was a generic success green — the last off-palette colour on the site */
  background: rgba(45, 222, 254, .16);
  color: #2DDEFE;
  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; }


/* ═══════════════════════════════════════════════════════════════════════════
   LIFT — the grounds raised a few steps.
   Still night, just not pitch. Every surface moves together so the layering
   between page, card and inset is preserved; text and the brand ramp are
   untouched, so contrast only softens slightly rather than degrading.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* new-design tokens */
  --night:#0E1024; --night-2:#171A2F; --night-3:#212540; --night-4:#2B3052;
  /* original-stylesheet tokens */
  --bg:#0E1024; --surface:#171A2F; --surface-2:#1D2138; --surface-3:#262B45;
  --footer:#0B0D1E;
  --line:rgba(150,178,255,.15); --line-strong:rgba(150,178,255,.28);
  --rule:rgba(150,178,255,.15); --rule-2:rgba(150,178,255,.28);
}
html,body{background:var(--bg,var(--night))}
header{background:rgba(14,16,36,.80)}
.site-header{background:rgba(14,16,36,.86)}
.band{background:rgba(29,33,56,.55)}
.ticker{background:var(--night-2)}
footer,.site-footer{background:var(--footer)}
/* the mark disc stays deep so the neon artwork still has something to glow on */
.mark,.brand .disc{background:radial-gradient(circle at 50% 40%,#1A1E3C 0%,#0B0C1E 62%,#070814 100%)}

/* ── header controls: win back their own styling ──────────────────────────
   `.nav-links a` is (0,1,1); `.btn`, `.btn-primary`, `.btn-sm` and
   `.lang-switch` are all (0,1,0). Because the call-to-action and the language
   switch are anchors sitting inside `.nav-links`, the nav-link rule silently
   out-specified every one of them:

     border-radius  40px pill      -> 8px, so both read as squared chips
     padding        10px 18px      -> 8px 14px
     font-size      14px           -> 15px
     colour         #fff on blue   -> muted grey on blue, only 2.57:1

   That grey-on-blue label is the visible part. Restored with selectors that
   actually win, and pinned to the same 42px height as the newer header so the
   two components match across the site. */
.nav-links .btn,
.nav-links .lang-switch{
  height:42px;padding-block:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:40px
}
.nav-links .btn{padding-inline:20px;font-size:14px;font-weight:500}
.nav-links .btn-primary{color:#fff}
.nav-links .btn-primary:hover{color:#fff}
.nav-links .lang-switch{padding-inline:16px;font-size:13.5px}
@media (max-width:900px){
  .nav-links .nav-cta .btn,
  .nav-links .nav-cta .lang-switch{width:100%}
}


/* ── chat widget rules that CSP blocks at the widget's end ────────────────── */
/* The widget's own <style> element is refused under style-src 'self'; these are
   the exact rules it tries to insert, declared same-origin so they apply. The
   shared widget itself is not modified. */
@keyframes alyaPulse{
  0%{box-shadow:0 10px 30px rgba(2,6,23,.20),0 0 0 0 #0E6FA840}
  70%{box-shadow:0 10px 30px rgba(2,6,23,.20),0 0 0 16px #0E6FA800}
  100%{box-shadow:0 10px 30px rgba(2,6,23,.20),0 0 0 0 #0E6FA800}
}
#alya-input::placeholder,#alya-name::placeholder{color:#8A94AE;opacity:1}


/* ── social links in the footer ─────────────────────────────────────────────
   Two networks, sitting under the brand blurb. Icons are inline SVG so they
   take the link's own colour and cost no extra requests; the stroke is set on
   the group rather than per shape so hover only has one thing to change. */

.social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.so {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--faint);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.so:hover, .so:focus-visible {
  color: #EAF0FF;
  border-color: rgba(45, 222, 254, .55);
  background: rgba(45, 222, 254, .10);
}
.so:focus-visible { outline: 2px solid #2DDEFE; outline-offset: 2px; }
.so svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* the two dots are solid, not outlined */
.so svg .so-dot { fill: currentColor; stroke: none; }