/* =========================================================
   AXON — "Luxe" design layer (v2.1)

   Loaded after style.css on every page. It re-skins the shared
   building blocks (type, buttons, cards, navbar, footer, section
   headings) so every page picks the look up at once, and holds the
   home page's own components (cx-* hero/showcase, lx-* sections).

   Direction — modern premium agency (elite-web-design skills, "agency
   / studio" archetype): one clean geometric sans at restrained sizes,
   ink black, warm off-white, a single gold accent, and cinematic
   motion carried by GSAP + Lenis on the home page.
   - Satoshi for Latin text (Jost fallback). Arabic/Kurdish use Noto
     Kufi Arabic, since a Latin face has no Arabic glyphs.
   - Motion is always additive: with no JS, an unsupported browser or
     prefers-reduced-motion, every element is simply visible.
   - Logical properties throughout, so RTL mirrors automatically.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --lx-ink: #070708;
  --lx-ink-2: #0c0c0e;
  --lx-surface: #111114;
  --lx-line: rgba(255, 255, 255, 0.07);
  --lx-line-strong: rgba(255, 255, 255, 0.13);
  --lx-gold: #c9a24b;
  --lx-gold-2: #e6c675;
  --lx-text: #f3efe6;
  --lx-muted: rgba(243, 239, 230, 0.62);
  --lx-faint: rgba(243, 239, 230, 0.4);

  --lx-gold-grad: linear-gradient(135deg, #f4dc96 0%, #c9a24b 45%, #8f6d26 100%);
  --lx-gold-text: linear-gradient(100deg, #f8e7b4 0%, #d8b25c 40%, #b08632 70%, #f2d895 100%);

  --lx-display: "Satoshi", "Jost", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --lx-sans: "Satoshi", "Jost", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --lx-radius: 18px;
  --lx-radius-lg: 26px;

  --lx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lx-container: 1240px;
  --lx-gutter: clamp(20px, 4vw, 48px);
  --lx-section: clamp(72px, 9vw, 128px);
}

/* Every legacy rule sets type via --font-heading / --font-body, so
   re-pointing these two restyles all pages (admin included) at once. */
:root {
  --font-heading: var(--lx-display);
  --font-body: var(--lx-sans);
}

[dir="rtl"] {
  --lx-display: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  --lx-sans: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* ---------- Base ---------- */
html {
  background: var(--lx-ink);
  color-scheme: dark;
  scroll-padding-top: 110px;
  scrollbar-color: rgba(201, 162, 75, 0.45) var(--lx-ink);
  scrollbar-width: thin;
}

body {
  background: var(--lx-ink);
  color: var(--lx-text);
  font-family: var(--lx-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(201, 162, 75, 0.85);
  color: #0a0a0a;
}

/* Film grain: one fixed, pointer-transparent layer of SVG noise so big
   dark areas never look like flat digital black. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

h1, h2, h3, h4,
.section-title,
.panel-title {
  font-family: var(--lx-display);
  letter-spacing: -0.02em;
}

[dir="rtl"] :is(h1, h2, h3, h4, .section-title, .panel-title) {
  letter-spacing: 0;
}

:focus-visible {
  outline: 2px solid var(--lx-gold-2);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Lenis smooth scroll (home page) — the library's own required CSS. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* ---------- Scroll progress (CSS scroll-driven) ---------- */
.lx-progress {
  display: none;
}

@supports (animation-timeline: scroll()) {
  .lx-progress {
    display: block;
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 2px;
    z-index: 10000;
    background: var(--lx-gold-grad);
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: lx-progress linear both;
    animation-timeline: scroll(root);
  }

  [dir="rtl"] .lx-progress {
    transform-origin: 100% 50%;
  }
}

@keyframes lx-progress {
  to { transform: scaleX(1); }
}

/* ---------- Page transitions (View Transitions API) ---------- */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: lx-vt-out 0.28s var(--lx-ease) both;
}

::view-transition-new(root) {
  animation: lx-vt-in 0.45s var(--lx-ease) both;
}

@keyframes lx-vt-out {
  to { opacity: 0; }
}

@keyframes lx-vt-in {
  from { opacity: 0; }
}

/* ---------- Navbar: floating glass bar ---------- */
.axon-navbar {
  position: fixed;
  inset-block-start: 14px;
  inset-inline: max(14px, calc((100vw - var(--lx-container)) / 2 - 24px));
  width: auto;
  padding: 10px 14px 10px 18px;
  border: 1px solid var(--lx-line-strong);
  border-radius: 999px;
  background: rgba(12, 12, 14, 0.5);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  z-index: 1000;
}

.axon-navbar.is-scrolled {
  background: rgba(10, 10, 12, 0.82);
  border-color: rgba(201, 162, 75, 0.22);
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.55);
}

/* The navbar shows the A mark alone (axon-mark.png, cut from the official
   logo) — the full logo's wordmark was cropped into a stray "XO" here, and
   the brand name already sits next to it as text. */
.axon-navbar .brand img {
  width: 38px;
  height: 38px;
  padding: 6px;
  border-radius: 50%;
  object-fit: contain;
  background: radial-gradient(circle at 50% 35%, #1b1b1f 0%, #070708 75%);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 75, 0.35);
}

.axon-navbar .brand-name {
  font-family: var(--lx-sans);
  letter-spacing: 0.32em;
  font-weight: 700;
}

.axon-navbar nav a {
  position: relative;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--lx-muted);
  transition: color 0.25s ease;
}

.axon-navbar nav a:hover,
.axon-navbar nav a:focus-visible {
  color: var(--lx-text);
}

.axon-navbar nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -6px;
  height: 1px;
  background: var(--lx-gold-2);
  transform: scaleX(0);
  transform-origin: var(--lx-origin-start, 0 50%);
  transition: transform 0.35s var(--lx-ease);
}

[dir="rtl"] .axon-navbar nav a::after {
  --lx-origin-start: 100% 50%;
}

.axon-navbar nav a:hover::after,
.axon-navbar nav a:focus-visible::after {
  transform: scaleX(1);
}

@media (max-width: 1100px) {
  .axon-navbar {
    inset-inline: 12px;
    border-radius: 22px;
  }

  .axon-navbar .navbar-menu.is-open {
    border: 1px solid var(--lx-line-strong);
    border-radius: 20px;
    background: rgba(10, 10, 12, 0.96);
    backdrop-filter: blur(18px);
  }
}

/* ---------- Navbar v2.4: links + tools (bell, account, language) ----------
   Only three links sit in the bar; the signed-in person's items live in
   one account menu so the bar never overflows, even for an admin. */
.axon-navbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.axon-navbar .navbar-menu {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.nx-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.axon-navbar .nx-links a {
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.axon-navbar .nx-links a::after {
  inset-inline: 12px;
}

.axon-navbar .nx-links a.nx-cta {
  margin-inline-start: 6px;
  border: 1px solid rgba(201, 162, 75, 0.55);
  color: var(--lx-gold-2);
}

.axon-navbar .nx-links a.nx-cta::after {
  display: none;
}

.axon-navbar .nx-links a.nx-cta:hover {
  background: rgba(201, 162, 75, 0.1);
}

.nx-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--lx-line-strong);
}

/* Bell. */
.nx-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--lx-muted);
  transition: color 0.2s ease, background 0.2s ease;
}

.nx-bell svg {
  width: 20px;
  height: 20px;
}

.nx-bell:hover,
.nx-bell:focus-visible {
  color: var(--lx-text);
  background: rgba(255, 255, 255, 0.05);
}

.nx-badge {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
  color: #120e05;
  background: var(--lx-gold-grad);
}

.nx-badge--inline {
  position: static;
  display: inline-grid;
  margin-inline-start: 6px;
}

/* Dropdowns (account + language) — <details>/<summary>. */
.nx-menu {
  position: relative;
}

.nx-menu > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px 0 4px;
  border-radius: 999px;
  border: 1px solid transparent;
  list-style: none;
  cursor: pointer;
  color: var(--lx-muted);
  font-size: 0.86rem;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.nx-menu > summary::-webkit-details-marker {
  display: none;
}

.nx-menu > summary:hover,
.nx-menu[open] > summary {
  color: var(--lx-text);
  border-color: var(--lx-line-strong);
  background: rgba(255, 255, 255, 0.04);
}

.nx-lang > summary {
  padding-inline-start: 10px;
}

.nx-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 0.82rem;
  font-weight: 700;
  color: #120e05;
  background: var(--lx-gold-grad);
}

.nx-name {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nx-globe {
  width: 16px;
  height: 16px;
  color: var(--lx-gold-2);
}

.nx-caret {
  width: 12px;
  height: 12px;
  transition: transform 0.25s var(--lx-ease);
}

.nx-menu[open] .nx-caret {
  transform: rotate(180deg);
}

.nx-panel {
  position: absolute;
  inset-block-start: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  min-width: 230px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--lx-line-strong);
  background: rgba(14, 14, 17, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  animation: nx-pop 0.22s var(--lx-ease) both;
}

.nx-panel--lang {
  min-width: 160px;
}

@keyframes nx-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
}

.nx-panel-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--lx-line);
}

.nx-panel-head strong {
  color: var(--lx-text);
  font-weight: 500;
}

.nx-panel-head span {
  font-size: 0.76rem;
  color: var(--lx-faint);
  overflow: hidden;
  text-overflow: ellipsis;
}

.axon-navbar .nx-panel a {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.88rem;
  color: var(--lx-muted);
}

.axon-navbar .nx-panel a::after {
  display: none;
}

.axon-navbar .nx-panel a:hover,
.axon-navbar .nx-panel a:focus-visible {
  color: var(--lx-text);
  background: rgba(201, 162, 75, 0.09);
}

.axon-navbar .nx-panel a.is-current {
  color: var(--lx-gold-2);
}

.axon-navbar .nx-panel a.nx-logout,
.axon-navbar .nx-mobile a.nx-logout {
  margin-top: 4px;
  border-top: 1px solid var(--lx-line);
  border-radius: 0 0 10px 10px;
  color: #e08a82;
}

/* The flat phone list is hidden on desktop. */
.nx-mobile {
  display: none;
}

/* ---------- Narrower screens: hamburger from 1100px down ----------
   The old switch point (860px) let a long admin bar overlap itself
   between ~860 and ~1250px. */
@media (max-width: 1100px) {
  .axon-navbar {
    flex-wrap: wrap;
  }

  .axon-navbar .brand-tagline {
    display: none;
  }

  .axon-navbar .navbar-toggle {
    display: flex;
  }

  .axon-navbar .navbar-menu {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: 14px;
    padding: 14px 4px 6px;
    border-top: 1px solid var(--lx-line);
  }

  .axon-navbar .navbar-menu.is-open {
    display: flex;
  }

  .nx-links {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .axon-navbar .nx-links a,
  .axon-navbar .nx-mobile a {
    padding: 12px 8px;
    border-radius: 10px;
    font-size: 0.95rem;
  }

  .axon-navbar .nx-links a::after,
  .axon-navbar .nx-mobile a::after {
    display: none;
  }

  .axon-navbar .nx-links a.nx-cta {
    margin: 6px 0 0;
    justify-content: center;
    text-align: center;
  }

  .nx-tools {
    display: none;
  }

  .nx-mobile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--lx-line);
  }

  .nx-mobile-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 12px;
    color: var(--lx-text);
  }

  .nx-mobile-user small {
    color: var(--lx-faint);
  }

  .axon-navbar .nx-mobile a {
    display: flex;
    align-items: center;
    color: var(--lx-muted);
  }

  .axon-navbar .nx-mobile .lang-switcher {
    margin-top: 10px;
    justify-content: flex-start;
  }

  .axon-navbar .navbar-menu.is-open {
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
  }
}

/* ---------- Room for the floating navbar ----------
   The v2 navbar is position:fixed (it floats over the home hero), so
   pages that start straight with content must leave space for it —
   otherwise the admin/account panels' title rows (with their "New"
   buttons) and product breadcrumbs sat hidden underneath it. */
:root {
  --lx-nav-space: 104px;
}

.panel-shell {
  padding-top: var(--lx-nav-space);
}

.hero--breadcrumb {
  padding-top: var(--lx-nav-space);
}

@media (max-width: 1100px) {
  :root {
    --lx-nav-space: 96px;
  }
}

/* ---------- Buttons ---------- */
.btn-gold,
.btn-outline,
.btn-gold-block {
  font-family: var(--lx-sans);
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
  transition: transform 0.35s var(--lx-ease), box-shadow 0.35s ease, background 0.35s ease,
    color 0.25s ease, border-color 0.25s ease;
}

.btn-gold,
.btn-gold-block {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #120e05;
  background: var(--lx-gold-grad);
  border: 1px solid rgba(255, 233, 170, 0.55);
  box-shadow: 0 10px 30px -10px rgba(201, 162, 75, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-gold::before,
.btn-gold-block::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--lx-ease);
}

.btn-gold:hover::before,
.btn-gold-block:hover::before {
  transform: translateX(120%);
}

.btn-gold:hover,
.btn-gold-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(201, 162, 75, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #120e05;
}

.btn-outline {
  color: var(--lx-text);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--lx-line-strong);
  backdrop-filter: blur(8px);
}

.btn-outline:hover {
  color: var(--lx-text);
  border-color: rgba(201, 162, 75, 0.7);
  background: rgba(201, 162, 75, 0.08);
  transform: translateY(-2px);
}

.lx-arrow {
  display: inline-block;
  margin-inline-start: 10px;
  transition: transform 0.35s var(--lx-ease);
}

[dir="rtl"] .lx-arrow {
  transform: scaleX(-1);
}

a:hover .lx-arrow {
  transform: translateX(4px);
}

[dir="rtl"] a:hover .lx-arrow {
  transform: scaleX(-1) translateX(4px);
}

/* ---------- Section headings (shared by every page) ---------- */
.section {
  padding-block: var(--lx-section);
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--lx-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--lx-gold-2);
}

[dir="rtl"] .section-eyebrow {
  letter-spacing: 0;
  font-size: 0.84rem;
}

.section-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--lx-gold-grad);
}

.section-title {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--lx-text);
  text-wrap: balance;
}

[dir="rtl"] .section-title {
  font-weight: 700;
  line-height: 1.45;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
}

.section-subtitle {
  color: var(--lx-muted);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.7;
  max-width: 56ch;
  text-wrap: pretty;
}

/* ---------- Cards (category + service, every page) ---------- */
.category-grid {
  max-width: var(--lx-container);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  padding-inline: var(--lx-gutter);
}

.category-card {
  position: relative;
  border-radius: var(--lx-radius);
  border: 1px solid var(--lx-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005));
  overflow: hidden;
  transition: border-color 0.4s ease, transform 0.5s var(--lx-ease), box-shadow 0.5s ease;
}

/* Cursor spotlight: luxe.js feeds --mx / --my. */
.category-card::before,
.lx-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(230, 198, 117, 0.13), transparent 45%);
  transition: opacity 0.4s ease;
}

.category-card:hover::before,
.lx-spot:hover::before {
  opacity: 1;
}

.category-card:hover {
  border-color: rgba(201, 162, 75, 0.45);
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

.category-card-image {
  transition: transform 1.1s var(--lx-ease), filter 0.6s ease;
  filter: saturate(0.9) brightness(0.92);
}

.category-card:hover .category-card-image {
  transform: scale(1.06);
  filter: saturate(1.05) brightness(1);
}

.category-card-body {
  position: relative;
  z-index: 1;
  text-align: start;
}

.category-card-body h3 {
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.category-card-body p {
  color: var(--lx-muted);
  line-height: 1.6;
}

.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008));
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ---------- Inner-page heroes and titles ---------- */
.hero--page {
  position: relative;
  padding-block: clamp(140px, 16vw, 200px) clamp(40px, 5vw, 72px);
  text-align: center;
  overflow: hidden;
}

.hero--page::before {
  content: "";
  position: absolute;
  inset: -20% 10% auto;
  height: 520px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(201, 162, 75, 0.12), transparent);
}

.hero--page h1,
.hero h1 {
  font-family: var(--lx-display);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: none;
}

.hero--page h1 {
  font-size: clamp(2.3rem, 4.8vw, 4rem);
  line-height: 1.05;
  margin: 0 0 16px;
  background: var(--lx-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[dir="rtl"] .hero--page h1 {
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

.hero--page p {
  color: var(--lx-muted);
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  max-width: 60ch;
  margin-inline: auto;
}

.service-detail-body h1,
.auth-title {
  font-family: var(--lx-display);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.service-detail-body h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
}

.auth-title {
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
}

[dir="rtl"] .service-detail-body h1,
[dir="rtl"] .auth-title {
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

/* =========================================================
   Price lists (px-*) — model pages, model cards, order form
   ========================================================= */

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

/* "From 45,000 IQD / 100 pcs  ·  Price list ↓" under the model name. */
.px-from {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 4px 0 18px;
  color: var(--lx-muted);
  font-size: 0.95rem;
}

.px-from strong {
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--lx-gold-2);
  font-variant-numeric: tabular-nums;
}

.px-from a {
  margin-inline-start: 6px;
  font-size: 0.85rem;
  color: var(--lx-text);
  border-bottom: 1px solid rgba(201, 162, 75, 0.5);
}

/* Price chip on a model card. */
.px-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  margin-top: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 75, 0.35);
  background: rgba(201, 162, 75, 0.07);
  font-size: 0.8rem;
  color: var(--lx-muted);
}

.px-chip strong {
  color: var(--lx-gold-2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.px-chip.is-pending {
  border-color: var(--lx-line-strong);
  background: rgba(255, 255, 255, 0.03);
}

.px-chip.is-pending strong {
  color: var(--lx-text);
}

.px-block {
  scroll-margin-top: 110px;
}

.px-pricelist {
  display: grid;
  gap: 22px;
}

.px-size {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--lx-text);
}

.px-size span {
  margin-inline-end: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lx-gold-2);
}

[dir="rtl"] .px-size span { letter-spacing: 0; font-size: 0.82rem; }

.px-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

.px-table th {
  padding: 12px 18px;
  text-align: start;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lx-faint);
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid var(--lx-line);
}

[dir="rtl"] .px-table th { letter-spacing: 0; font-size: 0.8rem; }

.px-table td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--lx-line);
  color: var(--lx-muted);
  vertical-align: middle;
}

.px-table tbody tr:last-child td {
  border-bottom: none;
}

.px-table tbody tr {
  transition: background 0.25s ease;
}

.px-table tbody tr:hover {
  background: rgba(201, 162, 75, 0.05);
}

.px-qty strong {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--lx-text);
}

.px-price strong {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--lx-gold-2);
}

.px-qty span,
.px-price span,
.px-col-unit span {
  font-size: 0.82rem;
  color: var(--lx-faint);
}

/* "Price coming soon" — present, but clearly not a number yet. */
.px-soon {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px dashed rgba(201, 162, 75, 0.45);
  font-size: 0.78rem;
  color: var(--lx-gold-2);
}

.px-action {
  text-align: end;
  white-space: nowrap;
}

.px-order {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--lx-line-strong);
  font-size: 0.84rem;
  color: var(--lx-text);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.px-order:hover {
  border-color: rgba(201, 162, 75, 0.7);
  background: rgba(201, 162, 75, 0.1);
}

.px-order .lx-arrow {
  margin-inline-start: 8px;
}

.px-note {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--lx-faint);
}

/* The per-piece column is the first to go on a narrow phone. */
@media (max-width: 560px) {
  .px-col-unit { display: none; }
  .px-table th,
  .px-table td { padding: 12px 12px; }
  .px-order { padding: 8px 12px; }
}

