<section id="hero" class="relative overflow-hidden">
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(56,189,248,0.18),_transparent_55%),radial-gradient(circle_at_bottom,_rgba(8,47,73,0.45),_transparent_60%)] pointer-events-none"></div>

    <div class="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-24 flex flex-col lg:flex-row gap-10 items-center">
        <!-- Left: Text -->
        <div class="flex-1 space-y-7">
            <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="hero_kicker">
                Detect fake USB sticks before you lose data
            </p>
            <h1 class="font-heading text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-white" data-i18n="hero_title">
                Is my USB fake?<br><span class="text-brand-primary">Find out in minutes.</span>
            </h1>
            <p class="text-base sm:text-lg text-brand-muted max-w-xl" data-i18n="hero_lead">
                USBCheck kombiniert einen schnellen Browser-Test mit einem professionellen Pro-Modus. So erkennst du gefälschte USB-Sticks, zu kleine echte Kapazität und langsame Billig-Controller – bevor deine Dateien verschwinden.
            </p>

            <!-- CTAs -->
            <div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
                <a href="https://usbcheck.it/fakecheck/"
                   class="inline-flex items-center justify-center rounded-full bg-brand-primary px-6 py-3 text-sm font-semibold text-brand-bg shadow-soft hover:bg-blue-400 transition-colors"
                   data-i18n="cta_quick">
                    Start free quick check
                    <svg class="ml-2 h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0L17 8.586a2 2 0 010 2.828l-5.293 5.293a1 1 0 01-1.414-1.414L13.586 11H4a1 1 0 110-2h9.586L10.293 4.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </a>

                <a href="#features"
                   class="inline-flex items-center justify-center rounded-full border border-brand-border/70 bg-brand-bg/40 px-6 py-3 text-sm font-semibold text-brand-text hover:border-brand-primary hover:text-brand-primary transition-colors"
                   data-i18n="cta_learn">
                    Learn more about Free &amp; Pro
                </a>
            </div>

            <!-- Trust / Highlights -->
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-6 border-t border-brand-border/60">
                <div class="space-y-1">
                    <p class="text-xs font-semibold text-brand-muted uppercase tracking-[0.18em]" data-i18n="trust1_title">No install for quick check</p>
                    <p class="text-sm text-brand-text/90" data-i18n="trust1_text">Browser-basierter Test direkt auf deinem Stick.</p>
                </div>
                <div class="space-y-1">
                    <p class="text-xs font-semibold text-brand-muted uppercase tracking-[0.18em]" data-i18n="trust2_title">Real write &amp; read tests</p>
                    <p class="text-sm text-brand-text/90" data-i18n="trust2_text">Schreib-/Lesetests mit echten Daten – keine synthetische Theorie.</p>
                </div>
                <div class="space-y-1">
                    <p class="text-xs font-semibold text-brand-muted uppercase tracking-[0.18em]" data-i18n="trust3_title">Privacy first</p>
                    <p class="text-sm text-brand-text/90" data-i18n="trust3_text">Deine Testdaten bleiben lokal – Reports nur auf Wunsch.</p>
                </div>
            </div>
        </div>

        <!-- Right: Card (Teaser Quickcheck) -->
        <div class="flex-1 w-full max-w-md lg:max-w-sm">
            <div class="rounded-xl2 bg-brand-surface/90 border border-brand-border/70 shadow-soft p-5 sm:p-6 space-y-4">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-brand-muted" data-i18n="quick_label">
                            QUICK CHECK PREVIEW
                        </p>
                        <h2 class="mt-1 font-heading font-semibold text-lg text-white" data-i18n="quick_title">
                            Test a USB drive in under 2 minutes
                        </h2>
                    </div>
                    <span class="inline-flex items-center rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-400" data-i18n="badge_free">
                        Free
                    </span>
                </div>

                <div class="space-y-3 text-sm text-brand-muted">
                    <p data-i18n="quick_intro">
                        Der Schnelltest prüft eine definierte Datenmenge auf deinem Stick und misst:
                    </p>
                    <ul class="list-disc list-inside space-y-1">
                        <li data-i18n="quick_li1">Schreib- und Leserate</li>
                        <li data-i18n="quick_li2">Datenintegrität (Hash-Vergleich)</li>
                        <li data-i18n="quick_li3">Verdächtige Abbrüche oder Fehler</li>
                    </ul>
                </div>

                <div class="flex flex-col gap-2 text-xs text-brand-muted">
                    <div class="flex justify-between">
                        <span data-i18n="quick_metric1_label">Write performance</span>
                        <span data-i18n="quick_metric1_value">~ 75–120 MB/s*</span>
                    </div>
                    <div class="h-1.5 rounded-full bg-brand-primarySoft overflow-hidden">
                        <div class="h-full w-3/4 bg-brand-primary"></div>
                    </div>
                    <div class="flex justify-between">
                        <span data-i18n="quick_metric2_label">Integrity checks</span>
                        <span data-i18n="quick_metric2_value">512 MB sample</span>
                    </div>
                    <p class="text-[11px] text-brand-muted/80" data-i18n="quick_footnote">
                        *Beispielwerte – deine Ergebnisse hängen von Stick, Port &amp; System ab.
                    </p>
                </div>

                <a href="https://usbcheck.it/fakecheck/"
                   class="block text-center rounded-full bg-brand-primary px-4 py-2.5 text-sm font-semibold text-brand-bg hover:bg-blue-400 transition-colors"
                   data-i18n="quick_cta">
                    Go to free quick check
                </a>
            </div>
        </div>
    </div>
</section>
