/* ==========================================================================
   Control & More — "Lights On" B2B landing page (EN + AR)
   One stylesheet for both directions: logical properties everywhere; only
   gradients and transforms get [dir=rtl] overrides.
   Motion layout lives under html.m-desk / html.m-mob (added by js/main.js);
   the default render (no JS, reduced motion) is the final "all on" state.
   ========================================================================== */

/* ---------- 0. Fallback faces + Lenis base styles ---------- */
/* Metric-matched local fallbacks: text keeps its line breaks when the web fonts swap in (CLS).
   size-adjust = measured text width of the web font / the local font (headless Chrome, page copy);
   ascent/descent = the web font's typo metrics / size-adjust. */
@font-face{ font-family:"Manrope Fallback"; src:local("Arial"), local("ArialMT"); font-weight:100 650;
  size-adjust:104.2%; ascent-override:102.3%; descent-override:28.8%; line-gap-override:0%; }
@font-face{ font-family:"Manrope Fallback"; src:local("Arial Bold"), local("Arial-BoldMT"); font-weight:651 900;
  size-adjust:101%; ascent-override:105.5%; descent-override:29.7%; line-gap-override:0%; }
@font-face{ font-family:"Plex Arabic Fallback"; src:local("Segoe UI"), local("SegoeUI"); font-weight:100 650;
  size-adjust:93.4%; ascent-override:116.2%; descent-override:44.4%; line-gap-override:0%; }
@font-face{ font-family:"Plex Arabic Fallback"; src:local("Segoe UI Bold"), local("SegoeUI-Bold"); font-weight:651 900;
  size-adjust:96.7%; ascent-override:112.2%; descent-override:42.9%; line-gap-override:0%; }
@font-face{ font-family:"Plex Arabic Fallback T"; src:local("Tahoma"); font-weight:100 650;
  size-adjust:92.3%; ascent-override:117.6%; descent-override:45%; line-gap-override:0%; }
@font-face{ font-family:"Plex Arabic Fallback T"; src:local("Tahoma Bold"), local("Tahoma-Bold"); font-weight:651 900;
  size-adjust:84.7%; ascent-override:128.1%; descent-override:49%; line-gap-override:0%; }

/* lenis@1.3.26/dist/lenis.css, inlined */
html.lenis, html.lenis body{ height:auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped{ overflow:clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal]{ overscroll-behavior:contain; }
.lenis.lenis-smooth iframe{ pointer-events:none; }
.lenis.lenis-autoToggle{ transition-property:overflow; transition-duration:1ms; transition-behavior:allow-discrete; }

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme: only light;
  /* Brand (Figma) */
  --blue:#4294D1; --green:#7AB734; --light-blue:#BFDCEF; --black:#333333; --body:#4B5154; --gray:#898989; --paper:#F9FAFB; --white:#FFFFFF;
  /* Derived, contrast-checked */
  --green-cta:#467A16;        /* CTA bg, white text 5.2:1; small green text on paper 5.0:1 */
  --green-cta-hover:#3B6812;  /* white 6.6:1 */
  --green-text:#467A16;
  --blue-text:#2672AE;        /* small blue text/links on light, 4.9:1 on paper */
  --night:#0D1318; --night-2:#141C23; --night-line:rgba(191,220,239,.14);
  --muted-dark:#9AA4AC;       /* body on night 7.4:1, on charcoal 5.7:1 */
  --mist:#EAF3FA; --line:#E3EAF0; --charcoal:#262A2D;
  --field-border:#8A949B;     /* 3.1:1 on white */
  --error:#B42318;            /* 6.6:1 on white */
  /* Semantic */
  --em-on-dark:var(--green); --em-on-light:var(--green-text);
  --eyebrow-on-dark:var(--green); --eyebrow-on-light:var(--green-cta-hover); /* #3B6812: >=5.6:1 on paper, mist and lattice */
  --heading-light:var(--black); --heading-dark:#FFFFFF; --lead-dark:var(--light-blue);
  --focus-dark:var(--light-blue); --focus-light:var(--blue-text);
  /* Spacing (4/8 rhythm) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --gutter:clamp(16px, 4vw, 40px);
  --section-y:clamp(4.5rem, 3rem + 6.667vw, 9rem);   /* 72 -> 144 */
  --container:1240px; --header-h:60px;               /* 68 >=768, 76 >=1200 */
  --col-gap:16px;
  /* Radii */
  --r-sm:8px; --r-md:12px; --r-tile:16px; --r-lg:20px; --r-xl:28px; --r-pill:999px; --media-radius:24px;
  /* Shadows */
  --shadow-card:0 1px 2px rgba(13,19,24,.04), 0 8px 24px -8px rgba(13,19,24,.10);
  --shadow-lift:0 2px 4px rgba(13,19,24,.06), 0 24px 48px -16px rgba(13,19,24,.18);
  --shadow-form:0 30px 80px -20px rgba(0,0,0,.55);
  /* Motion (CSS side) */
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --origin-start:left; --dir:1;
  /* Type – EN */
  --font:"Manrope","Manrope Fallback","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-num:"Outfit","Manrope",sans-serif;
  --fs-display:clamp(2.375rem, 1.75rem + 2.778vw, 4.25rem);   /* 38 -> 68 */
  --fs-h2:clamp(1.875rem, 1.583rem + 1.296vw, 2.75rem);       /* 30 -> 44 */
  --fs-h3:clamp(1.25rem, 1.208rem + .185vw, 1.375rem);        /* 20 -> 22 */
  --fs-eyebrow:clamp(1rem, .917rem + .37vw, 1.25rem);         /* 16 -> 20 */
  --fs-lead:clamp(1.0625rem, 1rem + .278vw, 1.25rem);         /* 17 -> 20 */
  --fs-body:1rem; --fs-small:.875rem; --fs-label:.75rem;
  --fs-num:clamp(4rem, 3.333rem + 2.963vw, 6rem);             /* 64 -> 96 Outfit */
  --lh-display:1.04; --lh-h2:1.12; --lh-h3:1.25; --lh-lead:1.55; --lh-body:1.6;
  --ls-display:-.03em; --ls-h2:-.02em; --ls-label:.12em;
  --fw-display:800; --fw-h:700; --fw-body:500; --fw-eyebrow:600;
}
@media (min-width:768px){ :root{ --header-h:68px; --col-gap:24px; } }
@media (min-width:1200px){ :root{ --header-h:76px; } }
html[dir="rtl"]{ --origin-start:right; --dir:-1; }
html[lang="ar"]{
  --font:"IBM Plex Sans Arabic","Plex Arabic Fallback","Plex Arabic Fallback T","Manrope",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --fs-display:clamp(2.25rem, 1.667rem + 2.593vw, 4rem);      /* 36 -> 64 */
  --fs-h2:clamp(2rem, 1.708rem + 1.296vw, 2.875rem);           /* 32 -> 46 */
  --fs-h3:clamp(1.3125rem, 1.26rem + .231vw, 1.4688rem);       /* 21 -> 23.5 */
  --fs-eyebrow:clamp(1.0625rem, .979rem + .37vw, 1.3125rem);   /* 17 -> 21 */
  --fs-lead:clamp(1.125rem, 1.0625rem + .278vw, 1.3125rem);    /* 18 -> 21 */
  --fs-body:1.0625rem; --fs-small:.9375rem; --fs-label:.875rem;
  --lh-display:1.3; --lh-h2:1.4; --lh-h3:1.5; --lh-lead:1.8; --lh-body:1.8;
  --ls-display:0; --ls-h2:0; --ls-label:0;
  --fw-display:700;
}
html[lang="ar"] *{ letter-spacing:0 !important; text-transform:none !important; }

/* Tone: colours inherit from the nearest [data-tone] ancestor */
[data-tone="light"]{ --heading:var(--heading-light); --em:var(--em-on-light); --eyebrow:var(--eyebrow-on-light); --focus:var(--focus-light); --text:var(--body); }
[data-tone="dark"]{ --heading:var(--heading-dark); --em:var(--em-on-dark); --eyebrow:var(--eyebrow-on-dark); --focus:var(--focus-dark); --text:var(--muted-dark); }

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 16px); background:var(--night); }
@media (max-width:767px){ html{ scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom)); } }
body{
  margin:0; background:var(--night); color:var(--body);
  font-family:var(--font); font-size:var(--fs-body); font-weight:var(--fw-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; letter-spacing:inherit; }
em{ font-style:normal; color:var(--em, var(--em-on-light)); }
strong{ font-weight:700; }
.ltr{ direction:ltr; unicode-bidi:isolate; }
:focus-visible{ outline:3px solid var(--focus, var(--focus-light)); outline-offset:3px; }
:focus:not(:focus-visible){ outline:none; }
[hidden]{ display:none !important; }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

.container{ width:100%; max-width:calc(var(--container) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter); }
.section{ position:relative; padding-block:var(--section-y); }

.skip-link{
  position:fixed; z-index:100; inset-block-start:12px; inset-inline-start:12px;
  padding:12px 18px; border-radius:var(--r-md); background:#fff; color:var(--black); font-weight:700; text-decoration:none;
  transform:translateY(calc(-100% - 24px)); transition:transform .2s var(--ease-out);
}
.skip-link:focus{ transform:none; }

/* ---------- 3. Type ---------- */
.display{
  font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:var(--ls-display);
  font-weight:var(--fw-display); color:#fff; text-wrap:balance;
}
.h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-h2); font-weight:700; color:var(--heading, var(--black)); text-wrap:balance; }
.h2--on-dark{ color:#fff; }
.h3{ font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:700; color:var(--heading, var(--black)); }
.h3, .step__title > span, .tile__name, .footer__tagline{ text-wrap:balance; }
p, li{ text-wrap:pretty; }
.lead{ font-size:var(--fs-lead); line-height:var(--lh-lead); font-weight:500; color:var(--body); text-wrap:pretty; }
.lead--on-dark{ color:var(--lead-dark); }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin-block-end:16px;
  font-size:var(--fs-eyebrow); font-weight:var(--fw-eyebrow); line-height:1.35; color:var(--eyebrow-on-light);
}
.eyebrow--on-dark{ color:var(--eyebrow-on-dark); }
.eyebrow__dot{ flex:none; width:6px; height:6px; border-radius:50%; background:currentColor; }
.h2 + .lead, .h2 + p{ margin-block-start:20px; }

/* SplitText line masks: room for ascenders / Arabic dots & diacritics */
.sl-mask{ padding-block:.14em; margin-block:-.14em; }
/* Arabic line detection runs in an LTR box (see main.js); every line renders RTL */
.split-ltr{ direction:ltr; }
.split-ltr .sl-mask, .split-ltr .sl{ direction:rtl; }

/* ---------- 4. Power glyph ---------- */
.pw{ fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.pw__arc, .pw__stem{ stroke-width:2; }
.pw__arc{ stroke-dasharray:1; stroke-dashoffset:0; }
.pw__track{ stroke-width:1.5; opacity:.3; display:none; }
.pw__ring{ stroke-width:1.5; stroke-dasharray:1; stroke-dashoffset:var(--charge, 1); display:none; }
[data-ring] .pw__track, [data-ring] .pw__ring{ display:inline; }
html[dir="rtl"] .cta .pw{ transform:scaleX(-1); } /* the glyph is symmetric: only the charge direction mirrors */

/* ---------- 5. CTA (the single action) ---------- */
.cta{
  --cta-h:52px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--cta-h); padding-block:8px; padding-inline:22px 26px;
  border:0; border-radius:var(--r-pill); background-color:var(--green-cta); color:#fff;
  font-size:1rem; font-weight:700; line-height:1.2; text-decoration:none; text-align:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:background-color .25s, box-shadow .25s, color .3s, opacity .3s, scale .15s;
}
.cta--lg{ --cta-h:56px; font-size:1.0625rem; }
.cta--block{ display:flex; width:100%; }
.cta__icon{ display:inline-grid; place-items:center; flex:none; width:22px; height:22px; }
.cta__icon .pw{ width:22px; height:22px; }
[data-tone="dark"] .cta:not(.cta--ghost){ box-shadow:inset 0 0 0 1px rgba(122,183,52,.6), 0 10px 30px -10px rgba(122,183,52,.55); }
.cta:active{ scale:.97; }
.cta:focus-visible{ outline-offset:3px; }
@media (hover:hover) and (pointer:fine){
  .cta:hover{ background-color:var(--green-cta-hover); box-shadow:0 0 0 4px rgba(122,183,52,.28); }
  [data-tone="dark"] .cta:not(.cta--ghost):hover{ box-shadow:inset 0 0 0 1px rgba(122,183,52,.7), 0 0 0 4px rgba(122,183,52,.28), 0 10px 30px -10px rgba(122,183,52,.6); }
}
.cta--ghost{ background-color:transparent; box-shadow:inset 0 0 0 1px rgba(191,220,239,.55); color:#fff; }
/* near the form the header CTA steps back to its outline style (contrast stays >= 4.5:1) */
.site-header .cta.is-muted{ background-color:transparent; box-shadow:inset 0 0 0 1px rgba(191,220,239,.55); color:#fff; }
.site-header[data-tone="light"] .cta.is-muted{ box-shadow:inset 0 0 0 1px var(--blue-text); color:var(--blue-text); }
@media (hover:hover) and (pointer:fine){
  .site-header .cta.is-muted:hover{ background-color:var(--green-cta-hover); color:#fff; box-shadow:0 0 0 4px rgba(122,183,52,.28); }
}
.cta.is-loading{ cursor:progress; }
.cta.is-loading .pw{ animation:cm-spin .9s linear infinite; }
.cta.is-loading .pw__arc{ stroke-dashoffset:.72 !important; }
.cta.is-loading .pw__stem{ opacity:0; }
.cta[disabled], .cta[aria-disabled="true"]{ cursor:progress; }
@keyframes cm-spin{ to{ rotate:360deg; } }
.cta-note{ flex-basis:100%; font-size:var(--fs-small); color:var(--light-blue); } /* own line, inside the dark column */

/* ---------- 6. Header ---------- */
.site-header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:50; height:var(--header-h);
  color:#fff; transition:color .3s;
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-color:transparent; border-block-end:1px solid transparent;
  transition:background-color .3s, border-color .3s;
}
.site-header.is-scrolled[data-tone="dark"]::before{ background-color:rgba(13,19,24,.94); }
.site-header.is-scrolled[data-tone="light"]::before{ background-color:rgba(249,250,251,.94); border-block-end-color:var(--line); }
@media (min-width:768px){
  .site-header.is-scrolled::before{ -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
  .site-header.is-scrolled[data-tone="dark"]::before{ background-color:rgba(13,19,24,.62); }
  .site-header.is-scrolled[data-tone="light"]::before{ background-color:rgba(249,250,251,.82); }
}
.site-header[data-tone="light"]{ color:var(--black); }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:100%; }
.brand{ display:flex; align-items:center; min-height:44px; border-radius:var(--r-sm); }
.brand__logo{ width:auto; height:34px; transform-origin:var(--origin-start) center; transition:transform .3s var(--ease-out); }
.is-scrolled .brand__logo{ transform:scale(.9); }
.site-header__actions{ display:flex; align-items:center; gap:clamp(8px, 2vw, 20px); }
.lang-switch{
  position:relative; display:inline-flex; align-items:center; min-height:44px; padding-inline:10px;
  font-size:.9375rem; font-weight:600; text-decoration:none; border-radius:var(--r-sm);
}
.lang-switch::after{
  content:""; position:absolute; inset-inline:10px; inset-block-end:9px; height:1.5px; background:currentColor;
  transform:scaleX(0); transform-origin:var(--origin-start); transition:transform .35s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .lang-switch:hover::after{ transform:scaleX(1); } }
.lang-switch:lang(ar){ font-family:"IBM Plex Sans Arabic","Plex Arabic Fallback","Plex Arabic Fallback T","Manrope",sans-serif; font-size:1rem; }
.cta--header{ --cta-h:44px; padding-inline:14px 18px; font-size:.9375rem; display:none; }
.site-header[data-tone="light"] .cta--ghost{ box-shadow:inset 0 0 0 1px var(--blue-text); color:var(--blue-text); }
@media (min-width:768px){
  .brand__logo{ height:40px; }
  .cta--header{ display:inline-flex; }
}
@media (min-width:1200px){ .brand__logo{ height:44px; } }

/* ---------- 7. Hero: Power on ---------- */
.hero{
  position:relative; z-index:1; overflow:clip;
  display:flex; flex-direction:column; justify-content:center;
  min-height:100svh; padding-block:calc(var(--header-h) + 32px) 48px;
  background:var(--night); color:#fff;
}
.hero__frame{ position:absolute; inset:0; overflow:hidden; background:var(--night); }
.hero__img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:0% 50%; }
html[dir="rtl"] .hero__img{ object-position:100% 50%; }
.hero__shade, .hero__dim, .hero__scrolldim{ position:absolute; inset:0; pointer-events:none; }
/* the dark plateau reaches past the end of every copy line (lead capped at 520px); the globe stays lit */
.hero__shade{
  background:
    linear-gradient(180deg, rgba(13,19,24,.55) 0%, rgba(13,19,24,0) 22%),
    linear-gradient(0deg, rgba(13,19,24,.7) 0%, rgba(13,19,24,0) 30%),
    linear-gradient(90deg, var(--night) 0%, rgba(13,19,24,.9) 38%, rgba(13,19,24,.6) 52%, rgba(13,19,24,0) 74%);
}
html[dir="rtl"] .hero__shade{
  background:
    linear-gradient(180deg, rgba(13,19,24,.55) 0%, rgba(13,19,24,0) 22%),
    linear-gradient(0deg, rgba(13,19,24,.7) 0%, rgba(13,19,24,0) 30%),
    linear-gradient(270deg, var(--night) 0%, rgba(13,19,24,.9) 38%, rgba(13,19,24,.6) 52%, rgba(13,19,24,0) 74%);
}
.hero__dim, .hero__scrolldim{ background:var(--night); opacity:0; }
.js.intro .hero__dim{ opacity:.82; }
.hero__bloom{
  position:absolute; left:66%; top:45%; width:60vmax; height:60vmax; translate:-50% -50%;
  border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(closest-side, rgba(191,220,239,.55), rgba(66,148,209,.22) 35%, rgba(66,148,209,0) 70%);
}
.hero__glyph{
  position:absolute; z-index:3; left:66%; top:45%; width:96px; height:96px; translate:-50% -50%;
  color:var(--light-blue); pointer-events:none; visibility:hidden; opacity:0;
}
.js.intro .hero__glyph{ visibility:visible; opacity:1; }
.hero__glyph .pw{ width:100%; height:100%; }
.hero__glyph .pw__arc, .hero__glyph .pw__stem{ stroke-width:1.4; }
.hero__burst{ position:absolute; inset:0; border:2px solid var(--green); border-radius:50%; opacity:0; }
.hero__inner{ position:relative; z-index:2; }
.hero__copy{ max-width:620px; }
.hero .eyebrow{ margin-block-end:20px; }
.hero .lead{ margin-block-start:24px; max-width:520px; }
.hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-block-start:36px; }
.hero__trustbar{ position:relative; z-index:2; }
.hero__trust{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; margin-block-start:40px;
  font-size:var(--fs-small); font-weight:600; color:rgba(255,255,255,.86);
}
.hero__trust li{ display:inline-flex; align-items:center; gap:10px; }
.hero__trust-dot{ width:6px; height:6px; border-radius:50%; background:var(--green); flex:none; }
.hero__scroll{
  position:absolute; z-index:2; inset-block-end:32px; inset-inline-end:max(var(--gutter), calc((100% - var(--container)) / 2));
  display:none; align-items:center; gap:14px; font-size:.8125rem; font-weight:600; color:var(--muted-dark);
}
.hero__scroll-line{ display:block; width:1px; height:40px; background:linear-gradient(var(--light-blue), rgba(191,220,239,0)); transform-origin:50% 0; animation:cm-cue 2s var(--ease-in-out) infinite; }
.hero__scroll.is-paused .hero__scroll-line{ animation-play-state:paused; }
@keyframes cm-cue{ 0%{ transform:scaleY(0); transform-origin:50% 0; } 50%{ transform:scaleY(1); transform-origin:50% 0; } 50.1%{ transform-origin:50% 100%; } 100%{ transform:scaleY(0); transform-origin:50% 100%; } }
.m-desk .hero__scroll{ display:flex; }

@media (min-width:1200px){
  /* fixed-height hero: the display size also follows the viewport height (short laptop screens) */
  .hero{ height:100svh; min-height:640px; padding-block:var(--header-h) 120px; --fs-display:min(clamp(2.375rem, 1.75rem + 2.778vw, 4.25rem), 9.2svh); }
  html[lang="ar"] .hero{ --fs-display:min(clamp(2.25rem, 1.667rem + 2.593vw, 4rem), 8.4svh); }
  .hero__copy{ max-width:680px; }
  .hero__trustbar{ position:absolute; inset-inline:0; inset-block-end:32px; }
  .hero__trust{ margin:0; padding-block-start:20px; border-block-start:1px solid rgba(191,220,239,.15); padding-inline-end:220px; }
}
@media (min-width:1200px) and (max-height:760px){
  .hero{ padding-block-end:104px; }
  .hero .eyebrow{ margin-block-end:12px; }
  .hero .lead{ margin-block-start:18px; font-size:1.0625rem; }
  html[lang="ar"] .hero .lead{ font-size:1.125rem; line-height:1.7; }
  .hero__actions{ margin-block-start:24px; gap:10px 22px; }
}
@media (min-width:768px) and (max-width:1199px){
  .hero__copy{ max-width:min(600px, 58vw); }
  .hero{ --fs-display:clamp(3.25rem, 2rem + 2.6vw, 3.75rem); }
  .hero__shade{
    background:
      linear-gradient(180deg, rgba(13,19,24,.55) 0%, rgba(13,19,24,0) 22%),
      linear-gradient(0deg, rgba(13,19,24,.7) 0%, rgba(13,19,24,0) 30%),
      linear-gradient(90deg, var(--night) 0%, rgba(13,19,24,.9) 45%, rgba(13,19,24,.6) 60%, rgba(13,19,24,0) 82%);
  }
  html[dir="rtl"] .hero__shade{
    background:
      linear-gradient(180deg, rgba(13,19,24,.55) 0%, rgba(13,19,24,0) 22%),
      linear-gradient(0deg, rgba(13,19,24,.7) 0%, rgba(13,19,24,0) 30%),
      linear-gradient(270deg, var(--night) 0%, rgba(13,19,24,.9) 45%, rgba(13,19,24,.6) 60%, rgba(13,19,24,0) 82%);
  }
}
/* Phones, and portrait tablets: photo on top, copy anchored below */
@media (max-width:767px), (max-width:1199px) and (max-aspect-ratio:4/5){
  .hero{ --frame-h:62svh; justify-content:flex-end; padding-block:calc(var(--header-h) + 24px) 28px; }
  .hero__frame{ inset:0 0 auto 0; height:var(--frame-h); }
  .hero__img{ object-position:53% 50%; }
  html[dir="rtl"] .hero__img{ object-position:53% 50%; }
  .hero__shade, html[dir="rtl"] .hero__shade{
    background:
      linear-gradient(180deg, rgba(13,19,24,.6) 0%, rgba(13,19,24,0) 24%),
      linear-gradient(0deg, var(--night) 0%, rgba(13,19,24,.92) 40%, rgba(13,19,24,0) 72%);
  }
  /* the copy starts on the photo's dark tail (120px above its bottom edge), never on the bright globe */
  .hero__inner{ margin-block-start:max(0px, calc(var(--frame-h) - var(--header-h) - 144px)); }
}
@media (max-width:767px) and (max-height:780px){ .hero{ --frame-h:48svh; } }
@media (max-width:767px){
  .hero .display{ font-size:clamp(2.375rem, 1.6rem + 3.5vw, 2.625rem); }
  html[lang="ar"] .hero .display{ font-size:clamp(2.25rem, 1.5rem + 3.5vw, 2.5rem); }
  .hero .lead{ margin-block-start:16px; }
  .hero__actions{ margin-block-start:24px; }
  .hero__actions .cta{ width:100%; --cta-h:52px; }
  .hero__trust{ margin-block-start:24px; gap:8px 18px; font-size:.8125rem; }
  .hero__glyph{ width:72px; height:72px; }
}
@media (max-width:767px) and (max-height:740px){
  .hero .lead{ font-size:1rem; line-height:1.5; }
  html[lang="ar"] .hero .lead{ font-size:1.0625rem; line-height:1.65; }
  .hero__actions{ margin-block-start:20px; }
}

