/* BookNest AI - Brand Design System */
/* T03: Global Theme Tokens */

:root {
  /* Brand Colors */
  --color-pine: #0E7C66;
  --color-mint: #BFE3D0;
  --color-stone: #E8ECEB;
  --color-charcoal: #1E2528;
  --color-white: #FFFFFF;
  --brand-dark-green: #0E3B2E;
  
  /* Template Background Assets */
  --tpl-bg-waves-teal: url('quantam-assets/contact/waves-bg-teal.png');
  --tpl-bg-light-lines: url('quantam-assets/cta/bg-light-lines.png');
  --tpl-bg-about-lines: url('quantam-assets/about/lines.svg');
  
  /* Semantic Color Tokens */
  --color-primary: var(--color-pine);
  --color-primary-light: var(--color-mint);
  --color-neutral-light: var(--color-stone);
  --color-neutral-dark: var(--color-charcoal);
  --color-surface: var(--color-white);
  
  /* Interactive Colors */
  --color-primary-hover: #0a6b59;
  --color-primary-active: #085146;
  --color-text-primary: var(--color-charcoal);
  --color-text-secondary: #4a5568;
  --color-text-muted: #718096;
  --color-text-inverse: var(--color-white);
  
  /* Spacing Scale */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */
  --space-5xl: 8rem;      /* 128px */
  
  /* Typography Scale */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */
  --text-7xl: 4.5rem;     /* 72px */
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Font Families */
  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-readex: 'Readex Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Transitions */
  --duration-fast: 150ms;
  --duration-normal: 260ms;
  --duration-slow: 500ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: var(--leading-normal);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-readex);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

.font-heading {
  font-family: var(--font-readex);
}

h1, .text-7xl {
  font-size: var(--text-7xl);
  font-weight: var(--font-semibold);
}

h2, .text-6xl {
  font-size: var(--text-6xl);
  font-weight: var(--font-semibold);
}

h3, .text-5xl {
  font-size: var(--text-5xl);
  font-weight: var(--font-semibold);
}

.text-4xl {
  font-size: var(--text-4xl);
}

.text-3xl {
  font-size: var(--text-3xl);
}

.text-2xl {
  font-size: var(--text-2xl);
}

.text-xl {
  font-size: var(--text-xl);
}

.text-lg {
  font-size: var(--text-lg);
}

.text-base {
  font-size: var(--text-base);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-xs {
  font-size: var(--text-xs);
}

/* Font Weights */
.font-normal {
  font-weight: var(--font-normal);
}

.font-medium {
  font-weight: var(--font-medium);
}

.font-semibold {
  font-weight: var(--font-semibold);
}

.font-bold {
  font-weight: var(--font-bold);
}

/* Text Colors */
.text-primary {
  color: var(--color-text-primary);
}

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

.text-muted {
  color: var(--color-text-muted);
}

.text-inverse {
  color: var(--color-text-inverse);
}

.text-pine {
  color: var(--color-pine);
}

.text-white {
  color: var(--color-white);
}

p {
  margin: 0 0 var(--space-md) 0;
}

p:last-child {
  margin-bottom: 0;
}

/* Layout Utilities */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease);
}

.btn:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-1px);
}

.btn-primary:active {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
  transform: translateY(0);
}

.btn-secondary {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Fix contrast ratio on dark backgrounds */
#pricing .btn-secondary {
  border-color: var(--color-mint);
  color: var(--color-mint);
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
}

.btn-secondary:active {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
  transform: translateY(0);
}

.btn-lg {
  padding: var(--space-md) var(--space-2xl);
  font-size: var(--text-lg);
}

/* Cards */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-neutral-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-normal) var(--ease);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

/* Benefit Cards */
.benefit-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  transition: all var(--duration-normal) var(--ease);
  cursor: default;
}

.benefit-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.benefit-card:active {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.benefit-card:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .benefit-card:hover {
    transform: none;
  }
  
  .benefit-card:active {
    transform: none;
  }
}

/* Accordion Component */
.accordion {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid var(--color-neutral-light);
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  width: 100%;
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color var(--duration-fast) var(--ease);
}

.accordion-header:hover {
  background-color: var(--color-neutral-light);
}

.accordion-header:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.accordion-header[aria-expanded="true"] {
  background-color: var(--color-primary-light);
}

.accordion-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.accordion-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-primary);
  transition: transform var(--duration-normal) var(--ease);
  flex-shrink: 0;
  margin-left: var(--space-md);
}

.accordion-header[aria-expanded="true"] .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  overflow: hidden;
  transition: max-height var(--duration-normal) var(--ease);
}

.accordion-content[aria-hidden="true"] {
  max-height: 0;
}

.accordion-content[aria-hidden="false"] {
  max-height: 500px;
}

.accordion-body {
  padding: 0 var(--space-lg) var(--space-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.accordion-body ul {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0 0;
}

.accordion-body li {
  padding: var(--space-xs) 0;
  padding-left: var(--space-lg);
  position: relative;
}

.accordion-body li::before {
  content: "•";
  color: var(--color-primary);
  font-weight: bold;
  position: absolute;
  left: 0;
}

/* Respect reduced motion for accordion */
@media (prefers-reduced-motion: reduce) {
  .accordion-content {
    transition: none;
  }
  
  .accordion-icon {
    transition: none;
  }
  
  .accordion-header[aria-expanded="true"] .accordion-icon {
    transform: none;
  }
}

/* Timeline Component */
.timeline-step {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity var(--duration-normal) var(--ease), 
              transform var(--duration-normal) var(--ease);
}

.timeline-step.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.timeline-step[data-step="2"] {
  transition-delay: 150ms;
}

.timeline-step[data-step="3"] {
  transition-delay: 300ms;
}

/* Respect reduced motion for timeline */
@media (prefers-reduced-motion: reduce) {
  .timeline-step {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  .timeline-step[data-step="2"],
  .timeline-step[data-step="3"] {
    transition-delay: 0ms;
  }
}

/* Industry Tabs Component */
.industry-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
  list-style: none;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}

.industry-tab {
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-neutral-light);
  color: var(--color-text-secondary);
  border: none;
  border-radius: var(--radius-full);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease);
  text-decoration: none;
  display: inline-block;
}

.industry-tab:hover {
  background-color: var(--color-primary-light);
  color: var(--color-text-primary);
}

.industry-tab:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.industry-tab[aria-selected="true"] {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.industry-tab[aria-selected="true"]:hover {
  background-color: var(--color-primary-hover);
}

.industry-content {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-neutral-light);
}

.industry-panel[aria-hidden="true"] {
  display: none;
}

.industry-panel[aria-hidden="false"] {
  display: block;
}

/* Header Styles */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-neutral-light);
}

.nav-link {
  display: inline-block;
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: var(--font-medium);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  transition: color var(--duration-fast) var(--ease);
}

.nav-link:hover {
  color: var(--color-primary);
}

/* Section Spacing */
.section {
  padding: var(--space-4xl) 0;
}

.section-lg {
  padding: var(--space-5xl) 0;
}

/* Background Colors */
.bg-surface {
  background-color: var(--color-surface);
}

.bg-neutral-light {
  background-color: var(--color-neutral-light);
}

.bg-primary {
  background-color: var(--color-primary);
}

.bg-orange-light {
  background-color: #fff7ed;
}

/* Flexbox Utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

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

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

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

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

.text-right {
  text-align: right;
}

/* Spacing Utilities */
.mb-2 { margin-bottom: var(--space-sm); }
.mb-4 { margin-bottom: var(--space-md); }
.mb-6 { margin-bottom: var(--space-lg); }
.mb-8 { margin-bottom: var(--space-xl); }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: var(--space-2xl); }
.mb-16 { margin-bottom: var(--space-3xl); }
.mb-20 { margin-bottom: 5rem; }

.mt-2 { margin-top: var(--space-sm); }
.mt-4 { margin-top: var(--space-md); }
.mt-6 { margin-top: var(--space-lg); }
.mt-8 { margin-top: var(--space-xl); }

.p-4 { padding: var(--space-md); }
.p-6 { padding: var(--space-lg); }
.p-8 { padding: var(--space-xl); }

.py-4 { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-6 { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-8 { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.py-12 { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.py-24 { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }

.px-4 { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-6 { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-8 { padding-left: var(--space-xl); padding-right: var(--space-xl); }

/* Grid Utilities */
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.gap-6 {
  gap: var(--space-lg);
}

.gap-8 {
  gap: var(--space-xl);
}

/* Responsive Design */
@media (min-width: 640px) {
  .sm\:text-6xl {
    font-size: var(--text-6xl);
  }
  
  .sm\:flex-row {
    flex-direction: row;
  }
  
  .sm\:gap-6 {
    gap: var(--space-lg);
  }
  
  .sm\:py-24 {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .md\:text-7xl {
    font-size: var(--text-7xl);
  }
  
  .md\:flex {
    display: flex;
  }
  
  .md\:hidden {
    display: none;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .lg\:text-6xl {
    font-size: var(--text-6xl);
  }
  
  .lg\:py-24 {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
  }
}

/* Screen Reader Only */
.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;
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Focus States */
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Misc Utilities */
.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.w-16 {
  width: 4rem;
}

.h-16 {
  height: 4rem;
}

.w-8 {
  width: 2rem;
}

.h-8 {
  height: 2rem;
}

.rounded-2xl {
  border-radius: var(--radius-xl);
}

.rounded {
  border-radius: var(--radius-md);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-full {
  border-radius: var(--radius-full);
}

.opacity-90 {
  opacity: 0.9;
}

.transition {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-timing-function: var(--ease);
  transition-duration: var(--duration-fast);
}

.duration-200 {
  transition-duration: 200ms;
}

.sticky {
  position: sticky;
}

.top-0 {
  top: 0;
}

.z-50 {
  z-index: 50;
}

.border {
  border-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-gray-200 {
  border-color: var(--color-neutral-light);
}

.hidden {
  display: none;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline-flex {
  display: inline-flex;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.space-y-4 > * + * {
  margin-top: var(--space-md);
}

.space-x-2 > * + * {
  margin-left: var(--space-sm);
}

.bg-gray-200 {
  background-color: #e5e7eb;
}

.bg-gray-300 {
  background-color: #d1d5db;
}

.text-gray-700 {
  color: var(--color-text-secondary);
}

.text-gray-600 {
  color: var(--color-text-muted);
}

.text-gray-400 {
  color: #9ca3af;
}

.text-gray-900 {
  color: var(--color-text-primary);
}

.bg-gray-900 {
  background-color: #111827;
}

.hover\:text-white:hover {
  color: var(--color-white);
}

.hover\:bg-gray-300:hover {
  background-color: #d1d5db;
}

.hover\:text-teal-700:hover {
  color: var(--color-primary-hover);
}

.hover\:text-teal-800:hover {
  color: var(--color-primary-active);
}

.hover\:bg-teal-700:hover {
  background-color: var(--color-primary-hover);
}

.hover\:bg-teal-900:hover {
  background-color: var(--color-primary);
}

.bg-teal-900 {
  background-color: var(--color-primary);
}

.text-teal-900 {
  color: var(--color-primary);
}

.border-teal-900 {
  border-color: var(--color-primary);
}

.bg-teal-100 {
  background-color: var(--color-primary-light);
}

.transform {
  transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
}

.left-1\/2 {
  left: 50%;
}

.top-1\/2 {
  top: 50%;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.overflow-y-auto {
  overflow-y: auto;
}

.focus\:absolute:focus {
  position: absolute;
}

.focus\:top-4:focus {
  top: 1rem;
}

.focus\:left-4:focus {
  left: 1rem;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* Mobile-first responsive design */
@media (min-width: 480px) {
  .xs\:text-6xl {
    font-size: var(--text-6xl);
  }
  
  .xs\:text-7xl {
    font-size: var(--text-7xl);
  }
}

@media (min-width: 1280px) {
  .xl\:text-7xl {
    font-size: var(--text-7xl);
  }
}

/* Template Background Mapping Classes */
/* Dark green curved pattern for #solutions */
.bg-solutions-pattern {
  background-color: var(--color-pine);
  background-image: var(--tpl-bg-waves-teal);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: var(--color-white);
}

.bg-solutions-pattern * {
  color: inherit;
}

.bg-solutions-pattern .text-secondary {
  color: rgba(255, 255, 255, 0.8);
}

.bg-solutions-pattern .text-primary {
  color: var(--color-mint);
}

/* White with subtle green lines for #how-it-works */
.bg-how-lines {
  background-color: var(--color-surface);
  background-image: var(--tpl-bg-light-lines);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Solid dark green for #capabilities */
.bg-capabilities-solid {
  background-color: var(--color-pine);
  color: var(--color-white);
}

.bg-capabilities-solid * {
  color: inherit;
}

.bg-capabilities-solid .text-secondary {
  color: rgba(255, 255, 255, 0.8);
}

.bg-capabilities-solid .accordion-header {
  color: var(--color-white);
}

.bg-capabilities-solid .accordion-header:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.bg-capabilities-solid .accordion-header[aria-expanded="true"] {
  background-color: rgba(255, 255, 255, 0.15);
}

.bg-capabilities-solid .accordion-content {
  background-color: transparent;
}

.bg-capabilities-solid .accordion-body {
  color: rgba(255, 255, 255, 0.9);
}

.bg-capabilities-solid .accordion {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.bg-capabilities-solid .accordion-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bg-capabilities-solid .accordion-icon {
  color: var(--color-white);
}

/* Ensure proper section padding for backgrounds */
.section {
  padding: 4rem 0;
}

@media (min-width: 992px) {
  .section {
    padding: 6rem 0;
  }
}

/* #solutions section fixes - ensure our overrides win (main.css should load LAST) */
#solutions { position: relative; overflow: hidden; }
/* #solutions .bg-overlay { position:absolute; inset:0; background: rgba(0,20,10,.30); pointer-events:none; } -- DISABLED for T08 integrations */
#solutions, #solutions h2, #solutions h3, #solutions h4, #solutions p, #solutions li { color: #fff; }

/* generic section spacing if template lacks it here */
.section { padding: 64px 0; }
@media (min-width: 992px) { .section { padding: 96px 0; } }

/* Old tab styles removed - using new industry-tab styles */

/* Clean up old solutions styles */

/* T08 - Solutions by Industry with template green background */
#solutions.bg-teal-900 {
  /* Use template's bg-teal-900 class for proper green background */
  color: white;
}

/* Industry Tabs Styling */
.industry-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.industry-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  color: white;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
  min-width: 160px;
}

.industry-tab:hover {
  background: rgba(190, 242, 100, 0.1);
  border-color: rgba(190, 242, 100, 0.4);
  transform: translateY(-2px);
}

.industry-tab.active,
.industry-tab[aria-selected="true"] {
  background: rgba(190, 242, 100, 0.2);
  border-color: #BFE3D0;
  color: #BFE3D0;
}

.tab-icon {
  font-size: 2rem;
  margin-bottom: 0.25rem;
}

.tab-text {
  font-size: 0.875rem;
  text-align: center;
  line-height: 1.2;
}

/* Industry Panel Styling */
.industry-panel {
  display: block;
}

.industry-panel.hidden,
.industry-panel[aria-hidden="true"] {
  display: none;
}

/* Feature Group Styling */
.feature-group {
  background: rgba(255, 255, 255, 0.05);
  padding: 2rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
  .industry-tab {
    padding: 1rem 1.5rem;
    min-width: 140px;
  }
  
  .tab-icon {
    font-size: 1.5rem;
  }
  
  .tab-text {
    font-size: 0.75rem;
  }
  
  .feature-group {
    padding: 1.5rem;
  }
}

#solutions::after { content: none !important; background: none !important; }

.solutions-grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 992px) { .solutions-grid { grid-template-columns: 1.15fr .85fr; gap: 2rem; } }
.solutions-media { position: relative; }
.solutions-media img { display: block; width: 100%; height: 100%; max-height: 520px; object-fit: cover; border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,.25); }

/* reset any rogue big check styles */
#solutions .list-check svg, #solutions .list-check img { width: 1rem; height: 1rem; margin-right: .5rem; flex: 0 0 1rem; }
#solutions .list-check .giant-check, #solutions .list-check .checkmark { all: unset; }

/* tidy list */
#solutions .list-check { list-style: none; padding-left: 0; margin: .25rem 0 0; }
#solutions .list-check li { display: flex; align-items: start; gap: .5rem; margin: .35rem 0; line-height: 1.35; color: #E8ECEB; }

/* use a small pseudo check if no inline SVG is present */
#solutions .list-check li::before {
  content: ""; display: inline-block; margin-top: .35rem;
  width: .6rem; height: .36rem; border: 2px solid #BFE3D0;
  border-top: 0; border-right: 0; transform: rotate(-45deg);
}

/* two columns of bullet groups */
#solutions .list-cols { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { #solutions .list-cols { grid-template-columns: 1fr 1fr; } }

/* headings on dark surface */
#solutions h3, #solutions h4 { color: #fff; }
#solutions p, #solutions li { color: #E8ECEB; }

/* T08: Grey background like Security section */
#solutions { filter: none !important; opacity: 1 !important; }
#solutions::before, #solutions::after { backdrop-filter: none !important; content: none !important; }

/* T08: dark text for grey background */
#solutions h2 { color: #1f2937; font-size: 3rem; font-weight: 600; }
#solutions p { color: #374151; font-size: 1.125rem; }
#solutions .integration-card span { color: #374151; }

/* T08: grid */
.integrations-grid{
  display:grid; gap:1rem; margin-top:1.25rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:900px){
  .integrations-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem; }
}

/* T08: cards for light grey background */
.integration-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:128px; padding:22px;
  background: #ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.integration-card:hover{ 
  transform: translateY(-2px); 
  background: #ffffff; 
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
.integration-card img{ max-height:40px; width:auto; margin-bottom:.5rem; display:block; }
.integration-card span{ font-weight:500; color: #374151; }

/* T08: brand logos - grey by default with filter */
.brand-logo {
  width: 40px;
  height: 40px;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
}

img.brand {
  width: 40px;
  height: 40px;
  margin-bottom: 0.5rem;
  transition: filter 0.2s ease;
  /* Make logos grey by default using grayscale filter */
  filter: grayscale(100%) brightness(0.7);
}

/* T08: hover effects - remove grey filter to show brand colors */
.integration-card:hover img.brand {
  filter: grayscale(0%) brightness(1);
}

/* T08: prevent any white panel covering the bg */
#solutions .container{ background:transparent !important; }

/* T08: remove any leftover giant checks or tab styles in this section */
#solutions::after{ content:none !important; }
#solutions [role="tab"], #solutions [role="tabpanel"]{ all:unset; }

/* T09: Overlay moved to #solutions, solid dark green for other sections */
/* #pricing: solid dark green, no overlay */
#pricing {
  background-color: var(--brand-dark-green) !important;
  background-image: none !important;
  color: #fff;
}
#pricing > .container { background: transparent !important; position: relative; z-index: 1; }

/* #solutions: dark green base with overlay */
#solutions {
  background-color: var(--brand-dark-green) !important;
  color: #fff;
  position: relative;
}
/* overlay sits behind content, is not clickable */
#solutions .section__bg, #solutions .pattern {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; background-color: transparent !important;
}
#solutions > .container { position: relative; z-index: 1; background: transparent !important; }
#solutions h2, #solutions p { color: #fff; }

/* Other sections: solid dark green */
#capabilities, #contact { 
  background: var(--brand-dark-green) !important;
  color: #fff;
  position: relative;
}
/* remove any overlay/pattern children accidentally left in these sections */
#capabilities .section__bg, #capabilities .pattern,
#contact .section__bg, #contact .pattern { display: none !important; }
/* never let inner wrappers paint white over the bg */
#capabilities .container, #contact .container { background: transparent !important; }

/* PRICING — kill stray decorations */
#pricing, #pricing * { background-image: none !important; }
#pricing::before, #pricing::after { content: none !important; background: none !important; }
#pricing .giant-check, #pricing .bg-checks, #pricing .hero-checks,
#pricing [class*="checkmark"], #pricing [data-checks] { display: none !important; }
#pricing svg:not(.list-check svg) { display: none !important; }
#pricing img:not(.list-check img) { display: none !important; }

/* keep brand color and readable type */
#pricing { background-color: var(--brand-dark-green) !important; color: #fff; position: relative; }
#pricing > .container { position: relative; z-index: 1; background: transparent !important; }

/* bullet checks INSIDE pricing lists should be small and inline (if any) */
#pricing .list-check { list-style: none; padding-left: 0; margin: .25rem 0 0; }
#pricing .list-check li { position: relative; padding-left: 1.1rem; margin: .35rem 0; line-height: 1.35; }
#pricing .list-check li::before {
  content: ""; position: absolute; left: 0; top: .55rem;
  width: .55rem; height: .32rem;
  border: 2px solid #BFE3D0; border-top: 0; border-right: 0; transform: rotate(-45deg);
}

/* PRICING CARDS ANIMATIONS & LAYOUT */
:root { --brand-dark-green:#0E3B2E; }
#pricing { background-color: var(--brand-dark-green) !important; color:#fff; }
#pricing > .container { background:transparent !important; position:relative; z-index:1; }

/* pricing cards grid */
#pricing .pricing-grid {
  display:grid; gap:1.25rem; margin-top:1.25rem;
  grid-template-columns:repeat(1,minmax(0,1fr));
}
@media (min-width:900px){ 
  #pricing .pricing-grid{ 
    grid-template-columns:repeat(2,minmax(0,1fr)); 
  } 
}

/* pricing card animations */
#pricing .plan-card {
  position: relative;
  padding: 3.5rem 2rem 2rem;
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
  backdrop-filter: blur(1px);
}
#pricing .plan-card:hover,
#pricing .plan-card:focus-within {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
}
#pricing .plan-card .plan-badge {
  display:inline-block; padding:4px 10px; border-radius:999px;
  background: rgba(180,255,180,.14); font-weight:600; font-size:.8rem;
}

/* overlay management */
#capabilities { background-color: var(--brand-dark-green) !important; color:#fff; position:relative; overflow:hidden; }
#capabilities [data-overlay="curves"], #capabilities .section__bg, #capabilities .pattern {
  position:absolute; inset:0; z-index:0; pointer-events:none; background:transparent !important;
}
#capabilities > .container { position:relative; z-index:1; background:transparent !important; }

#solutions { background-color: var(--brand-dark-green) !important; color:#fff; }
#solutions .section__bg, #solutions .pattern, #solutions [data-overlay="curves"] { display:none !important; }

/* clean out stray decorative checks in pricing */
#pricing img[data-overlay],
#pricing .section__bg, #pricing .pattern,
#pricing .bg-checks, #pricing .hero-checks, #pricing .giant-check { display:none !important; }

/* ---- GLOBAL CONTENT ICON GUARDRAIL ---- */
/* Only inside content sections/cards/lists — does NOT touch nav/hero logos */
.section .feature-card .icon,
.section .feature-item .icon,
.section .list-check .icon,
.section .stat .icon,
.section .card .icon,
.section [class*="icon-"]:not(header *),
.section svg[data-role="icon"],
.section svg.icon {
  width: clamp(20px, 2.2vw, 32px) !important;
  height: clamp(20px, 2.2vw, 32px) !important;
  flex: 0 0 auto;
  stroke-width: 1.75;
}

/* Small inline check for lists */
.section .list-check { list-style: none; margin: 0; padding: 0; }
.section .list-check li { position: relative; padding-left: 1.25rem; margin: .5rem 0; line-height: 1.4; }
.section .list-check li::before {
  content: ""; position: absolute; left: 0; top: .6rem; width: .55rem; height: .32rem;
  border: 2px solid #BFE3D0; border-top: 0; border-right: 0; transform: rotate(-45deg);
}

/* Kill any decorative "giant checks / patterns" from leaking into content sections */
.section .giant-check,
.section .bg-checks,
.section .hero-checks,
.section .pattern-checks,
.section [data-checks],
.section .section__bg--checks { display: none !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- REVEAL ANIMATIONS ---- */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Subtle hover on cards (used in this section too) */
.feature-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.62);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.feature-card:hover, .feature-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.12);
}

