:root {
            --ate-navy: #062b45;
            --ate-blue: #0b74b8;
            --ate-blue-dark: #06466f;
            --ate-gold: #ffb703;
            --ate-bg: #f4f8fb;
            --ate-card: #ffffff;
            --ate-border: #e3edf5;
            --ate-text: #25313b;
            --ate-muted: #667786;
            --ate-shadow: 0 14px 34px rgba(10, 35, 60, .09);
        }

        body {
            margin: 0;
            background: var(--ate-bg);
            color: var(--ate-text);
            font-family: Arial, sans-serif;
        }

        .tools-page {
            max-width: 1220px;
            margin: 0 auto;
            padding: 42px 20px 56px;
        }

        .tools-hero {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at top right, rgba(255,255,255,.22), transparent 34%),
                linear-gradient(135deg, var(--ate-navy), var(--ate-blue));
            color: #fff;
            border-radius: 26px;
            padding: 58px 44px;
            margin-bottom: 34px;
            box-shadow: var(--ate-shadow);
        }

        .tools-kicker {
            display: inline-block;
            text-transform: uppercase;
            letter-spacing: .12em;
            font-size: .78rem;
            font-weight: 800;
            color: var(--ate-gold);
            margin-bottom: 12px;
        }

        .tools-hero h1 {
            margin: 0 0 14px;
            max-width: 860px;
            color: #fff;
            font-size: clamp(2.15rem, 5vw, 4.35rem);
            line-height: 1.05;
        }

        .tools-hero h2 {
            margin: 0 0 18px;
            max-width: 820px;
            color: rgba(255,255,255,.92);
            font-size: clamp(1.1rem, 2vw, 1.45rem);
            font-weight: 600;
            line-height: 1.45;
        }

        .tools-hero p {
            max-width: 790px;
            margin: 0;
            color: rgba(255,255,255,.88);
            font-size: 1.05rem;
            line-height: 1.7;
        }

        .tools-search {
            display: flex;
            gap: 12px;
            max-width: 680px;
            margin-top: 30px;
        }

        .tools-search input {
            flex: 1;
            padding: 16px 18px;
            border: 0;
            border-radius: 14px;
            font-size: 1rem;
            outline: none;
        }

        .tools-search button {
            padding: 16px 24px;
            border: 0;
            border-radius: 14px;
            background: var(--ate-gold);
            color: #102030;
            font-weight: 800;
            cursor: pointer;
        }

        .tools-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin: 0 0 34px;
        }

        .tools-stat {
            background: var(--ate-card);
            border: 1px solid var(--ate-border);
            border-radius: 18px;
            padding: 20px;
            box-shadow: 0 8px 22px rgba(10, 35, 60, .06);
            text-align: center;
        }

        .tools-stat strong {
            display: block;
            color: var(--ate-navy);
            font-size: 1.8rem;
            margin-bottom: 4px;
        }

        .tools-stat span {
            color: var(--ate-muted);
            font-weight: 700;
            font-size: .95rem;
        }

        .tool-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
            gap: 22px;
        }

        .tool-group {
            background: var(--ate-card);
            border: 1px solid var(--ate-border);
            border-radius: 22px;
            padding: 24px;
            box-shadow: var(--ate-shadow);
            text-align: left;
        }

        .tool-group.popular-tools {
            background: linear-gradient(135deg, #fff8df, #ffffff);
            border-color: #ffd166;
        }

        .tool-group h3 {
            margin: 0 0 10px;
            color: var(--ate-navy);
            font-size: 1.25rem;
        }

        .tool-group p {
            margin: 0;
            color: var(--ate-muted);
            line-height: 1.58;
            font-size: .96rem;
        }

        .tool-links {
            display: grid;
            gap: 10px;
            margin-top: 18px;
        }

        .tool-button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 13px 15px;
            background: #f5f9fc;
            color: #0b5f94;
            border-radius: 13px;
            text-decoration: none;
            font-weight: 800;
            line-height: 1.3;
            transition: transform .18s ease, background .18s ease, color .18s ease;
        }

        .tool-button::after {
            content: "›";
            font-size: 1.4rem;
            line-height: 1;
            opacity: .75;
        }

        .tool-button:hover,
        .tool-button:focus {
            background: var(--ate-blue);
            color: #fff;
            transform: translateY(-2px);
        }

        .seo-copy {
            margin-top: 34px;
            background: var(--ate-card);
            border: 1px solid var(--ate-border);
            border-radius: 22px;
            padding: 32px;
            box-shadow: var(--ate-shadow);
            text-align: left;
            line-height: 1.7;
        }

        .seo-copy h2 {
            margin-top: 0;
            color: var(--ate-navy);
            text-align: center;
            font-size: 1.65rem;
        }

        .seo-copy p {
            color: #4d5b66;
        }

        .no-results {
            display: none;
            background: #fff;
            border: 1px solid var(--ate-border);
            border-radius: 18px;
            padding: 28px;
            margin-top: 22px;
            text-align: center;
            color: var(--ate-muted);
            box-shadow: var(--ate-shadow);
        }

        @media (max-width: 800px) {
            .tools-page {
                padding: 28px 14px 42px;
            }

            .tools-hero {
                padding: 38px 24px;
                border-radius: 20px;
            }

            .tools-search {
                display: block;
            }

            .tools-search input,
            .tools-search button {
                width: 100%;
                box-sizing: border-box;
            }

            .tools-search button {
                margin-top: 10px;
            }

            .tools-stats {
                grid-template-columns: 1fr;
            }
        }