/* ============================================================
   Quelburn — "Charcoal & Gilt"
   Design system for the pt-BR site (LTR only).

   Two surfaces carry the whole system:
     · the charcoal canvas      (body, cards, splits)
     · the gilded graphite inset (form panels, featured cards, CTA bands):
       a lifted graphite plate edged in gold, lit from the top hairline.
   Gold is the only chroma. The navy from the logo is never used as a
   surface; it only appears inside the mark itself.
   ============================================================ */

:root {
  /* base — charcoal */
  --qb-bg: #0d0e10;
  --qb-bg-2: #131417;
  --qb-char-1: #1a1c20;
  --qb-char-2: #23262b;
  --qb-graphite: #2e3238;

  /* accent — brushed gold, sampled from the mark */
  --qb-gold: #c9a24a;
  --qb-gold-hi: #e4c77e;
  --qb-gold-deep: #8c6b26;
  --qb-gold-grad: linear-gradient(135deg, #f1dc9c 0%, #c9a24a 45%, #7d5d1f 100%);
  --qb-gold-btn: linear-gradient(180deg, #e9cf86 0%, #c9a24a 52%, #a9832f 100%);
  --qb-on-gold: #17130a;

  /* gilded graphite inset — the featured surface */
  --qb-gilt-surface: linear-gradient(155deg, #272a30 0%, #1c1e22 55%, #16181b 100%);
  --qb-gilt-line: rgba(201, 162, 74, .38);
  --qb-ink: #f4f1ea;
  --qb-ink-soft: #b9bcc3;

  /* text on the charcoal canvas */
  --qb-tx: rgba(236, 232, 224, .76);
  --qb-tx-strong: #f4f1ea;
  --qb-muted: #a9adb5;
  /* Tertiary labels sit on lifted cards (#1a1c20-ish), not on --qb-bg:
     #8a8f98 measures 5.2:1 there, comfortably over AA. */
  --qb-dim: #8a8f98;

  /* lines / glass */
  --qb-line: rgba(244, 241, 234, .09);
  --qb-line-soft: rgba(244, 241, 234, .05);
  --qb-line-gold: rgba(201, 162, 74, .28);
  --qb-glass: rgba(244, 241, 234, .022);
  --qb-glass-2: rgba(244, 241, 234, .042);

  /* fields */
  --qb-field: #0f1012;
  --qb-field-line: rgba(244, 241, 234, .14);

  /* radii */
  --qbr-sm: 8px;
  --qbr-md: 14px;
  --qbr-lg: 20px;
  --qbr-xl: 28px;
  --qbr-pill: 9999px;

  /* shadow / glow */
  --qbs-sh: 0 30px 80px -30px rgba(0, 0, 0, .9);
  --qbs-glow: 0 0 40px -10px rgba(201, 162, 74, .5);
  --qbs-gilt: 0 26px 64px -28px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(228, 199, 126, .32);

  /* fonts */
  /* Playfair rather than Cormorant: Cormorant's circumflex renders as a
     detached double caret on Windows, and "ê" is everywhere in pt-BR. */
  --qbf-disp: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --qbf-ui: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --qbf-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --qbf-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  --qb-mw: 1240px;
  --qb-nav-h: 76px;
}

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

html { scroll-behavior: smooth; }

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

/* ---- charcoal night with a warm gilt bloom ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(110% 70% at 50% -12%, rgba(201, 162, 74, .11), transparent 55%),
    radial-gradient(80% 60% at 100% 6%, rgba(46, 50, 56, .55), transparent 62%),
    linear-gradient(180deg, #141518 0%, #0d0e10 42%, #0a0b0c 100%);
}
/* a soft beam of warm light the gilt insets are lit by */
body::after {
  content: "";
  position: fixed;
  top: -10%;
  left: 50%;
  width: 44vw;
  height: 120%;
  transform: translateX(-50%) rotate(5deg);
  z-index: -2;
  background: linear-gradient(180deg, rgba(228, 199, 126, .06), rgba(228, 199, 126, .012) 32%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .045;
  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");
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
/* <picture> only swaps the source; layout belongs to the <img> inside it */
picture { display: contents; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: var(--qb-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; inset-block-start: -60px; inset-inline-start: 16px;
  z-index: 2000;
  padding: 10px 18px;
  border-radius: 0 0 var(--qbr-sm) var(--qbr-sm);
  background: var(--qb-gold); color: var(--qb-on-gold);
  font-family: var(--qbf-ui); font-weight: 700; font-size: .9rem;
  transition: inset-block-start .2s;
}
.skip-link:focus { inset-block-start: 0; }
:focus-visible { outline: 2px solid var(--qb-gold-hi); outline-offset: 3px; }

/* ---- typography ---- */
h1, h2, h3, h4 {
  font-family: var(--qbf-ui);
  color: var(--qb-tx-strong);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
}
.display {
  font-family: var(--qbf-disp);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -.005em;
  color: var(--qb-tx-strong);
}
.display b { font-weight: 700; }
.display .hi { font-style: italic; font-weight: 500; color: var(--qb-gold-hi); }
h1.display { font-size: clamp(2.2rem, 4.4vw, 3.5rem); }
h2.display { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }

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

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

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--qbf-ui);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .01em;
  padding: 13px 26px;
  border-radius: var(--qbr-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(--qb-gold-btn);
  color: var(--qb-on-gold);
  font-weight: 700;
  border-color: rgba(241, 220, 156, .55);
  box-shadow: var(--qbs-glow), inset 0 1px 0 rgba(255, 246, 214, .55);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 56px -6px rgba(201, 162, 74, .65), inset 0 1px 0 rgba(255, 246, 214, .55); }
.btn-ghost {
  background: var(--qb-glass-2);
  color: var(--qb-tx-strong);
  border-color: var(--qb-line);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--qb-gold); background: rgba(201, 162, 74, .1); }

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

/* The gilded graphite inset is the single featured surface, applied by
   .hero-right, .form-card.solo, .cap.feat, .gcard.mid, .cta-band and
   .calc-results__final: a lifted plate, gold-edged, lit from the top. */

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(--qb-muted); margin-block-start: 14px; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--qb-nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgba(13, 14, 16, .74);
  backdrop-filter: blur(18px);
  border-block-end: 1px solid var(--qb-line-soft);
}
.nav::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 74, .35), transparent);
}
.nav-in {
  width: 100%;
  max-width: var(--qb-mw);
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Brand: one word, one colour. Uppercase with wide tracking echoes the
   wordmark in the logo artwork. Never split "Quelburn" into two tones. */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--qbf-ui);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--qb-tx-strong);
}
.brand img { width: 32px; height: 32px; flex-shrink: 0; }
.brand-name { white-space: nowrap; }

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

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

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  border-block: 1px solid var(--qb-line-soft);
  background: rgba(244, 241, 234, .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(--qbf-mono);
  font-size: .74rem;
  color: var(--qb-muted);
}
.tk b { color: var(--qb-tx-strong); font-weight: 500; }
.tk .px { color: var(--qb-tx); }
.tk .up { color: #6fcf97; }
.tk .down { color: #f08a8a; }
.dot-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--qb-gold);
  box-shadow: 0 0 10px var(--qb-gold);
  animation: qbPulse 1.8s ease-in-out infinite;
}
@keyframes qbPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ============================================================
   HERO — charcoal | gilded graphite inset
   ============================================================ */