/* Optional two-column card grid */
.features-grid {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .features-grid { grid-template-columns: 1fr 1fr; } }

/* Title+icon row */
.feature-item { display: flex; align-items: flex-start; gap: .6rem; }
.feature-item .icon { margin-top: .2rem; }

/* Info panel at bottom */
.info-panel {
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.72);
  border-radius: 16px;
  padding: 1rem 1.25rem;
}

/* ---- FAQ: icon guard + layout ---- */
#faqs .giant-check, #faqs .bg-checks, #faqs .hero-checks, #faqs .pattern,
#faqs [data-checks], #faqs .section__bg--checks { display: none !important; }

#faqs .faq-accordion { display: grid; gap: 1rem; }
#faqs .faq-item {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
#faqs .faq-item:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.12); border-color: rgba(0,0,0,.12); }

#faqs .faq-q {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left; padding: 1rem 1.25rem; gap: .75rem;
  font-weight: 600; line-height: 1.35; background: transparent; border: 0; cursor: pointer;
}
#faqs .faq-q:focus-visible { outline: 2px solid #A0E59A; outline-offset: 3px; border-radius: 10px; }

#faqs .faq-q .chev {
  width: clamp(18px, 1.8vw, 24px); height: clamp(18px, 1.8vw, 24px);
  transition: transform .22s ease, opacity .22s ease; opacity: .82; flex: 0 0 auto;
}
#faqs .faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); opacity: 1; }

