/* ===================================================================
   FEKRA PRINT — Design System
   Royal blue + electric yellow · clean modern studio · RTL Arabic
=================================================================== */

:root{
  /* brand */
  --royal:#1d3a9e;       /* primary — from logo */
  --royal-700:#162d7d;
  --royal-300:#5b78d6;
  --blue-bright:#2f5be0;
  --yellow:#ffd400;      /* lightning accent */
  --yellow-deep:#f5b800;
  --navy:#111c38;        /* gov / dark surfaces */
  --navy-800:#1a2747;

  /* neutrals (cool-warm white) */
  --ink:#171a22;
  --ink-soft:#565d6b;
  --line:#e6e7ec;
  --line-strong:#d2d5dd;
  --paper:#ffffff;
  --paper-2:#f6f7f9;
  --paper-3:#eef1f6;

  /* status */
  --green:#1f9d57;
  --wa:#1faa55;

  /* type */
  --f-head:'Readex Pro', system-ui, sans-serif;
  --f-body:'IBM Plex Sans Arabic', system-ui, sans-serif;

  /* shape */
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-xl:34px;
  --shadow-sm:0 1px 2px rgba(17,28,56,.06), 0 2px 8px rgba(17,28,56,.05);
  --shadow:0 6px 24px -8px rgba(17,28,56,.16), 0 2px 8px rgba(17,28,56,.06);
  --shadow-lg:0 30px 60px -22px rgba(17,28,56,.32);
  --shadow-royal:0 18px 40px -16px rgba(29,58,158,.55);

  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--f-body);color:var(--ink);background:var(--paper);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.12;margin:0;font-weight:700;letter-spacing:-.01em;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
.en{font-family:var(--f-head);direction:ltr;unicode-bidi:isolate;}

/* layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.section{padding:92px 0;}
.section.tight{padding:64px 0;}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--f-head);font-weight:600;
  font-size:13px;letter-spacing:.06em;color:var(--royal);text-transform:uppercase;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--yellow-deep);border-radius:2px;}
.eyebrow.light{color:#aebbff;}
.eyebrow.light::before{background:var(--yellow);}
.lead{font-size:18px;color:var(--ink-soft);max-width:54ch;}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-head);font-weight:600;font-size:15.5px;
  padding:14px 26px;border-radius:999px;transition:.22s var(--ease);white-space:nowrap;
  border:2px solid transparent;
}
.btn svg{width:18px;height:18px;}
.btn-primary{background:var(--royal);color:#fff;box-shadow:var(--shadow-royal);}
.btn-primary:hover{background:var(--royal-700);transform:translateY(-2px);}
.btn-yellow{background:var(--yellow);color:var(--navy);}
.btn-yellow:hover{background:var(--yellow-deep);transform:translateY(-2px);}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--royal);color:var(--royal);}
.btn-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28);}
.btn-light:hover{background:rgba(255,255,255,.2);}
.btn-wa{background:var(--wa);color:#fff;}
.btn-wa:hover{background:#178a45;transform:translateY(-2px);}
.btn-lg{padding:17px 32px;font-size:16.5px;}
.btn-sm{padding:9px 16px;font-size:13.5px;}

/* image placeholder */
.ph{
  position:relative;border-radius:var(--r);overflow:hidden;
  background:
    repeating-linear-gradient(135deg,#e9ecf3 0 10px,#f1f3f8 10px 20px);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:#8b93a4;
}
.ph::after{
  content:"";position:absolute;inset:0;opacity:.55;
  background:
    linear-gradient(135deg,transparent calc(50% - 1px),#cfd5e2 50%,transparent calc(50% + 1px)),
    linear-gradient(45deg,transparent calc(50% - 1px),#cfd5e2 50%,transparent calc(50% + 1px));
}
.ph > span{
  position:relative;z-index:1;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;
  background:rgba(255,255,255,.82);padding:5px 11px;border-radius:7px;text-align:center;
  line-height:1.45;max-width:84%;color:#6b7384;
}
/* real image inside any .ph slot */
.ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;}
.ph.contain > img{object-fit:contain;background:#fff;}
.ph.dark{background:repeating-linear-gradient(135deg,#1a274a 0 10px,#202e54 10px 20px);border-color:#2c3a64;}
.ph.dark::after{background:
  linear-gradient(135deg,transparent calc(50% - 1px),#34457a 50%,transparent calc(50% + 1px)),
  linear-gradient(45deg,transparent calc(50% - 1px),#34457a 50%,transparent calc(50% + 1px));opacity:.5;}
.ph.dark > span{background:rgba(17,28,56,.7);color:#aeb8d4;}

/* cards */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);}

/* chips */
.chip{
  display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;
  padding:7px 14px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);color:var(--ink-soft);
  transition:.18s;
}
a.chip:hover{border-color:var(--royal);color:var(--royal);background:#fff;}
.chip-light{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#d3dbf2;}
a.chip-light:hover{background:rgba(255,255,255,.16);color:#fff;}

/* utility */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  *{animation:none!important;}
}

/* flip directional arrows in LTR (not brand/whatsapp icons) */
[dir=ltr] .hero-cta .btn-primary svg,
[dir=ltr] .portal .go .arrow svg,
[dir=ltr] .svc .more svg,
[dir=ltr] .btn-ghost svg{transform:scaleX(-1);}