<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>StoryTime - Immersive Audio Stories</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <header>

        <a href="#" class="logo">STORYTIME</a>

    </header>

    <main>

        <section id="hero" class="hero">

            <div class="hero-content">

                <div class="hero-text">

                    <h1>STORIES BUILT FOR NIGHT OWLS.</h1>

                    <p class="tagline">Immersive, cinematic audio dramas that keep you listening late into the night.</p>

                    <a href="#" class="download-btn">DOWNLOAD ON GOOGLE PLAY</a>

                </div>

                <div class="hero-phone">

                    <img src="https://via.placeholder.com/400x800/1c0d3a/ffffff?text=Android+Phone+Mockup" alt="Android Phone Mockup with App UI">

                </div>

            </div>

        </section>

        <section id="showcase" class="showcase">

            <h2>EXPLORE THE DARKNESS.</h2>

            <p class="section-tagline">Play the trailers of our most gripping audio tales.</p>

            <div class="showcase-carousel">

                <div class="story-poster gothic">

                    <img src="https://via.placeholder.com/200x300/2a1a4a/ffffff?text=Gothic+Romance" alt="Gothic Romance Trailer">

                    <span class="genre">GOTHIC ROMANCE</span>

                </div>

                <div class="story-poster noir">

                    <img src="https://via.placeholder.com/200x300/111111/ffffff?text=Noir+Mystery" alt="Noir Mystery Trailer">

                    <span class="genre">NOIR MYSTERY</span>

                </div>

                <div class="story-poster psychological">

                    <img src="https://via.placeholder.com/200x300/3a3a3a/ffffff?text=Psychological+Thriller" alt="Psychological Thriller Trailer">

                    <span class="genre">PSYCHOLOGICAL THRILLER</span>

                </div>

                <div class="story-poster noir-2">

                    <img src="https://via.placeholder.com/200x300/111111/ffffff?text=City+Grit" alt="Noir Mystery 2 Trailer">

                    <span class="genre">NOIR MYSTERY</span>

                </div>

            </div>

        </section>

        <section id="features" class="features">

            <h2>CURATED DEPTH.</h2>

            <div class="feature-cards">

                <div class="feature-card">

                    <div class="icon headphone"></div>

                    <h3>Cinematic Sound</h3>

                    <p>High-production-value audio, always expanding with new voices and visions.</p>

                </div>

                <div class="feature-card">

                    <div class="icon soap"></div>

                    <h3>Daily Cliffhangers</h3>

                    <p>Experience episodic narratives with dramatic soundscapes and high-stakes tension.</p>

                </div>

                <div class="feature-card">

                    <div class="icon distract"></div>

                    <h3>Zero Distractions</h3>

                    <p>An auditory adventure built for the discerning listener, where every sound has a purpose.</p>

                </div>

            </div>

        </section>

    </main>

    <footer>

        <div class="legal-links">

            <a href="#">Privacy Policy</a>

            <a href="#">Terms of Use</a>

        </div>

    </footer>

</body>

</html>