:root {
  /* Colors */
  --bg-white: #ffffff;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --medical-blue: #0ea5e9;
  --surgical-green: #10b981;
  --surgical-green-light: #d1fae5;
  --blue-glow: rgba(14, 165, 233, 0.2);
  --green-glow: rgba(16, 185, 129, 0.2);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-bg: rgba(255, 255, 255, 0.7);

  /* Typography */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing */
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-main);
  background-color: var(--bg-white);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
}

/* Layout Structure */
.section-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

/* Narrative Section */
.narrative-section {
  max-width: 800px;
  text-align: center;
  animation: fadeIn 1s ease-out;
}

.narrative-text {
  font-size: 1.25rem;
  line-height: 1.9;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
  font-weight: 300;
}

.narrative-highlight {
  color: var(--medical-blue);
  font-weight: 500;
}

/* Visual System Container */
.orbital-system {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 800px; /* Square for circle */
  display: flex; /* Mobile fallback */
  flex-direction: column; /* Mobile fallback */
  align-items: center;
  justify-content: center;
  margin-top: var(--space-md);
}

/* Central Core */
.core-node {
  width: 160px;
  height: 160px;
  background: radial-gradient(circle at 30% 30%, #ffffff, var(--surgical-green-light));
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 50%;
  position: absolute; /* Desktop */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: 0 0 40px var(--green-glow), inset 0 0 20px #ffffff;
  animation: corePulse 4s infinite ease-in-out, fadeIn 1s ease-out;
  backdrop-filter: blur(8px);
}

.core-icon {
  width: 64px;
  height: 64px;
  background-color: var(--surgical-green);
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 12h3v8h6v-6h2v6h6v-8h3L12 2z"/></svg>'); /* Placeholder fallback */
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 12h3v8h6v-6h2v6h6v-8h3L12 2z"/></svg>');
  mask-repeat: no-repeat;
  mask-position: center;
  opacity: 0.8;
  margin-bottom: 8px;
}

.core-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--surgical-green);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Zone Nodes */
.zone-node {
  position: absolute;
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 20;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  opacity: 0;
}

.node-circle {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px -5px rgba(0,0,0,0.05);
  margin-bottom: 12px;
  transition: all 0.3s ease;
  position: relative;
}

.node-circle::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--medical-blue);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
}

.zone-node:hover .node-circle {
  transform: scale(1.1);
  box-shadow: 0 15px 40px -5px var(--blue-glow);
  background: #fff;
}

.zone-node:hover .node-circle::after {
  opacity: 0.5;
  transform: scale(1.2);
}

.node-icon {
  width: 32px;
  height: 32px;
  background-color: var(--medical-blue);
  opacity: 0.8;
}

