/* =========================================================
   Synq — Landing styles
   Tokens e tipografia importados do design-system/MASTER.md
   ========================================================= */

:root {
  /* Superfícies dark */
  --bg-void:   #0B0614;
  --bg-depth:  #130C22;
  --bg-raised: #1B1232;
  --bg-peak:   #241A42;
  --hairline:  #2D2050;
  --rule:      #3D2D68;

  /* Texto */
  --text-hi:       #F0EEFF;
  --text-md:       #A99EC8;
  --text-lo:       #6B5F8A;
  --text-disabled: #3D3258;

  /* Marca */
  --brand-500: #6800BD;
  --brand-400: #8A2FE0;
  --brand-300: #9D29FC;
  --brand-600: #4E0090;
  --brand-700: #340060;
  --brand-glow: rgba(104, 0, 189, 0.55);

  --neuro-500: #9D29FC;
  --neuro-400: #B85FFF;
  --neuro-300: #CC96FF;

  --pulse-500: #00D4FF;
  --pulse-400: #4DE0FF;
  --pulse-600: #00A8CC;

  /* Status */
  --danger-500:  #FF4E6A;
  --warning-500: #FFB547;
  --success-500: #22E8A0;

  /* ProfitSwitch accent (logo oficial azul) */
  --profit-500: #4880FF;
  --profit-400: #6FA0FF;
  --profit-300: #96BCFF;
  --profit-glow: rgba(72, 128, 255, 0.45);

  /* Synq Analytics accent (green) */
  --analytics-500: #22C55E;
  --analytics-400: #4ADE80;
  --analytics-300: #86EFAC;
  --analytics-glow: rgba(34, 197, 94, 0.45);

  /* Semânticos */
  --color-primary:       var(--brand-500);
  --color-primary-hover: var(--brand-400);
  --color-accent:        var(--neuro-500);
  --color-focus-ring:    rgba(157, 41, 252, 0.65);
  --color-selection-bg:  rgba(104, 0, 189, 0.32);

  --gradient-synq: linear-gradient(135deg, #6800BD 0%, #8A2FE0 40%, #9D29FC 70%, #B85FFF 100%);
  --gradient-pulse: linear-gradient(90deg, #9D29FC 0%, #00D4FF 100%);

  /* Fontes */
  --font-sans:      'Inter Tight', -apple-system, 'Segoe UI', Helvetica, sans-serif;
  --font-mono:      'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --font-editorial: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', serif;

  /* Escala tipográfica fluida */
  --step--1: clamp(0.80rem, 0.77rem + 0.13vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.22vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.36vw, 1.40rem);
  --step-2:  clamp(1.44rem, 1.33rem + 0.56vw, 1.73rem);
  --step-3:  clamp(1.73rem, 1.57rem + 0.82vw, 2.16rem);
  --step-4:  clamp(2.07rem, 1.86rem + 1.10vw, 2.70rem);
  --step-5:  clamp(2.49rem, 2.22rem + 1.44vw, 3.38rem);
  --step-6:  clamp(2.99rem, 2.64rem + 1.93vw, 4.23rem);
  --step-7:  clamp(3.58rem, 3.14rem + 2.48vw, 5.28rem);

  /* Espaçamento */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --container: 1200px;
  --nav-h: 64px;

  /* Durações */
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 480ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* =========================================================
   Reset + base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 16px; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text-md);
  background-color: var(--bg-void);
  background-image:
    radial-gradient(ellipse 60% 40% at 10% 0%, rgba(104, 0, 189, 0.18), transparent 70%),
    radial-gradient(ellipse 50% 35% at 90% 20%, rgba(0, 212, 255, 0.08), transparent 70%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}
::selection { background: var(--color-selection-bg); color: var(--text-hi); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.container {
  width: min(100% - var(--sp-6), var(--container));
  margin-inline: auto;
}

.skip-link {
  position: absolute; top: 8px; left: 8px;
  background: var(--brand-500); color: var(--text-hi);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm);
  transform: translateY(-200%); transition: transform var(--dur-base) var(--ease-out);
  z-index: 200;
}
.skip-link:focus-visible { transform: translateY(0); }

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: 3px;
}

/* =========================================================
   Typography primitives
   ========================================================= */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-lo);
  margin-bottom: var(--sp-4);
}
.eyebrow--profit { color: var(--profit-400); }
.eyebrow--analytics { color: var(--analytics-400); }

