---
# Jekyll front matter - required for SCSS processing
---

// =============================================================================
// GNO Design System - "Scholarly Dusk" v2.1 (World-Class Polish)
// A refined, editorial aesthetic for a knowledge discovery tool
// =============================================================================

// -----------------------------------------------------------------------------
// Design Tokens
// -----------------------------------------------------------------------------

// Spacing scale (4px base)
$space-1: 0.25rem; // 4px
$space-2: 0.5rem; // 8px
$space-3: 0.75rem; // 12px
$space-4: 1rem; // 16px
$space-5: 1.5rem; // 24px
$space-6: 2rem; // 32px
$space-7: 3rem; // 48px
$space-8: 4rem; // 64px
$space-9: 6rem; // 96px
$space-10: 8rem; // 128px

// Typography
$font-sans:
  "Inter",
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Roboto,
  sans-serif;
$font-serif: "Newsreader", "Georgia", serif;
$font-mono:
  "JetBrains Mono", ui-monospace, "Cascadia Code", "Source Code Pro", monospace;

// Radii
$radius-sm: 4px;
$radius-md: 8px;
$radius-lg: 12px;
$radius-xl: 20px;
$radius-2xl: 32px;
$radius-full: 9999px;

// Transitions
$transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
$transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
$transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
$transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

// Layout
$header-height: 72px;
$sidebar-width: 300px;
$content-max-width: 760px;
$container-max-width: 1400px;

// Breakpoints
$bp-sm: 640px;
$bp-md: 768px;
$bp-lg: 1024px;
$bp-xl: 1280px;

// -----------------------------------------------------------------------------
// Theme System
// -----------------------------------------------------------------------------

:root {
  // Dark theme (Default)
  // Deep, rich, "Library at Night"
  --color-bg-base: #050505; // Deep black
  --color-bg-subtle: #0f1115; // Sidebar/Cards
  --color-bg-surface: #181b21; // Elevated
  --color-bg-hover: #22262e;
  --color-bg-active: #2c313a;

  --color-border: #1f2329;
  --color-border-subtle: #16191d;
  --color-border-highlight: #333842;

  // Text
  --color-text-primary: #ededed;
  --color-text-secondary: #949ba3;
  --color-text-tertiary: #636b75;
  --color-text-inverse: #050505;

  // Brand - "Alchemical Teal" & "Old Gold"
  --color-accent: #4db8a8;
  --color-accent-hover: #6ddccb;
  --color-accent-faint: rgba(77, 184, 168, 0.1);
  --color-accent-glow: rgba(77, 184, 168, 0.5);

  --color-warm: #d4a053;
  --color-warm-hover: #f0bc6e;
  --color-warm-faint: rgba(212, 160, 83, 0.1);

  // Status
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-error: #f87171;
  --color-info: #60a5fa;

  // Syntax
  --color-code-bg: #0f1115;
  --color-code-border: #1f2329;

  // Effects
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 100px -20px var(--color-accent-glow);

  --backdrop-blur: blur(16px);
  --glass-bg: rgba(5, 5, 5, 0.75);
  --glass-border: rgba(255, 255, 255, 0.06);

  // Hero Gradient - Aurora effect
  --hero-gradient:
    radial-gradient(
      ellipse 80% 50% at 50% -20%,
      rgba(77, 184, 168, 0.15),
      transparent
    ),
    radial-gradient(
      ellipse 60% 40% at 80% 0%,
      rgba(212, 160, 83, 0.08),
      transparent
    ),
    radial-gradient(
      ellipse 50% 30% at 20% 10%,
      rgba(77, 184, 168, 0.06),
      transparent
    );

  // Aurora blobs for animation
  --aurora-1: rgba(77, 184, 168, 0.12);
  --aurora-2: rgba(212, 160, 83, 0.08);
  --aurora-3: rgba(109, 220, 203, 0.06);

  // Grid Pattern
  --grid-pattern:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

[data-theme="light"] {
  // Light theme
  // "Antique Paper"
  --color-bg-base: #fcfbf9;
  --color-bg-subtle: #f5f2ee;
  --color-bg-surface: #ffffff;
  --color-bg-hover: #ebe7e1;
  --color-bg-active: #e0dcd6;

  --color-border: #e0dcd6;
  --color-border-subtle: #ebe7e1;
  --color-border-highlight: #d1ccc5;

  --color-text-primary: #24221f;
  --color-text-secondary: #59554f;
  --color-text-tertiary: #8f8880;
  --color-text-inverse: #ffffff;

  --color-accent: #1a6b7d;
  --color-accent-hover: #208096;
  --color-accent-faint: rgba(32, 128, 150, 0.08);
  --color-accent-glow: rgba(32, 128, 150, 0.3);

  --color-warm: #9a7225;
  --color-warm-hover: #b5872e;
  --color-warm-faint: rgba(154, 114, 37, 0.1);

  --color-code-bg: #f5f2ee;
  --color-code-border: #e0dcd6;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
  --shadow-glow: 0 0 80px -20px var(--color-accent-glow);

  --glass-bg: rgba(252, 251, 249, 0.8);
  --glass-border: rgba(0, 0, 0, 0.03);

  --hero-gradient:
    radial-gradient(
      ellipse 80% 50% at 50% -20%,
      rgba(26, 107, 125, 0.08),
      transparent
    ),
    radial-gradient(
      ellipse 60% 40% at 80% 0%,
      rgba(154, 114, 37, 0.06),
      transparent
    );

  // Aurora blobs for light mode
  --aurora-1: rgba(26, 107, 125, 0.08);
  --aurora-2: rgba(154, 114, 37, 0.06);
  --aurora-3: rgba(32, 128, 150, 0.04);

  --grid-pattern:
    linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
}

// -----------------------------------------------------------------------------
// Base & Reset
// -----------------------------------------------------------------------------

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: $font-sans;
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  line-height: 1.65;
  overflow-x: hidden;
  transition:
    background-color $transition-slow,
    color $transition-slow;

  // World-class detail: Subtle grid pattern
  background-image: var(--grid-pattern);
  background-size: 40px 40px;
}

::selection {
  background-color: var(--color-accent-faint);
  color: var(--color-accent);
}

// -----------------------------------------------------------------------------
// Typography Components
// -----------------------------------------------------------------------------

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $font-serif;
  color: var(--color-text-primary);
  line-height: 1.25;
  font-weight: 600;
  margin-top: $space-8;
  margin-bottom: $space-4;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 2rem;
  padding-bottom: $space-3;
  border-bottom: 1px solid var(--color-border-subtle);
}

h3 {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.25rem;
  font-family: $font-sans;
  font-weight: 600;
  letter-spacing: -0.02em;
}
h5 {
  font-size: 0.875rem;
  font-family: $font-sans;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
}

p {
  margin-bottom: $space-5;
  max-width: 70ch; // Optimal reading length
}

a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all $transition-fast;

  &:hover {
    color: var(--color-accent-hover);
    border-bottom-color: var(--color-accent-hover);
  }
}

code {
  font-family: $font-mono;
  font-size: 0.85em;
  background: var(--color-code-bg);
  color: var(--color-text-primary);
  padding: 0.2em 0.4em;
  border-radius: $radius-sm;
  border: 1px solid var(--color-code-border);
}

pre {
  // Pre remains the scrollable container, but visual styles move to .highlight wrapper
  font-family: $font-mono;
  font-size: 0.9em;
  line-height: 1.6;
  margin: 0;
  padding: $space-5;
  overflow-x: auto;
  background: transparent;
  border: none;
  position: relative;

  code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
  }

  // Custom scrollbar
  &::-webkit-scrollbar {
    height: 8px;
  }
  &::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
  }
}

// -----------------------------------------------------------------------------
// Layout Components
// -----------------------------------------------------------------------------

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: $header-height;
  z-index: 100;
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border-bottom: 1px solid var(--glass-border);

  // Subtle top glow line
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--color-accent-glow),
      transparent
    );
    opacity: 0.5;
  }
}

.site-header-inner {
  max-width: $container-max-width;
  height: 100%;
  margin: 0 auto;
  padding: 0 $space-5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: $space-3;
  font-family: $font-serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  border: none;

  &:hover {
    color: var(--color-text-primary);
  }

  &-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform $transition-base;

    svg {
      width: 28px;
      height: 28px;
    }
  }

  &:hover &-icon {
    transform: scale(1.05);
  }
}

.site-nav {
  display: none;
  @media (min-width: $bp-md) {
    display: flex;
    align-items: center;
    gap: $space-6;
  }

  &-link {
    font-family: $font-sans;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    border: none;
    position: relative;
    padding: $space-1 0;

    &:hover {
      color: var(--color-text-primary);
    }

    &.active {
      color: var(--color-text-primary);
      &::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--color-accent);
        border-radius: $radius-full;
      }
    }
  }
}

.sidebar {
  position: fixed;
  top: $header-height;
  left: 0;
  bottom: 0;
  width: $sidebar-width;
  background: var(--color-bg-subtle);
  border-right: 1px solid var(--color-border);
  padding: $space-6 $space-5;
  overflow-y: auto;
  z-index: 50;
  transition: transform $transition-base;

  // Custom scrollbar - thin and subtle
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
    &:hover {
      background: var(--color-border-highlight);
    }
  }
  // Firefox
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;

  @media (max-width: $bp-lg) {
    transform: translateX(-100%);
    &.open {
      transform: translateX(0);
    }
  }
}

.site-main {
  padding-top: $header-height;
  min-height: 100vh;
  transition: margin-left $transition-base;

  // Only add margin if sidebar is present (default behavior)
  @media (min-width: $bp-lg) {
    margin-left: $sidebar-width;
  }
}

// Layout Fix: No margin on homepage, fullwidth, and feature pages
body.layout-home .site-main,
body.layout-fullwidth .site-main,
body.layout-feature .site-main {
  margin-left: 0 !important;
}

.content {
  max-width: $content-max-width;
  margin: 0 auto;
  padding: $space-8 $space-5;
}

// Reset first element in content to align with top padding
.page-content > :first-child {
  margin-top: 0;
}

.content-home {
  max-width: 1200px;
}

// Markdown content images (screenshots) - constrained with styling
// Applies to homepage, docs pages, and all content areas
.content img,
.content-home img,
.page-content img {
  display: block;
  max-width: 800px;
  width: 100%;
  height: auto;
  margin: $space-6 auto;
  border-radius: $radius-lg;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  transition:
    transform $transition-base,
    box-shadow $transition-base;

  &.lightbox-enabled:hover {
    transform: scale(1.01);
    box-shadow:
      var(--shadow-lg),
      0 0 0 2px var(--color-accent);
  }
}

// -----------------------------------------------------------------------------
// Tables
// -----------------------------------------------------------------------------

table {
  width: 100%;
  border-collapse: collapse;
  margin: $space-5 0;
  font-size: 0.95rem;
}

th,
td {
  padding: $space-3 $space-4;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

th {
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-bg-subtle);
  white-space: nowrap;
}

td {
  color: var(--color-text-secondary);
}

tr:hover td {
  background: var(--color-bg-subtle);
}

// Responsive tables
@media (max-width: $bp-sm) {
  table {
    font-size: 0.85rem;
  }

  th,
  td {
    padding: $space-2 $space-3;
  }
}

// -----------------------------------------------------------------------------
// Hero Section (Home)
// -----------------------------------------------------------------------------

.hero {
  position: relative;
  text-align: center;
  padding: $space-10 $space-5 $space-9;
  max-width: 1000px;
  margin: 0 auto;
  overflow: visible;

  // Animated Aurora Blobs
  &::before,
  &::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
    pointer-events: none;
    animation: aurora-float 20s ease-in-out infinite;
  }

  &::before {
    top: -30%;
    left: 10%;
    width: 60%;
    height: 60%;
    background: var(--aurora-1);
    animation-delay: 0s;
  }

  &::after {
    top: -20%;
    right: 5%;
    width: 50%;
    height: 50%;
    background: var(--aurora-2);
    animation-delay: -7s;
    animation-duration: 25s;
  }
}

.hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: $space-7;
  max-width: 1320px;
  text-align: left;
  align-items: center;

  @media (max-width: $bp-lg) {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: $space-3;
  margin: 0 0 $space-6;

  @media (max-width: $bp-sm) {
    grid-template-columns: 1fr;
  }
}

.hero-proof-item {
  display: flex;
  flex-direction: column;
  gap: $space-1;
  padding: $space-3 $space-4;
  background: rgba(15, 17, 21, 0.72);
  border: 1px solid var(--color-border-highlight);
  border-radius: $radius-lg;
  box-shadow: var(--shadow-sm);
}

.hero-proof-value {
  font-family: $font-mono;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-accent);
}

.hero-proof-label {
  color: var(--color-text-secondary);
  font-size: 0.88rem;
  line-height: 1.45;
}

.hero-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: $space-4;
  align-items: stretch;

  @media (max-width: $bp-md) {
    grid-template-columns: 1fr;
  }
}

.hero-showcase-main,
.hero-showcase-mini {
  position: relative;
  overflow: hidden;
  border-radius: $radius-xl;
  border: 1px solid var(--color-border-highlight);
  background: rgba(15, 17, 21, 0.82);
  box-shadow:
    var(--shadow-lg),
    0 0 60px -24px rgba(77, 184, 168, 0.28);
}

.hero-showcase-main img,
.hero-showcase-mini img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border: 0;
  box-shadow: none;
}

.hero-showcase-main {
  min-height: 420px;
}

.hero-showcase-stack {
  display: grid;
  gap: $space-4;

  @media (max-width: $bp-md) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (max-width: $bp-sm) {
    grid-template-columns: 1fr;
  }
}

.hero-showcase-mini {
  min-height: 200px;
}

.hero-showcase-caption {
  position: absolute;
  right: $space-3;
  bottom: $space-3;
  left: $space-3;
  display: flex;
  flex-direction: column;
  gap: $space-1;
  padding: $space-3;
  border-radius: $radius-md;
  background: linear-gradient(
    180deg,
    rgba(5, 5, 5, 0) 0%,
    rgba(5, 5, 5, 0.8) 30%,
    rgba(5, 5, 5, 0.95) 100%
  );

  span {
    font-family: $font-mono;
    font-size: 0.72rem;
    color: var(--color-warm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  strong {
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--color-text-primary);
  }
}

// Third aurora blob via extra element
.hero-aurora {
  position: absolute;
  top: 0;
  left: 30%;
  width: 40%;
  height: 40%;
  background: var(--aurora-3);
  border-radius: 50%;
  filter: blur(100px);
  z-index: -1;
  pointer-events: none;
  animation: aurora-float 30s ease-in-out infinite reverse;
  animation-delay: -3s;
}

@keyframes aurora-float {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }
  25% {
    transform: translate(5%, 10%) scale(1.1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-5%, 5%) scale(0.95);
    opacity: 0.5;
  }
  75% {
    transform: translate(3%, -5%) scale(1.05);
    opacity: 0.7;
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: $space-2;
  padding: $space-2 $space-4;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-highlight);
  border-radius: $radius-full;
  box-shadow: var(--shadow-sm);
  margin-bottom: $space-6;

  font-family: $font-mono;
  font-size: 0.8rem;
  color: var(--color-warm);
  font-weight: 500;
  letter-spacing: 0.02em;

  svg {
    width: 16px;
    height: 16px;
    color: var(--color-warm);
  }
}

.hero-title {
  font-family: $font-serif;
  font-size: 3.5rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: $space-5;
  margin-top: 0;

  // Shimmer gradient text
  background: linear-gradient(
    135deg,
    var(--color-text-primary) 0%,
    var(--color-accent) 25%,
    var(--color-text-primary) 50%,
    var(--color-warm) 75%,
    var(--color-text-primary) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 8s linear infinite;

  @media (min-width: $bp-md) {
    font-size: 5rem;
  }
}

@keyframes shimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

// Punchy one-liner tagline
.hero-tagline {
  font-family: $font-mono;
  font-size: 1.15rem;
  color: var(--color-accent);
  letter-spacing: 0.02em;
  margin: 0 auto $space-4;
  font-weight: 500;
}

.hero-description {
  font-family: $font-sans;
  font-size: 1.25rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto $space-6;
  letter-spacing: -0.01em;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: $space-4;
  flex-wrap: wrap;
}

// Buttons
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: $space-3 $space-6;
  border-radius: $radius-full;
  font-family: $font-sans;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all $transition-base;
  cursor: pointer;
  border: 1px solid transparent;

  &-primary {
    background: linear-gradient(
      135deg,
      var(--color-accent) 0%,
      var(--color-accent-hover) 100%
    );
    color: #fff;
    position: relative;
    overflow: hidden;
    // Glow effect
    box-shadow:
      0 4px 15px var(--color-accent-glow),
      0 0 0 1px rgba(255, 255, 255, 0.1) inset;

    // Shine overlay
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
      );
      transition: left 0.5s ease;
    }

    &:hover,
    &:focus {
      background: linear-gradient(
        135deg,
        var(--color-accent-hover) 0%,
        var(--color-accent) 100%
      );
      color: #fff;
      transform: translateY(-2px);
      box-shadow:
        0 8px 25px var(--color-accent-glow),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;

      &::before {
        left: 100%;
      }
    }
  }

  &-secondary {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);

    &:hover,
    &:focus {
      border-color: var(--color-text-secondary);
      background: var(--color-bg-hover);
      color: var(--color-text-primary);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }
  }

  &-lg {
    padding: $space-3 2rem;
    font-size: 1.05rem;
  }
}

// Hero Demo Window - Premium ambient glow effect
// Dark mode: Teal glow blending into dark background
// Light mode: Dramatic depth shadows with subtle accent
.hero-demo {
  margin: $space-9 auto $space-5;
  border-radius: $radius-lg;
  position: relative;
  max-width: 900px;

  // Dark mode: Multi-layered teal glow
  box-shadow:
    // Crisp inner shadow for definition
    0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -2px rgba(0, 0, 0, 0.2),
    // Inner teal glow (bright core)
    0 0 30px 0 rgba(77, 184, 168, 0.35),
    0 0 60px 0 rgba(77, 184, 168, 0.25),
    // Mid-range spread
    0 0 100px 10px rgba(77, 184, 168, 0.15),
    0 0 150px 20px rgba(77, 184, 168, 0.1),
    // Far ambient (blends to background)
    0 0 200px 40px rgba(77, 184, 168, 0.06),
    0 0 280px 60px rgba(77, 184, 168, 0.03),
    0 0 350px 80px rgba(77, 184, 168, 0.015);

  // Large ambient glow pseudo-element
  &::before {
    content: "";
    position: absolute;
    inset: -120px;
    background: radial-gradient(
      ellipse 70% 50% at 50% 50%,
      rgba(77, 184, 168, 0.12) 0%,
      rgba(77, 184, 168, 0.06) 30%,
      rgba(77, 184, 168, 0.02) 60%,
      transparent 100%
    );
    z-index: -1;
    pointer-events: none;
    filter: blur(40px);
    animation: demo-glow-pulse 6s ease-in-out infinite;
  }

  // Subtle vertical light beam accent
  &::after {
    content: "";
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 120px;
    background: linear-gradient(
      180deg,
      rgba(77, 184, 168, 0.1) 0%,
      rgba(77, 184, 168, 0.04) 50%,
      transparent 100%
    );
    z-index: -1;
    pointer-events: none;
    filter: blur(50px);
  }

  img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: $radius-lg;
    border: 1px solid rgba(77, 184, 168, 0.15);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  }
}

// Light mode: Dramatic depth shadows instead of glow
[data-theme="light"] .hero-demo {
  // Layered shadows for dramatic depth + subtle teal accent ring
  box-shadow:
    // Tight definition shadow
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.06),
    // Mid-depth shadows
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 8px 16px rgba(0, 0, 0, 0.06),
    // Deep ambient shadow
    0 16px 32px rgba(0, 0, 0, 0.08),
    0 32px 64px rgba(0, 0, 0, 0.08),
    // Far spread for smooth blend
    0 48px 96px rgba(0, 0, 0, 0.06),
    0 64px 128px rgba(0, 0, 0, 0.04),
    // Subtle teal accent ring
    0 0 0 1px rgba(26, 107, 125, 0.08),
    0 0 60px -10px rgba(26, 107, 125, 0.15);

  // Light mode pseudo-element: soft depth halo
  &::before {
    inset: -80px;
    background: radial-gradient(
      ellipse 60% 45% at 50% 55%,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(0, 0, 0, 0.02) 40%,
      transparent 70%
    );
    filter: blur(30px);
    animation: none; // No pulse in light mode - refined stillness
  }

  // Light mode: subtle teal glow above (inverted direction)
  &::after {
    top: auto;
    bottom: -80px;
    height: 100px;
    background: radial-gradient(
      ellipse 80% 60% at 50% 0%,
      rgba(26, 107, 125, 0.06) 0%,
      rgba(26, 107, 125, 0.02) 50%,
      transparent 100%
    );
    filter: blur(40px);
  }

  img {
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04);
  }
}

// Smooth breathing animation for ambient glow
@keyframes demo-glow-pulse {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

// -----------------------------------------------------------------------------
// Integrations Bar
// -----------------------------------------------------------------------------

.integrations-bar {
  text-align: center;
  padding: $space-6 0 $space-8;
  max-width: 900px;
  margin: 0 auto;
}

.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: $space-4;
  padding: 0 0 $space-8;

  @media (max-width: $bp-lg) {
    grid-template-columns: 1fr;
  }
}

.proof-card {
  padding: $space-5;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: $radius-xl;
  box-shadow: var(--shadow-sm);

  h3 {
    font-size: 1.25rem;
    margin: 0 0 $space-2;
  }

  p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.65;
  }
}

.proof-kicker {
  display: inline-block;
  margin-bottom: $space-2;
  font-family: $font-mono;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.integrations-label {
  font-family: $font-mono;
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: $space-5;
}

.integrations-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: $space-3;
}

.integration-item {
  display: flex;
  align-items: center;
  gap: $space-2;
  padding: $space-2 $space-4;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: $radius-full;
  font-family: $font-sans;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all $transition-fast;
  white-space: nowrap;

  &:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
}

.integration-icon {
  display: flex;
  align-items: center;
  color: var(--color-accent);

  svg {
    width: 18px;
    height: 18px;
  }
}

.integration-name {
  line-height: 1;
}

// -----------------------------------------------------------------------------
// How It Works (Steps)
// -----------------------------------------------------------------------------

.how-it-works {
  padding: $space-8 0;
  max-width: 1000px;
  margin: 0 auto;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: $space-5;

  @media (max-width: $bp-md) {
    grid-template-columns: 1fr;
    gap: $space-4;
  }
}

.step-card {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: $radius-xl;
  padding: $space-6;
  position: relative;
  transition: all $transition-base;

  &:hover {
    border-color: var(--color-accent);
    background: var(--color-bg-surface);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }

  h3 {
    font-family: $font-serif;
    font-size: 1.35rem;
    margin: $space-3 0 $space-2;
    color: var(--color-text-primary);
  }

  p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: $space-4;
    line-height: 1.6;
  }
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-accent);
  color: #fff;
  font-family: $font-mono;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: $radius-full;
}

.step-command {
  display: block;
  padding: $space-3 $space-4;
  background: var(--color-code-bg);
  border: 1px solid var(--color-code-border);
  border-radius: $radius-md;
  font-family: $font-mono;
  font-size: 0.85rem;
  color: var(--color-accent);
  word-break: break-all;
}

// -----------------------------------------------------------------------------
// Use Case Cards
// -----------------------------------------------------------------------------

.use-cases {
  padding: $space-8 0;
  max-width: 1100px;
  margin: 0 auto;
}

.use-case-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: $space-8;
  align-items: center;
  margin-bottom: $space-10;
  padding: $space-8;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: $radius-2xl;
  overflow: hidden;
  transition: border-color $transition-base;

  &:hover {
    border-color: var(--color-border-highlight);
  }

  &--reverse {
    direction: rtl;

    > * {
      direction: ltr;
    }
  }

  @media (max-width: $bp-lg) {
    grid-template-columns: 1fr;
    gap: $space-5;

    &--reverse {
      direction: ltr;
    }
  }

  @media (max-width: $bp-sm) {
    padding: $space-5;
  }
}

.use-case-label {
  display: inline-block;
  font-family: $font-mono;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-warm);
  margin-bottom: $space-3;
}

.use-case-content {
  min-width: 0; // prevent grid blowout from nowrap code blocks

  h3 {
    font-family: $font-serif;
    font-size: 1.75rem;
    margin: 0 0 $space-4;
    color: var(--color-text-primary);
    line-height: 1.2;

    @media (min-width: $bp-md) {
      font-size: 2rem;
    }
  }

  p {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: $space-5;
    max-width: none;
  }
}

.use-case-commands {
  display: flex;
  flex-direction: column;
  gap: $space-2;
  margin-bottom: $space-5;

  code {
    display: block;
    padding: $space-2 $space-4;
    background: var(--color-code-bg);
    border: 1px solid var(--color-code-border);
    border-radius: $radius-md;
    font-size: 0.8rem;
    color: var(--color-accent);
    overflow-x: auto;
    white-space: nowrap;

    @media (max-width: $bp-sm) {
      white-space: normal;
      word-break: break-all;
    }
  }
}

