/* ==========================================================================
   Alshuja Computers — core design system
   Tokens, reset, typography, layout, buttons, forms.
   All spacing uses logical properties so Arabic (RTL) mirrors automatically.
   ========================================================================== */

:root {
  /* Brand palette */
  --ink: #0a1020;
  --navy-950: #070d1c;
  --navy-900: #0b1530;
  --navy-800: #102047;
  --navy-700: #17306a;
  --blue-600: #1d5fe0;
  --blue-500: #2f74f5;
  --blue-400: #5b95ff;
  --cyan-400: #2cc6e8;
  --cyan-300: #6fdcf2;

  /* Colour mix (Microsoft-style). Each hue: tint for backgrounds, ink for text and icons on that tint
     (≥ 4.5:1), accent for bars and glows. */
  --c1-bg: #e3f0ff; --c1-ink: #0b5cad; --c1-accent: #00a4ef;  /* blue */
  --c2-bg: #e6f6e0; --c2-ink: #2f6a0b; --c2-accent: #7fba00;  /* green */
  --c3-bg: #ffebe1; --c3-ink: #a3380f; --c3-accent: #f25022;  /* orange */
  --c4-bg: #fff3cf; --c4-ink: #7a5200; --c4-accent: #ffb900;  /* yellow */
  --c5-bg: #efe8fc; --c5-ink: #5b34a8; --c5-accent: #8661c5;  /* purple */
  --c6-bg: #dcf5f7; --c6-ink: #0b6870; --c6-accent: #00b7c3;  /* teal */
  --brand-strip: linear-gradient(90deg, var(--c3-accent) 0 25%, var(--c2-accent) 25% 50%, var(--c1-accent) 50% 75%, var(--c4-accent) 75% 100%);

  /* Neutrals */
  --white: #ffffff;
  --gray-25: #fafbfc;
  --gray-50: #f4f6f9;
  --gray-100: #eaeef4;
  --gray-200: #dce2eb;
  --gray-300: #c4ccd8;
  --gray-500: #6a7484;
  --gray-600: #4f5968;
  --gray-700: #363e4b;

  /* Semantic */
  --text: var(--ink);
  --text-muted: var(--gray-600);
  --text-inverse: #f2f5fb;
  --text-inverse-muted: #aab6cc;
  --surface: var(--white);
  --surface-alt: var(--gray-50);
  --line: var(--gray-200);
  --line-strong: var(--gray-300);
  --accent: var(--blue-600);
  --accent-hover: #164fc0;
  --focus: #2f74f5;
  --success: #0f7a4a;
  --success-bg: #e8f6ef;
  --danger: #b42318;
  --danger-bg: #fdecea;
  --warning-bg: #fff6e0;
  --warning: #8a5a00;

  /* Typography */
  --font-latin: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --font: var(--font-latin);
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.4rem, 1.1rem + 1vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --fs-3xl: clamp(2.1rem, 1.4rem + 3vw, 3.5rem);
  --fs-display: clamp(2.5rem, 1.4rem + 4.6vw, 5rem);
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --tracking-tight: -0.025em;

  /* Spacing & shape */
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1280px;
  --container-narrow: 860px;
  --section-y: clamp(40px, 4.5vw, 72px);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(10, 16, 32, 0.06), 0 1px 1px rgba(10, 16, 32, 0.04);
  --shadow: 0 10px 30px -12px rgba(10, 16, 32, 0.18), 0 2px 6px rgba(10, 16, 32, 0.05);
  --shadow-lg: 0 30px 60px -24px rgba(7, 13, 28, 0.35);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* --header-h is the full header height at the top of the page; once scrolled, the top bar slides away and only --header-bar-h stays visible. */
  --header-bar-h: 72px;
  --topbar-h: 0px;
  --header-h: calc(var(--header-bar-h) + var(--topbar-h));
}

[lang="ar"] {
  --font: var(--font-arabic);
  --tracking-tight: 0;
  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-body: 1.75;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-bar-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  /* Slim type: light body text, medium headings (weights 300–600 are loaded). */
  font-weight: 300;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
strong, b { font-weight: 600; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
dl, dd { margin: 0; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

/* Latin fragments (model numbers, emails) inside Arabic text keep the Latin face */
[lang="ar"] [lang="en"], [lang="ar"] .ltr { font-family: var(--font-latin); }
.ltr { direction: ltr; unicode-bidi: isolate; }

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

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: -100px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-weight: 500;
}
.skip-link:focus { inset-block-start: 12px; }

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

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(28px, 3vw, 48px); }
/* Soft colour-mesh backgrounds. Light enough that body text keeps full contrast.
   The colour blobs (--mesh) sit on an oversized layer behind the content that drifts slowly (see "Ambient motion"). */
.section--alt,
.section--mesh-blue { --mesh: radial-gradient(50% 65% at 10% 10%, #dcebff, transparent 70%), radial-gradient(45% 60% at 90% 90%, #ece3ff, transparent 70%); background-color: #f7f9ff; }
.section--mesh-purple { --mesh: radial-gradient(50% 65% at 90% 10%, #ebe2ff, transparent 70%), radial-gradient(45% 60% at 10% 90%, #ffe2f0, transparent 70%); background-color: #fbf8ff; }
.section--mesh-green { --mesh: radial-gradient(50% 65% at 10% 90%, #d9f4e4, transparent 70%), radial-gradient(45% 60% at 90% 10%, #d6effa, transparent 70%); background-color: #f6fcfa; }
.section--mesh-warm { --mesh: radial-gradient(50% 65% at 90% 90%, #ffefcc, transparent 70%), radial-gradient(45% 60% at 10% 10%, #ffe3e8, transparent 70%); background-color: #fffaf4; }
.section--mesh-teal { --mesh: radial-gradient(50% 65% at 10% 10%, #d4f3f3, transparent 70%), radial-gradient(45% 60% at 90% 90%, #e3e9ff, transparent 70%); background-color: #f5fbfc; }
.section--dark {
  --mesh:
    radial-gradient(38% 50% at 10% 10%, rgba(134, 97, 197, .35), transparent 70%),
    radial-gradient(34% 46% at 90% 25%, rgba(0, 164, 239, .3), transparent 70%),
    radial-gradient(38% 50% at 65% 90%, rgba(0, 183, 195, .22), transparent 70%);
  background-color: var(--navy-950);
  color: var(--text-inverse);
}

/* ---------- Ambient motion ----------
   Slow, low-contrast movement behind content: drifting colour blobs on mesh and dark sections, and faint rising
   particles on dark sections. Only transform is animated (no repaints), the layers ignore the pointer, and
   everything stops for visitors who ask for reduced motion. */
.section--alt, [class*="section--mesh-"], .section--dark { position: relative; isolation: isolate; overflow: clip; }
.section--alt::before, [class*="section--mesh-"]::before, .section--dark::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -2;
  background: var(--mesh);
  pointer-events: none;
  animation: ambient-drift 38s ease-in-out infinite alternate;
}
[class*="section--mesh-"]:nth-of-type(even)::before { animation-duration: 46s; animation-direction: alternate-reverse; }
.section--dark::after {
  content: "";
  position: absolute;
  inset: -240px 0 0;
  z-index: -1;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, rgba(255, 255, 255, .5), transparent 2px),
    radial-gradient(1px 1px at 140px 90px, rgba(125, 211, 252, .55), transparent 2px),
    radial-gradient(1.5px 1.5px at 80px 180px, rgba(196, 181, 253, .45), transparent 2px),
    radial-gradient(1px 1px at 200px 210px, rgba(255, 255, 255, .4), transparent 2px);
  background-size: 240px 240px;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  pointer-events: none;
  animation: ambient-rise 60s linear infinite;
}
@keyframes ambient-drift {
  0% { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(2%, 3%, 0) rotate(4deg) scale(1.06); }
  100% { transform: translate3d(4%, -3%, 0) rotate(-3deg) scale(1.02); }
}
/* Moves exactly one particle tile (240px), so the loop has no visible jump. */
@keyframes ambient-rise { to { transform: translate3d(0, -240px, 0); } }
.section--dark .text-muted, .section--dark .lede { color: var(--text-inverse-muted); }

.grid { display: grid; gap: clamp(16px, 2vw, 28px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
/* Product cards: room for the 200 × 280 px image frame and the card text. */
.grid--products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

.stack > * + * { margin-block-start: var(--stack, 1rem); }
.cluster { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
[lang="ar"] .eyebrow { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }
.section--dark .eyebrow, .on-dark .eyebrow { color: var(--cyan-300); }

.display { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 600; letter-spacing: -0.035em; }
[lang="ar"] .display { letter-spacing: 0; font-weight: 500; }
.h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); font-weight: 600; }
.h2 { font-size: var(--fs-2xl); line-height: 1.15; }
.h3 { font-size: var(--fs-xl); }
.h4 { font-size: var(--fs-lg); }
.lede { font-size: clamp(1.075rem, 1rem + 0.35vw, 1.3rem); color: var(--text-muted); max-width: 62ch; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-block-end: clamp(20px, 2.5vw, 32px);
}
.section-head__text { max-width: 760px; }
.section-head .lede { margin-block: 14px 0; }

.prose { max-width: 72ch; }
.prose h2 { font-size: var(--fs-xl); margin-block: 2em 0.6em; }
.prose h3 { font-size: var(--fs-lg); margin-block: 1.6em 0.5em; }
.prose ul { padding-inline-start: 1.25em; margin-block-end: 1em; }
.prose li { margin-block: 0.35em; }
.prose > :first-child { margin-block-start: 0; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--white);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1.5px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { --btn-bg: var(--accent-hover); box-shadow: 0 8px 20px -10px rgba(29, 95, 224, .6); }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.btn:hover .icon--dir { transform: translateX(3px); }
[dir="rtl"] .btn:hover .icon--dir { transform: scaleX(-1) translateX(3px); }

.btn--secondary { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: var(--line-strong); }
.btn--secondary:hover { --btn-bg: var(--gray-50); --btn-border: var(--ink); box-shadow: none; }
.btn--light { --btn-bg: var(--white); --btn-fg: var(--ink); }
.btn--light:hover { --btn-bg: var(--gray-100); box-shadow: none; }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: var(--white); --btn-border: rgba(255, 255, 255, .45); }
.btn--ghost-light:hover { --btn-bg: rgba(255, 255, 255, .1); --btn-border: var(--white); box-shadow: none; }
.btn--sm { min-height: 40px; padding: 8px 18px; }
.btn--block { width: 100%; }
.btn[aria-busy="true"] { pointer-events: none; opacity: .75; }
.btn[aria-busy="true"]::after {
  content: "";
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--accent);
  text-decoration: none;
}
.link-arrow .icon { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.link-arrow:hover { text-decoration: underline; }
a:hover > .link-arrow .icon--dir, .link-arrow:hover .icon--dir { transform: translateX(4px); }
[dir="rtl"] a:hover > .link-arrow .icon--dir, [dir="rtl"] .link-arrow:hover .icon--dir { transform: scaleX(-1) translateX(4px); }
.section--dark .link-arrow, .on-dark .link-arrow { color: var(--cyan-300); }

/* Mirror directional icons in RTL; logos, product images and other icons stay unchanged */
[dir="rtl"] .icon--dir { transform: scaleX(-1); }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; }
.field label, .field .label { font-weight: 500; font-size: var(--fs-sm); }
.field .hint { font-size: var(--fs-xs); color: var(--text-muted); }
.req { color: var(--danger); margin-inline-start: 2px; }
.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: var(--fs-md);
  transition: border-color .15s, box-shadow .15s;
}
.textarea { min-height: 140px; resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gray-600) 50%), linear-gradient(135deg, var(--gray-600) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 40px; }
[dir="rtl"] .select { background-position: 15px 21px, 20px 21px; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--gray-500); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px rgba(47, 116, 245, .18); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.field-error { font-size: var(--fs-xs); color: var(--danger); font-weight: 400; min-height: 0; }
.field-error:empty { display: none; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-sm); }
.check input { width: 20px; height: 20px; margin-block-start: 3px; accent-color: var(--accent); flex: none; }
.hp-field { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
}
.alert--error { background: var(--danger-bg); color: var(--danger); border-color: #f5c2bd; }
.alert--success { background: var(--success-bg); color: var(--success); border-color: #b7e4cc; }
.alert--info { background: #eef4ff; color: #1d4aa8; border-color: #cfdcfb; }
.alert--warning { background: var(--warning-bg); color: var(--warning); border-color: #f3dca3; }
.alert ul { padding-inline-start: 1.1em; }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .section--alt::before, [class*="section--mesh-"]::before, .section--dark::before, .section--dark::after,
  .page-hero:not(.page-hero--dark)::before, .cta-banner::after { animation: none; }
}