/* ==========================================================================
   XYLAR ALPHA — Brand Design System
   Source of truth: References/Xylar Brand Guideline 2.0.pdf

   TYPEFACE NOTE (read before editing):
   The brand specifies Denton (display/headline serif), Geist (body/UI) and
   Geist Mono (numerals/labels). Official Denton font files were not supplied
   with this project. Until they are added, Denton falls back to "Fraunces"
   (a comparable premium serif loaded from Google Fonts) — search this file
   for "DENTON FALLBACK" to find the swap point. Geist / Geist Mono are
   loaded from Google Fonts directly, which today serves the real Vercel
   Geist family, so no substitution is happening there.

   To install the official Denton files: drop the .woff2 files into
   assets/fonts/Denton/ and uncomment the @font-face block below, then
   remove the Fraunces <link> from index.html.
   ========================================================================== */

/* ---- Local font-face slots (enable once official files are supplied) --- */
/*
@font-face {
  font-family: "Denton";
  src: url("../assets/fonts/Denton/Denton-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Denton";
  src: url("../assets/fonts/Denton/Denton-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Denton";
  src: url("../assets/fonts/Denton/Denton-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Denton";
  src: url("../assets/fonts/Denton/Denton-Thin.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
*/

/* ============================== TOKENS =================================== */
:root {
  /* ---- Primary palette (Brand Guideline: Color System — Primary Colors) ---- */
  --c-black: #000000;
  --c-charcoal-1: #050505;
  --c-charcoal-2: #0d0d0d;
  --c-charcoal-3: #1b1b1b;
  --c-grey-mid: #575757;
  --c-grey-light: #b4b2b1;
  --c-grey-100: #eeeeee;
  --c-off-white: #f9f9f9;
  --c-white: #ffffff;

  /* ---- Beam / Intelligence layer (Brand Guideline: Beam & Accent Colors) ---- */
  --beam-1: #d66001; /* orange */
  --beam-2: #f1f0a8; /* cream */
  --beam-3: #9fffff; /* cyan on dark canvas */
  --beam-4: #4757ea; /* blue */
  --beam-gradient: linear-gradient(90deg, var(--beam-1) 0%, var(--beam-2) 34%, var(--beam-3) 66%, var(--beam-4) 100%);
  --beam-gradient-soft: linear-gradient(90deg,
    rgba(214, 96, 1, 0.55) 0%,
    rgba(241, 240, 168, 0.55) 34%,
    rgba(159, 255, 255, 0.55) 66%,
    rgba(71, 87, 234, 0.55) 100%);

  /* ---- Surface roles ---- */
  --bg-page: var(--c-black);
  --bg-raised: var(--c-charcoal-2);
  --bg-raised-2: var(--c-charcoal-3);
  --text-primary: var(--c-off-white);
  --text-secondary: var(--c-grey-light);
  --text-muted: var(--c-grey-mid);
  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-strong: rgba(255, 255, 255, 0.16);

  /* ---- Typography ---- */
  /* DENTON FALLBACK: swap "Fraunces" out once real Denton files are wired in */
  --font-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* ---- Spacing / rhythm ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --container-w: 1280px;
  --container-pad: clamp(1.5rem, 4vw, 4rem);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;
}

/* ============================== RESET ===================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure { margin: 0; }
input { font-family: inherit; }

::selection { background: var(--beam-4); color: var(--c-white); }

/* ============================== TYPE SCALE ================================= */
.display-1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  color: var(--c-white);
}

.display-2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.14;
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  color: var(--c-white);
}

.display-3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--c-white);
}

.body-lead {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.7;
  color: var(--text-secondary);
  font-weight: 300;
}

.body-copy {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-secondary);
  font-weight: 400;
}

/* ============================== LAYOUT ===================================== */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.fold {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-3xl);
}

.fold-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================== BEAM UTILITIES ============================= */
.beam-text {
  background: var(--beam-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.beam-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--beam-gradient);
  box-shadow: 0 0 12px rgba(214, 96, 1, 0.35), 0 0 18px rgba(71, 87, 234, 0.25);
}

.beam-line {
  height: 1px;
  background: var(--beam-gradient);
  opacity: 0.9;
}

