/* ==========================================================================
   MeedAgency — Black Platinum Minimal
   Public site stylesheet. Tokens first, then components.
   Direction-aware via CSS logical properties + [dir="rtl"] overrides.
   ========================================================================== */

/* ==========================================================================
   Webfonts — self-hosted
   Previously loaded from fonts.googleapis.com, which cost a DNS + TCP + TLS
   handshake to one new origin just to discover a second (fonts.gstatic.com).
   These are the same files Google served, now on our own warm connection with
   the immutable caching in .htaccess.

   Both are VARIABLE fonts: one file covers the whole weight range, so the full
   range is declared — it costs the same bytes as a narrow one and keeps the
   heavier weights used by demos.css working.

   latin subset only, matching what the site actually downloaded before. Arabic
   has no coverage in either family and falls back to system fonts, exactly as
   it did with Google Fonts.
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-var.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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-var.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;
}

/* ---- Design tokens ---- */
:root {
  /* Brand palette */
  --black: #111111;
  --bg-dark: #0A0A0A;
  --surface: #141414;
  --surface-2: #1A1A1A;
  --platinum: #CFCFCF;
  --white: #FFFFFF;
  --text-secondary: #B3B3B3;
  --text-tertiary: #777777;
  --border: #2A2A2A;
  --border-strong: #3A3A3A;
  --hero-bg: #080808;
  --hero-scrim: rgba(8, 8, 8, 0.9); /* legibility wash over the device behind hero copy */

  /* Typography */
  --font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-alt: 'Plus Jakarta Sans', var(--font-primary);

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 7.5rem;

  /* Layout */
  --container: 1240px;
  --container-half: 620px; /* = --container / 2, used for hero bleed math */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  /* Effects */
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
  --transition: 0.25s ease;
  --ring: 0 0 0 3px rgba(207, 207, 207, 0.18);
}

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

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  background-color: var(--bg-dark);
  color: var(--text-secondary);
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; transition: color var(--transition); }

ul { list-style: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

input,
textarea,
select { font-family: inherit; font-size: 1rem; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-alt);
  color: var(--white);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
}

::selection { background: var(--platinum); color: var(--black); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

/* ---- Layout helpers ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.section { padding-block: var(--space-2xl); }

.section--tight { padding-block: var(--space-xl); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--platinum);
  margin-bottom: var(--space-sm);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--border-strong);
}

.section-head { max-width: 720px; margin-bottom: var(--space-lg); }
.section-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}
.section-head__row .section-head { margin-bottom: 0; }

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: var(--space-sm);
}

.section-subtitle { color: var(--text-secondary); font-size: 1.05rem; max-width: 60ch; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform var(--transition), background-color var(--transition),
              color var(--transition), border-color var(--transition);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--white); color: var(--black); }
.btn--primary:hover { background: var(--platinum); }

.btn--outline { border-color: var(--border-strong); color: var(--white); }
.btn--outline:hover { border-color: var(--platinum); background: rgba(255, 255, 255, 0.04); }

.btn--ghost { color: var(--platinum); padding-inline: 0.5rem; }
.btn--ghost:hover { color: var(--white); }

.btn--block { width: 100%; }
.btn--lg { padding: 1rem 2rem; font-size: 1rem; }

/* Arrow that flips for RTL */
.btn .arrow,
.link-arrow .arrow { transition: transform var(--transition); }
.btn:hover .arrow,
.link-arrow:hover .arrow { transform: translateX(4px); }
[dir="rtl"] .arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arrow,
[dir="rtl"] .link-arrow:hover .arrow { transform: scaleX(-1) translateX(4px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--platinum);
  font-size: 0.95rem;
}
.link-arrow:hover { color: var(--white); }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  border-block-end: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
  animation: header-fade-down 0.7s ease both; /* fade down on page load */
}
@keyframes header-fade-down {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
.site-header.is-scrolled {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block-end-color: rgba(255, 255, 255, 0.06);
}

/* 25% logo / 50% nav / 25% actions */
.nav {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: var(--space-md);
  height: 80px;
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.brand__logo {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  object-fit: contain;
}
.brand__name {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}

/* Clean centered navigation — underline accent, no background pills. */
.nav__links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__links a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  padding-block: 0.25rem;
  transition: color 0.3s ease;
}
.nav__links a:hover { color: var(--white); }
.nav__links a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: -5px;
  width: 0;
  height: 1px;
  background: var(--platinum);
  transition: width 0.3s ease;
}
.nav__links a:hover::after,
.nav__links a.is-active::after { width: 100%; }
.nav__links a.is-active { color: var(--white); }

.nav__actions { justify-self: end; display: flex; align-items: center; gap: 0.75rem; }

/* Get a Quote CTA — bordered/outline pill matching the reference header */
.nav__cta {
  height: 42px;
  padding: 0 22px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
  font-weight: 600;
  font-size: 14px;
}
.nav__cta:hover {
  background: var(--white);
  color: #111111;
  border-color: var(--white);
  transform: translateY(-2px);
}

/* Language switcher */
.lang-switch { position: relative; }
.lang-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  font-weight: 500;
  height: 42px;
  padding: 0 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.lang-switch__toggle:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07); }
.lang-switch__menu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 150px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.4rem;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.lang-switch.is-open .lang-switch__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-switch__menu a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 7px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.lang-switch__menu a:hover { background: var(--surface-2); color: var(--white); }
.lang-switch__menu a.is-active { color: var(--white); background: var(--surface-2); }

/* Mobile nav toggle — round pill matching the language/CTA aesthetic */
.nav__toggle {
  display: none;
  width: 42px; height: 42px;
  flex-shrink: 0;
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.nav__toggle:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); }
.nav__toggle span {
  position: relative;
  width: 20px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: background var(--transition);
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: ""; position: absolute; inset-inline: 0;
  height: 2px; background: var(--white); border-radius: 2px;
  transition: transform var(--transition);
}
.nav__toggle span::before { inset-block-start: -6px; }
.nav__toggle span::after { inset-block-start: 6px; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* Language options shown inside the fullscreen mobile menu (hidden on desktop) */
.nav__mobile-lang { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(860px, 92vh);
  padding-block: clamp(7.5rem, 14vh, 9.5rem) clamp(3.5rem, 8vh, 5.5rem);
  background: var(--hero-bg);
  overflow: hidden;
}
/* Subtle platinum diagonal lines, faded toward the device side. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.04) 0 1px,
    transparent 1px 118px
  );
  -webkit-mask-image: radial-gradient(circle at 74% 42%, #000, transparent 68%);
          mask-image: radial-gradient(circle at 74% 42%, #000, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
/* Soft platinum glow behind the device. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 42%, rgba(255, 255, 255, 0.1), transparent 31%),
    linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.025) 100%);
  pointer-events: none;
  z-index: 0;
}
/* Flex item, so z-index lifts the content above the bg pseudo-layers without
   creating a positioning context — the device pins to .hero (the full-width section). */
.hero > .container { z-index: 1; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
/* min-width:0 stops the image's intrinsic size from blowing out the track. */
.hero__inner { max-width: 600px; min-width: 0; }

.hero__label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 18px;
}
.hero__title {
  font-size: clamp(2.65rem, 3.75vw, 3.35rem);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--white);
  max-width: 650px;
}
.hero__subtitle {
  font-size: 18px;
  line-height: 1.62;
  color: var(--text-secondary);
  max-width: 480px;
  margin-top: 28px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 36px; }
.hero__actions .btn {
  min-width: 172px;
  height: 52px;
  padding: 0 30px;
  border-radius: 6px;
  font-size: 0.94rem;
}
.hero .btn--outline {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.24);
}
.hero .btn--outline:hover { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.08); }

/* Right column: the device image, vertically centred, on the inline-end side.
   It extends into the end gutter so it reads large at the right edge — no overlap with copy. */
.hero__visual {
  min-width: 0;
  justify-self: start;
  width: calc(100% + 50vw - min(50vw, var(--container-half)) + 1.5rem);
}
.hero__visual picture {
  display: block;
}
.hero__device {
  width: 100%;
  max-width: 900px;
  height: auto;
  margin-inline-start: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 44px 130px rgba(0, 0, 0, 0.72);
}

/* Trusted-by row */
.hero__trust { margin-top: 62px; }
.hero__trust-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 1.15rem;
}
.hero__industries {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.1rem, 2.7vw, 2.25rem);
}
.hero__industries li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  line-height: 1;
  color: var(--platinum);
  white-space: nowrap;
}
.hero__industries svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--platinum); }

/* RTL: mirror the glow + diagonal weight to follow the (flipped) device. */
[dir="rtl"] .hero::before {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 130px);
  -webkit-mask-image: radial-gradient(circle at 28% 42%, #000, transparent 72%);
          mask-image: radial-gradient(circle at 28% 42%, #000, transparent 72%);
}
[dir="rtl"] .hero::after {
  background:
    radial-gradient(circle at 28% 42%, rgba(255, 255, 255, 0.1), transparent 31%),
    linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.025) 100%);
}

/* ==========================================================================
   Services
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
  min-height: 260px;
  min-width: 0;
}
.service-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-4px);
  background: var(--surface-2);
}
.service-card__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--platinum);
  overflow: hidden;
}
.service-card__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-card__title { font-size: 1.2rem; color: var(--white); }
.service-card__desc { font-size: 0.95rem; color: var(--text-secondary); flex: 1; }
.service-card .link-arrow { font-size: 0.9rem; }

/* ==========================================================================
   Work / Projects — bento grid
   ========================================================================== */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px;
  gap: 1.25rem;
}
.project-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  isolation: isolate;
}
.project-card.is-featured { grid-column: span 2; grid-row: span 2; }
/* Below-fold work grid: skip rendering offscreen cards so their cover images
   aren't fetched until needed. A background-image has no loading="lazy", and
   this is the CSS-only equivalent. Safe here specifically because card height
   comes from grid-auto-rows (a fixed track), not from content — so size
   containment can't shift the layout. Browsers without support just render
   normally. */
.project-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
}
.project-card__media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.5s ease;
  z-index: -2;
}
.project-card__media--empty {
  background: linear-gradient(150deg, var(--surface-2), var(--black) 70%);
}
.project-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.92) 8%, rgba(10,10,10,0.25) 55%, transparent);
  z-index: -1;
  transition: opacity var(--transition);
}
.project-card:hover .project-card__media { transform: scale(1.06); }
.project-card__body {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.project-card__cat {
  align-self: flex-start;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--platinum);
  background: rgba(20,20,20,0.7);
  border: 1px solid var(--border);
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  margin-bottom: 0.3rem;
}
.project-card__title { font-size: 1.3rem; color: var(--white); }
.project-card.is-featured .project-card__title { font-size: 1.7rem; }
.project-card__desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  max-width: 46ch;
  opacity: 0;
  max-height: 0;
  transition: opacity var(--transition), max-height var(--transition);
}
.project-card:hover .project-card__desc { opacity: 1; max-height: 80px; }
.project-card__link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 0.5rem;
  font-size: 0.85rem; font-weight: 600; color: var(--white);
}

/* ==========================================================================
   Built For Your Industry
   ========================================================================== */
.industries__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}
.industries__head-main { max-width: 720px; }
.industries__head-desc {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 42ch;
  text-align: end;
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.industry-card {
  display: flex;
  flex-direction: column;
  min-height: 460px;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.industry-card:hover {
  transform: scale(1.02);
  border-color: var(--platinum);
  box-shadow: 0 24px 60px -22px rgba(207, 207, 207, 0.22);
}
.industry-card__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 220px;
  background-size: cover;
  background-position: center;
}
.industry-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.9), transparent 55%);
}
.industry-card__media--empty {
  background: linear-gradient(150deg, var(--surface-2), var(--black) 75%);
  display: grid;
  place-items: center;
}
.industry-card__media--empty::after { display: none; }
.industry-card__placeholder { color: var(--border-strong); }
.industry-card__placeholder svg { width: 72px; height: 72px; }
.industry-card__body {
  position: relative;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.industry-card__badge {
  align-self: flex-start;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--platinum);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
}
.industry-card__title { font-size: 1.35rem; color: var(--white); }
.industry-card__desc { font-size: 0.95rem; color: var(--text-secondary); }
.industry-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
}
.industry-card__cta .arrow { transition: transform var(--transition); }
.industry-card:hover .industry-card__cta .arrow { transform: translateX(4px); }
[dir="rtl"] .industry-card:hover .industry-card__cta .arrow { transform: scaleX(-1) translateX(4px); }

.industries__help {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-block-start: 1px solid var(--border);
  text-align: center;
}
.industries__help-text { color: var(--text-secondary); font-size: 1.05rem; }

/* ==========================================================================
   Industry solution page
   ========================================================================== */
.solution-hero {
  position: relative;
  padding-block: clamp(7rem, 12vh, 10rem) var(--space-xl);
  text-align: center;
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.06), transparent 55%);
}
.solution-hero__back { margin-bottom: var(--space-md); text-align: start; }
.solution-hero__badge {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--platinum);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.35rem 0.9rem;
  border-radius: 100px;
  margin-bottom: var(--space-sm);
}
.solution-hero__title { font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: var(--space-sm); }
.solution-hero__subtitle {
  color: var(--text-secondary);
  font-size: 1.15rem;
  max-width: 60ch;
  margin: 0 auto var(--space-md);
}
.solution-hero__actions { display: flex; justify-content: center; }

.solution-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.solution-shot {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.solution-shot.is-featured { grid-column: span 2; }
.solution-shot__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
}
.solution-shot.is-featured .solution-shot__media { aspect-ratio: 16 / 7; }
.solution-shot__media--empty {
  background: linear-gradient(150deg, var(--surface-2), var(--black) 75%);
  display: grid;
  place-items: center;
}
.solution-shot__placeholder { color: var(--border-strong); }
.solution-shot__placeholder svg { width: 64px; height: 64px; }
.solution-shot__caption {
  padding: 0.9rem var(--space-md);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--platinum);
  border-block-start: 1px solid var(--border);
}

.solution-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.solution-feature {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.solution-feature__check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--platinum);
}
.solution-feature__check svg { width: 16px; height: 16px; }
.solution-feature__label { color: var(--white); font-weight: 500; }

.solution-others {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.solution-other {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), background var(--transition);
}
.solution-other:hover { border-color: var(--platinum); background: var(--surface-2); }
.solution-other__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--platinum);
  flex-shrink: 0;
}
.solution-other__icon svg { width: 22px; height: 22px; }
.solution-other__name { flex: 1; color: var(--white); font-weight: 500; }
.solution-other .arrow { color: var(--platinum); }
[dir="rtl"] .solution-other .arrow { transform: scaleX(-1); }

/* ==========================================================================
   What You Get — deliverables
   ========================================================================== */
.get { background: var(--bg-dark); }

.get-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.get-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 32px;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  min-height: 240px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.get-card:hover {
  transform: translateY(-6px);
  border-color: var(--platinum);
  box-shadow: 0 24px 60px -22px rgba(207, 207, 207, 0.22);
}
.get-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--platinum);
}
.get-card__icon svg { width: 26px; height: 26px; }
.get-card__title { font-size: 1.2rem; color: var(--white); }
.get-card__desc { font-size: 0.95rem; color: var(--text-secondary); }

/* ---- Comparison block ---- */
.compare {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.compare__title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  text-align: center;
  margin-bottom: var(--space-lg);
}
.compare__grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: var(--space-lg);
  align-items: start;
}
.compare__divider {
  align-self: stretch;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--platinum), transparent);
  opacity: 0.5;
}
.compare__label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.compare__col--generic .compare__label { color: var(--text-tertiary); }
.compare__col--meed .compare__label { color: var(--platinum); }
.compare__list { display: flex; flex-direction: column; gap: 0.9rem; }
.compare__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
}
.compare__item--no { color: var(--text-tertiary); }
.compare__item--yes { color: var(--white); }
.compare__mark {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
}
.compare__item--no .compare__mark { color: var(--text-tertiary); }
.compare__item--yes .compare__mark { color: var(--black); background: var(--platinum); border-color: var(--platinum); }
.compare__mark svg { width: 14px; height: 14px; }

/* ---- Trust statement + CTA ---- */
.get-trust {
  margin-top: var(--space-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
.get-trust__text {
  max-width: 60ch;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ==========================================================================
   Process
   ========================================================================== */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  counter-reset: step;
}
.process-step {
  position: relative;
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--border);
  min-width: 0;
}
.process-step__num {
  font-family: var(--font-alt);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--platinum);
  letter-spacing: 0.1em;
}
.process-step__title { font-size: 1.3rem; color: var(--white); margin-block: 0.6rem 0.5rem; }
.process-step__desc { font-size: 0.95rem; color: var(--text-secondary); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface);
  padding: clamp(2.5rem, 6vw, 4.5rem);
}
.cta__bg {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 50%;
  background-size: cover;
  background-position: center;
  opacity: 0.6;
  mask-image: linear-gradient(to left, #000, transparent);
  -webkit-mask-image: linear-gradient(to left, #000, transparent);
}
[dir="rtl"] .cta__bg {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: none;
  mask-image: linear-gradient(to right, #000, transparent);
  -webkit-mask-image: linear-gradient(to right, #000, transparent);
}
.cta__inner { position: relative; z-index: 1; max-width: 620px; }
[dir="rtl"] .cta__inner {
  margin-inline-end: auto;
  text-align: right;
}
.cta__title { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: var(--space-sm); }
.cta__subtitle { color: var(--text-secondary); margin-bottom: var(--space-md); font-size: 1.05rem; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-xl);
  align-items: start;
}
.contact-info p { margin-bottom: var(--space-md); }
.contact-info__list { display: flex; flex-direction: column; gap: 1rem; }
.contact-info__item { display: flex; gap: 0.8rem; align-items: center; color: var(--text-secondary); }
.contact-info__item strong { color: var(--white); font-weight: 600; }

.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label { font-size: 0.85rem; color: var(--platinum); font-weight: 500; }
.field input,
.field textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  color: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.field input::placeholder,
.field textarea::placeholder { color: #6b6b6b; }
.field input:focus,
.field textarea:focus { border-color: var(--platinum); box-shadow: var(--ring); outline: none; }
.field textarea { resize: vertical; min-height: 140px; }
.field.has-error input,
.field.has-error textarea { border-color: #e0594f; }

.form__feedback {
  display: none;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}
.form__feedback.is-visible { display: block; }
.form__feedback.is-success { background: rgba(87,210,138,0.1); border: 1px solid rgba(87,210,138,0.4); color: #8fe3b3; }
.form__feedback.is-error { background: rgba(224,89,79,0.1); border: 1px solid rgba(224,89,79,0.4); color: #f0a39c; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  border-block-start: 1px solid var(--border);
  padding-block: var(--space-xl) var(--space-lg);
  margin-top: var(--space-2xl);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.footer-brand__tagline { color: var(--text-secondary); margin-top: var(--space-sm); max-width: 34ch; }
.footer-col h3 {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--platinum);
  margin-bottom: var(--space-sm);
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col a { color: var(--text-secondary); font-size: 0.95rem; }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: #7c7c7c;
}

/* ==========================================================================
   Project detail page
   ========================================================================== */
.project-detail { padding-block: clamp(7rem, 12vh, 10rem) var(--space-2xl); }
.project-detail__back { margin-bottom: var(--space-md); }
.project-detail__cat { color: var(--platinum); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; }
.project-detail__title { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-block: var(--space-sm) var(--space-md); }
.project-detail__cover {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  margin-block: var(--space-lg);
  background: linear-gradient(150deg, var(--surface-2), var(--black) 70%);
}
.project-detail__body { max-width: 70ch; font-size: 1.1rem; line-height: 1.8; }
.project-detail__body p { margin-bottom: var(--space-md); }

/* ==========================================================================
   About
   ========================================================================== */
.about { position: relative; background: #050505; overflow: hidden; }
.about > .container { position: relative; z-index: 1; }
/* Faint metallic glow + giant faded M monogram behind the content. */
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 88% 12%, rgba(207, 207, 207, 0.07), transparent 42%);
  pointer-events: none;
}
.about__monogram {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: clamp(20rem, 55vw, 48rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.018);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.about__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-xl);
  align-items: start;
}
.about__text p { color: var(--text-secondary); margin-bottom: var(--space-md); font-size: 1.02rem; }
.about__text p:last-of-type { margin-bottom: 0; }
.about__mission {
  margin-block-start: var(--space-lg);
  padding-inline-start: var(--space-md);
  border-inline-start: 2px solid var(--platinum);
}
.about__mission-title { font-size: 1.15rem; color: var(--white); margin-bottom: 0.4rem; }
.about__mission-text { color: var(--text-secondary); }
.about__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
  flex-wrap: wrap;
}

.about__card {
  position: relative;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  overflow: hidden;
}
.about__card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(207, 207, 207, 0.5), transparent);
}
.about__card-mark {
  position: absolute;
  inset-block-end: -3.5rem;
  inset-inline-end: -1.5rem;
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: 14rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.025);
  pointer-events: none;
  user-select: none;
}
.about__card-title { position: relative; font-size: 1.3rem; color: var(--white); margin-bottom: var(--space-md); }
.about__focus { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); }
.about__focus-item { display: flex; align-items: center; gap: 0.75rem; color: var(--white); font-weight: 500; }
.about__focus-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--platinum);
}
.about__focus-icon svg { width: 14px; height: 14px; }

@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ==========================================================================
   FAQ — premium accordion
   ========================================================================== */
.faq { background: #050505; } /* spec colour, slightly darker than --bg-dark */
.faq__list {
  max-width: 820px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.faq__item {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color var(--transition);
}
.faq__item.is-open { border-color: var(--border-strong); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 24px;
  text-align: start;
  color: var(--white);
  font-family: var(--font-alt);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
}
.faq__q-text { flex: 1; }
.faq__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--platinum);
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: transform var(--transition), background var(--transition);
}
.faq__icon svg { width: 16px; height: 16px; }
.faq__item.is-open .faq__icon { transform: rotate(180deg); background: rgba(255, 255, 255, 0.04); }

