/* SDM website — layout and components. Brand values come from tokens.css (the SDM design system). */

@font-face{font-family:"Somar";src:url("../assets/fonts/Somar-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Somar";src:url("../assets/fonts/Somar-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Somar";src:url("../assets/fonts/Somar-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Somar";src:url("../assets/fonts/Somar-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Somar";src:url("../assets/fonts/Somar-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Somar";src:url("../assets/fonts/Somar-ExtraBold.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  --ink-deep:#000D2B;            /* navy-900: the stage behind the retina */
  --nav-h:84px;
  --pad-x:clamp(20px,5vw,72px);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --lh-b:var(--lh-body);
  --lh-h:var(--lh-tight);
  --ls-d:var(--ls-display);
}
:root[dir="rtl"]{
  --lh-b:var(--lh-body-ar);
  --lh-h:var(--lh-heading-ar);
  --ls-d:0;
}


/* ---------- Themes: dark (default) and light ---------- */
:root{
  --bg:#000D2B; --bg-rgb:0,13,43;
  --fg:#FFFFFF; --fg-rgb:255,255,255;
  --muted:rgba(255,255,255,.72);
  --border-inv:rgba(255,255,255,.24);
  --accent:#1ECAD3;            /* turquoise as text/marks */
  --accent-soft:#63DDE3;       /* turquoise-300 */
  --violet-text:#C5C1EB;
  --glass:rgba(4,20,58,.6);
  --footer-bg:rgba(0,10,34,.85);
  --btn-solid-bg:#FFFFFF; --btn-solid-fg:#001E61; --btn-solid-hover:#EBF5FE;
  --grad-text:linear-gradient(90deg,#63DDE3 0%,#66B2EE 55%,#9B95DA 100%);
  --grad-text-rtl:linear-gradient(270deg,#63DDE3 0%,#66B2EE 55%,#9B95DA 100%);
  --partners-bg:#FFFFFF;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F4F7FC; --bg-rgb:244,247,252;
  --fg:#001E61; --fg-rgb:0,30,97;
  --muted:#4A5F94;
  --border-inv:rgba(0,30,97,.2);
  --accent:#0F868D;
  --accent-soft:#0F868D;
  --violet-text:#514AA6;
  --glass:rgba(var(--fg-rgb),.78);
  --footer-bg:#FFFFFF;
  --btn-solid-bg:#001E61; --btn-solid-fg:#FFFFFF; --btn-solid-hover:#1A356F;
  --grad-text:linear-gradient(90deg,#0F868D 0%,#0071CE 55%,#514AA6 100%);
  --grad-text-rtl:linear-gradient(270deg,#0F868D 0%,#0071CE 55%,#514AA6 100%);
  --partners-bg:#FFFFFF;
  color-scheme:light;
}
/* Product screens (the SAMIA/MUNIR visuals, the SAARIA report) stay dark in both themes */
.force-dark{
  --fg:#FFFFFF; --fg-rgb:255,255,255; --muted:rgba(255,255,255,.72); --accent:#1ECAD3; --accent-soft:#63DDE3;
  --bg-rgb:0,13,43; --violet-text:#C5C1EB; color:#fff;
}
/* Logos and images that exist in a dark-background and a light-background version */
:root[data-theme="light"] .on-dark{display:none!important}
:root:not([data-theme="light"]) .on-light{display:none!important}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important} /* hidden always wins, even over component display rules */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-b);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--sdm-turquoise);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;inset-inline-start:16px;top:-60px;z-index:100;background:var(--btn-solid-bg);color:var(--sdm-navy);padding:10px 16px;border-radius:var(--radius-pill,999px);font-weight:600}
.skip-link:focus{top:16px}

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;margin:0;
  font-size:var(--fs-xs);font-weight:var(--fw-medium);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--accent);
}
:root[dir="rtl"] .eyebrow{letter-spacing:0;text-transform:none;font-size:var(--fs-sm)}
.eyebrow__dot{width:6px;height:6px;border-radius:50%;background:var(--sdm-turquoise);box-shadow:0 0 0 4px rgba(30,202,211,.18)}
.eyebrow--muted{color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;height:52px;padding-inline:26px;
  border-radius:999px;font-size:15px;font-weight:var(--fw-semibold);white-space:nowrap;
  transition:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);
}
.btn--light{background:var(--btn-solid-bg);color:var(--btn-solid-fg)}
.btn--light:hover{background:var(--btn-solid-hover)}
.btn--ghost{border:1px solid var(--border-inv);color:var(--fg)}
.btn--ghost:hover{border-color:var(--fg);background:rgba(var(--fg-rgb),.06)}
.btn__arrow{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-base) var(--ease-standard)}
.btn:hover .btn__arrow{transform:translateX(3px)}
:root[dir="rtl"] .btn__arrow{transform:scaleX(-1)}
:root[dir="rtl"] .btn:hover .btn__arrow{transform:scaleX(-1) translateX(3px)}

/* ---------- Opening ---------- */
.intro{
  position:fixed;inset:0;z-index:60;background:var(--bg);
  display:grid;place-items:center;pointer-events:none;
}
html:not(.js) .intro{display:none}
.intro__axis{position:absolute;background:rgba(var(--fg-rgb),.12)}
.intro__axis--h{left:0;right:0;top:50%;height:1px;transform:scaleX(0);animation:axis-x 1.1s var(--ease-expo) .1s forwards}
.intro__axis--v{top:0;bottom:0;left:50%;width:1px;transform:scaleY(0);animation:axis-y 1.1s var(--ease-expo) .25s forwards}
@keyframes axis-x{to{transform:scaleX(1)}}
@keyframes axis-y{to{transform:scaleY(1)}}

.intro__orbit{position:relative;width:min(320px,62vw);height:auto;overflow:visible}
.intro__ring{fill:none;stroke:rgba(var(--fg-rgb),.7);stroke-width:1;vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transform:rotate(-90deg)}
.intro__ring--1{--len:277;animation:draw 1.2s var(--ease-expo) .35s forwards}
.intro__ring--2{--len:579;animation:draw 1.4s var(--ease-expo) .5s forwards}
.intro__ring--3{stroke:rgba(var(--fg-rgb),.35);opacity:0;animation:fade .8s ease .9s forwards, spin 24s linear infinite}
.intro__ticks line{stroke:rgba(var(--fg-rgb),.5);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0;animation:fade .6s ease 1s forwards}
.intro__node{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0);animation:pop .7s var(--ease-expo) forwards}
.intro__node--t{fill:var(--sdm-turquoise);animation-delay:1.15s}
.intro__node--b{fill:var(--sdm-blue);animation-delay:1.3s}
.intro__node--v{fill:var(--sdm-violet);animation-delay:1.45s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes pop{to{opacity:1;transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}

.intro__meta{
  position:absolute;inset-inline:var(--pad-x);bottom:40px;display:flex;justify-content:space-between;align-items:baseline;
  font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted);
}
:root[dir="rtl"] .intro__meta{letter-spacing:0;text-transform:none}
.intro__count{font-variant-numeric:tabular-nums;color:var(--fg);font-size:var(--fs-sm)}

/* Leaving: the orbit expands outward as the particles take over */
.intro.is-leaving{transition:background-color 1.2s var(--ease-standard) .15s}
.intro.is-leaving{background-color:rgba(var(--bg-rgb),0)}
.intro.is-leaving .intro__orbit{transition:transform 1.4s var(--ease-expo),opacity 1s ease;transform:scale(2.6);opacity:0}
.intro.is-leaving .intro__axis,.intro.is-leaving .intro__meta{transition:opacity .6s ease;opacity:0}
.intro.is-done{display:none}

/* ---------- WebGL stage ---------- */
.stage{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.stage-fallback{
  position:fixed;inset:0;z-index:0;display:none;
  background:
    radial-gradient(circle at 70% 45%, rgba(30,202,211,.35), transparent 22%),
    radial-gradient(circle at 70% 45%, rgba(0,113,206,.45), transparent 38%),
    radial-gradient(circle at 70% 45%, rgba(101,93,198,.35), transparent 55%),
    var(--bg);
}
:root[dir="rtl"] .stage-fallback{transform:scaleX(-1)}
.no-webgl .stage{display:none}
.no-webgl .stage-fallback{display:block}

/* ---------- Navigation ---------- */
.nav{
  position:fixed;z-index:40;inset-inline:0;top:0;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:var(--pad-x);
  transition:background-color var(--dur-slow) var(--ease-standard),height var(--dur-slow) var(--ease-standard),border-color var(--dur-slow);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{height:68px;background:rgba(var(--bg-rgb),.55);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-color:rgba(var(--fg-rgb),.08)}
.nav__logo img{width:auto;height:44px;transition:height var(--dur-slow) var(--ease-standard)}
.nav.is-scrolled .nav__logo img{height:36px}
.nav__links{display:flex;gap:clamp(18px,2.6vw,40px)}
.nav__links a{
  position:relative;font-size:var(--fs-xs);font-weight:var(--fw-medium);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--muted);padding-block:8px;transition:color var(--dur-base)
}
:root[dir="rtl"] .nav__links a{letter-spacing:0;text-transform:none;font-size:var(--fs-sm)}
.nav__links a::after{content:"";position:absolute;inset-inline:0;bottom:2px;height:1px;background:var(--gradient-hairline);transform:scaleX(0);transform-origin:var(--origin,left);transition:transform var(--dur-slow) var(--ease-expo)}
:root[dir="rtl"] .nav__links a::after{--origin:right}
.nav__links a:hover{color:var(--fg)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__actions{display:flex;align-items:center;gap:12px}
.nav__cta{height:42px;padding-inline:20px;font-size:14px}
.lang{width:42px;height:42px;border-radius:50%;border:1px solid var(--border-inv);display:grid;place-items:center;font-size:15px;font-weight:600;transition:border-color var(--dur-base),background-color var(--dur-base)}
.lang:hover{border-color:var(--fg);background:rgba(var(--fg-rgb),.06)}
.menu-btn{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--border-inv);position:relative}
.menu-btn span:not(.sr-only){position:absolute;left:12px;right:12px;height:1.5px;background:var(--fg);transition:transform var(--dur-slow) var(--ease-expo)}
.menu-btn span:nth-child(1){top:16px}
.menu-btn span:nth-child(2){top:24px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:35;background:rgba(var(--bg-rgb),.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;align-items:center;padding-inline:var(--pad-x)}
.mobile-menu[hidden]{display:none}
@media (min-width:1025px){.mobile-menu{display:none!important}}
.mobile-menu nav{display:flex;flex-direction:column;gap:8px}
.mobile-menu a{font-size:clamp(34px,9vw,56px);font-weight:var(--fw-semibold);letter-spacing:var(--ls-d);line-height:1.25}

/* Nav enters after the opening */
.js .nav{opacity:0;transform:translateY(-12px)}
.is-ready .nav{opacity:1;transform:none;transition:opacity .9s ease .5s,transform .9s var(--ease-expo) .5s,background-color var(--dur-slow),height var(--dur-slow),border-color var(--dur-slow)}

/* ---------- Hero ---------- */
main{position:relative;z-index:10}
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 24px) var(--pad-x) 128px;
}
.hero::before{ /* keeps the copy legible over the brightest particles */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--bg-rgb),.72) 0%,rgba(var(--bg-rgb),.35) 38%,transparent 62%);
}
:root[dir="rtl"] .hero::before{background:linear-gradient(270deg,rgba(var(--bg-rgb),.72) 0%,rgba(var(--bg-rgb),.35) 38%,transparent 62%)}
.hero__inner{max-width:min(720px,56vw)}
.hero__title{
  margin:28px 0 0;font-weight:var(--fw-bold);
  font-size:clamp(44px,min(6.6vw,11.5vh),112px);line-height:var(--lh-h);letter-spacing:var(--ls-d);
}
.line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
:root[dir="rtl"] .line{padding-block:.12em;margin-block:-.12em}
.line__inner{display:block}
.line--accent .line__inner{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
:root[dir="rtl"] .line--accent .line__inner{background:var(--grad-text-rtl);-webkit-background-clip:text;background-clip:text}
.hero__lede{margin:28px 0 0;max-width:48ch;font-size:clamp(16px,1.35vw,19px);color:rgba(var(--fg-rgb),.8)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
@media (max-height:640px){.hero__facts{display:none}}

.hero__foot{
  position:absolute;inset-inline:var(--pad-x);bottom:32px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;
}
.scroll-cue{display:flex;align-items:center;gap:14px;font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted)}
:root[dir="rtl"] .scroll-cue{letter-spacing:0;text-transform:none}
.scroll-cue__track{position:relative;width:1px;height:44px;background:rgba(var(--fg-rgb),.18);overflow:hidden}
.scroll-cue__thumb{position:absolute;left:0;top:0;width:1px;height:40%;background:var(--sdm-turquoise);animation:cue 2.2s var(--ease-standard) infinite}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}
.hero__facts{display:flex;gap:clamp(20px,3vw,48px);margin:0}
.hero__facts div{border-inline-start:1px solid rgba(var(--fg-rgb),.16);padding-inline-start:16px}
.hero__facts dt{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted)}
:root[dir="rtl"] .hero__facts dt{letter-spacing:0;text-transform:none;font-size:var(--fs-xs)}
.hero__facts dd{margin:4px 0 0;font-size:var(--fs-sm);font-weight:var(--fw-medium)}

/* Hero entrance (runs when the opening hands over) */
.js .line__inner{transform:translateY(110%)}
.js .reveal{opacity:0;transform:translateY(16px)}
.is-ready .line__inner{transform:none;transition:transform 1.3s var(--ease-expo)}
.is-ready .line:nth-child(1) .line__inner{transition-delay:.25s}
.is-ready .line:nth-child(2) .line__inner{transition-delay:.36s}
.is-ready .line--accent .line__inner{transition-delay:.47s}
.is-ready .reveal{opacity:1;transform:none;transition:opacity 1s ease,transform 1.2s var(--ease-expo);transition-delay:calc(.2s + var(--d) * .1s)}

/* ---------- Bridge statement ---------- */
.statement{
  min-height:120vh;display:flex;flex-direction:column;justify-content:center;gap:32px;
  padding:var(--space-32) var(--pad-x);max-width:1280px;margin-inline:auto;
}
.statement__text{
  margin:0;font-size:clamp(28px,4.2vw,64px);font-weight:var(--fw-semibold);
  line-height:1.18;letter-spacing:var(--ls-d);
}
:root[dir="rtl"] .statement__text{line-height:1.55}
.statement__text .w{opacity:.14;transition:opacity .25s linear}
.statement__text .w.is-lit{opacity:1}
/* light mode: unread words a touch darker so they hold up against the (thinned) ink-dot nebula */
:root[data-theme="light"] .statement__text .w{opacity:.22}
:root[data-theme="light"] .statement__text .w.is-lit{opacity:1}
.next-up{padding:var(--space-24) var(--pad-x);text-align:center;color:var(--muted);font-size:var(--fs-sm)}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .nav__links{display:none}
  .menu-btn{display:block}
  .hero__facts{display:none}
}
@media (max-width:760px){
  :root{--nav-h:72px}
  .nav__cta{display:none}
  .nav__logo img{height:36px}
  .hero{justify-content:flex-end;padding-bottom:120px}
  .hero::before{background:linear-gradient(0deg,rgba(var(--bg-rgb),.92) 0%,rgba(var(--bg-rgb),.6) 45%,transparent 75%)}
  :root[dir="rtl"] .hero::before{background:linear-gradient(0deg,rgba(var(--bg-rgb),.92) 0%,rgba(var(--bg-rgb),.6) 45%,transparent 75%)}
  .hero__inner{max-width:none}
  .hero__title{margin-top:18px}
  .hero__lede{margin-top:20px}
  .hero__ctas{margin-top:28px}
  .hero__ctas{gap:10px}
  .hero__ctas .btn{height:48px;padding-inline:20px;font-size:14px}
  .hero__foot{bottom:24px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .intro{display:none}
  .js .line__inner,.js .reveal,.js .nav{transform:none;opacity:1}
  .scroll-cue__thumb{animation:none}
  .statement__text .w,:root[data-theme="light"] .statement__text .w{opacity:1}
}

/* =====================================================================
   Products
   ===================================================================== */
.section-title{
  margin:20px 0 0;max-width:18ch;font-size:clamp(34px,4.6vw,72px);font-weight:var(--fw-bold);
  line-height:var(--lh-h);letter-spacing:var(--ls-d);
}
.section-lede{margin:20px 0 0;max-width:52ch;font-size:clamp(16px,1.3vw,19px);color:rgba(var(--fg-rgb),.72)}
.products-intro{padding:var(--space-24) var(--pad-x) var(--space-16);max-width:1440px;margin-inline:auto}

.product-kicker{display:flex;align-items:center;gap:12px;margin:0;font-size:var(--fs-xs);font-weight:var(--fw-medium);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted)}
:root[dir="rtl"] .product-kicker{letter-spacing:0;text-transform:none;font-size:var(--fs-sm)}
.product-kicker__index{font-variant-numeric:tabular-nums;color:var(--accent)}
.product-name{
  margin:14px 0 0;font-size:clamp(56px,8.5vw,148px);font-weight:var(--fw-bold);line-height:.95;letter-spacing:-.035em;
  background:linear-gradient(90deg,var(--fg) 0%,var(--fg) 45%,var(--accent-soft) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
}
:root[dir="rtl"] .product-name{background:linear-gradient(270deg,var(--fg) 0%,var(--fg) 45%,var(--accent-soft) 100%);-webkit-background-clip:text;background-clip:text}
.product-name--sm{font-size:clamp(44px,5vw,80px)}
.product-expansion{margin:10px 0 0;font-size:var(--fs-sm);color:var(--muted)}
.product-desc{margin:20px 0 0;max-width:52ch;color:rgba(var(--fg-rgb),.82)}

.badges{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.badge{display:inline-flex;align-items:center;gap:6px;height:34px;padding-inline:14px;border-radius:999px;border:1px solid rgba(var(--fg-rgb),.16);background:rgba(var(--fg-rgb),.04);font-size:13px;font-weight:var(--fw-medium);color:rgba(var(--fg-rgb),.9)}
.badge--figure{border-color:rgba(30,202,211,.45);background:rgba(30,202,211,.08)}
.badge--figure strong{color:var(--accent);font-weight:var(--fw-bold)}
.badge--status{gap:8px;border-color:rgba(101,93,198,.5);background:rgba(101,93,198,.12)}
.badge--status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sdm-violet)}

/* ---------- SAARIA pinned scene ---------- */
.saaria{position:relative;height:340vh}
.saaria__sticky{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;padding:calc(var(--nav-h) + 8px) var(--pad-x) 40px;
}
.saaria__sticky::before{ /* legibility veil on the copy side */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--bg-rgb),.8) 0%,rgba(var(--bg-rgb),.45) 40%,transparent 62%);
}
:root[dir="rtl"] .saaria__sticky::before{background:linear-gradient(270deg,rgba(var(--bg-rgb),.8) 0%,rgba(var(--bg-rgb),.45) 40%,transparent 62%)}
.saaria__copy{position:relative;max-width:min(560px,46vw)}

.steps{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:4px}
.step{display:flex;gap:16px;padding:14px 0;opacity:.32;transition:opacity var(--dur-slower) var(--ease-standard)}
.step.is-active{opacity:1}
.step__num{
  flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(var(--fg-rgb),.3);font-size:13px;font-weight:var(--fw-semibold);
  transition:background-color var(--dur-slow),border-color var(--dur-slow),color var(--dur-slow);
}
.step.is-active .step__num{background:var(--sdm-turquoise);border-color:var(--accent);color:var(--sdm-navy)}
.step__title{margin:2px 0 0;font-size:var(--fs-h4);font-weight:var(--fw-semibold)}
.step__body{margin:6px 0 0;font-size:var(--fs-sm);color:rgba(var(--fg-rgb),.75);max-width:44ch}

.product-logo{margin:18px 0 0;line-height:0}
.product-logo img{width:auto;height:clamp(52px,7vw,104px)}
.product-logo--sm img{height:clamp(40px,4.4vw,64px)}

.saaria__progress{position:absolute;inset-inline:var(--pad-x);bottom:22px;height:1px;background:rgba(var(--fg-rgb),.1)}
.saaria__progress span{position:absolute;inset-block:0;inset-inline-start:0;width:100%;background:var(--gradient-hairline);transform:scaleX(0);transform-origin:left}
:root[dir="rtl"] .saaria__progress span{transform-origin:right}

/* ---------- SAMIA + MUNIR ---------- */
.more-products{padding:var(--space-24) var(--pad-x) var(--space-16);max-width:1440px;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.product-card{
  display:flex;flex-direction:column;border-radius:28px;overflow:hidden;
  background:linear-gradient(180deg,rgba(var(--fg-rgb),.05),rgba(var(--fg-rgb),.015));
  border:1px solid rgba(var(--fg-rgb),.1);
}
.product-card__body{padding:32px clamp(24px,3vw,40px) 40px}
.product-card__visual{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid rgba(var(--fg-rgb),.08);background:radial-gradient(120% 90% at 50% 100%,rgba(0,113,206,.18),transparent 60%),#020f33}
.visual-chip{position:absolute;inset-inline-start:16px;top:16px;height:28px;padding-inline:12px;border-radius:999px;display:inline-flex;align-items:center;font-size:12px;font-weight:var(--fw-medium);background:rgba(var(--bg-rgb),.6);border:1px solid rgba(var(--fg-rgb),.14)}

.samia-svg{width:100%;height:100%}
.samia-contours path{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 2.4s var(--ease-expo)}
.samia-contours path:nth-child(2){transition-delay:.12s}.samia-contours path:nth-child(3){transition-delay:.24s}
.samia-contours path:nth-child(4){transition-delay:.36s}.samia-contours path:nth-child(5){transition-delay:.48s}
.is-in .samia-contours path{stroke-dashoffset:0}
.samia-find rect{fill:rgba(30,202,211,.08);stroke:var(--sdm-turquoise);stroke-width:1.5}
.samia-find text{fill:var(--turquoise-300);font-family:var(--font-sans);font-size:12px;font-weight:600}
.samia-find{opacity:0;transition:opacity .6s ease}
.is-in .samia-find--1{opacity:1;transition-delay:1.6s}
.is-in .samia-find--2{opacity:1;transition-delay:2s}
.samia-sweep{stroke:var(--sdm-turquoise);stroke-width:1.5;opacity:0;filter:drop-shadow(0 0 6px rgba(30,202,211,.8))}
.is-in .samia-sweep{animation:sweep 3.2s var(--ease-standard) .4s infinite}
@keyframes sweep{0%{transform:translateY(20px);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translateY(280px);opacity:0}}

.visual-munir{display:flex;flex-direction:column;justify-content:center;gap:28px;padding:56px 28px 28px}
.wave{display:flex;align-items:center;justify-content:center;gap:4px;height:72px}
.wave i{display:block;width:4px;border-radius:4px;background:linear-gradient(180deg,var(--sdm-turquoise),var(--sdm-violet));height:var(--h,10px);animation:talk 1.1s ease-in-out infinite;animation-delay:var(--dl,0s);animation-play-state:paused}
.is-in .wave i{animation-play-state:running}
@keyframes talk{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.transcript{display:grid;gap:12px}
.transcript__line{margin:0;display:flex;gap:12px;font-size:var(--fs-sm);line-height:1.5;padding:12px 14px;border-radius:12px;background:rgba(var(--fg-rgb),.04);border:1px solid rgba(var(--fg-rgb),.07);opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .8s var(--ease-expo)}
.transcript__line:nth-child(2){background:rgba(30,202,211,.06);border-color:rgba(30,202,211,.2)}
.is-in .transcript__line{opacity:1;transform:none}
.is-in .transcript__line:nth-child(1){transition-delay:.5s}
.is-in .transcript__line:nth-child(2){transition-delay:1.4s}
.transcript__who{flex:none;min-width:56px;font-size:11px;font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-soft);padding-top:2px}
:root[dir="rtl"] .transcript__who{letter-spacing:0;text-transform:none;font-size:12px}

.also{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;margin:16px 0 0;padding:22px 0;border-top:1px solid rgba(var(--fg-rgb),.1);color:rgba(var(--fg-rgb),.72);font-size:var(--fs-sm)}
.also__label{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted)}
:root[dir="rtl"] .also__label{letter-spacing:0;text-transform:none;font-size:var(--fs-xs)}
.also strong{color:var(--fg);font-weight:var(--fw-semibold)}

/* ---------- Lab ---------- */
.lab{padding:var(--space-24) var(--pad-x);max-width:1440px;margin-inline:auto}
.lab__grid{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lab-card{padding:28px;border-radius:20px;border:1px solid rgba(var(--fg-rgb),.1);background:rgba(var(--fg-rgb),.025)}
.lab-card--edge{grid-column:1/-1;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:32px;padding:40px clamp(28px,4vw,56px) 0;overflow:hidden;
  background:linear-gradient(120deg,rgba(101,93,198,.18),rgba(0,113,206,.12) 55%,rgba(30,202,211,.1))}
.lab-card__text{padding-bottom:40px;max-width:56ch}
.lab-card__device{margin:0;width:100%;max-width:420px;justify-self:center;align-self:center;padding-block:28px}
.lab-card__device img{display:block;width:100%;height:auto;filter:drop-shadow(0 28px 36px rgba(0,0,0,.4))}
.lab-card__device figcaption{margin-top:10px;font-size:11px;color:var(--muted);text-align:end}
.powered{display:flex;align-items:center;gap:14px;margin:28px 0 0!important;font-size:var(--fs-micro)!important;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted)!important}
:root[dir="rtl"] .powered{letter-spacing:0;text-transform:none;font-size:var(--fs-xs)!important}
.powered img{height:22px;width:auto}
.powered{flex-wrap:wrap;row-gap:12px}
.powered__marks{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.powered__mark{display:inline-flex;align-items:center;gap:6px;direction:ltr;flex:none}
.powered__mark img{flex:none;max-width:none}
/* a hairline between the two partner marks */
.powered__mark + .powered__mark{padding-inline-start:18px;border-inline-start:1px solid rgba(var(--fg-rgb),.22)}
:root[dir="rtl"] .powered__mark + .powered__mark{padding-left:0;border-left:0;padding-right:18px;border-right:1px solid rgba(var(--fg-rgb),.22)}
.powered__mark--aramco img{height:27px}
.powered__sail{font-size:20px;font-weight:var(--fw-bold,700);letter-spacing:.02em;line-height:1;text-transform:none;color:var(--fg)}
@media (max-width:520px){
  .powered__marks{gap:10px 12px}
  .powered__mark img{height:18px}
  .powered__mark--aramco img{height:22px}
  .powered__sail{font-size:16px}
  .powered__mark + .powered__mark,:root[dir="rtl"] .powered__mark + .powered__mark{padding-inline:0;padding-left:0;padding-right:0}
  :root:not([dir="rtl"]) .powered__mark + .powered__mark{padding-left:12px}
  :root[dir="rtl"] .powered__mark + .powered__mark{padding-right:12px}
}
.lab-card p{margin:10px 0 0;font-size:var(--fs-sm);color:rgba(var(--fg-rgb),.75)}
.lab-card__title{margin:18px 0 0;font-size:var(--fs-h3);font-weight:var(--fw-semibold)}
.lab-card__status{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted)}
:root[dir="rtl"] .lab-card__status{letter-spacing:0;text-transform:none;font-size:var(--fs-xs)}
.lab-card__status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sdm-violet)}
.lab-card__status--live::before{background:var(--sdm-turquoise);box-shadow:0 0 0 4px rgba(30,202,211,.2);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(30,202,211,0)}}

/* Reveal as sections enter */
.js .reveal-on-scroll{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform 1.1s var(--ease-expo)}
.js .reveal-on-scroll.is-in{opacity:1;transform:none}

@media (max-width:1024px){
  .more-products{grid-template-columns:1fr}
  .lab__grid{grid-template-columns:1fr 1fr}
  .lab-card--edge{grid-template-columns:1fr}
  .lab-card__device{max-width:300px;padding-block:0 28px}
}
@media (max-width:760px){
  .saaria{height:300vh}
  /* Phones: the copy starts right under the eye (not pinned to the bottom), so eye, frame and text
     read as one group with no empty band between them on tall screens. */
  .saaria__sticky{flex-direction:column;justify-content:safe flex-end;align-items:stretch;
    padding-top:calc(var(--eye-y, 230px) + var(--eye-r, 135px) * .72 + 28px);padding-bottom:40px}
  /* The progress line follows the text instead of sitting apart at the very bottom */
  .saaria__progress{position:relative;inset:auto;bottom:auto;width:100%;margin-top:28px;flex:none}
  .saaria__sticky::before,
  :root[dir="rtl"] .saaria__sticky::before{background:linear-gradient(0deg,rgba(var(--bg-rgb),.94) 0%,rgba(var(--bg-rgb),.7) 50%,transparent 78%)}
  .saaria__copy{max-width:none}
  .product-name{font-size:56px}
  .steps{margin-top:20px}
  .step{padding:8px 0}
  .step:not(.is-active){display:none}
  .badges{margin-top:16px}
  .product-logo img{height:48px}
  .lab__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal-on-scroll{opacity:1;transform:none}
  .samia-contours path{stroke-dashoffset:0}
  .samia-find,.transcript__line{opacity:1;transform:none}
  .wave i,.samia-sweep{animation:none}
}

/* =====================================================================
   About · Partners · News · Contact · Footer
   ===================================================================== */
.about-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(24px,4vw,64px);margin-top:clamp(48px,8vh,96px);padding-top:32px;border-top:1px solid rgba(var(--fg-rgb),.12)}
.about-item__label{margin:0;font-size:var(--fs-xs);font-weight:var(--fw-medium);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--accent)}
:root[dir="rtl"] .about-item__label{letter-spacing:0;text-transform:none;font-size:var(--fs-sm)}
.about-item p{margin:14px 0 0;font-size:clamp(16px,1.25vw,19px);color:rgba(var(--fg-rgb),.82)}
.values{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.values li{height:34px;padding-inline:14px;display:inline-flex;align-items:center;border-radius:999px;border:1px solid rgba(var(--fg-rgb),.16);font-size:13px;font-weight:var(--fw-medium)}

/* ---------- Partners: the one white band ---------- */
.partners{background:var(--partners-bg);color:var(--sdm-navy);padding:var(--space-24) 0;overflow:hidden}
.partners__head{padding-inline:var(--pad-x);max-width:1440px;margin-inline:auto}
.eyebrow--dark{color:var(--turquoise-600)}
.eyebrow--dark .eyebrow__dot{background:var(--turquoise-600);box-shadow:0 0 0 4px rgba(15,134,141,.14)}
.section-title--dark{color:var(--sdm-navy)}
/* Logo wall: a calm grid of partner marks in their own colours. Each logo's width (--w) is set so
   wide wordmarks and square crests carry the same visual weight. Hairlines are drawn by the 1px grid gap. */
.logo-wall{list-style:none;margin:56px auto 0;padding:0;max-width:calc(1440px - 2 * var(--pad-x));width:calc(100% - 2 * var(--pad-x));
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(0,30,97,.09);border:1px solid rgba(0,30,97,.09);border-radius:20px;overflow:hidden}
.logo-wall li{--s:1;position:relative;display:grid;place-items:center;min-height:148px;padding:24px;background:var(--partners-bg);
  transition:background var(--dur-base),box-shadow var(--dur-base)}
.logo-wall img{display:block;width:calc(var(--w) * var(--s));max-width:100%;height:auto;
  transition:transform .5s var(--ease-expo)}
.logo-wall li:hover{background:#F7F9FD}
.logo-wall li:hover img{transform:scale(1.05)}
/* fade in once, one after another, when the section arrives */
.logo-wall.reveal-on-scroll{opacity:1;transform:none}
.logo-wall li img{opacity:0;transform:translateY(10px)}
.logo-wall.is-in li img{opacity:1;transform:none;transition:opacity .6s var(--ease-standard) calc(var(--i) * 45ms),transform .8s var(--ease-expo) calc(var(--i) * 45ms)}
.logo-wall.is-in li:hover img{transform:scale(1.05);transition-delay:0s}
@media (max-width:1024px){
  .logo-wall{grid-template-columns:repeat(4,1fr)}
  .logo-wall li{--s:.85;min-height:128px}
}
@media (max-width:760px){
  .logo-wall{grid-template-columns:repeat(2,1fr);border-radius:16px}
  .logo-wall li{--s:.72;min-height:104px;padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .logo-wall li img{opacity:1;transform:none;transition:none}
}

/* ---------- News ---------- */
.news{padding:var(--space-24) var(--pad-x);max-width:1440px;margin-inline:auto}
.news__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.news__grid{margin-top:48px;display:grid;grid-template-columns:1.35fr 1fr;grid-auto-rows:auto;gap:24px}
.news__grid .news-card--feature{grid-row:span 2}

.news-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:24px;
  background:linear-gradient(180deg,rgba(var(--fg-rgb),.07),rgba(var(--fg-rgb),.025));
  border:1px solid rgba(var(--fg-rgb),.12);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.6);
  transition:transform var(--dur-slow) var(--ease-expo),border-color var(--dur-slow),box-shadow var(--dur-slow);
  transition-delay:calc(var(--i,0) * .08s);
}
.news-card:hover{transform:translateY(-4px);border-color:rgba(30,202,211,.45);box-shadow:0 34px 70px -30px rgba(0,0,0,.7),0 0 0 1px rgba(30,202,211,.15)}
.news-card::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--gradient-hairline);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slower) var(--ease-expo)}
:root[dir="rtl"] .news-card::after{transform-origin:right}
.news-card:hover::after{transform:scaleX(1)}

/* Media: posters stay whole over a blurred copy of themselves; photos fill the frame */
.news-card__media{position:relative;overflow:hidden;aspect-ratio:16/10;background:#06173f;isolation:isolate}
.news-card__media::before{content:"";position:absolute;inset:-12%;z-index:-1;background:var(--img) center/cover;filter:blur(26px) saturate(1.1) brightness(.55);transform:scale(1.1)}
.news-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-expo)}
.news-card__media--poster img{width:auto;max-width:78%;margin-inline:auto;object-fit:contain;padding-block:6%;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.news-card:hover .news-card__media img{transform:scale(1.04)}

.news-card__body{display:flex;flex-direction:column;flex:1;padding:24px 26px 28px}
.news-card__meta{display:flex;align-items:center;gap:12px;margin:0;font-size:var(--fs-xs);color:var(--muted)}
.news-card__tag{height:26px;padding-inline:10px;display:inline-flex;align-items:center;border-radius:999px;background:rgba(30,202,211,.12);color:var(--accent-soft);font-weight:var(--fw-semibold)}
.news-card__title{margin:14px 0 0;font-size:var(--fs-h4);font-weight:var(--fw-semibold);line-height:1.3}
.news-card__excerpt{margin:10px 0 0;font-size:var(--fs-sm);color:rgba(var(--fg-rgb),.72);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-card__more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:20px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--accent-soft)}
.news-card:hover .btn__arrow{transform:translateX(3px)}
:root[dir="rtl"] .news-card:hover .btn__arrow{transform:scaleX(-1) translateX(3px)}

/* Feature: the big story */
.news-card--feature .news-card__media{aspect-ratio:16/9}
.news-card--feature .news-card__body{padding:30px 34px 34px}
.news-card--feature .news-card__title{font-size:clamp(24px,2.3vw,34px);line-height:1.2;letter-spacing:var(--ls-d)}
.news-card--feature .news-card__excerpt{font-size:var(--fs-body);-webkit-line-clamp:4}

/* Side cards on the home page: image beside the text */
.news__grid .news-card--card{flex-direction:row}
.news__grid .news-card--card .news-card__media{flex:0 0 42%;aspect-ratio:auto;min-height:220px}
.news__grid .news-card--card .news-card__title{font-size:18px}

/* ---------- Contact ---------- */
.contact{position:relative;padding:var(--space-24) var(--pad-x) var(--space-32);max-width:1440px;margin-inline:auto;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,96px);align-items:start}
.contact::before{content:"";position:absolute;inset:10% 0 0;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 60% at 75% 40%,rgba(101,93,198,.22),transparent 70%),radial-gradient(40% 50% at 25% 70%,rgba(0,113,206,.18),transparent 70%)}
.contact__details{margin:40px 0 0;display:grid;gap:20px}
.contact__details dt{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted)}
:root[dir="rtl"] .contact__details dt{letter-spacing:0;text-transform:none;font-size:var(--fs-xs)}
.contact__details dd{margin:6px 0 0;font-size:var(--fs-lg)}
.contact__details a{border-bottom:1px solid rgba(var(--fg-rgb),.3);transition:border-color var(--dur-base)}
.contact__details a:hover{border-color:var(--accent)}

.form{display:grid;gap:18px;padding:clamp(24px,3vw,40px);border-radius:28px;border:1px solid rgba(var(--fg-rgb),.12);
  background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0}
.field__label{font-size:13px;font-weight:var(--fw-medium);color:rgba(var(--fg-rgb),.75);padding:0}
.field input,.field textarea{
  width:100%;font:inherit;color:var(--fg);background:rgba(var(--fg-rgb),.04);border:1px solid rgba(var(--fg-rgb),.16);
  border-radius:10px;padding:12px 14px;transition:border-color var(--dur-fast),background-color var(--dur-fast)
}
.field textarea{resize:vertical;min-height:110px}
.field input:hover,.field textarea:hover{border-color:rgba(var(--fg-rgb),.3)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(var(--fg-rgb),.07)}
.field.is-invalid input,.field.is-invalid textarea{border-color:#E8857E}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;height:38px;padding-inline:16px;border-radius:999px;border:1px solid rgba(var(--fg-rgb),.18);font-size:14px;font-weight:var(--fw-medium);transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.chip input:checked + span{background:var(--sdm-turquoise);border-color:var(--accent);color:var(--sdm-navy)}
.chip input:focus-visible + span{outline:2px solid var(--sdm-turquoise);outline-offset:3px}
.form__foot{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:6px}
.form__status{margin:0;font-size:var(--fs-sm);color:var(--muted)}

/* ---------- Footer ---------- */
.footer{position:relative;z-index:10;padding:56px var(--pad-x) 32px;border-top:1px solid rgba(var(--fg-rgb),.1);background:var(--footer-bg)}
.footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:32px}
.footer__brand{display:flex;align-items:center;gap:20px}
.footer__brand img{height:44px;width:auto}
.footer__brand p{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.footer__nav{display:flex;flex-wrap:wrap;gap:24px}
.footer__nav a{font-size:var(--fs-sm);color:rgba(var(--fg-rgb),.75);transition:color var(--dur-base)}
.footer__nav a:hover{color:var(--fg)}
.social{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.social a{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--border-inv);transition:border-color var(--dur-base),background-color var(--dur-base)}
.social a:hover{border-color:var(--fg);background:rgba(var(--fg-rgb),.06)}
.social svg{width:18px;height:18px;fill:none;stroke:var(--fg);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.footer__bottom{margin-top:40px;padding-top:20px;border-top:1px solid rgba(var(--fg-rgb),.08);font-size:var(--fs-xs);color:var(--muted)}
.footer__bottom p{margin:0}

@media (max-width:1024px){
  .about-grid{grid-template-columns:1fr 1fr}
  .about-item:last-child{grid-column:1/-1}
  .news__grid{grid-template-columns:1fr}
  .news__grid .news-card--feature{grid-row:auto}
  .contact{grid-template-columns:1fr}
}
@media (max-width:760px){
  .about-grid{grid-template-columns:1fr}
  .news__grid .news-card--card{flex-direction:column}
  .news__grid .news-card--card .news-card__media{flex:none;aspect-ratio:16/10;min-height:0}
  .form__row{grid-template-columns:1fr}
  .footer__top{flex-direction:column;align-items:flex-start}
}

/* =====================================================================
   Inner pages: News list and article
   ===================================================================== */
body.page{
  background:
    radial-gradient(60% 50% at 85% 0%,rgba(101,93,198,.25),transparent 70%),
    radial-gradient(50% 40% at 10% 10%,rgba(0,113,206,.22),transparent 70%),
    var(--bg);
  background-repeat:no-repeat;
}
.nav__links a[aria-current]{color:var(--fg)}
.nav__links a[aria-current]::after{transform:scaleX(1)}

.page-hero{padding:calc(var(--nav-h) + clamp(48px,9vh,110px)) var(--pad-x) 48px;max-width:1440px;margin-inline:auto}
.page-hero__title{margin:20px 0 0;font-size:clamp(44px,6.4vw,96px);font-weight:var(--fw-bold);line-height:var(--lh-h);letter-spacing:var(--ls-d)}

.news-page{padding:0 var(--pad-x) var(--space-24);max-width:1440px;margin-inline:auto}
.news-page__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
/* The feature on the News page sits wide: image beside the text */
.news-page__feature .news-card--feature{flex-direction:row}
.news-page__feature .news-card--feature .news-card__media{flex:0 0 58%;aspect-ratio:auto;min-height:420px}
.news-page__feature .news-card--feature .news-card__body{justify-content:center}

/* ---------- Article ---------- */
.article__hero{position:relative;isolation:isolate;overflow:hidden;padding:calc(var(--nav-h) + 56px) var(--pad-x) 64px;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;max-width:1440px;margin-inline:auto}
.article__backdrop{position:absolute;inset:-10%;z-index:-1;background:center/cover no-repeat;filter:blur(60px) saturate(1.2) brightness(.35);transform:scale(1.1);opacity:.9}
.article__hero::after{content:"";position:absolute;inset:auto 0 0;height:40%;z-index:-1;background:linear-gradient(transparent,var(--bg))}
.article__back{display:inline-flex;align-items:center;gap:8px;margin-bottom:28px;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:rgba(var(--fg-rgb),.75);transition:color var(--dur-base)}
.article__back:hover{color:var(--fg)}
:root[dir="rtl"] .article__back .btn__arrow{transform:scaleX(-1)}
.article__title{margin:18px 0 0;font-size:clamp(32px,3.8vw,58px);font-weight:var(--fw-bold);line-height:1.12;letter-spacing:var(--ls-d)}
:root[dir="rtl"] .article__title{line-height:1.4}
.article__lede{margin:20px 0 0;font-size:clamp(17px,1.4vw,21px);color:rgba(var(--fg-rgb),.8);max-width:52ch}
.article__figure{margin:0;border-radius:24px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.75),0 0 0 1px rgba(var(--fg-rgb),.1)}
.article__figure img{display:block;width:100%;height:auto}
.article__figure--poster{justify-self:center;max-width:min(440px,100%)}
.article__figure--poster img{max-height:72vh;width:auto;max-width:100%;margin-inline:auto}

.article__body{max-width:720px;margin:0 auto;padding:24px var(--pad-x) 0;font-size:clamp(17px,1.25vw,19px);line-height:1.75}
:root[dir="rtl"] .article__body{line-height:1.95}
.article__body p{margin:0 0 1.25em;color:rgba(var(--fg-rgb),.86)}
.article__body p:first-child::first-letter{font-size:3.1em;float:inline-start;line-height:.9;margin-inline-end:.08em;margin-top:.06em;font-weight:var(--fw-bold);color:var(--accent)}
:root[dir="rtl"] .article__body p:first-child::first-letter{font-size:inherit;float:none;margin:0;color:inherit;font-weight:inherit}
.article__source{max-width:720px;margin:8px auto 0;padding:20px var(--pad-x) 0;font-size:var(--fs-sm);color:var(--muted);border-top:1px solid rgba(var(--fg-rgb),.1)}
.article__source a{color:var(--accent-soft);border-bottom:1px solid rgba(99,221,227,.4)}
.more-news{margin-top:var(--space-20)}
.more-news__title{font-size:clamp(28px,3vw,44px)}

@media (max-width:1024px){
  .news-page__grid{grid-template-columns:1fr 1fr}
  .news-page__feature .news-card--feature{flex-direction:column}
  .news-page__feature .news-card--feature .news-card__media{flex:none;aspect-ratio:16/9;min-height:0}
  .article__hero{grid-template-columns:1fr}
}
@media (max-width:760px){
  .news-page__grid{grid-template-columns:1fr}
  .article__figure--poster img{max-height:60vh}
}

/* =====================================================================
   Theme toggle · Contact band · Light-mode details
   ===================================================================== */
.theme-toggle{width:42px;height:42px;border-radius:50%;border:1px solid var(--border-inv);display:grid;place-items:center;transition:border-color var(--dur-base),background-color var(--dur-base)}
.theme-toggle:hover{border-color:var(--fg);background:rgba(var(--fg-rgb),.06)}
.theme-toggle svg{grid-area:1/1;width:18px;height:18px;fill:none;stroke:var(--fg);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-slower) var(--ease-expo),opacity var(--dur-slow)}
/* Dark mode shows the sun (go light); light mode shows the moon (go dark) */
.theme-toggle__moon{opacity:0;transform:rotate(-90deg) scale(.6)}
:root[data-theme="light"] .theme-toggle__sun{opacity:0;transform:rotate(90deg) scale(.6)}
:root[data-theme="light"] .theme-toggle__moon{opacity:1;transform:none}

