/* ============================================================
   Drac Labs — design system
   ------------------------------------------------------------
   1.  tokens          6.  research / work
   2.  base + overlays 7.  praxis
   3.  navigation      8.  draco / band
   4.  hero            9.  about / contact / footer
   5.  primitives      10. motion + responsive
   ============================================================ */

/* ---------- 1. tokens ---------- */

:root {
  --bg: #06060a;
  --bg-soft: #0b0b12;
  --panel: rgba(9, 9, 15, 0.74);
  --panel-solid: #0c0c13;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text: #ece9e4;
  --muted: #9b9ba6;
  --dim: #7a7a86;

  --gold: #f5a623;
  --gold-soft: #ffd27a;
  --ember: #ff6b35;
  --star: #8fbcff;

  --grad: linear-gradient(135deg, #ffd27a, #f5a623 45%, #ff6b35);
  --grad-cool: linear-gradient(135deg, #cfe4ff, #8fbcff 50%, #f5a623);

  --font-display: "Syne", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --maxw: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-text: 0 2px 16px rgba(0, 0, 0, 0.85);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* The text scrims behind headings deliberately bleed wider than the text
   block they sit behind, which on narrow viewports reaches past the edge and
   gives the page a sideways scroll. `clip` rather than `hidden`: it contains
   the bleed without turning the root into a scroll container, so sticky and
   fixed positioning keep working. */
html { scroll-behavior: smooth; overflow-x: clip; }

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

body.is-loading { overflow: hidden; }
body.menu-open { overflow: hidden; }

::selection { background: rgba(245, 166, 35, 0.32); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #08080d; }
::-webkit-scrollbar-thumb { background: #1d1d24; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #33333f; }

.skip-link {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--gold);
  color: #14100a;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 0.25s var(--ease);
}
.skip-link:focus { transform: none; }

/* Read by assistive technology, never painted. The visible tagline swaps
   its last word every few seconds; announcing each swap turns the hero
   into a stream of interruptions, so screen readers get one stable line. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.mono-sm {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.dim { color: var(--dim); }

/* ---------- 2. base layers + overlays ---------- */

#bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* no-WebGL fallback: keep the room lit with pure CSS — two nebula
   washes plus a tiled starfield that drifts on the compositor only */
body.no-webgl {
  background:
    radial-gradient(ellipse 70% 55% at 50% 30%, rgba(245, 166, 35, 0.16), transparent 70%),
    radial-gradient(ellipse 90% 70% at 20% 80%, rgba(255, 107, 53, 0.1), transparent 70%),
    var(--bg);
}

body.no-webgl::before {
  content: "";
  position: fixed;
  inset: -20% -20% -20% -20%;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background-image:
    radial-gradient(2.2px 2.2px at 18% 22%, rgba(255, 248, 236, 1), transparent 62%),
    radial-gradient(1.6px 1.6px at 63% 12%, rgba(214, 226, 255, 0.95), transparent 62%),
    radial-gradient(2.6px 2.6px at 82% 41%, rgba(255, 214, 170, 1), transparent 62%),
    radial-gradient(1.4px 1.4px at 34% 58%, rgba(255, 255, 255, 0.88), transparent 62%),
    radial-gradient(2px 2px at 8% 77%, rgba(210, 224, 255, 0.92), transparent 62%),
    radial-gradient(1.7px 1.7px at 71% 84%, rgba(255, 236, 214, 0.95), transparent 62%),
    radial-gradient(1.2px 1.2px at 47% 35%, rgba(255, 255, 255, 0.8), transparent 62%),
    radial-gradient(2.3px 2.3px at 92% 68%, rgba(255, 226, 190, 0.9), transparent 62%);
  background-size: 340px 300px, 260px 420px, 520px 380px, 190px 240px,
    430px 330px, 300px 500px, 210px 190px, 470px 410px;
  animation: driftStars 90s linear infinite;
}

@keyframes driftStars {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-340px, -300px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body.no-webgl::before { animation: none; }
}

/* radial darkening so type always has a calm bed */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 88% 66% at 50% 40%, rgba(6, 6, 10, 0.55), transparent 76%),
    radial-gradient(ellipse 130% 110% at 50% 50%, transparent 52%, rgba(4, 4, 8, 0.72) 100%);
}

.glow {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    520px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255, 168, 70, 0.06),
    transparent 62%
  );
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.35;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.018) 0 1px,
    transparent 1px 3px
  );
}

