html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* Header link colors: light (over dark hero) vs scrolled (solid white bg) */
#site-header .hdr-link,
#site-header .hdr-text { color: rgba(255,255,255,.9); }
#site-header .hdr-link:hover { color: #fff; background: rgba(255,255,255,.1); }
#site-header.is-scrolled { background: rgba(255,255,255,.97); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
#site-header.is-scrolled .hdr-link,
#site-header.is-scrolled .hdr-text { color: #111827; }
#site-header.is-scrolled .hdr-link:hover { background: rgba(0,0,0,.04); }

.hero-emoji { position: absolute; opacity: 0; pointer-events: none; user-select: none; animation: floatUp 9s linear infinite; }
@keyframes floatUp { 0% { transform: translateY(100vh); opacity: 0; } 10% { opacity: .35; } 90% { opacity: .35; } 100% { transform: translateY(-10vh); opacity: 0; } }

.fade-up { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.fade-up.in-view { opacity: 1; transform: translateY(0); }

.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer > div { overflow: hidden; }

.code-tab.active { color: #fff; border-color: #8b5cf6; }