/* Vattora marketing site. Tokens from vattora_brand/final/tokens.json (1.0.0, 3 Nov 2026).
   No green-to-blue gradient (government mark); teal -> petrol only. Arabic: same px size, ~1.2x leading, no tracking. */
@font-face{font-family:"Geist";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/geist-latin.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:"Geist";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/geist-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/geist-mono-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plex-arabic-ar-400.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/plex-arabic-ar-600.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{
  color-scheme:light;
  --bg:#FFFFFF; --bg-2:#F7FAFB; --bg-3:#EFF4F5; --line:#E2EAEC; --line-2:#C9D6D9;
  --ink:#0B1F26; --ink-2:#32434A; --ink-3:#5B7076;
  --brand:#0585A1; --brand-i:#04728A; --brand-i-h:#046277; --petrol:#034A59; --tint:#EBFBFE; --tint-2:#D3F5FC;
  --on-brand:#FFFFFF; --hero-a:#0585A1; --hero-b:#034A59;
  --dark:#0B1F26; --dark-2:#11303A; --dark-ink:#EAF4F6; --dark-ink-2:#A9C2C8; --dark-accent:#07B8DF;
  --pend-fg:#8A4B00; --pend-bg:#FFF4DD; --pend-bd:#F2C46B; --pend-dot:#B45F06;
  --val-fg:#04728A; --val-bg:#EBFBFE; --val-bd:#9CEBFC;
  --sent-fg:#1D4FA8; --sent-bg:#EAF1FD; --sent-bd:#A9C3F2;
  --del-fg:#17663A; --del-bg:#E8F6EE; --del-bd:#9FD8B6;
  --rej-fg:#A3221B; --rej-bg:#FDEDEB; --rej-bd:#F2A9A2;
  --sh-1:0 1px 2px rgba(11,31,38,.06);
  --sh-2:0 1px 2px rgba(11,31,38,.05),0 8px 24px -8px rgba(11,31,38,.12);
  --sh-3:0 2px 4px rgba(11,31,38,.04),0 30px 60px -24px rgba(3,74,89,.30);
  --r-sm:6px; --r:8px; --r-lg:12px; --r-xl:16px; --r-2xl:24px; --r-full:9999px;
  --t:150ms ease-out; --wrap:1200px; --gut:24px;
  --f:"Geist","Segoe UI","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-ar:"Geist","IBM Plex Sans Arabic","Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --fm:"Geist Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
html[lang="ar"] body{font-family:var(--f-ar);line-height:1.85}
img,svg{display:block;max-width:100%}
a{color:var(--brand-i);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--brand-i-h)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:600;letter-spacing:-.02em;line-height:1.15}
html[lang="ar"] :is(h1,h2,h3,h4){letter-spacing:0;line-height:1.4}
p{margin:0}
.num,.tn{font-variant-numeric:tabular-nums}
.mono{font-family:var(--fm);font-size:.92em}
.ltr{direction:ltr;unicode-bidi:isolate}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-inline-start:16px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:var(--r)}
.skip:focus{top:12px;color:var(--bg)}
.wrap{width:min(100% - 2*var(--gut),var(--wrap));margin-inline:auto}
.narrow{width:min(100% - 2*var(--gut),820px);margin-inline:auto}

/* ---------------------------------------------------------------- buttons */
.btn{--h:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 18px;border-radius:var(--r);
  font:600 15px/1 inherit;font-family:inherit;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background var(--t),border-color var(--t),color var(--t),box-shadow var(--t),transform var(--t)}
