/* Xenon marketing site — shares the Console's design tokens so the website
   and the product read as one thing. Source of truth for the palette:
   xenon-console/src/index.css. */

:root {
  --bg: #06070a;
  --surface: rgba(14, 16, 26, 0.65);
  --surface-solid: #0e101a;
  --border: rgba(255, 255, 255, 0.08);
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  --accent: #4361ee;
  --accent-2: #9d4edd;
  --success: #00f5d4;
  --caution: #ffd166;
  --warning: #ff8c42;
  --destructive: #ef476f;
  --font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --maxw: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient glows, same recipe as the Console's login screen. */
@keyframes float1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, 20px); }
}
@keyframes float2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-20px, -30px); }
}
@keyframes float3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(25px, -15px); }
}
.bg-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(110px);
  z-index: -1;
  opacity: 0.35;
  pointer-events: none;
}
.bg-glow-1 { width: 480px; height: 480px; top: -140px; left: -120px; background: radial-gradient(circle, #9d4edd, transparent 70%); animation: float1 14s ease-in-out infinite; }
.bg-glow-2 { width: 560px; height: 560px; bottom: -180px; right: -140px; background: radial-gradient(circle, #4361ee, transparent 70%); animation: float2 18s ease-in-out infinite; }
.bg-glow-3 { width: 420px; height: 420px; top: 40%; left: 60%; background: radial-gradient(circle, rgba(0, 245, 212, 0.5), transparent 70%); opacity: 0.12; animation: float3 22s ease-in-out infinite; }

a { color: var(--text); text-decoration: none; }
p { margin: 0 0 1rem; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.15; margin: 0 0 1rem; letter-spacing: -0.01em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

@keyframes textShine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.grad-text {
  background: linear-gradient(100deg, #9d4edd 0%, #4361ee 50%, #00f5d4 100%, #4361ee 150%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: textShine 6s linear infinite;
}

/* ------------------------------------------------------------------ nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(6, 7, 10, 0.72);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em; }
.brand img { width: 26px; height: 26px; display: block; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-size: 0.92rem;
  color: var(--text-muted);
  transition: color 0.2s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-cta {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: box-shadow 0.2s, transform 0.2s;
}
.nav-cta:hover { box-shadow: 0 0 18px rgba(67, 97, 238, 0.5); transform: translateY(-1px); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 6px 10px;
  font-size: 1.1rem;
  cursor: pointer;
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 24px 22px;
    gap: 18px;
    background: rgba(6, 7, 10, 0.97);
    border-bottom: 1px solid var(--border);
  }
  .nav-links.open { display: flex; }
}

/* ------------------------------------------------------------------ hero */

.hero { padding: 108px 0 72px; text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--success);
  border: 1px solid rgba(0, 245, 212, 0.25);
  background: rgba(0, 245, 212, 0.06);
  border-radius: 999px;
  /* 7 over 5, not 6 and 6. The text is uppercase, so it has no descenders -
     but the line box still reserves the space below the baseline where they
     would go. Equal padding therefore centres the LINE BOX while leaving the
     letters sitting ~1.6px high, which is visible on a pill this small.
     The extra pixel on top pushes the letters back onto the optical centre. */
  padding: 7px 16px 5px;
  margin-bottom: 26px;
}
.hero h1 { font-size: clamp(2.2rem, 5.4vw, 3.7rem); max-width: 830px; margin: 0 auto 22px; }
.hero .sub {
  font-size: clamp(1.02rem, 1.9vw, 1.22rem);
  color: var(--text-muted);
  max-width: 690px;
  margin: 0 auto 36px;
}
.cta-row { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.btn-primary {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.btn-primary:hover { box-shadow: 0 0 22px rgba(67, 97, 238, 0.55); transform: translateY(-2px); }
.btn-ghost { border: 1px solid var(--border); color: var(--text-muted); }
.btn-ghost:hover { border-color: rgba(0, 245, 212, 0.5); color: var(--text); transform: translateY(-2px); }

/* --------------------------------------------------- fake console window */

.console-demo {
  max-width: 780px;
  margin: 64px auto 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(10, 12, 20, 0.82);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(67, 97, 238, 0.08);
  text-align: left;
  overflow: hidden;
}
.console-demo header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
}
.console-demo header .dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(0,0,0,0.15); box-shadow: inset 0 1px 1px rgba(255,255,255,0.2); }
.console-demo header .dot:first-child { background: linear-gradient(135deg, #ff5f56, #ef476f); }
.console-demo header .dot:nth-child(2) { background: linear-gradient(135deg, #ffbd2e, #ffd166); }
.console-demo header .dot:nth-child(3) { background: linear-gradient(135deg, #27c93f, #00f5d4); }
.console-demo header span { margin-left: 10px; }
.console-body { padding: 20px 22px 24px; font-size: 0.88rem; }
.console-body .ask { color: var(--text-muted); margin-bottom: 14px; }
.console-body .ask b { color: var(--text); font-weight: 500; }
.console-line {
  display: flex;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 4px 0;
  color: var(--text-muted);
}
.console-line .arrow { color: var(--accent-2); }
.console-line .check { color: var(--success); }
.console-line .name { color: var(--text); }
.console-line .dim { color: var(--text-faint); }
.console-final {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font-size: 0.88rem;
}
.console-final .queued {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--caution);
  border: 1px solid rgba(255, 209, 102, 0.3);
  background: rgba(255, 209, 102, 0.07);
  border-radius: 8px;
  padding: 5px 10px;
}

/* -------------------------------------------------------------- sections */

section { padding: 84px 0; }
.section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.section-head p { color: var(--text-muted); font-size: 1.05rem; }
.kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 12px;
}

.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 26px;
  transition: border-color 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.06), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.card:hover {
  border-color: rgba(0, 245, 212, 0.4);
  transform: translateY(-4px) scale(1.01);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(67, 97, 238, 0.1);
}
.card:hover::before {
  opacity: 1;
}
.card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.card p { color: var(--text-muted); font-size: 0.92rem; margin: 0; }
.card .icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 1.15rem;
  background: rgba(67, 97, 238, 0.14);
  border: 1px solid rgba(67, 97, 238, 0.3);
}

/* Numbered steps */
.step-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--success);
  border: 1px solid rgba(0, 245, 212, 0.3);
  border-radius: 8px;
  padding: 3px 9px;
  display: inline-block;
  margin-bottom: 14px;
}

/* ---------------------------------------------------------- safety ladder */

.ladder { display: grid; gap: 14px; max-width: 820px; margin: 0 auto; }
.rung {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 14px;
  background: var(--surface);
  padding: 18px 22px;
}
.rung .tier { font-weight: 600; font-size: 0.95rem; }
.rung .desc { color: var(--text-muted); font-size: 0.9rem; }
.rung .ex { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-faint); text-align: right; }
.rung-diagnostic { border-left-color: var(--success); }
.rung-diagnostic .tier { color: var(--success); }
.rung-caution { border-left-color: var(--caution); }
.rung-caution .tier { color: var(--caution); }
.rung-warning { border-left-color: var(--warning); }
.rung-warning .tier { color: var(--warning); }
.rung-critical { border-left-color: var(--destructive); }
.rung-critical .tier { color: var(--destructive); }
@media (max-width: 680px) {
  .rung { grid-template-columns: 1fr; gap: 6px; }
  .rung .ex { text-align: left; }
}
.ladder-note {
  max-width: 720px;
  margin: 30px auto 0;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.9rem;
}

/* ------------------------------------------------------- feature rows */

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 54px 0;
  border-top: 1px solid var(--border);
}
.feature-row:first-of-type { border-top: none; }
.feature-row h3 { font-size: 1.5rem; }
.feature-row p { color: var(--text-muted); }
.feature-row ul { margin: 0; padding-left: 20px; color: var(--text-muted); font-size: 0.94rem; }
.feature-row ul li { margin-bottom: 8px; }
.feature-row ul li::marker { color: var(--success); }
@media (max-width: 800px) {
  .feature-row { grid-template-columns: 1fr; gap: 26px; }
  /* Stacked, the story should always read text-then-illustration, even in
     rows whose desktop layout puts the panel on the left. */
  .feature-row .panel { order: 2; }
}

.panel {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(10, 12, 20, 0.8);
  padding: 24px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.9;
}
.panel .t { color: var(--text); }
.panel .g { color: var(--success); }
.panel .p { color: var(--accent-2); }
.panel .y { color: var(--caution); }
.panel .r { color: var(--destructive); }
.panel .o { color: var(--warning); }
.panel .f { color: var(--text-faint); }

/* -------------------------------------------------------------- stat strip */

.strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.chip {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.02);
}
.chip b { color: var(--success); font-weight: 500; }

/* ------------------------------------------------------------------- CTA */

.cta-block {
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(157, 78, 221, 0.16), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(67, 97, 238, 0.16), transparent 55%),
    var(--surface-solid);
  text-align: center;
  padding: 72px 32px;
}
.cta-block h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.cta-block p { color: var(--text-muted); max-width: 560px; margin: 0 auto 30px; }

/* ---------------------------------------------------------------- footer */

footer {
  border-top: 1px solid var(--border);
  padding: 44px 0 52px;
  margin-top: 40px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.footer-brand img { width: 22px; height: 22px; }
.footer-col h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-faint); margin-bottom: 12px; }
.footer-col a { display: block; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 8px; transition: color 0.2s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom { margin-top: 36px; color: var(--text-faint); font-size: 0.8rem; }

/* ------------------------------------------------------------- reveals */

.reveal { opacity: 0; transform: translateY(24px) scale(0.98); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .reveal {
      opacity: 0; /* Let animation take over */
      transform: none; /* Let animation take over */
      transition: none; /* Disable JS transition */
      animation: reveal-in auto linear both;
      animation-timeline: view(block);
      animation-range: entry 5% cover 25%;
    }
    
    @keyframes reveal-in {
      from { opacity: 0; transform: translateY(30px) scale(0.96); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; animation: none !important; }
  html { scroll-behavior: auto; }

  /* The ambient drift and the gradient shimmer stop too.
     These are the ones that matter most for this setting, and the easiest to
     forget: a reveal plays once and is over, while these three glows and the
     shining headline run forever on every page. Someone who asked for less
     motion because movement makes them ill would get the animation that DOES
     stop switched off, and the four that never do left running. */
  .bg-glow,
  .grad-text { animation: none !important; }
}

/* ------------------------------------------------------------ subpages */

.page-hero { padding: 88px 0 30px; text-align: center; }
.page-hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); max-width: 760px; margin: 0 auto 18px; }
.page-hero p { color: var(--text-muted); max-width: 640px; margin: 0 auto; font-size: 1.08rem; }

.contact-card { text-align: center; }
.contact-card .icon { margin: 0 auto 16px; }
.contact-card a.mail {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--success);
}
.contact-card a.mail:hover { text-decoration: underline; }

.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 1.45rem; margin-top: 48px; }
.prose p { color: var(--text-muted); }