.use-case-link {
  font-family: $font-sans;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-accent);
  border: none;

  &:hover {
    color: var(--color-accent-hover);
  }
}

.use-case-visual {
  min-width: 0; // prevent grid blowout

  img {
    width: 100%;
    max-width: none;
    height: auto;
    border-radius: $radius-lg;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    margin: 0;
  }
}

// -----------------------------------------------------------------------------
// Section Titles
// -----------------------------------------------------------------------------

.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: $space-7;
  margin-top: $space-10; // Significantly increased top spacing
  color: var(--color-text-primary);
  font-family: $font-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-header {
  margin-bottom: $space-6;

  h1 {
    margin-bottom: $space-3;
  }
}

.page-lede {
  max-width: 760px;
  color: var(--color-text-secondary);
  font-size: 1.08rem;
  line-height: 1.7;
}

// -----------------------------------------------------------------------------
// Feature Cards
// -----------------------------------------------------------------------------

// Bento Grid - Asymmetric layout for visual interest
.features-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: $space-5;
  padding: $space-8 0;

  // Bento layout - varied card sizes
  .feature-card {
    // Default: 2 columns
    grid-column: span 2;

    // First card: Large (3 cols)
    &:nth-child(1) {
      grid-column: span 3;
      grid-row: span 2;

      .feature-card-icon {
        width: 72px;
        height: 72px;
        svg {
          width: 32px;
          height: 32px;
        }
      }
      .feature-card-title {
        font-size: 1.75rem;
      }
      .feature-card-description {
        font-size: 1.05rem;
      }
    }

    // Second card: Medium tall
    &:nth-child(2) {
      grid-column: span 3;
      grid-row: span 2;
    }

    // Third to sixth: 2 cols each
    &:nth-child(3),
    &:nth-child(4),
    &:nth-child(5),
    &:nth-child(6) {
      grid-column: span 2;
    }
  }

  // Tablet: 4 column grid
  @media (max-width: $bp-lg) {
    grid-template-columns: repeat(4, 1fr);

    .feature-card {
      grid-column: span 2;
      grid-row: span 1;

      &:nth-child(1),
      &:nth-child(2) {
        grid-column: span 2;
        grid-row: span 1;
        .feature-card-icon {
          width: 56px;
          height: 56px;
          svg {
            width: 24px;
            height: 24px;
          }
        }
        .feature-card-title {
          font-size: 1.35rem;
        }
        .feature-card-description {
          font-size: 0.95rem;
        }
      }
    }
  }

  // Mobile: Single column
  @media (max-width: $bp-sm) {
    grid-template-columns: 1fr;

    .feature-card,
    .feature-card:nth-child(1),
    .feature-card:nth-child(2),
    .feature-card:nth-child(3),
    .feature-card:nth-child(4),
    .feature-card:nth-child(5),
    .feature-card:nth-child(6) {
      grid-column: span 1;
      grid-row: span 1;
    }
  }
}

.feature-card {
  display: block;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: $radius-xl;
  padding: $space-6;
  transition: all $transition-base;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;

  // Gradient Border Effect on Hover
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(145deg, var(--color-accent), transparent 60%);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity $transition-base;
  }

  &:hover,
  &:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    background: var(--color-bg-surface);
    border-color: var(--color-border-highlight);
    &::after {
      opacity: 1;
    }

    .feature-card-icon {
      background: var(--color-accent);
      color: #fff;
      transform: scale(1.1) rotate(5deg);
      border-color: transparent;

      svg {
        color: #fff;
      }
    }
  }

  &-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: $radius-lg;
    margin-bottom: $space-5;
    color: var(--color-accent);
    transition: all $transition-bounce;

    svg {
      width: 24px;
      height: 24px;
      color: var(--color-accent);
      transition: color $transition-base;
    }
  }

  &-title {
    font-family: $font-serif;
    font-size: 1.35rem;
    margin-bottom: $space-2;
    color: var(--color-text-primary);
  }

  &-description {
    font-family: $font-sans;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
  }
}

// -----------------------------------------------------------------------------
// Sidebar Navigation
// -----------------------------------------------------------------------------

.sidebar-heading {
  font-family: $font-mono;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-tertiary);
  margin: $space-8 0 $space-3;
  display: flex;
  align-items: center;
  gap: $space-2;

  svg {
    width: 14px;
    height: 14px;
    color: var(--color-accent);
    opacity: 0.8;
  }
}

.sidebar-nav {
  list-style: none;

  a {
    display: block;
    padding: $space-2 $space-3;
    margin: 2px 0;
    font-family: $font-sans;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    border: none;
    border-radius: $radius-md;
    transition: all $transition-fast;

    &:hover {
      color: var(--color-text-primary);
      background: var(--color-bg-hover);
    }

    &.active {
      color: var(--color-accent);
      background: var(--color-accent-faint);
      font-weight: 500;
    }
  }
}

// -----------------------------------------------------------------------------
// Footer
// -----------------------------------------------------------------------------

.site-footer {
  background: var(--color-bg-subtle);
  border-top: 1px solid var(--color-border);
  padding: $space-8 $space-5;
  margin-top: auto;

  @media (min-width: $bp-lg) {
    margin-left: $sidebar-width;
  }
}

// Layout Fix: No margin on homepage and fullwidth pages
body.layout-home .site-footer,
body.layout-fullwidth .site-footer {
  margin-left: 0 !important;
}

.footer-inner {
  max-width: $content-max-width;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: $space-5;
  text-align: center;
}

.footer-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: $space-3;
  margin-bottom: $space-1;

  &-logo {
    display: flex;
    align-items: center;
    gap: $space-2;
    font-family: $font-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-text-primary);

    svg {
      width: 20px;
      height: 20px;
    }
  }
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: $space-3 $space-6;

  a {
    display: inline-flex;
    align-items: center;
    gap: $space-1;
    font-family: $font-sans;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color $transition-fast;
    border: none;

    svg {
      width: 16px;
      height: 16px;
    }

    &:hover {
      color: var(--color-text-primary);
    }
  }
}

.footer-meta {
  padding-top: $space-5;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  display: flex;
  justify-content: center;

  span {
    display: inline-flex;
    align-items: center;
    gap: $space-1;
  }

  .heart-icon {
    color: #ef4444;
    width: 14px;
    height: 14px;
  }

  a {
    color: var(--color-text-secondary);
    border: none;
    &:hover {
      color: var(--color-accent);
    }
  }
}

