:root {
  --bg: #f7f6f2;
  --bg-card: #ffffff;
  --bg-subtle: #efefea;
  --border: rgba(0, 0, 0, 0.08);
  --border-hover: rgba(0, 0, 0, 0.18);
  --text: #0e0d14;
  --text-muted: rgba(14, 13, 20, 0.45);
  --text-dim: rgba(14, 13, 20, 0.28);
  --nav-bg: rgba(247, 246, 242, 0.88);

  --primary: oklch(62% 0.22 248);
  --secondary: oklch(72% 0.15 75);
  --success: oklch(66% 0.18 155);
  --glow: rgba(59, 110, 248, 0.25);

  --radius-card: 16px;
  --radius-button: 10px;
  --radius-pill: 99px;
  --max-content: 1300px;
  --section-py: clamp(5rem, 8vw, 7rem);
  --section-px: clamp(1.5rem, 5vw, 4rem);

  --shadow-sm: 0 1px 2px rgba(16, 14, 28, 0.04);
  --shadow-md: 0 2px 6px rgba(16, 14, 28, 0.04), 0 12px 28px -12px rgba(16, 14, 28, 0.12);
  --shadow-lg: 0 4px 12px rgba(16, 14, 28, 0.05), 0 28px 64px -20px rgba(16, 14, 28, 0.16);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="dark"] {
  --bg: #080810;
  --bg-card: #0f0f1a;
  --bg-subtle: #12121f;
  --border: rgba(255, 255, 255, 0.07);
  --border-hover: rgba(255, 255, 255, 0.16);
  --text: #f0eff8;
  --text-muted: rgba(240, 239, 248, 0.45);
  --text-dim: rgba(240, 239, 248, 0.28);
  --nav-bg: rgba(8, 8, 16, 0.85);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3), 0 14px 32px -14px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.35), 0 32px 70px -22px rgba(0, 0, 0, 0.7);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  max-width: 100vw;
  overflow-x: clip;
  transition: background 0.3s ease, color 0.3s ease;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-weight: 600;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 600; }

p { color: var(--text); }

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

img, svg { display: block; max-width: 100%; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::selection { background: var(--primary); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Layout helpers */
.container {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding-inline: var(--section-px);
}

.section { padding-block: var(--section-py); position: relative; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: none;
  box-shadow: var(--shadow-sm);
}

.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--glow);
  animation: dot-pulse 2.8s var(--ease-out) infinite;
}

@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--glow); }
  50%      { box-shadow: 0 0 0 5px transparent; }
}

.section-head {
  max-width: 760px;
  margin-bottom: 3rem;
}

.section-head h2 { margin: 1rem 0 1rem; }
.section-head p { color: var(--text-muted); font-size: 1.1rem; max-width: 60ch; }

.text-muted { color: var(--text-muted); }
.text-primary { color: var(--primary); }

/* ---------- Navigation ---------- */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1rem var(--section-px);
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
  background: var(--nav-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
  border-bottom: 1px solid var(--border);
}

.site-nav.scrolled {
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 var(--border), 0 10px 30px -22px rgba(16, 14, 28, 0.5);
}

.nav-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--text);
}

.brand img {
  width: 32px; height: 32px;
  border-radius: 8px;
  object-fit: cover;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.05;
}
.brand-copy b {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
}
.brand-whisper {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-transform: none;
}
@media (max-width: 768px) {
  .brand-whisper { font-size: 0.6rem; opacity: 0.85; }
}

.brand-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--primary); }
.nav-links a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  margin-top: 4px;
  background: var(--primary);
  border-radius: 2px;
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.currency-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px;
  background: var(--bg-card);
}

.currency-toggle button {
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  transition: background 0.2s ease, color 0.2s ease;
}

.currency-toggle button.active {
  background: var(--primary);
  color: #fff;
}

.menu-toggle {
  display: none;
  width: 38px; height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  align-items: center;
  justify-content: center;
}
.menu-toggle svg { width: 18px; height: 18px; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-button);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.2s ease, border-color 0.2s ease;
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(180deg, oklch(66% 0.22 248), var(--primary));
  color: #fff;
  box-shadow: 0 8px 24px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* sheen sweep on hover */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--ease-out);
  pointer-events: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn-ghost:hover { border-color: var(--border-hover); background: var(--bg-card); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.btn-sm { padding: 0.55rem 1.05rem; font-size: 0.85rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--section-py) + 4rem);
  padding-bottom: var(--section-py);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: 10%; left: -10%;
  width: 50vw; height: 50vw;
  background: radial-gradient(circle at center, var(--glow) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: -15%; right: -8%;
  width: 42vw; height: 42vw;
  background: radial-gradient(circle at center, oklch(72% 0.15 75 / 0.12) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero h1 .accent { color: var(--primary); }

.hero .lead {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--text-muted);
  margin: 1.5rem 0 2rem;
  max-width: 52ch;
}

.hero-ctas {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.hero-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.hero-stats .stat strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.4rem;
  color: var(--text);
  font-weight: 600;
}

.hero-stats .stat span {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Dashboard preview */
.preview {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  box-shadow: var(--shadow-lg);
  transform: rotate(-1.5deg);
  position: relative;
}

.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.preview-head .dots { display: flex; gap: 6px; }
.preview-head .dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bg-subtle);
}

