```php
```php

<nav class="site-navbar">
    <div class="navbar-container">

        <!-- Logo -->
        <a href="/had-tech-store/index.php" class="navbar-logo">
            <span class="logo-had">HAD</span>
            <span class="logo-tech">TECH</span>
            <span class="logo-store">STORE</span>
        </a>

        <!-- Desktop Navigation -->
        <div class="navbar-links">

            <a href="/had-tech-store/index.php"
               class="active">
                Home
            </a>

            <a href="/had-tech-store/shop.php"
               class="">
                Shop
            </a>

            <!-- Gaming Dropdown -->
            <div class="nav-dropdown">
                <button class="dropdown-button">
                    Gaming
                    <span class="dropdown-arrow">⌄</span>
                </button>

                <div class="dropdown-menu">
                    <a href="/had-tech-store/categories/gaming-pcs.php">
                        Gaming PCs
                    </a>

                    <a href="/had-tech-store/categories/gaming-keyboards.php">
                        Gaming Keyboards
                    </a>

                    <a href="/had-tech-store/categories/gaming-mice.php">
                        Gaming Mice
                    </a>

                    <a href="/had-tech-store/categories/gaming-headsets.php">
                        Gaming Headsets
                    </a>

                    <a href="/had-tech-store/categories/gaming-accessories.php">
                        Gaming Accessories
                    </a>
                </div>
            </div>

            <!-- Tech Dropdown -->
            <div class="nav-dropdown">
                <button class="dropdown-button">
                    Tech
                    <span class="dropdown-arrow">⌄</span>
                </button>

                <div class="dropdown-menu">
                    <a href="/had-tech-store/categories/pcs.php">
                        PCs
                    </a>

                    <a href="/had-tech-store/categories/keyboards.php">
                        Keyboards
                    </a>

                    <a href="/had-tech-store/categories/mice.php">
                        Mice
                    </a>

                    <a href="/had-tech-store/categories/headphones.php">
                        Headphones
                    </a>

                    <a href="/had-tech-store/categories/earbuds.php">
                        Earbuds
                    </a>

                    <a href="/had-tech-store/categories/speakers.php">
                        Speakers
                    </a>

                    <a href="/had-tech-store/categories/components.php">
                        PC Components
                    </a>
                </div>
            </div>

            <!-- Anime -->
            <a href="/had-tech-store/categories/anime-figures.php"
               class="">
                Anime
            </a>

            <!-- Deals -->
            <a href="/had-tech-store/deals.php"
               class="">
                Deals
            </a>

        </div>

        <!-- Navbar Actions -->
        <div class="navbar-actions">

            <!-- Search -->
            <button class="nav-icon search-toggle" type="button" title="Search">
                🔍
            </button>

            <!-- Wishlist -->
            <a href="/had-tech-store/wishlist.php"
               class="nav-icon"
               title="Wishlist">
                ♡
            </a>

            <!-- Account -->
            
                <a href="/had-tech-store/login.php"
                   class="nav-icon"
                   title="Login">
                    👤
                </a>

            
            <!-- Cart -->
            <a href="/had-tech-store/cart.php"
               class="cart-button"
               title="Shopping Cart">

                🛒

                
            </a>

            <!-- Mobile Menu Button -->
            <button class="mobile-menu-button"
                    type="button"
                    aria-label="Open menu">
                ☰
            </button>

        </div>

    </div>

    <!-- Search Bar -->
    <div class="navbar-search">
        <form action="/had-tech-store/shop.php" method="GET">

            <div class="search-wrapper">

                <input
                    type="search"
                    name="search"
                    placeholder="Search gaming gear, PCs, anime figures..."
                    autocomplete="off"
                >

                <button type="submit">
                    Search
                </button>

            </div>

        </form>
    </div>

</nav>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

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

    <meta name="description"
          content="HAD TECH STORE - Gaming PCs, keyboards, mice, headphones, accessories, tech products and anime figures.">

    <title>HAD TECH STORE | Gaming • Tech • Anime</title>

    <!-- Main Website CSS -->
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- Google Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
          rel="stylesheet">

    <style>

        /* =========================================
           GLOBAL HOMEPAGE
        ========================================= */

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background: #0F1115;
            color: #F8FAFC;
            font-family: 'Inter', sans-serif;
        }

        a {
            text-decoration: none;
        }

        .container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 30px;
        }


        /* =========================================
           HERO BANNER
        ========================================= */

        .hero-section {
            width: 100%;
            padding: 25px 0 10px;
        }

        .hero-banner {
            position: relative;
            width: 100%;
            overflow: hidden;
            border-radius: 16px;
            border: 1px solid #334155;
            background: #181C22;
        }

        .hero-banner img {
            display: block;
            width: 100%;
            height: auto;
            min-height: 300px;
            object-fit: cover;
        }

        .hero-overlay {
            position: absolute;
            inset: 0;

            display: flex;
            align-items: center;

            padding: 50px;

            background: linear-gradient(
                90deg,
                rgba(15, 17, 21, 0.82) 0%,
                rgba(15, 17, 21, 0.50) 40%,
                rgba(15, 17, 21, 0.05) 75%
            );
        }

        .hero-content {
            max-width: 520px;
        }

        .hero-small-text {
            display: inline-block;

            margin-bottom: 14px;

            color: #38BDF8;

            font-size: 13px;
            font-weight: 700;

            letter-spacing: 1.5px;
            text-transform: uppercase;
        }

        .hero-title {
            margin: 0 0 15px;

            color: #F8FAFC;

            font-size: clamp(32px, 5vw, 62px);
            line-height: 1.05;
            font-weight: 800;
        }

        .hero-title span {
            color: #38BDF8;
        }

        .hero-description {
            margin: 0 0 25px;

            color: #CBD5E1;

            font-size: 16px;
            line-height: 1.7;
        }

        .hero-buttons {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .btn-primary,
        .btn-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 13px 22px;

            border-radius: 8px;

            font-size: 14px;
            font-weight: 700;

            transition:
                transform 0.2s ease,
                background 0.2s ease;
        }

        .btn-primary {
            background: #38BDF8;
            color: #0F1115;
        }

        .btn-primary:hover {
            background: #60A5FA;
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: rgba(24, 28, 34, 0.85);
            color: #F8FAFC;
            border: 1px solid #475569;
        }

        .btn-secondary:hover {
            background: #222831;
            transform: translateY(-2px);
        }


        /* =========================================
           SECTION HEADER
        ========================================= */

        .home-section {
            padding: 65px 0 0;
        }

        .section-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;

            gap: 20px;

            margin-bottom: 25px;
        }

        .section-heading {
            margin: 0;

            color: #F8FAFC;

            font-size: 28px;
            font-weight: 800;
        }

        .section-heading span {
            color: #38BDF8;
        }

        .section-description {
            margin: 7px 0 0;

            color: #A7B0BE;

            font-size: 14px;
        }

        .view-all {
            color: #38BDF8;
            font-size: 14px;
            font-weight: 700;

            white-space: nowrap;
        }

        .view-all:hover {
            color: #60A5FA;
        }


        /* =========================================
           CATEGORY CARDS
        ========================================= */

        .category-grid {
            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 18px;
        }

        .category-card {
            position: relative;

            min-height: 245px;

            overflow: hidden;

            border-radius: 12px;

            background: #181C22;
            border: 1px solid #334155;

            transition:
                transform 0.25s ease,
                border-color 0.25s ease;
        }

        .category-card:hover {
            transform: translateY(-5px);
            border-color: #38BDF8;
        }

        .category-image {
            width: 100%;
            height: 190px;

            display: flex;
            align-items: center;
            justify-content: center;

            background: #222831;

            overflow: hidden;
        }

        .category-image img {
            width: 100%;
            height: 100%;

            object-fit: contain;

            transition: transform 0.3s ease;
        }

        .category-card:hover .category-image img {
            transform: scale(1.06);
        }

        .category-info {
            padding: 14px 16px;
        }

        .category-name {
            margin: 0;

            color: #F8FAFC;

            font-size: 15px;
            font-weight: 700;
        }

        .category-link {
            display: inline-block;

            margin-top: 5px;

            color: #38BDF8;

            font-size: 12px;
            font-weight: 600;
        }


        /* =========================================
           DEAL BANNERS
        ========================================= */

        .deal-grid {
            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 18px;
        }

        .deal-banner {
            display: block;

            overflow: hidden;

            border-radius: 12px;

            background: #181C22;
            border: 1px solid #334155;

            transition:
                transform 0.25s ease,
                border-color 0.25s ease;
        }

        .deal-banner:hover {
            transform: translateY(-4px);
            border-color: #38BDF8;
        }

        .deal-banner img {
            display: block;

            width: 100%;
            height: auto;

            object-fit: cover;

            transition: transform 0.35s ease;
        }

        .deal-banner:hover img {
            transform: scale(1.03);
        }


        /* =========================================
           PRODUCT GRID
        ========================================= */

        .product-grid {
            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 18px;
        }

        .product-card {
            position: relative;

            overflow: hidden;

            background: #181C22;

            border: 1px solid #334155;
            border-radius: 12px;

            transition:
                transform 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease;
        }

        .product-card:hover {
            transform: translateY(-5px);

            border-color: #38BDF8;

            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
        }

        .product-image {
            position: relative;

            height: 245px;

            display: flex;
            align-items: center;
            justify-content: center;

            background: #222831;

            overflow: hidden;
        }

        .product-image img {
            width: 100%;
            height: 100%;

            object-fit: contain;

            transition: transform 0.3s ease;
        }

        .product-card:hover .product-image img {
            transform: scale(1.05);
        }

        .product-badge {
            position: absolute;

            top: 12px;
            left: 12px;

            padding: 5px 9px;

            border-radius: 5px;

            background: #38BDF8;
            color: #0F1115;

            font-size: 10px;
            font-weight: 800;

            text-transform: uppercase;
        }

        .product-details {
            padding: 16px;
        }

        .product-category {
            margin-bottom: 6px;

            color: #38BDF8;

            font-size: 11px;
            font-weight: 700;

            text-transform: uppercase;
            letter-spacing: 0.7px;
        }

        .product-name {
            margin: 0;

            color: #F8FAFC;

            font-size: 15px;
            line-height: 1.4;
            font-weight: 700;
        }

        .product-price {
            display: flex;
            align-items: center;
            gap: 8px;

            margin-top: 12px;
        }

        .current-price {
            color: #F8FAFC;

            font-size: 17px;
            font-weight: 800;
        }

        .old-price {
            color: #64748B;

            font-size: 13px;

            text-decoration: line-through;
        }

        .product-rating {
            margin-top: 8px;

            color: #FBBF24;

            font-size: 12px;
        }


        /* =========================================
           WHY SHOP WITH US
        ========================================= */

        .features-grid {
            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 18px;
        }

        .feature-card {
            padding: 25px 20px;

            background: #181C22;

            border: 1px solid #334155;
            border-radius: 12px;

            text-align: center;
        }

        .feature-icon {
            width: 48px;
            height: 48px;

            display: flex;
            align-items: center;
            justify-content: center;

            margin: 0 auto 15px;

            border-radius: 10px;

            background: #222831;

            color: #38BDF8;

            font-size: 21px;
        }

        .feature-title {
            margin: 0 0 7px;

            color: #F8FAFC;

            font-size: 15px;
            font-weight: 700;
        }

        .feature-text {
            margin: 0;

            color: #A7B0BE;

            font-size: 12px;
            line-height: 1.6;
        }


        /* =========================================
           NEWSLETTER
        ========================================= */

        .newsletter {
            margin-top: 65px;
            padding: 50px 30px;

            background: #181C22;

            border: 1px solid #334155;
            border-radius: 14px;

            text-align: center;
        }

        .newsletter h2 {
            margin: 0 0 10px;

            font-size: 28px;
            font-weight: 800;
        }

        .newsletter h2 span {
            color: #38BDF8;
        }

        .newsletter p {
            margin: 0 auto 22px;

            max-width: 550px;

            color: #A7B0BE;

            font-size: 14px;
            line-height: 1.6;
        }

        .newsletter-form {
            display: flex;

            max-width: 500px;

            margin: 0 auto;

            background: #0F1115;

            border: 1px solid #334155;
            border-radius: 8px;

            overflow: hidden;
        }

        .newsletter-form input {
            flex: 1;

            min-width: 0;

            padding: 14px 15px;

            background: transparent;

            border: none;
            outline: none;

            color: #F8FAFC;

            font-family: inherit;
        }

        .newsletter-form input::placeholder {
            color: #64748B;
        }

        .newsletter-form button {
            padding: 0 20px;

            background: #38BDF8;
            color: #0F1115;

            border: none;

            font-family: inherit;
            font-weight: 800;

            cursor: pointer;
        }

        .newsletter-form button:hover {
            background: #60A5FA;
        }


        /* =========================================
           FOOTER
        ========================================= */

        .site-footer {
            margin-top: 70px;

            background: #0B0D11;

            border-top: 1px solid #334155;
        }

        .footer-main {
            max-width: 1400px;

            margin: 0 auto;

            padding: 55px 30px;

            display: grid;

            grid-template-columns: 2fr 1fr 1fr 1fr;

            gap: 45px;
        }

        .footer-logo {
            display: inline-flex;

            align-items: baseline;
            gap: 5px;

            margin-bottom: 15px;

            font-size: 22px;
            font-weight: 800;
        }

        .footer-logo .had {
            color: #F8FAFC;
        }

        .footer-logo .tech {
            color: #38BDF8;
        }

        .footer-logo .store {
            color: #A7B0BE;

            font-size: 11px;
            letter-spacing: 1px;
        }

        .footer-about {
            max-width: 350px;

            color: #A7B0BE;

            font-size: 13px;
            line-height: 1.8;
        }

        .footer-heading {
            margin: 0 0 16px;

            color: #F8FAFC;

            font-size: 14px;
            font-weight: 800;
        }

        .footer-links {
            display: flex;

            flex-direction: column;

            gap: 10px;
        }

        .footer-links a {
            color: #A7B0BE;

            font-size: 13px;

            transition: color 0.2s ease;
        }

        .footer-links a:hover {
            color: #38BDF8;
        }

        .footer-bottom {
            max-width: 1400px;

            margin: 0 auto;

            padding: 18px 30px;

            display: flex;

            align-items: center;
            justify-content: space-between;

            gap: 20px;

            border-top: 1px solid #222831;

            color: #64748B;

            font-size: 12px;
        }

        .footer-socials {
            display: flex;
            gap: 8px;
        }

        .social-icon {
            width: 34px;
            height: 34px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 7px;

            background: #181C22;

            color: #A7B0BE;

            border: 1px solid #334155;
        }

        .social-icon:hover {
            color: #38BDF8;
            border-color: #38BDF8;
        }


        /* =========================================
           RESPONSIVE
        ========================================= */

        @media (max-width: 1100px) {

            .category-grid,
            .product-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .features-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .footer-main {
                grid-template-columns: 2fr 1fr 1fr;
            }
        }


        @media (max-width: 800px) {

            .container {
                padding: 0 18px;
            }

            .hero-section {
                padding-top: 18px;
            }

            .hero-overlay {
                padding: 30px;
            }

            .hero-banner img {
                min-height: 380px;
                object-fit: cover;
            }

            .hero-content {
                max-width: 450px;
            }

            .category-grid,
            .product-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .deal-grid {
                grid-template-columns: 1fr;
            }

            .footer-main {
                grid-template-columns: repeat(2, 1fr);
            }

            .footer-brand {
                grid-column: 1 / -1;
            }
        }


        @media (max-width: 500px) {

            .hero-overlay {
                padding: 25px 20px;
            }

            .hero-title {
                font-size: 35px;
            }

            .hero-description {
                font-size: 13px;
            }

            .section-header {
                align-items: flex-start;
                flex-direction: column;
            }

            .section-heading {
                font-size: 23px;
            }

            .category-grid,
            .product-grid {
                grid-template-columns: 1fr;
            }

            .features-grid {
                grid-template-columns: 1fr;
            }

            .newsletter {
                padding: 35px 18px;
            }

            .newsletter-form {
                flex-direction: column;
            }

            .newsletter-form input {
                width: 100%;
            }

            .newsletter-form button {
                padding: 13px;
            }

            .footer-main {
                grid-template-columns: 1fr;
                padding: 40px 20px;
            }

            .footer-bottom {
                padding: 18px 20px;

                flex-direction: column;
                text-align: center;
            }
        }

    </style>
