/* ══════════════════════════════════════════════════════════════════════════
   ELMATAJER — Landing Design System (em-*)
   Premium Technology Commerce visual language. Single source of truth for the
   public landing (/). Does NOT touch platform-wide .lp-* tokens (nav, footer,
   shared buttons); those remain platform-wide.
   Namespace: em- (Elmatajer Landing)
   Author: 2026-07-10 landing rebuild
   ══════════════════════════════════════════════════════════════════════════ */
/* ─── Design tokens — LIGHT (default) ─────────────────────────────────────── */
:root{
    /* Surfaces — light */
    --em-bg:            #ffffff;
    --em-bg-alt:        #f7f9fc;
    --em-surface:       #ffffff;
    --em-surface-2:     #f4f6fa;
    --em-surface-3:     #eef1f6;
    --em-elevated:      #ffffff;

    /* Text — light */
    --em-text:          #0b1220;
    --em-text-2:        #384153;
    --em-muted:         #6b7280;
    --em-muted-2:       #9aa3b2;

    /* Borders — light */
    --em-border:        #e5e9f0;
    --em-border-2:      #d7dde7;
    --em-hairline:      rgba(11, 18, 32, 0.06);

    /* Elmatajer BLUE — primary accent */
    --em-blue:          #3b82f6;
    --em-blue-hover:    #2563eb;
    --em-blue-active:   #1d4ed8;
    --em-blue-soft:     #dbeafe;
    --em-blue-softer:   #eff6ff;
    --em-blue-glow:     rgba(59, 130, 246, 0.24);
    --em-blue-ring:     rgba(59, 130, 246, 0.35);

    /* Feedback (used sparingly for operational signals) */
    --em-good:          #16a34a;
    --em-good-soft:     #dcfce7;
    --em-warn:          #f59e0b;
    --em-warn-soft:     #fef3c7;
    --em-info:          var(--em-blue);
    --em-info-soft:     var(--em-blue-soft);

    /* Radius scale */
    --em-r-xs:          6px;
    --em-r-sm:          8px;
    --em-r:             12px;
    --em-r-md:          14px;
    --em-r-lg:          18px;
    --em-r-xl:          24px;
    --em-r-2xl:         32px;
    --em-r-pill:        999px;

    /* Shadow scale — subtle depth */
    --em-shadow-1:      0 1px 2px rgba(11, 18, 32, .04), 0 1px 3px rgba(11, 18, 32, .06);
    --em-shadow-2:      0 4px 10px rgba(11, 18, 32, .05), 0 12px 32px rgba(11, 18, 32, .07);
    --em-shadow-3:      0 8px 24px rgba(11, 18, 32, .06), 0 24px 64px rgba(11, 18, 32, .09);
    --em-shadow-glow:   0 12px 40px -12px var(--em-blue-glow);

    /* Container widths */
    --em-container:     1200px;
    --em-container-wide:1320px;
    --em-container-narrow: 960px;

    /* Spacing scale (4-based) */
    --em-s-1:           4px;
    --em-s-2:           8px;
    --em-s-3:           12px;
    --em-s-4:           16px;
    --em-s-5:           20px;
    --em-s-6:           24px;
    --em-s-8:           32px;
    --em-s-10:          40px;
    --em-s-12:          48px;
    --em-s-16:          64px;
    --em-s-20:          80px;
    --em-s-24:          96px;

    /* Motion */
    --em-t-fast:        .15s;
    --em-t:             .22s;
    --em-t-slow:        .4s;
    --em-t-story:       .8s;
    --em-ease:          cubic-bezier(.22, .61, .36, 1);
    --em-ease-out:      cubic-bezier(0, 0, .2, 1);
    --em-ease-spring:   cubic-bezier(.34, 1.56, .64, 1);

    /* Type scale */
    --em-fs-eyebrow:    12px;
    --em-fs-body:       16px;
    --em-fs-body-lg:    17px;
    --em-fs-h6:         18px;
    --em-fs-h5:         22px;
    --em-fs-h4:         28px;
    --em-fs-h3:         36px;
    --em-fs-h2:         clamp(32px, 4vw, 52px);
    --em-fs-h1:         clamp(38px, 5.5vw, 72px);

    /* Font stacks — inherit body Inter/Tajawal from platform */
    --em-font-mono:     "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Monaco, Consolas, monospace;

    /* Section rhythm */
    --em-section-y:     clamp(64px, 9vw, 128px);
}
/* ─── Design tokens — DARK ────────────────────────────────────────────────── */
html.dark,
[data-theme="dark"]{
    /* 2026-07-11 rev11 — surface luminance steps widened again after
       the shadow nullifier removed all depth cues. Cards now separate
       from the shell via a clear ~12L step (#3A3A42 vs #232326).
       Reference point: the WhatsApp widget reads crisp on the dark
       canvas because its header + avatars carry a hard luminance
       contrast; the dashboard mockup gets the same treatment via
       surface hex only (no colour, no shadow). */
    /* 2026-07-11 rev17 — canvas deepened + slight navy undertone
       (B=24 > R=12) so the whole landing sits on a "night sky"
       charcoal that reads like the reference. Constellation stars +
       dots pop harder against the darker base. */
    --em-bg:            #0C0E18;   /* main canvas — deep near-black with cool bias */
    --em-bg-alt:        #08090F;   /* deep-contrast band under sections */
    --em-surface:       #232326;   /* card / dashboard shell */
    --em-surface-2:     #2C2C32;   /* secondary panel — sidebar, chrome */
    --em-surface-3:     #1F1F22;   /* deep chart/table body */
    --em-elevated:      #3A3A42;   /* elevated card — KPI, signal — +12L step */

    /* Text — brightened for legibility on charcoal */
    --em-text:          #FFFFFF;
    --em-text-2:        #D8D8E0;
    --em-muted:         #A8AAB4;
    --em-muted-2:       #82848E;

    /* 2026-07-11 rev11 — borders one more notch stronger. With the
       shadow nullifier active, borders are the ONLY visible edge cue
       — they need to actually paint on a dark canvas. Numbers are
       still inside the user's stated 0.08/0.14 neighbourhood; the
       upper band is bumped to visible-on-charcoal territory. */
    --em-border:        rgba(255, 255, 255, 0.18);
    --em-border-2:      rgba(255, 255, 255, 0.26);
    --em-hairline:      rgba(255, 255, 255, 0.10);

    /* Blue in dark — brighter for contrast on deep bg */
    --em-blue:          #4f92ff;
    --em-blue-hover:    #3b82f6;
    --em-blue-active:   #2563eb;
    --em-blue-soft:     rgba(79, 146, 255, 0.18);
    --em-blue-softer:   rgba(79, 146, 255, 0.08);
    --em-blue-glow:     rgba(79, 146, 255, 0.32);
    --em-blue-ring:     rgba(79, 146, 255, 0.45);

    /* Feedback — dark */
    --em-good:          #34d399;
    --em-good-soft:     rgba(52, 211, 153, 0.14);
    --em-warn:          #fbbf24;
    --em-warn-soft:     rgba(251, 191, 36, 0.14);

    /* 2026-07-11 rev8 — shadow scale dropped one notch so no element
       casts a heavy halo on the charcoal canvas. */
    --em-shadow-1:      0 1px 2px rgba(0, 0, 0, .20);
    --em-shadow-2:      0 4px 12px rgba(0, 0, 0, .25);
    --em-shadow-3:      0 8px 24px rgba(0, 0, 0, .28);
    --em-shadow-glow:   0 8px 24px -8px rgba(0, 0, 0, 0.28);
}
/* ─── Root — landing page scoped ──────────────────────────────────────────── */
/* 2026-07-12 — `.em-page` transparent in BOTH themes so the fixed
   .em-canvas-net (constellation, z-index: -2) paints THROUGH every
   landing page in light AND dark modes. The base colour comes from
   `body` (light: #FAFAFA / dark: #0C0E18), the constellation draws on
   top of body, and the soft blue pools on `.em-page-bg` overlay both.
   Sections with their own opaque backgrounds (cards, banners) still
   cover the constellation inside their box — the network reads as a
   living layer BEHIND the composition, in both themes. */
