:root {
  /* IBM Carbon Design Tokens */
  --carbon-gray-10: #f4f4f4;
  --carbon-gray-20: #e0e0e0;
  --carbon-gray-30: #c6c6c6;
  --carbon-gray-50: #8d8d8d;
  --carbon-gray-70: #525252;
  --carbon-gray-80: #393939;
  --carbon-gray-90: #262626;
  --carbon-gray-100: #161616;
  
  --carbon-blue-10: #edf5ff;
  --carbon-blue-20: #d0e2ff;
  --carbon-blue-40: #78a9ff;
  --carbon-blue-50: #4589ff;
  --carbon-blue-60: #0f62fe;
  --carbon-blue-70: #0043ce;
  --carbon-blue-80: #002d9c;
  --carbon-blue-90: #001d6c;
  
  --carbon-purple-20: #e8daff;
  --carbon-purple-40: #be95ff;
  --carbon-purple-60: #8a3ffc;
  --carbon-purple-70: #6929c4;
  
  --carbon-teal-20: #9ef0f0;
  --carbon-teal-40: #08bdba;
  --carbon-teal-60: #007d79;
  
  --carbon-green-20: #a7f0ba;
  --carbon-green-40: #42be65;
  --carbon-green-60: #198038;
  
  /* Helix Motion */
  --helix-productive-motion: cubic-bezier(0.2, 0, 0.38, 0.9);
  --helix-expressive-motion: cubic-bezier(0.4, 0.14, 0.3, 1);
  --helix-duration-fast-01: 70ms;
  --helix-duration-fast-02: 110ms;
  --helix-duration-moderate-01: 150ms;
  --helix-duration-moderate-02: 240ms;
  --helix-duration-slow-01: 400ms;
  --helix-duration-slow-02: 700ms;
  
  /* Typography Scale */
  --type-scale-01: 0.75rem;
  --type-scale-02: 0.875rem;
  --type-scale-03: 1rem;
  --type-scale-04: 1.125rem;
  --type-scale-05: 1.25rem;
  --type-scale-06: 1.5rem;
  --type-scale-07: 1.75rem;
  --type-scale-08: 2rem;
  --type-scale-09: 2.25rem;
  --type-scale-10: 2.625rem;
  --type-scale-11: 3rem;
  --type-scale-12: 3.375rem;
  
  /* Spacing Scale */
  --spacing-01: 0.125rem;
  --spacing-02: 0.25rem;
  --spacing-03: 0.5rem;
  --spacing-04: 0.75rem;
  --spacing-05: 1rem;
  --spacing-06: 1.5rem;
  --spacing-07: 2rem;
  --spacing-08: 2.5rem;
  --spacing-09: 3rem;
  --spacing-10: 4rem;
  --spacing-11: 5rem;
  --spacing-12: 6rem;
  
  /* Grid System */
  --grid-gutter: 2rem;
  --grid-margin: 1rem;
  --max-content-width: 1584px;
}

/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base Typography */
body {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--type-scale-03);
  line-height: 1.5;
  color: var(--carbon-gray-100);
  background-color: var(--carbon-gray-10);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Carbon Grid System */
.bx--grid {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
}

.bx--row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--grid-gutter) / -2);
}

.bx--col {
  position: relative;
  width: 100%;
  padding: 0 calc(var(--grid-gutter) / 2);
}

/* Responsive Columns */
@media (min-width: 672px) {
  .bx--col-sm-4 { flex: 0 0 100%; max-width: 100%; }
  .bx--col-sm-2 { flex: 0 0 50%; max-width: 50%; }
}

@media (min-width: 1056px) {
  .bx--col-md-8 { flex: 0 0 100%; max-width: 100%; }
  .bx--col-md-4 { flex: 0 0 50%; max-width: 50%; }
  .bx--col-md-3 { flex: 0 0 37.5%; max-width: 37.5%; }
  .bx--col-md-2 { flex: 0 0 25%; max-width: 25%; }
}

@media (min-width: 1312px) {
  .bx--col-lg-16 { flex: 0 0 100%; max-width: 100%; }
  .bx--col-lg-12 { flex: 0 0 75%; max-width: 75%; }
  .bx--col-lg-8 { flex: 0 0 50%; max-width: 50%; }
  .bx--col-lg-4 { flex: 0 0 25%; max-width: 25%; }
}

