/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --ink:        #121110;
  --ink-soft:   #3a3733;
  --ink-mute:   #6f6a61;
  --cream:      #f7f4ee;
  --cream-2:    #efe9de;
  --paper:      #fffdf9;
  --black:      #0b0b0a;
  --black-2:    #16140f;
  --gold:       #c69a4e;
  --gold-2:     #e2c07f;
  --gold-dim:   rgba(198,154,78,0.15);
  --line:       rgba(18,17,16,0.12);
  --line-on-black: rgba(247,244,238,0.14);
  --cream-on-black: #f2ede0;
  --cream-mute-on-black: #a49c8c;

  --display: "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --nav-h: 80px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; }
body {
  font-family: var(--sans);
  font-size: 16px; line-height: 1.6;
  background: var(--cream);
  color: var(--ink-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 {
  text-wrap: balance; line-height: 1.02; letter-spacing: -0.02em;
  font-family: var(--display); font-weight: 700; color: var(--ink);
}
ul { list-style: none; padding: 0; }
::selection { background: var(--gold); color: var(--black); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--gold); color: var(--black);
  z-index: 9999; border-radius: 4px; font-weight: 600;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.container { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3.2rem); }
.section-pad { padding-block: clamp(4.5rem, 9vw, 8.5rem); }
.on-black { background: var(--black); color: var(--cream-mute-on-black); }
.on-black h1, .on-black h2, .on-black h3, .on-black h4 { color: var(--cream-on-black); }
.on-cream2 { background: var(--cream-2); }
.on-paper { background: var(--paper); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: var(--gold);
}
.eyebrow .dot { width: 5px; height: 5px; background: var(--gold); flex-shrink: 0; }
.on-black .eyebrow { color: var(--gold-2); }

.h-hero { font-size: clamp(2.4rem, 5.6vw, 4.4rem); }
.h-section { font-size: clamp(1.9rem, 3.6vw, 3rem); max-width: 20ch; }
.lede { font-size: clamp(1.02rem, 1.3vw, 1.18rem); max-width: 48ch; }
em { font-style: normal; color: var(--gold); }

/* =============================================================
   4. Buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 1.8rem; font-size: .9rem; font-weight: 600; letter-spacing: .01em;
  border-radius: 2px; white-space: nowrap;
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft), background .3s var(--ease-out), color .3s var(--ease-out);
}
.btn-primary { background: var(--gold); color: var(--black); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -12px rgba(198,154,78,0.55); }
.btn-primary:active { transform: translateY(-1px); transition-duration: .12s; }

.btn-outline { border: 1px solid var(--ink); color: var(--ink); }
.on-black .btn-outline { border-color: var(--line-on-black); color: var(--cream-on-black); }
.btn-outline:hover { background: var(--ink); color: var(--cream); }
.on-black .btn-outline:hover { background: var(--cream); color: var(--black); }

.btn-text {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .95rem;
  position: relative; padding-bottom: 2px;
}
.btn-text::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.btn-text:hover::after { transform: scaleX(1); transform-origin: left; }

/* =============================================================
   5. Nav
   ============================================================= */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out), backdrop-filter .4s var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(11,11,10,0.86); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--line-on-black);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 2rem; }

.logo { display: inline-flex; align-items: baseline; gap: .35rem; }
.logo-deec { font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--cream-on-black); }
.logo-studio { font-family: var(--sans); font-weight: 400; font-size: .92rem; letter-spacing: .04em; color: var(--cream-mute-on-black); }

.nav-links { display: none; align-items: center; gap: 2rem; font-size: .85rem; color: var(--cream-mute-on-black); }
@media (min-width: 980px) { .nav-links { display: flex; } }
.nav-link { position: relative; padding: .3rem 0; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-cta { display: none; }
@media (min-width: 980px) { .nav-cta { display: inline-flex; padding: .68rem 1.25rem; font-size: .8rem; } }

.lang-switch { display: none; align-items: stretch; border: 1px solid var(--line-on-black); flex-shrink: 0; }
@media (min-width: 980px) { .lang-switch { display: flex; } }
.lang-switch button {
  padding: .4rem .6rem; font-family: var(--display); font-weight: 700; font-size: .68rem; letter-spacing: .04em;
  color: var(--cream-mute-on-black); transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.lang-switch button + button { border-left: 1px solid var(--line-on-black); }
.lang-switch button.is-active { background: var(--gold); color: var(--black); }

.nav-right-group { display: flex; align-items: center; gap: .6rem; }

.nav-burger { display: grid; place-items: center; width: 40px; height: 40px; color: var(--cream-on-black); }
@media (min-width: 980px) { .nav-burger { display: none; } }
.nav-burger span { display: block; width: 20px; height: 1.5px; background: currentColor; position: relative; }
.nav-burger span::before, .nav-burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease-out); }
.nav-burger span::before { top: -6px; } .nav-burger span::after { top: 6px; }

.nav-mobile {
  position: fixed; inset: 0; z-index: 99; background: var(--black);
  display: grid; place-content: center; gap: 1.5rem;
  clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease-soft);
}
.nav-mobile[data-open="true"] { clip-path: inset(0); }
.nav-mobile a { font-family: var(--display); font-weight: 700; font-size: 1.6rem; color: var(--cream-on-black); text-align: center; }
.nav-mobile .nav-cta { display: inline-flex; margin-top: .6rem; justify-self: center; }
.lang-switch--mobile { display: flex; justify-self: center; border-color: var(--line-on-black); }
.lang-switch--mobile button { font-size: .78rem; padding: .5rem .9rem; }

/* =============================================================
   6. Hero
   ============================================================= */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: var(--nav-h); overflow: hidden; overflow: clip; background: var(--black); }
@media (max-width: 979px) { .hero { align-items: center; padding-bottom: 3rem; } }

/* -- depth layers: near-black base with extremely subtle warm gradients -- */
.hero-bg-depth {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 78% 15%, rgba(198,154,78,0.07), transparent 55%),
    radial-gradient(90% 70% at 15% 100%, rgba(198,154,78,0.04), transparent 60%),
    linear-gradient(180deg, #0b0b0a 0%, #0e0d0b 45%, #0b0b0a 100%);
}

/* -- world map (right zone, extends toward center) -- */
.hero-map-wrap {
  position: absolute; inset: 0 0 0 34%; z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 100%);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 100%);
}
@media (max-width: 979px) {
  /* Full-bleed background behind all hero content, same technique as desktop
     (image lives inside the SVG viewBox, so it crops together with the arcs
     and can never drift out of alignment) — just no left-side mask needed
     since there's no side-by-side text column to protect here. */
  .hero-map-wrap { position: absolute; inset: 0; -webkit-mask-image: none; mask-image: none; }
}
.hero-network { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.hero-network image {
  opacity: .96;
  filter: contrast(1.08) saturate(1.02);
  transform-box: fill-box; transform-origin: center;
  animation: mapDrift 60s linear infinite;
}
@keyframes mapDrift {
  0%, 100% { transform: scale(1.005) translate(0, 0); }
  50%      { transform: scale(1.015) translate(-0.25%, -0.15%); }
}
.hero-arc { fill: none; stroke: var(--gold-2); stroke-width: .28; filter: drop-shadow(0 0 1.4px rgba(226,192,127,.6)); }
.hero-node { fill: var(--gold-2); filter: drop-shadow(0 0 2px rgba(226,192,127,.9)); }
.hero-node.is-origin { fill: var(--cream-on-black); filter: drop-shadow(0 0 3px rgba(226,192,127,1)); }
.hero-node-pulse { fill: none; stroke: var(--gold); stroke-width: .3; transform-origin: center; animation: nodePulse 4.2s var(--ease-soft) infinite; }
@keyframes nodePulse { 0% { r: 0.6; opacity: .8; } 100% { r: 5; opacity: 0; } }


.hero-vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(120% 100% at 30% 50%, transparent 40%, rgba(11,11,10,.35) 78%, rgba(11,11,10,.7) 100%);
}
@media (max-width: 979px) {
  /* Text now sits directly over the map, so it needs a real scrim behind it
     rather than the desktop side-vignette: dark under the copy, clearer
     lower down where the network/connections read as the visual payoff. */
  .hero-vignette {
    background:
      linear-gradient(180deg, rgba(11,11,10,.94) 0%, rgba(11,11,10,.86) 30%, rgba(11,11,10,.5) 52%, rgba(11,11,10,.4) 70%, rgba(11,11,10,.75) 100%);
  }
}

.hero-inner { position: relative; z-index: 5; width: 100%; padding-block: 2.4rem; }
@media (min-width: 980px) { .hero-inner { max-width: 660px; } }
@media (max-width: 979px) {
  /* Same content, spread across the full hero height instead of clustered
     at the top: each group gets real breathing room, the block reads as
     one deliberate composition rather than a stacked list. */
  .hero-inner { padding-block: 3rem 2.5rem; display: flex; flex-direction: column; min-height: calc(100svh - var(--nav-h) - 3rem); }
  .hero-lede { margin-top: 1.6rem; }
  .hero-actions { margin-top: auto; padding-top: 3rem; }
  .hero-footnote { margin-top: 2.2rem; }
  .hero-taxonomy-wrap { margin-top: 2.6rem; }
}
.hero-title { margin-top: 1rem; color: var(--cream-on-black); }
.hero-title .accent { color: var(--gold); }
.hero-lede { margin-top: 1.3rem; color: var(--cream-mute-on-black); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.1rem; }
.hero-footnote { margin-top: 1.8rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-mute-on-black); }

.hero-taxonomy-wrap {
  margin-top: 2.3rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.hero-taxonomy { display: flex; flex-wrap: nowrap; gap: .5rem 1.3rem; width: max-content; animation: hero-marquee 46s linear infinite; }
.hero-taxonomy span {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; color: var(--cream-mute-on-black);
  border: 1px solid var(--line-on-black); padding: .45rem .8rem;
  white-space: nowrap;
}
.hero-taxonomy span::before { content: ""; width: 4px; height: 4px; background: var(--gold); flex-shrink: 0; }
@media (max-width: 979px) {
  .hero-taxonomy span { background: rgba(11,11,10,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}
@keyframes hero-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hero-taxonomy { animation: none; } }

/* =============================================================
   7. Problem
   ============================================================= */
.split { display: grid; gap: 3rem; }
@media (min-width: 980px) { .split-2 { grid-template-columns: 0.85fr 1.15fr; align-items: start; gap: 5rem; } }

.problem-list { margin-top: 2rem; display: flex; flex-direction: column; }
.problem-list li {
  display: flex; align-items: center; gap: .9rem;
  padding-block: .95rem; border-top: 1px solid var(--line);
}
.problem-list li:last-child { border-bottom: 1px solid var(--line); }
.problem-list svg { color: var(--gold); flex-shrink: 0; }
.problem-list span { font-size: .92rem; color: var(--ink-soft); font-weight: 500; }
/* -- growth potential card (replaces the old problem-callout) -- */
.growth-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.growth-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--ink); max-width: 32ch; }
.growth-subtitle { margin-top: .5rem; font-size: .88rem; color: var(--ink-mute); }

.growth-legend { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1.6rem; }
.growth-legend span { display: inline-flex; align-items: center; gap: .55rem; font-size: .82rem; color: var(--ink-soft); }
.legend-swatch { display: inline-block; width: 20px; height: 2px; border-radius: 1px; }
.legend-swatch--flat { background: var(--ink-mute); }
.legend-swatch--gold { background: var(--gold); }

.growth-chart-row { margin-top: 1.6rem; display: flex; gap: 1.6rem; align-items: stretch; }
.growth-chart { flex: 1; min-width: 0; }
.growth-svg { width: 100%; height: auto; display: block; overflow: visible; }
.growth-grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.growth-axis-label { font-family: var(--sans); font-size: 11px; fill: var(--ink-mute); }
.growth-axis-title { font-family: var(--sans); font-size: 10px; fill: var(--ink-mute); letter-spacing: .04em; }
.growth-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.growth-line--flat { stroke: var(--ink-mute); stroke-width: 2; }
.growth-line--gold { stroke: var(--gold); stroke-width: 2.5; animation: growth-line-glow 2.6s ease-in-out infinite; }
.growth-pulse-dot { fill: var(--gold); filter: drop-shadow(0 0 5px var(--gold)); animation: growth-pulse-fade 3.4s ease-in-out infinite; }
@keyframes growth-line-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(198,154,78,0)); }
  50% { filter: drop-shadow(0 0 4px rgba(198,154,78,.75)); }
}
@keyframes growth-pulse-fade {
  0%, 92%, 100% { opacity: 0; }
  4%, 85% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .growth-line--gold { animation: none; }
  .growth-pulse-dot { animation: none; opacity: 0; }
}
.growth-dot--flat { fill: var(--ink-mute); }
.growth-dot--gold { fill: var(--gold); stroke: var(--paper); stroke-width: 2; }
.growth-point-label { font-family: var(--display); font-weight: 700; font-size: 13px; fill: var(--gold); }
.growth-point-label--last { font-size: 16px; }

.growth-stats { flex-shrink: 0; width: 150px; display: flex; flex-direction: column; gap: 1.6rem; justify-content: center; }
.growth-stat strong { display: block; font-family: var(--display); font-weight: 800; font-size: 1.6rem; line-height: 1; }
.growth-stat span { display: block; margin-top: .4rem; font-size: .76rem; color: var(--ink-mute); line-height: 1.4; }
.growth-stat--gold strong { color: var(--gold); }
.growth-stat--mute strong { color: var(--ink-mute); }

.growth-highlight {
  margin-top: 1.8rem; padding: clamp(1rem, 4vw, 1.4rem) clamp(1rem, 4vw, 1.5rem); border-radius: 6px;
  background: var(--gold-dim);
  display: flex; align-items: center; gap: clamp(.7rem, 3vw, 1.2rem);
}
.growth-highlight-icon {
  flex-shrink: 0; width: clamp(32px, 8vw, 44px); height: clamp(32px, 8vw, 44px); border-radius: 50%;
  background: var(--gold); color: var(--black);
  display: grid; place-items: center;
}
.growth-highlight-icon svg { width: clamp(14px, 4vw, 20px); height: clamp(14px, 4vw, 20px); }
.growth-highlight-text { flex: 1; min-width: 0; }
.growth-highlight-title { font-family: var(--display); font-weight: 700; font-size: clamp(.8rem, 2.6vw, .98rem); color: var(--ink); }
.growth-highlight-body { margin-top: .35rem; font-size: clamp(.7rem, 2.2vw, .84rem); color: var(--ink-mute); line-height: 1.45; }
.growth-highlight-figure { flex-shrink: 0; text-align: right; }
.growth-highlight-figure strong { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.2rem, 4.5vw, 1.8rem); color: var(--gold); line-height: 1; }
.growth-highlight-figure span { display: block; margin-top: .3rem; font-size: clamp(.6rem, 2vw, .74rem); color: var(--ink-mute); max-width: 9ch; line-height: 1.3; }

.growth-disclaimer { margin-top: 1.4rem; font-size: .74rem; line-height: 1.5; color: var(--ink-mute); }

