@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi:wght@400..700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* Blueprint / contract palette */
  --ink-900:#0c2036;
  --ink-800:#123151;
  --ink-700:#1a4269;
  --line-cyan:#6fb8c9;
  --line-cyan-dim:rgba(111,184,201,.28);
  --paper:#f4efe1;
  --paper-dim:#e9e1cc;
  --seal:#c67c3e;
  --seal-dark:#a4602a;
  --ink-text:#eaf1f6;
  --ink-text-dim:#a9c0d1;
  --charcoal:#241f16;
  --charcoal-dim:#5a5342;
  --good:#5f9e7a;
  --bad:#c0563f;

  --font-display:'Reem Kufi','Tahoma',sans-serif;
  --font-body:'IBM Plex Sans Arabic','Tahoma',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  --radius:2px;
  --shadow-lift:0 18px 40px -18px rgba(6,14,24,.55);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink-900);
  color:var(--ink-text);
  font-family:var(--font-body);
  direction:rtl;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  margin:0 0 .5em;
  line-height:1.25;
}
p{margin:0 0 1em;line-height:1.85}
a{color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit}
.mono{font-family:var(--font-mono);direction:ltr;unicode-bidi:plaintext}

:focus-visible{
  outline:2px solid var(--seal);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

.container{
  width:100%;
  max-width:1120px;
  margin-inline:auto;
  padding-inline:24px;
}

.blueprint-grid{
  background-image:
    linear-gradient(var(--line-cyan-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-cyan-dim) 1px, transparent 1px);
  background-size:42px 42px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:14px 30px;
  border-radius:var(--radius);
  border:1px solid transparent;
  font-family:var(--font-body);
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:active{transform:translateY(1px)}

.btn-seal{
  background:var(--seal);
  color:#231404;
  box-shadow:0 10px 24px -10px rgba(198,124,62,.6);
}
.btn-seal:hover{background:#d38a48}

.btn-ghost{
  background:transparent;
  border-color:var(--line-cyan-dim);
  color:var(--ink-text);
}
.btn-ghost:hover{border-color:var(--line-cyan);background:rgba(111,184,201,.08)}

.eyebrow{
  font-family:var(--font-mono);
  letter-spacing:.14em;
  font-size:.75rem;
  color:var(--line-cyan);
  text-transform:uppercase;
  direction:ltr;
  display:inline-block;
}

.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}