/*
 * SpotLight landing page — plain CSS version
 * Design system definition.
 *
 * The @theme inline block maps CSS custom properties to Tailwind utility
 * classes (e.g. --color-primary -> bg-primary, text-primary).
 *
 * The :root and .dark blocks define the actual color values using oklch.
 * All colors MUST use oklch format.
 *
 * To add a semantic color:
 * 1. Add the variable to :root (light value) and .dark (dark value)
 * 2. Register it in @theme inline as --color-<name>: var(--<name>)
 */

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-ring-offset-background: var(--background);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  --radius: 0.625rem;
  --background: oklch(0.16 0.012 60);
  --foreground: oklch(0.96 0.008 80);
  --surface: oklch(0.20 0.014 60);
  --surface-2: oklch(0.235 0.016 60);
  --hairline: oklch(1 0 0 / 8%);
  --hairline-strong: oklch(1 0 0 / 14%);
  --muted-ink: oklch(0.72 0.02 70);
  --dim-ink: oklch(0.52 0.02 70);
  --amber: oklch(0.82 0.16 72);
  --amber-deep: oklch(0.72 0.17 55);
  --rose: oklch(0.72 0.17 30);
  --sage: oklch(0.78 0.09 155);
  --danger: oklch(0.7 0.16 22);
  --gradient-beam: linear-gradient(135deg, oklch(0.86 0.17 78) 0%, oklch(0.72 0.19 45) 60%, oklch(0.62 0.2 25) 100%);
  --gradient-halo: radial-gradient(60% 50% at 50% 0%, oklch(0.72 0.19 55 / 0.35) 0%, transparent 70%);
  --shadow-glow: 0 30px 80px -20px oklch(0.72 0.19 55 / 0.35);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.129 0.042 264.695);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.129 0.042 264.695);
  --primary: oklch(0.208 0.042 265.755);
  --primary-foreground: oklch(0.984 0.003 247.858);
  --secondary: oklch(0.968 0.007 247.896);
  --secondary-foreground: oklch(0.208 0.042 265.755);
  --muted: oklch(0.968 0.007 247.896);
  --muted-foreground: oklch(0.554 0.046 257.417);
  --accent: oklch(0.968 0.007 247.896);
  --accent-foreground: oklch(0.208 0.042 265.755);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(0.929 0.013 255.508);
  --input: oklch(0.929 0.013 255.508);
  --ring: oklch(0.704 0.04 256.788);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.984 0.003 247.858);
  --sidebar-foreground: oklch(0.129 0.042 264.695);
  --sidebar-primary: oklch(0.208 0.042 265.755);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.968 0.007 247.896);
  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
  --sidebar-border: oklch(0.929 0.013 255.508);
  --sidebar-ring: oklch(0.704 0.04 256.788);
}

.dark {
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(0.208 0.042 265.755);
  --card-foreground: oklch(0.984 0.003 247.858);
  --popover: oklch(0.208 0.042 265.755);
  --popover-foreground: oklch(0.984 0.003 247.858);
  --primary: oklch(0.929 0.013 255.508);
  --primary-foreground: oklch(0.208 0.042 265.755);
  --secondary: oklch(0.279 0.041 260.031);
  --secondary-foreground: oklch(0.984 0.003 247.858);
  --muted: oklch(0.279 0.041 260.031);
  --muted-foreground: oklch(0.704 0.04 256.788);
  --accent: oklch(0.279 0.041 260.031);
  --accent-foreground: oklch(0.984 0.003 247.858);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.551 0.027 264.364);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.208 0.042 265.755);
  --sidebar-foreground: oklch(0.984 0.003 247.858);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.279 0.041 260.031);
  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.551 0.027 264.364);
}

* {
  border-color: var(--border);
}

body {
  background-color: var(--background);
  color: var(--foreground);
}

/* ============ SpotLight landing ============ */
.sl-root {
  position: relative;
  min-height: 100vh;
  color: var(--foreground);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}

.sl-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.sl-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(oklch(1 0 0 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(80% 60% at 50% 20%, black 40%, transparent 100%);
}
.sl-halo {
  position: absolute; top: -240px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 720px;
  background: var(--gradient-halo);
  filter: blur(20px);
}

.sl-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }

/* Nav */
.sl-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--background) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.sl-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; height: 72px; display: flex; align-items: center; justify-content: space-between; }
.sl-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--foreground); }
.sl-wordmark { font-family: "Instrument Serif", serif; font-size: 22px; letter-spacing: -0.01em; }
.sl-wordmark em { font-style: normal; background: var(--gradient-beam); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sl-brand-sub { color: var(--dim-ink); font-family: "Geist Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin-left: 4px; }
.sl-brand-sub { display: inline-flex; align-items: center; gap: 6px; }
.sl-ryoken-mark { display: inline-block; vertical-align: middle; filter: drop-shadow(0 0 8px rgba(232, 133, 61, 0.35)); }
.sl-nav-links { display: flex; align-items: center; gap: 28px; font-size: 13.5px; color: var(--muted-ink); }
.sl-nav-links a { color: var(--muted-ink); transition: color .15s; text-decoration: none; }
.sl-nav-links a:hover { color: var(--foreground); }
.sl-nav-signin { color: var(--foreground) !important; }

/* Buttons */
.sl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 10px; transition: transform .15s, box-shadow .2s, background .2s, border-color .15s; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.sl-btn-lg { padding: 13px 22px; font-size: 14.5px; }
.sl-btn-primary { background: var(--gradient-beam); color: #1a0f08; box-shadow: 0 10px 30px -10px oklch(0.72 0.19 55 / 0.55), inset 0 1px 0 oklch(1 0 0 / 0.35); }
.sl-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 40px -12px oklch(0.72 0.19 55 / 0.6), inset 0 1px 0 oklch(1 0 0 / 0.4); }
.sl-btn-ghost { color: var(--muted-ink); border-color: var(--hairline-strong); background: color-mix(in oklab, var(--surface) 40%, transparent); }
.sl-btn-ghost:hover { color: var(--foreground); background: var(--surface); }

/* Hero */
.sl-hero { padding: 96px 0 88px; border-bottom: 1px solid var(--hairline); }
.sl-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.sl-hero-copy { display: flex; flex-direction: column; gap: 24px; }
.sl-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--hairline-strong); border-radius: 999px; font-family: "Geist Mono", monospace; font-size: 11px; color: var(--muted-ink); background: color-mix(in oklab, var(--surface) 40%, transparent); }
.sl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gradient-beam); box-shadow: 0 0 12px oklch(0.72 0.19 55 / 0.7); display: inline-block; }
.sl-h1 { margin: 0; font-family: "Instrument Serif", serif; font-weight: 400; font-size: 78px; line-height: 0.98; letter-spacing: -0.02em; }
.sl-h1-accent { background: var(--gradient-beam); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; }
.sl-lead { margin: 0; font-size: 17.5px; line-height: 1.55; color: var(--muted-ink); max-width: 500px; text-wrap: pretty; }
.sl-cta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sl-mono { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: 0.02em; }
.sl-dim { color: var(--dim-ink); }
.sl-amber { color: oklch(0.82 0.14 68); }
.sl-sage { color: var(--sage); }
.sl-neg { color: oklch(0.72 0.16 22); margin-left: 4px; }

/* Hero visual */
.sl-hero-visual { display: flex; flex-direction: column; }
.sl-signal-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.sl-card { background: color-mix(in oklab, var(--surface) 88%, black); border: 1px solid var(--hairline); border-radius: 12px; padding: 18px; }
.sl-eyebrow { font-family: "Geist", sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim-ink); }
.sl-eyebrow-sm { font-weight: 600; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim-ink); margin-top: 4px; }
.sl-num { font-family: "Instrument Serif", serif; font-size: 30px; letter-spacing: -0.01em; margin-top: 10px; }
.sl-card-foot { border-top: 1px solid var(--hairline); padding-top: 10px; margin-top: 12px; font-size: 12px; color: var(--muted-ink); }
.sl-card-foot b { color: var(--foreground); font-weight: 500; }
.sl-journey { list-style: none; padding: 0; margin: 12px 0 10px; display: flex; flex-direction: column; gap: 8px; font-family: "Geist Mono", monospace; font-size: 11px; color: var(--muted-ink); }
.sl-d { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; }
.sl-d-good { background: var(--sage); }
.sl-d-bad { background: oklch(0.72 0.16 22); }
.sl-d-mute { background: var(--dim-ink); }
.sl-scatter { position: relative; height: 62px; border: 1px solid var(--hairline); border-radius: 6px; margin: 12px 0 10px; background:
  linear-gradient(oklch(1 0 0 / 0.05) 1px, transparent 1px) 0 50% / 100% 50%,
  linear-gradient(90deg, oklch(1 0 0 / 0.05) 1px, transparent 1px) 50% 0 / 50% 100%; }
.sl-scatter span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--dim-ink); }
.sl-scatter-you { background: var(--gradient-beam) !important; width: 9px !important; height: 9px !important; box-shadow: 0 0 12px oklch(0.72 0.19 55 / 0.6); }

.sl-connector { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; }
.sl-line { width: 1px; height: 16px; background: var(--hairline-strong); }
.sl-connector-pill { padding: 5px 16px; border: 1px solid oklch(0.72 0.17 55 / 0.5); border-radius: 999px; font-family: "Geist Mono", monospace; font-size: 10.5px; color: oklch(0.86 0.14 68); background: oklch(0.72 0.19 55 / 0.08); }

.sl-roadmap { background: color-mix(in oklab, var(--surface) 88%, black); border: 1px solid oklch(0.72 0.17 55 / 0.35); border-radius: 12px; padding: 6px 20px; box-shadow: var(--shadow-glow); }
.sl-roadmap-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.sl-roadmap-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hairline); font-size: 13.5px; }
.sl-roadmap-row:last-child { border-bottom: none; }
.sl-roadmap-title { flex: 1; color: var(--foreground); }

/* Tags */
.sl-tag { padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; }
.sl-tag-good { background: color-mix(in oklab, var(--sage) 18%, transparent); color: var(--sage); }
.sl-tag-bad  { background: oklch(0.72 0.16 22 / 0.15); color: oklch(0.78 0.15 22); }
.sl-tag-warn { background: oklch(0.72 0.19 55 / 0.14); color: oklch(0.86 0.14 68); }

/* Sections */
.sl-section { padding: 96px 0; border-bottom: 1px solid var(--hairline); position: relative; }
.sl-section-alt { background: color-mix(in oklab, var(--surface) 60%, black); }
.sl-h2 { margin: 0; font-family: "Instrument Serif", serif; font-weight: 400; font-size: 46px; line-height: 1.05; letter-spacing: -0.015em; }
.sl-h3 { margin: 0 0 14px; font-family: "Instrument Serif", serif; font-weight: 400; font-size: 34px; line-height: 1.1; letter-spacing: -0.01em; }
.sl-strong { font-weight: 600; font-size: 16px; color: var(--foreground); }
.sl-body-dim { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted-ink); }

.sl-mb-xs { margin-bottom: 8px; }
.sl-mb-sm { margin-bottom: 12px; }
.sl-mb-md { margin-bottom: 20px; }
.sl-mb-lg { margin-bottom: 28px; }
.sl-mb-xl { margin-bottom: 48px; }

.sl-three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.sl-three-col { padding: 0 40px; }
.sl-three-col:first-child { padding-left: 0; }
.sl-three-col:last-child { padding-right: 0; }
.sl-three-divider { border-right: 1px solid var(--hairline); }

.sl-three-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.sl-tile { background: color-mix(in oklab, var(--surface) 92%, black); border: 1px solid var(--hairline); border-radius: 14px; padding: 28px; transition: transform .2s, border-color .2s, box-shadow .2s; }
.sl-tile:hover { transform: translateY(-3px); border-color: oklch(0.72 0.17 55 / 0.4); box-shadow: 0 20px 50px -20px oklch(0.72 0.19 55 / 0.35); }
.sl-tile-title { font-weight: 600; font-size: 17px; margin-bottom: 10px; }

/* Features rows */
.sl-features { display: flex; flex-direction: column; gap: 88px; }
.sl-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.sl-card-list { padding: 8px 22px; }
.sl-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hairline); font-size: 13.5px; color: var(--muted-ink); gap: 12px; }
.sl-row:last-child { border-bottom: none; }
.sl-row-between { display: flex; justify-content: space-between; align-items: center; }
.sl-source { margin-right: 10px; }

.sl-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-bottom: 16px; }
.sl-stats > div { padding: 0 16px; border-right: 1px solid var(--hairline); }
.sl-stats > div:first-child { padding-left: 0; }
.sl-stats > div:last-child { border-right: none; }

