/* mojtaz.com — design tokens ("Clear Sight, Clear Route"). Light theme only. */

@font-face{ font-family:"SaudiRiyal"; src:url("/assets/fonts/saudi_riyal.woff2") format("woff2"),url("/assets/fonts/saudi_riyal.woff") format("woff");
  unicode-range:U+20C0-20C1, U+E900; font-display:block; }

/* Readex Pro — self-hosted (arabic + latin subsets) */
@font-face{ font-family:"Readex Pro"; font-weight:400; font-display:swap; src:url("/assets/fonts/readex-arabic-400.woff2") format("woff2"); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face{ font-family:"Readex Pro"; font-weight:400; font-display:swap; src:url("/assets/fonts/readex-latin-400.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Readex Pro"; font-weight:500; font-display:swap; src:url("/assets/fonts/readex-arabic-500.woff2") format("woff2"); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face{ font-family:"Readex Pro"; font-weight:500; font-display:swap; src:url("/assets/fonts/readex-latin-500.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Readex Pro"; font-weight:600; font-display:swap; src:url("/assets/fonts/readex-arabic-600.woff2") format("woff2"); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face{ font-family:"Readex Pro"; font-weight:600; font-display:swap; src:url("/assets/fonts/readex-latin-600.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Readex Pro"; font-weight:700; font-display:swap; src:url("/assets/fonts/readex-arabic-700.woff2") format("woff2"); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face{ font-family:"Readex Pro"; font-weight:700; font-display:swap; src:url("/assets/fonts/readex-latin-700.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root{
  color-scheme: light;
  /* Surfaces & text */
  --bg:#FAFAFA; --paper:#FFFFFF; --paper-2:#F4F5F9; --paper-3:#ECEEF5;
  --ink:#1A1A1A; --ink-2:#5B5B66; --muted:#71717A;
  /* Brand (our palette, used in the reference's roles) */
  --navy:#13254B; --navy-2:#1B2D6B; --navy-3:#24388A;
  --brand:#1E5BFF; --brand-press:#1748CC; --brand-tint:#EAF1FF;
  --sky:#57A8FF; --sky-press:#3D93F2; --sky-tint:#E6F2FF;
  --dark-btn:#14141B;
  --route:#0A7A4E; --route-tint:#E7F5EE;
  --warn:#8A5300; --warn-tint:#FFF6E5;
  --danger:#B3261E; --danger-tint:#FCEDEC;
  --line:#E4E6EE; --line-strong:#B9BDCB;
  --duo-red:#C8102E; --duo-green:#0A6B47;
  --focus:#1E5BFF; --on-brand:#fff;
  --hero-grad:linear-gradient(180deg, rgba(19,37,75,.62) 0%, rgba(27,45,107,.80) 55%, rgba(27,45,107,.94) 100%);

  --font:"SaudiRiyal","Readex Pro",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --font-mono:"Readex Pro",ui-monospace,monospace;
  --font-optotype:"Readex Pro",Arial,sans-serif;

  --fs-display:clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem);
  --fs-h1:clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-h2:clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  --fs-h3:1.2rem; --fs-lg:1.0625rem; --fs-base:1rem; --fs-sm:.875rem; --fs-xs:.8125rem;
  --fs-price:clamp(2.4rem, 2rem + 1.6vw, 3.25rem);
  --lh-tight:1.35; --lh-body:1.8; --lh-ui:1.45;
  --fw-regular:400; --fw-medium:500; --fw-semi:600; --fw-bold:700;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --gutter:16px; --container:1240px; --container-narrow:800px;
  --section-y:clamp(56px, 7vw, 104px); --header-h:76px;

  --r-1:8px; --r-2:14px; --r-3:24px; --r-full:999px; --r-round:50%;

  --sh-1:0 1px 2px rgba(20,32,106,.04), 0 6px 24px rgba(20,32,106,.06);
  --sh-2:0 10px 40px rgba(20,32,106,.10);
  --sh-3:0 20px 60px rgba(20,32,106,.20);

  --ease-focus:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:120ms; --t-base:200ms; --t-slow:320ms;
  --lane:repeating-linear-gradient(to left, #fff 0 14px, transparent 14px 26px);
}
@media (min-width:768px){ :root{ --gutter:24px; } }
@media (min-width:1200px){ :root{ --gutter:32px; --header-h:88px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ font-family:var(--font); color:var(--ink); background:var(--bg); -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; }
body{ margin:0; font-size:var(--fs-base); line-height:var(--lh-body); background:var(--bg); color:var(--ink);
  font-variant-numeric:lining-nums; overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column; }
main{ flex:1 0 auto; }
img,svg{ max-width:100%; }
h1,h2,h3,h4{ line-height:var(--lh-tight); font-weight:var(--fw-bold); color:var(--ink); margin:0 0 var(--s-4); }
h1{ font-size:var(--fs-h1); } h2{ font-size:var(--fs-h2); } h3{ font-size:var(--fs-h3); font-weight:var(--fw-semi); }
p{ margin:0 0 var(--s-4); }
a{ color:var(--brand); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ text-decoration-thickness:2px; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:var(--r-1); }
.num,.money,table{ font-variant-numeric:tabular-nums lining-nums; }
.money{ white-space:nowrap; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:.02em; direction:ltr; unicode-bidi:isolate; }
.ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; }
.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; }
.skip{ position:absolute; inset-inline-start:8px; top:-60px; z-index:100; background:var(--navy); color:#fff; padding:8px 16px; border-radius:var(--r-2); }
.skip:focus{ top:8px; }
[hidden]{ display:none!important; }

@keyframes page-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.page{ animation:page-in .28s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }