/* ============================================================
   Cimovex — "Obsidian + Paper"
   Single-direction (es / LTR) design system.

   Two surfaces carry the whole system:
     · the black canvas   (body, cards, splits), patterned with the
       hexagonal motif of the logo mark
     · the white paper inset (form panels, featured cards, CTA bands)
   White is the accent. Colour is reserved for meaning: green for gains,
   red for losses and errors, amber for ratings.
   ============================================================ */

:root {
  /* base — obsidian */
  --cx-bg: #050505;
  --cx-bg-2: #0b0b0b;
  --cx-coal-1: #0e0e0e;
  --cx-coal-2: #161616;

  /* accent — white, as on the logo */
  --cx-acc: #ffffff;
  --cx-acc-hi: #ffffff;
  --cx-grad: linear-gradient(135deg, #ffffff 0%, #c9c9c9 55%, #6b6b6b 100%);
  --cx-silver: linear-gradient(100deg, #ffffff 0%, #d9d9d9 45%, #9c9c9c 100%);

  /* paper — inset surfaces and the ink that sits on them */
  --cx-paper: #f4f4f4;
  --cx-paper-2: #e4e4e4;
  --cx-ink: #0a0a0a;
  --cx-ink-soft: #4a4a4a;
  --cx-paper-line: rgba(10, 10, 10, .12);
  --cx-paper-surface: linear-gradient(155deg, #ffffff, #e9e9e9);

  /* semantic colour — the only chroma on the page */
  --cx-up: #22c55e;
  --cx-up-deep: #15803d;      /* legible as text on paper */
  --cx-down: #f05252;
  --cx-down-deep: #b91c1c;
  --cx-star: #f5b942;
  --cx-star-deep: #b45309;

  /* text on the black canvas */
  --cx-tx: rgba(255, 255, 255, .74);
  --cx-tx-strong: #f5f5f5;
  --cx-muted: #a6a6a6;
  /* Tertiary labels sit on the lifted glass cards; #8a8a8a holds 5:1 there. */
  --cx-dim: #8a8a8a;

  /* lines / glass */
  --cx-line: rgba(255, 255, 255, .10);
  --cx-line-soft: rgba(255, 255, 255, .055);
  --cx-glass: rgba(255, 255, 255, .028);
  --cx-glass-2: rgba(255, 255, 255, .048);

  /* hexagon hairline pattern (56x100 tile), light and dark variants */
  --cx-hex-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E");
  --cx-hex-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%230a0a0a' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E");

  /* radii */
  --cxr-sm: 10px;
  --cxr-md: 16px;
  --cxr-lg: 26px;
  --cxr-xl: 34px;
  --cxr-pill: 9999px;

  /* shadow / glow */
  --cxs-sh: 0 30px 80px -30px rgba(0, 0, 0, .9);
  --cxs-glow: 0 0 40px -10px rgba(255, 255, 255, .38);
  --cxs-paper: 0 24px 60px -26px rgba(0, 0, 0, .85);

  /* fonts — Montserrat echoes the geometric wordmark */
  --cxf-disp: 'Montserrat', 'Segoe UI', sans-serif;
  --cxf-body: 'Inter', 'Segoe UI', sans-serif;
  --cxf-mono: 'JetBrains Mono', ui-monospace, monospace;

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

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

html { scroll-behavior: smooth; }

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

::selection { background: #fff; color: #000; }

/* ---- obsidian canvas ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, .07), transparent 55%),
    radial-gradient(90% 60% at 100% 8%, rgba(255, 255, 255, .035), transparent 60%),
    linear-gradient(180deg, #0b0b0b 0%, #050505 40%, #030303 100%);
}
/* hexagon pattern — fades out toward the lower part of the viewport */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: var(--cx-hex-light);
  background-size: 56px 100px;
  -webkit-mask-image: radial-gradient(130% 90% at 50% 0%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 85%);
  mask-image: radial-gradient(130% 90% at 50% 0%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 85%);
}

.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; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cx-acc); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: var(--cx-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(--cxr-sm) var(--cxr-sm);
  background: var(--cx-acc); color: var(--cx-ink);
  font-family: var(--cxf-disp); font-weight: 600; font-size: .9rem;
  transition: inset-block-start .2s;
}
.skip-link:focus { inset-block-start: 0; }

/* ---- typography ---- */
h1, h2, h3, h4 {
  font-family: var(--cxf-disp);
  color: var(--cx-tx-strong);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
}
.display {
  font-family: var(--cxf-disp);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--cx-tx-strong);
}
.display b { font-weight: 700; }
/* Emphasis is a brushed-silver fill rather than a hue: white stays the accent. */
.display .hi {
  font-weight: 400;
  background: var(--cx-silver);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
h1.display { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2.display { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }

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

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

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--cxf-disp);
  font-weight: 600;
  font-size: .92rem;
  padding: 13px 26px;
  border-radius: var(--cxr-pill);
  border: 1px solid transparent;
  transition: transform .25s, box-shadow .25s, background .25s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--cx-acc); color: var(--cx-ink); box-shadow: var(--cxs-glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 56px -6px rgba(255, 255, 255, .55); }
.btn-ghost {
  background: var(--cx-glass-2);
  color: var(--cx-tx-strong);
  border-color: var(--cx-line);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--cx-acc); background: rgba(255, 255, 255, .1); }

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

/* The paper inset is the single featured surface, applied by .hero-right,
   .form-card.solo, .cap.feat, .gcard.mid, .cta-band and .calc-results__final.
   It inverts the canvas — black ink on white — instead of tinting it. */

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

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--cx-nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgba(5, 5, 5, .72);
  backdrop-filter: blur(18px);
  border-block-end: 1px solid var(--cx-line-soft);
}
.nav-in {
  width: 100%;
  max-width: var(--cx-mw);
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Brand: one word, one colour, one weight. Never split "Cimovex". */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--cxf-disp);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cx-tx-strong);
}
/* The mark is taller than it is wide: fix the height, let the width follow. */
.brand img { height: 32px; width: auto; flex-shrink: 0; }
.brand-name { white-space: nowrap; }

