/* ===================================================================
   1B SOFTWARE — shared stylesheet
   =================================================================== */
:root{
  /* --- brand: red is the single accent, everything else is neutral --- */
  --brand:#E63030; --brand-hover:#C32828; --brand-light:#EF6B6B;
  --brand-soft:#FDEAEA; --brand-line:#F7C9C9;

  /* --- neutrals: warm-free charcoal/slate, no blue cast --- */
  --ink-950:#111827; --ink-800:#1F2937; --ink-700:#374151; --ink-600:#4B5563;

  /* --- legacy aliases (kept so existing rules keep working) --- */
  --navy-950:var(--ink-950); --navy-800:var(--ink-800);
  --navy-700:var(--ink-700); --navy-600:var(--ink-600);
  --teal-500:var(--brand); --teal-400:var(--brand-light); --teal-100:var(--brand-soft);
  --teal-text:var(--brand-hover); /* AA-safe red for small text (5.75:1 on white) */

  --ink:#111827; --muted:#6B7280; --muted-2:#9CA3AF;
  --bg:#FFFFFF; --bg-alt:#F8F9FC; --line:#E5E7EB;
  --r-pill:999px; --r-lg:22px; --r-md:14px; --r-sm:10px;
  --pad:20px;
  --shadow-sm:0 6px 18px rgba(17,24,39,.06);
  --shadow-md:0 14px 34px rgba(17,24,39,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Almarai',system-ui,sans-serif;
  font-size:16px;line-height:1.78;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Cairo',sans-serif;font-weight:800;line-height:1.3;color:var(--navy-950)}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:embed}
svg.ic{width:1em;height:1em;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;
  font-size:12px;font-weight:500;color:var(--teal-text);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.eyebrow::before{content:"";width:14px;height:1px;background:var(--teal-500)}
@media(min-width:780px){:root{--pad:40px}body{font-size:16.5px}}
@media(min-width:1100px){:root{--pad:56px}}

/* skip link (a11y) */
/* hidden by its OWN height (%), so it can never peek out when the font
   makes the element taller than a hard-coded px offset would assume */
.skip-link{position:absolute;top:0;right:12px;background:var(--navy-950);color:#fff;
  padding:10px 16px;border-radius:0 0 10px 10px;z-index:200;
  transform:translateY(-120%);transition:transform .2s}
.skip-link:focus{transform:translateY(0)}

/* ============ ambient backdrop — floats with the page, not the viewport ======
   Layer 1: soft colour orbs for warmth.
   Layer 2: fragments of the product itself — a card outline, report bars,
            an invoice line.
   Layer 3: binary digits, a nod to the "1 Byte" name.

   `absolute` (not fixed) so the shapes belong to the document and scroll away
   naturally; a fixed layer reads as if it is following the reader.
   z-index:-1 keeps them above the page colour but under every section, so any
   section with an opaque background simply hides them. */
body{position:relative}
.ambient{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ambient>*{position:absolute}

.amb-orb{border-radius:50%;filter:blur(60px)}
.amb-orb-1{width:420px;height:420px;background:var(--brand);opacity:.16;top:2%;inset-inline-start:-130px;
  animation:ambDrift 17s ease-in-out infinite}
.amb-orb-2{width:360px;height:360px;background:var(--ink-800);opacity:.10;top:28%;inset-inline-end:-120px;
  animation:ambDrift 21s ease-in-out infinite 2s}
.amb-orb-3{width:380px;height:380px;background:var(--brand);opacity:.13;top:58%;inset-inline-end:-140px;
  animation:ambDrift 19s ease-in-out infinite 1s}
.amb-orb-4{width:320px;height:320px;background:var(--ink-800);opacity:.09;top:84%;inset-inline-start:-110px;
  animation:ambDrift 23s ease-in-out infinite 3s}

/* product fragments */
.amb-card{border:1.5px solid var(--brand);border-radius:8px}
.amb-c1{width:78px;height:56px;top:11%;inset-inline-end:3%;opacity:.18;animation:ambDrift 12s ease-in-out infinite}
.amb-c2{width:56px;height:74px;top:47%;inset-inline-start:2%;border-color:var(--ink-700);opacity:.14;
  animation:ambDrift 15s ease-in-out infinite 1.2s}
.amb-c3{width:70px;height:50px;top:73%;inset-inline-end:2.5%;opacity:.15;
  animation:ambDrift 16s ease-in-out infinite .5s}

.amb-bars{display:flex;align-items:flex-end;gap:4px;opacity:.18;
  top:33%;inset-inline-end:4%;animation:ambDrift 14s ease-in-out infinite .6s}
.amb-bars i{display:block;width:6px;background:var(--ink-700);border-radius:2px}
.amb-bars i:nth-child(1){height:16px}
.amb-bars i:nth-child(2){height:28px;background:var(--brand)}
.amb-bars i:nth-child(3){height:21px}
.amb-bars i:nth-child(4){height:34px}

.amb-line{width:90px;height:18px;border:1.5px solid var(--ink-700);border-radius:4px;opacity:.13;
  top:64%;inset-inline-start:3%;animation:ambDrift 18s ease-in-out infinite 1.8s}

/* binary digits — the "1 Byte" nod */
.amb-bit{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--brand);line-height:1}
.amb-bit.dim{color:var(--ink-700)}
.amb-b1{font-size:18px;opacity:.20;top:7%;inset-inline-start:6%;animation:ambDrift 13s ease-in-out infinite}
.amb-b2{font-size:24px;opacity:.12;top:19%;inset-inline-end:9%;animation:ambDrift 16s ease-in-out infinite .9s}
.amb-b3{font-size:15px;opacity:.22;top:38%;inset-inline-start:5%;animation:ambDrift 11s ease-in-out infinite 1.5s}
.amb-b4{font-size:28px;opacity:.10;top:53%;inset-inline-end:6%;animation:ambDrift 19s ease-in-out infinite .3s}
.amb-b5{font-size:17px;opacity:.19;top:68%;inset-inline-start:7%;animation:ambDrift 14s ease-in-out infinite 2.1s}
.amb-b6{font-size:21px;opacity:.13;top:79%;inset-inline-end:5%;animation:ambDrift 17s ease-in-out infinite 1.1s}
.amb-b7{font-size:16px;opacity:.18;top:91%;inset-inline-start:4%;animation:ambDrift 12s ease-in-out infinite .7s}

@keyframes ambDrift{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(-8px,-20px,0) rotate(3deg)}
}

/* phones: thin it out so a narrow screen stays calm */
@media(max-width:680px){
  .amb-c2,.amb-line,.amb-b2,.amb-b4,.amb-b6{display:none}
  .amb-orb{filter:blur(50px)}
  .amb-orb-1,.amb-orb-3{width:300px;height:300px}
  .amb-orb-2,.amb-orb-4{width:260px;height:260px}
}
@media (prefers-reduced-motion: reduce){
  .ambient>*{animation:none !important}
}

/* ============ nav ============ */
nav{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:10px;height:62px}
.logo{display:flex;align-items:center;gap:9px}
.logo .mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--ink-950),var(--brand));color:#fff;font-family:'Cairo';font-weight:900;font-size:13px}
.logo b{display:block;font-family:'Cairo';font-weight:800;font-size:14.5px;color:var(--navy-950)}
.logo span{font-size:9px;color:var(--muted);letter-spacing:.16em;font-family:'IBM Plex Mono';display:block}
.nav-links{display:none}
.nav-cta{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.burger{background:none;border:1px solid var(--line);border-radius:10px;width:44px;height:44px;color:var(--navy-800);display:grid;place-items:center;font-size:16px}
@media(min-width:960px){
  nav .wrap{height:74px}
  .nav-links{display:flex;gap:2px;margin-inline-start:24px;font-size:13.5px;font-weight:500}
  .nav-links a{padding:8px 11px;border-radius:8px;color:var(--ink-700);white-space:nowrap}
  .nav-links a:hover,.nav-links a.active{background:var(--bg-alt);color:var(--navy-800)}
  .burger{display:none}
}
#mobile{position:fixed;inset:62px 0 0 0;background:#fff;z-index:75;transform:translateY(-8px);opacity:0;pointer-events:none;transition:.22s var(--ease);overflow-y:auto}
#mobile.open{opacity:1;transform:none;pointer-events:auto}
#mobile a{display:block;padding:16px var(--pad);border-bottom:1px solid var(--line);font-family:'Cairo';font-weight:700;font-size:16.5px;color:var(--navy-950)}
#mobile a.active{color:var(--teal-text)}

/* ============ buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:var(--r-pill);
  padding:12px 22px;font-family:'Cairo';font-weight:700;font-size:14px;border:1.5px solid transparent;
  cursor:pointer;transition:.2s var(--ease);white-space:nowrap}
.btn svg{width:15px;height:15px}
/* primary action — red, the one accent on the page */
.btn-navy{background:var(--brand);color:#fff;box-shadow:0 8px 20px rgba(230,48,48,.28)}
.btn-navy:hover{background:var(--brand-hover);transform:translateY(-1px)}
.btn-teal{background:var(--brand);color:#fff}
.btn-teal:hover{background:var(--brand-hover);transform:translateY(-1px)}
/* dark secondary — used where red would compete with a red surface */
.btn-dark{background:var(--ink-950);color:#fff}
.btn-dark:hover{background:var(--ink-800);transform:translateY(-1px)}
.btn-out{border-color:var(--line);color:var(--navy-800);background:#fff}
.btn-out:hover{border-color:var(--teal-400);background:var(--teal-100)}
.btn-w{width:100%}
.btn-sm{padding:9px 16px;font-size:12.5px}
@media(min-width:780px){.btn{font-size:15px;padding:13px 26px}}

/* ============ page hero (sub-pages) ============ */
.page-hero{position:relative;overflow:hidden;background:
  radial-gradient(700px 420px at 82% -10%,rgba(230,48,48,.14),transparent 60%),
  radial-gradient(520px 360px at 10% 0%,rgba(17,24,39,.06),transparent 60%),#fff;
  border-bottom:1px solid var(--line)}
.page-hero .wrap{padding-block:30px 34px}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-bottom:14px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--teal-text)}
.breadcrumb .sep{opacity:.6}
.page-hero h1{font-size:clamp(24px,6vw,38px);max-width:20ch}
.page-hero p{color:var(--muted);margin-top:12px;font-size:15px;max-width:60ch}
@media(min-width:780px){.page-hero .wrap{padding-block:48px 42px}.page-hero p{font-size:17px}}

/* ============ hero (home) — full-screen media background ============ */
.hero{position:relative;min-height:100svh;min-height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;background:
  linear-gradient(160deg,var(--ink-950),var(--ink-800) 50%,var(--brand))}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-media::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(115% 62% at 50% 54%,rgba(17,24,39,.60) 0%,rgba(17,24,39,.30) 62%,transparent 100%),
    linear-gradient(180deg,rgba(17,24,39,.40) 0%,rgba(17,24,39,.50) 50%,rgba(17,24,39,.92) 100%)}
.hero .wrap{position:relative;z-index:2;padding-block:90px 70px;text-align:center}
.eyebrow-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);color:#fff;font-family:'IBM Plex Mono';font-size:11.5px;
  font-weight:600;letter-spacing:.05em;padding:7px 15px;border-radius:20px;margin-bottom:20px;
  backdrop-filter:blur(6px)}