/* Order form: live estimate + collapsible price list. */
.px-estimate {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 16px;
  margin: 6px 0 18px;
  padding: 18px 20px;
  border-radius: var(--lx-radius);
  border: 1px solid rgba(201, 162, 75, 0.35);
  background: linear-gradient(135deg, rgba(201, 162, 75, 0.1), rgba(201, 162, 75, 0.02));
}

.px-estimate-label {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lx-gold-2);
}

[dir="rtl"] .px-estimate-label { letter-spacing: 0; font-size: 0.84rem; }

.px-estimate-value {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--lx-text);
  font-variant-numeric: tabular-nums;
}

.px-estimate-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.82rem;
  color: var(--lx-faint);
}

.px-details {
  margin: 0 0 22px;
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius);
  padding: 14px 18px;
}

.px-details summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--lx-text);
}

.px-details[open] summary {
  margin-bottom: 16px;
}

/* ---------- Admin: add buttons (v2.7) ---------- */
.ax-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.ax-cat-head .panel-subtitle {
  margin: 0;
}

.ax-add span {
  font-weight: 700;
  margin-inline-end: 2px;
}

.ax-slug {
  color: var(--lx-faint);
}

.ax-add-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  padding: 18px;
  border-radius: 14px;
  border: 1px dashed rgba(201, 162, 75, 0.55);
  color: var(--lx-gold-2);
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ax-add-card:hover {
  background: rgba(201, 162, 75, 0.08);
  border-color: var(--lx-gold-2);
}

.ax-add-plus {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 1rem;
}

/* ---------- Sub-branches (gx-*, v2.6) ---------- */
.gx-head {
  text-align: start;
  max-width: var(--lx-container);
  margin: 0 auto clamp(20px, 3vw, 32px);
  padding-inline: var(--lx-gutter);
}

.gx-head .section-title,
.gx-head .section-subtitle {
  text-align: start;
  margin-inline: 0;
}

.gx-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 0.86rem;
  color: var(--lx-gold-2);
}

.gx-back .gx-back-arrow {
  margin: 0;
}

.gx-card .category-card-image {
  aspect-ratio: 4 / 3;
}

.gx-admin {
  margin: 8px 0 22px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--lx-line);
}

.gx-admin-list {
  list-style: none;
  margin: 10px 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.gx-admin-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.gx-admin-list small {
  margin-inline-start: 8px;
  color: var(--lx-faint);
}

.gx-admin-add input {
  min-width: 0;
  flex: 1 1 140px;
}

/* Sub-branch pictures and Gemini posters (v2.10) */
.gx-admin-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.gx-admin-thumb {
  width: 54px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--lx-line);
  flex: none;
}

.gx-admin-list li form {
  margin: 0;
}

.gx-media-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 6px;
}

.gx-media-actions .upload-form {
  margin: 0;
}

/* ---------- Admin: editable price table (v2.4) ---------- */
.px-edit-scroll {
  overflow-x: auto;
}

.px-edit-table td {
  vertical-align: middle;
}

.px-edit-input {
  min-height: 40px;
  padding: 8px 10px;
  font-size: 0.9rem;
}

/* Fixed minimum widths: inside the admin panel's narrow column the
   inputs used to shrink until "A3" and "IQD" were clipped; the table
   scrolls sideways instead (.px-edit-scroll). */
.px-edit-table {
  min-width: 560px;
}

.px-edit-table th,
.px-edit-table td {
  padding-inline: 4px;
}

.px-edit-table input[name="tier_label"] { width: 84px; }
.px-edit-qty { width: 84px; }
.px-edit-price { width: 112px; font-variant-numeric: tabular-nums; }
.px-edit-table select { width: 78px; padding-inline: 8px; }

.px-edit-actions .btn-small {
  padding: 8px 12px;
  min-height: 38px;
}

/* Delete as a compact ✕ so a whole row fits the admin column. */
.px-delete {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--lx-line-strong);
  background: transparent;
  color: #e08a82;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.px-delete:hover {
  border-color: #e08a82;
  background: rgba(224, 138, 130, 0.1);
}

.px-edit-actions {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

/* A row edited since the page loaded is marked, so it is obvious what
   Save will write. */
.px-edit-table tr.is-dirty td {
  background: rgba(201, 162, 75, 0.07);
}

.px-edit-table tr.is-dirty td:first-child {
  box-shadow: inset 3px 0 0 var(--lx-gold);
}

[dir="rtl"] .px-edit-table tr.is-dirty td:first-child {
  box-shadow: inset -3px 0 0 var(--lx-gold);
}

.px-edit-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 12px;
}

.px-edit-status {
  visibility: hidden;
  font-size: 0.82rem;
  color: var(--lx-gold-2);
}

.px-edit-form.is-dirty .px-edit-status {
  visibility: visible;
}

.px-template-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 4px 0 16px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px dashed rgba(201, 162, 75, 0.45);
  background: rgba(201, 162, 75, 0.05);
}

.px-template-form .panel-hint {
  margin: 0;
  flex: 1 1 260px;
}

.px-saved {
  margin: 6px 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(91, 189, 138, 0.45);
  background: rgba(91, 189, 138, 0.1);
  color: #9fe0bd;
  font-size: 0.88rem;
}

/* =========================================================
   Site search (sx-*) — navbar pill, live overlay, /search page
   ========================================================= */

/* ---------- Navbar pill ---------- */
.sx-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 220px;
  min-width: 0;
  margin-inline: 16px auto;
  padding: 0 8px 0 14px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--lx-line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--lx-faint);
  cursor: text;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.sx-trigger:hover,
.sx-trigger:focus-within {
  border-color: rgba(201, 162, 75, 0.6);
  background: rgba(201, 162, 75, 0.06);
}

.sx-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--lx-gold-2);
}

.sx-trigger-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--lx-text);
  font: inherit;
  font-size: 0.86rem;
  cursor: text;
}

.sx-trigger-input::placeholder {
  color: var(--lx-faint);
}

.sx-trigger-input:focus {
  outline: none;
}

.sx-trigger-kbd,
.sx-foot kbd {
  font-family: var(--lx-sans);
  font-size: 0.66rem;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--lx-line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--lx-muted);
  white-space: nowrap;
}

.sx-trigger-btn {
  display: none;
}

