/* ============================================
   SCALES LAB — Design System
   Locked palette · RTL · 8px scale
   ============================================ */

:root{
  /* palette — locked */
  --ink:#0B1B32;
  --ink-2:#14294A;
  --blue:#2563EB;
  --blue-lit:#60A5FA;
  --cyan:#38BDF8;
  --card:#16294A;
  --line:#24406B;
  --white:#FFFFFF;
  --mute:#A9BBD4;
  --mute-2:#6E86A8;

  /* spacing — 8px scale */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s8:64px; --s10:80px; --s12:96px; --s16:128px;

  /* radius */
  --r-s:12px; --r-m:16px; --r-l:24px;

  --wrap:1200px;
  --ease:cubic-bezier(.32,.72,.28,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Tajawal','Inter',system-ui,sans-serif;
  background:var(--ink);
  color:var(--white);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s3)}
.lat{font-family:'Inter',sans-serif;direction:ltr;unicode-bidi:isolate}

/* ============ TYPE ============ */
h1{font-size:clamp(38px,5.4vw,68px);line-height:1.16;font-weight:800;letter-spacing:-.5px}
h2{font-size:clamp(28px,3.6vw,44px);line-height:1.28;font-weight:800;letter-spacing:-.3px}
h3{font-size:clamp(19px,2vw,23px);line-height:1.4;font-weight:700}
.accent{color:var(--blue-lit)}
.lede{color:var(--mute);font-size:clamp(16px,1.4vw,19px);max-width:58ch}
.tag{display:inline-flex;align-items:center;gap:var(--s1);font-size:14px;color:var(--blue-lit);margin-bottom:var(--s2)}
.tag::before{content:'';width:18px;height:1.5px;background:var(--blue-lit);border-radius:2px}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:100;background:rgba(11,27,50,.86);backdrop-filter:blur(16px);border-bottom:1px solid rgba(96,165,250,.12)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:76px;gap:var(--s3)}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo svg{width:30px;height:30px;flex-shrink:0}
.logo b{font-family:'Inter',sans-serif;font-size:15px;font-weight:700;letter-spacing:2.4px;display:block;line-height:1.2}
.logo i{font-family:'Inter',sans-serif;font-style:normal;font-size:8px;letter-spacing:2.4px;color:var(--mute);display:block}
.nav-links{display:flex;gap:var(--s4);font-size:16px;color:var(--mute)}
.nav-links a{padding:6px 0;position:relative;transition:color .22s var(--ease)}
.nav-links a:hover{color:var(--white)}
.nav-links a[aria-current="page"]{color:var(--white)}
.nav-links a[aria-current="page"]::after{content:'';position:absolute;bottom:0;inset-inline:0;height:2px;background:var(--blue-lit);border-radius:2px}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:var(--r-s);align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger span{width:17px;height:1.8px;background:var(--white);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.nav.open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{display:none;flex-direction:column;gap:var(--s1);padding:var(--s2) 0 var(--s4);border-top:1px solid rgba(96,165,250,.12)}
.nav.open .mobile-menu{display:flex}
.mobile-menu a{padding:12px 4px;font-size:17px;color:var(--mute)}
.mobile-menu a:hover{color:var(--white)}
.mobile-menu .btn{margin-top:var(--s2)}
@media(max-width:940px){
  .nav-links,.nav-in>.btn{display:none}
  .burger{display:flex}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 28px;border-radius:var(--r-s);font-size:16px;font-weight:700;
  transition:background .22s var(--ease),transform .22s var(--ease),border-color .22s var(--ease),color .22s;
}
.btn-p{background:var(--blue);color:#fff;box-shadow:0 12px 30px -14px rgba(37,99,235,.9)}
.btn-p:hover{background:#1D55C7;transform:translateY(-2px)}
.btn-s{border:1px solid var(--line);color:var(--mute)}
.btn-s:hover{border-color:var(--blue-lit);color:var(--white)}
.btn-sm{padding:10px 20px;font-size:15px}
.cta-row{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s5)}

/* ============ SECTIONS ============ */
.sec{padding:var(--s12) 0;position:relative}
.sec-alt{background:var(--ink-2)}
.sec-light{background:var(--white);color:var(--ink)}
.sec-light .lede{color:#4B5F7D}
.sec-light .tag{color:var(--blue)}
.sec-light .tag::before{background:var(--blue)}
.sec-head{max-width:62ch;margin-bottom:var(--s8)}
@media(max-width:768px){.sec{padding:var(--s10) 0}}

/* ============ HERO ============ */
.hero{position:relative;padding:var(--s10) 0 var(--s12);overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(880px 640px at 88% -10%, rgba(37,99,235,.36), transparent 62%),
    radial-gradient(640px 480px at 4% 106%, rgba(56,189,248,.11), transparent 66%);
}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:center}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:var(--s8)}}
.pill{
  display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--blue-lit);
  border:1px solid rgba(96,165,250,.32);background:rgba(37,99,235,.08);
  padding:8px 18px;border-radius:100px;margin-bottom:var(--s3);
}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(56,189,248,.16)}
.hero h1{margin-bottom:var(--s3)}
.hero .lede{margin-bottom:0}
.hero-note{margin-top:var(--s3);font-size:14px;color:var(--mute-2)}

/* ============ SYSTEM DIAGRAM ============ */
.diagram{position:relative;padding:var(--s3)}
.node{position:relative}
.node:not(.core)::after{
  content:'';position:absolute;bottom:calc(-1 * var(--s2));inset-inline-start:50%;
  width:1.5px;height:var(--s2);
  background:linear-gradient(180deg,rgba(96,165,250,.7),rgba(96,165,250,.15));
}
.node:not(.core)::before{
  content:'';position:absolute;bottom:calc(-1 * var(--s2) - 1px);inset-inline-start:calc(50% - 2.5px);
  width:6px;height:6px;border-radius:50%;background:var(--cyan);opacity:.85;
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:.9;transform:scale(1)}}
.node:nth-child(2)::before{animation-delay:.35s}
.node:nth-child(3)::before{animation-delay:.7s}
.node:nth-child(4)::before{animation-delay:1.05s}
.node:nth-child(5)::before{animation-delay:1.4s}
.node:nth-child(6)::before{animation-delay:1.75s}
.nodes{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
.node{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--s3) var(--s2);text-align:center;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s;
}
.node:hover,.node.lit{border-color:var(--blue-lit);transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(37,99,235,.8)}
.node .ic{
  width:44px;height:44px;margin:0 auto var(--s1);border-radius:var(--r-s);
  background:rgba(37,99,235,.16);border:1px solid rgba(96,165,250,.24);
  display:grid;place-items:center;
}
.node .ic svg{width:21px;height:21px;stroke:var(--blue-lit);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.node b{display:block;font-size:15px;font-weight:700}
.node span{font-size:12.5px;color:var(--mute-2)}
.node.core{grid-column:1/-1;background:linear-gradient(135deg,rgba(37,99,235,.22),rgba(56,189,248,.06));border-color:rgba(96,165,250,.4)}

/* ============ STATEMENT ============ */
.statement{border-block:1px solid rgba(96,165,250,.14);padding:var(--s10) 0;text-align:center}
.statement p{font-size:clamp(22px,2.9vw,35px);font-weight:700;line-height:1.5;max-width:22ch;margin-inline:auto}
.statement p span{color:var(--blue-lit)}

/* ============ CARDS ============ */
.grid{display:grid;gap:var(--s3)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:var(--s4) var(--s3);
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.card:hover{border-color:rgba(96,165,250,.5);transform:translateY(-3px)}
.card .ic{
  width:46px;height:46px;border-radius:var(--r-s);margin-bottom:var(--s2);
  background:rgba(37,99,235,.14);border:1px solid rgba(96,165,250,.22);
  display:grid;place-items:center;
}
.card .ic svg{width:22px;height:22px;stroke:var(--blue-lit);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:8px}
.card p{color:var(--mute);font-size:15px}

/* numbered module list */
.mods{display:grid;grid-template-columns:340px 1fr;gap:var(--s6);align-items:start}
@media(max-width:900px){.mods{grid-template-columns:1fr;gap:var(--s4)}}
.mod-list{display:flex;flex-direction:column;gap:6px}
.mod-btn{
  display:flex;align-items:center;gap:var(--s2);width:100%;text-align:start;
  padding:15px var(--s2);border-radius:var(--r-s);border:1px solid transparent;
  color:var(--mute);transition:all .22s var(--ease);
}
.mod-btn:hover{background:rgba(37,99,235,.08);color:var(--white)}
.mod-btn[aria-selected="true"]{background:var(--card);border-color:var(--blue);color:var(--white)}
.mod-btn u{font-family:'Inter',sans-serif;text-decoration:none;font-size:13px;font-weight:700;color:var(--blue-lit);width:24px;flex-shrink:0}
.mod-btn b{font-size:16.5px;font-weight:700}
.mod-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s5);display:none}
.mod-panel.on{display:block;animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mod-panel h3{margin-bottom:var(--s2)}
.mod-panel p{color:var(--mute);margin-bottom:var(--s3)}
.mod-panel ul{display:flex;flex-direction:column;gap:10px}
.mod-panel li{display:flex;gap:10px;color:var(--mute);font-size:15px;line-height:1.6}
.mod-panel li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue-lit);margin-top:10px;flex-shrink:0}

/* ============ PHONE ============ */
.phone{
  width:344px;max-width:100%;margin-inline:auto;position:relative;
  background:#0F2038;border-radius:42px;padding:11px;
  box-shadow:0 46px 84px -32px rgba(0,0,0,.75), 0 0 0 1px rgba(96,165,250,.22);
}
.phone::after{content:'';position:absolute;inset:-14px;border-radius:56px;background:radial-gradient(circle,rgba(37,99,235,.22),transparent 70%);z-index:-1;pointer-events:none}
.screen{background:#0E2140;border-radius:32px;overflow:hidden;display:flex;flex-direction:column;height:612px}
.sc-top{background:linear-gradient(120deg,var(--blue),var(--ink-2));padding:14px 17px;display:flex;align-items:center;gap:11px;flex-shrink:0}
.sc-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(140deg,var(--cyan),var(--blue));display:grid;place-items:center;font-weight:800;font-size:15px;color:var(--ink)}
.sc-top b{font-size:14.5px;font-weight:700;display:block;line-height:1.3}
.sc-top small{font-size:11.5px;color:#BFDBFE;display:block}
.sc-body{flex:1;overflow-y:auto;scrollbar-width:thin}
.sc-body::-webkit-scrollbar{width:3px}
.sc-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.pane{display:none;flex-direction:column;gap:9px;padding:15px}
.pane.on{display:flex}
.sc-nav{display:flex;background:#0A1930;border-top:1px solid rgba(96,165,250,.12);flex-shrink:0}
.sc-nav button{flex:1;padding:11px 2px 13px;text-align:center;font-size:10.5px;color:var(--mute);position:relative;transition:color .2s}
.sc-nav button u{display:block;text-decoration:none;margin:0 auto 4px;width:18px;height:18px}
.sc-nav button u svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sc-nav button[aria-selected="true"]{color:var(--blue-lit);font-weight:700}
.sc-nav button[aria-selected="true"]::after{content:'';position:absolute;bottom:5px;inset-inline:50% auto;transform:translateX(50%);width:18px;height:2.5px;border-radius:3px;background:var(--blue-lit)}

/* UI atoms inside phone */
.ui-t{font-size:12.5px;font-weight:700;display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.ui-t small{font-size:10.5px;color:var(--blue-lit);font-weight:400}
.ui-row{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:11px 13px;display:flex;justify-content:space-between;align-items:center;gap:10px;transition:border-color .2s,box-shadow .2s;cursor:pointer;text-align:start}
.ui-row:hover{border-color:rgba(96,165,250,.6)}
.ui-row[aria-pressed="true"]{border-color:var(--blue-lit);box-shadow:0 0 0 1px var(--blue-lit)}
.ui-row b{font-size:12.5px;font-weight:700;display:block}
.ui-row small{font-size:10.5px;color:#8FA6C6}
.ui-row .pr{font-size:12.5px;font-weight:700;color:var(--blue-lit);white-space:nowrap}
.ui-days{display:flex;gap:6px}
.ui-days button{flex:1;padding:9px 0;border-radius:11px;background:var(--card);border:1px solid var(--line);font-size:11.5px;color:#8FA6C6;transition:all .2s}
.ui-days button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}
.ui-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ui-slots button{padding:10px 0;border-radius:11px;background:var(--card);border:1px solid var(--line);font-size:11.5px;color:var(--white);transition:all .2s;font-family:'Inter',sans-serif}
.ui-slots button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);font-weight:700}
.ui-slots button[disabled]{color:#4A5F80;text-decoration:line-through;cursor:not-allowed}
.ui-cta{margin-top:auto;background:var(--blue);color:#fff;text-align:center;padding:13px;border-radius:var(--r-s);font-size:13px;font-weight:700;width:100%;transition:background .2s}
.ui-cta:hover{background:#1D55C7}
.ui-done{background:rgba(37,99,235,.14);border:1px solid rgba(96,165,250,.5);border-radius:13px;padding:13px;font-size:12px;text-align:center;animation:fade .3s var(--ease)}
.ui-done b{display:block;color:var(--blue-lit);margin-bottom:4px;font-size:13px}
.ui-done span{color:#C7D9F0}
.ui-badge{font-size:9.5px;background:var(--blue);color:#fff;padding:3px 9px;border-radius:100px;font-weight:700}
.ui-search{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:9px 12px;font-size:11.5px;color:#8FA6C6}
.ui-chips{display:flex;gap:6px;flex-wrap:wrap}
.ui-chips button{border:1px solid var(--line);background:var(--card);color:#8FA6C6;border-radius:100px;padding:6px 13px;font-size:10.5px;transition:all .2s}
.ui-chips button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}
.ui-prods{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ui-prod{background:var(--card);border:1px solid var(--line);border-radius:13px;overflow:hidden}
.ui-prod .im{height:62px;display:grid;place-items:center;background:linear-gradient(140deg,rgba(96,165,250,.16),rgba(56,189,248,.05))}
.ui-prod .im svg{width:26px;height:26px;stroke:var(--blue-lit);fill:none;stroke-width:1.5}
.ui-prod .mt{padding:8px 10px}
.ui-prod b{font-size:11px;display:block}
.ui-prod span{font-size:11px;color:var(--blue-lit);font-weight:700;display:block;margin-top:2px;font-family:'Inter',sans-serif}
.ui-cart{background:#0A1930;border:1px solid var(--line);border-radius:13px;padding:11px 13px;display:flex;justify-content:space-between;align-items:center;font-size:11.5px;margin-top:auto}
.ui-cart b{color:var(--blue-lit);font-family:'Inter',sans-serif}
.bub{max-width:84%;padding:10px 14px;font-size:13px;line-height:1.6;border-radius:16px;animation:fade .3s var(--ease)}
.bub-them{align-self:flex-start;background:#1B3055;border-top-right-radius:5px}
.bub-bot{align-self:flex-end;background:var(--blue);border-top-left-radius:5px}
.typing{align-self:flex-end;background:#1B3055;border-radius:16px;border-top-left-radius:5px;padding:12px 16px;display:flex;gap:5px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--blue-lit);animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.ui-replies{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.ui-replies button{border:1px solid rgba(96,165,250,.4);color:var(--blue-lit);background:rgba(37,99,235,.08);border-radius:100px;padding:7px 13px;font-size:11px;transition:all .2s}
.ui-replies button:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.ui-input{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:100px;padding:8px 14px;font-size:11.5px;color:#8FA6C6;margin-top:8px}
.ui-input span{flex:1}
.ui-input svg{width:16px;height:16px;stroke:var(--blue-lit);fill:none;stroke-width:1.8}

/* ============ TIMELINE ============ */
.tl{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2);position:relative;margin-top:var(--s8)}
.tl::before{content:'';position:absolute;top:26px;inset-inline:5%;height:1.5px;background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent)}
.tl-i{text-align:center;position:relative}
.tl-n{
  width:52px;height:52px;margin:0 auto var(--s2);border-radius:50%;
  background:var(--ink);border:1.5px solid var(--line);
  display:grid;place-items:center;font-family:'Inter',sans-serif;font-weight:700;font-size:14px;color:var(--blue-lit);
  position:relative;z-index:1;transition:border-color .3s var(--ease),background .3s;
}
.tl-i.seen .tl-n{border-color:var(--blue-lit);background:rgba(37,99,235,.18)}
.tl-i b{display:block;font-size:14.5px;font-weight:700;margin-bottom:4px}
.tl-i p{font-size:12.5px;color:var(--mute-2);line-height:1.5}
@media(max-width:980px){.tl{grid-template-columns:repeat(3,1fr);gap:var(--s3)}.tl::before{display:none}}
@media(max-width:560px){.tl{grid-template-columns:repeat(2,1fr)}}

/* ============ PORTFOLIO ============ */
.pf-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.pf-card:hover{border-color:rgba(96,165,250,.55);transform:translateY(-4px)}
.pf-top{height:150px;position:relative;display:grid;place-items:center;overflow:hidden}
.pf-top::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(37,99,235,.3),transparent 62%)}
.pf-mark{font-family:'Inter',sans-serif;font-weight:800;font-size:26px;letter-spacing:3px;color:rgba(255,255,255,.94);position:relative;z-index:1;text-align:center}
.pf-mark small{display:block;font-size:9px;letter-spacing:2.6px;font-weight:500;color:rgba(255,255,255,.6);margin-top:4px}
.pf-body{padding:var(--s3);display:flex;flex-direction:column;flex:1}
.pf-label{
  display:inline-flex;align-self:flex-start;font-size:11px;font-weight:700;
  color:var(--blue-lit);border:1px solid rgba(96,165,250,.4);
  background:rgba(37,99,235,.1);padding:4px 12px;border-radius:100px;margin-bottom:12px;
}
.pf-body h3{margin-bottom:4px}
.pf-meta{font-size:13.5px;color:var(--mute-2);margin-bottom:var(--s2)}
.pf-mods{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--s3)}
.pf-mods span{font-size:11.5px;color:var(--mute);border:1px solid var(--line);border-radius:100px;padding:4px 11px}
.pf-body .btn{margin-top:auto}

/* ============ CASE ============ */
.case-hero{padding:var(--s10) 0 var(--s6);position:relative;overflow:hidden}
.case-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(780px 420px at 70% -20%,rgba(37,99,235,.3),transparent 64%);pointer-events:none}
.case-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid rgba(96,165,250,.14);padding-bottom:var(--s2);margin-bottom:var(--s6)}
.case-tabs button{padding:10px 20px;border-radius:var(--r-s);font-size:15px;color:var(--mute);transition:all .22s var(--ease)}
.case-tabs button:hover{color:var(--white);background:rgba(37,99,235,.1)}
.case-tabs button[aria-selected="true"]{background:var(--blue);color:#fff;font-weight:700}
.case-pane{display:none}
.case-pane.on{display:block;animation:fade .35s var(--ease)}
.case-split{display:grid;grid-template-columns:1fr 380px;gap:var(--s8);align-items:center}
@media(max-width:900px){.case-split{grid-template-columns:1fr;gap:var(--s5)}.case-split .phone{order:-1}}
.feat{display:flex;gap:var(--s2);padding:var(--s3) 0;border-bottom:1px solid rgba(96,165,250,.12)}
.feat:last-child{border:0}
.feat .ic{width:44px;height:44px;border-radius:var(--r-s);background:rgba(37,99,235,.14);border:1px solid rgba(96,165,250,.22);display:grid;place-items:center;flex-shrink:0}
.feat .ic svg{width:21px;height:21px;stroke:var(--blue-lit);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feat b{display:block;font-size:17px;margin-bottom:4px;font-weight:700}
.feat p{color:var(--mute);font-size:15px}

/* dashboard */
.dash{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.dash-top{display:flex;align-items:center;justify-content:space-between;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);flex-wrap:wrap;gap:var(--s2)}
.dash-top b{font-size:16px}
.dash-note{font-size:11.5px;color:var(--blue-lit);border:1px solid rgba(96,165,250,.4);border-radius:100px;padding:4px 12px}
.dash-body{display:grid;grid-template-columns:190px 1fr;min-height:390px}
@media(max-width:760px){.dash-body{grid-template-columns:1fr}}
.dash-side{border-inline-end:1px solid var(--line);padding:var(--s2);display:flex;flex-direction:column;gap:2px}
@media(max-width:760px){.dash-side{border-inline-end:0;border-bottom:1px solid var(--line);flex-direction:row;overflow-x:auto}}
.dash-side button{text-align:start;padding:10px 13px;border-radius:10px;font-size:14px;color:var(--mute);transition:all .2s;white-space:nowrap}
.dash-side button:hover{background:rgba(37,99,235,.1);color:var(--white)}
.dash-side button[aria-selected="true"]{background:var(--blue);color:#fff;font-weight:700}
.dash-main{padding:var(--s3)}
.dash-pane{display:none}
.dash-pane.on{display:block;animation:fade .3s var(--ease)}
.dash-list{display:flex;flex-direction:column;gap:8px}
.dash-item{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-s);padding:13px 15px;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap}
.dash-item b{font-size:14.5px;display:block}
.dash-item small{font-size:12.5px;color:var(--mute-2)}
.dash-item .st{font-size:12px;color:var(--blue-lit);border:1px solid rgba(96,165,250,.4);border-radius:100px;padding:3px 12px;white-space:nowrap}
.chart{display:flex;align-items:flex-end;gap:9px;height:170px;padding-top:var(--s2)}
.chart div{flex:1;background:linear-gradient(180deg,var(--blue-lit),var(--blue));border-radius:6px 6px 0 0;position:relative;min-height:8px}
.chart div span{position:absolute;bottom:-24px;inset-inline:0;text-align:center;font-size:11px;color:var(--mute-2)}

/* ============ COMPARE ============ */
.cmp{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s4);align-items:center}
@media(max-width:860px){.cmp{grid-template-columns:1fr;gap:var(--s3)}}
.cmp-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s4)}
.cmp-box.win{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 24px 56px -28px rgba(37,99,235,.7)}
.cmp-box h3{margin-bottom:var(--s3)}
.cmp-box li{display:flex;gap:10px;color:var(--mute);font-size:15px;padding:9px 0;line-height:1.55}
.cmp-box li::before{content:'—';color:var(--mute-2);flex-shrink:0}
.cmp-box.win li::before{content:'+';color:var(--blue-lit);font-weight:700}
.cmp-vs{font-family:'Inter',sans-serif;font-weight:800;font-size:15px;color:var(--mute-2);text-align:center}

/* ============ PRICING ============ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);align-items:start}
@media(max-width:940px){.plans{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s5) var(--s4)}
.plan.best{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 26px 60px -28px rgba(37,99,235,.65);position:relative}
.plan-badge{position:absolute;top:-13px;inset-inline-end:var(--s4);background:var(--blue);font-size:12px;padding:5px 15px;border-radius:100px;font-weight:700}
.plan h3{margin-bottom:6px}
.plan .who{color:var(--mute-2);font-size:13.5px;margin-bottom:var(--s3)}
.plan .amt{font-family:'Inter',sans-serif;font-size:38px;font-weight:800;letter-spacing:-1px}
.plan .amt em{font-style:normal;font-size:15px;color:var(--mute);font-weight:400;font-family:'Tajawal',sans-serif}
.plan .sub{color:var(--mute);font-size:14px;margin:8px 0 var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.plan ul{display:flex;flex-direction:column;gap:11px;margin-bottom:var(--s4)}
.plan li{font-size:14.5px;color:var(--mute);display:flex;gap:10px;line-height:1.55}
.plan li::before{content:'✓';color:var(--blue-lit);font-weight:800;flex-shrink:0}
.plan .btn{width:100%}
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s6)}
@media(max-width:700px){.terms{grid-template-columns:1fr}}
.term{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s3);text-align:center}
.term b{display:block;font-family:'Inter',sans-serif;font-size:22px;color:var(--blue-lit);margin-bottom:4px}
.term span{font-size:13.5px;color:var(--mute)}

/* ============ FAQ ============ */
.faq{max-width:840px;margin-inline:auto}
.q{border-bottom:1px solid rgba(96,165,250,.14)}
.q button{width:100%;text-align:start;padding:var(--s3) 0;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);font-size:17px;font-weight:700;transition:color .2s}
.q button:hover{color:var(--blue-lit)}
.q button i{font-style:normal;font-size:22px;color:var(--blue-lit);transition:transform .3s var(--ease);flex-shrink:0;line-height:1}
.q[open] button i{transform:rotate(45deg)}
.q .a{color:var(--mute);font-size:15.5px;padding-bottom:var(--s3);max-width:70ch;display:none}
.q[open] .a{display:block;animation:fade .3s var(--ease)}

/* ============ FORM ============ */
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s5)}
@media(max-width:600px){.form{padding:var(--s3)}}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-bottom:var(--s2)}
@media(max-width:620px){.f-row{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:7px;margin-bottom:var(--s2)}
.f label{font-size:14px;color:var(--mute)}
.f input,.f select,.f textarea{
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r-s);
  padding:13px 15px;color:var(--white);font:inherit;font-size:15px;
  transition:border-color .2s;width:100%;
}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--blue-lit);outline:none}
.f textarea{min-height:110px;resize:vertical}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--blue-lit) 50%),linear-gradient(135deg,var(--blue-lit) 50%,transparent 50%);background-position:calc(var(--s2)) calc(50% - 2px),calc(var(--s2) + 5px) calc(50% - 2px);background-size:5px 5px;background-repeat:no-repeat}
.f-ok{text-align:center;padding:var(--s6) var(--s3);display:none}
.f-ok.on{display:block;animation:fade .4s var(--ease)}
.f-ok .mark{width:64px;height:64px;margin:0 auto var(--s3);border-radius:50%;background:rgba(37,99,235,.16);border:1.5px solid var(--blue-lit);display:grid;place-items:center;font-size:28px;color:var(--blue-lit)}
.f-ok h3{margin-bottom:10px}
.f-ok p{color:var(--mute)}

/* ============ FINAL ============ */
.final{text-align:center;position:relative;overflow:hidden}
.final::before{content:'';position:absolute;inset:0;background:radial-gradient(760px 400px at 50% 0%,rgba(37,99,235,.28),transparent 66%);pointer-events:none}
.final h2{max-width:20ch;margin:0 auto var(--s3);position:relative}
.final .lede{margin:0 auto;position:relative}
.final .cta-row{justify-content:center;position:relative}
.final .mark{margin-top:var(--s8);font-family:'Inter',sans-serif;position:relative}
.final .mark b{display:block;font-size:17px;letter-spacing:3.4px;font-weight:700}
.final .mark span{font-size:9.5px;letter-spacing:3px;color:var(--mute-2)}

/* ============ FOOTER ============ */
footer{border-top:1px solid rgba(96,165,250,.12);padding:var(--s8) 0 var(--s5)}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s5);margin-bottom:var(--s6)}
@media(max-width:840px){.f-grid{grid-template-columns:1fr 1fr;gap:var(--s4)}}
@media(max-width:520px){.f-grid{grid-template-columns:1fr}}
.f-grid p{color:var(--mute);font-size:14.5px;margin-top:var(--s2);max-width:34ch}
.f-col h4{font-size:14px;color:var(--white);margin-bottom:var(--s2);font-weight:700}
.f-col a{display:block;color:var(--mute);font-size:14.5px;padding:5px 0;transition:color .2s}
.f-col a:hover{color:var(--blue-lit)}
.f-btm{border-top:1px solid rgba(96,165,250,.1);padding-top:var(--s3);display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;color:var(--mute-2);font-size:13.5px}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

.back{display:inline-flex;align-items:center;gap:8px;color:var(--mute);font-size:14.5px;margin-bottom:var(--s3);transition:color .2s}
.back::before{content:'→';color:var(--blue-lit);font-size:16px}
.back:hover{color:var(--white)}
.case-hero .pf-label{display:flex;width:fit-content;margin-bottom:var(--s3)}