/* ---------- 8. Systems: boot sequence + flood ---------- */
.systems{ position:relative; z-index:2; color:#fff; }
.systems__bg{ position:absolute; inset:0; z-index:0; background:var(--night); }
.systems__led{
  position:absolute; inset-block-start:0; inset-inline:0; height:2px; transform-origin:50% 50%;
  background:linear-gradient(90deg, rgba(66,148,209,0), var(--blue) 30%, var(--green) 70%, rgba(122,183,52,0));
  box-shadow:0 -12px 40px rgba(66,148,209,.35);
}
html[dir="rtl"] .systems__led{ background:linear-gradient(270deg, rgba(66,148,209,0), var(--blue) 30%, var(--green) 70%, rgba(122,183,52,0)); }
.systems__stage{ position:relative; z-index:1; }
.systems__night{
  display:grid; grid-template-columns:minmax(0,1fr); gap:40px;
  padding-block:var(--section-y);
}
.systems__head .lead{ max-width:520px; }
.systems__visual{ position:relative; display:grid; place-items:center; }
.systems__glow{
  position:absolute; inset:15%; border-radius:50%; opacity:.5; pointer-events:none;
  background:radial-gradient(closest-side, rgba(191,220,239,.28), rgba(191,220,239,0) 65%);
}
.systems__svgwrap{ position:relative; width:100%; max-width:360px; aspect-ratio:480/640; }
html[dir="rtl"] .systems__svgwrap{ transform:scaleX(-1); }
.building{ width:100%; height:100%; overflow:visible; }

/* building drawing — default = final "all on" state */
.building *{ vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.bld-ground{ stroke:var(--blue); stroke-width:1.5; opacity:.5; }
.net{ fill:none; stroke:var(--light-blue); stroke-width:1.25; stroke-dasharray:1; stroke-dashoffset:0; opacity:.85; }
.bld-body{ fill:rgba(66,148,209,.05); stroke:var(--blue); stroke-width:1.5; }
.bld-roof rect, .bld-fan circle, .bld-fan path{ fill:none; stroke:var(--blue); stroke-width:1.5; }
.bld-fan path{ stroke:var(--light-blue); }
.win-lit{ fill:var(--light-blue); }
.air{ fill:none; stroke:var(--light-blue); stroke-width:1.5; stroke-dasharray:.06 .04; }
.door{ fill:rgba(66,148,209,.08); stroke:var(--blue); stroke-width:1.5; stroke-dasharray:1; }
.lock path, .lock rect{ fill:none; stroke:var(--blue); stroke-width:1.5; }
.lock rect{ fill:var(--night); }
.scan{ fill:none; stroke:var(--green); stroke-width:1.5; opacity:0; }
.bld-energy .arc{ fill:none; stroke:var(--light-blue); stroke-width:1.5; stroke-dasharray:1; }
.leaf--blue{ fill:var(--blue); }
.leaf--green{ fill:var(--green); }
.hub{ fill:var(--night); stroke:var(--blue); stroke-width:1.5; }
.hub-arc, .hub-stem{ fill:none; stroke:var(--blue); stroke-width:2; }
.hub-arc{ stroke-dasharray:1; }
.hub-pulse{ fill:none; stroke:var(--green); stroke-width:1.5; opacity:0; }

.systems__steps{ display:grid; }
.step{ padding-block:22px; border-block-start:1px solid var(--night-line); }
.step:last-child{ border-block-end:1px solid var(--night-line); }
.step__status{ font-size:var(--fs-label); font-weight:700; text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--light-blue); }
html[lang="ar"] .step__status{ font-size:.875rem; font-weight:600; }
.step__title{
  margin-block:8px 6px; overflow:clip; padding-block:.14em; margin-block-start:calc(8px - .14em);
  font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:700; color:#fff;
}
.step__title > span{ display:block; }
.step__body{ color:var(--light-blue); font-size:var(--fs-body); line-height:var(--lh-body); max-width:440px; }
.systems__meta{ display:none; align-items:center; gap:28px; color:var(--muted-dark); font-size:.875rem; }
.counter{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-num); font-weight:500; font-size:.9375rem; direction:ltr; unicode-bidi:isolate; }
.counter__win{ display:block; height:1.4em; overflow:clip; color:#fff; }
.counter__reel{ display:flex; flex-direction:column; }
.counter__reel span{ display:block; height:1.4em; line-height:1.4em; }
.switches{ display:inline-flex; gap:8px; }

/* visual switch (state indicator, never a control) */
.cm-switch{ position:relative; display:inline-block; flex:none; width:36px; height:20px; border-radius:999px; background:rgba(191,220,239,.2); overflow:hidden; vertical-align:middle; }
.cm-switch__fill{ position:absolute; inset:0; border-radius:inherit; background:var(--green); opacity:0; }
.cm-switch__knob{ position:absolute; inset-block-start:3px; inset-inline-start:3px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.cm-switch.is-on .cm-switch__fill{ opacity:1; }
.cm-switch.is-on .cm-switch__knob{ transform:translateX(calc(16px * var(--dir))); }
[data-tone="light"] .cm-switch{ background:var(--line); }

/* Day layer: the dashboard */
.systems__day{ position:relative; background:var(--paper); color:var(--body); padding-block:var(--section-y); }
.dash{ display:grid; gap:40px; }
.dash__title{ margin-block-end:16px; }
.dash__note{ margin-block-end:28px; font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--body); max-width:440px; }
.dash__tiles{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3); padding:20px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-tile); box-shadow:var(--shadow-card); cursor:default;
}
.tile__icon{ width:28px; height:28px; fill:none; stroke:var(--blue-text); stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.tile__name{ font-size:1.0625rem; font-weight:700; color:var(--black); }
.tile__state{ display:inline-flex; align-items:center; gap:10px; font-size:var(--fs-small); font-weight:600; color:var(--green-text); }
.tile--wide{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px 16px; }
.tile--wide .tile__state{ margin-inline-start:auto; }
.pulse-dot{ width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(122,183,52,.2); }
.pulse-dot.is-live{ animation:cm-pulse 1.2s ease-in-out infinite alternate; }
@keyframes cm-pulse{ to{ opacity:.35; } }
/* proof next to the first mid-page CTA: the logos' own background is #F9FAFB = --paper */
.dash__trust{ margin-block-start:32px; padding-block-start:20px; border-block-start:1px solid var(--line); }
.dash__trust-label{ margin-block-end:12px; font-size:var(--fs-small); font-weight:700; color:var(--black); }
.dash__logos{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-5); }
.dash__logos img{ width:auto; height:36px; filter:grayscale(1); opacity:.75; mix-blend-mode:multiply; }

@media (min-width:768px){
  .systems__svgwrap{ max-width:360px; }
}
@media (min-width:1200px){
  .systems__night{ grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); row-gap:40px; align-items:start; }
  .systems__head{ grid-column:1 / 6; grid-row:1; }
  .systems__steps{ grid-column:1 / 6; grid-row:2; }
  .systems__visual{ grid-column:7 / 13; grid-row:1 / 3; align-self:center; }
  .systems__svgwrap{ max-width:420px; }
  .dash{ grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); align-items:center; }
  .dash__copy{ grid-column:1 / 6; }
  .dash__tiles{ grid-column:7 / 13; }
}

/* Desktop motion: one pinned stage */
.m-desk .systems__stage{ height:100svh; overflow:hidden; }
.m-desk .systems__night{
  height:100%; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap);
  grid-template-rows:auto auto auto; row-gap:clamp(14px, 3svh, 32px); align-content:center;
  padding-block:calc(var(--header-h) + 2svh) 3svh;
}
.m-desk .systems__head{ grid-column:1 / 6; grid-row:1; }
.m-desk .systems__head .eyebrow{ margin-block-end:10px; }
.m-desk .systems__head .lead{ margin-block-start:14px; font-size:clamp(1rem, .7rem + .9svh, 1.25rem); }
.m-desk .systems__steps{ grid-column:1 / 6; grid-row:2; display:grid; }
.m-desk .step{ grid-area:1 / 1; padding:0; border:0; pointer-events:none; }
.m-desk .step__title{ font-size:clamp(1.5rem, 1rem + 1.1vw, 2rem); line-height:1.2; margin-block-start:calc(10px - .14em); }
html[lang="ar"].m-desk .step__title{ line-height:1.45; }
.m-desk .step__body{ font-size:var(--fs-lead); line-height:var(--lh-lead); }
.m-desk .systems__meta{ display:flex; grid-column:1 / 6; grid-row:3; }
.m-desk .systems__visual{ grid-column:7 / 13; grid-row:1 / 4; align-self:center; height:min(78svh, 640px); }
.m-desk .systems__svgwrap{ height:100%; width:auto; max-width:none; }
.m-desk .systems__day{ position:absolute; inset:0; display:flex; align-items:center; padding-block:calc(var(--header-h) + 16px) 24px; }
.m-desk .dash{ grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); align-items:center; }
.m-desk .dash__copy{ grid-column:1 / 6; }
.m-desk .dash__tiles{ grid-column:7 / 13; }
@media (max-width:1279px){
  .m-desk .systems__head, .m-desk .systems__steps, .m-desk .systems__meta{ grid-column:1 / 7; }
  .m-desk .systems__visual{ grid-column:7 / 13; }
}
@media (max-height:760px){
  .m-desk .tile{ padding:14px 16px; gap:6px; }
  .m-desk .dash__note{ margin-block-end:20px; }
  .m-desk .dash__trust{ margin-block-start:20px; padding-block-start:14px; }
  .m-desk .dash__logos img{ height:30px; }
  .m-desk .systems__head .lead{ font-size:1rem; line-height:1.55; }
  html[lang="ar"].m-desk .systems__head .lead{ line-height:1.65; }
  .m-desk .step__title{ font-size:clamp(1.375rem, 1rem + .8vw, 1.75rem); }
  .m-desk .step__body{ font-size:var(--fs-body); }
}

/* Mobile/tablet motion: sticky building, steps flow beneath it */
.m-mob .systems__night{ padding-block-end:24px; gap:24px; }
.m-mob .systems__visual{
  position:sticky; inset-block-start:calc(var(--header-h) + 8px); z-index:1; height:40svh;
  padding-block-end:16px; background:linear-gradient(var(--night) 82%, rgba(13,19,24,0));
}
.m-mob .systems__svgwrap{ height:100%; width:auto; max-width:none; }
.m-mob .systems__steps{ position:relative; z-index:0; }
.m-mob .step{ min-height:40svh; display:flex; align-items:flex-end; padding-block:24px; border:0; }
.m-mob .step__card{ width:100%; padding:20px; border-radius:var(--r-tile); background:rgba(20,28,35,.88); border:1px solid var(--night-line); }
.m-mob .systems__day{ padding-block:72px; }
@media (min-width:768px){
  .m-mob .systems__visual{ height:46svh; }
  .m-mob .systems__svgwrap{ max-width:360px; }
  .m-mob .step__card{ max-width:560px; }
}
/* touch tablets at >=1200 get the mobile motion: the building sticks beside the steps, not above them */
@media (min-width:1200px){
  .m-mob .systems__visual{ align-self:start; height:min(70svh, 600px); background:none; padding-block-end:0; }
}
/* short viewports (landscape phones, 200% zoom): no sticky building, so a whole step card fits on screen */
@media (max-height:560px){
  .m-mob .systems__visual{ position:relative; inset-block-start:auto; height:auto; padding-block-end:0; background:none; }
  .m-mob .systems__svgwrap{ height:auto; width:min(60vw, 260px); }
  .m-mob .step{ min-height:0; }
}

/* ---------- 9. Capabilities ---------- */
.caps{ background:var(--paper); overflow-x:clip; }
.systems + .caps{ padding-block-start:var(--s-8); }
.caps__gear-wrap{ position:absolute; z-index:0; inset-inline-end:-80px; inset-block-start:42%; width:220px; opacity:.35; pointer-events:none; }
.caps__gear{ width:100%; height:auto; }
.caps .container{ position:relative; z-index:1; }
.caps__top{ display:grid; gap:40px; }
.caps__intro .lead{ max-width:520px; }
.media{ position:relative; overflow:hidden; border-radius:var(--media-radius); background:var(--mist); }
.media img{ width:100%; height:100%; object-fit:cover; }
.caps__media{ aspect-ratio:16/10; }
.caps__cards{ display:grid; gap:16px; margin-block-start:56px; }
.card{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:var(--s-3);
  padding:24px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  transition:translate .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.card__strip{ position:absolute; inset-block-start:0; inset-inline:0; height:2px; background:var(--green); transform:scaleX(0); transform-origin:var(--origin-start); transition:transform .35s var(--ease-out); }
.card__icon{ display:grid; place-items:center; width:72px; height:72px; margin-block-end:6px; border-radius:var(--r-tile); background:var(--mist); transition:background-color .35s; }
.card__icon img{ width:auto; height:auto; max-width:56px; }
.card p{ color:var(--body); }
.bullets{ display:grid; gap:10px; margin-block-start:auto; padding-block-start:6px; }
.bullets li{ display:flex; align-items:flex-start; gap:10px; font-weight:600; color:var(--black); }
.bullets li::before{ content:""; flex:none; width:18px; height:18px; margin-block-start:.2em; background:url(../assets/icons/power.svg) center / contain no-repeat; }
html[lang="ar"] .bullets li::before{ margin-block-start:.35em; }
.caps__home{ display:flex; align-items:center; gap:14px; margin-block-start:32px; color:var(--body); }
.caps__home img{ flex:none; width:32px; height:32px; }
@media (hover:hover) and (pointer:fine){
  .card:hover{ translate:0 -4px; box-shadow:var(--shadow-lift); }
  .card:hover .card__strip{ transform:scaleX(1); }
  .card:hover .card__icon{ background-color:rgba(191,220,239,.4); }
}
@media (min-width:768px){
  .caps__media{ aspect-ratio:16/9; }
  .caps__cards{ grid-template-columns:1fr 1fr; gap:24px; margin-block-start:64px; }
  .caps__cards .card:nth-child(3){ grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr; column-gap:28px; align-items:start; }
  .caps__cards .card:nth-child(3) .card__icon{ grid-row:1 / 4; }
  .card{ padding:32px; }
  .caps__gear-wrap{ width:300px; inset-inline-end:-100px; opacity:.45; }
}
@media (min-width:1200px){
  .caps__top{ grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); align-items:center; }
  .caps__intro{ grid-column:1 / 6; }
  .caps__media{ grid-column:7 / 13; aspect-ratio:3/2; }
  .caps__cards{ grid-template-columns:repeat(3, minmax(0,1fr)); margin-block-start:80px; }
  .caps__cards .card:nth-child(3){ grid-column:auto; display:flex; }
  .caps__gear-wrap{ width:420px; inset-inline-end:-120px; inset-block-start:38%; opacity:.5; }
}

/* ---------- 10. Sectors: the window ---------- */
.sectors{ position:relative; background:var(--paper); }
.sectors__window{
  position:relative; overflow:hidden; display:flex; align-items:flex-end;
  min-height:560px; margin-inline:var(--gutter); border-radius:var(--r-xl);
  background:var(--night); color:#fff;
}
.m-desk .sectors__window, .m-mob .sectors__window{ margin-inline:0; border-radius:0; }
.sectors__img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 58%; }
.sectors__shade{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(13,19,24,.94) 0%, rgba(13,19,24,.62) 48%, rgba(13,19,24,.2) 100%); }
.sectors__pixels{ position:absolute; inset-block-start:0; inset-inline-end:0; width:min(345px, 50vw); height:auto; opacity:.4; pointer-events:none; }
html[dir="rtl"] .sectors__pixels{ transform:scaleX(-1); }
.sectors__content{ position:relative; z-index:1; padding-block:120px 56px; }
.sectors__content .h2{ max-width:16ch; }
html[lang="ar"] .sectors__content .h2{ max-width:18ch; }
.sectors__content .lead{ max-width:600px; }
.sectors__hint{ margin-block:28px 16px; font-size:var(--fs-small); font-weight:600; color:var(--light-blue); }
.chips{ display:flex; flex-wrap:wrap; gap:var(--s-3); max-width:820px; }
.chips li{ flex:1 1 calc(50% - 8px); display:flex; }
.chip{
  display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding-block:10px; padding-inline:16px 18px;
  border:1px solid rgba(191,220,239,.38); border-radius:var(--r-pill); background:rgba(13,19,24,.55);
  color:#fff; font-size:.9375rem; font-weight:600; line-height:1.25; text-decoration:none;
  transition:border-color .2s, background-color .2s;
}
html[lang="ar"] .chip{ line-height:1.5; }
.chip__dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--light-blue); transition:background-color .2s, transform .2s; }
.chip:hover, .chip:focus-visible{ border-color:var(--blue); background-color:rgba(66,148,209,.18); }
.chip:hover .chip__dot, .chip:focus-visible .chip__dot{ background:var(--green); }
.chip:active{ scale:.98; }
@media (min-width:768px){
  .sectors__window{ min-height:600px; }
  .sectors__content{ padding-block-end:56px; }
  .chips li{ flex:0 0 auto; }
  .chip{ width:auto; }
}
/* <1200: the photo is a band at the top of the window and the copy sits on solid night below it
   (the photo is high-key: white walls and shirts), so every line keeps >= 4.5:1 */
@media (max-width:1199px){
  .sectors__window{ --band:min(84vw, 340px); }
  .sectors__img, .sectors__shade{ inset:0 0 auto 0; height:var(--band); }
  /* scale(1.18 -> 1) in the scroll scene grows from the bottom edge, so no unshaded photo hangs below the band */
  .sectors__img{ object-position:50% 30%; transform-origin:50% 100%; }
  .sectors__shade{ background:linear-gradient(0deg, var(--night) 0%, rgba(13,19,24,.9) 14%, rgba(13,19,24,.3) 50%, rgba(13,19,24,.1) 100%); }
  .sectors__content{ padding-block-start:calc(var(--band) - 40px); }
}
@media (min-width:768px) and (max-width:1199px){ .sectors__window{ --band:min(48vw, 460px); } }
@media (min-width:1200px){
  .sectors__window{ min-height:max(640px, 100svh); }
  .sectors__content{ padding-block-end:80px; }
  .sectors__shade{ background:linear-gradient(90deg, rgba(13,19,24,.7) 0%, rgba(13,19,24,0) 60%), linear-gradient(0deg, rgba(13,19,24,.94) 0%, rgba(13,19,24,.62) 48%, rgba(13,19,24,.2) 100%); }
  html[dir="rtl"] .sectors__shade{ background:linear-gradient(270deg, rgba(13,19,24,.7) 0%, rgba(13,19,24,0) 60%), linear-gradient(0deg, rgba(13,19,24,.94) 0%, rgba(13,19,24,.62) 48%, rgba(13,19,24,.2) 100%); }
}

/* ---------- 11. Why ---------- */
.why{ background:var(--paper); overflow-x:clip; }
.why__tone-wrap, .why__tone{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.why__tone{
  background-color:var(--mist);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='63' height='63'%3E%3Cg fill='%234294D1' fill-opacity='.06'%3E%3Crect x='12' y='12' width='39' height='39'/%3E%3Cpath d='M0-5 5 0 0 5-5 0zM63-5l5 5-5 5-5-5zM0 58l5 5-5 5-5-5zM63 58l5 5-5 5-5-5z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:63px 63px;
}
.why__bulb{ position:absolute; z-index:0; inset-inline-end:0; inset-block-start:8%; width:160px; height:auto; opacity:.5; pointer-events:none; }
.why__layout{ position:relative; z-index:1; display:grid; gap:40px; }
.why__head .lead{ max-width:520px; }
.why__grid{ display:grid; gap:12px; }
.proof{
  display:grid; grid-template-columns:56px 1fr; column-gap:16px; row-gap:4px; align-items:start;
  padding:20px; background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:var(--r-tile);
}
.proof__icon{ grid-row:1 / 3; display:grid; place-items:center; width:56px; height:56px; border-radius:var(--r-md); background:#fff; border:1px solid var(--line); transition:translate .3s var(--ease-out); }
.proof__icon img{ width:auto; height:auto; max-width:40px; max-height:40px; }
.proof__glyph{ width:40px; height:40px; fill:none; stroke:var(--blue); stroke-width:2.4; stroke-linejoin:round; }
.proof__glyph-dot{ fill:var(--blue); stroke:none; }
.proof .h3{ font-size:clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height:1.35; }
html[lang="ar"] .proof .h3{ font-size:clamp(1.125rem, 1.05rem + .2vw, 1.25rem); line-height:1.5; }
.proof p{ color:var(--body); font-size:.9375rem; line-height:1.55; }
html[lang="ar"] .proof p{ font-size:1rem; line-height:1.75; }
@media (hover:hover) and (pointer:fine){ .proof:hover .proof__icon{ translate:0 -3px; } }
.trusted{
  display:grid; gap:20px; padding:24px; background:#F9FAFB; border:1px solid var(--line); border-radius:var(--r-lg);
}
.trusted__label{ font-size:var(--fs-small); font-weight:700; color:var(--black); }
.trusted__logos{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:center; justify-items:center; }
.trusted__logos img{ width:auto; height:40px; max-height:64px; filter:grayscale(1); opacity:.75; mix-blend-mode:multiply; transition:filter .3s, opacity .3s; }
@media (hover:hover) and (pointer:fine){ .trusted__logos img:hover{ filter:none; opacity:1; } }
@media (min-width:768px){
  .why__bulb{ width:200px; }
  .why__grid{ grid-template-columns:1fr 1fr; gap:16px; }
  .proof{ grid-template-columns:1fr; row-gap:12px; padding:24px; }
  .proof__icon{ grid-row:auto; }
  .trusted{ padding:24px 32px; }
  .trusted__logos{ grid-template-columns:repeat(6, auto); justify-content:space-between; }
}
@media (min-width:1200px){
  .why__layout{ grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); row-gap:0; align-items:start; }
  .why__head{ grid-column:1 / 6; position:sticky; inset-block-start:calc(var(--header-h) + 48px); }
  .why__grid{ grid-column:7 / 13; grid-template-columns:repeat(2, minmax(0,1fr)); } /* spacer column 6; tiles >= 300px wide */
  .trusted{ grid-column:1 / -1; margin-block-start:72px; grid-template-columns:auto 1fr; align-items:center; column-gap:48px; }
  .trusted__logos img{ height:48px; }
  .why__bulb{ width:220px; }
}

/* ---------- 12. Process: the circuit ---------- */
.process{ background:var(--paper); overflow-x:clip; }
.circuit{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.circuit path{ fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.circuit__base{ stroke:var(--line); }
.circuit__live{ stroke:var(--blue); stroke-dasharray:1; stroke-dashoffset:0; }
.process .container{ position:relative; z-index:1; }
.process__head{ max-width:640px; margin-block-end:56px; }
.psteps{ display:grid; gap:40px; }
.pstep{ position:relative; padding-inline-start:64px; }
.pstep__node{
  position:absolute; inset-inline-start:0; inset-block-start:0;
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:#fff; border:1.5px solid var(--light-blue); color:var(--blue);
  transition:border-color .3s;
}
.pstep__node .pw{ width:20px; height:20px; }
.pstep__node::after{
  content:""; position:absolute; inset-block-start:-1px; inset-inline-end:-1px; width:8px; height:8px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 2px #fff; opacity:0; transform:scale(.4); transition:opacity .3s, transform .3s var(--ease-out);
}
.pstep__node.is-on{ border-color:var(--blue); }
.pstep__node.is-on::after{ opacity:1; transform:none; }
.pstep__num{ position:relative; display:block; font-family:var(--font-num); font-weight:500; font-size:4rem; line-height:1; direction:ltr; unicode-bidi:isolate; text-align:start; }
html[dir="rtl"] .pstep__num{ text-align:end; }
.pstep__num-base{ color:var(--light-blue); }
.pstep__num-on{ position:absolute; inset:0; color:var(--blue); opacity:0; }
.pstep .h3{ margin-block:16px 10px; }
.pstep p{ color:var(--body); max-width:360px; }
/* default (no JS / reduced): every node is on */
html:not(.m-desk):not(.m-mob) .pstep__node{ border-color:var(--blue); }
html:not(.m-desk):not(.m-mob) .pstep__node::after{ opacity:1; transform:none; }
html:not(.m-desk):not(.m-mob) .pstep__num-on{ opacity:1; }
@media (min-width:768px){
  .psteps{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--col-gap); }
  .pstep{ padding-inline-start:0; padding-block-start:72px; }
  .pstep__num{ font-size:4.5rem; }
}
@media (min-width:1200px){
  .process__head{ margin-block-end:72px; }
  .pstep__num{ font-size:var(--fs-num); }
}

/* ---------- 13. Assessment ---------- */
.assess{ position:relative; overflow-x:clip; background:var(--night); color:#fff; padding-block:var(--section-y); }
.assess__veil{ display:none; }
.m-desk .assess__veil, .m-mob .assess__veil{
  display:grid; position:absolute; inset-block-start:0; inset-inline:0; height:100lvh; z-index:3; pointer-events:none; overflow:hidden;
}
.veil-cell{ background:var(--paper); margin:-1px; }
.assess__veil.is-active .veil-cell{ will-change:transform; }
.veil-sheet{ position:absolute; inset:0; background:var(--paper); }
.assess__spot{
  --spot-x:50%; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at var(--spot-x) 50%, rgba(66,148,209,.2), rgba(66,148,209,0) 70%);
}
.assess__arcs{
  position:absolute; z-index:0; inset-inline-start:0; inset-block-start:50%; translate:0 -50%;
  display:grid; align-items:center; justify-items:end; opacity:.12; pointer-events:none;
}
.assess__arcs img{ grid-area:1 / 1; width:auto; }
.assess__arcs img:nth-child(1){ height:318px; }
.assess__arcs img:nth-child(2){ height:239px; margin-inline-end:30px; }
.assess__arcs img:nth-child(3){ height:140px; margin-inline-end:60px; }
html[dir="rtl"] .assess__arcs{ transform:scaleX(-1); }
.assess__grid{ position:relative; z-index:1; display:grid; gap:32px; }
.assess__copy .lead{ max-width:520px; }
.checks{ display:grid; gap:var(--s-3); }
.checks li{ display:flex; align-items:flex-start; gap:12px; font-size:1rem; font-weight:600; color:#fff; }
.checks .pw{ flex:none; width:20px; height:20px; margin-block-start:.15em; color:var(--green); }
html[lang="ar"] .checks .pw{ margin-block-start:.35em; }
.assess__formwrap{ position:relative; }
.assess__ring{
  position:absolute; z-index:0; inset-block-start:50%; inset-inline-start:0; width:440px; height:440px;
  transform:translate(calc(-50% * var(--dir)), -50%); overflow:visible; pointer-events:none; display:none;
}
html[dir="rtl"] .assess__ring{ scale:-1 1; }
.ring__track, .ring__live{ fill:none; vector-effect:non-scaling-stroke; }
.ring__track{ stroke:rgba(191,220,239,.12); stroke-width:1.5; }
.ring__live{ stroke:var(--blue); stroke-width:2; stroke-dasharray:1; stroke-dashoffset:0; stroke-linecap:round; }
.ring__live.is-done{ stroke:var(--green); }
.form-card{ position:relative; z-index:1; padding:20px; border-radius:24px; background:#fff; color:var(--body); box-shadow:var(--shadow-form); }
/* the white card is a light surface inside a dark section: plain green button, no on-dark glow */
#form-card .cta{ box-shadow:none; }
@media (hover:hover) and (pointer:fine){ #form-card .cta:hover{ box-shadow:0 0 0 4px rgba(122,183,52,.28); } }
.form-card__title{ outline:none; }
.form-card__note{ margin-block:6px 20px; font-size:var(--fs-small); color:var(--body); }
.form-noscript{ margin-block-end:16px; padding:14px 16px; border-radius:var(--r-md); background:var(--mist); color:var(--black); font-weight:600; }
@media (min-width:768px){
  .assess__ring{ display:block; }
  .assess__grid{ gap:40px; }
  .assess__copy{ grid-row:1; }
  .checks{ grid-row:2; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
  .assess__formwrap{ grid-row:3; justify-self:center; width:100%; max-width:640px; }
  .form-card{ padding:40px; }
}
@media (min-width:1200px){
  .assess{ padding-block:144px 160px; }
  .assess__spot{ --spot-x:72%; }
  html[dir="rtl"] .assess__spot{ --spot-x:28%; }
  .assess__grid{ grid-template-columns:repeat(12, minmax(0,1fr)); grid-template-rows:auto 1fr; column-gap:var(--col-gap); row-gap:40px; align-items:start; }
  .assess__copy{ grid-column:1 / 6; grid-row:1; max-width:460px; padding-block-start:24px; }
  .checks{ grid-column:1 / 6; grid-row:2; grid-template-columns:1fr; align-self:start; }
  .assess__formwrap{ grid-column:7 / 13; grid-row:1 / 3; max-width:560px; justify-self:end; }
}

/* Form */
.form{ display:grid; gap:18px; }
.form__pair{ display:grid; gap:18px; }
.field{ display:grid; gap:6px; min-width:0; }
.field__label{ font-size:.9375rem; font-weight:700; color:var(--black); }
.optional{ font-weight:500; color:var(--body); }
.field__input{
  width:100%; min-height:48px; padding:11px 14px; border:1px solid var(--field-border); border-radius:12px;
  background:#fff; color:var(--black); font-size:1rem; font-weight:500; line-height:1.4;
  transition:border-color .2s, box-shadow .2s; -webkit-appearance:none; appearance:none;
}
html[lang="ar"] .field__input{ font-size:1.0625rem; }
.field__input::placeholder{ color:#6B757C; opacity:1; }
.field__input:focus{ outline:none; border-color:var(--blue-text); box-shadow:0 0 0 2px var(--blue-text); }
.field__input[aria-invalid="true"]{ border-color:var(--error); }
.field__input[aria-invalid="true"]:focus{ box-shadow:0 0 0 2px var(--error); }
.field__input[readonly]{ background:#F4F6F8; }
.field__textarea{ min-height:96px; resize:vertical; }
.field__hint{ font-size:.8125rem; color:var(--body); }
html[lang="ar"] .field__hint{ font-size:.875rem; }
.field__hint--soft:empty{ display:none; }
.field__hint--soft{ color:var(--blue-text); font-weight:600; }
.field__error{ display:flex; align-items:flex-start; gap:6px; font-size:.875rem; font-weight:600; color:var(--error); }
.field__error:empty{ display:none; }
.field__error::before{
  content:""; flex:none; width:16px; height:16px; margin-block-start:.15em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23B42318'/%3E%3Cpath d='M8 4.5v4.2' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.3' r='.95' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}
.phone{ display:flex; align-items:stretch; }
.phone__prefix{
  display:flex; align-items:center; padding-inline:14px 12px; border:1px solid var(--field-border); border-inline-end:0;
  border-radius:12px 0 0 12px; background:var(--mist); color:var(--black); font-weight:700; font-size:1rem;
}
.phone__input{ border-radius:0 12px 12px 0; text-align:left; }
html[dir="rtl"] .phone__input{ text-align:left; }
.select{ position:relative; }
/* a down chevron is direction-neutral: physical borders, so RTL does not turn it sideways */
.select::after{
  content:""; position:absolute; inset-inline-end:16px; inset-block-start:50%; width:10px; height:10px; margin-block-start:-7px;
  border-right:2px solid var(--black); border-bottom:2px solid var(--black); transform:rotate(45deg); pointer-events:none;
}
.select__input{ padding-inline-end:44px; cursor:pointer; }
.consent{ display:flex; align-items:flex-start; gap:12px; min-height:44px; }
.consent__box{
  flex:none; width:24px; height:24px; margin:1px 0 0; accent-color:var(--green-cta); cursor:pointer;
}
.consent__box[aria-invalid="true"]{ outline:2px solid var(--error); outline-offset:2px; }
.consent__label{ font-size:.875rem; line-height:1.55; color:var(--body); cursor:pointer; }
html[lang="ar"] .consent__label{ font-size:.9375rem; line-height:1.75; }
.privacy{ margin-block-start:4px; font-size:.875rem; color:var(--body); }
.privacy summary{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; font-weight:700; color:var(--blue-text); list-style:none;
}
.privacy summary::-webkit-details-marker{ display:none; }
.privacy summary::before{
  content:""; width:7px; height:7px; border-inline-end:2px solid currentColor; border-block-end:2px solid currentColor;
  transform:rotate(calc(-45deg * var(--dir))); transition:transform .2s;
}
.privacy[open] summary::before{ transform:rotate(calc(45deg * var(--dir))); } /* points down in both directions */
.privacy p{ padding-block-end:4px; line-height:1.6; }
.hp{ position:absolute !important; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden; }
.form__alert:empty{ display:none; }
.form__alert{ padding:12px 14px; border-radius:var(--r-md); background:#FEF3F2; border:1px solid #FECDCA; color:var(--error); font-weight:600; font-size:.9375rem; }
.form__submit{ margin-block-start:4px; }
.form-reassure{ text-align:center; font-size:var(--fs-small); color:var(--body); }
.form-success{ display:grid; justify-items:center; gap:14px; padding-block:24px 8px; text-align:center; outline:none; }
.form-success .pw{ width:64px; height:64px; color:var(--blue); }
.form-success .pw.is-done{ color:var(--green-cta); }
.form-success__title{ font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:700; color:var(--black); }
.form-success p{ max-width:400px; color:var(--body); }
@media (min-width:560px){
  .form__pair{ grid-template-columns:1fr 1fr; }
}

/* ---------- 14. Footer ---------- */
.site-footer{ position:relative; overflow:clip; background:var(--charcoal); color:var(--muted-dark); padding-block:80px 32px; }
.site-footer::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:120px; pointer-events:none; background:linear-gradient(var(--night), rgba(38,42,45,0)); }
/* desktop: the page lifts off the footer like a curtain (main paints over the sticky footer) */
.m-desk main{ position:relative; z-index:1; }
.m-desk .site-footer{ position:sticky; inset-block-end:0; z-index:0; }
.m-desk .site-footer::before{ background:linear-gradient(var(--night-2), rgba(38,42,45,0)); } /* the lifting edge reads */
.footer__waves{ position:absolute; inset-block-start:0; inset-inline:0; width:100%; height:auto; opacity:.14; pointer-events:none; }
.footer__grid{ position:relative; display:grid; gap:40px; }
.footer__logo{ width:auto; height:56px; }
.footer__tagline{ margin-block:20px 10px; color:#fff; font-weight:700; font-size:1.125rem; }
.footer__blurb{ max-width:440px; font-size:.9375rem; line-height:1.65; }
.footer__title{ margin-block-end:16px; color:#fff; font-size:1.125rem; font-weight:700; }
.footer__contact ul{ display:grid; gap:6px; }
.footer__contact li{ display:flex; align-items:center; gap:12px; min-height:44px; }
.footer__icon{ display:grid; place-items:center; flex:none; width:20px; height:20px; }
.footer__icon img{ width:auto; height:auto; max-width:20px; max-height:20px; }
.footer__contact a{ color:#fff; text-decoration:none; font-weight:600; unicode-bidi:isolate; border-radius:4px; }
@media (hover:hover){ .footer__contact a:hover{ text-decoration:underline; text-underline-offset:4px; } }
.footer__vision img{ width:120px; height:auto; opacity:.9; }
.footer__bottom{ position:relative; margin-block-start:48px; padding-block-start:24px; border-block-start:1px solid rgba(255,255,255,.08); font-size:var(--fs-small); }
@media (max-width:767px){ .site-footer{ padding-block-end:calc(96px + env(safe-area-inset-bottom)); } }
@media (min-width:768px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
  .footer__vision{ justify-self:end; align-self:center; }
  .footer__vision img{ width:160px; }
}
@media (min-width:1200px){
  .footer__grid{ grid-template-columns:5fr 4fr 3fr; }
  .footer__brand{ grid-column:auto; }
}

/* ---------- 15. Mobile CTA bar + blackout veil ---------- */
.mbar{
  position:fixed; z-index:49; inset-inline:0; inset-block-end:0; display:none;
  padding:8px 16px calc(8px + env(safe-area-inset-bottom));
  background:rgba(13,19,24,.94); border-block-start:1px solid var(--night-line);
  --focus:var(--focus-dark);
  transform:translateY(100%); visibility:hidden;
  transition:transform .3s cubic-bezier(.55,.085,.68,.53), visibility 0s linear .3s;
}
.mbar.is-shown{ transform:none; visibility:visible; transition:transform .4s cubic-bezier(.215,.61,.355,1), visibility 0s; }
.mbar .cta{ --cta-h:52px; box-shadow:none; }
@media (max-width:767px){ .mbar{ display:block; } }
@media (max-height:480px){
  .mbar{ padding-block:4px calc(4px + env(safe-area-inset-bottom)); }
  .mbar .cta{ --cta-h:44px; }
}
.veil{ position:fixed; inset:0; z-index:90; background:var(--night); opacity:0; visibility:hidden; pointer-events:none; }

/* ---------- 16. Pre-animation states (JS + intro only) ---------- */
.js.intro [data-intro], .js.intro [data-intro-title]{ opacity:0; }
.js.intro .site-header{ transform:translateY(-100%); }
.js.intro .hero .cta .pw__arc{ stroke-dashoffset:1; }

/* ---------- 17. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.2s !important; scroll-behavior:auto !important; }
  .hero__scroll{ display:none !important; }
  .cta.is-loading .pw{ animation:none; }
  .pulse-dot.is-live{ animation:none; }
  .mbar, .mbar.is-shown{ transform:none; transition:opacity .2s, visibility 0s linear .2s; opacity:0; }
  .mbar.is-shown{ opacity:1; transition:opacity .2s, visibility 0s; }
  .card:hover{ translate:none; }
  .why__tone{ opacity:1; }
}

/* ---------- 18. Print ---------- */
@media print{
  html, body{ background:#fff !important; }
  .site-header, .mbar, .veil, .skip-link, .hero__glyph, .hero__bloom, .hero__scroll, .assess__veil, .assess__ring, .circuit, .footer__waves, .caps__gear-wrap, .why__bulb, .systems__led{ display:none !important; }
  .hero, .systems, .assess, .site-footer{ background:#fff !important; color:#000 !important; }
  .hero__frame{ position:relative; height:240px; }
  .display, .h2, .h2--on-dark, .step__title, .lead--on-dark, .step__body, .checks li{ color:#000 !important; }
  [data-intro], [data-intro-title], .step, .form-card{ opacity:1 !important; transform:none !important; }
  .systems__day{ clip-path:none !important; }
  .sectors__window{ clip-path:none !important; }
}