/* Narrow screens: the pill collapses to a round icon button beside the menu. */
@media (max-width: 1100px) {
  .sx-trigger {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-inline: auto 10px;
    padding: 0;
    justify-content: center;
  }

  .sx-trigger .sx-icon,
  .sx-trigger-input,
  .sx-trigger-kbd {
    display: none;
  }

  .sx-trigger-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--lx-gold-2);
    cursor: pointer;
  }

  .sx-trigger-btn svg {
    width: 20px;
    height: 20px;
  }
}

/* ---------- Overlay ---------- */
html.sx-open {
  overflow: hidden;
}

.sx-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(16px, 9vh, 96px) 16px 16px;
}

.sx-overlay[hidden] {
  display: none !important;
}

.sx-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 6, 0.7);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.sx-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: min(78vh, 760px);
  border-radius: 24px;
  border: 1px solid rgba(201, 162, 75, 0.28);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(201, 162, 75, 0.1), transparent 60%),
    rgba(14, 14, 17, 0.96);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-14px) scale(0.98);
  transition: opacity 0.28s var(--lx-ease), transform 0.4s var(--lx-ease);
}

.sx-overlay.is-open .sx-backdrop { opacity: 1; }
.sx-overlay.is-open .sx-panel { opacity: 1; transform: none; }

.sx-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--lx-line);
}

.sx-bar-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--lx-gold-2);
}

.sx-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--lx-text);
  font: inherit;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  letter-spacing: -0.01em;
}

.sx-input::placeholder {
  color: var(--lx-faint);
}

.sx-input:focus {
  outline: none;
}

.sx-input::-webkit-search-cancel-button {
  display: none;
}

.sx-close {
  flex-shrink: 0;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--lx-line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--lx-muted);
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
}

.sx-close:hover {
  color: var(--lx-text);
  border-color: rgba(201, 162, 75, 0.6);
}

/* Thin gold sweep under the bar while a search is in flight. */
.sx-spinner {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sx-spinner::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 30%;
  background: var(--lx-gold-grad);
  animation: sx-sweep 0.9s ease-in-out infinite;
}

.sx-overlay.is-loading .sx-spinner {
  opacity: 1;
}

@keyframes sx-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(340%); }
}

.sx-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 20px 20px;
  scrollbar-width: thin;
}

.sx-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 12px 20px;
  border-top: 1px solid var(--lx-line);
  font-size: 0.74rem;
  color: var(--lx-faint);
}

.sx-foot kbd {
  margin-inline-end: 2px;
}

.sx-all {
  margin-inline-start: auto;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--lx-gold-2);
}

.sx-all[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .sx-overlay { padding: 0; }
  .sx-panel { max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; width: 100%; }
  .sx-foot span { display: none; }
}

/* ---------- Result groups ---------- */
.sx-group {
  padding-top: 16px;
}

.sx-group-title {
  margin: 0 0 12px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lx-gold-2);
}

[dir="rtl"] .sx-group-title { letter-spacing: 0; font-size: 0.82rem; }

.sx-hint {
  margin: 18px 0 4px;
  font-size: 0.86rem;
  color: var(--lx-faint);
}

.sx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sx-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--lx-line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--lx-text);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.sx-chip:hover,
.sx-chip.is-active {
  border-color: rgba(201, 162, 75, 0.65);
  background: rgba(201, 162, 75, 0.1);
}

.sx-count {
  font-size: 0.72rem;
  color: var(--lx-faint);
}

/* Products: photo cards in a two-column grid. */
.sx-models {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sx-models--page {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

@media (max-width: 560px) {
  .sx-models { grid-template-columns: minmax(0, 1fr); }
}

.sx-model {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--lx-line);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.3s var(--lx-ease);
}

.sx-model:hover,
.sx-model.is-active {
  border-color: rgba(201, 162, 75, 0.55);
  background: rgba(201, 162, 75, 0.06);
  transform: translateY(-1px);
}

.sx-thumb {
  flex: 0 0 76px;
  height: 64px;
  border-radius: 11px;
  background-color: rgba(255, 255, 255, 0.04);
  background-size: cover;
  background-position: center;
}

.sx-thumb--empty {
  display: grid;
  place-items: center;
  color: var(--lx-gold-2);
  opacity: 0.6;
}

.sx-model-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sx-model-name {
  font-weight: 500;
  color: var(--lx-text);
}

.sx-model-path {
  font-size: 0.76rem;
  color: var(--lx-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sx-price {
  font-size: 0.78rem;
  color: var(--lx-faint);
}

.sx-price strong {
  font-weight: 500;
  color: var(--lx-gold-2);
}

.sx-price.is-pending strong {
  color: var(--lx-text);
}

/* Services: compact rows. */
.sx-rows {
  display: grid;
  gap: 6px;
}

.sx-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px 8px 8px;
  border-radius: 14px;
  transition: background 0.2s ease;
}

.sx-row:hover,
.sx-row.is-active {
  background: rgba(201, 162, 75, 0.08);
}

.sx-row-thumb {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.04);
  background-size: cover;
  background-position: center;
}

.sx-row-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sx-row-name {
  font-weight: 500;
  color: var(--lx-text);
}

.sx-row-meta {
  font-size: 0.76rem;
  color: var(--lx-faint);
}

.sx-row-go {
  color: var(--lx-gold-2);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.3s var(--lx-ease);
}

.sx-row:hover .sx-row-go,
.sx-row.is-active .sx-row-go {
  opacity: 1;
}

/* Matched words. */
.sx-overlay mark,
.sx-page mark {
  background: none;
  color: var(--lx-gold-2);
  font-weight: 600;
}

.sx-empty {
  padding: 28px 4px 8px;
}

.sx-empty-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--lx-text);
}

/* Results arrive with a short stagger (delays set by site-search.js). */
@media (prefers-reduced-motion: no-preference) {
  .sx-overlay .sx-option {
    animation: sx-in 0.35s var(--lx-ease) both;
  }
}

@keyframes sx-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* ---------- /search page ---------- */
.sx-page-form {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(640px, 100%);
  margin: 28px auto 0;
  padding: 6px 6px 6px 18px;
  border-radius: 999px;
  border: 1px solid var(--lx-line-strong);
  background: rgba(255, 255, 255, 0.03);
}

.sx-page-form svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--lx-gold-2);
}

.sx-page-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--lx-text);
  font: inherit;
  font-size: 1rem;
}

.sx-page-form input:focus {
  outline: none;
}

.sx-page-form .btn-gold {
  padding: 12px 22px;
}

.sx-page {
  padding-top: 0;
  text-align: start;
}

.sx-page .sx-group {
  padding-top: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .sx-panel,
  .sx-backdrop {
    transition: none;
  }

  .sx-spinner::after {
    animation: none;
  }
}

/* =========================================================
   Home — cinematic hero (cx-hero)
   ========================================================= */

.cx-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(110px, 14vh, 150px) var(--lx-gutter) clamp(90px, 12vh, 130px);
  overflow: clip;
  isolation: isolate;
  text-align: center;
}

.cx-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(70% 60% at 50% 42%, #17130b 0%, var(--lx-ink) 70%);
}

/* Slow-turning god rays from behind the logo. */
.cx-rays {
  position: absolute;
  inset: -40%;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(230, 198, 117, 0.07) 0deg 2deg,
    transparent 2deg 14deg
  );
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 0%, rgba(0, 0, 0, 0.6) 25%, transparent 62%);
  mask-image: radial-gradient(closest-side at 50% 50%, #000 0%, rgba(0, 0, 0, 0.6) 25%, transparent 62%);
  animation: cx-spin 140s linear infinite;
}

@keyframes cx-spin {
  to { transform: rotate(1turn); }
}

/* Warm light behind the mark; home-cinema.js eases it toward the cursor. */
.cx-glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(900px, 120vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 162, 75, 0.32), rgba(201, 162, 75, 0.08) 45%, transparent 70%);
  filter: blur(20px);
}

/* Drifting gold dust: two layers of box-shadow specks rising slowly. */
.cx-dust,
.cx-dust--far {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    8vw 92vh rgba(240, 210, 140, 0.7), 17vw 70vh rgba(240, 210, 140, 0.45), 26vw 84vh rgba(240, 210, 140, 0.6),
    34vw 62vh rgba(240, 210, 140, 0.35), 41vw 96vh rgba(240, 210, 140, 0.55), 48vw 74vh rgba(240, 210, 140, 0.4),
    57vw 88vh rgba(240, 210, 140, 0.6), 63vw 66vh rgba(240, 210, 140, 0.35), 71vw 94vh rgba(240, 210, 140, 0.5),
    79vw 78vh rgba(240, 210, 140, 0.45), 86vw 60vh rgba(240, 210, 140, 0.3), 93vw 90vh rgba(240, 210, 140, 0.55),
    12vw 52vh rgba(240, 210, 140, 0.3), 52vw 56vh rgba(240, 210, 140, 0.35), 88vw 50vh rgba(240, 210, 140, 0.3);
  animation: cx-rise 26s linear infinite;
}

.cx-dust--far {
  width: 1px;
  height: 1px;
  opacity: 0.7;
  animation-duration: 40s;
  animation-delay: -14s;
  translate: 3vw 0;
}

@keyframes cx-rise {
  from { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  to { transform: translateY(-70vh); opacity: 0; }
}

/* Thin gold viewfinder corners — a nod to the original hero. */
.cx-corner {
  position: absolute;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(201, 162, 75, 0.45);
}

.cx-corner--tl { top: 96px; left: 28px; border-right: 0; border-bottom: 0; }
.cx-corner--tr { top: 96px; right: 28px; border-left: 0; border-bottom: 0; }
.cx-corner--bl { bottom: 28px; left: 28px; border-right: 0; border-top: 0; }
.cx-corner--br { bottom: 28px; right: 28px; border-left: 0; border-top: 0; }

.cx-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
}

.cx-hero-logo {
  margin: 0;
  line-height: 0;
}

.cx-hero-logo img {
  display: block;
  width: clamp(260px, 36vw, 540px);
  height: auto;
  filter: drop-shadow(0 0 40px rgba(201, 162, 75, 0.28));
  will-change: transform, opacity;
}

/* A brief, quiet "breath" every few seconds. */
@media (prefers-reduced-motion: no-preference) {
  .cx-hero-logo img {
    animation: cx-breathe 6s ease-in-out 2s infinite;
  }
}

@keyframes cx-breathe {
  0%, 80%, 100% { filter: drop-shadow(0 0 40px rgba(201, 162, 75, 0.28)) brightness(1); }
  90% { filter: drop-shadow(0 0 70px rgba(201, 162, 75, 0.55)) brightness(1.08); }
}

.cx-hero-line {
  margin: clamp(18px, 3vh, 30px) 0 clamp(26px, 4vh, 40px);
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--lx-muted);
}

.cx-hero-line span {
  color: var(--lx-gold-2);
}

.cx-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.cx-hero-actions .btn-gold,
.cx-hero-actions .btn-outline {
  padding: 15px 30px;
  font-size: 0.92rem;
}

.cx-scroll {
  position: absolute;
  inset-block-end: 30px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lx-faint);
}

.cx-scroll-mouse {
  width: 22px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 7px;
}

.cx-scroll-mouse span {
  width: 2px;
  height: 7px;
  border-radius: 2px;
  background: var(--lx-gold-2);
  animation: cx-wheel 1.8s var(--lx-ease) infinite;
}

@keyframes cx-wheel {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(9px); opacity: 0; }
  100% { opacity: 0; }
}

@media (max-width: 640px) {
  .cx-corner { display: none; }
  .cx-scroll { display: none; }
}

/* =========================================================
   Home — services showcase (cx-showcase)
   Default (no JS / phones / reduced motion): a native, swipeable,
   scroll-snapping row. html.cx-cinema (set by home-cinema.js on
   desktop) turns it into a pinned horizontal gallery.
   ========================================================= */

.cx-showcase {
  position: relative;
  padding-block: clamp(64px, 8vw, 110px) clamp(40px, 5vw, 64px);
  overflow: clip;
}

.cx-showcase-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.cx-showcase-head .section-eyebrow {
  margin-bottom: 16px;
}

.cx-title {
  margin: 0 0 14px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

[dir="rtl"] .cx-title {
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

.cx-lead {
  margin: 0;
  max-width: 46ch;
  color: var(--lx-muted);
  line-height: 1.7;
}

.cx-counts {
  display: flex;
  gap: clamp(22px, 3.5vw, 48px);
  margin: 0;
}

.cx-counts dt {
  font-size: clamp(1.8rem, 2.8vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--lx-text);
  font-variant-numeric: tabular-nums;
}

.cx-counts dd {
  margin: 8px 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lx-faint);
}

[dir="rtl"] .cx-counts dd {
  letter-spacing: 0;
  font-size: 0.82rem;
}

.cx-track-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-inline: max(var(--lx-gutter), calc((100vw - var(--lx-container)) / 2));
  scroll-padding-inline: max(var(--lx-gutter), calc((100vw - var(--lx-container)) / 2));
}

.cx-track-wrap::-webkit-scrollbar {
  display: none;
}

.cx-track {
  display: flex;
  gap: clamp(14px, 1.6vw, 22px);
  width: max-content;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
}

.cx-panel-item {
  scroll-snap-align: start;
}

