/* =============================================================
   WTM Corporate Site — shared.css
   Common components for /home, /about, /mor, /privacy.
   Reuses tokens from colors_and_type.css. No new tokens here.
   ============================================================= */

/* ---------- 0. RESET + LAYOUT BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:root {
  --maxw: 1200px;
  --pad: clamp(24px, 5vw, 72px);
}

[data-lucide] { width: 1em; height: 1em; stroke-width: 2; flex-shrink: 0; }

/* ---------- 1. TYPOGRAPHY HELPERS ---------- */
.eyebrow {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: ""; width: 24px; height: 1px; background: currentColor; display: block;
}
.eyebrow-light { color: rgba(255, 255, 255, .78); }
.eyebrow-violet { color: var(--accent); }

.h-display {
  font-family: var(--font-heading); font-weight: 700;
  /* Dialled down from clamp(2.4rem, 5.2vw, 4.4rem) — the previous
     ceiling (~70px) overwhelmed the hero on wide screens. New range
     tops out around 56px and the fluid step is gentler. */
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
  line-height: 1.06; letter-spacing: -.025em; text-wrap: balance;
}
.h-section {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.08; letter-spacing: -.022em; text-wrap: balance;
}
.h-card {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 1.1rem; letter-spacing: -.01em; line-height: 1.25;
}
.lead {
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.62; color: var(--fg-muted);
  text-wrap: pretty; max-width: 62ch;
}
.versatylo {
  font-family: var(--font-display); font-weight: 400;
  text-transform: lowercase; letter-spacing: -.01em; line-height: .95;
}

/* ---------- 2. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  letter-spacing: .01em;
  padding: 13px 24px; border-radius: 9999px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-accent { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-brand { background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn-brand:hover { background: var(--brand-hover); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--border-strong); background: #fafbfc; }
.btn-light { background: #fff; color: var(--brand); }
.btn-light:hover { background: var(--bg-soft); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.btn [data-lucide] { font-size: 16px; stroke-width: 2.2; }

/* ---------- 3. SECTIONS ---------- */
.section { padding: clamp(80px, 9vw, 128px) var(--pad); }
.section-inner { max-width: var(--maxw); margin: 0 auto; }
.section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.section-head .lead { margin-top: 18px; }
.section-head .eyebrow { margin-bottom: 18px; }

.section-dark { background: var(--wtm-ink); color: #fff; }
.section-dark .h-section,
.section-dark h3,
.section-dark h4 { color: #fff; }
.section-dark .lead { color: rgba(236, 236, 238, .78); }

.section-deep {
  background: linear-gradient(180deg, #0F2D3D 0%, var(--wtm-deep-teal) 100%);
  color: #fff;
}
.section-deep .h-section,
.section-deep h3,
.section-deep h4 { color: #fff; }
.section-deep .lead { color: rgba(236, 236, 238, .85); }

.section-pearl { background: var(--bg-soft); }

/* ---------- 4. NAV (corporate) ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--pad);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  transition: box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.nav.scrolled { box-shadow: 0 1px 0 var(--border-soft), var(--shadow-xs); }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: var(--maxw); margin: 0 auto; gap: 32px;
}
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo img { height: 30px; width: auto; }
.nav-links { display: flex; gap: 30px; }
.nav-links a {
  font-family: var(--font-heading); font-weight: 500; font-size: 14px;
  color: var(--fg); letter-spacing: .01em;
  position: relative; padding: 6px 0;
  transition: color var(--dur-base) var(--ease-out);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, var(--wtm-ocean), var(--accent));
  border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .35s var(--ease-out);
}
.nav-links a:hover { color: var(--wtm-ocean); }
.nav-links a.active { color: var(--brand); font-weight: 600; }
.nav-links a.active::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: 14px; }

.lang-toggle {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: 9999px; padding: 4px;
  font-family: var(--font-heading); font-weight: 600; font-size: 11px; letter-spacing: .12em;
}
.lang-toggle span {
  padding: 4px 10px; border-radius: 9999px; color: var(--fg-muted); cursor: pointer;
}
.lang-toggle span.on { background: var(--brand); color: #fff; }

/* ---------- 5. HERO (corporate variant) ---------- */
.hero {
  position: relative; overflow: hidden;
  /* Fill the viewport minus the sticky nav (~58–64px depending on
     state). Previously 88svh; after the h1 size cut the content no
     longer pushed the hero taller and the next section bled into the
     fold on FullHD. */
  min-height: calc(100svh - 64px);
  display: flex; align-items: center;
  padding: clamp(56px, 6vw, 88px) var(--pad);
  color: #fff; isolation: isolate;
}
.hero-photo {
  position: absolute; inset: 0; z-index: -2;
  background: var(--wtm-deep-teal);
}
.hero-photo[data-bg="photo"] {
  background: url("../assets/photo_pattern_03.webp") center/cover no-repeat;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(115deg, rgba(5, 5, 5, .82) 0%, rgba(22, 70, 93, .78) 50%, rgba(11, 108, 138, .55) 100%),
    radial-gradient(ellipse 60% 70% at 85% 30%, rgba(134, 62, 243, .22) 0%, transparent 60%);
}
.hero-inner {
  max-width: var(--maxw); margin: 0 auto; width: 100%; position: relative;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center;
}
.hero-content { max-width: 60ch; }
.hero-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78); margin-bottom: 24px;
}
.hero-eyebrow::before {
  content: ""; width: 36px; height: 1px; background: rgba(255, 255, 255, .45); display: block;
}
.hero h1 { color: #fff; max-width: 22ch; }
.hero h1 .accent { color: #A77BFF; }
.hero-lead {
  color: rgba(236, 236, 238, .88); max-width: 56ch; margin-top: 22px;
  font-size: clamp(1.05rem, 1.4vw, 1.18rem); font-weight: 300; line-height: 1.6;
}
.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px;
  /* Equal margins above and below so the CTA row reads as centered
     between the hero copy and the stat strip. Previously the row had
     36px above (to the lead p) and inherited 28px below (from the
     stat strip's margin-top) — asymmetric. */
  margin: 32px 0;
}
.hero-visual {
  position: relative;
  display: grid; place-items: center;
}
.hero-visual img { max-height: 480px; width: auto; filter: drop-shadow(0 20px 50px rgba(11, 108, 138, .45)); }

/* short hero — for /privacy, /thankyou-like pages */
.hero-short { min-height: auto; padding: clamp(96px, 12vw, 160px) var(--pad) clamp(48px, 6vw, 80px); }
.hero-short .hero-inner { grid-template-columns: 1fr; }

/* ---------- 6. FEATURE GRID (4 / 6 cards) ---------- */
.feature-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.feature-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border);
}
.feature-card .ic {
  width: 44px; height: 44px; border-radius: 9999px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(11, 108, 138, .12), rgba(134, 62, 243, .12));
  color: var(--brand);
  font-size: 20px;
}
.feature-card .h-card { color: var(--fg); }
.feature-card p {
  font-size: 14px; line-height: 1.6; color: var(--fg-muted);
}

.section-dark .feature-card,
.section-deep .feature-card {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .10);
}
.section-dark .feature-card:hover,
.section-deep .feature-card:hover { border-color: rgba(255, 255, 255, .25); }
.section-dark .feature-card .h-card,
.section-deep .feature-card .h-card { color: #fff; }
.section-dark .feature-card p,
.section-deep .feature-card p { color: rgba(236, 236, 238, .75); }
.section-dark .feature-card .ic,
.section-deep .feature-card .ic {
  background: rgba(255, 255, 255, .08);
  color: #A77BFF;
}

/* ---------- 7. STATS STRIP ---------- */
.stats-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 40px 0;
}
.stat-cell {
  padding: 28px 22px;
  border-right: 1px solid rgba(255, 255, 255, .12);
  text-align: center;
}
.stat-cell:last-child { border-right: none; }
.stat-num {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  letter-spacing: -.025em; color: #fff; display: block; line-height: 1;
}
.stat-num span { color: #A77BFF; }
.stat-label {
  font-size: 12px; color: rgba(236, 236, 238, .72);
  letter-spacing: .06em; margin-top: 8px; display: block;
}

/* ---------- 8. TESTIMONIALS ---------- */
.testimonial-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.testimonial {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  display: flex; flex-direction: column; gap: 18px;
}
.testimonial-quote {
  font-family: var(--font-body); font-weight: 300;
  font-size: 15px; line-height: 1.6; color: var(--fg);
  font-style: italic;
}
.testimonial-quote::before {
  content: "“"; font-family: var(--font-display);
  font-size: 2.6rem; line-height: 0;
  color: var(--accent);
  vertical-align: -.35em; margin-right: 4px;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-author img {
  width: 44px; height: 44px; border-radius: 9999px; object-fit: cover;
  border: 2px solid var(--border-soft);
}
.testimonial-author .who {
  display: flex; flex-direction: column;
  font-family: var(--font-heading); font-size: 13px;
}
.testimonial-author .who b { color: var(--fg); font-weight: 600; }
.testimonial-author .who span { color: var(--fg-muted); font-weight: 400; font-size: 12px; }

/* ---------- 9. LOGO WALL ---------- */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}
.logo-cell {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  height: 88px;
  display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  letter-spacing: .04em; color: var(--fg-soft);
  transition: border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.logo-cell:hover { border-color: var(--border); color: var(--fg-muted); }

/* ---------- 9b. LOGO MARQUEE (auto-scrolling carousel) ---------- */
.logo-marquee-wrap {
  margin-top: 32px;
}
.logo-marquee-label {
  display: block;
  text-align: center;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: 18px;
}
.logo-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* Soft fade-out on the edges so logos appear/disappear gracefully */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.logo-marquee-track {
  display: flex;
  gap: 64px;
  width: max-content;
  padding: 8px 0;
  animation: marquee-scroll 36s linear infinite;
}
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
.logo-marquee-track img {
  height: 44px; width: auto; flex-shrink: 0;
  opacity: .85;
  transition: opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.logo-marquee-track img:hover { opacity: 1; }

/* Dark-section variant: invert + raise opacity */
.section-dark .logo-marquee-track img,
.section-deep .logo-marquee-track img,
.dark .logo-marquee-track img {
  filter: brightness(0) invert(1);
  opacity: .75;
}
.section-dark .logo-marquee-track img:hover,
.section-deep .logo-marquee-track img:hover,
.dark .logo-marquee-track img:hover { opacity: 1; }
.section-dark .logo-marquee-label,
.section-deep .logo-marquee-label { color: rgba(236, 236, 238, .55); }
.section-dark .logo-marquee,
.section-deep .logo-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
  .logo-marquee {
    overflow-x: auto;
    -webkit-mask-image: none; mask-image: none;
  }
}
@media (max-width: 720px) {
  .logo-marquee-track { gap: 40px; }
  .logo-marquee-track img { height: 34px; }
}

/* ---------- 10. CHIPS / TAGS ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 500; font-size: 13px;
  padding: 10px 18px; border-radius: 9999px;
  background: #fff; border: 1px solid var(--border-soft);
  color: var(--fg);
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.chip:hover { border-color: var(--brand); background: var(--wtm-teal-50); }
.chip-accent { background: rgba(134, 62, 243, .08); border-color: rgba(134, 62, 243, .22); color: var(--accent); }

/* ---------- 11. LEAD FORM (inline + modal) ---------- */
.lead-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.lead-form .field-full { grid-column: 1 / -1; }
.lead-form .field {
  display: flex; flex-direction: column; gap: 6px;
}
.lead-form label {
  font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted);
}
.lead-form input,
.lead-form select,
.lead-form textarea {
  font-family: var(--font-body); font-size: 15px; color: var(--fg);
  padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: #fff;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  width: 100%;
}
.lead-form select { appearance: none; cursor: pointer; background-image:
  linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%),
  linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
  padding-right: 36px;
}
.lead-form textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(11, 108, 138, .15);
}
.lead-form .terms {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--fg-muted); line-height: 1.5;
}
.lead-form .terms input { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.lead-form .terms a { color: var(--brand); text-decoration: underline; }
.lead-form .submit-row { grid-column: 1 / -1; }
.lead-form .submit-row .btn { width: 100%; justify-content: center; }

/* dark form (used on .section-dark CTA) */
.section-dark .lead-form label { color: rgba(236, 236, 238, .65); }
.section-dark .lead-form input,
.section-dark .lead-form select,
.section-dark .lead-form textarea {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .15);
  color: #fff;
}
.section-dark .lead-form input::placeholder { color: rgba(236, 236, 238, .45); }
.section-dark .lead-form .terms { color: rgba(236, 236, 238, .65); }
.section-dark .lead-form .terms a { color: #A77BFF; }
.section-dark .lead-form select {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, .65) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, .65) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}

