/* ========== Mindlytic AI — tokens + base ========== */
:root {
  /* Neutrals */
  --bg: #0A0A0B;
  --bg-soft: #09090B;
  --surface: #0E0E10;
  --surface-2: #141416;
  --border: #1F1F23;
  --border-2: #27272A;
  --border-3: #3F3F46;
  --text: #FAFAFA;
  --text-2: #D4D4D8;
  --text-3: #A1A1AA;
  --text-4: #71717A;

  /* Accent (overridden by Tweaks) */
  --accent: #00D9FF;
  --accent-ink: #001418;
  --accent-glow: rgba(0, 217, 255, 0.35);
  --accent-soft: rgba(0, 217, 255, 0.12);
  --accent-line: rgba(0, 217, 255, 0.4);

  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Radii & shadow */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.02) inset, 0 0 0 1px var(--border-2);
  --shadow-card-hover: 0 1px 0 rgba(255,255,255,0.03) inset, 0 0 0 1px var(--accent-line), 0 10px 40px -20px var(--accent-glow);

  /* Layout */
  --container: 1280px;
  --pad-x: clamp(20px, 4vw, 56px);
  --section-y: clamp(96px, 14vw, 160px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* container */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* mono label */
.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
}
.mono-accent { color: var(--accent); }

/* section label line */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 28px;
}
.section-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--border-3);
}
.section-label .num { color: var(--accent); }

/* Headlines */
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: clamp(44px, 7.2vw, 96px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 600; }
h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.028em; font-weight: 600; }
h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; }

p { margin: 0; color: var(--text-2); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: transform .15s ease, background-color .2s, border-color .2s, color .2s, box-shadow .25s;
  white-space: nowrap;
  cursor: pointer;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 1px var(--accent), 0 10px 40px -15px var(--accent-glow);
}
.btn-primary:hover { box-shadow: 0 0 0 1px var(--accent), 0 14px 50px -12px var(--accent-glow); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-2);
}
.btn-ghost:hover { border-color: var(--border-3); background: rgba(255,255,255,0.02); }
.btn-ghost .arrow { transition: transform .25s ease; }
.btn-ghost:hover .arrow { transform: translateX(3px); }

.btn-sm { height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: 8px; }

/* Tags / pills */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  color: var(--text-3);
  background: transparent;
}
.tag-dot::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}

/* Card */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  transition: border-color .3s, background-color .3s, transform .3s;
}
.card:hover {
  border-color: var(--accent-line);
  background: var(--surface-2);
}

/* Inline link */
.ilink {
  color: var(--accent);
  text-underline-offset: 4px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent);
  transition: text-decoration-thickness .2s, text-decoration-color .2s;
}
.ilink:hover { text-decoration-thickness: 2px; text-decoration-color: var(--accent); }

/* Scroll reveal — disabled for now; .reveal is a no-op so nothing can get stuck invisible.
   Leaving the class in place so we can reinstate motion later without touching markup. */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation: none !important; transition: none !important; }
}

/* focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* divider */
.hr {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-2), transparent);
  border: 0;
}

/* Custom cursor */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  transition: width .2s, height .2s, background-color .2s, opacity .2s;
  box-shadow: 0 0 12px var(--accent-glow);
  opacity: 0;
}
.cursor-dot.active { opacity: 1; }
.cursor-dot.hover { width: 28px; height: 28px; background: transparent; box-shadow: 0 0 0 1px var(--accent); }
@media (hover: none), (pointer: coarse) { .cursor-dot { display: none; } }