:root {
  --cream: #ffffff;
  --cream-soft: #eef3fc;
  --navy: #1a1a1a;
  --navy-soft: #262626;
  --navy-line: rgba(255, 255, 255, 0.08);
  --ink: #1a1a1a;
  --ink-soft: #6b7280;
  --white: #ffffff;
  --cobalt: #1450e6;
  --sky: #12b8e6;
  --gold: #14b8a6;
  --gold-soft: rgba(20, 184, 166, 0.14);
  --mist: #c4cbd6;
  --accent: #1450e6;
  --accent-soft: rgba(20, 80, 230, 0.08);
  --border: rgba(26, 26, 26, 0.08);
  --whatsapp: #1da851;
  --whatsapp-dark: #168a41;
  --radius: 24px;
  --radius-sm: 16px;
  --container: 1180px;
  --container-wide: 1440px;
  --shadow-soft: 0 1px 2px rgba(20, 20, 30, 0.04), 0 16px 32px rgba(20, 20, 30, 0.07);
  --shadow-soft-hover: 0 1px 2px rgba(20, 20, 30, 0.04), 0 24px 44px rgba(20, 20, 30, 0.1);
  --serif: var(--sans);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
.container-wide { max-width: var(--container-wide); }

h1, h2, h3, h4 {
  margin: 0 0 14px;
  line-height: 1.15;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.02em;
}
p { margin: 0 0 16px; color: var(--ink-soft); }
em, i { font-style: normal; color: var(--gold); }

a { color: inherit; text-decoration: none; }

/* SCROLL REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1.is-visible { transition-delay: 0.08s; }
.reveal-delay-2.is-visible { transition-delay: 0.16s; }
.reveal-delay-3.is-visible { transition-delay: 0.24s; }

/* HEADER — floating rounded pill bar, not a full-bleed sticky strip */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  padding: 16px 20px 0;
  margin-bottom: -82px;
}

/* Restore the space the floating header takes up so it doesn't cover page content —
   only the hero (below) pulls itself back up under it, for the background continuity effect. */
main { padding-top: 82px; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 14px 12px 24px;
  max-width: var(--container);
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}

.logo {
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo span { font-style: normal; color: var(--gold); }

.logo-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-link {
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  padding: 8px 0;
  transition: opacity 0.15s ease;
}
.nav-link:hover { opacity: 0.6; }

.nav-item.has-dropdown { position: relative; }

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 44px rgba(18, 23, 43, 0.14);
  padding: 8px;
  display: none;
  flex-direction: column;
  margin-top: 10px;
}

.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown {
  display: flex;
}

.dropdown a {
  padding: 11px 14px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14.5px;
}
.dropdown a:hover { background: var(--cream); color: var(--accent); }

.header-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  margin: 0 auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-family: var(--sans);
  border-radius: 14px;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-sm { padding: 10px 20px; font-size: 13.5px; }
.btn-lg { padding: 16px 32px; font-size: 15.5px; }

.btn-primary {
  background: var(--cobalt);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(20, 80, 230, 0.28);
}
.btn-primary:hover { background: #0b2534; }

/* Outline button — transparent fill, only the contour is visible, so the primary CTA next to it stands out */
.btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--border);
  box-shadow: none;
}
.btn-outline:hover { border-color: var(--cobalt); color: var(--cobalt); background: var(--accent-soft); }

.btn-whatsapp {
  background: var(--whatsapp);
  color: var(--white);
}
.btn-whatsapp:hover { background: var(--whatsapp-dark); }

/* Button text hover animation — the label rolls up and a duplicate rolls in from below */
.btn-text {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.3;
}
.btn-text > span {
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-text::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:hover .btn-text > span { transform: translateY(-100%); }
.btn:hover .btn-text::before { transform: translateY(0); }

.btn-arrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.btn-arrow-icon svg {
  width: 18px;
  height: 18px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-arrow:hover .btn-arrow-icon svg {
  transform: translateX(4px);
}

.icon-whatsapp {
  width: 17px;
  height: 17px;
  fill: currentColor;
  flex-shrink: 0;
}

/* FLOATING WHATSAPP BUTTON — classic green, fixed bottom-right, fades in once the page is scrolled */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 56px;
  height: 56px;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(22px) scale(0.85);
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.wa-float.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Inner circle carries the magnetic mouse-follow offset, separately from the fade/entrance transform above */
.wa-float-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(29, 168, 81, 0.4);
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform 0.15s ease-out, background 0.2s ease;
}
.wa-float:hover .wa-float-inner { background: var(--whatsapp-dark); }
.wa-float:not(:hover) .wa-float-inner { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease; }
.wa-float-inner svg { width: 28px; height: 28px; fill: var(--white); }

/* WHATSAPP LOGO BUTTON — animated gradient shine icon in a black circle */
.wa-logo-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #000;
  display: grid;
  place-items: center;
  box-shadow: inset 0 4px 4px rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.wa-logo-btn:hover { transform: translateY(-2px); }

@property --wa-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.wa-logo {
  --size: 24px;
  --wc1: oklch(100% 0 0);
  --wc2: oklch(84% 0.1 260);
  --wc3: oklch(86% 0.11 330);
  --wa-glow: rgba(255, 255, 255, 0.55);

  width: var(--size);
  height: var(--size);
  position: relative;
  display: block;
  filter: drop-shadow(0 0 calc(var(--size) * 0.12) var(--wa-glow));
  animation: waPulse 3.2s ease-in-out infinite;
}
.wa-logo__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cpath fill='black' d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z' transform='translate(27.5 25.5) scale(1.9)'/%3E%3C/mask%3E%3Cpath fill='black' mask='url(%23m)' d='M50 6A42 42 0 1 1 30 84.6L8 94L15.6 72A42 42 0 0 1 50 6Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cpath fill='black' d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z' transform='translate(27.5 25.5) scale(1.9)'/%3E%3C/mask%3E%3Cpath fill='black' mask='url(%23m)' d='M50 6A42 42 0 1 1 30 84.6L8 94L15.6 72A42 42 0 0 1 50 6Z'/%3E%3C/svg%3E") center/contain no-repeat;
  background:
    conic-gradient(from calc(var(--wa-angle) * 2) at 25% 70%, var(--wc3), transparent 20% 80%, var(--wc3)),
    conic-gradient(from calc(var(--wa-angle) * 2) at 45% 75%, var(--wc2), transparent 30% 60%, var(--wc2)),
    conic-gradient(from calc(var(--wa-angle) * -3) at 80% 10%, var(--wc1), transparent 40% 60%, var(--wc1)),
    var(--wc1);
  animation: waRotate 8s linear infinite;
}
.wa-logo__fill::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.95) 50%, transparent 65%);
  mix-blend-mode: overlay;
  transform: translateX(-120%);
  animation: waShine 3.6s ease-in-out infinite;
}

