html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: rgba(201,168,76,0.3); color: #F5F0E8; }
::-moz-selection { background: rgba(201,168,76,0.3); color: #F5F0E8; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.5); }
:focus-visible { outline: 2px solid rgba(201,168,76,0.5); outline-offset: 2px; border-radius: 4px; }
a { transition: color 0.2s, opacity 0.2s; }
img { background: rgba(201,168,76,0.03); }
img[loading="lazy"] { opacity: 1; }
button:active, .btn:active, [role="button"]:active { transform: scale(0.97); }
.card-hover { transition: transform 0.2s, box-shadow 0.2s; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.gold-gradient { background: linear-gradient(135deg, #c9a84c 0%, #e0c96e 50%, #c9a84c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.fade-in { animation: globalFadeIn 0.6s ease forwards; opacity: 0; }
@keyframes globalFadeIn { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(12px); } }
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.1s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.2s; }
.stagger > *:nth-child(5) { animation-delay: 0.25s; }
.stagger > *:nth-child(6) { animation-delay: 0.3s; }
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
 content: attr(data-tooltip);
 position: absolute;
 bottom: calc(100% + 6px);
 left: 50%;
 transform: translateX(-50%);
 padding: 4px 10px;
 background: rgba(0,0,0,0.85);
 color: #F5F0E8;
 font-size: 11px;
 border-radius: 6px;
 white-space: nowrap;
 pointer-events: none;
 z-index: 100;
 animation: tooltipFade 0.15s ease;
}
@keyframes tooltipFade { from{opacity:0;transform:translateX(-50%) translateY(4px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.loading-dots::after { content: ''; animation: loadDots 1.5s infinite; }
@keyframes loadDots { 0%{content:'.'} 33%{content:'..'} 66%{content:'...'} }
.badge-pulse { animation: badgePulse 2s ease infinite; }
@keyframes badgePulse { 0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,0.4)} 50%{box-shadow:0 0 0 6px rgba(201,168,76,0)} }
.container-fluid { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 768px) { .container-fluid { padding: 0 16px; } }
.skeleton { background: linear-gradient(90deg, rgba(201,168,76,0.04) 25%, rgba(201,168,76,0.08) 50%, rgba(201,168,76,0.04) 75%); background-size: 200% 100%; animation: skeletonShimmer 1.5s infinite; border-radius: 6px; }
@keyframes skeletonShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 100000; display: flex; flex-direction: column; gap: 8px; }
@media (hover: none) {
 button, a, [onclick] { -webkit-tap-highlight-color: rgba(201,168,76,0.1); }
}
.reading-progress {
 position: fixed;
 top: 0;
 left: 0;
 width: 0%;
 height: 3px;
 background: linear-gradient(90deg, #C9A84C, #D4B96A, #C9A84C);
 z-index: 100002;
 transition: width 0.1s linear;
 box-shadow: 0 0 8px rgba(201,168,76,0.4);
}
.article-content .highlight-box {
 background: linear-gradient(135deg, rgba(201,168,76,0.06), rgba(201,168,76,0.02));
 border-left: 4px solid #C9A84C;
 padding: 24px 28px;
 margin: 32px 0;
 border-radius: 0 12px 12px 0;
 font-style: italic;
}
.article-content hr {
 border: none;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent);
 margin: 48px 0;
}
.read-time-badge {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 font-size: 12px;
 color: rgba(245,240,232,0.6);
 letter-spacing: 0.5px;
}
.article-toc {
 background: rgba(245,240,232,0.5);
 border: 1px solid rgba(201,168,76,0.15);
 border-radius: 12px;
 padding: 24px 28px;
 margin: 0 0 40px;
}
.article-toc-title {
 font-family: 'Cormorant Garamond', serif;
 font-size: 16px;
 font-weight: 700;
 color: #8B1A1A;
 margin-bottom: 12px;
 text-transform: uppercase;
 letter-spacing: 1px;
}
.article-toc ol {
 list-style: none;
 counter-reset: toc;
 padding: 0;
 margin: 0;
}
.article-toc li {
 counter-increment: toc;
 padding: 6px 0;
 border-bottom: 1px solid rgba(0,0,0,0.04);
}
.article-toc li:last-child { border-bottom: none; }
.article-toc li::before {
 content: counter(toc) ".";
 color: #C9A84C;
 font-weight: 700;
 margin-right: 8px;
}
.article-toc a {
 color: #444;
 text-decoration: none;
 font-size: 14px;
 transition: color 0.2s;
}
.article-toc a:hover { color: #8B1A1A; }
@keyframes shimmer {
 0% { background-position: -200% 0; }
 100% { background-position: 200% 0; }
}
.skeleton {
 background: linear-gradient(90deg, rgba(201,168,76,0.06) 25%, rgba(201,168,76,0.12) 50%, rgba(201,168,76,0.06) 75%);
 background-size: 200% 100%;
 animation: shimmer 1.5s ease-in-out infinite;
 border-radius: 8px;
}
.skeleton-text { height: 14px; margin-bottom: 10px; border-radius: 4px; }
.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }
.skeleton-title { height: 22px; width: 70%; margin-bottom: 14px; border-radius: 6px; }
.skeleton-img { height: 200px; border-radius: 12px; margin-bottom: 16px; }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }
.skeleton-card {
 background: rgba(255,255,255,0.03);
 border: 1px solid rgba(201,168,76,0.08);
 border-radius: 16px;
 padding: 20px;
 overflow: hidden;
}
.social-proof-toast {
 position: fixed;
 bottom: 24px;
 left: 24px;
 background: rgba(26,26,26,0.95);
 backdrop-filter: blur(12px);
 border: 1px solid rgba(201,168,76,0.2);
 border-radius: 12px;
 padding: 14px 20px;
 display: flex;
 align-items: center;
 gap: 12px;
 font-size: 13px;
 color: #F5F0E8;
 z-index: 9990;
 transform: translateY(120%);
 opacity: 0;
 transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 max-width: 340px;
 box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.social-proof-toast.show {
 transform: translateY(0);
 opacity: 1;
}
.social-proof-toast .sp-icon {
 width: 36px; height: 36px;
 background: rgba(201,168,76,0.15);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 18px;
 flex-shrink: 0;
}
.social-proof-toast .sp-text { line-height: 1.4; }
.social-proof-toast .sp-text strong { color: #C9A84C; }
.social-proof-toast .sp-close {
 position: absolute; top: 6px; right: 8px;
 background: none; border: none; color: #666;
 cursor: pointer; font-size: 14px; padding: 4px;
}
@media (max-width: 768px) {
 .social-proof-toast { left: 12px; right: 12px; max-width: none; bottom: 80px; }
}
:focus-visible {
 outline: 3px solid var(--gold, #C9A84C) !important;
 outline-offset: 2px;
 border-radius: 4px;
}
.skip-link:focus {
 top: 0 !important;
 position: fixed !important;
 z-index: 100001 !important;
}
button, a.btn, .nav-link, input[type="submit"],
input[type="button"], .tag-item, .share-btn {
 min-height: 44px;
 min-width: 44px;
}
.sr-only {
 position: absolute !important;
 width: 1px !important;
 height: 1px !important;
 padding: 0 !important;
 margin: -1px !important;
 overflow: hidden !important;
 clip: rect(0, 0, 0, 0) !important;
 white-space: nowrap !important;
 border: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 scroll-behavior: auto !important;
 }
}
@media (prefers-contrast: high) {
 :root {
 --gold: #FFD700;
 --cream: #FFFFFF;
 --maroon: #CC0000;
 }
}
@media print {
 nav, .navbar, footer, .cookie-banner, .crypto-ticker, .events-ticker,
 button, .btn, [onclick], .floating-share, #postThemeToggle,
 #backToTop, #backToTopPro, .reactions-bar, .comment-section { display: none !important; }
 body { background: #fff !important; color: #000 !important; }
 * { box-shadow: none !important; }
}
/* ═══════════════════════════════════════════════════
 GLOBAL POLISH V2 — Modern Enhancements
 2026-03-26
═══════════════════════════════════════════════════ */
:root {
 --space-xs: 4px;
 --space-sm: 8px;
 --space-md: 16px;
 --space-lg: 24px;
 --space-xl: 32px;
 --space-2xl: 48px;
 --space-3xl: 64px;
 --space-4xl: 96px;
 --space-5xl: 128px;
 --radius-sm: 8px;
 --radius-md: 12px;
 --radius-lg: 16px;
 --radius-xl: 20px;
 --radius-full: 50px;
 --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
 --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes pageEnter {
 from {
 opacity: 0;
 transform: translateY(8px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}
body {
 animation: pageEnter 0.5s var(--ease-out-expo) both;
}
@view-transition {
 navigation: auto;
}
::view-transition-old(root) {
 animation: 0.3s ease-out both fade-out;
}
::view-transition-new(root) {
 animation: 0.3s ease-out both fade-in;
}
@keyframes fade-out {
 from { opacity: 1; }
 to { opacity: 0; }
}
@keyframes fade-in {
 from { opacity: 0; }
 to { opacity: 1; }
}
:focus-visible {
 outline: 3px solid rgba(201,168,76,0.6) !important;
 outline-offset: 3px;
 border-radius: var(--radius-sm);
 transition: outline-offset 0.15s ease;
}
:focus-visible:active {
 outline-offset: 1px;
}
.section-dark :focus-visible,
.hero :focus-visible,
.contact-section :focus-visible {
 outline-color: rgba(201,168,76,0.8) !important;
 box-shadow: 0 0 0 6px rgba(201,168,76,0.1);
}
.section-light :focus-visible {
 outline-color: rgba(139,26,26,0.5) !important;
 box-shadow: 0 0 0 6px rgba(139,26,26,0.06);
}
.mobile-nav-overlay {
 transition: opacity 0.4s var(--ease-out-expo),
 visibility 0.4s;
}
.mobile-menu {
 transition: transform 0.4s var(--ease-out-expo),
 opacity 0.4s var(--ease-out-expo);
}
.mobile-menu.open {
 transform: translateX(0);
 opacity: 1;
}
.mobile-menu:not(.open) {
 transform: translateX(100%);
 opacity: 0;
}
.mobile-menu .nav-link {
 opacity: 0;
 transform: translateX(20px);
 transition: opacity 0.3s ease, transform 0.3s var(--ease-out-expo);
}
.mobile-menu.open .nav-link {
 opacity: 1;
 transform: translateX(0);
}
.mobile-menu.open .nav-link:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.open .nav-link:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu.open .nav-link:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.open .nav-link:nth-child(4) { transition-delay: 0.2s; }
.mobile-menu.open .nav-link:nth-child(5) { transition-delay: 0.25s; }
.mobile-menu.open .nav-link:nth-child(6) { transition-delay: 0.3s; }
.mobile-menu.open .nav-link:nth-child(7) { transition-delay: 0.35s; }
.mobile-menu.open .nav-link:nth-child(8) { transition-delay: 0.4s; }
.hamburger-bar {
 transition: transform 0.3s var(--ease-out-expo),
 opacity 0.3s ease,
 width 0.3s ease;
}
button, .btn, [role="button"] {
 transition: transform 0.15s ease, box-shadow 0.3s ease, background 0.3s ease;
}
button:active, .btn:active, [role="button"]:active {
 transform: scale(0.97);
 transition-duration: 0.05s;
}
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
img { filter: none; opacity: 1; }
@media (max-width: 768px) {
 :root {
 --space-2xl: 36px;
 --space-3xl: 48px;
 --space-4xl: 64px;
 --space-5xl: 80px;
 }
}
@media (max-width: 480px) {
 :root {
 --space-2xl: 28px;
 --space-3xl: 40px;
 --space-4xl: 56px;
 --space-5xl: 64px;
 }
}

/* ── Blog Redesign v2 ── */
.news-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.news-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
.news-card .news-image { transition: transform 0.5s ease; overflow: hidden; }
.news-card:hover .news-image img { transform: scale(1.05); }
.reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, #8B1A1A, #C9A84C); z-index: 9999; transition: width 0.1s; }
.article-body h2 { border-left: 3px solid #C9A84C; padding-left: 16px; margin: 32px 0 16px; }
.article-body blockquote { border-left: 3px solid #C9A84C; padding: 16px 24px; background: rgba(201,168,76,0.05); border-radius: 0 8px 8px 0; margin: 24px 0; font-style: italic; }
.article-body pre { background: #1a1a1a; border-radius: 8px; padding: 16px; overflow-x: auto; }
.article-body img { border-radius: 8px; max-width: 100%; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; transition: all 0.2s; border: 1px solid rgba(201,168,76,0.2); }
.share-btn:hover { background: rgba(201,168,76,0.1); border-color: #C9A84C; }