<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- ═══════════════════════════════════════════════════ -->
    <!--  PRIMARY META                                       -->
    <!-- ═══════════════════════════════════════════════════ -->
    <title>TicTacToeBlogs - Ideas, Stories &amp; Perspectives</title>
    <meta name="description"
        content="Your go-to destination for articles on tech, gaming, and more. Fresh perspectives from curious minds.">
    <meta name="keywords" content="blog, articles, tech, gaming, tips, insights, stories, perspectives">
    <meta name="author" content="TicTacToeBlogs">
    <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
    <script>
      (function () {
        var path = (window.location.pathname || '/').replace(/\/+$/, '') || '/';
        var fullUrl = path === '/' ? window.location.origin + '/' : window.location.origin + path;
        var link = document.createElement('link');
        link.rel = 'canonical';
        link.href = fullUrl;
        document.head.appendChild(link);
        var og = document.querySelector('meta[property="og:url"]');
        if (og) og.setAttribute('content', fullUrl);
      })();
    </script>

    <!-- ═══════════════════════════════════════════════════ -->
    <!--  FAVICON STACK (all sizes for all platforms)        -->
    <!-- ═══════════════════════════════════════════════════ -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="icon" type="image/webp" sizes="32x32" href="/assets/logo-256.webp">
    <link rel="icon" type="image/webp" sizes="16x16" href="/assets/logo-256.webp">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/pwa/apple-touch-icon.png">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="manifest" href="/manifest.webmanifest">
    <meta name="theme-color" content="#7c3aed">
    <meta name="msapplication-TileColor" content="#7c3aed">
    <meta name="msapplication-TileImage" content="/assets/pwa/icon-512.png">
    <meta name="application-name" content="TicTacToeBlogs">
    <meta name="apple-mobile-web-app-title" content="TicTacToeBlogs">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <!-- ═══════════════════════════════════════════════════ -->
    <!--  OPEN GRAPH (Facebook, LinkedIn, WhatsApp, etc.)    -->
    <!-- ═══════════════════════════════════════════════════ -->
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="TicTacToeBlogs">
    <meta property="og:url" content="https://blog.tictactoeonline.in/">
    <meta property="og:title" content="TicTacToeBlogs - Ideas, Stories &amp; Perspectives">
    <meta property="og:description"
        content="Your go-to destination for articles on tech, gaming, and more. Fresh perspectives from curious minds.">
    <meta property="og:image" content="https://blog.tictactoeonline.in/assets/blog_tictactoe_OG.png">
    <meta property="og:image:secure_url" content="https://blog.tictactoeonline.in/assets/blog_tictactoe_OG.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="Tic Tac Toe Blogs — Insights, Strategies, Updates">
    <meta property="og:locale" content="en_US">

    <!-- ═══════════════════════════════════════════════════ -->
    <!--  TWITTER / X CARD                                   -->
    <!-- ═══════════════════════════════════════════════════ -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="TicTacToeBlogs - Ideas, Stories &amp; Perspectives">
    <meta name="twitter:description"
        content="Your go-to destination for articles on tech, gaming, and more.">
    <meta name="twitter:image" content="https://blog.tictactoeonline.in/assets/blog_tictactoe_OG.png">
    <meta name="twitter:image:alt" content="Tic Tac Toe Blogs — Insights, Strategies, Updates">

    <!-- ═══════════════════════════════════════════════════ -->
    <!--  STRUCTURED DATA (JSON-LD)                          -->
    <!-- ═══════════════════════════════════════════════════ -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "TicTacToeBlogs",
      "alternateName": "TicTacToeBlogs",
      "url": "https://blog.tictactoeonline.in/",
      "description": "Your go-to destination for articles on tech, gaming, and more.",
      "image": "https://blog.tictactoeonline.in/assets/blog_tictactoe_OG.png",
      "potentialAction": {
        "@type": "SearchAction",
        "target": {
          "@type": "EntryPoint",
          "urlTemplate": "https://blog.tictactoeonline.in/blogs?q={search_term_string}"
        },
        "query-input": "required name=search_term_string"
      },
      "publisher": {
        "@type": "Organization",
        "name": "TicTacToeBlogs",
        "url": "https://blog.tictactoeonline.in/",
        "logo": {
          "@type": "ImageObject",
          "url": "https://blog.tictactoeonline.in/assets/logo.webp"
        }
      }
    }
    </script>

    <!-- ═══════════════════════════════════════════════════ -->
    <!--  PERFORMANCE: PRECONNECT                            -->
    <!-- ═══════════════════════════════════════════════════ -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://www.gstatic.com">
    <link rel="dns-prefetch" href="https://firestore.googleapis.com">

    <!-- Preload Critical Assets -->
    <link rel="preload" href="/assets/logo-256.webp" as="image">

    <!-- ═══════════════════════════════════════════════════ -->
    <!--  TAILWIND CSS                                       -->
    <!-- ═══════════════════════════════════════════════════ -->
    <!-- Tailwind CSS (Production Built) -->
    <link rel="stylesheet" href="/css/tailwind-prod.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/style.css">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Outfit', sans-serif;
        }
    </style>
</head>

