/* ===== Moneda.ai — design tokens v2 ===== */
:root {
  /* surfaces — very dark, slight blue undertone */
  --bg: #050609;
  --bg-2: #0a0c11;
  --surface: #0f1218;
  --surface-2: #151921;
  --surface-3: #1c212b;
  --surface-elev: #1a1f29;
  --border: #232a36;
  --border-soft: #1a1f29;
  --hairline: rgba(255,255,255,.055);

  /* text */
  --text: #f1f3f6;
  --text-dim: #aab2bf;
  --text-mute: #6f7886;
  --text-faint: #434b58;

  /* messenger themes */
  --wa-accent: #c5fb6a;
  --wa-accent-2: #a3e84a;
  --wa-accent-dark: #91d234;
  --wa-glow: rgba(197, 251, 106, .35);
  --wa-bubble-tx: #1d3a25;
  --wa-bubble-rx: #1a1f29;
  --wa-chat-bg: #0b141a;
  --wa-name: "WhatsApp";

  --tg-accent: #29a9eb;
  --tg-accent-2: #4cbcf1;
  --tg-accent-dark: #1e8fcc;
  --tg-glow: rgba(41, 169, 235, .35);
  --tg-bubble-tx: #1f3d56;
  --tg-bubble-rx: #1a232f;
  --tg-chat-bg: #0e1721;
  --tg-name: "Telegram";

  /* active accent — overridden by [data-messenger] */
  --accent: var(--wa-accent);
  --accent-2: var(--wa-accent-2);
  --accent-dark: var(--wa-accent-dark);
  --accent-glow: var(--wa-glow);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-fade: color-mix(in srgb, var(--accent) 6%, transparent);
  --on-accent: #06120a;
  --bubble-tx: var(--wa-bubble-tx);
  --bubble-rx: var(--wa-bubble-rx);
  --chat-bg: var(--wa-chat-bg);
  --messenger-name: var(--wa-name);

  /* semantic */
  --positive: #4ade80;
  --positive-soft: rgba(74,222,128,.14);
  --negative: #ff4d63;
  --negative-soft: rgba(255,77,99,.14);
  --warning: #ffb74d;
  --info: #60a5fa;
  --series-1: #4ade80;
  --series-2: #ff4d63;
  --series-3: #ff8a3d;
  --series-4: #60a5fa;
  --series-5: #c084fc;

  /* type */
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-sans: "Geist", "DM Sans", -apple-system, system-ui, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* radii / shadow */
  --r-sm: 8px;
  --r: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-full: 999px;
  --shadow-lg: 0 30px 80px -25px rgba(0,0,0,.7), 0 10px 30px -10px rgba(0,0,0,.4);
  --shadow-md: 0 10px 30px -12px rgba(0,0,0,.5);
  --shadow-glow: 0 0 0 1px var(--accent-soft), 0 30px 80px -20px var(--accent-glow);
}

[data-messenger="telegram"] {
  --accent: var(--tg-accent);
  --accent-2: var(--tg-accent-2);
  --accent-dark: var(--tg-accent-dark);
  --accent-glow: var(--tg-glow);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-fade: color-mix(in srgb, var(--accent) 7%, transparent);
  --on-accent: #061018;
  --bubble-tx: var(--tg-bubble-tx);
  --bubble-rx: var(--tg-bubble-rx);
  --chat-bg: var(--tg-chat-bg);
  --messenger-name: var(--tg-name);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

::selection { background: var(--accent); color: var(--on-accent); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--surface-3); }

/* utility */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; }
.dim { color: var(--text-dim); }
.mute { color: var(--text-mute); }
.tnum { font-variant-numeric: tabular-nums; }

/* shared */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  font-weight: 500;
  font-size: 14px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
}
.btn-primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  box-shadow: 0 8px 24px -6px var(--accent-glow);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface); }
.btn-dark {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-soft);
}
.btn-dark:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  font-size: 12.5px;
  color: var(--text-dim);
}

.card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 140px),
    var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}

/* Lift-on-hover for interactive feature / tech / pricing cards */
.card-rise {
  transition: transform .22s cubic-bezier(.2,.7,.2,1),
              border-color .22s ease, box-shadow .22s ease;
  will-change: transform;
}
.card-rise:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  box-shadow:
    0 22px 48px -24px rgba(0,0,0,.78),
    0 0 24px -12px var(--accent-glow);
}

.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.chat-bg {
  background-color: var(--chat-bg);
  background-image:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.012) 0 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.018) 0 1px, transparent 1px);
  background-size: 32px 32px, 64px 64px;
}

/* grid pattern for sections */
.grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* animations */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(0.5deg); }
}
@keyframes pulse-ring {
  0% { transform: scale(.8); opacity: .7; }
  100% { transform: scale(2); opacity: 0; }
}
@keyframes shine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}