/* ===== 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;
}

/* ===== ZPL Cloud Banner ===== */
.zpl-banner {
    position: relative;
    isolation: isolate;
    border-radius: 2rem;
    border: 2px solid rgba(56,189,248,.45);
    background: transparent;
    /* The ONLY animated part: a calm, pulsing glow at the edge */
    animation: zpl-glow 3s ease-in-out infinite;
}

@keyframes zpl-glow {
    0%, 100% {
        box-shadow: 0 0 6px rgba(56,189,248,.4), 0 0 14px rgba(59,130,246,.25);
    }
    50% {
        box-shadow: 0 0 16px rgba(99,102,241,.7), 0 0 30px rgba(59,130,246,.5);
    }
}

.zpl-banner .zpl-frame {
    position: relative;
    z-index: 1;
    border-radius: calc(2rem - 2px);
}

/* ZPL Cloud CTA: keep white text on the gradient button in both themes */
.zpl-cta,
.dark .zpl-cta {
    color: #fff !important;
}
.zpl-cta:hover,
.dark .zpl-cta:hover {
    color: #fff !important;
}