/* ---------- tokens: light is the base, dark only re-points them ---------- */
  :root {
    --bg: #FBF9F7; --bg-alt: #F3EFEA; --surface: #FFFFFF;
    --border: #E6DFD7; --border-strong: #D2C7BB;
    --text: #171412; --text-secondary: #59524B; --text-muted: #7C7268;
    --primary: #F2761F; --primary-hover: #E35D1B; --primary-active: #C7431A; --on-primary: #FFFFFF;
    --focus: #C7431A;
    --success: #3BAA5C; --success-bg: #E9F7EE;
    --warning: #E0A526; --warning-bg: #FBF1DC;
    --error: #D6304B; --error-bg: #FBE7EA;
    --info: #2F80ED; --info-bg: #E8F1FD;

    --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px;
    --radius-lg: 24px; --radius-xl: 32px; --radius-full: 999px;

    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

    --shadow-sm: 0 2px 6px rgba(23,20,18,.07);
    --shadow-md: 0 8px 20px rgba(23,20,18,.09);
    --shadow-lg: 0 20px 48px rgba(23,20,18,.14);
    --shadow-xl: 0 40px 90px rgba(23,20,18,.18);
    --shadow-glow: 0 10px 26px rgba(242,118,31,.28);

    /* The aurora's three lights. Separate tokens because dark mode needs them
       both dimmer and more saturated to survive on a near-black ground. */
    --aurora-1: rgba(242,118,31,.38);
    --aurora-2: rgba(47,128,237,.22);
    --aurora-3: rgba(224,165,38,.26);
    --mesh-line: rgba(23,20,18,.045);

    --font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: 'Baloo 2', ui-rounded, var(--font-fallback);
    --font-body: 'Nunito', ui-rounded, var(--font-fallback);
    --font-arabic: 'Cairo', ui-rounded, var(--font-fallback);

    --ease-out: cubic-bezier(.2, 0, 0, 1);
    --ease-spring: cubic-bezier(.22, 1.2, .36, 1);

    --maxw: 1140px;
  }

  /* Cairo carries both roles in Arabic — same rounded terminals, so the
     identity survives the script change. */
  html[lang="ar"] {
    --font-display: var(--font-arabic);
    --font-body: var(--font-arabic);
  }

  /* Dark tokens are declared twice on purpose: once for the system preference
     (unless the visitor has explicitly chosen light) and once for the explicit
     toggle, so the toggle wins in both directions. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0F0D0C; --bg-alt: #171412; --surface: #1D1A17;
      --border: #3D3833; --border-strong: #59524B;
      --text: #FBF9F7; --text-secondary: #D2C7BB; --text-muted: #A99C8E;
      --primary: #FA8A3D; --primary-hover: #FFAD6B; --primary-active: #F2761F; --on-primary: #171412;
      --focus: #FFAD6B;
      --success: #4CC26E; --success-bg: #16281D;
      --warning: #F0BB4D; --warning-bg: #2E2413;
      --error: #F0576D; --error-bg: #2E161B;
      --info: #5B9BF5; --info-bg: #16233A;
      --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
      --shadow-md: 0 10px 24px rgba(0,0,0,.45);
      --shadow-lg: 0 24px 56px rgba(0,0,0,.55);
      --shadow-xl: 0 48px 110px rgba(0,0,0,.65);
      --shadow-glow: 0 10px 26px rgba(250,138,61,.32);
      --aurora-1: rgba(250,138,61,.30);
      --aurora-2: rgba(91,155,245,.20);
      --aurora-3: rgba(240,187,77,.18);
      --mesh-line: rgba(251,249,247,.05);
    }
  }
  :root[data-theme="dark"] {
    --bg: #0F0D0C; --bg-alt: #171412; --surface: #1D1A17;
    --border: #3D3833; --border-strong: #59524B;
    --text: #FBF9F7; --text-secondary: #D2C7BB; --text-muted: #A99C8E;
    --primary: #FA8A3D; --primary-hover: #FFAD6B; --primary-active: #F2761F; --on-primary: #171412;
    --focus: #FFAD6B;
    --success: #4CC26E; --success-bg: #16281D;
    --warning: #F0BB4D; --warning-bg: #2E2413;
    --error: #F0576D; --error-bg: #2E161B;
    --info: #5B9BF5; --info-bg: #16233A;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
    --shadow-md: 0 10px 24px rgba(0,0,0,.45);
    --shadow-lg: 0 24px 56px rgba(0,0,0,.55);
    --shadow-xl: 0 48px 110px rgba(0,0,0,.65);
    --shadow-glow: 0 10px 26px rgba(250,138,61,.32);
    --aurora-1: rgba(250,138,61,.30);
    --aurora-2: rgba(91,155,245,.20);
    --aurora-3: rgba(240,187,77,.18);
    --mesh-line: rgba(251,249,247,.05);
  }

  /* ---------- base ---------- */
  *, *::before, *::after { box-sizing: border-box; }
  /* `overflow-x: clip` is the backstop against anything else ever widening the
     page. `clip`, not `hidden`: `hidden` makes html a scroll container, which
     breaks the sticky header, and on body alone it does not stop a phone from
     scrolling sideways — which is why body's existing `hidden` did not help. */
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0; letter-spacing: -.015em; }
  h1 { font-size: clamp(2.3rem, 6vw, 3.9rem); font-weight: 800; }
  h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
  h3 { font-size: 1.16rem; font-weight: 700; }
  p  { margin: 0; }
  img { max-width: 100%; display: block; }

  a { color: var(--primary); text-decoration: none; }
  a:hover { text-decoration: underline; }

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

  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-5); }
  section { padding: clamp(64px, 10vw, 116px) 0; position: relative; }

  .skip {
    position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
    background: var(--surface); color: var(--text);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full); box-shadow: var(--shadow-md);
  }
  .skip:focus { inset-inline-start: var(--space-4); top: var(--space-4); }

  /* ---------- motion primitives ----------

     `.js-on` is set by the script. Without it every reveal is fully visible and
     unanimated, which is what a visitor with a blocked or failed script must
     get: a complete page, never an empty one. */
  .js-on .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity .7s var(--ease-out),
      transform .7s var(--ease-out);
  }
  .js-on .reveal.in { opacity: 1; transform: none; }

  /* Stagger is a custom property set inline per child, so one rule serves any
     number of items without a class per index. */
  .js-on .reveal { transition-delay: calc(var(--i, 0) * 70ms); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
    }
    /* Reveals resolve to their finished state rather than animating to it. */
    .js-on .reveal { opacity: 1 !important; transform: none !important; }
    .aurora, .float, .orbit { display: none !important; }
  }

  /* ---------- decorative background ---------- */

  /* Three blurred lights drifting behind the hero. `filter: blur` on a large
     element is expensive to repaint, so they animate only `transform`, which
     the compositor can handle without touching the paint. */
  .aurora {
    position: absolute; inset: -20% -10% auto -10%; height: 130%;
    pointer-events: none; z-index: 0; overflow: hidden;
  }
  .aurora i {
    position: absolute; display: block;
    border-radius: var(--radius-full);
    filter: blur(90px);
    will-change: transform;
  }
  .aurora i:nth-child(1) {
    width: 46vw; height: 46vw; min-width: 320px; min-height: 320px;
    inset-inline-start: -6vw; top: -8vw;
    background: var(--aurora-1);
    animation: drift-a 22s var(--ease-out) infinite alternate;
  }
  .aurora i:nth-child(2) {
    width: 38vw; height: 38vw; min-width: 260px; min-height: 260px;
    inset-inline-end: -4vw; top: 4vw;
    background: var(--aurora-2);
    animation: drift-b 27s var(--ease-out) infinite alternate;
  }
  .aurora i:nth-child(3) {
    width: 30vw; height: 30vw; min-width: 220px; min-height: 220px;
    inset-inline-start: 32vw; top: 26vw;
    background: var(--aurora-3);
    animation: drift-c 19s var(--ease-out) infinite alternate;
  }
  @keyframes drift-a { to { transform: translate3d(6vw, 4vw, 0) scale(1.12); } }
  @keyframes drift-b { to { transform: translate3d(-5vw, 6vw, 0) scale(1.08); } }
  @keyframes drift-c { to { transform: translate3d(4vw, -5vw, 0) scale(.92); } }

  /* A faint grid, masked so it fades out rather than ending on a hard line. */
  .mesh {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
      linear-gradient(var(--mesh-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--mesh-line) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 100%);
  }

  /* ---------- header ---------- */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
  }
  /* The rule appears only once the page has moved, so the header is seamless at
     rest and separated from content while scrolling past it. */
  .site-header.stuck { border-bottom-color: var(--border); }

  .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; }
  /* `flex-shrink: 0` because the logo is the one thing in the header that must
     never give way. Without it an over-wide row squeezed the brand link to zero
     width, so the logo vanished instead of the row visibly overflowing. */
  .brand { flex-shrink: 0; }
  .brand img { width: 132px; height: auto; }
  .header-actions { display: flex; align-items: center; gap: var(--space-3); }

  /* The phone header is one row: logo, language, theme. The full header needs
     ~560px, which is what once pushed phones to ~470px wide and scrolled them
     sideways. So on phones Pricing and Get in touch are dropped (both sections
     are on this page and the hero's own buttons lead there), and the logo and
     toggle padding shrink until the rest fits — measured down to 320px in both
     languages. Only horizontal padding shrinks: the 44px touch height set for
     coarse pointers below is kept. `.header-actions .toggle button` outranks
     that later rule, which would otherwise put the 16px padding back. */
  @media (max-width: 640px) {
    .bar { gap: var(--space-2); }
    .header-actions { gap: 6px; }
    .header-actions .btn { display: none; }
    .brand img { width: 104px; }
    .header-actions .toggle button { padding-inline: 10px; }
  }
  @media (max-width: 360px) {
    .brand img { width: 88px; }
    .header-actions .toggle button { padding-inline: 8px; }
  }

  .toggle {
    display: inline-flex; padding: 3px;
    background: var(--bg-alt); border: 1px solid var(--border);
    border-radius: var(--radius-full);
  }
  .toggle button {
    font: inherit; font-size: .82rem; font-weight: 700;
    padding: 7px 13px; min-height: 36px;
    border: 0; border-radius: var(--radius-full);
    background: transparent; color: var(--text-secondary); cursor: pointer;
    transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
  }
  .toggle button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

  /* 36px keeps the header compact for a mouse, but a finger needs the 44px this
     product uses everywhere else — so the target grows only where the pointer
     is coarse, rather than making every desktop header taller to serve touch. */
  @media (pointer: coarse) {
    .toggle button { min-height: 44px; padding-inline: 16px; }
  }

  /* ---------- buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    font-family: var(--font-display); font-weight: 700; font-size: 1rem;
    padding: 13px 26px; min-height: 48px;
    border-radius: var(--radius-full); border: 2px solid transparent;
    cursor: pointer; text-decoration: none; position: relative; overflow: hidden;
    transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-out),
                background-color .25s var(--ease-out), border-color .25s var(--ease-out);
  }
  .btn:hover { text-decoration: none; transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }
  .btn-sm { padding: 9px 18px; min-height: 40px; font-size: .9rem; }

  .btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-glow); }
  .btn-primary:hover { background: var(--primary-hover); }

  /* A light sweeps across the button on hover. Purely `transform`, and behind
     the label via z-index rather than by opacity, so the text never dims. */
  .btn-primary::after {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.32) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform .8s var(--ease-out);
  }
  .btn-primary:hover::after { transform: translateX(120%); }
  .btn-primary > * { position: relative; z-index: 1; }

  .btn-secondary {
    background: var(--surface); color: var(--text);
    border-color: var(--border-strong); box-shadow: var(--shadow-sm);
  }
  .btn-secondary:hover { border-color: var(--primary); color: var(--primary); }

  .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

  /* ---------- hero ---------- */
  .hero { position: relative; padding: clamp(56px, 9vw, 104px) 0 clamp(64px, 10vw, 120px); overflow: hidden; }
  .hero-grid {
    position: relative; z-index: 1;
    display: grid; gap: clamp(40px, 6vw, 72px);
    grid-template-columns: 1fr;
    align-items: center;
  }
  @media (min-width: 940px) { .hero-grid { grid-template-columns: 1.02fr .98fr; } }

  .eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
    padding: 7px 15px; border-radius: var(--radius-full); margin-bottom: var(--space-5);
  }
  .eyebrow .dot {
    width: 7px; height: 7px; border-radius: var(--radius-full);
    background: var(--primary); flex: none;
    animation: pulse 2.4s var(--ease-out) infinite;
  }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent); }
    60%      { box-shadow: 0 0 0 9px transparent; }
  }

  /* The one word that carries the promise, given the brand gradient. Kept to a
     span so the heading itself stays a plain, selectable, translatable string. */
  .grad {
    background: linear-gradient(100deg, var(--primary), var(--warning) 55%, var(--primary-active));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }

  .lede { font-size: 1.14rem; color: var(--text-secondary); margin-top: var(--space-5); max-width: 34em; }

  .trust { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-6); }
  .trust div { display: flex; align-items: center; gap: var(--space-2); font-size: .9rem; font-weight: 700; color: var(--text-secondary); }
  .trust svg { color: var(--success); flex: none; }

  /* ---------- the product mock ---------- */
  .stage { position: relative; perspective: 1400px; }

  .preview {
    position: relative; z-index: 2;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    /* Held at a slight angle so it reads as an object in space rather than a
       screenshot pasted onto the page. The parallax script nudges these two
       custom properties; with no script they keep these resting values. */
    transform:
      perspective(1400px)
      rotateY(var(--rx, -7deg))
      rotateX(var(--ry, 3deg))
      translateZ(0);
    transition: transform .5s var(--ease-out);
  }
  /* Mirrored for RTL: the card should lean away from the reading edge in both
     directions, not stay pinned to one side of the page. */
  html[dir="rtl"] .preview { --rx: 7deg; }

  .preview-bar {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-alt); border-bottom: 1px solid var(--border);
  }
  .dots { display: inline-flex; gap: 6px; }
  .dots i { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--border-strong); display: block; }
  .preview-url {
    font-size: .8rem; color: var(--text-muted); background: var(--surface);
    padding: 5px 14px; border-radius: var(--radius-full); border: 1px solid var(--border);
    /* A domain is a Latin token: it must not be reordered by an RTL paragraph. */
    direction: ltr; unicode-bidi: isolate;
  }

  .preview-brandrow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); }
  .preview-avatar {
    width: 44px; height: 44px; border-radius: var(--radius-md); flex: none;
    background: linear-gradient(135deg, var(--primary), var(--primary-active));
    color: var(--on-primary); font-family: var(--font-display); font-weight: 800;
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    box-shadow: var(--shadow-glow);
  }
  .preview-brandrow .name { font-family: var(--font-display); font-weight: 700; }
  .preview-brandrow .sub { font-size: .82rem; color: var(--text-muted); }

  .preview-list { padding: 0 var(--space-5) var(--space-4); display: grid; gap: var(--space-3); }
  .preview-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3); border-radius: var(--radius-md);
    background: var(--bg-alt); border: 1px solid var(--border);
  }
  .preview-row .tile {
    width: 34px; height: 34px; border-radius: var(--radius-sm); flex: none;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary);
  }
  .preview-row .grow { min-width: 0; flex: 1; }
  .preview-row .t { font-weight: 700; font-size: .92rem; }
  .preview-row .s { font-size: .76rem; color: var(--text-muted); }

  .badge {
    font-size: .7rem; font-weight: 800; padding: 4px 11px;
    border-radius: var(--radius-full); flex: none;
  }
  .badge-brand   { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
  .badge-info    { background: var(--info-bg); color: var(--info); }
  .badge-success { background: var(--success-bg); color: var(--success); }

  .preview-note { font-size: .72rem; color: var(--text-muted); padding: 0 var(--space-5) var(--space-5); }

  /* Two chips that hover off the mock's edges, giving it depth without a
     drop-shadow doing all the work. Hidden on narrow screens, where they would
     overlap the card they are meant to frame. */
  .float {
    position: absolute; z-index: 3;
    display: none; align-items: center; gap: var(--space-2);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-full); padding: 9px 16px;
    box-shadow: var(--shadow-lg);
    font-size: .82rem; font-weight: 700;
    will-change: transform;
  }
  @media (min-width: 1040px) { .float { display: inline-flex; } }
  .float-a { top: 12%; inset-inline-start: -34px; animation: bob 6s var(--ease-out) infinite alternate; }
  .float-b { bottom: 14%; inset-inline-end: -28px; animation: bob 7.5s var(--ease-out) .6s infinite alternate; }
  .float svg { flex: none; }
  @keyframes bob { to { transform: translateY(-13px); } }

  /* ---------- sections ---------- */
  .soft { background: var(--bg-alt); }
  .section-head { max-width: 42em; margin-bottom: var(--space-7); }
  .section-lede { color: var(--text-secondary); margin-top: var(--space-4); font-size: 1.05rem; }

  .grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-top: var(--space-6); }
  @media (min-width: 680px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } }

  .card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
  }
  .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }

  /* A brand-tinted wash that fades in from the top edge on hover. Behind the
     content on its own layer, so nothing has to be re-coloured. */
  .card::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 70%);
    opacity: 0; transition: opacity .35s var(--ease-out);
  }
  .card:hover::before { opacity: 1; }
  .card > * { position: relative; z-index: 1; }

  .icon-tile {
    width: 50px; height: 50px; border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--primary) 13%, transparent);
    color: var(--primary); margin-bottom: var(--space-4);
    transition: transform .35s var(--ease-spring), background-color .35s var(--ease-out);
  }
  .card:hover .icon-tile { transform: scale(1.08) rotate(-4deg); background: color-mix(in srgb, var(--primary) 20%, transparent); }
  .card p { color: var(--text-secondary); margin-top: var(--space-3); font-size: .96rem; }

  /* ---------- steps ---------- */
  .steps { list-style: none; padding: 0; margin: var(--space-7) 0 0; display: grid; gap: var(--space-5); position: relative; }
  @media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }

  .steps li {
    position: relative; counter-increment: step;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-out);
  }
  .steps li:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .steps { counter-reset: step; }
  .steps li::before {
    content: counter(step);
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary), var(--primary-active));
    color: var(--on-primary); font-family: var(--font-display); font-weight: 800;
    margin-bottom: var(--space-4); box-shadow: var(--shadow-glow);
  }
  .steps h3 { font-size: 1.04rem; }
  .steps p { color: var(--text-secondary); font-size: .92rem; margin-top: var(--space-2); }

  /* ---------- split feature (Arabic / RTL) ---------- */
  .split { display: grid; gap: clamp(32px, 5vw, 60px); align-items: center; grid-template-columns: 1fr; }
  @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }

  .mirror-demo {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-xl); padding: var(--space-5);
    box-shadow: var(--shadow-lg); display: grid; gap: var(--space-3);
  }
  .mirror-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md); background: var(--bg-alt); border: 1px solid var(--border);
  }
  /* The second row is deliberately forced to the opposite direction, so the
     two sit side by side as a demonstration rather than a claim. */
  .mirror-row.ltr { direction: ltr; }
  .mirror-row.rtl { direction: rtl; font-family: var(--font-arabic); }
  .mirror-row .tile {
    width: 32px; height: 32px; border-radius: var(--radius-sm); flex: none;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary);
  }
  .mirror-row .grow { flex: 1; min-width: 0; font-weight: 700; font-size: .9rem; }
  .mirror-label { font-size: .7rem; font-weight: 800; color: var(--text-muted); letter-spacing: .06em; text-transform: uppercase; }

  .notice {
    display: flex; gap: var(--space-4); align-items: flex-start;
    background: var(--warning-bg); border: 1px solid var(--warning);
    border-radius: var(--radius-lg); padding: var(--space-5); margin-top: var(--space-6);
  }
  .notice .icon-tile { background: var(--warning); color: #fff; margin: 0; flex: none; width: 40px; height: 40px; font-weight: 800; }
  .notice h3 { font-size: 1rem; }
  .notice p { color: var(--text-secondary); font-size: .92rem; margin-top: var(--space-2); }

  /* ---------- CTA ---------- */
  .cta .panel {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--primary), var(--primary-active));
    color: var(--on-primary);
    border-radius: var(--radius-xl);
    padding: clamp(40px, 6vw, 72px);
    text-align: center;
    box-shadow: var(--shadow-xl);
  }
  /* A slow sheen across the panel. One element, one transform, infinite — the
     cheapest way to keep a large flat block from reading as dead. */
  .cta .panel::before {
    content: ''; position: absolute; inset: -50%;
    background: conic-gradient(from 0deg, transparent 0 70%, rgba(255,255,255,.16) 85%, transparent 100%);
    animation: spin 14s linear infinite;
  }
  @keyframes spin { to { transform: rotate(1turn); } }
  .cta .panel > * { position: relative; z-index: 1; }
  .cta h2 { color: inherit; }
  .cta p { margin-top: var(--space-4); font-size: 1.06rem; opacity: .95; max-width: 40em; margin-inline: auto; }
  .cta .actions { justify-content: center; }
  .cta .btn {
    background: var(--surface); color: var(--primary); box-shadow: var(--shadow-lg);
    font-size: 1.05rem;
  }
  .cta .btn:hover { background: var(--surface); color: var(--primary-active); }

  /* ---------- footer ---------- */
  .site-footer { border-top: 1px solid var(--border); padding: var(--space-7) 0; background: var(--bg-alt); }
  .footrow {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-4); font-size: .88rem; color: var(--text-muted);
  }
  .footrow img { width: 108px; height: auto; opacity: .75; }

  /* ── Pricing ──────────────────────────────────────────────────────────
     Built on .card so a plan is visibly the same object as a feature — the
     page has one card, used twice, rather than two card designs a reader has
     to learn separately. */
  .plan { display: flex; flex-direction: column; }
  .plan h3 { margin-top: var(--space-2); }

  .plan-price {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--text);
    margin-top: var(--space-3);
    line-height: 1.1;
  }
  /* The unit is part of the price and must never be read on its own, so it is
     smaller and quieter but sits on the same line. */
  .plan-per { font-size: .95rem; font-weight: 600; color: var(--text-secondary); }
  .plan-year { color: var(--text-secondary); font-size: .92rem; margin-top: var(--space-2); }

  .plan-list {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .plan-list li {
    color: var(--text-secondary);
    font-size: .96rem;
    /* Padding on the START edge, so the tick sits inside the text column in
       both directions rather than needing a mirrored rule. */
    padding-inline-start: 1.5em;
    position: relative;
  }
  .plan-list li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: .45em;
    width: .5em;
    height: .5em;
    border-radius: 50%;
    background: var(--primary);
  }

  /* The middle plan, lifted rather than recoloured: a different fill would read
     as a different KIND of thing, when it is the same plan at a higher price. */
  .plan-featured { border-color: var(--primary); box-shadow: var(--shadow-lg); }

  .price-note {
    color: var(--text-secondary);
    font-size: .95rem;
    margin-top: var(--space-6);
    max-width: 46em;
  }