# Prompt: Futuristická luxusní landing page "INBO"

> **Cíl:** Vytvoř futuristickou, luxusní landing page pro AI produkt nazvaný **INBO** — inteligentní AI agent, který autonomně spravuje emailovou komunikaci.
>
> **Konverzní cíl:** Jediná konverze je zadání emailu do waitlistu. Vše na stránce musí směřovat k tomuto jedinému cíli.

---

## Technologický stack

- **Framework:** React 19 + TanStack Start (Vite)
- **Styling:** Tailwind CSS v4 (`src/styles.css` s `@theme inline` a custom utility třídami)
- **Ikonky:** `lucide-react` (pouze tato knihovna, žádné external dependencies)
- **Fonty:** Space Grotesk (nadpisy) + Inter (body text) — přes Google Fonts
- **Pozadí:** Čisté `#0A0A0A` (téměř černá)

---

## Design systém (styles.css)

Definuj v `src/styles.css` tyto tokeny. Používej výhradně tyto hodnoty, nikdy ne hardcoded barvy v komponentách.

```css
@import "tailwindcss" source(none);
@source "../src";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --animate-pulse-dot: pulse-dot 2s ease-in-out infinite;
  --animate-float-mail: float-mail 14s linear infinite;
  --animate-beam: beam 8s ease-in-out infinite;
  --animate-shimmer: shimmer 3s linear infinite;
  --animate-fade-up: fade-up 0.8s ease-out both;
}

:root {
  --radius: 1rem;
  --background: oklch(0.14 0.01 280);
  --foreground: oklch(0.98 0 0);
  --card: oklch(0.18 0.02 280 / 50%);
  --card-foreground: oklch(0.98 0 0);
  --popover: oklch(0.18 0.02 280);
  --popover-foreground: oklch(0.98 0 0);
  --primary: oklch(0.58 0.25 295);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.72 0.16 210);
  --secondary-foreground: oklch(0.14 0.01 280);
  --muted: oklch(0.22 0.02 280);
  --muted-foreground: oklch(0.7 0.02 280);
  --accent: oklch(0.72 0.16 210);
  --accent-foreground: oklch(0.14 0.01 280);
  --destructive: oklch(0.6 0.24 27);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 8%);
  --ring: oklch(0.58 0.25 295);

  --brand-violet: #7C3AED;
  --brand-cyan: #06B6D4;
  --gradient-brand: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(6,182,212,0.18));
  --shadow-glow: 0 20px 60px -20px rgba(124, 58, 237, 0.55);
  --shadow-glow-cyan: 0 20px 60px -20px rgba(6, 182, 212, 0.45);
}

@layer base {
  * { border-color: var(--color-border); }
  html { scroll-behavior: smooth; }
  body {
    background-color: #0A0A0A;
    color: var(--color-foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; }
}

@layer utilities {
  .text-gradient {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .bg-gradient-brand { background: var(--gradient-brand); }
  .glass {
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .glass-strong {
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255,255,255,0.12);
  }
  .grid-pattern {
    background-image:
      linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
  }
  .radial-fade {
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
  }
  .shadow-glow { box-shadow: var(--shadow-glow); }
  .shadow-glow-cyan { box-shadow: var(--shadow-glow-cyan); }
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
  50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}
@keyframes float-mail {
  0% { transform: translate(var(--fx,0), 100vh) rotate(var(--fr,0deg)); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate(calc(var(--fx,0) + 40px), -10vh) rotate(var(--fr,0deg)); opacity: 0; }
}
@keyframes beam {
  0%, 100% { opacity: 0.15; transform: translateX(-10%) rotate(12deg); }
  50% { opacity: 0.45; transform: translateX(10%) rotate(12deg); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
```

---

## Komponenty

### 1. `Reveal.tsx` — scroll-reveal animace

Používá `IntersectionObserver`. Každá sekce stránky bude obalená tímto komponentem pro reveal při scrollování.

```tsx
import { useEffect, useRef, useState } from "react";

export function Reveal({ children, delay = 0, className = "" }: { children: React.ReactNode; delay?: number; className?: string }) {
  const ref = useRef<HTMLDivElement>(null);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); } },
      { threshold: 0.15 }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  return (
    <div
      ref={ref}
      className={className}
      style={{
        opacity: visible ? 1 : 0,
        transform: visible ? "translateY(0)" : "translateY(28px)",
        transition: `opacity 0.8s ease-out ${delay}ms, transform 0.8s ease-out ${delay}ms`,
      }}
    >
      {children}
    </div>
  );
}
```

