:root {
        --background: 0 0% 98%;
        --foreground: 220 20% 15%;
        --card: 0 0% 100%;
        --card-foreground: 220 20% 15%;
        --popover: 0 0% 100%;
        --popover-foreground: 220 20% 15%;
        --primary: 215 70% 35%;
        --primary-foreground: 0 0% 100%;
        --secondary: 220 15% 92%;
        --secondary-foreground: 220 20% 25%;
        --muted: 220 10% 94%;
        --muted-foreground: 220 10% 45%;
        --accent: 160 45% 40%;
        --accent-foreground: 0 0% 100%;
        --destructive: 0 72% 50%;
        --destructive-foreground: 0 0% 100%;
        --border: 220 15% 88%;
        --input: 220 15% 88%;
        --ring: 215 70% 35%;
        --radius: 0.375rem;
        --hero-bg: 220 25% 10%;
        --hero-foreground: 0 0% 100%;
        --section-alt: 220 15% 96%;
        --trust-bg: 215 70% 35%;
        --trust-foreground: 0 0% 100%;
        --tech-accent: 160 45% 40%;
        --tech-accent-foreground: 0 0% 100%;
        --shadow-2xs: 0 1px 2px 0 hsl(220 20% 15% / 0.03);
        --shadow-xs: 0 1px 3px 0 hsl(220 20% 15% / 0.04);
        --shadow-sm: 0 1px 3px 0 hsl(220 20% 15% / 0.06),
          0 1px 2px -1px hsl(220 20% 15% / 0.06);
        --shadow: 0 2px 4px 0 hsl(220 20% 15% / 0.06),
          0 1px 2px -1px hsl(220 20% 15% / 0.04);
        --shadow-md: 0 4px 6px -1px hsl(220 20% 15% / 0.06),
          0 2px 4px -2px hsl(220 20% 15% / 0.04);
        --shadow-lg: 0 10px 15px -3px hsl(220 20% 15% / 0.06),
          0 4px 6px -4px hsl(220 20% 15% / 0.04);
        --shadow-xl: 0 20px 25px -5px hsl(220 20% 15% / 0.06),
          0 8px 10px -6px hsl(220 20% 15% / 0.04);
        --shadow-2xl: 0 25px 50px -12px hsl(220 20% 15% / 0.15);
      }

      * {
        border-color: hsl(var(--border));
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        background-color: hsl(var(--background));
        color: hsl(var(--foreground));
        font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
        font-feature-settings: "cv02", "cv03", "cv04", "cv11";
        line-height: 1.6;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        line-height: 1.3;
        letter-spacing: -0.02em;
      }

      .section-padding {
        padding: 5rem 1.5rem;
      }

      @media (min-width: 768px) {
        .section-padding {
          padding: 7rem 2rem;
        }
      }

      @media (min-width: 1024px) {
        .section-padding {
          padding-left: 3rem;
          padding-right: 3rem;
        }
      }

      .container-wide {
        max-width: 72rem;
        margin-left: auto;
        margin-right: auto;
      }

      .section-alt {
        background-color: hsl(var(--section-alt));
      }

      .card-corporate {
        border-radius: var(--radius);
        border: 1px solid hsl(var(--border));
        background-color: hsl(var(--card));
        padding: 1.5rem;
        transition: all 200ms ease;
        box-shadow: var(--shadow-sm);
      }

      .card-corporate:hover {
        box-shadow: var(--shadow-md);
        border-color: hsl(var(--primary) / 0.2);
      }

      .btn-primary,
      .btn-secondary,
      .btn-hero,
      .btn-hero-outline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius);
        font-size: 0.875rem;
        font-weight: 600;
        padding: 0.75rem 1.5rem;
        transition: all 200ms ease;
      }

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

      .btn-primary:hover,
      .btn-hero:hover {
        background-color: hsl(var(--primary) / 0.9);
        transform: translateY(-1px);
      }

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

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

      .btn-secondary:hover {
        background-color: hsl(var(--muted));
        border-color: hsl(var(--primary) / 0.3);
      }

      .btn-hero-outline {
        border: 1px solid hsl(0 0% 100% / 0.3);
        background-color: transparent;
        color: hsl(0 0% 100%);
      }

      .btn-hero-outline:hover {
        background-color: hsl(0 0% 100% / 0.1);
        border-color: hsl(0 0% 100% / 0.5);
      }

      .btn-primary:focus-visible,
      .btn-secondary:focus-visible,
      .btn-hero:focus-visible,
      .btn-hero-outline:focus-visible,
      .focus-ring:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px hsl(var(--primary)),
          0 0 0 4px hsl(var(--background));
      }

      .wordmark {
        font-size: 1.25rem;
        font-weight: 700;
        letter-spacing: -0.03em;
      }

      .badge-tech {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        border-radius: 999px;
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem;
        font-weight: 500;
        background-color: hsl(var(--accent) / 0.1);
        color: hsl(var(--accent));
        border: 1px solid hsl(var(--accent) / 0.2);
      }

      .section-header {
        margin-bottom: 3rem;
        text-align: center;
      }

      .section-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: hsl(var(--foreground));
        letter-spacing: -0.025em;
      }

      @media (min-width: 768px) {
        .section-title {
          font-size: 1.875rem;
        }
      }

      @media (min-width: 1024px) {
        .section-title {
          font-size: 2.25rem;
        }
      }

      .section-subtitle {
        margin-top: 1rem;
        color: hsl(var(--muted-foreground));
        max-width: 42rem;
        margin-left: auto;
        margin-right: auto;
      }

      .grid-pattern {
        background-image: linear-gradient(
            to right,
            hsl(var(--border) / 0.3) 1px,
            transparent 1px
          ),
          linear-gradient(
            to bottom,
            hsl(var(--border) / 0.3) 1px,
            transparent 1px
          );
        background-size: 40px 40px;
      }

  .text-balance {
    text-wrap: balance;
  }

  /* Tailwind CDN fallback for hero background */
  .bg-hero {
    background-color: hsl(var(--hero-bg));
  }

  .bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  }

  .from-hero\/40 {
    --tw-gradient-from: hsl(var(--hero-bg) / 0.4) var(--tw-gradient-from-position);
    --tw-gradient-stops: var(--tw-gradient-from),
      var(--tw-gradient-to, hsl(var(--hero-bg) / 0));
  }

  .via-hero\/60 {
    --tw-gradient-to: hsl(var(--hero-bg) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from),
      hsl(var(--hero-bg) / 0.6) var(--tw-gradient-via-position),
      var(--tw-gradient-to);
  }

  .to-hero {
    --tw-gradient-to: hsl(var(--hero-bg)) var(--tw-gradient-to-position);
  }

  /* Tailwind CDN fallback for hero text colors */
  .text-hero-foreground {
    color: hsl(var(--hero-foreground));
  }

  .text-hero-foreground\/70 {
    color: hsl(var(--hero-foreground) / 0.7);
  }

  .text-white\/90 {
    color: hsl(0 0% 100% / 0.9);
  }

  .text-white {
    color: #fff;
  }

  /* Tailwind CDN fallback for primary/tech color utilities */
  .bg-primary {
    background-color: hsl(var(--primary));
  }

  .bg-primary\/90 {
    background-color: hsl(var(--primary) / 0.9);
  }

  .bg-primary\/10 {
    background-color: hsl(var(--primary) / 0.1);
  }

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

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

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

  .border-primary\/30 {
    border-color: hsl(var(--primary) / 0.3);
  }

  .ring-primary {
    --tw-ring-color: hsl(var(--primary));
  }

  .text-tech {
    color: hsl(var(--tech-accent));
  }

  .bg-tech\/10 {
    background-color: hsl(var(--tech-accent) / 0.1);
  }

  .border-white\/20 {
    border-color: hsl(0 0% 100% / 0.2);
  }

  .bg-white\/5 {
    background-color: hsl(0 0% 100% / 0.05);
  }

      .logo-track {
        display: flex;
        align-items: center;
        gap: 2rem;
        width: max-content;
        animation: marquee 25s linear infinite;
      }

      .logo-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        padding: 1.5rem 1rem;
        min-width: 160px;
      }

      @keyframes marquee {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }

      .prose h2 {
        margin-top: 2rem;
        font-size: 1.25rem;
        font-weight: 600;
        color: hsl(var(--foreground));
      }

      .prose p {
        margin-top: 1rem;
        color: hsl(var(--muted-foreground));
        line-height: 1.7;
      }

      .prose ul {
        margin-top: 1rem;
        padding-left: 1.5rem;
      }

      .prose ul li {
        margin-top: 0.5rem;
      }