#faqs .faq-a { padding: 0 1.25rem 0; max-height: 0; overflow: hidden;
  transition: max-height .28s ease, padding .28s ease, opacity .28s ease; opacity: 0; }
#faqs .faq-a.is-open { padding: 0 1.25rem 1rem; opacity: 1; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #faqs .faq-a { transition: none; }
  #faqs .faq-q .chev { transition: none; }
}

/* FAQ sizing refinements */
#faqs .faq-q .q-text{
  /* comfortable, responsive scale */
  font-size: clamp(18px, 2.2vw, 22px) !important;
  line-height: 1.25;
  font-weight: 700;   /* keep strong but not shouty */
}
#faqs .faq-item { border-radius: 14px; }
#faqs .faq-q { padding: .9rem 1.15rem; }
#faqs .faq-a { font-size: clamp(15px, 1.7vw, 17px); line-height: 1.6; }

@media (min-width: 1100px){
  #faqs .faq-q .q-text{ font-size: 20px !important; }
}

/* Contact Form Styles */
#contact .error-message {
  display: none;
  color: #dc2626;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

#contact .error-message.show {
  display: block;
}

#contact .field-error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* Toast Notifications */
.toast {
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transform: translateX(400px);
  transition: transform 0.3s ease;
  min-width: 300px;
  max-width: 400px;
}

