/* ══════════════════════════════════════════════════════════════════
   NORCENT home page: product-page layout (light canvas, black bands,
   rounded tiles, big statements). Used by index.html and the generated
   ar/index.html, and by /aimri/ (with aimri/aimri.css on top).
   ══════════════════════════════════════════════════════════════════ */

/* ── FONTS (self-hosted) ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('static/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('static/fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('static/fonts/noto-sans-arabic-var.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* ── TOKENS ── */
:root {
  --ink: #1D1D1F;
  --ink-2: #424245;
  --muted: #6E6E73;
  --muted-dark: #A1A1A6;
  --line: #D2D2D7;
  --line-dark: #424245;
  --canvas: #FFFFFF;
  --gray: #F5F5F7;
  --black: #000000;
  --graphite: #1D1D1F;
  --navy: #0B1320;
  --indigo: #131C7A;
  --blue: #0057FF;
  --blue-hover: #0040CC;
  --blue-soft: #4D84FF;
  --teal: #1FA9A0;
  --green: #00C48C;
  --radius: 28px;
  --wrap: 1000px;
  --gutter: 22px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
:lang(ar) body, body:lang(ar) {
  font-family: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
}
[dir="rtl"] * { letter-spacing: 0 !important; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 860px; }
.wrap--faq { max-width: 804px; }
.wrap--form { max-width: 684px; }
.section { padding: 110px 0; }
.center { text-align: center; }

.skip-link {
  position: fixed; top: -100px; inset-inline-start: 16px; z-index: 2000;
  background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 10px;
}
.skip-link:focus { top: 16px; color: #fff; }
.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;
}
.hp-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ── TYPE ── */
.h-xl { font-size: clamp(36px, 5.2vw, 56px); line-height: 1.07; font-weight: 700; letter-spacing: -0.035em; max-width: 17ch; }
.h-xl.center { margin-inline: auto; }
.h-lg { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; }
.lead-muted { margin-top: 14px; font-size: clamp(19px, 2vw, 21px); line-height: 1.4; color: var(--muted); max-width: 46ch; }
.lead-muted.center { margin-inline: auto; }

/* ── BUTTONS ── */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 22px; border-radius: 980px;
  background: var(--blue); color: #fff; font-size: 17px; font-weight: 500; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.pill:hover { background: var(--blue-hover); color: #fff; }
.pill--lg { padding: 12px 26px; min-height: 48px; }
.pill--sm { min-height: 28px; padding: 4px 12px; font-size: 12px; }
.pill--white { background: #fff; color: var(--navy); }
.pill--white:hover { background: var(--gray); color: var(--navy); }
.pill--ghost { background: transparent; border-color: currentColor; color: #fff; }
.pill--ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }
.chev-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 17px; }
.chev { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; }
[dir="rtl"] .chev, [dir="rtl"] .paddle svg { transform: scaleX(-1); }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; }

/* ══ GLOBAL NAV ══ */
.gnav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(22, 22, 23, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: transform 500ms var(--ease), opacity 500ms var(--ease);
}
/* Home page: the nav waits off-screen until the first scroll (set by JS) */
.gnav.is-hidden { transform: translateY(-100%); opacity: 0; }
.gnav__inner {
  max-width: 1024px; margin: 0 auto; padding: 0 var(--gutter);
  height: 52px; display: flex; align-items: center; gap: 24px;
}
.gnav__logo { display: flex; align-items: center; flex: 0 0 auto; }
.gnav__logo img { height: 28px; width: auto; }
.gnav__links { flex: 1 1 auto; display: flex; justify-content: center; gap: 30px; }
.gnav__links a, .btn-lang {
  color: #E8E8ED; font-size: 13px; padding: 14px 2px; opacity: 0.88;
  transition: opacity 200ms var(--ease);
}
.gnav__links a:hover, .gnav__links a.active, .btn-lang:hover { color: #fff; opacity: 1; }
.gnav__actions { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.hamburger {
  display: none; width: 44px; height: 44px; margin-inline-start: auto; padding: 0;
  background: none; border: 0; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
}
.hamburger span { display: block; width: 18px; height: 1.5px; background: #E8E8ED; border-radius: 1px; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 200; background: rgba(22, 22, 23, 0.98);
  padding: 72px 36px 36px; display: none; overflow-y: auto;
}
.mobile-menu.is-open { display: block; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.mobile-menu nav a:not(.pill) { color: #F5F5F7; font-size: 28px; font-weight: 600; padding: 8px 0; letter-spacing: -0.02em; }
.mobile-menu nav .pill { margin-top: 24px; }
.mobile-menu-close {
  position: absolute; top: 8px; inset-inline-end: 14px; width: 44px; height: 44px;
  background: none; border: 0; color: #E8E8ED; font-size: 32px; line-height: 1; cursor: pointer;
}

@media (max-width: 899px) {
  .gnav__links, .gnav__actions .pill { display: none; }
  .gnav__actions { margin-inline-start: auto; }
  .hamburger { display: flex; margin-inline-start: 0; }
}

/* ══ HERO: full-bleed film with the statement on top ══
   Pulled up under the translucent global nav (negative margin = nav height). */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: -52px; min-height: max(600px, 100svh);
  display: flex; align-items: center; justify-content: center;
  padding: 140px var(--gutter) 96px; text-align: center; color: #fff;
  background: var(--navy) url("static/custom-hero-poster.png") center / cover no-repeat;
}
.hero__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  /* Keeps the text readable over any frame of the film */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(5,10,20,0.55) 0%, rgba(5,10,20,0.15) 100%),
    linear-gradient(180deg, rgba(5,10,20,0.55) 0%, rgba(5,10,20,0.25) 40%, rgba(5,10,20,0.7) 100%);
}
.hero__content { max-width: 980px; }
.hero__eyebrow { font-size: clamp(19px, 2vw, 24px); font-weight: 600; letter-spacing: -0.01em; color: rgba(255,255,255,0.82); margin-bottom: 12px; }
.hero__title {
  font-size: clamp(44px, 7.4vw, 88px); line-height: 1.04; font-weight: 700; letter-spacing: -0.04em;
  max-width: 13ch; margin: 0 auto 18px; text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.hero__lead { font-size: clamp(20px, 2.3vw, 26px); line-height: 1.32; font-weight: 500; max-width: 32ch; margin: 0 auto 30px; color: rgba(255,255,255,0.88); }
.hero .chev-link { color: #fff; }
.hero .chev-link:hover { color: #9DBBFF; }
.hero__note { margin-top: 14px; font-size: 14px; color: rgba(255,255,255,0.65); }

/* ══ STATS ══ */
.stats { padding: 72px 0; }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; text-align: center; }
.grad-num {
  display: block; font-size: clamp(64px, 8vw, 88px); font-weight: 700; line-height: 1; letter-spacing: -0.05em;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.grad-1 { background-image: linear-gradient(90deg, var(--blue), var(--blue-soft)); }
.grad-2 { background-image: linear-gradient(90deg, var(--blue-soft), var(--teal)); }
.grad-3 { background-image: linear-gradient(90deg, var(--teal), var(--green)); }
.stats__label { display: block; margin-top: 10px; font-size: 19px; font-weight: 600; }
@media (max-width: 700px) { .stats__grid { grid-template-columns: 1fr; } }

/* ══ PROBLEM (black tile) ══ */
.tile-dark { background: var(--black); color: #F5F5F7; }
.tile-dark .lead-muted { color: var(--muted-dark); margin-bottom: 56px; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.col { border-top: 1px solid var(--line-dark); padding-top: 22px; }
.col h3 { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px; }
.col p { color: var(--muted-dark); }
@media (max-width: 860px) { .cols3 { grid-template-columns: 1fr; } }
/* The answer: the section's closing statement, centred */
.answer { margin-top: 120px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.answer__kicker { font-size: clamp(17px, 1.6vw, 19px); font-weight: 600; color: var(--muted-dark); }
.answer__title { font-size: clamp(40px, 6vw, 72px); line-height: 1.05; font-weight: 700; letter-spacing: -0.04em; max-width: 14ch; }
.answer__title span { display: block; }
.answer__grad {
  background: linear-gradient(90deg, var(--blue-soft), var(--teal) 55%, var(--green));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ══ SERVICES (homepage tiles) ══ */
.services { padding: 100px 12px 12px; background: var(--gray); }
.services__title {
  text-align: center; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; font-weight: 700;
  letter-spacing: -0.03em; max-width: 20ch; margin: 0 auto 56px; padding: 0 var(--gutter);
}
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tile {
  min-height: 660px; padding: 56px 32px 0; text-align: center; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
}
.tile--white { background: var(--canvas); color: var(--ink); }
.tile--dark { background: var(--black); color: #F5F5F7; }
.tile__chip { font-size: 14px; font-weight: 600; color: var(--blue); margin-bottom: 6px; }
.tile--dark .tile__chip { color: var(--blue-soft); }
.tile h3 { font-size: clamp(32px, 3.6vw, 44px); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 8px; }
.tile > p { font-size: clamp(18px, 1.8vw, 21px); line-height: 1.38; max-width: 30ch; margin-bottom: 18px; opacity: 0.88; }
.tile__list {
  list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.tile__list li {
  font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 980px;
  background: rgba(0,0,0,0.05); color: var(--ink-2);
}
.tile--dark .tile__list li { background: rgba(255,255,255,0.1); color: #E8E8ED; }
.tile__media {
  margin-top: auto; padding-top: 36px; width: 88%; display: block;
}
.tile__media img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  /* Photos with a background: feather the edges into the tile instead of a hard frame */
  -webkit-mask-image: radial-gradient(ellipse 62% 72% at 50% 64%, #000 40%, transparent 92%);
  mask-image: radial-gradient(ellipse 62% 72% at 50% 64%, #000 40%, transparent 92%);
  transition: transform 600ms var(--ease);
}
/* Transparent cut-outs (PNG/WebP with alpha): no feathering, no crop, sit on the tile's floor */
.tile__media--cutout { width: 100%; padding-top: 28px; padding-bottom: 28px; }
.tile__media--cutout img {
  aspect-ratio: auto; max-height: 440px; margin: 0 auto; object-fit: contain; object-position: bottom;
  -webkit-mask-image: none; mask-image: none;
}
/* Product shots on white: multiply makes any off-white in the photo vanish into the tile */
.tile--white .tile__media--cutout img { mix-blend-mode: multiply; }
.tile:hover .tile__media img { transform: translateY(-6px); }
@media (max-width: 1067px) { .tiles { grid-template-columns: 1fr; } .tile { min-height: 600px; } }

.promo {
  margin-top: 12px; min-height: 520px; padding: 80px 32px; text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--navy) 0%, var(--indigo) 48%, var(--blue) 78%, var(--green) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.promo__logo { width: 200px; height: auto; filter: brightness(0) invert(1); margin-bottom: 18px; }
.promo__chip {
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em; padding: 6px 14px; border-radius: 980px;
  background: rgba(255,255,255,0.14); margin-bottom: 18px;
}
.promo h3 { font-size: clamp(36px, 5.2vw, 56px); line-height: 1.07; font-weight: 700; letter-spacing: -0.035em; margin-bottom: 12px; }
.promo p { font-size: clamp(18px, 2vw, 21px); max-width: 44ch; opacity: 0.92; margin-bottom: 28px; }

/* ══ OUTCOMES GALLERY ══ */
.gallery { background: var(--gray); }
.gallery .h-lg { margin-bottom: 36px; max-width: 20ch; }
.gallery__track {
  --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  padding: 4px var(--edge) 8px; scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline-offset: -2px; border-radius: 0; }
.slide {
  position: relative; flex: 0 0 min(680px, 84vw); height: clamp(400px, 48vw, 480px);
  border-radius: var(--radius); padding: clamp(28px, 4vw, 44px); overflow: hidden;
  scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between;
}
.slide h3 { position: relative; font-size: clamp(26px, 3.2vw, 34px); line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; max-width: 18ch; }
.slide p { position: relative; font-size: clamp(17px, 1.8vw, 19px); line-height: 1.45; max-width: 44ch; opacity: 0.88; }
.slide--black { background: var(--black); color: #F5F5F7; }
.slide--white { background: #fff; color: var(--ink); }
.slide--photo { color: #fff; background: var(--navy); }
.slide--photo picture, .slide--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,19,32,0.7) 0%, rgba(11,19,32,0.1) 40%, rgba(11,19,32,0.85) 100%);
}
.slide--photo h3, .slide--photo p { z-index: 1; }
.gallery__controls { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 28px; padding: 0 var(--gutter); }
.dots { display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.06); border-radius: 980px; padding: 0 8px; height: 44px; }
.dot {
  width: 24px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 980px; background: rgba(0,0,0,0.3);
  transition: width 300ms var(--ease), background-color 300ms var(--ease);
}
.dot.is-current { width: 40px; }
.dot.is-current::before { width: 28px; background: var(--ink); }
.paddle {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,0.06); color: var(--ink); display: flex; align-items: center; justify-content: center;
  transition: background-color 200ms var(--ease), opacity 200ms var(--ease);
}
.paddle:hover:not(:disabled) { background: rgba(0,0,0,0.12); }
.paddle:disabled { opacity: 0.35; cursor: default; }
.paddle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ══ COMPARE ══ */
.compare .h-xl { margin-bottom: 56px; }
.compare__table { width: 100%; border-collapse: collapse; text-align: center; table-layout: fixed; }
.compare__table thead th { font-size: clamp(20px, 2.6vw, 28px); font-weight: 600; padding: 0 8px 24px; letter-spacing: -0.02em; }
.compare__table thead td { width: 26%; }
.compare__std { color: var(--muted); }
.compare__ours { color: var(--blue); }
.compare__table tbody th, .compare__table tbody td { border-top: 1px solid var(--line); padding: 22px 8px; }
.compare__table tbody th { font-size: 14px; font-weight: 500; color: var(--muted); text-align: start; }
.compare__table tbody td { font-size: clamp(16px, 2vw, 21px); font-weight: 600; line-height: 1.25; }
.compare__table tbody td:nth-of-type(1) { color: var(--muted); }
@media (max-width: 560px) {
  .compare__table thead td { width: 30%; }
  .compare__table tbody th { font-size: 12px; }
}

/* ══ PROCESS ══ */
.process { background: var(--gray); }
.process .lead-muted { margin-bottom: 48px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.step {
  position: relative; background: #fff; border-radius: var(--radius); padding: 36px 30px; min-height: 380px;
  display: flex; flex-direction: column;
}
/* Connector: an arrow node bridging the gap to the next phase */
.step:not(:last-child)::after {
  content: "→"; position: absolute; z-index: 1; top: 50%; inset-inline-start: 100%;
  width: 44px; height: 44px; margin-top: -22px; margin-inline-start: -6px;
  display: grid; place-items: center; border-radius: 50%;
  font-size: 20px; font-weight: 600; line-height: 1; color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--green));
  box-shadow: 0 0 0 6px var(--gray);
}
[dir="rtl"] .step:not(:last-child)::after { content: "←"; }
/* Linked cards (home steps and the AIMRI phases). Earlier cards stack above
   later ones, so each arrow stays in front even while the cards animate in
   (a moving card is its own layer and would otherwise cover the arrow). */
.steps > :nth-child(1), .phases > :nth-child(1) { z-index: 3; }
.steps > :nth-child(2), .phases > :nth-child(2) { z-index: 2; }
.steps > :nth-child(3), .phases > :nth-child(3) { z-index: 1; }
/* Side by side, they arrive in sequence: card, arrow, card, arrow, card */
@media (min-width: 901px) {
  .js .steps > .reveal:nth-child(2), .js .phases > .reveal:nth-child(2) { transition-delay: 600ms; }
  .js .steps > .reveal:nth-child(3), .js .phases > .reveal:nth-child(3) { transition-delay: 1200ms; }
  .js .steps > .reveal:not(:last-child)::after, .js .phases > .reveal:not(:last-child)::after {
    opacity: 0; scale: 0.4;
    transition: opacity 350ms var(--ease) 420ms, scale 450ms cubic-bezier(0.34, 1.56, 0.64, 1) 420ms;
  }
  .js .steps > .reveal:nth-child(2)::after, .js .phases > .reveal:nth-child(2)::after { transition-delay: 1020ms; }
  .js .steps > .reveal.is-visible::after, .js .phases > .reveal.is-visible::after { opacity: 1; scale: 1; }
}
.process .step:nth-child(1) { border-top: 4px solid var(--blue); }
.process .step:nth-child(2) { border-top: 4px solid var(--teal); }
.process .step:nth-child(3) { border-top: 4px solid var(--green); }
.step__meta { font-size: 14px; font-weight: 600; color: var(--blue); }
.step h3 { font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; margin: 10px 0 12px; }
.step p { color: var(--ink-2); }
.step .step__get { margin-top: auto; padding-top: 24px; font-size: 14px; font-weight: 600; color: var(--ink); }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .step { min-height: 0; }
  .step:not(:last-child)::after,
  [dir="rtl"] .step:not(:last-child)::after {
    content: "↓"; top: 100%; inset-inline-start: 50%; margin-top: -6px; margin-inline-start: -22px;
  }
}

/* ══ FAQ ══ */
.faq .h-lg { margin-bottom: 40px; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; min-height: 44px; padding: 24px 0; background: none; border: 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font: inherit; font-size: clamp(18px, 2vw, 21px); font-weight: 600; color: var(--ink); text-align: start;
}
.faq-plus {
  flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  transition: transform 250ms var(--ease);
}
.faq-q[aria-expanded="true"] .faq-plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 300ms var(--ease); }
.faq-a p { padding-bottom: 26px; color: var(--ink-2); max-width: 62ch; }

/* ══ CONTACT (black) ══ */
.contact { background: var(--black); color: #F5F5F7; }
.contact .lead-muted { color: var(--muted-dark); margin-bottom: 44px; }
.contact-form { display: grid; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-group { display: grid; gap: 6px; }
.form-group label { font-size: 14px; color: var(--muted-dark); }
.form-group input, .form-group textarea {
  width: 100%; font: inherit; font-size: 17px; color: #F5F5F7;
  background: var(--graphite); border: 1px solid var(--line-dark); border-radius: 12px;
  padding: 14px 16px; min-height: 52px; transition: border-color 200ms var(--ease);
}
.form-group textarea { resize: vertical; min-height: 140px; }
.form-group input::placeholder, .form-group textarea::placeholder { color: #86868B; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--blue-soft); outline: none; box-shadow: 0 0 0 3px rgba(77,132,255,0.35); }
.form-hint { font-size: 13px; color: #FFB340; min-height: 0; }
.form-hint:empty { display: none; }
.form-submit { justify-self: center; margin-top: 14px; border: 0; font-family: inherit; }
.form-submit:disabled { opacity: 0.6; cursor: progress; }
.form-note { text-align: center; font-size: 14px; color: #86868B; }

/* ══ FOOTER ══ */
.footer { background: var(--black); color: var(--muted-dark); font-size: 13px; padding: 0 0 40px; }
.footer .wrap { padding-top: 8px; }
.footer__note { line-height: 1.6; padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--line-dark); }
.footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.footer-logo img { width: 220px; height: auto; opacity: 0; transition: opacity 400ms var(--ease); }
.footer-logo img.is-ready { opacity: 1; }
html:not(.js) .footer-logo img { opacity: 1; }
.footer__desc { margin-top: 14px; max-width: 40ch; line-height: 1.55; }
.footer__col h3 { font-size: 13px; font-weight: 600; color: #F5F5F7; margin-bottom: 10px; }
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col a { color: var(--muted-dark); display: inline-block; padding: 5px 0; }
.footer__col a:hover { color: #F5F5F7; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; border-top: 1px solid var(--line-dark); padding-top: 18px; }
@media (max-width: 760px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__top > div:first-child { grid-column: 1 / -1; } }

/* ══ REVEAL ══ */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.js .reveal--scale { transform: translateY(28px) scale(0.97); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 100ms; }
.js .reveal[data-delay="2"] { transition-delay: 200ms; }
.js .reveal[data-delay="3"] { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .tile:hover .tile__media img { transform: none; }
  .js .steps > .reveal, .js .phases > .reveal, .js .steps > .reveal::after, .js .phases > .reveal::after { transition-delay: 0s !important; opacity: 1; scale: 1; }
}

@media (max-width: 600px) {
  :root { --gutter: 16px; --radius: 22px; }
  .section { padding: 80px 0; }
  .hero { padding-top: 120px; min-height: max(560px, 92svh); }
  .services { padding-top: 80px; }
  .tile { padding: 44px 20px 0; min-height: 0; }
  .promo { padding: 64px 20px; }
}

/* Arabic glyphs need more vertical room than Inter's tight display leading */
[dir="rtl"] .hero__title, [dir="rtl"] .h-xl, [dir="rtl"] .h-lg, [dir="rtl"] .services__title,
[dir="rtl"] .tile h3, [dir="rtl"] .promo h3, [dir="rtl"] .answer__title, [dir="rtl"] .slide h3 { line-height: 1.3; }