.cx-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  width: clamp(270px, 30vw, 430px);
  border-radius: var(--lx-radius-lg);
  border: 1px solid var(--lx-line);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008) 55%);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.45s ease, transform 0.6s var(--lx-ease);
}

.cx-panel:hover {
  border-color: rgba(201, 162, 75, 0.5);
}

.cx-panel > * {
  position: relative;
  z-index: 1;
}

.cx-panel-index {
  position: absolute;
  inset-block-start: 22px;
  inset-inline-start: 24px;
  z-index: 2;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--lx-gold-2);
}

.cx-panel-art {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin: 14px 14px 0;
  border-radius: calc(var(--lx-radius-lg) - 10px);
  background-color: rgba(255, 255, 255, 0.015);
  background-size: cover;
  background-position: center;
  transition: transform 1.2s var(--lx-ease), filter 0.6s ease;
  filter: saturate(0.9) brightness(0.9);
}

.cx-panel:hover .cx-panel-art {
  transform: scale(1.04);
  filter: saturate(1.05) brightness(1.05);
}

.cx-panel-icon {
  font-size: 3rem;
  color: var(--lx-gold-2);
}

.cx-panel-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 26px 26px;
}

.cx-panel-meta {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lx-faint);
}

[dir="rtl"] .cx-panel-meta { letter-spacing: 0; font-size: 0.8rem; }

.cx-panel-name {
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--lx-text);
}

[dir="rtl"] .cx-panel-name { font-weight: 700; line-height: 1.5; letter-spacing: 0; }

.cx-panel-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--lx-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cx-panel-link {
  margin-top: 8px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--lx-gold-2);
}

/* Closing "view all" panel. */
.cx-panel--all {
  grid-template-rows: 1fr;
  height: 100%;
  place-items: center;
  align-content: center;
  gap: 22px;
  width: clamp(240px, 22vw, 320px);
  text-align: center;
  background: radial-gradient(80% 70% at 50% 40%, rgba(201, 162, 75, 0.16), transparent 70%);
}

.cx-panel-all-arrow {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 75, 0.5);
  color: var(--lx-gold-2);
  font-size: 1.3rem;
}

.cx-panel-all-arrow .lx-arrow {
  margin: 0;
}

.cx-progress {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lx-faint);
}

[dir="rtl"] .cx-progress { letter-spacing: 0; font-size: 0.8rem; }

.cx-progress-bar {
  flex: 1;
  height: 1px;
  background: var(--lx-line-strong);
  overflow: hidden;
}

.cx-progress-bar span {
  display: block;
  height: 100%;
  background: var(--lx-gold-grad);
  transform: scaleX(0);
  transform-origin: var(--lx-origin-start, 0 50%);
}

[dir="rtl"] .cx-progress-bar span {
  --lx-origin-start: 100% 50%;
}

/* Pinned desktop gallery — only when home-cinema.js is driving it.
   The whole section must fit one screen while it is pinned. */
.cx-cinema .cx-showcase {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 92px 28px;
}

.cx-cinema .cx-panel {
  grid-template-rows: 1fr auto;
  height: min(52vh, 500px);
}

.cx-cinema .cx-panel-art {
  aspect-ratio: auto;
}

.cx-cinema .cx-showcase-head {
  margin-bottom: clamp(22px, 3vh, 40px);
}

.cx-cinema .cx-track-wrap {
  overflow: visible;
  scroll-snap-type: none;
}

.cx-cinema .cx-track {
  will-change: transform;
}

/* =========================================================
   Home — remaining sections (lx-*)
   ========================================================= */

.lx-container {
  width: min(100% - 2 * var(--lx-gutter), var(--lx-container));
  margin-inline: auto;
}

/* Home sections own their layout through .lx-container. */
.cx-showcase ~ .section {
  padding-inline: 0;
  text-align: start;
}

.lx-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 5vw, 60px);
}

.lx-head .section-eyebrow {
  display: flex;
  margin-bottom: 16px;
}

.lx-head .section-title,
.lx-head .section-subtitle,
.lx-head .section-eyebrow {
  text-align: start;
}

.lx-head .section-title {
  margin: 0;
  max-width: 18ch;
}

[dir="rtl"] .lx-head .section-title {
  max-width: 24ch;
}

.lx-head .section-subtitle {
  margin: 0;
  max-width: 42ch;
}

/* ---------- Bento (Why AXON) ---------- */
.lx-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(210px, auto);
  gap: clamp(12px, 1.6vw, 20px);
}

.lx-bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--lx-radius-lg);
  border: 1px solid var(--lx-line);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008) 60%);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.4s ease, transform 0.5s var(--lx-ease);
}

.lx-bento-card:hover {
  border-color: rgba(201, 162, 75, 0.4);
  transform: translateY(-4px);
}

.lx-bento-card > * {
  position: relative;
  z-index: 1;
}

.lx-bento-card:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(201, 162, 75, 0.18), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}

.lx-bento-card:nth-child(2) { grid-column: span 2; }

.lx-bento-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lx-bento-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(201, 162, 75, 0.35);
  background: rgba(201, 162, 75, 0.07);
  color: var(--lx-gold-2);
}

.lx-bento-icon svg {
  width: 22px;
  height: 22px;
}

.lx-bento-index {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--lx-faint);
}

.lx-bento-card:nth-child(1) .lx-bento-index {
  font-size: clamp(3.6rem, 7vw, 6rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.8;
  background: var(--lx-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lx-bento-card h3 {
  margin: 0 0 10px;
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--lx-text);
}

.lx-bento-card:nth-child(1) h3 {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.15;
}

[dir="rtl"] .lx-bento-card h3 { font-weight: 700; line-height: 1.5; }

.lx-bento-card p {
  margin: 0;
  color: var(--lx-muted);
  line-height: 1.7;
  max-width: 46ch;
}

@media (max-width: 1024px) {
  .lx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-bento-card:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .lx-bento-card:nth-child(2) { grid-column: span 1; }
}

@media (max-width: 640px) {
  .lx-bento { grid-template-columns: minmax(0, 1fr); }
  .lx-bento-card:nth-child(n) { grid-column: auto; }
}

/* ---------- Process: horizontal timeline ---------- */
.lx-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--lx-step-count, 4), minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-steps::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 32px;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 162, 75, 0.6), rgba(255, 255, 255, 0.08));
}

[dir="rtl"] .lx-steps::before {
  background: linear-gradient(-90deg, rgba(201, 162, 75, 0.6), rgba(255, 255, 255, 0.08));
}

.lx-step-num {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 75, 0.45);
  background: var(--lx-ink);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--lx-gold-2);
  box-shadow: 0 0 0 8px var(--lx-ink);
  transition: background 0.4s ease, color 0.4s ease;
}

