Hero Section with Feature Cards, Image & Stats

<section class="sm:px-6 lg:px-8 sm:mt-28 lg:mt-32 sm:mb-16 lg:mb-20 max-w-7xl mt-24 mr-auto mb-12 ml-auto pr-4 pl-4">
  <!-- Top feature chips -->
  <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-4 sm:mb-6 md:mb-8">
    <!-- Card 1 -->
    <div
      class="border-gradient animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.05s_both] flex flex-col animate bg-neutral-900/40 h-48 sm:h-56 lg:h-64 rounded-[24px] sm:rounded-[32px] p-4 sm:p-5 backdrop-blur-lg justify-between">
      <div class="flex items-center">
        <span class="inline-flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-xl sm:rounded-2xl bg-white/10 backdrop-blur flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="sm:w-5 sm:h-5" style="color: #e5e7eb;" data-icon-set="solar" data-solar="bolt-circle-line-duotone"><g fill="none" stroke="currentColor" stroke-width="1.5" class=""><path d="m9.213 10.174l2.015-1.605c1.302-1.037 1.953-1.556 2.363-1.3s.197 1.05-.228 2.636l-.04.15c-.154.572-.23.858-.096 1.086l.007.012c.14.226.438.306 1.033.465c1.072.287 1.608.43 1.702.804l.004.019c.083.376-.34.712-1.185 1.386l-2.015 1.604c-1.303 1.038-1.954 1.556-2.364 1.3s-.196-1.05.229-2.636l.04-.15c.153-.571.23-.857.095-1.086l-.007-.012c-.14-.225-.438-.305-1.033-.465c-1.072-.287-1.608-.43-1.702-.804l-.004-.019c-.083-.375.34-.712 1.186-1.385Z" class=""></path><path d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12Z" opacity=".5" class=""></path></g></svg>
              </span>
      </div>
      <div class="">
        <h3 class="mt-1 sm:mt-2 text-xs sm:text-sm font-semibold tracking-tight text-white">Setup in minutes</h3>
        <p class="mt-1 sm:mt-2 text-[10px] sm:text-xs text-neutral-400 leading-relaxed">Drop-in SDK, no backend
          rewrites.</p>
      </div>
    </div>

    <!-- Card 2 -->
    <div
      class="border-gradient animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] flex flex-col animate bg-neutral-900/40 h-48 sm:h-56 lg:h-64 rounded-[24px] sm:rounded-[32px] p-4 sm:p-5 backdrop-blur-lg justify-between">
      <div class="flex items-center">
        <span class="inline-flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-xl sm:rounded-2xl bg-white/10 backdrop-blur flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="sm:w-5 sm:h-5" style="color: #e5e7eb;" data-icon-set="solar" data-solar="chart-2-line-duotone"><g fill="none" stroke="currentColor" stroke-width="1.5" class=""><path stroke-linecap="round" stroke-linejoin="round" d="M3 22h18" opacity=".5" class=""></path><path d="M3 11c0-.943 0-1.414.293-1.707S4.057 9 5 9s1.414 0 1.707.293S7 10.057 7 11v6c0 .943 0 1.414-.293 1.707S5.943 19 5 19s-1.414 0-1.707-.293S3 17.943 3 17zm7-4c0-.943 0-1.414.293-1.707S11.057 5 12 5s1.414 0 1.707.293S14 6.057 14 7v10c0 .943 0 1.414-.293 1.707S12.943 19 12 19s-1.414 0-1.707-.293S10 17.943 10 17zm7-3c0-.943 0-1.414.293-1.707S18.057 2 19 2s1.414 0 1.707.293S21 3.057 21 4v13c0 .943 0 1.414-.293 1.707S19.943 19 19 19s-1.414 0-1.707-.293S17 17.943 17 17z" class=""></path></g></svg>
              </span>
      </div>
      <div class="">
        <h3 class="mt-1 sm:mt-2 text-xs sm:text-sm font-semibold tracking-tight text-white">Track anomalies</h3>
        <p class="mt-1 sm:mt-2 text-[10px] sm:text-xs text-neutral-400 leading-relaxed">Real‑time behavior signals.</p>
      </div>
    </div>

    <!-- Card 3 -->
    <div
      class="border-gradient animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.15s_both] flex flex-col animate bg-neutral-900/40 h-48 sm:h-56 lg:h-64 rounded-[24px] sm:rounded-[32px] p-4 sm:p-5 backdrop-blur-lg justify-between">
      <div class="flex items-center">
        <span class="inline-flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-xl sm:rounded-2xl bg-white/10 backdrop-blur flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="sm:w-5 sm:h-5" style="color: #e5e7eb;" data-icon-set="solar" data-solar="wallet-money-line-duotone"><g fill="none" stroke="currentColor" class=""><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 9h4" opacity=".5" class=""></path><path stroke-width="1.5" d="M20.833 10h-2.602C16.446 10 15 11.343 15 13s1.447 3 3.23 3h2.603c.084 0 .125 0 .16-.002c.54-.033.97-.432 1.005-.933c.002-.032.002-.071.002-.148v-3.834c0-.077 0-.116-.002-.148c-.036-.501-.465-.9-1.005-.933c-.035-.002-.076-.002-.16-.002Z" class=""></path><path stroke-width="1.5" d="M20.965 10c-.078-1.872-.328-3.02-1.137-3.828C18.657 5 16.771 5 13 5h-3C6.229 5 4.343 5 3.172 6.172S2 9.229 2 13s0 5.657 1.172 6.828S6.229 21 10 21h3c3.771 0 5.657 0 6.828-1.172c.809-.808 1.06-1.956 1.137-3.828" class=""></path><path stroke-linecap="round" stroke-width="1.5" d="m6 5l3.735-2.477a3.24 3.24 0 0 1 3.53 0L17 5" opacity=".5" class=""></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.991 13H18" opacity=".5" class=""></path></g></svg>
              </span>
      </div>
      <div class="">
        <h3 class="mt-1 sm:mt-2 text-xs sm:text-sm font-semibold tracking-tight text-white">Optimized spend</h3>
        <p class="mt-1 sm:mt-2 text-[10px] sm:text-xs text-neutral-400 leading-relaxed">Smart policies reduce risk cost.
        </p>
      </div>
    </div>

    <!-- Card 4 -->
    <div
      class="border-gradient animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] flex flex-col animate bg-neutral-900/40 h-48 sm:h-56 lg:h-64 rounded-[24px] sm:rounded-[32px] p-4 sm:p-5 backdrop-blur-lg justify-between">
      <div class="flex items-center">
        <span class="inline-flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-xl sm:rounded-2xl bg-white/10 backdrop-blur flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="sm:w-5 sm:h-5" style="color: #e5e7eb;" data-icon-set="solar" data-solar="code-circle-line-duotone"><g fill="none" stroke="currentColor" stroke-width="1.5" class=""><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10Z" opacity=".5" class=""></path><path stroke-linecap="round" d="m15.5 9l.172.172c1.333 1.333 2 2 2 2.828s-.667 1.495-2 2.828L15.5 15m-2.206-7.83L12 12l-1.294 4.83M8.5 9l-.172.172c-1.333 1.333-2 2-2 2.828s.667 1.495 2 2.828L8.5 15" class=""></path></g></svg>
              </span>
      </div>
      <div class="">
        <h3 class="mt-1 sm:mt-2 text-xs sm:text-sm font-semibold tracking-tight text-white">Open core</h3>
        <p class="mt-1 sm:mt-2 text-[10px] sm:text-xs text-neutral-400 leading-relaxed">Transparent by default.</p>
      </div>
    </div>
  </div>

  <!-- Hero -->
  <div
    class="grid md:grid-cols-2 gap-3 sm:gap-4 md:gap-6 border-gradient p-3 sm:p-4 animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.25s_both] animate bg-neutral-900/40 rounded-[24px] sm:rounded-[32px] backdrop-blur-lg items-stretch">
    <!-- Visual -->
    <div
      class="relative overflow-hidden rounded-[20px] sm:rounded-[24px] md:rounded-[32px] min-h-[240px] sm:min-h-[280px] md:min-h-[520px]">
      <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3c47338a-7702-4975-a53f-3bcd74163776_1600w.webp" alt="Abstract face render" class="absolute inset-0 h-full w-full object-cover" loading="eager" style="">
      <div class="bg-gradient-to-t from-black/60 via-black/10 to-transparent absolute top-0 right-0 bottom-0 left-0">
      </div>
      <div
        class="pointer-events-none absolute inset-0 opacity-20 [background-image:linear-gradient(rgba(255,255,255,0.06)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.06)_1px,transparent_1px)]; [background-size:28px_28px]">
      </div>
      <div class="absolute left-3 sm:left-4 bottom-3 sm:bottom-4 flex items-center gap-2">
        <span class="inline-flex h-7 w-7 sm:h-8 sm:w-8 items-center justify-center rounded-lg sm:rounded-xl bg-white/10 backdrop-blur flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" class="sm:w-4 sm:h-4" style="color: #fff;" data-icon-set="solar" data-solar="shield-network-line-duotone"><g fill="none" stroke="currentColor" stroke-width="1.5" class=""><path d="M3 10.417c0-3.198 0-4.797.378-5.335c.377-.537 1.88-1.052 4.887-2.081l.573-.196C10.405 2.268 11.188 2 12 2s1.595.268 3.162.805l.573.196c3.007 1.029 4.51 1.544 4.887 2.081C21 5.62 21 7.22 21 10.417v1.574c0 5.638-4.239 8.375-6.899 9.536C13.38 21.842 13.02 22 12 22s-1.38-.158-2.101-.473C7.239 20.365 3 17.63 3 11.991z" opacity=".5" class=""></path><path d="M17 12a5 5 0 1 1-9.999 0A5 5 0 0 1 17 12Z" class=""></path><path d="M13.848 13.913c.1-.606.152-1.256.152-1.913s-.052-1.307-.152-1.913a8 8 0 0 0-.434-1.623c-.185-.464-.406-.832-.649-1.083C12.523 7.129 12.263 7 12 7s-.523.13-.765.38c-.243.252-.463.62-.65 1.084a8 8 0 0 0-.433 1.623c-.1.606-.152 1.256-.152 1.913s.052 1.307.152 1.913s.248 1.158.434 1.623c.185.464.406.832.649 1.083c.242.252.502.381.765.381s.523-.13.765-.38c.243-.252.463-.62.65-1.085a8 8 0 0 0 .433-1.622Z" class=""></path><path stroke-linecap="round" d="M7 12h10" class=""></path></g></svg>
              </span>
        <p class="text-[10px] sm:text-xs text-neutral-200">Adaptive identity graph</p>
      </div>
    </div>

    <!-- Content -->
    <div class="flex flex-col sm:p-6 md:p-8 pt-4 pr-4 pb-4 pl-4 justify-center">
      <div class="flex items-center gap-2 text-[10px] sm:text-xs text-neutral-400">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
          class="sm:w-4 sm:h-4 flex-shrink-0" style="" data-icon-set="solar" data-solar="stars-line-duotone">
          <g fill="none" stroke="currentColor" stroke-width="1.5" class="">
            <path
              d="m9.99 16.5l-.975.474c-1.98.548-2.971.822-3.505.245c-.534-.576-.258-1.62.295-3.71l.142-.54c.157-.595.236-.891.197-1.186c-.04-.294-.193-.553-.499-1.07l-.278-.47C4.29 8.422 3.752 7.512 4.11 6.787c.36-.724 1.379-.783 3.418-.9l.527-.03c.58-.034.869-.05 1.122-.185c.252-.135.439-.372.813-.848l.34-.432c1.316-1.673 1.974-2.509 2.73-2.38s1.11 1.137 1.817 3.154l.183.522c.201.573.302.86.497 1.07c.196.212.464.324 1.001.547l.489.204c1.89.786 2.835 1.18 2.942 1.983c.092.686-.477 1.283-1.64 2.29"
              opacity=".5" class=""></path>
            <path
              d="M15.252 10.689c-.987-1.18-1.48-1.77-2.048-1.68c-.567.091-.832.803-1.362 2.227l-.138.368c-.15.405-.226.607-.373.756c-.146.149-.348.228-.75.386l-.367.143c-1.417.555-2.126.833-2.207 1.4s.52 1.049 1.721 2.011l.31.25c.342.273.513.41.611.597c.1.187.115.404.146.837l.029.394c.11 1.523.166 2.285.683 2.545s1.154-.155 2.427-.983l.329-.215c.362-.235.543-.353.75-.387c.208-.033.42.022.841.132l.385.1c1.485.386 2.228.58 2.629.173s.193-1.144-.221-2.62l-.108-.38c-.117-.42-.176-.63-.147-.837c.03-.208.145-.39.374-.756l.21-.332c.807-1.285 1.21-1.927.94-2.438c-.269-.511-1.033-.553-2.562-.635l-.396-.022c-.434-.023-.652-.035-.841-.13c-.19-.095-.33-.263-.61-.599z"
              class=""></path>
          </g>
        </svg>
        <span class="">New in 2.7 — Lattice scoring</span>
      </div>
      <h1
        class="mt-3 sm:mt-4 text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl text-white tracking-tighter font-light leading-tight">
        Security, Reinvented
      </h1>
      <p class="mt-3 sm:mt-4 text-xs sm:text-sm md:text-base text-neutral-400 leading-relaxed">
        Sentra delivers verifiable protection for modern apps. Privacy‑first, open, and community‑audited. Own your
        data, control every policy, and prove compliance with a single click.
      </p>
      <div class="sm:mt-6 flex flex-col lg:flex-row lg:items-center mt-6 gap-x-3 gap-y-3 items-stretch">
        <!-- Animated Gradient Button -->
        <button type="button" class="gradient-button">
                <div class="points_wrapper">
                  <i class="point"></i>
                  <i class="point"></i>
                  <i class="point"></i>
                  <i class="point"></i>
                  <i class="point"></i>
                  <i class="point"></i>
                  <i class="point"></i>
                  <i class="point"></i>
                  <i class="point"></i>
                  <i class="point"></i>
                </div>
                <span class="inner">
                  Start free
                  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
                    <path d="M5 12h14" class=""></path>
                    <path d="m12 5 7 7-7 7" class=""></path>
                  </svg>
                </span>
              </button>

        <!-- Animated Border Button -->
        <a href="#" class="btn-wrapper"
          style="--dot-size: 8px; --line-weight: 1px; --line-distance: 0.8rem 1rem; --animation-speed: 0.35s; --dot-color: #fffa; --line-color: #fffa; --grid-color: #fff3; position: relative; display: inline-flex; justify-content: center; align-items: center; width: auto; height: auto; padding: var(--line-distance); background-color: rgba(0, 0, 0, 0); user-select: none">
          <div class="line horizontal top"></div>
          <div class="line vertical right"></div>
          <div class="line horizontal bottom"></div>
          <div class="line vertical left"></div>
          <div class="dot top left"></div>
          <div class="dot top right"></div>
          <div class="dot bottom right"></div>
          <div class="dot bottom left"></div>
          <button class="btn bg-transparent" style="mask-image: linear-gradient(110deg, transparent, black 35%, black 65%, transparent); -webkit-mask-image: linear-gradient(110deg, transparent, black 35%, black 65%, transparent);">
                  <span class="btn-text">Run the demo</span>
                  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="btn-svg" style="margin-left: .5rem; width: 18px; height: 18px; color: #fff4; flex-shrink: 0;" data-icon-set="solar" data-solar="code-square-line-duotone"><g fill="none" stroke="currentColor" stroke-width="1.5" class=""><path stroke-linecap="round" d="m15.5 9l.172.172c1.333 1.333 2 2 2 2.828s-.667 1.495-2 2.828L15.5 15m-2.206-7.83L12 12l-1.294 4.83M8.5 9l-.172.172c-1.333 1.333-2 2-2 2.828s.667 1.495 2 2.828L8.5 15" class=""></path><path d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12Z" opacity=".5" class=""></path></g></svg>
                </button>
        </a>
      </div>

      <!-- Stats -->
      <div class="mt-6 sm:mt-7 grid grid-cols-3 gap-3 sm:gap-4">
        <div
          class="border-gradient before:rounded-[16px] sm:before:rounded-[20px] md:before:rounded-[24px] bg-neutral-900/60 rounded-[16px] sm:rounded-[20px] md:rounded-[24px] p-3 sm:p-4">
          <p class="text-[9px] sm:text-[10px] text-neutral-400">Active</p>
          <p class="text-base font-semibold text-white tracking-tight mt-0.5 sm:mt-1 sm:text-lg md:text-sm">46k+</p>
          <p class="mt-0.5 sm:mt-1 text-[10px] sm:text-xs text-neutral-400">Developers</p>
        </div>
        <div
          class="border-gradient before:rounded-[16px] sm:before:rounded-[20px] md:before:rounded-[24px] bg-neutral-900/60 rounded-[16px] sm:rounded-[20px] md:rounded-[24px] p-3 sm:p-4">
          <p class="text-[9px] sm:text-[10px] text-neutral-400">Uptime</p>
          <p class="text-base font-semibold text-white tracking-tight mt-0.5 sm:mt-1 sm:text-lg md:text-sm">99.99%</p>
          <p class="mt-0.5 sm:mt-1 text-[10px] sm:text-xs text-neutral-400">Last 12 months</p>
        </div>
        <div
          class="border-gradient before:rounded-[16px] sm:before:rounded-[20px] md:before:rounded-[24px] bg-neutral-900/60 rounded-[16px] sm:rounded-[20px] md:rounded-[24px] p-3 sm:p-4">
          <p class="text-[9px] sm:text-[10px] text-neutral-400">Encryption</p>
          <p class="mt-0.5 text-base font-semibold tracking-tight text-white sm:mt-1 sm:text-lg md:text-sm">AES‑256</p>
          <p class="mt-0.5 sm:mt-1 text-[10px] sm:text-xs text-neutral-400">At rest &amp; transit</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Lower info cards -->
  <div class="mt-3 sm:mt-4 md:mt-6 grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
    <!-- Card 1 -->
    <div
      class="border-gradient animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] flex flex-col overflow-hidden bg-neutral-900/40 h-[320px] sm:h-[360px] md:h-[400px] rounded-[24px] sm:rounded-[32px] ring-white/10 ring-1 justify-between animate">
      <div class="h-full relative">
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c18c71a7-b8f4-4628-881d-cf4f8c40d365_1600w.webp" alt="Security visual" class="absolute inset-0 h-full w-full object-cover" style="">
        <div class="bg-gradient-to-t from-black/90 via-black/50 to-transparent absolute top-0 right-0 bottom-0 left-0">
        </div>
        <div class="flex flex-col sm:p-5 h-full pt-4 pr-4 pb-4 pl-4 relative justify-end">
          <div class="flex items-start gap-2 sm:gap-3">
            <span class="inline-flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-xl sm:rounded-2xl bg-emerald-500/15 backdrop-blur text-emerald-300 flex-shrink-0">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="sm:w-5 sm:h-5" style="" data-icon-set="solar" data-solar="lock-keyhole-line-duotone"><g fill="none" stroke="currentColor" stroke-width="1.5" class=""><path d="M2 16c0-2.828 0-4.243.879-5.121C3.757 10 5.172 10 8 10h8c2.828 0 4.243 0 5.121.879C22 11.757 22 13.172 22 16s0 4.243-.879 5.121C20.243 22 18.828 22 16 22H8c-2.828 0-4.243 0-5.121-.879C2 20.243 2 18.828 2 16Z" class=""></path><circle cx="12" cy="16" r="2" opacity=".5" class=""></circle><path stroke-linecap="round" d="M6 10V8a6 6 0 1 1 12 0v2" opacity=".5" class=""></path></g></svg>
                  </span>
            <div>
              <h4 class="text-sm sm:text-base md:text-lg font-semibold tracking-tight text-white">Zero-trust by design
              </h4>
              <p class="mt-1 text-xs sm:text-sm text-neutral-300 leading-relaxed">Hardware-backed keys, just‑in‑time
                access, and continuous verification.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Card 2 -->
    <div
      class="border-gradient animate-on-scroll [animation:fadeSlideIn_0.8s_ease-out_0.15s_both] flex flex-col overflow-hidden bg-neutral-900/40 h-[320px] sm:h-[360px] md:h-[400px] rounded-[24px] sm:rounded-[32px] ring-white/10 ring-1 justify-between animate">
      <div class="h-full relative">
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/dda527a3-a7cd-4e3f-a750-90f31be3dde0_1600w.webp" alt="Open source visual" class="absolute inset-0 h-full w-full object-cover" style="">
        <div class="bg-gradient-to-t from-black/90 via-black/50 to-transparent absolute top-0 right-0 bottom-0 left-0">
        </div>
        <div class="flex flex-col sm:p-5 h-full pt-4 pr-4 pb-4 pl-4 relative justify-end">
          <div class="flex items-start gap-2 sm:gap-3">
            <span class="inline-flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-xl sm:rounded-2xl bg-indigo-500/15 backdrop-blur text-indigo-300 flex-shrink-0">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="sm:w-5 sm:h-5" style="" data-icon-set="solar" data-solar="code-file-line-duotone"><g fill="none" class=""><path fill="currentColor" d="m15.393 4.054l-.502.557zm3.959 3.563l-.502.557zm2.302 2.537l-.685.305zM3.172 20.828l.53-.53zm17.656 0l-.53-.53zM14 21.25h-4v1.5h4zM2.75 14v-4h-1.5v4zm18.5-.437V14h1.5v-.437zM14.891 4.61l3.959 3.563l1.003-1.115l-3.958-3.563zm7.859 8.952c0-1.689.015-2.758-.41-3.714l-1.371.61c.266.598.281 1.283.281 3.104zm-3.9-5.389c1.353 1.218 1.853 1.688 2.119 2.285l1.37-.61c-.426-.957-1.23-1.66-2.486-2.79zM10.03 2.75c1.582 0 2.179.012 2.71.216l.538-1.4c-.852-.328-1.78-.316-3.248-.316zm5.865.746c-1.086-.977-1.765-1.604-2.617-1.93l-.537 1.4c.532.204.98.592 2.15 1.645zM10 21.25c-1.907 0-3.261-.002-4.29-.14c-1.005-.135-1.585-.389-2.008-.812l-1.06 1.06c.748.75 1.697 1.081 2.869 1.239c1.15.155 2.625.153 4.489.153zM1.25 14c0 1.864-.002 3.338.153 4.489c.158 1.172.49 2.121 1.238 2.87l1.06-1.06c-.422-.424-.676-1.004-.811-2.01c-.138-1.027-.14-2.382-.14-4.289zM14 22.75c1.864 0 3.338.002 4.489-.153c1.172-.158 2.121-.49 2.87-1.238l-1.06-1.06c-.424.422-1.004.676-2.01.811c-1.027.138-2.382.14-4.289.14zM21.25 14c0 1.907-.002 3.262-.14 4.29c-.135 1.005-.389 1.585-.812 2.008l1.06 1.06c.75-.748 1.081-1.697 1.239-2.869c.155-1.15.153-2.625.153-4.489zm-18.5-4c0-1.907.002-3.261.14-4.29c.135-1.005.389-1.585.812-2.008l-1.06-1.06c-.75.748-1.081 1.697-1.239 2.869C1.248 6.661 1.25 8.136 1.25 10zm7.28-8.75c-1.875 0-3.356-.002-4.511.153c-1.177.158-2.129.49-2.878 1.238l1.06 1.06c.424-.422 1.005-.676 2.017-.811c1.033-.138 2.395-.14 4.312-.14z" class=""></path><path stroke="currentColor" stroke-width="1.5" d="M13 2.5V5c0 2.357 0 3.536.732 4.268S15.643 10 18 10h4" opacity=".5" class=""></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m7 14l-1 1l1 1m4.5 0l1 1l-1 1M10 14l-1.5 4" opacity=".5" class=""></path></g></svg>
                  </span>
            <div class="">
              <h4 class="text-sm sm:text-base md:text-lg font-semibold tracking-tight text-white">Built in public</h4>
              <p class="mt-1 text-xs sm:text-sm text-neutral-300 leading-relaxed">Auditable code, community RFCs, and
                verifiable releases.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>