/* ============ TOKENS ============ */
:root{
  --paper:#FAF6EE;
  --paper-2:#F0E9DA;
  --ink:#12241F;
  --ink-2:#1C3530;
  --ink-3:#24413B;
  --signal:#FF5A38;
  --signal-dim:#E14B2C;
  --teal:#2E6E66;
  --gold:#B08A3E;
  --text:#152420;
  --text-soft:rgba(21,36,32,.64);
  --text-faint:rgba(21,36,32,.42);
  --on-ink:#F4EFE3;
  --on-ink-soft:rgba(244,239,227,.62);
  --line:rgba(21,36,32,.13);
  --line-ink:rgba(244,239,227,.14);
  --radius:4px;
  --wrap:1180px;
  --ease:cubic-bezier(.19,1,.22,1);
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

body{
  font-family:'IBM Plex Sans Arabic', Tahoma, sans-serif;
  background:var(--paper);
  color:var(--text);
  line-height:1.75;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:'Almarai', 'IBM Plex Sans Arabic', sans-serif; font-weight:800; letter-spacing:0;}

.mono{font-family:'IBM Plex Mono','IBM Plex Sans Arabic',monospace; direction:ltr; display:inline-block;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 2rem;}

img,svg{display:block;}

a{color:inherit;}

.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

::selection{background:var(--signal); color:#fff;}

:focus-visible{outline:2px solid var(--signal); outline-offset:3px;}

/* ============ EYEBROW / MARK ============ */
.eyebrow{
  display:flex; align-items:center; gap:.7rem;
  justify-content:center;
  color:var(--signal);
  font-family:'IBM Plex Mono', monospace;
  font-size:.8rem;
  letter-spacing:.08em;
  font-weight:600;
  margin-bottom:1.1rem;
}
.eyebrow svg{width:46px; height:16px; flex:none;}
.eyebrow .mk-line{fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}

.section-head{text-align:center; max-width:640px; margin:0 auto 3.4rem;}
.section-head h2{font-size:clamp(1.9rem,3.2vw,2.6rem); color:var(--text); margin-bottom:.9rem; line-height:1.35;}
.section-head p{color:var(--text-soft); font-size:1.02rem;}
.on-ink .section-head h2{color:var(--on-ink);}
.on-ink .section-head p{color:var(--on-ink-soft);}

section{padding:6.5rem 0;}
@media (max-width:768px){section{padding:4.5rem 0;}}

/* ============ NAV ============ */
nav{
  position:sticky; top:0; z-index:200;
  background:rgba(250,246,238,.86);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--wrap); margin:0 auto; padding:1.05rem 2rem;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:baseline; gap:.6rem;}
.brand .mark{font-family:'Almarai',sans-serif; font-size:1.6rem; font-weight:700; color:var(--ink);}
.brand .mark span{color:var(--signal);}
.brand .brand-tag{font-size:.68rem; color:var(--text-faint); font-family:'IBM Plex Mono',monospace; letter-spacing:.03em; display:none;}
@media (min-width:640px){.brand .brand-tag{display:inline;}}

.nav-links{list-style:none; display:flex; gap:2.1rem; align-items:center;}
.nav-links a{
  text-decoration:none; color:var(--text); font-weight:500; font-size:.92rem;
  position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:''; position:absolute; right:0; bottom:0; width:0; height:1.5px;
  background:var(--signal); transition:width .3s var(--ease);
}
.nav-links a:hover::after{width:100%;}
.nav-cta{
  background:var(--ink); color:var(--on-ink)!important; padding:.65rem 1.4rem;
  border-radius:999px; font-size:.85rem!important; font-weight:600!important;
}
.nav-cta::after{display:none;}
.nav-cta:hover{background:var(--signal); color:#fff!important;}

.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.5rem;}
.nav-toggle span{width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.3s;}

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:0 0 auto auto; top:64px; right:0; width:78%; max-width:320px;
    background:var(--paper); flex-direction:column; align-items:flex-start;
    padding:2rem; gap:1.6rem; height:calc(100vh - 64px); box-shadow:-10px 0 40px rgba(0,0,0,.12);
    transform:translateX(100%); transition:transform .4s var(--ease); border-left:1px solid var(--line);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:flex;}
  .nav-cta{margin-top:.5rem;}
}

/* ============ HERO ============ */
.hero{
  background:var(--ink);
  color:var(--on-ink);
  padding:5.5rem 0 0;
  overflow:hidden;
  position:relative;
}
.hero-inner{max-width:var(--wrap); margin:0 auto; padding:0 2rem; text-align:center; position:relative; z-index:2;}
.hero .eyebrow{color:var(--signal); justify-content:center;}
.hero h1{
  font-size:clamp(3.2rem,9vw,6.4rem);
  line-height:.95;
  color:var(--on-ink);
}
.hero h1 .accent{color:var(--signal);}
.hero-tagline{
  font-size:clamp(1.1rem,2vw,1.4rem);
  color:var(--on-ink-soft);
  margin:1.3rem auto .6rem;
  max-width:600px;
  font-weight:400;
}
.hero-tagline strong{color:var(--on-ink); font-weight:600;}
.hero-sub{color:var(--on-ink-soft); max-width:520px; margin:0 auto 2.4rem; font-size:.98rem;}

.hero-actions{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:3.2rem;}

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:1rem 2.1rem; border-radius:999px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn-primary{background:var(--signal); color:#fff; box-shadow:0 10px 30px -8px rgba(255,90,56,.55);}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 16px 38px -8px rgba(255,90,56,.65);}
.btn-ghost{border-color:var(--line-ink); color:var(--on-ink); background:transparent;}
.btn-ghost:hover{border-color:var(--on-ink); transform:translateY(-3px);}
.btn-dark{background:var(--ink); color:var(--on-ink);}
.btn-dark:hover{background:var(--signal); transform:translateY(-3px);}

/* hero pulse-to-growth signature line */
.pulse-wrap{position:relative; width:100%; height:clamp(120px,20vw,220px); margin-top:1rem;}
.pulse-wrap svg{width:100%; height:100%; overflow:visible;}
.pulse-line{
  fill:none; stroke:var(--signal); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(255,90,56,.45));
  stroke-dasharray:2600; stroke-dashoffset:2600;
  animation:draw 2.6s var(--ease) .3s forwards;
}
.pulse-line.dim{stroke:var(--teal); opacity:.35; stroke-width:1.4; filter:none; animation-delay:.1s; animation-duration:2.8s;}
.pulse-dot{fill:var(--signal); opacity:0; animation:dotpop .5s ease-out 2.7s forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes dotpop{from{opacity:0; transform:scale(0);} to{opacity:1; transform:scale(1);}}
.hero-floor{height:1px; background:linear-gradient(90deg, transparent, var(--line-ink), transparent); margin-top:-1px;}

/* mini reusable pulse mark used as eyebrow icon */
.mk-line{stroke-dasharray:200; stroke-dashoffset:200; transition:stroke-dashoffset 1.1s var(--ease);}
.eyebrow.in-view .mk-line{stroke-dashoffset:0;}

/* ============ SERVICES ============ */
.services{background:var(--paper);}
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;}
@media (max-width:900px){.svc-grid{grid-template-columns:1fr;}}
.svc-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:2.6rem 2.2rem; position:relative; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.svc-card:hover{transform:translateY(-6px); box-shadow:0 24px 50px -20px rgba(18,36,31,.22); border-color:transparent;}
.svc-card .icon{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--on-ink); margin-bottom:1.6rem;
}
.svc-card:nth-child(2) .icon{background:var(--teal);}
.svc-card:nth-child(3) .icon{background:var(--gold);}
.svc-card .icon svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.svc-card h3{font-size:1.3rem; margin-bottom:.4rem; color:var(--text);}
.svc-card .svc-index{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--text-faint); display:block; margin-bottom:.8rem;}
.svc-card ul{list-style:none; margin-top:1.2rem; border-top:1px solid var(--line); padding-top:1.2rem;}
.svc-card li{
  padding:.5rem 0; color:var(--text-soft); font-size:.92rem;
  position:relative; padding-right:1.2rem;
}
.svc-card li::before{
  content:''; position:absolute; right:0; top:.85rem; width:6px; height:1.5px; background:var(--signal);
}