</head>

<body>


<!-- =========================================
     HERO
========================================= -->

<section class="hero-section">

    <div class="container">

        <div class="hero-banner">

            <!-- Main promotional PNG -->
            <img src="images/banners/hero-banner.png"
                 alt="HAD TECH STORE Gaming and Technology">

            <!-- Text over banner -->
            <div class="hero-overlay">

                <div class="hero-content">

                    <div class="hero-small-text">
                        HAD TECH STORE
                    </div>

                    <h1 class="hero-title">
                        LEVEL UP<br>
                        YOUR <span>SETUP.</span>
                    </h1>

                    <p class="hero-description">
                        Gaming PCs, powerful tech, premium accessories
                        and anime collectibles — all in one place.
                    </p>

                    <div class="hero-buttons">

                        <a href="shop.php"
                           class="btn-primary">
                            Shop Now
                        </a>

                        <a href="categories/gaming-pcs.php"
                           class="btn-secondary">
                            Explore Gaming
                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>



<!-- =========================================
     SHOP BY CATEGORY
========================================= -->

<section class="home-section">

    <div class="container">

        <div class="section-header">

            <div>
                <h2 class="section-heading">
                    Shop by <span>Category</span>
                </h2>

                <p class="section-description">
                    Find the gear you need for your setup.
                </p>
            </div>

            <a href="shop.php" class="view-all">
                View All →
            </a>

        </div>


        <div class="category-grid">


            <!-- Gaming Mice -->

            <a href="categories/gaming-mice.php"
               class="category-card">

                <div class="category-image">

                    <img src="images/products/gaming-mouse.png"
                         alt="Gaming Mouses"
                         loading="lazy">

                </div>

                <div class="category-info">

                    <h3 class="category-name">
                        Gaming Mouses
                    </h3>

                    <span class="category-link">
                        Shop Now →
                    </span>

                </div>

            </a>


            <!-- Keyboards -->

            <a href="categories/keyboards.php"
               class="category-card">

                <div class="category-image">

                    <img src="images/products/gaming-keyboard.png"
                         alt="Gaming Keyboards"
                         loading="lazy">

                </div>

                <div class="category-info">

                    <h3 class="category-name">
                        Gaming Keyboards
                    </h3>

                    <span class="category-link">
                        Shop Now →
                    </span>

                </div>

            </a>


            <!-- Headphones -->

            <a href="categories/headphones.php"
               class="category-card">

                <div class="category-image">

                    <img src="images/products/gaming-headset.png"
                         alt="Gaming Headphones"
                         loading="lazy">

                </div>

                <div class="category-info">

                    <h3 class="category-name">
                        Headphones
                    </h3>

                    <span class="category-link">
                        Shop Now →
                    </span>

                </div>

            </a>


            <!-- Gaming PCs -->

            <a href="categories/gaming-pcs.php"
               class="category-card">

                <div class="category-image">

                    <img src="images/products/gaming-pc.png"
                         alt="Gaming PCs"
                         loading="lazy">

                </div>

                <div class="category-info">

                    <h3 class="category-name">
                        Gaming PCs
                    </h3>

                    <span class="category-link">
                        Shop Now →
                    </span>

                </div>

            </a>


            <!-- Monitors -->

            <a href="categories/monitors.php"
               class="category-card">

                <div class="category-image">

                    <img src="images/products/monitor.png"
                         alt="Monitors"
                         loading="lazy">

                </div>

                <div class="category-info">

                    <h3 class="category-name">
                        Monitors
                    </h3>

                    <span class="category-link">
                        Shop Now →
                    </span>

                </div>

            </a>


            <!-- Earbuds -->

            <a href="categories/earbuds.php"
               class="category-card">

                <div class="category-image">

                    <img src="images/products/earbuds.png"
                         alt="Earbuds"
                         loading="lazy">

                </div>

                <div class="category-info">

                    <h3 class="category-name">
                        Earbuds
                    </h3>

                    <span class="category-link">
                        Shop Now →
                    </span>

                </div>

            </a>


            <!-- Speakers -->

            <a href="categories/speakers.php"
               class="category-card">

                <div class="category-image">

                    <img src="images/products/speaker.png"
                         alt="Speakers"
                         loading="lazy">

                </div>

                <div class="category-info">

                    <h3 class="category-name">
                        Speakers
                    </h3>

                    <span class="category-link">
                        Shop Now →
                    </span>

                </div>

            </a>


            <!-- Anime -->

            <a href="categories/anime-figures.php"
               class="category-card">

                <div class="category-image">

                    <img src="images/products/anime-figure.png"
                         alt="Anime Figures"
                         loading="lazy">

                </div>

                <div class="category-info">

                    <h3 class="category-name">
                        Anime Figures
                    </h3>

                    <span class="category-link">
                        Shop Now →
                    </span>

                </div>

            </a>


        </div>

    </div>

