/* mmasoudi.com — a compliance dossier.
   Three arches (the three lines of defence) frame the person, services are file tabs,
   the career is a to-scale timeline. Dark-first; light theme via prefers-color-scheme or [data-theme]. */
:root{
  --bg:#0A1A33; --panel:#11264A; --deep:#06111F;
  --gold:#D4AF37; --gold-2:#EBD38A; --text:#F5EFDD; --on-gold:#0A1A33;
  --mute:rgba(245,239,221,.72); --faint:rgba(245,239,221,.08); --line:rgba(212,175,55,.26);
  --hdr:rgba(10,26,51,.86); --band:rgba(6,17,31,.84); --glow:rgba(22,58,110,.7); --shadow:rgba(0,0,0,.5);
  --ins:#C9A227; --fin:#7FA7FF; --spo:#3BC9A0; --edu:#F0A07A;
  --net-node:#D4AF37; --net-line:#F5EFDD; --net-text:#EBD38A; --net-pulse:#FFE7A0; --net-alpha:.42;
  --f:"Tajawal",Tahoma,"Segoe UI",sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#F7F3E9; --panel:#FFFFFF; --deep:#EFE8D6;
  /* MM-2: الذهبي أغمق لتباين AA على الكريمية (3.17 → 5.06)؛ الرمادي mute ‎.74 يحقق 6.99 فبقي */
  --gold:#80640F; --gold-2:#7D6214; --text:#0E1B33;
  --mute:rgba(14,27,51,.74); --faint:rgba(14,27,51,.05); --line:rgba(168,132,26,.34);
  --hdr:rgba(247,243,233,.88); --band:rgba(239,232,214,.92); --glow:rgba(168,132,26,.16); --shadow:rgba(14,27,51,.18);
  --ins:#A8841A; --fin:#3E6FD8; --spo:#14946F; --edu:#C2603F;
  --net-node:#A8841A; --net-line:#0E1B33; --net-text:#7D6214; --net-pulse:#C9A227; --net-alpha:.24;
  color-scheme:light}}
:root[data-theme="light"]{
  --bg:#F7F3E9; --panel:#FFFFFF; --deep:#EFE8D6;
  --gold:#80640F; --gold-2:#7D6214; --text:#0E1B33;
  --mute:rgba(14,27,51,.74); --faint:rgba(14,27,51,.05); --line:rgba(168,132,26,.34);
  --hdr:rgba(247,243,233,.88); --band:rgba(239,232,214,.92); --glow:rgba(168,132,26,.16); --shadow:rgba(14,27,51,.18);
  --ins:#A8841A; --fin:#3E6FD8; --spo:#14946F; --edu:#C2603F;
  --net-node:#A8841A; --net-line:#0E1B33; --net-text:#7D6214; --net-pulse:#C9A227; --net-alpha:.24;
  color-scheme:light}
