/*
Theme Name: FreeAIToolsAyoob
Theme URI: https://freeaitoolsayoob.com/
Author: FreeAIToolsAyoob
Description: Global Free AI Tools directory + automatic WordPress news homepage.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: freeaitoolsayoob
*/

/* ============================================================
               CSS VARIABLES & RESET
               ============================================================ */
        :root {
            --primary: #06b6d4;
            --primary-dark: #0891b2;
            --primary-light: #67e8f9;
            --secondary: #8b5cf6;
            --secondary-dark: #7c3aed;
            --accent: #f59e0b;
            --dark: #0f172a;
            --dark-light: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
            --gray-light: #cbd5e1;
            --gray-bg: #f1f5f9;
            --white: #ffffff;
            --card-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
            --hover-shadow: 0 30px 60px rgba(0, 0, 0, 0.10);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --radius: 20px;
            --radius-sm: 12px;
            --radius-full: 50px;
            --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font);
            line-height: 1.7;
            background: var(--light);
            color: #1e293b;
            overflow-x: hidden;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
        }

        /* ============================================================
           HEADER – Modern Glass
           ============================================================ */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.82);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(226, 232, 240, 0.5);
            padding: 10px 0;
            transition: var(--transition);
        }

        .site-header.scrolled {
            background: rgba(255, 255, 255, 0.96);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
        }

        .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 24px;
            font-weight: 800;
            color: var(--dark);
        }

        .logo i {
            font-size: 28px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .logo span {
            font-size: 13px;
            font-weight: 500;
            color: var(--gray);
            -webkit-text-fill-color: var(--gray);
            background: none;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        .nav-links a {
            padding: 8px 16px;
            font-weight: 600;
            font-size: 14px;
            color: var(--dark);
            border-radius: var(--radius-full);
            transition: var(--transition);
        }

        .nav-links a:hover,
        .nav-links a.active {
            background: rgba(6, 182, 212, 0.08);
            color: var(--primary-dark);
        }

        .nav-links a.cta-nav {
            background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
            color: #fff !important;
            padding: 8px 22px;
            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
        }

        .nav-links a.cta-nav:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
        }

        .lang-switcher {
            display: flex;
            align-items: center;
            gap: 2px;
            background: var(--white);
            padding: 3px 6px;
            border-radius: var(--radius-full);
            border: 1px solid #e2e8f0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
        }

        .lang-switcher button {
            background: transparent;
            border: none;
            padding: 4px 12px;
            border-radius: var(--radius-full);
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
            color: var(--gray);
        }

        .lang-switcher button.active {
            background: var(--dark);
            color: var(--white);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .lang-switcher button:hover {
            color: var(--dark);
        }
        .lang-switcher button.active:hover {
            color: var(--white);
        }

        .mobile-toggle {
            display: none;
            font-size: 24px;
            cursor: pointer;
            background: transparent;
            border: none;
            color: var(--dark);
            padding: 4px 8px;
        }

        .mobile-toggle:hover {
            background: rgba(0, 0, 0, 0.04);
            border-radius: 8px;
        }

        .header-search {
            display: flex;
            align-items: center;
            background: var(--white);
            border: 1px solid #e2e8f0;
            border-radius: var(--radius-full);
            padding: 5px 5px 5px 18px;
            transition: var(--transition);
            flex: 1 1 200px;
            max-width: 240px;
        }

        .header-search:focus-within {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.12);
        }

        .header-search input {
            border: none;
            outline: none;
            flex: 1;
            font-size: 14px;
            padding: 6px 0;
            background: transparent;
            min-width: 70px;
        }

        .header-search button {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: #fff;
            border: none;
            border-radius: var(--radius-full);
            padding: 6px 18px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .header-search button:hover {
            transform: scale(1.03);
            box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
        }

        /* ============================================================
           HERO – Brand Central
           ============================================================ */
        .hero {
            background: linear-gradient(135deg, #f0fdfa 0%, #e0f2fe 50%, #f5f3ff 100%);
            padding: 80px 0 70px;
            position: relative;
            overflow: hidden;
            min-height: 600px;
            display: flex;
            align-items: center;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: -30%;
            right: -10%;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(6, 182, 212, 0.10), transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }

        .hero::after {
            content: '';
            position: absolute;
            bottom: -20%;
            left: -5%;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(139, 92, 246, 0.08), transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .hero-left .badge {
            display: inline-block;
            background: rgba(6, 182, 212, 0.12);
            color: var(--primary-dark);
            padding: 4px 18px;
            border-radius: var(--radius-full);
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 20px;
            border: 1px solid rgba(6, 182, 212, 0.15);
        }

        .hero-left h1 {
            font-size: 3.4rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 16px;
            color: var(--dark);
        }

        .hero-left h1 .highlight {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-left p {
            font-size: 1.15rem;
            color: var(--gray);
            max-width: 520px;
            margin-bottom: 30px;
            line-height: 1.8;
        }

        .hero-search-wrap {
            display: flex;
            background: var(--white);
            border-radius: var(--radius-full);
            padding: 4px 4px 4px 24px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
            max-width: 560px;
            transition: var(--transition);
            border: 1px solid rgba(226, 232, 240, 0.6);
        }

        .hero-search-wrap:focus-within {
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
            border-color: var(--primary);
        }

        .hero-search-wrap input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 16px;
            padding: 14px 0;
            background: transparent;
            color: var(--dark);
        }

        .hero-search-wrap input::placeholder {
            color: var(--gray-light);
        }

        .hero-search-wrap button {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: #fff;
            border: none;
            border-radius: var(--radius-full);
            padding: 12px 32px;
            font-weight: 700;
            font-size: 15px;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }

        .hero-search-wrap button:hover {
            transform: scale(1.03);
            box-shadow: 0 8px 25px rgba(6, 182, 212, 0.35);
        }

        .popular-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 18px;
        }

        .popular-tags span {
            font-size: 13px;
            color: var(--gray);
            font-weight: 600;
            margin-right: 4px;
        }

        .popular-tags a {
            background: var(--white);
            color: var(--gray);
            padding: 4px 16px;
            border-radius: var(--radius-full);
            font-size: 13px;
            font-weight: 500;
            transition: var(--transition);
            border: 1px solid #e2e8f0;
        }

        .popular-tags a:hover {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
            transform: translateY(-2px);
        }

        /* Hero Right – Animated Orb */
        .hero-right {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .orb-container {
            width: 400px;
            height: 400px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .orb {
            width: 320px;
            height: 320px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-light), var(--secondary), var(--primary));
            animation: orbPulse 8s ease-in-out infinite;
            box-shadow: 0 30px 80px rgba(6, 182, 212, 0.25);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .orb::after {
            content: '🌍';
            font-size: 100px;
            animation: floatGlobe 6s ease-in-out infinite;
        }

        @keyframes orbPulse {
            0%,
            100% {
                transform: scale(1) rotate(0deg);
            }
            50% {
                transform: scale(1.05) rotate(4deg);
            }
        }

        @keyframes floatGlobe {
            0%,
            100% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-15px) rotate(8deg);
            }
        }

        .orb-ring {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 2px solid rgba(6, 182, 212, 0.1);
            animation: ringSpin 20s linear infinite;
        }

        .orb-ring:nth-child(2) {
            width: 90%;
            height: 90%;
            border-color: rgba(139, 92, 246, 0.1);
            animation-duration: 15s;
            animation-direction: reverse;
        }

        @keyframes ringSpin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        /* ============================================================
           SECTION: CATEGORIES
           ============================================================ */
        .section {
            padding: 80px 0;
        }

        .section-header {
            text-align: center;
            margin-bottom: 50px;
        }

        .section-header h2 {
            font-size: 2.4rem;
            font-weight: 800;
            color: var(--dark);
        }

        .section-header h2 .gradient-text {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .section-header p {
            color: var(--gray);
            font-size: 1.1rem;
            max-width: 640px;
            margin: 8px auto 0;
        }

        .categories-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 24px;
        }

        .category-card {
            background: var(--white);
            border-radius: var(--radius);
            padding: 28px 18px;
            text-align: center;
            box-shadow: var(--card-shadow);
            border: 1px solid #f1f5f9;
            transition: var(--transition);
        }

        .category-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--hover-shadow);
            border-color: var(--primary-light);
        }

        .category-card .icon {
            font-size: 40px;
            margin-bottom: 12px;
            display: block;
        }

        .category-card h3 {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--dark);
        }

        .category-card p {
            font-size: 0.85rem;
            color: var(--gray);
            margin: 4px 0 14px;
        }

        .category-card a {
            font-weight: 600;
            color: var(--secondary);
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.9rem;
        }

        .category-card a:hover {
            gap: 12px;
            color: var(--secondary-dark);
        }

        /* ============================================================
           SECTION: FEATURED TOOLS
           ============================================================ */
        .section-featured {
            background: var(--white);
        }

        .tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
            gap: 30px;
        }

        .tool-card {
            background: var(--white);
            border-radius: var(--radius);
            padding: 30px 28px;
            box-shadow: var(--card-shadow);
            border: 1px solid #f1f5f9;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .tool-card:hover {
            transform: scale(1.02) translateY(-6px);
            box-shadow: var(--hover-shadow);
            border-color: var(--secondary-light);
        }

        .tool-card .badge {
            position: absolute;
            top: 16px;
            right: 16px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            padding: 4px 14px;
            border-radius: var(--radius-full);
            background: #dbeafe;
            color: var(--primary-dark);
        }

        .tool-card .badge.free {
            background: #d1fae5;
            color: #065f46;
        }

        .tool-card .badge.premium {
            background: #fef3c7;
            color: #b45309;
        }

        .tool-card h3 {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .tool-card h3 i {
            color: var(--primary);
        }

        .tool-card p {
            color: var(--gray);
            flex: 1;
            font-size: 0.95rem;
            margin-bottom: 18px;
        }

        .tool-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 20px;
        }

        .tool-tags span {
            background: var(--gray-bg);
            color: var(--gray);
            font-size: 0.75rem;
            font-weight: 600;
            padding: 4px 14px;
            border-radius: var(--radius-full);
        }

        .tool-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: #fff;
            padding: 10px 24px;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.9rem;
            transition: var(--transition);
            width: fit-content;
            border: none;
            cursor: pointer;
        }

        .tool-link:hover {
            gap: 14px;
            box-shadow: 0 8px 25px rgba(6, 182, 212, 0.3);
            transform: translateY(-3px);
        }

        /* ============================================================
           SECTION: BENEFITS
           ============================================================ */
        .section-benefits {
            background: #f8fafc;
        }

        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 30px;
        }

        .benefit-item {
            display: flex;
            gap: 18px;
            align-items: flex-start;
            background: var(--white);
            padding: 24px 22px;
            border-radius: var(--radius);
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            border: 1px solid #f1f5f9;
        }

        .benefit-item:hover {
            transform: translateY(-4px);
            box-shadow: var(--hover-shadow);
        }

        .benefit-item .icon {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: #fff;
            width: 52px;
            height: 52px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            flex-shrink: 0;
        }

        .benefit-item h4 {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 4px;
        }

        .benefit-item p {
            font-size: 0.92rem;
            color: var(--gray);
        }

        /* ============================================================
           SECTION: STATS (Minimal)
           ============================================================ */
        .section-stats {
            padding: 70px 0;
            background: linear-gradient(135deg, var(--dark) 0%, #1e293b 100%);
            position: relative;
            overflow: hidden;
        }

        .section-stats::before {
            content: '';
            position: absolute;
            top: -100px;
            right: -100px;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(6, 182, 212, 0.08);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 30px;
            position: relative;
            z-index: 2;
        }

        .stat-item {
            text-align: center;
            padding: 20px;
            border-radius: var(--radius);
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.04);
            transition: var(--transition);
        }

        .stat-item:hover {
            background: rgba(255, 255, 255, 0.06);
        }

        .stat-item h3 {
            font-size: 2.8rem;
            font-weight: 800;
            color: var(--primary-light);
            margin-bottom: 4px;
        }

        .stat-item p {
            font-size: 1rem;
            color: #94a3b8;
            font-weight: 500;
        }

        /* ============================================================
           SECTION: CTA
           ============================================================ */
        .section-cta {
            padding: 80px 0;
            background: var(--light);
        }

        .cta-box {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
            background: var(--white);
            padding: 56px 48px;
            border-radius: var(--radius);
            box-shadow: var(--card-shadow);
            border: 1px solid #f1f5f9;
        }

        .cta-box h2 {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--dark);
            margin-bottom: 12px;
        }

        .cta-box h2 .highlight {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .cta-box p {
            font-size: 1.1rem;
            color: var(--gray);
            margin-bottom: 32px;
        }

        .cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
            color: #fff;
            padding: 16px 42px;
            border-radius: var(--radius-full);
            font-weight: 700;
            font-size: 1.05rem;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            box-shadow: 0 8px 30px rgba(139, 92, 246, 0.25);
        }

        .cta-btn:hover {
            transform: translateY(-4px);
            gap: 16px;
            box-shadow: 0 16px 40px rgba(139, 92, 246, 0.35);
        }

        /* ============================================================
           FOOTER
           ============================================================ */
        .site-footer {
            background: var(--dark);
            color: #cbd5e1;
            padding: 60px 0 30px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-brand .logo-footer {
            font-size: 24px;
            font-weight: 800;
            color: var(--white);
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
        }

        .footer-brand .logo-footer i {
            color: var(--primary);
        }

        .footer-brand p {
            font-size: 0.95rem;
            color: #94a3b8;
            max-width: 320px;
        }

        .footer-col h4 {
            color: var(--white);
            font-size: 1.05rem;
            font-weight: 700;
            margin-bottom: 18px;
        }

        .footer-col ul {
            list-style: none;
        }

        .footer-col ul li {
            margin-bottom: 10px;
        }

        .footer-col ul a {
            color: #94a3b8;
            transition: var(--transition);
            font-size: 0.92rem;
        }

        .footer-col ul a:hover {
            color: var(--white);
            padding-left: 4px;
        }

        .social-links {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 8px;
        }

        .social-links a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.06);
            color: #94a3b8;
            transition: var(--transition);
            font-size: 16px;
        }

        .social-links a:hover {
            background: var(--primary);
            color: #fff;
            transform: translateY(-3px);
        }

        .footer-bottom {
            border-top: 1px solid #334155;
            padding-top: 28px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            font-size: 0.88rem;
            color: #94a3b8;
        }

        .footer-bottom .lang-footer {
            display: flex;
            gap: 4px;
            align-items: center;
        }

        .footer-bottom .lang-footer button {
            background: transparent;
            border: none;
            color: #94a3b8;
            padding: 2px 10px;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            transition: var(--transition);
            font-weight: 600;
        }

        .footer-bottom .lang-footer button.active {
            color: var(--white);
            background: rgba(255, 255, 255, 0.08);
        }

        .footer-bottom .lang-footer button:hover {
            color: var(--white);
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 1024px) {
            .hero-grid {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .hero-left p {
                margin-left: auto;
                margin-right: auto;
            }
            .hero-search-wrap {
                margin-left: auto;
                margin-right: auto;
            }
            .popular-tags {
                justify-content: center;
            }

            .orb-container {
                width: 300px;
                height: 300px;
            }
            .orb {
                width: 240px;
                height: 240px;
            }
            .orb::after {
                font-size: 80px;
            }
            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 820px) {
            .mobile-toggle {
                display: block;
            }

            .nav-links {
                display: none;
                flex-direction: column;
                width: 100%;
                background: var(--white);
                padding: 16px 0;
                border-top: 1px solid #e2e8f0;
                margin-top: 12px;
                gap: 2px;
            }

            .nav-links.open {
                display: flex;
            }

            .nav-links a {
                width: 100%;
                padding: 10px 16px;
                border-radius: 8px;
                text-align: center;
            }

            .nav-links a.cta-nav {
                text-align: center;
            }

            .header-search {
                flex: 1 1 100%;
                max-width: 100%;
                order: 10;
                margin-top: 8px;
            }

            .lang-switcher {
                margin-left: auto;
            }

            .hero-left h1 {
                font-size: 2.4rem;
            }

            .hero-search-wrap {
                flex-direction: column;
                background: transparent;
                padding: 0;
                box-shadow: none;
                gap: 12px;
                border: none;
            }

            .hero-search-wrap input {
                background: var(--white);
                border-radius: var(--radius-full);
                padding: 14px 20px;
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
                border: 1px solid #e2e8f0;
            }

            .hero-search-wrap button {
                justify-content: center;
                padding: 14px 24px;
                width: 100%;
            }

            .tools-grid {
                grid-template-columns: 1fr;
            }
            .categories-grid {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                gap: 16px;
            }
            .cta-box {
                padding: 36px 24px;
            }
            .cta-box h2 {
                font-size: 1.6rem;
            }
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }
        }

        @media (max-width: 480px) {
            .hero-left h1 {
                font-size: 1.8rem;
            }
            .hero {
                padding: 50px 0;
            }
            .section {
                padding: 50px 0;
            }
            .section-header h2 {
                font-size: 1.8rem;
            }
            .stat-item h3 {
                font-size: 2rem;
            }
            .orb-container {
                width: 200px;
                height: 200px;
            }
            .orb {
                width: 160px;
                height: 160px;
            }
            .orb::after {
                font-size: 50px;
            }
            .categories-grid {
                grid-template-columns: 1fr 1fr;
                gap: 12px;
            }
            .category-card {
                padding: 18px 12px;
            }
            .category-card .icon {
                font-size: 30px;
            }
            .category-card h3 {
                font-size: 0.9rem;
            }
            .benefits-grid {
                grid-template-columns: 1fr;
            }
            .tool-card {
                padding: 20px 18px;
            }
            .tool-card h3 {
                font-size: 1.1rem;
            }
            .cta-box {
                padding: 28px 16px;
            }
            .cta-btn {
                width: 100%;
                justify-content: center;
            }
            .logo {
                font-size: 20px;
            }
            .logo i {
                font-size: 22px;
            }
            .popular-tags a {
                font-size: 11px;
                padding: 4px 12px;
            }
            .social-links a {
                width: 36px;
                height: 36px;
                font-size: 14px;
            }
        }

