/* ==========================================================================
   Nexvault — landing page stylesheet
   Extracted from "Nexvault Landing Page.dc.html" for developer handoff.
   Brand: Nexvault Financial (Pty) Ltd · Nedbank sponsored TPPP
   Fonts: Space Grotesk (UI) + Space Mono (labels, code)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --nv-navy:          #16233F; /* primary brand navy */
  --nv-navy-deep:     #101A2F; /* gradient floor */
  --nv-navy-mid:      #1E3157; /* gradient highlight */
  --nv-navy-panel:    #131F38; /* dial body */
  --nv-navy-raised:   #1B2B4D; /* rotating dial face */
  --nv-green:         #22C79A; /* accent / vault green */
  --nv-green-ink:     #0E9E78; /* accent on light backgrounds (AA text) */
  --nv-off-white:     #F6F7F9;
  --nv-ink:           #14161C;
  --nv-white:         #FFFFFF;

  /* Derived surfaces */
  --nv-hairline:        rgba(22, 35, 63, .12);
  --nv-hairline-invert: rgba(246, 247, 249, .12);
  --nv-ink-muted:       rgba(20, 22, 28, .70);
  --nv-ink-soft:        rgba(20, 22, 28, .55);
  --nv-invert-muted:    rgba(246, 247, 249, .74);
  --nv-invert-soft:     rgba(246, 247, 249, .55);
  --nv-green-wash:      rgba(34, 199, 154, .10);
  --nv-green-edge:      rgba(34, 199, 154, .34);

  /* Type */
  --nv-font:      'Space Grotesk', Helvetica, Arial, sans-serif;
  --nv-font-mono: 'Space Mono', ui-monospace, monospace;

  /* Fluid type scale — one ramp, desktop → mobile */
  --nv-h1:      clamp(36px, 7.2vw, 62px);
  --nv-h2:      clamp(27px, 4.4vw, 40px);
  --nv-h2-sm:   clamp(25px, 4vw,   36px);
  --nv-h3:      clamp(21px, 2.6vw, 26px);
  --nv-h4:      21px;
  --nv-lead:    clamp(16px, 1.9vw, 19px);
  --nv-body:    clamp(15px, 1.7vw, 17px);
  --nv-small:   15px;
  --nv-code:    clamp(11px, 1.35vw, 13.5px);
  --nv-label:   11px;   /* mono, uppercase, tracked */

  /* Rhythm */
  --nv-gutter:      clamp(20px, 5vw, 40px);
  --nv-section-y:   clamp(64px, 9vw, 104px);
  --nv-section-y-sm: clamp(48px, 7vw, 76px);
  --nv-max:         1200px;

  /* Radii, shadow, motion */
  --nv-r-sm: 8px;
  --nv-r:    12px;
  --nv-r-lg: 16px;
  --nv-r-xl: 24px;
  --nv-pill: 999px;
  --nv-lift: 0 12px 34px rgba(22, 35, 63, .08);
  --nv-lift-dark: 0 12px 34px rgba(22, 35, 63, .22);
  --nv-dial-duration: 7s;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--nv-white);
  overflow-x: hidden;
}

body {
  font-family: var(--nv-font);
  color: var(--nv-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p { margin: 0; text-wrap: pretty; }

h1 { font-size: var(--nv-h1);    font-weight: 700; line-height: 1.04; letter-spacing: -.025em; }
h2 { font-size: var(--nv-h2);    font-weight: 700; line-height: 1.14; letter-spacing: -.02em; color: var(--nv-navy); }
h3 { font-size: var(--nv-h3);    font-weight: 500; line-height: 1.2;  letter-spacing: -.015em; color: var(--nv-navy); }

a { color: var(--nv-green-ink); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--nv-navy); }

img, svg { display: block; max-width: 100%; }

/* Mono label — the recurring eyebrow/kicker treatment */
.nv-label {
  font-family: var(--nv-font-mono);
  font-size: var(--nv-label);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--nv-ink-soft);
}
.nv-label--accent { color: var(--nv-green-ink); }
.nv-label--tight  { letter-spacing: .22em; }
.nv-label--xs     { font-size: 10px; letter-spacing: .24em; }

/* Wordmark: "Nex" bold light + "vault" regular green */
.nv-wordmark { font-size: 21px; line-height: 1; }
.nv-wordmark b    { font-weight: 700; color: var(--nv-off-white); }
.nv-wordmark span { font-weight: 400; color: var(--nv-green); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.nv-section { padding: var(--nv-section-y) var(--nv-gutter); }
.nv-section--sm { padding: var(--nv-section-y-sm) var(--nv-gutter); }
.nv-shell { max-width: var(--nv-max); margin-inline: auto; }

.nv-stack { display: flex; flex-direction: column; gap: 28px; }
.nv-stack--sm { gap: 16px; }
.nv-stack--lg { gap: 44px; }

.nv-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Auto-fit grids replace fixed columns so tablet/mobile reflow with no queries */
.nv-grid          { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.nv-grid--wide    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(20px, 3vw, 48px); }
.nv-grid--methods { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.nv-grid--flow    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px; align-items: stretch; }
.nv-grid--stats   { grid-template-columns: repeat(auto-fit, minmax(min(45%, 160px), 1fr)); gap: clamp(22px, 3vw, 28px); }
.nv-grid--split   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(36px, 4vw, 60px); align-items: center; }

/* Surfaces */
.nv-dark  { background: var(--nv-navy); color: var(--nv-off-white); }
.nv-light { background: var(--nv-off-white); color: var(--nv-ink); }
.nv-plain { background: var(--nv-white); }
.nv-gradient {
  background: radial-gradient(circle at 78% 30%, var(--nv-navy-mid) 0%, var(--nv-navy) 55%, var(--nv-navy-deep) 100%);
  color: var(--nv-off-white);
}
.nv-gradient--corner {
  background: radial-gradient(circle at 15% 20%, var(--nv-navy-mid) 0%, var(--nv-navy) 60%, var(--nv-navy-deep) 100%);
  color: var(--nv-off-white);
}
.nv-dark p, .nv-gradient p, .nv-gradient--corner p { color: var(--nv-invert-muted); }
.nv-dark h2, .nv-dark h3, .nv-gradient h2 { color: var(--nv-off-white); }

/* --------------------------------------------------------------------------
   4. Components
   -------------------------------------------------------------------------- */

/* 4.1 Header — sticky, translucent navy */
.nv-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(22, 35, 63, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(246, 247, 249, .10);
}
.nv-header__inner {
  max-width: var(--nv-max);
  margin-inline: auto;
  padding: 14px var(--nv-gutter);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(14px, 3vw, 40px);
}
.nv-header__brand { display: flex; align-items: center; gap: 12px; color: var(--nv-off-white); }
.nv-header__brand svg { width: 34px; height: 34px; flex: none; }

.nv-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 30px);
  font-size: 14px;
  margin-left: auto;
  max-width: 100%;
  padding: 4px 0;
  overflow-x: auto;                 /* nav scrolls rather than wrapping on phones */
  scrollbar-width: none;
}
.nv-nav::-webkit-scrollbar { display: none; }
.nv-nav a { color: rgba(246, 247, 249, .72); white-space: nowrap; }
.nv-nav a:hover { color: var(--nv-green); }

/* 4.2 Buttons — 44px minimum touch target */
.nv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--nv-font);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.nv-btn--primary { background: var(--nv-green); color: var(--nv-navy); }
.nv-btn--primary:hover { background: var(--nv-off-white); color: var(--nv-navy); }
.nv-btn--navy { background: var(--nv-navy); color: var(--nv-off-white); }
.nv-btn--navy:hover { background: var(--nv-green-ink); color: var(--nv-off-white); }
.nv-btn--ghost {
  background: transparent;
  border-color: rgba(246, 247, 249, .28);
  color: var(--nv-off-white);
  font-weight: 500;
}
.nv-btn--ghost:hover { border-color: var(--nv-green); color: var(--nv-green); }
.nv-btn--sm { padding: 13px 20px; font-size: 14px; border-radius: var(--nv-r-sm); }
/* Hero pair: side by side on desktop, full-width stacked on phones */
.nv-btn--fluid { flex: 1 1 auto; min-width: 220px; }

/* Sound toggle beneath the dial */
.nv-sound {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 14px 18px;
  font-family: var(--nv-font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(246, 247, 249, .72);
  background: rgba(246, 247, 249, .05);
  border: 1px solid rgba(246, 247, 249, .18);
  border-radius: var(--nv-pill);
  cursor: pointer;
}
.nv-sound:hover { border-color: var(--nv-green); color: var(--nv-green); }
.nv-sound__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(246, 247, 249, .32); }
.nv-sound[aria-pressed="true"] .nv-sound__dot { background: var(--nv-green); }

/* 4.3 Badges and trust strip */
.nv-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--nv-font-mono);
  font-size: var(--nv-label);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--nv-green);
  background: var(--nv-green-wash);
  border: 1px solid rgba(34, 199, 154, .40);
  border-radius: var(--nv-pill);
  padding: 8px 16px;
}
.nv-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-family: var(--nv-font-mono);
  font-size: var(--nv-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nv-invert-soft);
}

/* 4.4 Cards */
.nv-card {
  background: var(--nv-white);
  border: 1px solid var(--nv-hairline);
  border-radius: var(--nv-r);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.nv-card:hover { border-color: var(--nv-green); }
.nv-card__title { font-size: 17px; font-weight: 500; color: var(--nv-navy); }
.nv-card__body  { font-size: 13px; line-height: 1.5; color: var(--nv-ink-soft); }

/* Capability card — numbered, lifts on hover */
.nv-feature {
  border: 1px solid var(--nv-hairline);
  border-radius: 14px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--nv-white);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.nv-feature:hover { border-color: var(--nv-green); box-shadow: var(--nv-lift); }
.nv-feature__num {
  font-family: var(--nv-font-mono);
  font-size: var(--nv-label);
  letter-spacing: .2em;
  color: var(--nv-green-ink);
}
.nv-feature h3 { font-size: var(--nv-h4); }
.nv-feature p { font-size: var(--nv-small); line-height: 1.6; color: var(--nv-ink-muted); }
/* Inverted variant (the "bank-sponsored" card) */
.nv-feature--dark { background: var(--nv-navy); border-color: transparent; }
.nv-feature--dark:hover { box-shadow: var(--nv-lift-dark); }
.nv-feature--dark .nv-feature__num { color: var(--nv-green); }
.nv-feature--dark h3 { color: var(--nv-off-white); }
.nv-feature--dark p { color: var(--nv-invert-muted); }

/* Industry panel — the two-up Financial services / Gaming block */
.nv-industry {
  border: 1px solid var(--nv-hairline);
  border-radius: var(--nv-r-lg);
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--nv-white);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.nv-industry:hover { border-color: var(--nv-green); box-shadow: var(--nv-lift); }
.nv-industry__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--nv-navy);
}

/* Flow step — numbered cards on navy; step 03 is the highlighted settlement leg */
.nv-step {
  background: rgba(246, 247, 249, .05);
  border: 1px solid rgba(246, 247, 249, .14);
  border-radius: 14px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nv-step__eyebrow {
  font-family: var(--nv-font-mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--nv-invert-soft);
}
.nv-step__title { font-size: 19px; font-weight: 500; color: var(--nv-off-white); }
.nv-step__body  { font-size: 14px; line-height: 1.55; color: rgba(246, 247, 249, .66); }
.nv-step--accent {
  background: rgba(34, 199, 154, .10);
  border-color: rgba(34, 199, 154, .42);
}
.nv-step--accent .nv-step__eyebrow { color: var(--nv-green); }
.nv-step--accent .nv-step__body { color: var(--nv-invert-muted); }

/* 4.5 Code panel */
.nv-code {
  background: var(--nv-navy-deep);
  border: 1px solid rgba(34, 199, 154, .22);
  border-radius: var(--nv-r-lg);
  overflow: hidden;
}
.nv-code__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(246, 247, 249, .10);
  font-family: var(--nv-font-mono);
  font-size: var(--nv-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nv-invert-soft);
}
.nv-code__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nv-green); }
.nv-code pre {
  margin: 0;
  padding: clamp(18px, 3vw, 26px);
  font-family: var(--nv-font-mono);
  font-size: var(--nv-code);
  line-height: 1.85;
  color: rgba(246, 247, 249, .90);
  white-space: pre;
  overflow-x: auto;
}
.nv-code .k { color: var(--nv-green); }        /* JSON key */
.nv-code .v { color: var(--nv-off-white); }    /* JSON value */
.nv-code .c { color: rgba(246, 247, 249, .45); } /* trailing comment */