.menu { display: flex; align-items: center; gap: 26px; list-style: none; }
.menu a { font-size: .88rem; color: var(--cx-muted); transition: color .2s; }
.menu a:hover, .menu a.on { color: var(--cx-tx-strong); }
.menu .btn { padding: 9px 20px; font-size: .84rem; }
.menu a.btn-primary { color: var(--cx-ink); }

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

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  border-block: 1px solid var(--cx-line-soft);
  background: rgba(255, 255, 255, .012);
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track { display: inline-flex; gap: 46px; padding-block: 11px; will-change: transform; }
/* JetBrains Mono's dotted zero reads as an "8" at label sizes, so every small
   label that carries figures (ticker, slider ranges, dates, step numbers,
   taglines) uses Inter's tabular digits instead of the mono face. */
.tk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--cxf-body);
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  color: var(--cx-muted);
}
.tk b { color: var(--cx-tx-strong); font-weight: 500; }
.tk .px { color: var(--cx-tx); }
.tk .up { color: var(--cx-up); }
.tk .down { color: var(--cx-down); }
.dot-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cx-up);
  box-shadow: 0 0 10px var(--cx-up);
  animation: cxPulse 1.8s ease-in-out infinite;
}
@keyframes cxPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ============================================================
   HERO — coal panel | paper inset
   ============================================================ */
.hero { padding-block: 56px 60px; }
.hero-panel {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border-radius: var(--cxr-xl);
  overflow: hidden;
  border: 1px solid var(--cx-line);
  box-shadow: var(--cxs-sh);
  position: relative;
}
.hero-left {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, .07), transparent 60%),
    linear-gradient(150deg, var(--cx-coal-2), var(--cx-coal-1) 70%, #080808);
  padding: 54px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.hero-left::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cx-hex-light);
  background-size: 56px 100px;
  -webkit-mask-image: radial-gradient(110% 90% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(110% 90% at 100% 0%, #000, transparent 70%);
  pointer-events: none;
}
.hero-left > * { position: relative; }
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--cxf-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cx-acc-hi);
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: var(--cxr-pill);
  background: rgba(255, 255, 255, .06);
  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(--cx-line-soft);
}
.stat-row:last-child { border-block-end: 1px solid var(--cx-line-soft); }
.stat-row .val {
  font-family: var(--cxf-disp);
  font-weight: 300;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--cx-tx-strong);
}
.stat-row .lbl {
  font-family: var(--cxf-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cx-dim);
  text-align: end;
}

