/* ============================================
   DPL Systems — Warm Paper (Cream) Premium Design System
   Light theme adopted Aug 2026 (management directive) — replaces the near-black
   dark theme. Warm cream paper base, dark warm-neutral ink, brand orange as
   accent only. Palette anchored to the old style-compare.html "Warm Paper" swatch.
   ============================================ */
:root {
  --bg: #f6efe4;          /* warm paper base */
  --bg-soft: #fbf5ec;     /* lighter paper — recessed fields/inputs */
  --surface: #fffdf9;     /* card / raised surface */
  --surface-2: #f1e8da;   /* deeper paper — bands, CTA base */
  --border: rgba(45, 36, 27, 0.12);        /* warm-neutral hairline */
  --border-hover: rgba(249, 115, 22, 0.55); /* brand orange on hover */
  --text: #201a14;        /* warm near-black ink */
  --text-dim: #6b6055;    /* warm gray body (AA on cream) */
  --accent: #c85a0c;      /* deepened burnt-orange — fills, borders, icons, focus rings */
  /* Accent for SMALL TEXT only. #c85a0c measures 3.73:1 on the cream base — short
     of the 4.5:1 WCAG AA floor for text under 18.66px. #a84a09 clears it with margin
     everywhere it is used: 5.03:1 on plain cream (.kicker/.tag/.faq-group-title) and
     4.68:1 on the .badge, which sits on its own rgba(249,115,22,0.08) fill and so has
     a slightly darker effective background. Visually the same brand orange.
     Keep --accent for fills, borders, icon strokes and focus rings. */
  --accent-ink: #a84a09;
  --accent-2: #f97316;
  --accent-3: #e08704;    /* darkened amber — the bright #fbbf24 washed out on light */
  --ok: #16a34a;          /* deeper green so status text reads on light */
  /* Display/fill gradient — darkest stop leads so large gradient text (H1, stats,
     step numbers) keeps contrast on cream; still reads as brand orange on buttons. */
  --gradient: linear-gradient(135deg, #d9480a 0%, #f97316 52%, #f59e0b 100%);
  --glow: 0 0 60px rgba(249, 115, 22, 0.18);
  --shadow-lg: 0 24px 60px rgba(45, 36, 27, 0.16);
  --radius: 18px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --font-en: 'Inter', 'Segoe UI', sans-serif;
  --font-ar: 'Cairo', 'Segoe UI', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; } /* clears the fixed nav on #anchor jumps */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-en);
  line-height: 1.65;
  /* clip (not hidden): stops horizontal overflow WITHOUT making <body> its own
     scroll container — `overflow-x:hidden` here silently broke #anchor jumps
     and scrollIntoView (it forces overflow-y to `auto`) */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

html[dir="rtl"] body { font-family: var(--font-ar); }

/* Global background (Jul 2026 v4 — BRIGHTER SPOTLIGHTS, Mohamed's pick from
   bg-brightness-compare.html option 1): same corner-spotlight geometry as v3
   but both lights ~2x brighter, a lighter diagonal ramp, and a softer vignette.
   Top-left stays dominant. Mirrors to the top-right corner in RTL (Arabic). */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  /* Cream paper wash with a warm sunlit corner (top-left) + softer counter-warmth
     (bottom-right). On light we want gentle warmth, not glowing orange — low alpha. */
  background:
    radial-gradient(ellipse 62% 82% at 0% 0%, rgba(249, 180, 90, 0.16), transparent 60%),
    conic-gradient(from 118deg at 0% 0%, transparent 0deg, rgba(249, 170, 80, 0.06) 26deg, transparent 54deg),
    /* secondary counter-light, bottom-right — a touch cooler/lighter so the
       top-left warmth stays dominant */
    radial-gradient(ellipse 62% 78% at 100% 100%, rgba(238, 200, 150, 0.18), transparent 62%),
    linear-gradient(135deg, #faf4ec 0%, #f5eee2 45%, #f0e7d8 100%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  /* whisper vignette on the two cooler corners — warm brown at very low alpha so
     it grounds the page without the grungy dark corners a black vignette gives */
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(120, 90, 50, 0.05), transparent 58%),
    radial-gradient(ellipse 70% 60% at 0% 100%, rgba(120, 90, 50, 0.05), transparent 58%);
}
html[dir="rtl"] body::before {
  background:
    radial-gradient(ellipse 62% 82% at 100% 0%, rgba(249, 180, 90, 0.16), transparent 60%),
    conic-gradient(from 190deg at 100% 0%, transparent 0deg, rgba(249, 170, 80, 0.06) 26deg, transparent 54deg),
    radial-gradient(ellipse 62% 78% at 0% 100%, rgba(238, 200, 150, 0.18), transparent 62%),
    linear-gradient(225deg, #faf4ec 0%, #f5eee2 45%, #f0e7d8 100%);
}
html[dir="rtl"] body::after {
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%, rgba(120, 90, 50, 0.05), transparent 58%),
    radial-gradient(ellipse 70% 60% at 100% 100%, rgba(120, 90, 50, 0.05), transparent 58%);
}

::selection { background: rgba(249, 115, 22, 0.35); }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #d3c6b4; border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #c0b19b; }

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

img { max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { text-wrap: balance; }

.container { width: min(1180px, 92%); margin: 0 auto; }

/* ---------- Background ambience ---------- */
.bg-grid {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  /* Jul 2026 v4: uniform whole-page hairline grid. The v3 corner mask read as
     an artifact once the v4 brighter spotlights made it clearly visible in one
     corner only — now it's consistent everywhere, and fainter. */
  background-image:
    linear-gradient(rgba(45,36,27,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,36,27,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
}
.orb {
  /* Jul 2026 v2: retired — the drifting blurred orbs were the main "AI-built"
     tell. Markup still exists on all pages; this rule neutralizes them. */
  display: none;
  position: fixed; border-radius: 50%; filter: blur(110px);
  z-index: -1; pointer-events: none; opacity: 0.5;
  animation: drift 18s ease-in-out infinite alternate;
}
.orb-1 { width: 480px; height: 480px; background: rgba(249,115,22,0.16); top: -160px; left: -120px; }
.orb-2 { width: 420px; height: 420px; background: rgba(251,146,60,0.13); top: 30%; right: -160px; animation-delay: -6s; }
.orb-3 { width: 380px; height: 380px; background: rgba(251,191,36,0.09); bottom: -120px; left: 30%; animation-delay: -12s; }

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, 40px) scale(1.12); }
}

