/* =====================================================================
   SalesAId — Landing
   Design system foundation: tokens, reset, typography, primitives.
   Dark + violet. Premium B2B AI sales-intelligence aesthetic.
   ===================================================================== */

/* ---- Fonts: Space Grotesk (display, igual que Sportian) + General Sans (body) + JetBrains Mono (data) ---- */
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ===================== TOKENS ===================== */
:root {
  /* Brand violet */
  --brand-from: #7c5cff;
  --brand-to: #c084fc;
  --brand-solid: #8b5cf6;
  --brand-strong: #a78bfa;
  --brand-bright: #b69bff;
  --brand-gradient: linear-gradient(120deg, #7c5cff 0%, #a472ff 45%, #c084fc 100%);
  --brand-glow: rgba(124, 92, 255, 0.45);

  /* Secondary accent — electric cyan, used sparingly to break violet monotony */
  --accent-cyan: #4fd6e8;
  --accent-cyan-soft: rgba(79, 214, 232, 0.16);

  /* Semantic (mirrors product) */
  --pos: #34d399;
  --warn: #fbbf24;
  --risk: #fb7185;

  /* Surfaces — near-black with violet undertone */
  --bg: #07060d;
  --bg-1: #0b0a14;
  --bg-2: #110f1c;
  --surface: rgba(255, 255, 255, 0.022);
  --surface-2: rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --glass: rgba(15, 14, 24, 0.66);

  /* Lines */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.12);
  --line-brand: rgba(139, 92, 246, 0.34);

  /* Text */
  --tx: #f5f5fa;
  --tx-2: #b6b7c9;
  --tx-3: #9092a6;
  --tx-4: #75768f;

  /* Type */
  --font-display: 'Space Grotesk', 'General Sans', system-ui, sans-serif;
  --font-sans: 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Shadow / glow */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 16px 50px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 40px 120px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 1px var(--line-brand), 0 20px 70px rgba(124, 92, 255, 0.22);

  /* Layout */
  --container: 1200px;
  --container-wide: 1320px;
  --gutter: 24px;
  --nav-h: 68px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ===================== RESET ===================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.4) transparent;
  overflow-x: hidden;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--tx);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
ul { list-style: none; }
::selection { background: rgba(124, 92, 255, 0.4); color: #fff; }

/* webkit scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.35); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.55); }

/* ===================== TYPE SCALE ===================== */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; color: var(--tx); }
.display {
  font-size: clamp(2.6rem, 6.2vw, 5.1rem);
  line-height: 0.99;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.h2 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.02em; }
.h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: -0.02em; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--tx-2); line-height: 1.55; font-weight: 400; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-strong);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: '';
  width: 32px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-solid), transparent);
}
.eyebrow.center::before { display: none; }

.grad-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* el "AI" del wordmark SalesAId, en cualquier texto del cuerpo */
.ai {
  font-style: normal;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.text-cyan { color: var(--accent-cyan); }
.muted { color: var(--tx-3); }

/* ===================== LAYOUT ===================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container.wide { max-width: var(--container-wide); }
section { position: relative; padding-block: clamp(80px, 11vw, 150px); }
.section-head { max-width: 760px; margin-bottom: clamp(48px, 6vw, 76px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .h2 { margin-top: 18px; }
.section-head .lead { margin-top: 20px; }

.brand-wordmark { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; }
.brand-wordmark em { font-style: normal; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ===================== BUTTONS ===================== */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  padding: 0.9em 1.5em;
  border-radius: var(--r-pill);
  font-weight: 600; font-size: 0.96rem; letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s, border-color 0.3s, color 0.3s;
  white-space: nowrap;
  will-change: transform;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn-primary {
  color: #0b0716;
  background: var(--brand-gradient);
  box-shadow: 0 10px 34px rgba(124, 92, 255, 0.34), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-primary:hover { box-shadow: 0 14px 50px rgba(124, 92, 255, 0.5), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-ghost {
  color: var(--tx);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover { background: var(--surface-hover); border-color: var(--line-brand); }
.btn-lg { padding: 1.05em 1.9em; font-size: 1.02rem; }
.btn-sm { padding: 0.62em 1.1em; font-size: 0.85rem; }
.btn .arrow { transition: transform 0.35s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* sheen sweep on primary */
.btn-primary::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.5) 48%, transparent 62%);
  transform: translateX(-120%); transition: transform 0.7s var(--ease); pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(120%); }

/* ===================== CHIP / PILL / BADGE ===================== */
.pill {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.4em 0.85em;
  border-radius: var(--r-pill);
  font-size: 0.8rem; font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--tx-2);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 10px var(--pos); }
.pill .dot.live { animation: pulse 1.8s var(--ease-in-out) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ===================== CARDS ===================== */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
/* spotlight (mouse-follow radial) — JS sets --mx/--my */
.spotlight::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(139,92,246,0.16), transparent 60%);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.spotlight:hover::before { opacity: 1; }
/* gradient hairline that brightens on hover */
.card.lift { transition: transform 0.5s var(--ease), border-color 0.5s var(--ease); }
.card.lift:hover { transform: translateY(-4px); border-color: var(--line-brand); }

/* ===================== REVEAL ANIMATIONS ===================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal='fade'] { transform: none; }
[data-reveal='scale'] { transform: scale(0.96); }
[data-reveal='left'] { transform: translateX(-30px); }
[data-reveal='right'] { transform: translateX(30px); }
.revealed[data-reveal] { opacity: 1 !important; transform: none !important; }

/* ===================== UTILITIES ===================== */
.hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2) 30%, var(--line-2) 70%, transparent); border: 0; }
.glow-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; }
.noise {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.035; 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.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}