/* Ultrascout AI Knowledge Hub - Professional Editorial Design */

:root {
    --color-primary: #0F1628;
    --color-primary-light: #1A2744;
    --color-secondary: #C9A227;
    --color-secondary-light: #E8C547;
    --color-accent: #3B82F6;
    --surface-dark: #0A0F1C;
    --surface-base: #111827;
    --surface-elevated: #1F2937;
    --surface-card: #1A2332;
    --surface-hover: #243044;
    --text-primary: #F9FAFB;
    --text-secondary: #9CA3AF;
    --text-muted: #6B7280;
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.15);
    --border-accent: rgba(201, 162, 39, 0.3);
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
    --info: #3B82F6;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
    --text-sm: clamp(0.8125rem, 0.77rem + 0.21vw, 0.875rem);
    --text-base: clamp(0.9375rem, 0.875rem + 0.3125vw, 1.0625rem);
    --text-lg: clamp(1.0625rem, 0.98rem + 0.41vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.75rem);
    --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
    --text-5xl: clamp(2.75rem, 2rem + 3.75vw, 4.5rem);
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 40px rgba(201, 162, 39, 0.15);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --max-width: 1400px;
    --content-width: 900px;
    --sidebar-width: 280px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.7; color: var(--text-primary); background-color: var(--surface-dark); min-height: 100vh; }
::selection { background-color: var(--color-secondary); color: var(--color-primary); }
:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; }
a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; line-height: 1.25; color: var(--text-primary); letter-spacing: -0.02em; }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }

.display-text { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }
.eyebrow { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-secondary); }
.subtitle { font-size: var(--text-lg); color: var(--text-secondary); line-height: 1.6; max-width: 65ch; }
.lead { font-size: var(--text-xl); color: var(--text-secondary); line-height: 1.7; }
code, .mono { font-family: var(--font-mono); font-size: 0.9em; }

.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-6); }
.container--narrow { max-width: var(--content-width); }
.section { padding: var(--space-20) 0; }
.section--large { padding: var(--space-24) 0; }

.header { position: sticky; top: 0; z-index: 1000; background: linear-gradient(180deg, var(--surface-dark) 0%, rgba(10, 15, 28, 0.97) 100%); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); }
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: var(--space-8); }

.logo { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); text-decoration: none; transition: opacity var(--transition-fast); }
.logo:hover { opacity: 0.85; }
.logo__icon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%); border-radius: var(--radius-md); color: var(--color-primary); font-size: 1.25rem; }
.logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.logo__text span:last-child { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: var(--space-1); }
.nav__link { position: relative; display: flex; align-items: center; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); border-radius: var(--radius-md); transition: all var(--transition-fast); }
.nav__link:hover { color: var(--text-primary); background-color: var(--surface-elevated); }
.nav__link--active { color: var(--color-secondary); }
.nav__link--active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 2px; background-color: var(--color-secondary); border-radius: 1px; }

.nav__dropdown { position: relative; }
.nav__dropdown-trigger { display: flex; align-items: center; gap: var(--space-2); }
.nav__dropdown-trigger svg { width: 12px; height: 12px; transition: transform var(--transition-fast); }
.nav__dropdown:hover .nav__dropdown-trigger svg { transform: rotate(180deg); }
.nav__dropdown-menu { position: absolute; top: calc(100% + var(--space-2)); left: 50%; transform: translateX(-50%) translateY(10px); min-width: 220px; padding: var(--space-2); background-color: var(--surface-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); opacity: 0; visibility: hidden; transition: all var(--transition-fast); }
.nav__dropdown:hover .nav__dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav__dropdown-link { display: block; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--text-secondary); border-radius: var(--radius-md); transition: all var(--transition-fast); }
.nav__dropdown-link:hover { color: var(--text-primary); background-color: var(--surface-hover); }