/* 4.6 Stats */
.nv-stat { display: flex; flex-direction: column; gap: 8px; }
.nv-stat__figure { font-size: 38px; font-weight: 700; letter-spacing: -.02em; color: var(--nv-navy); }
.nv-stat__label {
  font-family: var(--nv-font-mono);
  font-size: var(--nv-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--nv-ink-soft);
}

/* 4.7 Contact panel */
.nv-cta {
  max-width: 1000px;
  margin-inline: auto;
  border-radius: var(--nv-r-xl);
  padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(30px, 4vw, 48px);
  align-items: center;
}
.nv-cta h2 { font-size: var(--nv-h2-sm); }
.nv-cta__meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--nv-font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(246, 247, 249, .62);
  border-left: 1px solid rgba(246, 247, 249, .16);
  padding-left: clamp(18px, 3vw, 32px);
}
/* Drop the rule when the panel has stacked */
@media (max-width: 640px) {
  .nv-cta__meta { border-left: 0; padding-left: 0; }
}

/* 4.8 Footer */
.nv-footer {
  background: var(--nv-ink);
  color: rgba(246, 247, 249, .6);
  padding: clamp(40px, 6vw, 56px) var(--nv-gutter);
}
.nv-footer__inner { max-width: var(--nv-max); margin-inline: auto; display: flex; flex-direction: column; gap: 28px; }
.nv-footer__rule { height: 1px; background: rgba(246, 247, 249, .12); }
.nv-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(22px, 3vw, 32px);
  font-size: 13px;
  line-height: 1.7;
}
.nv-footer a { color: rgba(246, 247, 249, .6); }
.nv-footer a:hover { color: var(--nv-green); }
.nv-footer__legal { max-width: 44em; }
.nv-footer__fineprint {
  font-family: var(--nv-font-mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(246, 247, 249, .38);
}

/* --------------------------------------------------------------------------
   5. Vault dial (hero animation)
   Markup: .nv-dial > .nv-dial__glow + svg[viewBox="0 0 400 400"]
   Rotate .nv-dial__face, sweep .nv-dial__sweep (stroke-dasharray 1106).
   -------------------------------------------------------------------------- */
.nv-dial {
  position: relative;
  width: min(320px, 74vw);
  aspect-ratio: 1 / 1;
}
.nv-dial--lg { width: min(360px, 80vw); }
.nv-dial__glow {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 199, 154, .30) 0%, rgba(34, 199, 154, 0) 66%);
  pointer-events: none;
  animation: nv-dial-glow var(--nv-dial-duration) infinite;
}
.nv-dial > svg { position: relative; width: 100%; height: 100%; }
.nv-dial__face {
  transform-box: fill-box;
  transform-origin: center;
  animation: nv-dial-spin var(--nv-dial-duration) infinite;
}
.nv-dial__sweep {
  stroke: var(--nv-green);
  stroke-width: 4;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 1106;
  stroke-dashoffset: 1106;
  animation: nv-dial-sweep var(--nv-dial-duration) infinite;
}
.nv-dial__hub {
  transform-box: fill-box;
  transform-origin: center;
  animation: nv-dial-hub var(--nv-dial-duration) infinite;
}
.nv-dial__caption {
  font-family: var(--nv-font-mono);
  font-size: var(--nv-label);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--nv-invert-soft);
  text-align: center;
}

/* Spin: two combination stops, a third, then back to zero and the bolt drops.
   Each segment carries its own easing so the dial snaps into every detent. */
@keyframes nv-dial-spin {
  0%   { transform: rotate(0deg);    animation-timing-function: cubic-bezier(.32, 0, .16, 1); }
  21%  { transform: rotate(-254deg); animation-timing-function: cubic-bezier(.34, 1.6, .5, 1); }
  27%  { transform: rotate(-244deg); animation-timing-function: cubic-bezier(.4, 0, .15, 1); }
  30%  { transform: rotate(-244deg); animation-timing-function: cubic-bezier(.4, 0, .15, 1); }
  49%  { transform: rotate(128deg);  animation-timing-function: cubic-bezier(.34, 1.6, .5, 1); }
  55%  { transform: rotate(118deg);  animation-timing-function: cubic-bezier(.4, 0, .15, 1); }
  58%  { transform: rotate(118deg);  animation-timing-function: cubic-bezier(.42, 0, .14, 1); }
  76%  { transform: rotate(-48deg);  animation-timing-function: cubic-bezier(.34, 1.8, .5, 1); }
  81%  { transform: rotate(-38deg);  animation-timing-function: linear; }
  88%  { transform: rotate(-38deg);  animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
  100% { transform: rotate(0deg); }
}
@keyframes nv-dial-sweep {
  0%, 82% { stroke-dashoffset: 1106; opacity: 0; }
  84%     { stroke-dashoffset: 1106; opacity: 1; }
  96%     { stroke-dashoffset: 0;    opacity: 1; }
  100%    { stroke-dashoffset: 0;    opacity: 0; }
}
@keyframes nv-dial-glow {
  0%, 24%  { opacity: .18; }
  27%      { opacity: .80; }
  32%, 52% { opacity: .18; }
  55%      { opacity: .80; }
  60%, 78% { opacity: .18; }
  84%      { opacity: .95; }
  100%     { opacity: .18; }
}
@keyframes nv-dial-hub {
  0%, 80% { transform: scale(1); }
  85%     { transform: scale(1.09); }
  92%     { transform: scale(1); }
  100%    { transform: scale(1); }
}
@keyframes nv-dial-stamp {
  0%, 84% { opacity: 0; transform: translateY(6px); }
  90%     { opacity: 1; transform: translateY(0); }
  97%     { opacity: 1; transform: translateY(0); }
  100%    { opacity: 0; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   6. Responsive + preferences
   Layout is fluid by default (clamp + auto-fit grids); these are corrections,
   not the primary mechanism.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nv-header__inner { gap: 14px; }
  .nv-nav { order: 3; width: 100%; margin-left: 0; justify-content: flex-start; }
  .nv-feature { padding: 24px; }
  .nv-step { padding: 22px; }
}

@media (max-width: 560px) {
  .nv-btn--fluid { flex: 1 1 100%; min-width: 0; }
  .nv-stat__figure { font-size: 32px; }
  .nv-trust { gap: 8px 18px; }
  .nv-code pre { line-height: 1.7; }
}

@media (prefers-reduced-motion: reduce) {
  .nv-dial__face,
  .nv-dial__glow,
  .nv-dial__sweep,
  .nv-dial__hub {
    animation: none;
  }
  .nv-dial__sweep { stroke-dashoffset: 0; opacity: 1; }
  * { transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   7. Print — flatten the dial, drop chrome
   -------------------------------------------------------------------------- */
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .nv-header, .nv-nav, .nv-sound, .nv-btn { display: none !important; }
  .nv-dial__face, .nv-dial__glow, .nv-dial__sweep, .nv-dial__hub { animation: none !important; }
  .nv-section, .nv-section--sm { padding: 18px 0; }
  .nv-feature, .nv-industry, .nv-step, .nv-cta, .nv-code { break-inside: avoid; }
}