.eyebrow-badge i{width:6px;height:6px;border-radius:50%;background:var(--teal-400);flex:none}
.hero h1{font-size:clamp(26px,7vw,50px);letter-spacing:-.01em;color:#fff;max-width:18ch;margin-inline:auto;
  text-shadow:0 2px 14px rgba(17,24,39,.55)}
/* light pink reads clearly over a red-tinted photo — the mid red blended into it */
.hero h1 em{font-style:normal;color:#FFC2C2}
.hero .lead{color:rgba(255,255,255,.94);font-size:15.5px;margin:18px auto 0;max-width:46ch;
  text-shadow:0 1px 10px rgba(17,24,39,.55)}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin:28px 0 0}
.hero-cta .btn-out{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
.hero-cta .btn-out:hover{background:rgba(255,255,255,.16);border-color:#fff}
@media(min-width:520px){.hero .lead{font-size:17px}}
@media(min-width:780px){
  .hero .wrap{padding-block:120px 90px}
  .hero-cta{flex-direction:row;justify-content:center}
}

/* scroll-down cue */
.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(255,255,255,.75);
  font-size:11px;letter-spacing:.04em;background:none;border:0;cursor:pointer;font-family:'Almarai'}
.scroll-cue svg{width:18px;height:18px;animation:scrollDrift 1.7s ease-in-out infinite}
@keyframes scrollDrift{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(6px);opacity:1}}

/* ============ hero visual — animated line-art mark above the headline ============ */
.hero-visual{position:relative;width:172px;aspect-ratio:200/140;margin:0 auto 44px}

.hv-shadow{display:block;position:absolute;left:50%;bottom:-6px;width:48%;height:11px;
  border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.35),transparent 72%);
  transform:translateX(-50%) scaleX(1);transition:transform .6s var(--ease)}
.hv-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hv-path{fill:none;stroke:url(#hvGrad);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  pathLength:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.hv-stage{opacity:0;transition:opacity .3s var(--ease)}
.hv-stage.active{opacity:1}
.hv-stage.active .hv-path{stroke-dashoffset:0}
.hv-accent{opacity:0;transform:scale(.3);transform-origin:center;transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.hv-stage.active .hv-accent{opacity:1;transform:scale(1);transition-delay:.72s}
.hv-dot{opacity:0;filter:drop-shadow(0 0 5px rgba(230,48,48,.9))}
.hv-dot.run{opacity:1}
.hv-logo{position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:17px;
  display:grid;place-items:center;background:linear-gradient(150deg,var(--ink-950),var(--brand));
  color:#fff;font-family:'Cairo';font-weight:900;font-size:25px;opacity:0;transform:scale(.7);
  transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1);
  box-shadow:0 12px 26px rgba(230,48,48,.30)}
.hv-logo.active{opacity:1;transform:scale(1)}
.hv-label{display:flex;align-items:center;justify-content:center;gap:9px;position:absolute;bottom:-26px;left:0;right:0;
  font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.72);opacity:0;transition:opacity .3s}
.hv-label.show{opacity:1}
.hv-label::before,.hv-label::after{content:"";width:14px;height:1px;background:rgba(255,255,255,.2)}

@media(min-width:520px){
  .hero-visual{width:196px}
}
@media(min-width:780px){
  .hero-visual{width:240px;margin-bottom:58px}
}

/* ============ stat strip ============ */
.stat-strip{background:var(--navy-950)}
.stat-strip .wrap{display:flex;overflow-x:auto;padding-block:16px;scrollbar-width:none}
.stat-strip .wrap::-webkit-scrollbar{display:none}
.stat-item{flex:none;width:25%;text-align:center;color:#fff;padding:0 6px;border-left:1px solid rgba(255,255,255,.14)}
.stat-item:last-child{border:0}
.stat-item b{display:block;font-family:'Cairo';font-weight:900;font-size:clamp(17px,4.4vw,25px)}
.stat-item span{color:#9CA3AF;font-size:10.5px}
@media(min-width:780px){.stat-item{width:auto;flex:1;padding:0 12px}.stat-item span{font-size:12.5px}}

/* ============ sections ============ */
section{padding:46px 0}
.alt{background:var(--bg-alt)}
.head{margin-bottom:26px}
.head.center{text-align:center;max-width:52ch;margin-inline:auto}
.head h2{font-size:clamp(22px,5.5vw,32px)}
.head p{color:var(--muted);margin-top:10px;font-size:14.5px}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(min-width:780px){section{padding:80px 0}.head{margin-bottom:40px}.head p{font-size:16.5px}}

/* ============ breadcrumb pills for filters ============ */
.filter-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:26px;scrollbar-width:none}
.filter-row::-webkit-scrollbar{display:none}
.chip-btn{flex:none;border:1.5px solid var(--line);background:#fff;color:var(--navy-800);
  min-height:44px;padding:9px 18px;border-radius:var(--r-pill);font-family:'Cairo';font-weight:700;font-size:13px;cursor:pointer;transition:.2s}
.chip-btn.active,.chip-btn:hover{border-color:var(--teal-500);background:var(--teal-100);color:var(--navy-950)}

/* ============ showcase grid ============ */
.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:680px){.showcase-grid{gap:22px}}
.showcase-card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:16px 10px 18px;text-align:center;overflow:hidden;box-shadow:var(--shadow-sm);
  transition:.25s var(--ease);
}
.showcase-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--teal-400)}
.showcase-card .dots{
  position:absolute;top:10px;inset-inline-start:10px;width:28px;height:28px;
  background-image:radial-gradient(var(--line) 1.4px,transparent 1.4px);background-size:8px 8px;
}
.showcase-card .blob{
  position:absolute;top:-24px;inset-inline-end:-24px;width:100px;height:100px;border-radius:50%;
  background:radial-gradient(circle,var(--teal-100),transparent 70%);
}
.showcase-card .icon-wrap{position:relative;width:84px;height:84px;margin:2px auto 12px;
  filter:drop-shadow(0 10px 14px rgba(17,24,39,.16))}
