/* ============================================================
   i3rbli — إعرب لي · main stylesheet
   Design tokens ported from the i3rbli brand kit v2 (final).
   One sheet serves RTL (ar) and LTR (en) pages via logical props.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --brand-50:#EEF3F8; --brand-100:#D9E6F2; --brand-200:#AECBE3; --brand-300:#79A8D0;
  --brand-400:#4983BB; --brand-500:#2A65A0; --brand-600:#1D4F84; --brand-700:#163E68;
  --brand-800:#112F4F; --brand-900:#0B2138;
  --copper:#B06A33; --copper-bright:#CC8A4E;

  --ink:#111A24; --slate:#33414F; --mute:#6B7884; --line:#DEE3E9;
  --mist:#F1F4F8; --paper:#F7F5EF; --surface:#FFFFFF; --canvas:#FBFAF7;

  --bg:var(--canvas); --fg:var(--ink); --card:var(--surface); --hairline:var(--line);
  --accent:var(--copper);
  --link:var(--brand-600);

  --maxw:1080px; --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px;
  --shadow:0 1px 2px rgba(11,33,56,.05), 0 12px 32px -16px rgba(11,33,56,.22);
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --sans-ar:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif;
  --display:"Cairo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
[data-theme="dark"]{
  --ink:#EAF0F6; --slate:#B7C3CF; --mute:#8893A0; --line:#1E2E40;
  --mist:#0E1B2A; --paper:#0B1726; --surface:#0F1E30; --canvas:#081320;
  --accent:var(--copper-bright);
  --link:var(--brand-300);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -20px rgba(0,0,0,.7);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
  transition:background .35s,color .35s;
}
html[lang="ar"] body{font-family:var(--sans-ar); line-height:1.9}
::selection{background:var(--brand-200); color:var(--brand-900)}
[data-theme="dark"] ::selection{background:var(--brand-700); color:#fff}

img,svg{max-width:100%; height:auto}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
.mono{font-family:var(--mono)}
.muted{color:var(--mute)}

.skip-link{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:100;
  background:var(--brand-600); color:#fff; padding:10px 18px; border-radius:0 0 var(--r-sm) var(--r-sm);
}
.skip-link:focus{inset-inline-start:16px}

/* ---------- Header / nav ---------- */
.bar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(10px);
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  border-bottom:1px solid var(--hairline);
}
.bar-in{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 24px; max-width:var(--maxw); margin-inline:auto;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em; color:var(--fg)}
.brand:hover{text-decoration:none}
.brand .glyphmark{width:32px; height:32px; flex:0 0 auto}
.brand .brand-ar{font-size:17px}
.brand .brand-en{font-family:var(--sans); font-weight:500; color:var(--mute); font-size:14px}
.badge{
  font-size:11.5px; font-weight:600; letter-spacing:.06em;
  color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  padding:2.5px 9px; border-radius:999px; white-space:nowrap;
}

.menu{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.menu a{
  display:block; position:relative; color:var(--slate); font-weight:500; font-size:15px;
  padding:8px 13px; border-radius:999px;
}
.menu a:hover{color:var(--fg); background:var(--mist); text-decoration:none}
.menu a[aria-current="page"]{color:var(--fg); font-weight:600}
.menu a[aria-current="page"]::after{
  content:""; position:absolute; inset-inline-start:50%; bottom:1px;
  width:16px; height:3px; border-radius:2px; background:var(--accent);
  transform:translateX(-50%) rotate(-22deg);
}
html[dir="rtl"] .menu a[aria-current="page"]::after{transform:translateX(50%) rotate(-22deg)}

.bar-actions{display:flex; align-items:center; gap:8px}
.lang-switch{
  font-family:var(--sans); font-weight:600; font-size:13.5px;
  border:1px solid var(--hairline); background:var(--card); color:var(--slate);
  padding:6px 13px; border-radius:999px; line-height:1.4;
}
.lang-switch:hover{color:var(--fg); border-color:var(--brand-300); text-decoration:none}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px; cursor:pointer;
  border:1px solid var(--hairline); background:var(--card); color:var(--slate);
  transition:.2s;
}
.icon-btn:hover{color:var(--fg); border-color:var(--brand-300)}
.icon-btn svg{width:18px; height:18px}
.icon-sun{display:none} .icon-moon{display:block}
[data-theme="dark"] .icon-sun{display:block} [data-theme="dark"] .icon-moon{display:none}

.burger{display:none}

