/* ============================================================
   Fintoval — "Charcoal & Gold"
   Design system for the pt-BR site (LTR, single locale).

   Two surfaces carry the whole system:
     · the charcoal canvas        (body, cards, splits)
     · the gold-rimmed feature    (form panels, featured cards, CTA bands)
   Gold is the only chroma. It appears as a hairline, a glow or a fill —
   never as a large flat area, which is what keeps it reading as premium.
   ============================================================ */

:root {
  /* base — charcoal */
  --fv-bg: #0f1012;
  --fv-bg-2: #141518;
  --fv-char-1: #1a1b1f;
  --fv-char-2: #23242a;

  /* accent — the logo gold, sampled from the mark itself */
  --fv-gold: #c9a44c;
  --fv-gold-hi: #e6c878;
  --fv-gold-deep: #7a5c1a;
  --fv-gold-line: rgba(201, 164, 76, .36);
  --fv-gold-ghost: rgba(201, 164, 76, .10);
  --fv-grad: linear-gradient(135deg, #f3e3b0 0%, #c9a44c 48%, #8f6c24 100%);
  --fv-ink: #16130b;        /* text that sits on a gold fill */

  /* the featured surface: gold top hairline + corner glow + warm charcoal */
  --fv-feat-surface:
    linear-gradient(90deg, transparent 6%, rgba(230, 200, 120, .75) 50%, transparent 94%) top / 100% 1px no-repeat,
    radial-gradient(110% 80% at 100% 0%, rgba(201, 164, 76, .15), transparent 58%),
    linear-gradient(165deg, #211f1a 0%, #18181b 55%, #131416 100%);

  /* text on the dark canvas */
  --fv-tx: rgba(236, 231, 220, .76);
  --fv-tx-strong: #f2ede2;
  --fv-muted: #b1aa9c;
  /* Tertiary labels (.metric .lbl, .post-meta, .calc-form__label) sit on the
     lifted glass cards, not on --fv-bg. Measured against #1a1b1f this lands at
     ~4.9:1; anything darker drops under AA on the featured surfaces. */
  --fv-dim: #8f897d;

  /* lines / glass */
  --fv-line: rgba(236, 231, 220, .10);
  --fv-line-soft: rgba(236, 231, 220, .06);
  --fv-glass: rgba(236, 231, 220, .025);
  --fv-glass-2: rgba(236, 231, 220, .045);

  /* fields */
  --fv-field: #0f1012;
  --fv-field-line: rgba(236, 231, 220, .16);

  /* radii — tighter than a consumer app, on purpose */
  --fvr-sm: 8px;
  --fvr-md: 14px;
  --fvr-lg: 20px;
  --fvr-xl: 28px;
  --fvr-pill: 9999px;

  /* shadow / glow */
  --fvs-sh: 0 30px 80px -30px rgba(0, 0, 0, .85);
  --fvs-glow: 0 10px 34px -12px rgba(201, 164, 76, .55);
  --fvs-feat: 0 30px 70px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(243, 227, 176, .08);

  /* fonts */
  --fvf-disp: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fvf-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --fvf-mono: 'DM Mono', ui-monospace, Consolas, monospace;

  --fv-mw: 1240px;
  --fv-nav-h: 74px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--fvf-body);
  background: var(--fv-bg);
  color: var(--fv-tx);
  line-height: 1.75;
  padding-block-start: var(--fv-nav-h);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* ---- charcoal canvas ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201, 164, 76, .09), transparent 55%),
    radial-gradient(90% 60% at 100% 8%, rgba(120, 98, 52, .14), transparent 60%),
    linear-gradient(180deg, #141518 0%, #0f1012 40%, #0b0c0d 100%);
}
/* gold sheen — the light source the featured surfaces are lit by */
body::after {
  content: "";
  position: fixed;
  top: -10%;
  left: 50%;
  width: 46vw;
  height: 120%;
  transform: translateX(-50%) rotate(4deg);
  z-index: -2;
  background: linear-gradient(180deg, rgba(230, 200, 120, .055), rgba(230, 200, 120, .012) 30%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  opacity: .8;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: rgba(201, 164, 76, .35); color: #fff; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--fv-gold-hi); outline-offset: 3px; }

.wrap { max-width: var(--fv-mw); margin-inline: auto; padding-inline: 24px; }

/* a11y helpers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -60px; left: 16px;
  z-index: 2000;
  padding: 10px 18px;
  border-radius: 0 0 var(--fvr-sm) var(--fvr-sm);
  background: var(--fv-gold); color: var(--fv-ink);
  font-weight: 700; font-size: .9rem;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ---- typography ---- */
h1, h2, h3, h4 {
  font-family: var(--fvf-body);
  color: var(--fv-tx-strong);
  font-weight: 600;
  line-height: 1.3;
}
/* Playfair, not Cormorant: Portuguese headlines are dense with ê/ã/ç/ó, and
   Cormorant parks lowercase diacritics at ascender height, where they read as
   detached. Playfair seats them on the glyph and keeps the high-contrast,
   old-money finance voice. */
.display {
  font-family: var(--fvf-disp);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--fv-tx-strong);
}
.display b { font-weight: 700; }
.display .hi { font-style: italic; font-weight: 400; color: var(--fv-gold-hi); }
h1.display { font-size: clamp(2.2rem, 4.6vw, 3.45rem); }
h2.display { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
/* Figures: lining (cap-height) and tabular, so the animated counters do not
   jitter sideways while they tick. */
.stat-row .val, .metric .val, .agg .v, .gsum { font-variant-numeric: lining-nums tabular-nums; }

.eyebrow {
  font-family: var(--fvf-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fv-muted);
}
.eyebrow.acc { color: var(--fv-gold-hi); }

.lede { color: var(--fv-muted); font-size: 1.02rem; max-width: 50ch; }

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--fvf-body);
  font-weight: 600;
  font-size: .92rem;
  padding: 13px 26px;
  border-radius: var(--fvr-pill);
  border: 1px solid transparent;
  transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--fv-grad); color: var(--fv-ink); font-weight: 700; box-shadow: var(--fvs-glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -12px rgba(201, 164, 76, .75); }
.btn-ghost {
  background: var(--fv-glass-2);
  color: var(--fv-tx-strong);
  border-color: var(--fv-line);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--fv-gold); background: var(--fv-gold-ghost); }

/* ---- panel base ---- */
.panel {
  background: linear-gradient(180deg, var(--fv-glass-2), var(--fv-glass));
  border: 1px solid var(--fv-line);
  border-radius: var(--fvr-lg);
  backdrop-filter: blur(14px);
  box-shadow: var(--fvs-sh);
}

/* The gold-rimmed feature is the single highlighted surface, applied by
   .hero-right, .form-card.solo, .cap.feat, .gcard.mid, .cta-band and
   .calc-results__final. It lifts out of the canvas by warmth and edge light,
   not by brightness — the page stays dark end to end. */

section { position: relative; }
.sect { padding-block: 84px; }
.sect-head { max-width: 680px; margin-inline: auto; margin-block-end: 46px; text-align: center; }
.sect-head .eyebrow { display: block; margin-block-end: 14px; }
.sect-head p { color: var(--fv-muted); margin-block-start: 14px; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: var(--fv-nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgba(15, 16, 18, .74);
  backdrop-filter: blur(18px);
  border-block-end: 1px solid var(--fv-line-soft);
}
.nav-in {
  width: 100%;
  max-width: var(--fv-mw);
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Brand: the wordmark echoes the logo lettering — wide-tracked caps in gold.
   One word, one treatment; never split "Fintoval" into two tones. */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.brand img { width: 32px; height: 32px; flex-shrink: 0; }
.brand-name {
  font-family: var(--fvf-body);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fv-gold-hi);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand-name {
    background: linear-gradient(180deg, #f3e3b0 0%, #c9a44c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.menu { display: flex; align-items: center; gap: 26px; list-style: none; }
.menu a { font-size: .88rem; color: var(--fv-muted); transition: color .2s; }
.menu a:hover, .menu a.on { color: var(--fv-tx-strong); }
.menu a.on:not(.btn) { box-shadow: inset 0 -1px 0 var(--fv-gold); padding-block-end: 2px; }
.menu .btn { padding: 9px 20px; font-size: .84rem; }
.menu a.btn-primary { color: var(--fv-ink); }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; }
.burger span { width: 22px; height: 1.6px; background: var(--fv-tx); border-radius: 2px; transition: .3s; }

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  border-block: 1px solid var(--fv-line-soft);
  background: rgba(236, 231, 220, .012);
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track { display: inline-flex; gap: 46px; padding-block: 11px; will-change: transform; }
.tk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--fvf-mono);
  font-size: .74rem;
  color: var(--fv-muted);
}
.tk b { color: var(--fv-tx-strong); font-weight: 500; }
.tk .px { color: var(--fv-tx); }
.tk .up { color: #6fcf97; }
.tk .down { color: #f2878c; }
.dot-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fv-gold);
  box-shadow: 0 0 10px var(--fv-gold);
  animation: fvPulse 1.8s ease-in-out infinite;
}
@keyframes fvPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ============================================================
   HERO — charcoal | gold-rimmed form
   ============================================================ */
.hero { padding-block: 56px 60px; }
.hero-panel {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border-radius: var(--fvr-xl);
  overflow: hidden;
  border: 1px solid var(--fv-line);
  box-shadow: var(--fvs-sh);
  position: relative;
}
.hero-left {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(201, 164, 76, .10), transparent 60%),
    linear-gradient(150deg, var(--fv-char-2), var(--fv-char-1) 70%, #151619);
  padding: 54px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--fvf-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fv-gold-hi);
  padding: 7px 14px;
  border: 1px solid var(--fv-gold-line);
  border-radius: var(--fvr-pill);
  background: var(--fv-gold-ghost);
  margin-block-end: 24px;
}
.hero-chip svg { width: 13px; height: 13px; }
.hero h1 { margin-block-end: 20px; }
.hero-left .lede { margin-block-end: 32px; font-size: 1.05rem; }

.stat-rows { display: flex; flex-direction: column; }
.stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  border-block-start: 1px solid var(--fv-line-soft);
}
.stat-row:last-child { border-block-end: 1px solid var(--fv-line-soft); }
.stat-row .val {
  font-family: var(--fvf-disp);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.1;
  color: var(--fv-tx-strong);
  white-space: nowrap;
}
.stat-row .lbl {
  font-family: var(--fvf-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fv-dim);
  text-align: end;
}

/* hero right — the gold-rimmed form */
.hero-right {
  background: var(--fv-feat-surface);
  border-inline-start: 1px solid var(--fv-gold-line);
  padding: 40px 40px 34px;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---- registration form (lives on the featured surface) ---- */
.form-card h2 { font-weight: 700; font-size: 1.3rem; color: var(--fv-tx-strong); }
.form-card .note {
  font-family: var(--fvf-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fv-gold-hi);
  margin-block: 5px 16px;
}
.reg input[type="text"],
.reg input[type="email"],
.reg input[type="tel"] {
  width: 100%;
  background: var(--fv-field);
  border: 1px solid var(--fv-field-line);
  border-radius: var(--fvr-sm);
  padding: 12px 14px;
  color: var(--fv-tx-strong);
  font-family: var(--fvf-body);
  font-size: .92rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.reg input::placeholder { color: rgba(236, 231, 220, .52); }
.reg input:focus { border-color: var(--fv-gold); box-shadow: 0 0 0 3px rgba(201, 164, 76, .22); }
.reg form > div { margin-block-end: 10px; }
/* ---- phone field (intl-tel-input v25) ----------------------------------
   The library pins .iti__country-container absolutely and writes the input's
   padding-left from JS, measured once — before its own async stylesheet has
   necessarily applied. Laying the widget out as a flex row, with the selector
   as a real item, removes any dependence on that measurement.

   The field chrome moves off the input and onto .iti so the selector and the
   digits read as one control. The library's dropdown ships light; it is
   re-skinned here (via its CSS custom properties, plus direct rules as a
   belt-and-braces for anything not exposed as a variable). */
.iti {
  --iti-border-color: var(--fv-line);
  --iti-dialcode-color: var(--fv-muted);
  --iti-dropdown-bg: var(--fv-char-1);
  --iti-arrow-color: var(--fv-muted);
  --iti-hover-color: rgba(201, 164, 76, .12);
  --iti-search-icon-color: var(--fv-muted);
  width: 100%;
  display: flex;
  align-items: stretch;
  background: var(--fv-field);
  border: 1px solid var(--fv-field-line);
  border-radius: var(--fvr-sm);
  transition: border-color .2s, box-shadow .2s;
}
.iti:focus-within { border-color: var(--fv-gold); box-shadow: 0 0 0 3px rgba(201, 164, 76, .22); }

.iti__country-container {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  border-inline-end: 1px solid var(--fv-field-line);
}
.iti__selected-dial-code { color: var(--fv-tx-strong); }

/* !important is load-bearing: it overrides the inline padding-left the
   library writes on init and on every country change. */
.iti > input[type="tel"] {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  padding-inline: 14px !important;
}
.iti > input[type="tel"]:focus { box-shadow: none; }

.iti__dropdown-content {
  background: var(--fv-char-1);
  color: var(--fv-tx-strong);
  border: 1px solid var(--fv-line);
  border-radius: var(--fvr-sm);
  box-shadow: var(--fvs-sh);
}
.iti__search-input {
  background: var(--fv-field);
  color: var(--fv-tx-strong);
  border: none;
  border-block-end: 1px solid var(--fv-line);
  padding: 10px 12px;
}
.iti__search-input::placeholder { color: var(--fv-dim); }
.iti__country.iti__highlight { background: rgba(201, 164, 76, .14); }
.iti__dial-code { color: var(--fv-muted); }

#phone { direction: ltr; text-align: left; }

.phone-error {
  display: none;
  margin-block-start: 6px;
  font-size: .78rem;
  line-height: 1.6;
  color: #f2878c;
}
.phone-error.on { display: block; }

#submit-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--fvr-sm);
  background: var(--fv-grad);
  color: var(--fv-ink);
  font-family: var(--fvf-body);
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: .02em;
  margin-block-start: 4px;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 12px 30px -14px rgba(201, 164, 76, .8);
}
#submit-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(201, 164, 76, .7); }
.form-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--fv-muted);
  margin-block-start: 14px;
}
.form-tip svg { width: 16px; height: 16px; color: var(--fv-gold); flex-shrink: 0; }

.form-card .trust { margin-block-start: 22px; border-block-start: 1px solid var(--fv-line); }
.trust-item { display: flex; align-items: center; gap: 13px; padding-block: 14px; border-block-end: 1px solid var(--fv-line); }
.trust-item:last-child { border-block-end: none; }
.trust-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--fv-gold-ghost);
  border: 1px solid var(--fv-gold-line);
}
.trust-ico svg { width: 18px; height: 18px; color: var(--fv-gold-hi); }
.trust-item b { display: block; font-weight: 700; font-size: .94rem; color: var(--fv-tx-strong); line-height: 1.4; }
.trust-item span { font-size: .78rem; color: var(--fv-muted); }

/* ============================================================
   VOICES (text testimonials)
   ============================================================ */
.voices-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.voice {
  display: flex;
  flex-direction: column;
  border-radius: var(--fvr-lg);
  border: 1px solid var(--fv-line);
  background: linear-gradient(180deg, var(--fv-glass-2), var(--fv-glass));
  padding: 30px 28px;
  transition: transform .3s, border-color .3s;
  position: relative;
  overflow: hidden;
}
.voice:hover { transform: translateY(-5px); border-color: var(--fv-gold-line); }
.voice::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fv-gold), transparent);
  opacity: .7;
}
.voice-mark { width: 34px; height: 34px; color: var(--fv-gold); opacity: .45; margin-block-end: 14px; }
.voice-mark svg { width: 100%; height: 100%; }
.voice .stars { margin-block-end: 14px; }
.voice-qt {
  font-family: var(--fvf-disp);
  font-size: 1.06rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--fv-tx-strong);
  flex: 1;
  margin-block-end: 20px;
}
.voice-who { display: flex; align-items: center; gap: 13px; padding-block-start: 18px; border-block-start: 1px solid var(--fv-line-soft); }
.voice-av {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-weight: 800; font-size: .82rem;
  color: var(--fv-ink); background: var(--fv-grad);
}
.voice-name { font-weight: 700; font-size: .96rem; color: var(--fv-tx-strong); }
.voice-loc { font-family: var(--fvf-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fv-gold-hi); }

.stars { display: flex; gap: 3px; }
.stars svg { width: 15px; height: 15px; color: var(--fv-gold); }

/* ============================================================
   SPLIT (image + copy)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-radius: var(--fvr-xl);
  border: 1px solid var(--fv-line);
  overflow: hidden;
}
.split-media { position: relative; min-height: 380px; overflow: hidden; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 40%, rgba(15, 16, 18, .45));
}
.split-copy {
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(201, 164, 76, .07), transparent 60%),
    linear-gradient(160deg, var(--fv-char-2), var(--fv-char-1));
}
.split-copy .eyebrow { margin-block-end: 14px; }
.split-copy h2 { margin-block-end: 18px; }
.split-copy p { color: var(--fv-muted); margin-block-end: 14px; }
.split-copy p:last-child { margin-block-end: 0; }
.split.reverse .split-media { order: 2; }

/* ============================================================
   CAPABILITY CARDS
   ============================================================ */
.caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cap {
  border-radius: var(--fvr-lg);
  border: 1px solid var(--fv-line);
  background: linear-gradient(180deg, var(--fv-glass-2), var(--fv-glass));
  padding: 30px 28px;
  transition: transform .3s, border-color .3s, background .3s;
  position: relative;
  overflow: hidden;
}
.cap:hover { transform: translateY(-4px); border-color: var(--fv-gold-line); }
.cap.feat {
  background: var(--fv-feat-surface);
  border-color: var(--fv-gold-line);
  box-shadow: var(--fvs-feat);
}
.cap-ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid var(--fv-gold-line);
  background: var(--fv-gold-ghost);
  margin-block-end: 18px;
}
.cap-ico svg { width: 22px; height: 22px; color: var(--fv-gold-hi); }
.cap h3 { font-size: 1.08rem; font-weight: 700; margin-block-end: 10px; }
.cap p { color: var(--fv-muted); font-size: .92rem; line-height: 1.8; }

/* ============================================================
   METRICS
   ============================================================ */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--fv-line);
  border-radius: var(--fvr-lg);
  overflow: hidden;
  background: linear-gradient(180deg, var(--fv-glass-2), var(--fv-glass));
}
.metric { padding: 34px 26px; text-align: center; border-inline-end: 1px solid var(--fv-line-soft); }
.metric:last-child { border-inline-end: none; }
.metric .val {
  font-family: var(--fvf-disp);
  font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 1.1;
  color: var(--fv-tx-strong);
  white-space: nowrap;
}
.metric .val b { font-weight: 400; color: var(--fv-gold-hi); }
.metric .lbl { font-family: var(--fvf-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fv-dim); margin-block-start: 10px; }

.agg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-block-end: 30px; }
.agg { border: 1px solid var(--fv-line); border-radius: var(--fvr-md); padding: 26px 24px; background: var(--fv-glass); }
.agg .v { font-family: var(--fvf-disp); font-weight: 400; font-size: 2.2rem; line-height: 1.1; color: var(--fv-tx-strong); }
.agg .v b { color: var(--fv-gold-hi); font-weight: 400; }
.agg .l { color: var(--fv-muted); font-size: .88rem; margin-block-start: 8px; }

/* ============================================================
   STEPS
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.step {
  border: 1px solid var(--fv-line);
  border-radius: var(--fvr-lg);
  padding: 28px 26px;
  background: linear-gradient(180deg, var(--fv-glass-2), var(--fv-glass));
  position: relative;
}
.step-dot {
  position: absolute;
  top: 28px;
  inset-inline-end: 26px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--fv-grad); box-shadow: var(--fvs-glow);
}
.step .num { font-family: var(--fvf-mono); font-size: .72rem; letter-spacing: .12em; color: var(--fv-gold-hi); }
.step h3 { font-size: 1.04rem; font-weight: 700; margin-block: 8px; }
.step p { color: var(--fv-muted); font-size: .9rem; }

/* ============================================================
   RESULTS CAROUSEL
   ============================================================ */
.carousel { position: relative; }
.carousel-viewport { overflow: hidden; }
.carousel-track { display: flex; gap: 20px; transition: transform .5s cubic-bezier(.6, .05, .1, 1); }
.gcard {
  flex: 0 0 calc((100% - 40px) / 3);
  border-radius: var(--fvr-lg);
  border: 1px solid var(--fv-line);
  background: linear-gradient(180deg, var(--fv-glass-2), var(--fv-glass));
  padding: 30px 28px;
  transition: border-color .3s, transform .3s;
}
.gcard.mid {
  background: var(--fv-feat-surface);
  border-color: var(--fv-gold-line);
  box-shadow: var(--fvs-feat);
}
.gcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-end: 16px; }
.gbadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fvf-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fv-gold-hi);
  padding: 5px 10px;
  border-radius: var(--fvr-pill);
  border: 1px solid var(--fv-gold-line);
  background: var(--fv-gold-ghost);
}
.gbadge svg { width: 11px; height: 11px; }
.gcard .tagline { font-family: var(--fvf-mono); font-size: .64rem; color: var(--fv-dim); }
.gsum { font-family: var(--fvf-disp); font-weight: 400; font-size: 2.4rem; line-height: 1.2; color: var(--fv-tx-strong); }
.gper { font-family: var(--fvf-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fv-gold-hi); margin-block-end: 14px; }
.gspark { width: 100%; height: 40px; display: block; margin-block-end: 16px; }
.gspark .ln { fill: none; stroke: var(--fv-gold-hi); stroke-width: 2; }
.gqt { font-size: .92rem; color: var(--fv-muted); line-height: 1.8; margin-block-end: 18px; }
.gwho { display: flex; align-items: center; gap: 12px; }
.gav {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-weight: 800; font-size: .8rem;
  color: var(--fv-ink); background: var(--fv-grad);
}
.gnm { font-weight: 700; font-size: .94rem; color: var(--fv-tx-strong); }
.gcity { font-family: var(--fvf-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fv-dim); }

.gcta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-block-start: 20px;
  padding: 12px 20px;
  font-weight: 700; font-size: .9rem;
  border-radius: var(--fvr-pill);
  border: 1px solid var(--fv-gold-line);
  background: var(--fv-gold-ghost);
  color: var(--fv-gold-hi);
  transition: transform .25s, box-shadow .25s, background .25s, color .25s;
}
.gcta svg { width: 15px; height: 15px; }
.gcta:hover { transform: translateY(-2px); background: var(--fv-grad); color: var(--fv-ink); box-shadow: var(--fvs-glow); }
.gcard.mid .gcta { background: var(--fv-grad); color: var(--fv-ink); border-color: transparent; box-shadow: var(--fvs-glow); }

.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-block-start: 32px; }
.cbtn {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fv-glass-2);
  border: 1px solid var(--fv-line);
  color: var(--fv-tx-strong);
  transition: .25s;
}
.cbtn:hover { border-color: var(--fv-gold); background: var(--fv-gold-ghost); }
.cbtn svg { width: 18px; height: 18px; }
.dots { display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fv-line); border: none; transition: .25s; padding: 0; }
.dot.on { width: 26px; border-radius: var(--fvr-pill); background: var(--fv-grad); }

.disclaimer { font-size: .78rem; color: var(--fv-dim); text-align: center; max-width: 780px; margin-inline: auto; margin-block-start: 30px; line-height: 1.8; }

/* ============================================================
   CTA
   ============================================================ */