.grain {
  position: fixed;
  inset: -100%;
  z-index: 5;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 9s steps(10) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -8%); }
  30% { transform: translate(4%, -3%); }
  50% { transform: translate(-3%, 6%); }
  70% { transform: translate(6%, 4%); }
  90% { transform: translate(-6%, -5%); }
}

/* custom cursor */
/* custom cursor — the outer node only ever translates, the ring
   scales, so nothing here touches layout */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cursor-ring {
  position: absolute;
  left: -17px;
  top: -17px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(245, 166, 35, 0.55);
  border-radius: 50%;
  transition: transform 0.28s var(--ease), background 0.28s ease, border-color 0.28s ease;
}
.cursor span {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}
body.has-cursor .cursor { opacity: 1; }
body.has-cursor a,
body.has-cursor button,
body.has-cursor [data-spotlight],
body.has-cursor .obj { cursor: none; }
body.has-cursor { cursor: none; }
.cursor.is-hot .cursor-ring {
  transform: scale(1.7);
  background: rgba(245, 166, 35, 0.1);
  border-color: rgba(255, 210, 122, 0.85);
}

/* boot sequence */
.boot {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: #04040a;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
.boot.done { opacity: 0; visibility: hidden; }
.boot-inner { text-align: center; width: min(320px, 70vw); }
.boot-mark {
  font-size: 2.2rem;
  color: var(--gold);
  text-shadow: 0 0 34px rgba(245, 166, 35, 0.8);
  animation: bootPulse 1.5s ease-in-out infinite;
  margin-bottom: 26px;
}
@keyframes bootPulse {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.18); opacity: 1; }
}
.boot-bar {
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.boot-bar span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--grad);
  box-shadow: 0 0 18px rgba(245, 166, 35, 0.7);
  transition: transform 0.25s ease;
}
.boot-text {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}

/* scroll progress */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 30;
  background: transparent;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--grad);
  box-shadow: 0 0 14px rgba(245, 166, 35, 0.65);
}

/* ---------- 3. navigation ---------- */

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 15px 40px;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease;
}

/* always keep a little scrim under the bar so links stay readable
   even when the dragon flies straight through them */
nav::before {
  content: "";
  position: absolute;
  inset: -1px 0 -40px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(5, 5, 9, 0.85), transparent);
}

nav.scrolled {
  background: rgba(6, 6, 10, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: var(--border);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.22em;
  font-size: 0.92rem;
}
.logo-mark {
  color: var(--gold);
  font-size: 1rem;
  text-shadow: 0 0 18px rgba(245, 166, 35, 0.7);
  animation: markSpin 14s linear infinite;
  display: inline-block;
}
@keyframes markSpin { to { transform: rotate(360deg); } }
.logo-dim { color: var(--muted); font-weight: 400; }

.nav-links { display: flex; gap: 34px; }
.nav-links a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: color 0.25s ease;
}
.nav-idx {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--gold);
  opacity: 0.55;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 1px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--text); }

.nav-right { display: flex; align-items: center; gap: 14px; }

.nav-cta {
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid rgba(245, 166, 35, 0.35);
  padding: 9px 20px;
  border-radius: 999px;
  transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.nav-cta:hover {
  background: rgba(245, 166, 35, 0.12);
  box-shadow: 0 0 26px rgba(245, 166, 35, 0.25);
  color: var(--gold-soft);
}

.nav-burger {
  display: none;
  width: 40px;
  height: 34px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
}
.nav-burger span {
  position: absolute;
  left: 10px;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.2s ease;
}
.nav-burger span:nth-child(1) { top: 13px; }
.nav-burger span:nth-child(2) { top: 19px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* ---------- 4. hero ---------- */

header {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 130px 24px 92px;
}

header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 62% 52% at 50% 46%,
    rgba(6, 6, 10, 0.9),
    rgba(6, 6, 10, 0.42) 60%,
    transparent 100%
  );
}

