/* ============ tokens ============ */
:root{
  --paper:#E9EDF1;
  --paper-2:#F7F9FB;
  --ink:#0A1522;
  --ink-panel:#0D1B2B;
  --ink-panel-2:#132436;
  --rule:#CBD6E0;
  --rule-soft:#DDE4EA;
  --muted:#5A6B7C;
  --brand:#1B3FA0;
  --brand-deep:#0E2464;
  --amber:#F2B705;
  --teal:#17948C;
  --coral:#E2574C;
  --plum:#6D4C9F;
  /* chart palette on dark */
  --c1:#6FA8FF; --c2:#FFC947; --c3:#45D6C4; --c4:#FF8B7B; --c5:#B79BFF;
  --sans:"IBM Plex Sans Arabic",system-ui,-apple-system,Segoe UI,sans-serif;
  --display:"Bricolage Grotesque","IBM Plex Sans Arabic",system-ui,sans-serif;
  --mono:"IBM Plex Mono","IBM Plex Sans Arabic",ui-monospace,monospace;
  --cell:28px;
  --maxw:1160px;
  --r:14px;
}
html[dir="rtl"]{ --display:"IBM Plex Sans Arabic",system-ui,sans-serif; --mono:"IBM Plex Sans Arabic",ui-monospace,monospace; }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(to right, rgba(10,21,34,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,21,34,.045) 1px, transparent 1px);
  background-size:var(--cell) var(--cell);
}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:1.04; margin:0}
h1{font-size:clamp(2.35rem,7.2vw,4.55rem)}
h2{font-size:clamp(1.85rem,4.6vw,3.05rem)}
h3{font-size:clamp(1.05rem,2.2vw,1.3rem); letter-spacing:-.01em; line-height:1.25}
p{margin:0}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:20px}
.mono{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500}
html[dir="rtl"] .mono{letter-spacing:0; font-size:.78rem}
.muted{color:var(--muted)}

/* ============ nav ============ */
header.top{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(12px); background:rgba(233,237,241,.82);
  border-bottom:1px solid var(--rule);
}
.topin{display:flex; align-items:center; gap:18px; height:64px}
.brand{display:flex; align-items:center; text-decoration:none; margin-inline-end:auto; color:var(--ink)}
.brand-col{display:flex; flex-direction:column; gap:4px}