/* hero right — the paper form inset */
.hero-right {
  background: var(--cx-paper-surface);
  color: var(--cx-ink);
  padding: 40px 40px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.hero-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cx-hex-dark);
  background-size: 56px 100px;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%);
}
.hero-right > * { position: relative; }

/* ---- registration form (lives on the paper inset) ---- */
.form-card h2 { font-weight: 700; font-size: 1.28rem; color: var(--cx-ink); }
.form-card .note {
  font-family: var(--cxf-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cx-ink-soft);
  margin-block: 5px 16px;
}
.reg input[type="text"],
.reg input[type="email"],
.reg input[type="tel"] {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(10, 10, 10, .2);
  border-radius: var(--cxr-sm);
  padding: 12px 14px;
  color: var(--cx-ink);
  font-family: var(--cxf-body);
  font-size: .92rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.reg input::placeholder { color: rgba(10, 10, 10, .5); }
.reg input:focus { border-color: var(--cx-ink); box-shadow: 0 0 0 3px rgba(10, 10, 10, .12); }
.reg form > div { margin-block-end: 10px; }
/* ---- phone field (intl-tel-input v25) ----------------------------------
   The widget is laid out as a flex row with the country selector as a real
   item, so nothing depends on the padding-left the library measures in JS —
   its stylesheet loads async, and a width measured before it applies is never
   recalculated. The field chrome lives on .iti so selector and digits read
   as one control. */
.iti {
  width: 100%;
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid rgba(10, 10, 10, .2);
  border-radius: var(--cxr-sm);
  transition: border-color .2s, box-shadow .2s;
}
.iti:focus-within { border-color: var(--cx-ink); box-shadow: 0 0 0 3px rgba(10, 10, 10, .12); }

.iti__country-container {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  border-inline-end: 1px solid rgba(10, 10, 10, .12);
}

/* !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 { color: #111; }

.phone-error {
  display: none;
  margin-block-start: 6px;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--cx-down-deep);
}
.phone-error.on { display: block; }

#submit-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--cxr-sm);
  background: var(--cx-ink);
  color: #ffffff;
  font-family: var(--cxf-disp);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .01em;
  margin-block-start: 4px;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .7);
}
#submit-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -8px rgba(0, 0, 0, .55); }
.form-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--cx-ink-soft);
  margin-block-start: 14px;
}
.form-tip svg { width: 16px; height: 16px; color: var(--cx-up-deep); flex-shrink: 0; }

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

.stars { display: flex; gap: 3px; }
.stars svg { width: 15px; height: 15px; color: var(--cx-star); }
/* Bright amber thins out on paper — the deep tone keeps the rating legible. */
.cap.feat .stars svg,
.gcard.mid .stars svg { color: var(--cx-star-deep); }

/* ============================================================
   SPLIT (image + copy)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-radius: var(--cxr-xl);
  overflow: hidden;
  border: 1px solid var(--cx-line-soft);
}
.split-media { position: relative; min-height: 380px; overflow: hidden; }
/* object-fit: cover crops to the frame — it never distorts the photo. */
.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(0, 0, 0, .35));
}
.split-copy {
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(160deg, var(--cx-coal-2), var(--cx-coal-1));
}
.split-copy .eyebrow { margin-block-end: 14px; }
.split-copy h2 { margin-block-end: 18px; }
.split-copy p { color: var(--cx-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(--cxr-lg);
  border: 1px solid var(--cx-line);
  background: linear-gradient(180deg, var(--cx-glass-2), var(--cx-glass));
  padding: 30px 28px;
  transition: transform .3s, border-color .3s, background .3s;
  position: relative;
  overflow: hidden;
}
.cap:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .32); }
.cap.feat {
  background: var(--cx-paper-surface);
  border-color: rgba(255, 255, 255, .6);
  box-shadow: var(--cxs-paper);
}
.cap-ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  border: 1px solid var(--cx-line);
  background: rgba(255, 255, 255, .07);
  margin-block-end: 18px;
}
.cap.feat .cap-ico { background: rgba(10, 10, 10, .06); border-color: rgba(10, 10, 10, .14); }
.cap-ico svg { width: 22px; height: 22px; color: var(--cx-acc-hi); }
.cap.feat .cap-ico svg { color: var(--cx-ink); }
.cap h3 { font-size: 1.08rem; font-weight: 600; margin-block-end: 10px; }
.cap p { color: var(--cx-muted); font-size: .92rem; line-height: 1.75; }
.cap.feat h3 { color: var(--cx-ink); }
.cap.feat p { color: var(--cx-ink-soft); }