@media (max-width:900px){
  .menu{
    display:none; position:absolute; top:100%; inset-inline:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--bg); border-bottom:1px solid var(--hairline);
    padding:10px 16px 16px; box-shadow:var(--shadow);
  }
  .menu a{padding:12px 14px; border-radius:var(--r-sm)}
  .menu a[aria-current="page"]::after{inset-inline-start:0; transform:rotate(-22deg); bottom:8px; inset-inline-start:-2px; width:14px}
  body.nav-open .menu{display:flex}
  .burger{
    display:inline-flex; flex-direction:column; justify-content:center; gap:4.5px;
    width:38px; height:36px; padding:0 9px; cursor:pointer;
    border:1px solid var(--hairline); border-radius:999px; background:var(--card);
  }
  .burger span{display:block; height:2px; border-radius:2px; background:var(--slate); transition:.25s}
  body.nav-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  body.nav-open .burger span:nth-child(2){opacity:0}
  body.nav-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .brand .brand-en{display:none}
}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(155deg,var(--brand-700),var(--brand-900) 80%);
  color:#fff; padding:72px 0 64px; position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(460px 340px at 84% 14%, color-mix(in srgb,var(--copper-bright) 20%,transparent), transparent 70%);
}
html[dir="rtl"] .hero::after{
  background:radial-gradient(460px 340px at 16% 14%, color-mix(in srgb,var(--copper-bright) 20%,transparent), transparent 70%);
}
.hero .wrap{position:relative; z-index:1}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb,#fff 78%,transparent);
}
html[lang="ar"] .eyebrow{letter-spacing:.02em; font-size:14px}
.tick{
  display:inline-block; width:22px; height:4px; border-radius:2px;
  transform:rotate(-22deg); background:var(--copper-bright); flex:0 0 auto;
}
.hero-logo{height:clamp(110px,18vw,170px); width:auto; margin:26px 0 4px; display:block}
.hero h1{
  font-family:var(--display); font-weight:900; letter-spacing:-.01em;
  font-size:clamp(30px,5vw,52px); line-height:1.25; margin:18px 0 0; max-width:22ch;
}
.hero .lede{
  max-width:58ch; color:color-mix(in srgb,#fff 84%,transparent);
  font-size:17.5px; margin:18px 0 0;
}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}

/* Buttons — navy is the brand action colour; copper stays an accent. */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--brand-600); color:#fff; border:0; border-radius:999px;
  padding:11px 24px; font:inherit; font-weight:600; font-size:15px;
  cursor:pointer; transition:.2s; line-height:1.5;
}
.btn:hover{background:var(--brand-700); text-decoration:none}
[data-theme="dark"] .btn{background:var(--brand-500)}
[data-theme="dark"] .btn:hover{background:var(--brand-400)}
.btn-light{background:#fff; color:var(--brand-800)}
.btn-light:hover{background:var(--brand-50)}
[data-theme="dark"] .btn-light{background:#fff; color:var(--brand-800)}
[data-theme="dark"] .btn-light:hover{background:var(--brand-100)}
.btn-ghost{background:transparent; color:inherit; border:1px solid color-mix(in srgb,currentColor 45%,transparent)}
.btn-ghost:hover{background:color-mix(in srgb,currentColor 8%,transparent); border-color:currentColor}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}
html[dir="rtl"] .btn:hover .arrow{transform:translateX(-3px)}

/* ---------- Sections ---------- */
section{padding:64px 0}
section + section{border-top:1px solid var(--hairline)}
.sec-head{display:flex; align-items:center; gap:14px; margin-bottom:8px}
.sec-head .tick{width:26px; height:5px; border-radius:3px; background:var(--accent)}
h2{
  font-family:var(--display); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(25px,3.6vw,36px); line-height:1.3; margin:0;
}
.sec-sub{color:var(--mute); max-width:64ch; margin:10px 0 34px; font-size:16px}
h3{font-family:var(--display); font-weight:700; font-size:19px; margin:0 0 8px}
.kicker{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.08em;
  color:var(--accent); text-transform:uppercase; margin:0 0 10px;
}
html[lang="ar"] .kicker{letter-spacing:.02em; font-size:13px}

.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.g2,.g3{grid-template-columns:1fr}}