@keyframes waRotate { to { --wa-angle: 360deg; } }
@keyframes waShine {
  0%, 25% { transform: translateX(-120%); }
  75%, 100% { transform: translateX(120%); }
}
@keyframes waPulse {
  50% { filter: drop-shadow(0 0 calc(var(--size) * 0.28) var(--wa-glow)) brightness(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .wa-logo, .wa-logo__fill, .wa-logo__fill::after { animation: none; }
}

/* HERO — gradient frame card with floating glass panel */
.hero {
  padding: 0;
}

.hero {
  margin-top: -82px;
}

.hero-frame {
  position: relative;
  overflow: hidden;
  padding: 130px 0 64px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--cream);
  border-bottom: none;
}

.hero-frame > .container { position: relative; z-index: 1; width: 100%; }

/* Soft system-like background: blurred accent blob + thin grid + circle rings */
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.hero-bg-blob {
  position: absolute;
  top: -220px;
  left: -160px;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 68% 66%, rgba(20, 184, 166, 0.28) 0%, rgba(20, 184, 166, 0) 40%),
    radial-gradient(circle, rgba(20, 80, 230, 0.35) 0%, rgba(44, 84, 104, 0.16) 45%, rgba(20, 80, 230, 0) 72%);
  filter: blur(10px);
}

/* Second, softer glow on the right — echoes SaasLand's twin-blob hero light, kept subtle for the light theme */
.hero-bg-blob-2 {
  position: absolute;
  top: -80px;
  right: -220px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.22) 0%, rgba(20, 80, 230, 0.12) 45%, rgba(20, 80, 230, 0) 72%);
  filter: blur(20px);
}

.hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(26, 26, 26, 0.04) 0px, rgba(26, 26, 26, 0.04) 1px, transparent 1px, transparent 120px),
    repeating-linear-gradient(0deg, rgba(26, 26, 26, 0.04) 0px, rgba(26, 26, 26, 0.04) 1px, transparent 1px, transparent 120px);
}

.hero-bg-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(18, 23, 43, 0.1);
}
.hero-bg-circle.c1 { width: 520px; height: 520px; top: -140px; left: 90px; }
.hero-bg-circle.c2 { width: 520px; height: 520px; top: 180px; left: -60px; }

.hero-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  width: 100%;
}

.hero-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 18px;
  box-shadow: 0 6px 16px rgba(18, 23, 43, 0.05);
}
.hero-eyebrow-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.6);
  flex-shrink: 0;
  animation: dotPingGold 1.8s ease-out infinite;
}
@keyframes dotPingGold {
  0% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(20, 184, 166, 0); }
  100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); }
}

.hero h1 {
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.hero h1 em { color: var(--gold); font-style: normal; font-weight: 700; }

.hero-subtitle {
  font-size: 16.5px;
  color: var(--ink-soft);
  max-width: 480px;
  margin: 0 0 14px;
  font-family: var(--sans);
}

.hero-quote {
  border-left: 2px solid var(--cobalt);
  padding-left: 16px;
  margin: 0 0 22px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.hero-trust {
  list-style: none;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  font-family: var(--sans);
}
.hero-trust li {
  display: flex;
  align-items: center;
  gap: 7px;
}
.hero-trust svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--accent);
}

/* FLOATING GLASS CARD */
.hero-glass-wrap { position: relative; }

.hero-glass-card {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow-soft-hover), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  animation: floatCard 5s ease-in-out infinite;
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hero-glass-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.hero-glass-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sky), var(--cobalt));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.hero-glass-head-text h4 {
  color: var(--navy);
  font-size: 15px;
  margin: 0 0 2px;
  font-weight: 500;
}
.hero-glass-head-text p {
  color: var(--ink-soft);
  font-size: 12.5px;
  margin: 0;
  font-family: var(--sans);
}

.hero-glass-title {
  color: var(--navy);
  font-size: 20px;
  margin: 0 0 6px;
}
.hero-glass-desc {
  color: var(--ink-soft);
  font-size: 13.5px;
  font-family: var(--sans);
  margin: 0 0 20px;
}

.hero-glass-divider {
  height: 1px;
  background: rgba(18, 23, 43, 0.1);
  margin: 4px 0 18px;
}

.hero-glass-checklist {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 13px;
}
.hero-glass-checklist li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--navy);
  font-weight: 500;
}
.check-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.check-dot svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 3; }
.check-dot.is-done { background: #34a853; color: #fff; }
.check-dot.is-active {
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  position: relative;
}
.check-dot.is-active::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0.5;
  animation: pulseRing 1.8s ease-out infinite;
}
.check-dot.is-pending { background: rgba(18, 23, 43, 0.08); }
li.is-pending-text { color: var(--ink-soft) !important; font-weight: 400 !important; }

@keyframes pulseRing {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

.hero-glass-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.hero-glass-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-glass-meta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* HERO GLASS ORBIT — a white dotted ring stays around the whole card contour at all times;
   a Siri-colored glow travels around that same ring forever, lighting up only where it passes. */
@property --orbit-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.hero-glass-orbit {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Static white dotted contour, matching the card's own fill — evenly spaced, always there */
.hero-glass-orbit::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1.5px dotted rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

/* A short, traveling light in the brand blue — only 3-4 dots are lit at a time, fading at both ends,
   circling the same contour forever */
.hero-glass-orbit::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--orbit-angle),
    transparent 0deg,
    transparent 340deg,
    rgba(20, 80, 230, 0) 340deg,
    rgba(20, 80, 230, 0.95) 352deg,
    rgba(20, 80, 230, 0) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: blur(0.5px);
  animation: orbitSpin 5s linear infinite;
}
@keyframes orbitSpin { to { --orbit-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .hero-glass-orbit::after { animation: none; }
}

/* Decorative faded card peeking behind the glass card, for depth */
.hero-glass-decor {
  position: absolute;
  left: -18px;
  bottom: -26px;
  width: 78%;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  z-index: 0;
  opacity: 0.7;
}
.hero-glass-decor .decor-line {
  height: 8px;
  border-radius: 4px;
  background: rgba(18, 23, 43, 0.1);
  margin-bottom: 8px;
}
.hero-glass-decor .decor-line:nth-child(1) { width: 60%; }
.hero-glass-decor .decor-line:nth-child(2) { width: 85%; }
.hero-glass-decor .decor-line:last-child { margin-bottom: 0; width: 40%; }

/* SECTIONS */
.section { padding: 96px 0; }
.section-alt { background: var(--cream-soft); }

/* Ambient gradient wash — soft brand-colored light in a corner, very low opacity */
#pourquoi { position: relative; overflow: hidden; }
#pourquoi::before {
  content: "";
  position: absolute;
  left: -160px;
  top: -180px;
  width: 520px;
  height: 520px;
  background: url("assets/gradient-blob.png") center/cover no-repeat;
  opacity: 0.35;
  filter: blur(4px);
  pointer-events: none;
  z-index: 0;
}
#pourquoi .container { position: relative; z-index: 1; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1.5px;
  background: var(--cobalt);
  display: inline-block;
}

.section h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  max-width: 680px;
  color: var(--navy);
}
.section h2 em { color: var(--gold); }

.section-intro {
  max-width: 620px;
  font-size: 16.5px;
}

.grid {
  display: grid;
  gap: 22px;
  margin-top: 40px;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border: none;
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-soft);
}

.card h3 {
  font-size: 18px;
  color: var(--navy);
  font-weight: 700;
}
.card p { font-size: 14.5px; margin-bottom: 0; }

.card-highlight {
  background: var(--white);
  position: relative;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--cobalt), var(--gold)) 1;
}

/* STAT STRIP — big-number metrics band, echoing SaasLand's "Our Impact" section */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 44px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.stat-strip-item {
  padding: 30px 24px;
  text-align: center;
  border-left: 1px solid var(--border);
}
.stat-strip-item:first-child { border-left: none; }
.stat-strip-value {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  color: var(--cobalt);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-strip-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.card-link {
  display: block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.card-link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft-hover);
}
.card-arrow {
  display: inline-block;
  margin-top: 10px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--cobalt);
  transition: transform 0.2s ease;
}
.card-link:hover .card-arrow { transform: translateX(3px); }

/* IMAGE PLACEHOLDER — travertine/stone premium treatment */
.img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  background-color: #cabda2;
  background-image:
    radial-gradient(120% 90% at 15% 0%, rgba(255,250,238,0.55) 0%, rgba(255,250,238,0) 45%),
    radial-gradient(90% 70% at 85% 100%, rgba(60,48,32,0.35) 0%, rgba(60,48,32,0) 55%),
    repeating-linear-gradient(100deg, rgba(74,61,42,0.10) 0px, rgba(74,61,42,0.10) 2px, transparent 2px, transparent 34px),
    linear-gradient(155deg, #ded1b4 0%, #c9b995 38%, #a99671 68%, #8f7c5c 100%);
  box-shadow: inset 0 0 60px rgba(40, 30, 15, 0.25);
}
.img-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 30%, rgba(20,15,8,0.12) 100%);
}

/* Real photo variant — replaces the CSS stone gradient with an actual image */
.img-placeholder.img-photo {
  background-color: transparent;
  background-image: none;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.img-placeholder.img-photo::after {
  background: linear-gradient(200deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 35%, rgba(15,12,8,0.28) 100%);
}
.card-link:hover .img-placeholder.img-photo,
.carousel-card:hover .img-placeholder.img-photo {
  transform: scale(1.04);
}
.img-placeholder-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.85);
  background: rgba(18, 15, 10, 0.35);
  backdrop-filter: blur(6px);
  padding: 6px 11px;
  border-radius: 999px;
}

/* Variant tones so a grid of placeholders doesn't look identical */
.img-placeholder.tone-2 {
  background-color: #b9ada0;
  background-image:
    radial-gradient(120% 90% at 85% 0%, rgba(255,250,238,0.5) 0%, rgba(255,250,238,0) 45%),
    radial-gradient(90% 70% at 10% 100%, rgba(30,30,35,0.4) 0%, rgba(30,30,35,0) 55%),
    repeating-linear-gradient(70deg, rgba(40,40,48,0.08) 0px, rgba(40,40,48,0.08) 2px, transparent 2px, transparent 30px),
    linear-gradient(155deg, #d6cfc4 0%, #b3aa9c 40%, #8a8378 72%, #6b665e 100%);
}
.img-placeholder.tone-3 {
  background-color: #c3b195;
  background-image:
    radial-gradient(110% 90% at 50% 0%, rgba(255,250,238,0.5) 0%, rgba(255,250,238,0) 50%),
    radial-gradient(100% 80% at 100% 100%, rgba(42,73,179,0.18) 0%, rgba(42,73,179,0) 55%),
    repeating-linear-gradient(115deg, rgba(74,61,42,0.09) 0px, rgba(74,61,42,0.09) 2px, transparent 2px, transparent 32px),
    linear-gradient(160deg, #e6dcc3 0%, #cbb98f 42%, #a68f66 75%, #7c684a 100%);
}

/* WHY SECTION — brief question header + animated background + symmetric cards */
.why-section { position: relative; overflow: hidden; }

/* Decorative brand loop visual — blend-multiply drops its white backdrop so only the
   gradient ribbon shows, tucked subtly in a corner behind the content. */
.why-section::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 380px;
  height: 480px;
  background: url("assets/loop-visual.png") center/contain no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.16;
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 0;
}

.why-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.why-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
}
.why-blob.b1 {
  width: 420px; height: 420px; top: -120px; left: -100px;
  background: radial-gradient(circle, rgba(20, 80, 230, 0.28) 0%, rgba(20, 80, 230, 0) 70%);
  animation: whyDrift1 16s ease-in-out infinite;
}
.why-blob.b2 {
  width: 380px; height: 380px; top: 60px; right: -120px;
  background: radial-gradient(circle, rgba(111, 163, 240, 0.3) 0%, rgba(111, 163, 240, 0) 70%);
  animation: whyDrift2 20s ease-in-out infinite;
}
.why-blob.b3 {
  width: 320px; height: 320px; bottom: -140px; left: 40%;
  background: radial-gradient(circle, rgba(20, 80, 230, 0.18) 0%, rgba(20, 80, 230, 0) 70%);
  animation: whyDrift3 18s ease-in-out infinite;
}
@keyframes whyDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 30px) scale(1.1); }
}
@keyframes whyDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 40px) scale(1.08); }
}
@keyframes whyDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -30px) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .why-blob { animation: none; }
}

.why-section .container { position: relative; z-index: 1; }

.why-question {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 8px;
  max-width: none;
  white-space: nowrap;
}
.why-subtitle {
  font-size: 16.5px;
  color: var(--ink-soft);
  margin-bottom: 0;
}

.why-grid { margin-top: 40px; align-items: stretch; }

.why-card {
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.why-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-soft-hover);
}

.why-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--cream-soft);
  color: var(--cobalt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  position: relative;
}
.why-icon svg { width: 22px; height: 22px; position: relative; z-index: 1; }

.why-card h3 {
  font-size: 19px;
  margin-bottom: 18px;
}
.why-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.why-list li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
.why-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent-soft);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/62% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/62% no-repeat;
  background-color: var(--cobalt);
}

.why-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: auto;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--cream-soft);
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.why-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--ink-soft); }
.why-note-highlight {
  background: var(--accent-soft);
  color: var(--cobalt);
  font-weight: 600;
  font-size: 13px;
}
.why-note-highlight .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cobalt);
  flex-shrink: 0;
  margin-top: 6px;
  animation: dotPing 1.8s ease-out infinite;
}

/* Entrance: cards pop in with a slight scale */
.why-card.reveal {
  transform: translateY(28px) scale(0.96);
}
.why-card.reveal.is-visible {
  transform: translateY(0) scale(1);
}

/* FEATURE SPLIT (asymmetric dark block + cards) */
.feature-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 22px;
  margin-top: 40px;
}

.feature-dark {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 44px 38px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 480px;
  box-shadow: var(--shadow-soft);
}
.feature-dark .eyebrow { color: rgba(255,255,255,0.55); }
.feature-dark .eyebrow::before { background: var(--cobalt); }
.feature-dark h3 {
  color: var(--white);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
}
.feature-dark h3 em { color: var(--gold); }
.feature-dark p { color: rgba(255,255,255,0.65); margin-bottom: 0; }

.feature-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.feature-cards .card h3 { font-size: 19px; margin-bottom: 10px; }

/* STEPS (dark, numbered) */
.steps-dark {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 56px;
  margin-top: 40px;
  box-shadow: var(--shadow-soft);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.step { position: relative; padding-left: 0; }
.step-number {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 800;
  font-size: 30px;
  color: var(--sky);
  margin-bottom: 14px;
  line-height: 1;
}
.step h3 { font-size: 17px; color: var(--white); font-weight: 700; }
.step p { font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 0; }

.center-cta {
  text-align: center;
  margin-top: 52px;
}

/* CAROUSEL */
.carousel-wrap { position: relative; margin-top: 40px; }
.carousel {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }

.carousel-card {
  scroll-snap-align: start;
  flex: 0 0 320px;
  background: var(--white);
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.carousel-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft-hover);
}
.carousel-card .img-placeholder {
  aspect-ratio: 16/10;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.carousel-card-body { padding: 22px; }
.carousel-tag {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cobalt);
  margin-bottom: 10px;
  display: block;
}
.carousel-card h3 { font-size: 17px; margin-bottom: 8px; }
.carousel-card p { font-size: 14px; margin-bottom: 0; }

.carousel-nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
.carousel-nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
  color: var(--navy);
}
.carousel-nav button:hover { background: var(--cobalt); color: var(--white); transform: translateY(-2px); }
.carousel-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* FAQ — hover-open accordion cards */
.faq-list {
  max-width: 820px;
  margin-top: 40px;
  display: grid;
  gap: 14px;
}

.faq-item {
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.faq-item.is-open {
  box-shadow: var(--shadow-soft-hover);
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 20px 24px;
  font-family: var(--sans);
}

.faq-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--cobalt);
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 5px 9px;
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease;
}
.faq-item.is-open .faq-num { background: var(--cobalt); color: var(--white); }

.faq-q-text {
  flex: 1;
  font-weight: 700;
  font-size: 16.5px;
  color: var(--navy);
  transition: color 0.2s ease;
}
.faq-item.is-open .faq-q-text { color: var(--cobalt); }

.faq-chevron {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cream-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, color 0.3s ease;
}
.faq-chevron svg { width: 15px; height: 15px; }
.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
  background: var(--cobalt);
  color: var(--white);
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p {
  margin: 0;
  padding: 0 24px 22px 62px;
  font-size: 15px;
}

/* ORB SECTION — animated Siri-like assistant orb, human/WhatsApp follow-up highlight */
.orb-section {
  background: #f6f1ea;
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.orb-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
  text-align: left;
}

.orb-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.orb-section .eyebrow { color: var(--ink-soft); }
.orb-section .eyebrow::before { background: var(--cobalt); }
.orb-section h2 { color: var(--navy); margin: 0 0 14px; }
.orb-section h2 em { color: var(--gold); }
.orb-section .section-intro { color: var(--ink-soft); }

.orb-content .eyebrow { justify-content: flex-start; text-align: left; }
.orb-content h2 { text-align: left; }
.orb-content .section-intro { text-align: left; margin: 0 0 32px; }
.orb-content .orb-features { justify-content: flex-start; margin-bottom: 0; }

.orb-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orb-halo {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 140, 255, 0.35) 0%, rgba(124, 140, 255, 0) 70%);
  animation: orbHalo 2.4s ease-in-out infinite;
}

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.orb {
  --bg: oklch(95% 0.01 264);
  --c1: oklch(65% 0.18 0);
  --c2: oklch(70% 0.15 260);
  --c3: oklch(68% 0.16 310);
  --blur-amount: 6px;
  --contrast-amount: 1.5;
  --dot-size: 1.3px;
  --mask-radius: 25%;
  --soft: 18px;

  position: relative;
  width: 168px;
  height: 168px;
  display: grid;
  grid-template-areas: "stack";
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.06) 0%, transparent 70%);
  box-shadow: 0 0 60px rgba(124, 140, 255, 0.5), 0 0 100px rgba(255, 111, 176, 0.25);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 calc(100% - var(--soft)), transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 calc(100% - var(--soft)), transparent 100%);
}
.orb::before {
  content: "";
  grid-area: stack;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    conic-gradient(from calc(var(--angle) * 2) at 25% 70%, var(--c3), transparent 20% 80%, var(--c3)),
    conic-gradient(from calc(var(--angle) * 2) at 45% 75%, var(--c2), transparent 30% 60%, var(--c2)),
    conic-gradient(from calc(var(--angle) * -3) at 80% 10%, var(--c1), transparent 40% 60%, var(--c1)),
    conic-gradient(from calc(var(--angle) * 2) at 15% 5%, var(--c2), transparent 10% 90%, var(--c2)),
    conic-gradient(from calc(var(--angle) * 1) at 20% 80%, var(--c1), transparent 10% 90%, var(--c1)),
    conic-gradient(from calc(var(--angle) * -2) at 85% 10%, var(--c3), transparent 20% 80%, var(--c3));
  filter: blur(var(--blur-amount)) contrast(var(--contrast-amount)) saturate(1.2);
  animation: orbRotate 12s linear infinite, orbPulse 1.6s ease-in-out infinite;
  transform: translateZ(0);
}
.orb::after {
  content: "";
  grid-area: stack;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-image: radial-gradient(circle at center, var(--bg) var(--dot-size), transparent var(--dot-size));
  background-size: calc(var(--dot-size) * 2) calc(var(--dot-size) * 2);
  opacity: 0.55;
  mix-blend-mode: overlay;
  -webkit-mask-image: radial-gradient(black var(--mask-radius), transparent 75%);
  mask-image: radial-gradient(black var(--mask-radius), transparent 75%);
}

@keyframes orbRotate { to { --angle: 360deg; } }
@keyframes orbPulse {
  0%, 100% { transform: scale(0.98); }
  50% { transform: scale(1.02); }
}
@keyframes orbHalo {
  0%, 100% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .orb::before { animation: none; }
  .orb-halo { animation: none; }
}

.orb-caption {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 8px;
}

.orb-availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin: 0;
}
.orb-availability .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7fe0a8;
  box-shadow: 0 0 0 0 rgba(127, 224, 168, 0.6);
  animation: dotPing 1.8s ease-out infinite;
}
@keyframes dotPing {
  0% { box-shadow: 0 0 0 0 rgba(127, 224, 168, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(127, 224, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 224, 168, 0); }
}

.orb-features {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.orb-feature {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.orb-feature svg { width: 16px; height: 16px; color: #7fe0a8; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }

/* CTA FINAL — animated motion-design icon up top, text below, backlit by a soft spotlight glow */
.cta-final {
  position: relative;
  overflow: hidden;
  background: #0c2233;
  color: var(--white);
  padding: 110px 0 0;
}
.cta-final-inner { position: relative; z-index: 1; text-align: center; width: 100%; }
.cta-final h2 { color: var(--white); font-size: clamp(30px, 4vw, 44px); }
.cta-final h2 em { color: var(--gold); }
.cta-final p { color: rgba(255,255,255,0.6); margin-bottom: 30px; font-family: var(--sans); }
.cta-final .btn-primary {
  background: var(--cobalt);
  color: var(--white);
}
.cta-final .btn-primary:hover { background: var(--gold); }

.hero-cta-center { justify-content: center; }

/* MOTION DESIGN — a central "LLC" badge orbited by three theme icons (dossier, validation,
   drapeau américain), riding a wavy connector line — richer than a single static icon, and
   tied to the actual promise of the section (create your US LLC). */
.cta-final-motion {
  position: relative;
  height: 300px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-final-motion-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, 90%);
  transform: translate(-50%, -50%);
  opacity: 0.3;
}

.cta-final-orbit {
  position: absolute;
  inset: 0;
}
.cta-final-orbit-ring {
  position: absolute;
  inset: 0;
  animation: ctaOrbitSpin 18s linear infinite;
}
.cta-final-orbit-ring.r2 { animation-delay: -6s; }
.cta-final-orbit-ring.r3 { animation-delay: -12s; }
.cta-final-satellite {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px;
  transform: translateX(118px);
}
.cta-final-satellite-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  animation: ctaOrbitCounterSpin 18s linear infinite;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.cta-final-satellite-inner svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
@keyframes ctaOrbitSpin { to { transform: rotate(360deg); } }
@keyframes ctaOrbitCounterSpin { to { transform: rotate(-360deg); } }

/* Central motion piece — reuses the site's own Siri-style animated orb (rotating conic
   gradient + dot overlay + pulsing halo), scaled down, instead of a flat static icon. */
.cta-final-orb-wrap {
  position: relative;
  z-index: 1;
  width: 140px;
  height: 140px;
  margin-top: -24px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ctaIconFloat 4.5s ease-in-out infinite;
}
.cta-final-orb-wrap::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58, 143, 255, 0.4) 0%, rgba(155, 107, 255, 0) 70%);
  filter: blur(6px);
  z-index: -1;
}
.cta-final-particles {
  width: 140px;
  height: 140px;
  display: block;
}
@keyframes ctaIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Small status pill under the orb, echoing a premium "AI-Powered"-style badge */
.cta-final-pill {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}
.cta-final-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7fe0a8;
  box-shadow: 0 0 0 0 rgba(127, 224, 168, 0.6);
  animation: dotPing 1.8s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cta-final-orb-wrap { animation: none; }
  .cta-final-orbit-ring { animation: none; }
  .cta-final-satellite-inner { animation: none; }
}

/* Gradient light directly on the headline — the glow sits tightly behind the text block
   itself, like a spotlight hitting the words, rather than washing the whole section. */
@property --cta-glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.cta-final-glow {
  position: absolute;
  left: 50%;
  top: 250px;
  width: 620px;
  height: 340px;
  transform: translateX(-50%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  filter: blur(70px) saturate(1.4);
  background:
    conic-gradient(from var(--cta-glow-angle) at 40% 45%, #35e0c2, transparent 28% 72%, #35e0c2),
    conic-gradient(from calc(var(--cta-glow-angle) * -1.3) at 60% 55%, #3a8fff, transparent 28% 72%, #3a8fff),
    conic-gradient(from calc(var(--cta-glow-angle) * 0.7) at 50% 30%, #9b6bff, transparent 35% 65%, #9b6bff);
  animation: ctaGlowSpin 26s linear infinite;
}
@keyframes ctaGlowSpin { to { --cta-glow-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .cta-final-glow { animation: none; }
}

/* The headline itself carries a soft animated gradient sheen, so the light reads as being
   on the words, not just the backdrop. */
.cta-final h2 {
  position: relative;
  text-shadow: 0 0 50px rgba(58, 143, 255, 0.45), 0 0 90px rgba(53, 224, 194, 0.25);
}

@media (max-width: 640px) {
  .cta-final { min-height: auto; }
  .cta-final-motion { height: 200px; }
  .cta-final-satellite { transform: translateX(90px); }
}

/* FOOTER — floating rounded glass card, not a full-bleed bar */
.site-footer {
  background: var(--cream);
  color: rgba(255,255,255,0.7);
  padding: 0;
}

/* Dedicated space at the bottom of the CTA section, reserved just for the giant wordmark —
   same dark background as the rest of the section, so it reads as one continuous block that
   ends almost flush against the footer below (matching the SaasLand reference: the word sits
   fully formed, filling the gap between the button and the footer, not mid-reveal). */
.cta-final-wordmark-zone {
  position: relative;
  z-index: 1;
  height: 340px;
  margin-top: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.cta-final-wordmark {
  position: relative;
  z-index: 1;
  font-size: clamp(120px, 22vw, 340px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.82;
  white-space: nowrap;
  pointer-events: none;
  color: var(--white);
  opacity: 0.4;
  /* Resting position (~1mm above the footer) — motion.js animates transform on top of this
     as the page scrolls, rising from fully hidden to this exact spot before the footer itself
     ever comes into view, then sinking back out of sight on the way back up. */
  transform: translateY(10px);
  will-change: transform;
}

/* Gradient light sitting ON TOP of the word (higher z-index, fixed in place — it does not
   move with the text). As the word rises underneath it, whatever passes through this band
   gets tinted by the gradient (mix-blend-mode: color); outside of it, the letters stay plain
   white. Wide, centered, fading at both ends so the corners of the word stay white and only
   the middle reads in color — exactly like the reference. */
.cta-final-wordmark-glow {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 94%;
  height: 62%;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse 60% 100% at center, #35e0c2 0%, #3a8fff 32%, #9b6bff 55%, transparent 78%);
  filter: blur(50px) saturate(1.1);
  mix-blend-mode: color;
  opacity: 0.55;
}

@media (max-width: 640px) {
  .cta-final-wordmark-zone { height: 150px; margin-top: 15px; }
  .cta-final-wordmark-glow { height: 70%; filter: blur(30px) saturate(1.4); }
}

.footer-card {
  position: relative;
  width: 100%;
  background: #161616;
  border-radius: 0;
  padding: 60px 0 30px;
  overflow: hidden;
  z-index: 1;
}

.footer-card > .container { position: relative; z-index: 1; }

/* Newsletter row */
.footer-newsletter {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 44px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--navy-line);
}
.footer-newsletter p {
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  margin: 10px 0 0;
  font-family: var(--sans);
}
.footer-newsletter-form {
  display: flex;
  gap: 10px;
  flex: 1 1 340px;
  max-width: 420px;
}
.footer-newsletter-form input {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 14.5px;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid var(--navy-line);
  background: rgba(255,255,255,0.06);
  color: var(--white);
}
.footer-newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
.footer-newsletter-form input:focus { outline: none; border-color: var(--gold); }
.footer-newsletter-form button {
  flex-shrink: 0;
  border-radius: 999px;
  border: none;
  padding: 13px 24px;
  font-weight: 700;
  font-size: 14px;
  font-family: var(--sans);
  background: var(--gold);
  color: var(--navy);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.footer-newsletter-form button:hover { background: var(--white); transform: translateY(-2px); }

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 36px;
}

.site-footer .logo { color: var(--white); }
.footer-brand p { color: rgba(255,255,255,0.55); font-size: 14px; max-width: 320px; font-family: var(--sans); }

.footer-links h4 {
  color: var(--white);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.footer-links a {
  display: block;
  font-size: 14.5px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 11px;
  transition: color 0.15s ease;
}
.footer-links a:hover { color: var(--white); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--navy-line);
  padding-top: 26px;
}

.footer-disclaimer {
  font-size: 12.5px;
  color: rgba(255,255,255,0.4);
  max-width: 640px;
  font-family: var(--sans);
  margin: 0 0 6px;
}
.footer-copy {
  font-size: 12.5px;
  color: rgba(255,255,255,0.3);
  font-family: var(--sans);
  margin: 0;
}

.footer-top-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--navy-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background 0.2s ease, transform 0.2s ease;
}
.footer-top-btn:hover { background: var(--gold); color: var(--navy); transform: translateY(-3px); }
.footer-top-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

/* SERVICE PAGES */
.page-hero {
  padding: 72px 0 52px;
  border-bottom: 1px solid var(--border);
}
.breadcrumb {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.breadcrumb a { color: var(--cobalt); font-weight: 600; }
.page-hero h1 { font-size: clamp(30px, 4.4vw, 46px); max-width: 700px; color: var(--navy); }
.page-hero .lead { font-size: 17px; max-width: 640px; }

.included-list {
  list-style: none;
  padding: 0;
  margin: 26px 0;
  display: grid;
  gap: 14px;
}
.included-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  color: var(--ink);
  font-family: var(--sans);
}
.included-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cobalt);
  margin-top: 8px;
  flex-shrink: 0;
}

.note-box {
  background: var(--white);
  border: none;
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-sm);
  padding: 22px 26px;
  font-size: 14.5px;
  color: var(--ink-soft);
  margin-top: 26px;
  font-family: var(--sans);
}

/* RESPONSIVE */
@media (max-width: 980px) {
  .nav-toggle { display: none; }

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft-hover);
    padding: 10px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
  .main-nav.is-open { display: flex; }
  .main-nav .nav-link { padding: 12px 10px; width: 100%; }
  .main-nav .nav-item.has-dropdown { position: static; }
  .main-nav .dropdown-toggle { width: 100%; text-align: left; }
  .main-nav .dropdown {
    display: none;
    position: static;
    box-shadow: none;
    border: none;
    margin: 0 0 0 10px;
    padding: 0;
  }
  .main-nav .nav-item.has-dropdown:focus-within .dropdown,
  .main-nav .nav-item.has-dropdown.is-open .dropdown { display: flex; }

  .header-cta .btn-outline.btn-sm { display: none; }
  .header-inner { padding: 10px 10px 10px 16px; gap: 10px; }
  .header-cta .btn-primary.btn-sm { padding: 9px 14px; font-size: 12.5px; }
  .logo { font-size: 18px; gap: 6px; }

  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .feature-split { grid-template-columns: 1fr; }
  .feature-dark { min-height: 280px; }
  .feature-cards { grid-template-columns: 1fr 1fr; }
  .hero-split { grid-template-columns: 1fr; gap: 44px; }
  .orb-split { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .orb-content .eyebrow, .orb-content .orb-features { justify-content: center; }
  .orb-content .section-intro { text-align: center; }
  .hero-subtitle { max-width: 100%; }
  .hero-frame { padding: 120px 0 56px; min-height: auto; }
  .hero-glass-decor { display: none; }
}

@media (max-width: 640px) {
  .why-question { white-space: normal; font-size: clamp(24px, 7vw, 32px); }
  .grid-3, .grid-4, .steps, .feature-cards { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .hero { padding: 0; }
  .hero-frame { padding: 110px 0 44px; }
  .hero-glass-card { padding: 22px 20px; }
  .section { padding: 64px 0; }
  .steps-dark { padding: 32px 22px; }
  .carousel-card { flex-basis: 82vw; }
  .carousel-nav { justify-content: flex-start; }
  .hide-mobile { display: none; }
  .hero-eyebrow-pill { white-space: nowrap; font-size: 10px; padding: 7px 14px 7px 10px; }
}

/* BUTTON OUTLINE (legacy alias kept) */
.btn-outline:hover { color: var(--accent); }

/* COOKIE CONSENT BANNER */
#cookie-consent-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 48px rgba(18, 23, 43, 0.2);
  padding: 20px 22px;
  max-width: 640px;
  margin: 0 auto;
  font-family: var(--sans);
}
.cookie-consent-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.cookie-consent-inner p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  flex: 1 1 280px;
}
.cookie-consent-inner p a { color: var(--accent); font-weight: 600; }
.cookie-consent-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* LEGAL PAGES */
.legal-content { max-width: 780px; font-family: var(--sans); }
.legal-content h2 {
  font-size: 21px;
  margin-top: 38px;
  color: var(--navy);
  font-family: var(--sans);
  font-weight: 700;
}
.legal-content p, .legal-content li { font-size: 15px; color: var(--ink-soft); }
.legal-content .updated { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 34px; }

/* CONTACT FORM */
.contact-form {
  max-width: 560px;
  display: grid;
  gap: 16px;
  margin-top: 26px;
  font-family: var(--sans);
}
.form-field { display: grid; gap: 6px; }
.form-field label { font-size: 14px; font-weight: 600; color: var(--navy); }
.form-field input,
.form-field textarea {
  font-family: var(--sans);
  font-size: 15px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-error { font-size: 13px; color: #c62828; display: none; }
.form-field.has-error input,
.form-field.has-error textarea { border-color: #c62828; }
.form-field.has-error .form-error { display: block; }
.form-honeypot { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; width: 0; }
.form-status {
  font-size: 14.5px;
  font-weight: 600;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  display: none;
}
.form-status.success { display: block; background: #e6f7ec; color: #1a7a3d; }
.form-status.error { display: block; background: #fdecea; color: #c62828; }

/* 404 PAGE */
.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px 24px;
}
.error-page .error-code {
  font-family: var(--sans);
  font-style: normal;
  font-size: 100px;
  font-weight: 800;
  color: var(--cobalt);
  line-height: 1;
  margin-bottom: 14px;
}
.error-page p { max-width: 440px; margin-left: auto; margin-right: auto; font-family: var(--sans); }