/* tpl/feng-shui-80444d44.css — page CSS shared by 1 page(s) of this template.
   Auto-extracted from inline <style> by scripts/refactor_css.py.
   Loaded after components.css; per-page :root{} stays inline. */

.fs-hero { border-top: 3px solid var(--section-accent); padding: var(--space-8) 0 var(--space-7); background: color-mix(in srgb, var(--section-accent) 7%, var(--color-base-bg)); }
.fs-badge { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--radius-full); background: var(--section-accent); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-4); }
.fs-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(48px, 8vw, 92px); line-height: 0.95; letter-spacing: -0.02em; margin: 0; }
.fs-sub { margin-top: var(--space-4); max-width: 680px; color: var(--color-text-secondary); font-size: 18px; line-height: 1.65; }
.breadcrumb { margin: var(--space-5) 0 0; font-size: 13px; color: var(--color-text-tertiary); }
.breadcrumb a { color: var(--color-text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--section-accent); }
.fs-section { padding: var(--space-8) 0 0; }
.fs-label { color: var(--section-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-2); }
.fs-heading { font-family: var(--font-display); font-size: clamp(32px, 5vw, 48px); font-weight: 500; letter-spacing: -0.02em; margin: 0 0 var(--space-3); }
.fs-lede { max-width: 720px; color: var(--color-text-secondary); font-size: 16px; line-height: 1.7; margin-bottom: var(--space-5); }
.fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.fs-card { display: block; padding: var(--space-5); border-radius: 8px; background: var(--color-base-surface); border: 1px solid var(--color-base-border); text-decoration: none; color: inherit; }
.fs-card:hover { border-color: color-mix(in srgb, var(--section-accent) 55%, var(--color-base-border)); transform: translateY(-2px); }
.fs-card__k { color: var(--section-accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-2); }
.fs-card__t { font-family: var(--font-display); font-size: 23px; font-weight: 500; margin: 0 0 var(--space-2); }
.fs-card__d { color: var(--color-text-secondary); font-size: 14px; line-height: 1.6; margin: 0; }
.fs-band { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
@media (max-width: 760px) { .fs-band { grid-template-columns: repeat(2, 1fr); } }
.fs-element { padding: var(--space-4); border-radius: 8px; background: var(--color-base-surface); border: 1px solid var(--color-base-border); text-align: center; }
.fs-element strong { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 500; margin-bottom: var(--space-1); }
.fs-element span { color: var(--color-text-secondary); font-size: 13px; }
.fs-note { margin-top: var(--space-5); padding: var(--space-5); border-radius: 8px; background: color-mix(in srgb, var(--section-accent) 8%, var(--color-base-surface)); border: 1px solid color-mix(in srgb, var(--section-accent) 20%, var(--color-base-border)); color: var(--color-text-secondary); line-height: 1.7; }
.site-footer { padding: var(--space-8) 0 var(--space-7); border-top: 1px solid var(--color-base-border); margin-top: var(--space-9); }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items: start; }
.footer-brand { font-weight: 700; margin-bottom: var(--space-2); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer-links a { color: var(--color-text-secondary); font-size: 13px; }
@media (max-width: 640px) { .footer-inner { grid-template-columns: 1fr; } }