/* ============================================================
   WELLX LABS — Splash + Login
   Self-contained static build. Dark (default) + light themes.
   Palette only differs between themes; layout, copy, motion shared.
   Spectrum gradient (#F7941D→#F0366B→#7A2BE2→#2D9CFD) is identity
   and state ONLY — never decoration on data or cards.
   ============================================================ */

/* ---------- theme tokens ---------- */
:root {
  --ink:            #050509;
  --ink-900:        #07070C;
  --surface:        #0B0B12;
  --raised:         #12121C;

  --text:           #F5F6FA;
  --muted:          #B7BDCC;
  --faint:          #98A0B3;
  --ghost:          #5A6072;

  --hairline:        rgba(255,255,255,0.08);
  --hairline-mid:    rgba(255,255,255,0.14);
  --hairline-strong: rgba(255,255,255,0.26);

  --card-bg:        rgba(15,15,24,0.70);
  --card-bg-hover:  rgba(20,18,32,0.85);
  --panel-bg:       rgba(10,10,17,0.55);
  --raised-bg:      rgba(13,13,21,0.85);
  --field-bg:       rgba(15,15,24,0.90);
  --nav-scrolled:   rgba(5,5,9,0.72);
  --node-fill:      #0B0B12;

  --wash-1: rgba(122,43,226,0.10);
  --wash-2: rgba(45,156,253,0.08);

  --accent:      #3D7BFD;
  --success:     #5EE1A2;
  --spectrum:    linear-gradient(100deg,#F7941D,#F0366B,#7A2BE2,#2D9CFD);
  --spectrum-v:  linear-gradient(180deg,#F7941D,#F0366B,#7A2BE2,#2D9CFD);

  --focus-ring:  rgba(61,123,253,0.70);
  --focus-halo:  rgba(61,123,253,0.15);

  --font-ui:   'Figtree', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --maxw: 1200px;
}

[data-theme="light"] {
  --ink:            #FFFFFF;
  --ink-900:        #FFFFFF;
  --surface:        #F5F6FA;
  --raised:         #FFFFFF;

  --text:           #0B0B12;
  --muted:          #3A4152;
  --faint:          #55607A;
  --ghost:          #8A90A0;

  --hairline:        rgba(10,10,18,0.10);
  --hairline-mid:    rgba(10,10,18,0.16);
  --hairline-strong: rgba(10,10,18,0.24);

  --card-bg:        rgba(255,255,255,0.72);
  --card-bg-hover:  rgba(255,255,255,0.96);
  --panel-bg:       rgba(255,255,255,0.66);
  --raised-bg:      rgba(255,255,255,0.92);
  --field-bg:       rgba(255,255,255,0.95);
  --nav-scrolled:   rgba(255,255,255,0.78);
  --node-fill:      #FFFFFF;

  --wash-1: rgba(122,43,226,0.07);
  --wash-2: rgba(45,156,253,0.06);

  --success:     #1F8A5B;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  font-family: var(--font-ui);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.4s ease, color 0.4s ease;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img { display: block; }
::selection { background: rgba(122,43,226,0.4); color: #fff; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- background layers ---------- */
#bg-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.bg-wash {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--wash-1), transparent 55%),
    radial-gradient(90% 60% at 85% 110%, var(--wash-2), transparent 55%);
}

/* ---------- shared bits ---------- */
.mono { font-family: var(--font-mono); }
.spectrum-divider {
  width: 1px; height: 20px; border-radius: 1px;
  background: var(--spectrum-v);
}
.labs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--hairline-strong); border-radius: 4px; padding: 4px 8px;
}
.labs-chip .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: linear-gradient(135deg,#F0366B,#2D9CFD);
}
.labs-chip .txt {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 3px; color: var(--text);
}
.lockup { display: flex; align-items: center; gap: 11px; }
.lockup .bionic { height: 20px; }
.lockup .wordmark { height: 13px; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 40px;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease;
}
.nav.scrolled {
  background: var(--nav-scrolled);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline);
}
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-links { display: flex; gap: 26px; }
.nav-links a {
  font-size: 13px; font-weight: 500; color: var(--muted);
  transition: color 0.2s; padding: 4px 0;
}
.nav-links a:hover { color: var(--text); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid var(--hairline-mid); color: var(--muted);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.icon-btn:hover { color: var(--text); border-color: var(--hairline-strong); }
.icon-btn svg { width: 17px; height: 17px; }
[data-theme="dark"] .theme-toggle .sun { display: block; }
[data-theme="dark"] .theme-toggle .moon { display: none; }
[data-theme="light"] .theme-toggle .sun { display: none; }
[data-theme="light"] .theme-toggle .moon { display: block; }

.nav-menu-btn { display: none; }

/* primary CTA — carries the one glow on the nav view */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff;
  font-weight: 700; border-radius: 10px; white-space: nowrap;
  box-shadow: 0 0 28px rgba(61,123,253,0.50);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(61,123,253,0.72); }
