:root {
        color-scheme: light;
      }
      html,
      body {
        background: #efefef;
      }
      body {
        font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #0b0b0c;
        text-rendering: optimizeLegibility;
      }
      .font-display {
        letter-spacing: -0.025em;
      }

      /* Reveal animations */
      .reveal {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
        transition:
          opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
          transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
        will-change: opacity, transform;
      }
      .reveal.in {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
      .reveal-delay-1 {
        transition-delay: 80ms;
      }
      .reveal-delay-2 {
        transition-delay: 160ms;
      }
      .reveal-delay-3 {
        transition-delay: 240ms;
      }
      .reveal-delay-4 {
        transition-delay: 320ms;
      }
      .reveal-delay-5 {
        transition-delay: 400ms;
      }
      /* Subtle hero grid background */
      .hero-grid {
        background-image:
          linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
        background-size: 56px 56px;
        background-position: -1px -1px;
        -webkit-mask-image: radial-gradient(
          ellipse 70% 60% at 50% 40%,
          #000 30%,
          transparent 75%
        );
        mask-image: radial-gradient(
          ellipse 70% 60% at 50% 40%,
          #000 30%,
          transparent 75%
        );
      }
      .footer-grid {
        background-image:
          linear-gradient(to right, rgba(0, 0, 0, 0.06) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
        background-size: 64px 56px;
        -webkit-mask-image: radial-gradient(
          ellipse 60% 60% at 50% 60%,
          #000 30%,
          transparent 75%
        );
        mask-image: radial-gradient(
          ellipse 60% 60% at 50% 60%,
          #000 30%,
          transparent 75%
        );
      }
      /* Custom scrollbar - subtle */
      ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }
      ::-webkit-scrollbar-track {
        background: transparent;
      }
      ::-webkit-scrollbar-thumb {
        background: #d4d4d4;
        border-radius: 8px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #b4b4b4;
      }
      /* Marquee for clients */
      @keyframes drift {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }
      /* Testimonial track */
      .t-track {
        transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
      }
      /* Faux device chrome */
      .dev-dot {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        display: inline-block;
      }
      /* Tile placeholders */
      .stripes {
        background-image: repeating-linear-gradient(
          135deg,
          rgba(0, 0, 0, 0.04) 0 8px,
          transparent 8px 18px
        );
      }
      /* Number tabular */
      .tabular {
        font-variant-numeric: tabular-nums;
      }
      /* Hide scrollbar where needed */
      .no-scroll::-webkit-scrollbar {
        display: none;
      }
      /* Logo italic */
      .wordmark {
        font-weight: 800;
        font-style: italic;
        letter-spacing: -0.02em;
      }
      /* Visually-hidden helper for SEO/a11y rich text */
      .sr-only {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }