/* SophiMind — Revenue Room landing
   Design system: Filo-style data dashboard, electric blue, Geist throughout.
*/

:root {
  /* Color tokens */
  --bg: #ffffff;
  --bg-muted: #f6f8fc;
  --bg-elevated: #ffffff;
  --canvas: #0a0f1c;          /* dark canvas for revenue room */
  --canvas-2: #111728;
  --canvas-line: #1f2a44;

  --ink: #0a0f1c;
  --ink-2: #1f2a44;
  --ink-3: #4b5670;
  --ink-4: #7a8499;
  --ink-5: #aab3c4;
  --line: #e6eaf2;
  --line-2: #eef1f7;

  /* Brand */
  --blue: #2c5cff;            /* primary electric blue */
  --blue-2: #4f7bff;
  --blue-3: #1b3fcc;
  --blue-soft: #e8efff;
  --blue-mist: #f1f5ff;

  /* Signal */
  --red: #ef4444;
  --red-soft: #fee2e2;
  --red-mist: #fff5f5;
  --green: #10b981;
  --green-soft: #d1fae5;
  --green-mist: #ecfdf5;
  --amber: #f59e0b;
  --amber-soft: #fef3c7;
  --violet: #8b5cf6;
  --teal: #06b6d4;

  /* Radii / shadow / spacing */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10,15,28,.04), 0 1px 1px rgba(10,15,28,.03);
  --shadow-md: 0 4px 14px rgba(10,15,28,.06), 0 2px 4px rgba(10,15,28,.04);
  --shadow-lg: 0 18px 40px -12px rgba(10,15,28,.18), 0 8px 18px -8px rgba(10,15,28,.10);
  --shadow-blue: 0 18px 40px -12px rgba(44,92,255,.45);

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Layout helpers */
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.wrap-narrow {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 32px;
}

.section {
  padding: 120px 0;
  position: relative;
}
.section--tight { padding: 80px 0; }
.section--muted { background: var(--bg-muted); }
.section--dark {
  background: var(--canvas);
  color: #e5ecf8;
}

/* Type scale */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  padding: 6px 12px;
  background: var(--blue-soft);
  border-radius: var(--r-pill);
}
.eyebrow--ghost {
  background: transparent;
  padding: 0;
  color: var(--ink-4);
}
.eyebrow--dark {
  background: rgba(79, 123, 255, 0.16);
  color: #9fb6ff;
}

h1, h2, h3, h4 {
  margin: 0;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: balance;
  color: var(--ink);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #f6f8fd; }

.h-display {
  font-size: clamp(44px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.h-1 {
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.h-2 {
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.h-3 {
  font-size: 20px;
  line-height: 1.3;
}
.lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-3);
  text-wrap: pretty;
  max-width: 56ch;
}
.section--dark .lead { color: #b6c2dc; }

.mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss01", "zero";
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 18px -8px rgba(10,15,28,.4);
}
.btn--primary:hover { background: #000; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 12px 24px -10px rgba(10,15,28,.5); }
.btn--blue {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-blue);
}
.btn--blue:hover { background: var(--blue-3); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover { background: var(--bg-muted); }
.btn--dark-ghost {
  background: rgba(255,255,255,.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
}
.btn--dark-ghost:hover { background: rgba(255,255,255,.1); }
.btn--sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn--lg { height: 56px; padding: 0 28px; font-size: 16px; }

/* Cards */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

/* Chips / status pills */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-muted);
  color: var(--ink-3);
  font-weight: 500;
}
.chip--red { background: var(--red-soft); color: #b91c1c; }
.chip--green { background: var(--green-soft); color: #047857; }
.chip--blue { background: var(--blue-soft); color: var(--blue-3); }
.chip--amber { background: var(--amber-soft); color: #92400e; }
.chip--dark { background: rgba(255,255,255,.08); color: #cdd6ee; }

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-4);
}
.dot--green { background: var(--green); box-shadow: 0 0 0 4px rgba(16,185,129,.18); }
.dot--red { background: var(--red); box-shadow: 0 0 0 4px rgba(239,68,68,.18); }
.dot--blue { background: var(--blue); box-shadow: 0 0 0 4px rgba(44,92,255,.18); }
.dot--amber { background: var(--amber); box-shadow: 0 0 0 4px rgba(245,158,11,.2); }

/* Grids */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* Subtle background grid for hero / dark sections */
.bg-grid {
  background-image:
    linear-gradient(rgba(44,92,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,92,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
}
.bg-grid--dark {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Animations */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(44,92,255,.45); }
  100% { box-shadow: 0 0 0 14px rgba(44,92,255,0); }
}
@keyframes pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(239,68,68,.45); }
  100% { box-shadow: 0 0 0 14px rgba(239,68,68,0); }
}
@keyframes pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
  100% { box-shadow: 0 0 0 14px rgba(16,185,129,0); }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes dash {
  to { stroke-dashoffset: -200; }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes drop-fall {
  0%   { transform: translate(-50%, -4px) rotate(180deg) scale(0.4); opacity: 0; }
  15%  { transform: translate(-50%, 0)    rotate(180deg) scale(1);   opacity: 1; }
  60%  { transform: translate(-50%, 38px) rotate(180deg) scale(1);   opacity: .9; }
  85%  { transform: translate(-50%, 56px) rotate(180deg) scale(.6);  opacity: .4; }
  100% { transform: translate(-50%, 62px) rotate(180deg) scale(.2);  opacity: 0; }
}
@keyframes dot-travel {
  from { offset-distance: 0%;  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  to   { offset-distance: 100%; opacity: 0; }
}

/* Utility */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.gap-12 { gap: 48px; }
.flex-1 { flex: 1; }
.center { justify-content: center; align-items: center; }
.between { justify-content: space-between; }
.text-muted { color: var(--ink-3); }
.text-mute2 { color: var(--ink-4); }

/* Avatars */
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

/* AI Agent tag — small subordinate label after agent name */
.ai-tag {
  font-family: var(--font-mono);
  font-size: 0.7em;
  font-weight: 400;
  color: var(--ink-4);
  margin-left: 5px;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: baseline;
  opacity: .85;
}
.section--dark .ai-tag,
.ai-tag--dark {
  color: #7c89a8;
}