.header__actions { display: flex; align-items: center; gap: var(--space-4); }
.search-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--text-secondary); background-color: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); }
.search-toggle:hover { color: var(--text-primary); border-color: var(--border-default); }
.mobile-menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; background: none; border: none; cursor: pointer; }
.mobile-menu-toggle span { display: block; width: 100%; height: 2px; background-color: var(--text-secondary); border-radius: 1px; transition: all var(--transition-fast); }

.hero { position: relative; padding: var(--space-24) 0; overflow: hidden; }
.hero--home { padding: var(--space-24) 0 var(--space-16); min-height: 70vh; display: flex; align-items: center; }
.hero__background { position: absolute; inset: 0; z-index: -1; }
.hero__background::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 20% 40%, rgba(201, 162, 39, 0.08) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 60%, rgba(59, 130, 246, 0.06) 0%, transparent 50%), linear-gradient(180deg, var(--surface-dark) 0%, var(--surface-base) 100%); }
.hero__content { position: relative; z-index: 1; max-width: 900px; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); padding: var(--space-2) var(--space-4); background-color: rgba(201, 162, 39, 0.1); border: 1px solid var(--border-accent); border-radius: var(--radius-2xl); font-size: var(--text-xs); font-weight: 600; color: var(--color-secondary); letter-spacing: 0.1em; text-transform: uppercase; }
.hero__title { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 700; line-height: 1.1; margin-bottom: var(--space-6); background: linear-gradient(135deg, var(--text-primary) 0%, var(--color-secondary) 50%, var(--text-primary) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 8s linear infinite; }
@keyframes shimmer { 0%, 100% { background-position: 0% center; } 50% { background-position: 200% center; } }
.hero__description { font-size: var(--text-xl); color: var(--text-secondary); line-height: 1.7; max-width: 700px; margin-bottom: var(--space-10); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hero__stats { display: flex; gap: var(--space-10); margin-top: var(--space-16); padding-top: var(--space-10); border-top: 1px solid var(--border-subtle); }
.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat__value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; color: var(--color-secondary); line-height: 1; }
.stat__label { font-size: var(--text-sm); color: var(--text-muted); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; line-height: 1.5; text-decoration: none; border-radius: var(--radius-md); border: none; cursor: pointer; transition: all var(--transition-fast); }
.btn--primary { background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%); color: var(--color-primary); box-shadow: 0 4px 14px rgba(201, 162, 39, 0.25); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(201, 162, 39, 0.35); }
.btn--secondary { background-color: transparent; color: var(--text-primary); border: 1px solid var(--border-default); }
.btn--secondary:hover { background-color: var(--surface-elevated); border-color: var(--border-strong); }
.btn--ghost { background-color: transparent; color: var(--color-secondary); padding: var(--space-2) var(--space-4); }
.btn--ghost:hover { background-color: rgba(201, 162, 39, 0.1); }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }

.card { position: relative; background-color: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; transition: all var(--transition-base); }
.card:hover { border-color: var(--border-default); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.card__body { padding: var(--space-6); }
.card__category { display: inline-block; margin-bottom: var(--space-3); font-size: var(--text-xs); font-weight: 600; color: var(--color-secondary); letter-spacing: 0.1em; text-transform: uppercase; }
.card__title { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-3); line-height: 1.3; }
.card__title a { color: var(--text-primary); transition: color var(--transition-fast); }
.card__title a:hover { color: var(--color-secondary); }
.card__excerpt { color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-4); }
.card__meta { display: flex; align-items: center; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-muted); }

.feature-card { padding: var(--space-8); background: linear-gradient(135deg, var(--surface-card) 0%, var(--surface-elevated) 100%); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); transition: all var(--transition-base); }
.feature-card:hover { border-color: var(--border-accent); box-shadow: var(--shadow-glow); }
.feature-card__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: var(--space-5); background: linear-gradient(135deg, rgba(201, 162, 39, 0.15) 0%, rgba(201, 162, 39, 0.05) 100%); border: 1px solid var(--border-accent); border-radius: var(--radius-lg); color: var(--color-secondary); font-size: 1.5rem; }
.feature-card__title { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-3); }
.feature-card__description { color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-4); }
.feature-card__link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-secondary); font-weight: 500; font-size: var(--text-sm); transition: gap var(--transition-fast); }
.feature-card__link:hover { gap: var(--space-3); }