.toast.show {
  transform: translateX(0);
}

.toast.success {
  background-color: #10b981;
  color: white;
}

.toast.error {
  background-color: #ef4444;
  color: white;
}

.toast.info {
  background-color: #3b82f6;
  color: white;
}

/* ---- Contact section cleanup & style ---- */
#contact .section-title{ color: #fff !important; }
#contact, #contact *{ color-scheme: light; } /* ensures white-on-green is consistent */

#contact .contact-card .input{
  width: 100%;
  appearance: none;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: #fff;
  padding: .8rem .95rem;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#contact .contact-card .input::placeholder{ color: rgba(255,255,255,.6); }
#contact .contact-card .input:focus{
  outline: none;
  border-color: #A0E59A;
  box-shadow: 0 0 0 4px rgba(160,229,154,.25);
  background: rgba(0,0,0,.24);
}

#contact .btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; border-radius: 12px; padding:.85rem 1.1rem; font-weight:600;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 260ms cubic-bezier(0.4, 0, 0.2, 1), background 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
#contact .btn:hover{ 
  transform: scale(1.01); 
  box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1); 
}
#contact .btn:active{ 
  transform: scale(0.99); 
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}
#contact .btn-primary{ background:#A0E59A; color:#0E3B2E; }
#contact .btn-primary:hover{ background:#B6F0AE; }
#contact .btn-ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.25); }
#contact .btn-ghost:hover{ background:rgba(255,255,255,.08); }

