:root {
  --krd-surface-void: #050505;
  --krd-text-primary: #f6f4f1;
  --krd-text-body: #c9c5bf;
  --krd-text-muted: #9b968e;
  --krd-text-disabled: #625d56;
  --krd-border-subtle: #1c1917;
  --krd-border-strong: #2c2823;
  --krd-accent: #fca500;
  --krd-accent-rgb: 252 165 0;
  --krd-font-display: 'Space Grotesk', system-ui, sans-serif;
  --krd-font-ui: 'Inter', system-ui, sans-serif;
  --krd-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--krd-surface-void);
  color: var(--krd-text-primary);
  font-family: var(--krd-font-ui);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  cursor: default;
}

/* Full-bleed grid — the same recipe used across the rest of the
   site (Support's hero, the landing sections), just uncropped
   here since this single screen IS the whole page. */
.dots {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* A second copy of the same grid, brighter and accent-tinted,
   revealed only inside a small circle that follows the cursor —
   so moving the mouse "lights up" the dots near it instead of
   the whole background pulsing. Static, no animation loop. */
.dots-highlight {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgb(var(--krd-accent-rgb) / 0.9) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(200px circle at var(--mx, 50%) var(--my, 40%), black 0%, transparent 100%);
  mask-image: radial-gradient(200px circle at var(--mx, 50%) var(--my, 40%), black 0%, transparent 100%);
  opacity: 0;
  transition: opacity 300ms ease;
}

.dots-highlight.active {
  opacity: 1;
}

/* The brand corona — the one gradient this page leans on: a single
   warm bloom of the accent over obsidian. Fixed in place, not
   animated — motion here reads as flicker, not life.
   A real filter: blur() on a solid circle (same recipe as the
   Support hero's glow) instead of a radial-gradient with fixed
   color stops — gradients like that show a faint visible edge
   where the last stop is; an actual blur falls off cleanly. */
.glow {
  position: fixed;
  top: -14%;
  left: 50%;
  transform: translateX(-50%);
  width: min(75vw, 960px);
  height: min(75vw, 960px);
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--krd-accent-rgb) / 0.68), transparent 70%);
  filter: blur(120px);
  opacity: 0.2;
}

main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  max-width: 36rem;
}

main > * {
  opacity: 0;
  animation: rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.brand {
  animation-delay: 0.05s;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.mark-tilt {
  display: inline-flex;
}

.mark {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.word {
  font-family: var(--krd-font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  color: var(--krd-text-primary);
}

.eyebrow {
  animation-delay: 0.14s;
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--krd-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--krd-text-muted);
}

.eyebrow::before,
.eyebrow::after {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--krd-border-strong);
}

h1 {
  margin: 0;
  font-family: var(--krd-font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 7vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--krd-text-primary);
  animation: rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.22s forwards;
}

/* A single light passing through the title, letter by letter —
   not a gradient dragged across a block of text (reads as a
   loading skeleton), but each character catching the accent
   for a beat as the wave reaches it, then settling back. Runs
   once every several seconds; otherwise the title just sits
   still in plain white. */
.ch {
  display: inline-block;
  animation: litup 6s ease-in-out infinite;
  animation-delay: calc(1.1s + var(--d, 0s));
}

@keyframes litup {
  0%, 100% {
    color: var(--krd-text-primary);
    text-shadow: none;
  }
  4% {
    color: var(--krd-accent);
    text-shadow: 0 0 16px rgb(var(--krd-accent-rgb) / 0.6);
  }
  11% {
    color: var(--krd-text-primary);
    text-shadow: none;
  }
}

p.lede {
  animation-delay: 0.32s;
  margin: 0;
  max-width: 30rem;
  color: var(--krd-text-body);
  font-size: 1.05rem;
  line-height: 1.65;
}

.divider {
  animation-delay: 0.42s;
  width: 28px;
  height: 1px;
  background: var(--krd-border-subtle);
  margin: 0.3rem 0;
}

.contacts {
  animation-delay: 0.5s;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.contact {
  margin: 0;
  font-size: 0.86rem;
  color: var(--krd-text-disabled);
}

.contact a {
  color: var(--krd-text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--krd-border-subtle);
  transition: color 140ms ease, border-color 140ms ease;
}

.contact a:hover {
  color: var(--krd-accent);
  border-color: rgb(var(--krd-accent-rgb) / 0.4);
}

.url {
  animation-delay: 0.58s;
  font-family: var(--krd-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--krd-text-disabled);
}

/* ── Custom cursor — the same dot-and-ring overlay used across the
   rest of KrdOS, ported to plain JS since this page ships on its
   own, ahead of the app. Sits on top of the native cursor rather
   than replacing it. ── */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9997;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.cursor-dot {
  width: 5px;
  height: 5px;
  background: var(--krd-accent);
}

.cursor-ring {
  width: 32px;
  height: 32px;
  border: 1px solid var(--krd-text-disabled);
  transition: width 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    height 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 300ms ease;
}

.cursor-ring.hover {
  width: 50px;
  height: 50px;
  border-color: var(--krd-accent);
}

@media (pointer: coarse) {
  .cursor-dot,
  .cursor-ring {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  main > * {
    animation: none;
    opacity: 1;
  }
  .ch {
    animation: none;
  }
}