// -----------------------------------------------------------------------------
// Utilities
// -----------------------------------------------------------------------------

.hidden {
  display: none !important;
}
.text-center {
  text-align: center;
}

@media (max-width: $bp-md) {
  .hide-mobile {
    display: none !important;
  }
}

// Header Actions (Theme Toggle)
.header-actions {
  display: flex;
  gap: $space-2;
}

.theme-toggle {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  // Fix: Removed border
  border: none;
  border-radius: $radius-full;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all $transition-fast;

  &:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
  }

  .icon-sun {
    display: none;
  }
  .icon-moon {
    display: block;
  }

  [data-theme="light"] & {
    .icon-sun {
      display: block;
    }
    .icon-moon {
      display: none;
    }
  }
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: $space-2;
  color: var(--color-text-primary);

  @media (max-width: $bp-lg) {
    display: block;
  }
}

// Terminal-Style Code Blocks
// Only apply terminal chrome to div.highlight (outer container), not pre.highlight
div.highlight {
  background: var(--color-code-bg);
  border: 1px solid var(--color-code-border);
  border-radius: $radius-lg;
  margin: $space-5 0;
  position: relative;
  overflow: hidden;

  // Terminal window header
  &::before {
    content: "";
    display: block;
    height: 32px;
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-code-border);
    position: relative;
  }

  // Traffic light dots
  &::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 12px;
    width: 12px;
    height: 12px;
    background: #ff5f57;
    border-radius: 50%;
    box-shadow:
      20px 0 0 #febc2e,
      40px 0 0 #28c840;
  }

  // Inner pre should have no border/margin
  pre,
  pre.highlight {
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;

    // Remove pseudo-elements from nested pre.highlight
    &::before,
    &::after {
      display: none;
    }
  }
}

// Standalone pre.highlight (no wrapper div)
pre.highlight:not(div.highlight pre) {
  background: var(--color-code-bg);
  border: 1px solid var(--color-code-border);
  border-radius: $radius-lg;
  margin: $space-5 0;
}

// Inline code with subtle glow
code:not(pre code) {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: var(--color-accent-faint);
    border-radius: $radius-sm;
    z-index: -1;
    opacity: 0;
    transition: opacity $transition-fast;
  }

  &:hover::before {
    opacity: 1;
  }
}

// Copy Button (attached to pre via main.js)
.copy-btn {
  position: absolute;
  top: $space-3;
  right: $space-3;
  font-family: $font-mono;
  font-size: 0.75rem;
  padding: $space-1 $space-3;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: $radius-md;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.2s,
    background $transition-fast;
  z-index: 10;
  color: var(--color-text-secondary);

  pre:hover & {
    opacity: 1;
  }

  &:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
  }

  &.copied {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
  }
}

// -----------------------------------------------------------------------------
// Quick Start Section
// -----------------------------------------------------------------------------

.quickstart {
  padding: $space-8 0;
  max-width: 700px;
  margin: 0 auto;
}

.quickstart-content {
  .highlight {
    margin: 0;
  }

  .c {
    color: var(--color-text-tertiary);
  }
}

.quickstart-link {
  text-align: center;
  margin-top: $space-5;
  margin-bottom: 0;

  a {
    font-family: $font-sans;
    font-weight: 500;
    color: var(--color-accent);

    &:hover {
      color: var(--color-accent-hover);
    }
  }
}

// -----------------------------------------------------------------------------
// What's New Section
// -----------------------------------------------------------------------------

.whats-new {
  padding: $space-8 0;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.whats-new-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: $space-5;
  margin-top: $space-5;
}

.whats-new-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: $radius-lg;
  padding: $space-5;
  text-align: left;

  h3 {
    font-family: $font-serif;
    font-size: 1.15rem;
    color: var(--color-text-primary);
    margin: 0 0 $space-2 0;
  }

  p {
    font-family: $font-sans;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin: 0 0 $space-3 0;
    line-height: 1.5;
  }

  code {
    font-size: 0.85em;
    background: var(--color-bg-subtle);
    padding: 0.15em 0.35em;
    border-radius: $radius-sm;
  }

  a {
    font-family: $font-sans;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-accent);
    border: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.home-surface-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: $space-4;
  margin: $space-5 0 $space-8;

  @media (max-width: $bp-md) {
    grid-template-columns: 1fr;
  }
}

.home-surface-card {
  padding: $space-5;
  border-radius: $radius-xl;
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  box-shadow: var(--shadow-sm);

  h3 {
    margin: 0 0 $space-2;
    font-size: 1.35rem;
  }

  p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.65;
  }

  a {
    border: none;
  }
}

.home-surface-label {
  display: inline-block;
  margin-bottom: $space-2;
  font-family: $font-mono;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-warm);
}

.workspace-showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: $space-6;
  align-items: center;
  margin: $space-7 0;
  padding: $space-6;
  border-radius: $radius-2xl;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);

  @media (max-width: $bp-lg) {
    grid-template-columns: 1fr;
  }
}

.workspace-showcase--reverse {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

  @media (max-width: $bp-lg) {
    grid-template-columns: 1fr;
  }
}

.workspace-showcase-copy {
  min-width: 0;

  h3 {
    margin: 0 0 $space-3;
    font-size: 2rem;
  }

  p {
    margin: 0 0 $space-4;
    color: var(--color-text-secondary);
    line-height: 1.7;
  }

  ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--color-text-secondary);
    display: grid;
    gap: $space-2;
  }
}

.workspace-showcase-label {
  display: inline-block;
  margin-bottom: $space-2;
  font-family: $font-mono;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.workspace-showcase-visual img {
  width: 100%;
  max-width: none;
  margin: 0;
}

.signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: $space-4;
  margin: $space-5 0 $space-8;

  @media (max-width: $bp-md) {
    grid-template-columns: 1fr;
  }
}

.signal-card {
  padding: $space-5;
  border-radius: $radius-xl;
  border: 1px solid var(--color-border);
  background: rgba(15, 17, 21, 0.72);

  h3 {
    margin: 0 0 $space-2;
    font-size: 1.2rem;
  }

  p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.65;
  }
}

// -----------------------------------------------------------------------------
// Demos Section
// -----------------------------------------------------------------------------