/* Contact sits in its own full-width band, opened by the brand hairline */
.contact-band{position:relative;margin-top:var(--space-12);background:linear-gradient(180deg,rgba(var(--fg-rgb),.035),rgba(var(--fg-rgb),0) 70%)}
.contact-band::before{content:"";position:absolute;inset-inline:0;top:0;height:2px;background:var(--gradient-hairline);opacity:.85}

/* Light mode: the page brightens, the white partner band gets edges, cards get a soft lift */
:root[data-theme="light"] .partners{border-block:1px solid rgba(0,30,97,.08)}
:root[data-theme="light"] .news-card,
:root[data-theme="light"] .product-card,
:root[data-theme="light"] .lab-card,
:root[data-theme="light"] .form{background:#fff;border-color:rgba(0,30,97,.1);box-shadow:0 18px 40px -26px rgba(0,30,97,.35)}
:root[data-theme="light"] .lab-card--edge{background:linear-gradient(120deg,rgba(101,93,198,.12),rgba(0,113,206,.08) 55%,rgba(30,202,211,.08)),#fff}
:root[data-theme="light"] .field input,:root[data-theme="light"] .field textarea{background:#F7F9FD}
:root[data-theme="light"] .footer{border-top-color:rgba(0,30,97,.1)}
:root[data-theme="light"] body.page{background:radial-gradient(60% 50% at 85% 0%,rgba(101,93,198,.12),transparent 70%),radial-gradient(50% 40% at 10% 10%,rgba(0,113,206,.1),transparent 70%),var(--bg);background-repeat:no-repeat}
:root[data-theme="light"] .article__backdrop{filter:blur(60px) saturate(1.1) brightness(1.1);opacity:.35}
html{transition:background-color .4s ease}
body{transition:background-color .4s ease,color .4s ease}

/* =====================================================================
   Founder profile (/BoD-Founder): reached by its own link, not from the navigation
   ===================================================================== */
.profile{max-width:1200px;margin-inline:auto;padding:calc(var(--nav-h) + clamp(40px,8vh,96px)) var(--pad-x) var(--space-24);direction:ltr;text-align:left}
.profile__head{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.profile__portrait{margin:0;border-radius:24px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.6),0 0 0 1px rgba(var(--fg-rgb),.1)}
.profile__portrait img{display:block;width:100%;height:auto}
.profile__name{margin:0;font-size:clamp(34px,4.4vw,64px);font-weight:var(--fw-bold);line-height:1.08;letter-spacing:-.02em}
.profile__creds{margin:10px 0 0;font-size:var(--fs-lg);font-weight:var(--fw-medium);color:var(--accent)}
.profile__roles{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.profile__roles li{position:relative;padding-left:20px;font-size:clamp(16px,1.3vw,19px);color:rgba(var(--fg-rgb),.86)}
.profile__roles li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--gradient-hairline)}
.profile__body{max-width:760px;margin:clamp(48px,7vw,88px) auto 0;font-size:clamp(17px,1.25vw,19px);line-height:1.8}
.profile__body p{margin:0 0 1.3em;color:rgba(var(--fg-rgb),.86)}
.profile__date{font-size:var(--fs-sm);color:var(--muted)!important;border-top:1px solid rgba(var(--fg-rgb),.12);padding-top:20px}
@media (max-width:760px){
  .profile__head{grid-template-columns:1fr}
  .profile__portrait{max-width:360px}
}

/* =====================================================================
   Product page (saaria.html)
   ===================================================================== */
.ph{max-width:1440px;margin-inline:auto;padding:calc(var(--nav-h) + clamp(32px,7vh,80px)) var(--pad-x) var(--space-20);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:center;min-height:100svh}
.ph__logo{margin-top:18px}
.ph__logo img{height:clamp(56px,6vw,92px)}
.ph__title{margin:28px 0 0;font-size:clamp(36px,4.6vw,68px);font-weight:var(--fw-bold);line-height:var(--lh-h);letter-spacing:var(--ls-d);max-width:16ch}
.ph__lede{margin:20px 0 0;max-width:50ch;font-size:clamp(16px,1.35vw,19px);color:rgba(var(--fg-rgb),.8)}
.ph .hero__ctas{margin-top:32px}

/* The scanner: a real fundus photo, a sweeping scan line, orbit rings and two findings */
.scanner{position:relative;aspect-ratio:1;width:min(100%,560px);justify-self:center;display:grid;place-items:center}
.scanner__ring{position:absolute;border-radius:50%;pointer-events:none}
.scanner__ring--outer{inset:2%;border:1px solid rgba(99,221,227,.35);box-shadow:0 0 80px rgba(30,202,211,.15),inset 0 0 60px rgba(0,113,206,.18)}
.scanner__ring--dash{inset:-3%;border:1px dashed rgba(99,221,227,.3);animation:spin 40s linear infinite}
/* the spinning dashed ring's square box grows past the screen edge while it turns (seen on phones in Arabic) */
.ph{overflow-x:clip}
.scanner__eye{position:relative;width:80%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid rgba(99,221,227,.55);box-shadow:0 0 50px rgba(30,202,211,.25)}
.scanner__eye img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) hue-rotate(-10deg) brightness(.92)}
.scanner__line{position:absolute;inset-inline:0;top:0;height:22%;background:linear-gradient(180deg,rgba(99,221,227,0),rgba(99,221,227,.32));border-bottom:2px solid #63DDE3;box-shadow:0 6px 24px rgba(99,221,227,.6);animation:scan 3.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(460%)}}
.scanner__mark{position:absolute;width:13%;aspect-ratio:1;border:2px solid #9B95DA;border-radius:8px;opacity:0;animation:mark 3.6s ease infinite}
.scanner__mark--1{left:58%;top:36%;animation-delay:1.3s}
.scanner__mark--2{left:28%;top:58%;animation-delay:2.1s}
@keyframes mark{0%,20%{opacity:0;transform:scale(1.3)}35%,80%{opacity:1;transform:none}100%{opacity:0}}
.scanner__corner{position:absolute;width:44px;height:44px;border:2px solid rgba(99,221,227,.8)}
.scanner__corner--tl{top:4%;left:4%;border-right:0;border-bottom:0}
.scanner__corner--tr{top:4%;right:4%;border-left:0;border-bottom:0}
.scanner__corner--bl{bottom:4%;left:4%;border-right:0;border-top:0}
.scanner__corner--br{bottom:4%;right:4%;border-left:0;border-top:0}

.ps{max-width:1440px;margin-inline:auto;padding:var(--space-20) var(--pad-x)}
.ps-statement{max-width:1100px;margin-inline:auto;padding:var(--space-24) var(--pad-x)}
.ps-statement__text{margin:24px 0 0;font-size:clamp(26px,3.4vw,48px);font-weight:var(--fw-semibold);line-height:1.25;letter-spacing:var(--ls-d)}
:root[dir="rtl"] .ps-statement__text{line-height:1.6}

.how{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.how__step{position:relative;padding:32px 28px;border-radius:20px;border:1px solid rgba(var(--fg-rgb),.12);background:linear-gradient(180deg,rgba(var(--fg-rgb),.05),rgba(var(--fg-rgb),.015))}
.how__step::before{content:"";position:absolute;inset-inline:28px;top:0;height:2px;background:var(--gradient-hairline)}
.how__num{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--accent);font-variant-numeric:tabular-nums}
.how__step h3{margin:18px 0 0;font-size:var(--fs-h3);font-weight:var(--fw-semibold)}
.how__step p{margin:10px 0 0;color:rgba(var(--fg-rgb),.75)}

/* SAARIA page: one report sheet; the legend beside it switches between the three outcomes */
.report-viewer{--rv-ok:#1ECAD3;--rv-alert:#E5484D;--rv-retake:#2E94E8;
  margin-top:48px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
:root[data-theme="light"] .report-viewer{--rv-ok:#0E9EA6;--rv-alert:#B3261E;--rv-retake:#005CA8}
.rv-tabs{display:grid;gap:10px}
.rv-tab{--c:var(--rv-ok);position:relative;display:flex;gap:16px;align-items:flex-start;width:100%;padding:20px 22px;text-align:start;
  font:inherit;color:inherit;cursor:pointer;border-radius:18px;overflow:hidden;
  border:1px solid rgba(var(--fg-rgb),.1);background:transparent;transition:background .3s,border-color .3s}
.rv-tab--alert{--c:var(--rv-alert)}
.rv-tab--retake{--c:var(--rv-retake)}
.rv-tab:hover{background:rgba(var(--fg-rgb),.03)}
.rv-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rv-tab.is-active{background:rgba(var(--fg-rgb),.05);border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.rv-tab__dot{flex:none;width:12px;height:12px;margin-top:6px;border-radius:50%;background:var(--c);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 30%,transparent);transition:box-shadow .3s}
.rv-tab.is-active .rv-tab__dot{box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent)}
.rv-tab__text{display:grid;grid-template-rows:auto auto 0fr;min-width:0;transition:grid-template-rows .45s var(--ease-expo)}
.rv-tab.is-active .rv-tab__text{grid-template-rows:auto auto 1fr}
.rv-tab__tag{font-size:12px;font-weight:var(--fw-semibold);letter-spacing:.04em;color:var(--c)}
.rv-tab strong{margin-top:4px;font-size:var(--fs-h4);font-weight:var(--fw-semibold);color:var(--fg)}
.rv-tab__body{overflow:hidden;font-size:var(--fs-sm);color:rgba(var(--fg-rgb),.72);opacity:0;transition:opacity .3s}
.rv-tab.is-active .rv-tab__body{opacity:1;padding-top:8px}
/* thin timer along the active tab while the viewer cycles by itself */
.rv-tab::after{content:"";position:absolute;inset-inline-start:0;bottom:0;height:2px;width:0;background:var(--c);opacity:.8}
.report-viewer.is-auto .rv-tab.is-active::after{animation:rv-timer var(--rv-interval,6s) linear forwards}
@keyframes rv-timer{to{width:100%}}
.rv-stage{perspective:1400px}
.rv-sheet{display:grid;padding:14px;border-radius:16px;background:#fff;transform:rotate(-1.5deg);
  box-shadow:0 50px 90px -30px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08)}
:root[dir="rtl"] .rv-sheet{transform:rotate(1.5deg)}
:root[data-theme="light"] .rv-sheet{box-shadow:0 40px 70px -28px rgba(0,30,97,.35),0 0 0 1px rgba(0,30,97,.1)}
.rv-sheet__img{grid-area:1/1;display:block;width:100%;height:auto;border-radius:6px;opacity:0;transform:translateY(10px) scale(.985);
  transition:opacity .45s var(--ease-standard),transform .7s var(--ease-expo)}
.rv-sheet__img.is-active{opacity:1;transform:none}
@media (max-width:900px){
  .report-viewer{grid-template-columns:1fr}
  .rv-stage{order:-1}
  .rv-sheet,:root[dir="rtl"] .rv-sheet{transform:none}
  .rv-tab{padding:16px 18px}
}
@media (prefers-reduced-motion:reduce){
  .rv-sheet__img,.rv-tab__text{transition:none}
}
.ps-note{margin:16px 0 0;font-size:12px;color:var(--muted)}

.features{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(var(--fg-rgb),.1);border:1px solid rgba(var(--fg-rgb),.1);border-radius:20px;overflow:hidden}
.feature{padding:30px 28px;background:var(--bg)}
.feature h3{margin:0;font-size:var(--fs-h4);font-weight:var(--fw-semibold)}
.feature p{margin:10px 0 0;font-size:var(--fs-sm);color:rgba(var(--fg-rgb),.75)}

.trust{margin-top:48px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.trust__card{padding:30px 28px;border-radius:20px;border:1px solid rgba(var(--fg-rgb),.12);background:linear-gradient(140deg,rgba(101,93,198,.12),rgba(0,113,206,.06) 60%,transparent)}
.trust__mark{display:inline-grid;place-items:center;min-width:56px;height:56px;padding-inline:10px;border-radius:16px;font-size:15px;font-weight:var(--fw-bold);letter-spacing:.04em;color:var(--fg);border:1px solid rgba(var(--fg-rgb),.2);background:rgba(var(--fg-rgb),.05)}
.trust__card h3{margin:20px 0 0;font-size:var(--fs-h4);font-weight:var(--fw-semibold)}
.trust__card p{margin:10px 0 0;font-size:var(--fs-sm);color:rgba(var(--fg-rgb),.75)}
.ps-disclaimer{margin:28px 0 0;padding:16px 20px;border-radius:14px;border:1px solid rgba(var(--fg-rgb),.12);font-size:var(--fs-sm);color:var(--muted)}

.ps--split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.for-list{list-style:none;margin:0;padding:0;display:grid}
.for-list li{padding:20px 0;border-bottom:1px solid rgba(var(--fg-rgb),.12);font-size:clamp(20px,2vw,28px);font-weight:var(--fw-semibold)}
.for-list li:first-child{border-top:1px solid rgba(var(--fg-rgb),.12)}

.cta-band{position:relative;max-width:1440px;margin:var(--space-12) var(--pad-x) var(--space-24);padding:clamp(48px,7vw,96px) var(--pad-x);text-align:center;border-radius:32px;overflow:hidden;color:#fff;background:var(--gradient-brand)}
.cta-band::before{content:"";position:absolute;inset:0;background:url("../assets/news/brand-polygon-a.webp") center/cover;opacity:.35;mix-blend-mode:screen;pointer-events:none}
.cta-band > *{position:relative}
.cta-band__title{margin:0;font-size:clamp(32px,4.4vw,64px);font-weight:var(--fw-bold);line-height:var(--lh-h);letter-spacing:var(--ls-d)}
.cta-band p{margin:16px auto 32px;max-width:48ch;font-size:clamp(16px,1.3vw,19px);color:rgba(255,255,255,.88)}
.cta-band .btn--light{background:#fff;color:#001E61}
@media (min-width:1520px){.cta-band{margin-inline:auto}}

@media (max-width:1024px){
  .ph{grid-template-columns:minmax(0,1fr);min-height:0}
  .scanner{width:min(100%,460px)}
  .how,.trust{grid-template-columns:1fr}
  .features{grid-template-columns:1fr 1fr}
  .ps--split{grid-template-columns:1fr}
}
@media (max-width:760px){
  .features{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .scanner__line,.scanner__mark,.scanner__ring--dash{animation:none}
  .scanner__mark{opacity:1}
}

.product-link{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--accent-soft);border-bottom:1px solid currentColor;padding-bottom:2px}
.product-link:hover .btn__arrow{transform:translateX(3px)}
:root[dir="rtl"] .product-link:hover .btn__arrow{transform:scaleX(-1) translateX(3px)}

/* =====================================================================
   Section markers: a numbered label and a brand line across the page,
   so each new section reads clearly as a new chapter
   ===================================================================== */
.section-mark{position:relative;display:flex;align-items:center;gap:14px;margin:0 0 clamp(36px,6vh,64px);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--fg)}
:root[dir="rtl"] .section-mark{letter-spacing:0;text-transform:none;font-size:var(--fs-sm)}
.section-mark__num{display:inline-grid;place-items:center;min-width:38px;height:26px;padding-inline:8px;border-radius:999px;
  font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--bg);background:var(--gradient-hairline)}
.section-mark::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--fg-rgb),.35),rgba(var(--fg-rgb),.06))}
:root[dir="rtl"] .section-mark::after{background:linear-gradient(270deg,rgba(var(--fg-rgb),.35),rgba(var(--fg-rgb),.06))}
.partners .section-mark{color:var(--sdm-navy)}
.partners .section-mark__num{color:#fff}
.partners .section-mark::after{background:linear-gradient(90deg,rgba(0,30,97,.3),rgba(0,30,97,.05))}

/* Sections that open with a marker get the same breathing room above */
.statement{min-height:100vh;justify-content:flex-start;padding-top:var(--space-24)}
.products-intro,.lab,.news{padding-top:var(--space-24)}
.statement,.products-intro,.lab,.news{position:relative}
/* A soft band behind the products intro and lab, so the dark sections don't run together */
.products-intro::before,.lab::before{content:"";position:absolute;inset-block:0;inset-inline:calc(50% - 50vw);z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--fg-rgb),.035),rgba(var(--fg-rgb),0) 55%)}

/* SAARIA scene: keep the progress line clear of the copy and badges at every height */
.saaria__sticky{padding-bottom:88px}
.saaria__progress{bottom:40px}

/* Short desktop screens: only the active step keeps its description, so the pinned copy always fits */
@media (max-height:860px) and (min-width:761px){
  .saaria .product-logo img{height:clamp(48px,5vw,72px)}
  .saaria .steps{margin-top:18px;gap:0}
  .saaria .step{padding:8px 0}
  .saaria .step:not(.is-active) .step__body{display:none}
  .saaria .badges{margin-top:16px}
  .saaria .product-link{margin-top:12px}
}

/* SAARIA page: the Capture step carries the same photo */
/* one wide photo above the three steps (the Capture moment); the step cards stay text-only */
.how-photo{margin:48px 0 0;border-radius:24px;overflow:hidden;border:1px solid rgba(var(--fg-rgb),.12)}
.how-photo img{display:block;width:100%;height:auto;aspect-ratio:21/8;object-fit:cover;object-position:50% 45%}
.how-photo + .how{margin-top:20px}
@media (max-width:760px){.how-photo img{aspect-ratio:4/3;object-position:40% 50%}}

/* SAARIA scene: one fixed frame beside the eye. Same size and place in every step;
   only the content crossfades (capture photo, retinal image being scanned, report). */