/* Guard against giant icons in this section */
#contact .giant-check, #contact .calendar-hero, #contact .bg-checks, #contact .hero-checks,
#contact [data-checks], #contact .section__bg--checks, #contact svg[width*="200"], #contact svg[height*="200"]{
  display: none !important;
}

/* ---------- Smooth scrolling (CSS) ---------- */
html:focus-within { scroll-behavior: smooth; }

/* ---------- T13: Motion System - Reveal-on-scroll primitives ---------- */
:root{
  --reveal-dur: 260ms;
  --reveal-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --reveal-translate: 8px;
  --reveal-scale: .98;
}

@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Initial hidden state */
.reveal{
  opacity: 0;
  transform: translateY(var(--reveal-translate));
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease);
  will-change: transform, opacity;
}

/* Variants (opt-in via data-reveal) */
.reveal[data-reveal="up"]    { transform: translateY(var(--reveal-translate)); }
.reveal[data-reveal="down"]  { transform: translateY(calc(var(--reveal-translate) * -1)); }
.reveal[data-reveal="left"]  { transform: translateX(var(--reveal-translate)); }
.reveal[data-reveal="right"] { transform: translateX(calc(var(--reveal-translate) * -1)); }
.reveal[data-reveal="scale"] { transform: scale(var(--reveal-scale)); }

/* When in view */
.reveal.in-view{
  opacity: 1;
  transform: none;
}

/* Stagger helper: apply to a parent, then children with data-stagger */
.reveal-stagger > *[data-stagger]{
  transition-delay: calc(var(--stagger, 60ms) * var(--i, 0));
}

/* ---------- T13: Card & button motion polish ---------- */
.card, .contact-card, #pricing .plan-card, #solutions .integration-card{
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 260ms cubic-bezier(0.4, 0, 0.2, 1), background-color 260ms cubic-bezier(0.4, 0, 0.2, 1), border-color 260ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.card:hover,
.contact-card:hover,
#pricing .plan-card:hover,
#solutions .integration-card:hover{
  transform: scale(1.01);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.1);
}
.card:active,
.contact-card:active,
#pricing .plan-card:active,
#solutions .integration-card:active{
  transform: scale(0.99);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn{
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 260ms cubic-bezier(0.4, 0, 0.2, 1), background-color 260ms cubic-bezier(0.4, 0, 0.2, 1), border-color 260ms cubic-bezier(0.4, 0, 0.2, 1), color 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:hover{
  transform: scale(1.01);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.08);
}
.btn:active{ 
  transform: scale(0.99);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* ---- T13: CTA cards in contact sidebar ---- */
#contact .cta-card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 1.5rem;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 260ms cubic-bezier(0.4, 0, 0.2, 1), background-color 260ms cubic-bezier(0.4, 0, 0.2, 1), border-color 260ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
#contact .cta-card:hover{
  transform: scale(1.01);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.15);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
#contact .cta-card:active{ 
  transform: scale(0.99);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* ---- Security & Compliance: remove small green check bullets ---- */
#security .list-check li::before,
#security .icon-check-sm,
#security .check--sm,
#security .bullet-check,
#security .text-lime-400,
#security [class*="checkmark-small"]{
  display: none !important;
}

/* Remove left padding that was there for the green bullets */
#security .list-check li{ padding-left: 0 !important; }

/* Scheduler embed spacing inside the new scheduler card */
#contact .scheduler-card .scheduler-embed{ margin-top: .25rem; }
#contact .scheduler-card iframe{ width: 100%; border: 0; border-radius: 12px; }

/* ---- T13: Connect Stack Category Cards ---- */
#solutions .category-card {
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 260ms cubic-bezier(0.4, 0, 0.2, 1), background-color 260ms cubic-bezier(0.4, 0, 0.2, 1), border-color 260ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

#solutions .category-card:hover {
  transform: scale(1.01);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

#solutions .category-card:active {
  transform: scale(0.99);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Ensure proper spacing and contrast on dark background */
#solutions {
  background: linear-gradient(135deg, #134e4a 0%, #0f766e 100%);
}

#solutions .category-card h3 {
  color: #ffffff;
}

#solutions .category-card p {
  color: rgba(255, 255, 255, 0.8);
}