/* <option> styling --------------------------------------------------
   The popup that opens when a <select> is clicked is OS-rendered, but
   modern browsers honor option's background-color + color. Without
   these rules, dark-themed selects inherit `color:#fff` from the parent
   which renders as invisible white-on-white text in the OS popup.
   We force a solid dark slab so the options are always readable in
   both light and dark variants. ------------------------------------- */
.lead-form select option {
  background: #ffffff;
  color: #050505;
}
.section-dark .lead-form select option,
.modal-card .lead-form select option {
  background: #16465D;
  color: #ffffff;
}

/* ============================================================
   STAT STRIP — reusable headline metrics block
   Two variants:
     .stat-strip-hero  → compact, sits inside the dark hero below
                         the CTAs; thin glass background.
     .stat-strip-map   → floats over the bottom edge of the globe /
                         markets section; matches the legacy
                         .globe-stat look.
   Numbers count up via shared.js initStatStrip() when the strip
   enters the viewport. Each value is composed of three spans:
   optional prefix (e.g. "US$"), the animated number, and a suffix
   (e.g. "M+", "K+", "+"). ============================================ */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  font-family: var(--font-heading);
}
.stat-strip .stat-cell {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 4px;
  padding: 16px 22px;
  border-right: 1px solid rgba(255, 255, 255, .14);
}
.stat-strip .stat-cell:last-child { border-right: none; }
.stat-strip .stat-value {
  font-size: clamp(1.65rem, 2.4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1;
  display: inline-flex; align-items: baseline; gap: 3px;
  white-space: nowrap;
}
.stat-strip .stat-prefix {
  font-size: .55em; font-weight: 600;
  color: rgba(255, 255, 255, .6);
}
.stat-strip .stat-suffix {
  font-size: .68em; font-weight: 700;
  color: #A77BFF;
}
.stat-strip .stat-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-top: 2px;
}

/* hero variant — sits inline below the hero CTAs.
   No top margin: .hero-actions already provides symmetric 32px space
   above and below the CTA row, so adding more here would push the
   strip too far down. */
.stat-strip-hero {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  max-width: 580px;
}

/* map variant — overlays the bottom of a globe/markets section */
.stat-strip-map {
  position: relative; margin-top: -24px;
  max-width: 760px; margin-left: auto; margin-right: auto;
  background: rgba(5, 5, 5, .35);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-md);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.stat-strip-map .stat-cell { padding: 22px 18px; }

@media (max-width: 640px) {
  .stat-strip { grid-template-columns: 1fr; }
  .stat-strip .stat-cell {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .stat-strip .stat-cell:last-child { border-bottom: none; }
  .stat-strip-hero { max-width: none; }
}

/* honeypot */
.hp-field {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
  opacity: 0 !important; pointer-events: none !important;
}

/* submit loading + success */
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn .spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: spin .7s linear infinite; display: none;
}
.btn.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-success {
  display: none; flex-direction: column; align-items: center; text-align: center;
  padding: 24px 12px;
}
.form-success.show { display: flex; }
.form-success .check-ring {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(134, 62, 243, .16), rgba(11, 108, 138, .10));
  border: 1px solid rgba(134, 62, 243, .32);
  margin-bottom: 16px;
}
.form-success .check-ring [data-lucide] { font-size: 28px; color: var(--accent); }
.form-success-title {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem;
  color: var(--fg); margin-bottom: 6px;
}
.section-dark .form-success-title { color: #fff; }
.form-success-sub {
  font-size: 14px; color: var(--fg-muted); line-height: 1.55;
}
.section-dark .form-success-sub { color: rgba(236, 236, 238, .72); }

/* ---------- 12. MODAL ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 28, 42, 0);
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  transition: background .42s cubic-bezier(.22, .61, .36, 1),
              backdrop-filter .42s cubic-bezier(.22, .61, .36, 1),
              -webkit-backdrop-filter .42s cubic-bezier(.22, .61, .36, 1);
}
.modal-overlay.show { display: flex; }
.modal-overlay.open {
  background: rgba(15, 28, 42, .72);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
}
.modal-card {
  background: #fff; border-radius: var(--r-lg);
  max-width: 560px; width: 100%;
  padding: 36px 36px 32px; position: relative;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45),
              0 0 0 1px rgba(255, 255, 255, .04);
  opacity: 0; transform: translateY(24px) scale(.96);
  transition: opacity .38s cubic-bezier(.22, .61, .36, 1),
              transform .48s cubic-bezier(.22, .61, .36, 1);
}
.modal-overlay.open .modal-card { opacity: 1; transform: translateY(0) scale(1); }
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 9999px;
  display: grid; place-items: center; cursor: pointer;
  border: none; background: transparent; color: var(--fg-muted);
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.modal-close:hover { background: var(--bg-soft); color: var(--fg); }
.modal-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.5rem; letter-spacing: -.012em; color: var(--fg);
  margin-bottom: 6px;
}
.modal-sub {
  font-family: var(--font-body); font-size: 14px; color: var(--fg-muted);
  line-height: 1.55; margin-bottom: 22px;
}
.modal-card .lead-form { gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal-card { transition: opacity .12s linear; }
  .modal-card { transform: none; }
}

/* ---------- 13. FOOTER (corporate) ---------- */
.footer {
  background: var(--wtm-ink); color: #fff;
  padding: 72px var(--pad) 32px;
}
.footer-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: flex-start;
}
.footer-brand {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 14px; max-width: 320px;
}
.footer-brand img {
  height: 44px; width: auto;
  /* The wtm_branco SVG has internal padding around the wordmark.
     Nudge it left so the visual edge aligns with the text/links column. */
  margin-left: -4px;
  display: block;
}
.footer-brand .versatylo { font-size: 1.4rem; color: rgba(255, 255, 255, .85); }
.footer-brand .footer-meta-row {
  font-size: 13px; color: rgba(236, 236, 238, .55); line-height: 1.6; margin-top: 6px;
}
.footer-brand .footer-meta-row a { color: rgba(236, 236, 238, .85); }

.footer-col h4 {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-family: var(--font-heading); font-weight: 500; font-size: 14px;
  color: rgba(236, 236, 238, .75);
  transition: color var(--dur-base) var(--ease-out);
}
.footer-col a:hover { color: #fff; }

.footer-socials { display: flex; gap: 10px; margin-top: 4px; }
.footer-socials a {
  width: 38px; height: 38px; border-radius: 9999px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.footer-socials a:hover {
  background: rgba(134, 62, 243, .22);
  border-color: rgba(134, 62, 243, .55);
}

.footer-base {
  max-width: var(--maxw); margin: 48px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: rgba(236, 236, 238, .45);
  flex-wrap: wrap; gap: 12px;
}
.footer-base .lang-toggle {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
}
.footer-base .lang-toggle span { color: rgba(236, 236, 238, .55); }
.footer-base .lang-toggle span.on { background: var(--brand); color: #fff; }

/* ---------- 14. PAGE VEIL + REVEAL ---------- */
.page-veil {
  position: fixed; inset: 0; z-index: 1100;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(11, 108, 138, .55) 0%, #0F2D3D 70%, #050505 100%);
  opacity: 0; pointer-events: none;
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1);
}
.page-veil.show { opacity: 1; pointer-events: auto; }

.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* ---------- 15. RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-visual { order: -1; }
  .hero-visual img { max-height: 320px; }
  .nav-links { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .lead-form { grid-template-columns: 1fr; }
  .stats-strip { grid-template-columns: 1fr; }
  .stat-cell { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .stat-cell:last-child { border-bottom: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-base { flex-direction: column; align-items: center; text-align: center; }
  .modal-card { padding: 28px 22px; }
}