.btn svg{width:18px;height:18px;flex:none}
.btn.p{background:var(--brand-i);color:var(--on-brand);box-shadow:var(--sh-1),inset 0 1px 0 rgba(255,255,255,.12)}
.btn.p:hover{background:var(--brand-i-h);color:var(--on-brand);transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn.p:active{transform:none}
.btn.s{background:var(--bg);color:var(--ink);border-color:var(--line-2);box-shadow:var(--sh-1)}
.btn.s:hover{border-color:var(--ink-3);color:var(--ink);transform:translateY(-1px)}
.btn.g{background:transparent;color:var(--ink-2)}
.btn.g:hover{background:var(--bg-3);color:var(--ink)}
.btn.lg{--h:52px;padding:0 24px;font-size:16px;border-radius:var(--r-lg)}
.btn.w{background:#FFFFFF;color:#034A59}
.btn.w:hover{background:#EBFBFE;color:#034A59;transform:translateY(-1px)}
.btn.o{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.35)}
.btn.o:hover{border-color:#FFFFFF;color:#FFFFFF}
.btn[disabled]{opacity:.55;pointer-events:none}
html[dir="rtl"] .btn .arr{transform:scaleX(-1)}
.link-arr{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.link-arr svg{width:16px;height:16px;transition:transform var(--t)}
.link-arr:hover svg{transform:translateX(3px)}
html[dir="rtl"] .link-arr svg{transform:scaleX(-1)}
html[dir="rtl"] .link-arr:hover svg{transform:scaleX(-1) translateX(3px)}

/* ---------------------------------------------------------------- header */
.hd{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--t),background var(--t)}
.hd.sc{border-bottom-color:var(--line)}
.hd .wrap{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:26px;width:auto}
html[lang="ar"] .logo img{height:38px}
.logo .dk{display:none}
.nav{display:flex;align-items:center;gap:2px;margin-inline-start:8px}
.nav a{color:var(--ink-2);font-size:14.5px;font-weight:500;padding:8px 12px;border-radius:var(--r)}
.nav a:hover{color:var(--ink);background:var(--bg-3)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--bg-3)}
.hd .act{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.hd .act .btn{--h:38px;font-size:14px;padding:0 14px}
.lang{font-weight:600}
html[lang="en"] .lang{font-family:"IBM Plex Sans Arabic",var(--f-ar)}
.burger{display:none;width:40px;height:40px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--bg);color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
.burger svg{width:20px;height:20px}
.mnav{display:none}
@media (max-width:1020px){
  .nav,.hd .act .hide-m{display:none}
  .burger{display:inline-flex}
  .mnav{position:fixed;inset:68px 0 auto 0;z-index:49;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--sh-3);padding:12px var(--gut) 20px;display:grid;gap:2px;
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity var(--t),transform var(--t),visibility var(--t)}
  .mnav.on{transform:none;opacity:1;visibility:visible}
  .mnav a{padding:12px 8px;color:var(--ink);font-weight:500;border-bottom:1px solid var(--line)}
  .mnav .btn{margin-top:12px;color:var(--on-brand)}
}

/* ---------------------------------------------------------------- sections */
.sec{padding:clamp(72px,9vw,120px) 0}
.sec.tight{padding:clamp(48px,6vw,80px) 0}
.sec.alt{background:var(--bg-2);border-block:1px solid var(--line)}
.eb{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--brand-i);letter-spacing:.02em;margin-bottom:14px}
html[lang="ar"] .eb{letter-spacing:0}
.eb::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor}
.sh{max-width:760px;margin-bottom:clamp(36px,5vw,56px)}
.sh.c{margin-inline:auto;text-align:center}
.sh.c .eb::before{display:none}
.sh h2{font-size:clamp(30px,4vw,44px)}
.sh p{margin-top:16px;font-size:clamp(16px,1.6vw,18.5px);color:var(--ink-2);line-height:1.6}
html[lang="ar"] .sh p{line-height:1.9}
.grad{color:var(--brand-i)}
html[lang="ar"] .grad{padding-bottom:.08em}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;padding:clamp(56px,8vw,104px) 0 clamp(40px,5vw,64px);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 14%,transparent) 1px,transparent 0);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%)}
.hero::after{content:"";position:absolute;z-index:-1;width:900px;height:520px;left:50%;top:-180px;transform:translateX(-50%);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 22%,transparent),transparent);filter:blur(20px);opacity:.75}
.hero .top{text-align:center;max-width:900px;margin-inline:auto}
.pill{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:var(--r-full);background:var(--bg);border:1px solid var(--line);box-shadow:var(--sh-1);font-size:13.5px;color:var(--ink-2);margin-bottom:26px}
html[dir="rtl"] .pill{padding:6px 6px 6px 14px}
@media (max-width:520px){.pill b{display:none}.pill{padding:6px 14px}}
.pill b{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-full);background:var(--tint);color:var(--brand-i);font-size:12px;font-weight:600}
.hero h1{font-size:clamp(38px,6.2vw,72px);letter-spacing:-.035em;line-height:1.04}
html[lang="ar"] .hero h1{font-size:clamp(34px,5.4vw,62px);letter-spacing:0;line-height:1.32}
.hero .lead{margin:24px auto 0;max-width:720px;font-size:clamp(17px,1.9vw,20px);color:var(--ink-2);line-height:1.6}
html[lang="ar"] .hero .lead{line-height:1.95}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.micro{margin-top:16px;font-size:13.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center}
.micro span{display:inline-flex;align-items:center;gap:6px}
.micro svg{width:15px;height:15px;color:var(--brand)}

/* the stage: systems -> Vattora -> the ASP */
.stage{position:relative;margin-top:clamp(44px,6vw,72px);border-radius:var(--r-2xl);border:1px solid var(--line);background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
  box-shadow:var(--sh-3);padding:clamp(18px,3vw,36px);overflow:hidden}
.stage .bar{display:flex;align-items:center;gap:10px;margin:-6px 0 22px;color:var(--ink-3);font-size:12.5px}
.stage .bar i{width:10px;height:10px;border-radius:50%;background:var(--line-2);display:block}
.stage .bar .live{margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;color:var(--del-fg);font-weight:600}
.stage .bar .live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:ping 2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 60%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
.flow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:center}
.flow svg.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.wires path{fill:none;stroke:var(--line-2);stroke-width:1.5}
.wires path.hot{stroke:url(#vg);stroke-width:2}
.wires circle{fill:var(--brand)}
.col{position:relative;z-index:1;display:grid;gap:10px}
.col h4{font-size:11.5px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
html[lang="ar"] .col h4{text-transform:none;letter-spacing:0;font-size:13px}
.src{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-lg);background:var(--bg);border:1px solid var(--line);box-shadow:var(--sh-1);font-size:14px;font-weight:500}
.src .ic{width:30px;height:30px;border-radius:var(--r);display:grid;place-items:center;background:var(--bg-3);color:var(--ink-2);flex:none}
.src .ic svg{width:16px;height:16px}
.src small{display:block;font-size:12px;color:var(--ink-3);font-weight:400;line-height:1.3}
.src .dot{margin-inline-start:auto;width:8px;height:8px;border-radius:50%;background:var(--del-fg);flex:none;opacity:.85}
.hub{position:relative;z-index:1;justify-self:center;width:min(100%,250px);border-radius:var(--r-xl);background:var(--bg);border:1px solid var(--line);box-shadow:var(--sh-3);padding:18px;text-align:center}
.hub::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(140deg,var(--brand),transparent 45%,transparent 60%,var(--brand));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7}
.hub .mk{height:46px;width:auto;margin:4px auto 10px}
html[lang="ar"] .hub .mk{height:40px}
.hub .mk.dk{display:none}
.hub .tasks{display:grid;gap:6px;margin-top:12px;text-align:start}
.hub .tasks span{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);padding:6px 8px;border-radius:var(--r);background:var(--bg-2)}
.hub .tasks svg{width:14px;height:14px;color:var(--brand);flex:none}
.dst{display:grid;gap:10px}
.asp{padding:14px;border-radius:var(--r-lg);background:var(--tint);color:var(--ink);border:1.5px solid var(--brand);box-shadow:var(--sh-2)}
.asp b{display:block;font-size:14.5px}
.asp small{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.4;margin-top:2px}
.asp .row{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.asp .row span{font-size:11.5px;padding:3px 8px;border-radius:var(--r-full);background:#FFFFFF;border:1px solid var(--line-2);color:var(--ink-2)}
.ticker{margin-top:22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:var(--r-lg);background:var(--bg);border:1px solid var(--line);font-size:13px}
.ticker .doc{display:flex;align-items:center;gap:10px;min-width:0}
.ticker .doc b{font-family:var(--fm);font-size:12.5px;color:var(--ink);font-weight:600}
.ticker .doc span{color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticker .steps{display:flex;align-items:center;gap:6px;margin-inline-start:auto;flex-wrap:wrap}
.ticker .steps i{width:14px;height:1px;background:var(--line-2)}
@media (max-width:860px){
  .flow{grid-template-columns:minmax(0,1fr);gap:44px}
  .col.srcs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .col.srcs h4{grid-column:1/-1}
  .ticker .steps{margin-inline-start:0}
}
@media (max-width:480px){.col.srcs{grid-template-columns:minmax(0,1fr)}.col.srcs .src:nth-of-type(n+5){display:none}}

/* status chips (tokens: pending / validated / sent / delivered / rejected) */
.st{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--r-full);font-size:12px;font-weight:600;border:1px solid;white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.pe{color:var(--pend-fg);background:var(--pend-bg);border-color:var(--pend-bd)}
.st.va{color:var(--val-fg);background:var(--val-bg);border-color:var(--val-bd)}
.st.se{color:var(--sent-fg);background:var(--sent-bg);border-color:var(--sent-bd)}
.st.de{color:var(--del-fg);background:var(--del-bg);border-color:var(--del-bd)}
.st.re{color:var(--rej-fg);background:var(--rej-bg);border-color:var(--rej-bd)}
.ticker .st{opacity:.35;transition:opacity 300ms ease-out}
.ticker .st.on{opacity:1}

/* ---------------------------------------------------------------- facts band */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-xl);background:var(--bg);overflow:hidden}
.facts > div{padding:22px 24px;border-inline-end:1px solid var(--line)}
.facts > div:last-child{border-inline-end:0}
.facts b{display:block;font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
html[lang="ar"] .facts b{letter-spacing:0}
.facts span{display:block;margin-top:4px;font-size:13.5px;color:var(--ink-3);line-height:1.45}
@media (max-width:860px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.facts > div:nth-child(2){border-inline-end:0}.facts > div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* ---------------------------------------------------------------- cards and grids */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:980px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.card{position:relative;padding:26px;border-radius:var(--r-xl);background:var(--bg);border:1px solid var(--line);box-shadow:var(--sh-1);transition:box-shadow var(--t),transform var(--t),border-color var(--t)}
a.card{color:inherit;display:block}
a.card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line-2);color:inherit}
.card .ic{width:42px;height:42px;border-radius:var(--r-lg);display:grid;place-items:center;background:var(--tint);color:var(--brand-i);margin-bottom:18px}
.card .ic svg{width:21px;height:21px}
.card h3{font-size:18.5px;margin-bottom:8px}
.card p{color:var(--ink-2);font-size:15px;line-height:1.6}
html[lang="ar"] .card p{line-height:1.85}
.card .more{margin-top:16px}

/* problem block */
.prob{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
@media (max-width:900px){.prob{grid-template-columns:minmax(0,1fr)}}
.prob .q{font-size:clamp(26px,3.2vw,36px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
html[lang="ar"] .prob .q{letter-spacing:0;line-height:1.5}
.prob .q em{font-style:normal;color:var(--brand-i)}
.prob p{margin-top:16px;color:var(--ink-2);font-size:17px}
.gap-list{display:grid;gap:10px}
.gap-list > div{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg)}
.gap-list .n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--rej-bg);color:var(--rej-fg);font-weight:700;font-size:13px}
.gap-list .n.ok{background:var(--del-bg);color:var(--del-fg)}
.gap-list b{display:block;font-size:15px}
.gap-list small{display:block;color:var(--ink-3);font-size:13.5px;line-height:1.5;margin-top:2px}

/* steps */
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:s;position:relative}
.steps4::before{content:"";position:absolute;top:21px;inset-inline:calc(12.5% - 8px);height:2px;background:linear-gradient(90deg,var(--brand),var(--petrol));opacity:.35}
html[dir="rtl"] .steps4::before{background:linear-gradient(-90deg,var(--brand),var(--petrol))}
.steps4 > div{position:relative;padding:0 14px;text-align:center}
.steps4 .k{width:44px;height:44px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:2px solid var(--brand);color:var(--brand-i);font-weight:700;font-size:16px;box-shadow:0 0 0 6px var(--bg)}
.sec.alt .steps4 .k{box-shadow:0 0 0 6px var(--bg-2)}
.steps4 h3{font-size:17.5px;margin-bottom:8px}
.steps4 p{font-size:14.5px;color:var(--ink-2);line-height:1.6}
html[lang="ar"] .steps4 p{line-height:1.85}
@media (max-width:900px){.steps4{grid-template-columns:minmax(0,1fr);gap:28px}.steps4::before{top:22px;bottom:22px;inset-inline-start:21px;inset-inline-end:auto;width:2px;height:auto}
  .steps4 > div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 18px;text-align:start;padding:0}.steps4 .k{grid-row:span 2;margin:0}}

