/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0d0621; }
::-webkit-scrollbar-thumb { background: #6d10d9; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #8326f5; }

/* ─── Global ─────────────────────────────────────────────── */
html, body   { overflow-x: hidden; max-width: 100%; }
img          { max-width: 100%; height: auto; }
::selection  { background-color: rgba(130, 38, 245, 0.35); color: #fff; }
:focus-visible { outline: 2px solid #8326f5; outline-offset: 3px; border-radius: 6px; }

/* ─── Typography ─────────────────────────────────────────── */
pre code {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.8rem;
    line-height: 1.7;
}

/* ─── Hero entrance animations ───────────────────────────── */
@keyframes heroBgSettle    { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes heroFadeZoomIn  { from { opacity: 0; transform: scale(0.97) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes heroFadeOnly    { from { opacity: 0; } to { opacity: 1; } }

.hero-bg-anim       { animation: heroBgSettle   2.4s ease-out                                   both; }
.hero-content-anim  { animation: heroFadeZoomIn 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s  both; }
.hero-card-anim     { animation: heroFadeZoomIn 2s   cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.45s both; }
.hero-notif-anim-1  { animation: heroFadeOnly   1.4s ease-out                              1.3s  both; }
.hero-notif-anim-2  { animation: heroFadeOnly   1.4s ease-out                              1.7s  both; }

/* ─── Header ─────────────────────────────────────────────── */
#header-bg { transition: opacity 0.3s ease; }

/* ─── Scroll-to-top button ───────────────────────────────── */
#scroll-top              { transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease; }
#scroll-top:hover        { box-shadow: 0 0 24px rgba(130, 38, 245, 0.55); transform: translateY(-2px) !important; }
#scroll-top:active       { transform: translateY(0) scale(0.95) !important; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
    section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

@media (max-width: 360px) {
    h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.5rem  !important; }
}