.hero { position: relative; z-index: 1; max-width: 1040px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 26px;
  text-shadow: 0 0 24px rgba(245, 166, 35, 0.3), var(--shadow-text);
}
.pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
  animation: pip 2s ease-in-out infinite;
}
@keyframes pip {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.9rem, 8.4vw, 6.6rem);
  line-height: 0.94;
  letter-spacing: -0.005em;
  margin-bottom: 22px;
  display: flex;
  justify-content: center;
  gap: 0.24em;
  flex-wrap: wrap;
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.9));
}
.h1-line { display: inline-flex; }
.h1-line .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) rotateX(-55deg);
  animation: charIn 0.85s var(--ease) forwards;
  animation-delay: calc(var(--i) * 55ms + 0.15s);
}
@keyframes charIn {
  to { opacity: 1; transform: none; }
}

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.tagline {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.4vw, 2.05rem);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 22px;
  text-shadow: var(--shadow-text);
  transition: transform 0.5s var(--ease);
}
/* the rotator is locked to the widest word and the line is
   re-centred with a transform, so swapping words costs no layout */
.rotator {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.35em;
  vertical-align: -0.34em;
  transition: margin-right 0.45s var(--ease);
}
.rot-word {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  color: var(--gold-soft);
  animation: rotIn 0.55s var(--ease) 0.12s backwards;
}
@keyframes rotIn {
  from { opacity: 0; transform: translateY(0.9em); }
  to { opacity: 1; transform: none; }
}
.rot-word.out {
  animation: rotOut 0.3s var(--ease) forwards;
}
@keyframes rotOut {
  to { opacity: 0; transform: translateY(-0.9em); }
}
.rot-measure {
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
}

.sub {
  max-width: 620px;
  margin: 0 auto 40px;
  color: var(--muted);
  font-size: 1.04rem;
  text-shadow: var(--shadow-text);
}

.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s ease;
}
.scroll-hint:hover { color: var(--gold); }
.scroll-line {
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(245, 166, 35, 0.75), transparent);
  animation: drip 2.2s ease-in-out infinite;
}
@keyframes drip {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%, 60% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ---------- marquee ---------- */

.marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(6, 6, 10, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 14px 0;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.marquee-track i { color: var(--gold); font-size: 0.6rem; font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 5. primitives ---------- */

main { position: relative; z-index: 2; }

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 128px 28px;
  scroll-margin-top: 60px;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.kicker.centred { justify-content: center; }
.kicker-num {
  padding: 3px 8px;
  border: 1px solid rgba(245, 166, 35, 0.3);
  border-radius: 5px;
  color: var(--gold-soft);
  font-size: 0.64rem;
}

.section-head { position: relative; text-align: center; margin-bottom: 58px; }

/* the scene is deliberately bright behind the copy, so every block of
   running text carries its own pool of darkness */
.section-head::before,
.text-scrim::before {
  content: "";
  position: absolute;
  inset: -46px -72px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 66% 72% at 50% 50%,
    rgba(5, 5, 9, 0.95),
    rgba(5, 5, 9, 0.78) 52%,
    rgba(5, 5, 9, 0.4) 72%,
    transparent 86%
  );
}
.text-scrim { position: relative; z-index: 0; }
.section-head h2,
.about-grid h2,
.draco-grid h2,
.contact h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.15rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.9);
}
.section-lede {
  max-width: 620px;
  margin: 18px auto 0;
  color: #b8b8c2;
  font-size: 1rem;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 0, 0, 0.8);
}
.body-text {
  color: #b8b8c2;
  margin-bottom: 18px;
  font-size: 1rem;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 0, 0, 0.8);
}
.body-text em { color: var(--gold-soft); font-style: normal; }
.muted-note {
  font-size: 0.9rem;
  color: var(--muted);
  border-left: 2px solid rgba(245, 166, 35, 0.3);
  padding-left: 16px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 0, 0, 0.8);
}