.cta-band {
  border-radius: var(--fvr-xl);
  padding: 68px 40px;
  text-align: center;
  background:
    linear-gradient(90deg, transparent 6%, rgba(230, 200, 120, .75) 50%, transparent 94%) top / 100% 1px no-repeat,
    radial-gradient(70% 120% at 50% 0%, rgba(201, 164, 76, .18), transparent 62%),
    linear-gradient(180deg, #1f1d19 0%, #161619 60%, #121315 100%);
  border: 1px solid var(--fv-gold-line);
  box-shadow: var(--fvs-feat);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(201, 164, 76, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 164, 76, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(80% 90% at 50% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(80% 90% at 50% 0%, #000, transparent 70%);
}
.cta-band > * { position: relative; }
.cta-band h2 { margin-block-end: 14px; }
.cta-band p { color: var(--fv-muted); margin-inline: auto; margin-block-end: 28px; max-width: 50ch; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-block-start: 1px solid var(--fv-line-soft); padding-block-start: 68px; margin-block-start: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.footer-brand .brand { margin-block-end: 16px; }
.footer-brand p { color: var(--fv-muted); font-size: .9rem; max-width: 40ch; }
.footer-col h2 { font-family: var(--fvf-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fv-dim); font-weight: 500; margin-block-end: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: var(--fv-muted); font-size: .9rem; transition: color .2s; }
.footer-col a:hover { color: var(--fv-gold-hi); }
.footer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-block-start: 1px solid var(--fv-line-soft);
  margin-block-start: 48px; padding-block: 22px;
  font-size: .82rem; color: var(--fv-dim);
}
.footer-bar .lnk { display: flex; gap: 20px; }
.footer-bar a:hover { color: var(--fv-gold-hi); }

.risk { background: rgba(236, 231, 220, .012); border-block-start: 1px solid var(--fv-line-soft); padding-block: 22px; }
.risk p { font-size: .76rem; color: var(--fv-dim); line-height: 1.8; max-width: var(--fv-mw); }

/* ============================================================
   REVEAL
   ============================================================ */
.fv-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.fv-reveal.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fv-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .dot-live { animation: none; }
}

/* ============================================================
   INNER PAGE COMPONENTS
   ============================================================ */
.page-head { text-align: center; max-width: 800px; margin-inline: auto; padding-block: 20px 8px; }
.page-head .eyebrow { display: block; margin-block-end: 14px; }
.page-head p { color: var(--fv-muted); margin-inline: auto; margin-block-start: 16px; max-width: 62ch; }
.page-head .updated { font-family: var(--fvf-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fv-dim); margin-block-start: 14px; }

/* Capped at the photos' intrinsic 800px width so the image fills the frame
   exactly — a wider frame would upscale it. The frame is height-agnostic, so
   any photo ratio sits in it without being stretched. */
.media-frame { max-width: 800px; margin-inline: auto; border-radius: var(--fvr-xl); overflow: hidden; border: 1px solid var(--fv-line); box-shadow: var(--fvs-sh); position: relative; }
.media-frame img { width: 100%; height: auto; }
.media-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, transparent 50%, rgba(15, 16, 18, .35)); pointer-events: none; }

.city-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.city-chip { font-family: var(--fvf-mono); font-size: .74rem; letter-spacing: .08em; color: var(--fv-muted); padding: 9px 20px; border-radius: var(--fvr-pill); border: 1px solid var(--fv-gold-line); background: var(--fv-glass); }

.cap.team { text-align: center; }
.cap.team .role { font-family: var(--fvf-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fv-gold-hi); display: block; margin-block-end: 10px; }
.cap.team .av {
  width: 58px; height: 58px; border-radius: 50%;
  margin-inline: auto; margin-block-end: 16px;
  display: grid; place-items: center;
  font-weight: 800; color: var(--fv-ink);
  background: var(--fv-grad); box-shadow: var(--fvs-glow);
}

.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.post { display: flex; flex-direction: column; border-radius: var(--fvr-lg); border: 1px solid var(--fv-line); background: linear-gradient(180deg, var(--fv-glass-2), var(--fv-glass)); padding: 28px 26px; transition: transform .3s, border-color .3s; }
.post:hover { transform: translateY(-4px); border-color: var(--fv-gold-line); }
.post-tag { align-self: flex-start; font-family: var(--fvf-mono); font-size: .6rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--fvr-pill); margin-block-end: 14px; border: 1px solid var(--fv-line); }
.post-tag.ai { color: #e2ddd2; background: rgba(236, 231, 220, .07); border-color: rgba(236, 231, 220, .2); }
.post-tag.crypto { color: var(--fv-gold-hi); background: var(--fv-gold-ghost); border-color: var(--fv-gold-line); }
.post h3 { font-size: 1.08rem; font-weight: 700; line-height: 1.5; margin-block-end: 10px; }
.post p { color: var(--fv-muted); font-size: .92rem; line-height: 1.8; flex: 1; }
.post-meta { display: flex; justify-content: space-between; gap: 12px; margin-block-start: 16px; padding-block-start: 14px; border-block-start: 1px solid var(--fv-line-soft); font-family: var(--fvf-mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fv-dim); }

/* FAQ accordion — WAI-ARIA APG pattern: the button lives INSIDE the heading,
   so the document outline and the disclosure semantics are both correct. */
.faq-list { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--fv-line); border-radius: var(--fvr-md); background: linear-gradient(180deg, var(--fv-glass-2), var(--fv-glass)); overflow: hidden; transition: border-color .3s; }
.faq-item:hover, .faq-item.open { border-color: var(--fv-gold-line); }
.faq-h { margin: 0; font-size: inherit; font-weight: inherit; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%;
  padding: 20px 24px;
  background: none; border: none;
  font-family: var(--fvf-body); font-size: 1rem; font-weight: 600;
  color: var(--fv-tx-strong);
  text-align: start;
  line-height: 1.6;
}
.faq-q:focus-visible { outline: 2px solid var(--fv-gold-hi); outline-offset: -3px; }
.faq-q svg { width: 18px; height: 18px; color: var(--fv-gold-hi); flex-shrink: 0; transition: transform .3s; }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-item.open .faq-a { max-height: 520px; }
.faq-a p { padding: 0 24px 20px; color: var(--fv-muted); font-size: .94rem; line-height: 1.9; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.info-col { display: flex; flex-direction: column; gap: 20px; }
.info-media { border-radius: var(--fvr-lg); overflow: hidden; border: 1px solid var(--fv-line); }
.info-row { display: flex; align-items: flex-start; gap: 14px; }
.info-ico { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--fv-gold-line); background: var(--fv-gold-ghost); }
.info-ico svg { width: 20px; height: 20px; color: var(--fv-gold-hi); }
.info-row h3 { font-size: 1rem; font-weight: 700; margin-block-end: 3px; }
.info-row p { color: var(--fv-muted); font-size: .9rem; }
.info-row a { color: var(--fv-gold-hi); transition: color .2s; }
.info-row a:hover, .legal a:hover { color: var(--fv-tx-strong); }
.info-col > p { color: var(--fv-muted); }
.reg-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.reg-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--fv-muted); font-size: .95rem; }
.reg-list svg { width: 20px; height: 20px; color: var(--fv-gold-hi); flex-shrink: 0; margin-block-start: 4px; }

