/* =====================================================================
   WIN MANGAJI — "Nūr al-ʿIlm" skin  ·  Academic × Islamic × Futuristic
   Palette diturunkan langsung dari logo: zamrud #01503C + emas #E8B854
   ===================================================================== */
:root{
  --emerald-950:#021A14; --emerald-900:#032920; --emerald-800:#02392C; --emerald-700:#01503C; --emerald-600:#0A694F; --emerald-500:#138360;
  --gold-200:#F6E3B0; --gold-300:#F1D48A; --gold-400:#ECC56A; --gold-500:#E8B854; --gold-600:#C99A3B; --gold-700:#83601B;
  --teal-300:#8BE8DC; --teal-400:#4FD6C6; --teal-500:#22B09F; --teal-600:#138A7D;

  --f-display:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --f-body:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --f-arabic:"Amiri","Noto Naskh Arabic","Traditional Arabic","Scheherazade New",serif;
  --f-kufi:"Reem Kufi","Noto Kufi Arabic","Amiri",sans-serif;

  --max:1240px; --gutter:clamp(16px,4vw,32px);
  --r-sm:12px; --r:20px; --r-lg:26px; --r-xl:34px;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);

  --logo:url("../img/logo-mudhari.png");
  --arch-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 700'%3E%3Cpath d='M24,700 V331.47 A310,310 0 0 1 280,26.21 A310,310 0 0 1 536,331.47 V700Z'/%3E%3C/svg%3E");
  --lattice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='black' stroke-width='1.1'%3E%3Cpath d='M40,0 L51.72,11.72 L68.28,11.72 L68.28,28.28 L80,40 L68.28,51.72 L68.28,68.28 L51.72,68.28 L40,80 L28.28,68.28 L11.72,68.28 L11.72,51.72 L0,40 L11.72,28.28 L11.72,11.72 L28.28,11.72Z'/%3E%3Cpath d='M46.43,24.48 L55.52,33.57 L55.52,46.43 L46.43,55.52 L33.57,55.52 L24.48,46.43 L24.48,33.57 L33.57,24.48Z'/%3E%3C/g%3E%3Cpath d='M40.0,36.8L43.2,40.0L40.0,43.2L36.8,40.0Z'/%3E%3C/svg%3E");
  --rub:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M28,0 L56,28 L28,56 L0,28Z'/%3E%3Cpath d='M47.8,8.2 L47.8,47.8 L8.2,47.8 L8.2,8.2Z'/%3E%3Ccircle cx='28.0' cy='28.0' r='6.72'/%3E%3C/g%3E%3C/svg%3E");
  --hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.25' height='42' viewBox='0 0 24.25 42'%3E%3Cg fill='none' stroke='black' stroke-width='0.9'%3E%3Cpath d='M0,-14 L12.12,-7 L12.12,7 L0,14 L-12.12,7 L-12.12,-7Z'/%3E%3Cpath d='M3.85,-6.67 L7.7,0 L3.85,6.67 L-3.85,6.67 L-7.7,0 L-3.85,-6.67Z'/%3E%3Cpath d='M24.25,-14 L36.37,-7 L36.37,7 L24.25,14 L12.12,7 L12.12,-7Z'/%3E%3Cpath d='M28.1,-6.67 L31.95,0 L28.1,6.67 L20.4,6.67 L16.55,0 L20.4,-6.67Z'/%3E%3Cpath d='M12.12,7 L24.25,14 L24.25,28 L12.12,35 L0,28 L0,14Z'/%3E%3Cpath d='M15.97,14.33 L19.82,21 L15.97,27.67 L8.27,27.67 L4.42,21 L8.27,14.33Z'/%3E%3Cpath d='M0,28 L12.12,35 L12.12,49 L0,56 L-12.12,49 L-12.12,35Z'/%3E%3Cpath d='M3.85,35.33 L7.7,42 L3.85,48.67 L-3.85,48.67 L-7.7,42 L-3.85,35.33Z'/%3E%3Cpath d='M24.25,28 L36.37,35 L36.37,49 L24.25,56 L12.12,49 L12.12,35Z'/%3E%3Cpath d='M28.1,35.33 L31.95,42 L28.1,48.67 L20.4,48.67 L16.55,42 L20.4,35.33Z'/%3E%3C/g%3E%3C/svg%3E");
  --flower:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='22.52' viewBox='0 0 13 22.52'%3E%3Cg fill='none' stroke='black' stroke-width='0.8'%3E%3Ccircle cx='0' cy='0' r='13'/%3E%3Ccircle cx='13' cy='0' r='13'/%3E%3Ccircle cx='6.5' cy='11.26' r='13'/%3E%3Ccircle cx='0' cy='22.52' r='13'/%3E%3Ccircle cx='13' cy='22.52' r='13'/%3E%3C/g%3E%3C/svg%3E");
  --circuit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 12H14V26H30V40H48'/%3E%3Cpath d='M22 0V6H40V20H48'/%3E%3Cpath d='M6 48V36H18'/%3E%3Cpath d='M36 30V48'/%3E%3Cpath d='M0 40H8'/%3E%3C/g%3E%3Cg%3E%3Crect x='12' y='10' width='4' height='4'/%3E%3Crect x='28' y='24' width='4' height='4'/%3E%3Crect x='38' y='18' width='4' height='4'/%3E%3Crect x='16' y='34' width='4' height='4'/%3E%3Crect x='34' y='28' width='4' height='4'/%3E%3Crect x='20' y='4' width='4' height='4'/%3E%3C/g%3E%3C/svg%3E");
  --mihrab:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 900'%3E%3Cpath d='M0,900 V130.21 A134,134 0 0 1 100,0.6 A134,134 0 0 1 200,130.21 V900Z'/%3E%3C/svg%3E");
  --divider:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='18' viewBox='0 0 300 18'%3E%3Cpath d='M0 9H128M172 9H300' stroke='black' stroke-width='1'/%3E%3Cpath d='M134 9L138 5L142 9L138 13Z M158 9L162 5L166 9L162 13Z'/%3E%3Cpath d='M150,1 L152.34,3.34 L155.66,3.34 L155.66,6.66 L158,9 L155.66,11.34 L155.66,14.66 L152.34,14.66 L150,17 L147.66,14.66 L144.34,14.66 L144.34,11.34 L142,9 L144.34,6.66 L144.34,3.34 L147.66,3.34Z' fill='none' stroke='black' stroke-width='1.2'/%3E%3Ccircle cx='150' cy='9' r='1.8'/%3E%3C/svg%3E");
  --band:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28'%3E%3Cg fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 14L12 2L24 14L12 26Z M24 14L36 2L48 14L36 26Z'/%3E%3Cpath d='M0 1H48M0 27H48'/%3E%3C/g%3E%3Cpath d='M12,8.5 L13.61,10.11 L15.89,10.11 L15.89,12.39 L17.5,14 L15.89,15.61 L15.89,17.89 L13.61,17.89 L12,19.5 L10.39,17.89 L8.11,17.89 L8.11,15.61 L6.5,14 L8.11,12.39 L8.11,10.11 L10.39,10.11Z'/%3E%3Cpath d='M36,8.5 L37.61,10.11 L39.89,10.11 L39.89,12.39 L41.5,14 L39.89,15.61 L39.89,17.89 L37.61,17.89 L36,19.5 L34.39,17.89 L32.11,17.89 L32.11,15.61 L30.5,14 L32.11,12.39 L32.11,10.11 L34.39,10.11Z'/%3E%3C/svg%3E");
  --stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='white'%3E%3Ccircle cx='136.01' cy='63.36' r='1.2' fill-opacity='0.35'/%3E%3Ccircle cx='30.42' cy='225.07' r='0.7' fill-opacity='0.35'/%3E%3Ccircle cx='382.08' cy='90.17' r='0.5' fill-opacity='0.9'/%3E%3Ccircle cx='175.63' cy='101.08' r='1.0' fill-opacity='0.9'/%3E%3Ccircle cx='24.83' cy='237.49' r='0.6' fill-opacity='0.35'/%3E%3Ccircle cx='242.38' cy='166.61' r='0.6' fill-opacity='0.35'/%3E%3Ccircle cx='233.8' cy='55.93' r='0.8' fill-opacity='0.5'/%3E%3Ccircle cx='227.09' cy='239.78' r='1.0' fill-opacity='0.5'/%3E%3Ccircle cx='43.28' cy='239.91' r='0.6' fill-opacity='0.7'/%3E%3Ccircle cx='40.92' cy='299.09' r='1.0' fill-opacity='0.35'/%3E%3Ccircle cx='259.98' cy='208.49' r='1.0' fill-opacity='0.9'/%3E%3Ccircle cx='326.44' cy='195.55' r='0.8' fill-opacity='0.7'/%3E%3Ccircle cx='125.9' cy='333.64' r='1.2' fill-opacity='0.5'/%3E%3Ccircle cx='34.38' cy='126.1' r='0.8' fill-opacity='0.7'/%3E%3Ccircle cx='306.37' cy='120.93' r='0.5' fill-opacity='0.35'/%3E%3Ccircle cx='215.01' cy='69.28' r='0.7' fill-opacity='0.5'/%3E%3Ccircle cx='391.97' cy='177.11' r='1.2' fill-opacity='0.35'/%3E%3Ccircle cx='321.12' cy='240.67' r='0.7' fill-opacity='0.7'/%3E%3Ccircle cx='292.02' cy='249.64' r='1.0' fill-opacity='0.9'/%3E%3Ccircle cx='28.88' cy='39.31' r='0.7' fill-opacity='0.9'/%3E%3Ccircle cx='292.76' cy='27.3' r='1.2' fill-opacity='0.7'/%3E%3Ccircle cx='271.79' cy='417.1' r='0.8' fill-opacity='0.7'/%3E%3Ccircle cx='300.98' cy='372.56' r='0.7' fill-opacity='0.35'/%3E%3Ccircle cx='395.07' cy='149.29' r='1.0' fill-opacity='0.35'/%3E%3Ccircle cx='207.35' cy='91.65' r='0.7' fill-opacity='0.5'/%3E%3Ccircle cx='310.11' cy='167.12' r='0.8' fill-opacity='0.35'/%3E%3Ccircle cx='69.87' cy='168.69' r='0.7' fill-opacity='0.5'/%3E%3Ccircle cx='344.1' cy='362.87' r='0.7' fill-opacity='0.9'/%3E%3Ccircle cx='414.32' cy='286.74' r='0.8' fill-opacity='0.5'/%3E%3Ccircle cx='63.39' cy='74.01' r='0.6' fill-opacity='0.5'/%3E%3Ccircle cx='5.07' cy='349.06' r='0.6' fill-opacity='0.7'/%3E%3Ccircle cx='118.41' cy='61.18' r='1.0' fill-opacity='0.7'/%3E%3Ccircle cx='256.12' cy='133.82' r='0.6' fill-opacity='0.35'/%3E%3Ccircle cx='191.79' cy='365.81' r='1.2' fill-opacity='0.9'/%3E%3Ccircle cx='167.19' cy='165.53' r='0.8' fill-opacity='0.9'/%3E%3Ccircle cx='26.14' cy='28.29' r='0.6' fill-opacity='0.9'/%3E%3Ccircle cx='68.17' cy='142.82' r='0.5' fill-opacity='0.35'/%3E%3Ccircle cx='0.1' cy='63.53' r='0.5' fill-opacity='0.7'/%3E%3Ccircle cx='257.77' cy='29.53' r='0.6' fill-opacity='0.9'/%3E%3Ccircle cx='62.39' cy='105.95' r='0.7' fill-opacity='0.7'/%3E%3Ccircle cx='199.14' cy='48.45' r='0.8' fill-opacity='0.9'/%3E%3Ccircle cx='201.77' cy='130.98' r='0.6' fill-opacity='0.35'/%3E%3Ccircle cx='314.86' cy='310.95' r='0.8' fill-opacity='0.5'/%3E%3Ccircle cx='216.86' cy='86.19' r='1.0' fill-opacity='0.7'/%3E%3Ccircle cx='61.57' cy='228.13' r='0.5' fill-opacity='0.7'/%3E%3Ccircle cx='410.97' cy='362.6' r='1.2' fill-opacity='0.7'/%3E%3C/g%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E");
  --corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M26,0 A26,26 0 0 1 0,26' /%3E%3Cpath d='M38,0 A38,38 0 0 1 0,38' /%3E%3Cpath d='M50,0 A50,50 0 0 1 0,50' /%3E%3Cpath d='M62,0 A62,62 0 0 1 0,62' /%3E%3Cpath d='M0,-12 L3.51,-8.49 L8.49,-8.49 L8.49,-3.51 L12,0 L8.49,3.51 L8.49,8.49 L3.51,8.49 L0,12 L-3.51,8.49 L-8.49,8.49 L-8.49,3.51 L-12,0 L-8.49,-3.51 L-8.49,-8.49 L-3.51,-8.49Z'/%3E%3C/g%3E%3C/svg%3E");
}
:root,[data-theme="light"]{
  color-scheme:light;
  --bg:#F7F2E7; --bg-2:#EFE7D6; --bg-3:#E6DBC5;
  --surface:rgba(255,253,247,.72); --surface-strong:rgba(255,253,247,.94); --surface-solid:#FFFDF7; --surface-tint:rgba(1,80,60,.045);
  --ink:#0F231C; --ink-2:#2B3F37; --muted:#56675F; --faint:#7C8A83;
  --line:rgba(1,80,60,.13); --line-2:rgba(1,80,60,.22); --line-gold:rgba(201,154,59,.42);
  --accent:#01503C; --accent-2:#0A694F; --on-accent:#FFFBEF;
  --gold:#C99A3B; --gold-text:#83601B; --gold-soft:rgba(232,184,84,.17);
  --glow:#1A9E8F; --glow-rgb:34,176,159; --gold-rgb:201,154,59; --ink-rgb:15,35,28;
  --astro-line:#01503C; --astro-gold:#B07F22; --astro-glow:#1A9E8F; --astro-disc:rgba(255,253,247,.78);
  --shadow-sm:0 1px 2px rgba(15,35,28,.05),0 6px 16px -8px rgba(15,35,28,.12);
  --shadow:0 2px 6px rgba(15,35,28,.04),0 24px 54px -20px rgba(15,35,28,.24);
  --shadow-lg:0 34px 90px -26px rgba(15,35,28,.36);
  --lattice-alpha:.13; --grain-alpha:.06; --stars-alpha:0;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#04120E; --bg-2:#071B15; --bg-3:#0B241C;
  --surface:rgba(13,36,29,.62); --surface-strong:rgba(10,30,24,.94); --surface-solid:#0A1F19; --surface-tint:rgba(232,184,84,.045);
  --ink:#F3EDDF; --ink-2:#D8D0BE; --muted:#A3B2AA; --faint:#77887F;
  --line:rgba(232,184,84,.13); --line-2:rgba(232,184,84,.25); --line-gold:rgba(232,184,84,.45);
  --accent:#E8B854; --accent-2:#F1D48A; --on-accent:#07160F;
  --gold:#E8B854; --gold-text:#EDC76E; --gold-soft:rgba(232,184,84,.12);
  --glow:#4FD6C6; --glow-rgb:79,214,198; --gold-rgb:232,184,84; --ink-rgb:0,0,0;
  --astro-line:#E8B854; --astro-gold:#F1D48A; --astro-glow:#4FD6C6; --astro-disc:rgba(5,22,17,.74);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 6px 16px -8px rgba(0,0,0,.5);
  --shadow:0 2px 6px rgba(0,0,0,.25),0 24px 54px -20px rgba(0,0,0,.7);
  --shadow-lg:0 34px 90px -26px rgba(0,0,0,.8);
  --lattice-alpha:.10; --grain-alpha:.05; --stars-alpha:.85;
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .6s var(--ease),color .6s var(--ease)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4{margin:0}
p{margin:0}
::selection{background:rgba(var(--gold-rgb),.32);color:var(--ink)}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:8px}
[lang="ar"]{font-family:var(--f-arabic);direction:rtl;unicode-bidi:isolate;letter-spacing:0;font-style:normal}
.container{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.skip{position:fixed;left:16px;top:-80px;z-index:400;padding:10px 16px;border-radius:12px;background:var(--accent);color:var(--on-accent);font-weight:600;transition:top .25s}
.skip:focus{top:14px}

/* ---------------------------------------------------------------- ambient background */
.ambient{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.ambient .aura{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.ambient .a1{width:52vmax;height:52vmax;left:-18vmax;top:-22vmax;background:radial-gradient(circle,rgba(var(--gold-rgb),.26),transparent 64%);animation:drift1 28s ease-in-out infinite alternate}
.ambient .a2{width:46vmax;height:46vmax;right:-16vmax;top:-6vmax;background:radial-gradient(circle,rgba(var(--glow-rgb),.20),transparent 64%);animation:drift2 32s ease-in-out infinite alternate}
.ambient .a3{width:60vmax;height:60vmax;left:18vmax;bottom:-36vmax;background:radial-gradient(circle,rgba(1,80,60,.12),transparent 64%);animation:drift1 36s ease-in-out infinite alternate-reverse}
[data-theme="dark"] .ambient .a3{background:radial-gradient(circle,rgba(19,131,96,.20),transparent 64%)}
.ambient .stars{position:absolute;inset:-10%;background:var(--stars);background-size:420px 420px;opacity:var(--stars-alpha);transition:opacity .8s;animation:twinkle 7s ease-in-out infinite alternate}
.ambient .stars.s2{background-size:620px 620px;background-position:140px 90px;animation-duration:11s;animation-direction:alternate-reverse}
.ambient .grain{position:absolute;inset:0;background:var(--grain);opacity:var(--grain-alpha)}
@keyframes drift1{to{transform:translate3d(8vmax,6vmax,0) scale(1.08)}}
@keyframes drift2{to{transform:translate3d(-7vmax,9vmax,0) scale(1.12)}}
@keyframes twinkle{from{opacity:calc(var(--stars-alpha)*.55)}to{opacity:var(--stars-alpha)}}

.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:90;transform-origin:0 50%;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--gold),var(--glow));box-shadow:0 0 12px rgba(var(--glow-rgb),.6);pointer-events:none}

