/* Moneeb-e — wordmark, navigation, buttons, cursor */
/* ========== WORDMARK ========== */
.wm{display:inline-flex; align-items:center; gap:7px; direction:ltr; line-height:1; color:var(--text)}
.wm-ar{font-family:var(--f-display); font-weight:500; font-size:1.18em; letter-spacing:.01em}
.wm-en{font-family:var(--f-latin); font-weight:600; font-size:1.06em; letter-spacing:-.005em}
.wm .gem{width:1.02em; height:1.02em}
/* ========== NAVIGATION ========== */
.nav{position:sticky; top:0; z-index:50; transition:background-color var(--d-mid) var(--ease), border-color var(--d-mid) var(--ease), backdrop-filter var(--d-mid) var(--ease); border-bottom:1px solid transparent}
.nav.is-solid{background:color-mix(in oklab,var(--bg) 72%,transparent); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border-bottom-color:var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); height:76px}
.nav-brand{font-size:19px; display:flex; align-items:center; min-height:44px}
.nav-links{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:4px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface)}
.nav-link{position:relative; display:flex; align-items:center; min-height:38px; padding:0 14px; border-radius:var(--r-pill); font-size:.92rem; color:var(--muted); transition:color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease)}
.nav-link:hover{color:var(--text)}
.nav-link.is-active{color:var(--text); background:var(--surface-2)}
.nav-link.is-active::after{content:""; position:absolute; bottom:5px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--gold)}
.nav-tools{display:flex; align-items:center; gap:var(--s-2)}
.icon-btn{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer; transition:border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease)}
.icon-btn:hover{border-color:var(--line-2)}
.icon-btn svg{width:18px; height:18px}
.mb .i-sun{display:none} .mb[data-theme="light"] .i-sun{display:block} .mb[data-theme="light"] .i-moon{display:none}
.menu-btn{display:none}
.mnav{position:fixed; inset:76px 0 auto 0; z-index:49; background:color-mix(in oklab,var(--bg) 94%,transparent); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--line); padding:12px var(--gutter) 28px; animation:menu-in var(--d-mid) var(--ease) both}
.mnav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.mnav a{display:flex; align-items:center; justify-content:space-between; min-height:56px; font-family:var(--f-display); font-size:1.35rem; border-bottom:1px solid var(--line)}
.mnav a span{font-family:var(--f-latin); font-size:var(--t-micro); color:var(--gold); letter-spacing:.14em}
@keyframes menu-in{from{opacity:0; transform:translateY(-8px)}}
/* ========== BUTTONS ========== */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:54px; padding:0 26px; border-radius:var(--r-pill); font-weight:500; font-size:1rem; cursor:pointer; border:1px solid transparent; transition:transform var(--d-mid) var(--ease), background-color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); will-change:transform}
.btn svg{width:18px; height:18px; transition:transform var(--d-mid) var(--ease)}
.btn:hover svg{transform:translateX(-4px)}
.btn-primary{background:var(--gold); color:var(--on-gold); box-shadow:0 12px 40px -12px var(--glow)}
.btn-primary:hover{background:var(--gold-2)}
.mb[data-theme="light"] .btn-primary{background:var(--navy); color:#fff}
.mb[data-theme="light"] .btn-primary:hover{background:#24356a}
.btn-ghost{border-color:var(--line-2); color:var(--text); background:var(--surface)}
.btn-ghost:hover{border-color:var(--gold)}
.btn-sm{min-height:44px; padding:0 18px; font-size:.92rem}
/* ========== CURSOR ========== */
.cur-ring,.cur-dot{position:fixed; left:0; top:0; z-index:200; pointer-events:none; display:none}
.has-cursor .cur-ring,.has-cursor .cur-dot{display:block}
.has-cursor,.has-cursor a,.has-cursor button{cursor:none}
.cur-dot{width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--gold)}
.cur-ring{width:36px; height:36px; margin:-18px 0 0 -18px; border-radius:50%; border:1px solid color-mix(in oklab,var(--gold) 70%,transparent); display:none; transition:width var(--d-mid) var(--ease), height var(--d-mid) var(--ease), margin var(--d-mid) var(--ease), background-color var(--d-mid) var(--ease), opacity var(--d-fast) var(--ease)}
.has-cursor .cur-ring{display:grid; place-items:center}
.cur-ring[data-mode="link"]{width:56px; height:56px; margin:-28px 0 0 -28px; background:color-mix(in oklab,var(--gold) 10%,transparent)}
.cur-ring[data-mode="cta"]{width:72px; height:72px; margin:-36px 0 0 -36px; border-color:transparent; background:color-mix(in oklab,var(--gold) 16%,transparent)}
.cur-ring[data-mode="view"]{width:92px; height:92px; margin:-46px 0 0 -46px; background:var(--gold); border-color:var(--gold)}
.cur-ring[data-mode="view"]::after{content:attr(data-label); font-family:var(--f-display); font-weight:500; font-size:.92rem; color:var(--on-gold)}
.mb[data-theme="light"] .cur-ring[data-mode="view"]::after{color:#fff}
.cur-ring[data-mode="hidden"]{opacity:0}