/* two ways to start */
.way{display:flex;flex-direction:column;padding:32px;border-radius:var(--r-2xl);border:1px solid var(--line);background:var(--bg);box-shadow:var(--sh-1)}
.way.feat{background:linear-gradient(160deg,var(--tint),var(--bg) 60%);border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.way .tag{align-self:flex-start;font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--r-full);background:var(--bg-3);color:var(--ink-2);margin-bottom:18px}
.way.feat .tag{background:var(--brand-i);color:var(--on-brand)}
.way h3{font-size:clamp(22px,2.4vw,26px);margin-bottom:10px}
.way > p{color:var(--ink-2)}
.ticks{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:11px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-2);line-height:1.5}
.ticks svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--brand)}
.way .btn{margin-top:auto;align-self:flex-start}
.way .fine{margin-top:14px;font-size:12.5px;color:var(--ink-3);line-height:1.5}

/* product preview (the console) */
.console{border-radius:var(--r-2xl);border:1px solid var(--line);background:var(--bg);box-shadow:var(--sh-3);overflow:hidden}
.console .tb{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.console .tb i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.console .tb span{margin-inline-start:12px;font-size:12.5px;color:var(--ink-3);font-family:var(--fm)}
.console .body{display:grid;grid-template-columns:200px minmax(0,1fr)}
.console .side{border-inline-end:1px solid var(--line);padding:16px 12px;display:grid;gap:2px;align-content:start;background:var(--bg-2)}
.console .side a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r);color:var(--ink-2);font-size:13.5px}
.console .side a.on{background:var(--bg);color:var(--ink);box-shadow:var(--sh-1);font-weight:600}
.console .side svg{width:16px;height:16px}
.console .main{padding:20px;min-width:0}
.console .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.console .kpi{padding:14px;border-radius:var(--r-lg);border:1px solid var(--line)}
.console .kpi span{display:block;font-size:11.5px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
html[lang="ar"] .console .kpi span{text-transform:none;letter-spacing:0;font-size:12.5px}
.console .kpi b{display:block;font-size:24px;font-weight:600;margin-top:4px;letter-spacing:-.02em}
.console .kpi small{font-size:12px;color:var(--del-fg);font-weight:600}
.console table{width:100%;border-collapse:collapse;font-size:13.5px}
.console th{text-align:start;font-size:11.5px;color:var(--ink-3);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.05em}
html[lang="ar"] .console th{text-transform:none;letter-spacing:0;font-size:12.5px}
.console td{padding:11px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.console tr:last-child td{border-bottom:0}
.console td.no{font-family:var(--fm);font-size:12.5px}
.console td.am{text-align:end;font-variant-numeric:tabular-nums}
.console td .why{display:block;font-size:12px;color:var(--rej-fg);white-space:normal}
.console .tw{overflow-x:auto}
@media (max-width:900px){.console .body{grid-template-columns:minmax(0,1fr)}.console .side{display:none}.console .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,64px);align-items:center}
@media (max-width:980px){.split{grid-template-columns:minmax(0,1fr)}}
.feat-list{display:grid;gap:18px;margin-top:28px}
.feat-list > div{display:flex;gap:14px}
.feat-list .ic{width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;background:var(--tint);color:var(--brand-i);flex:none}
.feat-list .ic svg{width:18px;height:18px}
.feat-list b{display:block;font-size:15.5px}
.feat-list small{display:block;font-size:14.5px;color:var(--ink-2);line-height:1.55;margin-top:2px}

/* the console showcase */
.feat-row{margin-bottom:clamp(32px,4vw,48px)}
.feat-row > div{display:flex;gap:14px}
.feat-row .ic{width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;background:var(--tint);color:var(--brand-i);flex:none}
.feat-row .ic svg{width:18px;height:18px}
.feat-row b{display:block;font-size:15.5px}
.feat-row small{display:block;font-size:14.5px;color:var(--ink-2);line-height:1.55;margin-top:2px}
.show{max-width:1080px;margin-inline:auto}

/* systems wall */
.syswall{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.sys{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--bg);font-size:14px;font-weight:500;color:var(--ink);box-shadow:var(--sh-1)}
.sys::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.sys.c{background:var(--del-bg);border-color:var(--del-bd)}
.sys.c::before{background:var(--del-fg)}
.sys.t::before{background:var(--brand)}
.sys.x::before{background:var(--pend-dot)}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;margin-top:24px;font-size:13px;color:var(--ink-3)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:8px;height:8px;border-radius:50%}