/* Navigation Header */
.carbon-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3rem;
  background-color: var(--carbon-gray-100);
  z-index: 8000;
  transition: transform var(--helix-duration-moderate-02) var(--helix-productive-motion);
}

.carbon-header__container {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 var(--spacing-05);
}

.carbon-header__logo {
  font-size: var(--type-scale-04);
  font-weight: 600;
  color: var(--carbon-gray-10);
  text-decoration: none;
  margin-right: var(--spacing-09);
}

.carbon-header__nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-07);
  margin-left: auto;
}

.carbon-header__nav-item {
  color: var(--carbon-gray-30);
  text-decoration: none;
  font-size: var(--type-scale-02);
  transition: color var(--helix-duration-fast-02) var(--helix-productive-motion);
}

.carbon-header__nav-item:hover {
  color: var(--carbon-gray-10);
}

/* Hero Section */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--carbon-blue-90) 0%, var(--carbon-purple-70) 100%);
  overflow: hidden;
  margin-top: 3rem;
}

.hero-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image: 
    repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.05) 35px, rgba(255,255,255,.05) 70px),
    repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255,255,255,.03) 35px, rgba(255,255,255,.03) 70px);
}

.hero-content {
  position: relative;
  z-index: 10;
  color: white;
  padding: var(--spacing-10) 0;
}

.hero-title {
  font-size: var(--type-scale-12);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: var(--spacing-06);
  animation: fadeInUp var(--helix-duration-slow-02) var(--helix-expressive-motion);
}

.hero-subtitle {
  font-size: var(--type-scale-07);
  font-weight: 300;
  opacity: 0.9;
  margin-bottom: var(--spacing-08);
  animation: fadeInUp var(--helix-duration-slow-02) var(--helix-expressive-motion) 200ms;
}

/* Content Sections */
.content-section {
  padding: var(--spacing-10) 0;
  position: relative;
}

.content-section:nth-child(even) {
  background-color: white;
}

.section-title {
  font-size: var(--type-scale-10);
  font-weight: 300;
  margin-bottom: var(--spacing-06);
  color: var(--carbon-gray-100);
}

.section-subtitle {
  font-size: var(--type-scale-05);
  color: var(--carbon-gray-70);
  margin-bottom: var(--spacing-08);
  max-width: 48rem;
}

/* Cards */
.carbon-card {
  background: white;
  border-radius: 0;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);
  padding: var(--spacing-06);
  height: 100%;
  transition: all var(--helix-duration-moderate-01) var(--helix-productive-motion);
  border-left: 4px solid transparent;
}

.carbon-card:hover {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

.carbon-card--level-0 { border-left-color: var(--carbon-gray-50); }
.carbon-card--level-1 { border-left-color: var(--carbon-gray-40); }
.carbon-card--level-2 { border-left-color: var(--carbon-blue-20); }
.carbon-card--level-3 { border-left-color: var(--carbon-blue-40); }
.carbon-card--level-4 { border-left-color: var(--carbon-blue-60); }
.carbon-card--level-5 { border-left-color: var(--carbon-purple-40); }
.carbon-card--level-6 { border-left-color: var(--carbon-purple-60); }
.carbon-card--level-7 { border-left-color: var(--carbon-teal-40); }
.carbon-card--level-8 { border-left-color: var(--carbon-teal-60); }
.carbon-card--level-9 { border-left-color: var(--carbon-green-40); }
.carbon-card--level-10 { border-left-color: var(--carbon-green-60); }

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-05);
}

.level-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: var(--type-scale-06);
  font-weight: 600;
  margin-right: var(--spacing-04);
}