.lx-step:hover .lx-step-num {
  background: var(--lx-gold-grad);
  color: #120e05;
}

.lx-step h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 500;
}

[dir="rtl"] .lx-step h3 { font-weight: 700; }

.lx-step p {
  margin: 0;
  color: var(--lx-muted);
  line-height: 1.7;
}

@media (max-width: 900px) {
  .lx-steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  .lx-steps::before {
    inset-inline-start: 32px;
    inset-inline-end: auto;
    inset-block: 0;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgba(201, 162, 75, 0.6), rgba(255, 255, 255, 0.08));
  }

  .lx-step {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 20px;
  }

  .lx-step-num { margin: 0; }
}

/* ---------- Testimonials ---------- */
.lx-quote-section .testimonial-rotator {
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(20px, 4vw, 56px);
  row-gap: 28px;
  align-items: start;
  border: none;
  background: none;
  padding: 0;
}

.lx-quote-section .testimonial-index {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  color: var(--lx-gold-2);
  opacity: 0.4;
}

.lx-quote-section .testimonial-body {
  max-width: 880px;
}

.lx-quote-section .testimonial-quote {
  margin: 0 0 26px;
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--lx-text);
  text-wrap: pretty;
}

[dir="rtl"] .lx-quote-section .testimonial-quote {
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0;
}

.lx-quote-section .testimonial-author-name {
  font-weight: 500;
}

.lx-quote-section .testimonial-author-role {
  color: var(--lx-faint);
}

.lx-quote-section .testimonial-controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid var(--lx-line);
}

/* `background:` shorthand on the active dot resets background-clip and
   paints the whole 44px tap area — keep the drawn line thin. */
.lx-quote-section .testimonial-dot,
.lx-quote-section .testimonial-dot.is-active {
  background-clip: content-box;
  border-radius: 999px;
}

.lx-quote-section .testimonial-dot.is-active {
  background-color: var(--lx-gold-2);
}

.lx-quote-section .testimonial-nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--lx-line-strong);
  background: transparent;
  color: var(--lx-text);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.lx-quote-section .testimonial-nav-btn:hover {
  border-color: var(--lx-gold);
  background: rgba(201, 162, 75, 0.1);
}

@media (max-width: 640px) {
  .lx-quote-section .testimonial-rotator { grid-template-columns: minmax(0, 1fr); }
  .lx-quote-section .testimonial-index { display: none; }
}

/* ---------- CTA ---------- */
.lx-cta {
  position: relative;
  padding: clamp(52px, 7vw, 96px) clamp(24px, 6vw, 96px);
  border-radius: var(--lx-radius-lg);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(201, 162, 75, 0.24), transparent 65%),
    linear-gradient(180deg, #121014, #0a0a0b);
}

/* Animated gold hairline: only the 1px ring of a turning conic gradient shows. */
.lx-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--lx-angle, 0deg), rgba(201, 162, 75, 0.15), rgba(246, 222, 150, 0.9), rgba(201, 162, 75, 0.15) 30%, rgba(201, 162, 75, 0.15));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: lx-angle 8s linear infinite;
}

@property --lx-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes lx-angle {
  to { --lx-angle: 360deg; }
}

.lx-cta .section-eyebrow {
  justify-content: center;
  margin-bottom: 22px;
}

.lx-cta h2 {
  margin: 0 auto 16px;
  max-width: 22ch;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

[dir="rtl"] .lx-cta h2 {
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
}

.lx-cta p {
  margin: 0 auto 34px;
  max-width: 52ch;
  color: var(--lx-muted);
  line-height: 1.7;
}

.lx-cta .cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.lx-cta .btn-gold,
.lx-cta .btn-outline {
  padding: 15px 30px;
}

/* ---------- Footer ---------- */
.lx-footer {
  position: relative;
  padding-block: clamp(56px, 7vw, 96px) 32px;
  border-top: 1px solid var(--lx-line);
  overflow: hidden;
}

.lx-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 72px);
}

.lx-footer-brand p {
  margin: 18px 0 0;
  max-width: 38ch;
  color: var(--lx-muted);
  line-height: 1.7;
}

.lx-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.lx-footer-logo img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}

.lx-footer-logo strong {
  letter-spacing: 0.34em;
  font-weight: 700;
}

.lx-footer h4 {
  margin: 0 0 18px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lx-gold-2);
}

[dir="rtl"] .lx-footer h4 { letter-spacing: 0; font-size: 0.86rem; }

.lx-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.lx-footer ul a {
  color: var(--lx-muted);
  transition: color 0.25s ease;
}

.lx-footer ul a:hover {
  color: var(--lx-text);
}

.lx-wordmark {
  margin: clamp(40px, 6vw, 72px) 0 0;
  font-family: "Satoshi", "Jost", sans-serif;
  font-weight: 700;
  font-size: clamp(4.5rem, 19vw, 16rem);
  line-height: 0.8;
  letter-spacing: 0.06em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 162, 75, 0.25);
  background: linear-gradient(180deg, rgba(201, 162, 75, 0.1), transparent 80%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  direction: ltr;
}

.lx-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--lx-line);
  font-size: 0.82rem;
  color: var(--lx-faint);
}

@media (max-width: 760px) {
  .lx-footer-grid { grid-template-columns: minmax(0, 1fr); }
}

.axon-footer {
  border-top: 1px solid var(--lx-line);
  background: transparent;
  color: var(--lx-faint);
}

/* ---------- Word-reveal titles (home-cinema.js splits words) ---------- */
.cx-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-block-end: 0.08em;
}

.cx-word > span {
  display: inline-block;
}

/* ---------- Scroll reveals (CSS scroll-driven, inner pages too) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.cx-motion) [data-lx-reveal] {
      animation: lx-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }

    html:not(.cx-motion) [data-lx-reveal="scale"] {
      animation-name: lx-reveal-scale;
    }
  }
}

@keyframes lx-reveal {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}

@keyframes lx-reveal-scale {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* ---------- Reduced motion: everything settles into its end state ---------- */
@media (prefers-reduced-motion: reduce) {
  .cx-rays,
  .cx-dust,
  .cx-dust--far,
  .cx-scroll-mouse span,
  .lx-cta::before {
    animation: none !important;
  }

  .cx-dust,
  .cx-dust--far {
    display: none;
  }

  .btn-gold::before,
  .btn-gold-block::before {
    display: none;
  }

  .category-card:hover,
  .lx-bento-card:hover,
  .btn-gold:hover,
  .btn-outline:hover {
    transform: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}