/* ============================== BUTTONS / CTA =============================== */
.btn {
  --btn-pad-y: 0.85em;
  --btn-pad-x: 1.7em;
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
}

/* Secondary / Neutral — used for persistent nav CTA */
.btn-secondary {
  background: transparent;
  border-color: var(--hairline-strong);
  color: var(--text-primary);
}
.btn-secondary:hover {
  border-color: var(--c-white);
  background: rgba(255, 255, 255, 0.04);
}

/* Primary / Main — solid white, no glow */
.btn-primary {
  background: var(--c-white);
  color: var(--c-black);
  border-color: var(--c-white);
}
.btn-primary:hover { background: var(--c-grey-100); }

/* Primary / Highlight — the ONLY style carrying the Beam. One per view. */
.btn-beam {
  position: relative;
  background: var(--c-white);
  color: var(--c-black);
  border-color: transparent;
  isolation: isolate;
}
.btn-beam::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--beam-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.9;
  z-index: -1;
  filter: drop-shadow(0 0 8px rgba(214, 96, 1, 0.25)) drop-shadow(0 0 10px rgba(71, 87, 234, 0.22));
}
.btn-beam:hover { background: var(--c-grey-100); }

.btn[disabled],
.btn.is-disabled {
  opacity: 0.38;
  pointer-events: none;
  border-color: transparent;
}

.btn-ghost-link {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-secondary);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.btn-ghost-link:hover { color: var(--text-primary); border-color: var(--hairline-strong); }

/* ============================== NAVIGATION ================================== */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--container-pad);
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
  backdrop-filter: none;
  transition: background var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard);
  border-bottom: 1px solid transparent;
}

.site-nav.is-scrolled {
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--hairline);
}

.nav-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  border: none;
  background: none;
  padding: 0;
}
.nav-logo img {
  height: clamp(20.4px, 2.17vw, 29px);
  width: auto;
  display: block;
}
.logo-sub {
  margin-top: 3.34px;
  font-family: var(--font-mono);
  font-size: clamp(10px, 1vw, 12.6px);
  letter-spacing: 0.22em;
  color: var(--text-secondary);
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-2%);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.nav-link {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text-secondary);
  position: relative;
  padding-block: 4px;
  background: none;
  border: none;
  text-align: left;
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--beam-gradient);
  transition: right var(--dur-med) var(--ease-out);
}
.nav-link:hover { color: var(--c-white); }
.nav-link:hover::after { right: 0; }

/* ============================== NAV "COMPLIANCE" DROPDOWN ==================== */
.nav-item-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.nav-dropdown-trigger .chevron {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.nav-item-dropdown.is-open .nav-dropdown-trigger .chevron { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 320px;
  max-width: 380px;
  padding: var(--space-2xs);
  background: rgba(8, 8, 8, 0.98);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              visibility var(--dur-fast) var(--ease-standard);
  z-index: 50;
}
.nav-item-dropdown.is-open > .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu ul { display: flex; flex-direction: column; gap: 2px; }

.nav-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-xs) var(--space-sm);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.45;
  white-space: normal;
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  color: var(--c-white);
  outline: none;
}

/* Standalone-page "return to homepage" control (e.g. Client Login). */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-standard), gap var(--dur-fast) var(--ease-standard);
}
.back-link .ph-icon { width: 1.05em; height: 1.05em; }
.back-link:hover { color: var(--c-white); gap: var(--space-xs); }

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span {
  width: 20px;
  height: 1px;
  background: var(--c-white);
  transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav-panel {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(3, 3, 3, 0.98);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--container-pad);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-med) var(--ease-standard), transform var(--dur-med) var(--ease-standard), visibility var(--dur-med);
}
.mobile-nav-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mobile-nav-panel .nav-link { font-size: 1.6rem; color: var(--c-white); font-family: var(--font-display); }
.mobile-nav-panel .btn { margin-top: var(--space-md); }

/* Compliance, in the mobile panel: an inline tap-to-expand accordion
   rather than a floating dropdown — no hover exists to rely on here. */
.mobile-nav-panel .nav-item-dropdown {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
.mobile-nav-panel .nav-dropdown-trigger {
  width: 100%;
  justify-content: space-between;
}
.mobile-nav-panel .nav-dropdown-trigger .chevron { width: 14px; height: 14px; }
.mobile-nav-panel .nav-dropdown-menu {
  position: static;
  min-width: 0;
  max-width: none;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  opacity: 1;
  transform: none;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-med) var(--ease-standard);
}
.mobile-nav-panel .nav-item-dropdown.is-open .nav-dropdown-menu {
  visibility: visible;
  max-height: 44rem;
  margin-top: var(--space-sm);
}
.mobile-nav-panel .nav-dropdown-item {
  font-size: 1rem;
  padding: var(--space-2xs) 0;
  color: var(--text-secondary);
}
.mobile-nav-panel .nav-dropdown-menu ul { padding-left: var(--space-md); gap: var(--space-xs); }

/* ============================== METALLIC CARD =============================== */
.metal-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 20% -10%, rgba(255,255,255,0.05), transparent 55%),
    linear-gradient(155deg, #1c1c1c 0%, #121212 46%, #0a0a0a 100%);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 24px 60px -30px rgba(0,0,0,0.8);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
  transform-style: preserve-3d;
  will-change: transform;
}

.metal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(255,255,255,0.55), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-standard);
  pointer-events: none;
}
.metal-card:hover::after,
.metal-card:focus-within::after { opacity: 1; }

.metal-card.is-static { transform: none !important; }

.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform var(--dur-fast) var(--ease-standard);
}

/* ============================== ICONS ======================================= */
.ph-icon { width: 1em; height: 1em; display: inline-block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.dotify {
  display: grid;
  place-items: center;
}

/* ============================== BACKGROUND CANVASES ========================= */
.bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================== FOLD 1 — LOGIN =============================== */
.fold-login {
  min-height: 100svh;
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-2xl);
  background: var(--c-black);
}

.login-liquid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--c-black);
  overflow: hidden;
}

.login-liquid__ribbon {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  transform-origin: 68% 42%;
  animation: liquidDrift 50s var(--ease-standard) infinite;
}
.login-liquid__ribbon svg { width: 100%; height: 100%; display: block; }

.login-liquid__sheen {
  position: absolute;
  top: 4%;
  right: -6%;
  width: 70%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.06), transparent 72%);
  filter: blur(40px);
  mix-blend-mode: screen;
}

.login-liquid__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 78% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.28) 55%, rgba(0,0,0,0.82) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.1) 28%, rgba(0,0,0,0.7) 100%);
}

@keyframes liquidDrift {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(1.4deg) scale(1.015); }
}
@media (prefers-reduced-motion: reduce) {
  .login-liquid__ribbon { animation: none; }
}

.login-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 60vh;
  align-items: center;
}

.login-panel-wrap {
  display: flex;
  justify-content: flex-end;
}

.login-card {
  width: 100%;
  max-width: 440px;
  padding: clamp(1.75rem, 3vw, 2.75rem);
}

.login-card__head { margin-bottom: var(--space-lg); }
.login-card__head h1 { margin-bottom: var(--space-2xs); }
.login-card__head p { color: var(--text-secondary); font-size: 0.98rem; }

.field {
  margin-bottom: var(--space-md);
}
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2xs);
}
.field-input-wrap { position: relative; }

.field input {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 0.85em 1em;
  color: var(--c-white);
  font-size: 0.96rem;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.field input::placeholder { color: var(--c-grey-mid); }
.field input:focus {
  outline: none;
  border-color: var(--c-grey-light);
  background: rgba(255,255,255,0.05);
}

.field-toggle {
  position: absolute;
  right: 0.85em;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 4px;
  display: inline-flex;
  transition: color var(--dur-fast) var(--ease-standard);
}
.field-toggle:hover { color: var(--c-white); }

.login-meta {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-lg);
}

.login-card .btn { width: 100%; }

/* ============================== FOLD 1 — ABOUT ================================ */
/* The brushed-metal background photo is deliberately dialed back on its own
   layer (::before, independent opacity/filter) rather than just piled under
   a dark gradient — that keeps its metallic sheen and depth readable at the
   fold's edges even while a separate vignette (::after) darkens the centre,
   where the headline and copy sit, for text contrast. Content stays in
   .fold-inner at z-index:2, well above both layers. */