/* systems page */
.zone{margin-top:44px}
.zone h3{font-size:20px;margin-bottom:6px}
.zone > p{color:var(--ink-3);font-size:14.5px;margin-bottom:18px}
.stable{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;font-size:14.5px;background:var(--bg)}
.stable th{text-align:start;padding:12px 16px;background:var(--bg-2);font-size:12.5px;color:var(--ink-3);font-weight:600;border-bottom:1px solid var(--line)}
.stable td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.stable tr:last-child td{border-bottom:0}
.stable td:first-child{font-weight:600}
.stable .lbl{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2)}
.stable .lbl i{width:8px;height:8px;border-radius:50%;flex:none}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.filter input{flex:1 1 280px;height:46px;border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--bg);color:var(--ink);padding:0 16px;font:inherit;font-size:15px}
.filter input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.nores{display:none;margin-top:24px;padding:20px;border-radius:var(--r-lg);border:1px dashed var(--line-2);text-align:center;color:var(--ink-2)}

/* security */
.secgrid .card{padding:24px}
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.badge-row span{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--bg);font-size:13px;font-weight:500;color:var(--ink-2)}
.badge-row svg{width:15px;height:15px;color:var(--brand)}

/* timeline */
.tl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.tl{grid-template-columns:minmax(0,1fr)}}
.tl .card{padding:24px}
.tl .who{font-size:13px;font-weight:600;color:var(--brand-i)}
.tl h3{font-size:18px;margin:6px 0 18px}
.tl dl{margin:0;display:grid;gap:12px}
.tl dl div{display:flex;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.tl dt{font-size:13.5px;color:var(--ink-3)}
.tl dd{margin:0;font-weight:600;font-size:15px;text-align:end}
.src-note{margin-top:20px;font-size:13px;color:var(--ink-3);line-height:1.6;max-width:900px}
.src-note a{text-decoration:underline;text-underline-offset:2px}

/* FAQ */
.faq{display:grid;gap:10px;max-width:860px;margin-inline:auto}
.faq details{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);transition:border-color var(--t),box-shadow var(--t)}
.faq details[open]{border-color:var(--line-2);box-shadow:var(--sh-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-weight:600;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:18px;height:18px;flex:none;color:var(--ink-3);transition:transform var(--t)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq .a{padding:0 22px 20px;color:var(--ink-2);font-size:15px;line-height:1.7}
html[lang="ar"] .faq .a{line-height:1.95}

/* CTA band */
.band{position:relative;overflow:hidden;border-radius:var(--r-2xl);padding:clamp(40px,6vw,72px);background:linear-gradient(135deg,#EBFBFE 0%,#D3F5FC 100%);color:var(--ink);border:1px solid #9CEBFC;isolation:isolate}
html[dir="rtl"] .band{background:linear-gradient(-135deg,#EBFBFE 0%,#D3F5FC 100%)}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle at 1px 1px,rgba(5,133,161,.22) 1px,transparent 0);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000)}
.band h2{color:var(--ink);font-size:clamp(28px,3.6vw,42px);max-width:720px}
.band p{margin-top:14px;color:var(--ink-2);font-size:17px;max-width:620px}
.band .cta{justify-content:flex-start}

/* page hero (inner pages) */
.phero{position:relative;padding:clamp(56px,7vw,96px) 0 clamp(36px,4vw,56px);overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 12%,transparent) 1px,transparent 0);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 60% 80% at 20% 0%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse 60% 80% at 20% 0%,#000 20%,transparent 70%)}
html[dir="rtl"] .phero::before{-webkit-mask-image:radial-gradient(ellipse 60% 80% at 80% 0%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse 60% 80% at 80% 0%,#000 20%,transparent 70%)}
.phero h1{font-size:clamp(34px,5vw,56px);letter-spacing:-.03em;max-width:860px}
html[lang="ar"] .phero h1{letter-spacing:0;line-height:1.35}
.phero .lead{margin-top:18px;max-width:720px;font-size:clamp(16.5px,1.8vw,19px);color:var(--ink-2)}
.phero .cta{justify-content:flex-start;margin-top:28px}
.crumb{font-size:13px;color:var(--ink-3);margin-bottom:18px}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--ink)}

/* prose (legal, guide) */
.prose{max-width:760px}
.prose h2{font-size:24px;margin:44px 0 12px}
.prose h3{font-size:18px;margin:28px 0 8px}
.prose p,.prose li{color:var(--ink-2);font-size:16px;line-height:1.75}
html[lang="ar"] .prose p,html[lang="ar"] .prose li{line-height:2}
.prose p+p{margin-top:12px}
.prose ul{padding-inline-start:20px;margin:12px 0}
.prose li+li{margin-top:6px}
.prose a{text-decoration:underline;text-underline-offset:2px}
.note{margin-top:24px;padding:16px 18px;border-radius:var(--r-lg);background:var(--bg-2);border:1px solid var(--line);font-size:14px;color:var(--ink-2);line-height:1.65}

/* forms */
.formwrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:900px){.formwrap{grid-template-columns:minmax(0,1fr)}}
.fcard{padding:clamp(22px,3vw,34px);border-radius:var(--r-2xl);border:1px solid var(--line);background:var(--bg);box-shadow:var(--sh-2)}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:560px){.fgrid{grid-template-columns:minmax(0,1fr)}}
.fgrid .full{grid-column:1/-1}
.fld label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.fld label i{font-style:normal;font-weight:400;color:var(--ink-3)}
.fld input,.fld select,.fld textarea{width:100%;height:46px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--bg);color:var(--ink);padding:0 14px;font:inherit;font-size:15px;transition:border-color var(--t),box-shadow var(--t)}
.fld textarea{height:110px;padding:12px 14px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.fld input[aria-invalid="true"]{border-color:var(--rej-fg)}
.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.seg label{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;font-weight:500;font-size:14px;margin:0;transition:border-color var(--t),background var(--t)}
.seg input{width:16px;height:16px;accent-color:var(--brand-i);margin:0}
.seg label:has(input:checked){border-color:var(--brand);background:var(--tint)}
@media (max-width:560px){.seg{grid-template-columns:minmax(0,1fr)}}
.fcard .btn{width:100%;margin-top:20px}
.fcard .hint{margin-top:12px;font-size:12.5px;color:var(--ink-3);text-align:center;line-height:1.5}
.ferr{margin-top:12px;padding:10px 12px;border-radius:var(--r);background:var(--rej-bg);color:var(--rej-fg);font-size:14px}
.fok{text-align:center;padding:24px 8px}
.fok .ic{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:var(--del-bg);color:var(--del-fg)}
.fok .ic svg{width:26px;height:26px}
.fok h3{font-size:22px;margin-bottom:8px}
.fok p{color:var(--ink-2)}
.aside h3{font-size:18px;margin-bottom:14px}
.olist{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.olist li{display:flex;gap:14px}
.olist .n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--brand-i);font-weight:700;font-size:14px}
.olist b{display:block;font-size:15px}
.olist small{display:block;color:var(--ink-3);font-size:14px;line-height:1.55;margin-top:2px}

/* footer */
.ft{margin-top:clamp(72px,9vw,120px);border-top:1px solid var(--line);background:var(--bg-2);padding:56px 0 32px;font-size:14px}
.ft .cols{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:32px}
@media (max-width:860px){.ft .cols{grid-template-columns:repeat(2,minmax(0,1fr))}.ft .cols > div:first-child{grid-column:1/-1}}
.ft .logo img{height:24px}
html[lang="ar"] .ft .logo img{height:36px}
.ft .about{margin-top:14px;color:var(--ink-3);max-width:340px;line-height:1.6}
.ft h4{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:12px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ft ul a{color:var(--ink-3)}
.ft ul a:hover{color:var(--ink)}
.ft .stand{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);color:var(--ink-3);font-size:12.5px;line-height:1.65;max-width:980px}
.ft .base{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;color:var(--ink-3);font-size:12.5px}
.ft .base a{color:var(--ink-3)}
.theme{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--bg)}
.theme button{width:28px;height:28px;border-radius:50%;border:0;background:transparent;color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.theme button[aria-pressed="true"]{background:var(--bg-3);color:var(--ink)}
.theme svg{width:15px;height:15px}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(14px);transition:opacity 600ms ease-out,transform 600ms ease-out}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .wires circle{display:none}
}
@media print{.hd,.ft,.band,.burger{display:none}.rv{opacity:1;transform:none}}

