/* ============================================================
   Gruviona — "Charcoal & Brushed Gold"
   Premium dark corporate design system (en-GB, LTR).
   Authored in CSS logical properties.

   One canvas, one metal:
     · the charcoal canvas      (body, cards, splits)
     · the raised graphite panel (form panels, featured cards, CTA bands),
       lit by a gold hairline and a warm gold wash
   Gold is the only chroma in the system; the ticker's up/down hues are the
   sole exception and carry data, not brand.
   ============================================================ */

:root {
  /* base — charcoal */
  --gv-bg: #0e0f11;
  --gv-bg-2: #141518;
  --gv-graphite-1: #1a1c20;
  --gv-graphite-2: #23262b;
  --gv-graphite-3: #2d3036;

  /* metal — brushed gold sampled from the logo mark */
  --gv-gold: #c9a24a;
  --gv-gold-hi: #e9cf86;
  --gv-gold-deep: #8a6a24;
  --gv-gold-rgb: 201, 162, 74;
  --gv-on-gold: #15130e;      /* text that sits on a gold fill */
  --gv-grad: linear-gradient(135deg, #f3dc8b 0%, #c9a24a 50%, #8a6a24 100%);

  /* raised panel — the featured surface */
  --gv-raised: linear-gradient(155deg, #26241f 0%, #1c1d20 52%, #16171a 100%);
  --gv-raised-line: rgba(var(--gv-gold-rgb), .30);

  /* text on charcoal (all AA on --gv-graphite-1 and darker) */
  --gv-tx: rgba(236, 231, 220, .78);
  --gv-tx-strong: #f3efe6;
  --gv-muted: #a8a397;
  --gv-dim: #8c877c;

  /* lines / glass / fields */
  --gv-line: rgba(236, 231, 220, .10);
  --gv-line-soft: rgba(236, 231, 220, .06);
  --gv-glass: rgba(236, 231, 220, .025);
  --gv-glass-2: rgba(236, 231, 220, .045);
  --gv-field: #101114;
  --gv-field-line: rgba(236, 231, 220, .14);

  /* radii — tighter than a consumer app, it reads as corporate */
  --gvr-sm: 8px;
  --gvr-md: 12px;
  --gvr-lg: 18px;
  --gvr-xl: 24px;
  --gvr-pill: 9999px;

  /* shadow / glow */
  --gvs-sh: 0 30px 80px -30px rgba(0, 0, 0, .85);
  --gvs-glow: 0 0 40px -10px rgba(var(--gv-gold-rgb), .45);
  --gvs-raised: 0 24px 60px -26px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(var(--gv-gold-rgb), .28);

  /* fonts */
  --gvf-disp: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --gvf-body: 'Inter', 'Segoe UI', Arial, sans-serif;
  --gvf-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;

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

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--gvf-body);
  background: var(--gv-bg);
  color: var(--gv-tx);
  line-height: 1.75;
  padding-block-start: var(--gv-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% -12%, rgba(var(--gv-gold-rgb), .09), transparent 55%),
    radial-gradient(90% 60% at 100% 6%, rgba(45, 48, 54, .55), transparent 60%),
    linear-gradient(180deg, #16171a 0%, #0e0f11 42%, #0b0c0d 100%);
}
/* champagne shaft — the light source the raised panels are lit by */
body::after {
  content: "";
  position: fixed;
  top: -10%;
  inset-inline-start: 50%;
  width: 46vw;
  height: 120%;
  transform: translateX(-50%) rotate(4deg);
  z-index: -2;
  background: linear-gradient(180deg, rgba(233, 207, 134, .06), rgba(233, 207, 134, .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");
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: var(--gv-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(--gvr-sm) var(--gvr-sm);
  background: var(--gv-gold); color: var(--gv-on-gold);
  font-family: var(--gvf-disp); font-weight: 600; font-size: .9rem;
  transition: inset-block-start .2s;
}
.skip-link:focus { inset-block-start: 0; }
:focus-visible { outline: 2px solid var(--gv-gold-hi); outline-offset: 3px; }

/* ---- typography ---- */
h1, h2, h3, h4 {
  font-family: var(--gvf-disp);
  color: var(--gv-tx-strong);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.005em;
}
.display {
  font-family: var(--gvf-disp);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--gv-tx-strong);
}
.display b { font-weight: 700; }
/* Emphasis is a shift into brushed gold. */
.display .hi {
  font-weight: 500;
  color: var(--gv-gold-hi);
  background: var(--gv-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
h1.display { font-size: clamp(2.05rem, 4.4vw, 3.3rem); }
h2.display { font-size: clamp(1.65rem, 3.2vw, 2.5rem); }

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

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

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--gvf-disp);
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .02em;
  padding: 13px 26px;
  border-radius: var(--gvr-pill);
  border: 1px solid transparent;
  transition: transform .25s, box-shadow .25s, background-position .4s, border-color .25s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary {
  background: var(--gv-grad);
  background-size: 160% 160%;
  background-position: 0% 50%;
  color: var(--gv-on-gold);
  font-weight: 600;
  box-shadow: var(--gvs-glow);
}
.btn-primary:hover { transform: translateY(-2px); background-position: 100% 50%; box-shadow: 0 0 56px -6px rgba(var(--gv-gold-rgb), .6); }
.btn-ghost {
  background: var(--gv-glass-2);
  color: var(--gv-tx-strong);
  border-color: var(--gv-line);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--gv-gold); background: rgba(var(--gv-gold-rgb), .1); }

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

/* The raised graphite panel is the single featured surface, applied by
   .hero-right, .form-card.solo, .cap.feat, .gcard.mid, .cta-band and
   .calc-results__final. It lifts off the charcoal through a gold hairline and
   a warm wash rather than by switching to a light surface. */

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: inline-flex; align-items: center; gap: 12px; margin-block-end: 14px; }
.sect-head .eyebrow::before,
.sect-head .eyebrow::after { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--gv-gold-rgb), .7)); }
.sect-head .eyebrow::after { transform: scaleX(-1); }
.sect-head p { color: var(--gv-muted); margin-block-start: 14px; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--gv-nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgba(14, 15, 17, .78);
  backdrop-filter: blur(18px);
  border-block-end: 1px solid rgba(var(--gv-gold-rgb), .14);
}
.nav-in {
  width: 100%;
  max-width: var(--gv-mw);
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Brand: mark + uppercase letter-spaced wordmark, echoing the logo lockup.
   Never split "Gruviona" into two tones or weights. */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--gvf-disp);
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gv-gold-hi);
}
.brand img { width: 32px; height: 32px; flex-shrink: 0; }
.brand-name {
  white-space: nowrap;
  background: var(--gv-grad);
  -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: .86rem; color: var(--gv-muted); transition: color .2s; }
.menu a:hover, .menu a.on { color: var(--gv-tx-strong); }
.menu a.on:not(.btn) { box-shadow: inset 0 -1px 0 var(--gv-gold); padding-block-end: 3px; }
.menu .btn { padding: 9px 20px; font-size: .82rem; }
.menu a.btn-primary { color: var(--gv-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(--gv-gold-hi); border-radius: 2px; transition: .3s; }
.nav.open .burger span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav.open .burger span:nth-child(2) { opacity: 0; }
.nav.open .burger span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  border-block: 1px solid rgba(var(--gv-gold-rgb), .12);
  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(--gvf-mono);
  font-size: .74rem;
  color: var(--gv-muted);
}
.tk b { color: var(--gv-tx-strong); font-weight: 500; }
.tk .px { color: var(--gv-tx); }
.tk .up { color: #5fbf8a; }
.tk .down { color: #e07a7a; }
.dot-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gv-gold);
  box-shadow: 0 0 10px var(--gv-gold);
  animation: gvPulse 1.8s ease-in-out infinite;
}
@keyframes gvPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ============================================================
   HERO — graphite | raised form panel
   ============================================================ */
.hero { padding-block: 56px 60px; }
.hero-panel {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border-radius: var(--gvr-xl);
  overflow: hidden;
  border: 1px solid rgba(var(--gv-gold-rgb), .18);
  box-shadow: var(--gvs-sh);
  position: relative;
}
.hero-left {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(var(--gv-gold-rgb), .10), transparent 60%),
    linear-gradient(150deg, var(--gv-graphite-2), var(--gv-graphite-1) 70%, var(--gv-bg-2));
  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(--gvf-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gv-gold-hi);
  padding: 7px 14px;
  border: 1px solid rgba(var(--gv-gold-rgb), .32);
  border-radius: var(--gvr-pill);
  background: rgba(var(--gv-gold-rgb), .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(--gv-line-soft);
}
.stat-row:last-child { border-block-end: 1px solid var(--gv-line-soft); }
.stat-row .val {
  font-family: var(--gvf-disp);
  font-weight: 300;
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  color: var(--gv-tx-strong);
}
.stat-row .lbl {
  font-family: var(--gvf-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gv-dim);
  text-align: end;
}

