﻿@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700;800&family=Inter:wght@400;500;600&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Inter,system-ui,sans-serif;background:#ffffff;color:#0a0a0a}
.header-inner{max-width:1280px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center}
.logo-img{height:30px}
header{border-bottom:1px solid #f0f0f0;position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);z-index:10}
nav a{margin-left:20px;text-decoration:none;color:#666;font-size:14px;font-weight:500}
nav a:hover{color:#000}
.hero{padding:90px 24px 50px;text-align:center;background:#fff}
.hero h1{font-size:56px;font-weight:800;line-height:1;letter-spacing:-0.04em;color:#0a0a0a;max-width:720px;margin:0 auto 18px}
.hero h1 span{color:#FF6B00}
.hero p{color:#666;font-size:18px;max-width:560px;margin:0 auto 30px}
.search-wrap{max-width:600px;margin:0 auto;position:relative}
.search-wrap input{width:100%;padding:16px 18px 16px 48px;border-radius:12px;border:1px solid #e5e5e5;background:#f9f9f9;font-size:15px;outline:none}
.search-wrap input:focus{background:#fff;border-color:#FF6B00;box-shadow:0 0 0 3px rgba(255,107,0,.15)}
.search-wrap i{position:absolute;left:18px;top:50%;transform:translateY(-50%)}
.trust{margin-top:16px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:12px;color:#888}
.trust b{color:#000}
.tools-section{max-width:1280px;margin:0 auto;padding:20px 24px}
.category-title{font-size:12px;font-weight:700;letter-spacing:.1em;color:#0a0a0a;margin:36px 0 12px;border-left:3px solid #FF6B00;padding-left:10px}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tool-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:16px;text-decoration:none;color:#0a0a0a;display:flex;gap:12px;transition:.15s}
.tool-card:hover{border-color:#0a0a0a;transform:translateY(-1px)}
.tool-icon{width:40px;height:40px;border-radius:8px;background:#FFF4EB;display:flex;align-items:center;justify-content:center;font-size:18px}
.tool-card h3{font-size:14px;font-weight:600}
.tool-card p{font-size:12px;color:#777;margin-top:2px}
footer{border-top:1px solid #f0f0f0;padding:32px;text-align:center;color:#999;font-size:12px;margin-top:40px}
@media(max-width:600px){.hero h1{font-size:38px}.tools-grid{grid-template-columns:1fr 1fr}}
