/* ==========================================================================
   ODSF v0.3 — Luxury Dark public presentation layer (docs/design-system.md §8)
   Loaded by every public page that carries `class="luxury"` on <body>.

   The light palette in narjis.css remains the canonical brand reference (gold,
   green, Cairo) and the neutral surface for printed invoices. This layer simply
   re-maps the SAME token names so the existing components keep working verbatim
   against a near-black, glassmorphic, cinematic storefront.

   Keep this file free of any legacy/banned hexes (tests/test_design_system.py).
   ========================================================================== */

/* --- token re-map + page shell ------------------------------------------ */
body.luxury {
  --n-sand: #060607;
  --n-sand-2: #0c0c0e;
  --n-cream: #101014;
  --n-cream-2: #141419;
  --n-sidebar-bg: #0b0b0d;
  --tg-blue-tint: #172117;
  --tg-blue-tint-2: #0d1114;
  --tg-blue-soft: rgba(255, 90, 54, 0.22);
  --n-brown: #f6f5f4;
  --n-brown-2: #b9b8c0;
  --n-earth: #8e8d96;
  --n-line: rgba(246, 245, 244, 0.09);
  --n-line-2: rgba(246, 245, 244, 0.16);

  /* --- accent family (see narjis.css for the rationale) ----------------
     The deep tone used to be #d93f1e, the gold layer's darker gold. Left in
     place it would have read as a second, clashing hue sitting next to
     vermilion, so it moved to the accent's own deep step. */
  --odsf-accent: #ff5a36;
  --odsf-accent-deep: #d93f1e;
  --odsf-accent-wash: rgba(255, 90, 54, 0.22);
  --n-accent: #ff5a36;
  --n-accent-2: #ff5a36;
  --n-accent-soft: rgba(255, 90, 54, 0.28);

  --odsf-gold: var(--odsf-accent);
  --odsf-gold-deep: var(--odsf-accent-deep);
  --odsf-gold-wash: var(--odsf-accent-wash);
  --n-gold: var(--n-accent);
  --n-gold-2: var(--n-accent-2);
  --n-gold-soft: var(--n-accent-soft);

  /* The Telegram button carries the accent on this canvas, as it did when the
     accent was gold: the dark storefront has one action colour, and the chat
     entry point is the primary action on every page. */
  /* #D93F1E on #0B0B0D is 4.38:1 at body size. The dark canvas uses #FF5A36 (6.3:1). */
  --tg-blue: #ff5a36;
  --green: #ff5a36;
  --green-deep: #ff5a36;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.65);

  background-color: #060607;
  background-image:
    radial-gradient(1200px 620px at 85% -12%, rgba(255, 90, 54, 0.16), transparent 60%),
    radial-gradient(900px 520px at -8% 28%, rgba(255, 90, 54, 0.06), transparent 55%),
    radial-gradient(700px 500px at 50% 115%, rgba(255, 90, 54, 0.08), transparent 60%);
  background-attachment: local;
  color: #f6f5f4;
  line-height: 1.75;
}

