/* Mousto4AI brand system v1 — tokens --b-*, themes .b-dark (default) / .b-light. Spec: docs/DESIGN_SYSTEM.md */
@font-face{font-family:"Thmanyah Sans";src:url(/brand/fonts/thmanyahsans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url(/brand/fonts/thmanyahsans-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url(/brand/fonts/thmanyahsans-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Thmanyah Serif Display";src:url(/brand/fonts/thmanyahserifdisplay-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Thmanyah Serif Display";src:url(/brand/fonts/thmanyahserifdisplay-Black.woff2) format("woff2");font-weight:900;font-display:swap}

:root{
  --b-font-display:"Thmanyah Serif Display","Thmanyah Sans",system-ui,"Segoe UI",Tahoma,sans-serif;
  --b-font-body:"Thmanyah Sans",system-ui,"Segoe UI",Tahoma,"Noto Sans Arabic",sans-serif;
  --b-r-xs:8px;--b-r-sm:12px;--b-r-md:18px;--b-r-lg:28px;--b-r-xl:54px;--b-r-pill:999px;
  --b-s1:4px;--b-s2:8px;--b-s3:12px;--b-s4:16px;--b-s5:24px;--b-s6:32px;--b-s7:48px;--b-s8:64px;--b-s9:96px;
  --b-t-xs:.8125rem;--b-t-sm:.875rem;--b-t-md:1rem;--b-t-lg:1.125rem;--b-t-xl:1.375rem;
  --b-t-h3:clamp(1.25rem,1rem + .8vw,1.625rem);--b-t-h2:clamp(1.75rem,1.15rem + 2.2vw,2.75rem);--b-t-h1:clamp(2.25rem,1.4rem + 3.4vw,4rem);
  --b-lh-body:1.8;--b-lh-head:1.2;
  --b-ease-out:cubic-bezier(.16,1,.3,1);--b-ease-inout:cubic-bezier(.45,0,.55,1);
  --b-dur-1:160ms;--b-dur-2:280ms;--b-dur-3:520ms;--b-drift:16s;--b-blur:5px;
  --b-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  --b-ripple:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='10'%3E%3Cpath d='M0 5C16 1.4 48 8.6 64 5S112 1.4 128 5' fill='none' stroke='%23fff' stroke-width='1.15'/%3E%3C/svg%3E");
}
/* dark */
:root,.b-dark{
  color-scheme:dark;
  --b-bg:#050505;--b-bg-2:#0b0c0e;--b-ink:#fff;--b-ink-2:rgba(255,255,255,.66);--b-ink-3:rgba(255,255,255,.42);
  --b-accent:#39D0F9;--b-accent-text:#39D0F9;--b-accent-ink:#08121A;--b-accent-soft:rgba(57,208,249,.12);--b-hairline:rgba(255,255,255,.14);--b-focus:#39D0F9;
  --b-glass-bg:rgba(10,11,13,.46);--b-glass-bg-solid:rgba(12,13,15,.9);--b-glass-border:rgba(255,255,255,.16);
  --b-glass-sheen:linear-gradient(165deg,rgba(255,255,255,.11),rgba(255,255,255,0) 42%);
  --b-glass-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.16);
  --b-glass-filter:blur(var(--b-blur)) saturate(1.05) brightness(.9);
  --b-grain-o:.11;--b-ripple-o:.05;
  --b-pill-bg:rgba(255,255,255,.10);--b-pill-border:rgba(255,255,255,.24);
  --b-glow:rgba(57,208,249,.22);--b-glow-2:rgba(57,208,249,.10);--b-vignette:rgba(0,0,0,.6);
}
/* light */
.b-light{
  color-scheme:light;
  --b-bg:#eeeeee;--b-bg-2:#f7f7f7;--b-ink:#0A0A0A;--b-ink-2:rgba(10,10,10,.64);--b-ink-3:rgba(10,10,10,.44);
  --b-accent:#0CA6D8;--b-accent-text:#0C748D;--b-accent-ink:#08121A;--b-accent-soft:#E3F4FA;--b-hairline:rgba(10,10,10,.14);--b-focus:#0C748D;
  --b-glass-bg:rgba(255,255,255,.5);--b-glass-bg-solid:rgba(255,255,255,.9);--b-glass-border:rgba(255,255,255,.8);
  --b-glass-sheen:linear-gradient(165deg,rgba(255,255,255,.6),rgba(255,255,255,0) 42%);
  --b-glass-shadow:0 0 0 1px rgba(10,10,10,.05),0 24px 60px rgba(8,20,28,.12),inset 0 1px 0 rgba(255,255,255,.95);
  --b-glass-filter:blur(var(--b-blur)) saturate(1.1) brightness(1.04);
  --b-grain-o:.16;--b-ripple-o:.13;
  --b-pill-bg:rgba(255,255,255,.62);--b-pill-border:rgba(255,255,255,.9);
  --b-glow:rgba(12,166,216,.2);--b-glow-2:rgba(12,166,216,.09);--b-vignette:rgba(10,10,10,.07);
}
.b-dark,.b-light{color:var(--b-ink)}

/* ground */
.b-ground{position:relative;isolation:isolate;background-color:var(--b-bg);color:var(--b-ink);
  background-image:radial-gradient(60% 55% at 85% 8%,var(--b-glow),transparent 70%),radial-gradient(45% 40% at 10% 96%,var(--b-glow-2),transparent 70%),radial-gradient(120% 90% at 50% 50%,transparent 58%,var(--b-vignette))}
.b-ground::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--b-grain) 0 0/200px 200px;opacity:.05}
.b-light.b-ground::before,.b-light .b-ground::before{opacity:.08}
.b-ground--quiet{background-image:radial-gradient(120% 90% at 50% 50%,transparent 60%,var(--b-vignette))}

/* glass */
.b-glass{position:relative;isolation:isolate;border-radius:var(--b-r-lg);color:var(--b-ink);
  background-color:var(--b-glass-bg);background-image:var(--b-glass-sheen);border:1px solid var(--b-glass-border);box-shadow:var(--b-glass-shadow);
  -webkit-backdrop-filter:var(--b-glass-filter);backdrop-filter:var(--b-glass-filter)}
.b-glass::before,.b-glass::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;mix-blend-mode:overlay}
.b-glass::before{background:var(--b-grain) 0 0/200px 200px;opacity:var(--b-grain-o)}
.b-glass::after{background:var(--b-ripple) 0 0/128px 10px;opacity:var(--b-ripple-o)}
.b-glass--hero{border-radius:clamp(28px,4vw,var(--b-r-xl))}
.b-glass--sm{border-radius:var(--b-r-md)}
.b-glass--flat{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:var(--b-glass-bg-solid)}
.b-glass--tint{background-color:color-mix(in srgb,var(--b-accent) 9%,var(--b-glass-bg))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.b-glass{background-color:var(--b-glass-bg-solid)}}
/* glass inside glass (callouts, notes) → quiet inset: keep its own tint/border, drop blur, sheen, shadow and texture */
.b-glass .b-glass:not(.b-pill){-webkit-backdrop-filter:none;backdrop-filter:none;background-image:none;box-shadow:none}
.b-glass .b-glass:not(.b-pill)::before,.b-glass .b-glass:not(.b-pill)::after{display:none}

/* pills */
.b-pill{display:inline-flex;align-items:center;gap:var(--b-s2);min-height:30px;padding:4px 12px;border-radius:var(--b-r-pill);white-space:nowrap;
  font:700 var(--b-t-xs)/1.4 var(--b-font-body);color:var(--b-ink);background:var(--b-pill-bg);border:1px solid var(--b-pill-border);
  box-shadow:0 8px 24px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(9px) saturate(1.05);backdrop-filter:blur(9px) saturate(1.05)}
.b-pill--accent{background:var(--b-accent-soft);border-color:transparent;color:var(--b-accent-text)}
.b-pill--solid{background:var(--b-accent);border-color:transparent;color:var(--b-accent-ink)}
.b-kicker{display:inline-flex;align-items:center;gap:10px;font:700 var(--b-t-xs)/1.4 var(--b-font-body);color:var(--b-accent-text)}
.b-kicker::before{content:"";flex:none;inline-size:8px;block-size:8px;border-radius:50%;background:var(--b-accent)}

/* buttons */
.b-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--b-s2);min-height:48px;padding:10px 24px;border-radius:var(--b-r-pill);border:1px solid transparent;
  font:700 var(--b-t-md)/1.3 var(--b-font-body);color:var(--b-ink);text-decoration:none;cursor:pointer;
  transition:transform var(--b-dur-2) var(--b-ease-out),box-shadow var(--b-dur-2) var(--b-ease-out),border-color var(--b-dur-1) linear,background-color var(--b-dur-1) linear}
.b-btn:hover{transform:translateY(-1px)}
.b-btn:active{transform:translateY(0) scale(.985)}
.b-btn[disabled],.b-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.b-btn--primary{background:var(--b-accent);color:var(--b-accent-ink);box-shadow:0 10px 30px rgba(57,208,249,.26)}
.b-btn--primary:hover{box-shadow:0 14px 40px rgba(57,208,249,.4)}
.b-light .b-btn--primary{box-shadow:0 10px 28px rgba(12,166,216,.22)}
.b-btn--ghost{background:var(--b-pill-bg);border-color:var(--b-hairline);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.b-btn--ghost:hover{border-color:var(--b-accent)}
.b-btn--sm{min-height:38px;padding:6px 16px;font-size:var(--b-t-sm)}
.b-btn--lg{min-height:56px;padding:12px 32px;font-size:var(--b-t-lg)}
.b-btn:focus-visible,.b-pill:focus-visible,.b-link:focus-visible{outline:2px solid var(--b-focus);outline-offset:3px}

/* brand mark «M4»: مربع تركوازي بحرفي العلامة (نص لا صورة) */
.b-mark{display:inline-grid;place-items:center;flex:none;inline-size:var(--mark-size,38px);block-size:var(--mark-size,38px);border-radius:calc(var(--mark-size,38px) * .32);
  background:var(--b-accent);color:var(--b-accent-ink);font:900 calc(var(--mark-size,38px) * .4)/1 var(--b-font-display);direction:ltr;letter-spacing:.01em;user-select:none}
.b-mark--sm{--mark-size:28px}
.b-mark--lg{--mark-size:52px}
@keyframes b-drift{from{transform:translate3d(0,0,0) rotate(var(--mark-rot,0deg))}to{transform:translate3d(0,-10px,0) rotate(calc(var(--mark-rot,0deg) + 3deg))}}
.b-sep{display:flex;align-items:center;gap:var(--b-s4);padding-block:var(--b-s5)}
.b-sep::before,.b-sep::after{content:"";flex:1;block-size:1px;background:linear-gradient(90deg,transparent,var(--b-hairline),transparent)}
@media (prefers-reduced-motion:reduce){.b-btn{transition:none}.b-btn:hover,.b-btn:active{transform:none}}

/* type utils */
.b-display{font-family:var(--b-font-display);font-weight:900;line-height:var(--b-lh-head);letter-spacing:0}
.b-body{font-family:var(--b-font-body);line-height:var(--b-lh-body)}
.b-h1{font-size:var(--b-t-h1)}.b-h2{font-size:var(--b-t-h2)}.b-h3{font-size:var(--b-t-h3);font-weight:700}
.b-accent{color:var(--b-accent-text)}.b-muted{color:var(--b-ink-2)}.b-faint{color:var(--b-ink-3)}
.b-num{font-variant-numeric:tabular-nums}.ltr{direction:ltr;unicode-bidi:isolate}
.b-hr{border:0;block-size:1px;background:var(--b-hairline)}