.site-header { position: sticky; top: 0; z-index: 900; height: var(--header-height); display: flex; align-items: center; background: transparent; border-bottom: 1px solid transparent; transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); }
.site-header.scrolled { background: var(--color-bg); border-bottom-color: var(--color-border); box-shadow: var(--shadow-sm); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.logo { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--fs-h3); color: var(--color-text-primary); }
.logo:hover { text-decoration: none; }
.logo .mark { width: 28px; height: 28px; color: var(--color-primary); }
.main-nav { display: flex; align-items: center; gap: var(--space-5); }
.main-nav a { color: var(--color-text-secondary); font-size: var(--fs-small); font-weight: 500; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--color-text-primary); text-decoration: none; }
.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.nav-toggle { display: none; }
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .main-nav { position: fixed; inset: var(--header-height) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: var(--space-3) var(--space-5); box-shadow: var(--shadow-md); transform: translateY(-120%); transition: transform var(--transition-base); }
  .main-nav[data-open="true"] { transform: translateY(0); }
  .main-nav a { padding-block: var(--space-3); }
}

.breadcrumbs { font-size: var(--fs-caption); color: var(--color-text-secondary); padding-top: var(--space-5); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; }
.breadcrumbs li::after { content: "/"; margin-left: var(--space-2); color: var(--color-border); }
.breadcrumbs li:last-child::after { content: ""; }

.hero { padding-block: var(--space-9) var(--space-8); text-align: center; }
.hero h1 { font-size: var(--fs-hero); max-width: 22ch; margin-inline: auto; }
.hero p { font-size: var(--fs-body); color: var(--color-text-secondary); max-width: 60ch; margin: var(--space-4) auto 0; }
.hero-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-6); }
.hero-trust { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-6); }

.generator-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.generator-grid .card { display: flex; flex-direction: column; gap: var(--space-3); }
.generator-grid .card h3 { margin: 0; }
.generator-grid .card .meta { font-size: var(--fs-caption); color: var(--color-text-secondary); }
.generator-grid .card .arrow { margin-top: auto; color: var(--color-primary); font-weight: 600; font-size: var(--fs-small); }
.generator-grid .card[hidden] { display: none; }

.tool-layout { display: grid; gap: var(--space-6); grid-template-columns: minmax(320px, 380px) 1fr; align-items: start; }
@media (max-width: 900px) { .tool-layout { grid-template-columns: 1fr; } }
.form-grid { display: grid; gap: var(--space-4); }
.form-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.stats-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
.stat .value { font-size: var(--fs-h2); font-weight: 700; line-height: 1; }
.stat .label { font-size: var(--fs-caption); color: var(--color-text-secondary); margin-top: var(--space-2); }

.site-footer { border-top: 1px solid var(--color-border); padding-block: var(--space-7); background: var(--color-card-bg); margin-top: var(--space-9); }
.site-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-5); align-items: center; }
.footer-links { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.footer-links a { color: var(--color-text-secondary); font-size: var(--fs-small); }
.footer-copy { font-size: var(--fs-caption); color: var(--color-text-secondary); }

.ad-slot { margin-block: var(--space-7); min-height: 90px; display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); font-size: var(--fs-caption); border: 1px dashed var(--color-border); border-radius: var(--radius-md); }
.related-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }