Securify

# Securify — Full-Screen Video Hero

## Goal
Build a full-screen hero section for a data-security SaaS landing page called "securify", using React + TypeScript + Tailwind CSS. The whole thing is one component — no routing, no extra sections, no libraries beyond `react` and `react-dom`.

**All copy is lowercase.**

## Fonts & Global Styles
- Load the Google font **Readex Pro**, weights 300, 400, 500, 600, 700.
- `body`: `font-family: 'Readex Pro', system-ui, -apple-system, sans-serif;`, background `#000`, color `#fff`, antialiased.
- `html, body, #root` all get `height: 100%`.
- One extra class, `.hero-title`: `letter-spacing: -0.04em; line-height: 0.95;`.

## Section container
A `<section>` with `relative h-screen w-full overflow-hidden bg-black`.

## Background video
A `<video>` with `className="absolute inset-0 w-full h-full object-cover"`, plus `autoPlay loop muted playsInline`.
Video URL (exact): `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_063509_7d167302-4fd4-480b-8260-18ab572333d4.mp4`

## Navbar
Wrapper: `absolute top-0 left-0 right-0 z-20 px-6 md:px-10 pt-6`. Inside, a `<nav>` with `flex items-center justify-between gap-4` holding three pieces:

1. **Left pill** — `flex items-center gap-2 bg-neutral-900/90 backdrop-blur rounded-full pl-4 pr-6 py-3`, containing:
   - An inline SVG logo, `viewBox="0 0 256 256"`, `class="h-5 w-5"`, one path filled `#ffffff`:
     `d="M 128 192 L 128 256 L 64.5 256 L 32 223 L 0 192 L 0 128 L 64 128 Z M 256 192 L 256 256 L 192.5 256 L 160 223 L 128 192 L 128 128 L 192 128 Z M 128 64 L 128 128 L 64.5 128 L 32 95 L 0 64 L 0 0 L 64 0 Z M 256 64 L 256 128 L 192.5 128 L 160 95 L 128 64 L 128 0 L 192 0 Z"`
   - Brand text "securify" — `text-white text-sm font-normal tracking-tight`.
2. **Center pill (desktop only)** — `hidden md:flex items-center gap-1 bg-neutral-900/90 backdrop-blur rounded-full px-3 py-2`, holding four anchors: `['platform', 'solutions', 'company', 'support']`. Each: `text-neutral-300 hover:text-white transition-colors text-sm px-5 py-2 rounded-full`.
3. **Right button** — "get started", `bg-white text-black text-sm font-normal rounded-full px-6 py-3 hover:bg-neutral-200 transition-colors`.

## Foreground wrapper
Rendered after the navbar, above the video: `relative h-full w-full`. Everything below is absolutely positioned inside it.

## Headline — three staggered words
Three separate `<h1>` elements, each `hero-title absolute text-white font-medium text-[14vw] md:text-[13vw]`:
- "protect" — `left-4 md:left-10 top-[18%]`
- "your" — `right-4 md:right-10 top-[38%]`
- "data" — `left-[18%] md:left-[28%] top-[58%]`

## Description paragraph
`absolute left-6 md:left-10 top-[46%] max-w-[240px] text-[15px] leading-snug text-white/90`:
"we can guarding your data with utmost care, empowering you with privacy everywhere"

## Stat blocks (three corners)
Each is a number row plus a small sublabel. Numbers: `text-4xl md:text-5xl font-medium tracking-tight`. Sublabels: `text-xs md:text-sm text-white/70 mt-1`. Dividers are 1px rules, `hidden md:block h-px w-24 bg-white/40`, rotated.

1. **Top-right** — `absolute right-6 md:right-24 top-[14%]`. Row `flex items-center gap-3 justify-end`: divider `rotate-[20deg]`, then "+65k". Sublabel "startups use", right-aligned.
2. **Bottom-left** — `absolute left-6 md:left-20 bottom-20 md:bottom-24`. Row: "+1.5b", then divider `rotate-[-20deg]`. Sublabel "gb data was protected".
3. **Bottom-right** — `absolute right-6 md:right-20 bottom-16 md:bottom-20`. Row `justify-end`: divider `rotate-[-20deg]`, then "+300k". Sublabel "downloads", right-aligned.

## Bottom gradient overlay
`pointer-events-none absolute bottom-0 left-0 right-0 h-48 bg-gradient-to-b from-transparent to-black` — rendered before the two bottom stat blocks so they read on top of it.

## Colors & Motion
- Palette is pure black, white, `neutral-900`, and white opacity variants (`white/40`, `white/70`, `white/90`). No purple, no indigo, nothing else.
- Navbar pills are `bg-neutral-900/90 backdrop-blur`.
- The only transitions in the whole section: `hover:text-white` on nav links and `hover:bg-neutral-200` on the button. Nothing animates on load.

## Responsive
Mobile hides the nav links and the diagonal dividers; the typography scales purely through `vw` units, so the three words keep their stagger at every width.

## Quality Bar
- TypeScript strict, zero `any`. Tailwind only — no external CSS files beyond the tiny global block above.
- Give the background video `aria-hidden`; it is decoration and never the only carrier of meaning. Every foreground control stays reachable by keyboard with a visible focus ring.
- Autoplay only works while the element is genuinely `muted` and `playsInline` — keep both, and ship a poster frame so the first paint is a still image, not a black box.
- Watch the payload: a full-resolution source video will dominate page weight. Downscale to the rendered size, drop the audio track that muted playback never uses, and serve a compressed derivative.
- Respect `prefers-reduced-motion`: pause the loop and hold the poster frame instead of looping video behind the copy.
- White type over a moving video is the weak point of this layout — the bottom gradient is what keeps the two lower stat blocks legible. Do not drop it.