/* ============================================================
   BASE.CSS — SquareShift Elastic Website Design System
   Source of truth: llm-observability-platform-corporate-luxe-beta-v3.html
   Preset: Corporate Luxe (v3 finalized)
   Last synced: February 14, 2026
   ============================================================ */

/* --- CSS RESET (Modern) --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
}

a {
  color: var(--color-green-deep);
  text-decoration: underline;
  transition: color 100ms ease;
}

a:hover {
  color: var(--color-accent-dark);
}

/* --- CSS VARIABLES (Extracted from v3 :root) --- */
:root {
  /* Page backgrounds */
  --color-bg: #FFFFFF;
  --color-bg-alt: #FFFFFF;
  --color-bg-card: #FFFFFF;
  --color-bg-accent: #426653;

  /* Text hierarchy */
  --color-text-heading: #426653;
  --color-text-primary: #181818;
  --color-text-secondary: #595959;
  --color-text-muted: #83735F;
  --color-text-tertiary: #83735F;
  --color-text-on-dark: #E6DFD4;
  --color-text-on-dark-heading: #FFFFFF;

  /* Accent: Gold family */
  --color-accent: #B8860B;
  --color-accent-bright: #D4AF37;
  --color-accent-dark: #B8860B;

  /* Brand greens */
  --color-green-deep: #426653;
  --color-green-sage: #426653;

  /* Brand browns */
  --color-brown-deep: #57473A;
  --color-brown-sage: #83735F;

  /* Borders */
  --color-border: #B8860B;
  --color-border-subtle: #C5B9AB;
  --color-border-hover: #D4AF37;

  /* Semantic */
  --color-success: #426653;
  --color-warning: #D4AF37;
  --color-error: #C62828;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  --space-4xl: 96px;
  --space-5xl: 112px;
}

/* --- ACCESSIBILITY --- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  padding: 8px 16px;
  background: var(--color-accent);
  color: var(--color-text-primary);
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  z-index: 9999;
  border-radius: 0;
  text-decoration: none;
}

.skip-link:focus {
  top: 16px;
}

*:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

*:focus:not(:focus-visible) {
  outline: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- TYPOGRAPHY (v3 fixed sizes, not clamp) --- */
h1 {
  font-family: 'Fjalla One', sans-serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--color-text-heading);
}

h2 {
  font-family: 'Fjalla One', sans-serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--color-text-heading);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-accent);
  display: inline-block;
}

h3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 23px;
  line-height: 1.35;
  color: var(--color-text-heading);
}

h4 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-brown-deep);
}

.subheadline {
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.caption {
  font-size: 14px;
  color: var(--color-text-secondary);
}

.fine-print {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* --- LAYOUT AND CONTAINER --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-2xl) auto;
  padding-top: var(--space-md);
}

.section-header h2 {
  margin-bottom: var(--space-lg);
}

/* Grid utilities */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

/* --- BUTTONS (5 variants from v3) --- */

/* btn-primary: Royal Gold bg, dark text, no border, border-radius */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 36px;
  background: #D4AF37;
  color: #181818;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 150ms ease;
  min-width: 160px;
  height: 52px;
}

.btn-primary:hover {
  background: #B8860B;
  color: #FFFFFF;
}

/* btn-secondary: Sage Green bg, cream text, no border, border-radius */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 36px;
  background: #426653;
  color: #E6DFD4;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 150ms ease;
  min-width: 160px;
  height: 52px;
}

.btn-secondary:hover {
  background: #0D5630;
  color: #FFFFFF;
}

/* btn-secondary-dark: transparent, cream text, gold border all around, border-radius */
.btn-secondary-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 36px;
  background: transparent;
  color: #E6DFD4;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  border: 2px solid var(--color-accent);
  border-radius: 4px;
  cursor: pointer;
  transition: all 150ms ease;
  min-width: 160px;
  height: 52px;
}

.btn-secondary-dark:hover {
  background: var(--color-accent);
  color: var(--color-text-primary);
}

/* btn-tertiary: text link, Bronze Gold, bottom-border on hover */
.btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  background: none;
  color: var(--color-accent-dark);
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: all 100ms ease;
}

.btn-tertiary:hover {
  border-bottom-color: var(--color-accent-dark);
  color: var(--color-green-deep);
}

/* btn-sage: Sage Green bg, cream text, no border, border-radius */
.btn-sage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 36px;
  background: var(--color-green-sage);
  color: #E6DFD4;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 150ms ease;
  min-width: 160px;
  height: 52px;
}

.btn-sage:hover {
  background: #0D5630;
  color: #FFFFFF;
}

/* --- SECTION BACKGROUNDS with decorative dividers --- */
.section-cream {
  background: var(--color-bg);
  padding: var(--space-3xl) 0;
  position: relative;
}

.section-beige {
  background: #E6DFD4;
  padding: var(--space-3xl) 0;
  position: relative;
}

.section-cream-alt {
  background: #E6DFD4;
  padding: var(--space-3xl) 0;
  position: relative;
}

.section-sage {
  background: var(--color-bg-accent);
  padding: var(--space-3xl) 0;
  position: relative;
}

.section-sage h2 {
  color: #FFFFFF;
  border-bottom-color: var(--color-accent-bright);
}

.section-sage .subheadline {
  color: var(--color-text-on-dark);
}

/* Decorative section dividers - REMOVED 2026-02-15 per user request */
/* User feedback: "I want to get rid of these kind of decorations on the bottom borders of sections" */
/*
.section-cream::before,
.section-beige::before,
.section-cream-alt::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background: #A59788;
  box-shadow: 0 5px 0 #A59788;
}

.section-cream:first-of-type::before {
  display: none;
}

.section-beige::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--color-accent);
}
*/

/* --- BREADCRUMB --- */










/* --- CARDS --- */

/* Problem cards — Gold top accent */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.problem-card {
  background: var(--color-bg-card);
  border-radius: 0;
  border-top: 2px solid var(--color-accent);
  padding: 36px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: border-top-color 200ms ease;
}

.problem-card:hover {
  border-top-color: var(--color-accent-bright);
}

.problem-card .material-icons-outlined {
  font-size: 36px;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
  display: block;
}

.problem-card h3 {
  margin-bottom: var(--space-sm);
}

.problem-card p {
  margin-bottom: var(--space-md);
}

.problem-card .resolution {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-accent-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}

.problem-card .resolution:hover {
  border-bottom-color: var(--color-accent-dark);
}

.problem-card .resolution .material-icons-outlined {
  font-size: 18px;
  margin-bottom: 0;
}

/* Perspective cards — Surface contrast, gold icon */
.perspective-cards {
  display: flex;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap;
}

.perspective-card {
  flex: 1;
  min-width: 200px;
  background: #FFFFFF;
  border-radius: 0;
  padding: 36px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 200ms ease;
}

.perspective-card:hover {
  box-shadow: 0 2px 12px rgba(66, 102, 83, 0.08);
}

.perspective-card .material-icons-outlined {
  font-size: 36px;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
  display: block;
}

.perspective-card h3 {
  margin-bottom: var(--space-sm);
}

.perspective-card .monitors {
  font-size: 14px;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-sm);
  font-weight: 700;
}

.perspective-card p {
  margin-bottom: var(--space-md);
}

.perspective-card .insight {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--color-green-deep);
  border-top: 1px solid var(--color-accent);
  padding-top: var(--space-md);
  margin-bottom: var(--space-md);
  font-style: italic;
}

/* Topology callout — Subtle shadow instead of border */
.topology-callout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  background: var(--color-bg-card);
  padding: var(--space-xl);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.topology-callout svg {
  width: 100%;
  height: auto;
}

.topology-callout h3 {
  margin-bottom: var(--space-md);
}

.topology-callout p {
  line-height: 1.7;
}

/* Competitive cards — Subtle taupe top border */
.competitive-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.competitive-card {
  background: var(--color-bg-card);
  border-radius: 0;
  padding: 28px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: border-top-color 200ms ease;
}