.lede {
  color: var(--text-md);
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 62ch;
}

strong { color: var(--text-hi); font-weight: 600; }
em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 90, "WONK" 1;
  background: var(--gradient-synq);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* keep lede/body em subtle — gradient only reads well at heading weight/size */
.lede em, p em { background: none; -webkit-text-fill-color: currentColor; color: var(--text-hi); }
.footer__tagline em {
  background: var(--gradient-synq);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--bg-raised);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--neuro-300);
  border: 1px solid var(--hairline);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  --btn-fg: var(--text-hi);
  --btn-bg: transparent;
  --btn-br: transparent;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-0);
  line-height: 1;
  letter-spacing: -0.01em;
  border: 1px solid var(--btn-br);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn--sm { padding: 9px 16px; font-size: var(--step--1); }
.btn--primary { --btn-bg: var(--brand-500); --btn-br: var(--brand-500); box-shadow: 0 0 0 0 var(--brand-glow); }
.btn--primary:hover { --btn-bg: var(--brand-400); --btn-br: var(--brand-400); box-shadow: 0 8px 24px -4px var(--brand-glow); transform: translateY(-1px); }
.btn--ghost { --btn-fg: var(--text-hi); --btn-br: var(--hairline); }
.btn--ghost:hover { --btn-br: var(--neuro-500); background: rgba(157, 41, 252, 0.06); }
.btn--block { width: 100%; justify-content: center; padding: 14px 20px; }

/* =========================================================
   Navigation
   ========================================================= */
.nav {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: rgba(11, 6, 20, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.nav.is-scrolled { border-bottom-color: var(--hairline); background: rgba(11, 6, 20, 0.88); }
.nav__inner {
  display: flex; align-items: center; gap: var(--sp-6);
  height: var(--nav-h);
}
.nav__brand {
  display: flex; align-items: center;
  flex-shrink: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.nav__brand:hover { opacity: 0.82; }
.nav__lockup { width: auto; height: 26px; display: block; }

.nav__menu {
  display: flex; gap: var(--sp-5);
  margin-left: auto;
}
.nav__link {
  font-size: var(--step--1);
  color: var(--text-md);
  padding: 8px 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--text-hi); border-bottom-color: var(--neuro-500); }

.nav__cta { display: flex; gap: var(--sp-3); }

@media (max-width: 840px) {
  .nav__menu { display: none; }
  .nav__cta { margin-left: auto; }
  .nav__cta .btn--ghost { display: none; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  padding: calc(var(--sp-10) + var(--sp-4)) 0 var(--sp-10);
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: -1;
  color: rgba(157, 41, 252, 0.14);
}
.hero__grid { width: 100%; height: 100%; opacity: 0.4; }
.hero__glow {
  position: absolute;
  width: 640px; height: 640px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.38;
  pointer-events: none;
}
.hero__glow--a { top: -180px; left: -180px; background: radial-gradient(circle at 40% 40%, var(--brand-500), transparent 60%); }
.hero__glow--b { bottom: -240px; right: -120px; background: radial-gradient(circle at 50% 50%, var(--pulse-600), transparent 55%); opacity: 0.22; }

.hero__inner { position: relative; }
.hero__h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--step-7);
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--text-hi);
  margin: 0 0 var(--sp-5);
  max-width: 18ch;
}
.hero__line { display: block; }

/* "ritmo" word treatment ---------------------------------- */
.ritmo {
  display: inline-block;
  position: relative;
  padding: 0 0.02em 0.18em;
}
.ritmo__letters {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 90, "WONK" 1;
  letter-spacing: -0.015em;
  display: inline-flex;
}
.ritmo__letter {
  display: inline-block;
  background: var(--gradient-synq);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.is-hero-ready .ritmo__letter {
  animation: ritmoRise 1400ms var(--ease-out) both;
  animation-delay: calc(560ms + var(--i, 0) * 90ms);
}
@keyframes ritmoRise {
  0%   { transform: translateY(8px); opacity: 0; }
  40%  { transform: translateY(-3px); opacity: 1; }
  60%  { transform: translateY(1px); }
  100% { transform: translateY(0); opacity: 1; }
}

.ritmo__wave {
  position: absolute;
  left: -2%;
  right: -2%;
  width: 104%;
  bottom: -4px;
  height: 0.42em;
  background: var(--gradient-synq);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 36' preserveAspectRatio='none'><path d='M0 18 Q25 4 50 18 T100 18' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 36' preserveAspectRatio='none'><path d='M0 18 Q25 4 50 18 T100 18' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round'/></svg>");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 72px 100%;
  mask-size: 72px 100%;
  -webkit-mask-position: 0 center;
  mask-position: 0 center;
  opacity: 0;
}
.is-hero-ready .ritmo__wave {
  animation:
    waveFadeIn 900ms var(--ease-out) 900ms forwards,
    waveSlide 2.4s linear 1400ms infinite;
}
@keyframes waveFadeIn {
  to { opacity: 1; }
}
@keyframes waveSlide {
  from { -webkit-mask-position-x: 0; mask-position-x: 0; }
  to   { -webkit-mask-position-x: -72px; mask-position-x: -72px; }
}

.hero__lede { margin-bottom: var(--sp-6); max-width: 56ch; }
.hero__lede strong { color: var(--text-hi); font-weight: 600; }

.hero__ctas {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-bottom: var(--sp-9);
}

/* Hero product marquee — three product lockups as a "under the hood" strip */
.hero__marquee {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--hairline);
}
.hero__marquee-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-lo);
}
.hero__marquee-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-7);
  row-gap: var(--sp-5);
}
.hero__marquee-item {
  display: flex;
  align-items: center;
  opacity: 0.72;
  filter: saturate(0.9);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.hero__marquee-item:hover {
  opacity: 1;
  filter: saturate(1.15) drop-shadow(0 6px 16px rgba(157, 41, 252, 0.18));
  transform: translateY(-2px);
}
.hero__marquee-item img { height: 22px; width: auto; display: block; }
@media (max-width: 640px) {
  .hero__marquee-list { gap: var(--sp-5); }
  .hero__marquee-item img { height: 18px; }
}

/* =========================================================
   AUDIENCE STRIP
   ========================================================= */
.audience {
  padding: var(--sp-6) 0;
  border-block: 1px solid var(--hairline);
  background: rgba(19, 12, 34, 0.35);
}
.audience__inner {
  display: flex; align-items: baseline; gap: var(--sp-5) var(--sp-7);
  flex-wrap: wrap;
}
.audience__prompt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-lo);
  margin: 0;
  flex-shrink: 0;
}
.audience__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  font-size: var(--step-0);
  color: var(--text-md);
}
.audience__item { display: inline; }
.audience__verb { color: var(--text-hi); font-weight: 600; }
.audience__target {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  letter-spacing: -0.01em;
  border-bottom: 1px dashed transparent;
  transition: border-color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.audience__target:hover { opacity: 0.82; }
.audience__target--suite     { color: var(--neuro-400); }
.audience__target--analytics { color: var(--analytics-400); }
.audience__target--profit    { color: var(--profit-400); }
.audience__target--suite:hover     { border-bottom-color: var(--neuro-400); }
.audience__target--analytics:hover { border-bottom-color: var(--analytics-400); }
.audience__target--profit:hover    { border-bottom-color: var(--profit-400); }
.arrow { color: var(--text-lo); font-family: var(--font-mono); margin: 0 4px; }
@media (max-width: 760px) {
  .audience__list { flex-direction: column; gap: var(--sp-3); }
}

/* =========================================================
   Section head
   ========================================================= */
.section-head {
  max-width: 720px;
  margin-bottom: var(--sp-8);
}
.section-head--center { text-align: center; margin-inline: auto; }
.section-head__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-5);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--text-hi);
  margin: 0 0 var(--sp-4);
}
.section-head__lede {
  color: var(--text-md);
  font-size: var(--step-1);
  line-height: 1.55;
  margin: 0;
}

/* =========================================================
   PRODUCTS
   ========================================================= */
.products { padding: var(--sp-10) 0; position: relative; }

.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
  padding: var(--sp-9) 0;
  border-top: 1px solid var(--hairline);
  position: relative;
}
.product::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 72px;
  height: 2px;
  background: var(--neuro-400);
  box-shadow: 0 0 24px rgba(157, 41, 252, 0.55);
}
.product--analytics::before { background: var(--analytics-400); box-shadow: 0 0 24px rgba(34, 197, 94, 0.55); }
.product--profit::before { background: var(--profit-400); box-shadow: 0 0 24px rgba(72, 128, 255, 0.55); }
.product:first-of-type { padding-top: var(--sp-7); }
.product__body,
.product__visual { min-width: 0; }
.product--reverse .product__body { order: 2; }
.product--reverse .product__visual { order: 1; }

.product__meta {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.product__num {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--text-lo);
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.product__mark {
  height: 18px;
  width: auto;
  display: block;
  opacity: 0.9;
  flex-shrink: 0;
}
.product__tag { margin: 0; }

.product__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-4);
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--text-hi);
  margin: 0 0 var(--sp-4);
}
.product__title--profit em {
  background: linear-gradient(135deg, var(--profit-500), var(--profit-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.product__title--analytics em {
  background: linear-gradient(135deg, var(--analytics-500), var(--analytics-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.product__lede { color: var(--text-md); font-size: var(--step-1); max-width: 54ch; margin: 0 0 var(--sp-6); line-height: 1.55; }

.product__features {
  list-style: none; padding: 0; margin: 0 0 var(--sp-6);
  display: grid;
  gap: var(--sp-3);
  font-size: var(--step-0);
  color: var(--text-md);
}
.product__features li {
  position: relative;
  padding-left: 24px;
  line-height: 1.55;
}
.dot {
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--neuro-500);
  box-shadow: 0 0 0 4px rgba(157, 41, 252, 0.12);
}
.dot--profit { background: var(--profit-500); box-shadow: 0 0 0 4px rgba(72, 128, 255, 0.14); }
.dot--analytics { background: var(--analytics-500); box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18); }

.product__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--text-hi);
  font-size: var(--step--1);
  font-weight: 500;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.product__cta:hover { border-color: var(--neuro-500); background: rgba(157, 41, 252, 0.06); transform: translateY(-1px); }
.product__cta--profit:hover { border-color: var(--profit-500); background: rgba(72, 128, 255, 0.08); }
.product__cta--analytics:hover { border-color: var(--analytics-500); background: rgba(34, 197, 94, 0.08); }

/* Terminal visual -------------------------------------- */
.product__visual { position: sticky; top: calc(var(--nav-h) + var(--sp-5)); }
.term {
  background: linear-gradient(180deg, var(--bg-raised) 0%, var(--bg-depth) 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(157, 41, 252, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.term__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(0, 0, 0, 0.18);
  position: relative;
}
.term__bar span:not(.term__title) {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--text-disabled);
}
.term__bar span:nth-child(1) { background: #ff5f57; }
.term__bar span:nth-child(2) { background: #ffbd2e; }
.term__bar span:nth-child(3) { background: #28c840; }
.term__title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-lo);
  position: absolute;
  left: 50%; transform: translateX(-50%);
  letter-spacing: 0.05em;
}
.term__body {
  padding: var(--sp-5);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.75;
  color: var(--text-md);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.term__row { display: block; }
.term__row + .term__row { margin-top: 2px; }
.term__kw,
.term__kw-p,
.term__kw-a,
.term__kw-b,
.term__ctrl,
.term__sip-ok,
.term__sip-end { display: inline-block; margin-right: 6px; white-space: nowrap; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; }
.term__kw { color: var(--neuro-400); }
.term__kw-p { color: var(--profit-400); }
.term__kw-a { color: var(--analytics-400); }
.term__kw-b { color: var(--neuro-300); }
.term__dtmf {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 3px;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(157, 41, 252, 0.18), rgba(104, 0, 189, 0.28));
  color: var(--neuro-300);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  border: 1px solid rgba(157, 41, 252, 0.35);
}
.term__tts {
  color: var(--text-hi);
  font-style: italic;
  opacity: 0.95;
}
.term__var {
  color: var(--neuro-300);
  font-weight: 500;
  font-style: normal;
}
.term__ok { color: var(--success-500); font-weight: 500; margin-left: 4px; }
.term__warn { color: var(--warning-500); font-weight: 500; }
.term__arrow { color: var(--text-lo); margin: 0 4px; }
.term__muted { color: var(--text-lo); font-style: italic; font-size: 0.74rem; margin-top: var(--sp-2); display: block; }

.term--profit {
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(72, 128, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.term--analytics {
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(34, 197, 94, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.term__body--stream {
  min-height: 380px;
  max-height: 380px;
  overflow: hidden;
  position: relative;
}
.term__body--stream .term__row {
  opacity: 0;
  transform: translateY(4px);
  animation: streamIn 280ms var(--ease-out) forwards;
}
.term__body--stream .term__row--sep {
  margin: 10px 0 6px;
  border-top: 1px dashed var(--hairline);
  padding-top: 8px;
  color: var(--text-lo);
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.term__body--stream .term__row--head {
  color: var(--text-hi);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.term__ctrl { color: var(--analytics-400); font-weight: 500; }
.term__sip-ok { color: var(--success-500); font-weight: 500; }
.term__sip-end { color: var(--danger-500); font-weight: 500; }
@keyframes streamIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .product { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-7) 0; }
  .product--reverse .product__body { order: 1; }
  .product--reverse .product__visual { order: 2; }
  .product__visual { position: static; }
}

/* =========================================================
   WHY / PILLARS
   ========================================================= */
.why {
  padding: var(--sp-10) 0;
  border-top: 1px solid var(--hairline);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(104, 0, 189, 0.10), transparent 70%),
    var(--bg-depth);
}

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pillar {
  padding: var(--sp-6);
  background: var(--bg-depth);
  position: relative;
  transition: background var(--dur-base) var(--ease-out);
}
.pillar:hover { background: var(--bg-raised); }
.pillar__num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--neuro-400);
  letter-spacing: 0.16em;
  margin-bottom: var(--sp-4);
}
.pillar__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  color: var(--text-hi);
  margin: 0 0 var(--sp-3);
}
.pillar p { margin: 0; font-size: var(--step-0); color: var(--text-md); line-height: 1.55; }

/* =========================================================
   SCALE
   ========================================================= */
.scale {
  padding: var(--sp-10) 0;
  text-align: center;
}
.scale__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
}
.scale__cell {
  padding: var(--sp-7) var(--sp-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(19, 12, 34, 0.6), rgba(11, 6, 20, 0.6));
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.scale__cell:hover { transform: translateY(-2px); border-color: var(--neuro-500); }
.scale__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-lo);
  margin-bottom: var(--sp-4);
}
.scale__value { margin: 0; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.scale__big {
  font-family: var(--font-sans);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--text-hi) 0%, var(--neuro-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.scale__plus {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 0.7em;
  color: var(--neuro-400);
  -webkit-text-fill-color: currentColor;
}
.scale__unit {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-md);
  letter-spacing: 0.04em;
}

/* =========================================================
   FINAL CTA
   ========================================================= */
.final {
  padding: var(--sp-10) 0;
  border-top: 1px solid var(--hairline);
  background:
    radial-gradient(ellipse 50% 100% at 100% 50%, rgba(104, 0, 189, 0.16), transparent 60%),
    radial-gradient(ellipse 40% 80% at 0% 50%, rgba(0, 212, 255, 0.06), transparent 60%);
}
.final__inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--sp-8);
  align-items: center;
}
.final__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-5);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text-hi);
  margin: 0 0 var(--sp-4);
}
.final__lede { color: var(--text-md); font-size: var(--step-1); max-width: 46ch; margin: 0; }

.final__form {
  background: linear-gradient(180deg, var(--bg-raised) 0%, var(--bg-depth) 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-lo);
}
.field input,
.field select,
.field textarea {
  padding: 12px 14px;
  background: var(--bg-void);
  color: var(--text-hi);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  font-family: var(--font-sans);
}
.field textarea {
  resize: vertical;
  min-height: 92px;
  line-height: 1.5;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--neuro-500);
  box-shadow: 0 0 0 3px rgba(157, 41, 252, 0.18);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-lo); }
.field__helper {
  font-size: 0.78rem;
  color: var(--text-lo);
  margin: 0;
  text-align: center;
}

@media (max-width: 900px) {
  .final__inner { grid-template-columns: 1fr; }
  .final__form { max-width: 520px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  padding: var(--sp-9) 0 var(--sp-6);
  border-top: 1px solid var(--hairline);
  background: var(--bg-void);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.8fr 1.4fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
}
.footer__brand { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.footer__lockup {
  height: 38px;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 24px rgba(157, 41, 252, 0.22));
}
.footer__tagline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-1);
  color: var(--text-hi);
  margin: 0;
  letter-spacing: -0.02em;
}
.footer__legal {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-lo);
  line-height: 1.6;
  margin: 0;
  letter-spacing: 0.04em;
}
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-lo);
  margin: 0 0 var(--sp-4);
  font-weight: 500;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.footer__col a {
  color: var(--text-md);
  font-size: var(--step--1);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__col a:hover { color: var(--text-hi); }

.footer__col--contact ul { margin-bottom: var(--sp-4); }
.footer__addr {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.7;
  color: var(--text-lo);
  font-style: normal;
  letter-spacing: 0.02em;
}

.footer__fine {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-lo);
  letter-spacing: 0.08em;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer__inner { grid-template-columns: 1fr; }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq {
  padding: var(--sp-10) 0;
  border-top: 1px solid var(--hairline);
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(104, 0, 189, 0.08), transparent 70%),
    var(--bg-void);
}
.faq__list {
  display: grid;
  gap: var(--sp-3);
  max-width: 880px;
  margin: var(--sp-8) auto 0;
}
.faq__item {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-depth) 0%, var(--bg-void) 100%);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  overflow: hidden;
}
.faq__item[open] {
  border-color: var(--neuro-500);
  background: linear-gradient(180deg, var(--bg-raised) 0%, var(--bg-depth) 100%);
  animation: faqItemPulse 720ms var(--ease-out) both;
}
@keyframes faqItemPulse {
  0%   { box-shadow: 0 0 0 0 rgba(157, 41, 252, 0.45); }
  60%  { box-shadow: 0 0 0 6px rgba(157, 41, 252, 0); }
  100% { box-shadow: 0 0 0 0 rgba(157, 41, 252, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .faq__item[open] { animation: none; }
}
.faq__item:hover:not([open]) {
  border-color: var(--rule);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-1);
  color: var(--text-hi);
  cursor: pointer;
  list-style: none;
  letter-spacing: -0.01em;
  line-height: 1.35;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--text-hi); }
.faq__q:focus-visible {
  outline: 2px solid var(--neuro-500);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}
.faq__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--neuro-400);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.faq__item[open] .faq__icon {
  transform: rotate(45deg);
  border-color: var(--neuro-500);
  background: var(--neuro-500);
  color: var(--text-hi);
}
.faq__a {
  padding: 0 var(--sp-6) var(--sp-5);
  color: var(--text-md);
  font-size: var(--step-0);
  line-height: 1.65;
  max-width: 72ch;
}
.faq__item[open] > .faq__a {
  animation: faqReveal var(--dur-slow) var(--ease-out) both;
}
.faq__item[open] > .faq__a > * {
  animation: faqRevealChild var(--dur-slow) var(--ease-out) both;
}
.faq__item[open] > .faq__a > *:nth-child(1) { animation-delay: 60ms; }
.faq__item[open] > .faq__a > *:nth-child(2) { animation-delay: 140ms; }
.faq__item[open] > .faq__a > *:nth-child(3) { animation-delay: 220ms; }
.faq__item[open] > .faq__a > *:nth-child(4) { animation-delay: 300ms; }
.faq__item[open] > .faq__a .faq__combos li,
.faq__item[open] > .faq__a .faq__perks li {
  animation: faqRevealChild var(--dur-slow) var(--ease-out) both;
}
.faq__item[open] > .faq__a .faq__combos li:nth-child(1),
.faq__item[open] > .faq__a .faq__perks li:nth-child(1) { animation-delay: 180ms; }
.faq__item[open] > .faq__a .faq__combos li:nth-child(2),
.faq__item[open] > .faq__a .faq__perks li:nth-child(2) { animation-delay: 260ms; }
.faq__item[open] > .faq__a .faq__combos li:nth-child(3),
.faq__item[open] > .faq__a .faq__perks li:nth-child(3) { animation-delay: 340ms; }

@keyframes faqReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes faqRevealChild {
  from { opacity: 0; transform: translateY(-8px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* Progressive enhancement — real height animation on browsers that support it */
@supports (interpolate-size: allow-keywords) {
  .faq__list { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition:
      block-size var(--dur-slow) var(--ease-out),
      opacity var(--dur-base) var(--ease-out),
      content-visibility var(--dur-slow) allow-discrete;
  }
  .faq__item[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__item[open] > .faq__a,
  .faq__item[open] > .faq__a > *,
  .faq__item[open] > .faq__a .faq__combos li,
  .faq__item[open] > .faq__a .faq__perks li { animation: none; }
  .faq__item::details-content { transition: none; }
}

.faq__a p { margin: 0; }
.faq__a p + p { margin-top: var(--sp-3); }
.faq__a p + ul, .faq__a ul + p { margin-top: var(--sp-3); }
.faq__a strong { color: var(--text-hi); font-weight: 600; }
.faq__a em { color: var(--text-hi); font-style: italic; font-family: var(--font-editorial); }
.faq__combos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-3);
}
.faq__combos li {
  padding: var(--sp-3) var(--sp-4);
  border-left: 2px solid var(--neuro-500);
  background: linear-gradient(90deg, rgba(104, 0, 189, 0.08), transparent 60%);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 0.94em;
}
.faq__combos strong { color: var(--neuro-300); }

.faq__perks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-3);
}
.faq__perks li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-depth);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  font-size: 0.96em;
}
.faq__perk-mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(34, 232, 160, 0.14);
  color: var(--success-500);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid rgba(34, 232, 160, 0.35);
  line-height: 1;
  margin-top: 2px;
}

/* Highlight FAQ (price card) — pulls the eye toward the CTA */
.faq__item--highlight {
  border-color: rgba(157, 41, 252, 0.45);
  background:
    radial-gradient(ellipse 90% 180% at 0% 0%, rgba(104, 0, 189, 0.14), transparent 60%),
    linear-gradient(180deg, var(--bg-raised) 0%, var(--bg-depth) 100%);
  box-shadow: 0 12px 48px -20px rgba(157, 41, 252, 0.35);
}
.faq__item--highlight:hover:not([open]) { border-color: var(--neuro-500); }
.faq__item--highlight .faq__q { color: var(--text-hi); }
.faq__item--highlight .faq__icon {
  border-color: var(--neuro-500);
  color: var(--neuro-300);
}
.faq__item--highlight[open] .faq__icon {
  background: var(--neuro-500);
  color: var(--text-hi);
}
.faq__a code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 2px 6px;
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--neuro-300);
}

@media (max-width: 640px) {
  .faq__q { padding: var(--sp-4) var(--sp-5); font-size: var(--step-0); }
  .faq__a { padding: 0 var(--sp-5) var(--sp-4); }
}

/* =========================================================
   Utility: visually hidden (a11y)
   ========================================================= */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* =========================================================
   Footer contacts (Comercial / NOC / Email)
   ========================================================= */
.footer__contacts {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
  display: grid;
  gap: var(--sp-3);
}
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer__contact-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-lo);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer__contact-label--noc { color: var(--danger-500); }
.footer__contact-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(255, 78, 106, 0.14);
  color: var(--danger-500);
  border: 1px solid rgba(255, 78, 106, 0.35);
  line-height: 1;
}
.footer__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 10px;
  margin-left: -10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--text-md);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  width: fit-content;
}
.footer__contact-link:hover,
.footer__contact-link:focus-visible {
  color: var(--text-hi);
  border-color: var(--hairline);
  background: var(--bg-depth);
  transform: translateX(2px);
}
.footer__contact-link--noc:hover,
.footer__contact-link--noc:focus-visible {
  border-color: rgba(255, 78, 106, 0.45);
  background: rgba(255, 78, 106, 0.06);
}
.footer__contact-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--neuro-400);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__contact-link--noc .footer__contact-icon { color: var(--danger-500); }

/* =========================================================
   Social icons (footer)
   ========================================================= */
.footer__social {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--text-md);
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.footer__social a:hover,
.footer__social a:focus-visible {
  border-color: var(--neuro-500);
  color: var(--text-hi);
  background: var(--bg-peak);
  transform: translateY(-1px);
}
.footer__social svg { width: 18px; height: 18px; }

/* =========================================================
   Reveal animations
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--delay, 0) * 80ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-delay="1"] { --delay: 1; }
[data-delay="2"] { --delay: 2; }
[data-delay="3"] { --delay: 3; }
[data-delay="4"] { --delay: 4; }

/* Reduced motion -------------------------------------- */
@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;
  }
  .ritmo__wave { opacity: 1 !important; animation: none !important; }
  .ritmo__letter { transform: none !important; opacity: 1 !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   Responsive tuning
   ========================================================= */
@media (max-width: 640px) {
  .hero { padding-top: var(--sp-9); padding-bottom: var(--sp-8); }
  .hero__h1 { font-size: clamp(2.6rem, 10vw, 3.8rem); max-width: 100%; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { justify-content: center; }
  .section-head__title { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .audience__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .audience__list { flex-direction: column; gap: var(--sp-3); }
}