/* ==========================================================================
   ASG — base.css
   Tokens (fallbacks; real values printed by dynamic-css.php), reset, typography,
   buttons, eyebrow, glass primitives, animation engine, utilities.
   Loaded on every view. Logical properties only (RTL/LTR mirror for free).
   ========================================================================== */

/* ------------------------------------------------------------ Tokens */
:root{
	--asg-primary:#226098;--asg-primary-rgb:34,96,152;--asg-primary-dark:#1b4d7a;--asg-primary-soft:#e9eff5;
	--asg-accent:#99DEF9;--asg-accent-rgb:153,222,249;--asg-bright:#009EE3;
	--asg-dark:#0B0E12;--asg-dark-rgb:11,14,18;--asg-ink:#15202B;--asg-ink-rgb:21,32,43;
	--asg-body:#4A5764;--asg-mute:#7C8894;--asg-bg:#fff;--asg-bg-soft:#F2F7FB;--asg-line:#E2EAF1;
	--asg-container:1240px;--asg-radius:10px;--asg-fs-base:16px;--asg-h-weight:500;
	--asg-h1:clamp(2.1rem,1.3rem + 2.8vw,3rem);--asg-h2:clamp(1.7rem,1.25rem + 1.6vw,2.375rem);--asg-h3:clamp(1.35rem,1.15rem + .8vw,1.625rem);
	--asg-h4:1.25rem;--asg-h5:1.1rem;--asg-h6:1rem;
	--asg-logo-h:46px;--asg-logo-h-m:38px;--asg-banner-h:380px;--asg-banner-h-m:280px;--asg-banner-overlay:.7;
	--asg-anim-dur:1000ms;--asg-anim-dist:28px;--asg-anim-stagger:90ms;
	--asg-ease:cubic-bezier(.2,.7,.2,1);

	/* Derived */
	--asg-font-h:'Alexandria','IBM Plex Sans Arabic',system-ui,sans-serif;
	--asg-font-b:'IBM Plex Sans Arabic','Alexandria',system-ui,sans-serif;
	--asg-gutter:clamp(16px,4vw,40px);
	--asg-space-section:clamp(64px,8vw,104px);
	--asg-shadow-s:0 6px 18px -10px rgba(var(--asg-ink-rgb),.25);
	--asg-shadow-m:0 26px 50px -30px rgba(var(--asg-ink-rgb),.35);
	--asg-shadow-l:0 50px 80px -45px rgba(var(--asg-ink-rgb),.45);
	--asg-header-h:90px;
	--asg-top-h:42px;
}

/* ------------------------------------------------------------ Reset */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--asg-bg);color:var(--asg-body);font-family:var(--asg-font-b);font-size:var(--asg-fs-base);line-height:1.85;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
img,svg,video{max-inline-size:100%;block-size:auto;display:block}
svg{flex:none}
a{color:inherit;text-decoration:none;transition:color .3s}
p{margin:0 0 1em}
p:last-child{margin-block-end:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--asg-bright);outline-offset:3px;border-radius:4px}
::selection{background:rgba(var(--asg-accent-rgb),.55);color:var(--asg-ink)}
[hidden]{display:none!important}
.screen-reader-text{position:absolute!important;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed!important;inset-block-start:10px;inset-inline-start:10px;inline-size:auto;block-size:auto;clip:auto;z-index:100000;background:#fff;color:var(--asg-ink);padding:12px 18px;border-radius:6px}

/* ------------------------------------------------------------ Typography */
h1,h2,h3,h4,h5,h6{font-family:var(--asg-font-h);font-weight:var(--asg-h-weight);color:var(--asg-ink);line-height:1.4;margin:0 0 .5em;letter-spacing:0}
h1{font-size:var(--asg-h1)}h2{font-size:var(--asg-h2)}h3{font-size:var(--asg-h3)}h4{font-size:var(--asg-h4)}h5{font-size:var(--asg-h5)}h6{font-size:var(--asg-h6)}
.asg-dark h1,.asg-dark h2,.asg-dark h3,.asg-dark h4{color:#fff}
[dir="ltr"] .asg-en,.asg-en{font-family:'Alexandria',sans-serif}

/* ------------------------------------------------------------ Layout */
.asg-wrap{inline-size:100%;max-inline-size:calc(var(--asg-container) + var(--asg-gutter) * 2);margin-inline:auto;padding-inline:var(--asg-gutter);position:relative}
.asg-wrap--narrow{max-inline-size:calc(860px + var(--asg-gutter) * 2)}
.asg-sec{padding-block:var(--asg-space-section);position:relative}
.asg-soft{background:var(--asg-bg-soft)}
.asg-dark{background:var(--asg-dark);color:rgba(255,255,255,.66);position:relative;isolation:isolate}
.asg-center{display:flex;justify-content:center;margin-block-start:48px}

/* ------------------------------------------------------------ Eyebrow + section head */
.asg-eyebrow{unicode-bidi:plaintext;display:inline-flex;align-items:center;gap:12px;font-family:var(--asg-font-h);font-size:13px;font-weight:500;color:var(--asg-primary);line-height:1.4}
.asg-eyebrow::before{content:"";inline-size:28px;block-size:1px;background:currentColor;flex:none}
.asg-eyebrow--ice{color:var(--asg-accent)}
.asg-title{font-size:var(--asg-h2);line-height:1.45;margin:0}
.asg-title em,.asg-cta__title em{font-style:normal;color:var(--asg-primary)}
.asg-dark .asg-title em{color:var(--asg-accent)}
.asg-lead{font-size:1rem;line-height:1.95;color:var(--asg-body);margin:0}
.asg-lead--sm{font-size:.95rem}
.asg-dark .asg-lead{color:rgba(255,255,255,.62)}
.asg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-block-end:52px}
.asg-head__txt{display:flex;flex-direction:column;gap:14px;max-inline-size:680px}
.asg-head__aside{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-inline-size:420px}

/* ------------------------------------------------------------ Buttons */
.asg-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-block-size:50px;padding:0 26px;border-radius:6px;border:1px solid transparent;font-family:var(--asg-font-h);font-size:14.5px;font-weight:400;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background .35s,border-color .35s,color .35s,transform .35s var(--asg-ease),box-shadow .35s}
.asg-btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--asg-ease);pointer-events:none}
.asg-btn:hover::after{transform:translateX(120%)}
.asg-btn .asg-ico{transition:transform .35s var(--asg-ease)}
.asg-btn:hover .asg-ico.asg-flip{transform:translateX(4px)}
.asg-btn--primary{background:var(--asg-primary);color:#fff;box-shadow:0 10px 26px -14px rgba(var(--asg-primary-rgb),.8)}
.asg-btn--primary:hover{background:var(--asg-primary-dark);transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(var(--asg-primary-rgb),.8)}
.asg-btn--ice{background:var(--asg-accent);color:#07121C}
.asg-btn--ice:hover{background:#b9e9fb;transform:translateY(-2px);box-shadow:0 16px 36px -16px rgba(var(--asg-accent-rgb),.7)}
.asg-btn--ghost{border-color:rgba(255,255,255,.26);color:#fff;background:rgba(255,255,255,.03)}
.asg-btn--ghost:hover{border-color:var(--asg-accent);color:var(--asg-accent);background:rgba(var(--asg-accent-rgb),.08)}
.asg-btn--line{border-color:var(--asg-line);color:var(--asg-ink);background:#fff}
.asg-btn--line:hover{border-color:var(--asg-primary);color:var(--asg-primary)}
.asg-btn--wa{background:#1FAF5A;color:#fff}
.asg-btn--wa:hover{background:#17964c;transform:translateY(-2px)}
.asg-btn--sm{min-block-size:42px;padding:0 18px;font-size:14px}
.asg-btn--block{inline-size:100%}
.asg-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--asg-font-h);font-size:14.5px;color:var(--asg-primary);position:relative;padding-block-end:6px;line-height:1.4}
.asg-link::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;inline-size:100%;block-size:1px;background:currentColor;transform-origin:var(--asg-origin-start,left);transition:transform .45s var(--asg-ease)}
.asg-link:hover::after{transform:scaleX(.35)}
.asg-link .asg-ico{transition:transform .35s var(--asg-ease)}
.asg-link:hover .asg-ico.asg-flip{transform:translateX(5px)}
.asg-dark .asg-link{color:var(--asg-accent)}

/* Chips / pills / tags */
.asg-chips{display:flex;flex-wrap:wrap;gap:8px}
.asg-chip{display:inline-flex;align-items:center;min-block-size:32px;padding:0 14px;border-radius:30px;border:1px solid rgba(var(--asg-accent-rgb),.3);color:var(--asg-accent);background:rgba(var(--asg-accent-rgb),.06);font-family:var(--asg-font-h);font-size:13px}
.asg-pill{min-block-size:40px;padding:0 18px;border-radius:30px;border:1px solid var(--asg-line);background:#fff;font-family:var(--asg-font-h);font-size:13.5px;font-weight:300;color:var(--asg-body);display:inline-flex;align-items:center;gap:8px;transition:all .35s}
.asg-pill:hover{border-color:var(--asg-primary);color:var(--asg-primary)}
.asg-pill.is-active{background:var(--asg-ink);border-color:var(--asg-ink);color:#fff}
.asg-filt{display:flex;flex-wrap:wrap;gap:8px}
.asg-tag{position:absolute;inset-block-start:16px;inset-inline-start:16px;z-index:2;min-block-size:28px;padding:0 12px;border-radius:30px;background:rgba(255,255,255,.92);color:var(--asg-primary);font-family:var(--asg-font-h);font-size:12px;display:inline-flex;align-items:center}

/* ------------------------------------------------------------ Glass primitives */
.asg-gridbg{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px);background-size:124px 100%;background-position:center}
.asg-gridbg--fine{z-index:0;background-image:linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px);background-size:62px 62px}
.asg-pane{position:absolute;display:block;border:1px solid rgba(var(--asg-accent-rgb),.32);background:linear-gradient(140deg,rgba(255,255,255,.16) 0%,rgba(var(--asg-accent-rgb),.06) 38%,rgba(255,255,255,.015) 70%,rgba(var(--asg-accent-rgb),.08) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 80px rgba(var(--asg-accent-rgb),.06),0 40px 80px -30px rgba(0,0,0,.6);overflow:hidden;border-radius:3px}
.asg-pane::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:2px;background:linear-gradient(180deg,rgba(var(--asg-accent-rgb),0),rgba(var(--asg-accent-rgb),.95),rgba(var(--asg-accent-rgb),0))}
.asg-pane::after{content:"";position:absolute;inset:-40%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);animation:asg-sweep 7s cubic-bezier(.4,0,.2,1) infinite}
.asg-pane--d2::after{animation-delay:1.2s}
.asg-pane--d3::after{animation-delay:2.4s}
.asg-no-sheen .asg-pane::after{display:none}
.asg-arc{position:absolute;display:block;border-radius:50%;border:1.5px solid transparent;pointer-events:none}
.asg-glass-chip{display:inline-flex;align-items:center;gap:12px;padding:14px 18px;border-radius:10px;background:rgba(10,20,30,.55);border:1px solid rgba(var(--asg-accent-rgb),.25);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:rgba(255,255,255,.85);font-family:var(--asg-font-h);font-size:13px;box-shadow:0 30px 60px -25px rgba(0,0,0,.5)}
.asg-glass-chip__i{inline-size:42px;block-size:42px;border-radius:8px;background:rgba(var(--asg-accent-rgb),.12);color:var(--asg-accent);display:flex;align-items:center;justify-content:center}
.asg-glass-chip__t{display:flex;flex-direction:column;line-height:1.5}
.asg-glass-chip__t b{font-weight:500;color:#fff;font-size:14px}
.asg-glass-chip__t small{font-size:12px;color:rgba(255,255,255,.55);font-family:'Alexandria',sans-serif}
.asg-dot{inline-size:9px;block-size:9px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 5px rgba(61,220,132,.18);flex:none}
.asg-glass-card{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.95);border-radius:var(--asg-radius);box-shadow:0 30px 60px -20px rgba(16,40,64,.35)}

/* Media + branded placeholder */
.asg-media{position:absolute;inset:0;overflow:hidden}
.asg-media img,.asg-media__img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform 1.2s var(--asg-ease)}
.asg-ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,#20374C 0%,#122131 55%,#0C151F 100%)}
.asg-ph::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(118deg,transparent 0 58px,rgba(var(--asg-accent-rgb),.07) 58px 59px),radial-gradient(500px 300px at 80% 10%,rgba(var(--asg-accent-rgb),.22),transparent 70%)}
.asg-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);transform:translateX(100%);transition:transform 1.1s var(--asg-ease)}
.asg-ph--light{background:linear-gradient(155deg,#E4EEF6 0%,#CFDFEC 60%,#BFD3E3 100%)}
.asg-ph--light::before{background:repeating-linear-gradient(118deg,transparent 0 58px,rgba(var(--asg-primary-rgb),.07) 58px 59px),radial-gradient(500px 300px at 80% 10%,rgba(255,255,255,.7),transparent 70%)}
.asg-ph .asg-ph__m{position:relative;z-index:1;inline-size:84px;block-size:auto;object-fit:contain;opacity:.1;filter:grayscale(1) brightness(2.2)}
.asg-ph--light .asg-ph__m{filter:none;opacity:.16}
.asg-head__aside:has(.asg-filt){max-inline-size:none}

/* ------------------------------------------------------------ Icons */
.asg-ico{display:inline-block;vertical-align:middle}
.asg-rot180{transform:rotate(180deg)}

/* ------------------------------------------------------------ Keyframes */
@keyframes asg-sweep{0%{transform:translateX(70%)}45%,100%{transform:translateX(-70%)}}
@keyframes asg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes asg-float2{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
@keyframes asg-spin{to{transform:rotate(360deg)}}
@keyframes asg-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes asg-pulse{0%{box-shadow:0 0 0 0 rgba(31,175,90,.5)}70%{box-shadow:0 0 0 16px rgba(31,175,90,0)}100%{box-shadow:0 0 0 0 rgba(31,175,90,0)}}

/* Load-in (hero / banner) */
.asg-in{animation:asg-up 1.1s var(--asg-ease) both}
.asg-d1{animation-delay:.12s}.asg-d2{animation-delay:.24s}.asg-d3{animation-delay:.36s}.asg-d4{animation-delay:.5s}

/* ------------------------------------------------------------ Scroll animation engine */
.asg-anim-on [data-asg-anim]{opacity:0;transition:opacity var(--asg-anim-dur) var(--asg-ease),transform var(--asg-anim-dur) var(--asg-ease),filter var(--asg-anim-dur) var(--asg-ease),clip-path calc(var(--asg-anim-dur) * 1.2) var(--asg-ease);transition-delay:var(--asg-delay,0ms);will-change:opacity,transform}
.asg-anim-on [data-asg-anim="up"]{transform:translateY(var(--asg-anim-dist))}
.asg-anim-on [data-asg-anim="down"]{transform:translateY(calc(var(--asg-anim-dist) * -1))}
.asg-anim-on [data-asg-anim="start"]{transform:translateX(calc(var(--asg-anim-dist) * var(--asg-dir,1) * -1))}
.asg-anim-on [data-asg-anim="end"]{transform:translateX(calc(var(--asg-anim-dist) * var(--asg-dir,1)))}
.asg-anim-on [data-asg-anim="zoom"]{transform:scale(.96)}
.asg-anim-on [data-asg-anim="blur"]{filter:blur(10px)}
.asg-anim-on [data-asg-anim="reveal"]{opacity:1}
.asg-anim-on [data-asg-anim="reveal"] > *{clip-path:inset(0 0 100% 0);transition:clip-path calc(var(--asg-anim-dur) * 1.3) var(--asg-ease);transition-delay:var(--asg-delay,0ms)}
.asg-anim-on [data-asg-anim="reveal"] > *:nth-child(2){transition-delay:calc(var(--asg-delay,0ms) + 180ms)}
.asg-anim-on [data-asg-anim="reveal"] > *:nth-child(n+3){transition-delay:calc(var(--asg-delay,0ms) + 360ms)}
/* End states never clip: overhanging cards and shadows stay visible */
.asg-anim-on [data-asg-anim="reveal"].asg-in-view > *{clip-path:inset(-80px -80px -80px -80px)}
.asg-anim-on [data-asg-anim].asg-in-view{opacity:1;transform:none;filter:none;clip-path:none}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
	.asg-anim-on [data-asg-anim],.asg-anim-on [data-asg-anim] > *{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
}
.no-js .asg-anim-on [data-asg-anim],.asg-anim-on.asg-anim-off [data-asg-anim],.no-js .asg-anim-on [data-asg-anim] > *,.asg-anim-on.asg-anim-off [data-asg-anim] > *{opacity:1;transform:none;clip-path:none;filter:none}

/* ------------------------------------------------------------ Prose */
.asg-prose{color:var(--asg-body);font-size:1.02rem}
.asg-prose h2{font-size:var(--asg-h3);margin-block:1.6em .6em}
.asg-prose h3{font-size:var(--asg-h4);margin-block:1.4em .5em}
.asg-prose a{color:var(--asg-primary);text-decoration:underline;text-underline-offset:3px}
.asg-prose ul,.asg-prose ol{padding-inline-start:1.3em;margin-block-end:1em}
.asg-prose ul{list-style:disc}.asg-prose ol{list-style:decimal}
.asg-prose img{border-radius:var(--asg-radius)}
.asg-prose__cover{margin:0 0 32px;border-radius:var(--asg-radius);overflow:hidden}
.asg-prose blockquote{margin:1.5em 0;padding:18px 24px;border-inline-start:3px solid var(--asg-accent);background:var(--asg-bg-soft);border-radius:0 var(--asg-radius) var(--asg-radius) 0}

/* ------------------------------------------------------------ Utilities */
.asg-hide-m{}
@media (max-width:1024px){.asg-hide-m{display:none!important}}

/* ==========================================================================
   Latin (LTR) typography — Arabic metrics are taller, English reads tighter
   ========================================================================== */
[dir="ltr"] body{line-height:1.7}
[dir="ltr"] p{line-height:1.7}
[dir="ltr"] h1,[dir="ltr"] h2,[dir="ltr"] h3,[dir="ltr"] h4,[dir="ltr"] h5,[dir="ltr"] h6{line-height:1.28;letter-spacing:-.01em}
[dir="ltr"] .asg-hero__title{line-height:1.16;letter-spacing:-.022em}
[dir="ltr"] .asg-title,[dir="ltr"] .asg-ban__title,[dir="ltr"] .asg-cta__title{line-height:1.22;letter-spacing:-.018em}