.em-page{
    background: transparent;
    color: var(--em-text);
    font-size: var(--em-fs-body);
    line-height: 1.6;
    letter-spacing: -0.005em;
    isolation: isolate;
}
/* Landing page background — one continuous canvas, replaces .lp-page-bg */
.em-page-bg{
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(60% 40% at 20% 8%, var(--em-blue-softer) 0%, transparent 60%),
        radial-gradient(50% 40% at 82% 12%, var(--em-blue-softer) 0%, transparent 55%);
}
html.dark .em-page-bg,
[data-theme="dark"] .em-page-bg{
    /* 2026-07-11 rev17 — subtle ELMATAJER-blue ambient pools painted on
       the em-page-bg fixed layer (BEHIND the constellation canvas so
       stars stay crisp). Two soft radials at very low alpha (0.045 +
       0.03) hint at atmosphere without becoming a coloured wash. Blue
       only — no purple per owner rule. */
    background:
        radial-gradient(60% 40% at 78% 24%, rgba(59, 130, 246, 0.045) 0%, transparent 60%),
        radial-gradient(50% 40% at 18% 68%, rgba(59, 130, 246, 0.030) 0%, transparent 55%);
    overflow: hidden;
}
.em-page-grid{
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image:
        linear-gradient(to right, var(--em-hairline) 1px, transparent 1px),
        linear-gradient(to bottom, var(--em-hairline) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 60% 40% at 50% 0%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 60% 40% at 50% 0%, #000 40%, transparent 100%);
}
/* ─── Container ───────────────────────────────────────────────────────────── */
.em-container{
    width: 100%;
    max-width: var(--em-container);
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 32px);
}
.em-container--wide{ max-width: var(--em-container-wide); }
.em-container--narrow{ max-width: var(--em-container-narrow); }
/* ─── Section wrapper ─────────────────────────────────────────────────────── */
.em-section{
    position: relative;
    padding-block: var(--em-section-y);
}
.em-section--tight{ padding-block: clamp(48px, 6vw, 88px); }
.em-section--flush-t{ padding-top: 0; }
/* Section that follows the brands marquee gets a much tighter top
   padding so the two feel connected rather than separated by an empty
   band. */