.card{
  background:var(--card); border:1px solid var(--hairline);
  border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow);
}
a.card{color:inherit; display:block; transition:transform .2s, border-color .2s}
a.card:hover{text-decoration:none; transform:translateY(-2px); border-color:var(--brand-300)}
.card p{margin:0; color:var(--slate); font-size:15.5px}
.card .more{display:inline-block; margin-top:16px; font-weight:600; font-size:14.5px; color:var(--link)}

.svc-icon{
  width:46px; height:46px; border-radius:12px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-50); color:var(--brand-600);
}
[data-theme="dark"] .svc-icon{background:var(--brand-800); color:var(--brand-200)}
.svc-icon svg{width:24px; height:24px}

.pill{
  display:inline-block; font-size:12.5px; font-weight:600;
  color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  padding:3px 11px; border-radius:999px; margin-inline-start:8px; vertical-align:middle;
}

/* Principles / value list */
.princ{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:860px){.princ{grid-template-columns:1fr}}
.princ h4{margin:0 0 6px; font-size:17px; font-family:var(--display); font-weight:700}
.princ p{margin:0; color:var(--mute); font-size:15px}
.princ .num{font-family:var(--mono); color:var(--accent); font-size:13px; display:block; margin-bottom:8px}

/* Feature list (checkmarks as copper ticks) */
.feat{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px}
.feat li{position:relative; padding-inline-start:30px; font-size:15.5px; color:var(--slate)}
.feat li::before{
  content:""; position:absolute; inset-inline-start:2px; top:.72em;
  width:15px; height:3.5px; border-radius:2px; background:var(--accent);
  transform:rotate(-22deg);
}

/* App word in headings carries the copper accent (matches the apps' own pages) */
.accent-word{color:var(--accent)}

/* Apps-portal note under app CTAs */
.portal-note{margin-top:16px; font-size:14px; max-width:56ch}

/* ---------- Product mock (from brand kit) ---------- */
.mock{
  background:var(--card); border:1px solid var(--hairline); border-radius:var(--r-xl);
  overflow:hidden; box-shadow:var(--shadow); max-width:640px;
}
.mock-top{
  display:flex; align-items:center; gap:10px; padding:13px 18px;
  border-bottom:1px solid var(--hairline); background:var(--mist);
}
.mock-top .glyphmark{width:24px; height:24px}
.mock-top .ttl{font-weight:600; font-size:14px}
.mock-body{padding:24px}
.input-ar{
  direction:rtl; font-family:var(--sans-ar); font-size:22px; font-weight:500;
  background:var(--mist); border:1px solid var(--hairline); border-radius:var(--r-md);
  padding:16px 20px; color:var(--fg);
}
.mock .btn{margin-top:16px}
.result{margin-top:22px; border-top:1px dashed var(--hairline); padding-top:16px}
.tok{
  direction:rtl; font-family:var(--sans-ar); display:flex; align-items:baseline; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--hairline);
}
.tok:last-child{border-bottom:0}
.tok .w{font-size:21px; font-weight:600; min-width:92px; color:var(--brand-500)}
.tok .w .mk{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--accent); vertical-align:super; margin-inline-start:3px;
}
.tok .g{color:var(--slate); font-size:15.5px}

/* Tarkeeb mock — dependency-tree drawing (inline SVG, theme-aware via vars) */
.mock-tree{display:block; width:100%; height:auto; margin-top:4px}
.mock-tree .tw{font:600 17px var(--sans-ar); fill:var(--brand-500)}
.mock-tree .arc{fill:none; stroke:var(--brand-300); stroke-width:1.5}
.mock-tree .lbl{font:12px var(--sans-ar); fill:var(--mute)}
.mock-tree .dot{fill:var(--brand-400)}
.mock-tree .root-tick{fill:var(--accent)}

/* ---------- Publication card ---------- */
.pub{border-inline-start:4px solid var(--accent)}
.pub .pub-meta{display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--mute); font-size:14px; margin:14px 0 0}
.pub .pub-meta span{display:inline-flex; align-items:center; gap:7px}
.pub h3{font-size:clamp(19px,2.6vw,24px); line-height:1.45; margin:6px 0 2px}
.pub .alt-title{font-family:var(--sans); color:var(--mute); font-size:15px; margin:4px 0 0; direction:ltr}
html[lang="en"] .pub .alt-title{font-family:var(--sans-ar); direction:rtl; text-align:start; font-size:16px}
.pub .pub-abstract{margin-top:16px; color:var(--slate); font-size:15.5px}
.pub .pub-note{margin-top:14px; color:var(--mute); font-size:13.5px}
.pub .pub-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}

