/* ==========================================================================
   LegalOS — foundations
   Ground, fields, type, and the primitives every section is built from.
   Section layout lives in sections.css; nothing here knows about a section.
   ========================================================================== */

/* --- Faces ---------------------------------------------------------------
   Self-hosted, latin + arabic subsets only. Arabic is not a fallback here:
   matter names, statute text and firm names on this page are real Arabic,
   so the Arabic faces are part of the type system, not a polyfill.
   Sora carries display, Manrope carries text and UI, Noto Naskh carries
   statute and document body (the naskh style Egyptian legal text is set in),
   Tajawal carries Arabic UI labels so it sits beside Manrope without a jolt.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Sora';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/Sora-400-700-latin.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:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/Manrope-400-800-latin.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:'Noto Naskh Arabic';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/NotoNaskhArabic-400-700-arabic.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Tajawal-400-arabic.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/Tajawal-500-arabic.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/Tajawal-700-arabic.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Ground and the surfaces that sit on it. The ground is the brief's
     #08090B; every surface above it is a white overlay rather than a
     separate hex, so a pane over a violet field picks the field up. */
  --ground: #08090B;
  --ground-deep: #050608;
  --surface-1: rgba(255, 255, 255, 0.028);
  --surface-2: rgba(255, 255, 255, 0.046);
  --surface-3: rgba(255, 255, 255, 0.07);
  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --hairline-bright: rgba(255, 255, 255, 0.28);

  /* Atmosphere. Navy is the far end of the glow, violet the near end;
     they own whole regions rather than edging components. */
  --navy: #101A3D;
  --navy-lit: #16225C;
  --violet: #6D5BFF;
  --violet-lit: #8E7CFF;
  --violet-deep: #3A2E8C;

  /* Brass is the one functional accent: it marks material the product has
     verified against source law. Nothing decorative is allowed to wear it. */
  --brass: #E0A44C;
  --brass-lit: #F0BE76;

  /* Semantic marks inside product surfaces. */
  --ok: #4ED8A0;
  --warn: #F2C14E;
  --risk: #FF7A6B;

  --ink: #F5F6F8;
  --ink-2: #A9AEB9;   /* 7.9:1 on ground */
  --ink-3: #7E8492;   /* 4.7:1 on ground */

  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-ar-doc: 'Noto Naskh Arabic', 'Segoe UI', serif;
  --font-ar-ui: 'Tajawal', 'Noto Naskh Arabic', sans-serif;

  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* One spacing rhythm. Sections breathe at --gap-section. */
  --gap-section: clamp(6rem, 11vw, 11rem);
  --shell: 1200px;
  --shell-pad: clamp(1.25rem, 4vw, 2.75rem);

  --nav-h: 76px;

  /* Exponential ease-out; the page's single motion curve. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 0.9, 0.35, 1);

  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.4), 0 18px 40px -12px rgba(0, 0, 0, 0.7);
  --shadow-deep: 0 4px 10px rgba(0, 0, 0, 0.45), 0 48px 90px -28px rgba(0, 0, 0, 0.85);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--violet-lit);
  outline-offset: 3px;
  border-radius: 5px;
}

::selection { background: rgba(109, 91, 255, 0.4); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 999;
  padding: 0.7rem 1.1rem; border-radius: var(--r-pill);
  background: var(--ink); color: var(--ground); font-weight: 700;
  transform: translateY(-160%);
  transition: transform 0.35s var(--ease);
}
.skip-link:focus-visible { transform: none; }

/* --- Layout --------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}
.shell--wide { max-width: 1400px; }

.section { position: relative; padding-block: var(--gap-section); }
.section--tight { padding-block: clamp(4rem, 7vw, 7rem); }

/* A hairline that fades out at both ends — the page's section divider. */
.rule {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--hairline) 18%, var(--hairline) 82%, transparent);
}

/* --- Type ----------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.display--hero { font-size: clamp(2.65rem, 6.6vw, 5.5rem); }
.display--section { font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 1.06; }
.display--sub { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.14; letter-spacing: -0.028em; }

.lede {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 62ch;
  text-wrap: pretty;
}
.body-2 { color: var(--ink-2); line-height: 1.65; max-width: 68ch; text-wrap: pretty; }
.muted { color: var(--ink-3); }

/* Arabic set inline inside English copy. Kept at a larger optical size and a
   looser leading — naskh needs both to stay legible next to Manrope.
   These carry `unicode-bidi: isolate` but deliberately NOT `direction: rtl`:
   the bidi algorithm already runs the Arabic right-to-left inside its own box,
   while the box keeps the alignment of the row it sits in. A matter title in
   an LTR table must start where its English subtitle starts. Surfaces that are
   genuinely right-to-left — the client portal, a document pane — declare
   `dir="rtl"` on their container and inherit the real thing. */
.ar { font-family: var(--font-ar-ui); unicode-bidi: isolate; font-size: 1.06em; }
.ar-doc { font-family: var(--font-ar-doc); unicode-bidi: isolate; font-size: 1.08em; line-height: 2; }
[dir="rtl"] .ar, [dir="rtl"] .ar-doc { unicode-bidi: isolate; }

/* --- Eyebrow -------------------------------------------------------------
   The section's place in the product, not a restatement of the heading below
   it. Deliberately neutral: it wore brass in an earlier pass, and nine quiet
   labels in the accent colour cost the citation seal its meaning. Brass is
   spent only where something resolves to a source.
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.35rem;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  flex: none;
  background: var(--hairline-bright);
}
.eyebrow--center { justify-content: center; }

.section-head { max-width: 46rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .lede { margin-top: 1.25rem; }
.section-head--center .lede { margin-inline: auto; }

/* --- Glass ---------------------------------------------------------------
   One pane recipe: a 1px light border, a low-alpha white fill, and a top
   highlight that reads as the lit edge of a physical sheet. Blur is real
   here — panes sit over the violet fields and pick them up.
   -------------------------------------------------------------------------- */
.pane {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  background: var(--surface-1);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  overflow: hidden;
}
.pane::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 42%);
  -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;
  pointer-events: none;
}
.pane--flush { overflow: visible; }
.pane--lift { box-shadow: var(--shadow-lift); }

.pane-pad { padding: clamp(1.5rem, 2.6vw, 2.4rem); }

/* Interactive panes lift on hover; the border brightens rather than the fill,
   so the glass reads as catching more light instead of changing material. */
.pane--action {
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.pane--action:hover {
  transform: translateY(-4px);
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-lift);
}

/* --- Fields ---------------------------------------------------------------
   The navy→violet atmosphere. A field is a region, not an edge: it is sized
   in viewport units and sits behind whole sections.
   -------------------------------------------------------------------------- */
.field {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.75;
}
.field--violet { background: radial-gradient(closest-side, rgba(109, 91, 255, 0.55), rgba(109, 91, 255, 0)); }
.field--navy   { background: radial-gradient(closest-side, rgba(22, 34, 92, 0.9), rgba(16, 26, 61, 0)); }

/* Fine grain over the whole page. Without it, the large dark gradients band
   on 8-bit displays. */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease),
              border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), color 0.4s var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--solid {
  background: var(--ink);
  color: #0A0B0E;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 8px 24px -8px rgba(0,0,0,0.9);
}
.btn--solid:hover { background: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 12px 34px -10px rgba(109,91,255,0.6); }

.btn--ghost {
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn--ghost:hover { background: rgba(255,255,255,0.09); border-color: var(--hairline-bright); }

.btn--violet {
  background: linear-gradient(135deg, #7A66FF, #5B47E8);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 10px 30px -10px rgba(109,91,255,0.85);
}
.btn--violet:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.36) inset, 0 16px 40px -10px rgba(109,91,255,1); }

.btn--sm { padding: 0.62rem 1.15rem; font-size: 0.85rem; }
.btn--lg { padding: 1.1rem 2rem; font-size: 1rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn .ico { width: 18px; height: 18px; flex: none; }

/* Text link with an underline that draws from the leading edge. */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; font-size: 0.94rem; color: var(--ink);
  position: relative; padding-bottom: 3px;
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow .ico { width: 15px; height: 15px; transition: transform 0.4s var(--ease); }
.link-arrow:hover .ico { transform: translateX(4px); }

/* --- Chips and badges ----------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.9rem 0.42rem 0.75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink-2);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 8px currentColor; }

/* The citation seal — the page's one recurring product mark. */
.cite {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.16rem 0.5rem 0.16rem 0.4rem;
  border-radius: 5px;
  border: 1px solid rgba(224, 164, 76, 0.42);
  background: rgba(224, 164, 76, 0.11);
  color: var(--brass-lit);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.005em;
  white-space: nowrap;
}
.cite .ico { width: 11px; height: 11px; flex: none; }

/* --- Motion --------------------------------------------------------------
   Content is visible by default. The reveal class is added by script only
   when IntersectionObserver is available, so a JS failure never hides copy.
   -------------------------------------------------------------------------- */
[data-reveal] { will-change: opacity, transform; }
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
}
.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.85s var(--ease), transform 0.95s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}