/* H10 design tokens (from the H10 design system) + site-wide base. */
:root {
  color-scheme: dark; /* the site is dark-first: native controls and scrollbars follow */
  --h10-yellow: #F2B705;
  --h10-yellow-hover: #FFC72C;
  --h10-ink: #16181C;
  --surface-dark: #0E0F12;
  --surface-alt: #F3F4F5;
  --surface-mute: #E4E6E9;   /* light section ground; white cards read on it */
  --ink-muted: #5A616B;
  --line: #DCDFE3;
  --text-on-dark: #FFFFFF;
  --muted-on-dark: #C3CAD3;
  --dim-on-dark: #9AA2AD;
  --line-on-dark: rgba(255, 255, 255, 0.16);
  --radius-md: 10px;
  --radius-lg: 12px;
  --tap-min: 48px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  /* Latin labels and numbers ([01], 01 / 03, H10 · 01): Apple's SF Pro. SF Pro can't be embedded
     (Apple's licence), so Apple devices use their own copy and everyone else gets Inter, its
     closest open lookalike, loaded only for these few characters (see the font link in index.html). */
  --font-sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", sans-serif;
}
/* English page: SF Pro for everything (Inter off Apple devices, loaded by en/index.html) */
:root[lang="en"] { --font: var(--font-sf); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-dark);
  color: var(--text-on-dark);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, svg, canvas { display: block; }

.sf {
  font-family: var(--font-sf);
  font-variant-numeric: tabular-nums;              /* the counter doesn't jitter as digits change */
  letter-spacing: 0.02em;
  direction: ltr;
  unicode-bidi: isolate;
}

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

:focus-visible { outline: 2px solid var(--h10-yellow); outline-offset: 3px; }
/* skip link: hidden until focused from the keyboard */
.skip-link {
  position: fixed; z-index: 100; top: 12px; inset-inline-start: 12px;
  padding: 10px 16px; border-radius: var(--radius-md);
  background: var(--h10-yellow); color: var(--h10-ink); font-weight: 700; text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus-visible { transform: none; }

/* Section header, shared by the content sections: a yellow label pill, the heading, and road
   chevrons pointing the reading direction at the far end. Sections on a dark ground re-tint the
   chevrons with --chevron and --chevron-dim.

   Yellow rule: H10 yellow is a text colour only on dark grounds. On light grounds it is a fill,
   line or shape behind ink text (ink on yellow is ~10:1; yellow on white is ~1.8:1). */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.section-eyebrow {
  /* baseline + gap: the H10 logo inside a label ("لماذا [H10]") sits on the text line, with its space */
  display: flex; align-items: baseline; column-gap: 0.3em; width: fit-content; margin: 0 0 16px; padding: 4px 14px;
  border-radius: 999px;
  background: var(--h10-yellow); color: var(--h10-ink);
  font-size: 14px; font-weight: 600; line-height: 22px;
}
/* the H10 wordmark standing in for the name inside a heading ("[H10] عن قرب."), sized to the
   heading's capitals; yellow, so only on dark grounds (base.css yellow rule) */
.title-with-logo { display: flex; align-items: center; flex-wrap: wrap; column-gap: 0.35em; }
.title-logo { flex: none; height: 0.78em; width: auto; color: var(--h10-yellow); }
/* a highlighter mark behind words in a heading: ink on yellow, wraps line by line */
.text-mark {
  padding: 0 0.18em; border-radius: 6px;
  background: var(--h10-yellow); color: var(--h10-ink);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.section-title { margin: 0; font-size: clamp(32px, 3.4vw, 56px); line-height: 1.3; font-weight: 700; text-wrap: balance; }
.section-chevrons { display: flex; gap: 4px; flex: none; padding-bottom: 12px; color: var(--chevron, currentColor); }
.section-chevrons svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.section-chevrons svg:nth-child(n + 4) { color: var(--chevron-dim, #C9CDD2); }
.section-chevrons:dir(ltr) svg { transform: scaleX(-1); }
@media (max-width: 900px) {
  .section-chevrons { display: none; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--tap-min); padding: 0 18px;
  border-radius: var(--radius-md);
  font: 700 15px/1 var(--font);
  text-decoration: none; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-yellow { background: var(--h10-yellow); color: var(--h10-ink); }

/* App-store badges */
.store {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 0 16px;
  border-radius: var(--radius-lg);
  background: #FFFFFF; color: var(--h10-ink);
  text-decoration: none;
  transition: background-color 150ms ease, transform 160ms var(--ease-out);
}
.store:active { transform: scale(0.97); }
.store small { display: block; font-size: 10px; font-weight: 600; opacity: 0.65; line-height: 1.1; }
.store b { display: block; font-size: 17px; line-height: 1.15; }

@media (hover: hover) and (pointer: fine) {
  .btn-yellow:hover { background: var(--h10-yellow-hover); }
  .store:hover { background: var(--h10-yellow); }
}

/* The H10 name in running text is the wordmark (sprite #h10-logo at the top of each page), sized
   to the surrounding capitals, sitting on the baseline, in the text's colour. Its accessible name
   is still "إتش 10" / "H10". */
.logo-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.inline-logo { display: inline-block; height: 0.74em; width: auto; vertical-align: baseline; }

/* Sticky heroes: every page's opening section stays put while the rest of the page slides up over
   it as a sheet, the way the home page's 3D hero does (hero.css). js/sticky-hero.js sets --hero-top
   for heroes taller than the screen so their lower part is seen before the sheet covers it.
   "body" in the selectors outranks each hero's own position: relative; every later section is
   lifted above the hero, the first one gets the sheet's rounded top and shadow. */
body :is(.svc-hero, .contact-hero, .blog-hero, .post-hero, .about-hero) {
  position: sticky; top: var(--hero-top, 0px); z-index: 0;
}
body :is(.svc-hero, .contact-hero, .blog-hero, .post-hero, .about-hero) ~ * { position: relative; z-index: 1; }
body :is(.svc-hero, .contact-hero, .blog-hero, .post-hero, .about-hero) + * {
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -24px 48px -24px rgba(0, 0, 0, 0.45);
}
@media (max-width: 900px) {
  body :is(.svc-hero, .contact-hero, .blog-hero, .post-hero, .about-hero) + * { border-radius: 24px 24px 0 0; }
}

/* Customer service number under a section's buttons (components/hotline): phone icon in a yellow
   ring, a small label, the number large. Sits on the dark heroes and banners. */
.hotline {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 20px;
  color: var(--text-on-dark); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.hotline__icon {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--h10-yellow); color: var(--h10-yellow);
  transition: background-color 150ms ease, color 150ms ease;
}
.hotline__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hotline__label { font-size: 15px; color: var(--muted-on-dark); }
.hotline__number { font-family: var(--font-sf); font-size: 24px; font-weight: 700; letter-spacing: 0.01em; }
.hotline:focus-visible { outline: 3px solid var(--h10-yellow); outline-offset: 4px; border-radius: 999px; }
@media (hover: hover) and (pointer: fine) {
  .hotline:hover .hotline__icon { background: var(--h10-yellow); color: var(--h10-ink); }
}