/* ==========================================================================
   Mentoro — design tokens and components
   Ported from the Claude Design prototype. Every value here comes from the
   prototype's inline styles; nothing is reinterpreted.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg:            #071A1F;
  --bg-band:       #0B2A31;
  --bg-deep:       #04161A;

  /* Accent */
  --accent:        #0AA9C4;
  --accent-hi:     #2FBFD8;
  --accent-14:     rgba(10, 169, 196, .14);
  --accent-35:     rgba(10, 169, 196, .35);
  --accent-40:     rgba(10, 169, 196, .40);

  /* Text ramp, lightest to dimmest */
  --text:          #F2F7F8;
  --text-2:        #E3ECEE;
  --text-3:        #D3E0E3;
  --text-4:        #B8CBD0;
  --text-muted:    #9DB3B9;
  --text-dim:      #6E8B92;

  /* Lines and strokes */
  --line:          rgba(255, 255, 255, .08);
  --line-soft:     rgba(255, 255, 255, .06);
  --line-faint:    rgba(255, 255, 255, .07);
  --line-pill:     rgba(255, 255, 255, .12);
  --stroke:        rgba(120, 190, 205, .28);
  --surface:       rgba(255, 255, 255, .035);
  --surface-hi:    rgba(255, 255, 255, .07);

  /* Type */
  --font-body:     Barlow, system-ui, sans-serif;
  --font-head:     'Barlow Condensed', system-ui, sans-serif;

  /* Layout */
  --wrap:          1440px;
  --pad-x:         clamp(20px, 5vw, 72px);
  --pad-y:         clamp(100px, 12vw, 180px);
  --pad-y-sm:      clamp(80px, 10vw, 160px);
  --header-h:      72px;

  /* Motion */
  --ease:          cubic-bezier(.2, .7, .2, 1);
}

/* Arabic pages swap the family and open up the heading leading, because
   Arabic shaping needs more vertical room than Barlow Condensed. */
[dir="rtl"] {
  --font-body: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-head: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

/* Uppercasing does nothing for Arabic script and mangles any Latin that is
   mixed into it, so every label that is uppercased in English stays as typed
   here. The tracking is kept — that part reads fine in both. */
[dir="rtl"] .kicker,
[dir="rtl"] .eyebrow,
[dir="rtl"] .tech-col__label,
[dir="rtl"] .site-footer__label,
[dir="rtl"] .detail__label,
[dir="rtl"] .status span,
[dir="rtl"] .product-status,
[dir="rtl"] .scroll-hint { text-transform: none; }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

a { color: var(--accent); }
a:hover { color: var(--accent-hi); }

::selection { background: var(--accent); color: var(--bg-deep); }

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

img { max-width: 100%; }

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes drift1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(12vw, 10vh, 0) scale(1.15); }
}
@keyframes drift2 {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-10vw, -8vh, 0) scale(.95); }
}
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes spinr   { to { transform: rotate(-360deg); } }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes caret   { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes rise    { from { opacity: 0; transform: translate3d(0, 32px, 0); } to { opacity: 1; transform: none; } }
@keyframes pulse   { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes float   { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -14px, 0); } }
@keyframes ping    { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
@keyframes grow    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pop     { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes dash    { to { stroke-dashoffset: 0; } }
/* The Kifal mock floats in perspective, so its keyframe has to carry the
   rotation too — a bare translate would reset the 3D tilt mid-cycle. */
@keyframes float3d {
  0%, 100% { transform: translate3d(0, 0, 0) rotateX(6deg) rotateY(-10deg); }
  50%      { transform: translate3d(0, -12px, 0) rotateX(6deg) rotateY(-10deg); }
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

.page {
  position: relative;
  background: var(--bg);
  color: var(--text);
  min-height: 100svh;
  overflow-x: clip;
}

/* Slow-drifting ambient light behind everything. Fixed, so it never
   contributes to scroll height. */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.ambient span {
  position: absolute;
  border-radius: 50%;
  display: block;
}
.ambient .a1 {
  width: 70vw; height: 70vw; left: -20vw; top: -25vw;
  background: radial-gradient(circle, rgba(10, 169, 196, .16), transparent 60%);
  animation: drift1 32s ease-in-out infinite alternate;
}
.ambient .a2 {
  width: 60vw; height: 60vw; right: -25vw; bottom: -30vw;
  background: radial-gradient(circle, rgba(10, 169, 196, .12), transparent 60%);
  animation: drift2 40s ease-in-out infinite alternate;
}
/* Inner pages mirror the two orbs so consecutive pages don't look identical. */
.ambient--alt .a1 {
  width: 70vw; height: 70vw; right: -25vw; top: -25vw; left: auto;
  background: radial-gradient(circle, rgba(10, 169, 196, .14), transparent 60%);
  animation: drift2 34s ease-in-out infinite alternate;
}
.ambient--alt .a2 {
  width: 60vw; height: 60vw; left: -25vw; bottom: -30vw; right: auto;
  background: radial-gradient(circle, rgba(10, 169, 196, .10), transparent 60%);
  animation: drift1 40s ease-in-out infinite alternate;
}

.page-body { position: relative; z-index: 1; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section       { padding-block: var(--pad-y); }
.section--sm   { padding-block: var(--pad-y-sm); }
.section--tight{ padding-block: clamp(72px, 9vw, 140px); }

/* The one soft-gradient band per page — it replaces boxed cards. */
.band {
  background: linear-gradient(180deg,
    rgba(11, 42, 49, 0) 0%,
    var(--bg-band) 18%,
    var(--bg-band) 82%,
    rgba(11, 42, 49, 0) 100%);
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.kicker {
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.eyebrow {
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.eyebrow--dim { color: var(--text-dim); }

.h1 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(52px, 6.6vw, 100px);
  line-height: .95;
  letter-spacing: -.03em;
  margin: 0;
  text-wrap: balance;
}
.h1--hero {
  font-size: clamp(64px, 9.6vw, 148px);
  line-height: .92;
}
.h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(44px, 5.4vw, 80px);
  line-height: .98;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}
.h2--sm {
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -.02em;
}
/* The centred section head on service pages runs full width; only the Home
   and Services band heads are measured to 760px. */
.h2--wide { font-size: clamp(40px, 5.4vw, 80px); }
.h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(30px, 2.8vw, 42px);
  line-height: 1.05;
  margin: 0;
  color: var(--text);
}
.h3--fixed {
  font-size: 32px;
  line-height: 1.05;
}

/* Arabic headings need looser leading and no negative tracking. The amount
   differs by role, so these are set individually rather than in one blanket
   rule — .h2--sm in particular keeps its tight leading. */
[dir="rtl"] .h1,
[dir="rtl"] .h2,
[dir="rtl"] .h3 { letter-spacing: 0; }
[dir="rtl"] .h1       { line-height: 1.18; }
[dir="rtl"] .h1--hero { line-height: 1.14; }
[dir="rtl"] .h1--contact { line-height: 1.18; }
.h1--contact { line-height: .92; }
[dir="rtl"] .h2       { line-height: 1.2; }
[dir="rtl"] .h2--sm   { line-height: 1; }
[dir="rtl"] .h3       { line-height: 1.3; }

.lede {
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.5;
  color: var(--text-4);
  margin: 0;
  max-width: 46ch;
}
.lede--sm {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.6;
  max-width: 56ch;
}
/* The standfirst beside an inner-page headline (About, Services, Contact)
   sits a step smaller than the Home hero's. */
.lede--page {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.65;
  max-width: 42ch;
}

.body-text {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  height: 58px;
  padding-inline: 34px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg-deep);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background .3s, transform .3s, box-shadow .3s;
}
.btn:hover {
  background: var(--accent-hi);
  color: var(--bg-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px var(--accent-35);
}
.btn--sm {
  height: 40px;
  padding-inline: 20px;
  font-size: 14px;
  letter-spacing: .01em;
  white-space: nowrap;
}
.btn--sm:hover { transform: translateY(-1px); box-shadow: 0 8px 28px var(--accent-35); }

/* Secondary action: a text link whose arrow extends on hover. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  color: var(--text);
  text-decoration: none;
  transition: gap .3s, color .3s;
}
.arrow-link:hover { gap: 16px; color: var(--accent); }
/* The arrow is a separate element and flips with direction, never baked in. */
[dir="rtl"] .arrow-link svg { transform: scaleX(-1); }

.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text-3);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--line-pill);
  border-radius: 999px;
  transition: color .3s, border-color .3s, background .3s;
}
.pill-link:hover {
  color: var(--bg-deep);
  background: var(--accent);
  border-color: var(--accent);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(7, 26, 31, 0);
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: background .5s ease, border-color .5s ease, backdrop-filter .5s ease;
  font-family: var(--font-body);
}
/* Frosts once the page has scrolled past the bar. */
.site-header.is-stuck {
  background: rgba(7, 26, 31, .72);
  border-bottom-color: var(--line-soft);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  height: var(--header-h);
  padding-inline: var(--pad-x);
  max-width: var(--wrap);
  margin-inline: auto;
}
.site-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  transition: opacity .3s;
}
.site-header__logo:hover { opacity: .8; }
.site-header__logo img {
  height: clamp(42px, 5.2vw, 56px);
  width: auto;
  display: block;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  margin-inline-start: auto;
}
.site-nav a {
  font-size: 15px;
  color: var(--text-4);
  text-decoration: none;
  padding-block: 8px;
  transition: color .3s;
}
.site-nav a:hover { color: #fff; }
.site-nav a.has-caret { display: inline-flex; align-items: center; gap: 6px; }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 26px);
  flex: 0 0 auto;
  margin-inline-start: auto;
}
.lang-switch {
  font-size: 15px;
  color: var(--text-4);
  text-decoration: none;
  transition: color .3s;
}
.lang-switch:hover { color: #fff; }

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-inline-end: -10px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

/* Full-screen menu panel. It is a SIBLING of the header, never a child:
   the header's backdrop-filter creates a containing block, which would
   otherwise clip this fixed overlay to the 72px bar. */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg-deep);
  padding-inline: clamp(20px, 6vw, 48px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}
.menu-panel.is-open { opacity: 1; visibility: visible; }
.menu-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}
.menu-panel__top img { height: 46px; width: auto; display: block; }
.menu-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-inline-end: -10px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.menu-panel__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: 24px 16px;
}
.menu-panel__main a {
  font-family: var(--font-head);
  font-size: 34px;
  line-height: 1.25;
  color: var(--text);
  text-decoration: none;
  padding-block: 6px;
}
.menu-panel__services {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px 24px;
  padding-block: 24px;
  border-top: 1px solid var(--line);
}
.menu-panel__services a {
  font-size: 16px;
  color: var(--text-muted);
  text-decoration: none;
}
.menu-panel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-block: 8px 48px;
}
.menu-panel__foot .btn { height: 52px; padding-inline: 28px; font-size: 16px; }
.menu-panel__foot .lang-switch {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding-inline: 20px;
  font-size: 16px;
}
/* Tap-to-call row, phones only. */
.menu-panel__call {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  color: var(--accent);
  text-decoration: none;
  padding-block: 14px;
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 140px var(--pad-x) 100px;
}
.hero__orbit {
  position: absolute;
  left: 50%; top: 50%;
  width: min(120vw, 1100px);
  aspect-ratio: 1;
  margin-left: min(-60vw, -550px);
  margin-top: min(-60vw, -550px);
  pointer-events: none;
  opacity: .8;
}
.hero__inner {
  position: relative;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
}
.scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.scroll-hint::before { content: var(--scroll-label, ""); }
.scroll-hint i {
  width: 1px;
  height: 40px;
  background: linear-gradient(var(--accent), transparent);
  display: block;
  animation: pulse 2.4s ease-in-out infinite;
}

/* Inner-page hero: breadcrumb, headline, lede, CTA, line motif. The bottom
   measure differs by page type — these mirror the prototype exactly. */
.page-hero { padding: clamp(120px, 16vw, 200px) var(--pad-x) clamp(80px, 10vw, 140px); }
.page-hero--tall  { padding-top: clamp(160px, 18vw, 240px); }
.page-hero--first { padding-top: clamp(140px, 16vw, 200px); }   /* Venture Building */
.page-hero--short { padding-bottom: clamp(48px, 8vw, 96px); }   /* Products */
.page-hero--mid   { padding-bottom: clamp(64px, 10vw, 140px); } /* SalonOS, QListy */

/* The headline and standfirst shared by the service and product heroes. */
.h1--inner {
  font-size: clamp(44px, 6.6vw, 100px);
  max-width: 15ch;
  margin-bottom: 28px;
}
.lede--inner { margin-bottom: 40px; }

/* Kifal leads with the interface mock, so its hero splits evenly and the
   headline steps down to sit beside it. */