.about-grid h2,
.draco-grid h2 { margin-bottom: 22px; }

.btn {
  position: relative;
  display: inline-block;
  padding: 15px 32px;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  will-change: transform;
}
.btn-primary {
  background: var(--grad);
  color: #171004;
  box-shadow: 0 10px 34px rgba(245, 166, 35, 0.24);
}
.btn-primary:hover { box-shadow: 0 18px 50px rgba(245, 166, 35, 0.42); }
.btn-ghost {
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: rgba(8, 8, 14, 0.5);
}
.btn-ghost:hover {
  border-color: rgba(245, 166, 35, 0.55);
  background: rgba(245, 166, 35, 0.07);
}

/* ---------- 6. research + work ---------- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 26px 30px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s ease, box-shadow 0.4s ease;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 0%),
    rgba(245, 166, 35, 0.13),
    transparent 70%
  );
  pointer-events: none;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(245, 166, 35, 0.35);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
}
.card:hover::before { opacity: 1; }

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.card-icon {
  font-size: 1.4rem;
  color: var(--gold);
  text-shadow: 0 0 22px rgba(245, 166, 35, 0.55);
}
.card-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 8px;
}
.card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.card p { color: var(--muted); font-size: 0.93rem; }
/* ---------- small infographics ---------- */

/* One drawing language for every diagram on the page: hairline strokes,
   gold for "ours", dashes for "not really there". */
.fig {
  width: 100%;
  font-family: var(--font-mono);
  overflow: visible;
}
.fig-box,
.fig-bar,
.fig-node,
.fig-chip,
.fig-stroke,
.fig-rail,
.fig-arrow {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.fig-dash { stroke-dasharray: 4 4; }
.fig-hot,
.fig-hot-s,
.fig-arrow { stroke: var(--gold); }
.fig-node.fig-hot { fill: rgba(245, 166, 35, 0.13); }
.fig-bar { fill: rgba(255, 255, 255, 0.03); }
.fig-bar-hot {
  fill: rgba(245, 166, 35, 0.12);
  stroke: var(--gold);
}
.fig-chip {
  fill: rgba(255, 255, 255, 0.05);
  stroke: rgba(255, 255, 255, 0.16);
}
.fig-chip-hot {
  fill: rgba(245, 166, 35, 0.16);
  stroke: var(--gold);
}
.fig-ghost { stroke-dasharray: 3 3; opacity: 0.42; }
.fig-deny { stroke: var(--ember); }
.fig-rail { stroke-dasharray: 2 5; }

.fig-cap {
  font-size: 7px;
  fill: var(--dim);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.fig-lbl {
  font-size: 8.5px;
  fill: var(--muted);
  text-anchor: middle;
}
.fig-bar-t { font-size: 8px; fill: var(--muted); }
.fig-tick {
  font-size: 7px;
  fill: var(--dim);
  text-anchor: middle;
}
.fig-hot-t { fill: var(--gold-soft); }

/* the figure that sits at the top of a thesis card */
.card-fig {
  margin: 2px 0 20px;
  padding: 14px 14px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.016);
}
.card-fig .fig { height: 98px; display: block; }

/* ---------- 7. praxis ---------- */

.praxis-panel {
  position: relative;
  background: rgba(8, 8, 14, 0.66);
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 76px 44px 60px;
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.praxis-glow {
  position: absolute;
  top: -45%;
  left: 50%;
  transform: translateX(-50%);
  width: 980px;
  height: 560px;
  background: radial-gradient(ellipse at center, rgba(245, 166, 35, 0.16), transparent 66%);
  pointer-events: none;
}
.praxis-head { position: relative; text-align: center; }
.praxis-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7.6vw, 5.4rem);
  letter-spacing: 0.1em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 14px;
  filter: drop-shadow(0 4px 30px rgba(0, 0, 0, 0.9));
}
.praxis-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3vw, 1.55rem);
  font-weight: 400;
  margin-bottom: 18px;
  text-shadow: var(--shadow-text);
}
.praxis-desc {
  max-width: 660px;
  margin: 0 auto 50px;
  color: var(--muted);
  font-size: 1rem;
  text-shadow: var(--shadow-text);
}

