/* DevTactics — Shared site enhancements v2
 *
 * Advanced CSS features in use:
 *   - CSS custom properties + @property typed properties
 *   - Container queries
 *   - Scroll-driven animations (animation-timeline: scroll())
 *   - Backdrop-filter glassmorphism
 *   - 3D transforms + perspective
 *   - conic-gradient / radial-gradient border effects
 *   - :has() contextual selectors
 */

/* --------------------------------------------------------------------------
 * Design tokens
 * -------------------------------------------------------------------------- */
:root {
  --bg: #0c0e13;
  --bg-low: #111319;
  --bg-lowest: #050608;
  --bg-high: #282a30;
  --bg-highest: #33353b;
  --accent: #E6EFB6;
  --accent-rgb: 230, 239, 182;
  --text: #e2e2ea;
  --text-variant: #c9c5cd;
  --outline: rgba(146, 143, 151, 0.3);
  --outline-strong: rgba(230, 239, 182, 0.4);
  --purple: #c8c3db;
  --purple-rgb: 200, 195, 219;
  --amber: #d6c5a0;
  --amber-rgb: 214, 197, 160;
  --gutter: 32px;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

@property --glow-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --spotlight-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}


/* --------------------------------------------------------------------------
 * Modern CSS (2026) — view transitions, content-visibility, balancing
 * -------------------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}

@supports not (view-transition-name: none) {
  @view-transition { navigation: auto; }
}

.text-balance {
  text-wrap: balance;
}
.tabular-nums {
  font-variant-numeric: tabular-nums;
}
.content-visibility-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}
.contain-paint {
  contain: layout paint;
}

/* Optional: granular view-transition names for hero elements */
.hero-title {
  view-transition-name: hero-title;
}
.hero-subtitle {
  view-transition-name: hero-subtitle;
}

/* --------------------------------------------------------------------------
 * Ambient atmosphere
 * -------------------------------------------------------------------------- */
.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
.orb-1 {
  width: 360px;
  height: 360px;
  background: #E6EFB6;
  top: -120px;
  right: -80px;
  animation: float 14s ease-in-out infinite;
}
.orb-2 {
  width: 260px;
  height: 260px;
  background: #c8c3db;
  bottom: 80px;
  left: -100px;
  animation: float 16s ease-in-out infinite reverse;
  animation-delay: -4s;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-24px, 18px); }
}
.grid-drift {
  animation: gridDrift 24s linear infinite;
}
@keyframes gridDrift {
  0% { background-position: 0 0; }
  100% { background-position: 0 40px; }
}
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* --------------------------------------------------------------------------
 * Neural WebGL canvas
 * -------------------------------------------------------------------------- */
#neural-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: auto;
}
.hero-webgl {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-webgl::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, var(--bg) 85%);
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------------------------------------------
 * Cursor / typing
 * -------------------------------------------------------------------------- */
.cursor-blink {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: #E6EFB6;
  margin-left: 2px;
  animation: blink 1s step-end infinite;
  vertical-align: middle;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* --------------------------------------------------------------------------
 * Interaction
 * -------------------------------------------------------------------------- */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 28px rgba(230, 239, 182, 0.08);
  border-color: rgba(230, 239, 182, 0.45);
}
.btn-lift {
  transition: transform 0.2s ease, filter 0.2s ease;
}
.btn-lift:hover {
  transform: translateY(-2px);
}
.link-glow {
  transition: text-shadow 0.2s ease, color 0.15s ease;
}
.link-glow:hover {
  text-shadow: 0 0 12px rgba(230, 239, 182, 0.45);
}
.magnetic {
  transition: transform 0.15s ease-out;
  will-change: transform;
}

/* --------------------------------------------------------------------------
 * Scroll reveals
 * -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stagger-1, .stagger-2, .stagger-3, .stagger-4, .stagger-5, .stagger-6 {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
 * Marquee
 * -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
}
.marquee-track {
  display: inline-flex;
  animation: marquee 35s linear infinite;
}
.marquee-item {
  min-width: 180px;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
 * Mobile menu
 * -------------------------------------------------------------------------- */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  cursor: pointer;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #e2e2ea;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.hamburger.open span:first-child {
  transform: translateY(6px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:last-child {
  transform: translateY(-6px) rotate(-45deg);
}
.mobile-menu {
  display: none;
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  background: rgba(12, 14, 19, 0.98);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(146, 143, 151, 0.3);
  padding: 20px 32px;
  flex-direction: column;
  gap: 16px;
  z-index: 40;
}
.mobile-menu.open {
  display: flex;
}
.mobile-menu a {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #e2e2ea;
}
.mobile-menu a:hover,
.mobile-menu a.active {
  color: #E6EFB6;
}
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
 * Live feed indicators
 * -------------------------------------------------------------------------- */
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E6EFB6;
  box-shadow: 0 0 0 0 rgba(230, 239, 182, 0.5);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(230, 239, 182, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(230, 239, 182, 0); }
  100% { box-shadow: 0 0 0 0 rgba(230, 239, 182, 0); }
}
.status-cycle {
  animation: statusFade 8s ease-in-out infinite;
}
@keyframes statusFade {
  0%, 30% { opacity: 1; }
  33%, 63% { opacity: 0; }
  66%, 100% { opacity: 1; }
}

/* --------------------------------------------------------------------------
 * Advanced utilities (AI-first aesthetic)
 * -------------------------------------------------------------------------- */
.text-gradient-lime {
  background: linear-gradient(135deg, #E6EFB6 0%, #d6c5a0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-purple {
  background: linear-gradient(135deg, #c8c3db 0%, #E6EFB6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Mouse-following glow card */
.glow-card {
  position: relative;
  background: var(--bg-low);
  overflow: hidden;
  --glow-x: 50%;
  --glow-y: 50%;
  --spotlight-opacity: 0;
  transition: --spotlight-opacity 0.3s ease;
}
.glow-card::before {
  content: '';
  position: absolute;
  top: var(--glow-y);
  left: var(--glow-x);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(230,239,182,0.15) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: var(--spotlight-opacity);
  transition: opacity 0.3s ease;
}
.glow-card:hover {
  --spotlight-opacity: 1;
}

/* Holographic sheen */
.holo-card {
  position: relative;
  overflow: hidden;
  background: var(--bg-low);
}
.holo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(230, 239, 182, 0.05) 40%,
    rgba(200, 195, 219, 0.08) 50%,
    rgba(230, 239, 182, 0.05) 60%,
    transparent 80%
  );
  transform: translateX(-100%);
  transition: transform 0.8s ease;
  pointer-events: none;
}
.holo-card:hover::after {
  transform: translateX(100%);
}

/* 3D tilt card */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  will-change: transform;
}
.tilt-card .tilt-content {
  transform: translateZ(20px);
}

/* --------------------------------------------------------------------------
 * Scroll-driven section reveals (progressive disclosure)
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .scroll-reveal {
    animation: scroll-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  @keyframes scroll-reveal {
    from { opacity: 0; transform: translateY(40px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .scroll-fade-in {
    animation: scroll-fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
  }
  @keyframes scroll-fade-in {
    from { opacity: 0; filter: blur(8px); }
    to { opacity: 1; filter: blur(0); }
  }
}

/* --------------------------------------------------------------------------
 * Data stream / agentic decorative elements
 * -------------------------------------------------------------------------- */
.data-stream {
  position: relative;
  overflow: hidden;
}
.data-stream::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: data-stream 3s linear infinite;
}
@keyframes data-stream {
  0% { left: -100%; }
  100% { left: 100%; }
}

.agent-node {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(230, 239, 182, 0.6);
  animation: agent-pulse 2.5s ease-in-out infinite;
}
@keyframes agent-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

/* --------------------------------------------------------------------------
 * Container queries for cards
 * -------------------------------------------------------------------------- */
.card-container {
  container-type: inline-size;
  container-name: card;
}
@container card (min-width: 400px) {
  .card-container .card-inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* --------------------------------------------------------------------------
 * Utility: clamped fluid display
 * -------------------------------------------------------------------------- */
.display-fluid {
  font-size: clamp(36px, 8vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.headline-fluid {
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
 * Scanline / CRT details
 * -------------------------------------------------------------------------- */
.scanline {
  width: 100%;
  height: 2px;
  background: rgba(230, 239, 182, 0.1);
  position: absolute;
  animation: scan 4s linear infinite;
}
@keyframes scan {
  0% { top: 0; }
  100% { top: 100%; }
}


/* --------------------------------------------------------------------------
 * Agent topology v2 — full-bleed interactive WebGL + modern CSS (2026)
 * -------------------------------------------------------------------------- */
@property --topology-rot-x {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@property --topology-rot-y {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@property --topology-glow {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --topology-scan {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.agent-topology-v2 {
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  container-type: size;
  container-name: agent-topology;
  border-block: 1px solid var(--outline);
  background: color-mix(in srgb, var(--bg-lowest) 65%, var(--bg));
  view-transition-name: agent-topology-section;
  --topology-glow: 0;
  --topology-scan: 0%;

  & .topology-canvas-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.8s var(--ease-out-expo);
    pointer-events: auto;
  }

  & .topology-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 0%, var(--bg) 80%);
  }

  & .topology-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    opacity: 1;
    transition: opacity 0.6s ease;
    pointer-events: none;

    & .topology-fallback-svg {
      width: min(420px, 80vw);
      height: auto;
      overflow: visible;
    }
    & .topology-fallback-ring {
      fill: none;
      stroke: rgba(230, 239, 182, 0.12);
      stroke-width: 1;
    }
    & .topology-fallback-link {
      fill: none;
      stroke: rgba(230, 239, 182, 0.15);
      stroke-width: 1;
      stroke-dasharray: 4 4;
      animation: topology-linkDash 1.5s linear infinite;
    }
    & .topology-fallback-node {
      fill: #0c0e13;
      stroke: #E6EFB6;
      stroke-width: 1;
      animation: topology-nodePulse 2.5s ease-in-out infinite;
    }
    & .topology-fallback-node.core {
      fill: #E6EFB6;
      stroke: none;
      filter: drop-shadow(0 0 8px rgba(230, 239, 182, 0.4));
    }
    & .topology-fallback-label {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 9px;
      fill: #E6EFB6;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-shadow: 0 0 8px rgba(12, 14, 19, 0.8);
    }
  }

  & .topology-detail {
    position: relative;
    z-index: 10;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid color-mix(in srgb, var(--outline), var(--accent) 20%);
    background: color-mix(in srgb, var(--bg-low) 94%, transparent);
    backdrop-filter: blur(14px);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;

    & .topology-detail-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-bottom: 1px solid var(--outline);
      background: color-mix(in srgb, var(--accent) 5%, transparent);
    }
    & .topology-detail-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 0 rgba(230, 239, 182, 0.5);
      animation: topology-dotPulse 2s ease-in-out infinite;
    }
    & .topology-detail-body {
      padding: 20px 24px;
    }
    & .topology-detail-name {
      font-size: clamp(24px, 4vw, 32px);
      line-height: 1.1;
      letter-spacing: -0.02em;
    }
    & .topology-detail-role {
      letter-spacing: 0.08em;
    }
    & .topology-detail-desc {
      line-height: 1.6;
      margin-bottom: 16px;
    }
    & .topology-detail-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      list-style: none;
      padding: 0;
      margin: 0;
    }
    & .topology-detail-meta-item {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-variant);
      border: 1px solid var(--outline);
      padding: 4px 8px;
      background: color-mix(in srgb, var(--accent) 4%, transparent);
    }
  }

  & .topology-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -120%);
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--outline), var(--accent) 40%);
    background: color-mix(in srgb, var(--bg-low) 96%, transparent);
    backdrop-filter: blur(10px);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: opacity 0.2s ease;
    white-space: nowrap;
  }

  /* Let the WebGL canvas receive pointer events through the gaps between content columns, while keeping text, links, buttons, and the detail panel interactive. */
  & .max-w-container-max {
    pointer-events: none;
  }
  & .max-w-container-max .reveal,
  & .max-w-container-max .topology-detail,
  & .max-w-container-max a,
  & .max-w-container-max button {
    pointer-events: auto;
  }
}

/* WebGL-ready state hides the static fallback */
.agent-topology-v2.webgl-ready .topology-canvas-wrap {
  opacity: 1;
}
.agent-topology-v2.webgl-ready .topology-fallback {
  opacity: 0;
  pointer-events: none;
}