/* ---------------------------------------------------------------- utility bar (HUD) */
.utility{position:relative;z-index:61;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);background:linear-gradient(90deg,rgba(var(--gold-rgb),.07),transparent 38%,transparent 62%,rgba(var(--glow-rgb),.07))}
.util-row{height:38px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.hud{display:flex;align-items:center;gap:10px;white-space:nowrap;min-width:0;overflow:hidden}
.live-dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--glow);flex:none}
.live-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--glow);animation:ping 2.4s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.hud-hijri{color:var(--gold-text);font-weight:500}
.hud-sep{width:5px;height:5px;background:var(--gold);transform:rotate(45deg);opacity:.7;flex:none}
.hud-time{color:var(--ink-2);font-variant-numeric:tabular-nums}
.util-links{display:flex;align-items:center;gap:18px;white-space:nowrap}
.util-links .ar{font-size:15px;color:var(--gold-text);line-height:1}
.util-links a{display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.util-links a:hover{color:var(--ink)}
.util-links a .ic{width:14px;height:14px}

/* ---------------------------------------------------------------- topbar */
.topbar{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px);border-bottom:1px solid var(--line);transition:box-shadow .35s,background-color .6s}
@supports not (background:color-mix(in srgb,red,blue)){.topbar{background:var(--surface-strong)}}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--glow) 70%,transparent);opacity:.55}
.topbar.scrolled{box-shadow:0 14px 34px -22px rgba(var(--ink-rgb),.45)}
.nav{height:76px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:13px;min-width:max-content}
.logo{position:relative;display:inline-block;flex:none;overflow:hidden;background:#01503C var(--logo) center/cover no-repeat;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(232,184,84,.38),0 10px 24px -10px rgba(1,80,60,.65)}
.logo::after{content:"";position:absolute;inset:-40%;background:linear-gradient(110deg,transparent 38%,rgba(255,244,214,.55) 50%,transparent 62%);transform:translateX(-90%) rotate(8deg);animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%,70%{transform:translateX(-90%) rotate(8deg)}88%,100%{transform:translateX(90%) rotate(8deg)}}
.logo.sm{width:48px;height:48px;border-radius:13px}
.logo.md{width:56px;height:56px;border-radius:15px}
.logo.lg{width:68px;height:68px;border-radius:18px}
.brand-name{display:block;font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:.16em;line-height:1;text-transform:uppercase;color:var(--ink)}
.brand-sub{display:block;margin-top:6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.menu{position:relative;margin-left:auto;display:flex;align-items:center;gap:2px}
.menu a{position:relative;padding:10px 14px;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink-2);transition:color .25s,background-color .25s}
.menu a:hover{color:var(--ink);background:var(--surface-tint)}
.menu a.active{color:var(--ink)}
.menu-ind{position:absolute;left:0;bottom:3px;height:2px;width:0;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--glow));box-shadow:0 0 10px rgba(var(--glow-rgb),.55);opacity:0;transition:transform .5s var(--ease-out),width .5s var(--ease-out),opacity .3s}
.nav-tools{display:flex;align-items:center;gap:8px}
.icon-btn{position:relative;height:42px;min-width:42px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);transition:border-color .25s,background-color .25s,color .25s,transform .25s}
.icon-btn:hover{border-color:var(--line-gold);color:var(--ink);transform:translateY(-1px)}
.search-btn{padding:0 8px 0 12px;font-size:13px;color:var(--muted)}
.search-btn .lbl{padding-right:6px}
kbd{font-family:var(--f-mono);font-size:10.5px;line-height:1;padding:4px 6px;border-radius:6px;border:1px solid var(--line-2);border-bottom-width:2px;background:var(--surface-strong);color:var(--muted);white-space:nowrap}
.theme-btn .ic-moon{display:none}
[data-theme="dark"] .theme-btn .ic-sun{display:none}
[data-theme="dark"] .theme-btn .ic-moon{display:block}
.theme-btn .ic{transition:transform .6s var(--ease-out)}
.theme-btn:hover .ic{transform:rotate(-24deg)}
.hamb{display:none}
.mobile-panel{border-top:1px solid var(--line);padding:14px 0 20px}
.mobile-panel[hidden]{display:none}
.mobile-panel nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mobile-panel a{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:14.5px;animation:rise .45s var(--ease-out) both;animation-delay:calc(var(--i,0)*45ms)}
.mobile-panel a .ic{width:16px;height:16px;color:var(--gold)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- buttons */
.btn{word-spacing:.08em;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 22px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface-strong);color:var(--ink);font-weight:600;font-size:14.5px;letter-spacing:.005em;white-space:nowrap;transition:transform .45s var(--ease-out),box-shadow .45s,border-color .3s,background-color .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.34) 48%,transparent 66%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn:hover::before{transform:translateX(120%)}
.btn:hover{box-shadow:var(--shadow)}
.btn .ic{width:18px;height:18px;transition:transform .35s var(--ease-out)}
.btn:hover .ic-go{transform:translateX(4px)}
.btn-primary{border-color:transparent;color:#FFFBEF;background:linear-gradient(135deg,var(--emerald-500) 0%,var(--emerald-700) 52%,var(--emerald-800) 100%);box-shadow:inset 0 0 0 1px rgba(232,184,84,.42),inset 0 1px 0 rgba(255,255,255,.18),0 14px 30px -14px rgba(1,80,60,.75)}
.btn-primary:hover{box-shadow:inset 0 0 0 1px rgba(232,184,84,.7),inset 0 1px 0 rgba(255,255,255,.2),0 18px 36px -14px rgba(1,80,60,.8),0 0 0 4px rgba(var(--gold-rgb),.12)}
[data-theme="dark"] .btn-primary{color:#07160F;background:linear-gradient(135deg,var(--gold-200) 0%,var(--gold-400) 45%,var(--gold-600) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 14px 34px -14px rgba(232,184,84,.65)}
[data-theme="dark"] .btn-primary:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 18px 40px -14px rgba(232,184,84,.75),0 0 0 4px rgba(232,184,84,.14)}
.btn-ghost{background:var(--surface);border-color:var(--line-gold);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-ghost:hover{border-color:var(--gold)}
.btn-sm{height:42px;padding:0 16px;font-size:13.5px;border-radius:12px}
.btn-gold{border-color:transparent;color:#07160F;background:linear-gradient(135deg,var(--gold-200),var(--gold-500) 55%,var(--gold-600));box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 14px 34px -14px rgba(232,184,84,.7)}

/* ---------------------------------------------------------------- shared type */
.label{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}
.label .no{padding:3px 7px;border-radius:6px;border:1px solid var(--line-gold);color:var(--ink-2);letter-spacing:.06em;font-size:10.5px}
.diamond{display:inline-block;width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:none}
.tag{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface-strong);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.kw{display:flex;flex-wrap:wrap;gap:8px}
.kw span{font-size:12px;line-height:1.2;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface-tint);color:var(--ink-2)}
.tlink{display:inline-flex;align-items:center;gap:8px;width:max-content;font-weight:600;font-size:14px;color:var(--accent);position:relative}
[data-theme="dark"] .tlink{color:var(--gold-300)}
.tlink .ic{width:16px;height:16px;transition:transform .35s var(--ease-out)}
.tlink::after{content:"";position:absolute;left:0;right:24px;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.tlink:hover::after{transform:scaleX(1)}
.tlink:hover .ic{transform:translateX(4px)}
.tlink.muted{color:var(--muted);font-weight:500}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;padding:clamp(34px,4.2vw,58px) 0 clamp(96px,10vw,140px)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--gold);opacity:var(--lattice-alpha);-webkit-mask:var(--lattice) 0 0/80px 80px repeat,radial-gradient(ellipse 60% 70% at 78% 42%,#000 10%,transparent 72%);-webkit-mask-composite:source-in;mask:var(--lattice) 0 0/80px 80px repeat,radial-gradient(ellipse 60% 70% at 78% 42%,#000 10%,transparent 72%);mask-composite:intersect}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.identity{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.eyebrow{position:relative;overflow:hidden;display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px;max-width:100%;padding:9px 15px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.eyebrow::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:36%;background:linear-gradient(90deg,transparent,rgba(var(--glow-rgb),.22),transparent);animation:scanX 5.5s ease-in-out infinite}
@keyframes scanX{0%,50%{left:-40%}85%,100%{left:110%}}
.eyebrow .sep{color:var(--gold)}
h1.display{font-family:var(--f-display);font-weight:600;font-size:clamp(44px,4.9vw,74px);line-height:1.02;letter-spacing:-.02em;margin:0 0 24px;text-wrap:balance}
h1.display .w{display:inline-block}
.gloss{position:relative;display:inline-block;font-style:italic;font-weight:500;padding-right:.06em;background:linear-gradient(100deg,var(--gold-600) 0%,var(--gold-400) 28%,var(--teal-500) 52%,var(--gold-500) 76%,var(--gold-600) 100%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 9s linear infinite}
[data-theme="dark"] .gloss{background-image:linear-gradient(100deg,var(--gold-500) 0%,var(--gold-200) 28%,var(--teal-400) 52%,var(--gold-300) 76%,var(--gold-500) 100%)}
@keyframes shimmer{to{background-position:-240% 0}}
.gloss-ar{position:absolute;right:.04em;top:-.5em;display:flex;align-items:center;gap:.25em;font-size:.3em;line-height:1;color:var(--gold-text);-webkit-text-fill-color:var(--gold-text);font-family:var(--f-arabic);font-weight:700;white-space:nowrap}
.gloss-ar i{font-family:var(--f-mono);font-size:.42em;font-style:normal;font-weight:500;letter-spacing:.1em;color:var(--muted);-webkit-text-fill-color:var(--muted);direction:ltr;text-transform:uppercase}
.ink{position:relative;display:inline-block;white-space:nowrap}
.ink svg{position:absolute;left:-2%;right:-2%;width:104%;bottom:-.14em;height:.32em;overflow:visible}
.ink path{fill:none;stroke:var(--gold);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s .9s var(--ease-out) forwards}
.lead{font-size:clamp(16px,1.15vw,17.5px);line-height:1.8;color:var(--muted);max-width:40em}
.search{position:relative;margin-top:28px;display:flex;align-items:center;gap:10px;max-width:640px;padding:8px 8px 8px 18px;border-radius:18px;border:1px solid var(--line-2);background:var(--surface-strong);box-shadow:var(--shadow);transition:border-color .3s,box-shadow .3s}
.search::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ang,0deg),transparent 0 70%,rgba(var(--glow-rgb),.9) 82%,rgba(var(--gold-rgb),.9) 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .4s;animation:angle 4s linear infinite;pointer-events:none}
.search:focus-within::before{opacity:1}
.search:focus-within{border-color:transparent;box-shadow:0 0 0 5px rgba(var(--glow-rgb),.12),var(--shadow)}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes angle{to{--ang:360deg}}
.search .ic{color:var(--muted);width:20px;height:20px}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:12px 2px;font-size:15px;color:var(--ink)}
.search input::placeholder{color:var(--faint)}
.search .btn{height:46px}
.suggest{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--faint)}
.suggest .s-lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.suggest button{padding:5px 12px;border-radius:999px;border:1px dashed var(--line-2);font-size:12.5px;color:var(--ink-2);transition:all .25s}
.suggest button:hover{border-style:solid;border-color:var(--gold);color:var(--gold-text);background:var(--gold-soft)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.trust{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:10px 24px;font-size:13.5px;color:var(--muted)}
.trust li{display:flex;align-items:center;gap:9px}
.trust li::before{content:"";width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}

/* ----- hero visual : mihrab + astrolabe */
.hero-visual{position:relative;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:560/700}
.arch-fill{position:absolute;inset:0;-webkit-mask:var(--arch-mask) center/100% 100% no-repeat;mask:var(--arch-mask) center/100% 100% no-repeat;background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,253,247,.25) 55%,rgba(var(--gold-rgb),.12) 100%)}
[data-theme="dark"] .arch-fill{background:linear-gradient(180deg,rgba(var(--glow-rgb),.08) 0%,rgba(6,26,20,.35) 55%,rgba(var(--gold-rgb),.08) 100%)}
.arch-fill::before{content:"";position:absolute;inset:0;background:var(--gold);opacity:.3;-webkit-mask:var(--rub) center/48px 48px repeat,radial-gradient(ellipse 80% 60% at 50% 100%,#000,transparent 75%);-webkit-mask-composite:source-in;mask:var(--rub) center/48px 48px repeat,radial-gradient(ellipse 80% 60% at 50% 100%,#000,transparent 75%);mask-composite:intersect}
.arch-fill::after{content:"";position:absolute;left:0;right:0;top:-18%;height:18%;background:linear-gradient(180deg,transparent,rgba(var(--glow-rgb),.10) 60%,rgba(var(--glow-rgb),.45) 98%,transparent);animation:scanY 8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes scanY{0%{transform:translateY(0)}70%,100%{transform:translateY(660%)}}
.arch-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.arch-lines .al-o{fill:none;stroke:var(--gold);stroke-width:1.4}
.arch-lines .al-i{fill:none;stroke:var(--gold);stroke-opacity:.55;stroke-width:1}
.arch-lines .al-i2{fill:none;stroke:var(--astro-line);stroke-opacity:.28;stroke-width:1;stroke-dasharray:2 6}
.arch-lines .al-dia{fill:var(--gold)}
.arch-lines .al-hair{stroke:var(--gold);stroke-opacity:.5;stroke-width:1}
.arch-lines .al-finial{fill:none;stroke:var(--gold);stroke-width:1.2}
.arch-lines .al-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.astro{position:absolute;left:7.143%;top:13.067%;width:85.714%;aspect-ratio:1;border-radius:50%}
.astro-disc{position:absolute;inset:1.5%;border-radius:50%;background:radial-gradient(circle at 50% 42%,var(--astro-disc),var(--astro-disc) 58%,transparent 72%);box-shadow:0 30px 70px -30px rgba(var(--ink-rgb),.45),inset 0 0 0 1px rgba(var(--gold-rgb),.25)}
.astro-disc::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(var(--gold-rgb),.14),transparent 55%)}
.astro svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.astro .spin-slow{animation:spin 260s linear infinite}
.astro .spin-rev{animation:spin 190s linear infinite reverse}
.astro .spin-core{transform-box:fill-box;transform-origin:center;animation:spin 70s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.astro .sweep{position:absolute;inset:4%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 290deg,rgba(var(--glow-rgb),.03) 310deg,rgba(var(--glow-rgb),.18) 356deg,rgba(var(--glow-rgb),.42) 360deg);-webkit-mask:radial-gradient(circle,transparent 0 12%,#000 13% 69%,transparent 70%);mask:radial-gradient(circle,transparent 0 12%,#000 13% 69%,transparent 70%);animation:spin 14s linear infinite;pointer-events:none}
.a-rim{fill:none;stroke:var(--astro-gold);stroke-width:1.6}
.a-rim2{fill:none;stroke:var(--astro-gold);stroke-opacity:.5;stroke-width:.9}
.a-line{fill:none;stroke:var(--astro-line);stroke-opacity:.55;stroke-width:.9}
.a-dash{fill:none;stroke:var(--astro-line);stroke-opacity:.35;stroke-width:.9;stroke-dasharray:2 7}
.a-guide{fill:none;stroke:var(--astro-line);stroke-opacity:.16;stroke-width:.8;stroke-dasharray:1 6}
.a-ticks{fill:none;stroke:var(--astro-line);stroke-opacity:.7;stroke-width:1.1}
.a-nums{font-family:var(--f-arabic);font-size:17px;font-weight:700;fill:var(--astro-gold)}
.a-ring-text{font-family:var(--f-mono);font-size:12.5px;font-weight:500;letter-spacing:2px;fill:var(--astro-line);fill-opacity:.8;text-transform:uppercase}
.ro{fill:none;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.8s var(--ease-out) forwards;animation-delay:calc(var(--i,0)*.12s + .2s)}
.ro-a{stroke:var(--astro-gold);stroke-width:1.7}
.ro-b{stroke:var(--astro-line);stroke-width:1.1;stroke-opacity:.8}
.ro-c{stroke:var(--astro-gold);stroke-width:1.3}
.ro-d{stroke:var(--astro-glow);stroke-width:1;stroke-opacity:.85}
.ro-e{stroke:var(--astro-gold);stroke-width:1.1}
.ro-glow{fill:none;stroke:var(--astro-gold);stroke-width:6;stroke-opacity:.08;filter:blur(2px)}
[data-theme="dark"] .ro-glow{stroke-opacity:.22}
.a-center{fill:url(#goldGrad);stroke:var(--astro-gold);stroke-width:.8}
.a-center-dot{fill:var(--bg)}
.a-dia{fill:var(--astro-gold)}
.node{cursor:pointer;outline:none}
.node .n-hit{fill:transparent}
.node .n-ring{fill:none;stroke:var(--astro-glow);stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:nodePulse 3.6s var(--ease-out) infinite;animation-delay:calc(var(--i)*.45s)}
.node .n-dot{fill:var(--astro-glow);stroke:var(--astro-disc);stroke-width:2;transform-box:fill-box;transform-origin:center;transition:transform .35s var(--ease-out),fill .3s}
.node .n-halo{fill:none;stroke:var(--astro-gold);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6);transition:opacity .3s,transform .45s var(--ease-out)}
.node:hover .n-dot,.node.is-active .n-dot,.node:focus-visible .n-dot{fill:var(--astro-gold);transform:scale(1.35)}
.node:hover .n-halo,.node.is-active .n-halo,.node:focus-visible .n-halo{opacity:1;transform:scale(1)}
@keyframes nodePulse{0%{transform:scale(.7);opacity:.9}70%,100%{transform:scale(2.1);opacity:0}}
.pointer line{stroke:var(--astro-glow);stroke-width:1.2;stroke-opacity:.85}
.pointer .p-tip{fill:var(--astro-glow)}
.pointer .p-tail{fill:none;stroke:var(--astro-glow);stroke-width:1.2}
[data-theme="dark"] .pointer line{filter:drop-shadow(0 0 3px rgba(79,214,198,.8))}

.inscription{position:absolute;left:12%;right:12%;top:84.6%;text-align:center;display:grid;gap:4px;justify-items:center}
.inscription .ar{font-size:clamp(20px,2.35vw,31px);line-height:1.35;font-weight:700;color:var(--gold-text)}
.inscription .tr{font-family:var(--f-display);font-style:italic;font-size:clamp(13px,1.05vw,15px);line-height:1.35;color:var(--ink-2)}
.inscription .ref{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:11px 16px 11px 11px;border-radius:16px;border:1px solid var(--line-2);background:var(--surface-strong);box-shadow:var(--shadow);transition:transform .7s var(--ease-out);will-change:transform}
.chip .chip-ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;background:var(--gold-soft);border:1px solid var(--line-gold);color:var(--gold-text)}
.chip .chip-ic .ic{width:19px;height:19px}
.chip b{display:block;font-family:var(--f-display);font-size:18.5px;font-weight:600;line-height:1.1;color:var(--ink)}
.chip small{display:block;margin-top:3px;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.chip-readout{left:-7%;top:12%;max-width:290px;min-width:236px}
.chip-readout b{transition:opacity .25s}
.chip-readout .chip-ic{background:rgba(var(--glow-rgb),.12);border-color:rgba(var(--glow-rgb),.35);color:var(--glow)}
.chip-stat{right:-6%;top:55%}
.chip-hijri{left:-4%;bottom:21%}
.chip-hijri b[lang="ar"]{font-family:var(--f-arabic);font-size:19px;font-weight:700;color:var(--gold-text)}
.hud-corner{position:absolute;width:22px;height:22px;border:1.5px solid var(--gold);opacity:.7;pointer-events:none}
.hud-corner.tl{left:-2%;top:-1%;border-right:0;border-bottom:0;border-top-left-radius:6px}
.hud-corner.tr{right:-2%;top:-1%;border-left:0;border-bottom:0;border-top-right-radius:6px}
.hud-corner.bl{left:-2%;bottom:-1%;border-right:0;border-top:0;border-bottom-left-radius:6px}
.hud-corner.br{right:-2%;bottom:-1%;border-left:0;border-top:0;border-bottom-right-radius:6px}

/* ---------------------------------------------------------------- ecosystem panel (scene card + metrics) */
.eco-wrap{position:relative;z-index:2;margin-top:clamp(-96px,-7vw,-56px)}
.eco{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;border-radius:var(--r-xl);border:1px solid var(--line-2);background:var(--surface-strong);box-shadow:var(--shadow-lg);overflow:hidden}
.eco::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(var(--gold-rgb),.10),transparent 32%,transparent 70%,rgba(var(--glow-rgb),.10))}
.eco-intro{position:relative;padding:clamp(28px,3.4vw,46px);border-right:1px solid var(--line)}
.eco-intro::after{content:"";position:absolute;right:0;top:0;width:170px;height:170px;background:var(--gold);opacity:.2;-webkit-mask:var(--corner) center/170px 170px no-repeat;mask:var(--corner) center/170px 170px no-repeat;transform:scaleX(-1);transform-origin:center;pointer-events:none}
.eco-head{display:flex;align-items:center;gap:16px}
.bookline{height:3px;width:84px;margin-top:12px;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--glow));position:relative;overflow:hidden}
.bookline::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);transform:translateX(-100%);animation:bookline 3.6s ease-in-out infinite}
@keyframes bookline{60%,100%{transform:translateX(100%)}}
.eco-title{margin:22px 0 14px;font-family:var(--f-display);font-weight:600;font-size:clamp(28px,2.7vw,40px);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.eco-intro p{color:var(--muted);font-size:15.5px;line-height:1.8;max-width:34em}
.eco-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.fact{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:12px;border:1px solid var(--line);background:var(--surface-tint);font-size:12.5px;color:var(--muted)}
.fact b{display:grid;place-items:center;min-width:36px;height:30px;padding:0 6px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-family:var(--f-display);font-size:17px;font-weight:700}
.eco-metrics{display:grid;grid-template-columns:1fr 1fr}
.metric{position:relative;padding:clamp(22px,2.6vw,34px);border-bottom:1px solid var(--line);overflow:hidden;transition:background-color .4s}
.metric:nth-child(odd){border-right:1px solid var(--line)}
.metric:nth-child(n+3){border-bottom:0}
.metric:hover{background:var(--surface-tint)}
.metric .m-idx{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--faint)}
.metric strong{display:block;margin:10px 0 4px;font-family:var(--f-display);font-weight:600;font-size:clamp(48px,4.6vw,66px);line-height:1;letter-spacing:-.02em;background:linear-gradient(135deg,var(--accent) 10%,var(--glow) 55%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.metric .m-label{display:block;font-size:14px;font-weight:500;color:var(--ink-2)}
.metric .m-badge{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:5px 10px;border-radius:999px;border:1px solid var(--line-gold);background:var(--gold-soft);font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text)}
.metric.pending .m-badge{border-color:rgba(var(--glow-rgb),.35);background:rgba(var(--glow-rgb),.08);color:var(--ink-2)}
.metric.pending .m-badge i{width:6px;height:6px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 0 rgba(var(--glow-rgb),.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--glow-rgb),.55)}80%,100%{box-shadow:0 0 0 7px rgba(var(--glow-rgb),0)}}
.metric::after{content:"";position:absolute;right:-34px;bottom:-34px;width:110px;height:110px;background:var(--gold);opacity:.10;-webkit-mask:var(--rub) center/110px 110px no-repeat;mask:var(--rub) center/110px 110px no-repeat;transition:transform 1.2s var(--ease-out),opacity .4s}
.metric:hover::after{transform:rotate(45deg);opacity:.2}