/* wordmark — custom letterforms, drawn as paths, no font dependency */
.wm{display:block; color:var(--ink); line-height:0}
.wm .wm-svg{height:23px; width:67px; display:block}
html[dir="rtl"] .wm{direction:ltr}
.wm.sm{margin-inline-end:10px}
.wm.sm .wm-svg{height:14px; width:41px}
.foot-brand{display:flex; align-items:center}
.bsub{font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
html[dir="rtl"] .bsub{letter-spacing:.02em; font-size:.66rem}
nav.links{display:flex; gap:22px}
nav.links a{font-size:.9rem; text-decoration:none; color:var(--muted); padding-block:6px; border-bottom:2px solid transparent}
nav.links a:hover{color:var(--ink); border-color:var(--amber)}
.langs{display:flex; border:1px solid var(--rule); border-radius:999px; overflow:hidden; background:var(--paper-2)}
.langs button{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  border:0; background:transparent; padding:7px 11px; cursor:pointer; color:var(--muted);
}
.langs button[aria-pressed="true"]{background:var(--ink); color:#fff}
.btn{
  display:inline-flex; align-items:center; gap:9px; border:0; cursor:pointer;
  font-family:var(--sans); font-size:.95rem; font-weight:600; text-decoration:none;
  padding:13px 20px; border-radius:10px; background:var(--brand); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 8px 22px -12px var(--brand-deep);
  transition:transform .15s ease, background .2s ease;
}
.btn:hover{background:var(--brand-deep); transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--rule); box-shadow:none}
.btn.ghost:hover{background:var(--paper-2); border-color:var(--ink)}
.btn.sm{padding:9px 15px; font-size:.86rem}
.btn.wa{background:#128C7E}
.btn.wa:hover{background:#0d6c61}
.menu-btn{display:none}

/* ============ pages & tabbar ============ */
.tabbar{
  position:sticky; top:64px; z-index:55;
  background:rgba(233,237,241,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.tabbar-in{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}
.tabbar-in::-webkit-scrollbar{display:none}
.tabbar a{
  flex:none; text-decoration:none; color:var(--muted); white-space:nowrap;
  font-family:var(--sans); font-size:1.06rem; font-weight:600; letter-spacing:-.01em;
  padding:20px 24px 17px; border-bottom:3px solid transparent; display:flex; align-items:center;
  transition:color .18s ease, border-color .18s ease;
}
html[dir="rtl"] .tabbar a{font-size:1.12rem}
.tabbar a:hover{color:var(--ink)}
.tabbar a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--amber); font-weight:700}
main{animation:pagein .42s cubic-bezier(.2,.7,.2,1) both}
@keyframes pagein{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* next-page band */
.pagenav{border-top:1px solid var(--rule); background:var(--paper-2)}
.pagenav a{
  display:flex; align-items:center; justify-content:space-between; gap:18px; text-decoration:none;
  padding-block:clamp(28px,5vw,44px); transition:padding-inline .2s ease;
}
.pagenav a:hover{padding-inline-end:8px}
.pagenav .k{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
html[dir="rtl"] .pagenav .k{letter-spacing:.02em; font-size:.78rem}
.pagenav .v{font-family:var(--display); font-weight:800; font-size:clamp(1.4rem,4vw,2.1rem); letter-spacing:-.02em; margin-top:6px}
.pagenav .arrow{width:44px; height:44px; border-radius:50%; border:1px solid var(--rule); display:grid; place-items:center; flex:none; background:#fff; transition:.2s}
.pagenav a:hover .arrow{background:var(--ink); border-color:var(--ink); color:#fff; transform:translateX(4px)}
html[dir="rtl"] .pagenav a:hover .arrow{transform:translateX(-4px)}
html[dir="rtl"] .pagenav .arrow svg{transform:scaleX(-1)}

/* ============ section frame ============ */
section{padding-block:clamp(64px,9vw,120px); position:relative}
.eyebrow{display:flex; align-items:center; gap:12px; margin-bottom:22px; color:var(--muted)}
.eyebrow .col{
  font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.1em;
  width:26px; height:26px; display:grid; place-items:center; color:var(--ink);
  border:1px solid var(--rule); background:var(--paper-2); border-radius:5px; flex:none;
}
.eyebrow .rule{height:1px; background:var(--rule); flex:1}
.lede{max-width:56ch; margin-top:18px; color:var(--muted); font-size:1.06rem}

/* ============ hero ============ */
.hero{padding-top:clamp(40px,6vw,74px); padding-bottom:clamp(40px,5vw,70px)}
.hero h1 em{font-style:normal; position:relative; white-space:nowrap}
.hero h1 em::after{
  content:""; position:absolute; inset-inline:-2px; bottom:.06em; height:.34em;
  background:var(--amber); opacity:.55; z-index:-1; border-radius:2px;
}
.hero h1 span.cellmark{position:relative; z-index:1}
.hero-grid{display:grid; gap:clamp(34px,5vw,58px); grid-template-columns:1fr}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:26px; color:var(--muted)}
.hero-meta div{display:flex; align-items:center; gap:8px; font-size:.85rem; font-family:var(--mono); letter-spacing:.04em}
.dot{width:6px; height:6px; border-radius:50%; background:var(--teal); flex:none}

/* ============ transformer (signature) ============ */
.tf{
  background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r);
  box-shadow:0 30px 60px -40px rgba(10,21,34,.5); overflow:hidden;
}
.tf-head{display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--rule-soft); background:#fff}
.tf-file{font-family:var(--mono); font-size:.72rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tf-dots{display:flex; gap:5px; flex:none}
.tf-dots i{width:9px; height:9px; border-radius:50%; background:var(--rule); display:block}
.tf-body{position:relative; height:290px; padding:14px}
.tf-layer{position:absolute; inset:14px; transition:opacity .45s ease}
.tf-layer[data-hidden="true"]{opacity:0; pointer-events:none}
table.sheet{width:100%; height:100%; border-collapse:collapse; table-layout:fixed; font-family:var(--mono); font-size:.66rem}
table.sheet th,table.sheet td{border:1px solid var(--rule-soft); padding:4px 6px; text-align:start; white-space:nowrap; overflow:hidden; color:var(--ink);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease;}
table.sheet th{background:#EDF1F5; color:var(--muted); font-weight:500; font-size:.6rem}
table.sheet td.bad{background:rgba(226,87,76,.12); color:var(--coral)}
table.sheet td.dupe{background:rgba(242,183,5,.16)}
.tf[data-state="insight"] table.sheet td{transform:translateY(6px) scale(.94); opacity:.15}
.tf-foot{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:12px 14px; border-top:1px solid var(--rule-soft); background:#fff}
.tf-caption{font-family:var(--mono); font-size:.7rem; color:var(--muted); line-height:1.5}
.tf-caption b{color:var(--coral); font-weight:600}
.tf[data-state="insight"] .tf-caption b{color:var(--teal)}
.switch{display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; flex:none}
.switch span{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.switch .track{width:52px; height:28px; border-radius:999px; background:var(--rule); position:relative; transition:background .3s ease; flex:none}
.switch .knob{position:absolute; top:3px; inset-inline-start:3px; width:22px; height:22px; border-radius:50%; background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.25); transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.tf[data-state="insight"] .switch .track{background:var(--teal)}
.tf[data-state="insight"] .switch .knob{transform:translateX(24px)}
html[dir="rtl"] .tf[data-state="insight"] .switch .knob{transform:translateX(-24px)}
.tf[data-state="insight"] .switch span.on{color:var(--teal)}
#tfChart{width:100%; height:100%}
#tfChart .bar{transform-origin:center bottom; transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s ease}
.tf[data-state="raw"] #tfChart .bar{transform:scaleY(.02); opacity:0}
#tfChart text{font-family:var(--mono); font-size:9px; fill:var(--muted)}
#tfChart .val{fill:var(--ink); font-weight:600; font-size:10px}

/* ============ logo strip ============ */
.strip{border-block:1px solid var(--rule); background:var(--paper-2); padding-block:18px}
.strip-in{display:flex; align-items:center; gap:14px 30px; flex-wrap:wrap; justify-content:center}
.strip-in span{font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.strip-in span.tag{color:var(--ink); font-weight:600}

/* ============ dark dashboard ============ */
.dark{background:var(--ink-panel); color:#E6EDF4; border-block:1px solid #0a1420}
.dark h2{color:#fff}
.dark .eyebrow{color:#7E93A8}
.dark .eyebrow .col{background:var(--ink-panel-2); border-color:#22384E; color:#fff}
.dark .eyebrow .rule{background:#22384E}
.dark .lede{color:#93A8BC}
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin:26px 0 22px}
.tabs button{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  background:var(--ink-panel-2); border:1px solid #22384E; color:#93A8BC; padding:9px 15px;
  border-radius:999px; cursor:pointer; transition:.2s;
}
.tabs button:hover{color:#fff; border-color:#3A5A78}
.tabs button[aria-pressed="true"]{background:var(--amber); border-color:var(--amber); color:#20180a; font-weight:600}
.kpis{display:grid; gap:12px; grid-template-columns:repeat(2,1fr)}
.kpi{background:var(--ink-panel-2); border:1px solid #1E3348; border-radius:12px; padding:14px 15px}
.kpi .lab{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:#7E93A8}
html[dir="rtl"] .kpi .lab{letter-spacing:0; font-size:.72rem}
.kpi .num{font-family:var(--display); font-weight:700; font-size:clamp(1.35rem,4vw,1.85rem); margin-top:6px; letter-spacing:-.02em}
.kpi .row{display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:4px}
.kpi .delta{font-family:var(--mono); font-size:.7rem; font-weight:600}
.kpi .delta.up{color:var(--c3)} .kpi .delta.down{color:var(--c4)}
.kpi svg{width:70px; height:26px; flex:none}
.panels{display:grid; gap:12px; margin-top:12px; grid-template-columns:1fr}
.panel{background:var(--ink-panel-2); border:1px solid #1E3348; border-radius:12px; padding:16px; position:relative}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.panel-title{font-weight:600; font-size:.98rem}
.panel-sub{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:#7E93A8; margin-top:2px}
html[dir="rtl"] .panel-sub{letter-spacing:0; font-size:.74rem}
.seg{display:flex; border:1px solid #22384E; border-radius:8px; overflow:hidden}
.seg button{background:transparent; border:0; color:#7E93A8; font-family:var(--mono); font-size:.66rem; padding:6px 10px; cursor:pointer}
.seg button[aria-pressed="true"]{background:#22384E; color:#fff}
.legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:12px}
.legend button{background:none; border:0; cursor:pointer; display:flex; align-items:center; gap:7px; color:#93A8BC; font-size:.82rem; font-family:var(--sans); padding:2px 0}
.legend button i{width:10px; height:10px; border-radius:3px; display:block; flex:none}
.legend button[aria-pressed="false"]{opacity:.38; text-decoration:line-through}
.chartbox{position:relative}
.chartbox svg{width:100%; height:auto; display:block; overflow:visible}
.grid-line{stroke:#22384E; stroke-width:1}
.axis-txt{font-family:var(--mono); font-size:10px; fill:#7E93A8}
@media (max-width:759px){ .axis-txt{font-size:13px} }
.tip{
  position:absolute; pointer-events:none; z-index:5; opacity:0; transition:opacity .12s ease;
  background:#04101C; border:1px solid #2C4360; border-radius:9px; padding:9px 11px; min-width:120px;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.8); transform:translate(-50%,-116%);
}
.tip[data-show="true"]{opacity:1}
.tip .t-head{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:#7E93A8; margin-bottom:5px}
.tip .t-row{display:flex; align-items:center; gap:8px; font-size:.82rem; white-space:nowrap}
.tip .t-row b{margin-inline-start:auto; font-family:var(--mono); font-size:.8rem}
.tip .t-row i{width:8px; height:8px; border-radius:2px; display:block}
.demo-note{font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; margin-top:18px; color:#6E8299}
html[dir="rtl"] .demo-note{letter-spacing:0; font-size:.76rem}

/* ============ services ============ */
.cards{display:grid; gap:14px; grid-template-columns:1fr; margin-top:36px}
.card{
  background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r); padding:24px 22px;
  position:relative; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.card:hover{transform:translateY(-3px); box-shadow:0 22px 40px -30px rgba(10,21,34,.7); border-color:var(--ink)}
.card .idx{font-family:var(--mono); font-size:.68rem; color:var(--muted); letter-spacing:.14em}
.card h3{margin:12px 0 10px}
.card p{color:var(--muted); font-size:.96rem}
.card .tools{display:flex; flex-wrap:wrap; gap:6px; margin-top:16px}
.card .tools em{font-style:normal; font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--rule); border-radius:6px; padding:4px 8px; color:var(--muted); background:#fff}
.card svg.icon{position:absolute; inset-inline-end:18px; top:18px; width:34px; height:34px; opacity:.9}

/* ============ process ============ */
.steps{display:grid; gap:0; margin-top:36px; border-top:1px solid var(--rule)}
.step{display:grid; grid-template-columns:auto 1fr; gap:16px 20px; padding:22px 0; border-bottom:1px solid var(--rule); align-items:start}
.step .when{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:#fff; background:var(--ink);
  padding:5px 9px; border-radius:6px; white-space:nowrap}
.step:nth-child(4) .when{background:var(--teal)}
.step p{color:var(--muted); margin-top:7px; font-size:.97rem; max-width:62ch}

/* ============ domains ============ */
.domains{display:grid; gap:14px; grid-template-columns:1fr; margin-top:36px}
.domain{border:1px solid var(--rule); border-radius:var(--r); padding:22px; background:var(--paper-2)}
.domain .top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.domain h3{font-size:1.1rem}
.domain p{color:var(--muted); font-size:.94rem; margin-top:10px}
.domain svg.spark{width:88px; height:34px; flex:none}

/* ============ about ============ */
.about{display:grid; gap:34px; grid-template-columns:1fr; align-items:start}
.facts{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden}
.fact{background:var(--paper-2); padding:18px}
.fact .k{font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
html[dir="rtl"] .fact .k{letter-spacing:0; font-size:.74rem}
.fact .v{font-family:var(--display); font-weight:700; font-size:1.5rem; margin-top:4px; letter-spacing:-.02em}
.fact .v small{font-size:.9rem; font-weight:500; color:var(--muted); font-family:var(--sans)}

/* ============ contact ============ */
.contact-grid{display:grid; gap:28px; grid-template-columns:1fr; margin-top:36px}
form{display:grid; gap:14px}
.field{display:grid; gap:7px}
.field label{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
html[dir="rtl"] .field label{letter-spacing:0; font-size:.76rem}
.field input,.field textarea,.field select{
  font-family:var(--sans); font-size:1rem; color:var(--ink); background:#fff;
  border:1px solid var(--rule); border-radius:10px; padding:13px 14px; width:100%;
}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:transparent}
.hp{position:absolute; left:-9999px}
.side{display:grid; gap:12px; align-content:start}
.side a.line{display:flex; align-items:center; gap:12px; text-decoration:none; border:1px solid var(--rule);
  background:var(--paper-2); border-radius:12px; padding:15px 16px; transition:.2s}
.side a.line:hover{border-color:var(--ink); background:#fff}
.side a.line .k{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.side a.line .v{font-weight:600; font-size:.98rem}
.side a.line svg{width:22px; height:22px; flex:none}

/* ============ footer ============ */
footer{border-top:1px solid var(--rule); background:var(--paper-2); padding-block:34px}
.foot{display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; justify-content:space-between}
.foot .mono{color:var(--muted)}

/* ============ reveal ============ */
.rv{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1; transform:none}

/* ============ responsive ============ */
@media (min-width:760px){
  .kpis{grid-template-columns:repeat(4,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .domains{grid-template-columns:repeat(3,1fr)}
  .facts{grid-template-columns:repeat(2,1fr)}
  .step{grid-template-columns:110px 1fr}
  .contact-grid{grid-template-columns:1.25fr .85fr}
  .panels{grid-template-columns:1fr}
}
@media (min-width:1000px){
  .hero-grid{grid-template-columns:1.02fr 1fr; align-items:center}
  .panels.two{grid-template-columns:1.35fr 1fr}
  .about{grid-template-columns:1fr 1fr; gap:48px}
}
@media (max-width:759px){
  nav.links{display:none}
  .tabbar a{padding:16px 15px 13px; font-size:.98rem}
  .topin{gap:10px}
  .bsub{display:none}
  .wm .wm-svg{height:21px; width:62px}
  .tf-body{height:250px}
  .btn{padding:12px 17px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}
.dark :focus-visible{outline-color:var(--amber)}