.contact-grid{display:grid;grid-template-columns:1fr 380px;gap:var(--s6);align-items:start}
@media(max-width:1000px){.contact-grid{grid-template-columns:1fr;gap:var(--s4)}}
@media(max-width:420px){
  .wrap{padding-inline:var(--s2)}
  .phone{padding:9px;border-radius:36px}
  .screen{border-radius:28px}
  .ui-slots{gap:5px}
  .plan,.form,.card{padding:var(--s3)}
}

@media(max-width:360px){
  .phone{width:100%;max-width:290px}
  .screen{height:560px}
  .bub{font-size:12.5px;padding:9px 12px}
  .ui-slots button{font-size:11px;padding:9px 0}
  .ui-row{padding:10px 11px}
  h1{font-size:32px}
}

.or{display:flex;align-items:center;gap:var(--s2);margin:var(--s4) 0 var(--s3);color:var(--mute-2);font-size:13.5px}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}
.direct{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.direct{grid-template-columns:1fr}}

/* ============ MINI-SITE PREVIEW ============ */
.pf-top{height:298px;padding:var(--s2) var(--s2) 0;display:block;background:
  radial-gradient(340px 200px at 50% -10%, color-mix(in srgb, var(--ac) 26%, transparent), transparent 70%), #0D1F3B;
  border-bottom:1px solid var(--line);overflow:hidden}
.pf-top::after{display:none}
.mini{background:var(--sf);border-radius:12px 12px 0 0;overflow:hidden;
  box-shadow:0 -2px 30px -8px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1);height:100%}
.mini-bar{background:color-mix(in srgb, var(--dp) 90%, #000);padding:7px 10px;display:flex;align-items:center;gap:5px}
.mini-bar i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.28)}
.mini-bar span{margin-inline-start:8px;font-size:8.5px;color:rgba(255,255,255,.5);background:rgba(255,255,255,.09);padding:2px 10px;border-radius:20px}
.mini-screen{background:var(--sf);color:var(--dp);padding:9px}
.mini-nav{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-bottom:8px;border-bottom:1px solid color-mix(in srgb,var(--dp) 12%,transparent)}
.mini-nav b{font-size:11px;letter-spacing:1.6px;color:var(--dp)}
.mini-nav span{font-size:7.5px;color:color-mix(in srgb,var(--dp) 55%,transparent)}
.mini-nav em{font-style:normal;font-size:7.5px;background:var(--ac);color:var(--sf);padding:3px 9px;border-radius:20px;font-weight:700}
.mini-hero{padding:9px 2px 8px;text-align:center}
.mini-hero h4{font-size:12.5px;font-weight:800;color:var(--dp);line-height:1.3}
.mini-hero p{font-size:8px;color:color-mix(in srgb,var(--dp) 58%,transparent);margin-top:2px}
.mini-cta{display:inline-block;margin-top:8px;background:var(--ac);color:var(--sf);font-size:8.5px;font-weight:700;padding:5px 16px;border-radius:20px}
.mini-svc{display:flex;flex-direction:column;gap:4px;margin-top:2px}
.mini-svc div{display:flex;justify-content:space-between;align-items:center;background:color-mix(in srgb,var(--dp) 5%,transparent);border-radius:6px;padding:5px 8px}
.mini-svc b{font-size:8px;font-weight:600;color:var(--dp)}
.mini-svc u{text-decoration:none;font-size:8px;font-weight:700;color:var(--ac)}
.mini-quote{margin-top:7px;padding:8px;border-radius:8px;background:color-mix(in srgb,var(--ac) 13%,transparent);border-inline-start:2px solid var(--ac)}
.mini-quote p{font-size:8px;line-height:1.55;color:var(--dp)}
.mini-quote cite{font-style:normal;font-size:7px;color:color-mix(in srgb,var(--dp) 55%,transparent);display:block;margin-top:3px}
.pf-card:hover .mini{transform:translateY(-4px)}
.mini{transition:transform .3s var(--ease)}

/* ==========================================================
   DEMO SYSTEM — per-project personalities
   Client colours live ONLY inside .device / .mini
   ========================================================== */
.device,.mini{
  --ac:#2563EB;--ac2:#60A5FA;--bg:#F7F9FC;--card:#fff;--ink:#0B1B32;--muted:#7A8AA0;
  --fw:500;--tk:0;
}

/* ---- device frame ---- */
.device{width:344px;max-width:100%;margin-inline:auto;position:relative;
  background:#0F2038;border-radius:42px;padding:11px;
  box-shadow:0 46px 84px -32px rgba(0,0,0,.75),0 0 0 1px rgba(96,165,250,.22)}
.device::after{content:'';position:absolute;inset:-14px;border-radius:56px;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(37,99,235,.22),transparent 70%)}
.d-screen{background:var(--bg);color:var(--ink);border-radius:32px;overflow:hidden;
  display:flex;flex-direction:column;height:612px;font-family:'Tajawal',sans-serif}
.d-body{flex:1;overflow-y:auto;padding:14px;scrollbar-width:thin}
.d-body::-webkit-scrollbar{width:3px}
.d-body::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 18%,transparent);border-radius:3px}

/* ---- demo nav variants ---- */
.d-nav{display:flex;align-items:center;gap:8px;padding:13px 15px;flex-shrink:0;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent);background:var(--card)}
.d-mark{font-size:12.5px;font-weight:800;letter-spacing:var(--tk);color:var(--ink)}
.d-links{font-size:8px;color:var(--muted)}
.d-cta{font-style:normal;font-size:8.5px;font-weight:700;background:var(--ac);color:var(--card);
  padding:4px 11px;border-radius:20px;white-space:nowrap}
.d-nav-centered{flex-direction:column;gap:5px;text-align:center;padding:15px}
.d-nav-centered .d-mark{font-size:14px}
.d-nav-split{justify-content:space-between}
.d-nav-split .d-links{flex:1;text-align:center}
.d-nav-pill{justify-content:space-between;background:color-mix(in srgb,var(--ac) 8%,var(--card));
  border-radius:0 0 18px 18px;border:0}
.d-nav-minimal{justify-content:space-between;border-bottom-width:2px;border-color:var(--ink);padding-bottom:9px}
.d-nav-minimal .d-cta{background:none;color:var(--ink);border-bottom:1.5px solid var(--ac);border-radius:0;padding:2px 0}
.d-nav-bar{justify-content:space-between;background:var(--ink)}
.d-nav-bar .d-mark{color:var(--bg)} .d-nav-bar .d-links{color:color-mix(in srgb,var(--bg) 60%,transparent)}
.d-nav-bold{justify-content:space-between;background:var(--ac)}
.d-nav-bold .d-mark,.d-nav-bold .d-links{color:var(--card)}
.d-nav-bold .d-cta{background:var(--card);color:var(--ac)}

/* ---- demo hero ---- */
.d-hero{padding:16px 4px 14px;text-align:center}
.d-kicker{font-size:7.5px;letter-spacing:2.6px;color:var(--muted);text-transform:uppercase}
.d-hero h4{font-size:15px;font-weight:var(--fw);letter-spacing:var(--tk);color:var(--ink);line-height:1.4;margin-top:6px}
.d-hero p{font-size:9px;color:var(--muted);margin-top:4px;line-height:1.6}
.d-btn{display:inline-block;margin-top:11px;background:var(--ac);color:var(--card);
  font-size:9px;font-weight:700;padding:7px 20px;border-radius:22px}
.v-editorial .d-hero{text-align:start;padding-inline:2px}
.v-editorial .d-hero h4{font-size:18px;line-height:1.25}
.v-spacious .d-hero{padding:26px 4px 24px}
.v-spacious .d-hero h4{font-size:14px;letter-spacing:4px;font-weight:300}
.v-clinical .d-hero{text-align:start}
.v-clinical .d-btn{border-radius:6px}
.v-bold .d-hero h4{font-size:17px;font-weight:800}
.v-bold .d-btn{border-radius:8px;padding:9px 24px;font-size:10px}
.v-minimal .d-btn{border-radius:0;background:none;color:var(--ink);border:1px solid var(--ink);padding:7px 22px}

/* ---- services presentation styles ---- */
.d-services{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.d-srv{display:flex;justify-content:space-between;align-items:center;gap:9px;
  background:var(--card);padding:9px 11px;border-radius:10px}
.d-srv b{font-size:9.5px;font-weight:700;color:var(--ink);display:block}
.d-srv small{font-size:7.5px;color:var(--muted);display:block;margin-top:2px;line-height:1.5}
.d-pr{font-size:9.5px;font-weight:800;color:var(--ac);white-space:nowrap}
.d-pr u{text-decoration:none;font-size:7px;font-weight:400}
.d-srv-meta{text-align:end}
.st-inline .d-srv{border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent);border-radius:0;background:none;padding:8px 2px}
.st-stacked .d-srv{align-items:flex-start}
.st-badge .d-pill{background:color-mix(in srgb,var(--ac) 13%,transparent);padding:4px 10px;border-radius:20px}
.st-table .d-srv{display:grid;grid-template-columns:1fr auto auto;gap:8px;background:none;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent);border-radius:0;padding:8px 2px}
.st-big .d-big{font-size:13px}
.st-quiet .d-srv{background:none;padding:7px 2px}
.st-quiet .d-quiet{color:var(--ink);font-weight:500;opacity:.75}

.d-pack{display:flex;justify-content:space-between;align-items:center;gap:9px;margin-top:8px;
  background:color-mix(in srgb,var(--ac) 11%,transparent);border:1px solid var(--ac);padding:10px 12px;border-radius:10px}
.d-pack b{font-size:9.5px;font-weight:700;color:var(--ink);display:block}
.d-pack small{font-size:7.5px;color:var(--muted);display:block;margin-top:2px}
.d-pack-r{text-align:end}
.d-pack em{font-style:normal;display:block;font-size:7px;color:var(--ac);margin-top:2px}

/* ---- booking ---- */
.d-step{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:700;color:var(--ink);margin:10px 0 6px}
.d-step:first-child{margin-top:2px}
.d-num{width:15px;height:15px;border-radius:50%;background:var(--ac);color:var(--card);
  font-size:7.5px;display:grid;place-items:center;font-weight:700}
.d-opt{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:start;
  background:var(--card);border:1.5px solid transparent;border-radius:9px;padding:9px 11px;margin-bottom:5px;
  transition:border-color .18s,box-shadow .18s;cursor:pointer}
.d-opt b{font-size:9.5px;font-weight:700;color:var(--ink);display:block}
.d-opt small{font-size:7.5px;color:var(--muted);display:block;margin-top:1px}
.d-opt[aria-pressed="true"]{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac)}
.d-days{display:flex;gap:5px}
.d-days button{flex:1;padding:8px 0;border-radius:8px;background:var(--card);
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);font-size:9px;color:var(--muted);cursor:pointer;transition:.18s}
.d-days button[aria-pressed="true"]{background:var(--ac);border-color:var(--ac);color:var(--card);font-weight:700}
.d-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.d-slots button{padding:9px 0;border-radius:8px;background:var(--card);
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);font-size:9px;color:var(--ink);cursor:pointer;transition:.18s}
.d-slots button[aria-pressed="true"]{background:var(--ac);border-color:var(--ac);color:var(--card);font-weight:700}
.d-slots button[disabled]{opacity:.34;text-decoration:line-through;cursor:not-allowed}
.d-confirm{width:100%;margin-top:12px;background:var(--ac);color:var(--card);
  padding:11px;border-radius:9px;font-size:10px;font-weight:800;cursor:pointer;transition:filter .18s}
.d-confirm:hover{filter:brightness(1.08)}
.d-res{margin-top:9px;background:color-mix(in srgb,var(--ac) 12%,transparent);
  border:1px solid var(--ac);border-radius:9px;padding:11px;text-align:center;animation:fade .3s var(--ease)}
.d-res b{display:block;font-size:10px;color:var(--ac);margin-bottom:4px}
.d-res span{font-size:8.5px;color:var(--ink);line-height:1.7}

/* ---- store ---- */
.d-search{background:var(--card);border-radius:8px;padding:8px 11px;font-size:8.5px;color:var(--muted);margin-bottom:7px}
.d-cats{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.d-cats button{border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);background:var(--card);
  color:var(--muted);border-radius:20px;padding:5px 11px;font-size:8px;cursor:pointer;transition:.18s}
