/* ============================================================
   SANAD PLATFORM — Marketing site design system
   Shared across all pages. Bilingual EN/AR, RTL-aware via
   CSS logical properties.
   ============================================================ */

:root{
  /* brand */
  --navy:#0E1B33; --navy-deep:#0A1426; --navy-soft:#16264a; --navy-700:#1b2e54;
  --blue:#2A6BFF; --blue-bright:#3b7bff; --blue-dim:#6f94d6; --blue-ghost:rgba(42,107,255,.08);
  --light:#F4F6FA; --paper:#FFFFFF; --paper-2:#FBFCFE;
  --ink:#0E1B33; --muted:#5B647A; --faint:#8b94a8;
  --line:rgba(14,27,51,.10); --line-2:rgba(14,27,51,.07); --line-strong:rgba(14,27,51,.16);
  --line-navy:rgba(255,255,255,.12);

  /* product accents (used sparingly for wayfinding) */
  --c-itsm:#2A6BFF; --c-cms:#4F63E0; --c-dms:#1796A0; --c-tasks:#E0833A; --c-wf:#7A5AF8; --c-ai:#5B7BFF;
  --c-spm:#C0497B; --c-evt:#1E9E6A;

  /* type */
  --font:'Plus Jakarta Sans',-apple-system,system-ui,'Segoe UI',sans-serif;
  --font-ar:'IBM Plex Sans Arabic','Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* layout */
  --maxw:1240px; --gutter:40px; --radius:18px; --radius-lg:26px; --radius-sm:12px;
  --shadow-sm:0 2px 10px -4px rgba(14,27,51,.16);
  --shadow:0 24px 60px -28px rgba(14,27,51,.32);
  --shadow-lg:0 50px 100px -40px rgba(14,27,51,.45);
  --header-h:78px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:18px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html[dir="rtl"] body{font-family:var(--font-ar);}
html[dir="rtl"] .mono, html[dir="rtl"] [class*="kicker"]{font-family:var(--mono);}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4,p{margin:0; text-wrap:pretty;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:4px;}

/* ---------- language visibility helpers ---------- */
[data-en],[data-ar]{}
html[dir="rtl"] .ltr-only{display:none !important;}
html[dir="ltr"] .rtl-only{display:none !important;}

/* ---------- typography scale ---------- */
.kicker{
  font-family:var(--mono); font-size:14px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue); display:inline-flex; align-items:center; gap:12px;
}
html[dir="rtl"] .kicker{letter-spacing:.06em;}
.kicker::before{content:""; width:26px; height:2px; background:currentColor; display:inline-block; opacity:.9;}
.kicker.center::before{display:none;}

.display{font-size:clamp(40px,6vw,82px); font-weight:800; line-height:1.02; letter-spacing:-.03em;}
.h1{font-size:clamp(34px,4.6vw,60px); font-weight:800; line-height:1.05; letter-spacing:-.025em;}
.h2{font-size:clamp(28px,3.4vw,46px); font-weight:800; line-height:1.08; letter-spacing:-.02em;}
.h3{font-size:clamp(21px,1.7vw,27px); font-weight:700; line-height:1.2; letter-spacing:-.01em;}
.lead{font-size:clamp(18px,1.5vw,23px); line-height:1.55; color:var(--muted); font-weight:400;}
.lead strong{color:var(--ink); font-weight:700;}
.eyebrow{font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);}
html[dir="rtl"] .display,html[dir="rtl"] .h1,html[dir="rtl"] .h2{letter-spacing:0; line-height:1.14;}

.muted{color:var(--muted);}
.accent{color:var(--blue);}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);}
.section{padding-block:clamp(64px,9vw,128px);}
.section-sm{padding-block:clamp(48px,6vw,84px);}
.center{text-align:center;}
.center .kicker{justify-content:center;}
.measure{max-width:760px;}
.measure-sm{max-width:580px;}
.center.measure,.center .measure{margin-inline:auto;}
.stack-3>*+*{margin-top:14px;}
.stack-4>*+*{margin-top:22px;}
.grid{display:grid; gap:24px;}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center;}
.split.wide-l{grid-template-columns:1.1fr .9fr;}
.split.wide-r{grid-template-columns:.9fr 1.1fr;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:16px;
  padding:15px 26px; border-radius:999px; border:1px solid transparent; line-height:1;
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .2s;
  white-space:nowrap;
}
.btn svg{width:18px; height:18px;}
.btn .arr{transition:transform .25s var(--ease);}
.btn:hover .arr{transform:translateX(4px);}
html[dir="rtl"] .btn .arr{transform:scaleX(-1);}
html[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(4px);}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 12px 26px -10px rgba(42,107,255,.6);}
.btn-primary:hover{background:var(--blue-bright); transform:translateY(-2px); box-shadow:0 18px 34px -12px rgba(42,107,255,.7);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px);}
.btn-white{background:#fff; color:var(--navy);}
.btn-white:hover{transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(0,0,0,.4);}
.btn-line-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.28);}
.btn-line-light:hover{border-color:#fff; background:rgba(255,255,255,.06); transform:translateY(-2px);}
.btn-lg{padding:18px 32px; font-size:17px;}
.textlink{color:var(--blue); font-weight:700; display:inline-flex; align-items:center; gap:8px;}
.textlink .arr{transition:transform .25s var(--ease);}
.textlink:hover .arr{transform:translateX(4px);}
html[dir="rtl"] .textlink .arr{transform:scaleX(-1);}
html[dir="rtl"] .textlink:hover .arr{transform:scaleX(-1) translateX(4px);}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s, background .3s;
}
.site-header.scrolled{border-bottom-color:var(--line); box-shadow:0 6px 24px -16px rgba(14,27,51,.4);}
.nav{display:flex; align-items:center; gap:30px; height:var(--header-h);}
.brand{display:flex; align-items:center; gap:10px; flex:none;}
.brand img{height:34px; width:auto;}
.nav-links{display:flex; align-items:center; gap:6px; margin-inline-start:18px;}
.nav-links a, .nav-trigger{
  font-size:15.5px; font-weight:600; color:var(--ink); padding:10px 14px; border-radius:10px;
  display:inline-flex; align-items:center; gap:6px; background:none; border:none; transition:background .2s, color .2s;
  white-space:nowrap;
}
.nav-links a:hover, .nav-trigger:hover{background:var(--blue-ghost); color:var(--blue);}
.nav-links a.active{color:var(--blue);}
.nav-spacer{flex:1;}
.nav-actions{display:flex; align-items:center; gap:12px; flex:none;}
.lang-toggle{
  font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.04em;
  padding:9px 14px; border-radius:999px; border:1px solid var(--line-strong); background:none; color:var(--ink);
  display:inline-flex; align-items:center; gap:7px; transition:border-color .2s, background .2s;
}
.lang-toggle:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-ghost);}
.lang-toggle svg{width:15px; height:15px; opacity:.8;}

/* products dropdown */
.has-drop{position:relative;}
.has-drop::after{content:""; position:absolute; top:100%; left:0; right:0; height:18px; display:none;}
.has-drop:hover::after, .has-drop:focus-within::after{display:block;}
.drop{
  position:absolute; inset-inline-start:50%; transform:translateX(-50%) translateY(10px);
  top:calc(100% + 10px); width:540px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; opacity:0; visibility:hidden;
  transition:opacity .22s var(--ease), transform .22s var(--ease); z-index:120;
}
html[dir="rtl"] .drop{transform:translateX(50%) translateY(10px);}
.has-drop:hover .drop, .has-drop:focus-within .drop{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
html[dir="rtl"] .has-drop:hover .drop, html[dir="rtl"] .has-drop:focus-within .drop{transform:translateX(50%) translateY(0);}
.drop-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.drop a{display:flex; gap:13px; padding:13px; border-radius:12px; align-items:flex-start; transition:background .18s;}
.drop a:hover{background:var(--light);}
.drop .di{width:38px; height:38px; border-radius:10px; flex:none; display:grid; place-items:center; background:var(--blue-ghost);}
.drop .di svg{width:20px; height:20px; stroke:var(--blue); fill:none; stroke-width:1.7;}
.drop .dt{display:block; font-weight:700; font-size:15px; line-height:1.2;}
.drop .dd{display:block; font-size:13px; color:var(--muted); line-height:1.3; margin-top:3px;}
.drop-foot{display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:8px; padding:13px 13px 6px; border-top:1px solid var(--line-2); font-size:14px; font-weight:700; color:var(--blue);}
.drop-foot .arr{width:16px; height:16px; transition:transform .25s var(--ease);}
.drop-foot:hover .arr{transform:translateX(4px);}
html[dir="rtl"] .drop-foot{justify-content:flex-start;}
html[dir="rtl"] .drop-foot .arr{transform:scaleX(-1);}
html[dir="rtl"] .drop-foot:hover .arr{transform:scaleX(-1) translateX(4px);}

/* mobile nav */
.burger{display:none; width:44px; height:44px; border:1px solid var(--line-strong); border-radius:12px; background:none; align-items:center; justify-content:center;}
.burger span{display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:.25s;}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); transition:.25s;}
.burger span::before{top:-6px;} .burger span::after{top:6px;}
.mobile-panel{
  position:fixed; inset:var(--header-h) 0 0 0; background:#fff; z-index:90; padding:24px var(--gutter) 60px;
  transform:translateY(-12px); opacity:0; visibility:hidden; transition:.28s var(--ease); overflow-y:auto;
}
.mobile-panel.open{transform:none; opacity:1; visibility:visible;}
.mobile-panel a{display:block; font-size:20px; font-weight:700; padding:16px 4px; border-bottom:1px solid var(--line-2);}
.mobile-panel .sub a{font-size:16px; font-weight:600; color:var(--muted); padding-inline-start:18px;}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep); color:rgba(255,255,255,.7); padding-block:72px 36px;}
.site-footer a{color:rgba(255,255,255,.7); transition:color .2s;}
.site-footer a:hover{color:#fff;}
.footer-top{display:grid; grid-template-columns:1.6fr 1.5fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--line-navy);}
.footer-brand img{height:32px; margin-bottom:18px;}
.footer-col h4{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-dim); margin-bottom:18px; font-weight:600;}
.footer-col a{display:block; font-size:15px; margin-bottom:11px; font-weight:500;}
.footer-col-wide{display:grid; grid-template-columns:1fr 1fr; gap:0 24px; align-content:start;}
.footer-col-wide h4{grid-column:1 / -1;}
.footer-col-wide a{white-space:nowrap;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:28px; font-size:13.5px; color:rgba(255,255,255,.5); gap:20px; flex-wrap:wrap;}
.footer-bottom .mono{font-family:var(--mono); letter-spacing:.04em;}