.paper-card { position: relative; padding: var(--space-6); background-color: var(--surface-card); border: 1px solid var(--border-subtle); border-left: 4px solid var(--color-secondary); border-radius: var(--radius-lg); transition: all var(--transition-base); }
.paper-card:hover { background-color: var(--surface-hover); box-shadow: var(--shadow-md); }
.paper-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); }
.paper-card__title { font-size: var(--text-lg); font-weight: 600; line-height: 1.4; }
.paper-card__title a:hover { color: var(--color-secondary); }
.paper-card__venue { flex-shrink: 0; padding: var(--space-1) var(--space-3); background-color: rgba(59, 130, 246, 0.1); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; color: var(--color-accent); }
.paper-card__authors { color: var(--text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.paper-card__abstract { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6; margin-bottom: var(--space-4); }
.paper-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.paper-card__tag { padding: var(--space-1) var(--space-3); background-color: var(--surface-elevated); border-radius: var(--radius-2xl); font-size: var(--text-xs); color: var(--text-secondary); }
.paper-card__footer { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.paper-card__date { font-size: var(--text-sm); color: var(--text-muted); }

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.section__header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-10); padding-bottom: var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.section__header-content { max-width: 600px; }
.section__eyebrow { margin-bottom: var(--space-3); }
.section__title { font-family: var(--font-display); font-size: var(--text-3xl); margin-bottom: var(--space-3); }
.section__description { color: var(--text-secondary); line-height: 1.6; }

.howto { background-color: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-10); margin: var(--space-16) 0; }
.howto__title { font-family: var(--font-display); font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.howto__description { color: var(--text-secondary); margin-bottom: var(--space-8); max-width: 600px; }
.howto__steps { display: grid; gap: var(--space-6); counter-reset: step; }
.howto__step { display: flex; gap: var(--space-5); counter-increment: step; }
.howto__step::before { content: counter(step); flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%); border-radius: 50%; font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-primary); }
.howto__step-content h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.howto__step-content p { color: var(--text-secondary); }

.entity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--space-6); }
.entity-block { padding: var(--space-6); background-color: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); transition: all var(--transition-base); }
.entity-block:hover { border-color: var(--border-default); }
.entity-block__title { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.entity-block__description { color: var(--text-secondary); margin-bottom: var(--space-4); line-height: 1.6; }
.entity-block__properties { display: grid; gap: var(--space-2); }
.entity-block__property { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.entity-block__property:last-child { border-bottom: none; }
.entity-block__property-label { color: var(--text-muted); }
.entity-block__property-value { color: var(--text-primary); font-weight: 500; }

.faq { max-width: 800px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--border-subtle); }
.faq__question { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: var(--space-5) 0; background: none; border: none; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); text-align: left; cursor: pointer; transition: color var(--transition-fast); }
.faq__question:hover { color: var(--color-secondary); }
.faq__answer { display: none; padding-bottom: var(--space-5); color: var(--text-secondary); line-height: 1.7; }
.faq__item.active .faq__answer { display: block; }

.breadcrumb { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) 0; font-size: var(--text-sm); color: var(--text-muted); }
.breadcrumb a { color: var(--text-secondary); transition: color var(--transition-fast); }
.breadcrumb a:hover { color: var(--color-secondary); }
.breadcrumb__separator { color: var(--text-muted); }

.page-header { padding: var(--space-16) 0 var(--space-12); background: linear-gradient(180deg, var(--surface-dark) 0%, var(--surface-base) 100%); border-bottom: 1px solid var(--border-subtle); }
.page-header__eyebrow { margin-bottom: var(--space-4); }
.page-header__title { font-family: var(--font-display); font-size: var(--text-4xl); margin-bottom: var(--space-4); }
.page-header__description { font-size: var(--text-xl); color: var(--text-secondary); max-width: 700px; line-height: 1.6; }

.article { padding: var(--space-12) 0; }
.article__header { max-width: var(--content-width); margin: 0 auto var(--space-10); text-align: center; }
.article__category { margin-bottom: var(--space-4); }
.article__title { font-family: var(--font-display); font-size: var(--text-4xl); margin-bottom: var(--space-6); }
.article__meta { display: flex; justify-content: center; gap: var(--space-6); color: var(--text-muted); font-size: var(--text-sm); }
.article__content { max-width: var(--content-width); margin: 0 auto; }
.article__content h2 { font-size: var(--text-2xl); margin-top: var(--space-12); margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.article__content h3 { font-size: var(--text-xl); margin-top: var(--space-8); margin-bottom: var(--space-4); }
.article__content p { color: var(--text-secondary); margin-bottom: var(--space-5); }
.article__content ul, .article__content ol { margin-bottom: var(--space-5); padding-left: var(--space-6); }
.article__content li { color: var(--text-secondary); margin-bottom: var(--space-2); }
.article__content ul li { list-style-type: disc; }
.article__content ol li { list-style-type: decimal; }
.article__content blockquote { margin: var(--space-8) 0; padding: var(--space-6); background-color: var(--surface-card); border-left: 4px solid var(--color-secondary); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.article__content blockquote p { font-style: italic; color: var(--text-primary); margin-bottom: 0; }
.article__content code { padding: var(--space-1) var(--space-2); background-color: var(--surface-elevated); border-radius: var(--radius-sm); font-size: 0.875em; }
.article__content pre { margin: var(--space-6) 0; padding: var(--space-5); background-color: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow-x: auto; }
.article__content pre code { padding: 0; background: none; font-size: var(--text-sm); line-height: 1.6; }

.callout { margin: var(--space-8) 0; padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid; }
.callout--info { background-color: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); }
.callout--warning { background-color: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); }
.callout--success { background-color: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); }
.callout__title { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; margin-bottom: var(--space-2); }
.callout__content { color: var(--text-secondary); font-size: var(--text-sm); }

.newsletter { position: relative; padding: var(--space-16); background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--surface-card) 100%); border: 1px solid var(--border-accent); border-radius: var(--radius-2xl); overflow: hidden; }
.newsletter::before { content: ''; position: absolute; top: -50%; right: -20%; width: 60%; height: 200%; background: radial-gradient(ellipse, rgba(201, 162, 39, 0.1) 0%, transparent 60%); pointer-events: none; }
.newsletter__content { position: relative; z-index: 1; max-width: 500px; }
.newsletter__title { font-family: var(--font-display); font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.newsletter__description { color: var(--text-secondary); margin-bottom: var(--space-6); }
.newsletter__form { display: flex; gap: var(--space-3); }
.newsletter__input { flex: 1; padding: var(--space-3) var(--space-4); background-color: var(--surface-dark); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--text-base); }
.newsletter__input::placeholder { color: var(--text-muted); }
.newsletter__input:focus { outline: none; border-color: var(--color-secondary); }

.footer { background-color: var(--surface-base); border-top: 1px solid var(--border-subtle); padding: var(--space-16) 0 var(--space-8); }
.footer__grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--space-12); margin-bottom: var(--space-12); }
.footer__brand { max-width: 300px; }
.footer__brand .logo { margin-bottom: var(--space-4); }
.footer__tagline { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6; margin-bottom: var(--space-5); }
.footer__social { display: flex; gap: var(--space-3); }
.footer__social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background-color: var(--surface-elevated); border-radius: var(--radius-md); color: var(--text-secondary); transition: all var(--transition-fast); }
.footer__social-link:hover { background-color: var(--color-secondary); color: var(--color-primary); }
.footer__column h4 { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-4); text-transform: uppercase; letter-spacing: 0.1em; }
.footer__links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__link { color: var(--text-muted); font-size: var(--text-sm); transition: color var(--transition-fast); }
.footer__link:hover { color: var(--color-secondary); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); }
.footer__copyright { color: var(--text-muted); font-size: var(--text-sm); }
.footer__legal { display: flex; gap: var(--space-6); }
.footer__legal a { color: var(--text-muted); font-size: var(--text-sm); transition: color var(--transition-fast); }
.footer__legal a:hover { color: var(--text-secondary); }

.layout-with-sidebar { display: grid; grid-template-columns: 1fr var(--sidebar-width); gap: var(--space-12); align-items: start; }
.sidebar { position: sticky; top: 100px; }
.sidebar__widget { margin-bottom: var(--space-8); padding: var(--space-6); background-color: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.sidebar__widget-title { font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: var(--space-4); }
.sidebar__toc { display: flex; flex-direction: column; gap: var(--space-2); }
.sidebar__toc-link { font-size: var(--text-sm); color: var(--text-secondary); padding: var(--space-2) 0; border-left: 2px solid transparent; padding-left: var(--space-3); transition: all var(--transition-fast); }
.sidebar__toc-link:hover, .sidebar__toc-link.active { color: var(--color-secondary); border-left-color: var(--color-secondary); }

.tag { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); background-color: var(--surface-elevated); border-radius: var(--radius-2xl); font-size: var(--text-xs); font-weight: 500; color: var(--text-secondary); transition: all var(--transition-fast); }
.tag:hover { background-color: var(--surface-hover); color: var(--text-primary); }
.tag--primary { background-color: rgba(201, 162, 39, 0.15); color: var(--color-secondary); }
.tag--accent { background-color: rgba(59, 130, 246, 0.15); color: var(--color-accent); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--color-secondary); }
.bg-dark { background-color: var(--surface-dark); }
.bg-base { background-color: var(--surface-base); }
.bg-elevated { background-color: var(--surface-elevated); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.hidden { display: none; }

@media (max-width: 1200px) {
    .layout-with-sidebar { grid-template-columns: 1fr; }
    .sidebar { position: static; display: none; }
}

@media (max-width: 1024px) {
    .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .header__inner { height: 64px; }
    .nav { display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; flex-direction: column; padding: var(--space-6); background-color: var(--surface-dark); border-top: 1px solid var(--border-subtle); overflow-y: auto; }
    .nav.active { display: flex; }
    .nav__link { padding: var(--space-4); font-size: var(--text-lg); }
    .nav__dropdown-menu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; padding: var(--space-2) var(--space-4); background-color: transparent; border: none; }
    .mobile-menu-toggle { display: flex; }
    .hero--home { min-height: auto; padding: var(--space-12) 0; }
    .hero__stats { flex-wrap: wrap; gap: var(--space-6); }
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .section { padding: var(--space-12) 0; }
    .section__header { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
    .footer__grid { grid-template-columns: 1fr; gap: var(--space-8); }
    .footer__bottom { flex-direction: column; gap: var(--space-4); text-align: center; }
    .newsletter { padding: var(--space-8); }
    .newsletter__form { flex-direction: column; }
    .howto__step { flex-direction: column; text-align: center; }
    .paper-card__header { flex-direction: column; }
}

@media (max-width: 480px) {
    .container { padding: 0 var(--space-4); }
    .hero__actions { flex-direction: column; width: 100%; }
    .hero__actions .btn { width: 100%; }
}

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fadeInUp 0.6s ease forwards; }
[data-animate] { opacity: 0; }
[data-animate].in-view { opacity: 1; }
[data-animate="fade-up"] { transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-animate="fade-up"].in-view { transform: translateY(0); }