@media (max-width: 640px) {
  .growth-chart-row { flex-direction: column; gap: 0; }
  .growth-stats {
    width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  }
  .growth-stats > .growth-stat:first-child { padding-right: 1rem; border-right: 1px solid var(--line); }
  .growth-stats > .growth-stat:last-child { padding-left: 1rem; }
  .growth-stat strong { font-size: 1.3rem; }
  .growth-stat span { font-size: .72rem; }

  /* Icon sits above the title instead of squeezed into a 3-up row —
     reads with room to breathe instead of compacted. */
  .growth-highlight { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .growth-highlight-icon { width: 40px; height: 40px; }
  .growth-highlight-icon svg { width: 18px; height: 18px; }
  .growth-highlight-title { font-size: .95rem; }
  .growth-highlight-body { font-size: .82rem; }
  .growth-highlight-figure {
    text-align: left; width: 100%;
    margin-top: .2rem; padding-top: .9rem; border-top: 1px solid var(--line);
  }
  .growth-highlight-figure strong { font-size: 1.5rem; }
  .growth-highlight-figure span { max-width: none; }
}

/* =============================================================
   8. Opportunity
   ============================================================= */
/* 3 grid items sharing 2 explicit cells so the background image can sit
   behind both the copy and the diagram without leaving grid/without any
   position:absolute escape hatch. Desktop: image confined to the map
   column, exactly as before. Mobile only: image spans both rows, becoming
   a true background behind the copy too — everything else unchanged. */
.opp-top { align-items: center; }
.opp-copy { grid-column: 1; grid-row: 1; }
.opp-map-bg {
  grid-column: 2; grid-row: 1;
  width: 100%; height: 100%; align-self: stretch; justify-self: stretch;
  overflow: hidden; z-index: 0;
}
.opp-map-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  opacity: .8; filter: sepia(.25) saturate(1.3) brightness(1.02);
}
.opp-map-wrap {
  grid-column: 2; grid-row: 1;
  position: relative; width: 100%; aspect-ratio: 16 / 11; overflow: hidden; z-index: 1;
}
@media (max-width: 979px) {
  .opp-copy { grid-column: 1; grid-row: 1; position: relative; z-index: 1; }
  /* Spans behind both the copy and the diagram, centered so the map's own
     continent artwork sits mid-block rather than crowding the text.
     Full-bleed: symmetric negative margin (exact inverse of .container's
     own padding-inline) pulls a plain <div> — not the <img> itself,
     replaced elements get clamped to their grid area's width by the UA
     even with an explicit size — out to the screen edge on both sides.
     Deliberately not width:100vw + margin-left: iOS Safari's vw unit can
     measure wider than the real visual viewport, which pushed this block
     past the right edge and caused page-wide horizontal scroll on iPhone. */
  .opp-map-bg {
    grid-column: 1; grid-row: 1 / span 2;
    margin-inline: clamp(-3.2rem, -4vw, -1.25rem);
    width: calc(100% + 2 * clamp(1.25rem, 4vw, 3.2rem));
  }
  .opp-map-bg img { object-position: 50% 55%; opacity: .4; filter: sepia(.25) saturate(1.3) brightness(1.08); }
  /* aspect-ratio: 1/1 — the network SVG's viewBox is a 100x100 square
     stretched with preserveAspectRatio="none" to always fill this box
     exactly (needed so the arcs and the percentage-positioned labels/origin
     bubble stay aligned to the same coordinate space). The previous 4/5
     portrait ratio stretched that square hard enough to visibly warp the
     curved arcs into crossed, wire-like lines; matching the viewBox's own
     1:1 ratio keeps the stretch close to none, so the arcs render true. */
  .opp-map-wrap { grid-column: 1; grid-row: 2; margin-top: 2rem; aspect-ratio: 1 / 1; z-index: 1; }
  /* On the narrower mobile aspect-ratio, "Oceanía" (left:84%) plus its
     rightward label offset pushed the word past .opp-map-wrap's own edge,
     clipping it — .opp-map-wrap needs overflow:hidden to contain the
     network's animated pulses, so the fix is pulling just this label
     back in rather than opening up the whole wrap. */
  .opp-node-label--right.opp-node-label--oceania { transform: translate(-10px, -50%); }
}
.opp-network { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.opp-line { fill: none; stroke: var(--gold-2); stroke-width: .45; opacity: .85; filter: drop-shadow(0 0 1.4px rgba(226,192,127,.6)); }
.opp-hub { fill: var(--gold-2); filter: drop-shadow(0 0 2px rgba(226,192,127,.9)); }
.opp-node { fill: var(--gold-2); filter: drop-shadow(0 0 2px rgba(226,192,127,.9)); }
.opp-node-pulse { fill: none; stroke: var(--gold); stroke-width: .35; transform-origin: center; animation: oppNodePulse 3.6s var(--ease-soft) infinite; pointer-events: none; }
@keyframes oppNodePulse { 0% { r: 1.4; opacity: .8; } 100% { r: 6; opacity: 0; } }

.opp-origin {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  width: 140px;
}
.opp-origin-icon {
  width: 68px; height: 68px; border-radius: 50%;
  border: 1.5px solid var(--gold); background: var(--paper); color: var(--gold);
  display: grid; place-items: center; flex-shrink: 0;
}
.opp-origin-label {
  text-align: center; font-family: var(--display); font-weight: 800; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
}
.opp-origin-label span { display: block; margin-top: .3rem; font-family: var(--sans); font-weight: 400; font-size: .74rem; letter-spacing: 0; text-transform: none; color: var(--ink-mute); }

.opp-node-label {
  position: absolute; font-family: var(--display); font-weight: 700; font-size: .74rem;
  letter-spacing: .03em; text-transform: uppercase; color: var(--ink); white-space: nowrap; line-height: 1.3;
}
.opp-node-label--top { transform: translate(-50%, calc(-100% - 10px)); }
.opp-node-label--right { transform: translate(12px, -50%); }
.opp-node-label--bottom { transform: translate(-50%, 10px); text-align: center; white-space: normal; }

.opp-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 720px) { .opp-grid { grid-template-columns: repeat(4, 1fr); } }
.opp-tile { background: var(--paper); padding: 2rem 1.5rem; transition: background .3s var(--ease-out); }
.opp-tile:hover { background: var(--cream-2); }
.opp-icon { width: 42px; height: 42px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; color: var(--ink); margin-bottom: 1.3rem; }
.opp-tile h3 { font-size: 1.05rem; }
.opp-tile p { margin-top: .5rem; font-size: .87rem; color: var(--ink-mute); }
.opp-final { margin-top: 2.4rem; font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.9rem); text-align: center; max-width: 30ch; margin-inline: auto; }

/* =============================================================
   9. Mechanism — 5-stage process
   ============================================================= */
.process { margin-top: 3rem; }
.process-track { display: flex; flex-direction: column; }

/* -- card: mobile default = icon column + copy column, side by side -- */
.process-card {
  display: flex; align-items: flex-start; gap: 1.2rem;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--line-on-black); border-radius: 8px;
  background: var(--black-2);
}
.process-visual { display: flex; flex-direction: column; align-items: center; gap: .7rem; flex-shrink: 0; }
.process-num { font-family: var(--display); font-weight: 700; font-size: .74rem; letter-spacing: .04em; color: var(--gold); line-height: 1; }
.process-icon {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  border: 1px solid var(--line-on-black); background: var(--black);
  color: var(--gold);
  display: grid; place-items: center;
  filter: drop-shadow(0 0 6px rgba(198,154,78,.25));
}
.process-copy { flex: 1; min-width: 0; padding-top: .2rem; }
.process-title { font-size: 1.05rem; }
.process-body { margin-top: .5rem; font-size: .86rem; color: var(--cream-mute-on-black); line-height: 1.5; }

/* -- connector: vertical bridge between stacked mobile cards -- */
.process-connector { display: flex; justify-content: center; padding-block: .3rem; }
.process-connector-line { display: none; }
.process-connector-node {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 8px 1px rgba(198,154,78,.7);
}

@media (min-width: 980px) {
  .process-track { flex-direction: row; align-items: stretch; }
  .process-card {
    flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center;
    text-align: center; padding: 2rem 1.4rem;
  }
  .process-copy { padding-top: .4rem; }
  .process-title { font-size: 1.05rem; max-width: 16ch; }
  .process-body { max-width: 22ch; }

  /* Connector becomes a thin fixed-width column: a horizontal line at the
     same height as every icon's center (cards are equal height via
     align-items:stretch, so that offset is identical in every column),
     with a glowing node at its midpoint — the "line through the icons"
     effect, without needing per-card pixel math. */
  .process-connector { flex: 0 0 2.2rem; padding-block: 0; position: relative; }
  .process-connector-line {
    display: block; position: absolute; left: 0; right: 0;
    top: 7.12rem; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
    opacity: .6;
  }
  .process-connector-node { position: absolute; top: 7.12rem; left: 50%; transform: translate(-50%, -50%); }
}

.process-final {
  margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--line-on-black);
  display: flex; align-items: flex-start; gap: .9rem;
}
.process-final-icon { flex-shrink: 0; color: var(--gold); margin-top: .1rem; }
.process-final p { color: var(--cream-mute-on-black); max-width: 56ch; }
.process-final strong { color: var(--gold-2); font-weight: 600; }

/* =============================================================
   10. Solution
   ============================================================= */
.solution-split {
  display: grid; gap: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "mosaic";
}
@media (min-width: 900px) {
  .solution-split {
    grid-template-columns: 1.15fr 0.85fr; column-gap: 4.5rem; align-items: center;
    grid-template-areas: "mosaic copy";
  }
  .solution-mosaic { margin-top: 0; }
}

.solution-copy { grid-area: copy; }

.solution-mosaic {
  grid-area: mosaic; margin-top: 1.8rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .9rem;
  aspect-ratio: 4/3.4;
}
/* min-height/min-width:0 override the grid default of min-height/width:auto —
   without this, Safari/iOS lets the item's intrinsic content (the <img>)
   push it past its 1fr track instead of shrinking to fit, cropping the
   mosaic oddly; Chrome/Android already shrink grid items correctly without it. */
.solution-mosaic-item { position: relative; overflow: hidden; min-height: 0; min-width: 0; }
.solution-mosaic-item img {
  width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%;
  object-fit: cover; display: block; transition: transform .8s var(--ease-soft);
}
.solution-mosaic-item:hover img { transform: scale(1.06); }
.solution-mosaic-item--1 { grid-row: 1 / 3; grid-column: 1 / 2; }
.solution-mosaic-item--2 { grid-row: 1 / 2; grid-column: 2 / 3; }
.solution-mosaic-item--3 { grid-row: 2 / 3; grid-column: 2 / 3; }

.solution-mosaic-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.3rem 1.1rem 1.1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 15%, rgba(0,0,0,0.4) 60%, transparent 100%);
  pointer-events: none;
}
.solution-mosaic-num { font-family: var(--display); font-weight: 700; font-size: .75rem; letter-spacing: .06em; color: var(--gold); }
.solution-mosaic-caption h3 { margin-top: .3rem; font-size: 1.1rem; color: var(--cream-on-black); }
.solution-mosaic-caption p { margin-top: .25rem; font-size: .82rem; color: var(--cream-mute-on-black); }


/* =============================================================
   11. Differentiation
   ============================================================= */
.diff-quote {
  margin-top: 2.2rem; padding: 1.6rem 1.8rem; border-left: 2px solid var(--gold);
  font-family: var(--display); font-style: normal; font-weight: 600; font-size: 1.15rem; color: var(--cream-on-black);
}
.diff-answer { margin-top: 1.6rem; font-size: 1.05rem; }
.diff-answer strong { color: var(--cream-on-black); font-weight: 600; }

.diff-mockup { position: relative; }
.browser-frame {
  border: 1px solid var(--line-on-black); border-radius: 6px; overflow: hidden;
  background: var(--black-2); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6);
  transform: perspective(1400px) rotateY(-4deg) rotateX(1deg);
  transition: transform .6s var(--ease-soft);
}
.diff-mockup:hover .browser-frame { transform: perspective(1400px) rotateY(0deg) rotateX(0deg); }
.browser-chrome { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line-on-black); }
.browser-chrome span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-on-black); }
.browser-chrome .url { margin-left: .8rem; font-size: .7rem; color: var(--cream-mute-on-black); background: rgba(255,255,255,0.04); padding: .25rem .7rem; border-radius: 3px; flex: 1; }
.browser-body img { width: 100%; display: block; }

/* =============================================================
   12. Demonstration — live coded mockup
   ============================================================= */
.demo-split {
  display: grid; gap: 0;
  grid-template-areas: "eyebrow" "heading" "lede" "orbit" "lower";
}
@media (min-width: 900px) {
  .demo-split {
    grid-template-columns: 1.15fr 0.85fr; column-gap: 4.5rem; row-gap: 0; align-items: start;
    grid-template-areas: "eyebrow orbit" "heading orbit" "lede orbit" "lower lower";
  }
}

.demo-lower { grid-area: lower; }

.demo-orbit { grid-area: orbit; position: relative; margin-top: 2.6rem; }
@media (min-width: 900px) { .demo-orbit { margin-top: 0; } }

.orbit-line-wrap { position: absolute; left: 0; top: 27px; bottom: 27px; width: 54px; z-index: 0; }
.orbit-line-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; }
.orbit-line-wrap path { stroke: var(--gold); stroke-width: 1.6; }

.orbit-item { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 1.1rem; transition-delay: calc(var(--i, 0) * .15s); }
.orbit-item:not(:first-child) { margin-top: 2rem; }
.orbit-icon {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--gold); background: var(--paper); color: var(--ink);
  display: grid; place-items: center;
  transform: scale(.7); opacity: 0;
  transition: transform .6s var(--ease-soft), opacity .6s var(--ease-soft);
  transition-delay: calc(var(--i, 0) * .15s + .2s);
}
.orbit-item.is-revealed .orbit-icon { transform: scale(1); opacity: 1; }
.orbit-copy h3 { font-size: 1.05rem; }
.orbit-copy p { margin-top: .3rem; font-size: .88rem; color: var(--ink-mute); }


.mockup-stage { margin-top: 3.5rem; display: grid; gap: 2.5rem; align-items: end; }
@media (min-width: 980px) { .mockup-stage { grid-template-columns: 1fr 300px; } }

.device-desktop { border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 50px 100px -40px rgba(18,17,16,0.35); }
.device-desktop .browser-chrome { border-bottom-color: var(--line); }
.device-desktop .browser-chrome span { background: var(--line); }
.device-desktop .browser-chrome .url { background: var(--cream-2); color: var(--ink-mute); }

.mini-store { position: relative; }
.mini-nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.6rem; border-bottom: 1px solid var(--line); }
.mini-logo { font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.mini-nav-links { display: none; gap: 1.5rem; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); }
@media (min-width: 600px) { .mini-nav-links { display: flex; } }
.mini-cart { width: 26px; height: 26px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-size: .7rem; }

.mini-hero { position: relative; aspect-ratio: 16/8; overflow: hidden; border-bottom: 1px solid var(--line); }
.mini-hero img { width: 100%; height: 100%; object-fit: cover; }
.mini-hero-copy { position: absolute; left: 1.6rem; bottom: 1.4rem; color: #fff; }
.mini-hero-copy p.eyebrow-mini { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); margin-bottom: .3rem; }
.mini-hero-copy h4 { color: #fff; font-size: clamp(1.1rem, 2.4vw, 1.6rem); }

.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.mini-product { background: var(--paper); }
.mini-product .ph { aspect-ratio: 3/4; background: var(--cream-2); position: relative; overflow: hidden; }
.mini-product .ph img { width: 100%; height: 100%; object-fit: cover; }
.mini-product .info { padding: .7rem .8rem; }
.mini-product .info .name { font-size: .74rem; font-weight: 600; }
.mini-product .info .price { font-size: .7rem; color: var(--ink-mute); margin-top: .2rem; }

.device-mobile { width: 240px; margin-inline: auto; border-radius: 26px; border: 8px solid var(--ink); overflow: hidden; background: var(--paper); box-shadow: 0 40px 80px -30px rgba(18,17,16,0.4); }
@media (min-width: 980px) { .device-mobile { margin-inline: 0; } }
.device-mobile .notch { height: 18px; background: var(--ink); display: flex; align-items: center; justify-content: center; }
.device-mobile .notch span { width: 46px; height: 5px; border-radius: 4px; background: rgba(255,255,255,0.25); }
.mobile-screen .mini-hero { aspect-ratio: 3/4; }
.mobile-screen .mini-grid { grid-template-columns: repeat(2, 1fr); }
.mobile-screen .mini-nav { padding: .8rem 1rem; }

.market-toggle { margin-bottom: 1.4rem; display: flex; gap: .5rem; justify-content: center; }
@media (min-width: 980px) { .market-toggle { justify-content: flex-start; } }
.market-toggle button {
  font-size: .72rem; letter-spacing: .06em; padding: .4rem .8rem; border: 1px solid var(--line); color: var(--ink-mute);
  transition: all .25s var(--ease-out);
}
.market-toggle button.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* =============================================================
   13. Oferta
   ============================================================= */
.offer-tiers-wrap { margin-top: 3rem; }
.offer-tiers-viewport { overflow: hidden; touch-action: pan-y; transition: height .35s var(--ease-soft); }
.offer-tiers { display: flex; align-items: flex-start; transition: transform .5s var(--ease-soft); }
@media (min-width: 620px) {
  .offer-tiers-viewport { overflow: visible; }
  .offer-tiers { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; gap: 1.2rem; transform: none !important; }
}
@media (min-width: 980px) { .offer-tiers { grid-template-columns: repeat(4, 1fr); } }

.offer-tiers-nav { margin-top: 1.4rem; display: flex; justify-content: center; gap: .6rem; }
@media (min-width: 620px) { .offer-tiers-nav { display: none; } }
.offer-tiers-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--gold); background: transparent;
  color: var(--cream-on-black); display: grid; place-items: center; cursor: pointer;
  transition: background .25s var(--ease-out), color .25s var(--ease-out);
}
.offer-tiers-btn:hover { background: var(--gold); color: var(--black); }

.offer-tier {
  flex: 0 0 100%; width: 100%;
  border: 1px solid var(--line-on-black); padding: 2rem 1.6rem; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
@media (min-width: 620px) { .offer-tier { width: auto; } }
.offer-tier:hover { border-color: var(--gold); }
@media (min-width: 620px) { .offer-tier:hover { transform: translateY(-4px); } }
.offer-tier-eyebrow { font-family: var(--display); font-weight: 700; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); }
.offer-tier-name { margin-top: .5rem; font-size: 1.3rem; }
.offer-tier-price { margin-top: 1.2rem; font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--cream-on-black); }
.offer-tier-price-prefix { font-family: var(--sans); font-weight: 400; font-size: .65rem; letter-spacing: .02em; color: var(--cream-mute-on-black); margin-right: .3rem; vertical-align: middle; }
.offer-tier-products { margin-top: .5rem; font-size: .88rem; color: var(--cream-mute-on-black); }
.offer-tier-cta {
  margin-top: 1.6rem; width: 100%; padding: .8rem 1rem; border: 1px solid var(--gold);
  font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .04em;
  color: var(--cream-on-black); transition: background .25s var(--ease-out), color .25s var(--ease-out);
}
.offer-tier-cta:hover { background: var(--gold); color: var(--black); }

.offer-tier-accordion { margin-top: 2rem; width: 100%; text-align: left; }

.offer-accordion-item { border-top: 1px solid var(--line-on-black); }
.offer-accordion-item summary {
  list-style: none; cursor: pointer; padding-block: .9rem;
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .04em;
  color: var(--cream-on-black);
}
.offer-accordion-item summary::-webkit-details-marker { display: none; }
.offer-accordion-caret { flex-shrink: 0; color: var(--gold); transition: transform .3s var(--ease-out); }
.offer-accordion-item[open] .offer-accordion-caret { transform: rotate(180deg); }

.offer-accordion-list { padding-block: .3rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
.offer-accordion-list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .84rem; color: var(--cream-mute-on-black); }
.offer-accordion-list svg { flex-shrink: 0; margin-top: .15rem; color: var(--gold); }
.offer-accordion-stat { justify-content: space-between; }
.offer-accordion-stat strong { color: var(--cream-on-black); font-weight: 700; }

.offer-custom {
  margin-top: 3rem; margin-inline: auto; width: fit-content;
  padding: .8rem 1.5rem; border: 1px solid var(--gold);
  display: flex; flex-direction: column; align-items: center;
  transition: background .25s var(--ease-out);
}
.offer-custom:hover { background: rgba(198,154,78,.08); }
.offer-custom-q { font-family: var(--display); font-weight: 700; font-size: .82rem; color: var(--cream-on-black); }
.offer-custom-a { display: inline-flex; align-items: center; gap: .4rem; margin-top: .2rem; font-size: .72rem; color: var(--cream-mute-on-black); }
.offer-custom-a svg { width: 12px; height: 12px; color: var(--gold); transition: transform .25s var(--ease-out); }
.offer-custom:hover .offer-custom-a svg { transform: translateX(3px); }

/* =============================================================
   14. Risk reduction
   ============================================================= */
#riesgo .accent { color: var(--gold); }

.risk-split > div:first-child { min-width: 0; }

@media (min-width: 980px) {
  .risk-split > div:last-child { padding-left: 3.5rem; }
}

.risk-carousel { margin-top: 2.4rem; }
.risk-viewport { overflow: hidden; touch-action: pan-y; }
.risk-points { display: flex; transition: transform .6s var(--ease-soft); }
.risk-point { flex: 0 0 100%; width: 100%; }
.risk-point-icon {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--gold);
  color: var(--ink); display: grid; place-items: center;
}
.risk-point-num { display: block; margin-top: .9rem; font-family: var(--display); font-weight: 700; font-size: .8rem; color: var(--gold); }
.risk-point h3 { margin-top: .3rem; font-size: .95rem; }
.risk-point-tab { display: block; width: 26px; height: 4px; margin-top: .7rem; background: var(--gold); border-radius: 2px; }
.risk-point p { margin-top: .7rem; font-size: 1rem; color: var(--ink-mute); }

.risk-carousel-nav { margin-top: .4rem; display: flex; gap: .6rem; }
.risk-carousel-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--gold); background: transparent;
  color: var(--ink); display: grid; place-items: center; cursor: pointer;
  transition: background .25s var(--ease-out), color .25s var(--ease-out);
}
.risk-carousel-btn:hover { background: var(--gold); color: var(--paper); }

.risk-outcomes { margin-top: 2.4rem; position: relative; display: flex; flex-direction: column; }
@media (min-width: 980px) { .risk-outcomes { margin-top: 0; } }

.risk-outcomes-line { position: absolute; left: 0; top: 0; bottom: 0; width: 64px; z-index: 0; }
.risk-outcomes-line svg { width: 100%; height: 100%; display: block; overflow: visible; }
.risk-outcomes-line path {
  stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 2.5 7; opacity: 1;
  animation: risk-line-flow 7s linear infinite;
}
@keyframes risk-line-flow { to { stroke-dashoffset: -190; } }

.risk-outcome { position: relative; z-index: 1; display: flex; gap: 1.3rem; align-items: flex-start; }
.risk-outcome:not(:first-child) { margin-top: 2.2rem; }
.risk-outcome-icon {
  flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%;
  border: 1px solid var(--gold); background: var(--cream-2); color: var(--ink);
  display: grid; place-items: center;
}
.risk-outcome-num { font-family: var(--display); font-weight: 700; font-size: .8rem; color: var(--gold); }
.risk-outcome-copy h3 { margin-top: .4rem; font-size: 1.1rem; }
.risk-outcome-copy p { margin-top: .5rem; color: var(--ink-mute); }

/* =============================================================
   14b. FAQ
   ============================================================= */
.faq-split > div:first-child { min-width: 0; }
@media (min-width: 980px) { .faq-split > div:last-child { padding-left: 3.5rem; } }

.faq-rule { display: block; width: 40px; height: 2px; margin-top: 1.8rem; background: var(--gold); }

.faq-list { display: flex; flex-direction: column; }

/* Category-level accordion — same visual language as the question-level
   accordion below (identical summary layout, num/icon styling), just with
   a bolder title so it reads as a heading over its nested questions. */
.faq-category { border-top: 1px solid var(--line); }
.faq-category:last-child { border-bottom: 1px solid var(--line); }
.faq-cat-summary {
  list-style: none; cursor: pointer; padding-block: 1.5rem;
  display: flex; align-items: center; gap: 1.2rem;
}
.faq-cat-summary::-webkit-details-marker { display: none; }
.faq-cat-title { flex: 1; min-width: 0; font-family: var(--display); font-size: 1.1rem; color: var(--ink); }
.faq-cat-items { padding-bottom: .4rem; }

.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding-block: 1.5rem;
  display: flex; align-items: center; gap: 1.2rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-num { flex-shrink: 0; font-family: var(--display); font-weight: 700; font-size: .82rem; color: var(--gold); }
.faq-q { flex: 1; min-width: 0; font-size: 1.02rem; color: var(--ink); font-weight: 500; }
.faq-icon { flex-shrink: 0; position: relative; width: 18px; height: 18px; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--gold);
  transform: translate(-50%, -50%); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.faq-icon::before { width: 14px; height: 1.6px; }
.faq-icon::after { width: 1.6px; height: 14px; }
.faq-item[open] .faq-icon::after, .faq-category[open] > .faq-cat-summary .faq-icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

.faq-a { padding-bottom: 1.6rem; padding-right: 2rem; font-size: .92rem; color: var(--ink-mute); line-height: 1.6; }
.faq-a p + p { margin-top: .8rem; }

.faq-more { margin-top: 2rem; display: flex; align-items: center; gap: .7rem; font-size: .92rem; color: var(--ink-mute); }
.faq-more-icon { flex-shrink: 0; color: var(--gold); display: flex; }
.faq-more a { color: var(--gold); font-weight: 600; transition: color .2s var(--ease-out); }
.faq-more a:hover { color: var(--ink); }

/* =============================================================
   15. CTA final
   ============================================================= */
.cta-final { position: relative; overflow: hidden; overflow: clip; }
.cta-final::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 140%;
  background: radial-gradient(45% 40% at 50% 20%, rgba(198,154,78,.14), transparent 70%);
  pointer-events: none;
}
.cta-grid { display: grid; gap: 3rem; position: relative; z-index: 1; }
@media (min-width: 980px) { .cta-grid { grid-template-columns: 1fr 1fr; align-items: center; } }