.cite{
  margin-top:26px; border:1px dashed var(--hairline); border-radius:var(--r-md);
  padding:16px 18px; background:var(--mist);
}
.cite .cite-label{font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--mute); margin-bottom:8px; font-weight:600}
.cite p{font-family:var(--mono); font-size:13px; line-height:1.8; color:var(--slate); margin:0; direction:ltr; text-align:left}
.cite .copy-cite{margin-top:12px; font-size:13px; padding:7px 16px}

.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.chip{
  font-size:14px; font-weight:500; color:var(--slate);
  border:1px solid var(--hairline); background:var(--card);
  border-radius:999px; padding:7px 16px;
}

/* ---------- Blog ---------- */
.post-list{display:grid; gap:18px}
.post-card{display:block}
.post-card .date{font-family:var(--mono); font-size:12.5px; color:var(--mute); display:block; margin-bottom:8px; direction:ltr; text-align:start}
html[dir="rtl"] .post-card .date{direction:rtl}
.post-card h3{margin:0 0 8px; font-size:20px}
.post-card p{color:var(--slate)}

.prose{max-width:72ch; font-size:17px}
html[lang="ar"] .prose{font-size:17.5px}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(21px,3vw,27px); margin-top:1.9em}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:0; color:var(--fg)}
.prose blockquote{
  margin:1.4em 0; padding:4px 22px; border-inline-start:4px solid var(--accent);
  color:var(--slate); background:var(--mist); border-radius:var(--r-sm);
}
.prose code{font-family:var(--mono); font-size:.86em; background:var(--mist); border:1px solid var(--hairline); border-radius:5px; padding:1.5px 6px}
.prose ul{padding-inline-start:1.3em}
.prose li{margin-top:.45em}
.article-head{padding:56px 0 34px; border-bottom:1px solid var(--hairline)}
.article-head h1{font-family:var(--display); font-weight:900; font-size:clamp(28px,4.4vw,42px); line-height:1.3; margin:12px 0 14px; max-width:26ch}
.article-meta{color:var(--mute); font-size:14.5px; display:flex; flex-wrap:wrap; gap:6px 14px}
.article-body{padding:44px 0 64px}
.back-link{font-weight:600; font-size:14.5px}

/* Status notice (e.g. services-in-design disclaimer) */
.notice{
  border:1px solid var(--hairline); border-inline-start:4px solid var(--accent);
  background:var(--mist); border-radius:var(--r-md);
  padding:14px 18px; font-size:14.5px; color:var(--slate);
  max-width:72ch; margin:0 0 30px;
}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(155deg,var(--brand-700),var(--brand-900) 80%);
  color:#fff; border-radius:var(--r-xl); padding:44px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(300px 220px at 88% 0%, color-mix(in srgb,var(--copper-bright) 22%,transparent), transparent 70%);
}
.cta-band > *{position:relative; z-index:1}
.cta-band h2{font-size:clamp(21px,3vw,29px); color:#fff}
.cta-band p{margin:8px 0 0; color:color-mix(in srgb,#fff 82%,transparent); font-size:15.5px}

/* ---------- Footer ---------- */
footer{background:var(--brand-900); color:#B9C7D6; margin-top:64px}
.foot-in{
  max-width:var(--maxw); margin-inline:auto; padding:52px 24px 30px;
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:36px;
}
@media (max-width:860px){.foot-in{grid-template-columns:1fr}}
.foot-logo{height:64px; width:auto; display:block; margin-bottom:16px}
.foot-about{font-size:14.5px; max-width:38ch; margin:0; line-height:1.85}
footer h4{
  color:#fff; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  margin:0 0 14px; font-weight:600;
}
html[lang="ar"] footer h4{letter-spacing:.02em; font-size:14px}
.foot-links{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.foot-links a{color:#B9C7D6; font-size:14.5px}
.foot-links a:hover{color:#fff}
footer a{color:#D3DEE9}
footer a:hover{color:#fff}
.foot-note{
  max-width:var(--maxw); margin-inline:auto; padding:0 24px 22px;
  font-size:13px; line-height:1.9; color:#8FA1B3;
}
.foot-bottom{
  border-top:1px solid color-mix(in srgb,#fff 12%,transparent);
  max-width:var(--maxw); margin-inline:auto; padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:13px; color:#8FA1B3;
}

/* ---------- Misc ---------- */
.center{text-align:center}
.mt-0{margin-top:0}
.section-cta{margin-top:34px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
}