.grid-2.hero-kifal { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.hero-kifal .h1--inner {
  font-size: clamp(50px, 6vw, 92px);
  max-width: 13ch;
  margin-bottom: 32px;
}
/* The status headline: SalonOS and QListy share one measure, Kifal another. */
.product-status {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0 auto;
  max-width: 20ch;
}
.product-status--kifal {
  font-size: clamp(36px, 4.4vw, 64px);
  max-width: 22ch;
  margin: 0 0 40px;
  text-wrap: balance;
}
[dir="rtl"] .product-status { letter-spacing: 0; line-height: 1.25; }

.hero-kifal .lede--inner {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.65;
  max-width: 54ch;
  margin-bottom: 44px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color .3s;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { color: var(--text-3); }
[dir="rtl"] .breadcrumb svg { transform: scaleX(-1); }

/* Entrance: each hero element rises in sequence. */
.rise    { animation: rise 1s var(--ease) both; }
.rise-1  { animation: rise 1.1s var(--ease) .1s both; }
.rise-2  { animation: rise 1.1s var(--ease) .25s both; }
.rise-3  { animation: rise 1.1s var(--ease) .4s both; }
.rise-4  { animation: rise 1.2s var(--ease) .3s both; }

/* The typewriter caret is drawn, never typed. Keeping it out of the DOM means
   it can't land in the H1 text that crawlers and screen readers read — the
   headline reads "Digital products, built for what's next." and nothing else. */
[data-typewriter]::after {
  content: "|";
  color: var(--accent);
  font-weight: 400;
  margin-inline-start: .06em;
  opacity: 0;
  transition: opacity .6s;
}
[data-typewriter].is-typing::after {
  opacity: 1;
  transition: none;
  animation: caret 1s steps(1) infinite;
}

/* --------------------------------------------------------------------------
   Grids
   -------------------------------------------------------------------------- */

.grid-2 {
  display: grid;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.grid-2--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.grid-2--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.grid-2--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.grid-2--4-7 { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.grid-2--7-4 { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; }

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(48px, 5vw, 72px) clamp(32px, 4vw, 56px);
}
.grid-auto--wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.grid-auto--steps {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(40px, 4vw, 56px) clamp(28px, 3vw, 48px);
}
.grid-auto--tech {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 48px);
}

/* Section title that holds while its content scrolls past. */
.sticky-title { position: sticky; top: 120px; }

.section-head {
  max-width: 820px;
  margin-bottom: clamp(64px, 7vw, 104px);
}
.section-head .eyebrow { display: block; margin-bottom: 22px; }
.section-head--center {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: clamp(56px, 6vw, 88px);
}
/* Service pages let the centred head run the full measure. */
.section-head--wide {
  max-width: none;
  margin-bottom: clamp(56px, 6vw, 96px);
}

/* --------------------------------------------------------------------------
   "What we do" — four full-width editorial rows
   -------------------------------------------------------------------------- */

.rows { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: start;
  padding-block: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--line);
}
.row__head { display: flex; align-items: baseline; gap: 20px; }
.row__num {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  color: rgba(10, 169, 196, .4);
}
.row__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(32px, 3.8vw, 50px);
  line-height: 1.02;
  margin: 0;
  color: var(--text);
}
[dir="rtl"] .row__title { line-height: 1.25; }
/* Standalone numerals sit on a 1.2 leading in Arabic; at 1 they clip. */
[dir="rtl"] .row__num,
[dir="rtl"] .value__num { line-height: 1.2; }
.row__body { display: flex; flex-direction: column; gap: 18px; }

/* --------------------------------------------------------------------------
   Client marquee
   -------------------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 96px;
  width: max-content;
  padding-inline-end: 96px;
  animation: marquee 60s linear infinite;
}
/* Logos sit quietly at 60% so they read as a texture, not a claim. */
.marquee__track img { width: auto; opacity: .6; }

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */

.product-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 44px 40px 40px;
  border-radius: 28px;
  background: var(--surface);
  text-decoration: none;
  min-height: 280px;
  transition: background .4s, transform .4s var(--ease);
}
.product-card:hover { background: var(--surface-hi); transform: translateY(-6px); }
.product-card h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  margin: 0;
  color: var(--text);
}
.product-card p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
.status {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 24px;
}
.status i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: block;
  flex: 0 0 auto;
}
.status i.is-live { animation: none; }
.status i.is-building { animation: pulse 2.6s ease-in-out infinite; }
.status span {
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-4);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Technology strip
   -------------------------------------------------------------------------- */

.tech-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 28px;
  margin-bottom: clamp(36px, 4vw, 56px);
  border-bottom: 1px solid var(--line-faint);
}
.tech-head__note { font-size: 16px; color: var(--text-dim); }
.tech-col { display: flex; flex-direction: column; gap: 14px; }
.tech-col__label {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
/* Brand names as condensed wordmarks — low-opacity white, brightening on
   hover. Set as text, never as third-party logo files. */
.tech-name {
  font-family: var(--font-head);
  font-size: clamp(21px, 1.8vw, 26px);
  line-height: 1.15;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .45);
  cursor: default;
  transition: color .35s;
}
.tech-name:hover { color: rgba(255, 255, 255, .95); }

/* --------------------------------------------------------------------------
   "Why Mentoro" / numbered reasons
   -------------------------------------------------------------------------- */

.reasons { display: flex; flex-direction: column; gap: clamp(48px, 5vw, 72px); }
.reason {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.reason__num {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .16em;
  color: var(--accent);
  padding-top: 12px;
}
.reason h3 { margin-bottom: 14px; }
.reason p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   "What you get" checklist
   -------------------------------------------------------------------------- */

.checks { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.check {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.check__mark {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-14);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}
.check__text {
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.45;
  color: var(--text-2);
  max-width: 56ch;
}

/* --------------------------------------------------------------------------
   "How it works" steps
   -------------------------------------------------------------------------- */

.step {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.step__num {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 96px;
  line-height: 1;
  color: var(--accent);
}
.step p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 30ch;
}

.center-action {
  display: flex;
  justify-content: center;
  margin-top: clamp(56px, 6vw, 88px);
}

/* --------------------------------------------------------------------------
   Values / stand-for cards
   -------------------------------------------------------------------------- */

.value { display: flex; flex-direction: column; gap: 18px; }
.value__num {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 64px;
  line-height: 1;
  color: rgba(10, 169, 196, .35);
}
.value p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Founder portrait
   -------------------------------------------------------------------------- */

.portrait { position: relative; }
.portrait::before {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 169, 196, .22), transparent 65%);
  pointer-events: none;
}
.portrait img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 32px;
  filter: saturate(.75) contrast(1.05);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------------------
   Services index
   -------------------------------------------------------------------------- */

/* Each group is its own band: a sticky label column beside a card grid. */
.svc-group {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(80px, 10vw, 140px) var(--pad-x) 0;
}
.svc-group:first-of-type { padding-top: clamp(48px, 6vw, 96px); }
.svc-group:last-of-type  { padding-bottom: clamp(80px, 10vw, 140px); }
.svc-group__label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--text);
}
[dir="rtl"] .svc-group__label { letter-spacing: 0; line-height: 1.2; }

.svc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 48px);
}
/* The negative margin lets the hover surface bleed past the grid cell without
   shifting the layout. */
.svc-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  padding: 28px 28px 26px;
  margin: -28px;
  border-radius: 24px;
  transition: background .4s, transform .4s var(--ease);
}
.svc-item:hover {
  background: rgba(255, 255, 255, .05);
  transform: translateY(-4px);
}
.svc-item__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.05;
  margin: 0;
  color: var(--text);
}
[dir="rtl"] .svc-item__name { line-height: 1.3; }
.svc-item p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
.svc-item__go { margin-top: 8px; color: var(--accent); }
[dir="rtl"] .svc-item__go svg { transform: scaleX(-1); }

/* Engagement models — a numbered token over centred copy. */
.model {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.model__num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(10, 169, 196, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 20px;
  color: var(--accent);
  flex: 0 0 auto;
}
.model__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.05;
  margin: 8px 0 0;
  color: var(--text);
}
[dir="rtl"] .model__title { line-height: 1.3; }
.model p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 30ch;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.detail { display: flex; flex-direction: column; }
.detail__label {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
  margin-bottom: 10px;
}
.detail a, .detail > span {
  font-size: 19px;
  line-height: 1.5;
  color: var(--text);
  text-decoration: none;
  transition: color .3s;
}
.detail a:hover { color: var(--accent); }
.detail__note {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 4px;
}

.form { display: flex; flex-direction: column; }

/* Fields are underlines, not boxes — the only drawn edge is the rule the
   text sits on, which brightens to the accent on focus. */
.field { display: flex; flex-direction: column; gap: 10px; }
.field > span {
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.field .input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color .3s;
}
.field .input,
.field select { height: 48px; padding: 0; }
.field textarea { padding: 12px 0; line-height: 1.5; resize: vertical; }
.field .input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--accent); }
.field select option { background: var(--bg-band); color: var(--text); }

.form__note { font-size: 15px; color: var(--text-muted); margin: 0; }
.form__thanks {
  display: none;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text);
}
.form.is-sent .form__thanks { display: block; }
.form.is-sent .form__fields { display: none; }

/* Questions: an open grid, no rules or boxes between the items. */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(40px, 4vw, 56px) clamp(40px, 5vw, 80px);
  max-width: 1100px;
  margin-inline: auto;
}
.faq h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 12px;
  color: var(--text);
}
.faq p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */

/* Legal pages are a measured column: spacing comes from the flex gaps, not
   from margins on the headings. */
.legal {
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(32px, 5vw, 64px) var(--pad-x) clamp(64px, 10vw, 160px);
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 48px);
}
.legal__block { display: flex; flex-direction: column; gap: 12px; }
.legal h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  margin: 0;
  color: var(--text);
}
.legal p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
  max-width: 70ch;
}
.legal__updated { font-size: 15px; color: var(--text-dim); margin: 0; }

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.closing { position: relative; overflow: hidden; font-family: var(--font-body); }
.closing::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: min(80vw, 900px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 169, 196, .16), transparent 62%);
  pointer-events: none;
}
.closing__inner {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(120px, 14vw, 200px) var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.closing h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(48px, 6.4vw, 92px);
  line-height: .98;
  letter-spacing: -.025em;
  color: var(--text);
  margin: 0 0 24px;
  text-wrap: balance;
}
[dir="rtl"] .closing h2 { letter-spacing: 0; line-height: 1.2; }
.closing p {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 44px;
  max-width: 44ch;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { font-family: var(--font-body); }
.site-footer__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 96px var(--pad-x) 40px;
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 56px 48px;
}
.site-footer__brand img {
  height: 62px;
  width: auto;
  display: block;
  margin-bottom: 24px;
}
.site-footer__brand p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  max-width: 32ch;
}
.site-footer__label {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 22px;
  font-weight: 600;
}
.site-footer__links { display: flex; flex-direction: column; gap: 12px; }
.site-footer__links--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.site-footer a {
  font-size: 16px;
  color: var(--text-3);
  text-decoration: none;
  transition: color .3s;
}
.site-footer a:hover { color: var(--accent); }
.site-footer__address { font-size: 16px; line-height: 1.55; color: var(--text-3); }
.site-footer__social { display: flex; gap: 20px; margin-top: 8px; }
.site-footer__social a { color: var(--accent); }
.site-footer__social a:hover { color: var(--accent-hi); }
/* Bottom row is left-aligned in two stacked lines, with enough bottom
   padding that the WhatsApp pill never sits on top of it. */
.site-footer__bottom {
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
  padding-bottom: 104px;
}
.site-footer__trademark {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Floating WhatsApp pill
   -------------------------------------------------------------------------- */

.wa-pill {
  position: fixed;
  /* Physical `right`, not `inset-inline-end`: the design keeps the pill in the
     bottom-right corner in Arabic too, where a logical property would flip it. */
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding-inline: 20px 26px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg-deep);
  text-decoration: none;
  box-shadow: 0 14px 40px rgba(4, 22, 26, .5);
  transition: gap .35s var(--ease), padding .35s var(--ease), background .3s, transform .3s;
}
.wa-pill:hover {
  background: var(--accent-hi);
  color: var(--bg-deep);
  transform: translateY(-2px);
  box-shadow: 0 18px 46px var(--accent-40);
}
.wa-pill__ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid rgba(10, 169, 196, .5);
  animation: ping 2.8s var(--ease) infinite;
  pointer-events: none;
}
.wa-pill svg { flex: 0 0 auto; }
.wa-pill__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Scroll reveal — set by JS at mount so content is never hidden without JS
   -------------------------------------------------------------------------- */

[data-reveal][data-revealed] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .site-nav { display: none; }
  .burger { display: inline-flex; }
}

@media (max-width: 900px) {
  .grid-2--7-5,
  .grid-2--5-7,
  .grid-2--4-8,
  .grid-2--7-4 { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: minmax(0, 1fr); }
  .svc-item { grid-template-columns: minmax(0, 1fr) auto; }
  .svc-item p { grid-column: 1 / -1; }
  /* Sticky titles release so they don't strand a heading mid-column. */
  .sticky-title { position: static; }
  [data-stack] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-sticky] { position: static !important; }
}

@media (max-width: 640px) {
  [data-visual] { max-width: 280px !important; }
  .hero__actions { gap: 20px; }
  .step__num { font-size: 76px; }
  .site-footer__links--2col { grid-template-columns: 1fr; }
  /* The pill collapses to an icon so it stops covering content. */
  .wa-pill__label { display: none; }
  .wa-pill { padding: 0; width: 58px; justify-content: center; }
}

@media (max-width: 560px) {
  .site-header__actions .lang-switch,
  .site-header__actions .btn { display: none; }
}

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