:root {
  /* Metallic Gold Palette */
  --gold-light: #F1D2A1;
  --gold-mid: #C9944A;
  --gold-dark: #AA771C;
  --gold-deep: #8A6623;
  --gold-metallic: #D4AF37;
  --gold-gradient: linear-gradient(135deg, #CF995F 0%, #F1D2A1 25%, #E2B07E 50%, #F1D2A1 75%, #CF995F 100%);

  /* Obsidian & Shadow */
  --obsidian: #010201;
  --glass-bg: color-mix(in srgb, #fff 3%, transparent);
  --glass-border: color-mix(in srgb, var(--gold-metallic) 20%, transparent);

  /* Assets */
  --hero-bg-image: url('../assets/golden-maidens.png');

  /* Zensical Overrides */
  --md-primary-fg-color: var(--gold-light);
  --md-accent-fg-color: var(--gold-light);
}

/* ==========================================================================
   Full-Bleed Immersive Hero
   ========================================================================== */

/* Make the entire page background obsidian on the homepage */
[data-md-color-scheme="slate"] .md-main,
.md-main {
  background: var(--obsidian);
}

/* Hide footer on homepage — JS adds .hero-page class to body */
body.hero-page .md-footer {
  display: none !important;
}

/* Hero page — allow vertical scroll, prevent horizontal overflow from full-bleed sections */
html.hero-page,
body.hero-page {
  overflow-x: hidden !important;
}

body.hero-page .md-main__inner,
body.hero-page .md-content__inner {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  /* full viewport — navbar overlays on top */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  background:
    radial-gradient(ellipse at center, transparent 20%, color-mix(in srgb, var(--obsidian) 20%, transparent) 60%, color-mix(in srgb, var(--obsidian) 60%, transparent) 100%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--obsidian) 40%, transparent) 0%,
      color-mix(in srgb, var(--obsidian) 10%, transparent) 40%,
      color-mix(in srgb, var(--obsidian) 80%, transparent) 80%,
      var(--obsidian) 100%),
    var(--hero-bg-image) center 48px / contain no-repeat;
  color: var(--gold-light);
  margin: -1.2rem -0.8rem 0;
  /* bleed into the content padding */
  padding: 1rem 2rem 5rem;
  overflow: hidden;
}

/* Particle canvas — fills the hero behind all content */
.hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* All hero content sits above the particle canvas */
.hero>*:not(.hero-particles) {
  position: relative;
  z-index: 1;
}

/* Gold gradient title */
.md-typeset .hero h1,
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0.3rem;
  letter-spacing: -0.04em;
  background: var(--gold-gradient) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 0 1px color-mix(in srgb, #000 90%, transparent))
    drop-shadow(0 0 3px color-mix(in srgb, #000 70%, transparent))
    drop-shadow(0 2px 8px color-mix(in srgb, var(--gold-metallic) 40%, transparent));
  animation: shimmer 3s ease-in-out infinite alternate;
}

@keyframes shimmer {
  0% {
    filter: drop-shadow(0 0 1px color-mix(in srgb, #000 90%, transparent))
      drop-shadow(0 0 3px color-mix(in srgb, #000 70%, transparent))
      drop-shadow(0 2px 8px color-mix(in srgb, var(--gold-metallic) 30%, transparent));
  }

  100% {
    filter: drop-shadow(0 0 1px color-mix(in srgb, #000 90%, transparent))
      drop-shadow(0 0 3px color-mix(in srgb, #000 60%, transparent))
      drop-shadow(0 2px 16px color-mix(in srgb, var(--gold-metallic) 60%, transparent));
  }
}

.hero-subtitle {
  font-size: clamp(0.85rem, 1.5vw, 1.1rem);
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0.8;
  margin-bottom: 1rem;
  text-shadow: 0 0 4px color-mix(in srgb, #000 90%, transparent), 0 0 8px color-mix(in srgb, #000 60%, transparent);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero buttons — equal width */
.hero-buttons {
  margin-top: 0.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.hero-buttons .md-button {
  min-width: 200px;
  padding: 0.7rem 1.8rem !important;
  font-size: 0.85rem !important;
  text-align: center;
  border-radius: 3rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  box-shadow: none !important;
}

/* Hero experience mode strip — CLI | GUI | VN */
.hero-experiences {
  margin-top: 1.2rem;
  margin-bottom: 0.5rem;
}

.hero-modes {
  font-size: clamp(0.7rem, 1.2vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0;
}

.hero-modes .twemoji,
.hero-modes .octicon {
  vertical-align: -0.1em;
  margin: 0 0.15em;
}

/* ==========================================================================
   Navigation — seamless with obsidian background
   ========================================================================== */

.md-header {
  background-color: color-mix(in srgb, var(--obsidian) 90%, transparent) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--gold-metallic) 10%, transparent) !important;
  box-shadow: 0 1px 20px color-mix(in srgb, #000 50%, transparent);
}

/* On the homepage, fix the header so it overlays the hero without pushing it down */
body.hero-page .md-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.md-nav__link--active {
  color: var(--gold-light) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.md-button--primary {
  background: var(--gold-gradient) !important;
  color: var(--obsidian) !important;
  border: none !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 0.8rem 2rem !important;
  border-radius: 3rem !important;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--gold-light) 30%, transparent) !important;
  transition: all 0.3s ease;
}

.md-button--primary:hover {
  filter: brightness(1.1);
  transform: scale(1.05);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--gold-light) 50%, transparent) !important;
}

/* Secondary button in hero — glass style */
.hero .md-button:not(.md-button--primary) {
  border-color: var(--glass-border) !important;
  color: var(--gold-light) !important;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.hero .md-button:not(.md-button--primary):hover {
  border-color: var(--gold-light) !important;
  background: color-mix(in srgb, var(--gold-light) 10%, transparent) !important;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.md-typeset h1:not(.hero h1),
.md-typeset h2,
.md-typeset h3 {
  color: var(--gold-light);
  font-weight: 800;
}

.md-typeset a {
  color: var(--gold-light);
  transition: color 0.2s ease;
}

.md-typeset a:hover {
  color: #fff;
}

.md-typeset hr {
  border-bottom: 1px solid var(--glass-border);
}

/* Tables */
.md-typeset table:not([class]) {
  border-collapse: collapse;
  font-size: 0.82rem;
}

.md-typeset table:not([class]) th {
  background: color-mix(in srgb, var(--gold-mid) 12%, transparent);
  color: var(--gold-light);
  font-weight: 700;
  padding: 0.6rem 0.8rem;
  border-bottom: 2px solid var(--gold-dark);
}

.md-typeset table:not([class]) td {
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid color-mix(in srgb, var(--gold-dark) 20%, transparent);
}

.md-typeset table:not([class]) tr:hover td {
  background: color-mix(in srgb, var(--gold-mid) 5%, transparent);
}

/* Code blocks — slightly warmer */
.md-typeset code {
  color: var(--gold-light);
  background: color-mix(in srgb, var(--gold-mid) 8%, transparent);
  border-radius: 3px;
  padding: 0.1em 0.3em;
}

/* Grid cards — gold border on hover */
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--gold-dark);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--gold-metallic) 15%, transparent);
}

/* Admonitions — gold-tinted */
.md-typeset .admonition,
.md-typeset details {
  border-color: var(--gold-dark);
}

/* ==========================================================================
   Scrollbar
   ========================================================================== */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--obsidian);
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--gold-light) 30%, transparent);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold-light);
}

/* ==========================================================================
   Mobile — Tablet (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
  /* Hero adjustments */
  .hero {
    background:
      radial-gradient(ellipse at center, transparent 15%, color-mix(in srgb, var(--obsidian) 25%, transparent) 55%, color-mix(in srgb, var(--obsidian) 70%, transparent) 100%),
      linear-gradient(to bottom,
        color-mix(in srgb, var(--obsidian) 50%, transparent) 0%,
        color-mix(in srgb, var(--obsidian) 15%, transparent) 25%,
        color-mix(in srgb, var(--obsidian) 60%, transparent) 60%,
        color-mix(in srgb, var(--obsidian) 90%, transparent) 80%,
        var(--obsidian) 95%),
      var(--hero-bg-image) center 48px / contain no-repeat;
    padding: 1rem 1.2rem 2rem;
    height: 100vh;
    height: 100dvh;
  }

  .md-typeset .hero h1,
  .hero h1 {
    font-size: clamp(1.6rem, 8vw, 2.4rem);
    margin-bottom: 0.2rem;
  }

  .hero-subtitle {
    font-size: clamp(0.65rem, 2.5vw, 0.85rem);
    margin-bottom: 0.6rem;
    padding: 0 0.5rem;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    align-items: center;
  }

  .hero-buttons .md-button {
    min-width: 0;
    width: 70%;
    max-width: 260px;
    padding: 0.6rem 1.2rem !important;
    font-size: 0.78rem !important;
  }

  .hero-experiences {
    margin-top: 0.8rem;
  }

  .hero-modes {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
  }

  /* Tables scroll horizontally on mobile */
  .md-typeset table:not([class]) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.78rem;
  }

  /* Tighten grid cards */
  .md-typeset .grid.cards > ul > li {
    padding: 0.8rem;
  }

  /* Footer adjustments */
  .md-footer-meta__inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .md-footer-meta__inner .md-copyright {
    padding: 0 !important;
  }

  .md-footer-meta__inner .md-social {
    margin-top: 0 !important;
    padding: 0 !important;
  }

  /* Mermaid diagrams scroll on mobile */
  .mermaid {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   Mobile — Small phones (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
  .hero {
    padding: 0.5rem 0.8rem 1.5rem;
  }

  .md-typeset .hero h1,
  .hero h1 {
    font-size: clamp(1.4rem, 9vw, 2rem);
    letter-spacing: -0.02em;
  }

  .hero-subtitle {
    font-size: 0.62rem;
    margin-bottom: 0.5rem;
  }

  .hero-buttons .md-button {
    width: 80%;
    max-width: 220px;
    padding: 0.5rem 1rem !important;
    font-size: 0.72rem !important;
  }

  .hero-modes {
    font-size: 0.58rem;
  }

  /* Stack content more tightly */
  .md-typeset h1:not(.hero h1) {
    font-size: 1.4rem;
  }

  .md-typeset h2 {
    font-size: 1.15rem;
  }

  .md-typeset h3 {
    font-size: 1rem;
  }

  /* Code blocks don't overflow */
  .md-typeset pre > code {
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   Mobile — Extra small (max-width: 360px)
   ========================================================================== */

@media (max-width: 360px) {
  .hero {
    padding: 0.3rem 0.6rem 1.2rem;
  }

  .hero-buttons .md-button {
    width: 90%;
    font-size: 0.68rem !important;
    padding: 0.45rem 0.8rem !important;
  }

  .hero-modes {
    font-size: 0.52rem;
    letter-spacing: 0.08em;
  }
}

/* ==========================================================================
   Desktop — Wide screens (min-width: 1440px)
   ========================================================================== */

@media (min-width: 1440px) {
  .hero {
    padding-bottom: 6rem;
  }

  .md-typeset .hero h1,
  .hero h1 {
    font-size: 4rem;
  }

  .hero-subtitle {
    font-size: 1.2rem;
    max-width: 800px;
  }

  .hero-buttons .md-button {
    min-width: 240px;
    padding: 0.85rem 2.2rem !important;
    font-size: 0.9rem !important;
  }

  .hero-modes {
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   Desktop — Ultra-wide (min-width: 1920px)
   ========================================================================== */

@media (min-width: 1920px) {
  .hero {
    padding-bottom: 8rem;
  }

  .md-typeset .hero h1,
  .hero h1 {
    font-size: 4.5rem;
  }

  .hero-subtitle {
    font-size: 1.3rem;
  }
}

/* ==========================================================================
   Mermaid Diagram Theming — Gold on Slate
   ========================================================================== */

/* Node styling */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node polygon {
  fill: color-mix(in srgb, var(--gold-mid) 15%, transparent) !important;
  stroke: var(--gold-mid) !important;
  stroke-width: 2px !important;
}

.mermaid .node .label,
.mermaid .nodeLabel {
  color: var(--gold-light) !important;
  fill: var(--gold-light) !important;
}

/* Edge lines and arrows */
.mermaid .edgePath .path,
.mermaid .flowchart-link {
  stroke: var(--gold-dark) !important;
  stroke-width: 2px !important;
}

.mermaid .arrowheadPath,
.mermaid marker path {
  fill: var(--gold-dark) !important;
  stroke: var(--gold-dark) !important;
}

/* Edge labels */
.mermaid .edgeLabel {
  background-color: var(--obsidian) !important;
  color: var(--gold-light) !important;
}

.mermaid .edgeLabel rect {
  fill: var(--obsidian) !important;
  opacity: 0.9 !important;
}

.mermaid .edgeLabel span {
  color: var(--gold-light) !important;
  fill: var(--gold-light) !important;
}

/* Diamond / decision nodes */
.mermaid .node .label-container {
  fill: color-mix(in srgb, var(--gold-mid) 15%, transparent) !important;
  stroke: var(--gold-mid) !important;
}

/* Sequence diagram */
.mermaid .actor {
  fill: color-mix(in srgb, var(--gold-mid) 15%, transparent) !important;
  stroke: var(--gold-mid) !important;
}

.mermaid .actor-line {
  stroke: var(--gold-dark) !important;
}

.mermaid text.actor,
.mermaid .actor text {
  fill: var(--gold-light) !important;
}

.mermaid .messageLine0,
.mermaid .messageLine1 {
  stroke: var(--gold-dark) !important;
}

.mermaid .messageText {
  fill: var(--gold-light) !important;
}

.mermaid .loopText,
.mermaid .loopText>tspan {
  fill: var(--gold-light) !important;
}

.mermaid .loopLine {
  stroke: var(--gold-mid) !important;
}

.mermaid .labelBox {
  fill: var(--obsidian) !important;
  stroke: var(--gold-mid) !important;
}

.mermaid .labelText,
.mermaid .labelText>tspan {
  fill: var(--gold-light) !important;
}

.mermaid .noteText {
  fill: var(--gold-light) !important;
}

.mermaid .note {
  fill: color-mix(in srgb, var(--gold-mid) 10%, transparent) !important;
  stroke: var(--gold-mid) !important;
}

/* Cluster / subgraph backgrounds */
.mermaid .cluster rect {
  fill: color-mix(in srgb, var(--gold-mid) 5%, transparent) !important;
  stroke: var(--gold-dark) !important;
}

/* Responsive Mermaid containers */
.mermaid {
  max-width: 100%;
  overflow-x: auto;
}

/* ==========================================================================
   Landing Page — Below-Fold Sections
   ========================================================================== */

/* Scroll indicator — bouncing chevron between hero and content */
.scroll-hint {
  text-align: center;
  margin-top: -3rem;
  padding-bottom: 1.5rem;
  position: relative;
  z-index: 2;
  animation: hint-bounce 2s ease-in-out infinite;
}

.scroll-chevron {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-right: 2px solid var(--gold-light);
  border-bottom: 2px solid var(--gold-light);
  transform: rotate(45deg);
  opacity: 0.35;
}

@keyframes hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Section containers — full bleed with scroll-reveal */
.landing-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 5rem 2rem;
  background: var(--obsidian);
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Intro + promise sections should read as separate viewport moments */
.landing-section--intro,
.landing-section--promise {
  min-height: 88vh;
  min-height: 88svh;
  display: flex;
  align-items: center;
}

/* Create extra breathing room between the two opening sections */
.landing-section--intro {
  padding-bottom: 14vh;
}

.landing-section--promise {
  padding-top: 14vh;
}

.landing-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Subtle alternating background */
.landing-section:nth-of-type(even) {
  background: color-mix(in srgb, var(--gold-mid) 2%, var(--obsidian));
}

.section-inner {
  max-width: 960px;
  margin: 0 auto;
}

.section-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  background: var(--gold-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin: 0 0 1.2rem 0;
}

.section-lead {
  font-size: clamp(0.9rem, 1.5vw, 1.08rem);
  color: var(--gold-light);
  opacity: 0.8;
  line-height: 1.8;
  max-width: 600px;
  margin: 0 auto;
}

/* ---------- Agent cards ---------- */

.agent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2rem;
}

.agent-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top: 3px solid var(--agent-accent, var(--gold-dark));
  border-radius: 8px;
  padding: 1.5rem 1.2rem;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  /* anchor reset */
  display: block;
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
}

.agent-card *,
.agent-card *:hover {
  text-decoration: none !important;
}

.agent-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--agent-accent, var(--gold-dark)) 20%, transparent);
  border-color: var(--agent-accent, var(--gold-dark));
}

.agent-emoji {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* Avatar portraits — circular crop with agent-accent glow */
.agent-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--agent-accent, var(--gold-dark));
  margin-bottom: 0.6rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.agent-card:hover .agent-avatar {
  transform: scale(1.08);
  box-shadow: 0 0 16px color-mix(in srgb, var(--agent-accent, var(--gold-dark)) 40%, transparent);
}

/* Mini avatars — pipeline flow, inline references */
.avatar-mini {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--gold-dark);
  vertical-align: middle;
}

/* Specialist profile header avatars */
.specialist-avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold-dark);
  float: right;
  margin: 0 0 1rem 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.specialist-avatar:hover {
  transform: scale(1.08);
  box-shadow: 0 0 24px color-mix(in srgb, var(--gold-metallic) 45%, transparent);
}

/* ==========================================================================
   Specialist Avatar Lightbox
   ========================================================================== */

.avatar-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(1, 2, 1, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.avatar-lightbox--visible {
  opacity: 1;
}

.avatar-lightbox__img {
  max-width: min(520px, 90vw);
  max-height: 90vh;
  border-radius: 12px;
  border: 2px solid var(--gold-dark);
  box-shadow:
    0 0 40px rgba(0, 0, 0, 0.8),
    0 0 80px color-mix(in srgb, var(--gold-metallic) 20%, transparent);
  cursor: default;
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.avatar-lightbox--visible .avatar-lightbox__img {
  transform: scale(1);
}

.agent-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 0.15rem;
}

.agent-epithet {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--agent-accent, var(--gold-mid));
  opacity: 0.85;
  margin-bottom: 0.6rem;
}

.agent-card p {
  font-size: 0.8rem;
  color: var(--gold-light);
  opacity: 0.6;
  margin: 0;
  line-height: 1.5;
}

/* ---------- Pipeline flow ---------- */

.pipeline-flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2.5rem;
  margin: 2.5rem auto;
  position: relative;
  padding: 0 2rem;
}

/* Connecting line behind all steps */
.pipeline-flow::before {
  content: '';
  position: absolute;
  top: 1.15rem;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark), var(--gold-dark), transparent);
  z-index: 0;
}