/* ---------- Navbar ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  background: rgba(250, 244, 236, 0.78);
  border-bottom: 1px solid var(--border);
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.nav.scrolled {
  background: rgba(250, 244, 236, 0.94);
  box-shadow: 0 10px 34px rgba(45, 36, 27, 0.12);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.logo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.logo-img { height: 30px; width: auto; display: block; }
.logo-sub { display: block; font-size: 0.56rem; font-weight: 500; color: var(--text-dim); letter-spacing: 1.4px; text-transform: uppercase; }
html[dir="rtl"] .logo-sub { letter-spacing: 0.5px; }

.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.nav-links a {
  font-size: 0.92rem; color: var(--text-dim); font-weight: 500;
  transition: color 0.2s;
  position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px;
  background: var(--gradient); border-radius: 2px;
  transition: right 0.3s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.nav-cta-group { display: flex; align-items: center; gap: 14px; }

/* ---------- Services dropdown / mega-menu ---------- */
.has-submenu { position: relative; }
.submenu-caret { margin-inline-start: 5px; vertical-align: middle; transition: transform 0.25s var(--ease); }
.has-submenu:hover .submenu-caret,
.has-submenu:focus-within .submenu-caret { transform: rotate(180deg); }
/* invisible bridge so the cursor can cross the gap without the menu closing */
.has-submenu::before { content: ''; position: absolute; top: 100%; left: -12px; right: -12px; height: 16px; }
.submenu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px;
  min-width: 480px; padding: 14px;
  background: rgba(255, 253, 249, 0.98);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
  z-index: 120;
}
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.submenu a {
  display: block; padding: 9px 14px; border-radius: 10px;
  font-size: 0.85rem; color: var(--text-dim); white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}
.submenu a::after { display: none; }
.submenu a:hover { background: rgba(249, 115, 22, 0.10); color: var(--text); }

.lang-btn {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: 8px 16px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}
.lang-btn:hover { border-color: var(--border-hover); box-shadow: 0 0 20px rgba(249,115,22,0.15); }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 28px; border-radius: 999px;
  font-weight: 700; font-size: 0.95rem;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
  cursor: pointer; border: none; font-family: inherit;
}
.btn-primary {
  background: #f97316; color: #140a02;
  box-shadow: 0 4px 30px rgba(249,115,22,0.35);
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: ''; position: absolute; top: -10%; bottom: -10%; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s var(--ease);
  pointer-events: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 40px rgba(249,115,22,0.5); }
.btn-primary:hover::before { left: 130%; }
.btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--border-hover); background: rgba(249,115,22,0.06); transform: translateY(-2px); }
.btn-sm { padding: 9px 20px; font-size: 0.85rem; }

/* Inline SVG bars (was a bare ☰ glyph with no accessible name). 44x44 hit area to
   meet touch-target guidance — the visual bars stay 22px, the padding does the work. */
.hamburger {
  display: none; background: none; border: none; color: var(--text); cursor: pointer;
  width: 44px; height: 44px; padding: 11px; border-radius: 10px;
  align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.hamburger svg { width: 22px; height: 22px; display: block; }
.hamburger:hover { background: rgba(249, 115, 22, 0.10); color: var(--accent); }
.hamburger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Mobile-only "Book a Consultation" inside the drop-down menu. The desktop button
   in .nav-cta-group is display:none under 960px, which left mobile with no CTA in
   the navigation at all. Hidden on desktop so the CTA never appears twice. */
.nav-cta-mobile { display: none; }

/* ---------- Hero ---------- */
.hero {
  min-height: min(92vh, 980px);
  display: flex; align-items: center;
  padding: 90px 0 80px;
  position: relative;
  overflow: hidden;
}

/* Cinematic aurora backdrop + passing light beam */
.hero-aurora {
  position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 45% at 72% 38%, rgba(249,115,22,0.16), transparent 70%),
    radial-gradient(30% 38% at 18% 60%, rgba(251,146,60,0.10), transparent 70%),
    radial-gradient(26% 32% at 55% 78%, rgba(251,191,36,0.07), transparent 70%);
  filter: blur(46px);
  animation: aurora 22s ease-in-out infinite alternate;
}
@keyframes aurora {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  50%  { transform: translate3d(2%, 3%, 0) scale(1.08); }
  to   { transform: translate3d(-1%, 1%, 0) scale(1.03); }
}
.hero::after {
  content: ''; position: absolute; top: -40%; bottom: -40%; left: -12%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(249,115,22,0.045) 45%, rgba(251,191,36,0.065) 50%, rgba(249,115,22,0.045) 55%, transparent);
  transform: skewX(-14deg) translateX(-70vw);
  animation: beam 14s var(--ease) 1.5s infinite;
  pointer-events: none;
}
@keyframes beam {
  0%   { transform: skewX(-14deg) translateX(-70vw); opacity: 0; }
  6%   { opacity: 1; }
  38%  { transform: skewX(-14deg) translateX(165vw); opacity: 0; }
  100% { transform: skewX(-14deg) translateX(165vw); opacity: 0; }
}

/* Hero entrance choreography */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.hero .badge   { opacity: 0; animation: riseIn 0.7s var(--ease) 0.1s forwards; }
.hero p.lead   { opacity: 0; animation: riseIn 0.8s var(--ease) 0.9s forwards; }
.hero-actions  { opacity: 0; animation: riseIn 0.8s var(--ease) 1.1s forwards; }
.hero-visual   { opacity: 0; animation: riseIn 1s var(--ease) 0.55s forwards; }

/* Headline word cascade (spans injected by app.js) */
.hw {
  display: inline-block;
  opacity: 0; transform: translateY(30px); filter: blur(8px);
  animation: wordIn 0.75s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes wordIn { to { opacity: 1; transform: none; filter: none; } }
/* background-clip:text doesn't reach into inline-block children — re-apply the
   gradient on each injected word inside .grad-text, with a slow shimmer */
.grad-text .hw {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  background-size: 200% 100%;
  animation: wordIn 0.75s var(--ease) forwards, gradShift 7s ease-in-out infinite;
  animation-delay: var(--d, 0ms), 2.2s;
}
@keyframes gradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Scroll cue */
.scroll-cue {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: 26px; height: 42px; border-radius: 999px;
  border: 2px solid rgba(249,115,22,0.4);
  display: flex; justify-content: center; padding-top: 8px;
  opacity: 0; animation: riseIn 0.8s var(--ease) 1.7s forwards;
  transition: border-color 0.2s;
}
.scroll-cue:hover { border-color: var(--border-hover); }
/* Expand tap area to >=44px without changing the visible pill (a11y touch target) */
.scroll-cue::after { content: ''; position: absolute; inset: -12px -16px; }
.scroll-cue::before {
  content: ''; width: 4px; height: 9px; border-radius: 99px;
  background: var(--gradient);
  animation: wheel 1.9s ease-in-out 2.2s infinite;
}
@keyframes wheel {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
@media (max-width: 1024px) { .scroll-cue { display: none; } }
.hero-inner {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 60px; align-items: center;
}
.hero-content { max-width: 780px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 18px; border-radius: 999px;
  background: rgba(249,115,22,0.08);
  border: 1px solid rgba(249,115,22,0.25);
  font-size: 0.82rem; font-weight: 600; color: var(--accent-ink);
  margin-bottom: 28px;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }

h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -1.5px;
  margin-bottom: 24px;
}
html[dir="rtl"] h1 { letter-spacing: 0; line-height: 1.35; }
.grad-text {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero p.lead {
  font-size: 1.18rem; color: var(--text-dim); max-width: 620px;
  margin-bottom: 40px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Hero visual (decorative console) ---------- */
.hero-visual { position: relative; min-height: 440px; }
/* Hero stage backdrop — fills the space behind the robot */
.hv-ring {
  position: absolute; top: 45%; left: 50%; width: 540px; height: 540px;
  transform: translate(-50%, -50%); border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(249,115,22,0.30), rgba(251,146,60,0.10) 42%, transparent 68%);
  filter: blur(26px);
}
.hv-ring2, .hv-ring3, .hv-ping {
  position: absolute; top: 45%; left: 50%; border-radius: 50%;
  transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
}
.hv-ring2 { width: 350px; height: 350px; border: 1px solid rgba(249,115,22,0.16); }
.hv-ring3 { width: 510px; height: 510px; border: 1px solid rgba(249,115,22,0.08); }
.hv-ping  { width: 300px; height: 300px; border: 1px solid rgba(249,115,22,0.45); animation: ping 4.5s ease-out infinite; }
@keyframes ping {
  0%   { transform: translate(-50%, -50%) scale(0.7); opacity: 0.55; }
  75%  { opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1.75); opacity: 0; }
}
.hv-spark {
  position: absolute; width: 5px; height: 5px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: var(--accent-3); box-shadow: 0 0 10px var(--accent-3);
  opacity: 0.5; animation: twinkle 3.5s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.7); } 50% { opacity: 0.8; transform: scale(1.2); } }
.gp-float { animation: floatY 7s ease-in-out infinite alternate; }
.glass-panel {
  position: relative;
  border-radius: 22px;
  padding: 26px 26px 30px;
  background: linear-gradient(160deg, rgba(255,253,249,0.92), rgba(245,238,226,0.88));
  border: 1px solid rgba(249,115,22,0.28);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.8);
  transform: perspective(950px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.25s var(--ease);
  will-change: transform;
}
.gp-head { display: flex; align-items: center; gap: 7px; margin-bottom: 24px; }
.gp-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(249,115,22,0.28); }
.gp-dot:first-child { background: rgba(249,115,22,0.6); }
.gp-title {
  margin-inline-start: 12px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-dim); opacity: 0.75;
}
html[dir="rtl"] .gp-title { letter-spacing: 0.5px; }
.gp-clock {
  margin-inline-start: auto;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 1px;
  color: var(--text-dim); opacity: 0.75;
  font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: embed;
}
.gp-chart {
  height: 150px; margin-bottom: 22px;
  padding-bottom: 6px; border-bottom: 1px solid rgba(249,115,22,0.14);
}
.gp-chart svg { width: 100%; height: 100%; overflow: visible; display: block; }
.gp-grid-line { stroke: rgba(249,115,22,0.10); stroke-width: 1; }
.gp-line {
  fill: none; stroke: url(#gpstroke); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: drawLine 1.9s var(--ease) 0.8s forwards;
}
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.gp-area { fill: url(#gpfill); opacity: 0; animation: fadeArea 0.9s ease 1.8s forwards; }
@keyframes fadeArea { to { opacity: 1; } }
.gp-end {
  fill: var(--accent-3); opacity: 0;
  animation: endIn 0.4s ease 2.4s forwards;
}
@keyframes endIn { to { opacity: 1; } }
.gp-halo {
  fill: rgba(251,191,36,0.35); opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: halo 2.4s ease-out 2.7s infinite;
}
@keyframes halo {
  0%   { opacity: 0.6; transform: scale(0.5); }
  70%  { opacity: 0; transform: scale(2.8); }
  100% { opacity: 0; transform: scale(2.8); }
}
.gp-rows { display: flex; flex-direction: column; gap: 14px; }
.gp-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.85rem; color: var(--text-dim);
}
.gp-row em {
  font-style: normal; font-size: 0.75rem; font-weight: 700;
  padding: 3px 12px; border-radius: 999px;
  color: var(--ok); background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.25);
  animation: pillGlow 3.2s ease-in-out infinite;
}
.gp-row:nth-child(2) em { animation-delay: 1.1s; }
.gp-row:nth-child(3) em { animation-delay: 2.2s; }
@keyframes pillGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(74,222,128,0); }
  50%      { box-shadow: 0 0 14px rgba(74,222,128,0.28); }
}

/* ---------- Hero robot (vanilla SVG, follows the pointer) ---------- */
.robot-wrap {
  position: relative; width: min(360px, 100%); margin: 0 auto;
  animation: floatY 7s ease-in-out infinite alternate;
}
.robot {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,0.5)) drop-shadow(0 0 40px rgba(249,115,22,0.16));
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.25s var(--ease);
  will-change: transform;
}
.rb-pupil { transition: transform 0.12s ease-out; }
.robot-eyes { transform-box: view-box; transform-origin: 150px 150px; animation: blink 5.5s ease-in-out infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.12); } }
.rb-antenna { transform-box: fill-box; transform-origin: center; animation: pulse 2s infinite; }
.float-chip {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px;
  background: rgba(255,253,249,0.95);
  border: 1px solid var(--border-hover);
  font-size: 0.85rem; font-weight: 600;
  box-shadow: 0 14px 40px rgba(45,36,27,0.18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: floatY 5s ease-in-out infinite alternate;
}
.chip-1 { top: -22px; right: -14px; animation-delay: -2.5s; }
.chip-2 { bottom: -20px; left: -14px; }
.chip-3 { top: 38%; left: -34px; animation-delay: -4.5s; }
.float-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px var(--ok); animation: pulse 2s infinite; }
@keyframes floatY { from { transform: translateY(0); } to { transform: translateY(-12px); } }

.ms-logo { display: grid; grid-template-columns: repeat(2, 16px); grid-template-rows: repeat(2, 16px); gap: 3px; flex-shrink: 0; }
.ms-logo.sm { grid-template-columns: repeat(2, 7px); grid-template-rows: repeat(2, 7px); gap: 2px; }
.ms-logo span:nth-child(1) { background: #f25022; }
.ms-logo span:nth-child(2) { background: #7fba00; }
.ms-logo span:nth-child(3) { background: #00a4ef; }
.ms-logo span:nth-child(4) { background: #ffb900; }

/* ---------- Stats strip ---------- */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 80px;
}
.stat {
  padding: 26px 22px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface) 0%, rgba(241,232,218,0.6) 100%);
  border: 1px solid var(--border);
  text-align: center;
  position: relative; overflow: hidden;
  transition: border-color 0.25s, transform 0.25s;
}
.stat::before {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: var(--gradient); opacity: 0.5;
}
/* pointer-following spotlight glow (same treatment as .card — app.js already
   tracks --mx/--my on .stat) */
.stat::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(249,115,22,0.10), transparent 65%);
  opacity: 0; transition: opacity 0.35s;
}
.stat:hover { border-color: var(--border-hover); transform: translateY(-4px); box-shadow: 0 14px 36px rgba(45,36,27,0.12), 0 0 30px rgba(249,115,22,0.10); }
.stat:hover::after { opacity: 1; }
.stat > * { position: relative; z-index: 1; }
.stat b { display: block; font-size: 2rem; font-weight: 800; background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.stat span { font-size: 0.85rem; color: var(--text-dim); }

/* ---------- Why DPL: 3 cards left, rotating MENA globe right (Jul 2026) ----------
   Dotted canvas globe (drawn in js/app.js) with pulsing markers on Cairo,
   Riyadh, Manama, Kuwait City. */
#why-dpl { position: relative; overflow: hidden; }
.why-split {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 5vw, 70px); align-items: center;
}
.why-cards { display: flex; flex-direction: column; gap: 20px; }
.why-globe { display: flex; justify-content: flex-end; align-items: center; min-width: 0; }
.mena-globe {
  width: min(540px, 100%); aspect-ratio: 1; height: auto;
  opacity: 1; pointer-events: auto; cursor: grab; touch-action: pan-y;
}
@media (max-width: 1024px) {
  .why-split { grid-template-columns: 1fr; }
  .why-globe { justify-content: center; order: -1; }
  .mena-globe { width: min(380px, 80vw); opacity: 0.7; }
}
html[dir="rtl"] .why-globe { justify-content: flex-start; }
.trust-line {
  display: inline-block; margin-top: 14px;
  font-size: 0.85rem; font-weight: 600; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 18px;
  background: rgba(255, 253, 249, 0.7);
}