/* ================================================================ 3 Nov 2026 b: mega menu, the Confluence hero, countdown, system pages */
/* mega menu */
.nav .top{display:inline-flex;align-items:center;gap:4px;color:var(--ink-2);font-family:inherit;font-size:14.5px;font-weight:500;line-height:1;padding:9px 12px;border-radius:var(--r);background:none;border:0;cursor:pointer;transition:color var(--t),background var(--t)}
.nav .top:hover,.nav .grp:focus-within > .top,.nav .grp.open > .top{color:var(--ink);background:var(--bg-3)}
.nav .grp[data-cur] > .top,.nav a.top[aria-current]{color:var(--ink)}
.nav .cv{width:14px;height:14px;transition:transform var(--t)}
.nav .grp.open .cv{transform:rotate(180deg)}
.grp{position:relative}
.dd{position:absolute;top:calc(100% + 10px);inset-inline-start:-8px;z-index:60;min-width:360px;padding:8px;border-radius:var(--r-xl);background:var(--bg);border:1px solid var(--line);box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--t),transform var(--t),visibility var(--t)}
.dd::before{content:"";position:absolute;inset:-12px 0 auto 0;height:12px}
.grp.open .dd{opacity:1;visibility:visible;transform:none}
@media (hover:hover){.grp:hover .dd{opacity:1;visibility:visible;transform:none}}
.dd a{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-lg);color:var(--ink)}
.dd a:hover{background:var(--bg-2);color:var(--ink)}
.dd .ic{width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;background:var(--tint);color:var(--brand-i);flex:none}
.dd .ic svg{width:18px;height:18px}
.dd b{display:block;font-size:14px;font-weight:600}
.dd small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.4;margin-top:2px}
.dd.sys{min-width:520px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dd.sys a{align-items:center;padding:9px 12px}
.dd.sys .d{width:9px;height:9px;border-radius:50%;flex:none}
.dd .all{grid-column:1/-1;justify-content:center;font-weight:600;color:var(--brand-i);border-top:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg);margin-top:4px;align-items:center}
.dd .all .arr{width:16px;height:16px}
html[dir="rtl"] .dd .all .arr{transform:scaleX(-1)}
.s-c{--sc:var(--del-fg)}
.s-t{--sc:var(--brand)}
.s-x{--sc:var(--pend-dot)}
.s-a{--sc:var(--sent-fg)}
.d.s-c,.d.s-t,.d.s-x,.d.s-a{background:var(--sc)}
.lbl2{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink-2);padding:4px 10px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--bg)}
.lbl2 i{width:8px;height:8px;border-radius:50%;background:var(--sc);flex:none}
.lbl2.s-c{background:var(--del-bg);border-color:var(--del-bd);color:var(--del-fg)}
.mnav details{border-bottom:1px solid var(--line)}
.mnav summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:12px 8px;font-weight:600;cursor:pointer}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary .cv{width:16px;height:16px}
.mnav details[open] summary .cv{transform:rotate(180deg)}
.mnav details a{display:block;padding:9px 20px;border:0;font-weight:400;color:var(--ink-2)}
@media (max-width:1020px){.mnav{max-height:calc(100vh - 68px);overflow-y:auto}}
@media (max-width:1180px) and (min-width:1021px){.hd .act .lang{display:none}}
.ft .cols.cols5{grid-template-columns:1.3fr repeat(4,minmax(0,1fr))}
@media (max-width:980px){.ft .cols.cols5{grid-template-columns:repeat(2,minmax(0,1fr))}.ft .cols.cols5 > div:first-child{grid-column:1/-1}}