.d-cats button[aria-pressed="true"]{background:var(--ac);border-color:var(--ac);color:var(--card);font-weight:700}
.d-prods{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.d-prod{background:var(--card);border-radius:10px;overflow:hidden}
.d-prod.hide{display:none}
.d-pimg{height:54px;display:grid;place-items:center;background:color-mix(in srgb,var(--ac) 9%,transparent)}
.d-pimg svg{width:22px;height:22px;stroke:var(--ac);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.d-pbody{padding:7px 9px 9px}
.d-pbody b{font-size:8.5px;font-weight:700;color:var(--ink);display:block}
.d-pbody small{font-size:7px;color:var(--muted);display:block;margin-top:1px;line-height:1.4}
.d-prow{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.d-add{width:20px;height:20px;border-radius:6px;background:var(--ac);color:var(--card);
  font-size:13px;line-height:1;display:grid;place-items:center;cursor:pointer;transition:transform .15s}
.d-add:active{transform:scale(.88)}
.d-cart{display:flex;justify-content:space-between;align-items:center;margin-top:9px;
  background:var(--ink);color:var(--bg);border-radius:9px;padding:9px 12px;font-size:8.5px}
.d-cart b{color:var(--card)}

/* ---- assistant ---- */
.d-chat{display:flex;flex-direction:column;min-height:100%}
.js-log{display:flex;flex-direction:column;gap:7px}
.d-bub{max-width:86%;padding:9px 12px;font-size:9px;line-height:1.65;border-radius:13px;animation:fade .28s var(--ease)}
.d-bot{align-self:flex-end;background:var(--ac);color:var(--card);border-top-left-radius:4px}
.d-them{align-self:flex-start;background:var(--card);color:var(--ink);border-top-right-radius:4px}
.d-typing{align-self:flex-end;background:var(--card);border-radius:13px;border-top-left-radius:4px;
  padding:10px 13px;display:flex;gap:4px}
.d-typing i{width:5px;height:5px;border-radius:50%;background:var(--ac);animation:blink 1.3s infinite}
.d-typing i:nth-child(2){animation-delay:.18s} .d-typing i:nth-child(3){animation-delay:.36s}
.d-replies{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.d-replies button{border:1px solid var(--ac);color:var(--ac);background:color-mix(in srgb,var(--ac) 8%,transparent);
  border-radius:20px;padding:6px 11px;font-size:8px;cursor:pointer;transition:.18s}
.d-replies button:hover{background:var(--ac);color:var(--card)}
.d-input{display:flex;align-items:center;gap:7px;background:var(--card);
  border-radius:20px;padding:8px 12px;font-size:8.5px;color:var(--muted);margin-top:7px}
.d-input span{flex:1}
.d-input svg{width:13px;height:13px;stroke:var(--ac);fill:none;stroke-width:1.8}

/* ---- device tabs ---- */
.d-tabs{display:flex;background:var(--card);border-top:1px solid color-mix(in srgb,var(--ink) 9%,transparent);flex-shrink:0}
.d-tabs button{flex:1;padding:9px 2px 11px;text-align:center;font-size:7.5px;color:var(--muted);
  position:relative;cursor:pointer;transition:color .18s}
.d-tabs button u{display:block;text-decoration:none;margin:0 auto 3px;width:15px;height:15px}
.d-tabs button u svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.d-tabs button[aria-selected="true"]{color:var(--ac);font-weight:700}
.d-tabs button[aria-selected="true"]::after{content:'';position:absolute;bottom:4px;inset-inline:50% auto;
  transform:translateX(50%);width:15px;height:2px;border-radius:3px;background:var(--ac)}

/* ==========================================================
   MINI SITE — portfolio preview
   ========================================================== */
.mini{background:var(--bg);border-radius:11px 11px 0 0;overflow:hidden;height:100%;
  box-shadow:0 -2px 28px -8px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.09);
  transition:transform .3s var(--ease);font-family:'Tajawal',sans-serif}
.mini-bar{background:color-mix(in srgb,var(--ink) 92%,#000);padding:6px 9px;display:flex;align-items:center;gap:4px}
.mini-bar i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.26)}
.mini-bar span{margin-inline-start:7px;font-size:7.5px;color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.09);padding:2px 9px;border-radius:20px}
.mini-screen{background:var(--bg);color:var(--ink);padding:0 9px 9px}
.mini-screen .d-nav{margin-inline:-9px;padding:9px 11px}
.mini-screen .d-hero{padding:11px 2px 9px}
.mini-screen .d-hero h4{font-size:12px}
.mini-screen .d-hero p{font-size:7.5px}
.mini-screen .d-btn{font-size:8px;padding:5px 15px;margin-top:8px}
.mini-screen .d-srv{padding:6px 8px}
.mini-screen .d-srv b{font-size:8px} .mini-screen .d-srv small{font-size:6.5px}
.mini-screen .d-pr{font-size:8px}

/* ---- portfolio card ---- */
.pf{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.pf:hover{border-color:rgba(96,165,250,.55);transform:translateY(-4px)}
.pf:hover .mini{transform:translateY(-4px)}
.pf .pf-top{height:272px;padding:var(--s2) var(--s2) 0;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(340px 200px at 50% -10%,color-mix(in srgb,var(--ac) 26%,transparent),transparent 70%),#0D1F3B}
.pf-body{padding:var(--s3);display:flex;flex-direction:column;flex:1}
.pf-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:11px;flex-wrap:wrap}
.pf-tag{font-size:11px;font-weight:700;color:var(--blue-lit);border:1px solid rgba(96,165,250,.4);
  background:rgba(37,99,235,.1);padding:4px 12px;border-radius:100px}
.pf-style{font-size:10.5px;color:var(--mute-2);letter-spacing:.4px}
.pf-body h3{margin-bottom:4px}
.pf-meta{font-size:13.5px;color:var(--mute-2);margin-bottom:10px}
.pf-desc{font-size:14px;color:var(--mute);line-height:1.7;margin-bottom:var(--s2)}
.pf-mods{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--s3)}
.pf-mods span{font-size:11.5px;color:var(--mute);border:1px solid var(--line);border-radius:100px;padding:4px 11px}
.pf-body .btn{margin-top:auto}

/* ==========================================================
   DASHBOARD
   ========================================================== */
.dsh{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.dsh-top{display:flex;align-items:center;justify-content:space-between;padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--line);flex-wrap:wrap;gap:var(--s2)}
.dsh-top b{font-size:16px}
.dsh-note{font-size:11.5px;color:var(--blue-lit);border:1px solid rgba(96,165,250,.4);border-radius:100px;padding:4px 12px}
.dsh-body{display:grid;grid-template-columns:190px 1fr;min-height:400px}
@media(max-width:760px){.dsh-body{grid-template-columns:1fr}}
.dsh-side{border-inline-end:1px solid var(--line);padding:var(--s2);display:flex;flex-direction:column;gap:2px}
@media(max-width:760px){.dsh-side{border-inline-end:0;border-bottom:1px solid var(--line);flex-direction:row;overflow-x:auto}}
.dsh-side button{text-align:start;padding:10px 13px;border-radius:10px;font-size:14px;color:var(--mute);
  transition:all .2s;white-space:nowrap;cursor:pointer}
.dsh-side button:hover{background:rgba(37,99,235,.1);color:var(--white)}
.dsh-side button[aria-selected="true"]{background:var(--blue);color:#fff;font-weight:700}
.dsh-main{padding:var(--s3)}
.dsh-pane{display:none}
.dsh-pane.on{display:block;animation:fade .3s var(--ease)}
.dsh-list{display:flex;flex-direction:column;gap:8px}
.dsh-row{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-s);padding:13px 15px;
  display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap}
.dsh-row b{font-size:14.5px;display:block}
.dsh-row small{font-size:12.5px;color:var(--mute-2)}
.dsh-st{font-size:12px;color:var(--blue-lit);border:1px solid rgba(96,165,250,.4);
  border-radius:100px;padding:3px 12px;white-space:nowrap}
.dsh-ttl{font-size:14px;font-weight:700;margin-bottom:var(--s3);display:flex;gap:8px;align-items:center}
.dsh-ttl small{font-size:11.5px;color:var(--blue-lit);font-weight:400}
.dsh-chart{display:flex;align-items:flex-end;gap:9px;height:180px;padding-bottom:26px}
.dsh-chart div{flex:1;background:linear-gradient(180deg,var(--blue-lit),var(--blue));
  border-radius:6px 6px 0 0;position:relative;min-height:8px}
.dsh-chart div span{position:absolute;bottom:-22px;inset-inline:0;text-align:center;font-size:11px;color:var(--mute-2)}

@media(max-width:360px){
  .device{width:100%;max-width:292px}
  .d-screen{height:560px}
}

/* ============================================================
   HOMEPAGE — SYSTEM ARCHITECTURE
   ============================================================ */
.arch-wrap{position:relative}
.arch{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.arch .node{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--s3) 10px;text-align:center;cursor:pointer;
  transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s;
}
.arch .node:hover{border-color:var(--blue-lit);transform:translateY(-3px)}
.arch .node.lit{border-color:var(--blue);background:rgba(37,99,235,.14);box-shadow:0 14px 32px -18px rgba(37,99,235,.9)}
.arch .node .ic{
  width:40px;height:40px;margin:0 auto 9px;border-radius:var(--r-s);
  background:rgba(37,99,235,.16);border:1px solid rgba(96,165,250,.24);
  display:grid;place-items:center;
}
.arch .node .ic svg{width:19px;height:19px;stroke:var(--blue-lit);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.arch .node b{display:block;font-size:13.5px;font-weight:700;line-height:1.35}
.arch .node .nd{font-size:11.5px;color:var(--mute-2)}
.arch .node:not(.core)::after{
  content:'';position:absolute;bottom:-10px;inset-inline-start:50%;width:1.5px;height:10px;
  background:linear-gradient(180deg,rgba(96,165,250,.65),rgba(96,165,250,.12));
}
.arch .node.core{
  grid-column:1/-1;cursor:default;margin-top:10px;
  background:linear-gradient(135deg,rgba(37,99,235,.22),rgba(56,189,248,.06));
  border-color:rgba(96,165,250,.42);padding:var(--s3);
}
.arch .node.core:hover{transform:none}
.arch .node.core b{font-size:16px}

.peek{margin-top:var(--s3)}
.peek-in{
  display:flex;align-items:center;gap:var(--s2);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s2) var(--s3);
  animation:fade .3s var(--ease);
}
.peek-in .ic{width:42px;height:42px;flex-shrink:0;border-radius:var(--r-s);background:rgba(37,99,235,.16);
  border:1px solid rgba(96,165,250,.24);display:grid;place-items:center}
.peek-in .ic svg{width:20px;height:20px;stroke:var(--blue-lit);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.peek-in>div{flex:1;min-width:0}
.peek-in b{display:block;font-size:15px;font-weight:700}
.peek-in p{font-size:13.5px;color:var(--mute);line-height:1.6}
.peek-in .btn{flex-shrink:0}
@media(max-width:520px){
  .arch{grid-template-columns:repeat(2,1fr)}
  .peek-in{flex-direction:column;align-items:flex-start}
  .peek-in .btn{width:100%}
}

/* ============ EQUATION ============ */
.eq{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;margin-top:var(--s5)}
.eq-i{font-size:13.5px;color:var(--mute);border:1px solid var(--line);border-radius:100px;padding:7px 16px;background:var(--card)}
.eq-p{font-style:normal;color:var(--blue-lit);font-weight:700;font-size:15px}
.eq-r{color:#fff;border-color:var(--blue);background:rgba(37,99,235,.2);font-weight:700}

/* ============ PROBLEM → SYSTEM ============ */
.ps-list{display:flex;flex-direction:column;gap:12px}
.ps{
  display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s3);align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s3);
  transition:border-color .25s var(--ease);
}
.ps:hover{border-color:rgba(96,165,250,.45)}
.ps-lbl{display:inline-block;font-size:11.5px;font-weight:700;color:var(--mute-2);
  border:1px solid var(--line);border-radius:100px;padding:3px 12px;margin-bottom:9px}
.ps-lbl.on{color:var(--blue-lit);border-color:rgba(96,165,250,.45);background:rgba(37,99,235,.1)}
.ps-side p{font-size:15px;line-height:1.65;color:var(--mute)}
.ps-sol p{color:#fff}
.ps-mid{width:34px;height:34px;border-radius:50%;background:rgba(37,99,235,.14);border:1px solid rgba(96,165,250,.3);
  display:grid;place-items:center;flex-shrink:0}
.ps-mid svg{width:17px;height:17px;stroke:var(--blue-lit);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){
  .ps{grid-template-columns:1fr;gap:var(--s2)}
  .ps-mid{transform:rotate(-90deg);margin-inline-start:4px}
}

/* ============ DEMO SPLIT ============ */
.demo-split{display:grid;grid-template-columns:1fr 380px;gap:var(--s8);align-items:center}
@media(max-width:920px){.demo-split{grid-template-columns:1fr;gap:var(--s5)}.demo-split>div:last-child{order:-1}}

/* ============ TIMELINE END ============ */
.tl-end{text-align:center;margin-top:var(--s8);font-size:clamp(19px,2.3vw,27px);font-weight:700;color:var(--mute)}
.tl-end .accent{color:var(--blue-lit)}

/* ============ SERVICES — distinct blocks ============ */
.svc-block{display:grid;grid-template-columns:1fr 400px;gap:var(--s8);align-items:center;padding-block:var(--s10);border-bottom:1px solid rgba(96,165,250,.12)}
.svc-block:last-child{border-bottom:0}
.svc-block:nth-child(even){grid-template-columns:400px 1fr}
.svc-block:nth-child(even) .svc-txt{order:2}
.svc-num{display:inline-block;font-size:13px;font-weight:800;color:var(--blue-lit);border:1px solid rgba(96,165,250,.4);
  border-radius:100px;padding:4px 14px;margin-bottom:var(--s2)}
.svc-txt h2{margin-bottom:var(--s2)}
.svc-pts{display:flex;flex-direction:column;gap:10px;margin:var(--s3) 0}
.svc-pts li{display:flex;gap:10px;color:var(--mute);font-size:15px;line-height:1.6}
.svc-pts li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue-lit);margin-top:10px;flex-shrink:0}
.svc-ba{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s3)}
.svc-ba>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s2) var(--s3)}
.svc-ba p{font-size:14px;color:var(--mute);line-height:1.6}
@media(max-width:900px){
  .svc-block,.svc-block:nth-child(even){grid-template-columns:1fr;gap:var(--s5);padding-block:var(--s8)}
  .svc-block:nth-child(even) .svc-txt{order:0}
  .svc-ba{grid-template-columns:1fr}
}
.flow-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.flow-i{display:flex;gap:var(--s2);align-items:flex-start;position:relative;padding-bottom:var(--s2);border-bottom:1px solid rgba(96,165,250,.1)}
.flow-i:last-child{border:0;padding-bottom:0}
.flow-i span{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:rgba(37,99,235,.16);border:1px solid rgba(96,165,250,.3);
  display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--blue-lit)}
.flow-i b{display:block;font-size:15px;margin-bottom:2px}
.flow-i p{font-size:13.5px;color:var(--mute)}
.plan h3 em{font-style:normal;color:var(--mute-2);font-size:15px;font-weight:400}
.amt-lbl{font-size:13px;color:var(--mute-2);margin-top:4px}
.plan-meta{border-block:1px solid var(--line);padding-block:var(--s2);margin-bottom:var(--s3)!important;gap:7px!important}
.plan-meta li{font-size:13.5px}
.plan-meta li::before{content:'·';color:var(--blue-lit)}

.f-col .f-h{font-size:14px;color:var(--white);margin-bottom:var(--s2);font-weight:700;line-height:1.5}

.d-h1{font-weight:inherit;font-size:inherit;line-height:1.3;color:inherit;letter-spacing:inherit}

.f-ok .ok-h{font-size:23px;line-height:1.4;font-weight:700;margin-bottom:10px}