body.luxury ::selection { background: rgba(255, 90, 54, 0.4); color: #ffffff; }

body.luxury ::-webkit-scrollbar-track { background: #060607; }
body.luxury ::-webkit-scrollbar-thumb { background: rgba(246, 245, 244, 0.22); border: 2px solid #060607; }
body.luxury ::-webkit-scrollbar-thumb:hover { background: rgba(246, 245, 244, 0.36); }

body.luxury a:focus-visible,
body.luxury button:focus-visible,
body.luxury input:focus-visible,
body.luxury select:focus-visible,
body.luxury textarea:focus-visible {
  outline: 2px solid var(--tg-blue, #ff5a36);
  outline-offset: 2px;
}

/* --- glassmorphism surface ---------------------------------------------- */
body.luxury .n-card {
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(246, 245, 244, 0.09);
  border-radius: var(--r-lg, 20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow);
}

body.luxury .n-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.35s ease;
}
body.luxury .n-card:hover::after {
  box-shadow: 0 0 36px 0 rgba(255, 90, 54, 0.2), 0 0 72px 0 rgba(255, 90, 54, 0.08);
}

/* --- brand actions on dark: HUMAIN mint is the single primary ----------------- */
body.luxury .btn-gold {
  background: linear-gradient(135deg, var(--odsf-gold-deep, #d93f1e), var(--odsf-gold, #ff5a36));
  color: #000000;
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(255, 90, 54, 0.45), 0 0 28px rgba(255, 90, 54, 0.28);
}
body.luxury .btn-gold:hover {
  background: var(--odsf-gold, #ff5a36);
  color: #000000;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255, 90, 54, 0.55), 0 0 38px rgba(255, 90, 54, 0.28);
}
body.luxury .btn-gold { background: var(--tg-blue, #ff5a36); color: #000000; }
body.luxury .btn-outline {
  background: rgba(255, 255, 255, 0.03);
  color: #f6f5f4;
  border: 1px solid rgba(246, 245, 244, 0.16);
}
body.luxury .btn-outline:hover { border-color: var(--tg-blue, #ff5a36); color: #f6f5f4; }

/* --- chrome: nav, divides, pills, chips ---------------------------------- */
body.luxury .n-nav {
  background: rgba(6, 6, 7, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(246, 245, 244, 0.08);
}
body.luxury .n-divider { color: var(--tg-blue, #ff5a36); }
body.luxury .n-title { color: #f6f5f4; }
body.luxury .n-sub { color: #b9b8c0; }

body.luxury .lang-pill,
body.luxury .chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(246, 245, 244, 0.12);
}
body.luxury .lang-pill button { color: #b9b8c0; }
body.luxury .lang-pill button.active { background: #ff5a36; color: #000000; }
body.luxury .n-hero {
  background:
    radial-gradient(1000px 560px at 82% 8%, rgba(255, 90, 54, 0.2), transparent 60%),
    radial-gradient(700px 460px at 12% 88%, rgba(255, 90, 54, 0.09), transparent 55%),
    linear-gradient(178deg, rgba(255, 255, 255, 0.03), rgba(6, 6, 7, 0.2) 70%);
  color: #f6f5f4;
}
body.luxury .n-hero .edge { background: #060607; }

/* --- forms ---------------------------------------------------------------- */
body.luxury input,
body.luxury select,
body.luxury textarea,
body.luxury .n-form input,
body.luxury .n-form select,
body.luxury .n-form textarea {
  background: rgba(255, 255, 255, 0.035);
  color: #f6f5f4;
  border: 1px solid rgba(246, 245, 244, 0.14);
}
body.luxury input::placeholder,
body.luxury textarea::placeholder { color: #8e8d96; }
body.luxury select option { background: #101014; color: #f6f5f4; }
body.luxury .n-form label { color: #b9b8c0; }

/* --- pricing / listings / bubbles ----------------------------------------- */
body.luxury .pkg { border-color: rgba(246, 245, 244, 0.09); }
body.luxury .pkg.featured {
  border-color: var(--tg-blue, #ff5a36);
  background: linear-gradient(180deg, rgba(255, 90, 54, 0.12), rgba(16, 16, 20, 0.1) 45%);
}
body.luxury .pkg .price { color: var(--tg-blue, #ff5a36); }
body.luxury .pkg .price small { color: #b9b8c0; }
body.luxury .pkg ul li { color: #b9b8c0; border-bottom-color: rgba(246, 245, 244, 0.08); }

body.luxury .cmsg,
body.luxury .msg-agent,
body.luxury .chat-box .msg {
  background: rgba(255, 255, 255, 0.035);
  color: #f6f5f4;
  border: 1px solid rgba(246, 245, 244, 0.1);
}
body.luxury .cmsg.me,
body.luxury .msg-client {
  background: rgba(255, 90, 54, 0.2);
  color: #f6f5f4;
  border-color: rgba(255, 90, 54, 0.35);
}

body.luxury .n-footer { background: #0b0b0d; border-block-start-color: rgba(246, 245, 244, 0.08); }

body.luxury .tg-float,
body.luxury .btn-tg,
body.luxury .tg-agent,
body.luxury .m-tg {
  box-shadow: 0 0 26px rgba(255, 90, 54, 0.28);
}

/* --- shared utilities ------------------------------------------------------ */
body.luxury .bg-sand { background: #060607; }

/* Ambient film elements. These live inside overflow:hidden sections only
   (absolute, never a fixed full-viewport layer). */
.lux-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
  z-index: 0;
}
.lux-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(246, 245, 244, 0.6) 1px, transparent 1.4px);
  background-size: 3px 3px;
}
.lux-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(120% 90% at 50% 30%, transparent 52%, rgba(0, 0, 0, 0.45) 100%);
}

/* oversized, sharp display headlines (the "film poster" grade) */
.lux-display {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-size: clamp(2.5rem, 8vw, 6rem);
  color: #f6f5f4;
}
.lux-lead {
  font-size: clamp(1.02rem, 2vw, 1.25rem);
  color: #b9b8c0;
  line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
  .lux-orb,
  .lux-grain { display: none; }
  body.luxury .n-card::after,
  body.luxury .n-card:hover::after { box-shadow: none; }
}
/* ==================== DIVISIONS (team-first framing) ==================== */
/* The public site leads with divisions, never a raw roster count. */
.dv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-block-start: 28px;
}
.dv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--n-line-2);
  background:
    linear-gradient(180deg, rgba(255, 90, 54, .05), rgba(255, 90, 54, 0) 58%),
    var(--n-surface, rgba(255, 255, 255, .03));
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.dv-card:hover,
.dv-card:focus-within {
  border-color: var(--n-gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.dv-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dv-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.dv-title h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.06rem;
  font-weight: 700;
  color: #f6f5f4;
  line-height: 1.35;
}
.dv-title h3 [data-lang="en"] {
  display: none;
}
.dv-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--n-gold);
  font-weight: 600;
}
.dv-count i {
  font-size: .7rem;
  opacity: .9;
}
.dv-blurb {
  margin: 0;
  font-size: .92rem;
  line-height: 1.7;
  color: #b9b8c0;
}
.dv-blurb [data-lang="en"] {
  display: none;
}
.dv-roster {
  margin-block-start: auto;
  border-block-start: 1px solid var(--n-line-2);
  padding-block-start: 12px;
}
.dv-roster summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-size: .84rem;
  font-weight: 600;
  color: var(--n-gold);
  padding-block: 4px;
}
.dv-roster summary::-webkit-details-marker {
  display: none;
}
.dv-roster summary i {
  margin-inline-start: auto;
  font-size: .7rem;
  transition: transform .2s ease;
}
.dv-roster[open] summary i {
  transform: rotate(180deg);
}
.dv-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.dv-list a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .86rem;
  line-height: 1.5;
  color: #d6d5db;
  text-decoration: none;
}
.dv-list a:hover,
.dv-list a:focus-visible {
  color: var(--n-gold);
}
.dv-list a i {
  font-size: .34rem;
  color: var(--n-gold);
  opacity: .7;
}
.dv-list a [data-lang="en"] {
  display: none;
}
.dv-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-block-start: 30px;
}

/* ==================== LIVE OPS ROOM ==================== */
.pulse-sec {
  padding-block: 26px;
}
.pulse-live {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 18px;
  border-radius: var(--r-xl);
  border: 1px solid var(--n-line-2);
  background: rgba(255, 255, 255, .025);
}
.pulse-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  padding-block: 6px;
}
.pulse-item + .pulse-item {
  border-inline-start: 1px solid var(--n-line-2);
}
.pulse-n {
  font-family: var(--font-head);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  color: #f6f5f4;
  font-variant-numeric: tabular-nums;
}
.pulse-item.live .pulse-n {
  color: var(--n-gold);
}
.pulse-l {
  font-size: .78rem;
  line-height: 1.5;
  color: #b9b8c0;
  max-width: 16ch;
}
.pulse-l [data-lang="en"] {
  display: none;
}
.pulse-note {
  margin: 14px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: .8rem;
  line-height: 1.7;
  color: #9a99a2;
}
.pulse-note i {
  color: var(--n-gold);
  margin-inline-end: 6px;
}
.pulse-note [data-lang="en"] {
  display: none;
}
.pulse-stamp {
  margin: 10px auto 0;
  text-align: center;
  font-size: .74rem;
  color: var(--n-online);
  letter-spacing: .02em;
}
.pulse-stamp i {
  font-size: .38rem;
  vertical-align: middle;
}

@media (max-width: 560px) {
  .pulse-live {
    grid-template-columns: repeat(2, 1fr);
  }
  .pulse-item + .pulse-item {
    border-inline-start: 0;
  }
  .pulse-item:nth-child(even) {
    border-inline-end: 1px solid var(--n-line-2);
  }
.pulse-item:nth-child(n + 3) {
    border-block-start: 1px solid var(--n-line-2);
  }
  /* an odd final item takes the full row instead of leaving a hole */
  .pulse-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .pulse-n {
    font-size: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dv-card,
  .dv-card:hover,
  .dv-roster summary i { transition: none; }
  .dv-card:hover,
  .dv-card:focus-within { transform: none; }
}

/* ==========================================================================
   THEME PASS — hero scale, floating stat cards, and dark-canvas contrast

   Four defects the storefront carried, all visible on the live page:

   1. The hero headline was set at clamp(2.5rem, 6.4vw, 5rem). At desktop that
      is an 80px line, which pushed one sentence into six lines and pushed the
      CTA below the fold.
   2. The gradient keyword inside the headline (`.grad`) relied on
      `color: transparent` alone, which double-drew the glyph in Chromium and
      clipped its descenders.
   3. The comparison table highlights its own column with the *light* palette
      (`--green-wash` / `--ink`), so on the dark canvas the winning column was
      a pale grey block with unreadable text -- on the section whose entire job
      is to be readable.
   4. Plan names carry the English label in `class="en-nm"` with no
      `data-lang`, so the page-wide language switch never hid it and every
      pricing card read "نمو الأعمالBusiness Growth".

   Plus the one element the reference boards all share and this page lacked: a
   human-scale anchor with glass metric cards around it. An absolute floating
   variant was tried first and rejected: a full-width two-column hero has no
   free margin, so the cards clipped off-screen and crossed the console. The
   same glass language is applied in flow to the hero stat row instead.
   ========================================================================== */

body.luxury .lux-hero h1 {
  font-size: clamp(2.1rem, 4.5vw, 3.85rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  max-width: 18ch;
}

body.luxury .grad {
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-image: linear-gradient(100deg, #ffffff, #ff5a36 58%, #d93f1e);
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-block;
  /* inline-block plus a small inline pad stops ascenders and descenders
     being clipped by the background-clip box */
  padding-inline: 0.05em;
  padding-block: 0.06em;
}

/* --- hero metric cards ---------------------------------------------------- */
/* The reference boards put glass metric cards around the hero visual. A
   full-width two-column hero has no free margin to float them into -- they
   clipped off-screen and crossed the console -- so the same glass language is
   applied to the stat row that already sat there, in flow and never overlapping.
   Every value is rendered from the catalogue, so a card cannot show a number
   the system does not actually have. */
body.luxury .lux-hero .stats {
  border-block-start: 0;
  padding-block-start: 0;
  margin-block-start: 28px;
}

body.luxury .lux-hero .stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 15px;
  border-radius: var(--r-lg);
  border: 1px solid var(--n-line-2);
  background: linear-gradient(
    180deg,
    rgba(30, 29, 27, 0.82),
    rgba(18, 17, 16, 0.72)
  );
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
  transition: border-color 0.22s ease, transform 0.22s ease;
}

body.luxury .lux-hero .stat::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 90, 54, 0.6), transparent);
}

body.luxury .lux-hero .stat:hover {
  border-color: rgba(255, 90, 54, 0.42);
  transform: translateY(-2px);
}

body.luxury .lux-hero .stat .num {
  font-family: var(--font-head);
  font-size: clamp(1.85rem, 2.6vw, 2.35rem);
  font-weight: 800;
  color: #ff5a36;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

body.luxury .lux-hero .stat .lbl {
  font-size: 0.79rem;
  line-height: 1.55;
  color: #b9b8c0;
  margin-block-start: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.luxury .lux-hero .stat {
    transition: none;
  }
  body.luxury .lux-hero .stat:hover {
    transform: none;
  }
}

/* --- dark-canvas contrast fixes ------------------------------------------ */
/* The winning column has to be the most readable thing in the table, not the
   least: on dark it gets a gold-tinted wash with full-contrast text. */
body.luxury .why .us {
  color: #f6f5f4;
  background: rgba(255, 90, 54, 0.1);
}
body.luxury .why thead th.us {
  color: #ff5a36;
  background: rgba(255, 90, 54, 0.16);
}

/* `.en-nm` is the only translated string on the page without a `data-lang`
   attribute, so the language switch cannot reach it. Give it the same
   behaviour explicitly instead of leaving both languages on screen. */
body[data-lang="ar"] .pc .en-nm {
  display: none;
}
body[data-lang="en"] .pc .en-nm {
  display: inline;
}

/* the hero stat row: lead with the division, keep the roster honest beneath */
body.luxury .lux-hero .stats {
  border-block-start: 1px solid var(--n-line-2);
}