/* ---------- Sections ---------- */
section { padding: 100px 0; position: relative; }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 14px;
}
.kicker::before { content: ''; width: 28px; height: 1px; background: var(--gradient); }
.section-head.center .kicker::after { content: ''; width: 28px; height: 1px; background: var(--gradient); }
html[dir="rtl"] .kicker { letter-spacing: 1px; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; letter-spacing: -0.8px; line-height: 1.2; margin-bottom: 16px; }
html[dir="rtl"] h2 { letter-spacing: 0; line-height: 1.4; }
.section-head p { color: var(--text-dim); font-size: 1.05rem; }

/* ---------- Cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
/* Grid items default to min-width:auto, so they refuse to shrink below their
   content's min-content width. On a 320px screen the contact card would not go
   under 310px — the <select>'s longest option ("ERP / CRM Implementation" plus
   58px of padding) set the floor — which pushed the page into horizontal scroll.
   min-width:0 lets the track do its job; the field clips its option text instead. */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .steps > *, .form-grid > * { min-width: 0; }
input, textarea, select { min-width: 0; }

.card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 28px;
  /* Aug 2026 (Mohamed's pick from card-hover-compare.html): pointer-driven 3D
     tilt instead of a flat lift, with NO cursor-follow glow. The tilt transform
     is set INLINE by app.js on pointermove — inline wins over the .reveal
     transform (which also animates `transform`) without a specificity fight, and
     springs back on pointerleave. CSS here owns only the border + depth shadow. */
  transition: border-color 0.3s, box-shadow 0.3s;
  position: relative; overflow: hidden;
  will-change: transform;
  /* Grid stretch makes every card in a row as tall as the tallest one. Without a
     column layout the short cards ended with a block of dead space and the "Learn
     more" links in a row sat at three different heights. Column + margin-top:auto
     on .tag pins the CTA to the bottom edge so they line up across the row.
     Cards keep their natural height when nothing forces them taller. */
  display: flex; flex-direction: column;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--gradient); opacity: 0; transition: opacity 0.25s;
}
/* Light sweep (Aug 4 2026): a warm sheen streaks diagonally across the card once
   on hover-in — same motion language as the button shine. Clipped by the card's
   overflow:hidden; sits under the content (`.card > *` is z-index:1). */
.card::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(249,160,70,0.30) 45%, rgba(251,191,36,0.22) 55%, transparent);
  transform: skewX(-18deg) translateX(0); pointer-events: none; opacity: 0;
}
.card:hover::after { animation: cardSweep 0.75s var(--ease); }
.card--flat:hover::after { animation: none; } /* form cards: no sweep (set by app.js) */
@keyframes cardSweep {
  0%   { transform: skewX(-18deg) translateX(0);    opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: skewX(-18deg) translateX(360%); opacity: 0; }
}
.card:hover {
  /* clean depth shadow, no orange glow — the border accent is the colour cue.
     (transform/tilt is handled inline by app.js) */
  border-color: var(--border-hover);
  box-shadow: 0 22px 48px rgba(45,36,27,0.16);
}
.card:hover::before { opacity: 1; }
.card > * { position: relative; z-index: 1; }
.card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(249,115,22,0.16), rgba(249,115,22,0.05));
  border: 1px solid rgba(249,115,22,0.25);
  display: grid; place-items: center; font-size: 1.5rem;
  margin-bottom: 22px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.card:hover .card-icon { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 24px rgba(249,115,22,0.18); }
.card-icon svg { width: 24px; height: 24px; color: var(--accent); }
/* Real client logos — same vertical rhythm as .card-icon so logo cards and icon
   cards align in the grid.
   OPTICAL NORMALISATION (Aug 11 2026): a single max-height/max-width pair made
   these read badly, because the marks range from 0.77:1 (Royal Group's compact
   glyph) to 11.9:1 (Alexandria Container's wide lockup). One cap meant CANEX
   dominated the row while the widest lockups shrank to ~20px tall and turned into
   smudges. Logos are NOT stretched — each keeps its aspect ratio; the caps below
   are tuned per aspect band so the marks carry roughly equal optical weight. */
.client-logo-box { height: 56px; display: flex; align-items: center; margin-bottom: 22px; }
.client-logo {
  max-height: 40px; max-width: 200px; width: auto; height: auto; object-fit: contain;
  opacity: 0.88; transition: opacity 0.25s;
}
/* Compact, near-square marks need more height to hold their own (Royal Group 0.77:1) */
.client-logo--compact { max-height: 52px; max-width: 120px; }
/* Mid-wide wordmarks (INCOM 1.95:1, Alexandria's crane icon 2.47:1) */
.client-logo--regular { max-height: 46px; max-width: 170px; }
/* Wide lockups (MoJ Bahrain 4.23:1, Al Bawani 3.75:1) get width instead of height */
.client-logo--wide    { max-height: 38px; max-width: 250px; }
.card:hover .client-logo { opacity: 1; }
/* Seven clients in a 3-column grid left the last card orphaned beside a two-thirds
   void. Centre a lone trailing card in the middle column. The nth-child(3n+1) test
   only matches when the final item starts a fresh row on its own, so 6, 8 or 9
   clients keep the normal layout with no further edits. */
#clients .grid-3 > .card:last-child:nth-child(3n + 1) { grid-column: 2; }
@media (max-width: 960px) {
  /* 2-column at this breakpoint: a lone trailing card is the odd one out instead */
  #clients .grid-3 > .card:last-child:nth-child(3n + 1) { grid-column: auto; }
}
.card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; }
.card p { color: var(--text-dim); font-size: 0.95rem; }
.card .tag {
  /* align-self keeps the link hugging its text instead of stretching to the card
     width (flex column would otherwise stretch it); margin-top:auto pins it to the
     bottom so CTAs line up across a row of unequal-length cards. */
  display: inline-flex; align-items: center; align-self: flex-start;
  margin-top: auto; padding-top: 18px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--accent-ink);
  transition: opacity 0.2s;
}
.card .tag:hover { opacity: 0.75; }
/* Cards with no CTA still need their text to sit top-aligned, not spread out */
.card > p:last-child { margin-bottom: 0; }

/* ---------- Client marquee ---------- */
.clients-band { padding: 56px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(241,232,218,0.55); overflow: hidden; }
.clients-label { text-align: center; font-size: 0.8rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 32px; }
html[dir="rtl"] .clients-label { letter-spacing: 1px; }
.marquee-wrap {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee { display: flex; align-items: center; gap: 56px; width: max-content; animation: scroll 36s linear infinite; padding: 4px 0; }
/* Logo wall items (real client logos, white monochrome) */
.m-logo {
  height: 34px; width: auto; display: block; flex-shrink: 0;
  /* cap width so very wide lockups (e.g. Alexandria Container, ~11:1) scale
     down instead of dominating the strip */
  max-width: 260px; object-fit: contain;
  opacity: 0.72; transition: opacity 0.25s;
}
.m-logo:hover { opacity: 1; }
/* Symbol-only marks (e.g. Royal Group's calligraphic "R") get the company name
   set beside them — a bare glyph among wordmarks is unidentifiable at a glance */
.m-lockup {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  opacity: 0.72; transition: opacity 0.25s;
}
.m-lockup:hover { opacity: 1; }
.m-lockup img { height: 34px; width: auto; display: block; }
.m-lockup span {
  white-space: nowrap; font-size: 1.02rem; font-weight: 700;
  letter-spacing: 0.3px; color: var(--text);
}
html[dir="rtl"] .marquee { animation-name: scroll-rtl; }
.marquee:hover { animation-play-state: paused; }
.client-chip {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 26px; border-radius: 999px;
  background: rgba(255,253,249,0.7); border: 1px solid var(--border);
  font-weight: 700; font-size: 1rem; color: var(--text-dim);
  white-space: nowrap; transition: color 0.2s, border-color 0.2s;
}
.client-chip:hover { color: var(--text); border-color: var(--border-hover); }
.client-chip .c-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--gradient); flex-shrink: 0; }
/* offset = half the .marquee gap, so the duplicated list loops seamlessly */
@keyframes scroll { to { transform: translateX(calc(-50% - 28px)); } }
@keyframes scroll-rtl { to { transform: translateX(calc(50% + 28px)); } }

/* ---------- Methodology timeline ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step {
  padding: 30px 24px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  position: relative; overflow: hidden;
  transition: transform 0.25s var(--ease), border-color 0.25s;
}
.step::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(249,115,22,0.08), transparent 65%);
  opacity: 0; transition: opacity 0.35s;
}
.step:hover { transform: translateY(-4px); border-color: var(--border-hover); }
.step:hover::after { opacity: 1; }
.step-num {
  font-size: 2.6rem; font-weight: 900; line-height: 1;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; opacity: 0.9; margin-bottom: 16px; display: block;
}
.step h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
.step p { font-size: 0.88rem; color: var(--text-dim); }

/* ---------- CTA band ---------- */
.cta-band {
  border-radius: 24px; padding: 70px 50px; text-align: center;
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(249,115,22,0.14), transparent),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%;
  background: rgba(249,115,22,0.1); filter: blur(90px);
  top: -160px; right: -100px; pointer-events: none;
}
.cta-band::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(249,115,22,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249,115,22,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, black, transparent 80%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { margin-bottom: 14px; }
.cta-band p { color: var(--text-dim); max-width: 540px; margin: 0 auto 34px; }

/* ---------- Partner strip ---------- */
.partner-box {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 30px 36px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
}

/* ---------- Forms ---------- */
/* The contact page's two-up (form | contact channels). Stacks at <=960px — see the
   tablet block in the Responsive section: at 768px a 2-col split left the form card
   328px wide, which drove .form-grid columns down to 114px (unusable fields). */
/* Uniform contact-page cards (Aug 11 2026). The three cards inside .contact-split
   (form | channels | what-happens-next) are all `.card`, but they did not read as
   one set: `.form-card` carried 40px padding against the `.card` default 34/28, so
   the two side-by-side cards started their content at different insets; and
   `.card`'s cream gradient is sized to the ELEMENT, so over a ~725px form card vs a
   ~215px "what happens next" card the same top→bottom ramp lands on a visibly
   different tone at any given y (the tall card reads creamy, the short ones white).
   Flat --surface + one padding value makes all three identical at any height.
   Scoped to .contact-split — cards elsewhere sit in equal-height grid rows, where
   the gradient is consistent and worth keeping. */
.contact-split .card { background: var(--surface); padding: 34px 28px; }
/* Both columns end flush (Aug 12 2026). The grid is left on the default `stretch`
   (the old inline `align-items:start` is gone), so the form column and the aside
   column share one row height instead of each ending at its own content height —
   they were ~90px apart. The aside is a flex column and its LAST card grows, so
   the slack lands there whenever the form is the taller side; when the aside is
   taller it simply sets the row height and the form card stretches. Works in both
   directions, which matters because AR copy and viewport width move the numbers. */
.contact-aside { display: flex; flex-direction: column; gap: 24px; }
.contact-aside > .card:last-child { flex: 1; }
/* Stretching the form card to the row height left ~93px of blank cream under the
   privacy note. Rather than a dead band, hand that slack to the message box: the
   form and its grid fill the card, and `grid-template-rows` puts the only 1fr on
   row 4 — the "How can we help?" row — so every other row keeps its natural
   height and just the textarea grows. Desktop only: at <=960px the split is one
   column (no slack to absorb) and .form-grid collapses to a single column, which
   would land the 1fr on the wrong field. Row map: 1 name|company, 2 email|phone,
   3 service, 4 message, 5 submit. Re-check this if the field order changes. */
@media (min-width: 961px) {
  .contact-split .form-card > form { flex: 1; display: flex; flex-direction: column; }
  .contact-split .form-card .form-grid { flex: 1; grid-template-rows: auto auto auto 1fr auto; }
  .contact-split .form-card .form-grid > .full:nth-last-child(2) { display: flex; flex-direction: column; }
  .contact-split .form-card .form-grid > .full:nth-last-child(2) textarea { flex: 1; }
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
input, textarea, select {
  width: 100%; padding: 14px 16px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); font-family: inherit; font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
select {
  appearance: none; -webkit-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='%23f97316' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  padding-inline-end: 42px;
}
html[dir="rtl"] select { background-position: left 16px center; }
/* Focus ring. The old indicator was `outline:none` plus a 15%-alpha orange glow —
   effectively invisible on cream and short of the 3:1 non-text contrast WCAG asks
   for. Mouse focus keeps the soft treatment; keyboard focus gets a solid 2px accent
   outline (5.0:1 on cream) with the warm halo kept as the brand flourish.
   ORDER MATTERS: :focus-visible must come after :focus — same specificity, and a
   keyboard-focused field matches BOTH, so the last rule wins. */
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(249,115,22,0.16);
}
textarea { resize: vertical; min-height: 130px; }
/* Short data notice under the submit button */
.form-privacy { margin-top: 14px; font-size: 0.78rem; line-height: 1.6; color: var(--text-dim); text-align: center; }
.form-privacy a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.form-privacy a:hover { opacity: 0.8; }

/* ---------- Privacy page ---------- */
.privacy-doc { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.privacy-doc .card h2 { font-size: 1.35rem; margin-bottom: 14px; }
.privacy-doc .card p { margin-bottom: 12px; }
.privacy-doc .card p:last-child { margin-bottom: 0; }
.privacy-draft-banner { text-align: center; margin: 0; }
.privacy-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 6px 0 14px; }
.privacy-list li { color: var(--text-dim); font-size: 0.95rem; padding-inline-start: 16px; position: relative; }
.privacy-list li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.55;
}
.privacy-list b { color: var(--text); }
.privacy-todo li::before { background: var(--accent-3); }

/* ---------- Contact info cards ---------- */
.contact-item { display: flex; gap: 16px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--border); }
.contact-item:last-child { border-bottom: none; }
.contact-item .ci-icon {
  font-size: 1.4rem; width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px;
  background: linear-gradient(180deg, rgba(249,115,22,0.16), rgba(249,115,22,0.05));
  border: 1px solid rgba(249,115,22,0.25);
  display: grid; place-items: center;
}
.contact-item .ci-icon svg { width: 21px; height: 21px; color: var(--accent); }
.contact-item b { display: block; font-size: 0.95rem; margin-bottom: 3px; }
.contact-item a, .contact-item span.val { color: var(--text-dim); font-size: 0.92rem; direction: ltr; unicode-bidi: embed; }
.contact-item a:hover { color: var(--accent-ink); }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--border); padding: 60px 0 36px; background: rgba(241,232,218,0.6); margin-top: 40px; position: relative; }
footer::before {
  content: ''; position: absolute; top: -1px; left: 15%; right: 15%; height: 1px;
  background: var(--gradient); opacity: 0.5;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 40px; margin-bottom: 44px; }
.footer-grid h4 { font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 18px; }
html[dir="rtl"] .footer-grid h4 { letter-spacing: 1px; }
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid a { color: var(--text-dim); font-size: 0.92rem; transition: color 0.2s, padding 0.25s var(--ease); }
.footer-grid ul a:hover { color: var(--accent-ink); padding-inline-start: 6px; }
.footer-desc { color: var(--text-dim); font-size: 0.92rem; max-width: 300px; margin-top: 14px; }
/* Address under the footer logo/description (pin icon + Maps link) */
.footer-addr {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  color: var(--text-dim); font-size: 0.9rem; transition: color 0.2s;
}
.footer-addr:hover { color: var(--accent-ink); }
.footer-addr svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }
.copyright { text-align: center; color: var(--text-dim); font-size: 0.85rem; padding-top: 28px; border-top: 1px solid var(--border); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: 100px 0 60px; }
.page-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.page-hero p { color: var(--text-dim); font-size: 1.1rem; max-width: 620px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Vertical chips ---------- */
.vertical-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.v-chip {
  padding: 10px 20px; border-radius: 999px; font-size: 0.88rem; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
  transition: border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.v-chip:hover { border-color: var(--border-hover); color: var(--text); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(45,36,27,0.10); }

/* ---------- Testimonials ---------- */
.t-card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 30px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative; overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.t-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(249,115,22,0.08), transparent 65%);
  opacity: 0; transition: opacity 0.35s;
}
.t-card:hover { transform: translateY(-4px); border-color: var(--border-hover); }
.t-card:hover::after { opacity: 1; }
.t-card > * { position: relative; z-index: 1; }
.t-card .quote-mark {
  font-size: 3.2rem; line-height: 1; font-weight: 900;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.t-card p.quote { color: var(--text-dim); font-size: 0.97rem; font-style: italic; flex: 1; }
.t-author { display: flex; align-items: center; gap: 14px; }
.t-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--gradient); display: grid; place-items: center;
  font-weight: 800; color: #1a0d02; font-size: 1rem;
}
.t-author b { display: block; font-size: 0.95rem; }
.t-author span { font-size: 0.82rem; color: var(--text-dim); }
.placeholder-note {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.3);
  /* --accent-3 (#e08704) on the amber pill measured 2.31:1. This deeper amber is
     5.36:1 and still reads as a warning tag rather than body copy. */
  color: #8a5206;
}

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed; bottom: 28px; right: 28px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; display: grid; place-items: center;
  box-shadow: 0 8px 30px rgba(37,211,102,0.4);
  transition: transform 0.2s;
}
html[dir="rtl"] .wa-float { right: auto; left: 28px; }
.wa-float:hover { transform: scale(1.1); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }

/* ---------- Hero Spline 3D robot stage (Jul 2026 — replaced SVG robot) ----------
   Viewer injected by app.js (desktop + hover + no reduced-motion only).
   The faint logo glow behind the canvas is the loading / fallback / reduced-motion state. */
.spline-stage { position: relative; width: 100%; height: 460px; border-radius: 22px; overflow: hidden; }
/* Warm "studio backdrop" behind the robot. The Spline scene renders transparent
   and the NEXBOT model is near-black. On the CREAM theme the dark robot already
   reads clearly, so we don't need a bright pool to silhouette against — instead a
   soft warm halo + a gentle grounding pool give it a studio floor without the
   muddy orange blob a strong glow would leave on light paper. */
.spline-stage::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 56% 52% at 50% 44%, rgba(249,150,60,0.16), rgba(249,170,90,0.06) 48%, transparent 72%),
    radial-gradient(ellipse 80% 60% at 50% 66%, rgba(180,150,110,0.16), transparent 72%);
}
.spline-stage spline-viewer { position: relative; z-index: 2; width: 100%; height: 100%; display: block; }
/* Sep 2026: DPL's own three.js robot (js/dpl-robot.js) renders into this canvas. Click = wave. */
.spline-stage > canvas { position: relative; z-index: 2; width: 100%; height: 100%; display: block; cursor: pointer; }

/* ---- Static brand plate (fallback + loading state for the 3D hero) ----
   Shown whenever the Spline scene isn't running: reduced-motion, non-desktop
   pointers, blocked CDN, or the moments before the scene paints. Sits on the
   warm studio pool from .spline-stage::before and inside the .hv-ring circles,
   so it reads as a composed brand lockup rather than an empty slot.
   app.js adds .has-3d once the viewer fires `load`. */
