/* ==========================================================================
   SECTIONS & GRIDS
   ========================================================================== */
.section {
  padding: var(--space-4xl) 0;
  position: relative;
}

.section-header {
  text-align: center;
  max-width: 750px;
  margin: 0 auto var(--space-3xl);
}

.section-title {
  margin-bottom: var(--space-md);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-xl);
}

.grid-center-constrained {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
  align-items: stretch;
}

@media (max-width: 768px) {
  .grid-center-constrained {
    grid-template-columns: 1fr;
  }
}

.grid-center-constrained .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.grid-center-constrained .card-icon {
  margin: 0 auto var(--space-lg);
  flex-shrink: 0;
}

.grid-center-constrained .card-title {
  height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: var(--space-sm);
  flex-shrink: 0;
}

.grid-center-constrained .card-description {
  flex-grow: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  max-width: 38ch;
  margin: 0 auto var(--space-lg);
}

.grid-center-constrained .card .btn {
  margin-top: auto;
  align-self: center;
}

/* ==========================================================================
   PHILOSOPHY & MOMENTUM: EDITORIAL SPLIT CONVERSION STAGE
   ========================================================================== */
.editorial-split {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

@media (max-width: 860px) {
  .editorial-split {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

.editorial-manifesto {
  text-align: left;
}

.editorial-manifesto .section-title {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.15;
  margin-bottom: var(--space-md);
}

.editorial-manifesto .section-subtitle {
  margin-bottom: var(--space-xl);
}

.editorial-tenets-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  text-align: left;
}

.editorial-tenet-item {
  padding: var(--space-lg) var(--space-xl);
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid var(--text-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.editorial-tenet-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.editorial-tenet-num {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--text-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-2xs);
}

.editorial-tenet-item .card-title,
.editorial-tenet-item h3,
.editorial-tenet-item h4 {
  font-size: var(--text-base);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: var(--space-xs);
  height: auto;
  min-height: 0;
  display: block;
  text-align: left;
}

.editorial-tenet-item .card-description,
.editorial-tenet-item p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: none;
  text-align: left;
  display: block;
}

.vision-narrative {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 760px;
  margin: 0 auto;
}

.vision-statement {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ==========================================================================
   CARDS & PROCESS BLOCKS
   ========================================================================== */
.card {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-6px);
  background: var(--bg-card-hover);
  border-color: var(--border-active);
  box-shadow: var(--shadow-glow);
}

.card-center {
  text-align: center;
  align-items: center;
}

.card-center .card-title {
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 3.8rem;
  align-items: center;
}

.card-center .card-description {
  text-align: center;
  max-width: 38ch;
  margin: 0 auto;
}

.card-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-sm);
  background: var(--accent-gradient-glow);
  border: 1px solid rgba(56, 189, 248, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--text-accent);
  margin-bottom: var(--space-lg);
  transition: all var(--transition-fast);
}

.card-icon-center {
  margin: 0 auto var(--space-lg);
}

/* Capability Icon Comparison Container */
.card-icons-comparison {
  display: flex;
  align-items: flex-end;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.comparison-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
}

.comparison-badge {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.comparison-badge-animated {
  color: var(--text-accent);
}

.card-icon-static {
  margin-bottom: 0;
  opacity: 0.85;
}

.card .card-icon-animated {
  margin-bottom: var(--space-lg);
}

.card-icon-animated {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(37, 99, 235, 0.25));
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: none;
  position: relative;
  transition: all var(--transition-fast);
}

.card:hover .card-icon-animated {
  border-color: rgba(56, 189, 248, 0.9);
  box-shadow: none;
  transform: translateY(-2px);
}

/* 1. Product Development: Sequential Stacking Appearance */
.anim-product {
  overflow: visible;
}
.prod-layer {
  opacity: 0;
  transform-origin: center;
}
.prod-diamond {
  animation: prodDiamondCycle 4.2s cubic-bezier(0.34, 1.25, 0.64, 1) infinite;
}
.prod-layer-2 {
  animation: prodLayer2Cycle 4.2s cubic-bezier(0.34, 1.25, 0.64, 1) infinite;
}
.prod-layer-3 {
  animation: prodLayer3Cycle 4.2s cubic-bezier(0.34, 1.25, 0.64, 1) infinite;
}

/* Diamond appears first at bottom (translateY(10px)), shifts up to mid (5px), then top (0px) */
@keyframes prodDiamondCycle {
  0% { opacity: 0; transform: translateY(10px) scale(0.9); }
  5% { opacity: 1; transform: translateY(10px) scale(1); }
  22% { opacity: 1; transform: translateY(10px); }
  29% { opacity: 1; transform: translateY(5px); }
  52% { opacity: 1; transform: translateY(5px); }
  59% { opacity: 1; transform: translateY(0); }
  86% { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; transform: translateY(-2px); }
}
/* Bottom V chevron appears at y=17..22 (translateY(0)) when diamond shifts up to mid */
@keyframes prodLayer3Cycle {
  0%, 24% { opacity: 0; transform: translateY(2px); }
  29%, 86% { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; transform: translateY(-2px); }
}
/* Middle V chevron appears at y=12..17 (translateY(0)) when diamond shifts up to top */
@keyframes prodLayer2Cycle {
  0%, 54% { opacity: 0; transform: translateY(2px); }
  59%, 86% { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; transform: translateY(-2px); }
}

/* 2. AI & Automation Systems: 25% Larger Heads, Widened Gap & Extended Dot Flight at Forehead Level */
.card-glyph-svg.anim-ai {
  width: 36px;
  height: 24px;
}
.anim-ai {
  overflow: visible;
}
.ai-bot-left {
  animation: aiBotLeftGlow 3.6s ease-in-out infinite;
}
.ai-bot-right {
  animation: aiBotRightGlow 3.6s ease-in-out infinite;
}
.ai-dot {
  opacity: 0;
}
.ai-dot-ltr {
  animation: aiDotLeftToRight 3.6s cubic-bezier(0.3, 0, 0.2, 1) infinite;
}
.ai-dot-rtl {
  animation: aiDotRightToLeft 3.6s cubic-bezier(0.3, 0, 0.2, 1) infinite;
}

@keyframes aiBotLeftGlow {
  0%, 100% { opacity: 0.85; }
  6%, 16% { opacity: 1; }
  24%, 72% { opacity: 0.85; }
  80%, 92% { opacity: 1; }
}
@keyframes aiBotRightGlow {
  0%, 22% { opacity: 0.85; }
  28%, 42% { opacity: 1; }
  50%, 58% { opacity: 0.85; }
  60%, 70% { opacity: 1; }
  78%, 100% { opacity: 0.85; }
}
/* Left to right: starts at x=13.5 (left head edge), travels 11.0px to x=24.5 (right head edge) */
@keyframes aiDotLeftToRight {
  0%, 6% { opacity: 0; transform: translateX(0); }
  8% { opacity: 1; transform: translateX(0); }
  32% { opacity: 1; transform: translateX(11.0px); }
  36%, 100% { opacity: 0; transform: translateX(11.0px); }
}
/* Right to left: starts at x=24.5 (right head edge), travels -11.0px to x=13.5 (left head edge) */
@keyframes aiDotRightToLeft {
  0%, 54% { opacity: 0; transform: translateX(0); }
  56% { opacity: 1; transform: translateX(0); }
  80% { opacity: 1; transform: translateX(-11.0px); }
  84%, 100% { opacity: 0; transform: translateX(-11.0px); }
}

