/* ============================================================
   Cennvex — "Jet, Copper & Bordeaux"
   Design system for the Polish (pl-PL) site. LTR only, authored in
   logical properties.

   Three materials carry the whole system:
     · jet black      — the canvas (body, cards, splits)
     · bordeaux velvet — the featured surface (form panels, featured
                         cards, CTA bands, the headline calculator figure)
     · copper         — the single accent: type accents, hairlines,
                         icons and the metallic button fill
   Copper is sampled from the logo mark (#b47236 → #b87333).
   ============================================================ */

:root {
  /* canvas — jet black */
  --cx-bg: #0a0a0b;
  --cx-bg-2: #111012;
  --cx-coal-1: #141012;
  --cx-coal-2: #1a1416;

  /* bordeaux — depth and the featured surface */
  --cx-wine-0: #1e070e;
  --cx-wine-1: #2a0a12;
  --cx-wine-2: #3d0f1c;
  --cx-wine-3: #5a1a2c;
  --cx-wine: #6e1a2e;

  /* copper — the only accent chroma */
  --cx-cu: #b87333;
  --cx-cu-hi: #dca06a;     /* copper as TEXT: >= 5.7:1 on every surface */
  --cx-cu-deep: #7d4a20;
  /* Text-bearing fill. The darkest stop is the base copper, never deeper:
     jet text holds 5.2:1 against it, 3.6:1 against #9a5a2a. */
  --cx-grad-btn: linear-gradient(135deg, #ebb983 0%, #cf9154 52%, #b87333 100%);
  /* Decorative only (rules, dots, progress) — free to go deep. */
  --cx-grad: linear-gradient(135deg, #f0c99a 0%, #c98a4b 45%, #8c4f22 100%);

  /* bordeaux velvet surface + the ink that sits on it */
  --cx-velvet: linear-gradient(var(--cx-panel-angle), var(--cx-wine-3) 0%, var(--cx-wine-2) 52%, #260910 100%);
  --cx-velvet-line: rgba(220, 160, 106, .26);
  --cx-velvet-dim: #c4b5ab;  /* dim text on bordeaux: --cx-dim would fall to 3.8:1 */
  --cx-field: #170a0f;

  /* text on the jet canvas */
  --cx-tx: rgba(243, 236, 228, .78);
  --cx-tx-strong: #f3ece4;
  --cx-muted: #b5a99f;
  --cx-dim: #938880;         /* 5.3:1 on the lifted cards, 5.7:1 on the canvas */

  /* lines / glass */
  --cx-line: rgba(220, 160, 106, .17);
  --cx-line-soft: rgba(243, 236, 228, .07);
  --cx-glass: rgba(243, 236, 228, .028);
  --cx-glass-2: rgba(243, 236, 228, .05);

  /* radii */
  --cxr-sm: 6px;
  --cxr-md: 12px;
  --cxr-lg: 18px;
  --cxr-xl: 26px;
  --cxr-pill: 9999px;

  /* shadow / glow */
  --cxs-sh: 0 30px 80px -30px rgba(0, 0, 0, .9);
  --cxs-glow: 0 0 40px -10px rgba(184, 115, 51, .55);
  --cxs-velvet: 0 28px 70px -30px rgba(30, 7, 14, .95);

  /* fonts — every family below ships latin-ext (ą ć ę ł ń ó ś ź ż) */
  --cxf-disp: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --cxf-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --cxf-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  --cx-mw: 1240px;
  --cx-nav-h: 76px;

  --cx-panel-angle: 155deg;
  --cx-hero-angle: 150deg;
  --cx-copy-angle: 160deg;

  color-scheme: dark;
}

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

html { scroll-behavior: smooth; scrollbar-color: var(--cx-wine-2) var(--cx-bg); }

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

::selection { background: rgba(184, 115, 51, .38); color: #fff; }

/* ---- jet night with a bordeaux bloom ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(110, 26, 46, .30), transparent 56%),
    radial-gradient(70% 50% at 100% 6%, rgba(184, 115, 51, .08), transparent 60%),
    linear-gradient(180deg, #0e0b0c 0%, #0a0a0b 42%, #080809 100%);
}
/* copper shaft — the warm light the velvet 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(220, 160, 106, .06), rgba(220, 160, 106, .012) 30%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  opacity: .8;
}

.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 chooses the source; layout belongs to the <img> inside. */
picture { display: contents; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cx-cu-hi); outline-offset: 3px; }

.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-grad-btn); color: var(--cx-bg);
  font-weight: 700; font-size: .88rem;
  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.2;
  letter-spacing: 0;
}
.display {
  font-family: var(--cxf-disp);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.005em;
  color: var(--cx-tx-strong);
}
.display b { font-weight: 700; }
/* The emphasis voice: copper italic — the one flourish the serif earns. */
.display .hi { font-style: italic; font-weight: 500; color: var(--cx-cu-hi); }
h1.display { font-size: clamp(2.45rem, 5.2vw, 4rem); }
h2.display { font-size: clamp(2rem, 3.8vw, 3rem); }

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

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

/* figures: lining + tabular so counters do not jitter while animating.
   Cormorant defaults to old-style figures, where "01" reads as "o1". */
.step .num,
.stat-row .val, .metric .val, .agg .v, .gsum,
.calc-form__value, .calc-results__final-amount, .calc-results__profit-amount {
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cxf-body);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--cxr-sm);
  border: 1px solid transparent;
  transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--cx-grad-btn); color: var(--cx-bg); box-shadow: var(--cxs-glow), inset 0 1px 0 rgba(255, 240, 220, .45); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 56px -6px rgba(184, 115, 51, .75), inset 0 1px 0 rgba(255, 240, 220, .5); }
.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-cu); background: rgba(184, 115, 51, .12); }

/* ---- 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 bordeaux velvet is the single featured surface, applied by
   .hero-right, .form-card.solo, .cap.feat, .gcard.mid, .cta-band and
   .calc-results__final. Copper hairlines frame it; nothing else gets it. */

section { position: relative; }
.sect { padding-block: 88px; }
.sect-head { max-width: 680px; margin-inline: auto; margin-block-end: 48px; text-align: center; }
.sect-head .eyebrow { display: block; margin-block-end: 16px; }
/* hairline rules either side of a centred eyebrow */
.sect-head .eyebrow::before,
.sect-head .eyebrow::after,
.page-head .eyebrow::before,
.page-head .eyebrow::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  vertical-align: middle;
  margin-inline: 14px;
}
.sect-head p { color: var(--cx-muted); margin-block-start: 16px; }

/* ============================================================
   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(10, 10, 11, .78);
  backdrop-filter: blur(18px);
  border-block-end: 1px solid var(--cx-line);
}
.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 — mirrors the logo's wordmark.
   Never split "Cennvex" with <em>, a two-tone span or partial bolding. */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--cxf-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cx-cu-hi);
}
/* The mark is 210x243, not square: height drives, width follows. */
.brand img { height: 34px; 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: .86rem; font-weight: 500; color: var(--cx-muted); transition: color .2s; }
.menu a:hover, .menu a.on { color: var(--cx-tx-strong); }
.menu a.on { box-shadow: inset 0 -1px 0 var(--cx-cu); padding-block-end: 4px; }
.menu .btn { padding: 10px 20px; font-size: .72rem; }
.menu a.btn-primary { color: var(--cx-bg); box-shadow: var(--cxs-glow); padding-block-end: 10px; }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; }
.burger span { width: 22px; height: 1.6px; background: var(--cx-cu-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 var(--cx-line);
  background: linear-gradient(90deg, rgba(110, 26, 46, .14), rgba(10, 10, 11, 0) 30%, rgba(10, 10, 11, 0) 70%, rgba(110, 26, 46, .14));
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track { display: inline-flex; gap: 48px; padding-block: 12px; will-change: transform; }
.tk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--cxf-mono);
  font-size: .74rem;
  color: var(--cx-muted);
}
.tk b { color: var(--cx-tx-strong); font-weight: 500; }
.tk .px { color: var(--cx-tx); }
.tk .up { color: #8fd1a6; }
.tk .down { color: #ef9a9a; }
.dot-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cx-cu);
  box-shadow: 0 0 10px var(--cx-cu);
  animation: cxPulse 1.8s ease-in-out infinite;
}
@keyframes cxPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ============================================================
   HERO — jet panel | bordeaux velvet form
   ============================================================ */
.hero { padding-block: 56px 64px; }
.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(110% 110% at 100% 0%, rgba(184, 115, 51, .13), transparent 58%),
    radial-gradient(90% 90% at 0% 100%, rgba(110, 26, 46, .34), transparent 62%),
    linear-gradient(var(--cx-hero-angle), var(--cx-coal-2), var(--cx-coal-1) 70%, var(--cx-bg));
  padding: 56px 50px;
  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(--cxf-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cx-cu-hi);
  padding: 7px 14px;
  border: 1px solid rgba(220, 160, 106, .34);
  border-radius: var(--cxr-pill);
  background: rgba(184, 115, 51, .08);
  margin-block-end: 26px;
}
.hero-chip svg { width: 13px; height: 13px; }
/* Polish words run long ("inteligencja,", "prawdopodobieństwie"): the hero
   column is ~510px, so the headline is capped lower than other h1s. */
.hero h1.display { font-size: clamp(2.3rem, 4.1vw, 3.3rem); margin-block-end: 22px; }
.hero-left .lede { margin-block-end: 32px; font-size: 1.06rem; }

.stat-rows { display: flex; flex-direction: column; }
.stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 15px;
  border-block-start: 1px solid var(--cx-line);
}
.stat-row:last-child { border-block-end: 1px solid var(--cx-line); }
.stat-row .val {
  font-family: var(--cxf-disp);
  font-weight: 500;
  font-size: clamp(2rem, 3.3vw, 2.8rem);
  line-height: 1.1;
  color: var(--cx-tx-strong);
}
.stat-row .val small { font-size: .55em; color: var(--cx-cu-hi); margin-inline-start: 4px; }
.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 bordeaux velvet form panel */
.hero-right {
  background: var(--cx-velvet);
  color: var(--cx-tx-strong);
  padding: 42px 40px 34px;
  display: flex;
  flex-direction: column;
  position: relative;
  border-inline-start: 1px solid var(--cx-velvet-line);
}
.hero-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(220, 160, 106, .10) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%);
}
.hero-right > * { position: relative; }

/* ---- registration form (lives on the velvet) ---- */
.form-card h2 { font-weight: 600; font-size: 1.85rem; color: var(--cx-tx-strong); line-height: 1.15; }
.form-card .note {
  font-family: var(--cxf-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cx-cu-hi);
  margin-block: 8px 18px;
}
.reg input[type="text"],
.reg input[type="email"],
.reg input[type="tel"] {
  width: 100%;
  background: var(--cx-field);
  border: 1px solid rgba(220, 160, 106, .26);
  border-radius: var(--cxr-sm);
  padding: 13px 14px;
  color: var(--cx-tx-strong);
  font-family: var(--cxf-body);
  font-size: .94rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.reg input::placeholder { color: #a8978e; }
.reg input:focus { border-color: var(--cx-cu-hi); box-shadow: 0 0 0 3px rgba(184, 115, 51, .28); }
.reg form > div { margin-block-end: 10px; }

/* ---- phone field (intl-tel-input v25) ----------------------------------
   The library absolutely positions the country selector and pads the
   input from JS, measured once — and its stylesheet loads async, so that
   measurement can be taken before the CSS applies and is never redone.
   Laying the widget out as a flex row, with the selector as a real item,
   removes the dependency on the measured padding. The field chrome moves
   from the input to .iti so selector and digits read as one control.
   This stylesheet is linked AFTER intlTelInput.min.css, so equal-specificity
   rules here win regardless of which file finishes loading first. */
.iti {
  --iti-border-color: rgba(220, 160, 106, .26);
  --iti-dialcode-color: var(--cx-muted);
  --iti-dropdown-bg: #140d10;
  --iti-hover-color: rgba(184, 115, 51, .18);
  --iti-arrow-color: var(--cx-cu-hi);
  --iti-search-icon-color: var(--cx-muted);
  width: 100%;
  display: flex;
  align-items: stretch;
  background: var(--cx-field);
  border: 1px solid rgba(220, 160, 106, .26);
  border-radius: var(--cxr-sm);
  transition: border-color .2s, box-shadow .2s;
}
.iti:focus-within { border-color: var(--cx-cu-hi); box-shadow: 0 0 0 3px rgba(184, 115, 51, .28); }

.iti__country-container {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  border-inline-end: 1px solid rgba(220, 160, 106, .2);
}
.iti__selected-dial-code { color: var(--cx-tx-strong); margin-inline-end: 10px; }

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

.iti__dropdown-content {
  background: var(--iti-dropdown-bg);
  color: var(--cx-tx-strong);
  border: 1px solid var(--cx-line);
  border-radius: var(--cxr-sm);
  box-shadow: var(--cxs-sh);
}
.iti__search-input {
  background: var(--cx-field);
  color: var(--cx-tx-strong);
  border: none;
  border-block-end: 1px solid var(--cx-line);
  padding: 10px 12px;
  font-family: var(--cxf-body);
}
.iti__search-input::placeholder { color: var(--cx-dim); }
.iti__country.iti__highlight { background: var(--iti-hover-color); }
.iti__dial-code { color: var(--cx-muted); }

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

.phone-error {
  display: none;
  margin-block: 2px 10px;
  font-size: .8rem;
  line-height: 1.55;
  color: #ffb4b4;
}
.phone-error.on { display: block; }

#submit-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: var(--cxr-sm);
  background: var(--cx-grad-btn);
  color: var(--cx-bg);
  font-family: var(--cxf-body);
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-block-start: 6px;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 12px 28px -12px rgba(184, 115, 51, .8), inset 0 1px 0 rgba(255, 240, 220, .45);
}
#submit-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(184, 115, 51, .7), inset 0 1px 0 rgba(255, 240, 220, .5); }
.form-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--cx-velvet-dim);
  margin-block-start: 14px;
}
.form-tip svg { width: 16px; height: 16px; color: var(--cx-cu-hi); flex-shrink: 0; }

.form-card .trust { margin-block-start: 22px; border-block-start: 1px solid var(--cx-velvet-line); }
.trust-item { display: flex; align-items: center; gap: 13px; padding-block: 14px; border-block-end: 1px solid var(--cx-velvet-line); }
.trust-item:last-child { border-block-end: none; }
.trust-ico {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(10, 10, 11, .35);
  border: 1px solid var(--cx-velvet-line);
}
.trust-ico svg { width: 18px; height: 18px; color: var(--cx-cu-hi); }
.trust-item b { display: block; font-family: var(--cxf-body); font-weight: 700; font-size: .92rem; color: var(--cx-tx-strong); line-height: 1.4; }
.trust-item span { font-size: .78rem; color: var(--cx-velvet-dim); }

/* ============================================================
   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: 32px 28px;
  transition: transform .3s, border-color .3s;
  position: relative;
  overflow: hidden;
}
.voice:hover { transform: translateY(-5px); border-color: rgba(220, 160, 106, .45); }
.voice::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--cx-grad);
  opacity: .7;
}
.voice-mark { width: 34px; height: 34px; color: var(--cx-cu); opacity: .55; margin-block-end: 14px; }
.voice-mark svg { width: 100%; height: 100%; }
.voice .stars { margin-block-end: 14px; }
.voice-qt {
  font-family: var(--cxf-disp);
  font-size: 1.28rem;
  line-height: 1.5;
  color: var(--cx-tx-strong);
  font-weight: 500;
  font-style: italic;
  flex: 1;
  margin-block-end: 22px;
}
.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-body); font-weight: 800; font-size: .8rem; letter-spacing: .04em;
  color: var(--cx-bg); background: var(--cx-grad-btn);
}
.voice-name { font-weight: 700; font-size: .95rem; color: var(--cx-tx-strong); }
.voice-loc { font-family: var(--cxf-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cx-cu-hi); }

.stars { display: flex; gap: 3px; }
.stars svg { width: 15px; height: 15px; color: var(--cx-cu); }
.cap.feat .stars svg,
.gcard.mid .stars svg { color: var(--cx-cu-hi); }

/* ============================================================
   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);
}
.split-media { position: relative; min-height: 400px; overflow: hidden; }
/* object-fit crops to the frame; the bitmap itself is never rescaled out
   of its own ratio. */
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--cx-copy-angle), transparent 55%, rgba(42, 10, 18, .45));
  pointer-events: none;
}
.split-copy {
  padding: 56px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(90% 80% at 100% 100%, rgba(110, 26, 46, .28), transparent 60%),
    linear-gradient(var(--cx-copy-angle), var(--cx-coal-2), var(--cx-coal-1));
}
.split-copy .eyebrow { margin-block-end: 16px; }
.split-copy h2 { margin-block-end: 20px; }
.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: 32px 28px;
  transition: transform .3s, border-color .3s, background .3s;
  position: relative;
  overflow: hidden;
}
.cap:hover { transform: translateY(-4px); border-color: rgba(220, 160, 106, .42); }
.cap.feat {
  background: var(--cx-velvet);
  border-color: var(--cx-velvet-line);
  box-shadow: var(--cxs-velvet);
}
.cap-ico {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid var(--cx-line);
  background: rgba(184, 115, 51, .09);
  margin-block-end: 20px;
}
.cap.feat .cap-ico { background: rgba(10, 10, 11, .3); border-color: var(--cx-velvet-line); }
.cap-ico svg { width: 22px; height: 22px; color: var(--cx-cu-hi); }
.cap h3 { font-size: 1.42rem; font-weight: 600; margin-block-end: 10px; }
.cap p { color: var(--cx-muted); font-size: .92rem; line-height: 1.78; }
.cap.feat p { color: var(--cx-velvet-dim); }

/* ============================================================
   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: 36px 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: 500;
  font-size: clamp(2.3rem, 3.6vw, 3.3rem);
  line-height: 1.1;
  color: var(--cx-tx-strong);
}
.metric .val b { font-weight: 500; color: var(--cx-cu-hi); }
.metric .lbl { font-family: var(--cxf-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cx-dim); margin-block-start: 10px; }

.agg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-block-end: 30px; }
.agg { border: 1px solid var(--cx-line); border-radius: var(--cxr-md); padding: 26px 24px; background: var(--cx-glass); }
.agg .v { font-family: var(--cxf-disp); font-weight: 500; font-size: 2.6rem; line-height: 1.1; color: var(--cx-tx-strong); }
.agg .v b { color: var(--cx-cu-hi); font-weight: 500; }
.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: 30px 26px;
  background: linear-gradient(180deg, var(--cx-glass-2), var(--cx-glass));
  position: relative;
}
.step-dot {
  position: absolute;
  inset-block-start: 30px;
  inset-inline-end: 26px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--cx-grad); box-shadow: var(--cxs-glow);
}
.step .num { font-family: var(--cxf-disp); font-style: italic; font-size: 2rem; line-height: 1; color: var(--cx-cu-hi); }
.step h3 { font-size: 1.32rem; font-weight: 600; margin-block: 12px 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-velvet);
  border-color: var(--cx-velvet-line);
  box-shadow: var(--cxs-velvet);
}
.gcard-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; margin-block-end: 16px; }
.gbadge {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  font-family: var(--cxf-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cx-cu-hi);
  padding: 5px 10px;
  border-radius: var(--cxr-pill);
  border: 1px solid var(--cx-line);
  background: rgba(184, 115, 51, .09);
}
.gcard.mid .gbadge { border-color: var(--cx-velvet-line); background: rgba(10, 10, 11, .3); }
.gbadge svg { width: 11px; height: 11px; }
.gcard .tagline { font-family: var(--cxf-mono); font-size: .64rem; color: var(--cx-dim); }
.gcard.mid .tagline { color: var(--cx-velvet-dim); }
.gsum { font-family: var(--cxf-disp); font-weight: 500; font-size: 2.9rem; line-height: 1.1; color: var(--cx-tx-strong); }
.gper { font-family: var(--cxf-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cx-cu-hi); margin-block: 4px 14px; }
.gspark { width: 100%; height: 40px; display: block; margin-block-end: 16px; }
.gspark .ln { fill: none; stroke: var(--cx-cu-hi); stroke-width: 2; }
.gqt { font-size: .92rem; color: var(--cx-muted); line-height: 1.78; margin-block-end: 18px; }
.gcard.mid .gqt { color: var(--cx-velvet-dim); }
.gwho { display: flex; align-items: center; gap: 12px; }
.gav {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-weight: 800; font-size: .78rem; letter-spacing: .04em;
  color: var(--cx-bg); background: var(--cx-grad-btn);
}
.gnm { font-weight: 700; font-size: .94rem; color: var(--cx-tx-strong); }
.gcity { font-family: var(--cxf-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cx-dim); }
.gcard.mid .gcity { color: var(--cx-velvet-dim); }

.gcta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-block-start: 22px;
  padding: 13px 20px;
  font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  border-radius: var(--cxr-sm);
  border: 1px solid transparent;
  background: var(--cx-grad-btn);
  color: var(--cx-bg);
  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(184, 115, 51, .75); }

.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-block-start: 34px; }
.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-cu-hi);
  transition: .25s;
}
.cbtn:hover { border-color: var(--cx-cu); background: rgba(184, 115, 51, .14); }
.cbtn svg { width: 18px; height: 18px; }
.dots { display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(220, 160, 106, .25); 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: 780px; margin-inline: auto; margin-block-start: 30px; line-height: 1.8; }

/* ============================================================
   CTA
   ============================================================ */
.cta-band {
  border-radius: var(--cxr-xl);
  padding: 68px 40px;
  text-align: center;
  background: var(--cx-velvet);
  border: 1px solid var(--cx-velvet-line);
  box-shadow: var(--cxs-velvet);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(220, 160, 106, .10) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(90% 90% at 50% 0%, #000, transparent 70%);
}
/* inner copper hairline — a double frame, the band's one ornament */
.cta-band::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(220, 160, 106, .2);
  border-radius: calc(var(--cxr-xl) - 8px);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { margin-block-end: 16px; }
.cta-band p { color: var(--cx-velvet-dim); margin-inline: auto; margin-block-end: 30px; max-width: 50ch; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-block-start: 1px solid var(--cx-line); padding-block-start: 70px; margin-block-start: 40px; background: linear-gradient(180deg, rgba(30, 7, 14, .35), transparent 60%); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.footer-brand .brand { margin-block-end: 18px; }
.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: .16em; text-transform: uppercase; color: var(--cx-cu-hi); font-weight: 500; margin-block-end: 18px; }
.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-cu-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: 50px; padding-block: 22px;
  font-size: .82rem; color: var(--cx-dim);
}
.footer-bar .lnk { display: flex; gap: 20px; }
.footer-bar a:hover { color: var(--cx-cu-hi); }

.risk { background: rgba(30, 7, 14, .3); border-block-start: 1px solid var(--cx-line-soft); padding-block: 24px; }
.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: 800px; margin-inline: auto; padding-block: 20px 8px; }
.page-head .eyebrow { display: block; margin-block-end: 16px; }
.page-head p { color: var(--cx-muted); margin-inline: auto; margin-block-start: 18px; max-width: 62ch; }
.page-head .updated { font-family: var(--cxf-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cx-dim); margin-block-start: 16px; }

/* Capped at the photos' intrinsic 800px so the bitmap fills the frame
   exactly; height follows the image, so nothing is stretched. */
.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(var(--cx-copy-angle), transparent 60%, rgba(42, 10, 18, .4)); 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: .1em; text-transform: uppercase; color: var(--cx-tx-strong); padding: 10px 22px; border-radius: var(--cxr-pill); border: 1px solid var(--cx-line); background: var(--cx-glass); }

.cap.team { text-align: center; }
.cap.team .role { font-family: var(--cxf-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cx-cu-hi); display: block; margin-block-end: 12px; }
.cap.team .av {
  width: 60px; height: 60px; border-radius: 50%;
  margin-inline: auto; margin-block-end: 18px;
  display: grid; place-items: center;
  font-weight: 800; letter-spacing: .04em; color: var(--cx-bg);
  background: var(--cx-grad-btn); 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: 30px 28px; transition: transform .3s, border-color .3s; }
.post:hover { transform: translateY(-4px); border-color: rgba(220, 160, 106, .42); }
.post-tag { align-self: flex-start; font-family: var(--cxf-mono); font-size: .6rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--cxr-pill); margin-block-end: 16px; border: 1px solid var(--cx-line); }
.post-tag.ai { color: var(--cx-tx-strong); background: rgba(110, 26, 46, .4); border-color: rgba(140, 42, 64, .6); }
.post-tag.crypto { color: var(--cx-cu-hi); background: rgba(184, 115, 51, .1); border-color: rgba(220, 160, 106, .28); }
.post h3 { font-size: 1.42rem; font-weight: 600; line-height: 1.3; margin-block-end: 10px; }
.post p { color: var(--cx-muted); font-size: .92rem; line-height: 1.78; flex: 1; }
.post-meta { display: flex; justify-content: space-between; gap: 12px; margin-block-start: 18px; padding-block-start: 14px; border-block-start: 1px solid var(--cx-line-soft); font-family: var(--cxf-mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-dim); }

/* FAQ accordion — WAI-ARIA APG pattern: the button lives INSIDE the heading. */
.faq-list { max-width: 820px; 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, background .3s; }
.faq-item:hover { border-color: rgba(220, 160, 106, .4); }
.faq-item.open { background: linear-gradient(180deg, rgba(110, 26, 46, .22), var(--cx-glass)); }
.faq-h { margin: 0; font-size: inherit; font-weight: inherit; font-family: inherit; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%;
  padding: 21px 24px;
  background: none; border: none;
  font-family: var(--cxf-body); font-size: 1rem; font-weight: 600;
  color: var(--cx-tx-strong);
  text-align: start;
  line-height: 1.55;
}
.faq-q:focus-visible { outline: 2px solid var(--cx-cu-hi); outline-offset: -3px; }
.faq-q svg { width: 18px; height: 18px; color: var(--cx-cu-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 22px; color: var(--cx-muted); font-size: .94rem; line-height: 1.85; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.info-col { display: flex; flex-direction: column; gap: 20px; }
.info-col > p { 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: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--cx-line); background: rgba(184, 115, 51, .09); }
.info-ico svg { width: 20px; height: 20px; color: var(--cx-cu-hi); }
.info-row h3 { font-family: var(--cxf-body); font-size: .98rem; font-weight: 700; margin-block-end: 3px; }
.info-row p { color: var(--cx-muted); font-size: .9rem; }
.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: .96rem; }
.reg-list svg { width: 20px; height: 20px; color: var(--cx-cu-hi); flex-shrink: 0; margin-block-start: 4px; }

