/* ===========================================
   AGENTS & SKILLS — MARKETPLACE EXTENSIONS v2
   Playfair headings, Lucide icons, refined cards
   Builds on hse-dark-executive-theme.css
   =========================================== */

/* === RESETS === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-display); background: var(--bg-primary); color: var(--text-primary); -webkit-font-smoothing: antialiased; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* === CONTAINER === */
.container { max-width: 1120px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }
.container--narrow { max-width: 780px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }

/* === PLAYFAIR for logo + headings === */
.logo { font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 400; color: var(--text-primary); letter-spacing: -0.01em; white-space: nowrap; }
.logo i { font-style: italic; color: var(--accent-gold); }
h1, h2 { font-family: 'Playfair Display', serif; }
h1 { font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }

/* === LUCIDE ICONS === */
.lucide { width: 1em; height: 1em; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; vertical-align: -0.125em; }

/* === NAVBAR === */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1rem clamp(1rem, 3vw, 2rem); display: flex; justify-content: space-between; align-items: center; background: rgba(10,10,10,0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-subtle); }
.nav-links { display: flex; gap: clamp(1.25rem, 3vw, 2rem); align-items: center; list-style: none; }
.nav-links a { font-size: var(--small-size); font-weight: 500; color: var(--text-secondary); letter-spacing: 0.02em; transition: color 0.2s; }
.nav-links a:hover { color: var(--text-primary); }
.nav-cta { background: var(--accent-gold); color: var(--bg-primary) !important; padding: 0.5rem 1.25rem; border-radius: 4px; font-weight: 700 !important; font-size: var(--small-size) !important; transition: opacity 0.2s; }
.nav-cta:hover { opacity: 0.88; color: var(--bg-primary) !important; }

/* === BUTTONS === */
.btn-primary { display: inline-flex; align-items: center; gap: 0.5em; background: var(--accent-gold); color: var(--bg-primary); padding: 0.85rem 2rem; border-radius: 4px; font-family: var(--font-display); font-weight: 700; font-size: var(--body-size); border: none; cursor: pointer; transition: opacity 0.2s, transform 0.2s; }
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-secondary { display: inline-flex; align-items: center; gap: 0.5em; background: transparent; color: var(--text-primary); padding: 0.85rem 2rem; border-radius: 4px; font-family: var(--font-display); font-weight: 600; font-size: var(--body-size); border: 1px solid var(--border-subtle); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.btn-secondary:hover { border-color: var(--border-accent); background: var(--bg-card); }
.btn-small { padding: 0.45rem 1rem; font-size: var(--small-size); }
.btn-buy { display: inline-flex; align-items: center; gap: 0.4em; background: var(--accent-gold); color: var(--bg-primary); padding: 0.4rem 1rem; border-radius: 4px; font-family: var(--font-display); font-weight: 700; font-size: var(--small-size); border: none; cursor: pointer; transition: opacity 0.2s; white-space: nowrap; }
.btn-buy:hover { opacity: 0.88; }

/* === HERO === */
.hero { padding: clamp(8rem, 15vw, 11rem) 0 clamp(3rem, 6vw, 5rem); text-align: center; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: 700px; height: 500px; background: radial-gradient(ellipse, var(--accent-gold-glow) 0%, transparent 70%); pointer-events: none; }
.hero .tag { margin: 0 auto 1.5rem; }
.hero h1 { max-width: 700px; margin: 0 auto 1.25rem; position: relative; }
.hero .subtitle { margin: 0 auto 2.5rem; text-align: center; }
.hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* === SECTIONS === */
.section { padding: clamp(3rem, 6vw, 5rem) 0; }
.section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.section-header h2 { margin-bottom: 0; }
.section-header .section-link { font-family: var(--font-mono); font-size: var(--small-size); color: var(--accent-gold); font-weight: 600; letter-spacing: 0.05em; transition: opacity 0.2s; }
.section-header .section-link:hover { opacity: 0.75; }
.section-sub { color: var(--text-muted); font-size: var(--small-size); margin-top: 0.25rem; }

/* === BADGES ROW === */
.badges-row { display: flex; justify-content: center; gap: clamp(2rem, 5vw, 4rem); padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3.5rem); flex-wrap: wrap; }
.badge-item { text-align: center; max-width: 200px; }
.badge-icon { width: 44px; height: 44px; border-radius: 6px; background: var(--accent-gold-dim); border: 1px solid var(--border-accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; color: var(--accent-gold); }
.badge-icon .lucide { width: 20px; height: 20px; }
.badge-item .badge-label { font-family: var(--font-mono); font-size: var(--small-size); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-gold); margin-bottom: 0.2rem; }
.badge-item p { font-size: var(--small-size); color: var(--text-muted); line-height: 1.45; }

/* === LISTING CARDS (ClawMart-style) === */
.listing-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 8px; overflow: hidden; transition: border-color 0.3s, background 0.3s, transform 0.3s; display: flex; flex-direction: column; cursor: pointer; }
.listing-card:hover { border-color: var(--border-accent); background: var(--bg-card-hover); transform: translateY(-3px); }
.listing-card-header { display: flex; align-items: flex-start; gap: 0.85rem; padding: clamp(0.85rem, 1.5vw, 1.25rem); padding-bottom: 0; }
.listing-card-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--bg-elevated); }
.listing-card-header-text { flex: 1; min-width: 0; }
.listing-card-header-text h3 { font-size: clamp(0.95rem, 1.5vw, 1.1rem); font-weight: 700; line-height: 1.25; margin-bottom: 0.15em; }
.listing-card-header-text .listing-card-role { font-size: var(--small-size); color: var(--text-muted); }
.listing-card-price-badge { font-family: var(--font-mono); font-size: var(--small-size); font-weight: 700; color: var(--accent-gold); background: var(--accent-gold-dim); padding: 0.2em 0.65em; border-radius: 4px; white-space: nowrap; flex-shrink: 0; align-self: flex-start; }
.listing-card-price-badge.free { color: var(--accent-green); background: var(--accent-green-dim); }
.listing-card-body { padding: clamp(0.85rem, 1.5vw, 1.25rem); flex: 1; display: flex; flex-direction: column; gap: 0.65rem; }
.listing-card-desc { font-size: var(--small-size); color: var(--text-secondary); line-height: 1.55; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.listing-card-cat { display: inline-block; font-family: var(--font-mono); font-size: clamp(0.58rem, 0.85vw, 0.68rem); color: var(--text-muted); border: 1px solid var(--border-subtle); padding: 0.2em 0.6em; border-radius: 3px; width: fit-content; text-transform: capitalize; }
.listing-card-footer { display: flex; justify-content: space-between; align-items: center; padding: clamp(0.6rem, 1vw, 0.85rem) clamp(0.85rem, 1.5vw, 1.25rem); border-top: 1px solid var(--border-subtle); margin-top: auto; }
.listing-card-creator { display: flex; align-items: center; gap: 0.5rem; }
.listing-card-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 700; color: var(--text-muted); overflow: hidden; flex-shrink: 0; }
.listing-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.listing-card-creator-name { font-size: clamp(0.62rem, 0.9vw, 0.75rem); color: var(--text-secondary); font-weight: 500; }

/* === CREATOR CARDS === */
.creator-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 8px; padding: clamp(1rem, 2vw, 1.5rem); transition: border-color 0.3s, background 0.3s; display: flex; flex-direction: column; gap: 0.75rem; }
.creator-card:hover { border-color: var(--border-accent); background: var(--bg-card-hover); }
.creator-card-header { display: flex; align-items: center; gap: 0.85rem; }
.creator-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-elevated); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--text-muted); overflow: hidden; }
.creator-avatar img { width: 100%; height: 100%; object-fit: cover; }
.creator-card h3 { margin-bottom: 0; }
.creator-card-bio { font-size: var(--small-size); color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.creator-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.creator-card-count { font-family: var(--font-mono); font-size: clamp(0.6rem, 0.9vw, 0.72rem); color: var(--text-muted); }
.creator-card-link { font-family: var(--font-mono); font-size: clamp(0.6rem, 0.9vw, 0.72rem); color: var(--accent-gold); font-weight: 600; transition: opacity 0.2s; }
.creator-card-link:hover { opacity: 0.75; }

/* === STEPS === */
.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.step { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 8px; padding: clamp(1.25rem, 2.5vw, 2rem); }
.step-number { font-family: var(--font-mono); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; color: var(--accent-gold); line-height: 1; margin-bottom: 0.75rem; opacity: 0.3; }
.step h3 { margin-bottom: 0.4em; }
.step p { font-size: var(--small-size); color: var(--text-muted); line-height: 1.5; }
@media (max-width: 768px) { .steps-row { grid-template-columns: 1fr; } }

/* === API SECTION === */
.api-section { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.api-features { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); }
.api-feature { display: flex; gap: 0.85rem; align-items: flex-start; }
.api-feature-icon { width: 32px; height: 32px; border-radius: 6px; background: var(--accent-gold-dim); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent-gold); }
.api-feature-icon .lucide { width: 16px; height: 16px; }
.api-feature h3 { font-size: var(--small-size); margin-bottom: 0.15em; }
.api-feature p { font-size: var(--small-size); color: var(--text-muted); }
@media (max-width: 768px) { .api-section { grid-template-columns: 1fr; } }

/* === CTA BANNER === */
.cta-banner { text-align: center; padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 3rem); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 8px; position: relative; overflow: hidden; }
.cta-banner::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 500px; height: 300px; background: radial-gradient(ellipse, var(--accent-gold-glow) 0%, transparent 70%); pointer-events: none; }
.cta-banner h2 { position: relative; margin-bottom: 0.5em; }
.cta-banner p { position: relative; max-width: 500px; margin: 0 auto 1.75rem; }
.cta-banner .btn-primary { position: relative; }

/* === PAGE HERO (sub-pages) === */
.page-hero { padding: clamp(7rem, 13vw, 9rem) 0 clamp(2rem, 4vw, 3rem); text-align: center; position: relative; }
.page-hero .tag { margin: 0 auto 1rem; }
.page-hero h1 { max-width: 650px; margin: 0 auto 1rem; }
.page-hero .subtitle { margin: 0 auto; text-align: center; }

/* === FILTERS BAR (listings) === */
.filters-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 1rem 0 1.5rem; border-bottom: 1px solid var(--border-subtle); margin-bottom: 1.5rem; }
.filter-chip { font-family: var(--font-mono); font-size: clamp(0.6rem, 0.9vw, 0.72rem); padding: 0.35em 0.85em; border: 1px solid var(--border-subtle); border-radius: 4px; color: var(--text-muted); background: transparent; cursor: pointer; transition: all 0.2s; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.filter-chip:hover { border-color: var(--border-accent); color: var(--text-secondary); }
.filter-chip.active { background: var(--accent-gold-dim); border-color: var(--border-accent); color: var(--accent-gold); font-weight: 700; }
.filters-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.filters-meta span { font-family: var(--font-mono); font-size: var(--small-size); color: var(--text-muted); }
.filters-meta select { font-family: var(--font-mono); font-size: var(--small-size); color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 0.35em 0.75em; cursor: pointer; }

/* === LISTING DETAIL === */
.detail-layout { display: grid; grid-template-columns: 1fr 340px; gap: clamp(2rem, 4vw, 3rem); align-items: start; padding: clamp(6.5rem, 12vw, 8rem) 0 clamp(3rem, 6vw, 4rem); }
.detail-back { font-family: var(--font-mono); font-size: var(--small-size); color: var(--text-muted); margin-bottom: 1.5rem; display: inline-flex; align-items: center; gap: 0.4em; transition: color 0.2s; }
.detail-back:hover { color: var(--accent-gold); }
.detail-hero-img { width: 100%; max-width: 120px; border-radius: 12px; margin-bottom: 1.25rem; }
.detail-main h1 { font-size: var(--h2-size); margin-bottom: 0.25em; }
.detail-main .listing-card-cat { margin-bottom: 1rem; }
.detail-about { margin-top: 2rem; }
.detail-about h2 { font-size: var(--h3-size); margin-bottom: 0.75em; }
.detail-about p, .detail-about li { font-size: var(--body-size); color: var(--text-secondary); line-height: 1.65; }
.detail-about ul { list-style: none; margin: 0.75em 0; }
.detail-about ul li { padding-left: 1.25em; position: relative; margin-bottom: 0.35em; }
.detail-about ul li::before { content: '—'; position: absolute; left: 0; color: var(--accent-gold); font-weight: 700; }
.detail-sidebar { position: sticky; top: 5rem; }
.detail-buy-box { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 8px; padding: clamp(1.25rem, 2vw, 1.75rem); margin-bottom: 1.25rem; }
.detail-buy-box .price-large { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--accent-gold); margin-bottom: 0.15em; }
.detail-buy-box .price-label { font-size: var(--small-size); color: var(--text-muted); margin-bottom: 1rem; }
.detail-buy-box .btn-primary { width: 100%; justify-content: center; margin-bottom: 0.75rem; }
.detail-buy-box .terms-note { font-size: clamp(0.6rem, 0.85vw, 0.68rem); color: var(--text-muted); text-align: center; }
.detail-info-box { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 8px; padding: clamp(1rem, 2vw, 1.5rem); margin-bottom: 1.25rem; }
.detail-info-box h4 { font-family: var(--font-mono); font-size: clamp(0.6rem, 0.9vw, 0.72rem); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 0.85rem; font-weight: 600; }
.detail-meta-row { display: flex; justify-content: space-between; padding: 0.45em 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--small-size); }
.detail-meta-row:last-child { border-bottom: none; }
.detail-meta-row dt { color: var(--text-muted); }
.detail-meta-row dd { color: var(--text-primary); font-weight: 500; }
.detail-creator-box { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 8px; transition: border-color 0.2s; }
.detail-creator-box:hover { border-color: var(--border-accent); }
.detail-creator-box .creator-avatar { width: 40px; height: 40px; }
.detail-creator-box h4 { font-size: var(--small-size); font-weight: 600; color: var(--text-primary); margin-bottom: 0.1em; }
.detail-creator-box p { font-size: clamp(0.6rem, 0.85vw, 0.68rem); color: var(--text-muted); }
@media (max-width: 768px) { .detail-layout { grid-template-columns: 1fr; } .detail-sidebar { position: static; } }

/* === BLOG === */
.blog-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 8px; overflow: hidden; transition: border-color 0.3s, background 0.3s, transform 0.3s; display: flex; flex-direction: column; }
.blog-card:hover { border-color: var(--border-accent); background: var(--bg-card-hover); transform: translateY(-3px); }
.blog-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--bg-elevated); }
.blog-card-body { padding: clamp(0.85rem, 1.5vw, 1.25rem); flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.blog-card-meta { font-family: var(--font-mono); font-size: clamp(0.58rem, 0.85vw, 0.68rem); color: var(--text-muted); display: flex; gap: 1em; }
.blog-card h3 { font-size: clamp(0.9rem, 1.4vw, 1.05rem); line-height: 1.3; }
.blog-card-excerpt { font-size: var(--small-size); color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.blog-card-link { font-family: var(--font-mono); font-size: clamp(0.6rem, 0.9vw, 0.72rem); color: var(--accent-gold); font-weight: 600; }
.blog-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.blog-featured .blog-card-img { aspect-ratio: auto; height: 100%; border-radius: 8px 0 0 8px; }
.blog-featured .blog-card-body { padding: clamp(1.25rem, 2.5vw, 2rem); justify-content: center; }
.blog-featured h3 { font-family: 'Playfair Display', serif; font-size: var(--h3-size); }
@media (max-width: 768px) { .blog-featured { grid-template-columns: 1fr; } .blog-featured .blog-card-img { border-radius: 8px 8px 0 0; aspect-ratio: 16/9; } }

/* === ABOUT PAGE === */
.about-intro { max-width: 680px; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) 0 clamp(2rem, 4vw, 3rem); }
.about-intro p { font-size: var(--body-size); line-height: 1.7; margin-bottom: 1.25em; }
.about-types { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.about-type-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 8px; padding: clamp(1.25rem, 2.5vw, 2rem); }
.about-type-card .type-icon { width: 44px; height: 44px; border-radius: 8px; background: var(--accent-gold-dim); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--accent-gold); }
.about-type-card .type-icon .lucide { width: 22px; height: 22px; }
.about-type-card h3 { margin-bottom: 0.5em; }
.about-type-card p { font-size: var(--small-size); color: var(--text-muted); line-height: 1.55; }
.about-type-card .type-includes { font-family: var(--font-mono); font-size: clamp(0.6rem, 0.85vw, 0.68rem); color: var(--text-secondary); margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--border-subtle); }
@media (max-width: 640px) { .about-types { grid-template-columns: 1fr; } }
.about-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, 1.5vw, 1.25rem); margin-top: clamp(2rem, 4vw, 3rem); }
.about-kpi { text-align: center; padding: clamp(1.25rem, 2.5vw, 2rem); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 8px; }
.about-kpi .kpi-value { font-size: clamp(1.5rem, 3.5vw, 2.5rem); font-weight: 800; color: var(--accent-gold); line-height: 1.1; margin-bottom: 0.2em; }
.about-kpi .kpi-label { font-size: var(--small-size); color: var(--text-muted); font-weight: 500; }
@media (max-width: 640px) { .about-kpi-row { grid-template-columns: 1fr; } }

/* === VERSION HISTORY === */
.version-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.version-item { padding: 1rem; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 6px; }
.version-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.version-badge { font-family: var(--font-mono); font-size: clamp(0.6rem, 0.85vw, 0.68rem); font-weight: 700; color: var(--accent-gold); background: var(--accent-gold-dim); padding: 0.15em 0.5em; border-radius: 3px; }
.version-date { font-family: var(--font-mono); font-size: clamp(0.6rem, 0.85vw, 0.68rem); color: var(--text-muted); }
.version-item p { font-size: var(--small-size); color: var(--text-secondary); line-height: 1.5; }

/* === FOOTER === */
.footer { padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 1px solid var(--border-subtle); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.footer-links { display: flex; gap: clamp(1.25rem, 3vw, 2rem); list-style: none; }
.footer-links a { font-size: var(--small-size); color: var(--text-muted); font-weight: 500; transition: color 0.2s; }
.footer-links a:hover { color: var(--text-primary); }
.footer-categories h4 { font-family: var(--font-mono); font-size: clamp(0.6rem, 0.9vw, 0.72rem); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; margin-bottom: 0.85rem; }
.footer-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.4rem 1.5rem; }
.footer-cat-grid a { font-size: clamp(0.65rem, 0.95vw, 0.78rem); color: var(--text-muted); transition: color 0.2s; white-space: nowrap; }
.footer-cat-grid a:hover { color: var(--accent-gold); }
.footer-bottom { padding-top: clamp(1rem, 2vw, 1.5rem); border-top: 1px solid var(--border-subtle); text-align: center; }
.footer-bottom p { font-size: clamp(0.6rem, 0.85vw, 0.72rem); color: var(--text-muted); }

/* === UTILITY === */
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* === RESPONSIVE NAVBAR === */
@media (max-width: 640px) { .navbar { padding: 0.85rem 1rem; } .nav-links { gap: 1rem; } .hero-buttons { flex-direction: column; align-items: center; } .badges-row { gap: 1.5rem; } .footer-top { flex-direction: column; gap: 1.5rem; } }