/* ============================================================
   METRICS
   ============================================================ */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--cx-line);
  border-radius: var(--cxr-lg);
  overflow: hidden;
  background: linear-gradient(180deg, var(--cx-glass-2), var(--cx-glass));
}
.metric { padding: 34px 26px; text-align: center; border-inline-end: 1px solid var(--cx-line-soft); }
.metric:last-child { border-inline-end: none; }
.metric .val {
  font-family: var(--cxf-disp);
  font-weight: 300;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  color: var(--cx-tx-strong);
}
.metric .val b { font-weight: 300; color: var(--cx-muted); }
.metric .lbl { font-family: var(--cxf-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cx-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(--cx-line); border-radius: var(--cxr-md); padding: 26px 24px; background: var(--cx-glass); }
.agg .v { font-family: var(--cxf-disp); font-weight: 300; font-size: 2.2rem; color: var(--cx-tx-strong); }
.agg .v b { color: var(--cx-muted); font-weight: 300; }
.agg .l { color: var(--cx-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(--cx-line);
  border-radius: var(--cxr-lg);
  padding: 28px 26px;
  background: linear-gradient(180deg, var(--cx-glass-2), var(--cx-glass));
  position: relative;
}
.step-dot {
  position: absolute;
  inset-block-start: 28px;
  inset-inline-end: 26px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cx-grad); box-shadow: var(--cxs-glow);
}
.step .num { font-family: var(--cxf-body); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .74rem; letter-spacing: .1em; color: var(--cx-acc-hi); }
.step h3 { font-size: 1.04rem; font-weight: 600; margin-block: 8px; }
.step p { color: var(--cx-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(--cxr-lg);
  border: 1px solid var(--cx-line);
  background: linear-gradient(180deg, var(--cx-glass-2), var(--cx-glass));
  padding: 30px 28px;
  transition: border-color .3s, transform .3s;
}
.gcard.mid {
  background: var(--cx-paper-surface);
  border-color: rgba(255, 255, 255, .6);
  box-shadow: var(--cxs-paper);
}
.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(--cxf-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cx-acc-hi);
  padding: 5px 10px;
  border-radius: var(--cxr-pill);
  border: 1px solid var(--cx-line);
  background: rgba(255, 255, 255, .07);
}
.gcard.mid .gbadge { color: var(--cx-ink); border-color: rgba(10, 10, 10, .2); background: rgba(10, 10, 10, .05); }
.gbadge svg { width: 11px; height: 11px; }
.gcard .tagline { font-family: var(--cxf-body); font-variant-numeric: tabular-nums; font-size: .72rem; color: var(--cx-dim); }
.gcard.mid .tagline { color: var(--cx-ink-soft); }
/* the headline figure is a gain — it carries the green */
.gsum { font-family: var(--cxf-disp); font-weight: 300; font-size: 2.5rem; color: var(--cx-up); }
.gcard.mid .gsum { color: var(--cx-up-deep); font-weight: 400; }
.gper { font-family: var(--cxf-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-tx-strong); margin-block-end: 14px; }
.gcard.mid .gper { color: var(--cx-ink); }
.gspark { width: 100%; height: 40px; display: block; margin-block-end: 16px; }
.gspark .ln { fill: none; stroke: var(--cx-up); stroke-width: 2; }
.gcard.mid .gspark .ln { stroke: var(--cx-up-deep); }
.gqt { font-size: .92rem; color: var(--cx-muted); line-height: 1.75; margin-block-end: 18px; }
.gcard.mid .gqt { color: var(--cx-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(--cxf-disp); font-weight: 700; font-size: .82rem;
  color: var(--cx-ink); background: var(--cx-grad);
}
.gcard.mid .gav { background: var(--cx-ink); color: #ffffff; }
.gnm { font-family: var(--cxf-disp); font-weight: 600; font-size: .94rem; color: var(--cx-tx-strong); }
.gcard.mid .gnm { color: var(--cx-ink); }
.gcity { font-family: var(--cxf-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cx-dim); }
.gcard.mid .gcity { color: var(--cx-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(--cxf-disp); font-weight: 600; font-size: .9rem;
  border-radius: var(--cxr-pill);
  border: 1px solid transparent;
  background: var(--cx-acc);
  color: var(--cx-ink);
  box-shadow: var(--cxs-glow);
  transition: transform .25s, box-shadow .25s;
}
.gcta svg { width: 15px; height: 15px; }
.gcta:hover { transform: translateY(-2px); box-shadow: 0 0 50px -6px rgba(255, 255, 255, .6); }
.gcard.mid .gcta { background: var(--cx-ink); color: #ffffff; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .6); }
.gcard.mid .gcta:hover { box-shadow: 0 14px 32px -10px rgba(0, 0, 0, .7); }

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

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

/* ============================================================
   CTA
   ============================================================ */
.cta-band {
  border-radius: var(--cxr-xl);
  padding: 64px 40px;
  text-align: center;
  background: var(--cx-paper-surface);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: var(--cxs-paper);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cx-hex-dark);
  background-size: 56px 100px;
  -webkit-mask-image: radial-gradient(90% 90% at 50% 0%, #000, transparent 70%);
  mask-image: radial-gradient(90% 90% at 50% 0%, #000, transparent 70%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--cx-ink); margin-block-end: 14px; }
.cta-band .display .hi { background: linear-gradient(100deg, #0a0a0a 0%, #3a3a3a 50%, #6a6a6a 100%); -webkit-background-clip: text; background-clip: text; }
.cta-band p { color: var(--cx-ink-soft); margin-inline: auto; margin-block-end: 28px; max-width: 48ch; }
.cta-band .btn-primary { background: var(--cx-ink); color: #ffffff; box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .8); }
.cta-band .btn-primary:hover { box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .85); }

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

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

/* ============================================================
   REVEAL
   ============================================================ */
.cx-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.cx-reveal.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cx-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: 780px; margin-inline: auto; padding-block: 20px 8px; }
.page-head .eyebrow { display: block; margin-block-end: 14px; }
.page-head p { color: var(--cx-muted); margin-inline: auto; margin-block-start: 16px; max-width: 62ch; }
.page-head .updated { font-family: var(--cxf-body); font-variant-numeric: tabular-nums; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cx-dim); margin-block-start: 14px; }

/* Capped at the photos' intrinsic 800px width so the image fills the frame
   exactly. The frame is height-agnostic: width:100% + height:auto keeps every
   photo at its own aspect ratio. */
.media-frame { max-width: 800px; margin-inline: auto; border-radius: var(--cxr-xl); overflow: hidden; border: 1px solid var(--cx-line); box-shadow: var(--cxs-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(0, 0, 0, .3)); pointer-events: none; }

.city-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.city-chip { font-family: var(--cxf-mono); font-size: .74rem; letter-spacing: .06em; color: var(--cx-tx-strong); padding: 9px 20px; border-radius: var(--cxr-pill); border: 1px solid var(--cx-line); background: var(--cx-glass-2); }

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

.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.post { display: flex; flex-direction: column; border-radius: var(--cxr-lg); border: 1px solid var(--cx-line); background: linear-gradient(180deg, var(--cx-glass-2), var(--cx-glass)); padding: 28px 26px; transition: transform .3s, border-color .3s; }
.post:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .32); }
.post-tag { align-self: flex-start; font-family: var(--cxf-mono); font-size: .6rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--cxr-pill); margin-block-end: 14px; border: 1px solid var(--cx-line); }
.post-tag.ai { color: var(--cx-ink); background: rgba(255, 255, 255, .88); border-color: transparent; }
.post-tag.crypto { color: var(--cx-tx-strong); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .26); }
.post h3 { font-size: 1.08rem; font-weight: 600; line-height: 1.45; margin-block-end: 10px; }
.post p { color: var(--cx-muted); font-size: .92rem; line-height: 1.75; 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(--cx-line-soft); font-family: var(--cxf-body); font-variant-numeric: tabular-nums; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-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: 800px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--cx-line); border-radius: var(--cxr-md); background: linear-gradient(180deg, var(--cx-glass-2), var(--cx-glass)); overflow: hidden; transition: border-color .3s; }
.faq-item:hover { border-color: rgba(255, 255, 255, .3); }
.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(--cxf-disp); font-size: 1rem; font-weight: 500;
  color: var(--cx-tx-strong);
  text-align: start;
  line-height: 1.5;
}
.faq-q:focus-visible { outline: 2px solid var(--cx-acc-hi); outline-offset: -3px; }
.faq-q svg { width: 18px; height: 18px; color: var(--cx-acc-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(--cx-muted); font-size: .94rem; line-height: 1.85; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.info-col { display: flex; flex-direction: column; gap: 20px; }
.info-lede { color: var(--cx-muted); }
.info-media { border-radius: var(--cxr-lg); overflow: hidden; border: 1px solid var(--cx-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(--cx-line); background: rgba(255, 255, 255, .07); }
.info-ico svg { width: 20px; height: 20px; color: var(--cx-acc-hi); }
.info-row h3 { font-size: 1rem; font-weight: 600; margin-block-end: 3px; }
.info-row p { color: var(--cx-muted); font-size: .9rem; }
.info-row a:hover { color: var(--cx-acc-hi); }
.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(--cx-muted); font-size: .95rem; }
.reg-list svg { width: 20px; height: 20px; color: var(--cx-up); flex-shrink: 0; margin-block-start: 3px; }

/* No overflow:hidden here — it would clip the country dropdown, which is
   absolutely positioned inside the form. The pattern layer takes the corner
   radius itself instead. */
.form-card.solo {
  background: var(--cx-paper-surface);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--cxr-lg);
  box-shadow: var(--cxs-paper);
  color: var(--cx-ink);
  padding: 36px 34px;
  position: relative;
}
.form-card.solo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--cx-hex-dark);
  background-size: 56px 100px;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%);
}
.form-card.solo > * { position: relative; }