.sl-mini-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: color-mix(in oklab, var(--surface-2) 90%, black); border: 1px solid var(--hairline); border-radius: 8px; margin-top: 10px; font-size: 13.5px; }
.sl-mini-row:first-of-type { margin-top: 4px; }

/* Integrations */
.sl-integrations { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; }
.sl-int-cell { padding: 26px 16px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); font-family: "Geist Mono", monospace; font-size: 12px; color: var(--muted-ink); text-align: center; transition: background .2s, color .2s; }
.sl-int-cell:hover { background: color-mix(in oklab, var(--surface) 50%, transparent); color: var(--foreground); }

/* Pricing */
.sl-pricing { display: grid; grid-template-columns: 1fr 1fr 1fr; background: color-mix(in oklab, var(--surface-2) 88%, black); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; }
.sl-price-tier { padding: 32px; border-right: 1px solid var(--hairline); }
.sl-price-tier:last-child { border-right: none; }
.sl-price-featured { background: color-mix(in oklab, var(--amber-deep) 5%, transparent); }
.sl-price-tier .sl-strong { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sl-contact-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; background: color-mix(in oklab, var(--surface-2) 88%, black); border: 1px solid oklch(0.72 0.17 55 / 0.35); border-radius: 14px; padding: 28px 32px; box-shadow: var(--shadow-glow); }

/* FAQ + contact */
.sl-faq-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: start; }
.sl-form { display: flex; flex-direction: column; gap: 14px; background: color-mix(in oklab, var(--surface) 88%, black); border: 1px solid var(--hairline); border-radius: 14px; padding: 26px; }
.sl-form label { display: block; }
.sl-form label > span { display: block; font-weight: 600; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim-ink); margin-bottom: 6px; }
.sl-form input, .sl-form textarea { width: 100%; box-sizing: border-box; background: color-mix(in oklab, var(--surface-2) 90%, black); border: 1px solid var(--hairline-strong); border-radius: 10px; color: var(--foreground); font: 400 14px "Geist", sans-serif; padding: 11px 13px; outline: none; transition: border-color .15s, box-shadow .15s; }
.sl-form input:focus, .sl-form textarea:focus { border-color: oklch(0.72 0.17 55 / 0.6); box-shadow: 0 0 0 3px oklch(0.72 0.19 55 / 0.15); }
.sl-form textarea { resize: vertical; }
.sl-form button { border: none; }
.sl-form-sent { border-color: color-mix(in oklab, var(--sage) 45%, transparent); }

.sl-faqs { border-top: 1px solid var(--hairline); margin-top: 24px; }
.sl-faq { border-bottom: 1px solid var(--hairline); }
.sl-faq button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; color: var(--foreground); font: 500 15px "Geist", sans-serif; padding: 20px 0; transition: color .15s; }
.sl-faq button:hover { color: oklch(0.86 0.14 68); }
.sl-faq p { padding: 0 32px 20px 0; }

/* CTA */
.sl-cta { position: relative; overflow: hidden; }
.sl-cta::before { content: ""; position: absolute; inset: 0; background: var(--gradient-halo); opacity: .6; pointer-events: none; }

/* Footer */
.sl-footer { padding: 48px 0; }
.sl-footer-inner { display: flex; align-items: center; justify-content: space-between; }
.sl-footer-links { display: flex; gap: 24px; font-size: 12.5px; color: var(--dim-ink); }
.sl-footer-links a { color: var(--dim-ink); text-decoration: none; }
.sl-footer-links a:hover { color: var(--foreground); }

/* Responsive */
@media (max-width: 960px) {
  .sl-hero-grid, .sl-feat, .sl-faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .sl-three, .sl-three-cards, .sl-pricing { grid-template-columns: 1fr; }
  .sl-three-col { padding: 24px 0; border-right: none !important; border-bottom: 1px solid var(--hairline); }
  .sl-integrations { grid-template-columns: repeat(3, 1fr); }
  .sl-price-tier { border-right: none; border-bottom: 1px solid var(--hairline); }
  .sl-h1 { font-size: 54px; }
  .sl-h2 { font-size: 34px; }
  .sl-nav-links { gap: 16px; font-size: 12.5px; }
  .sl-nav-links a:not(.sl-btn) { display: none; }
  .sl-nav-signin { display: inline !important; }
}