.btn-primary .arrow { font-size: 1.05em; line-height: 1; }
.nav .btn-primary { font-size: 13px; padding: 9px 17px; box-shadow: 0 0 22px rgba(61,123,253,0.45); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--hairline-mid); color: var(--text);
  font-weight: 600; border-radius: 10px;
  transition: border-color 0.2s, background 0.2s;
}
.btn-ghost:hover { border-color: var(--hairline-strong); background: rgba(127,127,140,0.06); }

/* ---------- sections ---------- */
main { position: relative; z-index: 2; }
.section {
  position: relative; z-index: 2;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px 40px; max-width: var(--maxw); margin: 0 auto; width: 100%;
}
.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 4px;
  color: var(--faint); margin-bottom: 20px;
}
.h2 {
  margin: 0 0 22px; font-size: clamp(32px, 5vw, 58px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.02; max-width: 840px;
}
.lead {
  margin: 0 0 56px; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.65;
  color: var(--muted); max-width: 760px;
}

/* reveal animation */
[data-reveal] {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1),
              transform 0.85s cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 120px 24px 80px; position: relative; z-index: 2;
  max-width: none;
}
.hero-orbit {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(760px,92vw); height: min(760px,92vw); z-index: 0; pointer-events: none;
}
.orbit-halo {
  position: absolute; left: 50%; top: 50%; width: 58%; height: 58%;
  transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(122,43,226,0.22), rgba(45,156,253,0.08) 52%, transparent 70%);
  filter: blur(52px); animation: halo 6s ease-in-out infinite;
}
.orbit-ring {
  position: absolute; border-radius: 50%; border: 1px solid rgba(127,127,140,0.10);
}
[data-theme="light"] .orbit-ring { border-color: rgba(10,10,18,0.12); }
.orbit-ring.r1 { inset: 6%;  animation: spin 46s linear infinite; }
.orbit-ring.r2 { inset: 20%; animation: spinR 34s linear infinite; }
.orbit-ring.r3 { inset: 34%; animation: spin 26s linear infinite; }
.orbit-node {
  position: absolute; left: 50%; border-radius: 50%; transform: translateX(-50%);
}
.orbit-node.blue { top: -3px; width: 6px; height: 6px; background: #2D9CFD; box-shadow: 0 0 14px 2px rgba(45,156,253,0.8); }
.orbit-node.pink { bottom: -3px; width: 5px; height: 5px; background: #F0366B; box-shadow: 0 0 14px 2px rgba(240,54,107,0.8); }
.orbit-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 20px 4px rgba(122,43,226,0.7), 0 0 8px 1px rgba(255,255,255,0.9);
  animation: halo 4s ease-in-out infinite;
}
.hero-inner {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 30px; max-width: 940px;
}
.hero-eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 5px;
  color: var(--faint); display: flex; align-items: center; gap: 12px;
}
.hero-eyebrow .rule-l { width: 26px; height: 1px; background: linear-gradient(90deg,transparent,#7A2BE2); }
.hero-eyebrow .rule-r { width: 26px; height: 1px; background: linear-gradient(90deg,#2D9CFD,transparent); }
.hero h1 {
  margin: 0; font-size: clamp(44px,8vw,104px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 0.98;
}
.gradient-text {
  background: linear-gradient(100deg,#F7941D,#F0366B 38%,#7A2BE2 68%,#2D9CFD);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
  margin: 0; font-size: clamp(16px,1.9vw,21px); line-height: 1.6;
  color: var(--muted); max-width: 640px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.hero-ctas .btn-primary { font-size: 15px; padding: 15px 28px; box-shadow: 0 0 30px rgba(61,123,253,0.5); }
.hero-ctas .btn-ghost  { font-size: 15px; padding: 15px 26px; }
.scroll-cue {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.scroll-cue .lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 3px; color: var(--ghost); }
.scroll-mouse {
  width: 20px; height: 32px; border: 1px solid var(--hairline-mid); border-radius: 11px;
  display: flex; justify-content: center; padding-top: 6px;
}
.scroll-mouse .bead { width: 3px; height: 6px; border-radius: 2px; background: #7A2BE2; animation: scrollbob 1.8s ease-in-out infinite; }

/* ---------- module grid ---------- */
.modgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.modcard {
  position: relative; background: var(--card-bg); border: 1px solid var(--hairline);
  border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 12px;
  min-height: 170px;
  transition: border-color 0.35s, transform 0.35s, background 0.35s;
}
.modcard:hover { border-color: rgba(122,43,226,0.55); transform: translateY(-4px); background: var(--card-bg-hover); }
.modcard .idx { font-family: var(--font-mono); font-size: 11px; color: var(--ghost); }
.mod-glyph {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, rgba(240,54,107,0.18), rgba(45,156,253,0.18));
  border: 1px solid var(--hairline-mid);
  display: flex; align-items: center; justify-content: center;
}
.modcard .label { margin-top: auto; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
/* abstract glyph shapes — geometry, not icons */
.g-square  { width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(135deg,#F0366B,#2D9CFD); }
.g-dot     { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg,#F0366B,#2D9CFD); }
.g-bar     { width: 14px; height: 8px;  border-radius: 4px; background: linear-gradient(135deg,#F7941D,#F0366B); }
.g-tall    { width: 10px; height: 14px; border-radius: 2px; background: linear-gradient(135deg,#7A2BE2,#2D9CFD); }
.g-ring    { width: 12px; height: 12px; border: 2px solid; border-color: #F0366B #2D9CFD #2D9CFD #F0366B; border-radius: 50%; }
.g-bars    { display: flex; gap: 2px; }
.g-bars i  { width: 3px; height: 12px; border-radius: 2px; display: block; }
.g-hollow  { width: 14px; height: 14px; border-radius: 3px; border: 2px solid #2D9CFD; }
.g-drop    { width: 12px; height: 12px; border-radius: 50% 50% 50% 0; background: linear-gradient(135deg,#F0366B,#7A2BE2); }

/* ---------- data spine ---------- */
.spine-panel {
  position: relative; padding: 56px 30px; border: 1px solid var(--hairline);
  border-radius: 18px; background: var(--panel-bg); overflow: hidden;
}
/* Constellation / node-graph: 7 nodes scattered in a box, connected by thin
   lines with a pulse travelling along each. Line endpoints are drawn from the
   rendered node centres by setupSpineWeb() in app.js. */
.spine-web { position: relative; width: 100%; height: clamp(360px,86vw,420px); }
.spine-web-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
.spine-web-svg line.wl-base { stroke: rgba(255,255,255,0.13); stroke-width: 1; }
.spine-web-svg line.wl-flow {
  stroke: rgba(170,202,255,0.85); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 5 132; filter: drop-shadow(0 0 3px rgba(170,202,255,0.85));
  animation: webflow 3.6s linear infinite;
}
[data-theme="light"] .spine-web-svg line.wl-base { stroke: rgba(10,10,18,0.16); }
[data-theme="light"] .spine-web-svg line.wl-flow { stroke: rgba(45,107,224,0.8); filter: drop-shadow(0 0 3px rgba(45,107,224,0.8)); }
.spine-web .spine-node { position: absolute; transform: translate(-50%,-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.spine-web .spine-node .dot { width: 12px; height: 12px; border-radius: 50%; background: transparent; }
.spine-web .spine-node .lbl { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
@keyframes webflow { from { stroke-dashoffset: 137; } to { stroke-dashoffset: 0; } }

/* ---------- two-column (AI + takaful) ---------- */
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; width: 100%; }
.col-copy .lead, .col-copy p { max-width: 520px; }
.card-shell { position: relative; }
.card-glow {
  position: absolute; inset: -10% -6%; border-radius: 24px;
  background: radial-gradient(circle at 70% 30%, rgba(122,43,226,0.25), transparent 60%);
  filter: blur(30px); pointer-events: none;
}
.card {
  position: relative; background: var(--raised-bg); border: 1px solid var(--hairline);
  border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
[data-theme="light"] .card { box-shadow: 0 30px 80px rgba(10,10,18,0.14); }

/* claims workflow card */
.wf-head {
  display: flex; align-items: center; gap: 8px; padding: 13px 16px;
  border-bottom: 1px solid var(--hairline); background: rgba(127,127,140,0.03);
}
.wf-head .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.wf-head .cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--faint); }
.wf-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.wf-step {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  border: 1px solid var(--hairline); border-radius: 9px;
}
.wf-step .sdot { width: 8px; height: 8px; border-radius: 50%; }
.wf-step .stext { font-size: 13px; color: var(--faint); }
.wf-step .stag { margin-left: auto; font-family: var(--font-mono); font-size: 10px; }
.wf-step.done .sdot { background: var(--success); }
.wf-step.done .stag { color: var(--success); }
.wf-step.inert .sdot { background: rgba(127,127,140,0.30); }
/* the active step — this view's single glow */
.wf-step.active {
  padding: 13px; border-color: rgba(122,43,226,0.5);
  background: rgba(122,43,226,0.06); box-shadow: 0 0 24px rgba(122,43,226,0.28);
}
.wf-step.active .sdot { background: linear-gradient(135deg,#F0366B,#2D9CFD); box-shadow: 0 0 12px rgba(122,43,226,0.9); }
.wf-step.active .stext { color: var(--text); font-weight: 700; }
.wf-step.active .stag { color: var(--muted); animation: blink 1.6s ease-in-out infinite; }
.copilot {
  margin-top: 4px; background: var(--raised); border: 1px solid rgba(122,43,226,0.5);
  border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 9px;
  box-shadow: 0 0 24px rgba(122,43,226,0.22);
}
[data-theme="light"] .copilot { background: #F2ECFF; }
.copilot-head { display: flex; align-items: center; gap: 8px; }
.copilot-head img { height: 13px; }
.copilot-head .cap { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--muted); }
.copilot .msg { font-size: 13px; color: var(--text); line-height: 1.55; }
.copilot .approve {
  align-self: flex-start; background: var(--accent); color: #fff; font-size: 12px;
  font-weight: 700; padding: 8px 14px; border-radius: 7px; box-shadow: 0 0 18px rgba(61,123,253,0.55);
  transition: box-shadow 0.2s, transform 0.15s;
}
.copilot .approve:hover { box-shadow: 0 0 26px rgba(61,123,253,0.75); }

/* ---------- partnership timeline ---------- */
.partner-grid { position: relative; display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
.partner-rail {
  position: absolute; left: 8%; right: 8%; top: 19px; height: 2px; z-index: 0;
  background: linear-gradient(90deg,rgba(247,148,29,0.5),rgba(240,54,107,0.5),rgba(122,43,226,0.5),rgba(45,156,253,0.5));
}
.pstep { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.ptxt { display: flex; flex-direction: column; gap: 6px; }
.pring {
  width: 38px; height: 38px; border-radius: 50%; background: var(--node-fill);
  border: 2px solid; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text);
  flex-shrink: 0;
}
.pstep .pt { font-size: 15px; font-weight: 700; }
.pstep .pd { font-size: 13px; color: var(--faint); line-height: 1.55; }
.pr-1 { border-color: #F7941D; box-shadow: 0 0 16px rgba(247,148,29,0.5); }
.pr-2 { border-color: #F0366B; box-shadow: 0 0 16px rgba(240,54,107,0.5); }
.pr-3 { border-color: #B24FD0; box-shadow: 0 0 16px rgba(178,79,208,0.5); }
.pr-4 { border-color: #7A2BE2; box-shadow: 0 0 16px rgba(122,43,226,0.5); }
.pr-5 { border-color: #2D9CFD; box-shadow: 0 0 16px rgba(45,156,253,0.6); }

/* ---------- takaful ---------- */
.tak-card .card { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.tak-card .card-glow { background: radial-gradient(circle at 30% 30%, rgba(45,156,253,0.22), transparent 60%); inset: -8%; }
.tak-cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--faint); }
.fund-pair { display: flex; gap: 12px; }
.fund { flex: 1; border: 1px solid; border-radius: 11px; padding: 15px; display: flex; flex-direction: column; gap: 6px; }
.fund .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; }
.fund .v { font-size: 13px; font-weight: 600; color: var(--muted); }
.fund.ptf { border-color: rgba(94,225,162,0.35); background: rgba(94,225,162,0.05); }
.fund.ptf .k { color: var(--success); }
.fund.shf { border-color: rgba(45,156,253,0.35); background: rgba(45,156,253,0.06); }
.fund.shf .k { color: #4C9BFF; }
.tak-sep { height: 1px; background: var(--hairline); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips .chip {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  border: 1px solid var(--hairline-mid); padding: 6px 11px; border-radius: 99px;
}
.tak-audit {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--hairline); border-radius: 10px; padding: 11px 14px;
}
.tak-audit .lbl { font-size: 13px; color: var(--muted); }
.badge-compliant {
  font-family: var(--font-mono); font-size: 10px; color: var(--success);
  border: 1px solid rgba(94,225,162,0.35); padding: 3px 8px; border-radius: 99px;
}

/* ---------- closing ---------- */
.closing {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 120px 24px;
  position: relative; z-index: 2; max-width: none;
}
.closing-halo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(620px,90vw); height: min(620px,90vw); z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(122,43,226,0.28), rgba(45,156,253,0.10) 50%, transparent 70%);
  filter: blur(50px); animation: halo 7s ease-in-out infinite;
}
.closing-mark {
  position: relative; z-index: 1; width: 110px; margin-bottom: 34px;
  filter: drop-shadow(0 0 34px rgba(122,43,226,0.5));
}
.closing h2 {
  position: relative; z-index: 1; margin: 0 0 22px;
  font-size: clamp(34px,6vw,72px); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.0; max-width: 900px;
}
.closing .lead { position: relative; z-index: 1; margin: 0 0 40px; max-width: 660px; text-align: center; }
.closing .btn-primary { position: relative; z-index: 1; font-size: 16px; padding: 17px 34px; box-shadow: 0 0 36px rgba(61,123,253,0.55); }
.closing-foot {
  position: relative; z-index: 1; margin-top: 70px; display: flex; align-items: center;
  gap: 11px; opacity: 0.7;
}
.closing-foot .wordmark { height: 12px; }
.closing-foot .mono { font-size: 10px; letter-spacing: 3px; color: var(--faint); }

/* ---------- login overlay ---------- */
.login {
  position: fixed; inset: 0; z-index: 60; display: flex;
  opacity: 0; pointer-events: none; transform: scale(1.04);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
  background: var(--ink);
}
.login.open { opacity: 1; pointer-events: auto; transform: scale(1); }
.login-brand {
  flex: 1.1; position: relative; overflow: hidden; display: flex; flex-direction: column;
  justify-content: space-between; padding: 48px; border-right: 1px solid var(--hairline);
}
.login-brand .lockup, .login-brand .login-brand-center, .login-brand .build-tag { position: relative; z-index: 1; }
/* Centred cluster: the orbit + mark stack directly above the copy and the
   whole group is vertically centred, so it lines up with the sign-in form on
   the right instead of the mark crowding the copy. */
.login-brand-center { display: flex; flex-direction: column; align-items: flex-start; gap: 34px; max-width: 440px; }
.brand-orbit { position: relative; width: 188px; height: 188px; }
.brand-orbit .orbit-halo {
  width: 62%; height: 62%;
  background: radial-gradient(circle, rgba(122,43,226,0.40), rgba(45,156,253,0.12) 52%, transparent 70%);
  filter: blur(30px);
}
.brand-orbit .orbit-ring { border-color: rgba(127,127,140,0.16); }
[data-theme="light"] .brand-orbit .orbit-ring { border-color: rgba(10,10,18,0.12); }
.brand-orbit .r1 { inset: 2%; animation: spin 40s linear infinite; }
.brand-orbit .r2 { inset: 20%; animation: spinR 30s linear infinite; }
.brand-orbit .float-mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 46%;
  filter: drop-shadow(0 0 30px rgba(122,43,226,0.5)); animation: floaty 7s ease-in-out infinite;
}
.brand-copy { max-width: 440px; }
.brand-copy .bc-h { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 14px; }
.brand-copy .bc-p { font-size: 14px; line-height: 1.6; color: var(--faint); }
.build-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--ghost); }

.login-form-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px; position: relative; }
.login-back {
  position: absolute; top: 28px; right: 32px; display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--faint); transition: color 0.2s;
}
.login-back:hover { color: var(--text); }
.login-back .a { font-size: 16px; line-height: 1; }
.login-form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 24px; }
.login-mobile-band { display: none; }
.login-head { display: flex; flex-direction: column; gap: 8px; }
.login-head .eb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 3px; color: var(--faint); }
.login-head .ttl { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.login-head .sub { font-size: 14px; color: var(--faint); }
.fields { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-top { display: flex; justify-content: space-between; align-items: center; }
.field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--faint); }
.field .forgot { font-size: 12px; color: var(--accent); }
.field input {
  background: var(--field-bg); border: 1px solid var(--hairline-mid); border-radius: 10px;
  padding: 13px 15px; font-size: 16px; color: var(--text); font-family: var(--font-ui);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input::placeholder { color: var(--ghost); }
.field input:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--focus-halo); }
.login-submit {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 700;
  padding: 15px; border-radius: 10px; box-shadow: 0 0 28px rgba(61,123,253,0.50);
  transition: transform 0.15s, box-shadow 0.2s;
}
.login-submit:hover { box-shadow: 0 0 38px rgba(61,123,253,0.75); }
.login-submit.pressed { transform: scale(0.97); }
.or-div { display: flex; align-items: center; gap: 12px; }
.or-div .ln { flex: 1; height: 1px; background: var(--hairline-mid); }
.or-div .or { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--ghost); }
.login-sso {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid var(--hairline-mid); color: var(--text); font-size: 14px; font-weight: 600;
  padding: 13px; border-radius: 10px; transition: border-color 0.2s, background 0.2s;
}
.login-sso:hover { border-color: var(--hairline-strong); background: rgba(127,127,140,0.05); }
.login-alt { text-align: center; font-size: 13px; color: var(--faint); }
.login-alt a { color: var(--accent); }

/* ---------- boot cover ---------- */
.boot {
  position: fixed; inset: 0; z-index: 80; background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 34px; transition: opacity 0.9s ease; cursor: pointer;
}
.boot.gone { opacity: 0; }
.boot-halo {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(122,43,226,0.32), rgba(45,156,253,0.10) 52%, transparent 70%);
  filter: blur(40px); animation: halo 5s ease-in-out infinite;
}
.boot-orbit { position: relative; width: 150px; height: 150px; }
.boot-orbit .ring {
  position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--hairline-mid);
  animation: spin 6s linear infinite;
}
.boot-orbit .ring .orbit-node.blue { top: -2px; width: 5px; height: 5px; }
.boot-orbit .mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 82px;
  filter: drop-shadow(0 0 30px rgba(122,43,226,0.6));
}
.boot-lockup { position: relative; display: flex; align-items: center; gap: 11px; }
.boot-lockup .wordmark { height: 16px; }
.boot-lockup .spectrum-divider { height: 22px; }
.boot-lockup .labs-chip { padding: 5px 9px; }
.boot-lockup .labs-chip .txt { font-size: 11px; }
.boot-rail {
  position: relative; width: 240px; height: 2px; border-radius: 2px;
  background: rgba(127,127,140,0.18); overflow: hidden;
}
.boot-bar {
  width: 0%; height: 100%;
  background: linear-gradient(90deg,#F7941D,#F0366B,#7A2BE2,#2D9CFD);
  box-shadow: 0 0 12px rgba(122,43,226,0.8); transition: width 0.25s ease;
}
.boot-caption { position: relative; font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; color: var(--faint); }
.boot-skip {
  position: absolute; bottom: 26px; right: 28px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 2px; color: var(--ghost);
  border: 1px solid var(--hairline-mid); border-radius: 99px; padding: 7px 14px;
  transition: color 0.2s, border-color 0.2s;
}
.boot-skip:hover { color: var(--text); border-color: var(--hairline-strong); }

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

/* ---------- keyframes ---------- */
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes spinR    { to { transform: rotate(-360deg); } }
@keyframes halo     { 0%,100% { opacity: 0.55; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 0.9; transform: translate(-50%,-50%) scale(1.08); } }
@keyframes floaty   { 0%,100% { transform: translate(-50%,-50%) translateY(0); } 50% { transform: translate(-50%,-50%) translateY(-10px); } }
@keyframes flow     { to { transform: translateX(var(--travel,220px)); } }
@keyframes shimmer  { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
@keyframes blink    { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes scrollbob{ 0%,100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(7px); opacity: 1; } }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .modgrid { grid-template-columns: repeat(2,1fr); }
  .twocol { grid-template-columns: 1fr; gap: 40px; }
  /* takaful loses its reversal when stacked — copy first, always */
  .tak-grid .tak-copy { order: -1; }
}

@media (max-width: 820px) {
  .section { padding: 80px 24px; }
  .hero { padding: 100px 22px 72px; }
  .closing { padding: 90px 22px; }
  .nav { padding: 16px 22px; }
  .nav-links {
    position: absolute; top: 100%; right: 22px; flex-direction: column; gap: 4px;
    background: var(--nav-scrolled); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 16px; min-width: 180px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4); display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 8px 0; font-size: 14px; }
  .nav-menu-btn { display: inline-flex; }
  .nav-right { gap: 14px; }

  /* partnership → vertical */
  .partner-grid { grid-template-columns: 1fr; gap: 26px; }
  .partner-rail { left: 18px; right: auto; top: 8%; bottom: 8%; width: 2px; height: auto;
    background: linear-gradient(180deg,rgba(247,148,29,0.5),rgba(240,54,107,0.5),rgba(122,43,226,0.5),rgba(45,156,253,0.5)); }
  .pstep { flex-direction: row; align-items: flex-start; gap: 16px; }
  .pstep .ptxt { padding-top: 4px; }

  /* spine nodes wrap 4 + 3 */
  .spine-nodes { flex-wrap: wrap; gap: 22px 0; }
  .spine-node { flex: 0 0 25%; }
}

@media (max-width: 620px) {
  /* Header declutter: simplify the lockup to the core mark, give the CTA room
     to breathe (never wrap), and grow tap targets to 44px. LABS chip + divider
     return at wider widths where the full lockup fits. */
  .nav { padding: 14px 18px; }
  .nav-right { gap: 10px; }
  .nav-links { right: 18px; }
  .nav .lockup { gap: 9px; }
  .nav .lockup .spectrum-divider,
  .nav .lockup .labs-chip { display: none; }
  .nav .lockup .bionic { height: 22px; }
  .nav .lockup .wordmark { height: 14px; }
  .icon-btn { width: 44px; height: 44px; }
  .nav .btn-primary { padding: 0 16px; min-height: 44px; font-size: 13px; }

  .login { flex-direction: column; }
  .login-brand { display: none; }
  .login-form-wrap { padding: 24px; align-items: flex-start; padding-top: 84px; }
  .login-mobile-band {
    display: flex; align-items: center; gap: 11px; margin-bottom: 24px;
    padding-bottom: 20px; border-bottom: 1px solid var(--hairline);
  }
  .login-mobile-band .orbit-mini { position: relative; width: 40px; height: 40px; flex-shrink: 0; }
  .login-mobile-band .orbit-mini .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--hairline-mid); animation: spin 20s linear infinite; }
  .login-mobile-band .orbit-mini img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 22px; }
  .login-back { top: 20px; right: 20px; }

  .boot-orbit { width: 110px; height: 110px; }
  .boot-orbit .mark { width: 60px; }
  .boot-rail { width: 70vw; }
  .spine-node { flex-basis: 33.33%; }
}

@media (max-width: 380px) {
  .spine-node { flex-basis: 50%; }
}

/* On the narrowest phones, drop the wordmark too — the bionic mark alone
   carries identity and leaves the CTA uncramped. */
@media (max-width: 360px) {
  .nav .lockup .wordmark { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .orbit-ring, .orbit-halo, .orbit-core, .brand-orbit .float-mark,
  .scroll-mouse .bead, .wf-step.active .stag, .closing-halo, .boot-halo,
  .boot-orbit .ring, .login-mobile-band .orbit-mini .ring { animation: none !important; }
  /* keep the constellation's connecting lines, drop the travelling pulse */
  .spine-web-svg line.wl-flow { display: none; }
}