### 2. `BackgroundFX.tsx` — hero pozadí

Abstraktní vizuální pozadí s mřížkou, glow blobs, vertikálními beams a plovoucími mail ikonkami. Použij LUCIDE ikonku `Mail`.

```tsx
import { Mail } from "lucide-react";

export function BackgroundFX() {
  const mails = Array.from({ length: 14 });
  return (
    <div aria-hidden className="pointer-events-none absolute inset-0 overflow-hidden">
      {/* Grid */}
      <div className="absolute inset-0 grid-pattern radial-fade opacity-60" />
      {/* Glow blobs */}
      <div className="absolute -top-40 left-1/2 h-[600px] w-[900px] -translate-x-1/2 rounded-full opacity-40 blur-3xl"
        style={{ background: "radial-gradient(closest-side, rgba(124,58,237,0.55), transparent)" }} />
      <div className="absolute top-1/3 -right-40 h-[500px] w-[600px] rounded-full opacity-30 blur-3xl"
        style={{ background: "radial-gradient(closest-side, rgba(6,182,212,0.5), transparent)" }} />
      {/* Beams */}
      <div className="absolute left-1/4 top-0 h-[140%] w-px animate-beam"
        style={{ background: "linear-gradient(180deg, transparent, rgba(124,58,237,0.6), transparent)" }} />
      <div className="absolute left-2/3 top-0 h-[140%] w-px animate-beam"
        style={{ background: "linear-gradient(180deg, transparent, rgba(6,182,212,0.6), transparent)", animationDelay: "2s" }} />
      {/* Floating mails */}
      {mails.map((_, i) => {
        const left = (i * 7.3) % 100;
        const delay = (i * 1.1) % 14;
        const size = 14 + ((i * 5) % 16);
        return (
          <Mail
            key={i}
            className="absolute text-white/20"
            style={{
              left: `${left}%`,
              bottom: "-40px",
              width: size,
              height: size,
              ["--fx" as string]: `${(i % 2 === 0 ? 1 : -1) * 30}px`,
              ["--fr" as string]: `${(i * 13) % 30 - 15}deg`,
              animation: `float-mail ${10 + (i % 6)}s linear ${delay}s infinite`,
            }}
          />
        );
      })}
    </div>
  );
}
```

### 3. `WaitlistForm.tsx` — email formulář

Funkční formulář s validací emailu. Při odeslání zobrazí success stav. Použij ikonky `ArrowRight`, `CheckCircle2`, `Loader2` z lucide-react.

```tsx
import { useState } from "react";
import { ArrowRight, CheckCircle2, Loader2 } from "lucide-react";

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

export function WaitlistForm({ size = "lg" }: { size?: "lg" | "md" }) {
  const [email, setEmail] = useState("");
  const [state, setState] = useState<"idle" | "loading" | "success" | "error">("idle");
  const [error, setError] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const trimmed = email.trim();
    if (!emailRegex.test(trimmed) || trimmed.length > 255) {
      setError("Zadej prosím platný email");
      setState("error");
      return;
    }
    setState("loading");
    setTimeout(() => setState("success"), 900);
  };

  if (state === "success") {
    return (
      <div className="glass-strong shadow-glow flex items-center gap-3 rounded-2xl p-5 animate-fade-up">
        <CheckCircle2 className="h-6 w-6 shrink-0 text-emerald-400" />
        <p className="text-left text-sm sm:text-base">
          <span className="font-semibold">Skvěle!</span>{" "}
          <span className="text-muted-foreground">Jsi na waitlistu. Dáme ti vědět jako prvnímu.</span>
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="w-full">
      <div className={`glass-strong shadow-glow flex flex-col gap-2 rounded-2xl p-2 sm:flex-row sm:items-center ${size === "lg" ? "" : "p-1.5"}`}>
        <input
          type="email"
          required
          maxLength={255}
          value={email}
          onChange={(e) => { setEmail(e.target.value); if (state === "error") setState("idle"); }}
          placeholder="Zadej svůj pracovní email"
          className="flex-1 bg-transparent px-4 py-3 text-base text-foreground placeholder:text-muted-foreground/70 focus:outline-none sm:px-5 sm:py-3.5"
        />
        <button
          type="submit"
          disabled={state === "loading"}
          className="bg-gradient-brand group inline-flex items-center justify-center gap-2 rounded-xl px-5 py-3 text-sm font-semibold text-white transition-all hover:scale-[1.02] hover:shadow-glow disabled:opacity-70 sm:text-base"
        >
          {state === "loading" ? <Loader2 className="h-4 w-4 animate-spin" /> : <>Získat přístup <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" /></>}
        </button>
      </div>
      {state === "error" && <p className="mt-2 text-left text-xs text-destructive">{error}</p>}
    </form>
  );
}
```

### 4. `InboxMockup.tsx` — vizualizace emailového inboxu

Realistický mockup emailového klienta s 6 emaily, barevnými tagy (priorita, odpověděno, archivováno), window chrome a AI footerem. Použij ikonky: `Sparkles`, `Check`, `Archive`, `Reply`, `AlertCircle`.

```tsx
import { Sparkles, Check, Archive, Reply, AlertCircle } from "lucide-react";

type Item = {
  from: string;
  subject: string;
  preview: string;
  tag: "priorita" | "odpověděno" | "archivováno";
  icon: typeof Check;
  accent: string;
  time: string;
};

const items: Item[] = [
  { from: "Klient — Nováková", subject: "Smlouva k podpisu", preview: "Posílám finální verzi smlouvy, prosím o…", tag: "priorita", icon: AlertCircle, accent: "text-rose-400 bg-rose-400/10 border-rose-400/20", time: "teď" },
  { from: "Tomáš H.", subject: "Re: Meeting v úterý", preview: "Díky za potvrzení, vidíme se v 10:00.", tag: "odpověděno", icon: Reply, accent: "text-cyan-400 bg-cyan-400/10 border-cyan-400/20", time: "2 min" },
  { from: "Newsletter — Product Hunt", subject: "Top launches this week", preview: "This week's most upvoted products…", tag: "archivováno", icon: Archive, accent: "text-muted-foreground bg-white/5 border-white/10", time: "5 min" },
  { from: "LinkedIn", subject: "5 new connection requests", preview: "You have 5 new requests waiting…", tag: "archivováno", icon: Archive, accent: "text-muted-foreground bg-white/5 border-white/10", time: "8 min" },
  { from: "Investor — Martin K.", subject: "Follow-up to our call", preview: "Skvělý hovor. Posílám deck který jsme…", tag: "priorita", icon: AlertCircle, accent: "text-rose-400 bg-rose-400/10 border-rose-400/20", time: "12 min" },
  { from: "Faktura — Vodafone", subject: "Vaše faktura za 11/2026", preview: "Faktura byla automaticky zaplacena…", tag: "archivováno", icon: Check, accent: "text-emerald-400 bg-emerald-400/10 border-emerald-400/20", time: "20 min" },
];

export function InboxMockup() {
  return (
    <div className="relative mx-auto w-full max-w-3xl">
      {/* glow */}
      <div className="pointer-events-none absolute -inset-10 -z-10 opacity-60 blur-3xl"
        style={{ background: "radial-gradient(closest-side, rgba(124,58,237,0.35), transparent 70%), radial-gradient(closest-side at 80% 60%, rgba(6,182,212,0.25), transparent 70%)" }} />
      <div className="glass-strong overflow-hidden rounded-3xl border border-white/10 shadow-2xl">
        {/* Window chrome */}
        <div className="flex items-center justify-between border-b border-white/10 bg-white/[0.02] px-5 py-3">
          <div className="flex items-center gap-1.5">
            <span className="h-2.5 w-2.5 rounded-full bg-rose-400/70" />
            <span className="h-2.5 w-2.5 rounded-full bg-amber-400/70" />
            <span className="h-2.5 w-2.5 rounded-full bg-emerald-400/70" />
          </div>
          <div className="flex items-center gap-2 text-xs text-muted-foreground">
            <span className="relative flex h-1.5 w-1.5">
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
              <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-400" />
            </span>
            INBO pracuje · 6 zpracováno
          </div>
          <div className="text-xs text-muted-foreground">inbox.inbo.ai</div>
        </div>
        {/* Inbox list */}
        <ul className="divide-y divide-white/5">
          {items.map((it, i) => {
            const Icon = it.icon;
            return (
              <li key={i} className="group flex items-center gap-4 px-5 py-4 transition-colors hover:bg-white/[0.03]"
                style={{ animation: `fade-up 0.6s ease-out ${i * 0.08}s both` }}>
                <div className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border ${it.accent}`}>
                  <Icon className="h-4 w-4" />
                </div>
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-2">
                    <span className="truncate text-sm font-semibold">{it.from}</span>
                    <span className={`hidden rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider sm:inline ${it.accent}`}>{it.tag}</span>
                  </div>
                  <div className="mt-0.5 flex items-baseline gap-2">
                    <span className="truncate text-sm text-foreground/80">{it.subject}</span>
                    <span className="hidden truncate text-xs text-muted-foreground sm:inline">— {it.preview}</span>
                  </div>
                </div>
                <span className="shrink-0 text-xs text-muted-foreground">{it.time}</span>
              </li>
            );
          })}
        </ul>
        {/* AI footer */}
        <div className="flex items-center justify-between gap-4 border-t border-white/10 bg-gradient-to-r from-violet-500/10 via-transparent to-cyan-500/10 px-5 py-3">
          <div className="flex items-center gap-2 text-xs">
            <div className="bg-gradient-brand flex h-6 w-6 items-center justify-center rounded-md shadow-glow">
              <Sparkles className="h-3 w-3 text-white" />
            </div>
            <span className="text-foreground/90">INBO ušetřil dnes <span className="font-semibold text-foreground">2h 14min</span></span>
          </div>
          <div className="hidden items-center gap-3 text-xs text-muted-foreground sm:flex">
            <span className="inline-flex items-center gap-1"><Reply className="h-3 w-3" /> 12 odpovědí</span>
            <span className="inline-flex items-center gap-1"><Archive className="h-3 w-3" /> 41 archiv</span>
            <span className="inline-flex items-center gap-1"><AlertCircle className="h-3 w-3" /> 3 priority</span>
          </div>
        </div>
      </div>
    </div>
  );
}
```

---

## Struktura hlavní stránky (`index.tsx`)

Stránka má jednu hlavní komponentu s těmito sekcemi:

### DATA (statické pole):

```ts
const stats = [
  { v: "2,5 hod", l: "průměrně denně strávíte v emailu" },
  { v: "40 %", l: "pracovního dne pohltí emailová komunikace" },
  { v: "73 %", l: "emailů nevyžaduje vaši přímou pozornost" },
];

const steps = [
  { icon: Link2, t: "Připoj svůj email", d: "Jednoduchá OAuth autorizace. Žádné heslo, žádné technické nastavení. Hotovo za 2 minuty." },
  { icon: GraduationCap, t: "INBO se naučí jak komunikuješ", d: "Analyzuje tvoji historii, rozpozná tvůj styl, pochopí priority. Čím více emailů, tím lepší." },
  { icon: Rocket, t: "Pracuj na věcech které záleží", d: "INBO přebírá rutinu. Ty dostáváš jen to důležité. Každý den úspora hodin." },
];

const features = [
  { icon: Sparkles, t: "Autonomní odpovídání", d: "Píše odpovědi v tvém stylu. Ty pouze schválíš — nebo pošle samo podle nastavení." },
  { icon: Brain, t: "Inteligentní prioritizace", d: "Rozpozná co je urgentní, co může počkat a co lze bezpečně ignorovat." },
  { icon: Zap, t: "Učící se model", d: "Čím déle ho používáš, tím lépe tě zná. Každý týden přesnější." },
  { icon: Bell, t: "Okamžité notifikace", d: "Upozorní tě pouze když je to skutečně potřeba. Žádný zbytečný hluk." },
  { icon: Eye, t: "Plná kontrola", d: "Vidíš vše co agent dělá. Schvaluješ, upravuješ, učíš. Kontrola zůstává u tebe." },
  { icon: ShieldCheck, t: "Bezpečnost na prvním místě", d: "End-to-end šifrování. Tvoje data jsou pouze tvoje. GDPR compliant." },
];

const testimonials = [
  { q: "Přestal jsem kontrolovat email každých 20 minut. INBO to řeší za mě a upozorní mě jen když je to nutné. Ušetřím 2 hodiny denně minimálně.", a: "Tomáš K.", r: "CEO, Praha" },
  { q: "Měl jsem obavy že AI nebude psát jako já. Po týdnu moji klienti nepoznali rozdíl. To mě upřímně překvapilo.", a: "Markéta S.", r: "konzultantka" },
  { q: "Konečně jsem přestal být otrokem inboxu. INBO zpracuje 80 % emailů bez mého zásahu.", a: "Jan P.", r: "podnikatel" },
];
```

### SEKCE:

#### 1. Navigation Bar
- Levá strana: logo (gradient box s ikonou `Mail` + text "INBO")
- Pravá strana: tlačítko "Získat přístup" (skroluje na waitlist)
- Použij utility: `glass rounded-full px-4 py-2 text-sm font-medium transition-colors hover:bg-white/10`

#### 2. Hero Section (s `BackgroundFX` pozadím)
- Badge: "Brzy k dispozici · Limitovaný přístup" s živou zelenou tečkou (animate-ping + statická tečka)
- H1: "Tvůj inbox." / "Konečně bez tebe." (druhý řádek s `text-gradient`)
- Podnadpis: popis produktu
- Waitlist formulář (`WaitlistForm`)
- Avatary: 3 gradient kruhy s `-space-x-2` overlap
- Statický text: "Již **335** lidí čeká na přístup"
- Pod formulářem: "Žádný spam. Odhlášení jedním klikem."
- **InboxMockup** pod formulářem (vizualizace)

#### 3. Problém / Statistiky
- 3 glass karty v gridu (`grid gap-5 sm:grid-cols-3`)
- Každá karta: velké číslo s `text-gradient` + popisek
- Hover: `hover:shadow-glow hover:-translate-y-1 transition-all duration-500`
- Pod kartami: "Co kdyby se o ten email **postaral někdo jiný?**"

#### 4. Jak to funguje (3 kroky)
- Nadpis: "Tři kroky. **Žádná práce navíc.**"
- 3 karty v gridu s krokem číslo (Krok 1, 2, 3)
- Každá karta: gradient ikonka v boxu, nadpis, popis
- Mezi kartami na desktopu: jemná horizontální linka (`bg-gradient-to-r from-transparent via-white/20 to-transparent`)
- Hover efekt: `hover:shadow-glow-cyan`

#### 5. Features (6 funkcí)
- Nadpis: "Inteligence která **nepřestane pracovat**"
- Grid: `sm:grid-cols-2 lg:grid-cols-3`
- Každá karta: skleněná ikonka v boxu, nadpis, popis
- Ikonky: Sparkles, Brain, Zap, Bell, Eye, ShieldCheck (vše lucide-react)

#### 6. Testimonials (3 recenze)
- Nadpis: "Co říkají **early adopters**"
- 3 glass karty s velkými uvozovkami (`"` s `text-gradient`)
- Citace, jméno, role

#### 7. Final CTA
- Gradient pozadí: `linear-gradient(135deg, rgba(124,58,237,0.35) 0%, rgba(10,10,10,1) 70%)`
- Rounded: `rounded-[2.5rem]`
- Nadpis: "Přestaň pracovat pro svůj inbox. **Nech inbox pracovat pro tebe.**"
- Waitlist formulář
- Progress bar: "335 / 500 míst obsazeno" s animovanou částí která roste na 67%
- Použij `IntersectionObserver` na progress bar — animace se spustí až když je viditelný (`threshold: 0.4`)
- Glow efekt uvnitř CTA sekce

#### 8. Footer
- Horizontální linka (gradient)
- Logo + copyright + email kontakt

---

## Interaktivní a vizuální požadavky

1. **Scroll reveal:** Každá sekce je obalená v `<Reveal>` — při scrollování najede zespoda s postupným delayem (0ms, 100ms, 200ms...).
2. **Hover efekty:** Všechny karty se při hoveru jemně posunou nahoru (`-translate-y-1`) a rozsvítí se glow stín.
3. **Progress bar:** Animovaný pomocí CSS transition, spouští se přes `IntersectionObserver`.
4. **Floating mails:** 14 mail ikon plovoucích zdola nahoru v hero pozadí.
5. **Glow beams:** Dva vertikální světelné paprsky pulzující v hero sekci.
6. **Grid pattern:** Jemná mřížka na pozadí s `radial-fade` maskou.
7. **Mobile first:** Všechny layouty musí fungovat perfektně na mobilu (flex-col, grid se přepíná na breakpointy).

---

## SEO & meta tagy

```ts
head: () => ({
  meta: [
    { title: "INBO — AI agent který spravuje tvůj email" },
    { name: "description", content: "INBO je autonomní AI agent který čte, třídí a odpovídá na tvoje emaily. Ušetři 2+ hodiny denně. Připoj se na waitlist." },
    { property: "og:title", content: "INBO — Tvůj inbox. Konečně bez tebe." },
    { property: "og:description", content: "Autonomní AI agent pro tvůj email. Limitovaný přístup pro první uživatele." },
  ],
})
```

---

## Dodatečné pokyny pro implementaci

- Nepoužívej žádné externí knihovny na animace — vše je CSS transitions a IntersectionObserver.
- Nepoužívej placeholder obrázky — veškerá vizualizace je čistě CSS + lucide-react ikony.
- Všechny barvy musí používat design tokeny z `styles.css`, nikdy ne hardcoded hodnoty v komponentách.
- Texty uveď přesně tak jak jsou výše — jsou v češtině a laděné pro český trh.
- Písmo: načti Space Grotesk a Inter z Google Fonts v `__root.tsx` nebo index.html.