/* Hindlytics Section Layouts & Interactive Architectures */
.hero-section {
  position: relative; padding-top: var(--space-20); padding-bottom: var(--space-24);
  background: radial-gradient(circle at 85% 15%, #FFF8ED 0%, #FFFFFF 65%);
  border-bottom: 1px solid var(--color-border); overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-12); align-items: center; }
@media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-10); } }

.hero-headline { font-size: 3.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; color: var(--color-text-main); margin-bottom: var(--space-5); }
.hero-headline .highlight { color: var(--color-primary); position: relative; display: inline-block; }
.hero-subtext { font-size: 1.25rem; line-height: 1.6; color: var(--color-text-body); margin-bottom: var(--space-8); max-width: 600px; }
.hero-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-8); }
.hero-trust-bar { display: flex; align-items: center; gap: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-border); font-size: 0.8125rem; color: var(--color-text-muted); }
.trust-item { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--color-text-main); }

.hero-visual-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-card); position: relative; }
.arch-canvas-container { width: 100%; height: 440px; background: #0B0E14; border-radius: var(--radius-sm); position: relative; overflow: hidden; border: 1px solid #1E293B; }

.philosophy-pipeline { display: flex; align-items: center; justify-content: space-between; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6) var(--space-8); margin-top: var(--space-8); overflow-x: auto; gap: var(--space-4); }
.pipeline-node { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 130px; }
.pipeline-badge { font-family: var(--font-family-mono); font-size: 0.75rem; font-weight: 700; padding: 6px 14px; border-radius: var(--radius-xs); background: var(--color-surface-muted); color: var(--color-text-main); border: 1px solid var(--color-border); margin-bottom: 6px; letter-spacing: 0.05em; transition: all var(--transition-fast); }
.pipeline-node:hover .pipeline-badge { background: var(--color-primary); color: #FFFFFF; border-color: var(--color-primary); }
.pipeline-label { font-size: 0.8125rem; color: var(--color-text-muted); font-weight: 500; }
.pipeline-arrow { color: var(--color-primary); font-weight: bold; font-size: 1.25rem; }

.layers-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.layer-bar { display: grid; grid-template-columns: 80px 220px 1fr 140px; align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); transition: all var(--transition-fast); cursor: pointer; }
.layer-bar:hover, .layer-bar.active { border-color: var(--color-primary); background: var(--color-accent-cream-subtle); transform: translateX(5px); }
.layer-num { font-family: var(--font-family-mono); font-size: 0.9375rem; font-weight: 700; color: var(--color-primary); }
.layer-name { font-family: var(--font-family-heading); font-size: 1.125rem; font-weight: 700; color: var(--color-text-main); }
.layer-desc { font-size: 0.9375rem; color: var(--color-text-body); }
.layer-action { text-align: right; font-size: 0.8125rem; font-weight: 600; color: var(--color-link); }
@media (max-width: 860px) { .layer-bar { grid-template-columns: 1fr; gap: var(--space-2); } }

.journey-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); position: relative; }
@media (max-width: 1024px) { .journey-track { grid-template-columns: 1fr; } }
.journey-step { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); position: relative; display: flex; flex-direction: column; }
.journey-step::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--color-border); }
.journey-step:hover::before, .journey-step.active::before { background: var(--color-primary); }
.journey-step-num { font-family: var(--font-family-mono); font-size: 0.75rem; font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-2); text-transform: uppercase; }
.journey-step-title { font-size: 1.25rem; margin-bottom: var(--space-3); }
.journey-checklist { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-3); font-size: 0.875rem; color: var(--color-text-body); }
.journey-checklist li { display: flex; align-items: flex-start; gap: 6px; }
.journey-checklist li::before { content: '•'; color: var(--color-primary); font-weight: bold; }

.graph-container { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-6); background: #0B0E14; border-radius: var(--radius-md); border: 1px solid #1E293B; padding: var(--space-6); color: #FFFFFF; }
@media (max-width: 960px) { .graph-container { grid-template-columns: 1fr; } }
.graph-canvas { width: 100%; height: 480px; position: relative; }
.graph-inspector { background: #131A26; border: 1px solid #2A3649; border-radius: var(--radius-sm); padding: var(--space-5); display: flex; flex-direction: column; }
.graph-inspector-title { font-family: var(--font-family-heading); font-size: 1.125rem; font-weight: 700; color: #FFFFFF; margin-bottom: var(--space-2); }
.graph-inspector-node-type { font-family: var(--font-family-mono); font-size: 0.75rem; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-3); }

.workflow-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-8); }
@media (max-width: 860px) { .workflow-compare { grid-template-columns: 1fr; } }
.workflow-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); }
.workflow-box.after-box { background: #0B0E14; border-color: #2A3649; color: #E2E8F0; }
.workflow-box.after-box h3 { color: #FFFFFF; }
.workflow-steps-vertical { display: flex; flex-direction: column; gap: 12px; margin-top: var(--space-4); position: relative; }
.flow-step-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-xs); background: var(--color-surface-muted); border: 1px solid var(--color-border); font-size: 0.875rem; }
.workflow-box.after-box .flow-step-item { background: #161F2E; border-color: #27354A; color: #E2E8F0; }
.flow-step-item.highlight-ai { border-color: var(--color-primary); background: rgba(247, 144, 29, 0.12); color: var(--color-primary); font-weight: 600; }

.observability-console { background: #0B0E14; border: 1px solid #1E293B; border-radius: var(--radius-md); padding: var(--space-6); color: #FFFFFF; }
.console-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #1E293B; padding-bottom: var(--space-4); margin-bottom: var(--space-6); }
.console-title { font-family: var(--font-family-mono); font-size: 0.875rem; font-weight: 700; display: flex; align-items: center; gap: 8px; color: #E2E8F0; }
.console-pulse { width: 8px; height: 8px; border-radius: 50%; background: #10B981; box-shadow: 0 0 10px #10B981; }
.console-metrics-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
@media (max-width: 1024px) { .console-metrics-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .console-metrics-grid { grid-template-columns: repeat(2, 1fr); } }
.console-metric-item { background: #131A26; border: 1px solid #243042; border-radius: var(--radius-xs); padding: 12px 16px; }
.console-metric-val { font-family: var(--font-family-mono); font-size: 1.5rem; font-weight: 700; color: #FFFFFF; }
.console-metric-lbl { font-family: var(--font-family-mono); font-size: 0.6875rem; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

.strategist-simulator { background: var(--color-surface); border: 2px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-8); box-shadow: var(--shadow-elevated); }
.strategist-input-group { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); }
@media (max-width: 640px) { .strategist-input-group { flex-direction: column; } }
.strategist-result-panel { background: var(--color-accent-cream-subtle); border: 1px solid rgba(247, 144, 29, 0.3); border-radius: var(--radius-sm); padding: var(--space-6); display: none; }
.strategist-result-panel.active { display: block; }
.result-field { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-4); padding: 10px 0; border-bottom: 1px solid rgba(49, 46, 45, 0.08); }
@media (max-width: 640px) { .result-field { grid-template-columns: 1fr; gap: 4px; } }
.result-field-label { font-family: var(--font-family-mono); font-size: 0.8125rem; font-weight: 700; color: var(--color-primary); text-transform: uppercase; }
.result-field-val { font-size: 0.9375rem; color: var(--color-text-main); font-weight: 500; }