/* hero right — the raised form panel */
.hero-right {
  background: var(--gv-raised);
  border-inline-start: 1px solid rgba(var(--gv-gold-rgb), .16);
  padding: 40px 40px 34px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.hero-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(var(--gv-gold-rgb), .10) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%);
}
.hero-right > * { position: relative; }

/* ---- registration form (lives on the raised panel) ---- */
.form-card h2 { font-weight: 600; font-size: 1.28rem; color: var(--gv-tx-strong); }
.form-card .note {
  font-family: var(--gvf-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gv-gold-hi);
  margin-block: 5px 16px;
}
.reg input[type="text"],
.reg input[type="email"],
.reg input[type="tel"] {
  width: 100%;
  background: var(--gv-field);
  border: 1px solid var(--gv-field-line);
  border-radius: var(--gvr-sm);
  padding: 12px 14px;
  color: var(--gv-tx-strong);
  font-family: var(--gvf-body);
  font-size: .92rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.reg input::placeholder { color: rgba(236, 231, 220, .44); }
.reg input:focus { border-color: var(--gv-gold); box-shadow: 0 0 0 3px rgba(var(--gv-gold-rgb), .2); }
.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 to clear it. That measured padding races the async
   library stylesheet, so instead the widget is laid out as a flex row where
   the selector is a real item, and the field chrome moves from the input onto
   .iti so the selector and the digits read as one control. Scoped to .reg so
   the full-screen mobile popup (also .iti) keeps the library's own layout. */
.reg .iti {
  --iti-border-color: var(--gv-line);
  --iti-dialcode-color: var(--gv-muted);
  --iti-dropdown-bg: #17181b;
  --iti-arrow-color: var(--gv-gold-hi);
  --iti-hover-color: rgba(var(--gv-gold-rgb), .12);
  width: 100%;
  display: flex;
  align-items: stretch;
  background: var(--gv-field);
  border: 1px solid var(--gv-field-line);
  border-radius: var(--gvr-sm);
  transition: border-color .2s, box-shadow .2s;
}
.reg .iti:focus-within { border-color: var(--gv-gold); box-shadow: 0 0 0 3px rgba(var(--gv-gold-rgb), .2); }

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

/* !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; }

/* Country list — dark to match the panel, in the inline dropdown and in the
   mobile full-screen popup alike. */
.iti__dropdown-content {
  background: #17181b;
  color: var(--gv-tx-strong);
  border: 1px solid rgba(var(--gv-gold-rgb), .22);
  border-radius: var(--gvr-sm);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8);
}
.iti__search-input {
  background: var(--gv-field);
  color: var(--gv-tx-strong);
  border: none;
  border-block-end: 1px solid var(--gv-line);
  padding: 10px 12px;
}
.iti__search-input::placeholder { color: rgba(236, 231, 220, .44); }
.iti__country.iti__highlight { background: rgba(var(--gv-gold-rgb), .14); }
.iti__dial-code { color: var(--gv-muted); }

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

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

#submit-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--gvr-sm);
  background: var(--gv-grad);
  background-size: 160% 160%;
  background-position: 0% 50%;
  color: var(--gv-on-gold);
  font-family: var(--gvf-disp);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .03em;
  margin-block-start: 4px;
  transition: transform .2s, box-shadow .2s, background-position .4s;
  box-shadow: 0 10px 26px -12px rgba(var(--gv-gold-rgb), .7);
}
#submit-btn:hover { transform: translateY(-2px); background-position: 100% 50%; box-shadow: 0 14px 32px -8px rgba(var(--gv-gold-rgb), .55); }
.form-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--gv-muted);
  margin-block-start: 14px;
}
.form-tip svg { width: 16px; height: 16px; color: var(--gv-gold); flex-shrink: 0; }

.form-card .trust { margin-block-start: 22px; border-block-start: 1px solid var(--gv-line); }
.trust-item { display: flex; align-items: center; gap: 13px; padding-block: 14px; border-block-end: 1px solid var(--gv-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(var(--gv-gold-rgb), .1);
  border: 1px solid rgba(var(--gv-gold-rgb), .24);
}
.trust-ico svg { width: 18px; height: 18px; color: var(--gv-gold-hi); }
.trust-item b { display: block; font-family: var(--gvf-disp); font-weight: 600; font-size: .94rem; color: var(--gv-tx-strong); line-height: 1.4; }
.trust-item span { font-size: .76rem; color: var(--gv-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(--gvr-lg);
  border: 1px solid var(--gv-line);
  background: linear-gradient(180deg, var(--gv-glass-2), var(--gv-glass));
  padding: 30px 28px;
  transition: transform .3s, border-color .3s;
  position: relative;
  overflow: hidden;
}
.voice:hover { transform: translateY(-5px); border-color: rgba(var(--gv-gold-rgb), .42); }
.voice::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--gv-grad);
  opacity: .65;
}
.voice-mark { width: 34px; height: 34px; color: var(--gv-gold); opacity: .4; margin-block-end: 14px; }
.voice-mark svg { width: 100%; height: 100%; }
.voice .stars { margin-block-end: 14px; }
.voice-qt {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--gv-tx-strong);
  font-weight: 300;
  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(--gv-line-soft); }
.voice-av {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--gvf-disp); font-weight: 700; font-size: .84rem;
  color: var(--gv-on-gold); background: var(--gv-grad);
}
.voice-name { font-family: var(--gvf-disp); font-weight: 600; font-size: .96rem; color: var(--gv-tx-strong); }
.voice-loc { font-family: var(--gvf-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gv-gold-hi); }

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

/* ============================================================
   SPLIT (image + copy)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-radius: var(--gvr-xl);
  overflow: hidden;
  border: 1px solid var(--gv-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(14, 15, 17, .38));
}
.split-copy {
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(var(--gv-gold-rgb), .06), transparent 60%),
    linear-gradient(160deg, var(--gv-graphite-2), var(--gv-graphite-1));
}
.split-copy .eyebrow { margin-block-end: 14px; }
.split-copy h2 { margin-block-end: 18px; }
.split-copy p { color: var(--gv-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(--gvr-lg);
  border: 1px solid var(--gv-line);
  background: linear-gradient(180deg, var(--gv-glass-2), var(--gv-glass));
  padding: 30px 28px;
  transition: transform .3s, border-color .3s, background .3s;
  position: relative;
  overflow: hidden;
}
.cap:hover { transform: translateY(-4px); border-color: rgba(var(--gv-gold-rgb), .4); }
.cap.feat {
  background: var(--gv-raised);
  border-color: var(--gv-raised-line);
  box-shadow: var(--gvs-raised);
}
.cap-ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(var(--gv-gold-rgb), .22);
  background: rgba(var(--gv-gold-rgb), .08);
  margin-block-end: 18px;
}
.cap.feat .cap-ico { background: var(--gv-grad); border-color: transparent; box-shadow: var(--gvs-glow); }
.cap-ico svg { width: 22px; height: 22px; color: var(--gv-gold-hi); }
.cap.feat .cap-ico svg { color: var(--gv-on-gold); }
.cap h3 { font-size: 1.08rem; font-weight: 600; margin-block-end: 10px; }
.cap p { color: var(--gv-muted); font-size: .92rem; line-height: 1.8; }

/* ============================================================
   METRICS
   ============================================================ */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(var(--gv-gold-rgb), .16);
  border-radius: var(--gvr-lg);
  overflow: hidden;
  background: linear-gradient(180deg, var(--gv-glass-2), var(--gv-glass));
}
.metric { padding: 34px 26px; text-align: center; border-inline-end: 1px solid var(--gv-line-soft); }
.metric:last-child { border-inline-end: none; }
.metric .val {
  font-family: var(--gvf-disp);
  font-weight: 300;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  color: var(--gv-tx-strong);
}
.metric .val b { font-weight: 400; color: var(--gv-gold-hi); }
.metric .lbl { font-family: var(--gvf-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gv-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(--gv-line); border-radius: var(--gvr-md); padding: 26px 24px; background: var(--gv-glass); }
.agg .v { font-family: var(--gvf-disp); font-weight: 300; font-size: 2.2rem; color: var(--gv-tx-strong); }
.agg .v b { color: var(--gv-gold-hi); font-weight: 400; }
.agg .l { color: var(--gv-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(--gv-line);
  border-radius: var(--gvr-lg);
  padding: 28px 26px;
  background: linear-gradient(180deg, var(--gv-glass-2), var(--gv-glass));
  position: relative;
}
.step-dot {
  position: absolute;
  inset-block-start: 28px;
  inset-inline-end: 26px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gv-grad); box-shadow: var(--gvs-glow);
}
.step .num { font-family: var(--gvf-mono); font-size: .72rem; letter-spacing: .1em; color: var(--gv-gold-hi); }
.step h3 { font-size: 1.04rem; font-weight: 600; margin-block: 8px; }
.step p { color: var(--gv-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(--gvr-lg);
  border: 1px solid var(--gv-line);
  background: linear-gradient(180deg, var(--gv-glass-2), var(--gv-glass));
  padding: 30px 28px;
  transition: border-color .3s, transform .3s;
}
.gcard.mid {
  background: var(--gv-raised);
  border-color: var(--gv-raised-line);
  box-shadow: var(--gvs-raised);
}
.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(--gvf-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gv-gold-hi);
  padding: 5px 10px;
  border-radius: var(--gvr-pill);
  border: 1px solid rgba(var(--gv-gold-rgb), .26);
  background: rgba(var(--gv-gold-rgb), .08);
}
.gbadge svg { width: 11px; height: 11px; }
.gcard .tagline { font-family: var(--gvf-mono); font-size: .64rem; color: var(--gv-dim); }
.gsum { font-family: var(--gvf-disp); font-weight: 300; font-size: 2.45rem; color: var(--gv-tx-strong); }
.gper { font-family: var(--gvf-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gv-gold-hi); margin-block-end: 14px; }
.gspark { width: 100%; height: 40px; display: block; margin-block-end: 16px; }
.gspark .ln { fill: none; stroke: var(--gv-gold); stroke-width: 2; }
.gqt { font-size: .92rem; color: var(--gv-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-family: var(--gvf-disp); font-weight: 700; font-size: .82rem;
  color: var(--gv-on-gold); background: var(--gv-grad);
}
.gnm { font-family: var(--gvf-disp); font-weight: 600; font-size: .94rem; color: var(--gv-tx-strong); }
.gcity { font-family: var(--gvf-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gv-dim); }

.gcta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-block-start: 20px;
  padding: 12px 20px;
  font-family: var(--gvf-disp); font-weight: 600; font-size: .88rem;
  border-radius: var(--gvr-pill);
  border: 1px solid rgba(var(--gv-gold-rgb), .45);
  background: transparent;
  color: var(--gv-gold-hi);
  transition: transform .25s, box-shadow .25s, background .25s, color .25s;
}
.gcta svg { width: 15px; height: 15px; }
.gcta:hover { transform: translateY(-2px); background: rgba(var(--gv-gold-rgb), .12); box-shadow: var(--gvs-glow); }
.gcard.mid .gcta { background: var(--gv-grad); color: var(--gv-on-gold); border-color: transparent; box-shadow: var(--gvs-glow); }
.gcard.mid .gcta:hover { box-shadow: 0 0 50px -6px rgba(var(--gv-gold-rgb), .6); }

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

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

/* ============================================================
   CTA
   ============================================================ */
.cta-band {
  border-radius: var(--gvr-xl);
  padding: 64px 40px;
  text-align: center;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(var(--gv-gold-rgb), .16), transparent 65%),
    var(--gv-raised);
  border: 1px solid var(--gv-raised-line);
  box-shadow: var(--gvs-raised);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(var(--gv-gold-rgb), .10) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(90% 90% at 50% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(90% 90% at 50% 0%, #000, transparent 70%);
}
.cta-band > * { position: relative; }
.cta-band h2 { margin-block-end: 14px; }
.cta-band p { color: var(--gv-muted); margin-inline: auto; margin-block-end: 28px; max-width: 50ch; }

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

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

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

/* Capped at the photos' intrinsic 800px width so the image fills the frame
   exactly. The frame is height-agnostic, so any aspect ratio sits in it
   without being stretched. */
.media-frame { max-width: 800px; margin-inline: auto; border-radius: var(--gvr-xl); overflow: hidden; border: 1px solid rgba(var(--gv-gold-rgb), .18); box-shadow: var(--gvs-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(14, 15, 17, .3)); pointer-events: none; }

.city-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.city-chip { font-family: var(--gvf-mono); font-size: .74rem; letter-spacing: .08em; color: var(--gv-tx); padding: 9px 20px; border-radius: var(--gvr-pill); border: 1px solid rgba(var(--gv-gold-rgb), .24); background: rgba(var(--gv-gold-rgb), .05); }

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

.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.post { display: flex; flex-direction: column; border-radius: var(--gvr-lg); border: 1px solid var(--gv-line); background: linear-gradient(180deg, var(--gv-glass-2), var(--gv-glass)); padding: 28px 26px; transition: transform .3s, border-color .3s; }
.post:hover { transform: translateY(-4px); border-color: rgba(var(--gv-gold-rgb), .4); }
.post-tag { align-self: flex-start; font-family: var(--gvf-mono); font-size: .6rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--gvr-pill); margin-block-end: 14px; border: 1px solid var(--gv-line); }
.post-tag.ai { color: var(--gv-tx-strong); background: rgba(236, 231, 220, .07); border-color: rgba(236, 231, 220, .2); }
.post-tag.crypto { color: var(--gv-gold-hi); background: rgba(var(--gv-gold-rgb), .1); border-color: rgba(var(--gv-gold-rgb), .26); }
.post h3 { font-size: 1.08rem; font-weight: 600; line-height: 1.5; margin-block-end: 10px; }
.post p { color: var(--gv-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(--gv-line-soft); font-family: var(--gvf-mono); font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gv-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(--gv-line); border-radius: var(--gvr-md); background: linear-gradient(180deg, var(--gv-glass-2), var(--gv-glass)); overflow: hidden; transition: border-color .3s; }
.faq-item:hover, .faq-item.open { border-color: rgba(var(--gv-gold-rgb), .36); }
.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(--gvf-disp); font-size: 1rem; font-weight: 500;
  color: var(--gv-tx-strong);
  text-align: start;
  line-height: 1.6;
}
.faq-q:focus-visible { outline: 2px solid var(--gv-gold-hi); outline-offset: -3px; }
.faq-q svg { width: 18px; height: 18px; color: var(--gv-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(--gv-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(--gvr-lg); overflow: hidden; border: 1px solid rgba(var(--gv-gold-rgb), .18); }
.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 rgba(var(--gv-gold-rgb), .22); background: rgba(var(--gv-gold-rgb), .08); }
.info-ico svg { width: 20px; height: 20px; color: var(--gv-gold-hi); }
.info-row h3 { font-size: 1rem; font-weight: 600; margin-block-end: 3px; }
.info-row p { color: var(--gv-muted); font-size: .9rem; }
.info-row a:hover { color: var(--gv-gold-hi); }
.info-col > p { color: var(--gv-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(--gv-muted); font-size: .95rem; }
.reg-list svg { width: 20px; height: 20px; color: var(--gv-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. The dot layer takes the corner
   radius itself instead. */
.form-card.solo {
  background: var(--gv-raised);
  border: 1px solid var(--gv-raised-line);
  border-radius: var(--gvr-lg);
  box-shadow: var(--gvs-raised);
  padding: 36px 34px;
  position: relative;
}
.form-card.solo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(var(--gv-gold-rgb), .10) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%);
  -webkit-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(--gvf-disp); font-size: 1.24rem; font-weight: 600; color: var(--gv-tx-strong); margin-block: 34px 12px; }
.legal h2:first-child { margin-block-start: 0; }
.legal p { color: var(--gv-muted); font-size: .95rem; line-height: 1.95; margin-block-end: 12px; }
.legal ul { color: var(--gv-muted); font-size: .95rem; line-height: 1.95; margin-block-end: 12px; margin-inline-start: 20px; }
.legal a { color: var(--gv-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: 20px; background: rgba(var(--gv-gold-rgb), .1); border: 1px solid rgba(var(--gv-gold-rgb), .3); box-shadow: var(--gvs-glow); }
.notice .ico svg { width: 34px; height: 34px; color: var(--gv-gold-hi); }
.notice p { color: var(--gv-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 rgba(var(--gv-gold-rgb), .16); }
  .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(--gv-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; }
}

/* English labels need the room: the menu collapses earlier than it would
   for a shorter nav. */
@media (max-width: 900px) {
  .menu { display: none; }
  .burger { display: flex; }
  .nav.open .menu {
    display: flex;
    position: absolute;
    inset-block-start: var(--gv-nav-h);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px 24px 24px;
    background: rgba(14, 15, 17, .97);
    backdrop-filter: blur(18px);
    border-block-end: 1px solid rgba(var(--gv-gold-rgb), .18);
  }
  .nav.open .menu a { padding-block: 10px; font-size: .96rem; }
  .nav.open .menu a.on:not(.btn) { box-shadow: none; color: var(--gv-gold-hi); }
  .nav.open .menu .btn { justify-content: center; margin-block-start: 8px; }
}

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