.pipeline-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.step-emoji {
  font-size: 2rem;
  line-height: 1;
}

.step-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  opacity: 0.8;
}

.pipeline-caption {
  font-size: 0.82rem;
  color: var(--gold-light);
  opacity: 0.4;
  font-style: italic;
  margin-top: 0;
}

/* ---------- Experience cards ---------- */

.experience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2rem;
}

.experience-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  /* anchor reset */
  display: block;
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
}

.experience-card *,
.experience-card *:hover {
  text-decoration: none !important;
}

.experience-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--gold-mid) 15%, transparent);
  border-color: var(--gold-dark);
}

.experience-icon {
  font-size: 2.5rem;
  margin-bottom: 0.8rem;
}

.experience-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold-light) !important;
  margin: 0 0 0.6rem 0;
}

.experience-card p {
  font-size: 0.82rem;
  color: var(--gold-light);
  opacity: 0.6;
  margin: 0;
  line-height: 1.6;
}

.experience-note {
  font-size: 0.78rem;
  color: var(--gold-light);
  opacity: 0.4;
  margin-top: 1.5rem;
  font-style: italic;
}

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

.cta-section {
  padding: 5rem 2rem !important;
}

.cta-lead {
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  color: var(--gold-light);
  opacity: 0.65;
  margin-bottom: 1.5rem;
}