/* Icon Placeholders using mask */
.icon-ot { mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.11 21 21 20.1 21 19V5C21 3.9 20.11 3 19 3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"/></svg>'); -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.11 21 21 20.1 21 19V5C21 3.9 20.11 3 19 3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"/></svg>'); }
.icon-scrub { mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M21 5H3V19H21V5ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17Z"/></svg>'); -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M21 5H3V19H21V5ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17Z"/></svg>'); }
.icon-prep { mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM12 18C8.69 18 6 15.31 6 12C6 8.69 8.69 6 12 6C15.31 6 18 8.69 18 12C18 15.31 15.31 18 12 18Z"/></svg>'); -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM12 18C8.69 18 6 15.31 6 12C6 8.69 8.69 6 12 6C15.31 6 18 8.69 18 12C18 15.31 15.31 18 12 18Z"/></svg>'); }
.icon-recovery { mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M7 13H17V17H7V13ZM19 13H21V19H3V13H5V5C5 3.9 5.9 3 7 3H17C18.1 3 19 3.9 19 5V13Z"/></svg>'); -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M7 13H17V17H7V13ZM19 13H21V19H3V13H5V5C5 3.9 5.9 3 7 3H17C18.1 3 19 3.9 19 5V13Z"/></svg>'); }
.icon-change { mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z"/></svg>'); -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z"/></svg>'); }
.icon-storage { mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M20 6H16V4C16 2.9 15.11 2 14 2H10C8.9 2 8 2.9 8 4V6H4C2.9 6 2 6.9 2 8V19C2 20.1 2.9 21 4 21H20C21.1 21 22 20.1 22 19V8C22 6.9 21.1 6 20 6ZM10 4H14V6H10V4ZM20 19H4V8H20V19Z"/></svg>'); -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M20 6H16V4C16 2.9 15.11 2 14 2H10C8.9 2 8 2.9 8 4V6H4C2.9 6 2 6.9 2 8V19C2 20.1 2.9 21 4 21H20C21.1 21 22 20.1 22 19V8C22 6.9 21.1 6 20 6ZM10 4H14V6H10V4ZM20 19H4V8H20V19Z"/></svg>'); }

.node-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  max-width: 100px;
}

/* Connector Lines */
.connector-line {
  position: absolute;
  top: 40px; /* Center of node circle */
  left: 40px; /* Center of node circle */
  height: 1px;
  background: linear-gradient(90deg, var(--medical-blue), transparent);
  transform-origin: 0 0;
  z-index: -1;
  opacity: 0.3;
  width: 0;
  animation: drawLine 1s ease-out forwards;
}

.zone-node:hover .connector-line {
  opacity: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--medical-blue), var(--surgical-green));
}


/* Positioning for Desktop (Circular) - 6 items */
/* Center is at 400px, 400px in 800x800 container */
/* Radius approx 280px */
/* Angles: 270 (Top), 330, 30, 90, 150, 210 */
/* But to start from top going clockwise: 
   1. Top (-90deg)
   2. Top Right (-30deg)
   3. Bottom Right (30deg)
   4. Bottom (90deg)
   5. Bottom Left (150deg)
   6. Top Left (210deg)
*/

@media (min-width: 1024px) {
  /* Item 1: Top */
  .zone-node:nth-child(2) { 
    top: 50px; left: 330px; 
    animation-delay: 0.2s;
  }
  .zone-node:nth-child(2) .connector-line {
    width: 200px; /* Distance to core edge roughly */
    transform: rotate(90deg);
  }

  /* Item 2: Top Right */
  .zone-node:nth-child(3) { 
    top: 170px; left: 580px; 
    animation-delay: 0.3s;
  }
  .zone-node:nth-child(3) .connector-line {
    width: 200px;
    transform: rotate(150deg);
  }

  /* Item 3: Bottom Right */
  .zone-node:nth-child(4) { 
    top: 480px; left: 580px; 
    animation-delay: 0.4s;
  }
  .zone-node:nth-child(4) .connector-line {
    width: 200px;
    transform: rotate(210deg);
  }

  /* Item 4: Bottom */
  .zone-node:nth-child(5) { 
    top: 600px; left: 330px; 
    animation-delay: 0.5s;
  }
  .zone-node:nth-child(5) .connector-line {
    width: 200px;
    transform: rotate(270deg);
  }

  /* Item 5: Bottom Left */
  .zone-node:nth-child(6) { 
    top: 480px; left: 80px; 
    animation-delay: 0.6s;
  }
  .zone-node:nth-child(6) .connector-line {
    width: 200px;
    transform: rotate(330deg);
  }

  /* Item 6: Top Left */
  .zone-node:nth-child(7) { 
    top: 170px; left: 80px; 
    animation-delay: 0.7s;
  }
  .zone-node:nth-child(7) .connector-line {
    width: 200px;
    transform: rotate(30deg); /* Actually 390deg/30deg */
  }
}

/* Tablet: Semi-circular or Arc */
@media (min-width: 768px) and (max-width: 1023px) {
  .orbital-system {
    height: 600px;
  }
  .core-node {
    top: 40%;
  }
  /* Arrange in arc below core */
  /* This is tricky with absolute, might just stack them in grid */
  .zone-node {
    position: relative;
    top: auto !important;
    left: auto !important;
    margin: 10px;
  }
  .orbital-system {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    padding-top: 200px; /* Space for core */
  }
  .connector-line { display: none; }
}

/* Mobile: Vertical Flow */
@media (max-width: 767px) {
  .orbital-system {
    height: auto;
    gap: var(--space-md);
    margin-top: var(--space-lg);
  }
  .core-node {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin-bottom: var(--space-md);
  }
  .zone-node {
    position: relative;
    top: auto !important;
    left: auto !important;
    flex-direction: row;
    width: 100%;
    max-width: 400px;
    padding: 10px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    animation-delay: 0.2s !important;
  }
  .node-circle {
    margin-bottom: 0;
    margin-right: 16px;
    width: 60px;
    height: 60px;
  }
  .connector-line { display: none; }
  .node-label {
    text-align: left;
    max-width: none;
  }
}

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

@keyframes corePulse {
  0% { box-shadow: 0 0 30px var(--green-glow); transform: translate(-50%, -50%) scale(1); }
  50% { box-shadow: 0 0 60px var(--green-glow); transform: translate(-50%, -50%) scale(1.05); }
  100% { box-shadow: 0 0 30px var(--green-glow); transform: translate(-50%, -50%) scale(1); }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes drawLine {
  from { width: 0; }
  to { width: 260px; }
}

@keyframes rotateRing {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}