.showcase-card h3{font-size:12.5px;color:var(--navy-950);line-height:1.4}
.showcase-card .divider{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:9px}
.showcase-card .divider span{width:18px;height:2px;background:var(--line);border-radius:2px}
.showcase-card .divider i{width:4px;height:4px;border-radius:50%;background:var(--teal-500)}
@media(min-width:520px){
  .showcase-card{padding:28px 18px 24px;border-radius:var(--r-lg)}
  .showcase-card .icon-wrap{width:120px;height:120px;margin:4px auto 18px}
  .showcase-card h3{font-size:16px}
  .showcase-card .dots{top:16px;inset-inline-start:16px;width:44px;height:44px;background-size:10px 10px}
  .showcase-card .blob{top:-30px;inset-inline-end:-30px;width:140px;height:140px}
  .showcase-card .divider{margin-top:11px;gap:7px}
  .showcase-card .divider span{width:24px}
}

/* ============ rail — card rows scroll sideways instead of stacking tall ============
   Applied on the homepage so the whole page stays short and skimmable.
   The same grids stay as full grids on the catalog pages, where browsing
   everything at once is the point. */
/* compound selectors so .rail always beats the base .sys-grid / .store-grid rules */
.rail,.sys-grid.rail,.store-grid.rail{
  display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  margin-inline:calc(var(--pad)*-1);padding:4px var(--pad) 18px;
  scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{flex:none;width:78vw;max-width:310px;scroll-snap-align:center}
.head-row+.rail-hint{margin-top:20px}
.rail-hint{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;margin-bottom:12px}
.rail-hint svg{width:14px;height:14px;animation:railNudge 1.8s ease-in-out infinite}
@keyframes railNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
@media(min-width:900px){
  .rail,.sys-grid.rail,.store-grid.rail{
    display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
    overflow:visible;margin-inline:0;padding:0}
  .rail>*{width:auto;max-width:none}
  .rail-hint{display:none}
}

/* ============ card media (shared image/placeholder block) ============ */
.card-media{position:relative;aspect-ratio:16/10;overflow:hidden;flex:none;
  background:linear-gradient(135deg,var(--ink-950),var(--brand))}
.card-media::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.4px);background-size:14px 14px}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card-media .cm-icon{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.card-media .cm-icon svg{width:38px;height:38px;opacity:.9}

/* ============ system cards (catalog) ============ */
.sys-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:680px){.sys-grid{grid-template-columns:1fr 1fr;gap:20px}}
@media(min-width:1020px){.sys-grid{grid-template-columns:1fr 1fr 1fr;gap:22px}}
.sys-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;transition:.28s var(--ease);box-shadow:var(--shadow-sm)}
.sys-card:hover{border-color:var(--teal-400);box-shadow:var(--shadow-md);transform:translateY(-5px)}
.sys-card .sys-banner{position:relative;height:110px;flex:none;overflow:hidden;
  background:linear-gradient(135deg,var(--ink-950),var(--brand));
  display:flex;align-items:center;justify-content:space-between;padding:0 18px}
.sys-card .sys-banner::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.4px);background-size:14px 14px}
.sys-card .sys-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10px}

/* a real uploaded image gets the same clean, full-size treatment as the
   pricing-grid cards — no cramped dark overlay box, no floating badges
   fighting the image for space */
.sys-card .sys-banner.has-img{height:auto;aspect-ratio:16/11;background:#fff;padding:0}
.sys-card .sys-banner.has-img::before{display:none}
.sys-card .sys-banner.has-img img{padding:14px}
.sys-card .sys-banner.has-img .sys-icon,
.sys-card .sys-banner.has-img .sys-tag{display:none}
.sys-card .sys-icon{position:relative;width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.16);
  border:1.5px solid rgba(255,255,255,.3);color:#fff;display:grid;place-items:center;flex:none;
  backdrop-filter:blur(2px)}
.sys-card .sys-icon svg{width:25px;height:25px}
.sys-card .sys-tag{position:relative;font-family:'IBM Plex Mono';font-size:10.5px;color:#fff;
  letter-spacing:.08em;background:rgba(255,255,255,.18);padding:5px 10px;border-radius:20px;
  border:1px solid rgba(255,255,255,.28)}
.sys-card .sys-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.sys-card h3{font-size:16.5px}
.sys-card p{color:var(--muted);font-size:13.5px;flex:1}
.sys-card .sys-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:12px;border-top:1px dashed var(--line);margin-top:4px}
.sys-card .sys-price{font-family:'IBM Plex Mono';font-weight:700;font-size:13px;color:var(--navy-800)}
.sys-card .sys-link{font-size:13px;font-weight:700;color:var(--teal-text);display:flex;align-items:center;gap:4px}
.sys-card .sys-link svg{width:14px;height:14px;transition:.2s}
.sys-card:hover .sys-link svg{transform:translateX(-3px)}

/* ============ portfolio carousel (dark, "أعمال نعتز بها") ============ */
.portfolio-section{background:var(--navy-950);position:relative;overflow:hidden}
.portfolio-section::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.06) 1.4px,transparent 1.4px);background-size:22px 22px}
.portfolio-section .wrap{position:relative}
.portfolio-section .eyebrow{color:var(--teal-400)}
.portfolio-section .eyebrow::before{background:var(--teal-400)}
.portfolio-section .head h2{color:#fff}
.portfolio-section .head p{color:rgba(255,255,255,.62)}

/* --- 3D cylinder: cards sit around a ring, the ring rotates ---
   Geometry matched to the reference implementation:
   angle = 360/n, radius = tightFit * 1.15, perspective 1400px. */
.pf3d-stage{position:relative;height:550px;perspective:1400px;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;margin-bottom:18px}
.pf3d-ring{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:center center;
  transition:transform 600ms cubic-bezier(.22,1,.36,1)}
.pf3d-card{position:absolute;left:50%;top:50%;width:48vw;max-width:260px;height:450px;
  background:#fff;border:1px solid rgba(255,255,255,.10);border-radius:24px;overflow:hidden;
  display:flex;flex-direction:column;backface-visibility:hidden;transform-origin:center center;
  box-shadow:0 18px 44px rgba(0,0,0,.42);
  transition:opacity 500ms cubic-bezier(.4,0,.2,1),border-color 500ms cubic-bezier(.4,0,.2,1),
             box-shadow 500ms cubic-bezier(.4,0,.2,1)}
.pf3d-card.is-front{border-color:rgba(230,48,48,.55);box-shadow:0 22px 60px rgba(230,48,48,.28)}
.pf3d-card .card-media{aspect-ratio:auto;height:400px;flex:none}
.pf3d-card .card-media img{object-position:top}
.pf-body{padding:12px 18px;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;text-align:center}
.pf-body h3{font-size:15px;font-weight:800;margin:0;line-height:1.35;flex:none;
  max-height:1.35em;overflow:hidden}
.pf-tag{display:inline-flex;align-self:flex-start;background:var(--brand-soft);color:var(--brand-hover);
  font-size:11px;font-weight:800;padding:4px 12px;border-radius:999px}

.pf-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:6px}
.pf-arrow{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.15);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;
  transition:background .2s}
