/* ==========================================================
   Working Tools Box — Premium Theme
   ========================================================== */

:root{
  --grad-a:#2563eb;
  --grad-b:#8b5cf6;
  --grad-c:#ec4899;
  --gradient: linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-c));
  --ink:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --surface:#ffffff;
  --surface-soft:#f8fafc;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 8px 24px rgba(15,23,42,.08);
  --shadow-lg: 0 20px 45px rgba(76,29,149,.12);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--surface);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
img,svg{display:block}

.container{width:min(1160px,calc(100% - 40px));margin:auto}

.text-gradient{
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- Focus & accessibility ---------- */
a:focus-visible,
button:focus-visible{
  outline:3px solid #93c5fd;
  outline-offset:2px;
  border-radius:8px;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(255,255,255,.85);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.nav{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:38px;
  height:38px;
  border-radius:10px;
  background:var(--surface-soft);
  border:1px solid var(--border);
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-weight:800;font-size:17px;letter-spacing:-.3px;color:var(--ink)}
.brand-name em{font-style:normal;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-tagline{font-size:11px;color:var(--muted);font-weight:600}

nav[aria-label="Main navigation"]{
  display:flex;
  gap:28px;
  font-size:14px;
  font-weight:700;
  color:#334155;
}
nav[aria-label="Main navigation"] a{padding:6px 2px;border-bottom:2px solid transparent}
nav[aria-label="Main navigation"] a:hover,
nav[aria-label="Main navigation"] a[aria-current="page"]{
  color:var(--grad-a);
  border-bottom-color:var(--grad-a);
}

.nav-cta{display:none}

/* ---------- Buttons ---------- */
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:12px 22px;
  font-weight:700;
  font-size:14.5px;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.button-primary{
  background:var(--gradient);
  color:#fff;
  box-shadow:var(--shadow-md);
}
.button-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.button-secondary{
  background:var(--surface);
  color:var(--ink);
  border-color:var(--border);
}
.button-secondary:hover{border-color:var(--grad-a);color:var(--grad-a)}

.button-open{
  background:var(--gradient);
  color:#fff;
  width:100%;
  padding:13px 18px;
  border-radius:12px;
  box-shadow:var(--shadow-sm);
}
.button-open:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}

/* ---------- Hero ---------- */
.hero{
  padding:64px 0 56px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:40px;
  align-items:center;
}
.eyebrow{
  display:inline-block;
  margin:0 0 14px;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.2px;
  color:var(--grad-a);
  background:#eef2ff;
  padding:6px 12px;
  border-radius:999px;
}
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.6px;margin:0}
h1{font-size:clamp(34px,4.6vw,52px);margin:0 0 18px;color:var(--ink)}
h2{font-size:clamp(26px,3.4vw,36px)}
h3.category-heading{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  margin:36px 0 18px;
}
h4{font-size:19px;color:var(--ink)}
.category-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:var(--gradient);
  flex-shrink:0;
}

.hero-text{
  font-size:17px;
  color:var(--muted);
  max-width:520px;
  margin:0 0 30px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}

.hero-visual{
  position:relative;
  min-height:280px;
}
.hero-visual svg{width:100%;height:auto}
.float-chip{animation:float 5s ease-in-out infinite}
.float-chip-a{animation-delay:.2s}
.float-chip-b{animation-delay:.9s}
.float-chip-c{animation-delay:1.5s}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@media (prefers-reduced-motion: reduce){
  .float-chip{animation:none}
}

/* ---------- Tools section ---------- */
.section{padding:20px 0 100px}
.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.section-subtext{color:var(--muted);font-size:15px;margin:10px 0 0}
.tool-count{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  background:var(--surface-soft);
  border:1px solid var(--border);
  padding:9px 16px;
  border-radius:999px;
}

.tool-grid{
  display:grid;
  gap:20px;
}

.tool-card{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  padding:26px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:20px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.tool-card:hover{
  box-shadow:var(--shadow-lg);
  border-color:#ddd6fe;
  transform:translateY(-2px);
}

.tool-card-main{
  display:flex;
  gap:18px;
  align-items:flex-start;
  min-width:0;
}

.tool-icon{
  flex-shrink:0;
  width:56px;
  height:56px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-sm);
}
.icon-blue{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.icon-pink{background:linear-gradient(135deg,#f472b6,#db2777)}
.icon-green{background:linear-gradient(135deg,#34d399,#059669)}
.icon-orange{background:linear-gradient(135deg,#fb923c,#ea580c)}
.icon-indigo{background:linear-gradient(135deg,#818cf8,#4f46e5)}
.icon-red{background:linear-gradient(135deg,#f87171,#dc2626)}

.tool-info{min-width:0}
.tool-title-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.tool-info p{margin:0 0 12px;color:var(--muted);font-size:14.5px}

.badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  font-weight:800;
  padding:5px 11px;
  border-radius:999px;
  white-space:nowrap;
}
.badge-green{background:#dcfce7;color:#166534}
.badge-blue{background:#dbeafe;color:#1d4ed8}
.badge-purple{background:#ede9fe;color:#6d28d9}
.badge-gray{background:#f1f5f9;color:#475569}

.tag-list{display:flex;flex-wrap:wrap;gap:8px}
.tag-list li{
  font-size:12px;
  font-weight:700;
  color:#334155;
  background:var(--surface-soft);
  border:1px solid var(--border);
  padding:5px 11px;
  border-radius:999px;
}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--border);
  background:var(--surface-soft);
}
.footer-inner{padding:36px 0 26px}
.footer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-bottom:24px;
  border-bottom:1px solid var(--border);
}
.footer-brand .brand-mark{background:var(--surface)}
.footer-nav{display:flex;gap:22px;font-size:14px;font-weight:700}
.footer-nav a:hover{color:var(--grad-a)}
.footer-bottom{padding-top:20px;color:var(--muted);font-size:13px;text-align:center}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding:44px 0 40px}
  .hero-visual{order:-1;max-width:440px;margin:0 auto}
}

@media (max-width:640px){
  .nav{min-height:64px}
  .brand-tagline{display:none}
  nav[aria-label="Main navigation"]{gap:16px;font-size:13px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .button{width:100%}
  .section-heading{flex-direction:column;align-items:flex-start}
  .tool-card{grid-template-columns:1fr;align-items:stretch}
  .tool-card-main{flex-direction:column}
  .tool-title-row{justify-content:space-between}
  .footer-top{flex-direction:column;align-items:flex-start}
}

@media (min-width:641px) and (max-width:900px){
  .tool-card{grid-template-columns:1fr;align-items:stretch}
  .button-open{width:auto;align-self:flex-start;margin-top:6px}
}