/* DS-2: سلّم مقاسات الخط والمسافات · DS-3: لغة الحركة (ثلاث مدد، منحنى واحد) — المصدر design-system/tokens.json */
:root{
  --t-1:12px; --t-2:13.5px; --t-3:15px; --t-4:16.5px; --t-5:18px; --t-6:22px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:40px;
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:.15s; --t-base:.25s; --t-slow:.45s;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f);font-size:17px;line-height:1.8;overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
h1,h2,h3{margin:0;line-height:1.25;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{max-width:1160px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:13px;font-weight:700;color:var(--gold-2);letter-spacing:.05em}
.h2{font-size:clamp(28px,3.8vw,42px);font-weight:900}
.sub{color:var(--mute);max-width:62ch;margin-top:10px}
section{scroll-margin-top:72px}
#net{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}
main,footer,.stg{position:relative;z-index:1}
.stg{background:#b45309;color:#fff;font:700 12px/24px system-ui;text-align:center;letter-spacing:.06em}

/* header */
header.top{position:sticky;top:0;z-index:20;background:var(--hdr);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:var(--sp-3);padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px;text-decoration:none;white-space:nowrap}
.brand img{width:32px;height:32px;border-radius:8px;flex:none}
.brand span{color:var(--gold)}
.top nav{display:flex;gap:2px;margin-inline-start:auto;flex-wrap:wrap}
.top nav a{text-decoration:none;color:var(--mute);font-size:var(--t-3);padding:6px 10px;border-radius:8px}
.top nav a:hover{color:var(--text);background:var(--faint)}
.tools{display:flex;gap:6px;align-items:center}
.ic-btn{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;text-decoration:none;font-size:14px;font-weight:700}
.ic-btn:hover{background:var(--faint)}
.ic-btn svg{width:18px;height:18px}
.ic-btn .sun{display:none}
:root[data-theme="dark"] .ic-btn .sun{display:block}:root[data-theme="dark"] .ic-btn .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ic-btn .sun{display:block}:root:not([data-theme="light"]) .ic-btn .moon{display:none}}
@media (max-width:860px){.top nav{display:none}.tools{margin-inline-start:auto}}

/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(90% 70% at 20% 10%,var(--glow) 0,transparent 60%)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;padding-block:56px 40px}
.hero h1{font-size:clamp(38px,6.2vw,74px);font-weight:900;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--gold)}
.lede{color:var(--mute);max-width:60ch;margin-top:18px;font-size:var(--t-5)}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:22px;padding:0;list-style:none}
.chips li{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:2px 12px;background:var(--faint);direction:ltr}
.ctas{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:48px;border-radius:12px;padding:10px 22px;font-weight:800;text-decoration:none;border:1px solid var(--gold);cursor:pointer;transition:transform .2s,background .2s}
.btn.p{background:var(--gold);color:var(--on-gold)}
:root[data-theme="light"] .btn.p{color:#fff}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .btn.p{color:#fff}}
.btn.g{color:var(--text);border-color:var(--line);background:transparent}
.btn:hover{transform:translateY(-2px)}

/* three lines of defence */
.lod{position:relative;width:min(420px,100%);justify-self:center;aspect-ratio:1/1.08}
.lod svg.arches{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.arc{fill:none;stroke:var(--gold);stroke-width:1.6;opacity:.5;stroke-dasharray:1400;stroke-dashoffset:0;transition:opacity .3s,stroke-width .3s}
.arc.l2{opacity:.7}.arc.l3{opacity:.9}
@media (prefers-reduced-motion:no-preference){.arc{animation:draw 2.2s cubic-bezier(.6,0,.2,1) both}.arc.l2{animation-delay:.25s}.arc.l3{animation-delay:.5s}}
@keyframes draw{from{stroke-dashoffset:1400}}
.arc.on{opacity:1;stroke-width:3}
.portrait{position:absolute;left:30%;right:30%;top:36%;bottom:4%;border-radius:999px 999px 14px 14px;overflow:hidden;border:2px solid var(--gold);box-shadow:0 30px 70px var(--shadow)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.lod-tags{position:absolute;inset:0;pointer-events:none}
.lod-tag{position:absolute;pointer-events:auto;font-size:12.5px;background:var(--deep);border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--gold-2);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s;left:50%;transform:translateX(-50%)}
.lod-tag:hover,.lod-tag.on{background:var(--gold);color:var(--on-gold)}
.lod-tag.t1{top:4%}.lod-tag.t2{top:20%}.lod-tag.t3{top:31%}
.lod-cap{text-align:center;font-size:14px;color:var(--mute);margin-top:10px;min-height:2.8em}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;padding-block:36px 28px}.lod{width:min(330px,92%)}}

/* KPI board */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);padding-bottom:44px}
/* MM-3: minmax(0,1fr) أعمدة متساوية فعلاً — ‏1fr وحدها تتسع لمحتواها فتتفاوت الأعمدة */
.kpi{border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:var(--faint);display:grid;gap:4px;align-content:start}
.kpi .lab{font-size:12.5px;color:var(--gold-2);font-weight:700;letter-spacing:.03em}
.kpi b{font-size:clamp(30px,3.8vw,42px);line-height:1.1;font-variant-numeric:tabular-nums}
.kpi span{font-size:14px;color:var(--mute)}
.meter{height:6px;border-radius:6px;background:var(--faint);overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--gold),var(--gold-2));border-radius:6px}
@media (max-width:820px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* creed */
.creed{border-block:1px solid var(--line);background:var(--band)}
.creed .wrap{padding-block:46px;display:flex;flex-wrap:wrap;gap:var(--sp-3) 40px;align-items:center;justify-content:space-between}
.creed q{quotes:none;font-size:clamp(26px,4vw,44px);font-weight:900}
.creed q em{font-style:normal;color:var(--gold)}
.creed p{color:var(--mute);max-width:46ch}

/* services: dossier tabs */
.svc{padding-block:72px}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-top:28px;border-bottom:1px solid var(--line);position:relative}
/* MM-4: التبويب الخامس كان يُقطع عند الحافة — تدرج خفيف عند حافة التمرير، والتفاف على سطرين في الشاشات الضيقة */
.tabs::after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:34px;pointer-events:none;background:linear-gradient(to right,var(--bg),transparent);z-index:1}
[dir="ltr"] .tabs::after{background:linear-gradient(to left,var(--bg),transparent)}
@media (max-width:900px){.tabs{flex-wrap:wrap;overflow-x:visible}.tabs::after{display:none}.tabs .tab{flex:1 1 auto}}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;border:1px solid var(--line);border-bottom:0;background:var(--faint);color:var(--mute);padding:10px 16px;border-radius:12px 12px 0 0;cursor:pointer;font-weight:700;font-size:var(--t-3);white-space:nowrap;position:relative;top:1px}
.tab[aria-selected="true"]{background:var(--panel);color:var(--text);border-color:var(--gold)}
.tab small{display:block;font-weight:500;font-size:11.5px;color:var(--gold-2)}
.sheet{border:1px solid var(--gold);border-top:0;border-radius:0 0 18px 18px;background:var(--panel);padding:clamp(18px,3.4vw,34px);display:grid;grid-template-columns:1.2fr .8fr;gap:24px 36px;min-height:280px}
.sheet h3{font-size:clamp(22px,2.6vw,30px);font-weight:900}
.sheet .what{color:var(--mute);margin-top:8px}
.pair{display:grid;gap:14px;margin:20px 0 0}
.pair div{border-inline-start:3px solid var(--line);padding-inline-start:14px}
.pair dt,.meta dt{font-size:13px;color:var(--gold-2);font-weight:700}
.pair dd,.meta dd{margin:0}
.meta{display:grid;gap:14px;align-content:start;background:var(--deep);border:1px solid var(--line);border-radius:14px;padding:18px;margin:0}
@media (max-width:820px){.sheet{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){.sheet>*{animation:rise .35s ease both}}
@keyframes rise{from{transform:translateY(6px);opacity:.4}}

/* career timeline */
.car{padding-block:72px}

/* credentials */
.cred{padding-block:72px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:22px}
.box{border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--faint)}
.box h3{font-size:19px}
.box p{color:var(--mute);margin-top:6px;font-size:15.5px}
.box a{color:var(--gold-2);font-weight:700;text-decoration:none;display:inline-block;margin-top:10px;direction:ltr}
@media (max-width:820px){.two{grid-template-columns:1fr}}