.competitive-card:hover {
  border-top: 2px solid var(--color-accent);
}

.competitive-card .vs-label {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.02em;
}

.competitive-card .their-strength {
  font-size: 14px;
  color: var(--color-text-secondary);
  font-style: italic;
  margin-bottom: var(--space-md);
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-sm);
}

.competitive-card .our-diff {
  font-size: 16px;
}

/* Accelerator cards — Subtle shadow, gold top border on hover */
.accelerator-card {
  background: var(--color-bg-card);
  border-radius: 0;
  padding: 36px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: border-top-color 200ms ease;
}

.accelerator-card:hover {
  border-top: 2px solid var(--color-accent);
}

.accelerator-card .material-icons-outlined {
  font-size: 36px;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
  display: block;
}

.accelerator-card h3 {
  margin-bottom: var(--space-sm);
}

.accelerator-card p {
  margin-bottom: var(--space-md);
}

.accelerator-card .proof {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--color-green-deep);
  font-style: italic;
  margin-bottom: var(--space-md);
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-sm);
}

/* Compliance cards — No border, icon differentiates */
.compliance-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.compliance-card {
  background: var(--color-bg-card);
  border-radius: 0;
  padding: 36px;
  min-height: 200px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 200ms ease;
}

.compliance-card:hover {
  box-shadow: 0 2px 12px rgba(66, 102, 83, 0.08);
}

.compliance-card .material-icons-outlined {
  font-size: 36px;
  color: var(--color-green-deep);
  margin-bottom: var(--space-md);
  display: block;
}

.compliance-card h3 {
  font-size: 20px;
  margin-bottom: var(--space-sm);
}

.compliance-card p {
  margin-bottom: var(--space-md);
}

/* --- CALLOUT SAGE --- */
.callout-sage {
  max-width: 800px;
  margin: var(--space-2xl) auto 0 auto;
  padding: var(--space-xl);
  background: var(--color-green-deep);
  border-radius: 0;
  text-align: center;
}

.callout-sage h3 {
  color: #FFFFFF;
  margin-bottom: var(--space-sm);
}

.callout-sage p {
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-lg);
}

/* --- TIMELINE --- */
.timeline {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  padding-left: 48px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 36px;
  bottom: 36px;
  width: 2px;
  background: var(--color-accent);
}

.timeline-step {
  position: relative;
  margin-bottom: var(--space-xl);
}

.timeline-step:last-child {
  margin-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -42px;
  top: 28px;
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-accent);
  background: var(--color-bg-card);
  border-radius: 0;
}

.timeline-step.active .timeline-dot {
  background: var(--color-green-deep);
  border-color: var(--color-accent);
}

.step-card {
  background: var(--color-bg-card);
  border-radius: 0;
  padding: var(--space-xl);
}

.step-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.time-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-green-deep);
  color: #E6DFD4;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  border-radius: 0;
}

.step-card .material-icons-outlined {
  font-size: 44px;
  color: var(--color-green-sage);
}

.step-card h3 {
  margin-bottom: var(--space-sm);
}

.step-card p {
  margin-bottom: var(--space-md);
}

.platform-tags {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.platform-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--color-green-deep);
  border: 1px solid var(--color-accent);
  padding: 4px 8px;
  background: var(--color-bg);
}

/* --- COMPARISON TABLE --- */
.comparison-table-wrapper {
  overflow-x: auto;
  margin-bottom: var(--space-2xl);
  -webkit-overflow-scrolling: touch;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
}

.comparison-table thead th {
  background: var(--color-green-deep);
  color: #E6DFD4;
  font-weight: 700;
  font-size: 14px;
  padding: 16px;
  text-align: left;
  white-space: nowrap;
}

.comparison-table thead th.platform-col {
  color: var(--color-accent-bright);
  font-size: 16px;
}

.comparison-table tbody td {
  padding: 12px 16px;
  font-size: 14px;
  border-top: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}

.comparison-table tbody tr:nth-child(odd) td {
  background: var(--color-bg-card);
}

.comparison-table tbody tr:nth-child(even) td {
  background: var(--color-bg);
}

.comparison-table tbody td:first-child {
  font-weight: 700;
  color: var(--color-green-deep);
  white-space: nowrap;
}

.comparison-table tbody td.platform-col {
  background: rgba(184, 134, 11, 0.07) !important;
}

.comparison-table .material-icons-outlined {
  font-size: 18px;
  vertical-align: middle;
  margin-right: 4px;
}

.icon-check {
  color: var(--color-success);
}

.icon-x {
  color: var(--color-error);
}

.icon-warn {
  color: var(--color-warning);
}

/* --- PRICING TABLE --- */
.pricing-wrapper {
  max-width: 960px;
  margin: 0 auto var(--space-2xl) auto;
  overflow-x: auto;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
}

.pricing-table thead th {
  background: var(--color-green-deep);
  color: #E6DFD4;
  font-weight: 700;
  font-size: 16px;
  padding: 18px 16px;
  text-align: center;
}

.pricing-table thead th:first-child {
  text-align: left;
}

.pricing-table thead th.popular {
  border-top: 3px solid var(--color-accent-bright);
}

.most-popular-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-accent-bright);
  color: var(--color-text-primary);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.pricing-table tbody td {
  padding: 12px 16px;
  font-size: 14px;
  border-top: 1px solid var(--color-border-subtle);
  text-align: center;
}

.pricing-table tbody td:first-child {
  text-align: left;
  font-weight: 700;
  color: var(--color-green-deep);
}

.pricing-table tbody tr:nth-child(odd) td {
  background: var(--color-bg-card);
}

.pricing-table tbody tr:nth-child(even) td {
  background: var(--color-bg);
}

.pricing-table tbody td.popular-col {
  background: rgba(184, 134, 11, 0.06) !important;
}

.pricing-table .price-cell {
  font-family: 'JetBrains Mono', monospace;
  font-size: 32px;
  color: var(--color-green-deep);
  padding: 24px 16px;
}

.pricing-table .price-cell.custom {
  font-size: 24px;
  color: var(--color-green-sage);
}

.pricing-ctas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: 960px;
  margin: 0 auto var(--space-2xl) auto;
  text-align: center;
}

.pricing-cta-col {
  text-align: center;
}

.pricing-cta-col .fine-print {
  margin-top: var(--space-sm);
}

/* --- FAQ / ACCORDION --- */
.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.accordion-item {
  background: var(--color-bg-card);
  border-radius: 0;
  margin-bottom: var(--space-sm);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: border-top-color 200ms ease;
}

.accordion-item.open {
  border-top: 2px solid var(--color-accent-bright);
}

.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-green-deep);
  min-height: 52px;
}

.accordion-trigger .material-icons-outlined {
  font-size: 24px;
  transition: transform 200ms ease, color 200ms ease;
  flex-shrink: 0;
  color: var(--color-brown-sage);
}

.accordion-item.open .accordion-trigger .material-icons-outlined {
  transform: rotate(180deg);
  color: var(--color-accent-dark);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease;
}

.accordion-item.open .accordion-content {
  max-height: 500px;
}

.accordion-body {
  padding: 0 24px 24px 24px;
  line-height: 1.7;
}

.accordion-body .proof-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-accent-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
}

.accordion-body .proof-link .material-icons-outlined {
  font-size: 18px;
}

/* --- METRIC COMPONENTS --- */

/* Stat cards (social proof section) */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.stat-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 28px;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.stat-card:hover {
  border-top: 2px solid var(--color-accent-bright);
}

.stat-card .material-icons-outlined {
  font-size: 24px;
  color: var(--color-accent-bright);
}

.stat-card .metric {
  font-family: 'JetBrains Mono', monospace;
  font-size: 32px;
  color: #FFFFFF;
  line-height: 1.1;
  margin-bottom: var(--space-xs);
}

.stat-card .label {
  font-size: 14px;
  color: var(--color-text-on-dark);
}

/* Metric strip (case study section) */
.metric-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.metric-card {
  background: rgba(255, 255, 255, 0.08);
  border-top: 2px solid #D4AF37;
  padding: 28px;
  text-align: center;
}