</section>



<!-- =========================================
     DEAL BANNERS
========================================= -->

<section class="home-section">

    <div class="container">

        <div class="section-header">

            <div>

                <h2 class="section-heading">
                    Today's <span>Deals</span>
                </h2>

                <p class="section-description">
                    Grab our latest offers before they're gone.
                </p>

            </div>

            <a href="deals.php"
               class="view-all">
                View All Deals →
            </a>

        </div>


        <div class="deal-grid">


            <a href="deals.php?category=gaming"
               class="deal-banner">

                <img src="images/banners/gaming-deals.png"
                     alt="Gaming Deals"
                     loading="lazy">

            </a>


            <a href="deals.php?category=pcs"
               class="deal-banner">

                <img src="images/banners/pc-deals.png"
                     alt="PC Deals"
                     loading="lazy">

            </a>


            <a href="deals.php?category=anime"
               class="deal-banner">

                <img src="images/banners/anime-deals.png"
                     alt="Anime Deals"
                     loading="lazy">

            </a>


        </div>

    </div>

</section>



<!-- =========================================
     FEATURED PRODUCTS
========================================= -->

<section class="home-section">

    <div class="container">

        <div class="section-header">

            <div>

                <h2 class="section-heading">
                    Featured <span>Products</span>
                </h2>

                <p class="section-description">
                    Popular picks for your gaming and tech setup.
                </p>

            </div>

            <a href="shop.php"
               class="view-all">
                Browse Store →
            </a>

        </div>


        <div class="product-grid">


            <!-- Product 1 -->

            <a href="product.php?id=gaming-mouse"
               class="product-card">

                <div class="product-image">

                    <span class="product-badge">
                        Popular
                    </span>

                    <img src="images/products/gaming-mouse.png"
                         alt="Gaming Mouse"
                         loading="lazy">

                </div>

                <div class="product-details">

                    <div class="product-category">
                        Gaming
                    </div>

                    <h3 class="product-name">
                        HAD Pro Gaming Mouse
                    </h3>

                    <div class="product-rating">
                        ★★★★★
                    </div>

                    <div class="product-price">

                        <span class="current-price">
                            Rs. 4,999
                        </span>

                        <span class="old-price">
                            Rs. 5,999
                        </span>

                    </div>

                </div>

            </a>


            <!-- Product 2 -->

            <a href="product.php?id=gaming-keyboard"
               class="product-card">

                <div class="product-image">

                    <span class="product-badge">
                        New
                    </span>

                    <img src="images/products/gaming-keyboard.png"
                         alt="Gaming Keyboard"
                         loading="lazy">

                </div>

                <div class="product-details">

                    <div class="product-category">
                        Keyboards
                    </div>

                    <h3 class="product-name">
                        Mechanical Gaming Keyboard
                    </h3>

                    <div class="product-rating">
                        ★★★★★
                    </div>

                    <div class="product-price">

                        <span class="current-price">
                            Rs. 7,499
                        </span>

                    </div>

                </div>

            </a>


            <!-- Product 3 -->

            <a href="product.php?id=gaming-headset"
               class="product-card">

                <div class="product-image">

                    <span class="product-badge">
                        Sale
                    </span>

                    <img src="images/products/gaming-headset.png"
                         alt="Gaming Headset"
                         loading="lazy">

                </div>

                <div class="product-details">

                    <div class="product-category">
                        Audio
                    </div>

                    <h3 class="product-name">
                        HAD Gaming Headset
                    </h3>

                    <div class="product-rating">
                        ★★★★☆
                    </div>

                    <div class="product-price">

                        <span class="current-price">
                            Rs. 6,999
                        </span>

                        <span class="old-price">
                            Rs. 8,499
                        </span>

                    </div>

                </div>

            </a>


            <!-- Product 4 -->

            <a href="product.php?id=anime-figure"
               class="product-card">

                <div class="product-image">

                    <span class="product-badge">
                        New
                    </span>

                    <img src="images/products/anime-figure.png"
                         alt="Anime Figure"
                         loading="lazy">

                </div>

                <div class="product-details">

                    <div class="product-category">
                        Anime
                    </div>

                    <h3 class="product-name">
                        Premium Anime Figure
                    </h3>

                    <div class="product-rating">
                        ★★★★★
                    </div>

                    <div class="product-price">

                        <span class="current-price">
                            Rs. 8,999
                        </span>

                    </div>

                </div>

            </a>


        </div>

    </div>

</section>



<!-- =========================================
     WHY HAD TECH STORE
========================================= -->

<section class="home-section">

    <div class="container">

        <div class="section-header">

            <div>

                <h2 class="section-heading">
                    Why <span>HAD TECH STORE?</span>
                </h2>

                <p class="section-description">
                    Everything you need for your setup.
                </p>

            </div>

        </div>


        <div class="features-grid">


            <div class="feature-card">

                <div class="feature-icon">
                    🚚
                </div>

                <h3 class="feature-title">
                    Fast Delivery
                </h3>

                <p class="feature-text">
                    Get your products delivered quickly
                    and safely to your doorstep.
                </p>

            </div>


            <div class="feature-card">

                <div class="feature-icon">
                    ✓
                </div>

                <h3 class="feature-title">
                    Quality Products
                </h3>

                <p class="feature-text">
                    Shop gaming gear, technology and
                    collectibles selected for quality.
                </p>

            </div>


            <div class="feature-card">

                <div class="feature-icon">
                    🔒
                </div>

                <h3 class="feature-title">
                    Secure Shopping
                </h3>

                <p class="feature-text">
                    Your account and order information
                    are handled securely.
                </p>

            </div>


            <div class="feature-card">

                <div class="feature-icon">
                    💬
                </div>

                <h3 class="feature-title">
                    Customer Support
                </h3>

                <p class="feature-text">
                    Need help? Our support team is here
                    to assist you.
                </p>

            </div>


        </div>

    </div>

</section>



<!-- =========================================
     NEWSLETTER
========================================= -->

<section class="container">

    <div class="newsletter">

        <h2>
            Stay in the <span>Loop.</span>
        </h2>

        <p>
            Get notified about new products, gaming gear,
            special deals and the latest arrivals at
            HAD TECH STORE.
        </p>

        <form class="newsletter-form"
              action="#"
              method="POST">

            <input
                type="email"
                name="email"
                placeholder="Enter your email address"
                required
            >

            <button type="submit">
                Subscribe
            </button>

        </form>

    </div>

</section>



<!-- =========================================
     FOOTER
========================================= -->

<footer class="site-footer">


    <div class="footer-main">


        <!-- Brand -->

        <div class="footer-brand">

            <div class="footer-logo">

                <span class="had">
                    HAD
                </span>

                <span class="tech">
                    TECH
                </span>

                <span class="store">
                    STORE
                </span>

            </div>

            <p class="footer-about">
                Your destination for gaming gear,
                technology, PC accessories, audio products
                and anime collectibles.
            </p>

            <div class="footer-socials">

                <a href="#"
                   class="social-icon"
                   aria-label="Facebook">
                    f
                </a>

                <a href="#"
                   class="social-icon"
                   aria-label="Instagram">
                    ◎
                </a>

                <a href="#"
                   class="social-icon"
                   aria-label="TikTok">
                    ♪
                </a>

                <a href="#"
                   class="social-icon"
                   aria-label="YouTube">
                    ▶
                </a>

            </div>

        </div>


        <!-- Shop -->

        <div>

            <h3 class="footer-heading">
                Shop
            </h3>

            <div class="footer-links">

                <a href="shop.php">
                    All Products
                </a>

                <a href="categories/gaming-pcs.php">
                    Gaming PCs
                </a>

                <a href="categories/keyboards.php">
                    Keyboards
                </a>

                <a href="categories/gaming-mice.php">
                    Gaming Mouses
                </a>

                <a href="categories/headphones.php">
                    Headphones
                </a>

                <a href="categories/anime-figures.php">
                    Anime Figures
                </a>

            </div>

        </div>


        <!-- Customer -->

        <div>

            <h3 class="footer-heading">
                Customer
            </h3>

            <div class="footer-links">

                <a href="account.php">
                    My Account
                </a>

                <a href="orders.php">
                    My Orders
                </a>

                <a href="wishlist.php">
                    Wishlist
                </a>

                <a href="contact.php">
                    Contact Us
                </a>

                <a href="#">
                    Shipping Information
                </a>

                <a href="#">
                    Returns & Refunds
                </a>

            </div>

        </div>


        <!-- Company -->

        <div>

            <h3 class="footer-heading">
                HAD TECH STORE
            </h3>

            <div class="footer-links">

                <a href="#">
                    About Us
                </a>

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

                <a href="#">
                    Terms & Conditions
                </a>

                <a href="#">
                    FAQs
                </a>

            </div>

        </div>


    </div>


    <!-- Bottom Footer -->

    <div class="footer-bottom">

        <div>
            © 2026 HAD TECH STORE.
            All Rights Reserved.
        </div>

        <div>
            Gaming • Tech • Anime
        </div>

    </div>


</footer>


</body>
</html>
```