/* ============ PROCESS (timeline w/ signature trace) ============ */
.process{background:var(--paper-2); position:relative;}
.timeline{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;}
@media (max-width:900px){.timeline{grid-template-columns:1fr; gap:0;}}
.timeline-trace{position:absolute; top:26px; right:0; left:0; height:2px; z-index:0;}
.timeline-trace svg{width:100%; height:40px; overflow:visible;}
@media (max-width:900px){.timeline-trace{display:none;}}
.tl-item{position:relative; z-index:1;}
@media (max-width:900px){
  .tl-item{padding-right:2.4rem; padding-bottom:2.6rem; border-right:2px solid var(--line); margin-right:12px;}
  .tl-item:last-child{padding-bottom:0;}
}
.tl-node{
  width:14px; height:14px; border-radius:50%; background:var(--paper-2); border:2.5px solid var(--signal);
  margin-bottom:1.3rem;
}
@media (max-width:900px){.tl-node{position:absolute; right:-19px; top:0; margin:0;}}
.tl-item h3{font-size:1.08rem; margin-bottom:.6rem; color:var(--text);}
.tl-item p{color:var(--text-soft); font-size:.88rem; margin-bottom:.9rem;}
.tl-item ul{list-style:none;}
.tl-item li{font-size:.84rem; color:var(--text-soft); padding:.32rem 0 .32rem 0; position:relative; padding-right:1.05rem;}
.tl-item li::before{content:'←'; position:absolute; right:0; color:var(--signal); font-size:.78rem;}

/* ============ RESULTS (dark) ============ */
.results{background:var(--ink); color:var(--on-ink);}
.res-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line-ink); border:1px solid var(--line-ink);}
@media (max-width:960px){.res-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.res-grid{grid-template-columns:1fr;}}
.res-cell{background:var(--ink); padding:2.6rem 1.8rem; text-align:center; transition:background .35s;}
.res-cell:hover{background:var(--ink-2);}
.res-cell .icon{width:26px; height:26px; margin:0 auto 1.1rem; color:var(--signal);}
.res-cell .icon svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.res-num{font-family:'IBM Plex Mono',monospace; font-size:clamp(1.9rem,3vw,2.5rem); font-weight:600; color:var(--on-ink); direction:ltr; display:block;}
.res-cell h4{font-size:.92rem; margin:.6rem 0 .35rem; color:var(--on-ink); font-family:'IBM Plex Sans Arabic'; font-weight:600;}
.res-cell p{font-size:.78rem; color:var(--on-ink-soft);}

/* ============ PLATFORMS ============ */
.platforms{background:var(--paper);}
.plat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;}
@media (max-width:900px){.plat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.plat-grid{grid-template-columns:1fr;}}
.plat-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem;
  display:flex; gap:1rem; align-items:flex-start; background:#fff;
  transition:border-color .3s, transform .3s var(--ease);
}
.plat-card:hover{border-color:var(--signal); transform:translateY(-4px);}
.plat-card .icon{width:38px; height:38px; flex:none; color:var(--signal);}
.plat-card .icon svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.plat-card h4{font-size:1.02rem; margin-bottom:.35rem;}
.plat-card p{font-size:.85rem; color:var(--text-soft);}

/* ============ ABOUT ============ */
.about{background:var(--paper-2);}
.about-inner{max-width:760px; margin:0 auto; text-align:center;}
.about blockquote{
  font-family:'Almarai',sans-serif; font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.6;
  color:var(--ink); margin:0 0 2.4rem; position:relative;
}
.about blockquote::before{content:'"'; color:var(--signal);}
.about blockquote::after{content:'"'; color:var(--signal);}
.about-body{display:grid; grid-template-columns:1fr 1fr; gap:2rem; text-align:right; margin-top:2.5rem;}
@media (max-width:700px){.about-body{grid-template-columns:1fr;}}
.about-body p{color:var(--text-soft); font-size:.96rem;}

/* ============ PRICING ============ */
.pricing{background:var(--paper);}
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; align-items:stretch;}
@media (max-width:900px){.price-grid{grid-template-columns:1fr; max-width:420px; margin:0 auto;}}
.price-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:2.6rem 2.1rem;
  display:flex; flex-direction:column; background:#fff; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.price-card:hover{transform:translateY(-6px); box-shadow:0 24px 50px -22px rgba(18,36,31,.2);}
.price-card.featured{
  background:var(--ink); color:var(--on-ink); border-color:var(--ink); transform:scale(1.035);
}
.price-card.featured:hover{transform:scale(1.035) translateY(-6px);}
.price-tag{
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.06em; color:var(--signal);
  margin-bottom:1rem; text-transform:uppercase;
}
.price-card h3{font-size:1.25rem; margin-bottom:1.1rem;}
.price-amt{font-family:'IBM Plex Mono',monospace; font-size:2.4rem; font-weight:600; direction:ltr; margin-bottom:.2rem;}
.price-amt small{font-size:.9rem; font-weight:500; opacity:.6; font-family:'IBM Plex Sans Arabic';}
.price-card hr{border:none; border-top:1px solid var(--line); margin:1.6rem 0;}
.price-card.featured hr{border-top:1px solid var(--line-ink);}
.price-feat{list-style:none; margin-bottom:2rem; flex:1;}
.price-feat li{font-size:.88rem; padding:.5rem 0; color:var(--text-soft); padding-right:1.3rem; position:relative;}
.price-card.featured .price-feat li{color:var(--on-ink-soft);}
.price-feat li::before{content:'✓'; position:absolute; right:0; color:var(--signal); font-weight:700;}
.price-card button{
  width:100%; padding:.95rem; border-radius:999px; border:1.5px solid var(--ink); background:transparent;
  color:var(--ink); font-weight:600; font-size:.92rem; cursor:pointer; transition:.3s;
}
.price-card button:hover{background:var(--ink); color:var(--on-ink);}
.price-card.featured button{background:var(--signal); border-color:var(--signal); color:#fff;}
.price-card.featured button:hover{background:#fff; color:var(--ink); border-color:#fff;}

/* ============ CONTACT ============ */
.contact{background:var(--ink); color:var(--on-ink);}
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:3.5rem;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.contact-info h3{font-size:1.3rem; margin-bottom:1.8rem;}
.c-item{display:flex; gap:1rem; margin-bottom:1.6rem; align-items:flex-start;}
.c-item .icon{width:22px; height:22px; color:var(--signal); flex:none; margin-top:2px;}
.c-item .icon svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.c-item strong{display:block; font-size:.85rem; color:var(--on-ink-soft); font-weight:500; margin-bottom:.15rem;}
.c-item span{font-size:.98rem; direction:ltr; display:inline-block;}
.c-item span.rtl-text{direction:rtl;}

.contact-form{display:flex; flex-direction:column; gap:1rem;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}
.contact-form input, .contact-form textarea{
  background:var(--ink-2); border:1px solid var(--line-ink); border-radius:var(--radius);
  padding:.95rem 1.1rem; color:var(--on-ink); font-family:inherit; font-size:.92rem; transition:border-color .3s;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{color:var(--on-ink-soft);}
.contact-form input:focus, .contact-form textarea:focus{border-color:var(--signal); outline:none;}
.contact-form textarea{min-height:110px; resize:vertical;}
.contact-form button{
  margin-top:.4rem; padding:1rem; border-radius:999px; border:none; background:var(--signal); color:#fff;
  font-weight:700; font-size:.95rem; cursor:pointer; transition:transform .3s var(--ease), background .3s;
}
.contact-form button:hover{transform:translateY(-3px); background:#fff; color:var(--ink);}
.form-note{font-size:.76rem; color:var(--on-ink-soft);}

/* ============ FOOTER ============ */
footer{background:#0D1B17; color:var(--on-ink-soft); padding:3.2rem 0 2.2rem; text-align:center;}
footer .brand-tag-foot{font-family:'Almarai',sans-serif; font-size:1.3rem; color:var(--on-ink); margin-bottom:.6rem;}
footer .foot-line{font-size:.85rem; margin-bottom:1.8rem;}
.foot-links{display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; margin-bottom:1.8rem; list-style:none;}
.foot-links a{text-decoration:none; font-size:.85rem; color:var(--on-ink-soft); transition:color .3s;}
.foot-links a:hover{color:var(--signal);}
footer .copy{font-size:.76rem; color:rgba(244,239,227,.35);}

/* ============ REVEAL ON SCROLL ============ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* whatsapp float */
.wa-float{
  position:fixed; bottom:1.6rem; left:1.6rem; z-index:300; width:54px; height:54px; border-radius:50%;
  background:var(--signal); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -6px rgba(255,90,56,.55);
  transition:transform .3s var(--ease);
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:26px; height:26px; fill:#fff;}

/* ============ PAGE BANNER (inner pages) ============ */
.page-banner{
  background:var(--ink); color:var(--on-ink);
  padding:4.5rem 0 3.5rem; text-align:center; position:relative; overflow:hidden;
}
.page-banner .eyebrow{justify-content:center;}
.page-banner h1{font-size:clamp(2.2rem,5vw,3.4rem); color:var(--on-ink); margin-bottom:.8rem;}
.page-banner p{color:var(--on-ink-soft); max-width:560px; margin:0 auto; font-size:1rem;}
.breadcrumb{
  display:flex; justify-content:center; gap:.5rem; align-items:center;
  font-family:'IBM Plex Mono',monospace; font-size:.76rem; color:var(--on-ink-soft); margin-bottom:1.4rem;
}
.breadcrumb a{color:var(--on-ink-soft); text-decoration:none;}
.breadcrumb a:hover{color:var(--signal);}
.breadcrumb span.sep{opacity:.4;}
.breadcrumb .current{color:var(--signal);}
.mini-trace{position:absolute; bottom:0; right:0; left:0; height:34px; opacity:.5;}
.mini-trace svg{width:100%; height:100%;}

/* ============ TESTIMONIALS ============ */
.testimonials{background:var(--paper-2);}
.test-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;}
@media (max-width:900px){.test-grid{grid-template-columns:1fr;}}
.test-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:2.2rem;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.test-card:hover{transform:translateY(-5px); box-shadow:0 20px 44px -20px rgba(18,36,31,.2);}
.test-stars{color:var(--signal); font-size:.9rem; margin-bottom:1rem; letter-spacing:2px;}
.test-quote{font-size:.95rem; color:var(--text-soft); margin-bottom:1.4rem; line-height:1.8;}
.test-who{display:flex; align-items:center; gap:.9rem;}
.test-avatar{
  width:42px; height:42px; border-radius:50%; background:var(--ink); color:var(--on-ink);
  display:flex; align-items:center; justify-content:center; font-family:'Almarai'; font-weight:800; flex:none;
}
.test-who strong{display:block; font-size:.9rem;}
.test-who span{font-size:.78rem; color:var(--text-faint);}

/* ============ CTA BAND ============ */
.cta-band{background:var(--signal); color:#fff; text-align:center; padding:4.5rem 0;}
.cta-band h2{color:#fff; font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:.8rem;}
.cta-band p{color:rgba(255,255,255,.85); margin-bottom:2rem; max-width:520px; margin-inline:auto;}
.cta-band .btn-dark{background:#fff; color:var(--ink);}
.cta-band .btn-dark:hover{background:var(--ink); color:#fff;}
.cta-band .btn-ghost{border-color:rgba(255,255,255,.5); color:#fff;}
.cta-band .btn-ghost:hover{border-color:#fff;}

/* ============ SERVICE GRID (overview) ============ */
.svc-mini-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
@media (max-width:900px){.svc-mini-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.svc-mini-grid{grid-template-columns:1fr;}}
.svc-mini{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.7rem;
  text-decoration:none; color:var(--text); display:block; transition:.35s var(--ease);
}
.svc-mini:hover{transform:translateY(-5px); border-color:var(--signal); box-shadow:0 20px 44px -22px rgba(18,36,31,.22);}
.svc-mini .icon{width:42px; height:42px; border-radius:50%; background:var(--ink); color:var(--on-ink); display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem;}
.svc-mini .icon svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6;}
.svc-mini h3{font-size:1.05rem; margin-bottom:.4rem;}
.svc-mini p{font-size:.85rem; color:var(--text-soft); margin-bottom:.9rem;}
.svc-mini .more{font-size:.8rem; color:var(--signal); font-weight:600; font-family:'IBM Plex Mono',monospace;}

/* ============ SERVICE DETAIL ============ */
.svc-detail-grid{display:grid; grid-template-columns:1.3fr .9fr; gap:3rem;}
@media (max-width:860px){.svc-detail-grid{grid-template-columns:1fr;}}
.svc-detail h2{font-size:1.5rem; margin:2.2rem 0 1rem;}
.svc-detail h2:first-child{margin-top:0;}
.svc-detail p{color:var(--text-soft); margin-bottom:1rem;}
.feat-grid{display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-bottom:.5rem;}
@media (max-width:520px){.feat-grid{grid-template-columns:1fr;}}
.feat-item{display:flex; gap:.7rem; align-items:flex-start; font-size:.92rem; color:var(--text-soft);}
.feat-item svg{width:18px; height:18px; color:var(--signal); flex:none; margin-top:2px; fill:none; stroke:currentColor; stroke-width:2;}
.step-list{list-style:none; counter-reset:step;}
.step-list li{
  counter-increment:step; position:relative; padding-right:2.6rem; margin-bottom:1.3rem; font-size:.92rem; color:var(--text-soft);
}
.step-list li::before{
  content:counter(step); position:absolute; right:0; top:-.15rem; width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--ink); color:var(--on-ink); font-family:'IBM Plex Mono',monospace; font-size:.8rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.step-list strong{display:block; color:var(--text); font-size:.98rem; margin-bottom:.2rem;}
.svc-side{position:sticky; top:100px; align-self:start;}
.side-card{
  background:var(--ink); color:var(--on-ink); border-radius:var(--radius); padding:2.1rem; margin-bottom:1.4rem;
}
.side-card .price-tag{color:var(--signal); font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.06em; margin-bottom:.6rem; display:block;}
.side-card .price-amt{font-family:'IBM Plex Mono',monospace; font-size:1.9rem; font-weight:600; direction:ltr; margin-bottom:.3rem;}
.side-card .price-amt small{font-size:.8rem; opacity:.65; font-family:'IBM Plex Sans Arabic';}
.side-card p{color:var(--on-ink-soft); font-size:.86rem; margin-bottom:1.4rem;}
.side-card button{
  width:100%; padding:.95rem; border-radius:999px; border:none; background:var(--signal); color:#fff;
  font-weight:700; cursor:pointer; transition:.3s;
}
.side-card button:hover{background:#fff; color:var(--ink);}
.side-works{border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem;}
.side-works h4{font-size:.9rem; margin-bottom:1rem;}
.side-works ul{list-style:none;}
.side-works li{font-size:.85rem; color:var(--text-soft); padding:.55rem 0; border-top:1px solid var(--line);}
.side-works li:first-child{border-top:none;}

/* ============ PORTFOLIO ============ */
.filter-bar{display:flex; justify-content:center; gap:.7rem; flex-wrap:wrap; margin-bottom:3rem;}
.filter-btn{
  padding:.55rem 1.3rem; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--text-soft);
  font-size:.85rem; font-weight:600; cursor:pointer; transition:.3s;
}
.filter-btn.active, .filter-btn:hover{background:var(--ink); color:var(--on-ink); border-color:var(--ink);}
.folio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;}
@media (max-width:900px){.folio-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.folio-grid{grid-template-columns:1fr;}}
.folio-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; transition:.35s var(--ease);}
.folio-card:hover{transform:translateY(-5px); box-shadow:0 20px 44px -20px rgba(18,36,31,.22);}
.folio-thumb{
  height:170px; background:linear-gradient(135deg,var(--ink),var(--ink-3)); position:relative;
  display:flex; align-items:center; justify-content:center; color:var(--on-ink-soft);
}
.folio-thumb span{font-family:'IBM Plex Mono',monospace; font-size:.75rem; letter-spacing:.05em;}
.folio-body{padding:1.6rem;}
.folio-tag{font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:var(--signal); text-transform:uppercase; letter-spacing:.05em;}
.folio-body h3{font-size:1.05rem; margin:.5rem 0 .6rem;}
.folio-body p{font-size:.86rem; color:var(--text-soft); margin-bottom:1rem;}
.folio-stats{display:flex; gap:1.2rem; border-top:1px solid var(--line); padding-top:1rem;}
.folio-stats div{font-family:'IBM Plex Mono',monospace; font-size:1.05rem; font-weight:600; color:var(--text);}
.folio-stats span{display:block; font-family:'IBM Plex Sans Arabic'; font-size:.7rem; color:var(--text-faint); font-weight:400;}

/* case study */
.case-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:2.6rem; margin-bottom:1.6rem; background:#fff;
  display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center;
}
@media (max-width:700px){.case-card{grid-template-columns:1fr;}}
.case-before-after{display:flex; gap:1.6rem; align-items:center;}
.case-num{text-align:center;}
.case-num .val{font-family:'IBM Plex Mono',monospace; font-size:1.8rem; font-weight:600; color:var(--text-faint);}
.case-num.after .val{color:var(--signal);}
.case-num span{display:block; font-size:.72rem; color:var(--text-faint); margin-top:.2rem;}
.case-arrow{color:var(--signal); font-size:1.4rem;}

/* ============ BLOG ============ */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;}
@media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; text-decoration:none; color:var(--text); display:block; transition:.35s var(--ease);}
.blog-card:hover{transform:translateY(-5px); box-shadow:0 20px 44px -20px rgba(18,36,31,.22);}
.blog-thumb{height:140px; background:var(--paper-2); display:flex; align-items:center; justify-content:center;}
.blog-thumb svg{width:34px; height:34px; color:var(--signal); fill:none; stroke:currentColor; stroke-width:1.4;}
.blog-body{padding:1.5rem;}
.blog-cat{font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--signal); text-transform:uppercase;}
.blog-body h3{font-size:1rem; margin:.5rem 0; line-height:1.5;}
.blog-meta{font-size:.76rem; color:var(--text-faint); display:flex; gap:.8rem;}

/* ============ FAQ ============ */
.faq-list{max-width:820px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; text-align:right; background:none; border:none; padding:1.5rem 0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; font-family:'Almarai'; font-weight:700; font-size:1rem; color:var(--text);
}
.faq-q .plus{flex:none; width:22px; height:22px; position:relative;}
.faq-q .plus::before, .faq-q .plus::after{content:''; position:absolute; background:var(--signal); transition:transform .3s;}
.faq-q .plus::before{width:100%; height:2px; top:50%; right:0; transform:translateY(-50%);}
.faq-q .plus::after{height:100%; width:2px; right:50%; top:0; transform:translateX(50%);}
.faq-item.open .faq-q .plus::after{transform:translateX(50%) rotate(90deg); opacity:0;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s var(--ease);}
.faq-a p{color:var(--text-soft); font-size:.92rem; padding-bottom:1.5rem; max-width:680px;}

/* ============ TEAM ============ */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:500px){.team-grid{grid-template-columns:1fr;}}
.team-card{text-align:center;}
.team-avatar{
  width:100px; height:100px; border-radius:50%; background:var(--ink); color:var(--on-ink); margin:0 auto 1.1rem;
  display:flex; align-items:center; justify-content:center; font-family:'Almarai'; font-weight:800; font-size:1.6rem;
}
.team-card h4{font-size:.98rem; margin-bottom:.2rem;}
.team-card span{font-size:.8rem; color:var(--text-faint);}

/* value / vision cards */
.value-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem;}
@media (max-width:700px){.value-grid{grid-template-columns:1fr;}}
.value-card{border-right:3px solid var(--signal); padding:1.8rem 1.8rem 1.8rem 0; background:var(--paper-2); border-radius:0 var(--radius) var(--radius) 0;}
.value-card h3{font-size:1.2rem; margin-bottom:.7rem;}
.value-card p{color:var(--text-soft); font-size:.92rem;}

/* story timeline (about) */
.story-timeline{max-width:720px; margin:0 auto;}
.story-row{display:grid; grid-template-columns:110px 1fr; gap:1.6rem; padding-bottom:2.2rem; position:relative;}
.story-row::before{content:''; position:absolute; right:135px; top:8px; bottom:-4px; width:1px; background:var(--line);}
.story-row:last-child::before{display:none;}
.story-year{font-family:'IBM Plex Mono',monospace; color:var(--signal); font-weight:600; text-align:left; direction:ltr;}
.story-row h4{font-size:1.02rem; margin-bottom:.4rem;}
.story-row p{color:var(--text-soft); font-size:.9rem;}

/* ============ 404 ============ */
.error-page{min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; background:var(--ink); color:var(--on-ink);}
.error-code{font-family:'IBM Plex Mono',monospace; font-size:clamp(4rem,14vw,8rem); color:var(--signal); line-height:1; direction:ltr;}
.error-page h2{color:var(--on-ink); margin:1rem 0 .6rem;}
.error-page p{color:var(--on-ink-soft); margin-bottom:2rem;}

/* generic page content spacing */
.prose{max-width:760px; margin:0 auto;}
.prose h2{margin:2.2rem 0 1rem; font-size:1.4rem;}
.prose p{color:var(--text-soft); margin-bottom:1rem;}
.prose ul{margin:0 0 1rem 0; padding-right:1.3rem; color:var(--text-soft);}
.prose li{margin-bottom:.4rem;}

/* ============ CAREERS ============ */
.job-list{max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:1.1rem;}
.job-card{
  border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:1.8rem 2rem;
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem; transition:.3s var(--ease);
}
.job-card:hover{border-color:var(--signal); transform:translateY(-3px); box-shadow:0 20px 44px -24px rgba(18,36,31,.22);}
@media (max-width:640px){.job-card{flex-direction:column; align-items:flex-start;}}
.job-info h3{font-size:1.05rem; margin-bottom:.5rem;}
.job-meta{display:flex; gap:1rem; flex-wrap:wrap; font-size:.8rem; color:var(--text-faint); font-family:'IBM Plex Mono',monospace;}
.job-meta span{display:flex; align-items:center; gap:.35rem;}
.job-card .btn{flex:none; padding:.75rem 1.6rem; font-size:.85rem;}
.no-openings{
  text-align:center; border:1px dashed var(--line); border-radius:var(--radius); padding:3rem 2rem; color:var(--text-soft);
}

/* ============ PARTNERS ============ */
.partners-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem;}
@media (max-width:860px){.partners-grid{grid-template-columns:repeat(2,1fr);}}
.partner-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.4rem;
  text-align:center; transition:.3s var(--ease);
}
.partner-card:hover{border-color:var(--signal); transform:translateY(-4px);}
.partner-logo{
  width:64px; height:64px; margin:0 auto 1rem; border-radius:50%; background:var(--paper-2); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-family:'Almarai'; font-weight:800; font-size:1.3rem;
}
.partner-card h4{font-size:.92rem; margin-bottom:.25rem;}
.partner-card span{font-size:.76rem; color:var(--text-faint);}
.partner-cta{
  border:1px dashed var(--line); border-radius:var(--radius); padding:2.4rem; text-align:center; margin-top:2.6rem;
}
.partner-cta p{color:var(--text-soft); margin-bottom:1.2rem;}