.hero { padding-block: 56px 60px; }
.hero-panel {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border-radius: var(--qbr-xl);
  overflow: hidden;
  border: 1px solid var(--qb-line);
  box-shadow: var(--qbs-sh);
  position: relative;
}
.hero-left {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(201, 162, 74, .1), transparent 58%),
    linear-gradient(150deg, var(--qb-char-2), var(--qb-char-1) 70%, #141518);
  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(--qbf-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--qb-gold-hi);
  padding: 7px 14px;
  border: 1px solid var(--qb-line-gold);
  border-radius: var(--qbr-pill);
  background: rgba(201, 162, 74, .08);
  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(--qb-line-soft);
}
.stat-row:last-child { border-block-end: 1px solid var(--qb-line-soft); }
.stat-row .val {
  font-family: var(--qbf-ui);
  font-weight: 300;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  color: var(--qb-tx-strong);
  font-variant-numeric: tabular-nums;
}
.stat-row .lbl {
  font-family: var(--qbf-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--qb-dim);
  text-align: end;
}

/* hero right — the gilded form inset */
.hero-right {
  background: var(--qb-gilt-surface);
  color: var(--qb-ink);
  padding: 40px 40px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  border-inline-start: 1px solid var(--qb-gilt-line);
  box-shadow: inset 0 1px 0 rgba(228, 199, 126, .3);
}
.hero-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(201, 162, 74, .09) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%);
  pointer-events: none;
}
.hero-right > * { position: relative; }

/* ---- registration form (lives on the gilded inset) ---- */
.form-card h2 { font-family: var(--qbf-disp); font-weight: 600; font-size: 1.5rem; line-height: 1.2; color: var(--qb-ink); }
.form-card .note {
  font-family: var(--qbf-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--qb-gold);
  margin-block: 6px 18px;
}
.reg input[type="text"],
.reg input[type="email"],
.reg input[type="tel"] {
  width: 100%;
  background: var(--qb-field);
  border: 1px solid var(--qb-field-line);
  border-radius: var(--qbr-sm);
  padding: 12px 14px;
  color: var(--qb-tx-strong);
  font-family: var(--qbf-body);
  font-size: .92rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.reg input::placeholder { color: rgba(236, 232, 224, .42); }
.reg input:focus { border-color: var(--qb-gold); box-shadow: 0 0 0 3px rgba(201, 162, 74, .2); }
/* Autofill would otherwise paint a pale yellow field onto the dark form. */
.reg input:-webkit-autofill,
.reg input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--qb-tx-strong);
  box-shadow: 0 0 0 1000px var(--qb-field) inset;
  caret-color: var(--qb-tx-strong);
}
.reg form > div { margin-block-end: 10px; }

/* ---- phone field (intl-tel-input v25) ----------------------------------
   The library absolutely positions the country selector over the input and
   pads the input from JS, a width it measures before its own async
   stylesheet has applied. Laying the widget out as a flex row, with the
   selector as a real flex item, removes the dependency on that measured
   padding. The field chrome moves from the input onto .iti so selector and
   digits read as one control.

   Theme variables go on bare .iti so they also reach the fullscreen country
   popup (a separate .iti--container appended to <body> on mobile). The
   chrome is scoped to .reg .iti so it never lands on that popup. */
.iti {
  --iti-border-color: rgba(244, 241, 234, .14);
  --iti-dialcode-color: #a9adb5;
  --iti-dropdown-bg: #1a1c20;
  --iti-hover-color: rgba(201, 162, 74, .12);
  --iti-arrow-color: #c9a24a;
  --iti-search-icon-color: #8a8f98;
}
.reg .iti {
  width: 100%;
  display: flex;
  align-items: stretch;
  background: var(--qb-field);
  border: 1px solid var(--qb-field-line);
  border-radius: var(--qbr-sm);
  transition: border-color .2s, box-shadow .2s;
}
.reg .iti:focus-within { border-color: var(--qb-gold); box-shadow: 0 0 0 3px rgba(201, 162, 74, .2); }

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

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

.iti__dropdown-content { color: var(--qb-tx-strong); border-color: var(--qb-line-gold); }
.iti__search-input {
  background: transparent;
  color: var(--qb-tx-strong);
  border: none;
  border-block-end: 1px solid var(--qb-line);
}
.iti__search-input::placeholder { color: var(--qb-dim); }

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

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

#submit-btn {
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(241, 220, 156, .55);
  border-radius: var(--qbr-sm);
  background: var(--qb-gold-btn);
  color: var(--qb-on-gold);
  font-family: var(--qbf-ui);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin-block-start: 4px;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 12px 28px -14px rgba(201, 162, 74, .7), inset 0 1px 0 rgba(255, 246, 214, .55);
}
#submit-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(201, 162, 74, .6), inset 0 1px 0 rgba(255, 246, 214, .55); }
.form-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--qb-ink-soft);
  margin-block-start: 14px;
}
.form-tip svg { width: 16px; height: 16px; color: var(--qb-gold); flex-shrink: 0; }

.form-card .trust { margin-block-start: 22px; border-block-start: 1px solid var(--qb-line); }
.trust-item { display: flex; align-items: center; gap: 13px; padding-block: 14px; border-block-end: 1px solid var(--qb-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: rgba(201, 162, 74, .1);
  border: 1px solid var(--qb-line-gold);
}
.trust-ico svg { width: 18px; height: 18px; color: var(--qb-gold-hi); }
.trust-item b { display: block; font-family: var(--qbf-ui); font-weight: 600; font-size: .94rem; color: var(--qb-ink); line-height: 1.4; }
.trust-item span { font-size: .78rem; color: var(--qb-ink-soft); }

/* ============================================================
   VOICES (text testimonials)
   ============================================================ */
.voices-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.voice {
  display: flex;
  flex-direction: column;
  border-radius: var(--qbr-lg);
  border: 1px solid var(--qb-line);
  background: linear-gradient(180deg, var(--qb-glass-2), var(--qb-glass));
  padding: 30px 28px;
  transition: transform .3s, border-color .3s;
  position: relative;
  overflow: hidden;
}
.voice:hover { transform: translateY(-5px); border-color: var(--qb-gilt-line); }
.voice::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--qb-gold-grad);
  opacity: .55;
}
.voice-mark { width: 34px; height: 34px; color: var(--qb-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(--qbf-disp);
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--qb-tx-strong);
  font-weight: 500;
  font-style: italic;
  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(--qb-line-soft); }
.voice-av {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--qbf-ui); font-weight: 700; font-size: .82rem; letter-spacing: .04em;
  color: var(--qb-on-gold); background: var(--qb-gold-grad);
}
.voice-name { font-family: var(--qbf-ui); font-weight: 600; font-size: .96rem; color: var(--qb-tx-strong); }
.voice-loc { font-family: var(--qbf-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--qb-gold); }

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

/* ============================================================
   SPLIT (image + copy)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-radius: var(--qbr-xl);
  overflow: hidden;
  border: 1px solid var(--qb-line);
}
.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 55%, rgba(13, 14, 16, .45));
  pointer-events: none;
}
.split-copy {
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(160deg, var(--qb-char-2), var(--qb-char-1));
}
.split-copy .eyebrow { margin-block-end: 14px; }
.split-copy h2 { margin-block-end: 18px; }
.split-copy p { color: var(--qb-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(--qbr-lg);
  border: 1px solid var(--qb-line);
  background: linear-gradient(180deg, var(--qb-glass-2), var(--qb-glass));
  padding: 30px 28px;
  transition: transform .3s, border-color .3s, background .3s;
  position: relative;
  overflow: hidden;
}
.cap:hover { transform: translateY(-4px); border-color: var(--qb-gilt-line); }
.cap.feat {
  background: var(--qb-gilt-surface);
  border-color: var(--qb-gilt-line);
  box-shadow: var(--qbs-gilt);
}
.cap-ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid var(--qb-line-gold);
  background: rgba(201, 162, 74, .08);
  margin-block-end: 18px;
}
.cap.feat .cap-ico { background: var(--qb-gold-grad); border-color: transparent; }
.cap-ico svg { width: 22px; height: 22px; color: var(--qb-gold-hi); }
.cap.feat .cap-ico svg { color: var(--qb-on-gold); }
.cap h3 { font-size: 1.08rem; font-weight: 600; margin-block-end: 10px; }
.cap p { color: var(--qb-muted); font-size: .92rem; line-height: 1.8; }
.cap.feat h3 { color: var(--qb-ink); }
.cap.feat p { color: var(--qb-ink-soft); }

/* ============================================================
   METRICS
   ============================================================ */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--qb-line);
  border-radius: var(--qbr-lg);
  overflow: hidden;
  background: linear-gradient(180deg, var(--qb-glass-2), var(--qb-glass));
}
.metric { padding: 34px 26px; text-align: center; border-inline-end: 1px solid var(--qb-line-soft); }
.metric:last-child { border-inline-end: none; }
.metric .val {
  font-family: var(--qbf-ui);
  font-weight: 300;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  color: var(--qb-tx-strong);
  font-variant-numeric: tabular-nums;
}
.metric .val b { font-weight: 300; color: var(--qb-gold-hi); }
.metric .lbl { font-family: var(--qbf-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--qb-dim); margin-block-start: 8px; }