.cta-form { display: flex; flex-direction: column; gap: 1.1rem; }
.field { position: relative; }
.field input, .field select, .field textarea {
  width: 100%; padding: 1.3rem 1rem .5rem; border: 1px solid var(--line-on-black);
  background: rgba(247,244,238,0.03); color: var(--cream-on-black);
  border-radius: 2px; font-family: var(--sans); font-size: .95rem;
  transition: border-color .3s var(--ease-out);
}
.field textarea { min-height: 100px; resize: vertical; padding-top: 1.4rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); outline: none; }
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23a49c8c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 11px 8px;
}
.field select option { background-color: var(--ink); color: var(--cream-on-black); }
.field label { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; transition: all .25s var(--ease-out); color: var(--cream-mute-on-black); font-size: .92rem; }
.field textarea + label { top: 1.4rem; transform: none; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select:focus + label, .field select:valid + label {
  top: .5rem; transform: none; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2);
}

.cta-submit { margin-top: .3rem; align-self: flex-start; position: relative; }
.cta-form.is-sending .cta-submit-label { opacity: 0; }
.cta-submit-label { transition: opacity .2s; }
.cta-submit-spinner { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.cta-form.is-sending .cta-submit-spinner { display: flex; }
.cta-submit-spinner::after { content: ""; width: 16px; height: 16px; border: 2px solid rgba(11,11,10,0.35); border-top-color: var(--black); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cta-form.is-sent { display: none; }
.cta-success { display: none; flex-direction: column; gap: .8rem; align-items: flex-start; padding: 1.6rem; border: 1px solid var(--gold); background: var(--gold-dim); }
.cta-success.is-visible { display: flex; }
.cta-success h3 { color: var(--gold-2); font-size: 1.3rem; }
.cta-success p { color: var(--cream-mute-on-black); font-size: .92rem; }
.cta-fine { margin-top: 1.6rem; font-size: .85rem; color: var(--cream-mute-on-black); }
.cta-actions-secondary { margin-top: 1.4rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* =============================================================
   16. Footer
   ============================================================= */
.footer { border-top: 1px solid var(--line-on-black); padding-block: 3rem; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.6rem; font-size: .84rem; color: var(--cream-mute-on-black); }
.footer-links a:hover { color: var(--gold-2); }
.footer-bottom { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--line-on-black); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .78rem; color: var(--cream-mute-on-black); }

/* -- sticky floating CTA -- */
.sticky-cta {
  position: fixed; z-index: 90;
  right: 1.5rem; bottom: 1.5rem;
  padding: .95rem 1.5rem; font-size: .86rem;
  box-shadow: 0 14px 34px -10px rgba(198,154,78,.55);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility .4s;
}
.sticky-cta.is-visible { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 639px) {
  .sticky-cta { left: 1rem; right: 1rem; bottom: 1rem; text-align: center; justify-content: center; }
}

/* -- FAQ sticky bubble — always visible, unlike .sticky-cta which only
   appears past the hero; parked on the left so it never collides with the
   sticky CTA (full-width on mobile, right-aligned pill on desktop) -- */
.faq-sticky {
  position: fixed; z-index: 90; left: 1.5rem; bottom: 1.5rem;
  display: flex; align-items: center; gap: .65rem;
  background: var(--gold); color: var(--cream);
  padding: .5rem 1.1rem .5rem .5rem; border-radius: 999px;
  font-family: var(--display); font-weight: 700; font-size: .82rem; white-space: nowrap;
  box-shadow: 0 14px 34px -10px rgba(198,154,78,.55);
  transition: transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.faq-sticky:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -10px rgba(198,154,78,.65); }
.faq-sticky-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  color: var(--cream);
  display: grid; place-items: center; font-size: 1.05rem; font-weight: 800;
}
@media (max-width: 639px) {
  /* Balloon: single flat circle with just the "?" — the pill label only
     makes sense with room to breathe, so it drops out on small screens.
     Right-aligned so it stacks directly above the sticky CTA. */
  .faq-sticky {
    left: auto; right: 1rem; bottom: 5.3rem;
    width: 52px; height: 52px; padding: 0;
    justify-content: center; border-radius: 50%;
  }
  .faq-sticky-label { display: none; }
  .faq-sticky-icon { width: 100%; height: 100%; color: var(--cream); font-size: 1.3rem; }
}

/* -- flag icon buttons shared by the mobile (next to burger) and desktop
      (stacked above the sticky CTA) language switchers -- */
.lang-switch--burger, .lang-switch--cta {
  display: flex; flex-shrink: 0;
  background: var(--paper); border-color: var(--line); box-shadow: 0 8px 18px -8px rgba(18,17,16,.35);
}
.lang-switch--burger button, .lang-switch--cta button { display: block; padding: .55rem; }
.lang-switch--burger button svg, .lang-switch--cta button svg { display: block; border-radius: 2px; }
.lang-switch--burger button + button, .lang-switch--cta button + button { border-left: 1px solid var(--line); }
.lang-switch--burger button.is-active, .lang-switch--cta button.is-active { background: transparent; opacity: 1; box-shadow: inset 0 -2px 0 var(--gold); }
.lang-switch--burger button:not(.is-active), .lang-switch--cta button:not(.is-active) { opacity: .5; }

/* mobile: sits next to the burger in the header row */
@media (min-width: 980px) { .lang-switch--burger { display: none; } }

/* desktop: fixed above the sticky CTA — lives at body level (not inside the
   animated <header data-reveal>) so position:fixed is relative to the
   viewport, not a transformed ancestor's containing block */
.lang-switch--cta { display: none; }
@media (min-width: 980px) {
  .lang-switch--cta {
    display: flex; position: fixed; z-index: 91; right: 1.5rem; bottom: 5.3rem;
    box-shadow: 0 14px 34px -10px rgba(18,17,16,.35);
  }
}

/* =============================================================
   17. Reveal / split
   ============================================================= */
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .85s var(--ease-soft), transform .85s var(--ease-soft); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }
.split-word { display: inline-block; will-change: transform, opacity; }

/* =============================================================
   18. Tilt
   ============================================================= */
[data-tilt] { --rx: 0deg; --ry: 0deg; }

/* =============================================================
   19. Reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-node-pulse { animation: none; }
  .opp-node-pulse { animation: none; }
  html { scroll-behavior: auto; }
}