Hero Section with Feature Cards

<section class="relative">
  <div class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pr-4 pb-8 pl-4">
    <div class="grid gap-10 pt-4 md:grid-cols-12 md:gap-8 md:pt-8">
      <div class="md:col-span-7 lg:col-span-8">
        <h1
          class="leading-tight sm:text-6xl lg:text-7xl text-5xl font-light text-slate-900 tracking-tight font-manrope">
          <span class="block bg-clip-text font-light text-transparent font-manrope bg-gradient-to-r from-rose-400 via-pink-500 to-red-500 pt-0 pb-4">One Core</span><span class="block bg-clip-text font-light text-transparent font-manrope bg-gradient-to-r from-rose-400 via-pink-500 to-gray-500 pt-0 pb-4">Endless Intelligence</span>
        </h1>
        <div class="mt-6 flex items-center gap-4 text-sm text-slate-600">
          <div class="flex items-center gap-2 font-sans"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
              viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
              stroke-linejoin="round" class="h-4 w-4 text-violet-600">
              <path
                d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z">
              </path>
              <path d="M20 2v4"></path>
              <path d="M22 4h-4"></path>
              <circle cx="4" cy="20" r="2"></circle>
            </svg>Model‑first</div>
          <div class="h-px w-24 bg-slate-200"></div>
          <div class="font-sans">Est. 2025</div>
        </div>
      </div>
      <div class="md:col-span-5 lg:col-span-4">
        <p class="text-base leading-relaxed text-slate-600 font-sans">From multimodal perception to contextual
          reasoning, Nebula Core fuses cognitive tooling with graceful interaction. Build agents that feel invisible—and
          work everywhere.</p>
        <div class="mt-6 flex items-center gap-3">
          <button class="inline-flex gap-2 hover:bg-slate-50 text-sm font-medium text-slate-900 bg-white border-slate-200/80 border rounded-full pt-2 pr-4 pb-2 pl-4 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] items-center">Deep Dive<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button><button class="inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium text-slate-700 hover:text-slate-900 font-sans">View Docs<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg></button>
        </div>
      </div>
    </div>
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 mt-10">
      <article
        class="relative overflow-hidden rounded-3xl bg-gradient-to-b from-white to-slate-50 p-4 shadow-sm ring-1 ring-slate-200/70">
        <div class="flex items-start justify-between">
          <span class="inline-flex items-center rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-medium text-slate-600 font-sans">3–4 yrs</span><button class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200/80 bg-white text-slate-700 hover:bg-slate-50"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M15 3h6v6"></path><path d="m21 3-7 7"></path><path d="m3 21 7-7"></path><path d="M9 21H3v-6"></path></svg></button>
        </div>
        <h3 class="mt-4 text-xl font-semibold tracking-tight text-slate-900 font-sans">Adaptive Interaction Engine</h3>
        <p class="mt-1 text-sm text-slate-600 font-sans">Natural chats that instantly connect with data, apps, and
          people.</p>
        <div class="mt-4 overflow-hidden rounded-2xl"><img alt="3D spheres" class="aspect-[3/4] w-full object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/73d2df6e-f2df-4c10-b029-1d4f0dcb8fce_800w.jpg">
        </div>
      </article>
      <article
        class="relative overflow-hidden ring-1 ring-slate-200/70 bg-gradient-to-b from-white to-sky-50 rounded-3xl pt-4 pr-4 pb-4 pl-4 shadow-sm">
        <div class="flex items-start justify-between">
          <span class="inline-flex items-center rounded-full bg-sky-100 px-2.5 py-1 text-[11px] font-medium text-sky-700 font-sans">Beta</span><button class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200/80 bg-white text-slate-700 hover:bg-slate-50"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M15 3h6v6"></path><path d="m21 3-7 7"></path><path d="m3 21 7-7"></path><path d="M9 21H3v-6"></path></svg></button>
        </div>
        <h3 class="mt-4 text-xl font-semibold tracking-tight text-slate-900 font-sans">Context Mesh API</h3>
        <p class="mt-1 text-sm text-slate-600 font-sans">Stream memory, tools, and policies into one coherent workspace.
        </p>
        <div class="mt-4 overflow-hidden rounded-2xl"><img alt="3D abstract ribbon" class="aspect-[3/4] w-full object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/15c3e3e5-854e-4a74-8468-c909578e12e3_800w.jpg">
        </div>
      </article>
      <article
        class="relative overflow-hidden rounded-3xl bg-gradient-to-b from-white to-rose-50 p-4 shadow-sm ring-1 ring-slate-200/70">
        <div class="flex items-start justify-between">
          <span class="inline-flex items-center rounded-full bg-rose-100 px-2.5 py-1 text-[11px] font-medium text-rose-700 font-sans">Preview</span><button class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200/80 bg-white text-slate-700 hover:bg-slate-50"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M15 3h6v6"></path><path d="m21 3-7 7"></path><path d="m3 21 7-7"></path><path d="M9 21H3v-6"></path></svg></button>
        </div>
        <h3 class="mt-4 text-xl font-semibold tracking-tight text-slate-900 font-sans">Neural Canvas UI</h3>
        <p class="mt-1 text-sm text-slate-600 font-sans">Composable panels for visual planning, routing, and evaluation.
        </p>
        <div class="mt-4 overflow-hidden rounded-2xl"><img alt="3D swirl" class="aspect-[3/4] w-full object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/46bbb147-bb49-4dc2-9a4d-48f56b0dc37c_800w.jpg">
        </div>
      </article>
    </div>
  </div>
</section>