/* advisory */
.consult{padding-block:72px}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:26px;align-items:start}
.steps{display:grid;gap:10px;padding:0;margin:0;list-style:none;counter-reset:s}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:var(--sp-3);border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--faint);counter-increment:s}
.steps li::before{content:counter(s);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--on-gold);font-weight:900}
.steps b{display:block}
.steps span{color:var(--mute);font-size:14.5px}
.req{border:1px solid var(--gold);border-radius:18px;padding:clamp(18px,3vw,28px);background:var(--panel);display:grid;gap:var(--sp-4)}
.req h3{font-size:var(--t-6)}
.req p{color:var(--mute)}
.lic{border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:14.5px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0}
.lic dt{color:var(--gold-2)}.lic dd{margin:0;font-variant-numeric:tabular-nums}
@media (max-width:820px){.cgrid{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding-block:26px;color:var(--mute);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:6px 16px}
footer a{text-decoration:none}footer a:hover{color:var(--gold-2)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* English: Latin glyphs in Tajawal run wider, so the display sizes step down */
[lang="en"] .hero h1{font-size:clamp(34px,4.6vw,58px);letter-spacing:-.015em}
[lang="en"] .h2{font-size:clamp(26px,3.2vw,38px)}
[lang="en"] .creed q{font-size:clamp(24px,3.4vw,38px)}
.app-btn{font:inherit;font-weight:700;color:var(--gold);background:none;border:1px solid var(--line);border-radius:999px;padding:2px 12px;cursor:pointer}
.app-btn:hover{color:var(--gold-2)}
:root{--ins-bg:#0A1A33;--ins-fg:#F5EFDD}
/* ---- حياة الموقع: حركة خفيفة تدريجية (تتوقف عند «تقليل الحركة») ---- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
  .btn{position:relative;overflow:hidden;isolation:isolate}
  .btn.p::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translateX(-120%);z-index:-1}
  .btn.p:hover::after{transform:translateX(120%);transition:transform .7s ease}
  .tab{transition:transform var(--t-fast) var(--ease),background var(--t-fast)}.tab:hover{transform:translateY(-3px)}
  @supports (animation-timeline:view()){
    .tabpanel,.arch,.card{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  }
}
@media (pointer:coarse){.ic-btn{min-width:44px;height:44px}.btn,.tab{min-height:44px}.top nav a{min-height:44px;display:inline-flex;align-items:center}}

/* ===== المسيرة: رحلة تُرسم مع التمرير ===== */
.car-stats{display:flex;flex-wrap:wrap;gap:14px 44px;margin-top:26px}
.car-stats div{display:grid}
.car-stats b{font-family:var(--f-d,inherit);font-size:clamp(40px,6vw,64px);font-weight:900;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.car-stats span{color:var(--mute);font-size:15px;margin-top:6px}
.journey{list-style:none;margin:44px 0 0;padding:0;position:relative;display:grid;gap:34px}
.jr-line{position:absolute;inset-block:8px;inset-inline-start:50%;width:3px;margin-inline-start:-1.5px;background:var(--line);border-radius:3px;overflow:hidden}
.jr-line i{position:absolute;inset:0;background:linear-gradient(var(--gold-2),var(--gold));transform-origin:top;transform:scaleY(0);box-shadow:0 0 18px var(--gold)}
.st{display:grid;grid-template-columns:1fr 92px 1fr;align-items:center}
.st-node{grid-column:2;grid-row:1;display:grid;justify-items:center;gap:6px;position:relative;z-index:1}
.st-dot{width:22px;height:22px;border-radius:50%;background:var(--bg);border:4px solid var(--gold);box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 16%,transparent)}
.st-yr{font-weight:800;font-size:14px;color:var(--gold);font-variant-numeric:tabular-nums;background:var(--bg);padding-inline:6px;border-radius:6px}
.st-card{grid-row:1;grid-column:1;position:relative;padding:22px 24px;border-radius:20px;background:var(--panel);border:1px solid var(--line);box-shadow:0 22px 50px -30px rgba(0,0,0,.6);overflow:hidden}
.st-card::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:linear-gradient(var(--gold-2),var(--gold))}
.st:nth-child(odd) .st-card{grid-column:3}
.st-when{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-weight:800;font-size:14px}
.st-when em{font-style:normal;font-size:12px;padding:2px 10px;border-radius:999px;background:var(--gold);color:var(--on-gold)}
.st-card h3{font-size:clamp(19px,2vw,23px);margin-top:6px;line-height:1.4}
.st-sec{display:block;color:var(--mute);font-size:13.5px;margin-top:2px}
.st-role{margin-top:12px;font-weight:700;color:var(--gold-2)}
.st-role i{display:block;font-style:normal;font-weight:500;color:var(--mute);font-size:13px;margin-top:2px;unicode-bidi:isolate}
.st-card p{color:var(--mute);margin-top:8px;line-height:1.85}
.st-now .st-dot{background:var(--gold)}
.st-now .st-card{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 22px 50px -30px rgba(0,0,0,.6)}
@media (prefers-reduced-motion:no-preference){
  .st-now .st-dot{animation:stPulse 2.2s ease-out infinite}
  .jr-js .st .st-card{opacity:0;transform:translateX(calc(var(--dir,1) * 46px)) scale(.97);filter:blur(6px);transition:opacity .8s var(--ease,cubic-bezier(.2,.7,.2,1)),transform .8s var(--ease,cubic-bezier(.2,.7,.2,1)),filter .8s}
  .jr-js .st:nth-child(odd){--dir:-1}
  [dir="ltr"] .jr-js .st{--dir:-1} [dir="ltr"] .jr-js .st:nth-child(odd){--dir:1}
  .jr-js .st .st-dot{transform:scale(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1) .15s}
  .jr-js .st.in .st-card{opacity:1;transform:none;filter:none}
  .jr-js .st.in .st-dot{transform:none}
  .st-card{transition:transform .35s var(--ease,ease),box-shadow .35s}
  .st-card:hover{transform:translateY(-4px)!important;box-shadow:0 30px 60px -28px color-mix(in srgb,var(--gold) 45%,#000)}
}
@keyframes stPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 55%,transparent)}100%{box-shadow:0 0 0 18px transparent}}
@media (max-width:820px){
  .jr-line{inset-inline-start:15px}
  .st{grid-template-columns:32px 1fr;gap:0 14px;align-items:start}
  .st-node{grid-column:1;padding-top:22px}
  .st .st-card,.st:nth-child(odd) .st-card{grid-column:2}
  .st-yr{font-size:12px}
  .jr-js .st{--dir:1}
}

/* ===== الشهادات: أوسمة متحركة ===== */
.seals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);margin-top:34px;max-width:900px;margin-inline:auto}
.seal{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;position:relative;isolation:isolate;max-width:250px;width:100%;justify-self:center}
.seal::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from var(--a,0deg),#8a6a12,#f3dc8c,#c9a227,#fff3c4,#9c7a18,#e9cd73,#8a6a12);z-index:-2}
.seal::after{content:"";position:absolute;inset:9%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#1c3768,#0b1d3d 70%);box-shadow:inset 0 6px 18px rgba(0,0,0,.55);z-index:-1}
.seal svg{position:absolute;inset:13%;width:74%;height:74%;transform:rotate(-90deg)}
.seal .sr-t{fill:none;stroke:rgba(235,211,138,.16);stroke-width:1.5}
.seal .sr-p{fill:none;stroke:var(--gold-2,#EBD38A);stroke-width:2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.seal b{font-size:clamp(20px,2.6vw,30px);direction:ltr;line-height:1.1;display:block;color:#F5EFDD;letter-spacing:.02em}
.seal span{display:block;font-size:clamp(12px,1.2vw,14px);color:rgba(245,239,221,.78);margin-top:6px;line-height:1.4;padding-inline:12%}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@media (prefers-reduced-motion:no-preference){
  .seal::before{animation:sealSpin 9s linear infinite}
  .jr-js .seals .seal{opacity:0;transform:scale(.6) rotate(-18deg);transition:opacity .7s,transform .9s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(var(--i) * 110ms)}
  .jr-js .seals .sr-p{stroke-dashoffset:100;transition:stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1);transition-delay:calc(var(--i) * 110ms + .35s)}
  .jr-js .seals.in .seal{opacity:1;transform:none}
  .jr-js .seals.in .sr-p{stroke-dashoffset:0}
  .seal:hover,.jr-js .seals.in .seal:hover{transform:translateY(-8px) scale(1.04);transition-delay:0s}
}
@keyframes sealSpin{to{--a:360deg}}
@media (max-width:620px){.seals{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== منصة معين وقناة تليجرام: بطاقتان حيّتان ===== */
.live{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--sp-4,18px);margin-top:22px}
.lv{--c:var(--gold);position:relative;display:grid;gap:10px;align-content:start;padding:26px 26px 22px;border-radius:22px;text-decoration:none;color:var(--text);background:linear-gradient(150deg,color-mix(in srgb,var(--c) 20%,var(--panel)),var(--panel) 65%);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);overflow:hidden;isolation:isolate}
.lv::after{content:"";position:absolute;width:280px;height:280px;inset-block-start:-120px;inset-inline-end:-90px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 40%,transparent),transparent 70%);z-index:-1}
.lv-k{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--c)}
.lv-k svg{width:18px;height:18px}
.pulse{width:9px;height:9px;border-radius:50%;background:#3BC9A0;box-shadow:0 0 0 0 rgba(59,201,160,.6)}
.lv h3{font-size:clamp(21px,2.3vw,26px)}
.lv p{color:var(--mute);line-height:1.8}
.lv-n{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:6px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.lv-n div{display:grid}
.lv-n b{font-size:clamp(30px,3.6vw,42px);font-weight:900;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.lv-n span{font-size:13.5px;color:var(--mute);margin-top:4px}
.lv-go{margin-top:8px;font-weight:800;color:var(--c);display:inline-flex;align-items:center;gap:6px;min-height:44px}
.lv-go::after{content:"↖";transition:transform .3s}
[dir="ltr"] .lv-go::after{content:"↗"}
@media (prefers-reduced-motion:no-preference){
  .pulse{animation:lvPulse 1.8s ease-out infinite}
  .lv{transition:transform .35s var(--ease,ease),box-shadow .35s}
  .lv:hover,.jr-js .live.in .lv:hover{transform:translateY(-5px);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--c) 60%,#000)}
  .lv:hover .lv-go::after{transform:translate(-4px,-4px)}
  [dir="ltr"] .lv:hover .lv-go::after{transform:translate(4px,-4px)}
  .jr-js .live .lv{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s var(--ease,ease)}
  .jr-js .live .lv:nth-child(2){transition-delay:.12s}
  .jr-js .live.in .lv{opacity:1;transform:none}
}
@keyframes lvPulse{to{box-shadow:0 0 0 10px rgba(59,201,160,0)}}
@media (max-width:820px){.live{grid-template-columns:1fr}}
@media print{.jr-js .st .st-card,.jr-js .seals .seal,.jr-js .live .lv{opacity:1!important;transform:none!important;filter:none!important}.jr-line i{transform:none!important}}

/* المحطات تنزلق من الجانب قبل ظهورها: لا تمرير أفقي أثناء ذلك */
.car{overflow-x:hidden;overflow-x:clip}