.legal { max-width: 840px; margin-inline: auto; }
.legal h2 { font-family: var(--cxf-disp); font-size: 1.24rem; font-weight: 600; color: var(--cx-tx-strong); margin-block: 34px 12px; }
.legal h2:first-child { margin-block-start: 0; }
.legal p { color: var(--cx-muted); font-size: .95rem; line-height: 1.9; margin-block-end: 12px; }
.legal ul { color: var(--cx-muted); font-size: .95rem; line-height: 1.9; margin-block-end: 12px; margin-inline-start: 20px; }

/* standalone centred notice (thanks / 404) */
.notice { max-width: 620px; 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(255, 255, 255, .07); border: 1px solid var(--cx-line); }
.notice .ico svg { width: 34px; height: 34px; color: var(--cx-acc-hi); }
.notice .ico.ok { background: rgba(34, 197, 94, .1); border-color: rgba(34, 197, 94, .3); }
.notice .ico.ok svg { color: var(--cx-up); }
.notice p { color: var(--cx-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; }
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .split-media { min-height: 260px; }
  .voices-row { grid-template-columns: 1fr; max-width: 520px; 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(--cx-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 Spanish menu runs wider than the reference's English one, so the
   burger takes over before the links can collide with the brand. */
@media (max-width: 900px) {
  :root { --cx-nav-h: 66px; }
  .menu { display: none; }
  .burger { display: flex; }
  .nav.open .menu {
    display: flex;
    position: absolute;
    inset-block-start: var(--cx-nav-h);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px 24px 24px;
    background: rgba(5, 5, 5, .97);
    backdrop-filter: blur(18px);
    border-block-end: 1px solid var(--cx-line);
  }
  .nav.open .menu a { padding-block: 10px; font-size: .96rem; }
  .nav.open .menu .btn { justify-content: center; margin-block-start: 8px; }
}

@media (max-width: 680px) {
  .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(--cx-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; }
}