.praxis-body {
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 22px;
  margin-bottom: 44px;
  text-align: left;
}

/* the Praxis object model */
.objmodel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.obj-group { position: relative; padding-left: 16px; }
.obj-group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
}
.obj-group.is-live::before {
  background: linear-gradient(to bottom, var(--gold), rgba(255, 107, 53, 0.35));
  box-shadow: 0 0 14px rgba(245, 166, 35, 0.45);
}
.obj-group-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 10px;
}
.obj-group.is-live .obj-group-label { color: var(--gold-soft); }
.obj-chain {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.obj {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 3px;
  align-items: baseline;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.02);
  transition: transform 0.35s var(--ease), border-color 0.35s ease, background 0.35s ease;
}
.obj:hover {
  transform: translateX(5px);
  border-color: rgba(245, 166, 35, 0.32);
  background: rgba(245, 166, 35, 0.05);
}
.obj-num {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--gold);
  opacity: 0.8;
}
.obj b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}
.obj-desc {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.83rem;
}
.obj-desc em { font-style: italic; color: var(--gold-soft); }
.obj-foot {
  color: var(--dim);
  font-size: 0.82rem;
  font-style: italic;
  padding-left: 16px;
  margin-top: auto;
  padding-top: 4px;
}

/* terminal */
.terminal {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(3, 3, 7, 0.78);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.term-bar .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #23232c;
}
.term-bar .dot:first-child { background: #4a2a1c; }
.term-title {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--dim);
  letter-spacing: 0.06em;
}
.term-body {
  flex: 1;
  padding: 18px 18px 22px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.95;
  color: var(--muted);
  /* `pre`, not `pre-wrap`: the session prints an aligned table and
     wrapping it would destroy the columns. Scroll instead. */
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
}
.term-body .p { color: var(--gold); }
.term-body .ok { color: #7ddba0; }
.term-body .warn { color: var(--ember); }
.term-body .dimt { color: var(--dim); }
.term-body .hi { color: var(--gold-soft); }
.term-caret {
  display: inline-block;
  width: 7px;
  height: 1em;
  background: var(--gold);
  vertical-align: text-bottom;
  animation: caret 1s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* lifecycle: the operations you perform on an agent, laid out as a
   control surface rather than a transcript */
.lifecycle {
  position: relative;
  margin: 34px 0 30px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  text-align: left;
}
.lifecycle-lead {
  color: var(--text);
  font-size: 0.94rem;
  margin-bottom: 18px;
}
.lifecycle-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.lifecycle-row li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.lifecycle-row b {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gold);
}
.lifecycle-row span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.grid-4 {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 42px;
  text-align: left;
}
.feature {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s var(--ease);
}
.feature:hover {
  border-color: rgba(245, 166, 35, 0.32);
  background: rgba(245, 166, 35, 0.045);
  transform: translateY(-3px);
}
.feature h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gold);
  margin-bottom: 8px;
}
.feature p { color: var(--muted); font-size: 0.84rem; line-height: 1.6; }

.praxis-panel .cta-row { position: relative; }

/* ---------- primitives ---------- */

.prim-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.prim {
  /* Flex column so the mechanism pill pins to the bottom. Bodies wrap to
     different line counts at some widths, and without this the six gold
     pills sit at six different heights across a row. */
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.45s var(--ease), border-color 0.45s ease;
}
.prim:hover {
  transform: translateY(-5px);
  border-color: rgba(245, 166, 35, 0.32);
}
.prim-fig {
  display: flex;
  align-items: center;
  height: 74px;
  margin-bottom: 18px;
}
.prim-fig .fig { width: auto; height: 72px; }
.prim h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.prim p {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.prim-mech {
  display: inline-block;
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-soft);
  border: 1px solid rgba(245, 166, 35, 0.28);
  border-radius: 999px;
  padding: 5px 11px;
}
/* sits over the brightest part of the scene, so instead of a soft scrim it
   carries a solid panel of its own, matching the tiles above it */