/* ---------------------------------------------------------------- marquee */
.marquee{position:relative;margin-top:clamp(56px,7vw,88px);padding:18px 0;border-block:1px solid var(--line);background:linear-gradient(90deg,rgba(var(--gold-rgb),.05),rgba(var(--glow-rgb),.05));overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-row{display:flex;width:max-content;animation:mq 60s linear infinite}
.mq-row + .mq-row{margin-top:12px;animation-direction:reverse;animation-duration:74s}
.marquee:hover .mq-row{animation-play-state:paused}
.mq-group{display:flex;gap:12px;padding-right:12px}
.mq-item{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13px;color:var(--ink-2);white-space:nowrap}
.mq-item::before{content:"";width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
.mq-item.ar-item{gap:12px;padding-block:6px}
.mq-item .ar{font-size:21px;line-height:1.3;color:var(--gold-text);font-weight:700}
.mq-item em{font-family:var(--f-display);font-size:17px;font-weight:600;color:var(--ink)}
.mq-item small{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------------------------------------------------------------- sections */
.section{position:relative;padding:clamp(80px,9.5vw,128px) 0}
.section.tinted{background:linear-gradient(180deg,transparent,rgba(var(--gold-rgb),.05) 12%,rgba(var(--gold-rgb),.05) 88%,transparent)}
.section-orn{position:absolute;top:0;left:50%;width:300px;height:18px;transform:translate(-50%,-50%);background:var(--gold);opacity:.75;-webkit-mask:var(--divider) center/300px 18px no-repeat;mask:var(--divider) center/300px 18px no-repeat;pointer-events:none}
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:22px 56px;align-items:end;margin-bottom:clamp(36px,4.4vw,58px)}
.sec-head h2{margin-top:16px;font-family:var(--f-display);font-weight:600;font-size:clamp(38px,4.6vw,62px);line-height:1.02;letter-spacing:-.018em;text-wrap:balance}
.sec-head h2 em{font-style:italic;font-weight:500;color:var(--gold-text)}
.sec-head .sec-p{color:var(--muted);font-size:16px;line-height:1.8;max-width:34em;justify-self:end;padding-left:22px;border-left:1px solid var(--line-gold)}
.watermark{position:absolute;pointer-events:none;z-index:-1;font-family:var(--f-kufi);font-weight:700;line-height:1;color:var(--accent);opacity:.045;white-space:nowrap;direction:rtl}

/* ----- card base + spotlight */
.card{position:relative;isolation:isolate;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),border-color .4s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--line-2)}
.spot::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(var(--gold-rgb),.95),rgba(var(--glow-rgb),.55) 35%,transparent 62%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .45s}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(var(--glow-rgb),.09),transparent 45%);opacity:0;transition:opacity .45s}
.spot:hover::before,.spot:hover::after{opacity:1}
.flash{animation:flash 1.8s var(--ease-out)}
@keyframes flash{0%,100%{box-shadow:var(--shadow-sm)}20%{box-shadow:0 0 0 3px rgba(var(--glow-rgb),.55),0 0 50px rgba(var(--glow-rgb),.35)}}

