/* Custom CSS Variables - Design System */
    :root {
      /* Bright cyan as primary color */
      --color-primary: 195 100% 43%;
      --color-primary-foreground: 0 0% 100%;
      
      /* Trust blue as secondary */
      --color-secondary: 210 35% 55%;
      --color-secondary-foreground: 0 0% 100%;
      
      /* Warm, healing background */
      --color-background: 40 30% 97%;
      --color-foreground: 220 15% 20%;
      
      /* Card colors */
      --color-card: 0 0% 100%;
      --color-card-foreground: 220 15% 20%;
      
      /* Muted warm tones */
      --color-muted: 40 20% 92%;
      --color-muted-foreground: 220 10% 45%;
      
      /* Accent - deeper cyan */
      --color-accent: 195 100% 35%;
      --color-accent-foreground: 0 0% 100%;
      
      /* Borders */
      --color-border: 40 15% 88%;
      
      /* Border radius */
      --radius: 0.75rem;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background-color: hsl(var(--color-background));
      color: hsl(var(--color-foreground));
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    
    h1, h2, h3, h4, h5, h6 {
      font-weight: 600;
      letter-spacing: -0.025em;
    }
    
    h1 {
      font-size: 2.5rem !important;
      line-height: 1.1 !important;
    }
    
    h2 {
      font-size: 2rem !important;
      line-height: 1.2 !important;
    }
    
    h3 {
      font-size: 1.5rem !important;
      line-height: 1.3 !important;
    }
    
    @media (min-width: 768px) {
      h1 {
        font-size: 3.5rem !important;
      }
      h2 {
        font-size: 2.75rem !important;
      }
      h3 {
        font-size: 1.75rem !important;
      }
    }
    
    @media (min-width: 1024px) {
      h1 {
        font-size: 4.5rem !important;
      }
      h2 {
        font-size: 3.5rem !important;
      }
      h3 {
        font-size: 2rem !important;
      }
    }

    .section-padding {
      padding: 3rem 0;
    }

    @media (min-width: 768px) {
      .section-padding {
        padding: 5rem 0;
      }
    }
    
    .smooth-transition {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      white-space: nowrap;
      border-radius: 0.375rem;
      font-size: 0.875rem;
      font-weight: 500;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      border: none;
      outline: none;
    }
    
    .btn-primary {
      background-color: hsl(var(--color-primary));
      color: hsl(var(--color-primary-foreground));
      padding: 0.5rem 1rem;
    }
    
    .btn-primary:hover {
      background-color: hsl(var(--color-primary) / 0.9);
    }
    
    .btn-accent {
      background-color: hsl(var(--color-accent));
      color: hsl(var(--color-accent-foreground));
      padding: 0.5rem 1rem;
    }
    
    .btn-accent:hover {
      background-color: hsl(var(--color-accent) / 0.9);
    }
    
    .btn-outline {
      background-color: hsl(var(--color-card));
      color: hsl(var(--color-foreground));
      border: 1px solid hsl(var(--color-border));
      padding: 0.5rem 1rem;
    }
    
    .btn-outline:hover {
      background-color: hsl(var(--color-muted));
    }
    
    .btn-lg {
      padding: 0.75rem 2rem;
      font-size: 1.125rem;
    }
    
    .card {
      background-color: hsl(var(--color-card));
      color: hsl(var(--color-card-foreground));
      border-radius: calc(var(--radius) + 0.25rem);
      box-shadow: 0 2px 12px -2px hsl(220 15% 20% / 0.06);
    }
    
    .card:hover {
      box-shadow: 0 4px 20px -4px hsl(195 100% 43% / 0.08);
    }
    
    .bg-gradient-subtle {
      background: linear-gradient(180deg, hsl(40 30% 97%) 0%, hsl(40 20% 95%) 100%);
    }
    
    .shadow-soft {
      box-shadow: 0 4px 20px -4px hsl(195 100% 43% / 0.08);
    }
    
    .accordion-item {
      border: 1px solid hsl(var(--color-border));
      border-radius: calc(var(--radius) + 0.25rem);
      background-color: hsl(var(--color-card));
      margin-bottom: 1rem;
      overflow: hidden;
    }
    
    .accordion-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.5rem;
      font-weight: 600;
      text-align: left;
      background: none;
      border: none;
      cursor: pointer;
      color: hsl(var(--color-foreground));
      transition: all 0.2s;
    }
    
    .accordion-trigger:hover {
      color: hsl(var(--color-primary));
    }
    
    .accordion-trigger svg {
      width: 1rem;
      height: 1rem;
      transition: transform 0.2s;
      flex-shrink: 0;
    }
    
    .accordion-trigger.active svg {
      transform: rotate(180deg);
    }
    
    .accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out, padding 0.3s ease-out;
      padding: 0 1.5rem;
    }
    
    .accordion-content.active {
      max-height: 500px;
      padding: 0 1.5rem 1.5rem;
    }
    
    .accordion-content p {
      color: hsl(var(--color-muted-foreground));
    }