.prim-foot {
  display: block;
  max-width: 740px;
  margin: 22px auto 0;
  padding: 20px 30px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(9, 9, 14, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: center;
  text-wrap: balance;
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.65;
}

/* ---------- who we want to hear from ---------- */

.reach {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 880px;
  margin: 36px auto 42px;
  text-align: left;
}
.reach-item {
  padding: 22px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.4s ease, transform 0.4s var(--ease);
}
.reach-item:hover {
  border-color: rgba(245, 166, 35, 0.3);
  transform: translateY(-4px);
}
.reach-num {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--gold);
}
.reach-item h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  margin: 9px 0 7px;
}
.reach-item p { color: var(--muted); font-size: 0.86rem; line-height: 1.6; }

/* ---------- 8. draco + band ---------- */

.draco-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.catalog {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(8, 8, 14, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.catalog-head,
.catalog-row {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 0.5fr 1.6fr;
  gap: 10px;
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.catalog-head {
  background: rgba(245, 166, 35, 0.06);
  border-bottom: 1px solid var(--border);
  color: var(--gold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.62rem;
}
.catalog-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--muted);
  transition: background 0.25s ease, color 0.25s ease;
}
.catalog-row:hover { background: rgba(245, 166, 35, 0.05); color: var(--text); }
.catalog-row span:first-child { color: var(--gold-soft); }
.catalog-row span:last-child { color: var(--dim); }
.catalog-foot {
  padding: 12px 18px;
  color: var(--dim);
  text-align: right;
}

/* ---------- 9. about / contact / footer ---------- */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 66px;
  align-items: start;
}

.focus { margin-top: 36px; }
.focus-head {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
  margin-bottom: 12px;
}
.focus-row {
  display: flex;
  align-items: baseline;
  gap: 13px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.93rem;
}
.focus-row:last-child { border-bottom: 0; }
.focus-mark {
  color: var(--gold);
  font-size: 0.55rem;
  opacity: 0.75;
}

.principles {
  display: flex;
  flex-direction: column;
  padding: 6px 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.principle {
  display: flex;
  gap: 22px;
  padding: 22px 8px;
  border-bottom: 1px solid var(--border);
  transition: background 0.35s ease;
}
.principle > * { transition: transform 0.35s var(--ease); }
.principle:last-child { border-bottom: 0; }
.principle:hover { background: rgba(245, 166, 35, 0.035); }
.principle:hover > * { transform: translateX(10px); }
.principle-num {
  font-family: var(--font-mono);
  color: var(--gold);
  font-size: 0.78rem;
  padding-top: 5px;
  opacity: 0.8;
}
.principle h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: 4px;
}
.principle p { color: var(--muted); font-size: 0.9rem; }

.contact {
  position: relative;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 78px 40px 70px;
  overflow: hidden;
  background: rgba(8, 8, 14, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.contact-glow {
  position: absolute;
  bottom: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 560px;
  background: radial-gradient(ellipse at center, rgba(255, 107, 53, 0.16), transparent 66%);
  pointer-events: none;
}
.contact h2 { position: relative; margin-bottom: 8px; }
.contact .section-lede { position: relative; margin-bottom: 34px; }
.contact .cta-row { position: relative; }

footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--border);
  background: rgba(5, 5, 9, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 58px 28px 30px;
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-col h5 {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 4px;
}
.footer-col a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.86rem;
  transition: color 0.25s ease, transform 0.25s var(--ease);
}
.footer-col a:hover { color: var(--gold); transform: translateX(3px); }
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.22em;
  font-size: 0.92rem;
}
.footer-tag { color: var(--muted); font-size: 0.88rem; font-style: italic; }
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #7ddba0;
}
.status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ddba0;
  box-shadow: 0 0 10px #7ddba0;
  animation: pip 2.4s ease-in-out infinite;
}