.agg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-block-end: 30px; }
.agg { border: 1px solid var(--qb-line); border-radius: var(--qbr-md); padding: 26px 24px; background: var(--qb-glass); }
.agg .v { font-family: var(--qbf-ui); font-weight: 300; font-size: 2.1rem; color: var(--qb-tx-strong); font-variant-numeric: tabular-nums; }
.agg .v b { color: var(--qb-gold-hi); font-weight: 300; }
.agg .l { color: var(--qb-muted); font-size: .88rem; margin-block-start: 6px; }

/* ============================================================
   STEPS
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.step {
  border: 1px solid var(--qb-line);
  border-radius: var(--qbr-lg);
  padding: 28px 26px;
  background: linear-gradient(180deg, var(--qb-glass-2), var(--qb-glass));
  position: relative;
}
.step-dot {
  position: absolute;
  inset-block-start: 28px;
  inset-inline-end: 26px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--qb-gold-grad); box-shadow: var(--qbs-glow);
}
.step .num { font-family: var(--qbf-disp); font-size: 1.7rem; font-weight: 600; line-height: 1; color: var(--qb-gold); font-variant-numeric: lining-nums; }
.step h3 { font-size: 1.04rem; font-weight: 600; margin-block: 12px 8px; }
.step p { color: var(--qb-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(--qbr-lg);
  border: 1px solid var(--qb-line);
  background: linear-gradient(180deg, var(--qb-glass-2), var(--qb-glass));
  padding: 30px 28px;
  transition: border-color .3s, transform .3s;
}
.gcard.mid {
  background: var(--qb-gilt-surface);
  border-color: var(--qb-gilt-line);
  box-shadow: var(--qbs-gilt);
}
.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(--qbf-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--qb-gold-hi);
  padding: 5px 10px;
  border-radius: var(--qbr-pill);
  border: 1px solid var(--qb-line-gold);
  background: rgba(201, 162, 74, .08);
}
.gbadge svg { width: 11px; height: 11px; }
.gcard .tagline { font-family: var(--qbf-mono); font-size: .64rem; color: var(--qb-dim); }
.gcard.mid .tagline { color: var(--qb-ink-soft); }
.gsum { font-family: var(--qbf-ui); font-weight: 300; font-size: 2.4rem; color: var(--qb-tx-strong); font-variant-numeric: tabular-nums; }
.gper { font-family: var(--qbf-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--qb-gold); margin-block-end: 14px; }
.gspark { width: 100%; height: 40px; display: block; margin-block-end: 16px; }
.gspark .ln { fill: none; stroke: var(--qb-gold); stroke-width: 2; }
.gcard.mid .gspark .ln { stroke: var(--qb-gold-hi); }
.gqt { font-size: .92rem; color: var(--qb-muted); line-height: 1.8; margin-block-end: 18px; }
.gcard.mid .gqt { color: var(--qb-ink-soft); }
.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-family: var(--qbf-ui); font-weight: 700; font-size: .8rem; letter-spacing: .04em;
  color: var(--qb-on-gold); background: var(--qb-gold-grad);
}
.gnm { font-family: var(--qbf-ui); font-weight: 600; font-size: .94rem; color: var(--qb-tx-strong); }
.gcity { font-family: var(--qbf-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--qb-dim); }
.gcard.mid .gcity { color: var(--qb-ink-soft); }

.gcta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-block-start: 20px;
  padding: 12px 20px;
  font-family: var(--qbf-ui); font-weight: 600; font-size: .88rem;
  border-radius: var(--qbr-pill);
  border: 1px solid var(--qb-line-gold);
  background: rgba(201, 162, 74, .08);
  color: var(--qb-gold-hi);
  transition: transform .25s, box-shadow .25s, background .25s;
}
.gcta svg { width: 15px; height: 15px; }
.gcta:hover { transform: translateY(-2px); background: rgba(201, 162, 74, .16); }
.gcard.mid .gcta { background: var(--qb-gold-btn); color: var(--qb-on-gold); border-color: rgba(241, 220, 156, .55); box-shadow: var(--qbs-glow); }
.gcard.mid .gcta:hover { box-shadow: 0 0 50px -6px rgba(201, 162, 74, .65); }

.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(--qb-glass-2);
  border: 1px solid var(--qb-line);
  color: var(--qb-tx-strong);
  transition: .25s;
}
.cbtn:hover { border-color: var(--qb-gold); background: rgba(201, 162, 74, .12); }
.cbtn svg { width: 18px; height: 18px; }
.dots { display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--qb-line); border: none; transition: .25s; padding: 0; }
.dot.on { width: 26px; border-radius: var(--qbr-pill); background: var(--qb-gold-grad); }

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

/* ============================================================
   CTA
   ============================================================ */
.cta-band {
  border-radius: var(--qbr-xl);
  padding: 64px 40px;
  text-align: center;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(201, 162, 74, .14), transparent 60%),
    var(--qb-gilt-surface);
  border: 1px solid var(--qb-gilt-line);
  box-shadow: var(--qbs-gilt);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(201, 162, 74, .1) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(90% 90% at 50% 0%, #000, transparent 70%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--qb-ink); margin-block-end: 14px; }
.cta-band p { color: var(--qb-ink-soft); margin-inline: auto; margin-block-end: 28px; max-width: 50ch; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-block-start: 1px solid var(--qb-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(--qb-muted); font-size: .9rem; max-width: 40ch; }
.footer-col h2 { font-family: var(--qbf-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--qb-gold); 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(--qb-muted); font-size: .9rem; transition: color .2s; }
.footer-col a:hover { color: var(--qb-gold-hi); }
.footer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-block-start: 1px solid var(--qb-line-soft);
  margin-block-start: 48px; padding-block: 22px;
  font-size: .82rem; color: var(--qb-dim);
}
.footer-bar .lnk { display: flex; gap: 20px; }
.footer-bar a:hover { color: var(--qb-gold-hi); }

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

/* ============================================================
   REVEAL
   ============================================================ */
.qb-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.qb-reveal.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .qb-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(--qb-muted); margin-inline: auto; margin-block-start: 16px; max-width: 62ch; }
.page-head .updated { font-family: var(--qbf-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--qb-dim); margin-block-start: 14px; }

/* Capped at the photos' intrinsic 800px width so the image fills the frame
   exactly. The frame is height-agnostic, which is what lets the 800x447
   performance photo sit beside the 800x800 ones without either stretching. */
.media-frame { max-width: 800px; margin-inline: auto; border-radius: var(--qbr-xl); overflow: hidden; border: 1px solid var(--qb-line); box-shadow: var(--qbs-sh); position: relative; }
.media-frame img { width: 100%; height: auto; }
.media-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, transparent 60%, rgba(13, 14, 16, .35)); pointer-events: none; }

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

.cap.team { text-align: center; }
.cap.team .role { font-family: var(--qbf-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--qb-gold); 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-family: var(--qbf-ui); font-weight: 700; letter-spacing: .04em; color: var(--qb-on-gold);
  background: var(--qb-gold-grad); box-shadow: var(--qbs-glow);
}

