/* FlowMap landing island. Palette and type = the FlowMap brand (static/flowmap_app_anon.css :root "FlowMap Brand", the login page's wordmark, templates/flowmap/landing_preview.html): deep ocean + data teal, Syne display, DM Sans text. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(/static/landing/fonts/dmsans-latin-ext-v17.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(/static/landing/fonts/dmsans-latin-v17.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/landing/type/spacemono-400-latin-v17.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Syne';font-style:normal;font-weight:600 800;font-display:swap;src:url(/static/landing/type/syne-latin-v24.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#050c12; --deep:#07111a; --surface:#0a1820; --surface-2:#0d1c26;
  --line:rgba(0,196,160,.14); --line-2:rgba(0,196,160,.26);
  --text:#e0f4f0; --mute:#8ab0b8; --faint:#5a8088;
  --acc:#00c4a0; --acc2:#00e5c0; --cy:#00d4ff; --acc-b:#0ea5c8; --acc-ink:#001a14;
  --call:#00e676; --put:#ff4d6d;
  --font:'DM Sans','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Syne','DM Sans','IBM Plex Sans Arabic',system-ui,sans-serif;
  --wrap:min(1160px, calc(100% - 48px));
  --nav-h:60px; --strip-h:32px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--ink);color:var(--text);-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-width:none;-ms-overflow-style:none}
/* no visible scrollbar on the page or inside any section; wheel, touch, trackpad and keyboard still scroll */
html::-webkit-scrollbar,body::-webkit-scrollbar,.nos::-webkit-scrollbar,.ack-in::-webkit-scrollbar{display:none;width:0;height:0}
body,.nos,.ack-in{scrollbar-width:none;-ms-overflow-style:none}
body{margin:0;font-family:var(--font);font-size:1rem;line-height:1.6;font-weight:400;
  font-feature-settings:'cv11','ss01';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;min-height:100vh;display:flex;flex-direction:column}
