/* CSS Variables */
    :root {
      --font-size: 14px;
      --text-xs: 0.75rem;
      --text-sm: 0.875rem;
      --text-base: 1rem;
      --text-lg: 1.125rem;
      --text-xl: 1.25rem;
      --text-2xl: 1.5rem;
      --text-3xl: 1.875rem;
      --text-4xl: 2.25rem;
      --text-5xl: 3rem;
      --text-6xl: 3.75rem;
      --background: #ffffff;
      --foreground: #1a1a1a;
      --card: #ffffff;
      --card-foreground: #1a1a1a;
      --primary: #00ADA0;
      --primary-foreground: #ffffff;
      --secondary: #f1f5f9;
      --secondary-foreground: #00ADA0;
      --muted: #ececf0;
      --muted-foreground: #6b7280;
      --accent: #e9ebef;
      --accent-foreground: #00ADA0;
      --border: rgba(0, 0, 0, 0.1);
      --input-background: #f3f3f5;
      --font-weight-medium: 500;
      --font-weight-normal: 400;
      --radius: 0.125rem;
    }

    /* Reset and Base Styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      font-size: var(--font-size);
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background-color: var(--background);
      color: var(--foreground);
      line-height: 1.6;
    }

    /* Typography */
    h1 {
      font-size: var(--text-2xl);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    h2 {
      font-size: var(--text-xl);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    h3 {
      font-size: var(--text-lg);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    h4 {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    p {
      font-size: var(--text-base);
      font-weight: var(--font-weight-normal);
      line-height: 1.5;
    }

    /* Utility Classes */
    .container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 1rem;
    }

    .max-w-7xl {
      max-width: 1280px;
    }

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

    .px-4 { padding-left: 1rem; padding-right: 1rem; }
    .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .px-8 { padding-left: 2rem; padding-right: 2rem; }
    .px-12 { padding-left: 3rem; padding-right: 3rem; }
    .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
    .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
    .py-16 { padding-top: 4rem; padding-bottom: 4rem; }
    .py-20 { padding-top: 5rem; padding-bottom: 5rem; }
    .p-6 { padding: 1.5rem; }
    .p-8 { padding: 2rem; }
    .p-12 { padding: 3rem; }

    .mb-4 { margin-bottom: 1rem; }
    .mb-6 { margin-bottom: 1.5rem; }
    .mb-8 { margin-bottom: 2rem; }
    .mb-12 { margin-bottom: 3rem; }
    .mb-16 { margin-bottom: 4rem; }
    .mb-20 { margin-bottom: 5rem; }
    .mt-8 { margin-top: 2rem; }
    .mt-12 { margin-top: 3rem; }
    .mt-20 { margin-top: 5rem; }

    .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)); }

    .flex {
      display: flex;
    }

    .flex-shrink-0 {
      flex-shrink: 0;
    }

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

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

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

    .space-x-3 > * + * {
      margin-left: 0.75rem;
    }

    .space-x-4 > * + * {
      margin-left: 1rem;
    }

    .space-x-6 > * + * {
      margin-left: 1.5rem;
    }

    .space-x-8 > * + * {
      margin-left: 2rem;
    }

    .space-y-4 > * + * {
      margin-top: 1rem;
    }

    .space-y-6 > * + * {
      margin-top: 1.5rem;
    }

    .space-y-8 > * + * {
      margin-top: 2rem;
    }

    .space-y-16 > * + * {
      margin-top: 4rem;
    }

    .gap-8 {
      gap: 2rem;
    }

    .gap-12 {
      gap: 3rem;
    }

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

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

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

    .text-white {
      color: white;
    }

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

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

    .bg-white {
      background-color: white;
    }

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

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

    .border-b {
      border-bottom: 1px solid var(--border);
    }

    .border {
      border: 1px solid var(--border);
    }

    .border-border {
      border-color: var(--border);
    }

    .rounded {
      border-radius: calc(var(--radius) + 4px);
    }

    .rounded-lg {
      border-radius: calc(var(--radius) + 2px);
    }

    .shadow-lg {
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    .w-full { width: 100%; }
    .w-auto { width: auto; }
    .h-10 { height: 2.5rem; }
    .h-16 { height: 4rem; }
    .h-96 { height: 24rem; }
    .h-screen { height: 100vh; }
    .min-h-screen { min-height: 100vh; }

    .sticky {
      position: sticky;
    }

    .relative {
      position: relative;
    }

    .absolute {
      position: absolute;
    }

    .top-0 {
      top: 0;
    }

    .left-0 {
      left: 0;
    }

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

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

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

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

    .object-cover {
      object-fit: cover;
    }

    .max-w-2xl {
      max-width: 42rem;
    }

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

    /* Button Styles */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.5rem 1rem;
      border-radius: calc(var(--radius) - 2px);
      font-weight: var(--font-weight-medium);
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
    }

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

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

    .btn-secondary {
      background-color: var(--secondary);
      color: var(--secondary-foreground);
      border: 1px solid var(--primary);
    }

    .btn-secondary:hover {
      background-color: var(--primary);
      color: var(--primary-foreground);
    }

    .btn-lg {
      padding: 0.75rem 2rem;
      font-size: var(--text-lg);
    }

    .btn-sm {
      padding: 0.375rem 0.75rem;
      font-size: var(--text-sm);
    }

    /* Card Styles */
    .card {
      background-color: var(--card);
      border: 1px solid var(--border);
      border-radius: calc(var(--radius) + 4px);
      padding: 1.5rem;
      transition: box-shadow 0.3s;
    }

    .card:hover {
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    /* Header Styles */
    .nav-button {
      padding: 1rem;
      background: none;
      border: none;
      cursor: pointer;
      transition: color 0.2s;
      color: var(--muted-foreground);
      text-decoration: none;
      border-bottom: 2px solid transparent;
    }

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

    .nav-button.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
    }

    /* Hero Section */
    .hero {
      position: relative;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }

    .hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      text-align: center;
      max-width: 56rem;
      margin: 0 auto;
      padding: 0 1rem;
    }

    .hero-title {
      font-size: clamp(2rem, 5vw, 4rem);
      font-weight: bold;
      color: white;
      margin-bottom: 1.5rem;
    }

    .hero-subtitle {
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 2rem;
      max-width: 32rem;
      margin-left: auto;
      margin-right: auto;
    }

    /* Service Grid */
    .service-icon {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    /* Footer */
    .footer {
      background-color: var(--primary);
      color: white;
      padding: 4rem 0;
    }

    .footer-content {
      opacity: 0.8;
    }

    .footer-link {
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer-link:hover {
      color: white;
    }

    /* Responsive Design */
    @media (min-width: 640px) {
      .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
      
      .sm\:block {
        display: block;
      }

      .sm\:hidden {
        display: none;
      }

      .sm\:flex {
        display: flex;
      }

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

    @media (min-width: 768px) {
      .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

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

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

      .md\:flex {
        display: flex;
      }

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

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

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

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

    @media (min-width: 1024px) {
      .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
      }

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

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

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

      .lg\:col-start-1 {
        grid-column-start: 1;
      }

      .lg\:col-start-2 {
        grid-column-start: 2;
      }

      .lg\:row-start-1 {
        grid-row-start: 1;
      }

      .lg\:grid-flow-col-dense {
        grid-auto-flow: column dense;
      }
    }