/* Hub page specific styles only */
body { font-family: var(--sans, 'Source Sans 3', sans-serif); }

.hero { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; padding: 3rem 0 2rem; }
.hero-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: .72rem; background: var(--brand-black); color: var(--brand-yellow); padding: .25rem .7rem; border-radius: 4px; display: inline-block; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); font-weight: 900; color: var(--brand-black); line-height: 1.1; margin-bottom: .75rem; }
.hero h1 span { color: #777; font-weight: 400; }
.hero p { font-size: 1rem; color: var(--brand-mid); max-width: 500px; line-height: 1.7; }

.support-banner { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; margin-bottom: 1.5rem; }
.support-banner-inner { background: var(--brand-dark); border-radius: 16px; padding: 1.25rem 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.support-banner-text h3 { color: #fff; font-size: 1rem; margin-bottom: .2rem; }
.support-banner-text p { color: #888; font-size: .85rem; }
.support-banner-actions { display: flex; gap: .6rem; flex-wrap: wrap; flex-shrink: 0; }
.btn-dl { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 8px; font-size: .85rem; font-weight: 700; text-decoration: none; color: var(--brand-black); background: var(--brand-yellow); transition: opacity .15s; white-space: nowrap; }
.btn-dl:hover { opacity: .85 }
.btn-dl-outline { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.15); }
.btn-dl-outline:hover { background: rgba(255,255,255,.14); opacity: 1; }

.tools-section { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; padding-bottom: 4rem; }
.section-label { font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--brand-mid); margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(0,0,0,.08); }
.tools-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.tool-card { background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 20px; padding: 1.5rem; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .6rem; box-shadow: 0 2px 12px rgba(0,0,0,.06); transition: border-color .18s, transform .18s, box-shadow .18s; position: relative; overflow: hidden; }
.tool-card:hover { border-color: var(--brand-yellow); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.1); }
.tool-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--brand-yellow); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.tool-card:hover::after { transform: scaleX(1); }
.tool-badge { position: absolute; top: 1.1rem; right: 1.1rem; background: var(--brand-black); color: var(--brand-yellow); font-size: .63rem; font-weight: 800; padding: .2rem .5rem; border-radius: 4px; text-transform: uppercase; letter-spacing: .08em; font-family: 'JetBrains Mono', monospace; }
.tool-icon { font-size: 1.6rem; line-height: 1; margin-bottom: .25rem; }
.tool-name { font-size: 1rem; font-weight: 800; color: var(--brand-black); }
.tool-desc { font-size: .85rem; color: var(--brand-mid); line-height: 1.6; flex: 1; }
.tool-arrow { font-size: .825rem; font-weight: 700; color: var(--brand-black); font-family: 'JetBrains Mono', monospace; margin-top: .25rem; }

@media(max-width:900px) { .tools-grid { grid-template-columns: repeat(2,1fr) } }
@media(max-width:560px) { .tools-grid { grid-template-columns: 1fr } .support-banner-inner { flex-direction: column; align-items: flex-start; } }