.preview-head .dots span:first-child { background: oklch(72% 0.18 25); }
.preview-head .dots span:nth-child(2) { background: oklch(80% 0.15 90); }
.preview-head .dots span:nth-child(3) { background: var(--success); }

.preview-head .title {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}

.preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.75rem;
  border-radius: 10px;
  background: var(--bg-subtle);
  margin-bottom: 0.5rem;
}

.preview-row .lbl { font-size: 0.85rem; color: var(--text); font-weight: 500; }
.preview-row .val {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--primary);
}

.preview-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 80px;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.preview-chart .bar {
  flex: 1;
  background: linear-gradient(180deg, var(--primary), oklch(62% 0.22 248 / 0.4));
  border-radius: 3px 3px 0 0;
  min-height: 8px;
}

/* ---------- How we work ---------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

.card .num { transition: color 0.3s ease; }
.card:hover .num { color: var(--primary); }

.card .num {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  display: block;
}

.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--text-muted); font-size: 0.95rem; }

/* ---------- Capabilities ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.cap-list { display: grid; gap: 1rem; }

.cap-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: border-color 0.3s ease, transform 0.3s var(--ease-out);
}

.cap-item:hover { border-color: var(--border-hover); transform: translateY(-2px); }

.cap-item .icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--bg-subtle);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cap-item .icon svg { width: 20px; height: 20px; }

.cap-item h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.cap-item p { color: var(--text-muted); font-size: 0.92rem; }

/* ---------- Apps ---------- */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.app-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  /* --lift/--proximity/--max-grow are read by the hover + pointer-proximity
     growth below (scripts/apps-grid.js sets --max-grow per card, scaled to
     how many visits it's had — see that file's header comment). Cards with
     no JS, or before the visits fetch resolves, just get --max-grow's
     fallback: a small uniform hover grow, never a static/dead card. */
  --max-grow: 0.025;
  transform: translateY(var(--lift, 0px)) scale(calc(1 + var(--proximity, 0) * var(--max-grow)));
  transition: transform 0.2s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s var(--ease-out);
  color: var(--text);
}

.app-card:hover,
.app-card:focus-within {
  --lift: -4px;
  z-index: 3;
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

.app-card .logo { transition: transform 0.3s var(--ease-spring); }
.app-card:hover .logo { transform: scale(1.06) rotate(-2deg); }

.app-card .logo {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--bg-subtle);
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-card .logo img { width: 100%; height: 100%; object-fit: contain; }

.app-card .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.badge.available {
  background: oklch(66% 0.18 155 / 0.12);
  border-color: transparent;
  color: var(--success);
}

.badge.preview {
  background: oklch(72% 0.15 75 / 0.14);
  border-color: transparent;
  color: var(--secondary);
}

/* "Demo" reuses .preview's amber — same meaning, clearer word — kept as its
   own class rather than renaming .preview because freeware/index.html still
   uses .badge.preview for an unrelated distinction. "En desarrollo" gets its
   own quieter, unfinished-looking treatment: no fill, dashed border. */
.badge.demo {
  background: oklch(72% 0.15 75 / 0.14);
  border-color: transparent;
  color: var(--secondary);
}

.badge.dev {
  background: transparent;
  border-style: dashed;
  border-color: var(--border-hover);
  color: var(--text-muted);
}

.app-card h3 { font-size: 1.2rem; }
.app-card p { color: var(--text-muted); font-size: 0.92rem; }

.app-card .more {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--primary);
  font-weight: 500;
  transition: gap 0.25s var(--ease-out), letter-spacing 0.25s var(--ease-out);
  display: inline-flex;
  align-items: center;
}
.app-card:hover .more { letter-spacing: 0.01em; padding-left: 2px; }

/* ---------- Apps grid: hero vs. compact tiers ----------
   scripts/apps-grid.js assigns these two classes once it knows which apps
   are free / most-visited (hero) vs. the rest (compact) — see that file.
   Column-span only, deliberately no grid-row span: forcing a taller implicit
   row risks empty space if a hero card's real content isn't exactly 2 rows
   tall. The hero card still reads as bigger from wider columns + larger
   type/logo below, without that risk. */
.apps-grid {
  grid-auto-flow: dense;
}

.app-card--hero {
  grid-column: span 2;
}

@media (max-width: 640px) {
  .app-card--hero { grid-column: span 1; }
}

.app-card--hero .logo { width: 68px; height: 68px; }
.app-card--hero h3 { font-size: 1.45rem; }
.app-card--hero p { font-size: 0.98rem; }

.app-card--compact {
  padding: 1.25rem;
  gap: 0.65rem;
}
.app-card--compact .logo { width: 42px; height: 42px; padding: 6px; }
.app-card--compact h3 { font-size: 1.02rem; }
.app-card--compact p {
  font-size: 0.82rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The single most-visited card gets a slow idle "breathing" ring so it reads
   as the pick of the grid even before anyone touches it — one signature
   moment, not applied to every hero card, and paused the instant it's
   actually being interacted with. */
@media (prefers-reduced-motion: no-preference) {
  .app-card.is-top {
    animation: acacia-app-pulse 3.2s var(--ease-out) infinite;
  }
  .app-card.is-top:hover,
  .app-card.is-top:focus-within {
    animation-play-state: paused;
  }
}

@keyframes acacia-app-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--primary) 30%, transparent); }
  60% { box-shadow: 0 0 0 12px color-mix(in oklch, var(--primary) 0%, transparent); }
}

.app-card__popular-tag {
  position: absolute;
  top: -10px;
  left: 1.25rem;
  background: var(--primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.price-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease;
  position: relative;
}

.price-card:hover { transform: translateY(-4px); border-color: var(--border-hover); }

.price-card.featured {
  border-color: var(--primary);
  box-shadow: 0 16px 48px var(--glow);
}

.price-card.featured::before {
  content: "Recomendada";
  position: absolute;
  top: -10px; right: 1.5rem;
  padding: 0.25rem 0.7rem;
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
}

.price-card h3 { font-size: 1.25rem; }
.price-card .amount {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  line-height: 1.05;
}

.price-card .amount .amount-from {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
}

.price-card .amount .amount-num {
  font-size: 2.1rem;
  white-space: nowrap;
}

.price-card .amount .unit {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 400;
}

.price-card p { color: var(--text-muted); font-size: 0.95rem; }

/* ---------- Testimonials ---------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.testimonial {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  transition: border-color 0.3s ease, transform 0.3s var(--ease-out);
}

.testimonial:hover { border-color: var(--border-hover); transform: translateY(-2px); }

.testimonial blockquote {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 1.25rem;
}

.testimonial blockquote::before { content: "\201C"; color: var(--primary); font-size: 1.5em; line-height: 0; vertical-align: -0.25em; margin-right: 0.1em; }

.testimonial cite {
  font-style: normal;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.testimonial cite strong { color: var(--text); font-weight: 600; display: block; }

/* ---------- Casos reales (real client case cards) ---------- */
.case-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: border-color 0.3s ease, transform 0.3s var(--ease-out);
}
.case-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.case-card .case-tag {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--primary);
}
.case-card h3 { font-size: 1.1rem; margin-top: 0.1rem; }
.case-card .case-sector { font-size: 0.82rem; color: var(--text-muted); }
.case-card p { font-size: 0.92rem; line-height: 1.55; color: var(--text-muted); margin-top: 0.4rem; }
.case-card .case-link {
  margin-top: auto;
  padding-top: 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.case-card .case-link:hover { text-decoration: underline; }

/* ---------- CTA section ---------- */
.cta-section {
  text-align: center;
  padding-block: var(--section-py);
}

.cta-section h2 { max-width: 22ch; margin: 0 auto 1.25rem; }
.cta-section p { color: var(--text-muted); max-width: 56ch; margin: 0 auto 2rem; font-size: 1.1rem; }

.cta-section .btns {
  display: inline-flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 4rem var(--section-px) 2rem;
  background: var(--bg-subtle);
}

.footer-grid {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-grid h4 {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.footer-grid ul { list-style: none; display: grid; gap: 0.55rem; }

.footer-grid a {
  color: var(--text);
  font-size: 0.92rem;
  transition: color 0.2s ease;
}

.footer-grid a:hover { color: var(--primary); }

.footer-grid .col-brand p {
  color: var(--text-muted);
  font-size: 0.92rem;
  max-width: 32ch;
  margin-top: 1rem;
}

.footer-bottom {
  max-width: var(--max-content);
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  max-width: 360px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.cookie-banner.show { transform: translateY(0); opacity: 1; }
.cookie-banner.dismiss { opacity: 0; transition: opacity 0.3s ease; }

.cookie-banner h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.cookie-banner p {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.cookie-banner p a { color: var(--primary); text-decoration: underline; }

.cookie-banner .actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}

.reveal.in { opacity: 1; transform: translateY(0); }

/* Staggered entrance for cards inside a grid */
.cards-grid .reveal.in:nth-child(2),
.apps-grid .reveal.in:nth-child(2) { transition-delay: 0.06s; }
.cards-grid .reveal.in:nth-child(3),
.apps-grid .reveal.in:nth-child(3) { transition-delay: 0.12s; }
.cards-grid .reveal.in:nth-child(4),
.apps-grid .reveal.in:nth-child(4) { transition-delay: 0.18s; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .preview { transform: rotate(0); max-width: 480px; margin: 0 auto; }
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
  .site-nav { padding: 0.75rem var(--section-px); padding-top: calc(0.75rem + env(safe-area-inset-top, 0px)); }
  .nav-inner { gap: 0.75rem; }
  .brand img { width: 28px; height: 28px; }
  .brand-copy b { font-size: 0.92rem; }
  .brand-whisper { font-size: 0.62rem; }
  .nav-links {
    position: fixed;
    inset: calc(60px + env(safe-area-inset-top, 0px)) 0 auto 0;
    flex-direction: column;
    background: var(--nav-bg);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 1.25rem var(--section-px);
    gap: 1.1rem;
    align-items: flex-start;
    transform: translateY(-130%);
    transition: transform 0.3s ease;
    box-shadow: 0 12px 28px -18px rgba(0,0,0,0.35);
  }
  .nav-links.open { transform: translateY(0); }
  .menu-toggle { display: inline-flex; }
  .nav-tools .currency-toggle { display: none; }
  .nav-tools .nav-cta { display: none; }
}

@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
  .cookie-banner { right: 1rem; left: 1rem; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Product page: hero w/ logo ---------- */
.product-hero .product-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.product-hero .product-mark img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 8px;
  object-fit: contain;
}
.product-hero .product-mark .name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* ---------- Mock app preview (StockFlow / FlowFin) ---------- */
.mock {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1rem;
  max-width: 520px;
  width: 100%;
  margin-inline: auto;
  transform: rotate(-1.5deg);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.25);
}
.mock-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0.4rem 0.85rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.85rem;
}
.mock-head .dots { display: flex; gap: 6px; }
.mock-head .dots span {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.mock-head .dots span:first-child { background: oklch(72% 0.18 25); }
.mock-head .dots span:nth-child(2) { background: oklch(80% 0.15 90); }
.mock-head .dots span:nth-child(3) { background: var(--success); }
.mock-head .title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-right: auto;
  letter-spacing: -0.01em;
}
.mock-head .search,
.mock-head .pill {
  font-size: 0.72rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.6rem;
  color: var(--text-muted);
  background: var(--bg);
}
.mock-head .pill { background: var(--primary); color: #fff; border-color: transparent; font-weight: 600; }

/* Real product screenshot inside a .mock browser-chrome frame — same tilted
   card/shadow/dots treatment as the hand-built mocks below, but the content
   under the .mock-head bar is an actual screenshot of the running app
   instead of markup standing in for one. Bleeds past .mock's own padding so
   the image reaches the card's rounded corners like a real window. */
.mock-shot {
  margin: 0 -1rem -1rem;
  border-radius: 0 0 calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px);
  overflow: hidden;
  line-height: 0;
}
.mock-shot img { display: block; width: 100%; height: auto; }

/* StockFlow inventory table */
.mock-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.mock-table th,
.mock-table td {
  text-align: left;
  padding: 0.55rem 0.45rem;
  border-bottom: 1px solid var(--border);
}
.mock-table th {
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.mock-table tr:last-child td { border-bottom: none; }
.mock-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tag::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.tag.ok { background: oklch(66% 0.18 155 / 0.14); color: var(--success); }
.tag.warn { background: oklch(80% 0.15 75 / 0.18); color: oklch(60% 0.15 75); }
.tag.danger { background: oklch(72% 0.18 25 / 0.16); color: oklch(58% 0.20 25); }

/* FlowFin balance row + category bars */
.balance-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.balance-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.65rem 0.7rem;
  background: var(--bg);
}
.balance-card .lbl {
  font-size: 0.68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.balance-card .val {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.balance-card.income .val { color: var(--success); }
.balance-card.expense .val { color: oklch(58% 0.20 25); }
.balance-card.balance .val { color: var(--primary); }

.cat-row {
  display: grid;
  grid-template-columns: 110px 1fr 70px;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0.2rem;
  font-size: 0.78rem;
}
.cat-row .lbl { color: var(--text); font-weight: 500; }
.cat-row .amt { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.cat-row .bar {
  height: 8px;
  border-radius: 99px;
  background: var(--bg-subtle);
  overflow: hidden;
}
.cat-row .bar > span {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
}
.cat-row .bar.c2 > span { background: var(--secondary); }
.cat-row .bar.c3 > span { background: var(--success); }
.cat-row .bar.c4 > span { background: oklch(70% 0.18 320); }
.cat-row .bar.c5 > span { background: oklch(70% 0.18 25); }
.cat-row .bar.c6 > span { background: oklch(72% 0.15 200); }

/* Features 3-col grid for product pages */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.feature {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease;
}
.feature:hover { transform: translateY(-4px); border-color: var(--border-hover); }
.feature .icon {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: oklch(62% 0.22 248 / 0.12);
  color: var(--primary);
  margin-bottom: 0.4rem;
}
.feature h3 { font-size: 1.05rem; }
.feature p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }

/* Single price card centered */
.price-single {
  max-width: 440px;
  margin-inline: auto;
}
.price-single .features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.5rem 0 1rem;
  font-size: 0.92rem;
}
.price-single .features li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: var(--text);
}
.price-single .features li::before {
  content: "✓";
  color: var(--success);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.5;
}
.price-single .badge-top {
  position: absolute;
  top: -10px; left: 1.5rem;
  padding: 0.25rem 0.7rem;
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
}
.price-single .sub {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: -0.4rem;
}

/* Single centered testimonial */
.testimonial-single {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: 2rem;
}
.testimonial-single blockquote {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 1rem;
}
.testimonial-single cite { color: var(--text-muted); font-style: normal; font-size: 0.9rem; }
.testimonial-single cite strong { color: var(--text); display: block; }

@media (max-width: 720px) {
  .mock { transform: none; }
  .balance-row { grid-template-columns: 1fr; }
  .cat-row { grid-template-columns: 90px 1fr 70px; }
}

/* ---------- Mock stat cards (Puntos+ / LIUMA) ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.stat-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.65rem 0.7rem;
  background: var(--bg);
}
.stat-card .lbl {
  font-size: 0.66rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.stat-card .val {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  margin-top: 2px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-card .delta { color: var(--success); font-size: 0.72rem; font-weight: 600; }

.mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 70px;
  padding: 0.35rem 0.2rem 0;
  border-top: 1px solid var(--border);
  margin-top: 0.4rem;
}
.mini-bars .bar {
  flex: 1;
  background: linear-gradient(to top, var(--primary), oklch(72% 0.22 248));
  border-radius: 4px 4px 0 0;
  min-height: 12%;
  opacity: 0.85;
}

.mock-corner-pill {
  position: absolute;
  top: 12px;
  right: 14px;
  background: var(--primary);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-pill);
}
.mock { position: relative; }

/* ---------- 4-step "How it works" ---------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.step {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease;
}
.step:hover { transform: translateY(-4px); border-color: var(--border-hover); }
.step .num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  color: var(--primary);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.step h3 { font-size: 1.05rem; }
.step p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }

/* ---------- Access request card ---------- */
.request-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: clamp(2rem, 4vw, 3.25rem);
  max-width: 880px;
  margin-inline: auto;
  overflow: hidden;
}
.request-card::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 60%;
  height: 80%;
  background: radial-gradient(closest-side, var(--glow), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.request-card > * { position: relative; z-index: 1; }
.request-card h2 { margin-bottom: 0.75rem; }
.request-card .body {
  color: var(--text-muted);
  max-width: 60ch;
  margin-bottom: 1.5rem;
  font-size: 1rem;
}
.request-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.7rem 1.25rem;
  list-style: none;
  margin-bottom: 1.5rem;
}
.request-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.95rem;
  color: var(--text);
}
.request-list li::before {
  content: "✓";
  color: var(--success);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.5;
}
.request-card .form-note {
  margin-top: 0.85rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

@media (max-width: 540px) {
  .stat-row { grid-template-columns: 1fr; }
  .request-card .btn { width: 100%; }
}

/* ---------- Services grid ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.services-grid .service-card:nth-child(4) { grid-column: 1; }
.services-grid .service-card:nth-child(4),
.services-grid .service-card:nth-child(5) { }

.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s var(--ease-out);
  position: relative;
}
.service-card:hover { transform: translateY(-4px); border-color: var(--border-hover); }
.service-card.featured {
  border-top: 2px solid var(--primary);
  box-shadow: 0 8px 32px var(--glow);
}
.service-card .badge-featured {
  position: absolute;
  top: -10px; right: 1.25rem;
  background: var(--primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.65rem;
  border-radius: var(--radius-pill);
}
.service-card .svc-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: oklch(62% 0.22 248 / 0.12);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
}
.service-card h3 { font-size: 1.15rem; }
.service-card .svc-price {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.service-card .svc-price .unit { font-size: 0.85rem; font-weight: 400; color: var(--text-muted); }
.service-card .svc-price-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.45rem; line-height: 1.4; }
.service-card .svc-price-note .unit { color: var(--text-dim); }

/* Tiered price rows inside a service card (label left, price right) */
.service-card .svc-tiers {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.service-card .svc-tiers li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}
.service-card .svc-tiers li:first-child { padding-top: 0; }
.service-card .svc-tiers li:last-child { border-bottom: none; padding-bottom: 0; }
.service-card .svc-tiers .label { font-size: 0.86rem; color: var(--text-muted); line-height: 1.3; }
.service-card .svc-tiers .val {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text);
  white-space: nowrap;
}
.service-card .svc-tiers .val .pre { color: var(--text-muted); font-weight: 400; }
.service-card .svc-desc { color: var(--text-muted); font-size: 0.93rem; line-height: 1.55; }
.service-card .svc-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.88rem;
}
.service-card .svc-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--text);
}
.service-card .svc-features li::before {
  content: "✓";
  color: var(--success);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.5;
  flex-shrink: 0;
}
.service-card .btn { margin-top: auto; }

@media (max-width: 960px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid .service-card:nth-child(4) { grid-column: auto; }
}
@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ---------- Clients / trust chip strip (servicios) ---------- */
.clients-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}
.client-chip {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1.3rem;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  text-decoration: none;
  transition: transform 0.25s var(--ease-out), border-color 0.25s ease;
}
.client-chip:hover { transform: translateY(-2px); border-color: var(--border-hover); }
.client-chip strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.client-chip span { font-size: 0.8rem; color: var(--text-muted); }
.client-chip.is-featured { border-color: var(--primary); }

/* ---------- Contact options grid ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.contact-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease;
}
.contact-card:hover { transform: translateY(-4px); border-color: var(--border-hover); }
.contact-card.featured {
  border-color: #25D366;
  box-shadow: 0 8px 28px rgba(37,211,102,0.18);
}
.contact-card .contact-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
}
.contact-card.featured .contact-icon { background: rgba(37,211,102,0.12); }
.contact-card h3 { font-size: 1.15rem; }
.contact-card p { color: var(--text-muted); font-size: 0.93rem; line-height: 1.55; }
.contact-card .hours { font-size: 0.8rem; color: var(--text-dim); font-weight: 500; }
.contact-card .badge-fast {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  background: oklch(66% 0.18 155 / 0.14);
  color: var(--success);
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  letter-spacing: 0.03em;
}
.contact-card .btn { margin-top: auto; }

@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---------- Info strip ---------- */
.info-strip {
  display: flex;
  justify-content: center;
  gap: 3rem;
  padding: 2rem;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.info-strip span { display: flex; align-items: center; gap: 0.5rem; }

/* ---------- FAQ accordion ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 760px;
  margin-inline: auto;
}
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.faq-item:hover { border-color: var(--border-hover); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  text-align: left;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  background: none;
  border: none;
}
.faq-q svg { flex-shrink: 0; transition: transform 0.25s ease; width: 18px; height: 18px; }
.faq-item[open] .faq-q svg { transform: rotate(45deg); }
.faq-a {
  padding: 0 1.5rem 1.1rem;
  color: var(--text-muted);
  font-size: 0.93rem;
  line-height: 1.6;
}
details.faq-item summary { list-style: none; }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item[open] { border-color: var(--primary); }

/* ---------- Feedback card ---------- */
.section-feedback { padding-block: var(--section-py); }
.feedback-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2.5rem;
}
.feedback-card .feedback-text h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.4rem;
}
.feedback-card .feedback-text p {
  color: var(--text-muted);
  font-weight: 300;
  font-size: 0.95rem;
  max-width: 44ch;
}
.feedback-card .feedback-text .eyebrow { margin-bottom: 0.75rem; }
@media (max-width: 768px) {
  .feedback-card { flex-direction: column; text-align: center; }
  .feedback-card .feedback-text p { max-width: none; }
  .feedback-card .btn { width: 100%; }
}

/* ---------- Pricing tiers (Phase 5 hotfix) ---------- */
/* NOTE: distinct from Phase 2 .price-card / .price-single — uses .pricing-card */
.pricing-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pricing-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin-inline: auto; }

@media (max-width: 960px) {
  .pricing-grid-3 { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}
@media (max-width: 720px) {
  .pricing-grid-2 { grid-template-columns: 1fr; max-width: 480px; }
}

/* Real product screenshot as a pricing card's header strip — the portfolio
   pricing page compares apps side by side, so each card gets a cropped peek
   of the actual running app instead of the fuller browser-chrome treatment
   used on product-page heroes (.mock-shot). Bleeds past the card's own
   padding to reach its rounded top corners. */
.pricing-shot {
  margin: -2rem -2rem 1.25rem;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}
.pricing-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }

.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, transform 0.3s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.pricing-card:hover { border-color: var(--border-hover); transform: translateY(-4px); }
.pricing-card.featured { border-top: 2px solid var(--primary); }

.pricing-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  background: oklch(62% 0.22 248 / 0.12);
  border: 1px solid oklch(62% 0.22 248 / 0.30);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 1rem;
}

.pricing-card h3 { font-size: 1.15rem; }

.pricing-price {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--text);
  letter-spacing: -0.04em;
  margin: 0.75rem 0 0.25rem;
}
.pricing-unit { font-size: 0.8rem; font-weight: 400; color: var(--text-dim); }

.pricing-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  font-weight: 300;
  margin-bottom: 1.5rem;
}

.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 2rem;
  flex: 1;
}
.pricing-features li {
  font-size: 0.825rem;
  color: var(--text-muted);
  font-weight: 300;
  padding-left: 14px;
  position: relative;
}
.pricing-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
}

.btn-mp {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #009EE3;
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--radius-button);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  width: 100%;
}
.btn-mp:hover { opacity: 0.88; transform: translateY(-2px); }

.wa-link {
  display: block;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  margin-top: 0.75rem;
  transition: color 0.2s ease;
}
.wa-link:hover { color: var(--primary); }

/* Plan flow — la oferta no son dos productos en paralelo sino una secuencia
   con una bifurcación: 30 días de Premium, y al día 31 el número de niños
   activos decide a dónde cae la parroquia. Esa bifurcación es la rama real de
   licenseLifecycle, así que se dibuja en vez de insinuarse con dos tarjetas
   hermanas que sugerían una elección que no existe. */
.plan-lead { max-width: 800px; margin-inline: auto; }

.plan-fork {
  max-width: 800px;
  margin: 2rem auto 1.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text-muted);
}
.plan-fork::before,
.plan-fork::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.plan-fork-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 14px;
  white-space: nowrap;
}

/* El umbral es el titular real de cada desenlace: lo que decide a cuál cae la
   parroquia es el número de niños activos, no un botón. */
.plan-threshold {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}

/* El desenlace gratuito no compite en altura con la tabla de precios de
   Premium: no son dos ofertas comparables, así que estirarlo sólo abre un
   hueco muerto bajo la lista (.pricing-features lleva flex:1 para alinear los
   CTA, y esta tarjeta no tiene CTA). */
.plan-outcome { align-self: start; }

.pricing-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 2rem;
}
.pricing-note a { color: var(--primary); }
.pricing-note a:hover { text-decoration: underline; }

.section-sub {
  color: var(--text-muted);
  font-size: 1rem;
  max-width: 60ch;
  margin-top: 0.75rem;
}

/* ---------- /gracias page ---------- */
.gracias-hero {
  position: relative;
  overflow: hidden;
  min-height: 65vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(6rem, 10vw, 8rem) var(--section-px) clamp(4rem, 6vw, 5rem);
}
.gracias-glow {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
  pointer-events: none;
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}

.check-wrap {
  width: 100px;
  height: 100px;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
  animation: pop 0.3s ease-out 1.1s both;
}
@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.check-svg { width: 100%; height: 100%; }
.check-circle {
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  animation: draw-circle 0.6s ease-out 0.2s forwards;
}
.check-tick {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: draw-tick 0.4s ease-out 0.75s forwards;
}
@keyframes draw-circle { to { stroke-dashoffset: 0; } }
@keyframes draw-tick   { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .check-circle, .check-tick { animation: none; stroke-dashoffset: 0; }
  .check-wrap, .gracias-glow { animation: none; }
}

.gracias-h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}
.gracias-sub {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--text-muted);
  font-weight: 300;
  max-width: 540px;
  line-height: 1.65;
  position: relative;
  z-index: 1;
}
.gracias-nombre {
  margin-top: 1rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--primary);
  position: relative;
  z-index: 1;
}

.confirm-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2rem;
  max-width: 520px;
  margin-inline: auto;
}
.confirm-grid { margin-top: 1.25rem; }
.confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.confirm-row:last-child { border-bottom: none; }
.confirm-key { color: var(--text-muted); font-weight: 300; }
.confirm-val { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: var(--text); text-align: right; }

.gracias-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 768px) { .gracias-steps-grid { grid-template-columns: 1fr; } }

.gracias-step-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
}
.step-num {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.65rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.gracias-step-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.gracias-step-card p {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.65;
  font-weight: 300;
}

.footer-compact {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 1.5rem var(--section-px);
}
.footer-compact-inner {
  max-width: var(--max-content);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.775rem;
  color: var(--text-dim);
}

/* Migration note (StockFlow pricing cards) */
.migration-note {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 1rem;
  line-height: 1.5;
}
.migration-note a {
  color: var(--primary);
  text-decoration: none;
}
.migration-note a:hover { text-decoration: underline; }

/* ── PROSE (legal pages) ──────────────────────────── */
.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--section-py) var(--section-px);
}
.prose h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: -0.03em; color: var(--text);
  margin-bottom: 0.5rem;
}
.prose .last-updated {
  font-size: 0.82rem; color: var(--text-dim);
  margin-bottom: 3rem; display: block;
}
.prose h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600; font-size: 1.1rem;
  color: var(--text); margin: 2.5rem 0 0.75rem;
  letter-spacing: -0.01em;
}
.prose p {
  font-size: 0.9375rem; color: var(--text-muted);
  line-height: 1.75; font-weight: 300;
  margin-bottom: 1rem;
}
.prose a { color: var(--primary); text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.prose hr {
  border: none; border-top: 1px solid var(--border);
  margin: 2rem 0;
}

/* ── JOBS (trabaja con nosotros) ─────────────────── */
.jobs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 960px) { .jobs-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.job-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2rem;
  display: flex; flex-direction: column; gap: 0;
  transition: border-color 0.3s, transform 0.3s var(--ease-out);
}
.job-card:hover { border-color: var(--border-hover); transform: translateY(-4px); }
.job-area {
  display: inline-flex; align-items: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 3px 10px;
  border-radius: var(--radius-pill); margin-bottom: 1rem;
}
.job-modality {
  font-size: 0.775rem; color: var(--text-dim);
  margin-bottom: 1rem;
}
.job-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 1.15rem;
  color: var(--text); margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}
.job-card p {
  font-size: 0.875rem; color: var(--text-muted);
  line-height: 1.65; font-weight: 300; flex: 1;
  margin-bottom: 1.5rem;
}
.job-skills {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.5rem;
}
.job-skill {
  font-size: 0.7rem; color: var(--text-dim);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  padding: 3px 8px; border-radius: var(--radius-pill);
  font-family: 'Space Grotesk', sans-serif;
}

/* ── COMPLIANCE SECTION ───────────────────────────── */
.compliance-section { background: var(--bg-subtle); }

.compliance-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 3rem;
}
.compliance-header h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
  color: var(--text);
  margin-top: 0.75rem;
}
.compliance-intro {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.65;
  font-weight: 300;
  align-self: end;
}
@media (max-width: 768px) {
  .compliance-header { grid-template-columns: 1fr; gap: 1rem; }
}

.compliance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 768px) {
  .compliance-grid { grid-template-columns: 1fr; }
}

.compliance-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color 0.3s, transform 0.3s var(--ease-out);
}
.compliance-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
}
.compliance-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}
.compliance-logo-wrap {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
}
.compliance-pill {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.65rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  padding: 3px 10px; border-radius: var(--radius-pill);
}
.compliance-pill--green {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  border-color: color-mix(in srgb, var(--success) 25%, transparent);
}
.compliance-pill--amber {
  color: oklch(62% 0.15 75);
  background: color-mix(in srgb, oklch(72% 0.15 75) 10%, transparent);
  border-color: color-mix(in srgb, oklch(72% 0.15 75) 25%, transparent);
}
.compliance-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 1.15rem;
  color: var(--text); margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}
.compliance-card p {
  font-size: 0.875rem; color: var(--text-muted);
  line-height: 1.65; font-weight: 300; flex: 1;
  margin-bottom: 1.5rem;
}
.compliance-link {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem; font-weight: 500;
  color: var(--primary); text-decoration: none;
  transition: opacity 0.2s;
  margin-top: auto;
}
.compliance-link:hover { opacity: 0.75; }
.compliance-note {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.6;
}
.compliance-note a {
  color: var(--primary); text-decoration: none;
  margin-left: 4px;
}
.compliance-note a:hover { text-decoration: underline; }

/* ── Accessibility: visible keyboard focus + skip link ───────────────── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 8px;
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   PREMIUM LAYER — atmosphere, motion & tactile micro-interactions
   Additive only. Every motion effect degrades gracefully and is disabled
   under prefers-reduced-motion (guarded at the end of this block).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Scroll progress: a hairline of brand light at the top of the page ── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 300;
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll, 0));
  background: linear-gradient(90deg, var(--primary), var(--secondary) 55%, var(--success));
  box-shadow: 0 0 12px var(--glow);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.scroll-progress.on { opacity: 1; }

/* ── Hero atmosphere: slow-drifting light + fine grain ────────────────── */
.hero { isolation: isolate; }
.hero::before { animation: drift-a 26s var(--ease-out) infinite alternate; }
.hero::after  { animation: drift-b 32s var(--ease-out) infinite alternate; }

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6%, 4%, 0) scale(1.12); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-5%, -6%, 0) scale(1.1); }
}

/* near-invisible grain to kill banding on the gradients */
.hero > .container { position: relative; z-index: 1; }
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* The dashboard preview breathes, then reacts to the pointer (set in JS) */
.preview {
  transform: rotate(-1.5deg);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  animation: float-preview 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes float-preview {
  0%, 100% { transform: rotate(-1.5deg) translateY(0); }
  50%      { transform: rotate(-1.5deg) translateY(-10px); }
}
.preview.tilt {
  animation: none;
  transform: perspective(1100px)
             rotateX(calc(var(--ty, 0) * -4deg))
             rotateY(calc(var(--tx, 0) * 6deg))
             rotate(-1.5deg);
}
.preview .preview-chart .bar {
  transform-origin: bottom;
  animation: bar-rise 0.9s var(--ease-out) both;
}
.preview .preview-chart .bar:nth-child(odd)  { animation-delay: 0.05s; }
.preview .preview-chart .bar:nth-child(3n)   { animation-delay: 0.12s; }
.preview .preview-chart .bar:nth-child(4n)   { animation-delay: 0.18s; }
@keyframes bar-rise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* ── Pointer-reactive spotlight on the primary card grids ─────────────── */
.app-card, .card { position: relative; isolation: isolate; }
.app-card::before, .card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--primary) 14%, transparent),
    transparent 62%);
}
.app-card:hover::before, .card:hover::before { opacity: 1; }
/* keep card content above the glow */
.app-card > *, .card > * { position: relative; z-index: 1; }

/* a touch more depth on lift */
.app-card:hover, .card:hover { box-shadow: var(--shadow-lg); }

/* ── Refined nav: animated active/hover underline ─────────────────────── */
.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
/* supersede the legacy block underline (avoid double rule) */
.nav-links a[aria-current="page"]::after { margin-top: 0; width: auto; }
@media (max-width: 768px) {
  .nav-links a::after { display: none; }
}

/* brand mark gets a subtle hover lift + glow */
.site-nav .brand img { transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease; }
.site-nav .brand:hover img { transform: rotate(-3deg) scale(1.06); box-shadow: 0 6px 16px var(--glow); }

/* ── Number count-up target ───────────────────────────────────────────── */
[data-count-to] { font-variant-numeric: tabular-nums; }

/* ── Directional reveal variants (opt-in via data-reveal) ─────────────── */
.reveal[data-reveal="left"]  { transform: translateX(-28px); }
.reveal[data-reveal="right"] { transform: translateX(28px); }
.reveal[data-reveal="scale"] { transform: scale(0.94); }
.reveal[data-reveal].in { transform: none; }

/* Broaden graceful stagger to every reveal grid */
.pricing-grid .reveal.in:nth-child(2),
.testimonials-grid .reveal.in:nth-child(2),
.features-grid .reveal.in:nth-child(2),
.compliance-grid .reveal.in:nth-child(2) { transition-delay: 0.06s; }
.pricing-grid .reveal.in:nth-child(3),
.testimonials-grid .reveal.in:nth-child(3),
.features-grid .reveal.in:nth-child(3),
.compliance-grid .reveal.in:nth-child(3) { transition-delay: 0.12s; }
.cards-grid .reveal.in:nth-child(5),
.apps-grid .reveal.in:nth-child(5)  { transition-delay: 0.24s; }
.apps-grid .reveal.in:nth-child(6)  { transition-delay: 0.30s; }

/* ── Buttons: crisper press + focus-visible glow ──────────────────────── */
.btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.btn-primary:active { transform: translateY(1px) scale(0.99); }
.btn-ghost::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 120% at 50% 120%, var(--glow), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.btn-ghost:hover::after { opacity: 0.6; }

/* ── Eyebrow: subtle sheen so labels feel crafted, not stuck-on ───────── */
.eyebrow { position: relative; }
.eyebrow::after {
  content: "";
  position: absolute; inset: 0;
  clip-path: inset(0 round var(--radius-pill));
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.35) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: eyebrow-sheen 7s ease-in-out infinite;
  pointer-events: none;
}
[data-theme="dark"] .eyebrow::after { background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.10) 50%, transparent 65%); }
@keyframes eyebrow-sheen {
  0%, 88%, 100% { transform: translateX(-130%); }
  94%           { transform: translateX(130%); }
}

/* ── Section ambient: a faint brand wash between major sections ────────── */
.cta-section { position: relative; isolation: isolate; overflow: hidden; }
.cta-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: 50%;
  width: 70vw; height: 70vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, var(--glow) 0%, transparent 60%);
  pointer-events: none;
  animation: drift-a 30s var(--ease-out) infinite alternate;
}

/* Preserve the mobile un-rotation (the float animation would otherwise re-tilt it) */
@media (max-width: 960px) {
  .preview { animation: none; transform: rotate(0); }
  .preview.tilt { transform: rotate(0); }
}

/* ── Quiet everything for reduced-motion users ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after,
  .preview, .preview .preview-chart .bar,
  .eyebrow::after, .cta-section::before { animation: none !important; }
  .preview { transform: rotate(-1.5deg) !important; }
  .scroll-progress { display: none; }
}