/* No overflow:hidden here — it would clip the country dropdown, which is
   absolutely positioned inside the form. */
.form-card.solo {
  background: var(--fv-feat-surface);
  border: 1px solid var(--fv-gold-line);
  border-radius: var(--fvr-lg);
  box-shadow: var(--fvs-feat);
  padding: 36px 34px;
  position: relative;
}

.legal { max-width: 860px; margin-inline: auto; }
.legal h2 { font-size: 1.2rem; font-weight: 700; color: var(--fv-tx-strong); margin-block: 34px 12px; }
.legal h2:first-child { margin-block-start: 0; }
.legal p { color: var(--fv-muted); font-size: .95rem; line-height: 1.95; margin-block-end: 12px; }
.legal ul { color: var(--fv-muted); font-size: .95rem; line-height: 1.95; margin-block-end: 12px; margin-inline-start: 20px; }
.legal a { color: var(--fv-gold-hi); }

/* standalone centred notice (thanks / 404) */
.notice { max-width: 640px; margin-inline: auto; text-align: center; padding-block: 60px; }
.notice .ico { width: 76px; height: 76px; margin-inline: auto; margin-block-end: 26px; display: grid; place-items: center; border-radius: 22px; background: var(--fv-gold-ghost); border: 1px solid var(--fv-gold-line); }
.notice .ico svg { width: 34px; height: 34px; color: var(--fv-gold-hi); }
.notice p { color: var(--fv-muted); margin-block-start: 16px; }
.notice .btn { margin-block-start: 30px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .menu { gap: 18px; }
}

@media (max-width: 960px) {
  .hero-panel { grid-template-columns: 1fr; }
  .hero-left { padding: 44px 34px; }
  .hero-right { border-inline-start: none; border-block-start: 1px solid var(--fv-gold-line); }
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .split-media { min-height: 260px; }
  .voices-row { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
  .caps-grid { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2) { border-inline-end: none; }
  .metric:nth-child(1), .metric:nth-child(2) { border-block-end: 1px solid var(--fv-line-soft); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .agg-row { grid-template-columns: 1fr; }
  .gcard { flex: 0 0 calc((100% - 20px) / 2); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .blog-grid { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
}

/* The eight-item menu does not fit beside the brand below ~900px. */
@media (max-width: 900px) {
  :root { --fv-nav-h: 66px; }
  .menu { display: none; }
  .burger { display: flex; }
  .nav.open .menu {
    display: flex;
    position: absolute;
    top: var(--fv-nav-h);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px 24px 24px;
    background: rgba(15, 16, 18, .97);
    backdrop-filter: blur(18px);
    border-block-end: 1px solid var(--fv-gold-line);
  }
  .nav.open .menu a { padding-block: 10px; font-size: .96rem; }
  .nav.open .menu a.on:not(.btn) { box-shadow: none; color: var(--fv-gold-hi); }
  .nav.open .menu .btn { justify-content: center; margin-block-start: 8px; }
}

@media (max-width: 680px) {
  .sect { padding-block: 60px; }
  .hero-left { padding: 38px 24px; }
  .hero-right { padding: 30px 24px; }
  .caps-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; }
  .metric { border-inline-end: none; border-block-end: 1px solid var(--fv-line-soft); }
  .metric:last-child { border-block-end: none; }
  .metric:nth-child(2) { border-block-end: 1px solid var(--fv-line-soft); }
  .steps { grid-template-columns: 1fr; }
  .gcard { flex: 0 0 100%; }
  .split-copy { padding: 38px 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bar { flex-direction: column; gap: 12px; text-align: center; }
  .cta-band { padding: 50px 24px; }
  .form-card.solo { padding: 30px 22px; }
  .stat-row { flex-wrap: wrap; }
}

@media (max-width: 380px) {
  .wrap, .nav-in { padding-inline: 16px; }
  .brand-name { letter-spacing: .14em; }
}