.cta-button {
  font-size: 0.9rem !important;
  min-width: 220px;
}

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

.landing-footer {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--obsidian);
  border-top: 1px solid var(--glass-border);
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--gold-light);
  opacity: 0.5;
}

.landing-footer a {
  color: var(--gold-light);
  opacity: 0.7;
  transition: opacity 0.2s;
}

.landing-footer a:hover {
  opacity: 1;
}

.landing-footer svg {
  vertical-align: middle;
}

/* ---------- Color swatches (Art Direction) ---------- */

.swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 6px;
  border: 1px solid color-mix(in srgb, #fff 15%, transparent);
}

/* ==========================================================================
   Landing Page — Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .agent-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .experience-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .landing-section {
    padding: 3.5rem 1.2rem;
  }

  .landing-section--intro,
  .landing-section--promise {
    min-height: 74vh;
    min-height: 74svh;
  }

  .landing-section--intro {
    padding-bottom: 10vh;
  }

  .landing-section--promise {
    padding-top: 10vh;
  }

  .pipeline-flow {
    gap: 1.5rem;
    padding: 0 1rem;
  }

  .pipeline-flow::before {
    left: 8%;
    right: 8%;
  }
}

@media (max-width: 480px) {
  .agent-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .landing-section {
    padding: 2.5rem 1rem;
  }

  .landing-section--intro,
  .landing-section--promise {
    min-height: 70vh;
    min-height: 70svh;
  }

  .landing-section--intro,
  .landing-section--promise {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .pipeline-flow {
    gap: 0.8rem;
    padding: 0 0.5rem;
  }

  .pipeline-flow::before {
    left: 5%;
    right: 5%;
  }

  .step-emoji {
    font-size: 1.5rem;
  }

  .step-label {
    font-size: 0.55rem;
  }

  .scroll-hint {
    margin-top: -2rem;
  }
}