/* ---------- surfaces ---------- */
.navy-section{background:var(--navy); color:#fff; position:relative; overflow:hidden;}
.navy-section .lead{color:rgba(255,255,255,.72);} .navy-section .lead strong{color:#fff;}
.navy-section .h1,.navy-section .h2,.navy-section .display{color:#fff;}
.navy-section .muted{color:rgba(255,255,255,.6);}
.glow{position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(900px 560px at 80% 0%, rgba(42,107,255,.22), transparent 62%),
  radial-gradient(680px 520px at 8% 100%, rgba(42,107,255,.12), transparent 60%);}
.light-section{background:var(--light);}

/* card */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;}
.card.hover:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:transparent;}
.card .ic{width:54px; height:54px; border-radius:14px; background:var(--blue-ghost); display:grid; place-items:center; margin-bottom:22px;}
.card .ic svg{width:27px; height:27px; stroke:var(--blue); fill:none; stroke-width:1.7;}
.card h3{font-size:22px; font-weight:700; letter-spacing:-.01em; margin-bottom:9px;}
.card p{font-size:16px; color:var(--muted); line-height:1.5;}

/* feature row with check */
.checks{display:grid; gap:14px;}
.checks li{list-style:none; display:flex; gap:13px; align-items:flex-start; font-size:17px; line-height:1.45;}
.checks .ck{width:24px; height:24px; flex:none; border-radius:7px; background:var(--blue-ghost); display:grid; place-items:center; margin-top:1px;}
.checks .ck svg{width:14px; height:14px; stroke:var(--blue); fill:none; stroke-width:2.4;}
ul.bare{margin:0; padding:0;} ul.bare li{list-style:none;}

/* pill / badge */
.pill{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--navy); background:#fff; border:1px solid var(--line-strong); border-radius:999px; padding:9px 16px;}
.pill.on-navy{background:rgba(255,255,255,.06); border-color:var(--line-navy); color:#fff;}
.pill-row{display:flex; flex-wrap:wrap; gap:11px;}

/* stat */
.stat .n{font-family:var(--mono); font-size:clamp(34px,4vw,52px); font-weight:600; color:var(--blue-bright); letter-spacing:-.02em; line-height:1;}
.navy-section .stat .n{color:var(--blue-bright);}
.stat .l{font-size:15px; color:var(--muted); margin-top:10px; line-height:1.35;}
.navy-section .stat .l{color:rgba(255,255,255,.65);}

/* screenshot frame */
.frame{border-radius:var(--radius); overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);}
.frame .bar{height:40px; background:#eef1f6; display:flex; align-items:center; gap:8px; padding-inline:16px; border-bottom:1px solid var(--line);}
.frame .bar i{width:11px; height:11px; border-radius:50%; background:#cfd6e2;}
.frame img{width:100%; height:auto; display:block;}
.frame.float{box-shadow:var(--shadow-lg);}

/* product chip/icon block */
.pchip{width:60px; height:60px; border-radius:16px; display:grid; place-items:center; flex:none;}
.pchip svg{width:30px; height:30px; stroke:#fff; fill:none; stroke-width:1.7;}

/* ---------- reveal animation ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:none;}
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1 !important; transform:none !important; transition:none !important;}}

/* hero shared */
.hero-back{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.7); margin-bottom:28px; transition:color .2s;}
.hero-back:hover{color:#fff;}
.hero-back svg{width:17px; height:17px; transition:transform .2s var(--ease);}
.hero-back:hover svg{transform:translateX(-3px);}
html[dir="rtl"] .hero-back svg{transform:scaleX(-1);}
html[dir="rtl"] .hero-back:hover svg{transform:scaleX(-1) translateX(-3px);}
.hero{position:relative; overflow:hidden; padding-block:clamp(72px,11vw,150px) clamp(60px,8vw,110px);}
.hero-navy{background:var(--navy); color:#fff;}
.hero .eyebrow{color:var(--blue-dim);}

/* dot grid bg decoration */
.dotgrid{position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.07) 1.4px, transparent 1.4px); background-size:34px 34px; mask-image:linear-gradient(to bottom, black, transparent 80%); pointer-events:none;}

/* CTA band */
.cta-band{background:var(--navy); color:#fff; border-radius:var(--radius-lg); padding:clamp(40px,6vw,72px); position:relative; overflow:hidden;}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .footer-top{grid-template-columns:1fr 1fr;}
  .drop{width:440px;}
}
@media (max-width:1080px){
  .nav-links, .nav-actions .desktop{display:none;}
  .burger{display:flex;}
}
@media (max-width:900px){
  :root{--gutter:24px;}
  .split, .split.wide-l, .split.wide-r{grid-template-columns:1fr; gap:40px;}
  .g-4{grid-template-columns:repeat(2,1fr);}
  .g-3{grid-template-columns:1fr 1fr;}
  .order-media{order:-1;}
}
@media (max-width:620px){
  body{font-size:17px;}
  .g-2,.g-3,.g-4{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr; gap:28px;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
  .btn{width:100%; justify-content:center;}
  .hero-actions .btn{width:auto;}
}