.tools-page { background: var(--bg); }
.tools-page section[id], .tools-page nav[id] { scroll-margin-top: 132px; }
.tools-hero { overflow: hidden; padding: 86px 0; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 80% 30%,rgba(68,221,255,.13),transparent 32%),radial-gradient(circle at 22% 0,rgba(255,204,68,.1),transparent 30%),linear-gradient(135deg,var(--surface),var(--bg) 72%); }
.tools-hero-grid { display: grid; grid-template-columns: 1.08fr .72fr; align-items: center; gap: 74px; }
.tools-hero h1 { max-width: 780px; font-size: clamp(3rem,5.5vw,5.2rem); }
.tools-hero .hero-lead { max-width: 720px; }
.tools-hero .button { gap: 14px; }
.tools-hero-art { position: relative; justify-self: end; width: min(100%,440px); }
.tools-hero-art::before { position: absolute; inset: 10% -8% -7% 13%; z-index: -1; border-radius: 50%; background: rgba(68,221,255,.12); filter: blur(42px); content: ""; }
.tools-hero-art img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid rgba(68,221,255,.34); border-radius: 24px; box-shadow: 0 28px 75px rgba(0,0,0,.38); }
.tools-hero-badge { position: absolute; right: -20px; bottom: 28px; display: flex; align-items: center; gap: 11px; padding: 13px 18px; border: 1px solid rgba(255,204,68,.6); border-radius: 9px; background: var(--surface-2); box-shadow: 0 15px 36px rgba(0,0,0,.34); }
.tools-hero-badge strong { color: var(--gold); font: 700 2rem/1 "Space Grotesk",sans-serif; }
.tools-hero-badge span { color: var(--muted); font-size: .73rem; line-height: 1.25; text-transform: uppercase; letter-spacing: .08em; }

.affiliate-note { padding: 20px 0; border-bottom: 1px solid rgba(255,204,68,.22); background: rgba(255,204,68,.06); }
.affiliate-note-inner { display: flex; align-items: center; gap: 14px; }
.affiliate-note-inner > span { flex: 0 0 28px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--button-text); font-weight: 800; }
.affiliate-note p { margin: 0; color: var(--muted); font-size: .88rem; }
.affiliate-note strong { color: var(--text); }

.tools-categories { position: sticky; top: 78px; z-index: 8; padding: 13px 0; border-bottom: 1px solid var(--line); background: rgba(8,17,24,.95); backdrop-filter: blur(14px); }
.tools-category-list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.tools-category-list a { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .77rem; font-weight: 700; }
.tools-category-list a:hover, .tools-category-list a:focus-visible { border-color: var(--gold); color: var(--text); outline: none; }

.tools-section { padding: 92px 0; background: var(--bg); }
.tools-section.alt { background: var(--surface); }
.tools-section-heading { display: grid; grid-template-columns: 72px 1fr; gap: 23px; align-items: start; max-width: 860px; margin-bottom: 38px; }
.tools-section-heading > span { display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid rgba(255,204,68,.48); border-radius: 50%; color: var(--gold); font: 700 1rem "Space Grotesk",sans-serif; }
.tools-section-heading h2 { font-size: clamp(2rem,3.6vw,3.15rem); }
.tools-section-heading p { max-width: 720px; margin: 15px 0 0; color: var(--muted); font-size: 1.02rem; }
.tools-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.tools-grid.single { grid-template-columns: minmax(0,560px); }
.tool-card { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 19px; min-width: 0; min-height: 245px; padding: 25px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.tools-section.alt .tool-card { background: var(--bg); }
.tool-card:hover { transform: translateY(-3px); border-color: rgba(68,221,255,.55); box-shadow: 0 18px 38px rgba(0,0,0,.19); }
.tool-card > img { width: 72px; height: 72px; padding: 7px; border-radius: 14px; object-fit: contain; background: #fff; }
.tool-card > div { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.tool-card h3 { margin: 4px 0 12px; font-size: 1.3rem; }
.tool-card p { margin: 0 0 20px; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.tool-card a { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--primary-button); font-size: .86rem; font-weight: 700; }
.tool-card a span { transition: transform .2s ease; }
.tool-card a:hover span { transform: translate(3px,-3px); }
.tool-card a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.affiliate-tag { position: absolute; top: 14px; right: 14px; padding: 4px 7px; border-radius: 4px; background: rgba(185,232,121,.12); color: var(--economy); font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.affiliate .tool-card, .tool-card.affiliate { border-color: rgba(185,232,121,.28); }

.tools-method { padding: 102px 0; background: radial-gradient(circle at 50% 0,rgba(255,204,68,.13),transparent 42%),var(--surface-2); text-align: center; }
.tools-method-inner { display: flex; flex-direction: column; align-items: center; }
.tools-method h2 { max-width: 930px; }
.tools-method p { max-width: 700px; margin: 23px auto 30px; color: var(--muted); font-size: 1.08rem; }

@media (max-width: 1060px) {
  .tools-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 800px) {
  .tools-hero { padding: 62px 0 68px; }
  .tools-hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .tools-hero h1 { font-size: clamp(2.65rem,11vw,4rem); }
  .tools-hero-art { justify-self: center; width: min(88%,390px); }
  .tools-hero-badge { right: -12px; bottom: 18px; }
  .affiliate-note-inner { align-items: flex-start; }
  .tools-categories { top: 70px; }
  .tools-section { padding: 68px 0; }
  .tools-section-heading { grid-template-columns: 1fr; gap: 17px; text-align: left; }
  .tools-section-heading > span { width: 48px; height: 48px; }
  .tools-grid, .tools-grid.single { grid-template-columns: 1fr; }
  .tools-method { padding: 74px 0; }
  .tools-method .button { width: 100%; }
}

@media (max-width: 480px) {
  .tool-card { grid-template-columns: 58px 1fr; gap: 15px; padding: 21px; }
  .tool-card > img { width: 58px; height: 58px; border-radius: 11px; }
  .affiliate-tag { position: static; grid-column: 1 / -1; justify-self: start; margin-bottom: -6px; }
  .tool-card.affiliate { grid-template-rows: auto 1fr; }
  .tool-card.affiliate > img { grid-row: 2; }
  .tool-card.affiliate > div { grid-row: 2; }
}