:root{
  --blue:#3767DA; --blue-deep:#2853BD; --blue-soft:#E8EEFB;
  --yellow:#FFDD00; --ink:#070A14; --ink-2:#4B5468; --ink-3:#8A92A6;
  --canvas:#FFFFFF; --canvas-2:#F6F8FC; --canvas-3:#EEF2F9;
  --hair:rgba(7,10,20,.08); --hair-2:rgba(7,10,20,.14); --line-white:rgba(255,255,255,.12);
  --ok:#1FBE69; --wa:#25D366; --wa-deep:#128C7E;
  --shadow:0 1px 2px rgba(7,10,20,.04), 0 24px 60px -28px rgba(7,10,20,.28);
  --shadow-sm:0 1px 2px rgba(7,10,20,.04), 0 12px 30px -18px rgba(7,10,20,.20);
  --wrap:min(1140px,92vw); --pad:clamp(56px,7vw,104px); --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ font-family:"Tajawal",system-ui,sans-serif; background:var(--canvas); color:var(--ink); font-size:17px; line-height:1.85; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; } img,svg{ max-width:100%; display:block; } ::selection{ background:var(--blue); color:#fff; }
.skip-link{ position:absolute; right:-100px; }
.wrap{ width:var(--wrap); margin-inline:auto; }
.mark{ background:var(--yellow); color:var(--ink); padding:.04em .32em .16em; border-radius:7px; white-space:nowrap; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.eyebrow{ display:inline-block; font-size:14px; font-weight:700; color:var(--blue); margin-bottom:16px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:inherit; font-weight:800; font-size:16px; padding:14px 26px; border-radius:13px; border:1.5px solid transparent; cursor:pointer; transition:transform .15s var(--ease), background .2s; white-space:nowrap; }
.btn svg{ width:17px; height:17px; } .btn .ar{ display:inline-block; transform:scaleX(-1); }
.btn--p{ background:var(--blue); color:#fff; box-shadow:0 10px 24px -10px rgba(55,103,218,.6); } .btn--p:hover{ background:var(--blue-deep); transform:translateY(-1px); }
.btn--g{ background:#fff; color:var(--ink); border-color:var(--hair-2); } .btn--g:hover{ background:var(--canvas-2); }
.btn--accent{ background:var(--yellow); color:var(--ink); } .btn--accent:hover{ filter:brightness(.96); }
.btn--ghostdark{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); } .btn--ghostdark:hover{ background:rgba(255,255,255,.08); }
.ctas{ display:flex; flex-wrap:wrap; gap:12px; }

/* nav */
.nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--hair); }
.nav__in{ width:var(--wrap); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:18px; height:68px; }
.brand{ display:inline-flex; align-items:center; gap:9px; font-weight:900; font-size:21px; }
.brand__mark{ width:30px; height:30px; border-radius:9px; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; } .brand__mark svg{ width:17px; height:17px; }
.nav__links{ display:flex; align-items:center; gap:24px; list-style:none; font-weight:700; font-size:16px; color:var(--ink-2); }
.nav__links > li > a:hover{ color:var(--ink); }
.nav__cta{ display:flex; align-items:center; gap:13px; }
.nav__login{ font-weight:700; color:var(--ink-2); font-size:16px; }
.nav__btn{ background:var(--blue); color:#fff; padding:10px 19px; border-radius:11px; font-weight:800; font-size:15px; }
.nav__burger{ display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--ink); } .nav__burger svg{ width:26px; height:26px; }
.has-drop{ position:relative; }
.drop-toggle{ display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:16px; color:var(--ink-2); } .drop-toggle:hover{ color:var(--ink); }
.drop-toggle svg{ width:15px; height:15px; transition:transform .2s var(--ease); }
.has-drop:hover .drop-toggle svg, .has-drop:focus-within .drop-toggle svg{ transform:rotate(180deg); }
.drop{ position:absolute; top:calc(100% + 16px); inset-inline-start:0; background:#fff; border:1px solid var(--hair); border-radius:16px; box-shadow:var(--shadow); padding:16px; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; z-index:60; }
.drop::before{ content:""; position:absolute; top:-16px; inset-inline:0; height:16px; }
.has-drop:hover .drop, .has-drop:focus-within .drop{ opacity:1; visibility:visible; transform:none; }
.drop--mega{ display:flex; gap:22px; flex-wrap:wrap; width:540px; max-width:88vw; }
.drop-col{ flex:1; min-width:210px; display:flex; flex-direction:column; }
.drop-group{ font-size:12px; font-weight:800; color:var(--ink-3); padding:6px 10px 4px; }
.drop-col .drop-item + .drop-group{ margin-top:8px; }
.drop-item{ display:flex; flex-direction:column; gap:1px; padding:9px 10px; border-radius:10px; }
.drop-item:hover{ background:var(--canvas-2); } .drop-item[aria-current]{ background:var(--blue-soft); }
.drop-item b{ font-size:14.5px; font-weight:800; color:var(--ink); } .drop-item span{ font-size:12.5px; color:var(--ink-3); }
.drop-foot{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; padding:12px 10px 2px; border-top:1px solid var(--hair); font-size:13px; color:var(--ink-3); }
.drop-foot a{ font-weight:800; color:var(--blue); display:inline-flex; align-items:center; gap:6px; } .drop-foot a svg{ width:14px; height:14px; }
@media(max-width:900px){
  .nav__login{ display:none; } .nav__links{ display:none; } .nav__burger{ display:flex; }
  .nav__links.open{ display:flex; position:absolute; inset-inline:0; top:68px; flex-direction:column; align-items:flex-start; gap:4px; background:#fff; padding:14px 6vw 22px; border-bottom:1px solid var(--hair); box-shadow:var(--shadow); max-height:82vh; overflow:auto; }
  .nav__links.open li{ width:100%; }
  .nav__links.open .drop{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding:4px 0 8px; } .nav__links.open .drop::before{ display:none; }
  .nav__links.open .drop--mega{ display:block; width:auto; } .nav__links.open .drop-col{ min-width:0; } .nav__links.open .drop-foot{ display:none; }
  .nav__links.open .drop-toggle, .nav__links.open > li > a{ padding:8px 0; font-size:17px; display:block; }
}

/* breadcrumb */
.crumb{ border-bottom:1px solid var(--hair); background:var(--canvas-2); }
.crumb ol{ width:var(--wrap); margin-inline:auto; list-style:none; display:flex; align-items:center; gap:9px; padding:13px 0; font-size:14px; color:var(--ink-3); font-weight:600; }
.crumb a:hover{ color:var(--ink); } .crumb svg{ width:14px; height:14px; transform:scaleX(-1); } .crumb [aria-current]{ color:var(--ink); }

/* hero */
.hero{ position:relative; overflow:hidden; padding-block:clamp(40px,5vw,76px); }
.hero::before{ content:""; position:absolute; inset:-10% -20% auto; height:460px; z-index:-1; background:radial-gradient(55% 60% at 80% 16%,rgba(55,103,218,.14),transparent 70%); }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,4vw,60px); align-items:center; }
.pill{ display:inline-flex; align-items:center; gap:8px; background:var(--blue-soft); color:var(--blue-deep); font-weight:800; font-size:14px; padding:7px 14px; border-radius:100px; margin-bottom:18px; } .pill svg{ width:16px; height:16px; }
.hero h1{ font-size:clamp(31px,4.6vw,52px); font-weight:900; line-height:1.32; letter-spacing:-.01em; margin-bottom:18px; }
.hero__sub{ font-size:clamp(16px,1.35vw,19px); color:var(--ink-2); line-height:1.9; max-width:48ch; margin-bottom:26px; }
.replaces{ margin-top:22px; font-size:14.5px; color:var(--ink-3); font-weight:600; }
.replaces b{ color:var(--ink); font-weight:800; }
.hero__media{ }

/* sections */
.sec{ padding-block:var(--pad); }
.sec--tint{ background:var(--canvas-2); }
.head{ max-width:680px; margin-inline:auto; text-align:center; margin-bottom:clamp(36px,4vw,56px); }
.h2{ font-size:clamp(25px,3.3vw,40px); font-weight:900; line-height:1.4; letter-spacing:-.01em; }
.head p{ margin-top:14px; color:var(--ink-2); font-size:17px; line-height:1.85; }

/* rows */
.rows{ display:grid; gap:clamp(44px,6vw,84px); }
.row{ display:grid; grid-template-columns:1fr 1.04fr; gap:clamp(28px,4vw,60px); align-items:center; }
.row--flip .row__media{ order:-1; }
.row__tag{ display:inline-block; font-size:14px; font-weight:800; color:var(--blue); margin-bottom:10px; }
.row h3{ font-size:clamp(21px,2.5vw,29px); font-weight:900; line-height:1.45; margin-bottom:12px; }
.row__lead{ color:var(--ink-2); font-size:16.5px; max-width:48ch; }
.list{ list-style:none; margin-top:16px; display:grid; gap:11px; }
.list li{ display:grid; grid-template-columns:22px 1fr; gap:11px; font-size:15.5px; color:var(--ink); font-weight:600; }
.list li svg{ width:18px; height:18px; color:var(--wa-deep); margin-top:5px; }

/* grid cards */
.fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.fcard{ background:#fff; border:1px solid var(--hair); border-radius:18px; padding:26px; box-shadow:var(--shadow-sm); }
.fcard__ic{ width:46px; height:46px; border-radius:13px; background:var(--blue-soft); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; margin-bottom:15px; } .fcard__ic svg{ width:23px; height:23px; }
.fcard h4{ font-size:18px; font-weight:900; margin-bottom:6px; } .fcard p{ color:var(--ink-2); font-size:15px; }

/* related */
.rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.rel{ background:#fff; border:1px solid var(--hair); border-radius:16px; padding:20px; box-shadow:var(--shadow-sm); transition:transform .15s var(--ease); }
.rel:hover{ transform:translateY(-2px); }
.rel__top{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.rel__ic{ width:38px; height:38px; border-radius:11px; background:var(--blue-soft); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; } .rel__ic svg{ width:19px; height:19px; }
.rel__name{ font-weight:900; font-size:16px; } .rel p{ color:var(--ink-2); font-size:14px; }
.rel__go{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; color:var(--blue); font-weight:800; font-size:14px; } .rel__go svg{ width:14px; height:14px; transform:scaleX(-1); }

/* cta band */
.ctaband{ }
.ctaband__card{ background:var(--ink); color:#fff; border-radius:26px; padding:clamp(40px,6vw,72px) clamp(26px,5vw,60px); text-align:center; max-width:860px; margin-inline:auto; }
.ctaband__card .eyebrow{ color:var(--yellow); }
.ctaband__card h2{ color:#fff; font-size:clamp(25px,3.4vw,40px); font-weight:900; line-height:1.4; }
.ctaband__card p{ color:rgba(255,255,255,.78); font-size:17px; max-width:50ch; margin:16px auto 28px; }
.ctaband .ctas{ justify-content:center; }
.ctaband__fine{ margin-top:20px; font-size:13.5px; color:rgba(255,255,255,.6); }

/* footer */
.foot{ border-top:1px solid var(--hair); padding-block:46px; background:var(--canvas-2); }
.foot__in{ width:var(--wrap); margin-inline:auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:28px; }
.foot__sub{ color:var(--ink-2); font-size:14.5px; max-width:38ch; margin-top:10px; }
.foot h4{ font-size:14px; font-weight:800; margin-bottom:12px; }
.foot ul{ list-style:none; display:grid; gap:9px; } .foot li a{ color:var(--ink-2); font-size:14.5px; font-weight:600; } .foot li a:hover{ color:var(--ink); }
.foot__bottom{ width:var(--wrap); margin-inline:auto; margin-top:28px; padding-top:20px; border-top:1px solid var(--hair); display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:13.5px; color:var(--ink-3); }
@media(max-width:760px){ .foot__in{ grid-template-columns:1fr 1fr; } }

/* art */
.art{ background:var(--canvas-2); border:1px solid var(--hair); border-radius:20px; padding:clamp(18px,2.4vw,26px); box-shadow:var(--shadow-sm); }
.art__cap{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--ink-3); margin-bottom:16px; } .art__cap svg{ width:16px; height:16px; color:var(--blue); }
.flow{ display:grid; gap:10px; }
.node{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--hair); border-radius:13px; padding:12px 14px; }
.node--trigger{ border-color:rgba(55,103,218,.3); } .node--goal{ border-color:rgba(31,190,105,.4); background:#F2FCF6; }
.node__ic{ width:34px; height:34px; border-radius:10px; background:var(--blue-soft); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .node__ic svg{ width:18px; height:18px; }
.node--goal .node__ic{ background:#D9F7E6; color:var(--wa-deep); }
.node b{ font-size:15px; font-weight:800; display:block; } .node span{ font-size:12.5px; color:var(--ink-3); }
.flow__link{ width:2px; height:14px; background:var(--hair-2); margin-inline-start:30px; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--hair-2); border-radius:100px; padding:9px 15px; font-size:14px; font-weight:700; } .chip svg{ width:15px; height:15px; color:var(--blue); }
.chip--accent{ background:var(--blue-soft); border-color:transparent; color:var(--blue-deep); } .chip--accent svg{ color:var(--blue-deep); }
.shot{ margin:0; border-radius:16px; overflow:hidden; border:1px solid var(--hair-2); box-shadow:var(--shadow); } .shot img{ width:100%; height:auto; display:block; }
/* offer card */
.offer{ background:var(--ink); color:#fff; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); max-width:380px; margin-inline:auto; }
.offer__bar{ display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.06); padding:11px 16px; font-size:12px; font-weight:800; color:#ffe04d; }
.offer__body{ padding:18px; } .offer__name{ font-size:18px; font-weight:900; margin-bottom:8px; }
.offer__price{ display:flex; align-items:baseline; gap:9px; } .offer__price b{ font-size:30px; font-weight:900; } .offer__price s{ color:rgba(255,255,255,.5); font-size:16px; }
.offer__inst{ font-size:12.5px; color:#ffe04d; font-weight:700; margin-top:4px; }
.offer__btn{ margin-top:13px; background:var(--blue); color:#fff; text-align:center; border-radius:11px; padding:12px; font-weight:800; font-size:15px; }
.offer__fine{ text-align:center; font-size:11.5px; color:rgba(255,255,255,.5); margin-top:9px; }
/* score card */
.score{ background:#fff; border:1px solid var(--hair); border-radius:18px; padding:20px; box-shadow:var(--shadow-sm); max-width:380px; margin-inline:auto; }
.score__head{ display:flex; align-items:center; gap:12px; }
.score__av{ width:44px; height:44px; border-radius:50%; background:var(--blue-soft); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; font-weight:900; }
.score__name{ font-weight:900; font-size:15.5px; } .score__mail{ font-size:12.5px; color:var(--ink-3); }
.score__tag{ margin-inline-start:auto; font-size:11px; font-weight:800; color:#c81e3a; background:rgba(200,30,58,.1); border-radius:100px; padding:4px 10px; }
.score__metric{ display:flex; align-items:baseline; gap:8px; margin-top:16px; } .score__metric b{ font-size:30px; font-weight:900; color:var(--blue-deep); } .score__metric span{ font-size:13px; color:var(--ink-3); }
.score__bar{ height:8px; background:var(--canvas-3); border-radius:100px; margin-top:8px; overflow:hidden; } .score__bar i{ display:block; height:100%; width:84%; background:linear-gradient(90deg,var(--blue),#6f97ee); border-radius:100px; }
.score__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
.score__cell{ background:var(--canvas-2); border:1px solid var(--hair); border-radius:10px; padding:9px 6px; text-align:center; } .score__cell b{ display:block; font-size:17px; font-weight:900; } .score__cell span{ font-size:11px; color:var(--ink-3); }
.score__cell--on{ background:var(--blue-soft); border-color:transparent; } .score__cell--on b{ color:var(--blue-deep); }
/* chat */
.chat{ background:#fff; border:1px solid var(--hair); border-radius:18px; box-shadow:var(--shadow-sm); overflow:hidden; max-width:400px; margin-inline:auto; }
.chat__head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--hair); font-weight:800; font-size:14px; }
.chat__live{ display:inline-flex; align-items:center; gap:7px; } .chat__live i{ width:8px; height:8px; border-radius:50%; background:#ff4d4d; box-shadow:0 0 0 4px rgba(255,77,77,.16); display:inline-block; }
.chat__count{ font-size:12px; color:var(--ink-3); font-weight:600; }
.chat__body{ padding:14px; display:grid; gap:11px; background:var(--canvas-2); }
.msg{ display:flex; gap:9px; align-items:flex-start; } .msg__av{ width:30px; height:30px; border-radius:50%; background:var(--blue-soft); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:11px; flex-shrink:0; }
.msg__av--ai{ background:var(--ink); color:#fff; } .msg__av--ai svg{ width:15px; height:15px; }
.msg__t{ background:#fff; border:1px solid var(--hair); border-radius:12px; padding:8px 11px; font-size:13.5px; } .msg__t b{ display:block; font-size:12px; color:var(--ink-3); font-weight:800; margin-bottom:2px; }
.msg--ai .msg__t{ background:var(--blue-soft); border-color:transparent; }
.pinned{ background:var(--ink); color:#fff; border-radius:12px; padding:12px; }
.pinned__tag{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; color:#ffe04d; margin-bottom:9px; } .pinned__tag svg{ width:13px; height:13px; } .pinned__tag em{ color:rgba(255,255,255,.6); font-style:normal; margin-inline-start:auto; }
.pinned__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .pinned__name{ font-weight:800; font-size:14px; } .pinned__price b{ font-size:19px; font-weight:900; } .pinned__price s{ color:rgba(255,255,255,.5); font-size:13px; margin-inline-start:6px; }
.pinned__btn{ background:var(--blue); color:#fff; border-radius:9px; padding:8px 14px; font-weight:800; font-size:13px; white-space:nowrap; }
/* stats + funnel panels */
.stats{ display:grid; gap:12px; } .stat{ background:#fff; border:1px solid var(--hair); border-radius:13px; padding:14px 16px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.stat__lbl{ font-size:13.5px; color:var(--ink-3); font-weight:700; } .stat__val{ font-size:24px; font-weight:900; } .stat__delta{ font-size:12px; color:var(--wa-deep); font-weight:700; }
.fnl{ display:grid; gap:9px; } .fnl__row{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; }
.fnl__lbl{ font-size:13.5px; font-weight:700; min-width:74px; } .fnl__track{ height:14px; background:var(--canvas-3); border-radius:100px; overflow:hidden; } .fnl__fill{ height:100%; background:linear-gradient(90deg,var(--blue),#6f97ee); border-radius:100px; } .fnl__val{ font-size:13.5px; font-weight:800; min-width:48px; text-align:start; }

/* RTL niceties for Arabic readability */
html[dir="rtl"] .hero h1, html[dir="rtl"] .h2{ line-height:1.45; }
@media(max-width:900px){
  .hero__grid,.row{ grid-template-columns:1fr; gap:34px; } .row--flip .row__media{ order:0; }
  .fgrid,.rel-grid{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; }
}
@media(max-width:560px){ .btn{ width:100%; } .hero .ctas .btn, .ctaband .ctas .btn{ width:auto; } }