/* ============ BOOK CONSULTATION ============ */
.booking-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem;}
@media (max-width:900px){.booking-grid{grid-template-columns:1fr;}}
.booking-steps{list-style:none; counter-reset:bstep;}
.booking-steps li{counter-increment:bstep; display:flex; gap:1rem; margin-bottom:1.6rem;}
.booking-steps li::before{
  content:counter(bstep); flex:none; width:2rem; height:2rem; border-radius:50%; background:var(--ink); color:var(--on-ink);
  display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:.85rem; font-weight:600;
}
.booking-steps strong{display:block; margin-bottom:.2rem;}
.booking-steps span{color:var(--text-soft); font-size:.88rem;}
.chip-group{display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1.4rem;}
.chip{
  border:1.5px solid var(--line); border-radius:999px; padding:.6rem 1.3rem; font-size:.85rem; cursor:pointer;
  background:#fff; color:var(--text); transition:.25s; font-family:inherit;
}
.chip.selected, .chip:hover{border-color:var(--signal); color:var(--signal);}
.chip.selected{background:rgba(255,90,56,.08);}
.slot-group{display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-bottom:1.4rem;}
@media (max-width:480px){.slot-group{grid-template-columns:repeat(2,1fr);}}
.slot{
  border:1.5px solid var(--line); border-radius:var(--radius); padding:.7rem; text-align:center; font-size:.82rem;
  cursor:pointer; background:#fff; font-family:'IBM Plex Mono',monospace; transition:.25s;
}
.slot.selected, .slot:hover{border-color:var(--signal); color:var(--signal);}
.slot.selected{background:rgba(255,90,56,.08);}
.field-label{font-size:.85rem; font-weight:600; color:var(--text); margin-bottom:.7rem; display:block;}

/* ============ PRODUCT SPOTLIGHT (أثر المحاسبي) ============ */
.spotlight{
  background:var(--ink); border-radius:12px; padding:3rem; position:relative; overflow:hidden;
  display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:center;
  border:1px solid var(--gold);
}
@media (max-width:860px){.spotlight{grid-template-columns:1fr; padding:2.2rem;}}
.spotlight-badge{
  display:inline-flex; align-items:center; gap:.5rem; background:rgba(176,138,62,.16); color:var(--gold);
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.06em; padding:.4rem 1rem;
  border-radius:999px; margin-bottom:1.2rem; text-transform:uppercase;
}
.spotlight h3{color:var(--on-ink); font-size:1.7rem; margin-bottom:.9rem;}
.spotlight p{color:var(--on-ink-soft); font-size:.95rem; margin-bottom:1.5rem; max-width:480px;}
.spotlight-feat{list-style:none; margin-bottom:1.8rem;}
.spotlight-feat li{color:var(--on-ink-soft); font-size:.88rem; padding:.4rem 0; padding-right:1.3rem; position:relative;}
.spotlight-feat li::before{content:'✓'; position:absolute; right:0; color:var(--gold); font-weight:700;}
.spotlight-actions{display:flex; gap:1rem; flex-wrap:wrap;}
.spotlight-trial{
  font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--gold); margin-top:1rem;
}
.spotlight-visual{
  background:var(--ink-2); border:1px solid var(--line-ink); border-radius:8px; padding:1.6rem;
  font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--on-ink-soft);
}
.spotlight-visual .sv-row{display:flex; justify-content:space-between; padding:.55rem 0; border-bottom:1px solid var(--line-ink);}
.spotlight-visual .sv-row:last-child{border-bottom:none;}
.spotlight-visual .sv-row b{color:var(--gold); font-weight:600;}
.spotlight-mini{
  background:#fff; border:1px solid var(--gold); border-radius:var(--radius); padding:1.8rem;
  display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; justify-content:space-between;
}
.spotlight-mini h4{font-size:1.05rem; margin-bottom:.3rem;}
.spotlight-mini p{color:var(--text-soft); font-size:.85rem; max-width:420px;}
.spotlight-mini .btn{flex:none;}