/* ----- programs bento */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.prog{grid-column:span 6;display:flex;flex-direction:column;padding:clamp(26px,2.8vw,36px);overflow:hidden;min-height:340px}
.bento .prog:nth-child(1),.bento .prog:nth-child(4){grid-column:span 7}
.bento .prog:nth-child(2),.bento .prog:nth-child(3){grid-column:span 5}
.prog-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.oct{position:relative;width:60px;height:60px;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold-300),var(--gold-600));clip-path:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%);transition:transform .8s var(--ease-out)}
.oct::before{content:"";position:absolute;inset:1.5px;background:linear-gradient(145deg,var(--emerald-600),var(--emerald-800));clip-path:inherit}
.oct .ic{position:relative;width:26px;height:26px;color:var(--gold-300);stroke-width:1.5}
.card:hover .oct{transform:rotate(45deg)}
.card:hover .oct .ic{transform:rotate(-45deg)}
.oct .ic{transition:transform .8s var(--ease-out)}
.prog-no{margin-top:26px;display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--gold-text)}
.prog-no::after{content:"";height:1px;width:42px;background:linear-gradient(90deg,var(--line-gold),transparent)}
.prog h3{margin:10px 0 12px;font-family:var(--f-display);font-weight:600;font-size:clamp(27px,2.4vw,34px);line-height:1.08;letter-spacing:-.01em}
.prog p{color:var(--muted);font-size:15px;line-height:1.78;max-width:46ch}
.prog .kw{margin:22px 0 24px}
.prog .tlink{margin-top:auto}
.prog .watermark{right:22px;bottom:-18px;font-size:clamp(110px,11vw,168px)}
.prog .corner{position:absolute;right:0;top:0;width:120px;height:120px;background:var(--gold);opacity:.14;-webkit-mask:var(--corner) right top/120px 120px no-repeat;mask:var(--corner) right top/120px 120px no-repeat;transform:scaleX(-1);transform-origin:center;pointer-events:none;transition:opacity .4s}
.prog:hover .corner{opacity:.3}

/* ----- mihrab training cards */
.mihrab-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.mihrab{position:relative;padding:1.5px;-webkit-mask:var(--mihrab) top center/100% auto no-repeat;mask:var(--mihrab) top center/100% auto no-repeat;background:radial-gradient(260px circle at var(--mx,50%) var(--my,-40%),rgba(var(--gold-rgb),.95),transparent 60%),linear-gradient(180deg,var(--line-gold),var(--line) 55%)}
.mh{position:relative;display:flex;transition:transform .6s var(--ease-out),filter .6s var(--ease-out)}
.mh > .mihrab{flex:1}
.mh:hover{transform:translateY(-8px);filter:drop-shadow(0 24px 26px rgba(var(--ink-rgb),.16))}
.mihrab-in{position:relative;height:100%;display:flex;flex-direction:column;-webkit-mask:var(--mihrab) top center/100% auto no-repeat;mask:var(--mihrab) top center/100% auto no-repeat;background:linear-gradient(180deg,rgba(var(--gold-rgb),.10) 0%,transparent 42%),var(--surface-solid);padding:0 clamp(20px,1.9vw,28px) 30px}
.mh-head{position:relative;aspect-ratio:200/142;margin-inline:calc(-1*clamp(20px,1.9vw,28px));display:grid;place-items:center}
.mh-head svg.mh-arch{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mh-arch .mh-line{fill:none;stroke:var(--gold);stroke-opacity:.6;stroke-width:1;vector-effect:non-scaling-stroke}
.mh-arch .mh-chain{stroke:var(--gold);stroke-opacity:.55;stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.mh-light{position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 58%,rgba(var(--gold-rgb),.38),transparent 70%);opacity:0;transition:opacity .6s}
.mh:hover .mh-light{opacity:1}
.mh-lamp{position:relative;top:10%;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,var(--surface-solid),var(--bg-2));border:1px solid var(--line-gold);color:var(--accent);box-shadow:0 10px 24px -12px rgba(var(--ink-rgb),.35);transition:box-shadow .6s,color .4s,transform .6s var(--ease-out)}
[data-theme="dark"] .mh-lamp{color:var(--gold-300)}
.mh-lamp .ic{width:28px;height:28px;stroke-width:1.4}
.mh:hover .mh-lamp{transform:translateY(-3px);box-shadow:0 0 0 6px rgba(var(--gold-rgb),.12),0 0 40px rgba(var(--gold-rgb),.55);color:var(--gold-text)}
.mh-head::after{content:"";position:absolute;left:6%;right:6%;bottom:0;height:1px;background:var(--gold);opacity:.55}
.mh-num{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;padding-top:16px}
.mh-num span{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--gold-text)}
.mh-num i{font-size:22px;line-height:1;color:var(--gold-text);font-weight:700}
.mihrab h3{font-family:var(--f-display);font-weight:600;font-size:clamp(23px,1.9vw,27px);line-height:1.12;margin-bottom:10px}
.mihrab p{color:var(--muted);font-size:14px;line-height:1.72}
.mh-tags{margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;gap:6px}
.mh-tags span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:6px;border:1px solid var(--line);color:var(--muted)}
.swipe-hint{display:none}

/* ----- journals */
.j-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}
.seg{position:relative;display:flex;gap:2px;padding:5px;border-radius:16px;border:1px solid var(--line-2);background:var(--surface);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow-x:auto;scrollbar-width:none;max-width:100%}
.seg::-webkit-scrollbar{display:none}
.seg button{position:relative;z-index:1;padding:9px 15px;border-radius:11px;font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap;transition:color .3s}
.seg button:hover{color:var(--ink)}
.seg button.active{color:var(--on-accent)}
.seg-ind{position:absolute;z-index:0;left:0;top:5px;bottom:5px;width:0;border-radius:11px;background:linear-gradient(135deg,var(--emerald-600),var(--emerald-800));box-shadow:inset 0 0 0 1px rgba(232,184,84,.45),0 8px 18px -8px rgba(1,80,60,.7);transition:transform .55s var(--ease-out),width .55s var(--ease-out)}
[data-theme="dark"] .seg-ind{background:linear-gradient(135deg,var(--gold-300),var(--gold-600))}
.j-count{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.j-count b{color:var(--gold-text);font-weight:500}
.journal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.journal{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,2.4vw,30px);padding:clamp(22px,2.4vw,30px);overflow:hidden}
.journal[hidden]{display:none}
.journal.pop{animation:pop .6s var(--ease-out)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.cover{perspective:900px;align-self:start;padding-top:4px}
.book{position:relative;width:128px;aspect-ratio:3/4.1;transform-style:preserve-3d;transform:rotateY(-26deg) rotateX(4deg);transition:transform .9s var(--ease-out)}
.journal:hover .book{transform:rotateY(-6deg) rotateX(0) translateY(-4px)}
.book-face{position:absolute;inset:0;border-radius:3px 9px 9px 3px;overflow:hidden;transform:translateZ(9px);background:var(--journal-cover) center/cover no-repeat,linear-gradient(145deg,var(--c1),var(--c2));box-shadow:inset 7px 0 0 rgba(0,0,0,.18),inset 8px 0 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.1)}
.book-face::before{content:"";position:absolute;inset:0;background:var(--c3);opacity:.35;-webkit-mask:var(--pat) 0 0/var(--ps) repeat;mask:var(--pat) 0 0/var(--ps) repeat}
.book-face::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.28),transparent 30%,transparent 70%,rgba(255,255,255,.06));pointer-events:none}
.book-frame{position:absolute;inset:9px 8px 9px 14px;border:1px solid rgba(var(--c3-rgb),.7);border-radius:2px 5px 5px 2px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:9px 6px 8px;text-align:center;color:rgb(var(--c3-rgb))}
.book-frame::before,.book-frame::after{content:"";position:absolute;width:12px;height:12px;border:1px solid rgba(var(--c3-rgb),.7);border-radius:50%}
.book-frame::before{left:-6px;top:-6px}
.book-frame::after{right:-6px;bottom:-6px}
.book-top{font-family:var(--f-mono);font-size:7.5px;letter-spacing:.24em;text-transform:uppercase;opacity:.85}
.book-medal{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(var(--c3-rgb),.8);background:rgba(0,0,0,.18);box-shadow:0 0 0 4px rgba(var(--c3-rgb),.12)}
.book-medal .ic{width:22px;height:22px;stroke-width:1.4}
.book-title{font-family:var(--f-display);font-weight:600;font-size:13px;line-height:1.08;color:#FFF8E6}
.book-pages{position:absolute;top:3px;bottom:3px;right:-9px;width:18px;transform:rotateY(90deg);background:repeating-linear-gradient(90deg,#F4EEDF 0 1px,#DCD2BD 1px 2px);border-radius:1px}
.book-back{position:absolute;inset:0;border-radius:3px 9px 9px 3px;transform:translateZ(-9px);background:var(--c2);box-shadow:0 22px 30px -12px rgba(0,0,0,.45)}
.book-shadow{position:absolute;left:8%;right:-6%;bottom:-16px;height:18px;border-radius:50%;background:radial-gradient(ellipse,rgba(var(--ink-rgb),.35),transparent 70%);filter:blur(2px);transform:translateZ(-20px)}
.j-body{display:flex;flex-direction:column;min-width:0}
.j-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.j-disc{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text)}
.journal h3{margin:14px 0 10px;font-family:var(--f-display);font-weight:600;font-size:clamp(23px,2vw,28px);line-height:1.1;letter-spacing:-.005em}
.journal p{color:var(--muted);font-size:14.5px;line-height:1.75}
.journal .kw{margin:18px 0 20px}
.j-links{margin-top:auto;display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.j-empty{grid-column:1/-1;padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--line-2);border-radius:var(--r-lg)}

/* ----- activities */
.act-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;align-items:stretch}
.feature{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);padding:clamp(30px,3.4vw,46px);color:#F4EEDF;background:radial-gradient(120% 90% at 100% 0%,rgba(79,214,198,.18),transparent 55%),linear-gradient(150deg,#0A694F 0%,#01503C 42%,#022A20 100%);box-shadow:var(--shadow-lg);display:flex;flex-direction:column}
.feature::before{content:"";position:absolute;inset:0;z-index:-1;background:#E8B854;opacity:.16;-webkit-mask:var(--lattice) 0 0/64px 64px repeat,linear-gradient(200deg,#000,transparent 70%);-webkit-mask-composite:source-in;mask:var(--lattice) 0 0/64px 64px repeat,linear-gradient(200deg,#000,transparent 70%);mask-composite:intersect}
.feature::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ang,0deg),rgba(232,184,84,.1),rgba(232,184,84,.9) 12%,rgba(79,214,198,.9) 22%,rgba(232,184,84,.1) 34%,rgba(232,184,84,.1));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:angle 7s linear infinite;pointer-events:none}
.feature .label{color:var(--gold-300)}
.feature .label .no{color:#F4EEDF;border-color:rgba(232,184,84,.45)}
.feature h3{margin:18px 0 14px;font-family:var(--f-display);font-weight:600;font-size:clamp(36px,3.6vw,52px);line-height:1.02;letter-spacing:-.015em;color:#FFF8E6}
.feature p{color:rgba(244,238,223,.82);font-size:15.5px;line-height:1.8;max-width:34em}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 30px}
.pills span{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;border:1px solid rgba(232,184,84,.35);background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12.5px;color:#F4EEDF}
.pills span .ic{width:14px;height:14px;color:var(--gold-300)}
.feature .btn{margin-top:auto;width:max-content}
.feature-star{position:absolute;right:-70px;bottom:-70px;width:280px;height:280px;z-index:-1;opacity:.5;animation:spin 90s linear infinite}
.feature-star path,.feature-star circle{fill:none;stroke:#E8B854;stroke-width:1;stroke-opacity:.5}
.desk{padding:clamp(26px,3vw,38px);display:flex;flex-direction:column}
.desk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}
.desk h3{font-family:var(--f-display);font-weight:600;font-size:30px;line-height:1.1}
.desk-head p{color:var(--muted);font-size:13.5px;margin-top:6px}
.desk-live{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(var(--glow-rgb),.35);background:rgba(var(--glow-rgb),.08);font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.desk-live i{width:6px;height:6px;border-radius:50%;background:var(--glow);animation:pulse 2s infinite}
.desk-list{list-style:none;margin:14px 0 0;padding:0;position:relative}
.desk-list::before{content:"";position:absolute;left:23px;top:30px;bottom:30px;width:1px;background:linear-gradient(180deg,var(--line-gold),var(--line) 50%,var(--line-gold))}
.desk-item{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 12px 16px 0;border-radius:16px;transition:background-color .35s,padding .45s var(--ease-out)}
.desk-item + .desk-item{border-top:1px dashed var(--line)}
.desk-item:hover{background:var(--surface-tint);padding-left:8px}
.badge-oct{position:relative;width:48px;height:48px;display:grid;place-items:center;background:var(--line-gold);clip-path:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%)}
.badge-oct::before{content:"";position:absolute;inset:1px;background:var(--surface-solid);clip-path:inherit}
.badge-oct b{position:relative;font-family:var(--f-mono);font-size:12px;font-weight:500;color:var(--gold-text)}
.desk-item strong{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ink)}
.desk-item strong .ic{width:16px;height:16px;color:var(--gold)}
.desk-item small{display:block;margin-top:3px;color:var(--muted);font-size:13.5px;line-height:1.55}
.desk-item .go{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);opacity:0;transform:translateX(-8px);transition:all .4s var(--ease-out)}
.desk-item:hover .go{opacity:1;transform:none;color:var(--gold-text);border-color:var(--line-gold)}
.desk-item .go .ic{width:15px;height:15px}

/* ----- participation journey */
.journey{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;--jp:0}
.journey-track{position:absolute;left:12.5%;right:12.5%;top:30px;height:2px;background:var(--line-2);border-radius:2px;overflow:hidden}
.journey-track i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--jp));background:linear-gradient(90deg,var(--gold),var(--glow));box-shadow:0 0 12px rgba(var(--glow-rgb),.7)}
.j-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.j-node{position:relative;z-index:1;width:62px;height:62px;display:grid;place-items:center;margin-bottom:22px}
.j-node svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.j-node .jn-star{fill:var(--surface-solid);stroke:var(--line-gold);stroke-width:1.2;transition:fill .6s,stroke .6s}
.j-node .jn-ring{fill:none;stroke:var(--glow);stroke-width:1;opacity:0;transform-origin:center;transform-box:fill-box}
.j-node b{position:relative;font-family:var(--f-mono);font-size:13px;font-weight:500;color:var(--gold-text);transition:color .6s}
.j-step.lit .jn-star{fill:var(--accent);stroke:var(--gold)}
.j-step.lit .j-node b{color:var(--on-accent)}
.j-step.lit .jn-ring{animation:nodePulse 2.8s var(--ease-out) infinite}
.j-card{width:100%;flex:1;padding:26px 22px 26px;display:flex;flex-direction:column;align-items:center}
.j-card .ic-wrap{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--gold-soft);border:1px solid var(--line-gold);color:var(--gold-text);margin-bottom:16px}
.j-card .ic-wrap .ic{width:22px;height:22px}
.j-card h3{font-family:var(--f-display);font-weight:600;font-size:25px;line-height:1.12;margin-bottom:8px}
.j-card p{color:var(--muted);font-size:14px;line-height:1.7}