.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.post { display: flex; flex-direction: column; border-radius: var(--qbr-lg); border: 1px solid var(--qb-line); background: linear-gradient(180deg, var(--qb-glass-2), var(--qb-glass)); padding: 28px 26px; transition: transform .3s, border-color .3s; }
.post:hover { transform: translateY(-4px); border-color: var(--qb-gilt-line); }
.post-tag { align-self: flex-start; font-family: var(--qbf-mono); font-size: .6rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--qbr-pill); margin-block-end: 14px; border: 1px solid var(--qb-line); }
.post-tag.ai { color: var(--qb-tx-strong); background: rgba(244, 241, 234, .06); border-color: rgba(244, 241, 234, .2); }
.post-tag.crypto { color: var(--qb-gold-hi); background: rgba(201, 162, 74, .1); border-color: var(--qb-line-gold); }
.post h3 { font-family: var(--qbf-disp); font-size: 1.22rem; font-weight: 600; line-height: 1.35; margin-block-end: 10px; }
.post p { color: var(--qb-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(--qb-line-soft); font-family: var(--qbf-mono); font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; color: var(--qb-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(--qb-line); border-radius: var(--qbr-md); background: linear-gradient(180deg, var(--qb-glass-2), var(--qb-glass)); overflow: hidden; transition: border-color .3s; }
.faq-item:hover, .faq-item.open { border-color: var(--qb-gilt-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(--qbf-ui); font-size: 1rem; font-weight: 600;
  color: var(--qb-tx-strong);
  text-align: start;
  line-height: 1.6;
}
.faq-q:focus-visible { outline: 2px solid var(--qb-gold-hi); outline-offset: -3px; }
.faq-q svg { width: 18px; height: 18px; color: var(--qb-gold); 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(--qb-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(--qbr-lg); overflow: hidden; border: 1px solid var(--qb-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(--qb-line-gold); background: rgba(201, 162, 74, .08); }
.info-ico svg { width: 20px; height: 20px; color: var(--qb-gold-hi); }
.info-row h3 { font-size: 1rem; font-weight: 600; margin-block-end: 3px; }
.info-row p { color: var(--qb-muted); font-size: .9rem; }
.info-col > p { color: var(--qb-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(--qb-muted); font-size: .95rem; }
.reg-list svg { width: 20px; height: 20px; color: var(--qb-gold); flex-shrink: 0; margin-block-start: 4px; }

/* No overflow:hidden here — it would clip the country dropdown, which is
   absolutely positioned inside the form. The dot layer takes the corner
   radius itself instead. */
.form-card.solo {
  background: var(--qb-gilt-surface);
  border: 1px solid var(--qb-gilt-line);
  border-radius: var(--qbr-lg);
  box-shadow: var(--qbs-gilt);
  color: var(--qb-ink);
  padding: 36px 34px;
  position: relative;
}
.form-card.solo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(201, 162, 74, .09) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%);
  pointer-events: none;
}
.form-card.solo > * { position: relative; }

.legal { max-width: 860px; margin-inline: auto; }
.legal h2 { font-family: var(--qbf-disp); font-size: 1.36rem; font-weight: 600; line-height: 1.3; color: var(--qb-tx-strong); margin-block: 36px 12px; }
.legal h2:first-child { margin-block-start: 0; }
.legal p { color: var(--qb-muted); font-size: .95rem; line-height: 1.95; margin-block-end: 12px; }
.legal ul { color: var(--qb-muted); font-size: .95rem; line-height: 1.95; margin-block-end: 12px; margin-inline-start: 20px; }
.legal a { color: var(--qb-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: rgba(201, 162, 74, .08); border: 1px solid var(--qb-gilt-line); }
.notice .ico svg { width: 34px; height: 34px; color: var(--qb-gold-hi); }
.notice p { color: var(--qb-muted); margin-block-start: 16px; }
.notice .btn { margin-block-start: 30px; }

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

@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(--qb-gilt-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(--qb-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 no longer fits beside the brand below ~900px. */
@media (max-width: 900px) {
  :root { --qb-nav-h: 66px; }
  .menu { display: none; }
  .burger { display: flex; }
  .nav.open .menu {
    display: flex;
    position: absolute;
    inset-block-start: var(--qb-nav-h);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px 24px 24px;
    background: rgba(13, 14, 16, .97);
    backdrop-filter: blur(18px);
    border-block-end: 1px solid var(--qb-line-gold);
  }
  .nav.open .menu a { padding-block: 10px; font-size: .96rem; }
  .nav.open .menu a.on:not(.btn) { box-shadow: none; color: var(--qb-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(--qb-line-soft); }
  .metric:last-child { border-block-end: none; }
  .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: 48px 24px; }
  .form-card.solo { padding: 30px 22px; }
  .brand { letter-spacing: .18em; }
}