/* Smooth open/close via animatable grid rows (0fr → 1fr). */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition);
}
.faq__item.is-open .faq__answer { grid-template-rows: 1fr; }
.faq__answer-inner { overflow: hidden; }
.faq__answer p {
  color: var(--text-secondary);
  padding: 0 24px 24px;
  font-size: 0.98rem;
  line-height: 1.7;
}

.faq__cta {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}
.faq__cta-text { color: var(--text-secondary); font-size: 1.15rem; }
.faq__cta-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .faq__answer { transition: none; }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Tablet — reduce navigation gaps so it stays on one line. */
@media (max-width: 992px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .project-card.is-featured { grid-column: span 2; grid-row: span 1; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-features { grid-template-columns: repeat(2, 1fr); }
  .solution-others { grid-template-columns: repeat(2, 1fr); }
  .get-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .hero { min-height: auto; padding-block: clamp(7rem, 13vh, 9rem) var(--space-lg); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-lg); text-align: center; }
  .hero__inner { max-width: 640px; margin-inline: auto; }
  .hero__title, .hero__subtitle { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  /* Stack: image centred below the copy, sized normally. */
  .hero__visual { width: auto; max-width: 560px; margin-inline: auto; }
  .hero__device { width: 100%; max-width: 100%; margin-inline: auto; }
  .hero__trust { text-align: center; }
  .hero__industries { justify-content: center; }
  /* Re-center the ambient glow/lines now that the device sits below the text. */
  .hero::after,
  [dir="rtl"] .hero::after { background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.07), transparent 45%); }
  .hero::before,
  [dir="rtl"] .hero::before {
    -webkit-mask-image: radial-gradient(circle at 50% 32%, #000, transparent 75%);
            mask-image: radial-gradient(circle at 50% 32%, #000, transparent 75%);
  }

  .nav { gap: var(--space-sm); }
  .nav__links { gap: 22px; }
  .nav__cta { padding: 0 18px; }
}

/* Mobile — hamburger + compact slide-down menu; logo + quote stay visible. */
@media (max-width: 768px) {
  .site-header { animation: none; transform: none; }
  .nav { position: relative; grid-template-columns: 1fr auto; }
  .brand { position: relative; z-index: 95; }
  .nav__actions { position: relative; z-index: 95; }
  .nav__toggle { display: flex; position: relative; z-index: 95; }
  .lang-switch { display: none; } /* language now lives inside the menu */

  .nav__links {
    position: absolute;
    inset-block-start: calc(100% + 0.75rem);
    inset-inline: 0;
    /* override desktop grid self-alignment so the overlay fills the screen */
    justify-self: stretch;
    align-self: stretch;
    width: auto;
    max-height: calc(100vh - 112px);
    z-index: 90;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    box-shadow: var(--shadow);
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
  }
  .nav.is-open .nav__links { transform: translateX(0); opacity: 1; visibility: visible; }
  .nav__links > li { width: 100%; text-align: start; }
  .nav__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    border-radius: 8px;
    padding: 0.65rem 0.8rem;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.86);
  }
  .nav__links a::after { display: none; }
  .nav__links a:hover,
  .nav__links a.is-active { color: var(--white); background: var(--surface-2); }

  /* Language options inside the fullscreen menu */
  .nav__mobile-lang {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-start: 0.35rem;
    padding: 0.75rem 0.25rem 0.1rem;
    border-block-start: 1px solid var(--border);
  }
  .nav__mobile-lang-label {
    flex: 1 1 auto;
    font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--platinum);
  }
  .nav__mobile-lang-options { display: flex; gap: 0.35rem; }
  .nav__mobile-lang-options a {
    justify-content: center;
    min-width: 42px;
    min-height: 34px;
    padding: 0.35rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    font-size: 0.78rem; font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
  }
  .nav__mobile-lang-options a.is-active { background: var(--white); color: var(--black); border-color: var(--white); }

  /* Industry section: stack title over description, gallery to one column */
  .industries__head { flex-direction: column; align-items: flex-start; }
  .industries__head-desc { text-align: start; max-width: none; }
  .solution-gallery { grid-template-columns: 1fr; }
  .solution-shot.is-featured { grid-column: span 1; }
  .solution-shot.is-featured .solution-shot__media { aspect-ratio: 16 / 10; }

  /* Comparison block: stack columns with a horizontal divider */
  .compare__grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .compare__divider {
    width: auto;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--platinum), transparent);
  }

  .section { padding-block: var(--space-xl); }
}

@media (max-width: 480px) {
  .container { padding-inline: 1rem; }
  .brand { width: auto; }
  .brand__name { display: none; } /* mobile: show the M logomark only (prevents overlap with the CTA) */
  .brand__logo { width: 44px; height: 44px; }
  .nav__cta { height: 38px; padding: 0 14px; font-size: 12px; }
  .nav__toggle { width: 38px; height: 38px; }
  .nav__links { inset-inline: 0; }
  .nav__links a { font-size: 0.98rem; }
  .nav__mobile-lang-options a {
    min-height: 32px;
    font-size: 0.76rem;
    padding: 0.3rem 0.5rem;
  }
}

@media (max-width: 560px) {
  .services-grid,
  .work-grid,
  .process-grid,
  .industries-grid,
  .solution-features,
  .solution-others,
  .get-grid { grid-template-columns: 1fr; }
  .industry-card { min-height: 420px; }
  .work-grid { grid-auto-rows: 220px; }
  .project-card.is-featured { grid-column: span 1; }
  .form__row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .hero { padding: 140px 0 80px; }
  .hero__title { font-size: clamp(2.2rem, 9vw, 3rem); }
  .hero__subtitle { font-size: 16px; }
  .hero__actions .btn { width: 100%; }
  .hero__industries {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 0.85rem 1.4rem;
    width: fit-content;
    margin-inline: auto;
  }
  .hero__industries li { justify-content: flex-start; }

  .brand { width: auto; }
  .brand__name { display: none; } /* mobile: show the M logomark only (prevents overlap with the CTA) */
  .brand__logo { width: 44px; height: 44px; }
}