.metric-card .metric-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 32px;
  color: #FFFFFF;
  line-height: 1.1;
  margin-bottom: var(--space-sm);
}

.metric-card .metric-label {
  font-size: 14px;
  color: var(--color-text-on-dark);
}

/* --- CASE STUDY GRID --- */
.case-study-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.case-study-visual {
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: var(--space-xl);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.case-study-visual:hover {
  border-top: 2px solid var(--color-accent-bright);
}

.case-study-visual .placeholder-text {
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text-secondary);
  text-align: center;
}

.case-study-excerpt {
  background: #FFFFFF;
  padding: var(--space-xl);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.case-study-excerpt .customer-label {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-green-deep);
  margin-bottom: var(--space-xs);
}

.case-study-excerpt .industry-badge {
  font-size: 12px;
  color: var(--color-brown-sage);
  margin-bottom: var(--space-md);
}

.case-study-excerpt p {
  margin-bottom: var(--space-md);
  color: var(--color-text-primary);
}

.results-list {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-md);
}

.results-list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--color-text-primary);
}

.results-list .material-icons-outlined {
  font-size: 18px;
  color: var(--color-green-deep);
}

/* --- SLA BADGE ROW --- */
.sla-badge-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 16px 24px;
  background: var(--color-green-deep);
  border-top: 3px solid var(--color-accent-bright);
  max-width: 600px;
  margin: var(--space-xl) auto 0 auto;
}

.sla-badge-row .material-icons-outlined {
  font-size: 24px;
  color: var(--color-accent-bright);
}

.sla-badge-row .sla-text strong {
  font-weight: 700;
  font-size: 16px;
  color: #FFFFFF;
  display: block;
}

.sla-badge-row .sla-text span {
  font-size: 14px;
  color: #E6DFD4;
}

/* --- PULLQUOTE --- */
.section-pullquote {
  background: #FFFFFF;
  padding: 80px 0;
  text-align: center;
}

.pullquote-block {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.pullquote-icon {
  font-size: 48px;
  color: #B8860B;
  display: block;
  margin-bottom: 24px;
}

.pullquote-text {
  font-family: 'Fjalla One', sans-serif;
  font-size: 28px;
  line-height: 1.4;
  color: #426653;
  margin: 0 0 24px 0;
  border: none;
  padding: 0;
  font-style: normal;
}

.pullquote-cite {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  color: #83735F;
  font-style: normal;
  letter-spacing: 0.02em;
  display: block;
}

/* --- SOCIAL PROOF --- */
.social-proof {
  padding: var(--space-2xl) 0;
}

.logo-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xl);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.logo-placeholder {
  font-weight: 700;
  font-size: 14px;
  color: rgba(230, 223, 212, 0.6);
  padding: 12px 24px;
  border: 1px solid rgba(184, 134, 11, 0.4);
  letter-spacing: 0.03em;
}

.testimonial {
  max-width: 720px;
  margin: 0 auto;
  padding-left: var(--space-lg);
}

.testimonial blockquote {
  font-size: 19px;
  color: #FFFFFF;
  font-style: italic;
  line-height: 1.55;
  margin-bottom: var(--space-sm);
}

.testimonial cite {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-accent-bright);
  font-style: normal;
}

/* --- FINAL CTA SECTION --- */
.final-cta {
  padding: var(--space-4xl) 0;
  text-align: center;
}

.final-cta h2 {
  color: #FFFFFF;
  margin-bottom: var(--space-lg);
  border-bottom-color: var(--color-accent-bright);
}

.final-cta .subheadline {
  color: var(--color-text-on-dark);
  max-width: 600px;
  margin: 0 auto var(--space-xl) auto;
}

.final-cta-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.final-cta-buttons .btn-primary {
  height: 56px;
  width: 220px;
  background: var(--color-accent);
  color: var(--color-text-primary);
}

.final-cta-buttons .btn-primary:hover {
  background: var(--color-accent-bright);
}

.final-cta-buttons .btn-secondary-dark {
  height: 56px;
  width: 220px;
}

.final-cta .hero-subtext {
  color: #C5B9AB;
  margin-bottom: var(--space-xl);
}

.final-trust-badges {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.final-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 14px;
}

.final-trust-badge .material-icons-outlined {
  font-size: 18px;
  color: var(--color-accent-bright);
}

.final-trust-badge span {
  font-size: 14px;
  color: var(--color-text-on-dark);
}

.enterprise-callout-text {
  font-size: 14px;
  color: var(--color-text-on-dark);
}

.enterprise-callout-text a {
  color: var(--color-accent-bright);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent-bright);
}

.enterprise-callout-text a:hover {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}

/* --- STICKY MOBILE CTA --- */
.sticky-mobile-cta {
  display: none;
}

/* --- PULSE ANIMATION --- */
@keyframes pulse-dot {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

.pulse-dot {
  will-change: offset-distance, opacity;
}

/* --- REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .pulse-dot {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* --- RESPONSIVE: TABLET (max-width: 1199px) --- */
@media (max-width: 1199px) {
  .container {
    padding: 0 16px;
  }

  h1 {
    font-size: 42px;
  }

  h2 {
    font-size: 32px;
  }

  .section-cream,
  .section-beige,
  .section-sage,
  .section-cream-alt {
    padding: var(--space-2xl) 0;
  }

  .perspective-card {
    flex: 1 1 calc(33.333% - 16px);
    min-width: 200px;
  }

  .compliance-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- RESPONSIVE: MOBILE (max-width: 767px) --- */
@media (max-width: 767px) {
  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 24px;
  }

  h3 {
    font-size: 20px;
  }

  .section-header {
    text-align: left;
  }

  .section-cream,
  .section-beige,
  .section-sage,
  .section-cream-alt {
    padding: 40px 0;
  }

  .section-pullquote {
    padding: 48px 0;
  }

  .pullquote-text {
    font-size: 22px;
  }

  .pullquote-icon {
    font-size: 36px;
    margin-bottom: 16px;
  }

  .stat-cards {
    grid-template-columns: 1fr;
  }

  .problem-grid {
    grid-template-columns: 1fr;
  }

  .perspective-cards {
    flex-direction: column;
  }

  .perspective-card {
    min-width: 100%;
  }

  .topology-callout {
    grid-template-columns: 1fr;
  }

  .timeline {
    padding-left: 0;
  }

  .timeline::before {
    display: none;
  }

  .timeline-dot {
    display: none;
  }

  .competitive-cards {
    grid-template-columns: 1fr;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .compliance-cards {
    grid-template-columns: 1fr;
  }

  .pricing-ctas {
    grid-template-columns: 1fr;
  }

  .case-study-grid {
    grid-template-columns: 1fr;
  }

  .metric-strip {
    grid-template-columns: 1fr;
  }

  .final-cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .final-cta-buttons .btn-primary,
  .final-cta-buttons .btn-secondary-dark {
    width: 100%;
    max-width: 320px;
  }

  .final-trust-badges {
    flex-direction: column;
    align-items: center;
  }

  .logo-grid {
    gap: var(--space-md);
  }

  .sticky-mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--color-bg);
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 2px solid var(--color-accent);
    gap: 8px;
    align-items: center;
    justify-content: center;
    transform: translateY(100%);
    transition: transform 300ms ease;
  }

  .sticky-mobile-cta.visible {
    transform: translateY(0);
  }

  .sticky-mobile-cta .btn-primary,
  .sticky-mobile-cta .btn-secondary {
    flex: 1;
    height: 44px;
    padding: 12px 16px;
    font-size: 14px;
    min-width: auto;
  }
}

/* --- RESPONSIVE: SMALL (max-width: 374px) --- */
@media (max-width: 374px) {
  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 22px;
  }

  .problem-card,
  .perspective-card,
  .compliance-card,
  .accelerator-card,
  .step-card {
    padding: 24px;
  }

  .section-cream,
  .section-beige,
  .section-sage,
  .section-cream-alt {
    padding: 32px 0;
  }
}