/* ============================================================
   AI TOOLS HUB + AUTOMATIC NEWS
   ============================================================ */
.section-ai-hub{background:linear-gradient(180deg,#fff,#f8fafc)}
.ai-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ai-hub-card{display:flex;align-items:center;gap:14px;padding:20px;border:1px solid #e2e8f0;background:#fff;border-radius:18px;box-shadow:0 10px 30px rgba(15,23,42,.05);transition:all .3s ease}
.ai-hub-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(15,23,42,.1);border-color:#67e8f9}
.ai-hub-card h3{font-size:17px;margin:0 0 3px;color:#0f172a}.ai-hub-card p{font-size:13px;color:#64748b;margin:0;line-height:1.5}.ai-hub-card>i{margin-left:auto;color:#0891b2}.ai-hub-icon{width:48px;height:48px;min-width:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#ecfeff,#f5f3ff);color:#7c3aed;font-size:20px}.ai-hub-main{grid-column:span 2;background:linear-gradient(135deg,#ecfeff,#f5f3ff);border-color:#bae6fd}.ai-hub-main .ai-hub-icon{background:#fff}
.news-section{background:#f8fafc}.news-section-title{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:34px}.news-section-title h2{font-size:36px;margin:6px 0}.news-section-title p{margin:0;color:#64748b}.section-kicker{font-weight:800;color:#0891b2;text-transform:uppercase;letter-spacing:.08em;font-size:12px}.view-all-news,.news-category-head>a{background:#0f172a;color:#fff;padding:10px 17px;border-radius:999px;font-size:13px;font-weight:700}.news-category-block{margin:0 0 42px}.news-category-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}.news-category-head h3{font-size:24px;margin:0}.news-category-head p{color:#64748b;margin:2px 0 0;font-size:14px}.news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.news-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(15,23,42,.045);transition:all .3s ease;display:flex;flex-direction:column}.news-card:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(15,23,42,.1)}.news-thumb{display:block;position:relative;height:190px;overflow:hidden;background:#e2e8f0}.news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.news-card:hover .news-thumb img{transform:scale(1.05)}.news-placeholder{height:100%;display:grid;place-items:center;font-size:45px;color:#94a3b8;background:linear-gradient(135deg,#e0f2fe,#f5f3ff)}.news-badge{position:absolute;left:12px;top:12px;background:rgba(15,23,42,.82);color:#fff;padding:5px 10px;border-radius:999px;font-size:10px;font-weight:800}.news-card-body{padding:16px;display:flex;flex-direction:column;flex:1}.news-meta{display:flex;justify-content:space-between;gap:8px;color:#94a3b8;font-size:10px;margin-bottom:9px}.news-card h4{font-size:17px;line-height:1.35;margin:0 0 8px}.news-card h4 a{color:#0f172a}.news-card p{font-size:13px;line-height:1.6;color:#64748b;margin:0 0 14px}.read-more{margin-top:auto;color:#7c3aed;font-weight:800;font-size:13px;display:inline-flex;align-items:center;gap:6px}.read-more:hover{color:#06b6d4}.news-empty{padding:25px;background:#fff;border:1px dashed #cbd5e1;border-radius:15px;color:#64748b}.news-nav{font-size:13px!important;padding-left:10px!important;padding-right:10px!important}
@media(max-width:1100px){.nav-links{gap:2px}.nav-links a{padding:7px 9px;font-size:12px}.ai-hub-grid{grid-template-columns:repeat(2,1fr)}.ai-hub-main{grid-column:span 2}.news-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.news-section-title,.news-category-head{align-items:flex-start;flex-direction:column}.news-section-title h2{font-size:30px}.view-all-news{align-self:stretch;text-align:center}.ai-hub-grid{grid-template-columns:1fr}.ai-hub-main{grid-column:span 1}.news-grid{grid-template-columns:1fr}.news-thumb{height:210px}.news-nav{padding:8px 12px!important}}

/* ===== V4 NAV DROPDOWN ===== */
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-toggle{border:0;background:transparent;padding:8px 16px;font:inherit;font-weight:600;font-size:14px;color:var(--dark);border-radius:var(--radius-full);cursor:pointer;display:flex;align-items:center;gap:7px;transition:var(--transition)}
.nav-dropdown-toggle:hover,.nav-dropdown-toggle[aria-expanded="true"]{background:rgba(6,182,212,.08);color:var(--primary-dark)}
.nav-dropdown-toggle i{font-size:10px;transition:transform .2s ease}
.nav-dropdown-toggle[aria-expanded="true"] i{transform:rotate(180deg)}
.nav-dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:225px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:8px;box-shadow:0 18px 45px rgba(15,23,42,.14);display:none;z-index:1200}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{display:block!important;width:100%;padding:11px 13px!important;border-radius:10px!important;font-size:13px!important;font-weight:600!important;color:#1e293b!important}
.nav-dropdown-menu a:hover{background:#ecfeff!important;color:#0891b2!important}
.news-nav{white-space:nowrap}
/* ===== V4 AI TOOLS HUB ===== */
.ai-hub{background:linear-gradient(180deg,#fff,#f8fafc)}
.ai-hub-grid{grid-template-columns:repeat(3,1fr)}
.ai-hub-card{min-height:112px}
/* ===== V4 SUBMIT CTA ===== */
.submit-cta-section{padding:30px 0 70px;background:#f8fafc}
.submit-cta{position:relative;overflow:hidden;display:flex;align-items:center;gap:22px;padding:30px;border-radius:26px;background:linear-gradient(135deg,#0f172a,#312e81,#0891b2);color:#fff;box-shadow:0 25px 60px rgba(15,23,42,.16)}
.submit-cta:after{content:"";position:absolute;width:280px;height:280px;right:-80px;top:-110px;border-radius:50%;background:rgba(255,255,255,.08)}
.submit-cta-icon{width:62px;height:62px;min-width:62px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.14);font-size:26px;position:relative;z-index:1}
.submit-cta-content{position:relative;z-index:1;flex:1}
.submit-cta-content .section-kicker{color:#67e8f9}
.submit-cta-content h2{font-size:28px;margin:4px 0 6px;color:#fff}.submit-cta-content h2 span{color:#67e8f9}.submit-cta-content p{margin:0;color:#cbd5e1;max-width:760px}
.submit-cta-button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;padding:13px 21px;border-radius:999px;background:#fff;color:#0f172a;font-weight:800;white-space:nowrap;transition:transform .2s ease,box-shadow .2s ease}.submit-cta-button:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(0,0,0,.18)}
/* ===== V4 NEWS READ MORE ===== */
.read-more{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:13px;font-weight:800;color:#0891b2}.read-more:hover{color:#7c3aed}
/* ===== V4 FOOTER NEWSLETTER ===== */
.footer-newsletter{margin:0 0 35px;padding:24px;border:1px solid rgba(148,163,184,.2);border-radius:20px;background:rgba(255,255,255,.04)}
.footer-newsletter h3{margin:0 0 5px;color:#fff}.footer-newsletter p{margin:0 0 14px;color:#94a3b8;font-size:14px}.footer-newsletter-form{display:flex;gap:8px;max-width:560px}.footer-newsletter-form input{flex:1;min-width:0;padding:12px 15px;border:1px solid #334155;border-radius:999px;background:#0f172a;color:#fff;outline:none}.footer-newsletter-form button{border:0;border-radius:999px;padding:12px 20px;background:linear-gradient(135deg,#06b6d4,#7c3aed);color:#fff;font-weight:800;cursor:pointer}
@media(max-width:820px){
 .nav-dropdown{width:100%;display:block}.nav-dropdown-toggle{width:100%;justify-content:center;padding:11px 16px}.nav-dropdown-menu{position:static;width:100%;box-shadow:none;border:0;background:#f8fafc;margin:3px 0 5px;padding:5px;display:none}.nav-dropdown.open .nav-dropdown-menu{display:block}.nav-dropdown:hover .nav-dropdown-menu{display:none}.nav-dropdown.open:hover .nav-dropdown-menu{display:block}
 .submit-cta{flex-direction:column;text-align:center;padding:26px 20px}.submit-cta-content h2{font-size:23px}.submit-cta-button{width:100%;justify-content:center}
 .footer-newsletter-form{flex-direction:column}.footer-newsletter-form button{width:100%}
 .ai-hub-grid{grid-template-columns:1fr}.ai-hub-main{grid-column:auto}.news-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){.news-grid{grid-template-columns:1fr}.news-section-title{align-items:flex-start;flex-direction:column}.news-section-title h2{font-size:29px}}

/* V5 GLOBAL HEADER + MOBILE MENU FIX */
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-toggle{border:0;background:transparent;padding:8px 16px;font:inherit;font-weight:600;font-size:14px;color:var(--dark);border-radius:var(--radius-full);cursor:pointer;display:flex;align-items:center;gap:7px;transition:var(--transition)}
.nav-dropdown-toggle:hover,.nav-dropdown-toggle[aria-expanded="true"]{background:rgba(6,182,212,.08);color:var(--primary-dark)}
.nav-dropdown-toggle i{font-size:10px;transition:transform .2s ease}.nav-dropdown-toggle[aria-expanded="true"] i{transform:rotate(180deg)}
.nav-dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:235px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:8px;box-shadow:0 18px 45px rgba(15,23,42,.14);display:none;z-index:1200}
.nav-dropdown.open .nav-dropdown-menu{display:block}.nav-dropdown-menu a{display:block!important;width:100%;padding:11px 13px!important;border-radius:10px!important;font-size:13px!important;font-weight:600!important;color:#1e293b!important}.nav-dropdown-menu a:hover{background:#ecfeff!important;color:#0891b2!important}
@media(max-width:1100px){.nav-links{gap:1px}.nav-links a,.nav-dropdown-toggle{padding:7px 8px;font-size:12px}.news-nav{padding-left:6px!important;padding-right:6px!important}}
@media(max-width:820px){
 .header-inner{position:relative}.mobile-toggle{display:block;order:2;margin-left:auto}.lang-switcher{order:3}.header-search{order:5;width:100%;max-width:none;flex-basis:100%}
 .nav-links{order:10;display:none;width:100%;flex-direction:column;align-items:stretch;background:#fff;padding:12px;margin-top:10px;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 15px 35px rgba(15,23,42,.08)}
 .nav-links.open{display:flex}.nav-links>a,.nav-dropdown-toggle{width:100%;text-align:left;padding:12px 14px!important;border-radius:10px!important}.nav-dropdown{width:100%;display:block}.nav-dropdown-toggle{justify-content:space-between}.nav-dropdown-menu{position:static;display:none;width:100%;margin:3px 0 6px;padding:5px;box-shadow:none;background:#f8fafc;border:0}.nav-dropdown.open .nav-dropdown-menu{display:block}.nav-dropdown:hover .nav-dropdown-menu{display:none}.nav-dropdown.open:hover .nav-dropdown-menu{display:block}
}

.site-content{padding:55px 0 80px;background:#f8fafc;min-height:60vh}.single-article{max-width:900px;margin:0 auto;background:#fff;border:1px solid #e2e8f0;border-radius:24px;padding:36px;box-shadow:0 18px 50px rgba(15,23,42,.06)}.single-article h1{font-size:42px;line-height:1.15;margin:10px 0 14px;color:#0f172a}.article-category a{color:#0891b2;font-weight:800;font-size:13px}.article-meta{display:flex;gap:18px;color:#64748b;font-size:13px;margin-bottom:25px}.article-featured img{width:100%;height:auto;border-radius:18px;margin-bottom:28px}.article-content{font-size:17px;line-height:1.85;color:#334155}.article-content img{max-width:100%;height:auto}.article-content a{color:#0891b2;text-decoration:underline}.archive-header{margin-bottom:30px}.archive-header h1{font-size:40px;margin:7px 0}.archive-header p{color:#64748b}.archive-grid{grid-template-columns:repeat(3,1fr)!important}.page-article{max-width:1000px}.wp-block-image img{border-radius:15px}@media(max-width:760px){.single-article{padding:22px;border-radius:16px}.single-article h1{font-size:30px}.article-content{font-size:16px}.archive-grid{grid-template-columns:1fr!important}}