html[lang=ar] body{line-height:1.85;font-feature-settings:normal}
main{flex:1 0 auto}
img,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p,ol,ul,figure{margin:0}
ul,ol{padding:0;list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--acc2);outline-offset:3px;border-radius:4px}
.skip{position:absolute;inset-inline-start:16px;top:-60px;z-index:100;background:var(--acc2);color:var(--acc-ink);
  padding:10px 14px;border-radius:6px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* ---------- atmosphere: layered light, grain, vignette (fixed, behind everything) ---------- */
.atmos{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.atmos-glow{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 52% at 50% -8%, rgba(0,196,160,.13), rgba(0,196,160,.035) 45%, transparent 72%),
    radial-gradient(ellipse 45% 35% at 88% 18%, rgba(7,17,26,.9), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 50%, transparent 52%, rgba(1,5,9,.72) 100%),
    linear-gradient(180deg, var(--ink) 0%, var(--deep) 46%, var(--ink) 100%)}
.atmos-grain{position:absolute;inset:-50%;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- header: wordmark, tabs, language, live tape ---------- */
.top{position:sticky;top:0;z-index:50;background:linear-gradient(180deg, rgba(5,12,18,.97), rgba(5,12,18,.93));border-bottom:1px solid var(--line)}
.nav{width:var(--wrap);margin:0 auto;height:var(--nav-h);display:flex;align-items:center;gap:32px}
.wordmark{font-family:'Syne','DM Sans',sans-serif;font-weight:800;font-size:1.375rem;letter-spacing:-.5px;line-height:1;text-decoration:none;direction:ltr;unicode-bidi:isolate}
.wm-flow{background:linear-gradient(90deg,#fff 0%,#e0f4f0 60%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.wm-map{background:linear-gradient(90deg,#00e5c0,#00d4ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.tabs{position:relative;display:flex;align-items:center;gap:4px;height:100%;margin-inline-start:12px}
.tabs a{position:relative;display:flex;align-items:center;height:100%;padding:0 14px;text-decoration:none;
  color:var(--mute);font-size:.9375rem;font-weight:500;transition:color .2s}
.tabs a:hover{color:var(--text)}
.tabs a[aria-current=page]{color:var(--text)}
.tab-ink{position:absolute;left:0;bottom:-1px;width:1px;height:2px;background:var(--acc2);transform-origin:0 50%;
  transform:scaleX(0);box-shadow:0 0 14px rgba(0,196,160,.7)}
.nav-end{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.lang{height:36px;padding:0 14px;border:1px solid var(--line-2);border-radius:8px;background:transparent;cursor:pointer;
  font-size:.875rem;font-weight:500;color:var(--text);transition:border-color .2s}
.lang:hover{border-color:rgba(0,196,160,.55)}
html[lang=en] .lang span{font-family:'IBM Plex Sans Arabic',var(--font)}
.menu-btn{display:none;width:40px;height:36px;border:1px solid var(--line-2);border-radius:8px;background:transparent;cursor:pointer;
  align-items:center;justify-content:center}
.menu-lines{display:grid;gap:5px;width:16px}
.menu-lines i{display:block;height:1.5px;background:var(--text);transition:transform .25s var(--ease)}
.menu-btn[aria-expanded=true] .menu-lines i:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-btn[aria-expanded=true] .menu-lines i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.strip{height:var(--strip-h);overflow:hidden;border-top:1px solid var(--line);background:var(--surface);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.strip-track{display:flex;gap:30px;width:max-content;height:100%;align-items:center}   /* gap = login .tk-inner */
.strip-track.run{animation:tape var(--strip-dur,60s) linear infinite}
html[dir=rtl] .strip-track.run{animation-name:tape-rtl}
.strip:hover .strip-track{animation-play-state:paused}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tape-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
/* Strip items = the login strip 1:1. Markup: templates/flowmap/_auth.html:777-778. Rules copied verbatim:
   .si/.si-s = _auth.html:315-316; .up/.dn/.nu/.M = static/flowmap_app_anon.css:181-182; values = that file's
   :root "FlowMap Brand" (:3-15), the login screen's default. line-height:normal = the login page's (no override);
   direction:ltr keeps symbol-price-change in the login order on the Arabic page. */
.strip{--M:'Space Mono',monospace;--t:#e0f4f0;--t2:#6b9fa8;--t3:#4a7a88;--gr:#00e676;--rd:#ff4d6d}
.si{display:flex;gap:6px;align-items:center;font-family:var(--M);font-size:10px;white-space:nowrap;}
.si-s{color:var(--t3);font-size:9px;letter-spacing:.3px;}
.si{color:var(--t);line-height:normal;font-weight:400;direction:ltr}
.si .up{color:var(--gr)!important;} .si .dn{color:var(--rd)!important;} .si .nu{color:var(--t2)!important;}
.si .M{font-family:var(--M)!important;}

/* ---------- panels (tabs) ---------- */
.panel{display:none}
html[data-tab=home] [data-panel=home],html[data-tab=pricing] [data-panel=pricing],
html[data-tab=disclaimer] [data-panel=disclaimer],html[data-tab=signin] [data-panel=signin],
html[data-tab=terms] [data-panel=terms],html[data-tab=privacy] [data-panel=privacy],
html[data-tab=refund] [data-panel=refund],html[data-tab=contact] [data-panel=contact]{display:block}

/* ---------- type ---------- */
.h-display{font-family:var(--display);font-size:clamp(1.5rem, 1rem + 2vw, 2.75rem);line-height:1.1;letter-spacing:-.02em;font-weight:700;
  text-wrap:balance;max-width:22ch;margin-inline:auto}
.h-page{font-family:var(--display);font-size:clamp(1.5rem, 1.05rem + 1.3vw, 2.25rem);line-height:1.12;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
.h-sect{font-family:var(--display);font-size:clamp(1.25rem, .95rem + 1vw, 1.75rem);line-height:1.15;letter-spacing:-.015em;font-weight:700;text-wrap:balance}
.h-band{font-family:var(--display);font-size:clamp(1.5rem, 1.05rem + 1.4vw, 2.25rem);line-height:1.1;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
.lede{font-size:clamp(.9375rem, .9rem + .2vw, 1.0625rem);color:var(--mute);line-height:1.6;max-width:60ch;text-wrap:pretty}
html[lang=ar] .h-display,html[lang=ar] .h-page,html[lang=ar] .h-sect,html[lang=ar] .h-band{letter-spacing:0;line-height:1.3;font-weight:700}
html[lang=ar] .h-display{max-width:24ch}
.h-display{color:#fff}
.h-display .hl{color:var(--cy)}
html[lang=ar] .lede{line-height:1.9}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* ---------- buttons (radius 8, never pills) ---------- */
.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:8px;
  font-size:.9063rem;font-weight:700;text-decoration:none;cursor:pointer;border:1px solid transparent;overflow:hidden;
  transition:background-color .2s, border-color .2s}
.btn:active{transform:scale(.98)}
.btn-primary{background:linear-gradient(135deg,var(--acc),var(--acc-b));color:var(--acc-ink);box-shadow:0 8px 28px -10px rgba(0,196,160,.55)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-primary:focus-visible{outline-color:#fff}
.btn-line{background:rgba(255,255,255,.02);border-color:var(--line-2);color:var(--text)}
.btn-line:hover{border-color:rgba(0,196,160,.6)}
.btn[disabled]{opacity:.38;cursor:not-allowed;box-shadow:none}
.btn[disabled]::after{display:none}
.btn-wide{width:100%}
.link-btn{background:none;border:0;padding:6px 2px;color:var(--acc2);cursor:pointer;font-size:.9375rem;font-weight:500;
  text-decoration:underline;text-decoration-color:rgba(0,196,160,.35);text-underline-offset:4px}
.link-btn:hover{text-decoration-color:var(--acc2)}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(44px, 3vw + 24px, 84px) 0 0;text-align:center;overflow:hidden}
.hero-floor{position:absolute;inset:auto 0 0 0;height:62%;pointer-events:none;opacity:.55;
  background:
    repeating-linear-gradient(90deg, rgba(0,196,160,.08) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg, rgba(0,196,160,.08) 0 1px, transparent 1px 88px);
  transform:perspective(700px) rotateX(64deg);transform-origin:50% 100%;
  mask-image:radial-gradient(ellipse 60% 70% at 50% 100%, #000 10%, transparent 70%)}
.hero-copy{position:relative;width:var(--wrap);margin:0 auto}
.hero-intro{margin:20px auto 0;max-width:62ch;color:var(--mute);font-size:clamp(.9375rem, .9rem + .2vw, 1.0625rem);line-height:1.6;text-wrap:balance}
html[lang=ar] .hero-intro{line-height:1.9}
.hero-actions{margin-top:28px}
.screen-stage{position:relative;width:min(1120px, calc(100% - 48px));margin:clamp(48px, 5vw, 80px) auto 0;perspective:1600px;padding-bottom:clamp(64px, 7vw, 120px)}
.horizon{position:absolute;left:-12%;right:-12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,196,160,.85) 50%,transparent);box-shadow:0 0 24px rgba(0,196,160,.6);transform:scaleX(1);opacity:.45}
.screen-glow{position:absolute;left:8%;right:8%;bottom:4%;height:55%;pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 50% 80%, rgba(0,196,160,.28), rgba(0,196,160,.06) 55%, transparent 75%)}
/* device frame (CSS only): lid with a thin bezel + camera dot, the screen inside, a base with a thumb notch */
.device{position:relative;margin:0;transform-origin:50% 0}
.device-lid{position:relative;padding:clamp(7px, .9vw, 14px);padding-top:clamp(12px, 1.4vw, 20px);border-radius:clamp(12px, 1.3vw, 18px) clamp(12px, 1.3vw, 18px) 4px 4px;
  background:linear-gradient(180deg,#15242d,#0a141b);border:1px solid rgba(0,196,160,.2);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55), 0 50px 140px -50px rgba(0,196,160,.35), 0 40px 90px -30px rgba(0,0,0,.85)}
.device-cam{position:absolute;top:clamp(4px, .5vw, 7px);left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#1e313a;box-shadow:0 0 0 1px rgba(0,196,160,.16)}
.device-base{position:relative;height:clamp(9px, 1.1vw, 16px);margin:0 -6.5%;border-radius:0 0 16px 16px/0 0 12px 12px;
  background:linear-gradient(180deg,#1b2c35,#0d1820 55%,#071016);border:1px solid rgba(0,196,160,.16);border-top:0;box-shadow:0 22px 40px -18px rgba(0,0,0,.9)}
.device-base i{position:absolute;top:0;left:50%;width:15%;height:42%;transform:translateX(-50%);border-radius:0 0 8px 8px;background:#09131a}
.screen{position:relative;aspect-ratio:16/9;border-radius:clamp(4px, .5vw, 7px);overflow:hidden;background:var(--surface)}
.screen-video{display:block;width:100%;height:100%;object-fit:cover;background:var(--surface)}
.screen-tools{position:absolute;top:10px;inset-inline-end:10px;display:flex;gap:6px;z-index:2}
.scr-tool{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;border:1px solid rgba(0,196,160,.3);
  background:rgba(5,12,18,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;transition:border-color .2s, background-color .2s}
.scr-tool:hover{border-color:var(--acc2);background:rgba(5,12,18,.9)}
.scr-tool[hidden]{display:none}
.scr-tool svg{width:16px;height:16px;fill:none;stroke:var(--text);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.scr-tool svg .fill{fill:var(--text);stroke:none}
.screen:fullscreen{border-radius:0;background:#000}
.screen:fullscreen .screen-video{object-fit:contain;background:#000}
.screen.is-max{position:fixed;inset:0;z-index:200;aspect-ratio:auto;border-radius:0;background:rgba(0,0,0,.94)}
.screen.is-max .screen-video{object-fit:contain;background:transparent}
/* While a frame is maximised its ancestors must not pin position:fixed: a `perspective` (.screen-stage) or a `transform`
   (GSAP tilt on the device) makes that ancestor the containing block, so inset:0 filled the collapsed lid (~30 px strip)
   instead of the viewport. landing.js sets html.frame-max together with .is-max. */
html.frame-max .screen-stage{perspective:none}
html.frame-max .device{transform:none !important}
/* second clip right under the first: the first stage's padding-bottom is the gap */
.screen-stage + .screen-stage{margin-top:0}
.screen-cap{margin:18px auto 0;max-width:62ch;color:var(--mute);font-size:clamp(.875rem, .85rem + .15vw, .9375rem);line-height:1.6;text-align:center;text-wrap:balance}
html[lang=ar] .screen-cap{line-height:1.9}

/* ---------- sections ---------- */
.sect{width:var(--wrap);margin:0 auto;padding:clamp(72px, 7vw, 128px) 0}
.sect-head{margin-bottom:clamp(36px, 4vw, 56px)}
.sect-head .lede{margin-top:18px}
.car-sect{width:100%}
.car-sect .sect-head{width:var(--wrap);margin-inline:auto}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px, 6vw, 96px);align-items:start;border-top:1px solid var(--line)}
.split-head{position:sticky;top:calc(var(--nav-h) + var(--strip-h) + 40px)}

/* ---------- carousel: portrait cards, image on top, big centred title; side cards tucked behind, dimmed ---------- */
.car{position:relative;--cw:clamp(250px, 24vw, 350px);--car-t:3000ms}
.car .swiper{padding:24px 0 12px}
.car .swiper-slide{width:var(--cw);height:auto;z-index:1}
.car .swiper-slide-prev,.car .swiper-slide-next{z-index:2}
.car .swiper-slide-active{z-index:3}
.fcard{height:100%;min-height:calc(var(--cw) * 1.22);display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;padding:clamp(14px, 1.3vw, 18px);
  background:linear-gradient(180deg,#0c1a22,#09151c);position:relative;box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
  transform:scale(.8);opacity:.25;filter:blur(5px) saturate(.6);
  transition:transform 1.1s var(--ease), opacity 1.1s var(--ease), filter 1.1s var(--ease), border-color 1.1s}
.swiper-slide-prev .fcard{transform:translateX(16%) scale(.88);opacity:.5;filter:blur(2.5px) saturate(.75)}
.swiper-slide-next .fcard{transform:translateX(-16%) scale(.88);opacity:.5;filter:blur(2.5px) saturate(.75)}
html[dir=rtl] .swiper-slide-prev .fcard{transform:translateX(-16%) scale(.88)}
html[dir=rtl] .swiper-slide-next .fcard{transform:translateX(16%) scale(.88)}
.swiper-slide-active .fcard{transform:none;opacity:1;filter:none;border-color:rgba(0,196,160,.32)}
.fcard::before{content:"";position:absolute;left:14%;right:14%;top:-1px;height:1px;opacity:0;transition:opacity 1.1s;
  background:linear-gradient(90deg,transparent,var(--acc2),transparent)}
.swiper-slide-active .fcard::before{opacity:1}
.fmedia{position:relative;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:var(--ink);border:1px solid rgba(0,196,160,.1)}
.fmedia>img,.fmedia>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* moving stills: the full-height capture slides across the 16:9 window (compositor transform only) */
.fmedia.pan{container-type:size}
.fmedia.pan>img{inset:0 auto auto 0;width:auto;height:135%;max-width:none;object-fit:fill;will-change:transform;animation:pan 16s ease-in-out infinite alternate}
@keyframes pan{from{transform:translate(0,0)}to{transform:translate(calc(-100% + 100cqw), calc(-100% + 100cqh))}}
.fbody{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(18px, 1.8vw, 26px) 4px 6px}
.fbody h3{font-family:var(--display);font-size:clamp(1.25rem, .95rem + .7vw, 1.625rem);line-height:1.15;font-weight:700;letter-spacing:-.015em;color:#fff}
.fbody p{margin-top:10px;color:var(--mute);font-size:.875rem;line-height:1.55;max-width:30ch;text-wrap:balance}
html[lang=ar] .fbody h3{letter-spacing:0;line-height:1.35}
html[lang=ar] .fbody p{line-height:1.8}
/* controls: round arrows beside the centre card, progress bars under it */
.car-ctrl{display:flex;justify-content:center;margin-top:26px}
.car-btn{position:absolute;top:calc(50% - 46px);z-index:5;width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;
  background:rgba(5,12,18,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;transition:border-color .2s}
#carPrev{inset-inline-start:max(8px, calc(50% - var(--cw) * 1.36 - 21px))}
#carNext{inset-inline-end:max(8px, calc(50% - var(--cw) * 1.36 - 21px))}
.car-btn:hover{border-color:rgba(0,196,160,.6)}
.chev{width:18px;height:18px;fill:none;stroke:var(--text);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html[dir=rtl] .chev{transform:scaleX(-1)}
.car .car-dots{display:flex;align-items:center;gap:6px;width:auto;position:static;inset:auto}
.car-dots .swiper-pagination-bullet{position:relative;width:44px;height:20px;border-radius:0;background:none;opacity:1;margin:0;cursor:pointer}
.car-dots .swiper-pagination-bullet::before,.car-dots .swiper-pagination-bullet-active::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 1.5px);height:3px;border-radius:2px}
.car-dots .swiper-pagination-bullet::before{background:rgba(0,196,160,.18)}
.car-dots .swiper-pagination-bullet-active::before{background:rgba(0,229,192,.3)}
.car-dots .swiper-pagination-bullet-active::after{background:var(--acc2);transform-origin:0 50%;animation:barfill var(--car-t) linear both}
html[dir=rtl] .car-dots .swiper-pagination-bullet-active::after{transform-origin:100% 50%}
@keyframes barfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.car-dots .swiper-pagination-bullet:focus-visible{outline-offset:6px}

/* ---------- demo sections (frozen recorded rows; filtering happens in the browser) ---------- */
.demo{width:min(1360px, calc(100% - 48px));margin:0 auto;padding:clamp(56px, 6vw, 104px) 0;display:grid;
  grid-template-columns:minmax(260px, 4fr) minmax(0, 9fr);gap:clamp(28px, 4vw, 64px);align-items:center;border-top:1px solid var(--line)}
.demo.mirror{grid-template-columns:minmax(0, 9fr) minmax(260px, 4fr)}
.demo-copy .lede{margin-top:16px}
.demo-panel{min-width:0}
.chip{flex:none;height:30px;padding:0 12px;border-radius:7px;border:1px solid var(--line-2);background:rgba(255,255,255,.02);color:var(--mute);
  font:500 .75rem/1 var(--font);cursor:pointer;white-space:nowrap;scroll-snap-align:start;transition:border-color .2s, color .2s, background-color .2s}
.chip:hover{color:var(--text);border-color:rgba(0,196,160,.5)}
.chip[aria-pressed=true]{color:var(--acc-ink);background:var(--acc2);border-color:var(--acc2);font-weight:700}
.dtbl-wrap{position:relative;overflow:auto;max-height:calc(26px + 32px * 12);border:1px solid rgba(0,196,160,.16);border-radius:10px;background:#111319}
.dtbl{border-collapse:separate;border-spacing:0;min-width:100%;font:500 12px/32px 'DM Sans',system-ui,'IBM Plex Sans Arabic',sans-serif;color:#e2e8f0;white-space:nowrap;direction:ltr}
.dtbl th{position:sticky;top:0;z-index:2;height:26px;padding:0 8px;background:#181c25;color:#b4c0d0;font-weight:700;line-height:26px;text-align:start}
.dtbl td{height:32px;padding:0 8px}
.dtbl tbody tr:nth-child(even) td{background:rgba(255,255,255,.025)}
.dtbl tbody tr:hover td{background:rgba(255,255,255,.06)}
.dtbl .num{text-align:right;font-variant-numeric:tabular-nums}
.dtbl .tkc{position:sticky;left:0;z-index:1;background:#111319;box-shadow:1px 0 0 rgba(255,255,255,.06)}
.dtbl th.tkc{z-index:3;background:#181c25}
.dtbl tbody tr:nth-child(even) td.tkc{background:#15171d}
.dtbl tbody tr:hover td.tkc{background:#1c1f26}
.dtbl-wrap{cursor:grab;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.dtbl-wrap.dragging{cursor:grabbing;user-select:none}
.demo.wide,.demo.wide.mirror{grid-template-columns:minmax(0,1fr);align-items:start;gap:28px}
.demo.wide.mirror .demo-copy{order:-1}
.demo.wide .demo-copy{max-width:760px}
.lcx-tz{margin-inline-start:auto;font-size:.75rem;color:var(--faint)}
.dtbl .tk{display:inline;padding:0;border:0;font-size:inherit;color:#fff;font-weight:700}   /* reset the ticker-tape .tk item (padding + divider) */
.dtbl .ac{color:#7dd3fc}
.dtbl .up{color:#22c55e}
.dtbl .dn{color:#ef4444}
.dtbl .dim{color:#8391a5}
.dtbl .chipc{display:inline-block;padding:0 6px;border-radius:4px;line-height:18px;font-size:11px;font-weight:700}
.dtbl .chipc.ask{color:#22c55e;background:rgba(34,197,94,.12)}
.dtbl .chipc.bid{color:#ef4444;background:rgba(239,68,68,.12)}
.dtbl .chipc.mid{color:#b4c0d0;background:rgba(255,255,255,.06)}
.dtbl .bar{display:inline-flex;width:64px;height:6px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.08);vertical-align:middle}
.dtbl .bar i{display:block;height:100%}
.dtbl .bar .b-a{background:#22c55e}
.dtbl .bar .b-b{background:#ef4444}
/* Live Contracts demo: the real page's sort / side / search controls over frozen rows */
.lcx-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:2px 2px 10px}
.lcx-sel{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;color:var(--mute)}
.lcx-sel select,.lcx-q input{height:30px;padding:0 10px;border-radius:7px;border:1px solid var(--line-2);background:#111319;color:var(--text);
  font:500 .75rem/1 var(--font)}
.lcx-sel select{padding-inline-end:6px;cursor:pointer}
.lcx-q input{width:112px}
.lcx-q input::placeholder{color:var(--faint)}
.lcx-sel select:focus-visible,.lcx-q input:focus-visible{outline:2px solid var(--acc2);outline-offset:1px}
.lcx-seg{display:inline-flex;gap:6px}
.lcx-row{cursor:pointer}
.dtbl .lcx-thc,.dtbl .lcx-row td:first-child{box-sizing:border-box;width:34px;min-width:34px;padding:0 4px;text-align:center}
/* ticker stays readable while the row scrolls sideways: 2nd sticky column right after the chart button */
.lcx-wrap .dtbl th:nth-child(2),.lcx-wrap .dtbl td:nth-child(2){position:sticky;left:34px;z-index:1;background:#111319;box-shadow:1px 0 0 rgba(255,255,255,.06)}
.lcx-wrap .dtbl th:nth-child(2){z-index:3;background:#181c25}
.lcx-wrap .dtbl tbody tr:nth-child(even) td:nth-child(2){background:#15171d}
.lcx-wrap .dtbl th:first-child,.lcx-wrap .dtbl td:first-child{position:sticky;left:0;z-index:1;background:#111319;box-shadow:none}
.lcx-wrap .dtbl th:first-child{z-index:3;background:#181c25}
.lcx-wrap .dtbl tbody tr:nth-child(even) td:first-child{background:#15171d}
.lcx-ic{display:inline-grid;place-items:center;width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:#7dd3fc;cursor:pointer;vertical-align:middle}
.lcx-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lcx-ic:hover,.lcx-row:hover .lcx-ic{background:rgba(125,211,252,.12)}
.lcx-ic:focus-visible{outline:2px solid var(--acc2);outline-offset:1px}
.dtbl .lcx-none{color:var(--mute);text-align:center}
.lcx-dlg{width:min(900px, calc(100vw - 24px), calc((100dvh - 84px) * 1.12));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line-2);border-radius:14px;
  background:#0b1016;color:var(--text);overflow:auto;scrollbar-width:none}
.lcx-dlg::-webkit-scrollbar{display:none}
.lcx-dlg::backdrop{background:rgba(2,6,10,.72);backdrop-filter:blur(3px)}
.lcx-dlg-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 16px;
  background:#0b1016;border-bottom:1px solid var(--line);font-size:.85rem}
.lcx-x{display:grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid var(--line-2);border-radius:9px;background:transparent;color:var(--text);cursor:pointer}
.lcx-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.lcx-x:hover{border-color:var(--acc2)}
.lcx-dlg img{display:block;width:100%;height:auto;aspect-ratio:1075/960;background:#0d131a}

/* ---------- what's inside ---------- */
.inside li{display:grid;grid-template-columns:minmax(150px, 220px) minmax(0,1fr);gap:24px;padding:22px 0;border-top:1px solid var(--line)}
.inside li:last-child{border-bottom:1px solid var(--line)}
.inside h3{font-size:.9688rem;font-weight:700}
.inside p{color:var(--mute)}

/* ---------- origin story slot (hidden behind SHOW_ORIGIN_STORY) ---------- */
.origin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;border-top:1px solid var(--line)}
.origin-art{position:relative;aspect-ratio:1;max-width:420px;width:100%;margin-inline:auto;border:1px dashed rgba(0,196,160,.2);border-radius:50%}
.radar-ring{position:absolute;inset:16%;border:1px solid var(--line-2);border-radius:50%}
.radar-ring.r2{inset:32%} .radar-ring.r3{inset:46%}
.radar-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg, rgba(0,196,160,.22), transparent 22%);animation:sweep 6s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.origin-copy .lede{margin-top:16px}

/* ---------- FAQ ---------- */
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa h3{font-size:inherit;font-weight:inherit}
.qa button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;background:none;border:0;
  cursor:pointer;text-align:start;font-size:1rem;font-weight:600;line-height:1.45}
.qa button:hover{color:var(--acc2)}
.qa-x{position:relative;flex:0 0 14px;height:14px}
.qa-x::before,.qa-x::after{content:"";position:absolute;inset:6px 0 auto 0;height:1.5px;background:var(--acc2);transition:transform .35s var(--ease)}
.qa-x::after{transform:rotate(90deg)}
.qa button[aria-expanded=true] .qa-x::after{transform:rotate(0)}
.qa-a{height:0;overflow:hidden}
.qa-a p{padding:0 0 24px;color:var(--mute);max-width:62ch}
.qa.open .qa-a{height:auto}

/* ---------- closing band ---------- */
.band{position:relative;text-align:center;padding:clamp(96px, 10vw, 168px) 24px;border-top:1px solid var(--line);overflow:hidden;
  background:radial-gradient(ellipse 46% 70% at 50% 100%, rgba(0,196,160,.15), rgba(0,196,160,.03) 55%, transparent 75%)}
.band .lede{margin:20px auto 36px}

/* ---------- pricing ---------- */
.page-head{width:var(--wrap);margin:0 auto;padding:clamp(64px, 6vw, 112px) 0 clamp(40px, 4vw, 64px)}
.page-head .lede{margin-top:20px}
.plans{width:min(940px, calc(100% - 48px));margin:0 auto clamp(80px, 8vw, 128px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;align-items:stretch}
.plan{position:relative;border:1px solid var(--line);border-radius:14px;padding:clamp(28px, 3vw, 40px);background:var(--surface)}
.plan-main{background:radial-gradient(ellipse 90% 55% at 50% 0%, rgba(0,196,160,.11), transparent 62%), var(--surface);border-color:var(--line-2)}
.plan-main::before{content:"";position:absolute;left:10%;right:10%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--acc2),transparent)}
.plan-tag{color:var(--acc2);font-size:.875rem;font-weight:600}
.plan-name{margin-top:12px;font-family:var(--display);font-size:1.375rem;font-weight:700;letter-spacing:-.01em}
.plan-price{margin:10px 0 4px}
/* Prices (owner 2026-10-14): old price small, muted, struck through; the price paid large beside it. Both
   languages ship in the page (English = USD, Arabic = SAR) and html[lang] shows one, so the toggle needs no request. */
html[lang=en] .price-ar,html[lang=ar] .price-en{display:none}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px}
.p-amt{display:inline-block;font-variant-numeric:tabular-nums;white-space:nowrap}
.p-old{position:relative;color:var(--faint);font-size:1.125rem;font-weight:500;text-decoration:none;white-space:nowrap}
.p-old::after{content:"";position:absolute;inset-inline:-3px;top:52%;height:1.5px;background:currentColor;border-radius:1px}
.p-now{white-space:nowrap;color:var(--mute);font-size:1rem;font-weight:500}
.p-now .p-amt{color:var(--text);font-size:2.5rem;font-weight:650;letter-spacing:-.03em;line-height:1.15}
/* the official riyal symbol: same height as the numerals (bank usage rules), sits on the baseline, never mirrored */
.sar{display:inline-block;height:.7em;width:auto;vertical-align:baseline;overflow:visible}
.plan-renew{margin-bottom:22px;color:var(--mute);font-size:.875rem}
.plan-main .link-btn{display:block;margin:14px auto 0}
.plan-inc{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);color:var(--faint);font-size:.875rem;font-weight:500}
.plan-feats{margin-top:14px;display:grid;gap:12px}
.plan-feats li{position:relative;padding-inline-start:30px;line-height:1.5}
.plan-feats li::before{content:"";position:absolute;inset-inline-start:0;top:.2em;width:18px;height:18px;border-radius:5px;
  background:rgba(0,196,160,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%2300e5c0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.plan-soon{display:flex;flex-direction:column;justify-content:center;opacity:.5;filter:saturate(.5)}
.plan-soon-body{margin-top:12px;color:var(--mute)}

/* ---------- disclaimer ---------- */
.read{width:min(780px, calc(100% - 48px));margin:0 auto;padding:clamp(64px, 6vw, 112px) 0 clamp(72px, 7vw, 120px)}
.disc-ver{margin-top:16px;color:var(--faint);font-size:.9375rem}
.disc{margin-top:40px;counter-reset:d}
.disc li{counter-increment:d;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;padding:28px 0;border-top:1px solid var(--line)}
.disc li::before{content:counter(d);grid-row:1 / span 2;color:var(--acc2);font-weight:600;font-variant-numeric:tabular-nums;padding-top:2px}
.disc h2{font-size:1.0625rem;font-weight:700;letter-spacing:-.005em}
.disc p{margin-top:8px;color:var(--mute);line-height:1.75}
html[lang=ar] .disc p{line-height:1.95}
html[lang=ar] .disc h2{letter-spacing:0}

/* ---------- sign in ---------- */
.signin{width:min(680px, calc(100% - 48px));margin:0 auto;padding:clamp(80px, 9vw, 152px) 0;text-align:center}
.signin .lede{margin:22px auto 36px}

/* ---------- short disclaimer + footer ---------- */
.short-disc{width:var(--wrap);margin:0 auto;padding:22px 0;border-top:1px solid var(--line);text-align:center;color:var(--faint);font-size:.875rem;line-height:1.6}
.short-disc a{color:var(--acc2);text-decoration:underline;text-decoration-color:rgba(0,196,160,.35);text-underline-offset:3px;white-space:nowrap}
.foot{background:var(--surface);border-top:1px solid var(--line)}
.foot-in{width:var(--wrap);margin:0 auto;padding:44px 0 32px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:start}
.foot-brand p{margin-top:8px;color:var(--faint);font-size:.9375rem;max-width:36ch}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot-nav a{color:var(--mute);text-decoration:none;font-size:.9375rem}
.foot-nav a:hover{color:var(--text)}
.foot-legal{color:var(--faint);font-size:.875rem}
.foot-nfa{white-space:nowrap}   /* "Not financial advice" never breaks mid-phrase on a phone */

/* ---------- acknowledgment modal ---------- */
.ack{width:min(580px, calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line-2);border-radius:14px;
  background:radial-gradient(ellipse 80% 40% at 50% 0%, rgba(0,196,160,.08), transparent 70%), var(--surface);color:var(--text);
  box-shadow:0 40px 120px -20px rgba(0,0,0,.9)}
.ack::backdrop{background:rgba(2,7,12,.74)}
.ack-in{padding:clamp(24px, 4vw, 34px);overflow:auto}
.ack h2{font-family:var(--display);font-size:1.25rem;font-weight:700;letter-spacing:-.01em}
html[lang=ar] .ack h2{letter-spacing:0}
.ack-sub{margin:8px 0 22px;color:var(--mute)}
.chk{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start;padding:14px 16px;margin-bottom:10px;
  border:1px solid var(--line);border-radius:10px;cursor:pointer;line-height:1.55;transition:border-color .2s, background-color .2s}
.chk:hover{border-color:var(--line-2)}
.chk input{position:absolute;opacity:0;width:22px;height:22px;margin:0;inset-inline-start:16px;top:14px;cursor:pointer}
.chk .box{width:22px;height:22px;border:1.5px solid var(--line-2);border-radius:6px;margin-top:1px;transition:background-color .2s, border-color .2s}
.chk input:checked + .box{background:var(--acc2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.4l3 3L13.5 6' fill='none' stroke='%2304121a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;border-color:var(--acc2)}
.chk input:focus-visible + .box{outline:2px solid var(--acc2);outline-offset:3px}
.chk:has(input:checked){border-color:rgba(0,196,160,.4);background:rgba(0,196,160,.04)}
.ack-read{display:inline-block;margin-top:6px;color:var(--acc2);font-size:.9375rem;text-underline-offset:4px;text-decoration-color:rgba(0,196,160,.35)}
.ack-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .nav{gap:16px}
  .tabs{position:absolute;top:calc(var(--nav-h) + var(--strip-h) + 1px);left:0;right:0;z-index:5;height:auto;margin:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);padding:8px 0;display:none;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
  .tabs.open{display:flex}
  .tabs a{height:52px;padding:0 24px}
  .tabs a[aria-current=page]{color:var(--acc2)}
  .tab-ink{display:none}
  .split{grid-template-columns:minmax(0,1fr)}
  .demo,.demo.mirror{grid-template-columns:minmax(0,1fr)}
  .demo.mirror .demo-copy{order:-1}
  .split-head{position:static}
  .plans{grid-template-columns:minmax(0,1fr)}
  .origin{grid-template-columns:minmax(0,1fr)}
  .foot-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  :root{--wrap:calc(100% - 32px);--nav-h:58px}
  .screen-stage{width:calc(100% - 32px)}
  .screen{border-radius:9px}
  .car{--cw:70vw}
  .device-base{margin:0 -3%}
  .demo{width:calc(100% - 32px)}
  .inside li{grid-template-columns:minmax(0,1fr);gap:4px;padding:18px 0}
  .actions .btn{flex:1 1 200px}
  .ack-actions .btn{flex:1}
  .plan-price{font-size:1.875rem}
  .qa button{font-size:.9688rem}
  .disc li{grid-template-columns:28px minmax(0,1fr);gap:4px 8px}
}
/* Reduced motion calms entrances/transitions only; the tape, the carousel slide, the clips and the moving card media (.mv, the Smart Money rail) keep moving (owner 2026-10-04). */
@media (prefers-reduced-motion:reduce){
  *:not(.strip-track):not(.swiper-wrapper):not(.fcard):not(.mv):not(.smx-slot):not(.smx-cap),*::before,*::after{animation:none !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .car-dots .swiper-pagination-bullet-active::after{animation:barfill var(--car-t) linear both !important}
}

/* ---------- round 2: Spot Gamma card (three stills crossfading) ---------- */
.fmedia.sgx>img{object-position:50% 0;opacity:0;animation:sgx 6.6s linear infinite}
.fmedia.sgx>img:nth-child(1){animation-delay:0s}
.fmedia.sgx>img:nth-child(2){animation-delay:2.2s}
.fmedia.sgx>img:nth-child(3){animation-delay:4.4s}
@keyframes sgx{0%{opacity:0;z-index:3}7%{opacity:1;z-index:3}36%{opacity:1;z-index:2}40%{opacity:0;z-index:1}100%{opacity:0;z-index:1}}
.fmedia.sgx:hover>img,.fmedia.sgx.hold>img{animation-play-state:paused}

/* ---------- round 2: pricing "More" ---------- */
.plan-more{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:4px}
.plan-more h3{font-size:.875rem;font-weight:700;color:var(--text);margin-top:10px}
.plan-more h3:first-child{margin-top:0}
.plan-more p{color:var(--mute);font-size:.875rem;line-height:1.7}
.more-btn{margin-top:16px;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--line-2);
  background:transparent;color:var(--acc2);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer}
.more-btn:hover{border-color:rgba(0,196,160,.5)}
.more-btn:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
.more-btn .chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .3s}
.more-btn[aria-expanded=true] .chev{transform:rotate(180deg)}
.more-btn [data-i18n="pricing.less"],.more-btn[aria-expanded=true] [data-i18n="pricing.more"]{display:none}
.more-btn[aria-expanded=true] [data-i18n="pricing.less"]{display:inline}

/* ---------- round 2: footer pages + bottom row ---------- */
.legal h2{margin-top:34px;padding-top:24px;border-top:1px solid var(--line);font-size:1.0625rem;font-weight:700}
.legal h1+p{margin-top:16px}
.legal p,.legal li{margin-top:10px;color:var(--mute);line-height:1.75}
.legal ul{margin:10px 0 0;padding-inline-start:1.2em}
.legal li{margin-top:6px}
.legal .disc-ver{margin-top:36px}
html[lang=ar] .legal p,html[lang=ar] .legal li{line-height:1.95}
.foot-bar{width:var(--wrap);margin:0 auto;padding:18px 0 26px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-links a{color:var(--mute);text-decoration:none;font-size:.875rem}
.foot-links a:hover,.foot-links a[aria-current=page]{color:var(--text)}

/* Feature carousel, round 2 follow-up: normal size as before; the card's Enlarge button switches the whole carousel to the
   large size (centre card about half the viewport at 1440, full width on phones) and back. Media edge to edge at 16:9,
   title + line directly under it, card height = its content. Side cards stay partly visible and dimmed. */
.feat-car{--cw:clamp(250px, 24vw, 350px)}
.feat-car.is-big{--cw:clamp(300px, 50vw, 760px)}
.feat-car .fcard{height:auto;min-height:0;padding:0;overflow:hidden}
.feat-car .fcard::before{top:0;z-index:1}
.feat-car .fmedia{border:0;border-bottom:1px solid rgba(0,196,160,.12);border-radius:0;isolation:isolate}
.feat-car .fbody{flex:1;justify-content:flex-start;padding:clamp(14px, 1.4vw, 20px) clamp(14px, 1.6vw, 24px) clamp(16px, 1.6vw, 22px)}
.feat-car .fbody p{margin-top:6px;max-width:none}
.feat-car .car-btn{top:calc(24px + var(--cw) * .28125 - 21px)}
.feat-car.is-big #carPrev{inset-inline-start:max(8px, calc(50% - var(--cw) / 2 - 63px))}
.feat-car.is-big #carNext{inset-inline-end:max(8px, calc(50% - var(--cw) / 2 - 63px))}
.feat-car.is-big .car-dots .swiper-pagination-bullet-active::after{animation:none}
/* Enlarged = the whole original capture, never a crop: stop the pan, fit the full image inside the 16:9 window (owner 2026-10-04). */
.feat-car.is-big .fmedia>img,.feat-car.is-big .fmedia.pan>img{inset:0;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:50% 50%;transform:none;animation-name:none;will-change:auto}
.feat-car.is-big .fmedia.sgx>img{animation-name:sgx}
.car-zoom{position:absolute;top:10px;inset-inline-end:10px;z-index:2;width:34px;height:34px;display:grid;place-items:center;border-radius:8px;
  border:1px solid rgba(0,196,160,.3);background:rgba(5,12,18,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;
  transition:border-color .2s, background-color .2s, opacity .4s}
.car-zoom:hover{border-color:var(--acc2);background:rgba(5,12,18,.9)}
.car-zoom svg{width:16px;height:16px;fill:none;stroke:var(--text);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.car-zoom .zo,.feat-car.is-big .car-zoom .zi{display:none}
.feat-car.is-big .car-zoom .zo{display:block}
.feat-car .swiper-slide:not(.swiper-slide-active) .car-zoom{visibility:hidden;opacity:0}
@media (max-width:900px){ .feat-car.is-big{--cw:64vw} }
@media (max-width:600px){ .feat-car{--cw:70vw} .feat-car.is-big{--cw:calc(100vw - 32px)} }

/* ---------- round 3: Smart Money carousel card — avatar rail on navy (sizes in container units, so Enlarge scales it) ---------- */
.fmedia.smx{container-type:size;background:#071726;--dir:1}
html[dir=rtl] .fmedia.smx{--dir:-1}
.smx-rail{position:absolute;inset:11cqh 0 auto;height:40cqh;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%)}
.smx-slot{position:absolute;top:0;left:50%;width:40cqh;height:40cqh;margin-left:-20cqh;border-radius:50%;display:grid;place-items:center;
  background:#0d2234;border:1px solid rgba(255,255,255,.1);opacity:0;
  transform:translateX(calc(var(--d, 0) * 22cqw * var(--dir))) scale(.4);
  transition:transform .6s var(--ease), opacity .6s var(--ease), border-color .6s, background-color .6s}
.smx-slot svg{width:56%;height:56%;fill:#5f7d92}
.smx-slot[data-d="0"]{opacity:1;transform:translateX(0) scale(1);border:2px solid #00d4ff;background:#0f2a3f}
.smx-slot[data-d="0"] svg{fill:#9fb7c7}
.smx-slot[data-d="1"]{opacity:.6;transform:translateX(calc(var(--d) * 22cqw * var(--dir))) scale(.58)}
.smx-slot[data-d="2"]{opacity:.32;transform:translateX(calc(var(--d) * 22cqw * var(--dir))) scale(.46)}
.smx-caps{position:absolute;inset:57cqh 5cqw 0}
.smx-cap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;transform:translateY(4cqh);
  transition:opacity .45s var(--ease), transform .45s var(--ease)}
.smx-cap.on{opacity:1;transform:none;transition-delay:.15s}
.smx-name,.smx-type{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smx-name{color:#fff;font-weight:600;font-size:clamp(12px, 7.4cqh, 24px);line-height:1.25}
.smx-type{margin-top:.6cqh;color:var(--mute);font-size:clamp(11px, 5.5cqh, 17px);line-height:1.3}
.smx-chip{margin-top:3cqh;display:inline-flex;align-items:center;gap:.9cqh;padding:.9cqh 2.6cqh;border-radius:6px;font-size:clamp(11px, 5.4cqh, 16px);
  line-height:1.25;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;border:1px solid}
.smx-chip b{color:#fff;font-weight:700;letter-spacing:.02em}
.smx-chip i{font-style:normal;opacity:.55}
html[lang=en] .smx-chip span{text-transform:uppercase;letter-spacing:.04em}
.smx-chip.buy{color:#34d399;border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.08)}
.smx-chip.sell{color:#f87171;border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.08)}
html[lang=ar] .smx-name,html[lang=ar] .smx-type{line-height:1.45}
/* ---- Contact tab: one form card (owner 2026-10-05: navy ground, cyan accent, 1px muted borders, small radius, no gradients) ---- */
.ct-wrap{width:min(640px, calc(100% - 32px));margin:0 auto;padding:clamp(48px, 6vw, 96px) 0 clamp(64px, 7vw, 112px)}
.ct-card{display:grid;gap:16px;padding:clamp(22px, 3vw, 36px);background:var(--surface);border:1px solid var(--line);border-radius:12px}
.ct-title{font-family:var(--display);font-size:clamp(1.375rem, 1.1rem + .9vw, 1.875rem);line-height:1.15;letter-spacing:-.02em;font-weight:700}
.ct-sub{margin-top:-6px;color:var(--mute);line-height:1.6;text-wrap:pretty}
html[lang=ar] .ct-title{letter-spacing:0;line-height:1.35}
html[lang=ar] .ct-sub{line-height:1.85}
.ct-f{display:grid;gap:7px;font-size:.875rem;font-weight:500}
.ct-f input,.ct-f textarea{width:100%;height:46px;padding:0 14px;border:1px solid var(--line-2);border-radius:8px;background:var(--ink);color:var(--text);
  font:inherit;font-size:16px;font-weight:400;outline:none;transition:border-color .15s,box-shadow .15s}
.ct-f textarea{height:auto;min-height:140px;padding:12px 14px;line-height:1.6;resize:vertical}
.ct-f input:hover,.ct-f textarea:hover{border-color:rgba(0,212,255,.38)}
.ct-f input:focus-visible,.ct-f textarea:focus-visible{border-color:var(--cy);box-shadow:0 0 0 3px rgba(0,212,255,.16)}
html[lang=ar] .ct-f input[dir=ltr]{text-align:right}
.ct-ts{min-height:65px}
.ct-send{width:100%;height:48px;border:0;border-radius:8px;background:var(--cy);color:var(--ink);font-weight:700;font-size:1rem;cursor:pointer;transition:background-color .15s}
.ct-send:hover{background:#38dcff}
.ct-send:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ct-send[disabled]{opacity:.42;cursor:not-allowed}
.ct-msg{font-size:.9375rem;line-height:1.6;color:var(--mute)}
.ct-msg.err{color:#ff8a9e}
.ct-msg.ok{color:var(--acc2)}
.ct-agree{color:var(--mute);font-size:.875rem}
.ct-agree a{color:var(--cy);text-underline-offset:3px}
.ct-alt{margin-top:18px;text-align:center;color:var(--mute);font-size:.9375rem}
/* "Show email": inline in running text; the address is built by contact.js on click */
.em-show{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--cy);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;vertical-align:baseline}
.em-show svg{flex:none;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.em-show:focus-visible{outline:2px solid var(--cy);outline-offset:2px;border-radius:3px}
.em-addr{color:var(--text);direction:ltr;unicode-bidi:isolate;-webkit-user-select:all;user-select:all;border-bottom:1px dashed var(--line-2)}

/* ---------- The story (owner 2026-10-05): ONE card in the carousel card's own frame (.car.feat-car gives the same width,
   radius, border, gradient and shadow), always in the centred-card look; the film plays in a full-screen overlay. ---------- */
.story-sect{border-top:1px solid var(--line)}
.story-car{display:flex;justify-content:center;padding:24px 0 12px}
.story-card{width:var(--cw);cursor:pointer;transform:none;opacity:1;filter:none;border-color:rgba(0,196,160,.32)}
.story-card::before{opacity:1}
.story-card .fmedia>img{transition:transform 1.1s var(--ease)}
.story-card:hover .fmedia>img{transform:scale(1.035)}
.story-card .fbody{align-items:center;justify-content:center}
.story-glyph{position:absolute;left:50%;top:50%;z-index:1;width:56px;height:56px;margin:-28px 0 0 -28px;display:grid;place-items:center;border-radius:50%;
  background:rgba(5,12,18,.62);border:1px solid rgba(0,229,192,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  box-shadow:0 0 0 7px rgba(0,196,160,.08), 0 10px 30px -8px rgba(0,0,0,.8);transition:transform .35s var(--ease), border-color .35s}
.story-glyph svg{width:22px;height:22px;fill:var(--acc2);margin-left:3px}
.story-card:hover .story-glyph{transform:scale(1.08);border-color:var(--acc2)}
.story-play{gap:10px}
.story-play svg{width:15px;height:15px;fill:currentColor;flex:none}
/* overlay: covers the whole viewport above the sticky bar; the iframe is created on demand. The close button shows only when
   the film stops on its last page (reduced motion / no canvas): bottom end corner, clear of the film's wordmark and language toggle. */
.story-ov{position:fixed;inset:0;z-index:300;background:#03080e;opacity:0;transition:opacity .35s ease}
.story-ov[hidden]{display:none}
.story-ov.on{opacity:1}
.story-ov iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#03080e}
.story-x{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));inset-inline-end:18px;z-index:2;width:40px;height:40px;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(0,196,160,.35);background:rgba(5,12,18,.72);cursor:pointer}
.story-x[hidden]{display:none}
.story-x svg{width:16px;height:16px;fill:none;stroke:var(--text);stroke-width:1.8;stroke-linecap:round}
html.story-open,html.story-open body{overflow:hidden}

/* ---------- cookie notice (Privacy section 8: essential cookies only) ---------- */
.ck{position:fixed;inset-inline-start:16px;bottom:16px;z-index:60;max-width:440px;display:flex;align-items:center;gap:14px;padding:12px 12px 12px 16px;
  border:1px solid var(--line-2);border-radius:14px;background:var(--surface-2);color:var(--mute);font-size:.875rem;line-height:1.5}
html[dir=rtl] .ck{padding:12px 16px 12px 12px}
.ck a{color:var(--acc2)}
.ck-ok{flex:none;height:34px;padding:0 16px}
@media (max-width:560px){.ck{inset-inline:12px;bottom:12px;max-width:none}}