.pf-arrow:hover{background:rgba(255,255,255,.10)}
.pf-arrow svg{width:17px;height:17px}
.pf-dots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:60vw}
.pf-dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.25);border:0;padding:0;
  cursor:pointer;flex:none;transition:.3s}
.pf-dot.active{background:var(--brand);width:24px}
.pf-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.pf-cta .btn-out{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);color:#fff}
.pf-cta .btn-out:hover{background:rgba(255,255,255,.10)}
@media(min-width:768px){
  .pf3d-stage{height:580px}
  .pf3d-card{width:30vw;max-width:340px;height:490px}
  .pf3d-card .card-media{height:440px}
  .pf-body h3{font-size:18px}
}
@media (prefers-reduced-motion: reduce){
  .pf3d-ring{transition:none}
}

/* ============ works gallery (full page) ============ */
.work-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:760px){.work-grid{grid-template-columns:1fr 1fr;gap:26px}}
@media(min-width:1100px){.work-grid{grid-template-columns:repeat(3,1fr)}}
.work-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:.28s var(--ease)}
.work-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--brand-line)}
.work-card .card-media{aspect-ratio:3/4}
.work-card .card-media img{object-position:top}
.work-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
/* the tag is a flex child, so it would stretch full width without this */
.work-body .pf-tag{align-self:flex-start}
.work-body h3{font-size:18px;color:var(--brand-hover);margin-bottom:8px}
.work-body p{color:var(--muted);font-size:14px;flex:1;margin-bottom:14px}
.work-result{display:flex;align-items:center;gap:7px;padding-top:12px;border-top:1px dashed var(--line);
  font-size:12.5px;font-weight:700;color:var(--ink-700);margin-bottom:14px}
.work-result svg{width:14px;height:14px;color:var(--brand);flex:none}

/* ============ work ============ */
.grid{display:grid;gap:14px}
@media(min-width:780px){.grid.g2{grid-template-columns:1fr 1fr;gap:20px}}
@media(min-width:780px){.grid.g3{grid-template-columns:1fr 1fr 1fr;gap:20px}}
.case{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.case .cat{font-family:'IBM Plex Mono';font-size:11px;color:var(--teal-text);letter-spacing:.05em}
.case h3{font-size:17.5px;margin:8px 0 10px}
.case p{color:var(--muted);font-size:14px}
.case .result{margin-top:14px;display:flex;align-items:center;gap:8px;color:var(--navy-700);
  font-size:13px;font-weight:700;padding-top:12px;border-top:1px dashed var(--line)}
.case .result svg{width:15px;height:15px;flex:none}

/* ============ process ============ */
.proc-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin:0 calc(var(--pad)*-1);padding-inline:var(--pad)}
.proc-scroll::-webkit-scrollbar{display:none}
.pcard{flex:none;width:74%;max-width:260px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.pcard .n{width:36px;height:36px;border-radius:50%;background:var(--navy-700);color:#fff;display:grid;place-items:center;
  font-family:'Cairo';font-weight:900;margin-bottom:12px;font-size:14px}
.pcard h3{font-size:15px;margin-bottom:5px}
.pcard p{color:var(--muted);font-size:13px}
@media(min-width:780px){.proc-scroll{overflow:visible;display:grid;grid-template-columns:repeat(4,1fr);margin:0}.pcard{width:auto;max-width:none}}

/* ============ pricing ============ */
.price-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;max-width:440px;margin:0 auto;box-shadow:var(--shadow-sm)}
.price-tabs{display:flex;background:var(--bg-alt);border-bottom:1px solid var(--line)}
.price-tab{flex:1;padding:13px 6px;text-align:center;font-family:'Cairo';font-weight:700;font-size:13px;color:var(--muted);
  border-bottom:2px solid transparent;cursor:pointer;margin-bottom:-1px}
.price-tab.active{color:var(--navy-700);border-color:var(--navy-700);background:#fff}
.price-panel{display:none;padding:24px 22px}
.price-panel.active{display:block}
.price-panel .amt{font-family:'Cairo';font-weight:800;font-size:26px;color:var(--navy-950)}
.price-panel .desc{color:var(--muted);font-size:13.5px;margin:6px 0 16px}
.price-panel ul{list-style:none;display:grid;gap:9px;margin-bottom:18px}
.price-panel li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--ink-700)}
.price-panel li svg{width:15px;height:15px;color:var(--teal-500);flex:none;margin-top:2px}

/* ============ pricing tiers (cards, no tabs) ============ */
.tier-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:stretch}
@media(min-width:860px){.tier-grid{grid-template-columns:repeat(3,1fr);gap:22px}}
.tier-card{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:.25s var(--ease);position:relative}
.tier-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.tier-card.featured{border-color:var(--teal-500);box-shadow:0 16px 40px rgba(230,48,48,.18)}
.tier-badge{position:absolute;top:-13px;right:22px;background:var(--teal-500);color:#fff;font-family:'Cairo';
  font-weight:700;font-size:11.5px;padding:5px 14px;border-radius:20px;box-shadow:0 6px 14px rgba(230,48,48,.35)}
.tier-name{font-family:'IBM Plex Mono';font-size:11.5px;color:var(--teal-text);letter-spacing:.08em;margin-bottom:10px}
.tier-amt{font-family:'Cairo';font-weight:900;font-size:28px;color:var(--navy-950);display:flex;align-items:baseline;gap:6px}
.tier-amt small{font-size:13px;color:var(--muted);font-weight:500}
.tier-desc{color:var(--muted);font-size:13.5px;margin:8px 0 18px}
.tier-list{list-style:none;display:grid;gap:11px;margin-bottom:22px;flex:1}
.tier-list li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ink-700)}
.tier-list li svg{width:16px;height:16px;color:var(--teal-500);flex:none;margin-top:2px}

/* ============ per-system pricing cards ============ */
.price-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:680px){.price-grid{grid-template-columns:1fr 1fr;gap:16px}}
@media(min-width:1020px){.price-grid{grid-template-columns:1fr 1fr 1fr;gap:18px}}
.price-mini{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;
  display:flex;align-items:center;gap:14px;transition:.2s var(--ease)}
.price-mini:hover{border-color:var(--teal-400);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.price-mini .pm-icon{width:42px;height:42px;border-radius:11px;background:var(--teal-100);color:var(--navy-700);
  display:grid;place-items:center;flex:none}
.price-mini .pm-icon svg{width:20px;height:20px}
.price-mini .pm-body{flex:1;min-width:0}
.price-mini .pm-body b{display:block;font-family:'Cairo';font-size:13.5px;color:var(--navy-950)}
.price-mini .pm-amt{font-family:'IBM Plex Mono';font-weight:700;font-size:13px;color:var(--teal-500);white-space:nowrap}

/* ============ store-style product cards (pricing page) ============ */
.store-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.store-grid{grid-template-columns:1fr 1fr;gap:18px}}
@media(min-width:1020px){.store-grid{grid-template-columns:1fr 1fr 1fr;gap:20px}}
.store-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:.25s var(--ease);box-shadow:var(--shadow-sm)}
.store-card:hover{border-color:var(--teal-400);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.store-card .card-media{aspect-ratio:16/11}
.store-card .card-media img{object-fit:contain;padding:14px;background:#fff}
.store-card .store-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.store-card h3{font-size:16.5px;margin-bottom:8px}
.store-card p{color:var(--muted);font-size:13.5px;flex:1;margin-bottom:16px}
.store-card .store-price-row{display:flex;align-items:baseline;gap:6px;margin-bottom:16px;
  padding-top:14px;border-top:1px dashed var(--line)}
.store-card .store-price-label{font-size:11.5px;color:var(--muted)}
.store-card .store-price{font-family:'Cairo';font-weight:900;font-size:21px;color:var(--navy-950)}
.store-card .store-price small{font-family:'IBM Plex Mono';font-weight:600;font-size:12px;color:var(--muted);margin-inline-start:3px}

/* ============ faq ============ */
.faq-item{border-bottom:1px solid var(--line);padding:15px 0}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-family:'Cairo';font-weight:700;font-size:14.5px;color:var(--navy-950)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .plus{flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;color:var(--navy-700);transition:.2s}
.faq-item summary .plus svg{width:12px;height:12px}
.faq-item[open] summary .plus{background:var(--navy-700);border-color:var(--navy-700);color:#fff;transform:rotate(45deg)}
.faq-item p{color:var(--muted);font-size:13.5px;margin-top:10px}
@media(min-width:780px){.faq-item summary{font-size:16px}.faq-item p{font-size:15px}}

/* ============ contact ============ */
.contact-grid{display:grid;gap:20px}
@media(min-width:900px){.contact-grid{grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start}}
.ci-list{display:grid;gap:13px;margin-top:16px}
.ci{display:flex;gap:12px;align-items:center}
.ci .ic{flex:none;width:36px;height:36px;border-radius:10px;background:var(--teal-100);color:var(--navy-700);display:grid;place-items:center;font-size:14px}
.ci b{display:block;font-family:'Cairo';font-size:13.5px;color:var(--navy-950)}
.ci span{color:var(--muted);font-size:12.5px}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-sm)}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;color:var(--ink-700)}
.field-row{display:grid;gap:14px}
@media(min-width:520px){.field-row{grid-template-columns:1fr 1fr}}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:11px 14px;font-family:inherit;font-size:14.5px;background:var(--bg-alt)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--teal-500);outline-offset:1px;border-color:var(--teal-500);background:#fff}
.field-hint{display:block;font-size:11.5px;color:var(--muted);margin-top:5px}
.form-note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:12px}
.form-success{display:none;background:var(--teal-100);border:1px solid var(--teal-400);color:var(--navy-800);
  padding:14px 16px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;margin-bottom:14px;align-items:center;gap:8px}
.form-success.show{display:flex}

/* ============ clients — logo wall ============ */
.logo-wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;justify-content:center}
@media(min-width:560px){.logo-wall{gap:16px}}
@media(min-width:900px){.logo-wall{gap:22px;max-width:760px;margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}

/* square on phones: a 3:2 tile at two columns leaves ~65px of usable height,
   which is too little for either a logo or a two-line name */
.logo-tile{position:relative;background:#FBF6F5;border:1px solid var(--line);border-radius:var(--r-md);
  aspect-ratio:1/1;display:grid;place-items:center;padding:10px;overflow:hidden;
  transition:.25s var(--ease)}
@media(min-width:560px){.logo-tile{padding:14px}}

.logo-tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:6px;box-shadow:0 1px 4px rgba(17,24,39,.12)}
a.logo-tile:hover{border-color:var(--brand-line);box-shadow:var(--shadow-md);transform:translateY(-3px)}

/* name fallback: a circular initials mark (same language as the team
   avatars on /about) instead of a cramped paragraph of company name text —
   reads as a logo placeholder, not a wall of mismatched typography */
.logo-tile .lt-fallback{width:56px;height:56px;border-radius:50%;
  background:linear-gradient(150deg,var(--ink-950),var(--brand));
  display:grid;place-items:center;color:#fff;font-family:'Cairo';font-weight:800;font-size:17px}
@media(min-width:560px){.logo-tile .lt-fallback{width:64px;height:64px;font-size:19px}}

.logo-tile .lt-ext{position:absolute;top:8px;inset-inline-start:8px;width:20px;height:20px;border-radius:50%;
  background:var(--bg-alt);color:var(--muted-2);display:grid;place-items:center;transition:.25s}
.logo-tile .lt-ext svg{width:10px;height:10px}
a.logo-tile:hover .lt-ext{background:var(--brand);color:#fff}

/* ============ story chapters — sticky panel, scrolling chapters ============ */
/* NOTE: no `overflow:hidden` on the section — it silently disables
   position:sticky on the panel inside. */
.chapters{background:var(--bg-alt);position:relative;padding:0;border-block:1px solid var(--line)}
.chapters .wrap{position:relative}

.ch-sticky{position:sticky;top:62px;z-index:5;background:var(--bg-alt);
  padding:26px 0 18px;border-bottom:1px solid var(--line)}
.ch-eyebrow{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.14em;
  color:var(--teal-text);display:block;margin-bottom:12px}
.ch-head{display:flex;align-items:baseline;gap:12px}
.ch-num{font-family:'Cairo';font-weight:900;font-size:clamp(44px,13vw,68px);line-height:.9;
  color:var(--brand);transition:opacity .3s var(--ease)}
.ch-year{font-family:'IBM Plex Mono';font-size:14px;color:var(--muted);transition:opacity .3s var(--ease)}
.ch-title{font-size:clamp(17px,4.6vw,24px);color:var(--ink-950);margin-top:10px;min-height:1.4em;
  transition:opacity .3s var(--ease)}
.ch-prog{display:flex;gap:6px;margin-top:18px}
.ch-seg{flex:1;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.ch-seg i{display:block;height:100%;width:100%;background:var(--brand);
  transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.22,1,.36,1)}
[dir="ltr"] .ch-seg i{transform-origin:left}
.ch-seg.done i{transform:scaleX(1)}

.ch-item{min-height:56vh;display:flex;flex-direction:column;justify-content:center;
  padding:26px 0;border-bottom:1px dashed var(--line)}
.ch-item:last-child{border-bottom:0}
.ch-item p{color:var(--muted);font-size:15px;line-height:2;max-width:52ch;margin-bottom:16px}
.ch-item .ch-punch{color:var(--ink-950);font-family:'Cairo';font-weight:700;font-size:16.5px;
  line-height:1.85;max-width:48ch;margin-bottom:20px}
.ch-stat{display:inline-flex;align-items:baseline;gap:8px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 18px;box-shadow:var(--shadow-sm)}
.ch-stat b{font-family:'Cairo';font-weight:900;font-size:19px;color:var(--brand)}
.ch-stat span{font-size:12px;color:var(--muted)}

@media(min-width:900px){
  .chapters .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:60px;align-items:start}
  .ch-sticky{top:96px;border-bottom:0;padding-block:80px 0;align-self:start}
  .ch-list{padding-block:80px}
  .ch-item{min-height:64vh}
  .ch-item p{font-size:16.5px}
}
@media (prefers-reduced-motion: reduce){
  .ch-num,.ch-year,.ch-title{transition:none}
  .ch-seg i{transition:none}
}

/* ============ team / about ============ */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:680px){.team-grid{grid-template-columns:repeat(4,1fr);gap:18px}}
.team-card{text-align:center}
.team-avatar{width:76px;height:76px;border-radius:50%;margin:0 auto 10px;background:linear-gradient(150deg,var(--ink-950),var(--brand));
  display:grid;place-items:center;color:#fff;font-family:'Cairo';font-weight:800;font-size:22px}
.team-card b{display:block;font-family:'Cairo';font-size:14px;color:var(--navy-950)}
.team-card span{color:var(--muted);font-size:12px}

.value-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:680px){.value-grid{grid-template-columns:1fr 1fr;gap:18px}}
@media(min-width:1020px){.value-grid{grid-template-columns:repeat(4,1fr)}}
.value-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.value-card .vi{width:40px;height:40px;border-radius:10px;background:var(--teal-100);color:var(--navy-700);
  display:grid;place-items:center;margin-bottom:12px}
.value-card h3{font-size:15px;margin-bottom:6px}