.level-indicator--0 { background: var(--carbon-gray-20); color: var(--carbon-gray-70); }
.level-indicator--1 { background: var(--carbon-gray-30); color: var(--carbon-gray-80); }
.level-indicator--2 { background: var(--carbon-blue-20); color: var(--carbon-blue-70); }
.level-indicator--3 { background: var(--carbon-blue-40); color: white; }
.level-indicator--4 { background: var(--carbon-blue-60); color: white; }
.level-indicator--5 { background: var(--carbon-purple-40); color: white; }
.level-indicator--6 { background: var(--carbon-purple-60); color: white; }
.level-indicator--7 { background: var(--carbon-teal-40); color: white; }
.level-indicator--8 { background: var(--carbon-teal-60); color: white; }
.level-indicator--9 { background: var(--carbon-green-40); color: white; }
.level-indicator--10 { background: var(--carbon-green-60); color: white; }

.card-title {
  font-size: var(--type-scale-05);
  font-weight: 600;
  color: var(--carbon-gray-100);
}

.card-metrics {
  background: var(--carbon-gray-10);
  padding: var(--spacing-04);
  margin: var(--spacing-04) 0;
  border-radius: 4px;
}

.metric-item {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-02) 0;
  font-size: var(--type-scale-02);
}

.metric-label {
  color: var(--carbon-gray-70);
}

.metric-value {
  font-weight: 600;
  color: var(--carbon-gray-100);
}

/* Data Visualizations */
.chart-container {
  background: white;
  padding: var(--spacing-06);
  margin: var(--spacing-06) 0;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);
}

.chart-title {
  font-size: var(--type-scale-05);
  font-weight: 600;
  margin-bottom: var(--spacing-04);
  color: var(--carbon-gray-100);
}

.consciousness-spectrum {
  height: 400px;
  position: relative;
  background: linear-gradient(to right, 
    var(--carbon-gray-20) 0%,
    var(--carbon-blue-20) 20%,
    var(--carbon-blue-40) 40%,
    var(--carbon-purple-40) 60%,
    var(--carbon-teal-40) 80%,
    var(--carbon-green-40) 100%);
  border-radius: 8px;
  overflow: hidden;
}

.spectrum-labels {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.spectrum-label {
  font-size: var(--type-scale-01);
  color: var(--carbon-gray-70);
  text-align: center;
  flex: 1;
}

/* Interactive Elements */
.assessment-tool {
  background: var(--carbon-gray-10);
  padding: var(--spacing-08);
  border-radius: 8px;
  margin: var(--spacing-08) 0;
}

.assessment-form {
  display: grid;
  gap: var(--spacing-05);
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  font-size: var(--type-scale-02);
  font-weight: 500;
  color: var(--carbon-gray-100);
  margin-bottom: var(--spacing-02);
}

.form-slider {
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--carbon-gray-30);
  outline: none;
  transition: background var(--helix-duration-fast-02);
}

.form-slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--carbon-blue-60);
  cursor: pointer;
  border-radius: 50%;
  transition: all var(--helix-duration-fast-02);
}

.form-slider:hover {
  background: var(--carbon-gray-40);
}

.form-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Data Tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);
}

.data-table th {
  background: var(--carbon-gray-20);
  padding: var(--spacing-04);
  text-align: left;
  font-weight: 600;
  font-size: var(--type-scale-02);
  color: var(--carbon-gray-100);
  border-bottom: 1px solid var(--carbon-gray-30);
}

.data-table td {
  padding: var(--spacing-04);
  border-bottom: 1px solid var(--carbon-gray-20);
  font-size: var(--type-scale-02);
}

.data-table tr:hover {
  background: var(--carbon-gray-10);
}

/* Progress Indicators */
.progress-ring {
  transform: rotate(-90deg);
}

.progress-ring__circle {
  stroke: var(--carbon-gray-30);
  fill: transparent;
  stroke-width: 4;
}

.progress-ring__progress {
  stroke: var(--carbon-blue-60);
  fill: transparent;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--helix-duration-slow-01) var(--helix-productive-motion);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all var(--helix-duration-slow-01) var(--helix-productive-motion);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Typography */
@media (max-width: 671px) {
  .hero-title { font-size: var(--type-scale-10); }
  .hero-subtitle { font-size: var(--type-scale-05); }
  .section-title { font-size: var(--type-scale-08); }
}

/* Print Styles */
@media print {
  .carbon-header,
  .hero-pattern,
  .assessment-tool { display: none; }
  
  body { background: white; }
  .content-section { page-break-inside: avoid; }
}