/* No overflow:hidden — 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(--cx-velvet);
  border: 1px solid var(--cx-velvet-line);
  border-radius: var(--cxr-lg);
  box-shadow: var(--cxs-velvet);
  color: var(--cx-tx-strong);
  padding: 38px 34px;
  position: relative;
}
.form-card.solo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(220, 160, 106, .10) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%);
}
.form-card.solo > * { position: relative; }

.legal { max-width: 860px; margin-inline: auto; }
.legal h2 { font-size: 1.6rem; font-weight: 600; color: var(--cx-tx-strong); margin-block: 38px 12px; }
.legal h2:first-child { margin-block-start: 0; }
.legal p { color: var(--cx-muted); font-size: .96rem; line-height: 1.9; margin-block-end: 12px; }
.legal ul { color: var(--cx-muted); font-size: .96rem; line-height: 1.9; margin-block-end: 12px; margin-inline-start: 20px; }
.legal a { color: var(--cx-cu-hi); border-block-end: 1px solid rgba(220, 160, 106, .35); }

/* standalone centred notice (thanks / 404) */
.notice { max-width: 640px; margin-inline: auto; text-align: center; padding-block: 64px; }
.notice .ico { width: 78px; height: 78px; margin-inline: auto; margin-block-end: 28px; display: grid; place-items: center; border-radius: 22px; background: var(--cx-velvet); border: 1px solid var(--cx-velvet-line); box-shadow: var(--cxs-velvet); }
.notice .ico svg { width: 34px; height: 34px; color: var(--cx-cu-hi); }
.notice p { color: var(--cx-muted); margin-block-start: 16px; }
.notice .btn { margin-block-start: 32px; }

/* ============================================================
   RETURN PROJECTION WIDGET (index)
   ============================================================ */
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }

.calc-form {
  border: 1px solid var(--cx-line);
  border-radius: var(--cxr-lg);
  background: linear-gradient(180deg, var(--cx-glass-2), var(--cx-glass));
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.calc-form__field { margin-block-end: 34px; }
.calc-form__field:last-child { margin-block-end: 0; }
.calc-form__label {
  display: block;
  font-family: var(--cxf-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cx-dim);
  margin-block-end: 10px;
}
.calc-form__value {
  font-family: var(--cxf-disp);
  font-weight: 500;
  font-size: clamp(2rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  color: var(--cx-tx-strong);
  margin-block-end: 14px;
}
.calc-form__input-group { display: flex; flex-direction: column; }
.calc-slider { position: relative; height: 30px; display: flex; align-items: center; }
.calc-slider__background {
  position: absolute;
  inset-inline-start: 0;
  width: 100%;
  height: 4px;
  background: rgba(220, 160, 106, .18);
  border-radius: var(--cxr-pill);
  z-index: 1;
}
.calc-slider__progress {
  position: absolute;
  inset-inline-start: 0;
  height: 4px;
  background: var(--cx-grad);
  box-shadow: 0 0 14px rgba(184, 115, 51, .5);
  border-radius: var(--cxr-pill);
  z-index: 2;
}
.calc-slider__input {
  position: absolute;
  inset-inline-start: 0;
  width: 100%;
  height: 12px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  outline: none;
  z-index: 3;
  cursor: pointer;
  padding: 0;
  border: none !important;
}
.calc-slider__input:focus-visible { outline: 2px solid var(--cx-cu-hi); outline-offset: 6px; }
.calc-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--cx-bg);
  cursor: pointer;
  border: 2px solid var(--cx-cu-hi);
  box-shadow: 0 0 12px rgba(184, 115, 51, .65);
}
.calc-slider__input::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--cx-bg);
  cursor: pointer;
  border: 2px solid var(--cx-cu-hi);
  box-shadow: 0 0 12px rgba(184, 115, 51, .65);
}
.calc-slider__details {
  display: flex;
  justify-content: space-between;
  margin-block-start: 8px;
  font-family: var(--cxf-mono);
  font-size: .64rem;
  letter-spacing: .04em;
  color: var(--cx-dim);
}

.calc-results { display: flex; flex-direction: column; gap: 18px; }
.calc-results__final {
  background: var(--cx-velvet);
  border: 1px solid var(--cx-velvet-line);
  box-shadow: var(--cxs-velvet);
  border-radius: var(--cxr-lg);
  padding: 28px 26px;
  color: var(--cx-tx-strong);
}
.calc-results__final-header { display: flex; align-items: center; gap: 8px; margin-block-end: 12px; }
.calc-results__icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--cx-cu-hi); }
.calc-results__final-label {
  font-family: var(--cxf-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cx-cu-hi);
}
.calc-results__final-amount {
  font-family: var(--cxf-disp);
  font-weight: 500;
  font-size: clamp(2.5rem, 4.4vw, 3.4rem);
  line-height: 1.1;
  margin-block-end: 8px;
}
.calc-results__final-subtitle { font-size: .9rem; color: var(--cx-velvet-dim); }

.calc-results__profit {
  border: 1px solid var(--cx-line);
  border-radius: var(--cxr-lg);
  background: linear-gradient(180deg, var(--cx-glass-2), var(--cx-glass));
  padding: 28px 26px;
  position: relative;
  overflow: hidden;
}
.calc-results__profit-inner { position: relative; z-index: 10; }
.calc-results__profit-header { display: flex; align-items: center; gap: 13px; margin-block-end: 14px; }
.calc-results__profit-icon-wrap {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--cx-grad-btn);
  box-shadow: var(--cxs-glow);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.calc-results__profit-icon { width: 20px; height: 20px; color: var(--cx-bg); }
.calc-results__profit-meta { display: flex; flex-direction: column; }
.calc-results__profit-title { font-weight: 700; font-size: .94rem; color: var(--cx-tx-strong); line-height: 1.5; }
.calc-results__profit-subtitle { font-family: var(--cxf-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cx-dim); }
.calc-results__profit-amount {
  font-family: var(--cxf-disp);
  font-weight: 500;
  font-size: clamp(2.1rem, 3.4vw, 2.7rem);
  line-height: 1.15;
  color: var(--cx-tx-strong);
}
.calc-results__profit-bar { margin-block-start: 12px; display: flex; align-items: center; gap: 10px; }
.calc-results__profit-bar-track { height: 4px; flex: 1; background: rgba(220, 160, 106, .18); border-radius: var(--cxr-pill); overflow: hidden; }
.calc-results__profit-bar-fill { height: 100%; background: var(--cx-grad); box-shadow: 0 0 14px rgba(184, 115, 51, .5); border-radius: var(--cxr-pill); }
.calc-results__profit-percent { font-family: var(--cxf-mono); font-size: .76rem; font-weight: 500; color: var(--cx-cu-hi); }

.calc-disclaimer {
  background: var(--cx-glass);
  border: 1px solid var(--cx-line-soft);
  border-radius: var(--cxr-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.calc-disclaimer__icon { width: 18px; height: 18px; color: var(--cx-cu-hi); flex-shrink: 0; opacity: .85; }
.calc-disclaimer__text { font-size: .76rem; color: var(--cx-dim); line-height: 1.75; }

/* ============================================================
   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(--cx-velvet-line); }
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .split-media { min-height: 0; aspect-ratio: 1 / 1; max-height: 520px; }
  .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(--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; }
  .calc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .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: 2px;
    padding: 14px 24px 26px;
    /* Opaque, and no backdrop-filter of its own: nested inside the nav's
       backdrop-filter, Chrome let the page show through a 97% fill. */
    background: linear-gradient(180deg, var(--cx-bg-2), var(--cx-bg));
    border-block-end: 1px solid var(--cx-line);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
  }
  .nav.open .menu a { display: block; padding-block: 12px; font-size: 1rem; border-block-end: 1px solid var(--cx-line-soft); }
  .nav.open .menu li:last-child a { border-block-end: none; }
  .nav.open .menu a.on { box-shadow: inset 2px 0 0 var(--cx-cu); padding-inline-start: 12px; }
  .nav.open .menu .btn { justify-content: center; margin-block-start: 10px; padding-block: 14px; }
}

@media (max-width: 680px) {
  :root { --cx-nav-h: 66px; }
  .wrap, .nav-in { padding-inline: 16px; }
  .sect { padding-block: 62px; }
  .hero { padding-block: 28px 44px; }
  .hero-left { padding: 36px 24px; }
  .hero-right { padding: 30px 22px; }
  .hero-chip { letter-spacing: .06em; font-size: .62rem; }
  .stat-row { flex-direction: column; gap: 2px; align-items: flex-start; }
  .stat-row .lbl { text-align: start; }
  .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 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bar { flex-direction: column; gap: 12px; text-align: center; }
  .cta-band { padding: 52px 22px; }
  .form-card.solo { padding: 30px 22px; }
  .sect-head .eyebrow::before, .sect-head .eyebrow::after,
  .page-head .eyebrow::before, .page-head .eyebrow::after { width: 18px; margin-inline: 10px; }
  .calc-form, .calc-results__final, .calc-results__profit { padding: 24px 20px; }
  .calc-form__field { margin-block-end: 26px; }
}

@media (max-width: 360px) {
  .brand { letter-spacing: .18em; font-size: .92rem; }
  .calc-form__value, .calc-results__profit-amount { font-size: 1.7rem; }
}