/* Nadeem landing v2 — the night-majlis take. Same tokens as the v1 system
   (sand / ink / najdi / brass, Readex Pro + Noto Kufi Arabic) inverted onto a
   deep-green ground, with a slow mesh, film grain, and glass surfaces. All
   motion sits behind prefers-reduced-motion; layout uses logical properties so
   RTL and LTR both read as designed. Zero external requests. */

.v2 {
  --v2-deep: #082B22;
  --v2-deep-2: #0A382C;
  --v2-line: color-mix(in srgb, #faf6ef 14%, transparent);
  background: var(--v2-deep);
  color: #f2ebdd;
}

/* ---------- hero ---------- */
.v2-hero {
  position: relative;
  overflow: hidden;
  padding-block: 5.5rem 4.5rem;
  min-height: 82vh;
  display: grid;
  align-items: center;
}
.v2-mesh,
.v2-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.v2-mesh {
  background:
    radial-gradient(42rem 30rem at 18% 12%, color-mix(in srgb, #c69a45 26%, transparent), transparent 60%),
    radial-gradient(50rem 36rem at 85% 20%, color-mix(in srgb, #0e4b3b 85%, transparent), transparent 65%),
    radial-gradient(44rem 40rem at 70% 95%, color-mix(in srgb, #96712b 20%, transparent), transparent 60%),
    linear-gradient(180deg, var(--v2-deep-2), var(--v2-deep) 55%);
}
/* film grain from a tiny inline SVG turbulence tile — no asset fetch */
.v2-grain {
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}
.v2-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 64rem) {
  .v2-hero-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.v2-pill {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  font-size: 0.8rem;
  color: #c69a45;
  background: color-mix(in srgb, #082b22 60%, transparent);
}
.v2-title {
  margin-block-start: 1.1rem;
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  line-height: 1.25;
  color: #faf6ef;
}
.v2-sub {
  margin-block-start: 1rem;
  max-inline-size: 34rem;
  font-size: 1.1rem;
  line-height: 1.9;
  color: color-mix(in srgb, #f2ebdd 82%, transparent);
}
.v2-disclosure {
  margin-block-start: 1.25rem;
  font-size: 0.8rem;
  color: color-mix(in srgb, #f2ebdd 55%, transparent);
}
/* Hero stat strip — the three live numbers (web/hero_stats.py). List
   semantics for a screen reader, plain inline layout for everyone else. */
.v2-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-block-start: 1.6rem;
  padding: 0;
  list-style: none;
}
.v2-stat { min-inline-size: 8rem; }
.v2-stat-value {
  display: block;
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.35;
  color: #c69a45;
}
.v2-stat-caption {
  display: block;
  margin-block-start: 0.2rem;
  font-size: 0.78rem;
  color: color-mix(in srgb, #f2ebdd 70%, transparent);
}
.v2-hero-art { display: none; }
@media (min-width: 64rem) {
  .v2-hero-art { display: block; }
  .v2-hero-art img {
    inline-size: 100%;
    block-size: auto;
    filter: drop-shadow(0 24px 48px color-mix(in srgb, #000 45%, transparent));
  }
}
.v2-scrollcue {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 1.1rem;
  margin-inline: auto;
  inline-size: 1.5px;
  block-size: 2.4rem;
  background: linear-gradient(180deg, transparent, #c69a45);
}

/* ---------- glass signup ---------- */
.v2-glass {
  margin-block-start: 2rem;
  padding: 1.4rem;
  border-radius: 1.25rem;
  border: 1px solid var(--v2-line);
  background: color-mix(in srgb, #faf6ef 92%, transparent);
  color: #1c1b18;
  box-shadow: 0 24px 60px color-mix(in srgb, #000 35%, transparent);
  backdrop-filter: blur(10px);
  max-inline-size: 34rem;
}
.v2 .signup-row { display: flex; gap: 0.6rem; }
.v2 .signup-input { flex: 1; }

/* ---------- sections ---------- */
.v2-section { padding-block: 4.5rem; border-block-start: 1px solid var(--v2-line); }
.v2-head { max-inline-size: 38rem; margin-block-end: 2.25rem; }
.v2-head p { margin-block-start: 0.6rem; color: color-mix(in srgb, #f2ebdd 75%, transparent); line-height: 1.9; }
.v2-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: #c69a45;
  border-block-end: 1px solid color-mix(in srgb, #c69a45 45%, transparent);
  padding-block-end: 0.2rem;
  margin-block-end: 0.7rem;
}
.v2-eyebrow-light { color: #c69a45; }

/* beats: number-led narrative */
.v2-beats { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .v2-beats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2-beat {
  position: relative;
  padding: 1.5rem;
  border: 1px solid var(--v2-line);
  border-radius: 1.1rem;
  background: color-mix(in srgb, #0e4b3b 38%, transparent);
  overflow: hidden;
}
.v2-beat h2 { color: #faf6ef; margin-block-start: 0.3rem; }
.v2-beat p { margin-block-start: 0.6rem; line-height: 1.9; color: color-mix(in srgb, #f2ebdd 78%, transparent); }
.v2-beat-n {
  position: absolute;
  inset-block-start: -1.4rem;
  inset-inline-end: -0.4rem;
  font-size: 6.5rem;
  font-weight: 800;
  color: color-mix(in srgb, #c69a45 14%, transparent);
  line-height: 1;
  user-select: none;
}

/* personas: scroll-snap rail */
.v2-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(20rem, 82vw);
  gap: 1rem;
  overflow-x: auto;
  padding-block-end: 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #c69a45 transparent;
}
.v2-persona {
  scroll-snap-align: start;
  border: 1px solid var(--v2-line);
  border-radius: 1.1rem;
  padding: 1.3rem;
  background: color-mix(in srgb, #faf6ef 96%, transparent);
  color: #1c1b18;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.v2-persona-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.v2-persona blockquote {
  border-inline-start: 3px solid #c69a45;
  padding-inline-start: 0.8rem;
  line-height: 1.9;
  color: #5b574d;
}
.v2-persona-feat { font-size: 0.85rem; color: #96712b; }
.v2-tag {
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, #0e4b3b 12%, transparent);
  color: #0e4b3b;
  white-space: nowrap;
}

/* capabilities: reuse v1 cap-col skeleton on dark ground */
.v2-caps { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .v2-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2 .cap-col { background: color-mix(in srgb, #faf6ef 96%, transparent); color: #1c1b18; }

/* trust */
.v2-trust { background: color-mix(in srgb, #000 12%, var(--v2-deep)); }
.v2-trust-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 64rem) { .v2-trust-grid { grid-template-columns: 1fr 1fr; } }
.v2-trust h2 { color: #faf6ef; }
.v2-trust-points { margin-block-start: 1.4rem; display: grid; gap: 1.1rem; }
.v2-trust-points p { line-height: 1.9; color: color-mix(in srgb, #f2ebdd 78%, transparent); }
.v2 .ledger-mock { background: #faf6ef; color: #1c1b18; border-radius: 1.1rem; overflow: hidden; }

/* ---------- reveal choreography (JS-assisted, motion-safe) ---------- */
.reveal-up { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .v2 .reveal-up {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 640ms ease, transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .v2 .reveal-up.is-in { opacity: 1; transform: none; }
  .v2-mesh { animation: v2-drift 26s ease-in-out infinite alternate; }
  .v2-scrollcue { animation: v2-cue 2.4s ease-in-out infinite; }
}
@keyframes v2-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -2.5%, 0) scale(1.04); }
}
@keyframes v2-cue {
  0%, 100% { opacity: 0.25; transform: scaleY(0.6); transform-origin: top; }
  50%      { opacity: 1; transform: scaleY(1); }
}