.step-frame{position:absolute;left:var(--eye-x,73%);top:var(--eye-y,50%);translate:-50% -50%;width:min(500px,calc(var(--eye-r,240px) * 1.62));aspect-ratio:5/4;
  border-radius:18px;overflow:hidden;background:#020a1f;isolation:isolate;
  box-shadow:0 40px 80px -24px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12)}
.step-frame__item{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(1.03);
  transition:opacity .6s var(--ease-standard),transform 1s var(--ease-expo)}
.step-frame__item.is-active{opacity:1;transform:none}
.step-frame__item--photo{object-fit:cover}
.step-frame__item--scan{background:#000}
/* The whole retinal image, never cropped: contained and centred in the frame */
.step-frame__item--scan img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4%}
.step-frame__scanline{position:absolute;inset-inline:0;top:0;height:24%;
  background:linear-gradient(180deg,rgba(99,221,227,0),rgba(99,221,227,.3));border-bottom:2px solid #63DDE3;
  box-shadow:0 6px 22px rgba(99,221,227,.55);animation:scan 3s cubic-bezier(.45,0,.55,1) infinite}
.step-frame__item--doc{object-fit:contain;background:#fff;padding:10px}
:root[data-theme="light"] .step-frame{box-shadow:0 30px 60px -24px rgba(0,30,97,.4),0 0 0 1px rgba(0,30,97,.12)}
@media (max-width:760px){
  /* Phones: same rule as desktop, centred on the eye; the copy compacts so it never meets the frame */
  .saaria .product-expansion{display:none}
  .saaria .badges{gap:6px}
  .saaria .badge{height:28px;padding-inline:10px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .step-frame__scanline{animation:none;top:38%}
}

/* Phones, SAARIA scene: placed last so it wins over the desktop spacing rules above. */
@media (max-width:760px){
  .saaria__sticky{padding-bottom:40px}
  .saaria__progress{position:relative;top:auto;bottom:auto;inset-inline:auto;width:100%;margin-top:28px}
}

/* Step indicator for phones (desktop shows the full step list instead) */
.step-dots{display:none}
@media (max-width:760px){
  .step-dots{display:flex;align-items:center;gap:6px;list-style:none;margin:18px 0 0;padding:0}
  .step-dots li{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:var(--fw-semibold);color:var(--muted)}
  .step-dots li + li::before{content:"";width:18px;height:1px;background:rgba(var(--fg-rgb),.25);margin-inline-end:2px}
  .step-dots span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;border:1px solid rgba(var(--fg-rgb),.3);transition:background-color var(--dur-slow),border-color var(--dur-slow),color var(--dur-slow)}
  .step-dots i{font-style:normal;display:none}
  .step-dots li.is-active{color:var(--fg)}
  .step-dots li.is-active i{display:inline}
  .step-dots li.is-active span{background:var(--sdm-turquoise);border-color:var(--sdm-turquoise);color:var(--sdm-navy)}
  .step-dots li.is-done span{background:rgba(30,202,211,.18);border-color:rgba(30,202,211,.6);color:var(--accent-soft)}
  .step-dots li.is-done + li::before,.step-dots li.is-done::before{background:var(--sdm-turquoise)}
  /* The active step already shows its number in the row above */
  .saaria .step .step__num{display:none}
  .saaria .steps{margin-top:10px}
}
/* Short phones: trim the copy so the eye keeps a sensible size */
@media (max-width:760px) and (max-height:740px){
  .saaria .product-kicker{display:none}
  .saaria .product-link{display:none}
  .saaria .product-logo img{height:40px}
  .saaria .product-logo{margin-top:0}
}

/* Phones: the home news becomes a swipeable row (one card at a time, the next one peeking in),
   instead of three tall cards stacked down the page. All cards share one height and image shape. */
@media (max-width:760px){
  .news .news__grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin-inline:calc(var(--pad-x) * -1);padding:4px var(--pad-x) 18px;scroll-padding-inline:var(--pad-x);scrollbar-width:none}
  .news .news__grid::-webkit-scrollbar{display:none}
  .news .news__grid .news-card{flex:0 0 84%;scroll-snap-align:start;grid-row:auto}
  .news .news__grid .news-card .news-card__media{flex:none;aspect-ratio:16/10;min-height:0}
  .news .news__grid .news-card--feature .news-card__body{padding:22px 24px 26px}
  .news .news__grid .news-card--feature .news-card__title{font-size:var(--fs-h4)}
  .news .news__grid .news-card--feature .news-card__excerpt{font-size:var(--fs-sm);-webkit-line-clamp:3}
  .news__head{align-items:flex-start}
}

/* SAARIA steps never change the height of the copy, so nothing above them jumps between steps.
   Phones: all three steps share one grid cell (the block is always as tall as the longest step)
   and crossfade in place. Short desktops: the active description always reserves three lines. */
@media (max-width:760px){
  .saaria .steps{display:grid}
  .saaria .step,
  .saaria .step:not(.is-active){display:flex;grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .35s ease,visibility 0s linear .35s}
  .saaria .step.is-active{visibility:visible;opacity:1;transition:opacity .45s ease .1s,visibility 0s}
}
@media (max-height:860px) and (min-width:761px){
  .saaria .step.is-active .step__body{min-height:4.8em}
}

/* Way back from inner pages: a clear arrow link at the top of the page */
.page-back{display:flex;width:fit-content;align-items:center;gap:8px;height:38px;padding-inline:14px 16px;margin-bottom:28px;border-radius:999px;
  border:1px solid rgba(var(--fg-rgb),.16);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--fg);
  transition:border-color var(--dur-base),background-color var(--dur-base)}
.page-back:hover{border-color:var(--fg);background:rgba(var(--fg-rgb),.06)}
.page-back .btn__arrow{transition:transform var(--dur-base) var(--ease-standard)}
.page-back:hover .btn__arrow{transform:translateX(-3px)}
:root[dir="rtl"] .page-back .btn__arrow{transform:scaleX(-1)}
:root[dir="rtl"] .page-back:hover .btn__arrow{transform:scaleX(-1) translateX(-3px)}
.profile .page-back{margin-bottom:36px}
.ph__copy > .page-back{margin-bottom:24px}
/* Article: Home / All news */
.crumbs{display:flex;align-items:center;gap:10px;margin-bottom:28px;font-size:var(--fs-sm);color:var(--muted)}
.crumbs > a:not(.page-back){color:var(--muted);transition:color var(--dur-base)}
.crumbs > a:not(.page-back):hover{color:var(--fg)}
.crumbs .page-back{margin-bottom:0;display:inline-flex}

/* A single product card spans the row: visual beside the text */
.more-products .product-card--wide{grid-column:1/-1;flex-direction:row}
.more-products .product-card--wide .product-card__visual{flex:0 0 52%;aspect-ratio:auto;min-height:380px;border-bottom:0;border-inline-end:1px solid rgba(var(--fg-rgb),.08)}
.more-products .product-card--wide .product-card__body{align-self:center}
@media (max-width:1024px){
  .more-products .product-card--wide{flex-direction:column}
  .more-products .product-card--wide .product-card__visual{flex:none;aspect-ratio:4/3;min-height:0;border-inline-end:0;border-bottom:1px solid rgba(var(--fg-rgb),.08)}
}

/* SAARIA page: Saudi Tech membership strip under the trust cards. The mark is shown exactly as
   supplied (official green, unmodified) on a white tile, so it reads the same on both themes.
   English or Arabic version follows the page language. */
.saudi-tech{margin-top:20px;display:flex;align-items:center;gap:24px;padding:18px 28px 18px 18px;border-radius:20px;
  border:1px solid rgba(var(--fg-rgb),.12);background:rgba(var(--fg-rgb),.03)}
:root[dir="rtl"] .saudi-tech{padding:18px 18px 18px 28px}
.saudi-tech__logo{flex:none;display:grid;place-items:center;padding:10px 14px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(0,30,97,.08)}
.saudi-tech__logo img{display:block;height:44px;width:auto}
:root[lang="ar"] .saudi-tech--en,:root:not([lang="ar"]) .saudi-tech--ar{display:none}
.saudi-tech p{margin:0;font-size:var(--fs-sm);color:rgba(var(--fg-rgb),.75)}
.saudi-tech strong{display:block;font-size:var(--fs-h4);font-weight:var(--fw-semibold);color:var(--fg)}
@media (max-width:560px){
  .saudi-tech,:root[dir="rtl"] .saudi-tech{flex-direction:column;align-items:flex-start;padding:20px}
}
/* spam trap: invisible and unreachable for people, filled in by bots */
.form__trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.form__turnstile:empty{display:none}