.tools-header{text-align:center;padding:56px 20px 12px}.tools-header h1{font-family:var(--font-display);letter-spacing:-.03em;color:var(--color-text-primary);margin-bottom:8px;font-size:34px;font-weight:800}.tools-header p{color:var(--color-text-secondary);font-size:15px}.tools-nav{background:var(--color-elevated);border:1px solid var(--color-border-default);border-radius:14px;justify-content:center;align-items:center;gap:6px;max-width:fit-content;margin:40px auto 48px;padding:5px;display:flex}.tools-nav a{color:var(--color-text-secondary);white-space:nowrap;border-radius:10px;align-items:center;gap:8px;padding:11px 20px;font-size:14px;font-weight:500;text-decoration:none;transition:all .25s;display:flex;position:relative}.tools-nav a:hover{color:var(--color-text-primary);background:var(--color-overlay)}.tools-nav a .tool-icon{opacity:.5;align-items:center;transition:opacity .25s;display:flex}.tools-nav a:hover .tool-icon{opacity:.8}.tools-grid{grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:0 auto 60px;padding:0 28px;display:grid}.tool-card{background:var(--color-elevated);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);cursor:pointer;flex-direction:column;gap:14px;padding:28px 24px;text-decoration:none;transition:border-color .25s,background .25s,transform .3s;display:flex;position:relative;overflow:hidden}.tool-card:before{content:"";border-radius:2px 0 0 2px;width:2px;position:absolute;top:0;bottom:0;left:0}.tool-card:hover{border-color:var(--color-border-strong);background:var(--color-overlay)}.tool-card-icon{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.tool-card h3{font-family:var(--font-display);letter-spacing:-.02em;color:var(--color-text-primary);font-size:17px;font-weight:700}.tool-card p{color:var(--color-text-secondary);font-size:13px;line-height:1.55}.tool-card .tool-arrow{color:var(--color-text-tertiary);align-items:center;gap:6px;margin-top:auto;font-size:13px;font-weight:500;transition:color .2s,gap .2s;display:flex}.tool-card:hover .tool-arrow{color:var(--color-text-secondary);gap:10px}.tool-card[data-color=green]:before{background:#00e676;box-shadow:0 0 12px #00e67680}.tool-card[data-color=green] .tool-card-icon{background:#00e67614}.tool-card[data-color=purple]:before{background:var(--color-purple);box-shadow:0 0 12px #7c6efa80}.tool-card[data-color=purple] .tool-card-icon{background:#7c6efa14}.tool-card[data-color=orange]:before{background:#f5a623;box-shadow:0 0 12px #f5a62380}.tool-card[data-color=orange] .tool-card-icon{background:#f5a62314}.tool-card[data-color=blue]:before{background:#4d9fff;box-shadow:0 0 12px #4d9fff80}.tool-card[data-color=blue] .tool-card-icon{background:#4d9fff14}@media (max-width:800px){.tools-grid{grid-template-columns:1fr;max-width:420px}.tools-nav{flex-wrap:wrap;justify-content:center;max-width:90%}.tools-nav a{padding:9px 14px;font-size:13px}}@media (min-width:801px) and (max-width:1024px){.tools-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.tools-header{padding:32px 16px 8px}.tools-header h1{font-size:26px}.tools-grid{max-width:100%;padding:0 12px}.tools-nav{max-width:100%;margin:24px auto 32px}.tools-nav a{white-space:normal;text-align:center;padding:8px 12px;font-size:12px}.tool-card{padding:20px 18px}}