/* ===========================================================================
   styles.css — الأساس + المكوّنات + الأقسام
   منظّم بالأقسام: Base · Layout · Buttons · Header · Hero · Cards · Sections
   · Pricing · FAQ · Forms · Portfolio · Footer · Utilities · Motion
   ========================================================================= */

/* ----------------------------------------------------------------- Base -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: calc(var(--z-header) + 1);
  height: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--grad-brand);
  box-shadow: var(--glow-brand);
  pointer-events: none;
}
html[dir="rtl"] .scroll-progress { transform-origin: right center; }

/* خلفية متوهّجة خفيفة عامة */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60vw 50vh at 80% -5%, var(--aurora-1), transparent 60%),
    radial-gradient(55vw 45vh at 5% 8%, var(--aurora-2), transparent 60%);
  pointer-events: none;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
picture { display: contents; } /* الغلاف شفاف للتخطيط — صور WebP عبر <picture> */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-tight); color: var(--text-strong); font-weight: 700; letter-spacing: -.01em; }

/* --------------------------------------------------------------- Layout -- */
.container { width: min(100% - 2.4rem, var(--container)); margin-inline: auto; }
.container-narrow { width: min(100% - 2.4rem, var(--container-narrow)); margin-inline: auto; }

.section { padding-block: clamp(3.5rem, 7vw, 7rem); position: relative; }
.section-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section-head { max-width: 60ch; margin-bottom: var(--sp-7); }
.section-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-300); font-weight: 600; letter-spacing: .04em;
  color: var(--brand); text-transform: uppercase;
  padding: .35rem .75rem; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
}
html[lang="ar"] .eyebrow { text-transform: none; letter-spacing: 0; }

.section-title { font-size: var(--fs-800); margin: var(--sp-4) 0 var(--sp-3); }
.section-sub { color: var(--muted); font-size: var(--fs-500); max-width: 56ch; }
.center .section-sub { margin-inline: auto; }

.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* --------------------------------------------------------------- Buttons -- */
.btn {
  --btn-bg: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.5rem; border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--fs-400); line-height: 1;
  border: 1px solid var(--line-strong); background: var(--btn-bg);
  color: var(--text-strong); cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), background var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; }

.btn-primary {
  background: var(--grad-brand); color: var(--brand-ink);
  border-color: transparent; box-shadow: var(--glow-brand);
}
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(25,229,155,.4), 0 22px 60px rgba(25,229,155,.28); }

.btn-ghost { background: transparent; border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--brand); }

.btn-outline { background: transparent; border-color: var(--brand); color: var(--brand); }
.btn-outline:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }

.btn-whatsapp { background: #25D366; color: #04231a; border-color: transparent; }
.btn-whatsapp:hover { box-shadow: 0 18px 40px rgba(37,211,102,.3); }

.btn-lg { padding: 1.05rem 2rem; font-size: var(--fs-500); }
.btn-sm { padding: .6rem 1.05rem; font-size: var(--fs-300); }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.center .btn-row { justify-content: center; }

/* -------------------------------------------------------------- Header -- */
.skip-link {
  position: fixed; inset-inline-start: 1rem; top: -60px; z-index: var(--z-toast);
  background: var(--brand); color: var(--brand-ink); padding: .6rem 1rem; border-radius: var(--r-sm);
  transition: top var(--t-fast);
}
.skip-link:focus { top: 1rem; }
/* في الوضع الفاتح، brand-ink داكن وbrand داكن أيضًا → نستخدم نصًا أبيض لتباين كافٍ */
[data-theme="light"] .skip-link { color: #fff; }

.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: var(--glass);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med), background var(--t-med);
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; gap: var(--sp-5); height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); }
.brand-mark { display: grid; place-items: center; filter: drop-shadow(0 6px 16px rgba(25,229,155,.35)); }
.brand-name strong { font-size: 1.15rem; color: var(--text-strong); letter-spacing: -.02em; }

.main-nav { margin-inline-start: auto; }
.main-nav ul { display: flex; gap: .35rem; align-items: center; }
.main-nav a {
  display: inline-block; padding: .55rem .85rem; border-radius: var(--r-sm);
  color: var(--muted); font-weight: 500; font-size: var(--fs-400);
  transition: color var(--t-fast), background var(--t-fast);
}
.main-nav a:hover { color: var(--text-strong); background: var(--surface); }
.main-nav a.is-active { color: var(--brand); }

.header-actions { display: flex; align-items: center; gap: .5rem; margin-inline-start: var(--sp-4); }
.main-nav + .header-actions { margin-inline-start: 0; }

.icon-btn {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--text);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--line-strong); }

.lang-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--text); font-weight: 600; font-size: var(--fs-300);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.lang-btn:hover { background: var(--surface-2); border-color: var(--brand); }

/* تبديل أيقونة الثيم */
[data-theme="dark"] .ic-sun { display: block; }
[data-theme="dark"] .ic-moon { display: none; }
[data-theme="light"] .ic-sun { display: none; }
[data-theme="light"] .ic-moon { display: block; }

.menu-toggle { display: none; }
.burger, .burger::before, .burger::after {
  content: ""; display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.burger { position: relative; }
.burger::before { position: absolute; top: -6px; }
.burger::after { position: absolute; top: 6px; }
.menu-toggle[aria-expanded="true"] .burger { background: transparent; }
.menu-toggle[aria-expanded="true"] .burger::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .burger::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu { border-top: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(14px); }
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { padding: var(--sp-4) 1.2rem var(--sp-6); }
.mobile-menu ul { display: grid; gap: .25rem; margin-bottom: var(--sp-4); }
.mobile-menu a { display: block; padding: .85rem 1rem; border-radius: var(--r-sm); color: var(--text); font-weight: 500; }
.mobile-menu a:hover, .mobile-menu a.is-active { background: var(--surface-2); color: var(--brand); }

@media (max-width: 940px) {
  .main-nav, .header-cta { display: none; }
  .menu-toggle { display: grid; }
  .header-actions { margin-inline-start: auto; }
}

/* ---------------------------------------------------------------- Hero -- */
.hero { position: relative; padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(3rem, 6vw, 6rem); overflow: clip; }
.hero-aurora {
  position: absolute; inset: -20% -10% auto; height: 120%; z-index: -3; filter: blur(60px); opacity: .9;
  background:
    radial-gradient(40% 40% at 25% 30%, var(--aurora-1), transparent 70%),
    radial-gradient(35% 45% at 80% 20%, var(--aurora-2), transparent 70%),
    radial-gradient(40% 40% at 60% 80%, var(--aurora-3), transparent 70%);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translateY(-30px) scale(1.06); } }

/* شبكة تدرّج حيّة (mesh) — كتل لونية تطفو باستقلال (سطح المكتب) */
.hero-aurora::before, .hero-aurora::after { content: ""; position: absolute; border-radius: 50%; filter: blur(55px); opacity: .5; pointer-events: none; }
.hero-aurora::before { width: 42vw; height: 42vw; inset-block-start: 2%; inset-inline-start: 52%; background: radial-gradient(circle, var(--brand), transparent 62%); animation: mesh-a 15s ease-in-out infinite alternate; }
.hero-aurora::after { width: 36vw; height: 36vw; inset-block-end: -6%; inset-inline-end: 55%; background: radial-gradient(circle, var(--violet), transparent 62%); animation: mesh-b 19s ease-in-out infinite alternate; }
@keyframes mesh-a { to { transform: translate(-7%, 13%) scale(1.18); } }
@keyframes mesh-b { to { transform: translate(9%, -11%) scale(1.12); } }

@media (max-width: 768px) { .hero-aurora { filter: blur(38px); animation: none; } .hero-aurora::before, .hero-aurora::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-aurora, .hero-aurora::before, .hero-aurora::after { animation: none; } }

/* خلفية شبكة نقاط تفاعلية (Canvas) — تُرسم عبر hero-bg.js على سطح المكتب فقط.
   على الجوال ومع "تقليل الحركة" تختفي وتظهر شبكة التدرّج (aurora) خلفية احتياطية. */
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; opacity: 0; transition: opacity 1.2s var(--ease);
}
.hero-canvas.is-ready { opacity: 1; }
/* تعتيم متدرّج للحفاظ على وضوح النص فوق الشبكة */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(96% 86% at 50% 28%, transparent, color-mix(in srgb, var(--bg) 38%, transparent) 84%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 28%, transparent), transparent 24%, transparent 68%, var(--bg));
}
/* خلف النص مباشرة: تعتيم لطيف يضمن قراءة واضحة (RTL: العمود يبدأ من اليمين) */
.hero-copy { position: relative; }
.hero-copy::before {
  content: ""; position: absolute; inset: -8% -12% -8% -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 80% at 60% 45%, color-mix(in srgb, var(--bg) 55%, transparent), transparent 72%);
}
@media (max-width: 700px) { .hero-media { display: none; } }

/* لمعان متحرك يمرّ على العنوان المتدرّج في الهيرو */
.hero h1 .gradient-text { background-size: 220% auto; animation: text-shimmer 7s linear infinite; }
@keyframes text-shimmer { to { background-position: 220% center; } }
@media (prefers-reduced-motion: reduce) { .hero h1 .gradient-text { animation: none; } }

.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { font-size: var(--fs-900); margin: var(--sp-4) 0; }
.hero-lead { font-size: var(--fs-500); color: var(--muted); max-width: 48ch; margin-bottom: var(--sp-6); }
.hero-cta { margin-bottom: var(--sp-6); }

.hero-trust { display: flex; flex-wrap: wrap; gap: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.hero-trust .stat strong { display: block; font-family: var(--font-display); font-size: var(--fs-700); color: var(--text-strong); }
.hero-trust .stat span { color: var(--muted); font-size: var(--fs-300); }

/* ---------------------------------------------- Hero نصّي جريء (lede) -- */
.hero--lede { min-height: min(92vh, 900px); display: grid; align-items: center; }
.hero-lede { position: relative; max-width: 62rem; margin-inline: auto; text-align: center; }
.hero-lede::before {
  content: ""; position: absolute; inset: -14% -18%; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 56% at 50% 46%, color-mix(in srgb, var(--bg) 58%, transparent), transparent 76%);
}
/* شريحة التعريف (الصورة + الاسم + متاح) */
.hero-profile {
  display: inline-flex; align-items: center; gap: .6rem;
  padding-block: .38rem; padding-inline-start: .38rem; padding-inline-end: 1rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.hero-profile:hover {
  transform: translateY(-2px); border-color: var(--brand);
  background: color-mix(in srgb, var(--surface-solid) 82%, transparent);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--brand) 16%, transparent);
}
.hero-profile img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.hero-profile-txt { display: grid; gap: 1px; text-align: start; line-height: 1.15; }
.hero-profile-txt b { color: var(--text-strong); font-size: var(--fs-300); font-weight: 700; }
.hero-profile-txt small { display: inline-flex; align-items: center; gap: .38rem; color: var(--muted); font-size: .72rem; }
.hero-profile-txt .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); animation: pulse-dot 2.2s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.hero-lede h1 { font-size: clamp(2.5rem, 6.2vw, 4.7rem); line-height: 1.06; max-width: 20ch; margin: var(--sp-5) auto var(--sp-4); }
/* قناع الكلمات لدخول العنوان السينمائي (motion.js يقسّم العنوان) */
.h1-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: .12em; margin-block: -.12em; }
.h1-w > i { display: inline-block; font-style: normal; will-change: transform; }
.hero-lede .hero-lead { max-width: 58ch; margin-inline: auto; margin-bottom: var(--sp-6); }
.hero-lede .hero-cta { justify-content: center; }
.hero-lede .hero-trust { justify-content: center; border-top: none; padding-top: 0; gap: .7rem; }
.hero-lede .hero-trust .stat {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem; border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero-lede .hero-trust .stat strong { display: inline-flex; align-items: center; font-size: 0; color: var(--brand); }
.hero-lede .hero-trust .stat strong svg { width: 16px; height: 16px; }
.hero-lede .hero-trust .stat span { color: var(--text); font-size: var(--fs-300); font-weight: 600; }

/* مؤشّر التمرير للأسفل */
.hero-scroll {
  position: absolute; inset-inline: 0; inset-block-end: 1.4rem; z-index: 2;
  width: 26px; height: 42px; margin-inline: auto;
  border: 2px solid color-mix(in srgb, var(--text) 38%, transparent); border-radius: 16px;
  display: grid; justify-items: center; align-content: start; padding-top: 7px;
  transition: border-color var(--t-fast);
}
.hero-scroll:hover { border-color: var(--brand); }
.hero-scroll span { width: 4px; height: 8px; border-radius: var(--r-pill); background: var(--brand); animation: scroll-cue 1.7s ease-in-out infinite; }
@keyframes scroll-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(13px); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 700px) { .hero--lede { min-height: auto; } .hero-scroll { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-profile-txt .dot, .hero-scroll span { animation: none; } }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
}

/* بطاقة لقطة المنتج في الهيرو */
.hero-visual { position: relative; }
.device-card {
  background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); overflow: hidden; transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
  transition: transform var(--t-slow) var(--ease);
}
html[lang="en"] .device-card { transform: perspective(1400px) rotateY(7deg) rotateX(3deg); }
.device-card:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.device-bar { display: flex; gap: .4rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.device-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); }
.device-bar i:nth-child(1) { background: #ff6058; } .device-bar i:nth-child(2) { background: #ffbd2e; } .device-bar i:nth-child(3) { background: #28c840; }
.device-body { padding: 1.1rem; display: grid; gap: .7rem; }
.device-row { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; padding: .7rem .85rem; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); }
.device-row .pill { font-size: var(--fs-300); color: var(--brand); font-weight: 700; }
.device-skel { height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--line-strong), var(--surface-2)); background-size: 200% 100%; animation: shimmer 2.4s linear infinite; }
.device-skel.w-60 { width: 60%; } .device-skel.w-40 { width: 40%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.float-badge {
  position: absolute; inset-inline-end: -14px; bottom: 26px;
  background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: .7rem .9rem; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: .55rem; font-weight: 600; font-size: var(--fs-300);
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.float-badge:hover { transform: translateY(-2px); border-color: var(--brand); background: var(--surface-2); }
.float-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent); }

/* بطاقة التعريف الشخصية في الهيرو — Personal profile card */
.profile-card { margin: 0; background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); overflow: hidden;
  transform: perspective(1400px) rotateY(-7deg) rotateX(3deg); transition: transform var(--t-slow) var(--ease); }
html[lang="en"] .profile-card { transform: perspective(1400px) rotateY(7deg) rotateX(3deg); }
.profile-card:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.profile-card img { display: block; width: 100%; height: auto; }
.profile-card figcaption { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); background: var(--surface); }
.profile-card figcaption strong { display: block; font-family: var(--font-display); font-size: var(--fs-600); color: var(--text-strong); }
.profile-card figcaption span { color: var(--muted); font-size: var(--fs-300); }
@media (prefers-reduced-motion: reduce) { .profile-card { transform: none; } }

/* --------------------------------------------------------- Trust marquee -- */
.marquee { overflow: hidden; padding-block: var(--sp-5); border-block: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-label { text-align: center; color: var(--faint); font-size: var(--fs-300); margin-bottom: var(--sp-4); }
.marquee-track { display: flex; gap: 3rem; width: max-content; animation: scrollx 28s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { color: var(--muted); font-weight: 600; font-size: 1.05rem; opacity: .7; white-space: nowrap; font-family: var(--font-display); }
@keyframes scrollx { to { transform: translateX(-50%); } }
html[dir="rtl"] .marquee-track { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* --------------------------------------------------------------- Cards -- */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-6); transition: transform var(--t-med) var(--ease), border-color var(--t-med), background var(--t-med);
}
.card:hover { transform: translateY(-4px); border-color: var(--line-strong); background: var(--surface-2); }
.card-icon {
  width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: var(--sp-4);
  background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
}
.card h3 { font-size: var(--fs-600); margin-bottom: var(--sp-2); }
.card p { color: var(--muted); }

/* ---- تفاعلات دقيقة (micro-interactions) ---- */
.card-icon { transition: transform .45s var(--ease-out), background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.card:hover .card-icon {
  transform: translateY(-2px) scale(1.06) rotate(-4deg);
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  border-color: color-mix(in srgb, var(--brand) 48%, transparent);
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--brand) 45%, transparent);
}
.card-icon svg { transition: transform .45s var(--ease-out); }
.card:hover .card-icon svg { transform: scale(1.08); }
.card .tag-pill svg { transition: transform .3s var(--ease-out); }
.card:hover .tag-pill { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.card:hover .tag-pill svg { transform: translateX(-3px); }
html[dir="ltr"] .card:hover .tag-pill svg { transform: translateX(3px); }
.chip:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .card:hover .card-icon, .card:hover .card-icon svg, .card:hover .tag-pill svg, .chip:hover { transform: none; }
}

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* بنتو — Bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-5); }
.bento .card { margin: 0; }
.bento .span-3 { grid-column: span 3; }
.bento .span-2 { grid-column: span 2; }
.bento .span-4 { grid-column: span 4; }
.bento .span-6 { grid-column: span 6; }
.bento .tall { grid-row: span 2; }
@media (max-width: 860px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento [class*="span-"] { grid-column: span 1; } .bento .span-4, .bento .span-6 { grid-column: span 2; } .bento .tall { grid-row: auto; } }
@media (max-width: 540px) { .bento { grid-template-columns: 1fr; } .bento [class*="span-"] { grid-column: span 1; } }

/* قائمة ميزات بعلامة صح */
.feature-list { display: grid; gap: .7rem; }
.feature-list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--text); }
.feature-list .tick { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); margin-top: .15rem; }
.feature-list .tick svg { width: 13px; height: 13px; }

/* --------------------------------------------------------------- Stats -- */
.stats-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--sp-5); padding: var(--sp-7); border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); }
.stat-item { text-align: center; position: relative; }
/* فاصل رفيع بين الأرقام — إيقاع تحريري */
.stat-item + .stat-item::before { content: ""; position: absolute; inset-block: 18%; inset-inline-start: calc(var(--sp-5) / -2); width: 1px; background: var(--line-strong); }
.stat-item .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.7rem, 5.6vw, 4.5rem); line-height: 1.05; letter-spacing: -.01em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.stat-item .lbl { color: var(--muted); font-size: var(--fs-400); margin-top: .4rem; letter-spacing: .02em; }
@media (max-width: 720px) {
  .stats-band { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-5); }
  .stat-item + .stat-item::before { display: none; }
}

/* --------------------------------------------------------- Testimonials -- */
.quote-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); }
.quote-card .stars { color: var(--gold); margin-bottom: var(--sp-3); letter-spacing: 2px; }
.quote-card blockquote { font-size: var(--fs-500); color: var(--text); margin-bottom: var(--sp-4); }
.quote-card .who { display: flex; align-items: center; gap: .8rem; }
.quote-card .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--grad-violet); display: grid; place-items: center; color: #fff; font-weight: 700; }
.quote-card .who b { display: block; color: var(--text-strong); }
.quote-card .who span { color: var(--faint); font-size: var(--fs-300); }
.placeholder-note { display: inline-block; margin-top: var(--sp-4); font-size: var(--fs-300); color: var(--faint); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); padding: .4rem .7rem; }

/* ----------------------------------------------------------- CTA band -- */
.cta-band { position: relative; border-radius: var(--r-xl); padding: clamp(2.2rem, 5vw, 4rem); text-align: center; overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface-2); }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 120% at 50% 0%, var(--aurora-1), transparent 60%), radial-gradient(60% 120% at 50% 100%, var(--aurora-2), transparent 60%); }
.cta-band h2 { font-size: var(--fs-800); margin-bottom: var(--sp-3); }
.cta-band p { color: var(--muted); font-size: var(--fs-500); max-width: 52ch; margin: 0 auto var(--sp-5); }

/* --------------------------------------------------------------- Pricing -- */
.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); max-width: 900px; margin-inline: auto; }
@media (max-width: 720px) { .pricing-grid { grid-template-columns: 1fr; } }
.price-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-7) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); transition: transform var(--t-med) var(--ease), border-color var(--t-med); }
.price-card:hover { transform: translateY(-4px); }
.price-card.featured { border-color: color-mix(in srgb, var(--brand) 45%, transparent); box-shadow: var(--glow-brand); background: var(--surface-2); }
.price-card .ribbon { position: absolute; inset-block-start: -13px; inset-inline-start: 50%; transform: translateX(-50%); background: var(--grad-brand); color: var(--brand-ink); font-weight: 700; font-size: var(--fs-300); padding: .35rem .9rem; border-radius: var(--r-pill); white-space: nowrap; }
html[dir="rtl"] .price-card .ribbon { transform: translateX(50%); }
.price-card .plan-name { font-size: var(--fs-600); }
.price-card .plan-tag { color: var(--muted); font-size: var(--fs-400); }
.price-card .price { display: flex; align-items: baseline; gap: .4rem; font-family: var(--font-display); }
.price-card .price .amount { font-size: var(--fs-900); color: var(--text-strong); line-height: 1; }
.price-card .price .per { color: var(--muted); font-size: var(--fs-400); }
.price-card .feature-list { margin-block: var(--sp-3); }
.price-card .btn-row { margin-top: auto; flex-direction: column; }

/* بطاقات باقات الخدمات (تبدأ من) */
.pkg-card { display: flex; flex-direction: column; position: relative; }
.pkg-card.is-featured { border-color: color-mix(in srgb, var(--brand) 45%, transparent); box-shadow: var(--glow-brand); }
.pkg-ribbon { position: absolute; inset-block-start: -11px; inset-inline-end: var(--sp-4); background: var(--grad-brand);
  color: var(--brand-ink); font-weight: 700; font-size: var(--fs-300); padding: .28rem .8rem; border-radius: var(--r-pill); white-space: nowrap; }
.pkg-price { margin: .35rem 0 .2rem; font-family: var(--font-display); }
.pkg-price .pkg-from { color: var(--muted); font-size: var(--fs-300); }
.pkg-price strong { font-size: var(--fs-700); color: var(--text-strong); }
.pkg-card > .feature-list { flex: 1 0 auto; }
.pkg-card > .btn { margin-top: auto; }

/* تخطيط ٤ باقات سوادي POS */
.pricing-grid-4 { grid-template-columns: repeat(4, 1fr); max-width: var(--container); gap: var(--sp-4); }
.pricing-grid-4 .price-card { padding: var(--sp-6) var(--sp-5); gap: var(--sp-3); }
.pricing-grid-4 .price-card .price .amount { font-size: var(--fs-800); }
@media (max-width: 980px) { .pricing-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pricing-grid-4 { grid-template-columns: 1fr; } }

/* شارة مرحلة الزكاة على بطاقة الباقة */
.plan-phase { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; padding: .22rem .6rem;
  border-radius: var(--r-pill); font-size: var(--fs-300); font-weight: 600; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.plan-phase svg { width: 1em; height: 1em; }

/* جدول مقارنة الباقات */
.table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--fs-400); min-width: 460px; }
.compare-table th, .compare-table td { padding: .7rem 1rem; text-align: start; border-bottom: 1px solid var(--line); }
.compare-table thead th { color: var(--muted); font-weight: 600; font-size: var(--fs-300); }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table tbody tr.is-featured { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.compare-table tbody td b { color: var(--text-strong); }

/* ===================== Tech stack (مصنّف) ===================== */
.tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.tech-group { padding: var(--sp-5); }
.tech-group-title { font-size: var(--fs-400); color: var(--muted); margin-bottom: var(--sp-3); font-weight: 600; }
.tech-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.tech-chip { padding: .4rem .85rem; border-radius: var(--r-pill); font-size: var(--fs-300); font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.tech-chip:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }

/* التقنيات المختصرة: شريط مخرجات + قسم أدوات قابل للطي */
.tech-outcomes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-6); }
.tech-outcome {
  text-align: center; padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  transition: transform var(--t-med) var(--ease), border-color var(--t-med);
}
.tech-outcome:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.tech-outcome-icon {
  display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: var(--sp-3);
  border-radius: var(--r-sm); color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
}
.tech-outcome b { display: block; color: var(--text-strong); font-size: var(--fs-500); margin-bottom: .2rem; }
.tech-outcome small { color: var(--muted); font-size: var(--fs-300); }
@media (max-width: 780px) { .tech-outcomes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .tech-outcomes { grid-template-columns: 1fr; } }
.tech-details { max-width: 920px; margin: var(--sp-6) auto 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.tech-details > summary {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: var(--sp-4); cursor: pointer; color: var(--muted); font-weight: 600; font-size: var(--fs-300);
  list-style: none; transition: color var(--t-fast), background var(--t-fast);
}
.tech-details > summary::-webkit-details-marker { display: none; }
.tech-details > summary::marker { content: ""; }
.tech-details > summary:hover { color: var(--brand); background: var(--surface-2); }
.tech-details > summary svg { color: var(--brand); }
.tech-details[open] > summary { border-bottom: 1px solid var(--line); }
.tech-details .tech-grid { padding: var(--sp-5); }

/* ===================== إضاءة متتبّعة للماوس على البطاقات (spotlight) ===================== */
.card, .project-card, .price-card, .pkg-card { position: relative; }
.card::after, .project-card::after, .price-card::after, .pkg-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%);
  opacity: 0; transition: opacity .35s var(--ease);
}
@media (hover: hover) {
  .card:hover::after, .project-card:hover::after, .price-card:hover::after, .pkg-card:hover::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .card::after, .project-card::after, .price-card::after, .pkg-card::after { display: none; } }

/* ===================== Bento grid — مشاريع مختارة ===================== */
.bento-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-4); grid-auto-rows: 240px; }
.bento-grid > *:nth-child(1) { grid-column: span 4; }
.bento-grid > *:nth-child(2) { grid-column: span 2; }
.bento-grid > *:nth-child(3) { grid-column: span 2; }
.bento-grid > *:nth-child(4) { grid-column: span 4; }
.bento-grid > *:nth-child(5) { grid-column: span 3; }
.bento-grid > *:nth-child(6) { grid-column: span 3; }
.bento-card { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); display: block; background: var(--surface-solid); }
.bento-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s var(--ease-out); }
.bento-card:hover img { transform: scale(1.06); }
.bento-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem; padding: var(--sp-5);
  background: linear-gradient(0deg, rgba(4,8,15,.92) 0%, rgba(4,8,15,.5) 42%, rgba(4,8,15,0) 80%); }
.bento-overlay h3 { color: #fff; font-size: var(--fs-500); line-height: var(--lh-snug); }
.bento-overlay p { color: rgba(255,255,255,.78); font-size: var(--fs-300); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bento-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.bento-tag { font-size: var(--fs-300); padding: .18rem .6rem; border-radius: var(--r-pill); background: rgba(255,255,255,.16); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bento-cta { color: var(--brand); font-size: var(--fs-300); font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; margin-top: .25rem; }
.bento-cta svg { width: 1em; height: 1em; }
/* قسم "وش تستلم؟" — Deliverables */
.deliver-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-6); }
.deliver-item {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: var(--sp-4); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
  transition: transform var(--t-med) var(--ease), border-color var(--t-med), background var(--t-med);
}
.deliver-item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); background: var(--surface-2); }
.deliver-icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r-sm); color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  transition: transform var(--t-med) var(--ease-out), background var(--t-med);
}
.deliver-item:hover .deliver-icon { transform: scale(1.08) rotate(-4deg); background: color-mix(in srgb, var(--brand) 20%, transparent); }
.deliver-txt b { display: block; color: var(--text-strong); font-size: var(--fs-400); margin-bottom: .15rem; }
.deliver-txt small { color: var(--muted); font-size: var(--fs-300); line-height: 1.45; }
@media (max-width: 900px) { .deliver-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .deliver-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .deliver-item:hover, .deliver-item:hover .deliver-icon { transform: none; } }

/* سطر النتيجة — إثبات فوري يظهر دائمًا على البطاقة */
.bento-result {
  display: flex; align-items: flex-start; gap: .4rem;
  margin-top: .45rem;
  color: #fff; font-size: var(--fs-300); font-weight: 600; line-height: 1.35;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.bento-result svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--brand); }
@media (max-width: 900px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 215px; }
  .bento-grid > * { grid-column: span 1 !important; }
}
@media (max-width: 560px) { .bento-grid { grid-template-columns: 1fr; grid-auto-rows: 230px; } }
/* على الجوال: نكتفي بالوسوم + العنوان + النتيجة + الزر (الملخّص في صفحة المشروع) */
@media (max-width: 700px) { .bento-reveal p { display: none; } }
@media (prefers-reduced-motion: reduce) { .bento-card:hover img { transform: none; } }

/* وسوم على بطاقات معرض الأعمال */
.proj-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.proj-tag { font-size: var(--fs-300); padding: .18rem .6rem; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }

/* ===================== شاشة التحميل (Loader) ===================== */
#loader { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: grid; place-items: center; }
#loader.hide { opacity: 0; visibility: hidden; transform: scale(1.05); transition: opacity .55s var(--ease), transform .55s var(--ease), visibility .55s; }
.loader-inner { display: flex; align-items: center; gap: .8rem; }
.loader-logo { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: var(--grad-brand); box-shadow: var(--glow-brand); }
.loader-logo svg { width: 28px; height: 28px; }
.loader-s { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw-s 1.05s var(--ease) forwards; }
@keyframes draw-s { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .loader-s { animation: none; stroke-dashoffset: 0; } }
.loader-text { font-family: var(--font-mono); letter-spacing: .18em; font-size: var(--fs-400); color: var(--muted); }
.loader-cursor { color: var(--brand); animation: blink 1s steps(1) infinite; margin-inline-start: .15rem; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #loader { display: none; } .loader-cursor { animation: none; } }

/* ===================== Dock عائم زجاجي ===================== */
.dock { position: fixed; inset-block-end: 1.4rem; inset-inline: 0; margin-inline: auto; width: max-content; z-index: var(--z-menu);
  display: flex; align-items: center; gap: .3rem; padding: .45rem; border-radius: var(--r-pill);
  background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); }
.dock-btn { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: var(--text); border: 0; background: transparent; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.dock-btn:hover { background: var(--surface-2); color: var(--brand); transform: translateY(-3px) scale(1.06); }
.dock-btn svg { width: 22px; height: 22px; }
/* دوك ذكي: يختفي عند النزول ويرجع عند التوقف/الصعود، ولا يغطي الفوتر */
.dock { transition: transform .4s var(--ease), opacity .4s var(--ease); will-change: transform; }
.dock.dock-hidden { transform: translateY(200%); opacity: 0; pointer-events: none; }
@media (max-width: 900px) { .dock { display: none; } }
@media (min-width: 901px) { .wa-float { display: none !important; } } /* الـ Dock يحل محله على سطح المكتب */
@media (prefers-reduced-motion: reduce) { .dock-btn:hover { transform: none; } }

/* ----------------------------------------------------------------- FAQ -- */
.faq { max-width: var(--container-narrow); margin-inline: auto; display: grid; gap: var(--sp-3); }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; transition: border-color var(--t-fast); }
.faq-item[open] { border-color: var(--line-strong); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: var(--sp-4) var(--sp-5); cursor: pointer; font-weight: 600; color: var(--text-strong); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { transition: transform var(--t-fast); flex: 0 0 auto; color: var(--brand); }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item .faq-body { padding: 0 var(--sp-5) var(--sp-5); color: var(--muted); }

/* ---------------------------------------------------------------- Forms -- */
.form { display: grid; gap: var(--sp-4); }
.field { display: grid; gap: .45rem; }
.field label { font-weight: 600; font-size: var(--fs-400); }
.field .req { color: var(--brand); }
.input, .textarea, .select {
  width: 100%; padding: .85rem 1rem; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.select {
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  cursor: pointer;
  padding-inline-end: 2.8rem;
  background-color: var(--surface);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    right 1.18rem center,
    right .86rem center;
  background-size: .38rem .38rem, .38rem .38rem;
  background-repeat: no-repeat;
}
html[dir="rtl"] .select {
  padding-inline: 1rem 2.8rem;
  background-position:
    left .86rem center,
    left 1.18rem center;
}
.select option {
  background-color: #111827;
  color: #f8fafc;
}
.select option:checked {
  background-color: #19e59b;
  color: #04130f;
}
.select option:disabled,
.select option[value=""] {
  color: #94a3b8;
}
[data-theme="light"] .select {
  color-scheme: light;
}
[data-theme="light"] .select option {
  background-color: #ffffff;
  color: #172033;
}
[data-theme="light"] .select option:checked {
  background-color: #19e59b;
  color: #04130f;
}
[data-theme="light"] .select option:disabled,
[data-theme="light"] .select option[value=""] {
  color: #64748b;
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--brand); }
.input:focus, .textarea:focus { background: var(--surface-2); }
.select:focus { background-color: var(--surface-2); }
.textarea { min-height: 140px; resize: vertical; }
.field-error { color: var(--danger); font-size: var(--fs-300); min-height: 1em; }
.field.invalid .input, .field.invalid .textarea, .field.invalid .select { border-color: var(--danger); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
/* مصيدة السبام: مخفية بصريًا دون التسبّب في تمرير أفقي (visually-hidden) */
.honeypot-field { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; pointer-events: none; }
.form-note { font-size: var(--fs-300); color: var(--faint); }
.form-status { padding: .9rem 1.1rem; border-radius: var(--r-sm); font-weight: 600; display: none; }
.form-status.show { display: block; }
.form-status.ok { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); }
.form-status.info { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent); }
.form-status.err { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }

/* ------------------------------------------------------- Contact layout -- */
.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--sp-7); align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); }
.brief-form { gap: var(--sp-5); }
.brief-head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.brief-head .section-title { margin: 0; font-size: var(--fs-700); }
.brief-head p { color: var(--muted); max-width: 62ch; }
.brief-block {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background:
    radial-gradient(420px circle at 100% 0%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 52%),
    color-mix(in srgb, var(--surface-2) 52%, transparent);
}
.brief-block h3 { font-size: var(--fs-600); padding-inline-end: 3.3rem; }
.brief-step {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-end: var(--sp-4);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  font-family: var(--font-display);
  font-size: var(--fs-300);
}
.brief-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}
.brief-chip { position: relative; cursor: pointer; }
.brief-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.brief-chip span {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: .7rem .8rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface);
  font-size: var(--fs-300);
  font-weight: 700;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.brief-chip:hover span {
  color: var(--text-strong);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.brief-chip input:checked + span {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  background: color-mix(in srgb, var(--brand) 11%, var(--surface));
  box-shadow: 0 12px 32px color-mix(in srgb, var(--brand) 10%, transparent);
}
.brief-preview {
  display: grid;
  gap: .65rem;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px dashed var(--line-strong);
  background: color-mix(in srgb, var(--bg) 38%, transparent);
}
.brief-preview b { color: var(--text-strong); }
.brief-preview pre {
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--muted);
  font: inherit;
  line-height: 1.85;
  margin: 0;
}
@media (max-width: 980px) {
  .brief-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .brief-block { padding: var(--sp-4); }
  .brief-block h3 { padding-inline-end: 3rem; }
  .brief-checks { grid-template-columns: 1fr; }
  .brief-chip span { justify-content: flex-start; text-align: start; }
}
.contact-method { display: flex; gap: .9rem; align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.contact-method:last-child { border-bottom: 0; }
.contact-method .ic { width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-2); color: var(--brand); }
.contact-method b { display: block; color: var(--text-strong); }
.contact-method span, .contact-method a { color: var(--muted); }
.map-embed { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); margin-top: var(--sp-5); aspect-ratio: 16/9; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------ Portfolio -- */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: var(--sp-6); }
.chip { padding: .55rem 1.1rem; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--muted); font-weight: 600; font-size: var(--fs-300); transition: all var(--t-fast); }
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip.is-active { background: var(--grad-brand); color: var(--brand-ink); border-color: transparent; }

.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.project-grid.single { grid-template-columns: minmax(0, 860px); justify-content: center; }
.project-grid.two { grid-template-columns: repeat(2, minmax(0, 560px)); justify-content: center; }
.project-grid.four { grid-template-columns: repeat(2, minmax(0, 560px)); justify-content: center; }
@media (max-width: 980px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .project-grid, .project-grid.two, .project-grid.four { grid-template-columns: 1fr; } }
.project-card { display: block; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); transition: transform var(--t-med) var(--ease), border-color var(--t-med); }
.project-card:hover { transform: translateY(-5px); border-color: var(--line-strong); }
.project-card.hide { display: none; }
.project-thumb { aspect-ratio: 16/10; position: relative; display: grid; place-items: center; background: linear-gradient(135deg, var(--surface-solid), var(--surface-2)); color: var(--faint); overflow: hidden; }
.project-card-wide .project-thumb { aspect-ratio: 16/8; }
.project-thumb img { width: 100%; height: 100%; object-fit: contain; padding: .75rem; transition: transform .65s var(--ease-out); }
.project-card:hover .project-thumb img { transform: scale(1.045); }
.project-thumb .ph-mark { font-family: var(--font-display); font-size: var(--fs-700); opacity: .35; }
.project-card .body { padding: var(--sp-5); }
.project-card .tag { font-size: var(--fs-300); color: var(--brand); font-weight: 600; }
.project-card h3 { font-size: var(--fs-600); margin: .3rem 0; }
.project-card p { color: var(--muted); font-size: var(--fs-400); }

.featured-work {
  overflow: clip;
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--brand) 5%, transparent) 45%, transparent);
}
.featured-project-grid { align-items: stretch; }
.featured-project-card {
  min-height: 100%;
  box-shadow: var(--shadow-sm);
}
.featured-project-card .project-thumb {
  aspect-ratio: 16 / 9.5;
  background:
    radial-gradient(70% 90% at 50% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%),
    linear-gradient(135deg, var(--surface-solid), var(--surface-2));
}
.featured-project-card .body { display: grid; gap: .25rem; }
.featured-project-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===================== عرض سينمائي — Showcase (zoom) ===================== */
.showcase { overflow: clip; }
.showcase-stage { display: grid; place-items: center; padding-block: clamp(1rem, 3vw, 2.5rem); }
.showcase-frame {
  margin: 0; width: min(100%, 1080px); border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); background: var(--surface-solid);
  transform-origin: center center; will-change: transform; transform: scale(.92);
}
.showcase-bar { display: flex; gap: .4rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.showcase-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); }
.showcase-bar i:nth-child(1){ background:#ff6058; } .showcase-bar i:nth-child(2){ background:#ffbd2e; } .showcase-bar i:nth-child(3){ background:#28c840; }
.showcase-frame img { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .showcase-frame { transform: none; } }

/* ===================== كيف أشتغل — Process ===================== */
.process-track { margin-top: var(--sp-6); }
.process-progress-wrap { height: 4px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; margin-bottom: var(--sp-6); }
.process-progress { display: block; height: 100%; width: 100%; background: var(--grad-brand); transform: scaleX(0); transform-origin: left center; }
html[dir="rtl"] .process-progress { transform-origin: right center; }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.process-step {
  position: relative; padding: var(--sp-5); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface);
  opacity: .38; transform: translateY(14px) scale(.985);
  transition: opacity .55s var(--ease), transform .55s var(--ease-out), border-color .5s, box-shadow .5s, background .5s;
}
.process-step.is-active {
  opacity: 1; transform: translateY(0) scale(1);
  border-color: color-mix(in srgb, var(--brand) 42%, transparent);
  box-shadow: 0 18px 44px -22px color-mix(in srgb, var(--brand) 40%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 7%, var(--surface)), var(--surface));
}
.process-step .step-num { font-family: var(--font-display); font-size: var(--fs-700); line-height: 1; color: color-mix(in srgb, var(--brand) 50%, var(--muted)); transition: color .4s var(--ease); }
.process-step.is-active .step-num { color: var(--brand); }
.process-step .step-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-top: var(--sp-3); border-radius: var(--r-sm); background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); transition: transform .5s var(--ease-out), background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease); }
.process-step.is-active .step-icon {
  transform: scale(1.08) translateY(-2px);
  background: var(--brand); color: #04150e;
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--brand) 55%, transparent);
}
.process-step h3 { font-size: var(--fs-500); margin: var(--sp-3) 0 .3rem; }
.process-step p { color: var(--muted); font-size: var(--fs-400); }
@media (max-width: 860px) { .process-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .process-steps { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .process-step { opacity: 1; transform: none; } }

/* ============================================================
   PROCESS STAGE MOCKS — لوحة معاينة مصغّرة تتغيّر مع كل مرحلة
   ============================================================ */
.process-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 1024px) {
  .process-grid {
    grid-template-columns: minmax(340px, 420px) 1fr;
    gap: var(--sp-6);
    align-items: start;
  }
  .process-grid .process-steps { grid-template-columns: 1fr; }
}
.stage-mocks {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 264px;
  margin-inline: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand) 5%, var(--surface-solid)),
    var(--surface-solid));
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.stage-mocks::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(80% 60% at 85% 0%,
    color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%);
}
@media (max-width: 1023px) {
  .stage-mocks { order: -1; margin-bottom: var(--sp-5); }
}
@media (min-width: 1024px) {
  .stage-mocks { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
}
.mock-bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.mock-dot:nth-child(1) { background: var(--danger); }
.mock-dot:nth-child(2) { background: var(--gold); }
.mock-dot:nth-child(3) { background: var(--brand); }
.mock-tag {
  margin-inline-start: auto; letter-spacing: .06em; color: var(--muted);
  font: 600 10px/1 ui-monospace, SFMono-Regular, monospace;
}
.mock-tab {
  font: 600 10px/1 ui-monospace, SFMono-Regular, monospace; color: var(--muted);
  padding: 4px 8px; border-radius: var(--r-sm);
}
.mock-tab.is-on { color: var(--text-strong); background: var(--surface-2); }
.mock-bar--tabs .mock-tab:first-of-type { margin-inline-start: 6px; }
.mock-body {
  display: block; position: relative; box-sizing: border-box;
  height: calc(100% - 32px); padding: 14px 16px;
}
.stage-mock {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transform: translateY(10px) scale(.99);
  transition: opacity var(--t-med) var(--ease),
              transform var(--t-slow) var(--ease-out),
              visibility 0s linear var(--t-med);
  pointer-events: none;
}
.stage-mock.is-shown {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--t-med) var(--ease),
              transform var(--t-slow) var(--ease-out),
              visibility 0s;
  z-index: 3; pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .stage-mock { transition: opacity .001s, visibility 0s; transform: none !important; }
  .stage-mock.is-shown { transform: none !important; }
  .stage-mock *, .stage-mock.is-shown * { animation: none !important; }
  .mk-check, .mk-blk, .mk-cl, .mk-sub, .mk-kpi { opacity: 1 !important; transform: none !important; }
  .mk-box { background: var(--brand) !important; border-color: var(--brand) !important; }
  .mk-box svg { stroke-dashoffset: 0 !important; }
  .mk-poly { stroke-dashoffset: 0 !important; }
  .mk-area { opacity: 1 !important; }
  .mk-cur { animation: none !important; }
  .mk-pulse { animation: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent) !important; }
}

/* DISCOVERY — قائمة متطلبات تُعلَّم تباعًا */
.mk-check{display:flex;align-items:center;gap:10px;padding:9px 11px;margin-bottom:8px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);opacity:0;transform:translateY(8px)}
.stage-mock[data-stage="discovery"].is-shown .mk-check{animation:mkRise .5s var(--ease-out) both}
.stage-mock[data-stage="discovery"].is-shown .mk-check:nth-child(1){animation-delay:.10s}
.stage-mock[data-stage="discovery"].is-shown .mk-check:nth-child(2){animation-delay:.38s}
.stage-mock[data-stage="discovery"].is-shown .mk-check:nth-child(3){animation-delay:.66s}
.stage-mock[data-stage="discovery"].is-shown .mk-check:nth-child(4){animation-delay:.94s}
@keyframes mkRise{to{opacity:1;transform:none}}
.mk-box{flex:none;width:19px;height:19px;border-radius:6px;border:1.5px solid var(--line-strong);display:grid;place-items:center;background:transparent}
.stage-mock[data-stage="discovery"].is-shown .mk-check:nth-child(1) .mk-box{animation:mkFill 0s .42s forwards}
.stage-mock[data-stage="discovery"].is-shown .mk-check:nth-child(2) .mk-box{animation:mkFill 0s .70s forwards}
.stage-mock[data-stage="discovery"].is-shown .mk-check:nth-child(3) .mk-box{animation:mkFill 0s .98s forwards}
.stage-mock[data-stage="discovery"].is-shown .mk-check:nth-child(4) .mk-box{animation:mkFill 0s 1.26s forwards}
@keyframes mkFill{to{background:var(--brand);border-color:var(--brand)}}
.mk-box svg{width:12px;height:12px;fill:none;stroke:var(--brand-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16}
.stage-mock[data-stage="discovery"].is-shown .mk-check:nth-child(1) .mk-box svg{animation:mkTick .3s .42s forwards}
.stage-mock[data-stage="discovery"].is-shown .mk-check:nth-child(2) .mk-box svg{animation:mkTick .3s .70s forwards}
.stage-mock[data-stage="discovery"].is-shown .mk-check:nth-child(3) .mk-box svg{animation:mkTick .3s .98s forwards}
.stage-mock[data-stage="discovery"].is-shown .mk-check:nth-child(4) .mk-box svg{animation:mkTick .3s 1.26s forwards}
@keyframes mkTick{to{stroke-dashoffset:0}}
.mk-bar-line{height:8px;border-radius:4px;background:var(--line-strong)}
.mk-bar-line.s{width:38%}.mk-bar-line.m{width:60%}.mk-bar-line.l{width:78%}
.mk-sub{margin-inline-start:auto;color:var(--brand);font:600 10px/1 ui-monospace,SFMono-Regular,monospace;opacity:0}
.stage-mock[data-stage="discovery"].is-shown .mk-check:nth-child(1) .mk-sub{animation:mkPop .3s .42s forwards}
.stage-mock[data-stage="discovery"].is-shown .mk-check:nth-child(2) .mk-sub{animation:mkPop .3s .70s forwards}
.stage-mock[data-stage="discovery"].is-shown .mk-check:nth-child(3) .mk-sub{animation:mkPop .3s .98s forwards}
.stage-mock[data-stage="discovery"].is-shown .mk-check:nth-child(4) .mk-sub{animation:mkPop .3s 1.26s forwards}
@keyframes mkPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* DESIGN — كتل تتجمّع لتكوين تخطيط */
.mk-wire{display:grid;grid-template-columns:1fr 1.6fr;grid-template-rows:34px 1fr;gap:9px;height:100%}
.mk-blk{border-radius:8px;background:var(--surface-2);border:1px solid var(--line);opacity:0;transform:scale(.9)}
.stage-mock[data-stage="design"].is-shown .mk-blk{animation:mkAssemble .5s var(--ease-out) both}
.mk-blk.head{grid-column:1 / 3;display:flex;align-items:center;gap:7px;padding:0 10px}
.mk-blk.main{background:linear-gradient(135deg,color-mix(in srgb,var(--violet) 20%,var(--surface-2)),var(--surface-2))}
.stage-mock[data-stage="design"].is-shown .mk-blk.head{animation-delay:.12s}
.stage-mock[data-stage="design"].is-shown .mk-blk.side{animation-delay:.38s}
.stage-mock[data-stage="design"].is-shown .mk-blk.main{animation-delay:.62s}
@keyframes mkAssemble{to{opacity:1;transform:none}}
.mk-swatch{width:15px;height:15px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.mk-swatch.a{background:var(--brand)}.mk-swatch.b{background:var(--violet)}.mk-swatch.c{background:var(--gold)}
.mk-hbar{margin-inline-start:auto;width:44%;height:7px;border-radius:4px;background:var(--line-strong)}
.mk-blk.side{padding-top:2px}
.mk-side-row{height:7px;border-radius:4px;background:var(--line-strong);margin:0 10px 8px}
.mk-side-row:first-child{margin-top:12px}
.mk-main-in{display:flex;flex-direction:column;gap:8px;height:100%;padding:12px;box-sizing:border-box}
.mk-mrow{height:8px;border-radius:4px;background:color-mix(in srgb,var(--violet) 35%,var(--line-strong))}
.mk-mrow.w1{width:70%}.mk-mrow.w2{width:90%}
.mk-cta{margin-top:auto;width:52%;height:20px;border-radius:6px;background:var(--brand)}

/* BUILD — كود يُكتب سطرًا سطرًا + مؤشّر يومض. dir=ltr للكود */
.mk-code{direction:ltr;text-align:left;display:flex;flex-direction:column;height:100%;justify-content:center;gap:1px;font:12px/1.7 ui-monospace,SFMono-Regular,monospace}
.mk-cl{white-space:nowrap;overflow:hidden;opacity:0}
.stage-mock[data-stage="build"].is-shown .mk-cl{animation:mkType .01s forwards}
.stage-mock[data-stage="build"].is-shown .mk-cl:nth-child(1){animation-delay:.15s}
.stage-mock[data-stage="build"].is-shown .mk-cl:nth-child(2){animation-delay:.48s}
.stage-mock[data-stage="build"].is-shown .mk-cl:nth-child(3){animation-delay:.81s}
.stage-mock[data-stage="build"].is-shown .mk-cl:nth-child(4){animation-delay:1.14s}
.stage-mock[data-stage="build"].is-shown .mk-cl:nth-child(5){animation-delay:1.47s}
@keyframes mkType{to{opacity:1}}
.tk{color:var(--muted)}.tk-key{color:var(--violet)}.tk-fn{color:var(--brand)}.tk-str{color:var(--gold)}.tk-var{color:var(--brand-2)}.tk-num{color:var(--gold)}
.mk-gutter{display:inline-block;width:14px;margin-right:12px;color:var(--line-strong);text-align:right;user-select:none}
.mk-cur{display:inline-block;width:7px;height:13px;vertical-align:-2px;margin-inline-start:2px;background:var(--brand)}
.stage-mock[data-stage="build"].is-shown .mk-cur{animation:mkBlink 1s steps(1) infinite 1.6s}
@keyframes mkBlink{50%{opacity:0}}

/* LAUNCH — مؤشرات تظهر، خط بياني يُرسم، نبضة LIVE */
.mk-dash{display:flex;flex-direction:column;height:100%;gap:12px}
.mk-badge{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;color:var(--brand);padding:4px 9px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--brand) 12%,transparent);border:1px solid color-mix(in srgb,var(--brand) 30%,transparent);font:700 10px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.06em}
.mk-pulse{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:mkPulse 1.8s var(--ease) infinite}
@keyframes mkPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent)}50%{box-shadow:0 0 0 5px transparent}}
.mk-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:none}
.mk-kpi{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding:8px 9px;display:grid;gap:3px;opacity:0;transform:translateY(8px)}
.stage-mock[data-stage="launch"].is-shown .mk-kpi{animation:mkRise .45s var(--ease-out) both}
.stage-mock[data-stage="launch"].is-shown .mk-kpi:nth-child(1){animation-delay:.10s}
.stage-mock[data-stage="launch"].is-shown .mk-kpi:nth-child(2){animation-delay:.20s}
.stage-mock[data-stage="launch"].is-shown .mk-kpi:nth-child(3){animation-delay:.30s}
.mk-kpi-l{font-size:10px;color:var(--muted)}
.mk-kpi-v{font:800 17px/1 var(--font-display);color:var(--text-strong);font-variant-numeric:tabular-nums}
.mk-kpi-d{font:700 10px/1 ui-monospace,SFMono-Regular,monospace;color:var(--brand)}
.mk-chart{position:relative;flex:1 1 auto;min-height:0;border-radius:10px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.mk-chart svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mk-poly{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420}
.stage-mock[data-stage="launch"].is-shown .mk-poly{animation:mkDraw 1.3s .40s var(--ease-out) forwards}
@keyframes mkDraw{to{stroke-dashoffset:0}}
.mk-area{fill:color-mix(in srgb,var(--brand) 14%,transparent);opacity:0}
.stage-mock[data-stage="launch"].is-shown .mk-area{animation:mkFade .6s 1.30s forwards}
@keyframes mkFade{to{opacity:1}}

/* ===================== CTA قوي — Mega CTA ===================== */
.cta-mega { position: relative; overflow: clip; }
.cta-mega .cta-aurora {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .9; border-radius: inherit;
  background:
    radial-gradient(50% 65% at 18% 18%, var(--aurora-1), transparent 70%),
    radial-gradient(45% 60% at 85% 80%, var(--aurora-2), transparent 70%);
}
.cta-mega > * { position: relative; z-index: 1; }

/* شارة "نموذج تصميم" — تمييز صادق للنماذج عن الأعمال المنفّذة (لمسة بنفسجية) */
.stage-badge { position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem; z-index: 2;
  padding: .26rem .7rem; border-radius: var(--r-pill); font-size: var(--fs-300); font-weight: 600;
  background: var(--surface-solid); border: 1px solid var(--line-strong); color: var(--violet); box-shadow: var(--shadow-sm); }
.stage-pill { color: var(--violet); }

/* دراسة حالة — Case study */
.case-hero { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-7); }
.case-meta { display: flex; flex-wrap: wrap; gap: var(--sp-5); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.case-meta div b { display: block; color: var(--faint); font-size: var(--fs-300); font-weight: 600; }
.case-meta div span { color: var(--text-strong); font-weight: 600; }
.case-block { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.case-block h2 { font-size: var(--fs-700); }
/* معرض لقطات المشروع: الأولى والأخيرة بعرض كامل، والباقي ثنتان في كل صف */
.case-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
.case-cell { margin: 0; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface-solid); box-shadow: var(--shadow-sm); aspect-ratio: 16 / 10; }
.case-cell.is-full { grid-column: 1 / -1; aspect-ratio: 16 / 7.5; }
.case-cell img { display: block; width: 100%; height: 100%; object-fit: contain; padding: .65rem; transition: transform .5s var(--ease-out); }
.case-cell:hover img { transform: scale(1.03); }
/* لقطات الجوال (عمودية): تصغير وتوسيط على خلفية داكنة */
.case-cell.is-mobile { aspect-ratio: auto; display: grid; place-items: center; background: #06111d; padding: var(--sp-4); }
.case-cell.is-mobile img { width: auto; height: auto; max-width: 100%; max-height: 560px; padding: 0; border-radius: var(--r-sm); }
.case-cell.is-empty { display: grid; place-items: center; color: var(--faint); background: var(--surface); }
@media (max-width: 720px) {
  .case-gallery { grid-template-columns: 1fr; }
  .case-cell, .case-cell.is-full { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------- Footer -- */
.site-footer { border-top: 1px solid var(--line); margin-top: var(--sp-9); background: var(--bg-2); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--sp-6); padding-block: var(--sp-8) var(--sp-6); }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-tagline { color: var(--muted); margin: var(--sp-4) 0; max-width: 40ch; }
.footer-col h3 { font-size: var(--fs-400); color: var(--text-strong); margin-bottom: var(--sp-3); }
.footer-col h3.mt { margin-top: var(--sp-5); }
.footer-col ul { display: grid; gap: .55rem; }
.footer-col a { color: var(--muted); transition: color var(--t-fast); }
.footer-col a:hover { color: var(--brand); }
.contact-list { display: grid; gap: .55rem; margin-bottom: var(--sp-4); color: var(--muted); }
.social-row { display: flex; gap: .5rem; }
.social-btn { width: 38px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); transition: all var(--t-fast); }
.social-btn:hover { color: var(--brand); border-color: var(--brand); transform: translateY(-2px); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); padding-block: var(--sp-5); border-top: 1px solid var(--line); color: var(--faint); font-size: var(--fs-300); }

/* زر واتساب العائم */
.wa-float { position: fixed; inset-block-end: 1.4rem; inset-inline-end: 1.4rem; z-index: var(--z-menu); width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 14px 36px rgba(37,211,102,.45); transition: transform var(--t-fast); }
.wa-float:hover { transform: scale(1.08); }
/* إخفاء زر واتساب العائم عند فتح قائمة الجوال حتى لا يحجب أزرارها */
body.menu-open .wa-float { display: none; }

/* قلب الأسهم الاتجاهية في الوضع RTL (لا يشمل أسهم الأكورديون .chev) */
html[dir="rtl"] .dir-icon { transform: scaleX(-1); }
.faq-item .chev .dir-icon { transform: none; }

/* -------------------------------------------------------------- Page head -- */
.page-hero { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); text-align: center; position: relative; overflow: clip; }
.page-hero h1 { font-size: var(--fs-900); margin: var(--sp-3) 0; }
.page-hero p { color: var(--muted); font-size: var(--fs-500); max-width: 60ch; margin-inline: auto; }
.breadcrumb { color: var(--faint); font-size: var(--fs-300); margin-bottom: var(--sp-3); }
.breadcrumb a:hover { color: var(--brand); }

/* ------------------------------------------------------------ Utilities -- */
.text-center { text-align: center; }
.muted { color: var(--muted); }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); } .mt-7 { margin-top: var(--sp-7); }
.mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); }
.divider { height: 1px; background: var(--line); border: 0; margin-block: var(--sp-6); }
.tag-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-300); font-weight: 600; }
.lead-2col { columns: 2; column-gap: var(--sp-7); }
@media (max-width: 720px) { .lead-2col { columns: 1; } }
.prose { max-width: var(--container-narrow); margin-inline: auto; padding-inline: clamp(1.15rem, 5vw, 2rem); }
.prose h2 { font-size: var(--fs-700); margin: var(--sp-6) 0 var(--sp-3); }
.prose h3 { font-size: var(--fs-500); margin: var(--sp-5) 0 var(--sp-2); }
.prose p, .prose li { color: var(--muted); margin-bottom: var(--sp-3); font-size: var(--fs-400); line-height: var(--lh-body); }
.prose ul { list-style: disc; padding-inline-start: 1.3rem; display: grid; gap: .4rem; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------------- Motion -- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* تحوّل ناعم عند تبديل اللغة */
.lang-fading { opacity: 0; transition: opacity .2s ease; }

/* ===================== Layered motion additions ===================== */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: var(--bg);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: opacity .26s var(--ease), transform .42s var(--ease);
}
body.page-leaving::after {
  opacity: .96;
  transform: scaleY(1);
  transform-origin: top center;
}

/* دخول الصفحة — ظهور ناعم للمحتوى عند كل تحميل (الشقّ المكمّل لتأثير المغادرة) */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
main#main { animation: pageEnter .55s var(--ease-out) both; }
body.page-leaving main#main { animation: none; } /* لا نُعيد التحريك أثناء المغادرة */
@media (prefers-reduced-motion: reduce) { main#main { animation: none; } }

/* ===================== النسيج الرابط — Connective tissue ===================== */

/* 1) حبيبات فيلم خفيفة فوق كل الصفحة — عمق فوري بدون حركة */
.grain {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] .grain { opacity: .035; }

/* 2) خيط أخضر يربط الأقسام — يُرسم مع السكرول (motion.js يضبط أبعاده) */
main#main { position: relative; }
.page-spine {
  position: absolute; inset-inline-start: 50%; top: 0; height: 0;
  width: 1px; z-index: -1; pointer-events: none; opacity: 0;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.06) 8%, rgba(255,255,255,.06) 92%, transparent);
  transition: opacity .8s var(--ease);
}
.page-spine.is-ready { opacity: 1; }
.page-spine i {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--brand), var(--brand-2) 55%, var(--violet));
  transform: scaleY(0); transform-origin: top center;
  box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 45%, transparent);
}
@media (max-width: 1023px) { .page-spine { display: none; } }

/* 3) توهجات خلفية لكل قسم — تكسر الخلفية المسطحة */
.glow-spot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(var(--gw, 46%) var(--gh, 42%) at var(--gx, 82%) var(--gy, 8%), var(--gc), transparent 72%);
}
.glow-1 { --gx: 84%; --gy: 6%;  --gc: color-mix(in srgb, var(--brand) 8%, transparent); }
.glow-2 { --gx: 12%; --gy: 22%; --gc: color-mix(in srgb, var(--violet) 9%, transparent); }
.glow-3 { --gx: 80%; --gy: 60%; --gc: color-mix(in srgb, var(--brand-2) 8%, transparent); }

/* 3.5) مؤشر مخصص — نقطة + حلقة تتبع (سطح المكتب فقط) */
@media (hover: hover) and (pointer: fine) {
  body.has-cursor, body.has-cursor *:not(input):not(textarea):not(select) { cursor: none !important; }
  .cursor-dot, .cursor-ring {
    position: fixed; left: 0; top: 0; z-index: 99999; pointer-events: none;
    border-radius: 50%; opacity: 0; transition: opacity .35s var(--ease);
  }
  .cursor-dot { width: 6px; height: 6px; background: var(--brand); box-shadow: 0 0 10px color-mix(in srgb, var(--brand) 60%, transparent); }
  .cursor-ring {
    width: 34px; height: 34px; z-index: 99998;
    border: 1.5px solid color-mix(in srgb, var(--brand) 50%, transparent);
    transition: opacity .35s var(--ease), width .28s var(--ease), height .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
  }
  body.has-cursor .cursor-dot, body.has-cursor .cursor-ring { opacity: 1; }
  body.cursor-hot .cursor-ring {
    width: 54px; height: 54px;
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 9%, transparent);
  }
  .cursor-ring::after {
    content: attr(data-label);
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: calc(100% + 10px);
    min-width: max-content;
    padding: .35rem .62rem;
    border-radius: var(--r-pill);
    border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
    background: color-mix(in srgb, var(--surface-solid) 88%, transparent);
    color: var(--text-strong);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    transform: translateX(-50%) translateY(-4px) scale(.96);
    transition: opacity .2s var(--ease), transform .25s var(--ease-out);
    box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  body.cursor-labelled .cursor-ring {
    width: 72px; height: 72px;
    background: color-mix(in srgb, var(--brand) 13%, transparent);
  }
  body.cursor-labelled .cursor-ring::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) { .cursor-dot, .cursor-ring { display: none; } }

/* 4) أرقام أقسام تحريرية — إيقاع مجلة فاخرة */
.section-head[data-num] { position: relative; }
.section-head[data-num]::before {
  content: attr(data-num);
  position: absolute; left: 50%; transform: translateX(-50%);
  inset-block-start: -.72em;
  z-index: -1;
  font-family: var(--font-mono, ui-monospace), var(--font-display);
  font-size: clamp(4.2rem, 9vw, 7rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--brand) 34%, transparent);
  opacity: .65;
  letter-spacing: .04em;
  pointer-events: none;
  user-select: none;
}

/* Hero project stack */
.project-stack {
  position: relative;
  min-height: clamp(520px, 54vw, 660px);
  isolation: isolate;
  perspective: 1400px;
}
.project-stack::before {
  content: "";
  position: absolute;
  inset: 8% 2% 12%;
  z-index: -1;
  border-radius: 40%;
  background:
    radial-gradient(55% 55% at 52% 45%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
    radial-gradient(45% 45% at 70% 62%, color-mix(in srgb, var(--violet) 20%, transparent), transparent 68%);
  filter: blur(34px);
  opacity: .85;
}
.stack-eyebrow {
  position: absolute;
  inset-block-start: 2%;
  inset-inline-end: 6%;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .8rem;
  border-radius: var(--r-pill);
  background: var(--surface-solid);
  border: 1px solid var(--line-strong);
  color: var(--brand);
  font-size: var(--fs-300);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.stack-card {
  position: absolute;
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform-style: preserve-3d;
  transition: transform .75s var(--ease-out), border-color .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
  animation: stackFloat 7s ease-in-out infinite alternate;
}
.stack-card::after,
.bento-card::after,
.project-thumb::after {
  content: "";
  position: absolute;
  inset: -35% -70%;
  transform: translateX(-65%) rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  opacity: 0;
  transition: transform .8s var(--ease-out), opacity .3s var(--ease);
  pointer-events: none;
}
.stack-card:hover::after,
.bento-card:hover::after,
.project-card:hover .project-thumb::after {
  opacity: 1;
  transform: translateX(65%) rotate(18deg);
}
.stack-card picture,
.stack-card img {
  width: 100%;
  height: 100%;
}
.stack-card img {
  object-fit: cover;
  object-position: top center;
  padding: 0;
  transition: transform .75s var(--ease-out), filter .35s var(--ease);
}
.stack-card:hover {
  filter: saturate(1.06);
}
.stack-card:hover img { transform: scale(1.035); }
.stack-card-1 {
  inset-block-start: 6%;
  inset-inline-start: 8%;
  width: min(80%, 540px);
  z-index: 1;
  transform: rotateZ(-2deg) rotateY(-9deg) rotateX(2deg);
  animation-delay: -.4s;
}
.stack-card-2 {
  inset-block-start: 47%;
  inset-inline-start: -1%;
  width: min(55%, 396px);
  z-index: 2;
  transform: rotateZ(3.5deg) rotateY(-8deg) translateZ(60px);
  animation-delay: -2.2s;
}
.stack-card-3 {
  inset-block-start: 32%;
  inset-inline-end: 4%;
  width: min(30%, 200px);
  z-index: 3;
  transform: rotateZ(-4deg) rotateY(13deg) translateZ(100px);
  animation-delay: -1.1s;
}
.device-shell {
  position: relative;
  display: block;
  overflow: visible;
  transform-style: preserve-3d;
  border: 1px solid color-mix(in srgb, var(--line-strong) 78%, var(--brand));
  background:
    linear-gradient(145deg, rgba(255,255,255,.15), transparent 20%),
    linear-gradient(180deg, #182538, #07101c 62%, #030812);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 0 0 1px rgba(0,0,0,.5),
    0 30px 60px -18px rgba(0,0,0,.62),
    0 12px 24px -14px rgba(0,0,0,.55);
  transition: transform .5s var(--ease-out), box-shadow .4s var(--ease), filter .35s var(--ease);
  will-change: transform;
}
.stack-card:hover .device-shell {
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 0 0 1px color-mix(in srgb, var(--brand) 40%, rgba(0,0,0,.5)),
    0 38px 80px -20px rgba(0,0,0,.66),
    0 0 44px -8px color-mix(in srgb, var(--brand) 30%, transparent);
}
.stack-device-desktop .device-shell {
  aspect-ratio: 16 / 10.2;
  border-radius: 22px;
  padding: 10px;
}
.stack-device-tablet .device-shell {
  aspect-ratio: 16 / 10.4;
  border-radius: 24px;
  padding: 10px;
}
.stack-device-phone .device-shell {
  aspect-ratio: 9 / 18.8;
  border-radius: 32px;
  padding: 10px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), transparent 18%),
    linear-gradient(180deg, #162239, #070d18 60%, #030711);
}
.device-chrome {
  position: absolute;
  inset-inline: 11px;
  inset-block-start: 11px;
  z-index: 3;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 11px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 92%, #1b2a44),
    color-mix(in srgb, var(--bg) 82%, transparent));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.device-dots { display: flex; align-items: center; gap: 5px; flex: none; }
.device-chrome i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
}
.device-chrome i:nth-child(1) { background: #ff6058; }
.device-chrome i:nth-child(2) { background: #ffbd2e; }
.device-chrome i:nth-child(3) { background: #28c840; }
/* شريط عنوان المتصفّح — للأجهزة التي تعرض موقعًا حيًّا */
.device-address {
  flex: 1;
  min-width: 0;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding-inline: 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--bg) 55%, #0b1424);
  border: 1px solid rgba(255,255,255,.07);
}
.device-address svg { flex: none; color: var(--brand); opacity: .9; }
.device-address em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device-screen {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: 15px;
  background: var(--surface-solid);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 -34px 50px -30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}
.device-screen img { position: relative; z-index: 0; }
/* انعكاس زجاجي ثابت — إحساس بشاشة زجاجية حقيقية */
.device-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(118deg,
    rgba(255,255,255,.16) 0%,
    rgba(255,255,255,.05) 13%,
    transparent 32%,
    transparent 100%);
  mix-blend-mode: screen;
  opacity: .7;
}
.stack-device-desktop .device-screen,
.stack-device-tablet .device-screen {
  padding-block-start: 25px;
}
.stack-device-phone .device-screen {
  border-radius: 24px;
}
.stack-device-phone .device-screen img {
  object-fit: cover;
  object-position: top center;
}
/* الجزيرة الديناميكية للهاتف */
.phone-speaker {
  position: absolute;
  z-index: 4;
  inset-block-start: 14px;
  inset-inline-start: 50%;
  width: 34%;
  min-width: 72px;
  height: 20px;
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  background: #04070e;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.5);
}
.phone-speaker::after {
  content: "";
  position: absolute;
  inset-inline-end: 11px;
  inset-block-start: 50%;
  width: 7px;
  height: 7px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #274268, #050a14);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}
/* قاعدة اللابتوب المفتوح — مفصلة ولوحة سفلية */
.device-base {
  position: absolute;
  inset-inline: 6%;
  inset-block-end: -15px;
  height: 15px;
  border-radius: 0 0 13px 13px;
  background: linear-gradient(180deg, #1c2840, #0b1220 55%, #05080f);
  border: 1px solid rgba(255,255,255,.07);
  border-top: none;
  box-shadow: 0 22px 34px -14px rgba(0,0,0,.6);
}
.device-base::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 0;
  width: 20%;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #0a1120, #060a12);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.55);
}
.stack-card-info {
  position: absolute;
  inset-inline: .9rem;
  inset-block-end: .9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .85rem;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
}
.stack-device-phone .stack-card-info {
  inset-inline: .65rem;
  inset-block-end: .65rem;
  display: grid;
  justify-content: stretch;
}
.stack-device-phone .stack-card-info small {
  white-space: normal;
}
.stack-card-info b {
  color: var(--text-strong);
  font-size: var(--fs-300);
}
.stack-card-info small {
  color: var(--muted);
  font-size: .76rem;
  white-space: nowrap;
}
.stack-profile {
  position: absolute;
  inset-inline-end: 9%;
  inset-block-end: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: .75rem;
  width: min(76%, 330px);
  padding: .75rem .85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md);
  text-align: start;
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.stack-profile:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  background: color-mix(in srgb, var(--surface-solid) 82%, transparent);
  box-shadow: 0 18px 52px color-mix(in srgb, var(--brand) 18%, transparent);
}
.stack-profile img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
}
.stack-profile b {
  display: block;
  color: var(--text-strong);
  font-family: var(--font-display);
}
.stack-profile small {
  color: var(--muted);
  font-size: var(--fs-300);
}

/* About modal */
body.modal-open {
  overflow: hidden;
}
.about-modal {
  position: fixed;
  inset: 0;
  z-index: 9997;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
}
.about-modal[hidden] { display: none; }
/* عند فتح النافذة: نُخفي الهيدر حتى لا يغطّي زر الإغلاق (×) ويسهل الضغط عليه */
body.modal-open .site-header { opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.about-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 70% at 52% 20%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 72%),
    rgba(2, 8, 18, .76);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.about-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 1080px);
  height: min(760px, calc(100dvh - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(250px, .78fr) 1.22fr;
  gap: clamp(.9rem, 2.2vw, 1.45rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 95% at 10% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface-solid) 94%, transparent);
  box-shadow: 0 32px 120px rgba(0,0,0,.48), var(--shadow-lg);
  padding: clamp(.75rem, 1.7vw, 1.1rem);
  transform: translateY(18px) scale(.97);
  opacity: 0;
  transition: transform .36s var(--ease-out), opacity .28s var(--ease);
}
.about-modal.is-open .about-dialog {
  transform: none;
  opacity: 1;
}
.about-close {
  position: absolute;
  inset-block-start: .9rem;
  inset-inline-end: .9rem;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid var(--line);
  color: var(--text-strong);
  font-size: 1.6rem;
  line-height: 1;
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.about-close:hover {
  transform: rotate(90deg);
  background: var(--surface-2);
  border-color: var(--brand);
}
.about-dialog-media {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--r-xl) - .35rem);
  border: 1px solid var(--line);
  background: var(--surface);
}
.about-dialog-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--bg) 82%, transparent));
  pointer-events: none;
}
.about-dialog-media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  filter: grayscale(.8) contrast(1.04);
}
.about-status {
  position: absolute;
  inset-inline: 1rem;
  inset-block-end: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: .55rem .8rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-weight: 700;
  font-size: var(--fs-300);
}
.about-status i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 24%, transparent);
}
.about-dialog-copy {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(.15rem, 1.2vw, .75rem);
}
.about-dialog-copy h2 {
  font-size: clamp(2.1rem, 4vw, 3.65rem);
  line-height: .98;
  margin: clamp(.65rem, 1.5vw, 1rem) 0 .35rem;
}
.about-role {
  color: var(--brand);
  font-weight: 800;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
}
.about-bio {
  color: var(--muted);
  font-size: clamp(.98rem, 1.35vw, 1.15rem);
  line-height: 1.9;
  margin-block: clamp(.8rem, 2vw, 1.2rem);
  max-width: 58ch;
}
.about-highlights {
  display: grid;
  gap: .55rem;
  margin-bottom: clamp(.8rem, 2vw, 1.1rem);
}
.about-highlights li {
  display: flex;
  gap: .7rem;
  color: var(--text);
}
.about-highlights li span {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 13%, transparent);
}
.about-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem;
}
.about-mini-stats div {
  padding: .65rem .75rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
}
.about-mini-stats b {
  display: block;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}
.about-mini-stats span {
  color: var(--muted);
  font-size: var(--fs-300);
}
@media (max-width: 760px) {
  .about-dialog {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(150px, 34%) 1fr;
    height: calc(100dvh - 1.25rem);
    max-height: calc(100dvh - 1.25rem);
    gap: .75rem;
    padding: .7rem;
  }
  .about-dialog-media img {
    height: 100%;
  }
  .about-dialog-copy {
    justify-content: start;
    padding: .15rem .2rem .25rem;
  }
  .about-dialog-copy h2 {
    font-size: clamp(1.7rem, 9vw, 2.45rem);
    margin-block-start: .45rem;
  }
  .about-bio {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.75;
    margin-block: .65rem;
  }
  .about-highlights {
    gap: .45rem;
  }
  .about-highlights li {
    font-size: .9rem;
  }
  .about-mini-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
  }
  .about-mini-stats div {
    padding: .55rem;
  }
}
@media (max-height: 700px) {
  .about-dialog {
    height: calc(100dvh - 1rem);
    max-height: calc(100dvh - 1rem);
  }
  .about-dialog-copy h2 {
    font-size: clamp(1.9rem, 3.8vw, 3rem);
  }
  .about-bio {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .about-highlights {
    gap: .45rem;
  }
  .about-highlights li {
    font-size: .94rem;
  }
}
@media (max-width: 520px), (max-height: 620px) {
  .about-mini-stats {
    display: none;
  }
  .about-dialog .btn-row {
    margin-top: .75rem;
  }
}
@keyframes stackFloat {
  from { translate: 0 0; }
  to { translate: 0 -14px; }
}

/* Featured work hover polish */
.bento-card {
  position: relative;
  isolation: isolate;
}
.bento-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 55%), rgba(255,255,255,.16), transparent 42%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.bento-card:hover::before { opacity: 1; }
.bento-overlay {
  transition: transform .48s var(--ease-out), background .35s var(--ease);
}
.bento-card:hover .bento-overlay {
  transform: translateY(-6px);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 90%, transparent) 54%);
}
.bento-cta {
  transition: color .25s var(--ease), transform .35s var(--ease-out);
}
.bento-card:hover .bento-cta {
  color: var(--brand);
  transform: translateX(-4px);
}
html[dir="ltr"] .bento-card:hover .bento-cta { transform: translateX(4px); }

/* الكشف السينمائي: الملخّص + زر "شوف المشروع" ينزلقان عند المرور */
.bento-reveal {
  display: grid;
  gap: .35rem;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease-out), opacity .38s var(--ease), margin-top .4s var(--ease-out);
}
.bento-card:hover .bento-reveal,
.bento-card:focus-visible .bento-reveal {
  max-height: 9rem;
  opacity: 1;
  margin-top: .4rem;
}
/* على اللمس (بدون hover) أو الشاشات الصغيرة نُظهر كل شيء دائمًا */
@media (hover: none), (max-width: 700px) {
  .bento-reveal { max-height: none; opacity: 1; margin-top: .35rem; }
}
/* حلقة توهّج بلون العلامة + رفع خفيف عند المرور */
.bento-card {
  border-color: var(--line);
  transition: border-color .35s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease-out);
}
.bento-card:hover {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
  box-shadow: 0 26px 70px -24px color-mix(in srgb, var(--brand) 22%, transparent), 0 10px 30px -18px rgba(0,0,0,.5);
  transform: translateY(-4px);
}
.bento-card:hover img { transform: scale(1.075); filter: saturate(1.06); }
@media (prefers-reduced-motion: reduce) {
  .bento-reveal { transition: opacity .3s var(--ease); }
  .bento-card:hover { transform: none; }
  .bento-card:hover img { transform: none; filter: none; }
}
.project-thumb { isolation: isolate; }
.project-card {
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow .4s var(--ease);
}
.project-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
  box-shadow: 0 26px 70px -24px color-mix(in srgb, var(--brand) 22%, transparent), 0 10px 30px -18px rgba(0,0,0,.5);
}
.project-card:hover .project-thumb img { transform: scale(1.06); }
.project-card h3 { transition: color .3s var(--ease); }
.project-card:hover h3 { color: var(--text-strong); }
/* زر "شوف الحالة" يمتلئ بلون العلامة عند المرور — نبرة سينمائية موحّدة مع الـBento */
.project-card .tag-pill { transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.project-card .tag-pill svg { transition: transform .3s var(--ease-out); }
.project-card:hover .tag-pill { background: var(--brand); border-color: var(--brand); color: #04150e; }
.project-card:hover .tag-pill svg { transform: translateX(-3px); }
html[dir="ltr"] .project-card:hover .tag-pill svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .project-card:hover { transform: none; }
  .project-card:hover .project-thumb img { transform: none; }
  .project-card:hover .tag-pill svg { transform: none; }
}

/* Animated service tabs */
.service-lab {
  overflow: clip;
}
.service-tabs-shell {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(50% 70% at 75% 12%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 70%),
    var(--surface);
  padding: clamp(1rem, 2.4vw, 1.4rem);
  box-shadow: var(--shadow-sm);
}
.service-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: var(--sp-5);
}
.service-tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .65rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--muted);
  font-weight: 700;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.service-tab:hover {
  color: var(--text-strong);
  transform: translateY(-2px);
  border-color: var(--line-strong);
}
.service-tab.is-active {
  color: var(--brand-ink);
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: var(--glow-brand);
}
.service-preview {
  position: relative;
  min-height: 410px;
}
.service-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(.985);
  transition: opacity .34s var(--ease), transform .42s var(--ease-out);
}
.service-panel.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.service-panel-copy {
  display: grid;
  gap: var(--sp-4);
}
.service-panel-copy h3 {
  font-size: var(--fs-700);
}
.service-panel-copy p {
  color: var(--muted);
  font-size: var(--fs-500);
}
.service-mock {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--surface-solid);
  box-shadow: var(--shadow-lg);
  transform: perspective(1200px) rotateY(-6deg) rotateX(3deg);
}
html[lang="en"] .service-mock { transform: perspective(1200px) rotateY(6deg) rotateX(3deg); }