/* ============ system detail — grouped app breakdown ============ */
.app-block{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.app-block:last-child{margin-bottom:0}
.app-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.app-head .ai{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;flex:none}
.app-head .ai svg{width:22px;height:22px}
.app-head h3{font-size:17px}
.app-group{margin-bottom:16px;padding-bottom:16px;border-bottom:1px dashed var(--line)}
.app-group:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.app-group-title{font-family:'Cairo';font-weight:700;font-size:13.5px;color:var(--ink-800);margin-bottom:9px}
.value-card p{color:var(--muted);font-size:13.5px}

/* ============ footer ============ */
footer{background:var(--navy-950);color:#9CA3AF;padding:40px 0 0;font-size:13px}
.f-top{display:grid;gap:24px;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.12)}
@media(min-width:780px){.f-top{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}}
.f-brand p{margin-top:12px;max-width:36ch;line-height:1.8}
.f-social{display:flex;gap:8px;margin-top:14px}
.f-social a{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:#fff}
.f-social a:hover{background:var(--teal-500)}
.f-social svg{width:15px;height:15px}
footer h4{color:#fff;font-family:'Cairo';font-size:13.5px;margin-bottom:12px}
footer ul{list-style:none;display:grid;gap:9px}
footer a:hover{color:var(--teal-400)}
.f-bottom{display:flex;flex-direction:column;gap:8px;padding:16px 0;font-size:12px;text-align:center}
@media(min-width:780px){.f-bottom{flex-direction:row;justify-content:space-between;text-align:right}}

/* whatsapp float */
.wa{position:fixed;inset-inline-end:16px;bottom:16px;z-index:85;background:#20BD5C;color:#fff;
  border-radius:50%;width:50px;height:50px;display:grid;place-items:center;box-shadow:0 8px 22px rgba(32,189,92,.4)}
.wa svg{width:22px;height:22px}
@media(min-width:780px){.wa{width:auto;height:auto;padding:12px 20px;border-radius:var(--r-pill);
  font-family:'Cairo';font-weight:700;font-size:14px;gap:8px;display:flex;align-items:center}}
:focus-visible{outline:2.5px solid var(--teal-500);outline-offset:2px}

/* ============ page loading progress bar (perceived speed) ============ */
#pageProgress{position:fixed;top:0;right:0;left:0;height:2.5px;background:var(--teal-500);z-index:300;
  transform:scaleX(0);transform-origin:right;transition:transform .25s ease}
#pageProgress.go{transform:scaleX(1);transition:transform .4s ease}

/* ============ intro animation ============ */
.intro-seen #introOverlay{display:none !important}
#introOverlay{position:fixed;inset:0;z-index:200;background:var(--navy-950);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .4s var(--ease)}
#introOverlay.hide{opacity:0;pointer-events:none}
.intro-skip{position:absolute;top:18px;inset-inline-end:18px;background:none;
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.6);
  font-family:'Almarai';font-size:12px;padding:7px 14px;border-radius:20px;cursor:pointer}
.intro-skip:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.intro-stage{position:relative;width:280px;max-width:78vw;height:52px}
.intro-bits{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px}
.bit{width:24px;height:34px;border-radius:7px;background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,255,255,.14);color:rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;font-weight:600;opacity:0;transform:translateY(12px) scale(.85);
  transition:opacity .2s,transform .2s,color .2s,border-color .2s,background .2s,box-shadow .2s}
.bit.in{opacity:1;transform:translateY(0) scale(1)}
.bit.lit{color:#FF9B9B;border-color:var(--teal-500);background:rgba(230,48,48,.14);
  box-shadow:0 0 18px rgba(230,48,48,.4)}
.intro-bits.converge .bit{transition:opacity .3s,transform .3s;opacity:0;transform:translateY(-8px) scale(.35)}
.intro-logo{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:15px;
  display:grid;place-items:center;background:linear-gradient(150deg,var(--ink-950),var(--brand));
  color:#fff;font-family:'Cairo';font-weight:900;font-size:21px;opacity:0;transform:scale(.5);
  transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1);
  box-shadow:0 20px 50px rgba(230,48,48,.35)}
.intro-logo.show{opacity:1;transform:scale(1)}
.intro-label{margin-top:26px;color:rgba(255,255,255,.35);font-family:'IBM Plex Mono';
  font-size:10.5px;letter-spacing:.16em;opacity:0;transition:opacity .3s}
.intro-label.show{opacity:1}
@media(min-width:520px){
  .intro-stage{width:340px}
  .bit{width:32px;height:44px;font-size:15px;border-radius:9px}
  .intro-logo{width:66px;height:66px;font-size:25px;border-radius:17px}
}

/* ============ services — illustrated rows on a drawing rail ============ */
.svc-list{position:relative}
/* the rail: a vertical line that fills as you scroll, echoing the hero's
   line-draw motif so the whole site speaks one visual language */
.svc-rail{position:absolute;top:0;bottom:0;inset-inline-start:calc(var(--pad) + 9px);
  width:2px;background:var(--line);border-radius:2px;pointer-events:none}
.svc-rail-fill{display:block;width:100%;height:100%;background:linear-gradient(180deg,var(--brand),var(--brand-light));
  border-radius:2px;transform:scaleY(0);transform-origin:top;will-change:transform}
.svc-row{position:relative;padding-inline-start:38px;padding-block:26px}
.svc-node{position:absolute;inset-inline-start:calc(9px - 9px);top:34px;width:20px;height:20px;border-radius:50%;
  background:#fff;border:2px solid var(--line);display:grid;place-items:center;transition:.35s var(--ease)}
.svc-node::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--line);transition:.35s var(--ease)}
.svc-row.in .svc-node{border-color:var(--brand);box-shadow:0 0 0 5px var(--brand-soft)}
.svc-row.in .svc-node::after{background:var(--brand)}
.svc-art{position:relative;width:120px;height:120px;margin-bottom:16px;
  filter:drop-shadow(0 12px 20px rgba(17,24,39,.14))}
.svc-art svg{width:100%;height:100%}
.svc-body .eyebrow{margin-bottom:6px}
.svc-body h2{font-size:clamp(20px,5vw,26px);margin-bottom:10px}
.svc-body>p{color:var(--muted);font-size:14.5px;margin-bottom:16px;max-width:52ch}
.svc-points{list-style:none;display:grid;gap:9px;margin-bottom:18px}
.svc-points li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ink-700)}
.svc-points li svg{width:16px;height:16px;color:var(--brand);flex:none;margin-top:3px}
.svc-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.svc-meta span{display:inline-flex;align-items:center;gap:6px;background:var(--bg-alt);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 14px;font-size:12.5px;color:var(--ink-700)}
.svc-meta span svg{width:14px;height:14px;color:var(--brand);flex:none}
.svc-meta b{font-family:'Cairo';font-weight:800;color:var(--ink-950)}
@media(min-width:900px){
  .svc-rail{inset-inline-start:50%;margin-inline-start:-1px}
  .svc-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
    padding-inline-start:0;padding-block:44px}
  .svc-node{inset-inline-start:50%;margin-inline-start:-10px;top:50%;margin-top:-10px}
  .svc-art{width:190px;height:190px;margin:0 auto}
  .svc-row:nth-of-type(even) .svc-art-wrap{order:2}
}

/* ============ scroll reveal (transform+opacity only, GPU friendly) ============ */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  /* reveals must never leave content invisible when motion is off */
  .reveal{opacity:1 !important;transform:none !important}
  .svc-rail-fill{transform:scaleY(1) !important}
}