/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* ===== Links ===== */
a { color: #2563eb; text-decoration: underline; cursor: pointer; }
a:visited { color: #7c3aed; }
a:hover { color: #1d4ed8; }
.dark a { color: #60a5fa; }
.dark a:visited { color: #a78bfa; }
.dark a:hover { color: #93c5fd; }

/* ===== <pre> Blocks ===== */
pre {
    font-family: 'Consolas', 'Cascadia Code', 'Fira Code', monospace;
    background: #f8fafc;
    color: #1e293b;
    padding: 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    overflow-x: auto;
    max-width: 100%;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre;
    tab-size: 4;
}
.dark pre { background: #1e293b; color: #e2e8f0; border-color: #334155; }

/* ===== Morphing Blobs ===== */
.morph-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    animation: morph 15s ease-in-out infinite alternate;
}
.morph-delay-2 { animation-delay: -5s; }
.morph-delay-3 { animation-delay: -10s; }

@keyframes morph {
    0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1) rotate(0deg); }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: scale(1.1) rotate(5deg); }
    100% { border-radius: 40% 60% 50% 50% / 40% 50% 60% 50%; transform: scale(0.95) rotate(-3deg); }
}

/* ===== Float-up Animations ===== */
.float-up {
    animation: floatUp 0.6s ease-out forwards;
    opacity: 0; transform: translateY(30px);
}
.float-up:nth-child(1) { animation-delay: 0.1s; }
.float-up:nth-child(2) { animation-delay: 0.2s; }
.float-up:nth-child(3) { animation-delay: 0.3s; }
.float-up:nth-child(4) { animation-delay: 0.4s; }
.float-up:nth-child(5) { animation-delay: 0.5s; }
.float-up:nth-child(6) { animation-delay: 0.6s; }

@keyframes floatUp { to { opacity: 1; transform: translateY(0); } }

/* ===== Screenshot Image ===== */
.screenshot-img {
    max-width: 600px;
    border: 1px solid #ccc;
}

/* ===== Button white text override ===== */
.btn-light-text {
    color: #fff !important;
}