.demos {
  padding: $space-8 0 $space-10;
  max-width: 1000px;
  margin: 0 auto;
}

.demo-full {
  margin-bottom: $space-8;
  text-align: center;

  h3 {
    font-family: $font-serif;
    font-size: 1.5rem;
    color: var(--color-text-primary);
    margin-bottom: $space-2;
    margin-top: 0;
  }

  p {
    font-family: $font-sans;
    color: var(--color-text-secondary);
    margin-bottom: $space-5;
    max-width: none;
  }

  img {
    width: 100%;
    max-width: 900px;
    height: auto;
    border-radius: $radius-lg;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
  }
}

// -----------------------------------------------------------------------------
// Accessibility
// -----------------------------------------------------------------------------

.skip-link {
  position: absolute;
  top: -100px;
  left: $space-4;
  padding: $space-3 $space-5;
  background: var(--color-accent);
  color: #fff;
  font-family: $font-sans;
  font-weight: 600;
  border-radius: $radius-md;
  z-index: 9999;
  transition: top $transition-fast;
  text-decoration: none;

  &:focus {
    top: $space-4;
    outline: 2px solid var(--color-warm);
    outline-offset: 2px;
  }
}

// Focus visible styles for keyboard navigation
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

// Remove default outline for mouse users
:focus:not(:focus-visible) {
  outline: none;
}

// Specific focus styles for interactive elements
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

// -----------------------------------------------------------------------------
// Mobile Menu (Hamburger)
// -----------------------------------------------------------------------------

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;

  span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-text-primary);
    border-radius: 2px;
    transition: all $transition-fast;
  }
}

.mobile-menu-toggle.active .hamburger {
  span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  span:nth-child(2) {
    opacity: 0;
  }
  span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

// Sidebar Overlay (mobile)
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 40;
  opacity: 0;
  transition: opacity $transition-base;

  @media (max-width: $bp-lg) {
    display: block;
    pointer-events: none;

    &.visible {
      opacity: 1;
      pointer-events: auto;
    }
  }
}

// -----------------------------------------------------------------------------
// FAQ Styles
// -----------------------------------------------------------------------------

.faq-item {
  margin-bottom: $space-3;
  border: 1px solid var(--color-border);
  border-radius: $radius-lg;
  overflow: hidden;
  transition: border-color $transition-fast;

  &[open] {
    border-color: var(--color-accent);
  }
}

.faq-question {
  display: block;
  padding: $space-4 $space-5;
  font-family: $font-sans;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text-primary);
  background: var(--color-bg-subtle);
  cursor: pointer;
  list-style: none;
  transition: background $transition-fast;

  &::-webkit-details-marker {
    display: none;
  }

  &::before {
    content: "+";
    display: inline-block;
    width: 1.5em;
    font-family: $font-mono;
    color: var(--color-accent);
  }

  details[open] &::before {
    content: "−";
  }

  &:hover {
    background: var(--color-bg-hover);
  }
}

.faq-answer {
  padding: $space-4 $space-5;
  padding-left: calc($space-5 + 1.5em);
  font-family: $font-sans;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  background: var(--color-bg-base);

  code {
    font-size: 0.85em;
  }
}

// -----------------------------------------------------------------------------
// Feature Page Styles
// -----------------------------------------------------------------------------

.feature-page {
  max-width: 800px;
  margin: 0 auto;
}

.feature-header {
  text-align: center;
  padding: $space-8 0 $space-6;
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto $space-4;
  background: var(--color-accent-faint);
  border: 1px solid var(--color-accent);
  border-radius: $radius-xl;

  svg {
    width: 40px;
    height: 40px;
    color: var(--color-accent);
  }
}

.feature-title {
  font-family: $font-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: $space-4;
  background: linear-gradient(
    180deg,
    var(--color-text-primary) 20%,
    var(--color-text-secondary) 150%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  @media (min-width: $bp-md) {
    font-size: 3rem;
  }
}

.feature-description {
  font-size: 1.25rem;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

.feature-benefits,
.feature-commands,
.feature-cta {
  margin: $space-8 0;
  padding: $space-6;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: $radius-xl;
}

.benefits-list {
  list-style: none;
  padding: 0;
  margin: $space-4 0 0;

  li {
    position: relative;
    padding-left: $space-6;
    margin-bottom: $space-3;
    font-size: 1rem;
    color: var(--color-text-secondary);

    &::before {
      content: "✓";
      position: absolute;
      left: 0;
      color: var(--color-accent);
      font-weight: 600;
    }
  }
}

.commands-grid {
  display: flex;
  flex-direction: column;
  gap: $space-3;
  margin-top: $space-4;
}

.command-example {
  display: block;
  padding: $space-3 $space-4;
  background: var(--color-code-bg);
  border: 1px solid var(--color-code-border);
  border-radius: $radius-md;
  font-family: $font-mono;
  font-size: 0.9rem;
  color: var(--color-accent);
}

.feature-cta {
  text-align: center;

  h2 {
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
  }

  p {
    max-width: none;
    margin-bottom: $space-5;
  }
}

.other-features {
  margin-top: $space-10;
  padding-top: $space-8;
  border-top: 1px solid var(--color-border);

  h2 {
    text-align: center;
    margin-bottom: $space-6;
  }
}

// -----------------------------------------------------------------------------
// Breadcrumbs
// -----------------------------------------------------------------------------

.breadcrumbs {
  margin-bottom: $space-6;
  padding-bottom: $space-4;
  border-bottom: 1px solid var(--color-border-subtle);
}

.breadcrumbs-list {
  display: flex;
  align-items: center;
  gap: $space-2;
  list-style: none;
  font-family: $font-sans;
  font-size: 0.875rem;
}

.breadcrumbs-item {
  display: flex;
  align-items: center;
  gap: $space-2;

  &:not(:last-child)::after {
    content: "/";
    color: var(--color-text-tertiary);
    margin-left: $space-2;
  }
}

.breadcrumbs-link {
  display: flex;
  align-items: center;
  gap: $space-1;
  color: var(--color-text-secondary);
  border: none;
  transition: color $transition-fast;

  svg {
    flex-shrink: 0;
  }

  &:hover {
    color: var(--color-accent);
  }
}

.breadcrumbs-current {
  color: var(--color-text-primary);
  font-weight: 500;
}

// -----------------------------------------------------------------------------
// Table of Contents
// -----------------------------------------------------------------------------

.toc {
  margin-bottom: $space-6;
  padding: $space-5;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: $radius-lg;
}

.toc-title {
  font-family: $font-mono;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-tertiary);
  margin: 0 0 $space-3;
  padding: 0;
  border: none;
}

.toc-content {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    margin: $space-1 0;
  }

  a {
    display: block;
    font-family: $font-sans;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    padding: $space-1 $space-2;
    border-radius: $radius-sm;
    border: none;
    transition: all $transition-fast;

    &:hover {
      color: var(--color-text-primary);
      background: var(--color-bg-hover);
    }
  }

  // Nested lists (h3s)
  ul ul {
    padding-left: $space-4;

    a {
      font-size: 0.8rem;
      color: var(--color-text-tertiary);
    }
  }
}

// Markdown-generated TOC (via {:toc})
#markdown-toc {
  list-style: none;
  padding: 0;
  margin: 0;

  li {
    margin: $space-1 0;
  }

  a {
    font-family: $font-sans;
    font-size: 0.875rem;
    color: var(--color-text-secondary);

    &:hover {
      color: var(--color-accent);
    }
  }

  ul {
    list-style: none;
    padding-left: $space-4;
    margin: $space-1 0;
  }
}

// -----------------------------------------------------------------------------
// Related Docs (Internal Linking)
// -----------------------------------------------------------------------------

.related-docs {
  margin-top: $space-10;
  padding-top: $space-8;
  border-top: 1px solid var(--color-border);
}

.related-docs-title {
  font-family: $font-serif;
  font-size: 1.25rem;
  color: var(--color-text-primary);
  margin-bottom: $space-5;
  padding-bottom: 0;
  border-bottom: none;
}

.related-docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: $space-4;
}

.related-docs-card {
  display: flex;
  flex-direction: column;
  gap: $space-1;
  padding: $space-5;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: $radius-lg;
  text-decoration: none;
  transition: all $transition-base;

  &:hover {
    background: var(--color-bg-surface);
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}

.related-docs-icon {
  font-size: 1.5rem;
  margin-bottom: $space-2;
}

.related-docs-label {
  font-family: $font-sans;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.related-docs-desc {
  font-family: $font-sans;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

// -----------------------------------------------------------------------------
// Scroll-Triggered Entrance Animations
// -----------------------------------------------------------------------------
// Only hide elements when JS is confirmed loaded (via html.js class)
// This prevents invisible content when JS fails to load

html.js {
  // Elements start hidden and animate in
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.6s ease-out,
      transform 0.6s ease-out;

    &.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
  }

  // Staggered animation for grid items
  .features-grid .feature-card {
    opacity: 0;
    transform: translateY(30px);
    transition:
      opacity 0.5s ease-out,
      transform 0.5s ease-out;

    &.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    // Stagger delays
    @for $i from 1 through 6 {
      &:nth-child(#{$i}).is-visible {
        transition-delay: #{($i - 1) * 0.1}s;
      }
    }
  }

  // Step cards stagger
  .steps-grid .step-card {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.5s ease-out,
      transform 0.5s ease-out;

    &.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    @for $i from 1 through 3 {
      &:nth-child(#{$i}).is-visible {
        transition-delay: #{($i - 1) * 0.15}s;
      }
    }
  }

  // Use case cards slide in
  .use-case-card {
    opacity: 0;
    transform: translateY(30px);
    transition:
      opacity 0.6s ease-out,
      transform 0.6s ease-out;

    &.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
  }

  // Integration items stagger
  .integration-item {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.3s ease-out,
      transform 0.3s ease-out;

    &.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    @for $i from 1 through 10 {
      &:nth-child(#{$i}).is-visible {
        transition-delay: #{($i - 1) * 0.05}s;
      }
    }
  }

  // Demo sections fade in
  .demo-full {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.6s ease-out,
      transform 0.6s ease-out;

    &.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
  }

  // Section titles slide in
  .section-title {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.5s ease-out,
      transform 0.5s ease-out;

    &.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

// -----------------------------------------------------------------------------
// Reduced Motion Support
// -----------------------------------------------------------------------------

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero::before,
  .hero::after,
  .hero-aurora,
  .hero-title {
    animation: none !important;
  }

  // Show all animated elements immediately
  .animate-on-scroll,
  .features-grid .feature-card,
  .steps-grid .step-card,
  .use-case-card,
  .integration-item,
  .demo-full,
  .section-title {
    opacity: 1 !important;
    transform: none !important;
  }

  .feature-card:hover,
  .feature-card:focus-visible {
    transform: none;
    .feature-card-icon {
      transform: none;
    }
  }

  .btn:hover {
    transform: none;
  }

  .related-docs-card:hover {
    transform: none;
  }
}

// -----------------------------------------------------------------------------
// Print Styles
// -----------------------------------------------------------------------------

@media print {
  .site-header,
  .sidebar,
  .site-footer,
  .hero-demo,
  .demos,
  .hero-actions,
  .theme-toggle,
  .mobile-menu-toggle,
  .copy-btn,
  .skip-link,
  .breadcrumbs,
  .related-docs,
  .sidebar-overlay {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
  }

  .site-main {
    margin-left: 0 !important;
    padding-top: 0 !important;
  }

  .content {
    max-width: 100%;
    padding: 0;
  }

  a {
    color: #000 !important;
    text-decoration: underline;

    &[href^="http"]::after {
      content: " (" attr(href) ")";
      font-size: 0.8em;
      color: #666;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    page-break-after: avoid;
    color: #000 !important;
  }

  pre,
  code {
    background: #f5f5f5 !important;
    border-color: #ccc !important;
  }

  img {
    max-width: 100% !important;
  }
}

// -----------------------------------------------------------------------------
// Image Lightbox
// -----------------------------------------------------------------------------

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity $transition-base,
    visibility $transition-base;

  &.open {
    opacity: 1;
    visibility: visible;

    .lightbox-content {
      transform: scale(1);
    }
  }
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lightbox-content {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
  transform: scale(0.95);
  transition: transform $transition-base;
}

.lightbox-img {
  display: block;
  max-width: 95vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: $radius-lg;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

.lightbox-close {
  position: absolute;
  top: -$space-6;
  right: -$space-6;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: $radius-full;
  color: var(--color-text-primary);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all $transition-fast;
  box-shadow: var(--shadow-md);

  &:hover {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
    transform: scale(1.1);
  }

  @media (max-width: $bp-sm) {
    top: $space-4;
    right: $space-4;
  }
}