.em-brands + .em-section{
    padding-block-start: clamp(24px, 3vw, 48px);
}
.em-section--dark-band{
    /* 2026-07-12 — transparent so the constellation canvas + ambient blue
       pools show THROUGH every section, edge-to-edge. Was `var(--em-bg-alt)`,
       which painted an opaque band that blocked the fixed-position bg. */
    background: transparent;
}
/* ─── Section header ──────────────────────────────────────────────────────── */
.em-sec-head{
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
    margin-block-end: clamp(40px, 5vw, 64px);
}
.em-sec-head--start{ margin-inline: 0; text-align: start; }
.em-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--em-fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--em-blue-hover);
    padding: 6px 12px;
    border-radius: var(--em-r-pill);
    background: var(--em-blue-soft);
    border: 1px solid transparent;
    line-height: 1;
    margin-block-end: 20px;
}
html.dark .em-eyebrow,
[data-theme="dark"] .em-eyebrow{
    /* 2026-07-11 rev7 — zero-wrinkle pass: eyebrow pill fully neutral.
       Section labels no longer carry any blue tint anywhere on the
       page. */
    color: var(--em-text-2);
    background: transparent;
    border-color: var(--em-border-2);
}
.em-eyebrow-dot{
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--em-good);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--em-good) 22%, transparent);
    display: inline-block;
}
.em-eyebrow-dot::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--em-good);
    opacity: .55;
    animation: em-eyebrow-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes em-eyebrow-ping{
    75%, 100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
    .em-eyebrow-dot::after{ animation: none; }
}
.em-h1{
    font-size: var(--em-fs-h1);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--em-text);
    margin: 0;
    text-wrap: balance;
}
.em-h2{
    font-size: var(--em-fs-h2);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.028em;
    color: var(--em-text);
    margin: 0;
    text-wrap: balance;
}
.em-h3{
    font-size: var(--em-fs-h3);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--em-text);
    margin: 0;
}
.em-h4{
    font-size: var(--em-fs-h4);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--em-text);
    margin: 0;
}
html[dir="rtl"] .em-h1,
html[dir="rtl"] .em-h2,
html[dir="rtl"] .em-h3,
html[dir="rtl"] .em-h4{ letter-spacing: 0; }
.em-lead{
    font-size: var(--em-fs-body-lg);
    line-height: 1.65;
    color: var(--em-text-2);
    margin: 24px 0 0;
    max-width: 640px;
    text-wrap: pretty;
}
.em-sec-head .em-lead{ margin-inline: auto; }
/* Text emphasis (blue accent word inside heading) */
.em-accent{
    color: var(--em-blue-hover);
    -webkit-text-stroke-width: 0;
}
html.dark .em-accent,
[data-theme="dark"] .em-accent{ color: var(--em-blue); }
/* ─── Buttons — em-btn family ─────────────────────────────────────────────── */
.em-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    border-radius: var(--em-r-pill);
    padding: 14px 22px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--em-t) var(--em-ease),
                background-color var(--em-t) var(--em-ease),
                border-color var(--em-t) var(--em-ease),
                box-shadow var(--em-t) var(--em-ease),
                color var(--em-t) var(--em-ease);
    isolation: isolate;
}
.em-btn:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px var(--em-blue-ring);
}
.em-btn--lg{ padding: 16px 26px; font-size: 16px; }
.em-btn--sm{ padding: 10px 16px; font-size: 13px; }
.em-btn--primary{
    background: var(--em-blue-hover);
    color: #fff;
    box-shadow: 0 8px 24px -12px var(--em-blue-glow);
}
.em-btn--primary:hover{
    background: var(--em-blue-active);
    transform: translateY(-1px);
    box-shadow: 0 12px 32px -12px var(--em-blue-glow);
}
/* 2026-07-11 rev8 — CTA dark elevation kept light (matches shell). */
html.dark .em-btn--primary,
[data-theme="dark"] .em-btn--primary{
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.28);
}
html.dark .em-btn--primary:hover,
[data-theme="dark"] .em-btn--primary:hover{
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.36);
}
.em-btn--secondary{
    background: transparent;
    color: var(--em-text);
    border-color: var(--em-border-2);
}
.em-btn--secondary:hover{
    background: var(--em-surface-2);
    border-color: var(--em-blue);
    color: var(--em-blue-hover);
}
.em-btn--ghost{
    background: transparent;
    color: var(--em-text-2);
}
.em-btn--ghost:hover{ color: var(--em-blue-hover); }
.em-btn-arrow{
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform var(--em-t) var(--em-ease);
}
html[dir="rtl"] .em-btn-arrow{ transform: scaleX(-1); }
.em-btn:hover .em-btn-arrow{ transform: translateX(3px); }
html[dir="rtl"] .em-btn:hover .em-btn-arrow{ transform: scaleX(-1) translateX(3px); }
/* ─── Reveal-on-scroll baseline (JS toggles .is-in) ───────────────────────── */
.em-reveal{
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--em-t-story) var(--em-ease),
                transform var(--em-t-story) var(--em-ease);
    will-change: opacity, transform;
}
.em-reveal.is-in{
    opacity: 1;
    transform: none;
}
.em-reveal--d1{ transition-delay: .08s; }
.em-reveal--d2{ transition-delay: .16s; }
.em-reveal--d3{ transition-delay: .24s; }
.em-reveal--d4{ transition-delay: .32s; }
/* ─── Utility — logical-property shims to avoid RTL/LTR asymmetry ────────── */
.em-flex{ display: flex; }
.em-grid{ display: grid; }
.em-hide{ display: none !important; }
/* Numeric text — Arabic-safe */
.em-num{
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}
/* ══════════════════════════════════════════════════════════════════════════
   SECTION 1 — HERO  (2026-07-11 rev2 rebuild)

   Layout: two-column grid (copy | deck) at ≥1024px, stacked ≤1024px, deck
   hidden ≤767px. Copy column carries an oversized 2-line H1 with a single
   accent word, a single-sentence lead, two CTAs, and a capability strip
   sourced from real integration state (PayMob / Bosta / merchant count).
   Deck column is a compact commerce dashboard mockup: minimal chrome,
   compact sidebar, hero revenue banner, sales chart, 3-KPI trio, and a
   connected-commerce flow ribbon (Order → Paid → Ready). No floating
   badges — every widget sits inside the shell.

   Design language: charcoal-on-charcoal luminance hierarchy, borders as
   the primary edge cue, ZERO drop-shadows (global nullifier active on
   the dark theme). Blue used only as accent — CTA background, active
   sidebar row, headline accent word, chart line.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── Copy column ─────────────────────────────────────────────────────────── */
