/* ============================================================
   BASE — variables · reset · typography · utilities · buttons
   ============================================================ */

/* Arabic font — Thmanyah Sans, identical to dashboard */
@font-face {
  font-family: "Thmanyah Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/thmanyahsans-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Thmanyah Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/thmanyahsans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Thmanyah Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/thmanyahsans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Thmanyah Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/thmanyahsans-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Thmanyah Sans";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/thmanyahsans-Black.woff2") format("woff2");
}

/* ── tokens ── */
:root {
  /* brand */
  --navy:       #0A1733;
  --navy-90:    rgba(10,23,51,0.90);
  --navy-70:    rgba(10,23,51,0.70);
  --navy-55:    rgba(10,23,51,0.55);
  --navy-40:    rgba(10,23,51,0.40);
  --navy-25:    rgba(10,23,51,0.25);
  --navy-12:    rgba(10,23,51,0.12);
  --navy-08:    rgba(10,23,51,0.08);
  --navy-04:    rgba(10,23,51,0.04);

  --mint:       #4FD3A3;
  --mint-soft:  #7EEBC1;
  --mint-wash:  #E7FAF1;
  --mint-glow:  rgba(79,211,163,0.45);
  --mint-deep:  #2DB882;
  --lavender:   #D9C6FF;
  --sky:        #A8D6FF;

  /* surfaces */
  --paper:      #F7F8FA;
  --paper-2:    #FFFFFF;
  --paper-warm: #FBFAF7;

  /* line / divider */
  --line:       rgba(10,23,51,0.08);
  --line-s:     rgba(10,23,51,0.14);

  /* fonts */
  --sans: "Onest", system-ui, sans-serif;
  --ar:   "Thmanyah Sans", system-ui, sans-serif;
  --mono: ui-monospace, "IBM Plex Mono", monospace;
}

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--paper);
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--sans);
  font-size: 15px;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--mint); color: var(--navy); }

/* ── pastel mesh background ── */
.bg-mesh {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 600px at 8% 0%,   #C9F6E2 0%, transparent 60%),
    radial-gradient(800px 600px at 92% 0%,  #FFFFFF 0%, transparent 55%),
    radial-gradient(900px 700px at 100% 28%, #E6D3FF 0%, transparent 60%),
    radial-gradient(900px 700px at 50% 60%, #CFE5FF 0%, transparent 55%),
    radial-gradient(800px 700px at 10% 90%, #E2D5FF 0%, transparent 60%),
    linear-gradient(180deg, #F4F6F4 0%, #F7F8FA 100%);
  background-attachment: fixed;
}
.bg-grain {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: 0.30;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.04  0 0 0 0 0.09  0 0 0 0 0.2  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* ── lang ── */
html[lang="ar"]       { direction: rtl; }
html[lang="ar"] body  { font-family: var(--ar); }
[data-en]             { display: inline; }
[data-ar]             { display: none; }
html[lang="ar"] [data-en] { display: none; }
html[lang="ar"] [data-ar] { display: inline; }
html[lang="ar"] [data-flip] { transform: scaleX(-1); display: inline-block; }

/* ── layout ── */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.wrap-narrow { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 640px) {
  .wrap, .wrap-narrow { padding: 0 20px; }
}

/* ── typography utilities ── */
.mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-55);
}
html[lang="ar"] .mono { letter-spacing: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--navy-55);
}
.eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint);
  flex-shrink: 0;
}
html[lang="ar"] .eyebrow { letter-spacing: 0; font-size: 12px; }

.serif {
  font-family: "Instrument Serif", "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
}
em { font-style: normal; }
em.serif {
  font-family: "Instrument Serif", "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--navy);
}
html[lang="ar"] .serif { font-family: var(--ar); font-style: normal; font-weight: 700; }
html[lang="ar"] em { font-style: normal; }
html[lang="ar"] em.serif { font-family: var(--ar); font-style: normal; font-weight: 700; }

.hr { height: 1px; background: var(--line); }

/* ── section spacing ── */
.sect { padding: 140px 0; position: relative; }
@media (max-width: 880px) { .sect { padding: 80px 0; } }

/* ── section header ── */
.sect-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  margin-bottom: 80px;
  align-items: start;
}
@media (max-width: 780px) {
  .sect-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 48px; }
}
.sect-head .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint-deep);
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sect-head .label::before { content: ""; width: 20px; height: 1px; background: var(--mint-deep); }
html[lang="ar"] .sect-head .label::before { display: none; }
.sect-head h2 {
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
  max-width: 18ch;
  text-wrap: balance;
  color: var(--navy);
}
html[lang="ar"] .sect-head h2 { letter-spacing: 0; }
.sect-head .lede {
  margin-top: 24px;
  color: var(--navy-70);
  font-size: 17px;
  line-height: 1.55;
  max-width: 62ch;
}

/* ── buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.btn-primary {
  background: var(--navy);
  color: var(--paper);
  box-shadow: 0 10px 28px -10px rgba(10,23,51,0.40);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -10px rgba(10,23,51,0.50);
}
.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy-12);
}
.btn-ghost:hover {
  background: var(--navy-04);
  border-color: var(--navy-25);
}
.btn-mint {
  background: var(--mint);
  color: var(--navy);
  box-shadow: 0 8px 24px -8px var(--mint-glow);
}
.btn-mint:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px -8px var(--mint-glow);
}
.btn .arr { width: 14px; height: 14px; flex-shrink: 0; }