.footer-base {
  max-width: var(--maxw);
  margin: 44px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-copy { color: var(--dim); font-size: 0.76rem; }

/* ---------- 10. motion + responsive ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: 0.07s; }
.d2 { transition-delay: 0.14s; }
.d3 { transition-delay: 0.21s; }
.d4 { transition-delay: 0.28s; }
.d5 { transition-delay: 0.35s; }

@media (max-width: 1080px) {
  .praxis-body { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .lifecycle-row { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 34px; }
  .prim-grid { grid-template-columns: repeat(2, 1fr); }
  /* Three premise cards go single-column well before they get narrow.
     In the band between here and 940px their titles wrapped unevenly,
     which reads as broken alignment rather than as a smaller layout. */
  .grid-3 { grid-template-columns: 1fr; }
  /* one card per row means the figure can afford to be wider */
  .card-fig .fig { height: 120px; }
}

@media (max-width: 940px) {
  .about-grid, .draco-grid { grid-template-columns: 1fr; gap: 46px; }
  .reach { grid-template-columns: 1fr; max-width: 460px; }
  /* The CTA is the first thing to go. Below this the logo, five links and a
     button no longer fit on one line and the nav wraps into itself, well
     before the burger layout takes over at 720. */
  .nav-cta { display: none; }
}

@media (max-width: 900px) {
  /* the scene fills far more of a phone screen, so the reading
     surfaces need more help */
  body::after {
    background:
      radial-gradient(ellipse 110% 60% at 50% 40%, rgba(5, 5, 9, 0.72), transparent 78%),
      radial-gradient(ellipse 130% 110% at 50% 50%, transparent 40%, rgba(4, 4, 8, 0.8) 100%);
  }
  header::before {
    background: radial-gradient(
      ellipse 96% 62% at 50% 48%,
      rgba(5, 5, 9, 0.95),
      rgba(5, 5, 9, 0.6) 66%,
      transparent 100%
    );
  }
  /* Horizontal inset must not exceed the section's own 20px padding, or the
     scrim reaches past the viewport edge and the page scrolls sideways. */
  .section-head::before,
  .text-scrim::before { inset: -40px -20px; }
}

@media (max-width: 720px) {
  nav { padding: 14px 20px; }
  .nav-burger { display: block; }

  .nav-links {
    position: fixed;
    inset: 0 0 auto;
    top: 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    height: 100svh;
    padding: 100px 32px 40px;
    background: rgba(5, 5, 9, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transform: translateY(-100%);
    transition: transform 0.5s var(--ease);
    z-index: -1;
  }
  body.menu-open .nav-links { transform: none; }
  .nav-links a {
    font-family: var(--font-display);
    font-size: 1.6rem;
    text-transform: none;
    letter-spacing: 0;
    padding: 10px 0;
  }
  .nav-idx { font-size: 0.7rem; }

  .section { padding: 88px 20px; }
  header { padding: 118px 20px 84px; }
  .praxis-panel { padding: 52px 20px 44px; border-radius: 20px; }
  .contact { padding: 56px 20px 50px; border-radius: 20px; }
  .grid-4 { grid-template-columns: 1fr; }
  .lifecycle-row { grid-template-columns: repeat(2, 1fr); }
  .prim-grid { grid-template-columns: 1fr; }
  .catalog-head, .catalog-row { grid-template-columns: 1fr 0.7fr 0.5fr; }
  .catalog-head span:last-child, .catalog-row span:last-child { display: none; }
  .term-body { font-size: 0.68rem; }
  .cta-row .btn { width: 100%; text-align: center; }
  .footer-inner { grid-template-columns: 1fr; }
  .cursor { display: none; }
}

/* The instances table is 56 monospace columns wide. Below this it no longer
   fits the panel, and a table you have to drag sideways is a worse demo than
   one set slightly smaller. */
@media (max-width: 460px) {
  .term-body { font-size: 0.55rem; padding: 16px 14px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .h1-line .ch { opacity: 1; transform: none; animation: none; }
  .grain, .marquee-track, .logo-mark, .scroll-line, .pip { animation: none; }
  .marquee-track { transform: none; }
}