.fold-about {
  background: var(--c-black);
  overflow: hidden;
}
.fold-about::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../assets/backgrounds/fold-1-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.4;
  filter: saturate(0.9) brightness(0.92);
}
.fold-about::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(60% 62% at 50% 45%, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.52) 45%, rgba(0,0,0,0.24) 75%, rgba(0,0,0,0.12) 100%);
}

.about-layout {
  display: flex;
  justify-content: center;
  text-align: center;
}

.about-copy {
  max-width: 46rem;
  padding-inline: var(--space-md);
}

.about-copy .display-1 { margin-bottom: var(--space-lg); margin-inline: auto; max-width: 17ch; }
.about-copy .body-lead { max-width: 40ch; margin-inline: auto; }
.about-copy .body-lead + .body-lead { margin-top: var(--space-md); }

/* ============================== FOLD 3 — APPROACH (Product + Approach combined) ============================== */
.fold-approach { background: var(--c-black); }

.approach-head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: var(--space-3xl); }

.approach-head .body-copy {
  max-width: 58ch;
  margin: var(--space-lg) auto 0;
}

.approach-track {
  position: relative;
  margin-bottom: var(--space-lg);
}

.approach-line {
  position: absolute;
  top: 19px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hairline-strong);
  z-index: 0;
}
.approach-line-beam {
  position: absolute;
  top: 19px;
  left: 0;
  height: 1px;
  background: var(--beam-gradient);
  width: 0%;
  z-index: 1;
  transition: width 1.4s var(--ease-out);
  opacity: 0.9;
}

.approach-stages {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.approach-stage { position: relative; padding-top: var(--space-lg); }

.approach-node {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: var(--c-charcoal-2);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.approach-stage h3 { margin-bottom: var(--space-2xs); font-family: var(--font-body); font-weight: 500; font-size: 1.08rem; color: var(--c-white); }
.approach-stage .stage-sub { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-sm); }
.approach-stage p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.65; }

/* ============================== FOLD 2B — XYLAR EQUITY ALPHA =================== */
.fold-equity-alpha { background: var(--c-black); }

.equity-card {
  position: relative;
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 3.75rem);
}

.equity-card-glow {
  position: absolute;
  top: -25%;
  right: -12%;
  width: 55%;
  height: 150%;
  background: var(--beam-gradient);
  opacity: 0.16;
  filter: blur(90px);
  transform: rotate(-14deg);
  pointer-events: none;
}

.equity-card-inner { position: relative; z-index: 1; }

.equity-card-rule { width: 64px; margin: var(--space-sm) 0 var(--space-lg); }

.equity-card-body p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 62ch;
  margin-bottom: var(--space-md);
}
.equity-card-body p:last-child { margin-bottom: 0; }

.equity-card-facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--hairline);
}

.equity-fact { display: flex; flex-direction: column; gap: var(--space-3xs); }

.equity-fact-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.equity-fact-value {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--c-white);
}

.equity-fact-divider {
  width: 1px;
  align-self: stretch;
  background: var(--hairline-strong);
}

/* ============================== FOLD 4 — CLIENT BENEFITS ======================= */
.fold-benefits { background: radial-gradient(90% 70% at 50% 100%, #0c0c0c 0%, var(--c-black) 60%); }

.benefits-head { max-width: 640px; margin-inline: auto; text-align: center; margin-bottom: var(--space-2xl); }

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.benefit-card {
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 12rem;
}

.benefit-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; color: var(--c-white); line-height: 1.3; }
.benefit-card p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin-top: var(--space-sm); }

/* ============================== FOLD 5 — CONTACT / FOOTER ======================= */
.fold-contact {
  min-height: auto;
  padding-top: var(--space-2xl);
  padding-bottom: 0;
  background: var(--c-black);
  overflow: hidden;
}

.contact-surface {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: linear-gradient(165deg, #111111 0%, #060606 60%, #000000 100%);
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4.5rem);
}

.contact-beam-streak {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 160%;
  background: var(--beam-gradient);
  opacity: 0.14;
  filter: blur(80px);
  transform: rotate(18deg);
  pointer-events: none;
}