/* ----- about / CTA */
.cta{position:relative;isolation:isolate;overflow:hidden;border-radius:clamp(26px,3vw,40px);padding:clamp(34px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;color:#F4EEDF;background:radial-gradient(90% 120% at 100% 100%,rgba(79,214,198,.20),transparent 55%),radial-gradient(70% 90% at 0% 0%,rgba(232,184,84,.16),transparent 55%),linear-gradient(140deg,#0A694F 0%,#01503C 38%,#02281F 100%);box-shadow:var(--shadow-lg)}
[data-theme="dark"] .cta{background:radial-gradient(90% 120% at 100% 100%,rgba(79,214,198,.16),transparent 55%),radial-gradient(70% 90% at 0% 0%,rgba(232,184,84,.14),transparent 55%),linear-gradient(140deg,#0B3B2F 0%,#062A21 45%,#031611 100%);border:1px solid rgba(232,184,84,.18)}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:#E8B854;opacity:.12;-webkit-mask:var(--rub) 0 0/56px 56px repeat,radial-gradient(ellipse 70% 90% at 80% 50%,#000,transparent 72%);-webkit-mask-composite:source-in;mask:var(--rub) 0 0/56px 56px repeat,radial-gradient(ellipse 70% 90% at 80% 50%,#000,transparent 72%);mask-composite:intersect}
.cta .label{color:var(--gold-300)}
.cta .label .no{color:#F4EEDF;border-color:rgba(232,184,84,.45)}
.cta h2{margin:18px 0 16px;font-family:var(--f-display);font-weight:600;font-size:clamp(36px,4.2vw,58px);line-height:1.02;letter-spacing:-.015em;color:#FFF8E6;text-wrap:balance}
.cta h2 em{font-style:italic;font-weight:500;color:var(--gold-300)}
.cta p{color:rgba(244,238,223,.8);font-size:16px;line-height:1.8;max-width:34em}
.cta .btn{margin-top:30px}
.verse{position:relative;margin:0;padding:clamp(26px,3vw,40px);border-radius:26px;border:1px solid rgba(232,184,84,.3);background:rgba(2,26,20,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center}
.verse::before,.verse::after{content:"";position:absolute;left:50%;width:14px;height:14px;background:#E8B854;transform:translateX(-50%) rotate(45deg)}
.verse::before{top:-7px}
.verse::after{bottom:-7px}
.verse .ar{font-size:clamp(26px,2.7vw,38px);line-height:1.9;font-weight:700;color:var(--gold-300)}
.verse .rule{display:block;width:120px;height:18px;margin:10px auto;background:#E8B854;opacity:.7;-webkit-mask:var(--divider) center/300px 18px no-repeat;mask:var(--divider) center/300px 18px no-repeat}
.verse figcaption{font-family:var(--f-display);font-style:italic;font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:rgba(244,238,223,.9)}
.verse cite{display:block;margin-top:12px;font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-300)}
.cta-rosette{position:absolute;right:-12%;top:50%;width:min(620px,70%);aspect-ratio:1;transform:translateY(-50%);z-index:-1;opacity:.22;pointer-events:none}
.cta-rosette svg{width:100%;height:100%;animation:spin 160s linear infinite}
.cta-rosette path,.cta-rosette circle{fill:none;stroke:#E8B854;stroke-width:1}

/* ---------------------------------------------------------------- footer */
.footer{position:relative;overflow:hidden;margin-top:clamp(40px,6vw,80px);padding:0 0 30px;color:#D9D2C1;background:linear-gradient(180deg,#022A20,#021A14)}
[data-theme="dark"] .footer{background:linear-gradient(180deg,#03110D,#020B08);border-top:1px solid var(--line)}
.footer-band{height:28px;background:#E8B854;opacity:.55;-webkit-mask:var(--band) 0 0/48px 28px repeat-x;mask:var(--band) 0 0/48px 28px repeat-x}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:36px;padding-top:clamp(48px,6vw,72px)}
.footer .brand-name{color:#FFF8E6}
.footer .brand-sub{color:#9FB3AA}
.footer-about{margin-top:18px;max-width:390px;font-size:14px;line-height:1.8;color:#B7C2BC}
.footer-verse{margin-top:18px;display:inline-flex;align-items:center;gap:12px;padding:10px 16px;border-radius:14px;border:1px solid rgba(232,184,84,.25);background:rgba(255,255,255,.03)}
.footer-verse .ar{font-size:20px;color:var(--gold-300);line-height:1.3}
.footer-verse small{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#9FB3AA}
.footer h4{margin:0 0 16px;font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-300)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer ul a{position:relative;font-size:14px;color:#C9D1CC;display:inline-flex;align-items:center;transition:color .25s}
.footer ul a::before{content:"";position:absolute;left:-13px;top:50%;width:5px;height:5px;margin-top:-2.5px;background:#E8B854;transform:rotate(45deg) scale(0);transition:transform .35s var(--ease-out)}
.footer ul a:hover{color:#FFF8E6}
.footer ul a:hover::before{transform:rotate(45deg) scale(1)}
.copyright{margin-top:48px;padding-top:22px;border-top:1px solid rgba(232,184,84,.16);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:12.5px;color:#93A69D}
.copyright .demo-note{color:#D8B86C}
.footer-kufi{position:absolute;right:3%;bottom:40px;font-family:var(--f-kufi);font-size:clamp(120px,16vw,240px);line-height:1;color:#E8B854;opacity:.045;pointer-events:none;direction:rtl}

/* ---------------------------------------------------------------- command palette */
.cmdk{position:fixed;inset:0;z-index:300;display:flex;justify-content:center;align-items:flex-start;padding:max(10vh,70px) 16px 16px}
.cmdk[hidden]{display:none}
.cmdk-backdrop{position:absolute;inset:0;background:rgba(2,14,10,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade .25s ease}
.cmdk-panel{position:relative;width:min(700px,100%);max-height:min(640px,78vh);display:flex;flex-direction:column;overflow:hidden;border-radius:24px;border:1px solid var(--line-2);background:var(--surface-strong);-webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);box-shadow:var(--shadow-lg),0 0 0 1px rgba(var(--gold-rgb),.14),0 0 80px -20px rgba(var(--glow-rgb),.4);animation:popIn .4s var(--ease-out)}
.cmdk-panel::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),var(--glow),transparent)}
@keyframes fade{from{opacity:0}}
@keyframes popIn{from{opacity:0;transform:translateY(-12px) scale(.97)}}
.cmdk-input{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.cmdk-input .ic{width:22px;height:22px;color:var(--gold)}
.cmdk-input input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:17px;color:var(--ink)}
.cmdk-input input::placeholder{color:var(--faint)}
.cmdk-input input::-webkit-search-cancel-button{display:none}
.cmdk-ai{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:linear-gradient(90deg,rgba(var(--gold-rgb),.16),rgba(var(--glow-rgb),.16));border:1px solid var(--line-2);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.cmdk-ai .ic{width:12px;height:12px;color:var(--glow)}
.cmdk-list{overflow-y:auto;overscroll-behavior:contain;padding:8px 10px 12px}
.cmdk-group{padding:14px 12px 6px;display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.cmdk-group::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-gold),transparent)}
.cmdk-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 12px;border-radius:14px;cursor:pointer;transition:background-color .15s}
.cmdk-item[aria-selected="true"]{background:linear-gradient(90deg,rgba(var(--glow-rgb),.13),rgba(var(--gold-rgb),.08));box-shadow:inset 0 0 0 1px rgba(var(--glow-rgb),.28)}
.cmdk-item .ci{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface-tint);color:var(--accent)}
[data-theme="dark"] .cmdk-item .ci{color:var(--gold-300)}
.cmdk-item .ci .ic{width:18px;height:18px}
.cmdk-item strong{display:block;font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-item small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-item mark{background:rgba(var(--gold-rgb),.3);color:inherit;border-radius:3px;padding:0 1px}
.cmdk-item .go{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);opacity:0;transition:opacity .15s}
.cmdk-item .go .ic{width:14px;height:14px}
.cmdk-item[aria-selected="true"] .go{opacity:1;color:var(--gold-text)}
.cmdk-empty{padding:36px 20px 30px;text-align:center;color:var(--muted);font-size:14px}
.cmdk-empty b{display:block;font-family:var(--f-display);font-size:24px;font-weight:600;color:var(--ink);margin-bottom:6px}
.cmdk-empty .suggest{justify-content:center;margin-top:16px}
.cmdk-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:11px 18px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:10.5px;color:var(--muted);background:var(--surface-tint)}
.cmdk-foot span{display:inline-flex;align-items:center;gap:6px}
.cmdk-foot .count{margin-left:auto;color:var(--gold-text)}

.cmdk-open body{overflow:hidden;padding-right:var(--sbw,0px)}
.mh.flash{animation:flashMh 1.8s var(--ease-out)}
@keyframes flashMh{20%{filter:drop-shadow(0 0 22px rgba(var(--glow-rgb),.7))}}
.chip{animation:floaty 7s ease-in-out infinite}
.chip-stat{animation-delay:-2.3s}.chip-hijri{animation-delay:-4.6s}
@keyframes floaty{50%{translate:0 -9px}}
/* ---------------------------------------------------------------- back to top */
.to-top{position:fixed;right:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);z-index:55;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--surface-strong);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow);color:var(--ink);opacity:0;transform:translateY(18px) scale(.9);pointer-events:none;transition:opacity .45s,transform .55s var(--ease-out)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top .ring{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);transform:rotate(-90deg)}
.to-top .ring circle{fill:none;stroke:url(#ringGrad);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:163.4;stroke-dashoffset:calc(163.4 - 163.4*var(--sp,0))}
.to-top .ic{width:20px;height:20px}

/* ---------------------------------------------------------------- reveal */
.js .rv{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .rv-scale{opacity:0;transform:scale(.94);transition:opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out)}
.js .rv-scale.in{opacity:1;transform:none}
.js h1.display .w{opacity:0;transform:translateY(.4em);filter:blur(6px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out);transition-delay:calc(var(--i)*55ms + .1s)}
.js .loaded h1.display .w{opacity:1;transform:none;filter:none}
.paused,.paused *,.paused ::before,.paused ::after{animation-play-state:paused!important}

/* ---------------------------------------------------------------- view transition (theme) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:vtReveal .75s var(--ease-out)}
@keyframes vtReveal{from{clip-path:circle(0 at var(--vt-x,90%) var(--vt-y,4%))}to{clip-path:circle(var(--vt-r,150vmax) at var(--vt-x,90%) var(--vt-y,4%))}}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1200px){
  .hud .hud-greg,.hud .sep-greg{display:none}
  .search-btn .lbl{display:none}
  .chip-readout{left:-3%}
  .chip-stat{right:-3%}
  .chip-hijri{display:none}
  .identity .logo{display:none}
}
@media (min-width:961px) and (max-width:1180px){
  .chip{padding:8px 12px 8px 8px;gap:9px}
  .chip .chip-ic{width:30px;height:30px}
  .chip b{font-size:15.5px}
  .chip-readout{top:4%;min-width:0;max-width:250px}
  .inscription .tr{display:none}
}
@media (max-width:1080px){
  .menu{display:none}
  .nav-tools{margin-left:auto}
  .hamb{display:inline-flex}
  .nav-cta{display:none}
}
@media (max-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-visual{max-width:520px;margin-top:10px}
  .eco{grid-template-columns:minmax(0,1fr)}
  .eco-intro{border-right:0;border-bottom:1px solid var(--line)}
  .sec-head{grid-template-columns:minmax(0,1fr)}
  .sec-head .sec-p{justify-self:start}
  .bento .prog:nth-child(n){grid-column:span 6}
  .mihrab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .journal-grid{grid-template-columns:minmax(0,1fr)}
  .act-grid{grid-template-columns:minmax(0,1fr)}
  .journey{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .journey-track{display:none}
  .cta{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid > :first-child{grid-column:1/-1}
}
@media (max-width:680px){
  body{font-size:15.5px}
  .util-links .ar,.util-links .util-sep{display:none}
  .hud .hud-time-wrap{display:none}
  .eyebrow{border-radius:16px;font-size:10.5px;letter-spacing:.05em}
  .identity .logo{display:none}
  .nav{height:68px;gap:10px}
  .brand-name{font-size:17px;letter-spacing:.12em}
  .brand-sub{font-size:9px}
  .logo.sm{width:42px;height:42px;border-radius:12px}
  .search-btn kbd{display:none}
  .search-btn{padding:0;width:42px}
  .search{padding-left:14px}
  .search kbd{display:none}
  .search .btn{padding:0 14px}
  .search .btn .lbl{display:none}
  .hero-actions .btn{flex:1 1 auto}
  .chip{padding:8px 12px 8px 8px;gap:9px;border-radius:13px}
  .chip .chip-ic{width:30px;height:30px}
  .chip b{font-size:15px}
  .chip small{font-size:9px}
  .chip-readout{left:-2%;top:3%;min-width:0;max-width:74%}
  .chip-stat{right:-2%;top:60%}
  .chip-hijri{display:none}
  .inscription .tr{display:none}
  .inscription{top:85.5%}
  .eco-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric{padding:20px}
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento .prog:nth-child(n){grid-column:auto;min-height:0}
  .mihrab-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(-1*var(--gutter));padding:4px var(--gutter) 18px;scrollbar-width:none}
  .mihrab-grid::-webkit-scrollbar{display:none}
  .mh{flex:0 0 80%;scroll-snap-align:center}
  .swipe-hint{display:flex;align-items:center;gap:8px;margin-top:6px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .swipe-hint .ic{width:16px;height:16px;color:var(--gold)}
  .journal{grid-template-columns:minmax(0,1fr)}
  .cover{justify-self:start}
  .book{width:108px}
  .j-controls{flex-direction:column;align-items:stretch}
  .journey{grid-template-columns:1fr;row-gap:16px}
  .j-step{flex-direction:row;align-items:stretch;text-align:left;gap:16px}
  .j-node{margin:0;flex:none;width:54px;height:54px}
  .j-card{align-items:flex-start;padding:22px}
  .j-step:not(:last-child)::after{content:"";position:absolute;left:26px;top:58px;bottom:-18px;width:2px;background:linear-gradient(180deg,var(--gold),var(--glow));opacity:.35}
  .desk-item{grid-template-columns:44px minmax(0,1fr)}
  .desk-item .go{display:none}
  .badge-oct{width:44px;height:44px}
  .desk-list::before{left:21px}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .copyright{flex-direction:column}
  .to-top{width:48px;height:48px}
  .cmdk{padding-top:14px}
  .cmdk-foot .hide-sm{display:none}
  .cmdk-ai{display:none}
}
@media (max-width:420px){
  .eco-facts .fact{flex:1 1 100%}
  .brand-sub{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js .rv,.js .rv-scale,.js h1.display .w{opacity:1!important;transform:none!important;filter:none!important}
  .arch-fill::after,.astro .sweep{display:none}
}
@media print{
  .ambient,.utility,.topbar,.to-top,.cmdk,.progress,.hero-visual,.marquee{display:none!important}
  body{background:#fff;color:#000}
  .js .rv{opacity:1;transform:none}
}

/* =========================================================
   REAL JOURNAL COVERS — preserves existing 3D book effects
   ========================================================= */
.cover[style*="--journal-cover"] .book-face::before{
  display:none;
}
.cover[style*="--journal-cover"] .book-frame{
  display:none;
}
.cover[style*="--journal-cover"] .book-face::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,.22),
      transparent 28%,
      transparent 70%,
      rgba(0,0,0,.08)
    );
  pointer-events:none;
}


/* =========================================================
   TEAM WORK / CMS
   ========================================================= */
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.team-card{position:relative;overflow:hidden;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:transform .45s var(--ease-out),box-shadow .45s,border-color .3s}
.team-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:var(--line-gold)}
.team-photo{position:relative;aspect-ratio:4/4.6;overflow:hidden;background:linear-gradient(145deg,var(--bg-2),var(--bg-3))}
.team-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(2,26,20,.28),transparent 42%);pointer-events:none}
.team-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .8s var(--ease-out)}
.team-card:hover .team-photo img{transform:scale(1.035)}
.team-photo-fallback{width:100%;height:100%;display:grid;place-items:center;font-family:var(--f-display);font-size:54px;color:var(--gold-text);background:radial-gradient(circle at 50% 30%,rgba(var(--gold-rgb),.18),transparent 42%),var(--surface-tint)}
.team-body{padding:20px}
.team-role{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);font-weight:600}
.team-card h3{margin-top:8px;font-family:var(--f-display);font-size:25px;line-height:1.08;font-weight:600}
.team-degree{margin-top:5px;color:var(--muted);font-size:12px}
.team-bio{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.team-skills{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.team-skills span{padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface-tint);font-size:10px;color:var(--ink-2)}
.team-open{margin-top:16px;display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-weight:700;font-size:12.5px}
.team-empty{grid-column:1/-1;text-align:center;padding:34px;border:1px dashed var(--line-2)}
.team-empty-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;margin:0 auto 12px;background:var(--gold-soft);color:var(--gold-text)}
.team-empty h3{font-family:var(--f-display);font-size:25px}.team-empty p{max-width:630px;margin:8px auto 0;color:var(--muted)}
.team-modal{position:fixed;inset:0;z-index:250;display:grid;place-items:center;padding:22px}
.team-modal[hidden]{display:none}
.team-modal-backdrop{position:absolute;inset:0;background:rgba(2,26,20,.56);backdrop-filter:blur(9px)}
.team-modal-card{position:relative;z-index:1;width:min(780px,100%);max-height:min(86vh,820px);overflow:auto;border-radius:var(--r-xl);border:1px solid var(--line-gold);background:var(--surface-strong);box-shadow:var(--shadow-lg);padding:clamp(24px,4vw,42px)}
.team-modal-close{position:absolute;right:16px;top:14px;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:var(--surface);font-size:24px;color:var(--ink);z-index:2}
.tm-head{display:grid;grid-template-columns:160px 1fr;gap:26px;align-items:center}
.tm-photo{width:160px;aspect-ratio:1/1.1;border-radius:24px;overflow:hidden;background:var(--bg-2);box-shadow:var(--shadow)}
.tm-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.tm-kicker{font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;color:var(--gold-text);text-transform:uppercase}
.tm-name{font-family:var(--f-display);font-size:clamp(32px,5vw,48px);line-height:1;margin-top:6px}
.tm-degree{color:var(--muted);margin-top:7px}.tm-expertise{margin-top:10px;color:var(--ink-2)}
.tm-body{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.tm-body p{white-space:pre-line;color:var(--ink-2);line-height:1.8}
.tm-contact{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.tm-contact a{padding:8px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:12px}
@media(max-width:1050px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.team-grid{grid-template-columns:1fr}.tm-head{grid-template-columns:1fr}.tm-photo{width:130px}}

.wm-announcement{position:relative;z-index:70;background:linear-gradient(90deg,#063a2d,#0b5f4a);color:#f8f3df;border-bottom:1px solid rgba(232,184,84,.3);font:600 12px/1.4 var(--f-body)}.wm-announcement .container{min-height:38px;display:flex;align-items:center;gap:12px}.wm-announcement b{color:var(--gold);font:700 10px var(--f-mono);letter-spacing:.12em}.wm-announcement a{margin-left:auto;color:#bceee5}

/* OJS LOGIN ACCESS */
.ojs-login-btn{margin-left:8px;padding:8px 12px!important;border:1px solid rgba(232,184,84,.38);border-radius:999px;color:var(--gold)!important;background:linear-gradient(135deg,rgba(232,184,84,.08),rgba(84,216,202,.06));font-weight:700!important;white-space:nowrap}
.ojs-login-btn:hover{border-color:rgba(232,184,84,.68);background:linear-gradient(135deg,rgba(232,184,84,.14),rgba(84,216,202,.1));transform:translateY(-1px)}
.ojs-footer-access{width:min(1180px,calc(100% - 36px));margin:0 auto 20px;padding:14px 16px;border:1px solid rgba(232,184,84,.2);border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(135deg,rgba(232,184,84,.05),rgba(84,216,202,.04))}
.ojs-footer-access span{font:700 10px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ojs-footer-access a{color:var(--gold);font-weight:700}
@media(max-width:860px){.ojs-login-btn{margin-left:0}}


/* WIN MANGAJI v16 — COMPACT SECTION RHYTHM */
main > section,section.section,section[id]{padding-top:54px!important;padding-bottom:54px!important}
.sec-head{margin-bottom:24px!important}
.hero{padding-bottom:58px!important}
#journals,#team,#programs,#training,#agenda,#activities,#about{scroll-margin-top:90px}
.bento,.mihrab-grid,.journal-grid,.team-slider-shell,.feed,.about-grid{margin-top:18px!important}
@media(max-width:760px){
  main > section,section.section,section[id]{padding-top:40px!important;padding-bottom:40px!important}
  .sec-head{margin-bottom:18px!important}
  .hero{padding-bottom:44px!important}
}

/* AGENDA MODULE v16 */
.agenda-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.agenda-card{display:flex;flex-direction:column;min-height:220px}
.agenda-card h3{margin:12px 0 8px}.agenda-card p{margin:8px 0 14px}
.agenda-meta{color:var(--gold);font:600 11px/1.5 var(--f-mono);letter-spacing:.04em}
.agenda-organizer{color:var(--muted);margin-top:auto;margin-bottom:12px}
@media(max-width:900px){.agenda-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.agenda-grid{grid-template-columns:1fr}}