/* 3. Data Platform Architecture: 50% Lengthened Edge-to-Edge Arrows with Continuous Ingress */
.card-glyph-svg.anim-data {
  width: 34px;
  height: 34px;
}
.anim-data {
  overflow: visible;
}
.data-arrow-in path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: dataArrowInLengthen 3.8s ease-in-out infinite;
}
.data-db-glow {
  animation: dataDbGlowPulse 3.8s ease-in-out infinite;
  transform-origin: center;
}
.data-arrow-out path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: dataArrowOutLengthen 3.8s ease-in-out infinite;
}

/* Ingress arrows lengthen to DB and STAY VISIBLE throughout the cycle */
@keyframes dataArrowInLengthen {
  0% { opacity: 0; stroke-dashoffset: 100; }
  3% { opacity: 1; stroke-dashoffset: 100; }
  24% { opacity: 1; stroke-dashoffset: 0; }
  86% { opacity: 1; stroke-dashoffset: 0; }
  92%, 100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes dataDbGlowPulse {
  0%, 22% { opacity: 0.8; stroke: currentColor; fill: none; }
  28%, 86% { opacity: 1; stroke: #38bdf8; fill: rgba(56, 189, 248, 0.25); }
  92%, 100% { opacity: 0.8; stroke: currentColor; fill: none; }
}
/* Egress arrows lengthen outward while ingress arrows remain visible */
@keyframes dataArrowOutLengthen {
  0%, 46% { opacity: 0; stroke-dashoffset: 100; }
  50% { opacity: 1; stroke-dashoffset: 100; }
  72%, 86% { opacity: 1; stroke-dashoffset: 0; }
  92%, 100% { opacity: 0; stroke-dashoffset: 0; }
}

/* 4. Go-to-Market Strategy: Outer Ring Glow -> Contract -> Inner Bullseye Glow */
.anim-gtm {
  overflow: visible;
}
.anim-gtm-fig {
  animation: gtmFigureScale 3s ease-in-out infinite;
  transform-origin: center;
}
.gtm-outer-ring {
  animation: gtmOuterLight 3s ease-in-out infinite;
}
.gtm-inner-circle {
  animation: gtmInnerLight 3s ease-in-out infinite;
}

@keyframes gtmOuterLight {
  0%, 5% { stroke: currentColor; fill: none; }
  12%, 24% { stroke: #38bdf8; fill: rgba(56, 189, 248, 0.14); }
  32%, 100% { stroke: currentColor; fill: none; }
}
@keyframes gtmFigureScale {
  0%, 20% { transform: scale(1); }
  36%, 74% { transform: scale(0.86); }
  88%, 100% { transform: scale(1); }
}
@keyframes gtmInnerLight {
  0%, 46% { stroke: currentColor; fill: none; }
  56%, 74% { stroke: #38bdf8; fill: rgba(56, 189, 248, 0.55); }
  84%, 100% { stroke: currentColor; fill: none; }
}

/* 5. Scale Up & Out: 3-Row, 9-Block Modular Stacking Grid */
.anim-scale {
  overflow: visible;
}
.scale-block {
  opacity: 0;
  transform-origin: center;
}
.lego-brick {
  fill: rgba(56, 189, 248, 0.18);
  stroke: currentColor;
  stroke-width: 1.3;
}
.lego-stud {
  fill: currentColor;
  opacity: 0.95;
}

/* Phase 1: Vertical Scaling (Scale UP - Center Column) */
.scale-block-1 { animation: scaleBlock1Cycle 4.8s cubic-bezier(0.34, 1.3, 0.64, 1) infinite; }
.scale-block-2 { animation: scaleBlock2Cycle 4.8s cubic-bezier(0.34, 1.3, 0.64, 1) infinite; }
.scale-block-3 { animation: scaleBlock3Cycle 4.8s cubic-bezier(0.34, 1.3, 0.64, 1) infinite; }

/* Phase 2: Horizontal Scaling (Scale OUT - Widening Rows) */
.scale-block-4 { animation: scaleBlock4Cycle 4.8s cubic-bezier(0.34, 1.3, 0.64, 1) infinite; }
.scale-block-5 { animation: scaleBlock5Cycle 4.8s cubic-bezier(0.34, 1.3, 0.64, 1) infinite; }
.scale-block-6 { animation: scaleBlock6Cycle 4.8s cubic-bezier(0.34, 1.3, 0.64, 1) infinite; }
.scale-block-7 { animation: scaleBlock7Cycle 4.8s cubic-bezier(0.34, 1.3, 0.64, 1) infinite; }
.scale-block-8 { animation: scaleBlock8Cycle 4.8s cubic-bezier(0.34, 1.3, 0.64, 1) infinite; }
.scale-block-9 { animation: scaleBlock9Cycle 4.8s cubic-bezier(0.34, 1.3, 0.64, 1) infinite; }

/* Scale UP: Row 1 Center */
@keyframes scaleBlock1Cycle {
  0%, 2% { opacity: 0; transform: translateY(-5px); }
  7%, 86% { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; transform: translateY(-3px); }
}
/* Scale UP: Row 2 Center */
@keyframes scaleBlock2Cycle {
  0%, 9% { opacity: 0; transform: translateY(-5px); }
  15%, 86% { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; transform: translateY(-3px); }
}
/* Scale UP: Row 3 Center */
@keyframes scaleBlock3Cycle {
  0%, 18% { opacity: 0; transform: translateY(-5px); }
  24%, 86% { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; transform: translateY(-3px); }
}

/* Scale OUT Row 1: Bottom Left */
@keyframes scaleBlock4Cycle {
  0%, 27% { opacity: 0; transform: translateX(3px); }
  33%, 86% { opacity: 1; transform: translateX(0); }
  92%, 100% { opacity: 0; transform: translateX(2px); }
}
/* Scale OUT Row 1: Bottom Right */
@keyframes scaleBlock5Cycle {
  0%, 36% { opacity: 0; transform: translateX(-3px); }
  42%, 86% { opacity: 1; transform: translateX(0); }
  92%, 100% { opacity: 0; transform: translateX(-2px); }
}

/* Scale OUT Row 2: Middle Left */
@keyframes scaleBlock6Cycle {
  0%, 45% { opacity: 0; transform: translateX(3px); }
  51%, 86% { opacity: 1; transform: translateX(0); }
  92%, 100% { opacity: 0; transform: translateX(2px); }
}
/* Scale OUT Row 2: Middle Right */
@keyframes scaleBlock7Cycle {
  0%, 54% { opacity: 0; transform: translateX(-3px); }
  60%, 86% { opacity: 1; transform: translateX(0); }
  92%, 100% { opacity: 0; transform: translateX(-2px); }
}

/* Scale OUT Row 3: Top Left */
@keyframes scaleBlock8Cycle {
  0%, 63% { opacity: 0; transform: translateX(3px); }
  69%, 86% { opacity: 1; transform: translateX(0); }
  92%, 100% { opacity: 0; transform: translateX(2px); }
}
/* Scale OUT Row 3: Top Right */
@keyframes scaleBlock9Cycle {
  0%, 72% { opacity: 0; transform: translateX(-3px); }
  78%, 86% { opacity: 1; transform: translateX(0); }
  92%, 100% { opacity: 0; transform: translateX(-2px); }
}

/* 6. Operations & Telemetry: Seamless Looping Live EKG Monitor */
.anim-telemetry,
.anim-ops {
  overflow: hidden;
}
.ekg-track {
  animation: ekgLoopScroll 1.8s linear infinite;
}
@keyframes ekgLoopScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-24px);
  }
}

.card-title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
  min-height: 2.2rem;
  display: flex;
  align-items: flex-start;
}

.card-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  padding-bottom: var(--space-lg);
  margin-bottom: 0;
  min-height: 3.8rem;
}

.card-list {
  list-style: none;
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-lg);
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.card-list li {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: 0;
  line-height: 1.5;
}

.card-list li strong {
  color: var(--text-secondary);
}