<body class="transition-colors duration-300">
    <!-- Reading progress bar (shown on post/page view, updated on scroll) -->
    <div id="reading-progress-bar" class="reading-progress-bar" role="progressbar" aria-label="Reading progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>

    <!-- Background Decorations -->
    <div class="fixed inset-0 pointer-events-none z-[-1] overflow-hidden">
        <div class="absolute top-[-10%] right-[-10%] w-[50%] h-[50%] bg-primary/5 rounded-full blur-[120px]"></div>
        <div class="absolute bottom-[-10%] left-[-10%] w-[50%] h-[50%] bg-secondary/5 rounded-full blur-[120px]"></div>
    </div>

    <!-- Navbar -->
    <nav class="fixed top-0 w-full z-50 backdrop-blur-xl border-b border-[var(--border-color)] bg-white/40">
        <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
            <a href="/" class="flex items-center space-x-3 group"
                onclick="event.preventDefault(); window.history.pushState({}, '', '/'); handleRouting();">
                <div class="relative">
                    <img src="/assets/logo-256.webp" alt="TicTacToeBlogs Logo" fetchpriority="high"
                        class="w-10 h-10 object-contain rounded-full relative transition-transform duration-300">
                </div>
                <span class="text-lg sm:text-xl lg:text-2xl font-bold tracking-tight">TicTacToe<span
                        class="text-primary italic">Blogs</span></span>
            </a>

            <div class="nav-desktop-links flex">
                <a href="/" class="nav-link flex items-center gap-2"
                    onclick="event.preventDefault(); window.history.pushState({}, '', '/'); handleRouting();">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M3 9l9-9 9 9v11a2 2 0 002 2H5a2 2 0 00-2-2V9z"></path>
                    </svg>
                    Home
                </a>
                <a href="/#features" class="nav-link flex items-center gap-2"
                    onclick="event.preventDefault(); window.history.pushState({}, '', '/'); handleRouting(); document.getElementById('features')?.scrollIntoView({behavior: 'smooth'});">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
                        </path>
                    </svg>
                    Features
                </a>
                <a href="/blogs" class="nav-link flex items-center gap-2"
                    onclick="event.preventDefault(); window.history.pushState({}, '', '/blogs'); handleRouting(); window.scrollTo({top: 0, behavior: 'smooth'});">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v12a2 2 0 01-2 2M9 14h6m-6-4h6"></path>
                    </svg>
                    Blogs
                </a>
                <a href="/about-us" class="nav-link flex items-center gap-2"
                    onclick="event.preventDefault(); window.history.pushState({}, '', '/about-us'); handleRouting();">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    About
                </a>
                <a href="https://social.tictactoeonline.in" target="_blank" rel="noopener noreferrer" class="nav-link flex items-center gap-2"
                    >
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path
                            d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.04.07-4.85.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                    </svg>
                    Social
                </a>
                <a href="/links" class="nav-link flex items-center gap-2"
                    onclick="event.preventDefault(); window.history.pushState({}, '', '/links'); handleRouting();">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.828a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1">
                        </path>
                    </svg>
                    Links
                </a>
            </div>

            <div class="flex items-center gap-2 sm:gap-3 shrink-0 min-w-0">
                <div class="relative nav-inline-search shrink min-w-0">
                    <input type="text" id="blog-search" placeholder="Search articles..."
                        class="nav-search-input bg-primary/5 border border-[var(--border-color)] rounded-lg py-2 focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all font-medium">
                    <button id="search-trigger"
                        class="absolute right-4 top-1/2 -translate-y-1/2 text-primary hover:scale-110 transition-transform">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </button>
                    <button id="search-clear"
                        class="hidden absolute right-12 top-1/2 -translate-y-1/2 text-gray-400 hover:text-primary transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                <button id="mobile-menu-btn" type="button" class="nav-hamburger-btn p-2 text-gray-600" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 6h16M4 12h16m-7 6h7"></path>
                    </svg>
                </button>
            </div>
        </div>
    </nav>

    <!-- Mobile Menu -->
    <div id="mobile-menu"
        class="fixed top-16 left-0 right-0 bg-white/95 backdrop-blur-xl border-b border-[var(--border-color)] z-40 transform -translate-y-full transition-transform duration-300 ease-in-out">
        <div class="max-w-7xl mx-auto px-6 py-4 space-y-4">
            <a href="/" class="flex items-center gap-3 nav-link text-lg font-medium"
                onclick="event.preventDefault(); window.history.pushState({}, '', '/'); handleRouting(); closeMobileMenu();">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 9l9-9 9 9v11a2 2 0 002 2H5a2 2 0 00-2-2V9z"></path>
                </svg>
                Home
            </a>
            <a href="/#features" class="flex items-center gap-3 nav-link text-lg font-medium"
                onclick="event.preventDefault(); window.history.pushState({}, '', '/'); handleRouting(); document.getElementById('features')?.scrollIntoView({behavior: 'smooth'}); closeMobileMenu();">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
                    </path>
                </svg>
                Features
            </a>
            <a href="/blogs" class="flex items-center gap-3 nav-link text-lg font-medium"
                onclick="event.preventDefault(); window.history.pushState({}, '', '/blogs'); handleRouting(); closeMobileMenu(); window.scrollTo({top: 0, behavior: 'smooth'});">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v12a2 2 0 01-2 2M9 14h6m-6-4h6"></path>
                </svg>
                Blogs
            </a>
            <a href="/about-us" class="flex items-center gap-3 nav-link text-lg font-medium"
                onclick="event.preventDefault(); window.history.pushState({}, '', '/about-us'); handleRouting(); closeMobileMenu();">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                About
            </a>
            <a href="https://social.tictactoeonline.in" target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 nav-link text-lg font-medium"
                >
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path
                        d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.04.07-4.85.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                </svg>
                Social
            </a>
            <a href="/links" class="flex items-center gap-3 nav-link text-lg font-medium"
                onclick="event.preventDefault(); window.history.pushState({}, '', '/links'); handleRouting(); closeMobileMenu();">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.828a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1">
                    </path>
                </svg>
                Links
            </a>
        </div>
    </div>

    <!-- Home View (only visible on main page) -->
    <main id="home">
        <!-- Hero Section -->
        <section id="hero"
            class="hero-section relative min-h-[85vh] flex items-center justify-center px-6 pt-24 pb-20 overflow-hidden">
            <!-- Animated Background Elements -->
            <div class="absolute inset-0 pointer-events-none">
                <div class="hero-orb hero-orb-1"></div>
                <div class="hero-orb hero-orb-2"></div>
                <div class="hero-orb hero-orb-3"></div>
            </div>

            <div class="max-w-4xl mx-auto text-center relative z-10">
                <!-- Badge -->
                <div
                    class="inline-flex items-center gap-2 mb-8 px-4 py-2 rounded-full bg-white/10 border border-white/20 backdrop-blur-sm animate-fade-in">
                    <span class="w-2 h-2 rounded-full bg-yellow-300 animate-pulse"></span>
                    <span class="text-sm font-semibold text-white/80">Ideas worth reading</span>
                </div>

                <h1 class="hero-title text-white font-bold tracking-tight mb-6">
                    <span class="block text-2xl sm:text-3xl md:text-4xl mb-2 opacity-95">Explore</span>
                    <span class="hero-headline-line block text-4xl sm:text-5xl md:text-6xl lg:text-7xl">
                        <span class="hero-headline-accent">Insights</span><span class="text-white"> &amp; Stories</span>
                    </span>
                </h1>

                <p class="hero-subtitle text-white/90 text-lg sm:text-xl max-w-2xl mx-auto mb-10 leading-relaxed"
                    aria-live="polite">
                    <span id="hero-typed" class="hero-typed-target">A multi-topic blog covering tech, gaming, and beyond. Fresh perspectives published
                        regularly.</span>
                </p>

                <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                    <button type="button" id="hero-read-btn"
                        onclick="window.history.pushState({}, '', '/blogs'); handleRouting(); window.scrollTo({top: 0, behavior: 'smooth'});"
                        class="hero-cta-primary inline-flex items-center justify-center gap-3 bg-white text-primary font-bold text-lg px-8 py-4 rounded-2xl shadow-xl hover:shadow-2xl hover:scale-105 active:scale-100 transition-all duration-300 relative group">
                        <span
                            class="absolute inset-0 bg-gradient-to-r from-white to-blue-100 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                        <svg class="w-6 h-6 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                            aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                        </svg>
                        <span class="relative z-10">Start Reading</span>
                    </button>

                    <button type="button" id="hero-scroll-btn"
                        class="hero-cta-secondary inline-flex items-center justify-center gap-2 text-white font-semibold px-6 py-4 rounded-2xl border border-white/30 bg-white/10 backdrop-blur hover:bg-white/20 hover:border-white/50 transition-all duration-300 group">
                        Latest Articles
                        <svg class="w-5 h-5 group-hover:translate-y-1 transition-transform" fill="none"
                            stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </button>
                </div>

                <!-- Scroll Indicator -->
                <!-- <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
                    <svg class="w-6 h-6 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
                    </svg>
                </div> -->
            </div>
        </section>

        <!-- Features Section -->
        <section id="features" class="py-20 px-6 bg-white">
            <div class="max-w-6xl mx-auto">
                <p class="text-primary font-semibold text-sm uppercase tracking-wider text-center mb-2">What We Cover
                </p>
                <h2 class="text-3xl sm:text-4xl font-bold text-[var(--text-primary)] text-center mb-16">Topics for Every
                    Curious Mind</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-10 justify-items-center max-w-4xl mx-auto">
                    <div class="feature-card text-center w-full max-w-sm">
                        <div
                            class="feature-icon w-16 h-16 mx-auto mb-5 rounded-2xl bg-primary flex items-center justify-center">
                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold text-[var(--text-primary)] mb-3">Tech &amp; Innovation</h3>
                        <p class="text-[var(--text-secondary)]">Stay ahead with the latest in technology, software, AI,
                            and digital trends shaping the future.</p>
                    </div>
                    <div class="feature-card text-center w-full max-w-sm">
                        <div
                            class="feature-icon w-16 h-16 mx-auto mb-5 rounded-2xl bg-primary flex items-center justify-center">
                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" stroke-width="2"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold text-[var(--text-primary)] mb-3">Gaming &amp; Entertainment</h3>
                        <p class="text-[var(--text-secondary)]">From game reviews to entertainment deep-dives — curated
                            content for players and pop-culture lovers.</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Reserved routes: unique copy + semantic layout (H1, breadcrumbs, internal links) -->
    <main id="static-page-about-us" class="hidden min-h-[70vh] bg-white">
        <article itemscope itemtype="https://schema.org/AboutPage">
            <meta itemprop="url" content="https://blog.tictactoeonline.in/about-us">
            <header
                class="relative overflow-hidden border-b border-[var(--border-color)] bg-gradient-to-br from-primary/[0.07] via-white to-violet-50/40 pt-24 sm:pt-28 pb-10 sm:pb-14 px-6">
                <div class="absolute inset-0 pointer-events-none opacity-40">
                    <div class="absolute top-10 right-10 w-72 h-72 rounded-full bg-primary/10 blur-3xl"></div>
                </div>
                <div class="max-w-3xl mx-auto relative">
                    <nav class="text-sm text-[var(--text-secondary)] mb-5" aria-label="Breadcrumb">
                        <a href="/"
                            onclick="event.preventDefault(); window.history.pushState({}, '', '/'); handleRouting();"
                            class="text-primary font-semibold hover:underline">Home</a>
                        <span class="mx-2 opacity-50" aria-hidden="true">/</span>
                        <span class="text-[var(--text-primary)] font-medium">About</span>
                    </nav>
                    <p class="text-primary font-semibold text-sm uppercase tracking-widest mb-3">Our story</p>
                    <h1 class="text-4xl sm:text-5xl font-bold text-[var(--text-primary)] tracking-tight mb-4 leading-tight"
                        itemprop="name">About TicTacToeBlogs</h1>
                    <p class="text-lg sm:text-xl text-[var(--text-secondary)] leading-relaxed max-w-2xl">
                        Independent articles on tech, and gaming—written for readers who like clear explanations and fresh angles.
                    </p>
                </div>
            </header>
            <div class="max-w-3xl mx-auto px-6 py-12 sm:py-16 space-y-8 text-[var(--text-secondary)] leading-relaxed text-base sm:text-[17px]">
                <p>
                    <strong class="text-[var(--text-primary)]">TicTacToeBlogs</strong> is the editorial companion to
                    <a href="https://www.tictactoeonline.in" class="text-primary font-semibold hover:underline"
                        target="_blank" rel="noopener noreferrer">Tic Tac Toe Online</a>.
                    We publish explainers, opinion pieces, roundups, and stories that stand on their own—you do not need to play the game to enjoy the blog.
                </p>
                <p>
                    Our writers focus on practical takeaways: what to try, what to avoid, and why it matters. You will see
                    tutorials and tips alongside lighter reads, so you can skim a short post or dive into a longer guide when you have more time.
                </p>
                <p>
                    Editorial choices are aimed at clarity. We cite sources where it helps, avoid unnecessary jargon, and
                    update posts when major facts change. If you spot an error, we appreciate a heads-up through the social channels linked in the site footer.
                </p>
                <section class="rounded-2xl border border-[var(--border-color)] bg-primary/[0.03] p-6 sm:p-8">
                    <h2 class="text-xl font-bold text-[var(--text-primary)] mb-3">What you will find here</h2>
                    <ul class="list-disc pl-5 space-y-2">
                        <li><strong class="text-[var(--text-primary)]">Tech &amp; tools</strong> — productivity, software, and how-to guides.</li>
                        <li><strong class="text-[var(--text-primary)]">Gaming &amp; entertainment</strong> — reviews, culture, and play-inspired stories.</li>
                    </ul>
                </section>
                <p>
                    New articles are added regularly. Start with the
                    <a href="/blogs"
                        onclick="event.preventDefault(); window.history.pushState({}, '', '/blogs'); handleRouting(); window.scrollTo({top: 0, behavior: 'smooth'});"
                        class="text-primary font-bold hover:underline">full articles listing</a>
                    or return to the
                    <a href="/"
                        onclick="event.preventDefault(); window.history.pushState({}, '', '/'); handleRouting(); window.scrollTo({top: 0, behavior: 'smooth'});"
                        class="text-primary font-bold hover:underline">homepage</a>
                    for featured picks.
                </p>
            </div>
        </article>
    </main>

    <main id="static-page-terms" class="hidden min-h-[70vh] bg-white">
        <article itemscope itemtype="https://schema.org/WebPage">
            <header
                class="relative overflow-hidden border-b border-[var(--border-color)] bg-gradient-to-br from-primary/[0.07] via-white to-violet-50/40 pt-24 sm:pt-28 pb-10 sm:pb-14 px-6">
                <div class="absolute inset-0 pointer-events-none opacity-40">
                    <div class="absolute top-10 right-10 w-72 h-72 rounded-full bg-primary/10 blur-3xl"></div>
                </div>
                <div class="max-w-3xl mx-auto relative">
                    <nav class="text-sm text-[var(--text-secondary)] mb-5" aria-label="Breadcrumb">
                        <a href="/"
                            onclick="event.preventDefault(); window.history.pushState({}, '', '/'); handleRouting();"
                            class="text-primary font-semibold hover:underline">Home</a>
                        <span class="mx-2 opacity-50" aria-hidden="true">/</span>
                        <span class="text-[var(--text-primary)] font-medium">Terms of Use</span>
                    </nav>
                    <p class="text-primary font-semibold text-sm uppercase tracking-widest mb-3">Legal</p>
                    <h1 class="text-4xl sm:text-5xl font-bold text-[var(--text-primary)] tracking-tight mb-4 leading-tight">
                        Terms of Use</h1>
                    <p class="text-lg text-[var(--text-secondary)] leading-relaxed max-w-2xl mb-4">
                        These terms govern your access to <strong class="text-[var(--text-primary)]">blog.tictactoeonline.in</strong>
                        (TicTacToeBlogs). Please read them carefully before using the site.
                    </p>
                    <p class="text-sm text-[var(--text-secondary)] border-l-4 border-primary/30 pl-4 py-1">
                        <strong class="text-[var(--text-primary)]">Last updated:</strong> March 29, 2026
                    </p>
                </div>
            </header>
            <div class="max-w-3xl mx-auto px-6 py-12 sm:py-16 space-y-8">
                <p class="text-[var(--text-secondary)] leading-relaxed text-base sm:text-[17px]">
                    By visiting or using this blog you agree to the terms below. If you disagree, you should stop using the site.
                    Related policies:
                    <a href="/privacy-policy"
                        onclick="event.preventDefault(); window.history.pushState({}, '', '/privacy-policy'); handleRouting(); window.scrollTo({top: 0, behavior: 'smooth'});"
                        class="text-primary font-bold hover:underline">Privacy Policy</a>,
                    <a href="/about-us"
                        onclick="event.preventDefault(); window.history.pushState({}, '', '/about-us'); handleRouting(); window.scrollTo({top: 0, behavior: 'smooth'});"
                        class="text-primary font-bold hover:underline">About</a>.
                </p>

                <section class="rounded-2xl border border-[var(--border-color)] bg-white shadow-sm p-6 sm:p-8 scroll-mt-28"
                    aria-labelledby="terms-s1">
                    <h2 id="terms-s1" class="text-xl sm:text-2xl font-bold text-[var(--text-primary)] mb-4">1. Agreement to these terms</h2>
                    <div class="space-y-3 text-[var(--text-secondary)] leading-relaxed text-base sm:text-[17px]">
                        <p>
                            These Terms of Use (“Terms”) form a binding agreement between you and TicTacToeBlogs regarding your use of
                            <strong>blog.tictactoeonline.in</strong> and any content, features, or services offered through it (collectively, the “Site”).
                        </p>
                        <p>
                            We may update these Terms from time to time. The “Last updated” date at the top of this page reflects the most recent revision.
                            Your continued use of the Site after changes are posted means you accept the updated Terms.
                        </p>
                    </div>
                </section>

                <section class="rounded-2xl border border-[var(--border-color)] bg-white shadow-sm p-6 sm:p-8 scroll-mt-28"
                    aria-labelledby="terms-s2">
                    <h2 id="terms-s2" class="text-xl sm:text-2xl font-bold text-[var(--text-primary)] mb-4">2. Permitted use</h2>
                    <div class="space-y-3 text-[var(--text-secondary)] leading-relaxed text-base sm:text-[17px]">
                        <p>
                            You may browse, read, and share links to articles for personal, non-commercial purposes, subject to these Terms.
                            You agree not to misuse the Site: for example, no automated scraping that harms performance, no attempt to break security,
                            and no use of the Site in violation of applicable law.
                        </p>
                        <p>
                            Features such as comments or accounts may have additional rules shown at the point of use. Those rules are incorporated into these Terms by reference.
                        </p>
                    </div>
                </section>

                <section class="rounded-2xl border border-[var(--border-color)] bg-white shadow-sm p-6 sm:p-8 scroll-mt-28"
                    aria-labelledby="terms-s3">
                    <h2 id="terms-s3" class="text-xl sm:text-2xl font-bold text-[var(--text-primary)] mb-4">3. Content and intellectual property</h2>
                    <div class="space-y-3 text-[var(--text-secondary)] leading-relaxed text-base sm:text-[17px]">
                        <p>
                            Unless otherwise noted, articles, text, graphics, logos, and other materials on the Site are owned by TicTacToeBlogs or their respective authors and are protected by copyright and other intellectual property laws.
                        </p>
                        <p>
                            You may not copy, reproduce, republish, distribute, or create derivative works from Site content for commercial purposes without prior written permission,
                            except as allowed by law (for example, short quotations for commentary with attribution).
                        </p>
                    </div>
                </section>

                <section class="rounded-2xl border border-[var(--border-color)] bg-white shadow-sm p-6 sm:p-8 scroll-mt-28"
                    aria-labelledby="terms-s4">
                    <h2 id="terms-s4" class="text-xl sm:text-2xl font-bold text-[var(--text-primary)] mb-4">4. Disclaimers</h2>
                    <div class="space-y-3 text-[var(--text-secondary)] leading-relaxed text-base sm:text-[17px]">
                        <p>
                            Posts on TicTacToeBlogs are provided for general information and entertainment. We strive for accuracy, but we do not warrant that any content is complete,
                            current, or free of errors. Opinions expressed by authors are their own and may not reflect the views of TicTacToeBlogs.
                        </p>
                        <p>
                            To the fullest extent permitted by law, your use of the Site is at your sole risk. The Site is provided “as is” without warranties of any kind, express or implied.
                        </p>
                    </div>
                </section>

                <section class="rounded-2xl border border-[var(--border-color)] bg-white shadow-sm p-6 sm:p-8 scroll-mt-28"
                    aria-labelledby="terms-s5">
                    <h2 id="terms-s5" class="text-xl sm:text-2xl font-bold text-[var(--text-primary)] mb-4">5. Third-party links and services</h2>
                    <div class="space-y-3 text-[var(--text-secondary)] leading-relaxed text-base sm:text-[17px]">
                        <p>
                            The Site may link to third-party websites, apps, or social platforms (including our main game site and Social).
                            We do not control those services and are not responsible for their content, availability, or privacy practices.
                        </p>
                        <p>
                            Embedded widgets or media (for example feeds or players) are governed by the third party’s terms when you interact with them.
                        </p>
                    </div>
                </section>

                <section class="rounded-2xl border border-[var(--border-color)] bg-white shadow-sm p-6 sm:p-8 scroll-mt-28"
                    aria-labelledby="terms-s6">
                    <h2 id="terms-s6" class="text-xl sm:text-2xl font-bold text-[var(--text-primary)] mb-4">6. Limitation of liability</h2>
                    <div class="space-y-3 text-[var(--text-secondary)] leading-relaxed text-base sm:text-[17px]">
                        <p>
                            To the maximum extent permitted by applicable law, TicTacToeBlogs and its operators shall not be liable for any indirect, incidental, special,
                            consequential, or punitive damages arising from your use of or inability to use the Site.
                        </p>
                    </div>
                </section>

                <section class="rounded-2xl border border-[var(--border-color)] bg-primary/[0.04] p-6 sm:p-8">
                    <h2 class="text-xl font-bold text-[var(--text-primary)] mb-3">Explore the blog</h2>
                    <p class="text-[var(--text-secondary)] leading-relaxed mb-4">
                        Browse the full archive of articles on our
                        <a href="/blogs"
                            onclick="event.preventDefault(); window.history.pushState({}, '', '/blogs'); handleRouting(); window.scrollTo({top: 0, behavior: 'smooth'});"
                            class="text-primary font-bold hover:underline">blogs page</a>.
                    </p>
                </section>
            </div>
        </article>
    </main>

    <main id="static-page-privacy-policy" class="hidden min-h-[70vh] bg-white">
        <article itemscope itemtype="https://schema.org/WebPage">
            <header
                class="relative overflow-hidden border-b border-[var(--border-color)] bg-gradient-to-br from-primary/[0.07] via-white to-violet-50/40 pt-24 sm:pt-28 pb-10 sm:pb-14 px-6">
                <div class="absolute inset-0 pointer-events-none opacity-40">
                    <div class="absolute top-10 right-10 w-72 h-72 rounded-full bg-primary/10 blur-3xl"></div>
                </div>
                <div class="max-w-3xl mx-auto relative">
                    <nav class="text-sm text-[var(--text-secondary)] mb-5" aria-label="Breadcrumb">
                        <a href="/"
                            onclick="event.preventDefault(); window.history.pushState({}, '', '/'); handleRouting();"
                            class="text-primary font-semibold hover:underline">Home</a>
                        <span class="mx-2 opacity-50" aria-hidden="true">/</span>
                        <span class="text-[var(--text-primary)] font-medium">Privacy Policy</span>
                    </nav>
                    <p class="text-primary font-semibold text-sm uppercase tracking-widest mb-3">Your data</p>
                    <h1 class="text-4xl sm:text-5xl font-bold text-[var(--text-primary)] tracking-tight mb-4 leading-tight">
                        Privacy Policy</h1>
                    <p class="text-lg text-[var(--text-secondary)] leading-relaxed max-w-2xl mb-4">
                        This policy explains what information we may collect when you use <strong class="text-[var(--text-primary)]">blog.tictactoeonline.in</strong>,
                        how we use it, and the choices available to you.
                    </p>
                    <p class="text-sm text-[var(--text-secondary)] border-l-4 border-primary/30 pl-4 py-1">
                        <strong class="text-[var(--text-primary)]">Last updated:</strong> March 29, 2026
                    </p>
                </div>
            </header>
            <div class="max-w-3xl mx-auto px-6 py-12 sm:py-16 space-y-8">
                <p class="text-[var(--text-secondary)] leading-relaxed text-base sm:text-[17px]">
                    We respect your privacy. This policy should be read together with our
                    <a href="/terms"
                        onclick="event.preventDefault(); window.history.pushState({}, '', '/terms'); handleRouting(); window.scrollTo({top: 0, behavior: 'smooth'});"
                        class="text-primary font-bold hover:underline">Terms of Use</a>.
                </p>

                <section class="rounded-2xl border border-[var(--border-color)] bg-white shadow-sm p-6 sm:p-8 scroll-mt-28"
                    aria-labelledby="privacy-s1">
                    <h2 id="privacy-s1" class="text-xl sm:text-2xl font-bold text-[var(--text-primary)] mb-4">1. Who we are</h2>
                    <div class="space-y-3 text-[var(--text-secondary)] leading-relaxed text-base sm:text-[17px]">
                        <p>
                            This website (“TicTacToeBlogs”) is published at <strong>blog.tictactoeonline.in</strong>. It is operated in connection with
                            <a href="https://www.tictactoeonline.in" class="text-primary font-semibold hover:underline" target="_blank" rel="noopener noreferrer">Tic Tac Toe Online</a>.
                            This policy explains our practices for visitors and readers of the blog.
                        </p>
                    </div>
                </section>

                <section class="rounded-2xl border border-[var(--border-color)] bg-white shadow-sm p-6 sm:p-8 scroll-mt-28"
                    aria-labelledby="privacy-s2">
                    <h2 id="privacy-s2" class="text-xl sm:text-2xl font-bold text-[var(--text-primary)] mb-4">2. Information we collect</h2>
                    <div class="space-y-3 text-[var(--text-secondary)] leading-relaxed text-base sm:text-[17px]">
                        <p>
                            <strong class="text-[var(--text-primary)]">Automatic data.</strong> When you load pages, servers and hosting providers may log technical information such as
                            IP address, browser type, device type, referring URL, and timestamps. We use this data to operate and secure the Site and to understand aggregate usage patterns.
                        </p>
                        <p>
                            <strong class="text-[var(--text-primary)]">Information you provide.</strong> If you use features such as comments, contact forms, or sign-in (where available),
                            we collect the information you submit, such as display name, email address, or message content, as described at the point of collection.
                        </p>
                    </div>
                </section>

                <section class="rounded-2xl border border-[var(--border-color)] bg-white shadow-sm p-6 sm:p-8 scroll-mt-28"
                    aria-labelledby="privacy-s3">
                    <h2 id="privacy-s3" class="text-xl sm:text-2xl font-bold text-[var(--text-primary)] mb-4">3. How we use information</h2>
                    <div class="space-y-3 text-[var(--text-secondary)] leading-relaxed text-base sm:text-[17px]">
                        <p>We use information to:</p>
                        <ul class="list-disc pl-5 space-y-2">
                            <li>Deliver pages and features, and maintain security and fraud prevention;</li>
                            <li>Improve performance, fix bugs, and understand which articles and topics resonate with readers;</li>
                            <li>Respond to inquiries and moderate user-generated content where applicable;</li>
                            <li>Comply with legal obligations and enforce our Terms.</li>
                        </ul>
                    </div>
                </section>

                <section class="rounded-2xl border border-[var(--border-color)] bg-white shadow-sm p-6 sm:p-8 scroll-mt-28"
                    aria-labelledby="privacy-s4">
                    <h2 id="privacy-s4" class="text-xl sm:text-2xl font-bold text-[var(--text-primary)] mb-4">4. Cookies, storage, and analytics</h2>
                    <div class="space-y-3 text-[var(--text-secondary)] leading-relaxed text-base sm:text-[17px]">
                        <p>
                            We may use cookies, local storage, or similar technologies for essential functionality (for example session or preferences), and—where enabled—for analytics
                            to understand traffic and engagement. You can control or delete cookies through your browser settings; blocking some cookies may affect how certain features work.
                        </p>
                    </div>
                </section>

                <section class="rounded-2xl border border-[var(--border-color)] bg-white shadow-sm p-6 sm:p-8 scroll-mt-28"
                    aria-labelledby="privacy-s5">
                    <h2 id="privacy-s5" class="text-xl sm:text-2xl font-bold text-[var(--text-primary)] mb-4">5. Embedded content and third parties</h2>
                    <div class="space-y-3 text-[var(--text-secondary)] leading-relaxed text-base sm:text-[17px]">
                        <p>
                            Articles may embed images, videos, or widgets from third parties (for example social feeds). Those providers may set their own cookies or collect data when you interact with their content.
                            Their use of information is governed by their respective policies.
                        </p>
                    </div>
                </section>

                <section class="rounded-2xl border border-[var(--border-color)] bg-white shadow-sm p-6 sm:p-8 scroll-mt-28"
                    aria-labelledby="privacy-s6">
                    <h2 id="privacy-s6" class="text-xl sm:text-2xl font-bold text-[var(--text-primary)] mb-4">6. Data retention</h2>
                    <div class="space-y-3 text-[var(--text-secondary)] leading-relaxed text-base sm:text-[17px]">
                        <p>
                            We retain information only as long as needed for the purposes described in this policy, unless a longer period is required by law or for legitimate security and dispute resolution needs.
                        </p>
                    </div>
                </section>

                <section class="rounded-2xl border border-[var(--border-color)] bg-white shadow-sm p-6 sm:p-8 scroll-mt-28"
                    aria-labelledby="privacy-s7">
                    <h2 id="privacy-s7" class="text-xl sm:text-2xl font-bold text-[var(--text-primary)] mb-4">7. Your choices and rights</h2>
                    <div class="space-y-3 text-[var(--text-secondary)] leading-relaxed text-base sm:text-[17px]">
                        <p>
                            Depending on where you live, you may have rights to access, correct, delete, or export certain personal data, or to object to or restrict certain processing.
                            To exercise applicable rights, contact us using the channels linked from our main site or social profiles in the footer.
                        </p>
                    </div>
                </section>

                <section class="rounded-2xl border border-[var(--border-color)] bg-primary/[0.04] p-6 sm:p-8">
                    <h2 class="text-xl font-bold text-[var(--text-primary)] mb-3">More on the site</h2>
                    <p class="text-[var(--text-secondary)] leading-relaxed">
                        Read articles on the
                        <a href="/blogs"
                            onclick="event.preventDefault(); window.history.pushState({}, '', '/blogs'); handleRouting(); window.scrollTo({top: 0, behavior: 'smooth'});"
                            class="text-primary font-bold hover:underline">blogs page</a>
                        or learn
                        <a href="/about-us"
                            onclick="event.preventDefault(); window.history.pushState({}, '', '/about-us'); handleRouting(); window.scrollTo({top: 0, behavior: 'smooth'});"
                            class="text-primary font-bold hover:underline">about TicTacToeBlogs</a>.
                    </p>
                </section>
            </div>
        </article>
    </main>

    <!-- Blogs Section -->
    <section id="blogs" class="pt-16 pb-16 px-4 sm:px-6">
        <div class="max-w-5xl mx-auto w-full">
            <nav id="blogs-breadcrumb" class="text-sm text-[var(--text-secondary)] mt-6 sm:mt-8 mb-4" aria-label="Breadcrumb">
                <a href="/" onclick="event.preventDefault(); window.history.pushState({}, '', '/'); handleRouting();" class="text-primary font-semibold hover:underline">Home</a>
                <span class="mx-2 opacity-50" aria-hidden="true">/</span>
                <span id="blogs-breadcrumb-current" class="text-[var(--text-primary)] font-medium">Latest Articles</span>
            </nav>
            <div class="flex flex-col sm:flex-row items-start sm:items-end justify-between gap-4 sm:gap-0 mb-8">
                <div>
                    <h2 class="text-2xl sm:text-3xl font-bold mb-2">Latest Articles</h2>
                    <p class="text-sm sm:text-base text-[var(--text-secondary)]">Fresh content from our writers.</p>
                </div>
                <button id="view-all-btn"
                    class="text-primary font-bold flex items-center gap-2 hover:gap-4 transition-all group whitespace-nowrap">
                    View All Posts <span class="group-hover:translate-x-1 transition-transform">&rarr;</span>
                </button>
            </div>

            <!-- Mobile-only search on /blogs only (see syncBlogsPageMobileSearch in app.js) -->
            <div class="blogs-page-mobile-search relative mb-4" hidden aria-hidden="true">
                <label for="mobile-blog-search" class="sr-only">Search articles</label>
                <input type="text" id="mobile-blog-search" placeholder="Search articles..."
                    class="w-full bg-primary/5 border border-[var(--border-color)] rounded-xl px-5 py-3 pr-24 focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all font-medium">
                <button type="button" id="mobile-search-trigger"
                    class="absolute right-4 top-1/2 -translate-y-1/2 text-primary hover:scale-110 transition-transform">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </button>
                <button type="button" id="mobile-search-clear"
                    class="hidden absolute right-12 top-1/2 -translate-y-1/2 text-gray-400 hover:text-primary transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
                        </path>
                    </svg>
                </button>
            </div>

            <!-- Category Tabs -->
            <div class="mb-6">
                <div id="category-tabs" class="flex gap-3 overflow-x-auto pb-2 -mx-1 px-1">
                    <button type="button" data-category=""
                        class="category-tab px-5 py-2 rounded-full border border-[var(--border-color)] bg-white font-semibold text-sm whitespace-nowrap">
                        All
                    </button>
                    <div class="text-sm text-gray-400 py-2">Loading categories...</div>
                </div>
            </div>

            <!-- Search Results Info Area -->
            <div id="search-results-info" class="hidden mb-8 animate-fade-in">
                <div
                    class="flex items-start gap-3 text-[var(--text-secondary)] bg-primary/5 px-4 py-3 rounded-xl border border-primary/10">
                    <svg class="w-5 h-5 text-primary mt-1 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span id="search-results-text"></span>
                </div>
            </div>

            <!-- Blog feed list (filled dynamically; WhatsApp-style row on desktop, stack on mobile) -->
            <div id="blog-grid" class="blog-feed" role="feed" aria-label="Blog articles">
                <article class="blog-feed-card blog-feed-card--skeleton animate-pulse" aria-hidden="true">
                    <div class="blog-feed-skel-media"></div>
                    <div class="blog-feed-body">
                        <div class="blog-feed-meta"><div class="blog-feed-skel-line blog-feed-skel-line--short"></div></div>
                        <div class="blog-feed-body-main">
                            <div class="blog-feed-skel-line" style="width:92%"></div>
                            <div class="blog-feed-skel-line"></div>
                            <div class="blog-feed-skel-line"></div>
                            <div class="blog-feed-skel-line blog-feed-skel-line--cta"></div>
                        </div>
                    </div>
                </article>
                <article class="blog-feed-card blog-feed-card--skeleton animate-pulse" aria-hidden="true">
                    <div class="blog-feed-skel-media"></div>
                    <div class="blog-feed-body">
                        <div class="blog-feed-meta"><div class="blog-feed-skel-line blog-feed-skel-line--short"></div></div>
                        <div class="blog-feed-body-main">
                            <div class="blog-feed-skel-line" style="width:88%"></div>
                            <div class="blog-feed-skel-line"></div>
                            <div class="blog-feed-skel-line"></div>
                            <div class="blog-feed-skel-line blog-feed-skel-line--cta"></div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </section>

    <footer class="mt-20 border-t border-[var(--border-color)] bg-white/30 backdrop-blur-md py-12">
        <div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-3 gap-12">
            <div>
                <div class="flex items-center gap-3 mb-6">
                    <img src="/assets/logo-256.webp" alt="TicTacToeBlogs Brand Logo" loading="lazy"
                        class="w-8 h-8 object-contain">
                    <p class="font-bold text-xl tracking-tighter italic">TicTacToe<span
                            class="text-primary">Blogs</span>
                    </p>
                </div>
                <p class="text-[var(--text-secondary)] text-sm leading-relaxed max-w-xs">
                    A multi-topic blog for curious minds. Covering tech, and gaming, and beyond — something for
                    everyone.
                </p>
            </div>

            <div>
                <h5 class="font-bold mb-6 text-lg">Quick Links</h5>
                <ul class="space-y-4 text-sm text-[var(--text-secondary)]">
                    <li><a href="/"
                            onclick="event.preventDefault(); window.history.pushState({}, '', '/'); handleRouting();"
                            class="hover:text-primary transition-colors cursor-pointer block">Home</a></li>
                    <li><a href="/about-us"
                            onclick="event.preventDefault(); window.history.pushState({}, '', '/about-us'); handleRouting();"
                            class="hover:text-primary transition-colors cursor-pointer block">About</a></li>
                    <li><a href="/terms"
                            onclick="event.preventDefault(); window.history.pushState({}, '', '/terms'); handleRouting();"
                            class="hover:text-primary transition-colors cursor-pointer block">Terms</a></li>
                    <li><a href="/privacy-policy"
                            onclick="event.preventDefault(); window.history.pushState({}, '', '/privacy-policy'); handleRouting();"
                            class="hover:text-primary transition-colors cursor-pointer block">Privacy-policy</a></li>
                    <li><a href="/blogs"
                            onclick="event.preventDefault(); window.history.pushState({}, '', '/blogs'); handleRouting();"
                            class="hover:text-primary transition-colors cursor-pointer block">All Blogs</a></li>
                    <li><a href="/links"
                            onclick="event.preventDefault(); window.history.pushState({}, '', '/links'); handleRouting();"
                            class="hover:text-primary transition-colors cursor-pointer block">All Links</a></li>
                </ul>
            </div>

            <div>
                <h5 class="font-bold mb-6 text-lg">Connect</h5>
                <p class="text-sm text-[var(--text-secondary)] mb-6">Follow our journey and stay updated with the latest
                    TTT meta.</p>
                <div class="flex gap-4">
                    <a href="https://social.tictactoeonline.in" target="_blank"
                        rel="noopener noreferrer" aria-label="Follow us on Social"
                        class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path
                                d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.04.07-4.85.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                        </svg>
                    </a>
                    <a href="https://www.threads.com/tictactoeonline.in" target="_blank"
                        rel="noopener noreferrer" aria-label="Follow us on Threads"
                        class="group w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all">
                        <svg class="w-5 h-5 text-primary group-hover:text-primary" fill="currentColor" viewBox="0 0 512 512">
                            <path
                                d="M105 0h302c57.75 0 105 47.25 105 105v302c0 57.75-47.25 105-105 105H105C47.25 512 0 464.75 0 407V105C0 47.25 47.25 0 105 0z" />
                            <path fill="#fff" fill-rule="nonzero"
                                d="M337.36 243.58c-1.46-.7-2.95-1.38-4.46-2.02-2.62-48.36-29.04-76.05-73.41-76.33-25.6-.17-48.52 10.27-62.8 31.94l24.4 16.74c10.15-15.4 26.08-18.68 37.81-18.68h.4c14.61.09 25.64 4.34 32.77 12.62 5.19 6.04 8.67 14.37 10.39 24.89-12.96-2.2-26.96-2.88-41.94-2.02-42.18 2.43-69.3 27.03-67.48 61.21.92 17.35 9.56 32.26 24.32 42.01 12.48 8.24 28.56 12.27 45.26 11.35 22.07-1.2 39.37-9.62 51.45-25.01 9.17-11.69 14.97-26.84 17.53-45.92 10.51 6.34 18.3 14.69 22.61 24.73 7.31 17.06 7.74 45.1-15.14 67.96-20.04 20.03-44.14 28.69-80.55 28.96-40.4-.3-70.95-13.26-90.81-38.51-18.6-23.64-28.21-57.79-28.57-101.5.36-43.71 9.97-77.86 28.57-101.5 19.86-25.25 50.41-38.21 90.81-38.51 40.68.3 71.76 13.32 92.39 38.69 10.11 12.44 17.73 28.09 22.76 46.33l28.59-7.63c-6.09-22.45-15.67-41.8-28.72-57.85-26.44-32.53-65.1-49.19-114.92-49.54h-.2c-49.72.35-87.96 17.08-113.64 49.73-22.86 29.05-34.65 69.48-35.04 120.16v.24c.39 50.68 12.18 91.11 35.04 120.16 25.68 32.65 63.92 49.39 113.64 49.73h.2c44.2-.31 75.36-11.88 101.03-37.53 33.58-33.55 32.57-75.6 21.5-101.42-7.94-18.51-23.08-33.55-43.79-43.48zm-76.32 71.76c-18.48 1.04-37.69-7.26-38.64-25.03-.7-13.18 9.38-27.89 39.78-29.64 3.48-.2 6.9-.3 10.25-.3 11.04 0 21.37 1.07 30.76 3.13-3.5 43.74-24.04 50.84-42.15 51.84z" />
                        </svg>
                    </a>
                    <a href="https://x.com/tictactoearena" target="_blank"
                        rel="noopener noreferrer" aria-label="Follow us on X"
                        class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M18.9 2h3l-6.6 7.6L23 22h-6.1l-4.8-6.3L6.6 22H3.5l7.1-8.2L1 2h6.3l4.4 5.8L18.9 2zm-1.1 18h1.7L6.4 3.9H4.6L17.8 20z"/>
                        </svg>
                    </a>
                    <a href="https://www.linkedin.com/company/tictactoeonline" target="_blank"
                        rel="noopener noreferrer" aria-label="Follow us on LinkedIn"
                        class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M4.98 3.5A2.48 2.48 0 1 0 5 8.46a2.48 2.48 0 0 0-.02-4.96zM3 9h4v12H3zM9 9h3.83v1.64h.06c.53-1.01 1.84-2.08 3.79-2.08C20.73 8.56 22 11 22 14.22V21h-4v-6.01c0-1.43-.03-3.27-2-3.27-2 0-2.31 1.56-2.31 3.16V21H9z"/>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
        <div class="max-w-7xl mx-auto px-6 mt-12 pt-8 border-t border-[var(--border-color)] text-center">
            <p class="text-[var(--text-secondary)] text-xs mb-2">
                Check out our other products:
                <a class="text-primary font-semibold hover:underline" href="https://www.tictactoeonline.in" target="_blank"
                    rel="noopener noreferrer">www.tictactoeonline.in</a>
                <span class="mx-1">•</span>
                <a class="text-primary font-semibold hover:underline" href="https://tool.tictactoeonline.in" target="_blank"
                    rel="noopener noreferrer">tool.tictactoeonline.in</a>
            </p>
            <p class="text-[var(--text-secondary)] text-xs">
                &copy; 2026 TicTacToeBlogs. Powered by
                <a class="text-primary font-semibold hover:underline" href="https://www.tictactoeonline.in" target="_blank"
                    rel="noopener noreferrer">tictactoeonline.in</a>.
                Built with &hearts; for the community.
            </p>
        </div>
    </footer>

    <!-- Scroll to top -->
    <button id="scroll-top-btn" type="button"
        class="fixed bottom-6 right-6 w-14 h-14 rounded-full bg-primary text-white shadow-lg hover:shadow-xl transition-all duration-300 hidden items-center justify-center"
        aria-label="Scroll to top">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
        </svg>
    </button>

    <!-- Scripts -->
    <!-- Firebase SDK (v8 for simplicity in plain script) -->
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js" defer></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js" defer></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js" defer></script>

    <script>
      // Disable offline/PWA caching: remove any previously-registered service workers + their caches.
      (function () {
        if (!('serviceWorker' in navigator)) return;
        window.addEventListener('load', function () {
          navigator.serviceWorker.getRegistrations().then(function (regs) {
            regs.forEach(function (reg) { reg.unregister(); });
          }).catch(function () {});

          if (!('caches' in window)) return;
          caches.keys().then(function (keys) {
            keys.forEach(function (k) {
              if (k && (k.indexOf('tttb-') === 0)) caches.delete(k);
            });
          }).catch(function () {});
        });
      })();
    </script>
    <script type="module" src="/js/app.min.js"></script>
</body>

</html>

