<section id="home" class="hero-bg min-h-screen flex items-center relative">
    <div class="absolute inset-0 bg-gradient-to-r from-[#0f172a]/95 to-transparent"></div>
    <div class="relative w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
            <div class="space-y-8">
                <h1 class="text-4xl lg:text-6xl font-bold leading-tight text-white">
                    <?php pll_e('Підпишіться на найефективніші індикатори для'); ?>
                    <span class="text-primary">TradingView</span> <?php pll_e('та'); ?>
                    <span class="text-primary">ThinkOrSwim</span>
                </h1>
                <p class="text-xl text-gray-300 leading-relaxed">
                    <?php pll_e('Отримайте доступ до потужних скриптів та стратегій — більше точності, більше прибутку'); ?>
                </p>
                <button onclick="scrollToPricing()" class="bg-primary text-white px-8 py-4 !rounded-button text-lg font-semibold hover:bg-blue-700 transition-colors whitespace-nowrap">
                    <?php pll_e('Отримати Доступ');?>
                </button>
            </div>
            <div class="lg:flex justify-end">
                <img src="<?php echo get_template_directory_uri(); ?>/images/hero-chart.jpg"
                     alt="Trading Chart"
                     class="w-full max-w-lg rounded-xl shadow-2xl object-top">
            </div>
        </div>
    </div>
</section>