/* ================= SM2 — موك-أبات تبويبات الخدمة (قصة عميل «مذاق») ================= */
.sm2-mock { height: 322px; min-width: 0; font-family: var(--font-display); }
.sm2-mock, .sm2-mock *, .sm2-mock *::before, .sm2-mock *::after { box-sizing: border-box; }
.sm2-mock i, .sm2-mock em, .sm2-mock b { font-style: normal; }
.sm2-mock .mock-body {
  display: flex; flex-direction: column; gap: 10px;
  height: calc(100% - 32px); min-height: 0; padding: 12px 14px; overflow: hidden;
  background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 60%);
}
@keyframes sm2-rise  { from { opacity: 0; transform: translateY(13px); } }
@keyframes sm2-drop  { from { opacity: 0; transform: translateY(-11px); } }
@keyframes sm2-slide { from { opacity: 0; transform: translateX(18px); } }
@keyframes sm2-fade  { from { opacity: 0; } }
@keyframes sm2-grow  { from { transform: scaleY(0); } }
@keyframes sm2-draw  { from { stroke-dashoffset: 100; } }
@keyframes sm2-pop   { 0% { opacity: 0; transform: scale(.82); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes sm2-flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sm2-ping  { 0% { transform: scale(.8); opacity: .7; } 80%, 100% { transform: scale(2.1); opacity: 0; } }
@keyframes sm2-beat  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@media (max-width: 560px) { .sm2-mock { height: 300px; } }
@media (prefers-reduced-motion: reduce) {
  .sm2-mock, .sm2-mock *, .sm2-mock *::before, .sm2-mock *::after { animation: none !important; transition: none !important; }
}

/* --- SM2 WEBSITE — لاندنج مطعم مذاق --- */
.sm2-nav { display: flex; align-items: center; gap: 10px; flex: none; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.sm2-logo { display: inline-flex; align-items: center; gap: 6px; font: 800 10px/1 var(--font-display); color: var(--text-strong); white-space: nowrap; }
.sm2-logo::before { content: ""; width: 15px; height: 15px; border-radius: 5px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.sm2-links { display: flex; gap: 10px; margin-inline-start: 4px; min-width: 0; overflow: hidden; }
.sm2-links i { font-size: 8.5px; color: var(--muted); white-space: nowrap; }
.sm2-links i.is-on { color: var(--text-strong); font-weight: 700; }
.sm2-nav-cta { margin-inline-start: auto; flex: none; font-size: 8.5px; font-weight: 700; color: var(--brand-ink); background: var(--brand); padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.sm2-hero { display: flex; align-items: center; gap: 12px; flex: 1; min-height: 0; }
.sm2-hero-copy { flex: 1.15; min-width: 0; display: grid; gap: 7px; justify-items: start; }
.sm2-kicker { display: inline-flex; align-items: center; gap: 5px; font-size: 8px; font-weight: 700; color: var(--brand); }
.sm2-kicker::before { content: ""; width: 14px; height: 2px; border-radius: var(--r-pill); background: var(--brand); }
.sm2-h1 { font: 800 16px/1.45 var(--font-display); color: var(--text-strong); }
.sm2-cta-row { display: flex; align-items: center; gap: 7px; }
.sm2-btn { font-size: 8.5px; font-weight: 800; color: var(--brand-ink); background: var(--brand); padding: 5px 12px; border-radius: var(--r-pill); white-space: nowrap; box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 35%, transparent); }
.sm2-conv { font-size: 7.5px; font-weight: 800; color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); padding: 3px 7px; border-radius: var(--r-pill); white-space: nowrap; }
.sm2-dish { flex: 1; min-width: 0; display: grid; gap: 5px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 7px; box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--brand-ink) 80%, transparent); }
.sm2-dish-img { position: relative; height: 64px; border-radius: var(--r-sm); background: linear-gradient(140deg, color-mix(in srgb, var(--gold) 55%, var(--surface-solid)), color-mix(in srgb, var(--danger) 38%, var(--surface-solid)) 62%, color-mix(in srgb, var(--gold) 20%, var(--brand-ink))); }
.sm2-dish-badge { position: absolute; top: 5px; inset-inline-start: 5px; font-size: 7px; font-weight: 700; color: var(--brand-ink); background: var(--gold); padding: 2.5px 6px; border-radius: var(--r-pill); }
.sm2-dish-name { font-size: 9px; font-weight: 700; color: var(--text-strong); }
.sm2-dish-meta { display: flex; align-items: center; justify-content: space-between; }
.sm2-dish-meta b { font-size: 10px; color: var(--brand); }
.sm2-dish-meta i { font-size: 8px; color: var(--gold); }
.sm2-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: none; }
.sm2-strip-card { display: grid; gap: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 8px; min-width: 0; }
.sm2-strip-card i { font-size: 8px; color: var(--text); white-space: nowrap; overflow: hidden; }
.sm2-strip-card b { font-size: 9px; color: var(--brand); }
.sm2-wa { position: absolute; bottom: 44px; inset-inline-end: 10px; z-index: 3; display: flex; align-items: flex-end; gap: 6px; }
.sm2-lead { max-width: 168px; display: grid; gap: 2px; font-size: 7.5px; line-height: 1.5; color: var(--muted); background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: var(--r-md); border-end-end-radius: 4px; padding: 6px 9px; box-shadow: 0 12px 26px rgba(0,0,0,.4); }
.sm2-lead b { font-size: 8px; color: var(--brand); }
.sm2-wa-btn { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 40%, transparent); }
.sm2-wa-btn::before { content: ""; position: absolute; inset: 7px; background: var(--brand-ink); border-radius: 5px 5px 5px 1px; }
.sm2-wa-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--brand); opacity: 0; }
.service-panel.is-active .sm2-nav        { animation: sm2-drop .45s var(--ease) .02s both; }
.service-panel.is-active .sm2-kicker     { animation: sm2-rise .4s var(--ease) .1s both; }
.service-panel.is-active .sm2-h1         { animation: sm2-rise .5s var(--ease) .18s both; }
.service-panel.is-active .sm2-cta-row    { animation: sm2-pop .4s var(--ease) .3s both; }
.service-panel.is-active .sm2-dish       { animation: sm2-pop .5s var(--ease) .24s both; }
.service-panel.is-active .sm2-strip-card { animation: sm2-rise .45s var(--ease) both; }
.service-panel.is-active .sm2-strip-card:nth-child(1) { animation-delay: .4s; }
.service-panel.is-active .sm2-strip-card:nth-child(2) { animation-delay: .46s; }
.service-panel.is-active .sm2-strip-card:nth-child(3) { animation-delay: .52s; }
.service-panel.is-active .sm2-wa-btn     { animation: sm2-pop .35s var(--ease-out) .6s both; }
.service-panel.is-active .sm2-lead       { animation: sm2-rise .45s var(--ease-out) .72s both; }
.service-panel.is-active .sm2-wa-btn::after { animation: sm2-ping 2.6s var(--ease-out) 1.5s infinite; }
@media (max-width: 560px) {
  .sm2-links i:nth-child(n+3) { display: none; }
  .sm2-h1 { font-size: 14px; }
  .sm2-dish-img { height: 52px; }
  .sm2-lead { max-width: 140px; }
}

/* --- SM2 SYSTEM — لوحة تحكم admin.mathaq.sa --- */
.sm2-mock .mock-body.sm2-sys { flex-direction: row; gap: 10px; padding: 10px 12px; }
.sm2-side { width: 96px; flex: none; display: flex; flex-direction: column; gap: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 7px; }
.sm2-side-logo { display: flex; align-items: center; gap: 5px; font: 800 9px/1 var(--font-display); color: var(--text-strong); padding: 2px 4px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; white-space: nowrap; }
.sm2-side-logo::before { content: ""; width: 12px; height: 12px; border-radius: 4px; flex: none; background: linear-gradient(135deg, var(--brand), var(--violet)); }
.sm2-side-item { display: flex; align-items: center; gap: 6px; font-size: 8.5px; color: var(--muted); padding: 5px 7px; border-radius: var(--r-sm); white-space: nowrap; overflow: hidden; }
.sm2-side-item::before { content: ""; width: 7px; height: 7px; border-radius: 2.5px; flex: none; background: var(--line-strong); }
.sm2-side-item.is-on { color: var(--brand); font-weight: 700; background: color-mix(in srgb, var(--brand) 10%, transparent); }
.sm2-side-item.is-on::before { background: var(--brand); }
.sm2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sm2-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: none; }
.sm2-kpi { display: grid; gap: 3px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 9px; min-width: 0; }
.sm2-kpi span { font-size: 7.5px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.sm2-kpi b { font: 800 13px/1.1 var(--font-display); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.sm2-kpi em { justify-self: start; font: 700 7.5px/1 ui-monospace, SFMono-Regular, monospace; padding: 2px 5px; border-radius: var(--r-pill); }
.sm2-kpi em.up { color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.sm2-kpi em.dn { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.sm2-chart { flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 9px 6px; }
.sm2-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; font-size: 8px; font-weight: 700; color: var(--text); }
.sm2-live { position: relative; font-size: 7px; font-weight: 800; color: var(--brand); padding-inline-start: 9px; }
.sm2-live::before, .sm2-live::after { content: ""; position: absolute; inset-inline-start: 0; top: 50%; margin-top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
.sm2-live::after { opacity: 0; }
.sm2-chart svg { display: block; width: 100%; height: 42px; background-image: linear-gradient(color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px); background-size: 100% 14px; }
.sm2-chart polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.sm2-line { stroke: var(--brand); stroke-width: 2; }
.sm2-line-ghost { stroke: var(--violet); stroke-width: 1.5; opacity: .4; }
.sm2-table { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px 0; }
.sm2-tr { position: relative; display: flex; align-items: center; gap: 7px; padding: 5px 9px; font-size: 8px; }
.sm2-tr + .sm2-tr { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.sm2-tr span { flex: 1; min-width: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm2-tr b { flex: none; font: 700 8px/1 ui-monospace, SFMono-Regular, monospace; color: var(--text-strong); direction: ltr; }
.sm2-pill { flex: none; font-size: 7px; font-weight: 700; padding: 2.5px 6px; border-radius: var(--r-pill); white-space: nowrap; }
.sm2-pill.new { color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); }
.sm2-pill.ok { color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 12%, transparent); }
.sm2-pill.wip { color: var(--gold); background: color-mix(in srgb, var(--gold) 13%, transparent); }
.sm2-tr.is-new::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--brand) 10%, transparent); opacity: 0; pointer-events: none; }
.service-panel.is-active .sm2-side       { animation: sm2-slide .45s var(--ease) .03s both; }
.service-panel.is-active .sm2-side-item  { animation: sm2-fade .35s linear both; }
.service-panel.is-active .sm2-side-item:nth-of-type(1) { animation-delay: .15s; }
.service-panel.is-active .sm2-side-item:nth-of-type(2) { animation-delay: .21s; }
.service-panel.is-active .sm2-side-item:nth-of-type(3) { animation-delay: .27s; }
.service-panel.is-active .sm2-side-item:nth-of-type(4) { animation-delay: .33s; }
.service-panel.is-active .sm2-kpi        { animation: sm2-pop .45s var(--ease) both; }
.service-panel.is-active .sm2-kpi:nth-child(1) { animation-delay: .12s; }
.service-panel.is-active .sm2-kpi:nth-child(2) { animation-delay: .18s; }
.service-panel.is-active .sm2-kpi:nth-child(3) { animation-delay: .24s; }
.service-panel.is-active .sm2-chart      { animation: sm2-rise .45s var(--ease) .3s both; }
.service-panel.is-active .sm2-line-ghost { animation: sm2-draw .5s var(--ease) .48s both; }
.service-panel.is-active .sm2-line       { animation: sm2-draw .55s var(--ease) .55s both; }
.service-panel.is-active .sm2-table      { animation: sm2-rise .45s var(--ease) .38s both; }
.service-panel.is-active .sm2-tr         { animation: sm2-fade .35s linear both; }
.service-panel.is-active .sm2-tr:nth-child(2) { animation-delay: .5s; }
.service-panel.is-active .sm2-tr:nth-child(3) { animation-delay: .56s; }
.service-panel.is-active .sm2-tr.is-new  { animation: sm2-slide .45s var(--ease-out) .68s both; }
.service-panel.is-active .sm2-tr.is-new::after { animation: sm2-flash .4s var(--ease) .72s both; }
.service-panel.is-active .sm2-live::after { animation: sm2-ping 2.4s var(--ease-out) 1.3s infinite; }
@media (max-width: 560px) {
  .sm2-side { width: 80px; }
  .sm2-kpi b { font-size: 11px; }
}

/* --- SM2 APP — تطبيق صاحب المطعم داخل إطار جوال --- */
.sm2-mock.sm2-mock-app {
  display: grid;
  place-items: center;
  height: auto;
  width: min(100%, 214px);
  justify-self: center;
  padding: 9px;
  border-radius: 42px;
  background:
    radial-gradient(80% 60% at 30% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 68%),
    linear-gradient(145deg, #24304a, #0b111d 54%, #182238);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent),
    inset 0 0 0 4px color-mix(in srgb, #020712 48%, transparent),
    0 28px 64px -34px rgba(0,0,0,.9);
}
.sm2-phone {
  position: relative;
  width: 100%;
  height: 396px;
  aspect-ratio: 9 / 19.5;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 39px 18px 18px;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  background:
    linear-gradient(180deg, #060b14, #02050a);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--brand) 8%, transparent),
    inset 0 16px 28px rgba(255,255,255,.035);
}
.sm2-phone::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 27px;
  background:
    radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--violet) 13%, transparent), transparent 55%),
    var(--bg);
  border: 1px solid color-mix(in srgb, var(--brand) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 35%, transparent);
  pointer-events: none;
  z-index: 0;
}
.sm2-phone > :not(.sm2-island):not(.sm2-toast) { position: relative; z-index: 2; }
.sm2-phone::after { content: ""; position: absolute; bottom: 9px; left: 50%; margin-left: -18px; width: 36px; height: 3px; border-radius: var(--r-pill); background: var(--line-strong); z-index: 7; }
.sm2-island { position: absolute; top: 13px; inset-inline: 0; margin-inline: auto; width: 52px; height: 12px; border-radius: var(--r-pill); background: #050b12; border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--line)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); z-index: 8; }
.sm2-toast { position: absolute; top: 36px; inset-inline: 18px; z-index: 4; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--r-md); background: color-mix(in srgb, var(--surface-solid) 88%, var(--brand)); border: 1px solid var(--line-strong); box-shadow: 0 14px 30px rgba(0,0,0,.45); }
.sm2-toast-ic { position: relative; flex: none; width: 17px; height: 17px; border-radius: 6px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.sm2-toast-ic::after { content: ""; position: absolute; top: 5px; left: 4px; width: 8px; height: 4px; border-left: 2px solid var(--brand-ink); border-bottom: 2px solid var(--brand-ink); transform: rotate(-45deg); }
.sm2-toast-txt { display: grid; gap: 1px; min-width: 0; font-size: 7px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.sm2-toast-txt b { font-size: 7.8px; color: var(--text-strong); }
.sm2-app-head { display: flex; align-items: center; gap: 7px; margin-top: 42px; }
.sm2-ava { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font: 800 10px/1 var(--font-display); color: var(--brand-ink); background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.sm2-greet { display: grid; gap: 2px; min-width: 0; }
.sm2-greet b { font-size: 10px; color: var(--text-strong); white-space: nowrap; overflow: hidden; }
.sm2-greet i { font-size: 7.5px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.sm2-bell { position: relative; margin-inline-start: auto; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); }
.sm2-bell::before { content: ""; position: absolute; inset: 6px 7px 7px; border-radius: 4px 4px 1px 1px; background: var(--muted); }
.sm2-bell::after { content: ""; position: absolute; top: 1px; inset-inline-end: 1px; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); border: 1px solid var(--bg); }
.sm2-stat { display: grid; gap: 6px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line-strong)); border-radius: var(--r-md); padding: 10px 10px 9px; }
.sm2-stat-label { font-size: 7.5px; color: var(--muted); }
.sm2-stat-val { display: flex; align-items: center; gap: 6px; font: 800 15px/1 var(--font-display); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.sm2-stat-val em { font: 800 7.5px/1 ui-monospace, SFMono-Regular, monospace; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); padding: 2px 6px; border-radius: var(--r-pill); }
.sm2-bars { display: flex; align-items: flex-end; gap: 4px; height: 36px; }
.sm2-bars i { flex: 1; border-radius: 3px; background: color-mix(in srgb, var(--brand) 26%, var(--surface-2)); transform-origin: bottom; }
.sm2-bars i:nth-child(1) { height: 38%; }
.sm2-bars i:nth-child(2) { height: 55%; }
.sm2-bars i:nth-child(3) { height: 45%; }
.sm2-bars i:nth-child(4) { height: 70%; }
.sm2-bars i:nth-child(5) { height: 100%; }
.sm2-bars i.is-hot { background: var(--brand); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 40%, transparent); }
.sm2-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.sm2-item-ic { position: relative; flex: none; width: 22px; height: 22px; border-radius: 8px; }
.sm2-item-ic.a { background: color-mix(in srgb, var(--violet) 22%, var(--surface-2)); }
.sm2-item-ic.b { background: color-mix(in srgb, var(--brand-2) 20%, var(--surface-2)); }
.sm2-item-ic::after { content: ""; position: absolute; inset: 7px; border-radius: 3px; background: var(--violet); }
.sm2-item-ic.b::after { background: var(--brand-2); border-radius: 50%; }
.sm2-item-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sm2-item-txt b { font-size: 8.5px; color: var(--text-strong); white-space: nowrap; overflow: hidden; }
.sm2-item-txt i { font-size: 7.5px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.sm2-item > em { flex: none; font: 800 9px/1 ui-monospace, SFMono-Regular, monospace; color: var(--text-strong); }
.sm2-tabbar { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 6px 6px 7px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); }
.sm2-tabbar span { position: relative; display: grid; justify-items: center; gap: 3px; font-size: 6.5px; font-weight: 600; color: var(--muted); }
.sm2-tabbar span::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--line-strong); }
.sm2-tabbar span.is-on { color: var(--brand); font-weight: 800; }
.sm2-tabbar span.is-on::before { background: var(--brand); border-radius: 50%; }
.sm2-tabbar span:nth-child(2)::after { content: ""; position: absolute; top: -2px; inset-inline-end: calc(50% - 9px); width: 5px; height: 5px; border-radius: 50%; background: var(--danger); }
@keyframes sm2-toast-in { 0% { opacity: 0; transform: translateY(-24px) scale(.96); } 65% { opacity: 1; transform: translateY(2px) scale(1); } 100% { opacity: 1; transform: none; } }
.service-panel.is-active .sm2-app-head { animation: sm2-rise .45s var(--ease) .06s both; }
.service-panel.is-active .sm2-stat     { animation: sm2-pop .5s var(--ease) .16s both; }
.service-panel.is-active .sm2-bars i   { animation: sm2-grow .45s var(--ease-out) both; }
.service-panel.is-active .sm2-bars i:nth-child(1) { animation-delay: .3s; }
.service-panel.is-active .sm2-bars i:nth-child(2) { animation-delay: .36s; }
.service-panel.is-active .sm2-bars i:nth-child(3) { animation-delay: .42s; }
.service-panel.is-active .sm2-bars i:nth-child(4) { animation-delay: .48s; }
.service-panel.is-active .sm2-bars i:nth-child(5) { animation-delay: .54s; }
.service-panel.is-active .sm2-stat-val em { animation: sm2-pop .35s var(--ease) .6s both; }
.service-panel.is-active .sm2-item     { animation: sm2-rise .45s var(--ease) .35s both; }
.service-panel.is-active .sm2-item + .sm2-item { animation-delay: .44s; }
.service-panel.is-active .sm2-tabbar   { animation: sm2-rise .45s var(--ease) .52s both; }
.service-panel.is-active .sm2-toast    { animation: sm2-toast-in .45s var(--ease-out) .75s both; }
.service-panel.is-active .sm2-tabbar span.is-on::before { animation: sm2-beat 2.2s ease-in-out 1.5s infinite; }
@media (max-width: 560px) {
  .sm2-mock.sm2-mock-app { width: min(100%, 202px); }
  .sm2-phone { height: 376px; padding-inline: 17px; }
  .sm2-toast { inset-inline: 17px; }
}

/* Before / after slider */
.before-after {
  display: grid;
  gap: var(--sp-4);
}
.ba-stage {
  --pos: 58%;
  position: relative;
  min-height: clamp(360px, 44vw, 540px);
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-strong);
  background: var(--surface-solid);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.ba-fixed-labels {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline: 1rem;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.ba-fixed-labels span,
.ba-label {
  padding: .38rem .82rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface-solid) 88%, transparent);
  border: 1px solid var(--line);
  color: var(--text-strong);
  font-weight: 800;
  font-size: var(--fs-300);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.ba-fixed-labels span:last-child {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
  color: var(--brand);
}
.ba-card {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
}
.ba-before {
  background:
    radial-gradient(65% 70% at 22% 15%, color-mix(in srgb, var(--danger) 14%, transparent), transparent 70%),
    linear-gradient(135deg, var(--surface-solid), var(--surface));
}
.ba-after {
  background:
    radial-gradient(70% 80% at 80% 15%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%),
    linear-gradient(135deg, var(--surface-solid), var(--surface-2));
  clip-path: inset(0 0 0 calc(100% - var(--pos)));
}
html[dir="ltr"] .ba-after { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-label {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  z-index: 3;
  display: none;
}
.messy-ui,
.polished-ui {
  width: min(100%, 650px);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  padding: clamp(1.4rem, 4vw, 2.5rem);
}
.messy-ui {
  display: grid;
  gap: .55rem;
  opacity: .74;
}
.messy-ui b {
  display: inline-block;
  width: max-content;
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 36%, transparent);
  border-radius: var(--r-pill);
  padding: .25rem .55rem;
  font-size: var(--fs-300);
}
.messy-ui h3 {
  font-size: clamp(1.6rem, 4vw, 3rem);
  max-width: 11ch;
}
.messy-ui p {
  color: var(--muted);
  max-width: 44ch;
}
.messy-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.messy-row i {
  height: 54px;
  flex: 1 1 120px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
}
.messy-ui button,
.polished-ui button {
  width: max-content;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: .85rem 1.35rem;
  font-weight: 800;
}
.polished-ui {
  display: grid;
  gap: var(--sp-3);
  box-shadow: 0 24px 80px color-mix(in srgb, var(--brand) 16%, transparent);
}
.polished-ui span {
  width: max-content;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  border-radius: var(--r-pill);
  padding: .35rem .75rem;
  font-weight: 800;
}
.polished-ui h3 {
  font-size: clamp(1.9rem, 4.8vw, 4rem);
  max-width: 12ch;
}
.polished-ui p {
  color: var(--muted);
  font-size: var(--fs-500);
  max-width: 36ch;
}
.polished-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  max-width: 360px;
}
.polished-actions i {
  height: 60px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--brand) 14%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
}
.polished-ui button {
  background: var(--grad-brand);
  color: var(--brand-ink);
  border-color: transparent;
  box-shadow: var(--glow-brand);
}
.ba-handle {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--pos);
  z-index: 6;
  width: 2px;
  transform: translateX(-50%);
  background: var(--brand);
  box-shadow: var(--glow-brand);
  pointer-events: none;
}
html[dir="rtl"] .ba-handle { transform: translateX(50%); }
.ba-handle span {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--grad-brand);
  border: 4px solid var(--surface-solid);
  box-shadow: var(--shadow-md);
}
html[dir="rtl"] .ba-handle span { transform: translate(50%, -50%); }
.ba-range {
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}
.ba-hint {
  text-align: center;
  color: var(--faint);
  font-size: var(--fs-300);
}

/* Stronger scroll story treatment */
.process-track {
  position: relative;
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(65% 85% at 50% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 72%),
    var(--surface);
}
.process-step::after {
  content: "";
  position: absolute;
  inset-inline: var(--sp-5);
  inset-block-start: 0;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .5s var(--ease-out);
}
html[dir="ltr"] .process-step::after { transform-origin: left center; }
.process-step.is-active::after {
  transform: scaleX(1);
}

@media (max-width: 980px) {
  .service-panel {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .service-preview { min-height: 650px; }
  .service-mock {
    transform: none;
  }
}
@media (max-width: 880px) {
  .hero-visual {
    order: -1;
  }
  .project-stack {
    min-height: 540px;
  }
  .stack-card-1 {
    inset-inline-start: 3%;
    width: 86%;
  }
  .stack-card-2 {
    inset-block-start: 45%;
    width: 66%;
  }
  .stack-card-3 {
    inset-block-start: 36%;
    inset-inline-end: 1%;
    width: min(36%, 190px);
  }
  .stack-profile {
    inset-inline-end: 2%;
  }
}
@media (max-width: 620px) {
  body::after { display: none; }
  .project-stack {
    min-height: clamp(405px, 108vw, 510px);
    display: block;
    perspective: 1000px;
  }
  .stack-eyebrow,
  .stack-profile {
    position: relative;
    inset: auto;
    width: 100%;
    transform: none;
    animation: none;
  }
  .stack-card {
    position: absolute;
    animation: none;
  }
  .stack-card-1 {
    inset-block-start: 3rem;
    inset-inline: 2%;
    width: 88%;
    transform: rotateZ(-1.5deg);
  }
  .stack-card-2 {
    inset-block-start: 43%;
    inset-inline-start: 0;
    width: 68%;
    transform: rotateZ(3deg);
  }
  .stack-card-3 {
    inset-block-start: 32%;
    inset-inline-end: 1%;
    width: 32%;
    min-width: 108px;
    transform: rotateZ(-3deg);
  }
  .stack-card {
    aspect-ratio: auto;
  }
  .stack-device-phone .device-shell {
    border-radius: 24px;
    padding: 7px;
  }
  .phone-speaker {
    height: 13px;
    inset-block-start: 12px;
  }
  .stack-card-info {
    inset-inline: .55rem;
    inset-block-end: .55rem;
    padding: .55rem .65rem;
  }
  .stack-card-info small {
    display: none;
  }
  .stack-profile {
    position: absolute;
    inset-inline: 2%;
    inset-block-end: 0;
    width: 96%;
  }
  .service-preview { min-height: 760px; }
  .service-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .service-tab {
    justify-content: center;
    padding-inline: .55rem;
  }
  .service-tab span {
    font-size: var(--fs-300);
  }
  .polished-actions {
    grid-template-columns: 1fr;
  }
  .ba-stage {
    min-height: 560px;
  }
  .messy-ui h3,
  .polished-ui h3 {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  .stack-card,
  .stack-card::after,
  .bento-card::after,
  .project-thumb::after {
    animation: none;
    transition: none;
  }
}