@keyframes em-pulse {
0%, 100%{ opacity: 1; transform: scale(1); }
50%{ opacity: .4; transform: scale(.8); }
}
/* Capability strip */
/* ── Deck column ─────────────────────────────────────────────────────────── */
/* Chrome bar */
/* Body */
/* Sidebar — 2 sections (Store / Grow), heading + nav rows + badge on active */
/* Main */
/* ── Page head — breadcrumb + section title + date ────────────────────────── */
/* ── Metric strip — 4 tiles, primary highlighted ──────────────────────────── */
/* ── Chart with tabs + WoW compare in the head ────────────────────────────── */
/* ── Recent orders TABLE ──────────────────────────────────────────────────── */
/* Status pill — colour-coded by data-status. */
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
/* Hide the customer name and time on tight widths so the row stays
       readable — ID + amount + status carry the primary story. */
}
/* Mobile ≤767px — hide the deck entirely; copy column stands alone. */
/* ══════════════════════════════════════════════════════════════════════════
   SECTION 1.5 — BRANDS MARQUEE  (2026-07-11)
   ══════════════════════════════════════════════════════════════════════════
   Two tilted strips scrolling in opposite directions, never stopping.
   Content is duplicated 2× per track so the -50 % translate lands
   seamlessly on the second copy.
   ══════════════════════════════════════════════════════════════════════ */
/* 2026-07-11 — single-lane marquee. One strip, no card, no border.
   Track scrolls left forever; content is duplicated 2× in the blade
   so the -50 % translate lands seamlessly on the second copy — no
   visible loop point, no empty gap. */
.em-brands{
    position: relative;
    padding-block: clamp(20px, 2.5vw, 40px);
    background: transparent;
    border: 0;
    overflow: hidden;
}
.em-brands__strip{
    width: 100%;
    overflow: hidden;
    /* Explicit `mask-image: none` — no browser default edge-fade so
       every brand stays visible from strip entry to strip exit. */
    mask-image: none;
    -webkit-mask-image: none;
}
.em-brands__track{
    display: flex;
    align-items: center;
    gap: clamp(28px, 3vw, 52px);
    width: max-content;
    /* Even slower — a full loop now takes ~6 minutes. The strip drifts
       so gently that motion barely registers, yet it never stops. */
    animation: em-brands-scroll 360s linear infinite;
    will-change: transform;
}
@keyframes em-brands-scroll {
from{ transform: translateX(-50%); }
to{ transform: translateX(0); }
}
html[dir="rtl"] .em-brands__track{
    animation-name: em-brands-scroll-rtl;
}
@keyframes em-brands-scroll-rtl {
from{ transform: translateX(50%); }
to{ transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.em-brands__track{ animation: none; }
}
/* ── Item — logo (if present) + name always side-by-side ──
   Full opacity so every brand stays legible while the strip moves;
   no fade, no hover-only reveal. Explicit mask-image: none on the
   strip below guarantees no browser default edge-fade either. */
.em-brands__item{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 96px;
    height: 44px;
    padding-inline: 16px;
    flex-shrink: 0;
    opacity: 1;
}
/* 2026-07-11 — chip removed. Logo shown at ~34 px, theme-adaptive
   via `invert(1) hue-rotate(180deg)` on dark: brightness is inverted
   so a black-on-white favicon becomes light-on-dark, but the hue
   rotation cancels out on the colour components so brand hues (Puma
   red, Google blues/reds/yellows) stay recognisable. */
.em-brands__item img{
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.95;
    transition: transform var(--em-t) var(--em-ease),
                filter var(--em-t) var(--em-ease);
}
html.dark .em-brands__item img,
[data-theme="dark"] .em-brands__item img{
    filter: invert(1) hue-rotate(180deg);
}
.em-brands__item:hover img{ transform: scale(1.08); }
.em-brands__name{
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--em-text);
    white-space: nowrap;
    line-height: 1;
}
html:not(.dark):not([data-theme="dark"]) .em-brands__name{
    color: var(--em-nav-text);
}
/* Responsive — tighter gaps + smaller chips on phones so the wrap row
   stays compact without overflow. */
@media (max-width: 720px) {
.em-brands__row{ gap: 12px 20px; }
.em-brands__item{ min-width: 0; height: auto; padding: 0; gap: 8px; }
.em-brands__item img{ width: 20px; height: 20px; }
.em-brands__name{ font-size: 12.5px; }
}
/* ══════════════════════════════════════════════════════════════════════════
   SECTION 2 — COMMERCE ACTIVITY / TRUST LAYER
   ══════════════════════════════════════════════════════════════════════════ */
.em-activity{ padding-block: clamp(48px, 6vw, 88px); }
.em-activity__strip{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    padding: 24px;
    border-radius: var(--em-r-xl);
    background: var(--em-surface);
    border: 1px solid var(--em-border);
    box-shadow: var(--em-shadow-1);
    align-items: center;
}
.em-activity__cell{
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.em-activity__cell + .em-activity__cell{
    border-inline-start: 1px solid var(--em-hairline);
    padding-inline-start: 20px;
}
@media (max-width: 780px) {
.em-activity__cell + .em-activity__cell{
        border-inline-start: none;
        padding-inline-start: 0;
        border-block-start: 1px solid var(--em-hairline);
        padding-block-start: 14px;
    }
}
.em-activity__ico{
    width: 40px;
    height: 40px;
    border-radius: var(--em-r-sm);
    background: var(--em-blue-soft);
    color: var(--em-blue-hover);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.em-activity__ico svg{ width: 20px; height: 20px; }
html.dark .em-activity__ico,
[data-theme="dark"] .em-activity__ico{ color: var(--em-blue); }
.em-activity__num{
    font-size: 24px;
    font-weight: 800;
    color: var(--em-text);
    letter-spacing: -0.02em;
    line-height: 1;
}
.em-activity__lbl{
    font-size: 13px;
    color: var(--em-muted);
    margin-block-start: 4px;
}
/* Merchant brands strip — real logos only, hidden if <3 */
.em-brands{ margin-block-start: 40px; }
.em-brands__label{
    font-size: 13px;
    color: var(--em-muted);
    text-align: center;
    margin-block-end: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    width: 100%;
}
.em-brands__marquee{
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.em-brands__track{
    display: inline-flex;
    gap: 48px;
    padding: 12px 0;
    animation: em-marquee 40s linear infinite;
    white-space: nowrap;
}
html[dir="rtl"] .em-brands__track{ animation-direction: reverse; }
@keyframes em-marquee {
from{ transform: translateX(0); }
to{ transform: translateX(-50%); }
}
.em-brand{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--em-muted);
    font-weight: 600;
    font-size: 14px;
    transition: color var(--em-t);
}
.em-brand:hover{ color: var(--em-text); }
.em-brand__logo{
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: var(--em-r-sm);
    background: var(--em-surface-2);
    padding: 4px;
}
.em-brand__initial{
    width: 32px;
    height: 32px;
    border-radius: var(--em-r-sm);
    background: var(--em-surface-2);
    color: var(--em-muted);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
}
/* ══════════════════════════════════════════════════════════════════════════
   SECTION 3 — FROM IDEA TO LIVE STORE (Journey)
   ══════════════════════════════════════════════════════════════════════════ */
.em-journey__grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    counter-reset: em-step;
}
@media (min-width: 720px) {
.em-journey__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
.em-journey__grid{ grid-template-columns: repeat(4, 1fr); position: relative; }
}
.em-journey__step{
    position: relative;
    padding: 28px 24px 28px;
    background: var(--em-surface);
    border: 1px solid var(--em-border);
    border-radius: var(--em-r-lg);
    counter-increment: em-step;
    transition: transform var(--em-t) var(--em-ease),
                border-color var(--em-t) var(--em-ease),
                box-shadow var(--em-t) var(--em-ease);
}
.em-journey__step:hover{
    transform: translateY(-3px);
    border-color: var(--em-blue-ring);
    box-shadow: var(--em-shadow-2);
}
.em-journey__step::before{
    content: "0" counter(em-step);
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--em-blue-hover);
    letter-spacing: 0.06em;
    margin-block-end: 12px;
    font-family: var(--em-font-mono);
}
html.dark .em-journey__step::before,
[data-theme="dark"] .em-journey__step::before{ color: var(--em-blue); }
.em-journey__ttl{
    font-size: 18px;
    font-weight: 700;
    color: var(--em-text);
    margin: 0 0 8px;
    line-height: 1.3;
}
.em-journey__body{
    font-size: 14px;
    color: var(--em-text-2);
    line-height: 1.6;
    margin: 0;
}
/* Journey connector — visible only ≥1080px, hidden in RTL for clarity */
@media (min-width: 1080px) {
.em-journey__step + .em-journey__step::after{
        content: "";
        position: absolute;
        top: 44px;
        inset-inline-start: -32px;
        width: 40px;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--em-border-2), transparent);
    }
html[dir="rtl"] .em-journey__step + .em-journey__step::after{
        background: linear-gradient(270deg, transparent, var(--em-border-2), transparent);
    }
}
/* ══════════════════════════════════════════════════════════════════════════
   SECTION 4 — ELMATAJER COMMERCE OS
   Interactive product universe. 9 areas. Click reveals related interface.
   ══════════════════════════════════════════════════════════════════════════ */
.em-os__wrap{
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}
@media (min-width: 1024px) {
.em-os__wrap{ grid-template-columns: 360px 1fr; gap: 48px; }
}
.em-os__nav{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
    gap: 10px;
}
@media (min-width: 1024px) {
.em-os__nav{ grid-template-columns: 1fr 1fr; }
}
.em-os__pill{
    background: var(--em-surface);
    border: 1px solid var(--em-border);
    border-radius: var(--em-r);
    padding: 14px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-align: start;
    font-family: inherit;
    color: var(--em-text-2);
    font-size: 14px;
    font-weight: 500;
    transition: all var(--em-t) var(--em-ease);
    width: 100%;
}
.em-os__pill:hover{
    border-color: var(--em-blue-ring);
    color: var(--em-text);
}
.em-os__pill.is-active{
    background: var(--em-blue-hover);
    border-color: var(--em-blue-hover);
    color: #fff;
    box-shadow: var(--em-shadow-glow);
}
.em-os__pill.is-active .em-os__pill-ico{
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.em-os__pill-ico{
    width: 30px;
    height: 30px;
    border-radius: var(--em-r-xs);
    background: var(--em-blue-softer);
    color: var(--em-blue-hover);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background-color var(--em-t), color var(--em-t);
}
.em-os__pill-ico svg{ width: 16px; height: 16px; }
.em-os__stage{
    position: relative;
    background: var(--em-surface);
    border: 1px solid var(--em-border);
    border-radius: var(--em-r-xl);
    padding: 32px;
    min-height: 440px;
    box-shadow: var(--em-shadow-2);
    overflow: hidden;
}
.em-os__panel{
    display: none;
    animation: em-fade-up .4s var(--em-ease) both;
}
.em-os__panel.is-active{ display: block; }
@keyframes em-fade-up {
from{ opacity: 0; transform: translateY(12px); }
to{ opacity: 1; transform: none; }
}
.em-os__panel-head{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-end: 20px;
}
.em-os__panel-ico{
    width: 44px;
    height: 44px;
    border-radius: var(--em-r);
    background: var(--em-blue-soft);
    color: var(--em-blue-hover);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.em-os__panel-ico svg{ width: 22px; height: 22px; }
html.dark .em-os__panel-ico,
[data-theme="dark"] .em-os__panel-ico{ color: var(--em-blue); }
.em-os__panel-ttl{
    font-size: 22px;
    font-weight: 700;
    color: var(--em-text);
    margin: 0;
    line-height: 1.2;
}
.em-os__panel-sub{
    font-size: 14px;
    color: var(--em-muted);
    margin: 4px 0 0;
}
.em-os__panel-body{
    font-size: 15px;
    color: var(--em-text-2);
    line-height: 1.7;
    margin-block-end: 24px;
    max-width: 640px;
}
/* Panel product-preview visual (mock UI) */
.em-os__preview{
    border-radius: var(--em-r-lg);
    background: var(--em-surface-2);
    border: 1px solid var(--em-hairline);
    padding: 20px;
    display: grid;
    gap: 12px;
}
.em-os__row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: var(--em-r-sm);
    background: var(--em-surface);
    border: 1px solid var(--em-hairline);
    font-size: 13px;
}
.em-os__row-l{ display: flex; align-items: center; gap: 10px; color: var(--em-text-2); }
.em-os__row-r{ color: var(--em-text); font-weight: 600; }
.em-os__pill-status{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--em-r-pill);
    background: var(--em-good-soft);
    color: var(--em-good);
    font-size: 11px;
    font-weight: 600;
}
/* ══════════════════════════════════════════════════════════════════════════
   SECTION 5 — PRODUCT SHOWCASE (3 stories)
   ══════════════════════════════════════════════════════════════════════════ */
.em-story{
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    padding-block: clamp(48px, 6vw, 88px);
}
@media (min-width: 960px) {
.em-story{ grid-template-columns: 1fr 1fr; }
.em-story--rev .em-story__copy{ order: 2; }
.em-story--rev .em-story__visual{ order: 1; }
}
.em-story__copy{ max-width: 520px; }
.em-story__ttl{
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--em-text);
    margin: 12px 0 0;
    text-wrap: balance;
}
html[dir="rtl"] .em-story__ttl{ letter-spacing: 0; }
.em-story__body{
    font-size: 16px;
    color: var(--em-text-2);
    line-height: 1.7;
    margin: 16px 0 0;
}
.em-story__bullets{
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: grid;
    gap: 10px;
}
.em-story__bullets li{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--em-text);
}
.em-story__bullets li svg{
    width: 18px;
    height: 18px;
    color: var(--em-blue-hover);
    flex-shrink: 0;
    margin-block-start: 2px;
}
html.dark .em-story__bullets li svg,
[data-theme="dark"] .em-story__bullets li svg{ color: var(--em-blue); }
/* Story visual mock */
.em-story__visual{
    position: relative;
    background: var(--em-surface);
    border: 1px solid var(--em-border);
    border-radius: var(--em-r-xl);
    padding: 24px;
    box-shadow: var(--em-shadow-2);
    min-height: 340px;
}
.em-story__visual-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block-end: 16px;
    border-block-end: 1px solid var(--em-hairline);
    margin-block-end: 16px;
}
.em-story__visual-title{
    font-size: 14px;
    font-weight: 700;
    color: var(--em-text);
}
.em-story__visual-badge{
    font-size: 11px;
    padding: 3px 8px;
    border-radius: var(--em-r-pill);
    background: var(--em-blue-soft);
    color: var(--em-blue-hover);
    font-weight: 600;
}
/* Story-3: connected commerce flow diagram */
.em-flow{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    align-items: stretch;
}
.em-flow__node{
    padding: 14px 10px;
    background: var(--em-surface-2);
    border: 1px solid var(--em-hairline);
    border-radius: var(--em-r);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    position: relative;
    font-size: 12px;
    font-weight: 600;
    color: var(--em-text);
}
.em-flow__node-ico{
    width: 32px;
    height: 32px;
    border-radius: var(--em-r-sm);
    background: var(--em-blue-soft);
    color: var(--em-blue-hover);
    display: grid;
    place-items: center;
}
.em-flow__node-ico svg{ width: 16px; height: 16px; }
html.dark .em-flow__node-ico,
[data-theme="dark"] .em-flow__node-ico{ color: var(--em-blue); }
.em-flow__node + .em-flow__node::before{
    content: "";
    position: absolute;
    inset-inline-start: -8px;
    top: 50%;
    width: 6px;
    height: 2px;
    background: var(--em-blue-ring);
    transform: translateY(-50%);
}
/* ══════════════════════════════════════════════════════════════════════════
   SECTION 6 — STOREFRONT SHOWCASE
   ══════════════════════════════════════════════════════════════════════════ */
.em-stores__grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
.em-store-card{
    position: relative;
    background: var(--em-surface);
    border: 1px solid var(--em-border);
    border-radius: var(--em-r-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--em-t) var(--em-ease),
                border-color var(--em-t) var(--em-ease),
                box-shadow var(--em-t) var(--em-ease);
    display: block;
}
.em-store-card:hover{
    transform: translateY(-4px);
    border-color: var(--em-blue-ring);
    box-shadow: var(--em-shadow-3);
}
.em-store-card__cover{
    aspect-ratio: 16/10;
    background: var(--em-surface-2);
    position: relative;
    overflow: hidden;
}
.em-store-card__cover img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--em-t-slow) var(--em-ease);
}
.em-store-card:hover .em-store-card__cover img{ transform: scale(1.04); }
.em-store-card__cover--empty{
    display: grid;
    place-items: center;
    color: var(--em-muted);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.05em;
    background:
        linear-gradient(135deg, var(--em-blue-softer) 0%, var(--em-surface-2) 100%);
}
/* 2026-07-11 rev6 — empty-cover placeholder was blue-tinted; on dark
   with N such cards in a row that becomes a repeating blue band. Flat
   deep surface (#202023) instead. */