/* the Confluence hero, light (owner 3 Nov 2026: «بلاش اللون الغامق») */
.hx{position:relative;padding:clamp(20px,3vw,36px) 0 clamp(56px,7vw,96px);color:var(--ink);overflow:hidden;isolation:isolate;
  background:radial-gradient(55% 60% at 78% 52%,#D3F5FC 0%,rgba(211,245,252,0) 72%),linear-gradient(180deg,#FFFFFF 0%,#F2FAFC 100%);border-bottom:1px solid var(--line)}
html[dir="rtl"] .hx{background:radial-gradient(55% 60% at 22% 52%,#D3F5FC 0%,rgba(211,245,252,0) 72%),linear-gradient(180deg,#FFFFFF 0%,#F2FAFC 100%)}
.hx-bg{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle at 1px 1px,rgba(11,31,38,.08) 1px,transparent 0);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 25%,transparent 80%)}
.hx-g{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(28px,5vw,72px);align-items:center;margin-top:clamp(28px,4vw,48px)}
@media (max-width:980px){.hx-g{grid-template-columns:minmax(0,1fr)}}
.pill2{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--ink-2);padding:6px 14px;border-radius:var(--r-full);border:1px solid var(--line);background:#FFFFFF;box-shadow:var(--sh-1)}
.pill2 .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(5,133,161,.14)}
.hx h1{margin-top:22px;color:var(--ink);font-size:clamp(40px,5.6vw,70px);letter-spacing:-.035em;line-height:1.03}
html[lang="ar"] .hx h1{font-size:clamp(36px,4.9vw,60px);letter-spacing:0;line-height:1.3}
.grad2{color:var(--brand)}
.hx .lead{margin-top:20px;max-width:600px;font-size:clamp(16.5px,1.7vw,19px);color:var(--ink-2);line-height:1.6}
html[lang="ar"] .hx .lead{line-height:1.95}
.hx .cta{justify-content:flex-start;margin-top:28px}
/* countdown */
.cd{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;padding:10px;border-radius:var(--r-xl);border:1px solid var(--line);background:#FFFFFF;box-shadow:var(--sh-1)}
.cd-h{align-self:center;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:0 8px}
html[lang="ar"] .cd-h{letter-spacing:0;text-transform:none;font-size:13px}
.cd-i{flex:1 1 220px;display:grid;gap:2px;padding:10px 14px;border-radius:var(--r-lg);background:var(--bg-2);border:1px solid var(--line)}
.cd-k{font-size:12px;color:var(--ink-3)}
.cd-i b{font-size:14.5px;color:var(--ink);font-weight:600}
.cd-t{display:flex;gap:10px;margin-top:6px;direction:ltr}
html[dir="rtl"] .cd-t{justify-content:flex-end}
.cd-t span{display:flex;align-items:baseline;gap:3px}
.cd-t em{font-style:normal;font-size:22px;font-weight:600;color:var(--brand-i);font-family:var(--fm);letter-spacing:-.02em}
.cd-t small{font-size:11px;color:var(--ink-3)}
.cd-a{align-self:center;display:inline-flex;align-items:center;gap:6px;color:var(--brand-i);font-weight:600;font-size:14px;padding:0 10px}
.cd-a:hover{color:var(--brand-i-h)}
.cd-a .arr{width:16px;height:16px}
html[dir="rtl"] .cd-a .arr{transform:scaleX(-1)}
/* the picker */
.pick{margin-top:30px;padding:16px;border-radius:var(--r-xl);border:1px solid var(--line);background:#FFFFFF;box-shadow:var(--sh-2)}
.pk-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-weight:600;font-size:15px;margin-bottom:12px;color:var(--ink)}
.pk-h span{font-weight:400;font-size:12.5px;color:var(--ink-3)}
.pk-c{display:flex;flex-wrap:wrap;gap:7px}
.pk{height:32px;padding:0 12px;border-radius:var(--r-full);border:1px solid var(--line-2);background:#FFFFFF;color:var(--ink-2);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:background var(--t),border-color var(--t),color var(--t)}
.pk:hover{border-color:var(--brand);color:var(--ink)}
.pk[aria-pressed="true"]{background:var(--brand-i);border-color:var(--brand-i);color:#FFFFFF}
.pk-a{margin-top:14px;padding:14px;border-radius:var(--r-lg);background:var(--bg-2);border:1px solid var(--line)}
.pk-t{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pk-t b{font-size:16px;color:var(--ink)}
.pk-how{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:14px;color:var(--ink-2)}
.pk-how svg{width:16px;height:16px;color:var(--brand);flex:none}
.pk-l{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:12px}
.pk-l .btn{--h:38px;font-size:14px;padding:0 14px;white-space:normal;text-align:start}
.pk-l .link-arr{font-size:14px}
/* the visual */
.hx-r{position:relative}
.cf{position:relative;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:560/640}
.cf-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cf #cfg stop:first-child{stop-color:#07B8DF;stop-opacity:.22}
.cf .ln path{fill:none;stroke:rgba(5,133,161,.24);stroke-width:1.4;transition:stroke 300ms ease-out,stroke-width 300ms ease-out}
.cf .ln.on path{stroke:#0585A1;stroke-width:2.6;filter:drop-shadow(0 0 5px rgba(5,133,161,.35))}
.cf circle.p{fill:#07B8DF}
.cf circle.p2{fill:#034A59;opacity:0;transition:opacity 300ms}
.cf .ln.on circle.p2{opacity:1}
.cf .ln.on circle.p{fill:#0585A1}
.cf path.out{fill:none;stroke:#0585A1;stroke-width:3;filter:drop-shadow(0 0 6px rgba(5,133,161,.35))}
.cf circle.po{fill:#034A59}
.cf .ks{fill:#034A59;stroke:none;filter:drop-shadow(0 6px 14px rgba(5,133,161,.45))}
.cf .ks-ring{fill:none;stroke:rgba(5,133,161,.45);stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:ksp 2.4s ease-out infinite}
@keyframes ksp{0%{opacity:.9;transform:scale(.86)}100%{opacity:0;transform:scale(1.25)}}
.tg{position:absolute;transform:translate(-50%,-50%);z-index:2;white-space:nowrap;padding:6px 11px;border-radius:var(--r-full);font-family:var(--f);font-size:12.5px;font-weight:500;line-height:1;color:var(--ink);
  background:#FFFFFF;border:1px solid var(--line-2);box-shadow:var(--sh-1);cursor:pointer;transition:border-color var(--t),background var(--t),color var(--t),box-shadow var(--t)}
.tg:hover{border-color:var(--brand);color:var(--ink)}
.tg[aria-pressed="true"]{background:var(--brand-i);border-color:var(--brand-i);color:#FFFFFF;box-shadow:0 0 0 6px rgba(5,133,161,.14),0 8px 20px -8px rgba(4,114,138,.6)}
.kc{position:absolute;left:50%;transform:translate(-50%,-50%);z-index:2;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:8px 14px;border-radius:var(--r-full);
  background:#FFFFFF;color:var(--ink);font-size:13px;font-weight:500;border:1px solid var(--line);box-shadow:0 10px 26px -10px rgba(3,74,89,.45)}
.kc .ok{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#17663A;color:#FFFFFF}
.kc .ok svg{width:12px;height:12px}
.kc b{font-weight:600}
.kc .ar2{color:var(--ink-3)}
.aspn{position:absolute;left:50%;transform:translate(-50%,-50%);z-index:2;width:min(86%,320px);text-align:center;padding:12px 16px;border-radius:var(--r-lg);
  background:#FFFFFF;border:1.5px solid var(--brand);box-shadow:var(--sh-2);color:var(--ink)}
.aspn b{display:block;font-size:14px}
.aspn span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
@media (max-width:560px){.tg{font-size:11px;padding:5px 8px}.kc{font-size:12px;padding:7px 11px}.aspn{padding:10px 12px}.aspn b{font-size:13px}}
@media (prefers-reduced-motion:reduce){.cf circle{display:none}.cf .ks-ring{animation:none}}

.cd-s{display:grid;gap:8px;align-content:center;padding:4px 8px;flex:0 1 190px}
.cd-s .cd-h,.cd-s .cd-a{padding:0}
@media (max-width:720px){.cd{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px}.cd::-webkit-scrollbar{display:none}.cd-s{display:none}.cd-i{flex:0 0 82%;scroll-snap-align:start;padding:9px 12px}.cd-t{margin-top:2px}.cd-t em{font-size:18px}}
@media (max-width:420px){.tg{font-size:10.5px;padding:4px 7px}}

/* system pages */
.mth{display:flex;gap:14px;align-items:center;margin-top:22px;padding:16px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg-2)}
.mth .ic{width:44px;height:44px;border-radius:var(--r-lg);display:grid;place-items:center;background:var(--tint);color:var(--brand-i);flex:none}
.mth .ic svg{width:22px;height:22px}
.mth b{display:block;font-size:16px;margin-bottom:6px}
.sys-ls{display:flex;flex-wrap:wrap;gap:10px}
.sys-l{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--bg);color:var(--ink);font-weight:500;font-size:14.5px;box-shadow:var(--sh-1)}
.sys-l:hover{border-color:var(--brand);color:var(--ink)}
.sys-l .arr{width:15px;height:15px;color:var(--brand)}
html[dir="rtl"] .sys-l .arr{transform:scaleX(-1)}

/* review fixes, 3 Nov 2026 */
.console .tb .exm{margin-inline-start:auto;font-size:11.5px;font-weight:600;color:var(--pend-fg);background:var(--pend-bg);border:1px solid var(--pend-bd);padding:3px 9px;border-radius:var(--r-full)}

/* photos (3 Nov 2026): the page hero gets one, the home "gap" gets one */
.phero.wp .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:center}
.phero.wp h1{font-size:clamp(32px,4.2vw,50px)}
.phero.wp .lead{font-size:clamp(16px,1.6vw,18px)}
.ph{margin:0;border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--sh-3);border:1px solid var(--line);background:var(--bg-3)}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.hero-ph{aspect-ratio:4/3}
.gap-ph{margin-top:28px;aspect-ratio:16/10}
@media (max-width:900px){.phero.wp .wrap{grid-template-columns:minmax(0,1fr)}.hero-ph{aspect-ratio:16/10}}