.contact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-2xl);
}

.contact-logo { display: inline-flex; flex-direction: column; align-items: flex-end; margin-bottom: var(--space-lg); }
.contact-logo img { height: clamp(20.4px, 2.25vw, 28px); width: auto; display: block; }

.contact-email { display: block; color: var(--c-white); font-size: 1.05rem; margin-bottom: var(--space-lg); }

.contact-addresses {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.contact-address-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-3xs);
}
.contact-address-value {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.7;
  max-width: 34ch;
}
.contact-address-entity {
  display: inline-block;
  color: var(--c-off-white);
  font-weight: 600;
}

.contact-registration {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
}
.contact-registration li {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.contact-registration li span { color: var(--c-grey-light); }

.contact-right { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding-top: var(--space-2xs); }
.contact-right h2 { margin-bottom: var(--space-xs); }
.contact-right p { color: var(--text-secondary); margin-bottom: var(--space-lg); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-block: var(--space-lg);
  border-top: 1px solid var(--hairline);
  margin-top: var(--space-2xl);
}

.footer-copyright { color: var(--text-muted); font-size: 0.82rem; font-family: var(--font-mono); }

/* ============================== RESPONSIVE ================================== */
@media (max-width: 1080px) {
  .contact-grid { grid-template-columns: 1fr; }
  .approach-stages { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-2xl); }
  .approach-line, .approach-line-beam { display: none; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-right .btn-secondary { display: none; }
  .nav-toggle { display: inline-flex; }
  .login-panel-wrap { justify-content: center; }
  .login-card { max-width: 100%; }
}

@media (max-width: 640px) {
  .fold { padding-block: var(--space-2xl); }
  .approach-stages { grid-template-columns: 1fr; row-gap: var(--space-xl); }
  .benefits-grid { grid-template-columns: 1fr; }
  .contact-grid { gap: var(--space-xl); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .container { padding-inline: var(--container-pad); }
  .equity-card-facts { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .equity-fact-divider { display: none; }
}

/* ============================== LEGAL PAGES (Privacy Policy / Disclaimers) ===== */
.legal-shell {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: var(--c-black);
}

.legal-container {
  position: relative;
  z-index: 1;
  max-width: 740px;
  margin-inline: auto;
  padding: calc(var(--space-3xl) + var(--space-md)) var(--container-pad) var(--space-2xl);
}

/* Only the Grievance Redressal page carries the 4-column escalation table,
   which needs more breathing room than the 740px legal-container gives
   other Compliance pages' running text — widened for this page alone. */
[data-compliance-page="grievanceRedressal"] .legal-container {
  max-width: 860px;
}

/* Dedicated Compliance pages (Disclosure Document, Investor Charter, etc.) —
   the real wallpaper.jpg asset. It's a busy, high-contrast halftone pattern,
   so it's dialed back on its own layer (::before — independent opacity and
   a contrast/brightness filter to tame the dot pattern itself, not just
   darken it) rather than relying on a gradient scrim alone; ::after adds a
   further dark scrim on top. Both are absolutely positioned against
   .legal-shell's own auto-growing height, so the treatment spans the full
   page on longer Compliance pages rather than stopping after one viewport.
   There's no opaque card here to shield body text, so contrast has to be
   won by these layers rather than a card surface. */
.compliance-wallpaper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../assets/backgrounds/wallpaper.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.37;
  filter: contrast(0.8) brightness(0.85) saturate(0.92);
}
.compliance-wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.72) 45%, rgba(0,0,0,0.82) 100%);
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
  transition: color var(--dur-fast) var(--ease-standard);
}
.legal-back:hover { color: var(--text-primary); }

.legal-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--c-white);
  margin-bottom: var(--space-2xl);
}

.legal-heading {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--c-white);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
}

.legal-subheading {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-2xs);
}

.legal-paragraph {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}
.legal-paragraph a {
  color: var(--c-off-white);
  border-bottom: 1px solid var(--hairline-strong);
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.legal-paragraph a:hover { color: var(--c-white); border-color: var(--c-white); }

.legal-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}
.legal-field dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3xs);
}
.legal-field dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--c-off-white);
}
.legal-field dd a {
  color: var(--c-off-white);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.legal-field dd a:hover { color: var(--c-white); border-color: var(--hairline-strong); }

.legal-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-left: var(--space-md);
  margin-bottom: var(--space-sm);
}
.legal-list li {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
  position: relative;
  padding-left: var(--space-sm);
}
.legal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-grey-mid);
}

.legal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-3xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--hairline);
}
.legal-footer .footer-copyright { margin: 0; }

/* ============================== COMPLIANCE PAGES =============================== */
/* Shares .legal-shell / .legal-container / .legal-title / .legal-paragraph
   with the Privacy Policy / Disclaimer pages — only the document-link card
   below is new. */
.document-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  margin-top: var(--space-xl);
  text-decoration: none;
}

.document-card-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  color: var(--text-secondary);
}
.document-card-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.document-card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.document-card-text strong {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--c-white);
}

.document-card-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.document-card-arrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.document-card:hover .document-card-arrow {
  color: var(--c-white);
  transform: translate(2px, -2px);
}

/* Investor Complaint Escalation Table (Grievance Redressal page) — a plain
   native table rather than an embedded document. overflow-x:auto on the
   wrapper keeps it scrollable within its own box on narrow screens instead
   of ever widening the page itself. */
.legal-table-wrap {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}

.legal-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* Level / Responsible / Nature / Internal TAT — Nature gets the most room
   since its copy is consistently the longest, Level the least since it's
   never more than "Level N". Columns wrap rather than force a scrollbar. */
.legal-table th:nth-child(1), .legal-table td:nth-child(1) { width: 11%; }
.legal-table th:nth-child(2), .legal-table td:nth-child(2) { width: 22%; }
.legal-table th:nth-child(3), .legal-table td:nth-child(3) { width: 40%; }
.legal-table th:nth-child(4), .legal-table td:nth-child(4) { width: 27%; }

.legal-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--hairline-strong);
}

.legal-table tbody td {
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.legal-table tbody tr:last-child td { border-bottom: none; }

.legal-table-level {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--c-white);
}

.legal-table tbody td a {
  color: var(--c-off-white);
  border-bottom: 1px solid var(--hairline-strong);
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.legal-table tbody td a:hover { color: var(--c-white); border-color: var(--c-white); }

/* Below 640px, the 4-column grid gets cramped even with wrapping — switch
   each row to a stacked block instead, with the column name shown as a
   small label above its value (from the td's own data-label, set in
   js/compliance-render.js), rather than keep forcing a 4-across layout. */
@media (max-width: 640px) {
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table thead { display: none; }
  .legal-table tbody tr {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--hairline-strong);
  }
  .legal-table tbody tr:last-child { border-bottom: none; }
  .legal-table tbody td {
    padding: var(--space-2xs) 0;
    border-bottom: none;
  }
  .legal-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
  }
}

/* ============================== MODAL ========================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-standard);
}
.modal-overlay[hidden] { display: none; }
.modal-overlay.is-open { opacity: 1; }

.modal-card {
  width: 100%;
  max-width: 400px;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  transform: translateY(10px) scale(0.98);
  transition: transform var(--dur-med) var(--ease-out);
}
.modal-overlay.is-open .modal-card { transform: translateY(0) scale(1); }

.modal-header {
  display: flex;
  justify-content: flex-start;
  margin-bottom: var(--space-md);
}

.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.modal-close .ph-icon { width: 1.1em; height: 1.1em; }
.modal-close:hover { color: var(--c-white); background: rgba(255, 255, 255, 0.06); }

.modal-message {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--c-white);
  text-align: center;
  padding-bottom: var(--space-xs);
}

/* Contact-details variant (label/value pairs rather than a single message) */
.contact-modal-card { max-width: 440px; }

.contact-modal-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--c-white);
  margin-bottom: var(--space-lg);
}

.contact-modal-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-modal-item dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3xs);
}
.contact-modal-item dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--c-off-white);
}
.contact-modal-item dd a {
  color: var(--c-off-white);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.contact-modal-item dd a:hover {
  color: var(--c-white);
  border-color: var(--hairline-strong);
}
.contact-modal-entity {
  display: inline-block;
  color: var(--c-white);
  font-weight: 600;
}