/* ==========================================================================
   Start Your Project — Request A Quote wizard
   ========================================================================== */

/* ---- Quote hero ---- */
.quote-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: 160px 0 90px;
  background-color: var(--hero-bg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
/* Left-to-right scrim keeps the headline legible while the metallic M shows on the right. */
.quote-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--hero-bg) 0%, rgba(8, 8, 8, 0.8) 35%, rgba(8, 8, 8, 0.15) 65%, transparent 100%),
    linear-gradient(0deg, var(--hero-bg), transparent 45%);
  pointer-events: none;
}
[dir="rtl"] .quote-hero { background-position: left center; }
[dir="rtl"] .quote-hero::before {
  background:
    linear-gradient(270deg, var(--hero-bg) 0%, rgba(8, 8, 8, 0.8) 35%, rgba(8, 8, 8, 0.15) 65%, transparent 100%),
    linear-gradient(0deg, var(--hero-bg), transparent 45%);
}
.quote-hero .container { position: relative; z-index: 1; }
.quote-hero__copy { max-width: 620px; }
.quote-hero__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--platinum);
  margin-bottom: var(--space-sm);
}
.quote-hero__title {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: var(--space-sm);
}
.quote-hero__subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 46ch;
}
/* ---- Progress indicator ---- */
.quote-section { padding-top: var(--space-xl); }
.wizard__progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.25rem;
  margin-bottom: var(--space-md);
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.wizard__progress-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1 1 auto;
  justify-content: center;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text-tertiary);
  transition: color var(--transition), background var(--transition);
}
.wizard__progress-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  font-size: 0.8rem;
  font-weight: 600;
  color: inherit;
}
.wizard__progress-item.is-active {
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
}
.wizard__progress-item.is-active .wizard__progress-num {
  border-color: var(--platinum);
  color: var(--black);
  background: var(--platinum);
}
.wizard__progress-item.is-done { color: var(--platinum); }
.wizard__progress-item.is-done .wizard__progress-num {
  border-color: var(--platinum);
  color: var(--platinum);
}
.wizard__progress-label { white-space: nowrap; }

/* ---- Wizard card ---- */
.wizard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--shadow);
}
.wizard__feedback {
  display: none;
  margin-bottom: 1.25rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}
.wizard__feedback.is-visible { display: block; }
.wizard__feedback.is-error {
  background: rgba(224, 89, 79, 0.1);
  border: 1px solid rgba(224, 89, 79, 0.4);
  color: #f0a39c;
}
.wizard__step { display: none; border: none; }
.wizard__step.is-active {
  display: grid;
  gap: 1.4rem;
  align-content: start;
  min-height: 560px;
  animation: wizardFade 0.35s ease;
}
@keyframes wizardFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wizard__step-title {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--font-alt);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--white);
}
.wizard__step-index { color: var(--platinum); font-size: 1rem; letter-spacing: 0.05em; }
.wizard__hint { color: var(--text-secondary); margin-top: -0.6rem; font-size: 0.95rem; }

/* Selects inside the wizard match the input styling. */
.wizard .field select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--bg-dark);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23CFCFCF' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-inline-end: 2.5rem;
}
[dir="rtl"] .wizard .field select { background-position: left 1rem center; }
.wizard .field select:focus { border-color: var(--platinum); box-shadow: var(--ring); outline: none; }
.wizard .field.has-error select { border-color: #e0594f; }

/* ---- Choice cards (project type / design style) ---- */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.choice-grid--compact { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.choice-grid.has-error { outline: 1px solid rgba(224, 89, 79, 0.5); outline-offset: 6px; border-radius: var(--radius); }
.choice-card { display: block; cursor: pointer; }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card__inner {
  position: relative;
  display: block;
  height: 100%;
  padding: 1.25rem 1.25rem 1.25rem 1.4rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-dark);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition), transform var(--transition);
}
.choice-card:hover .choice-card__inner { border-color: var(--platinum); transform: translateY(-2px); }
.choice-card__check {
  position: absolute;
  top: 1.1rem;
  inset-inline-end: 1.1rem;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  transition: all var(--transition);
}
.choice-card__check--radio { border-radius: 50%; }
.choice-card__title {
  display: block;
  font-family: var(--font-alt);
  font-weight: 700;
  color: var(--white);
  font-size: 1.05rem;
  padding-inline-end: 2rem;
}
.choice-card--sm .choice-card__inner { padding: 1rem 1rem 1rem 1.1rem; text-align: center; }
.choice-card--sm .choice-card__title { padding-inline-end: 0; font-size: 0.98rem; }
.choice-card--sm .choice-card__check { top: 0.7rem; inset-inline-end: 0.7rem; width: 18px; height: 18px; }
.choice-card__desc {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.choice-card input:checked + .choice-card__inner {
  border-color: var(--platinum);
  background: rgba(207, 207, 207, 0.06);
  box-shadow: 0 0 0 1px var(--platinum), 0 12px 40px -16px rgba(207, 207, 207, 0.45);
}
.choice-card input:checked + .choice-card__inner .choice-card__check {
  border-color: var(--platinum);
  background: var(--platinum);
}
.choice-card input:checked + .choice-card__inner .choice-card__check::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.choice-card input:focus-visible + .choice-card__inner { box-shadow: var(--ring); }

/* ---- Feature check chips ---- */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7rem;
}
.check-chip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-dark);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.check-chip:hover { border-color: var(--platinum); }
.check-chip input { position: absolute; opacity: 0; pointer-events: none; }
.check-chip__box {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  transition: all var(--transition);
}
.check-chip__label { color: var(--text-secondary); font-size: 0.95rem; }
.check-chip input:checked ~ .check-chip__label { color: var(--white); }
.check-chip:has(input:checked) {
  border-color: var(--platinum);
  background: rgba(207, 207, 207, 0.06);
}
.check-chip input:checked + .check-chip__box {
  border-color: var(--platinum);
  background: var(--platinum);
}
.check-chip input:checked + .check-chip__box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* ---- Radio pills (preferred contact method) ---- */
.radio-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-dark);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.radio-pill input { position: absolute; opacity: 0; pointer-events: none; }
.radio-pill__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  transition: all var(--transition);
}
.radio-pill:has(input:checked) { border-color: var(--platinum); color: var(--white); background: rgba(207, 207, 207, 0.06); }
.radio-pill input:checked + .radio-pill__dot { border-color: var(--platinum); background: var(--platinum); box-shadow: inset 0 0 0 3px var(--bg-dark); }

/* ---- Wizard navigation ---- */
.wizard__nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.wizard__counter { margin-inline: auto; font-size: 0.85rem; color: var(--text-tertiary); }
/* [hidden] must win over .btn's display, or hidden nav buttons still show. */
.wizard__nav [hidden] { display: none; }

/* ---- Review summary ---- */
.review { display: grid; gap: 1rem; }
.review__block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-dark);
  padding: 1.25rem 1.4rem;
}
.review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.review__head h4 { font-size: 1.05rem; color: var(--white); }
.review__edit {
  font-size: 0.82rem;
  color: var(--platinum);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  transition: border-color var(--transition), color var(--transition);
}
.review__edit:hover { border-color: var(--platinum); color: var(--white); }
.review__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--border);
}
.review__row:first-child { border-top: none; }
.review__row dt { color: var(--platinum); font-size: 0.88rem; }
.review__row dd { color: var(--white); word-break: break-word; }

/* ---- Submit band ---- */
.quote-submit-band {
  margin-top: 0.5rem;
  padding: 1.75rem;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(100% 120% at 50% 0%, rgba(207, 207, 207, 0.07), transparent 60%),
    var(--bg-dark);
}
.quote-submit-band__title { font-size: 1.5rem; margin-bottom: 0.5rem; }
.quote-submit-band__text { color: var(--text-secondary); max-width: 52ch; margin-inline: auto; }

/* ---- Success screen ---- */
.quote-success {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.quote-success__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--black);
  background: var(--platinum);
}
.quote-success__icon svg { width: 34px; height: 34px; }
.quote-success__title { font-size: 2rem; margin-bottom: 0.75rem; }
.quote-success__text { color: var(--text-secondary); margin-bottom: 1.75rem; }
.quote-success__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---- Trust badges ---- */
.quote-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 2rem;
  margin-top: var(--space-lg);
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.quote-trust__item { position: relative; display: flex; gap: 0.9rem; }
.quote-trust__item + .quote-trust__item::before {
  content: "";
  position: absolute;
  inset-inline-start: -1rem;
  top: 0.2rem;
  bottom: 0.2rem;
  width: 1px;
  background: var(--border);
}
.quote-trust__icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--platinum);
}
.quote-trust__icon svg { width: 18px; height: 18px; }
.quote-trust__text h4 { font-size: 0.98rem; color: var(--white); margin-bottom: 0.3rem; }
.quote-trust__text p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }

/* ---- Need help band ---- */
.quote-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding: 1.75rem 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-dark);
}
.quote-help__copy h3 { font-size: 1.5rem; margin-bottom: 0.35rem; }
.quote-help__copy p { color: var(--text-secondary); max-width: 46ch; }
.quote-help__actions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.quote-help__actions .btn { display: inline-flex; align-items: center; gap: 0.5rem; }
.quote-help__or { color: var(--text-tertiary); font-size: 0.9rem; }
.quote-help__email {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--platinum);
  font-weight: 500;
  transition: color var(--transition);
}
.quote-help__email:hover { color: var(--white); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .quote-hero { padding: 170px 0 80px; background-size: cover; }
  .wizard__progress-label { display: none; }
  .review__row { grid-template-columns: 1fr; gap: 0.25rem; }
  .quote-trust { grid-template-columns: repeat(2, 1fr); }
  .quote-trust__item:nth-child(odd)::before { display: none; }
  .quote-help { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .quote-hero { padding-top: 130px; }
  .wizard__nav { flex-wrap: wrap; }
  .wizard__counter { order: -1; width: 100%; text-align: center; margin-bottom: 0.5rem; }
  .wizard__nav .btn { flex: 1 1 auto; justify-content: center; }
  .wizard__step.is-active { min-height: 0; }
  .quote-trust { grid-template-columns: 1fr; }
  .quote-trust__item::before { display: none !important; }
  .quote-help__actions { width: 100%; }
}

/* ==========================================================================
   Floating WhatsApp lead widget
   ========================================================================== */
.wa-widget {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

/* The [hidden] attribute must win over the display rules below, otherwise the
   exit overlay (z-index 1100, inset 0) sits invisibly over the page and eats
   every click. */
.wa-card[hidden],
.wa-badge[hidden],
.wa-exit[hidden] { display: none !important; }

/* ---- Floating action button ----
   Foreground on the WhatsApp green is #111111, not white. White on #25D366 is
   only 1.98:1 — below both WCAG AA text (4.5:1) and non-text UI (3:1). Dark on
   the same green is 9.52:1 and keeps the recognisable brand colour untouched.
   Applies to .wa-fab, .wa-card__avatar, .wa-btn--green and .wa-exit__icon.
   Do not revert these to #fff. */
.wa-fab {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #25D366;
  color: #111111;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.35);
  transition: transform var(--transition), box-shadow var(--transition);
  order: 3;
}
.wa-fab svg { width: 34px; height: 34px; }
.wa-fab:hover { transform: scale(1.08); }
.wa-fab.is-active { transform: scale(1.04); }
.wa-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45);
  animation: wa-pulse 2.6s ease-out infinite;
}
@keyframes wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
  70%  { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ---- Expanded message card ---- */
.wa-card {
  order: 2;
  position: relative;
  width: 300px;
  max-width: calc(100vw - 48px);
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: var(--space-md);
  box-shadow: var(--shadow);
  transform: translateY(12px) scale(0.96);
  transform-origin: bottom right;
  opacity: 0;
  transition: opacity var(--transition), transform var(--transition);
}
[dir="rtl"] .wa-card { transform-origin: bottom left; }
.wa-card.is-open { opacity: 1; transform: translateY(0) scale(1); }
.wa-card__close {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text-tertiary);
  transition: color var(--transition), background var(--transition);
}
.wa-card__close:hover { color: var(--white); background: rgba(255, 255, 255, 0.06); }
.wa-card__close svg { width: 15px; height: 15px; }
.wa-card__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: var(--space-sm); }
.wa-card__avatar {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #25D366;
  color: #111111; /* contrast — see note on .wa-fab */
  display: grid;
  place-items: center;
}
.wa-card__avatar svg { width: 24px; height: 24px; }
.wa-card__id { display: flex; flex-direction: column; line-height: 1.3; }
.wa-card__name { color: var(--white); font-size: 0.98rem; font-weight: 600; }
.wa-card__status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-secondary); }
.wa-card__dot { width: 8px; height: 8px; border-radius: 50%; background: #25D366; }
.wa-card__title { color: var(--white); font-weight: 600; font-size: 1rem; margin-bottom: 0.35rem; }
.wa-card__text { color: var(--text-secondary); font-size: 0.92rem; margin-bottom: var(--space-sm); }
.wa-card__actions { display: flex; flex-direction: column; gap: 0.55rem; }

/* ---- Shared widget buttons ---- */
.wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0 1.1rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.wa-btn svg { width: 18px; height: 18px; }
.wa-btn--green { background: #25D366; color: #111111; } /* contrast — see note on .wa-fab */
.wa-btn--green:hover { background: #1ebd5b; transform: translateY(-1px); }
.wa-btn--ghost { color: var(--text-secondary); border: 1px solid var(--border); }
.wa-btn--ghost:hover { color: var(--white); border-color: var(--border-strong); }
.wa-btn--lg { height: 50px; padding: 0 1.6rem; font-size: 1rem; }

/* ---- Mobile first-visit badge ---- */
.wa-badge {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: calc(100vw - 48px);
  padding: 0.6rem 0.9rem;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.wa-badge.is-visible { opacity: 1; transform: translateY(0); }

/* ---- Exit-intent popup ---- */
.wa-exit {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.wa-exit__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.72);
  opacity: 0;
  transition: opacity var(--transition);
}
.wa-exit.is-open .wa-exit__backdrop { opacity: 1; }
.wa-exit__dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #141414;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow);
  transform: translateY(16px) scale(0.97);
  opacity: 0;
  transition: opacity var(--transition), transform var(--transition);
}
.wa-exit.is-open .wa-exit__dialog { opacity: 1; transform: translateY(0) scale(1); }
.wa-exit__close {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text-tertiary);
  transition: color var(--transition), background var(--transition);
}
.wa-exit__close:hover { color: var(--white); background: rgba(255, 255, 255, 0.06); }
.wa-exit__close svg { width: 17px; height: 17px; }
.wa-exit__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto var(--space-sm);
  border-radius: 50%;
  background: #25D366;
  color: #111111; /* contrast — see note on .wa-fab */
  display: grid;
  place-items: center;
}
.wa-exit__icon svg { width: 32px; height: 32px; }
.wa-exit__title { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: var(--space-sm); }
.wa-exit__text { color: var(--text-secondary); margin-bottom: var(--space-md); }
.wa-exit__actions { display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; }

/* ---- Mobile offsets (20px) ---- */
@media (max-width: 768px) {
  .wa-widget { inset-block-end: 20px; inset-inline-end: 20px; }
  .wa-fab { width: 58px; height: 58px; }
  .wa-fab svg { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab::before { animation: none; }
  .wa-card, .wa-badge, .wa-exit__dialog, .wa-exit__backdrop { transition: opacity 0.2s ease; transform: none; }
}


/* ==========================================================================
   Industry solution page — demo cards
   Used by solutions.php. The surrounding fashion-demo rules moved to
   demos.css; these stay because core pages need them.
   ========================================================================== */

.solution-demo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.solution-demo-card {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: transform var(--transition), border-color var(--transition);
}

.solution-demo-card:hover {
  transform: translateY(-4px);
  border-color: var(--platinum);
}

.solution-demo-card__media {
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
}

.solution-demo-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.solution-demo-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solution-demo-card__body {
  display: grid;
  gap: 0.55rem;
  padding: 1.1rem;
}

.solution-demo-card__body span {
  color: var(--platinum);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.solution-demo-card__body h3 {
  font-size: 1.25rem;
}

.solution-demo-card__body p {
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.solution-demo-card__body strong {
  color: var(--white);
  font-size: 0.92rem;
}

@media (max-width: 1100px) {
  .solution-demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .solution-demo-grid { grid-template-columns: 1fr; }
}