.spline-fallback {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center; pointer-events: none;
  /* Physical padding, not logical: .chip-3 is pinned with `left` and does not
     mirror in RTL, so the plate must clear it on the same side in both directions. */
  padding-left: 34px;
  transition: opacity 0.7s var(--ease);
}
.spline-stage.has-3d .spline-fallback { opacity: 0; }
.sf-logo {
  /* 196px collided with the .chip-3 float by ~17px once the plate went to full
     strength (the old ghost logo hid the overlap). 168px clears it at every
     desktop width the stage is shown at. */
  width: 168px; height: auto; opacity: 0.92;
  filter: drop-shadow(0 10px 30px rgba(45, 36, 27, 0.10));
}
.sf-rule { width: 58px; height: 2px; border-radius: 2px; background: var(--gradient); opacity: 0.85; }
.sf-tagline {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 3.4px; text-transform: uppercase;
  color: var(--text-dim);
}
html[dir="rtl"] .sf-tagline { letter-spacing: 0.6px; }
/* .spline-logo-glow (the old 22%-opacity breathing ghost) is retained only for the
   not-linked hero-spline-demo.html comparison page. */
.spline-logo-glow {
  position: absolute; z-index: 0; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 210px; opacity: 0.22;
  filter: drop-shadow(0 0 30px rgba(249,150,60,0.4));
  animation: logoBreath 4.5s ease-in-out infinite;
}
@keyframes logoBreath { 0%, 100% { opacity: 0.16; } 50% { opacity: 0.3; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  /* Hero: land every entrance element in its final visible state, and stop
     ambient loops entirely (no single-frame flash of aurora/beam/pulse) */
  .hero .badge, .hero p.lead, .hero-actions, .hero-visual,
  .hw, .grad-text .hw, .scroll-cue { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero-aurora, .hero::after, .gp-float, .gp-halo, .gp-row em,
  .grad-text .hw, .gp-line, .gp-area, .gp-end { animation: none !important; }
  .gp-line { stroke-dashoffset: 0 !important; }
  .gp-area, .gp-end { opacity: 1 !important; }
  /* Robot: hold still, no float/blink/pulse, eyes centered */
  .robot-wrap, .robot-eyes, .rb-antenna, .hv-ping, .hv-spark { animation: none !important; }
  .robot { transform: none !important; }
  .rb-pupil { transform: none !important; }
  /* Cards: no 3D tilt, no light sweep — hold flat/quiet */
  .card, .card:hover { transform: none !important; }
  .card:hover::after { animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
}
@media (max-width: 960px) {
  .grid-3, .grid-4, .steps, .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* Contact page: stack the form/channels split and drop the form to one column.
     Keeping 2 columns here squeezed each field to ~114px at 768px (iPad portrait),
     truncating every placeholder. Full-width card + single column is comfortable. */
  .contact-split { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-split .card { padding: 30px 24px; }
  .nav-links {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: rgba(250,244,236,0.98);
    border-bottom: 1px solid var(--border); padding: 10px 0;
  }
  /* The menu is absolute inside a FIXED nav, so it can never scroll with the page.
     Without a height cap, expanding the Services accordion pushed the last items
     (About & Clients / Contact) past the bottom of short viewports with no way to
     reach them. Cap it to the space under the nav and let the menu scroll itself.
     vh first as the fallback; dvh (where supported) tracks Safari's collapsing
     toolbar so the cap stays correct as the URL bar shows/hides. */
  .nav-links.open {
    display: flex; animation: navMenuIn 0.3s var(--ease);
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 18px;
  }
  /* Stagger the top-level items in as the menu opens */
  .nav-links.open > li { animation: navItemIn 0.42s var(--ease) both; }
  .nav-links.open > li:nth-child(1) { animation-delay: 0.03s; }
  .nav-links.open > li:nth-child(2) { animation-delay: 0.07s; }
  .nav-links.open > li:nth-child(3) { animation-delay: 0.11s; }
  .nav-links.open > li:nth-child(4) { animation-delay: 0.15s; }
  .nav-links.open > li:nth-child(5) { animation-delay: 0.19s; }
  .nav-links.open > li:nth-child(6) { animation-delay: 0.23s; }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links a { display: block; padding: 14px; }
  .nav-links a::after { display: none; }
  .hamburger { display: inline-flex; }
  .nav-cta-group .btn { display: none; }
  /* CTA lives in the menu on mobile instead. `color` must be restated: the CTA is
     inside .nav-links, whose `a { color: var(--text-dim) }` out-specifies
     .btn-primary and rendered the label as washed-out grey on orange (1.4:1). */
  .nav-cta-mobile { display: block; padding: 14px 20px 6px; }
  .nav-cta-mobile a {
    display: inline-flex !important; width: 100%; justify-content: center;
    padding: 13px 20px; color: #140a02; font-weight: 700;
  }
  .nav-cta-mobile a:hover { color: #140a02; }
  .nav-cta-mobile a::after { display: none; }
  /* Submenu is a tap-to-expand accordion in the mobile menu (toggled by app.js).
     Explicitly clear ALL desktop mega-menu positioning (absolute/left:50%/transform/
     grid/min-width) so nothing leaks through and pushes items off-screen on iOS.
     !important is required because iOS Safari applies :hover on tap ("sticky hover"),
     and .has-submenu:hover > .submenu (3 classes) would otherwise out-specify these
     resets and re-apply transform:translateX(-50%), clipping the items off-screen. */
  .has-submenu { position: static; }
  .has-submenu::before { display: none; }
  .submenu-caret { display: inline-block; opacity: 0.65; }
  .has-submenu.open .submenu-caret { transform: rotate(180deg); }
  .has-submenu > .submenu,
  .has-submenu:hover > .submenu,
  .has-submenu:focus-within > .submenu {
    position: static !important; top: auto !important;
    left: auto !important; right: auto !important;
    transform: none !important;
    visibility: visible;
    display: block !important;
    grid-template-columns: none !important; gap: 0;
    min-width: 0 !important; width: 100% !important; margin: 0;
    background: none; border: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    /* Smooth accordion slide (max-height instead of display toggle) */
    max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; padding: 0;
    transition: max-height 0.34s var(--ease), opacity 0.28s var(--ease), padding 0.34s var(--ease);
  }
  .has-submenu.open > .submenu {
    max-height: 70vh; opacity: 1; pointer-events: auto; padding: 0 0 8px;
  }
  .submenu a {
    display: block; width: 100%; box-sizing: border-box;
    text-align: center !important; white-space: normal !important;
    font-size: 0.82rem; padding: 9px; color: var(--text-dim);
  }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4, .steps, .stats, .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 50px 24px; }
  section { padding: 60px 0; }
}

/* ---------- Mobile polish pass (Aug 5 2026) ----------
   Premium touches for touch devices, where the desktop hover/pointer effects
   (Spline hero, magnet grid, card tilt/sweep) never fire. All reduced-motion-safe
   via the global rule at the top of the reduced-motion block. */

/* Mobile-menu entrance + item stagger */
@keyframes navMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes navItemIn { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } }

/* Scroll progress bar — thin gradient line at the very top, fills with scroll.
   Injected by app.js so it lives on every page without touching each HTML file. */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--gradient); z-index: 300;
  border-radius: 0 3px 3px 0; pointer-events: none;
  box-shadow: 0 0 10px rgba(249,115,22,0.35);
  transition: width 0.08s linear;
}
html[dir="rtl"] .scroll-progress { left: auto; right: 0; border-radius: 3px 0 0 3px; }

/* Tactile press feedback + scroll-triggered card sheen — touch devices only */
@media (hover: none) {
  .btn { transition: transform 0.14s var(--ease), box-shadow 0.2s, border-color 0.2s, background 0.2s; }
  .btn:active { transform: scale(0.95); }
  .btn-primary:active { box-shadow: 0 3px 18px rgba(249,115,22,0.4); }
  .lang-btn { transition: transform 0.14s var(--ease), border-color 0.25s, box-shadow 0.25s; }
  .lang-btn:active { transform: scale(0.9); }
  .hamburger { transition: transform 0.14s var(--ease); }
  .hamburger:active { transform: scale(0.88); }
  .wa-float { transition: transform 0.16s var(--ease); }
  .wa-float:active { transform: scale(0.9); }
  .nav-links a:active, .submenu a:active { background: rgba(249,115,22,0.10); color: var(--text); }
  /* Warm sheen sweeps across each card as it scrolls into view (class set by app.js) */
  .card.swept::after { animation: cardSweep 0.9s var(--ease); }
}

/* ─── FAQ (index) — native <details> accordion, no JS. Also feeds FAQPage JSON-LD. */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.faq-item[open] { border-color: var(--border-hover); box-shadow: 0 8px 30px rgba(45,36,27,0.06); }
.faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 54px 20px 22px;
  font-weight: 650; font-size: 1.02rem; color: var(--text);
  transition: color 0.2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-ink); }
/* Chevron toggle, drawn in CSS so no icon markup is needed inside <summary> */
.faq-item summary::after {
  content: ""; position: absolute; top: 50%; right: 22px;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transform-origin: center;
  transition: transform 0.25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
html[dir="rtl"] .faq-item summary { padding: 20px 22px 20px 54px; }
html[dir="rtl"] .faq-item summary::after { right: auto; left: 22px; }
.faq-body { padding: 0 22px 20px; }
.faq-body p { margin: 0; color: var(--text-dim); line-height: 1.7; font-size: 0.97rem; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 14px; }
/* Gentle open animation, respecting reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-body { animation: faqOpen 0.28s var(--ease); }
  @keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* ---------- FAQ search + intent groups + per-answer CTAs (Aug 9 2026) ---------- */
.faq-search-wrap { position: relative; max-width: 560px; margin: 0 auto 42px; }
.faq-search { padding-inline-start: 46px; }
.faq-search::-webkit-search-cancel-button { -webkit-appearance: none; }
.faq-search-icon {
  position: absolute; top: 50%; inset-inline-start: 16px; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-dim); pointer-events: none;
}
.faq-groups { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
/* nested lists no longer need their own centering/width — the groups wrapper owns it */
.faq-groups .faq-list { max-width: none; margin: 0; }
.faq-group-title {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 14px; padding-inline-start: 4px;
}
.faq-cta {
  display: inline-flex; align-items: center; margin-top: 16px;
  font-size: 0.9rem; font-weight: 650; color: var(--accent-ink);
  text-decoration: none; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.faq-cta:hover { opacity: 0.82; transform: translateX(2px); }
html[dir="rtl"] .faq-cta:hover { transform: translateX(-2px); }
.faq-item.is-hidden, .faq-group.is-hidden { display: none; }
.faq-empty {
  text-align: center; color: var(--text-dim); margin: 0;
  padding: 30px 12px; font-size: 0.97rem;
}

/* Hero title: solid orange instead of gradient (matches solid buttons) */
#heroTitle .grad-text,
#heroTitle .grad-text .hw {
  background: none;
  -webkit-text-fill-color: #f97316;
  color: #f97316;
}

/* Sep 24 2026 (Mohamed): homepage hero headline two steps smaller than the
   global h1 (was clamp(2.4rem, 5.5vw, 4.2rem) ≈ 67px max → ≈ 56px max).
   Scoped to #heroTitle so inner-page headings keep their own size. */
#heroTitle { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }

/* Sep 24 2026: hero robot on tablets and phones too (was desktop-only, where
   .hero-visual was display:none under 1024px). The robot sits under the headline
   and buttons; the floating chips are hidden (no room beside it on a narrow
   screen) and the stage + halo rings are shortened. These rules come after the
   original 1024px block, so they win at equal specificity. */
@media (max-width: 1024px) {
  .hero-visual { display: block; min-height: 0; margin-top: 8px; }
  .hero-visual .float-chip { display: none; }
  .spline-stage { height: 400px; }
  .hv-ring { width: 420px; height: 420px; }
  .hv-ring3 { width: 400px; height: 400px; }
}
@media (max-width: 600px) {
  .spline-stage { height: 300px; }
  .hv-ring { width: 320px; height: 320px; }
  .hv-ring2 { width: 250px; height: 250px; }
  .hv-ring3 { width: 310px; height: 310px; }
  .hv-ping { width: 220px; height: 220px; }
}
/* Phones/tablets: the robot is framed tighter (cut at the waist), so fade the
   bottom edge of the canvas instead of ending on a hard line. */
@media (max-width: 1024px) {
  .spline-stage > canvas {
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  }
}

/* ---------- FAQ — compact home variant (Sep 29 2026) ----------
   Small heading, no search box, one flat two-column list of closed rows.
   Scoped to body.home so the Services-page FAQ keeps its full layout. */
body.home #faq { padding-bottom: 48px; }
body.home #faq .section-head { max-width: none; margin: 0 0 18px; text-align: left; }
html[dir="rtl"] body.home #faq .section-head { text-align: right; }
body.home #faq .section-head h2 { font-size: 1.5rem; margin: 0; }
body.home #faq .section-head .kicker,
body.home #faq .section-head p,
body.home #faq .faq-search-wrap,
body.home #faq .faq-group-title,
body.home #faq .faq-empty { display: none; }
body.home #faq .faq-groups { max-width: none; gap: 0; }
body.home #faq .faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; align-items: start; }
body.home #faq .faq-item summary { padding: 14px 44px 14px 18px; font-size: 0.95rem; }
body.home #faq .faq-item summary::after { right: 18px; }
html[dir="rtl"] body.home #faq .faq-item summary { padding: 14px 18px 14px 44px; }
html[dir="rtl"] body.home #faq .faq-item summary::after { right: auto; left: 18px; }
body.home #faq .faq-body { padding: 0 18px 16px; }
body.home #faq .faq-body p { font-size: 0.92rem; line-height: 1.6; }
@media (max-width: 760px) { body.home #faq .faq-list { grid-template-columns: 1fr; } }

/* Page-header eyebrow bubbles ("About DPL Systems", "Our Services", …) removed site-wide (Sep 29 2026).
   Markup is left in the templates; delete the .badge spans there if this rule is ever dropped. */
.badge { display: none !important; }