/* :has() contextual styling: when a node is selected, lift the detail panel glow */
.agent-topology-v2:has(.topology-detail[data-active]) {
  --topology-glow: 1;
}
.agent-topology-v2:has(.topology-canvas-wrap:hover) .topology-detail {
  border-color: color-mix(in srgb, var(--outline), var(--accent) 55%);
  box-shadow: 0 0 28px rgba(230, 239, 182, 0.08);
}

/* Container query adjustments for the section shape */
@container agent-topology (min-width: 700px) {
  .agent-topology-v2 .topology-detail {
    margin-left: 0;
  }
}
@container agent-topology (min-height: 700px) {
  .agent-topology-v2 .topology-detail {
    margin-top: 12vh;
  }
}

/* Scroll-driven entrance animation */
@media (prefers-reduced-motion: no-preference) {
  .agent-topology-v2 {
    animation: topology-reveal 1s linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  @keyframes topology-reveal {
    from { opacity: 0; transform: translateY(40px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* Reduced motion: show the static fallback, silence the canvas */
@media (prefers-reduced-motion: reduce) {
  .agent-topology-v2 .topology-canvas-wrap { display: none !important; }
  .agent-topology-v2 .topology-fallback { opacity: 1 !important; pointer-events: auto; }
  .agent-topology-v2 .topology-fallback-link,
  .agent-topology-v2 .topology-fallback-node { animation: none; }
}

@keyframes topology-linkDash { to { stroke-dashoffset: -8; } }
@keyframes topology-nodePulse { 0%, 100% { filter: drop-shadow(0 0 0 rgba(230, 239, 182, 0.4)); } 50% { filter: drop-shadow(0 0 8px rgba(230, 239, 182, 0)); } }
@keyframes topology-dotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(230, 239, 182, 0.5); } 70% { box-shadow: 0 0 0 6px rgba(230, 239, 182, 0); } }

/* Make sure the canvas element itself fills the wrap */
#topology-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Mobile: keep the panel readable over the full-bleed canvas/fallback */
@media (max-width: 768px) {
  .agent-topology-v2 {
    min-height: auto;
  }
  .agent-topology-v2 .topology-detail {
    margin-top: 24px;
  }
}

/* --------------------------------------------------------------------------
 * Section redesigns v3 — capabilities, process, testimonials, trust, CTA
 * -------------------------------------------------------------------------- */
@property --cap-glow {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --process-progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* Capability constellation */
.capability-v2 {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  container-name: capability-v2;
}
.capability-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: auto;
}
.capability-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.6s ease;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 0%, var(--bg) 70%);
}
.capability-fallback-grid {
  position: relative;
  width: 100%;
  height: 100%;
}
.capability-fallback-node {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent);
  box-shadow: 0 0 12px rgba(230, 239, 182, 0.3);
  animation: cap-nodePulse 2.5s ease-in-out infinite;
}
.capability-fallback-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.capability-fallback-links line {
  stroke: rgba(230, 239, 182, 0.12);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  animation: cap-linkDash 1.5s linear infinite;
}
.capability-v2.webgl-ready .capability-canvas { opacity: 1; }
.capability-v2.webgl-ready .capability-fallback { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .capability-canvas { display: none !important; }
  .capability-fallback { opacity: 1 !important; }
  .capability-fallback-node,
  .capability-fallback-links line { animation: none; }
}
@keyframes cap-nodePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(230, 239, 182, 0.3); } 50% { box-shadow: 0 0 0 8px rgba(230, 239, 182, 0); } }
@keyframes cap-linkDash { to { stroke-dashoffset: -8; } }

.capability-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(1, 1fr);
  position: relative;
  z-index: 10;
}
@media (min-width: 768px) {
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
}
@container capability-v2 (min-width: 900px) {
  .capability-grid { gap: 32px; }
}
.capability-card {
  position: relative;
  background: color-mix(in srgb, var(--bg-low) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--outline), var(--accent) 15%);
  padding: 28px;
  transform-style: preserve-3d;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  --glow-x: 50%;
  --glow-y: 50%;
  --spotlight-opacity: 0;
}
.capability-card:hover {
  border-color: color-mix(in srgb, var(--outline), var(--accent) 55%);
  box-shadow: 0 0 32px rgba(230, 239, 182, 0.08);
  --spotlight-opacity: 1;
}
.capability-card::before {
  content: '';
  position: absolute;
  top: var(--glow-y);
  left: var(--glow-x);
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(230, 239, 182, 0.12) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: var(--spotlight-opacity);
  transition: opacity 0.3s ease;
}
@container capability-v2 (min-width: 600px) {
  .capability-card { padding: 36px; }
}
.capability-card .tilt-content { transform: translateZ(24px); }
.capability-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.capability-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-variant);
}
.capability-list li::before {
  content: '>';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.capability-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid color-mix(in srgb, var(--outline), var(--accent) 30%);
  padding: 4px 8px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* Process pipeline */
.process-v2 {
  container-type: inline-size;
  container-name: process-v2;
}
.process-layout {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  align-items: start;
}
.process-rail {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: fit-content;
  padding: 24px 0;
}
.process-line {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--outline);
  overflow: hidden;
  z-index: 0;
}
.process-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--accent), transparent);
  transform-origin: top;
  transform: scaleY(0);
}
@supports (animation-timeline: scroll()) {
  .process-line-fill {
    animation: process-fill linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 80%;
  }
}
@keyframes process-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .process-line-fill { animation: none !important; transform: scaleY(1) !important; }
}
.process-markers {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 8vh, 72px);
  position: relative;
  z-index: 2;
}
.process-marker {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--outline);
  background: var(--bg-low);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-variant);
  transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}
.process-marker:hover,
.process-marker:focus-visible,
.process-marker.active {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 16px rgba(230, 239, 182, 0.15);
}
@supports selector(:has(*)) {
  .process-layout:has(.process-panel:nth-child(1):hover) .process-marker:nth-child(1),
  .process-layout:has(.process-panel:nth-child(1):focus-within) .process-marker:nth-child(1),
  .process-layout:has(.process-panel:nth-child(2):hover) .process-marker:nth-child(2),
  .process-layout:has(.process-panel:nth-child(2):focus-within) .process-marker:nth-child(2),
  .process-layout:has(.process-panel:nth-child(3):hover) .process-marker:nth-child(3),
  .process-layout:has(.process-panel:nth-child(3):focus-within) .process-marker:nth-child(3) {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 16px rgba(230, 239, 182, 0.15);
  }
}
.process-panels {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.process-panel {
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 0 32px 24px;
  border-left: 2px solid transparent;
  transition: border-left-color 0.3s ease;
}
.process-panel.active { border-left-color: var(--accent); }
.process-panel:hover,
.process-panel.panel-active {
  border-left-color: var(--accent);
  background: linear-gradient(90deg, rgba(230, 239, 182, 0.04) 0%, transparent 40%);
}
.process-panel:hover .process-step-no,
.process-panel.panel-active .process-step-no {
  color: rgba(230, 239, 182, 0.5);
}
.process-panel:hover .process-deliverables li,
.process-panel.panel-active .process-deliverables li {
  border-color: color-mix(in srgb, var(--outline), var(--accent) 30%);
}
.process-panel-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.process-step-no {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 32px;
  font-weight: 700;
  color: rgba(230, 239, 182, 0.15);
  line-height: 1;
}
.process-deliverables {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.process-deliverables li {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-variant);
  border: 1px solid var(--outline);
  padding: 6px 10px;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.process-output {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.process-output li {
  position: relative;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-variant);
}
.process-output li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
}
.process-output-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 8px;
}
@media (max-width: 768px) {
  .process-layout { grid-template-columns: 48px 1fr; gap: 16px; }
  .process-step-no { font-size: 24px; }
  .process-panel { padding: 24px 0; min-height: auto; }
  .process-markers { gap: 48px; }
  .process-rail { top: 80px; }
}
@container process-v2 (min-width: 900px) {
  .process-layout { grid-template-columns: 80px 1fr; gap: 48px; }
  .process-panel { padding-left: 48px; }
}

/* Testimonial wall */
.testimonial-v2 {
  container-type: inline-size;
  container-name: testimonial-v2;
}
.testimonial-wall {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(1, 1fr);
}
@container testimonial-v2 (min-width: 700px) {
  .testimonial-wall { grid-template-columns: repeat(2, 1fr); }
}
.testimonial-card {
  position: relative;
  background: color-mix(in srgb, var(--bg-lowest) 70%, var(--bg));
  border: 1px solid var(--outline);
  padding: 32px;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.4s ease, border-color 0.3s ease;
}
.testimonial-card:hover {
  transform: perspective(1000px) rotateY(4deg) rotateX(-2deg) scale(1.01);
  border-color: color-mix(in srgb, var(--outline), var(--accent) 40%);
}
.testimonial-card blockquote {
  margin: 0;
  text-wrap: balance;
}
.testimonial-wave {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 24px;
  margin-bottom: 24px;
}
.testimonial-wave span {
  width: 4px;
  background: color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 2px;
  animation: wave 1.2s ease-in-out infinite;
}
.testimonial-wave span:nth-child(1) { height: 40%; animation-delay: 0s; }
.testimonial-wave span:nth-child(2) { height: 70%; animation-delay: 0.1s; }
.testimonial-wave span:nth-child(3) { height: 100%; animation-delay: 0.2s; }
.testimonial-wave span:nth-child(4) { height: 60%; animation-delay: 0.3s; }
.testimonial-wave span:nth-child(5) { height: 80%; animation-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .testimonial-wave span { animation: none; }
  .testimonial-card:hover { transform: none; }
}
@keyframes wave { 0%, 100% { transform: scaleY(0.6); } 50% { transform: scaleY(1); } }

/* Trust grid */
.trust-v2 {
  container-type: inline-size;
  container-name: trust-v2;
}
.trust-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(1, 1fr);
}
@container trust-v2 (min-width: 800px) {
  .trust-grid { grid-template-columns: 1.5fr 1fr; }
}
.trust-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.trust-pillars {
  overflow: hidden;
}
.trust-pillar {
  transition: background-color 0.2s ease;
}
.trust-pillar:hover {
  background-color: color-mix(in srgb, var(--accent) 5%, var(--bg)) !important;
}
.trust-pillar-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--accent);
  margin-bottom: 12px;
}

/* Marquee enhancements */
.marquee-track {
  mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}
@supports not (mask-image: linear-gradient(90deg, transparent, black)) {
  .marquee-track {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* CTA */
.cta-v2 {
  position: relative;
  background: var(--bg-low);
  border-block: 1px solid var(--outline);
}
.cta-v2 > .max-w-container-max {
  padding: 64px 32px;
}
@media (max-width: 768px) {
  .cta-v2 > .max-w-container-max { padding: 48px 24px; }
}

/* --------------------------------------------------------------------------
 * Scroll-aware navigation blur
 * -------------------------------------------------------------------------- */
body > nav,
nav[role="navigation"],
nav.sticky {
  background-color: rgba(12, 14, 19, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
body > nav.nav-scrolled,
nav[role="navigation"].nav-scrolled,
nav.sticky.nav-scrolled {
  background-color: rgba(12, 14, 19, 0.92);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  border-color: rgba(230, 239, 182, 0.22);
}
@media (prefers-reduced-motion: reduce) {
  body > nav,
  nav[role="navigation"],
  nav.sticky {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
 * Sticky footer: keep footer at the bottom even on short pages
 * -------------------------------------------------------------------------- */
html, body {
  min-height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
body > main {
  flex: 1 0 auto;
}
body > footer {
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
 * Shared footer utilities — the footer markup is identical on every page and
 * relies on these classes; index.html also carries them inline.
 * -------------------------------------------------------------------------- */
.flex-wrap{flex-wrap:wrap}
.gap-sm{gap:12px}
.grid-cols-3{grid-template-columns:repeat(3,1fr)}
.icon-deco{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:0.02em;cursor:default}
.max-w-sm{max-width:384px}
.pt-lg{padding-top:32px}
.pl-sm{padding-left:12px}
.border-outline-variant\/30{border-color:rgba(72,70,76,0.3)}
@media (min-width:768px){
  body > footer .md\:flex-row{flex-direction:row}
}