html.dark .em-store-card__cover--empty,
[data-theme="dark"] .em-store-card__cover--empty{
    background: var(--em-surface-3);
}
.em-store-card__body{
    padding: 18px 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.em-store-card__name{
    font-size: 15px;
    font-weight: 700;
    color: var(--em-text);
    margin: 0;
    line-height: 1.3;
}
.em-store-card__meta{
    font-size: 12px;
    color: var(--em-muted);
    margin: 4px 0 0;
}
.em-store-card__arrow{
    color: var(--em-muted);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: color var(--em-t), transform var(--em-t);
}
html[dir="rtl"] .em-store-card__arrow{ transform: scaleX(-1); }
.em-store-card:hover .em-store-card__arrow{
    color: var(--em-blue-hover);
    transform: translateX(3px);
}
html[dir="rtl"] .em-store-card:hover .em-store-card__arrow{
    transform: scaleX(-1) translateX(3px);
}
/* ══════════════════════════════════════════════════════════════════════════
   SECTION 7 — CONNECTED COMMERCE
   2026-07-12 — legacy `.em-connected` + `.em-hub*` + `.em-conn-row*` rules
   removed. The section was rewritten with a scoped `<style>` inside
   resources/views/landing/sections/integrations.blade.php, so these globals
   were dead code that only interfered (forced a 2-col grid on `.em-connected`).
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   SECTION 8 — ANALYTICS STORY
   ══════════════════════════════════════════════════════════════════════════ */
.em-analytics{
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}
@media (min-width: 960px) {
.em-analytics{ grid-template-columns: 1fr 1.15fr; gap: 64px; }
}
.em-analytics__viz{
    background: var(--em-surface);
    border: 1px solid var(--em-border);
    border-radius: var(--em-r-xl);
    box-shadow: var(--em-shadow-2);
    padding: 24px;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
}
.em-analytics__viz .em-chart{ grid-column: span 3; min-height: 180px; }
.em-analytics__viz .em-tile{ min-height: 100px; }
@media (max-width: 640px) {
.em-analytics__viz{ grid-template-columns: 1fr 1fr; }
.em-analytics__viz .em-chart{ grid-column: span 2; }
}
/* ══════════════════════════════════════════════════════════════════════════
   SECTION 9 — MERCHANT TRUST (testimonials, conditional)
   ══════════════════════════════════════════════════════════════════════════ */
.em-trust__grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.em-quote{
    background: var(--em-surface);
    border: 1px solid var(--em-border);
    border-radius: var(--em-r-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: transform var(--em-t) var(--em-ease),
                border-color var(--em-t) var(--em-ease);
}
.em-quote:hover{ transform: translateY(-2px); border-color: var(--em-blue-ring); }
.em-quote__mark{
    color: var(--em-blue-hover);
    opacity: 0.35;
    width: 32px;
    height: 32px;
}
html.dark .em-quote__mark,
[data-theme="dark"] .em-quote__mark{ color: var(--em-blue); }
.em-quote__body{
    font-size: 15px;
    line-height: 1.7;
    color: var(--em-text);
    margin: 0;
    flex: 1;
}
.em-quote__by{
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--em-hairline);
}
.em-quote__avatar{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--em-blue-soft);
    color: var(--em-blue-hover);
    display: grid;
    place-items: center;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
}
.em-quote__avatar img{ width: 100%; height: 100%; object-fit: cover; }
.em-quote__who{ font-size: 14px; font-weight: 700; color: var(--em-text); }
.em-quote__role{ font-size: 12px; color: var(--em-muted); margin-block-start: 2px; }
/* Platform-trust fallback (no testimonials) */
.em-plat-trust{
    background: var(--em-surface);
    border: 1px solid var(--em-border);
    border-radius: var(--em-r-xl);
    padding: 40px;
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
}
/* ══════════════════════════════════════════════════════════════════════════
   SECTION 10 — PRICING
   ══════════════════════════════════════════════════════════════════════════ */
.em-pricing__toggle{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: var(--em-surface);
    border: 1px solid var(--em-border);
    border-radius: var(--em-r-pill);
    margin-inline: auto;
    margin-block-end: 40px;
}
.em-pricing__toggle-btn{
    padding: 10px 20px;
    border-radius: var(--em-r-pill);
    background: transparent;
    color: var(--em-text-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    transition: all var(--em-t);
}
.em-pricing__toggle-btn.is-active{
    background: var(--em-blue-hover);
    color: #fff;
    box-shadow: var(--em-shadow-glow);
}
.em-pricing__toggle-save{
    font-size: 11px;
    color: var(--em-good);
    font-weight: 700;
    margin-inline-start: 6px;
}
.em-pricing__grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 720px) {
.em-pricing__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.em-pricing__grid{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.em-plan{
    background: var(--em-surface);
    border: 1px solid var(--em-border);
    border-radius: var(--em-r-lg);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    transition: transform var(--em-t) var(--em-ease),
                border-color var(--em-t) var(--em-ease),
                box-shadow var(--em-t) var(--em-ease);
}
.em-plan:hover{ transform: translateY(-3px); box-shadow: var(--em-shadow-2); }
.em-plan--featured{
    border-color: var(--em-blue);
    box-shadow: var(--em-shadow-glow);
    background: linear-gradient(180deg, var(--em-blue-softer) 0%, var(--em-surface) 40%);
}
/* 2026-07-11 rev9 — featured plan visual differentiation removed
   entirely in dark. All 4 plan cards render identical (background,
   border, shadow). The "featured" plan is signalled only by its
   content (name, price, CTA style). Badge hidden below. */
html.dark .em-plan--featured,
[data-theme="dark"] .em-plan--featured{
    background: var(--em-surface);
    border-color: var(--em-border);
    box-shadow: none;
}
html.dark .em-plan__badge,
[data-theme="dark"] .em-plan__badge{
    display: none;
}
.em-plan__badge{
    position: absolute;
    top: -12px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    background: var(--em-blue-hover);
    color: #fff;
    padding: 6px 14px;
    border-radius: var(--em-r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: var(--em-shadow-glow);
}
html[dir="rtl"] .em-plan__badge{ transform: translateX(50%); }
.em-plan__name{
    font-size: 16px;
    font-weight: 700;
    color: var(--em-text);
}
.em-plan__desc{ font-size: 13px; color: var(--em-muted); margin: 6px 0 0; }
.em-plan__price{
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-block: 16px;
    border-block: 1px solid var(--em-hairline);
}
.em-plan__price-amount{
    font-size: 40px;
    font-weight: 800;
    color: var(--em-text);
    letter-spacing: -0.03em;
    line-height: 1;
}
.em-plan__price-currency{ font-size: 20px; color: var(--em-text-2); font-weight: 600; }
.em-plan__price-period{ font-size: 13px; color: var(--em-muted); margin-inline-start: auto; }
.em-plan__price-free{
    font-size: 24px;
    font-weight: 800;
    color: var(--em-text);
}
.em-plan__features{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
    flex: 1;
}
.em-plan__features li{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--em-text-2);
    line-height: 1.5;
}
.em-plan__features li svg{
    width: 16px;
    height: 16px;
    color: var(--em-blue-hover);
    flex-shrink: 0;
    margin-block-start: 2px;
}
html.dark .em-plan__features li svg,
[data-theme="dark"] .em-plan__features li svg{ color: var(--em-blue); }
.em-plan__cta{ margin-block-start: auto; }
/* ══════════════════════════════════════════════════════════════════════════
   SECTION 11 — FAQ
   ══════════════════════════════════════════════════════════════════════════ */
.em-faq{
    max-width: 820px;
    margin-inline: auto;
    display: grid;
    gap: 12px;
}
.em-faq__item{
    background: var(--em-surface);
    border: 1px solid var(--em-border);
    border-radius: var(--em-r);
    overflow: hidden;
    transition: border-color var(--em-t);
}
.em-faq__item.is-open{ border-color: var(--em-blue-ring); }
.em-faq__q{
    width: 100%;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--em-text);
    padding: 20px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    text-align: start;
    line-height: 1.4;
}
.em-faq__q:hover{ color: var(--em-blue-hover); }
.em-faq__toggle{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--em-blue-soft);
    color: var(--em-blue-hover);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: transform var(--em-t), background-color var(--em-t);
}
.em-faq__toggle svg{ width: 12px; height: 12px; }
.em-faq__item.is-open .em-faq__toggle{ transform: rotate(45deg); background: var(--em-blue-hover); color: #fff; }
.em-faq__a{
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--em-t-slow) var(--em-ease);
}
.em-faq__item.is-open .em-faq__a{ max-height: 400px; }
.em-faq__a-inner{
    padding: 0 22px 22px;
    font-size: 14px;
    color: var(--em-text-2);
    line-height: 1.7;
}
/* ══════════════════════════════════════════════════════════════════════════
   SECTION 12 — FINAL CINEMATIC CTA
   ══════════════════════════════════════════════════════════════════════════ */
/* S12 — CTA
   2026-07-11 rev — was a heavy solid-blue gradient block that dominated
   the deep-charcoal canvas and clashed with the em-* system. Now an
   elevated dark card, blue used ONLY as an accent word + primary button,
   with a soft blue ambient glow anchoring conversion focus. */
.em-cta{
    position: relative;
    background: var(--em-elevated);
    border: 1px solid var(--em-border-2);
    color: var(--em-text);
    border-radius: 24px;
    padding: clamp(56px, 8vw, 96px) clamp(28px, 4vw, 64px);
    overflow: hidden;
    text-align: center;
}
.em-cta::before{
    /* Faint blue ambient — a soft glow at the bottom centre, no wash.
       Keeps blue on-brand without turning the whole card into a colour
       block. Fades to transparent so the charcoal canvas keeps reading. */
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(70% 55% at 50% 115%, rgba(59, 130, 246, 0.22) 0%, transparent 65%),
        radial-gradient(45% 40% at 0% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 60%),
        radial-gradient(45% 40% at 100% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
    pointer-events: none;
}
.em-cta__inner{
    position: relative;
    max-width: 760px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.em-cta__ttl{
    font-size: clamp(28px, 4.5vw, 52px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--em-text);
    margin: 0;
    text-wrap: balance;
}
html[dir="rtl"] .em-cta__ttl{ letter-spacing: 0; }
/* Accent word — blue, matches the .em-accent pattern used in the hero. */
.em-cta__accent{
    color: var(--em-blue);
    background: linear-gradient(180deg, var(--em-blue) 0%, var(--em-blue-hover) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.em-cta__sub{
    font-size: 17px;
    color: var(--em-text-2);
    margin: 20px 0 0;
    line-height: 1.6;
    max-width: 560px;
}
.em-cta__actions{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-start: 36px;
}
.em-cta__actions .em-btn--ghost{
    background: transparent;
    color: var(--em-text);
    border: 1px solid var(--em-border-2);
}
.em-cta__actions .em-btn--ghost:hover{
    background: var(--em-surface-2);
    border-color: var(--em-border-2);
    color: var(--em-text);
}
/* Light-mode override — the elevated token is #ffffff in light, so we
   swap in the tinted-white surface used elsewhere on the landing so the
   card still reads as an elevated element against the page. */
html:not(.dark):not([data-theme="dark"]) .em-cta{
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    border-color: var(--em-border);
}
html:not(.dark):not([data-theme="dark"]) .em-cta::before{
    background:
        radial-gradient(70% 55% at 50% 115%, rgba(59, 130, 246, 0.16) 0%, transparent 65%),
        radial-gradient(45% 40% at 0% 0%, rgba(59, 130, 246, 0.05) 0%, transparent 60%),
        radial-gradient(45% 40% at 100% 0%, rgba(59, 130, 246, 0.05) 0%, transparent 60%);
}
/* ══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — motion-reduce
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   SMALL SCREENS refinement
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.em-tile{ grid-column: span 1; }
.em-chart{ grid-column: span 1; }
}