html { 
    scroll-behavior: smooth;
}
.bg-elegant-beige {
    background-color: #fcfaf8;
    background: radial-gradient(circle at top, #fff 0%, #f8fafc 100%);
}
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes float-delayed-1 {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

@keyframes float-delayed-2 {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

.node-box {
    position: absolute;
    font-weight: 700;
    color: #fff;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.node-box:hover, .node-box:focus-visible {
    transform: scale(1.05) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    z-index: 50 !important;
    outline: none;
    ring: 2px solid #00ff66;
}

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-1 { animation: float-delayed-1 5s ease-in-out 1s infinite; }
.animate-float-2 { animation: float-delayed-2 7s ease-in-out 2s infinite; }

.bg-retailer { background-color: #22c55e; } 
.bg-b2b { background-color: #14b8a6; } 
.bg-marketing { background-color: #06b6d4; } 
.bg-marketplace { background-color: #475569; } 
.bg-d2c { background-color: #f59e0b; padding: 1rem 2rem; font-size: 1.25rem; border-radius: 0.75rem; } 

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 10s infinite ease-in-out; }
.animation-delay-2000 { animation-delay: 3s; }
.animation-delay-4000 { animation-delay: 6s; }

.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-[#00ff66] focus:ring-offset-2;
}

.text-outline {
    -webkit-text-stroke: 2px #f3f4f6;
    color: transparent;
}

.group:hover .outline-step-1 { -webkit-text-stroke: 2px #00ff66; color: rgba(0, 255, 102, 0.05); }
.group:hover .outline-step-2 { -webkit-text-stroke: 2px #3b82f6; color: rgba(59, 130, 246, 0.05); } 
.group:hover .outline-step-3 { -webkit-text-stroke: 2px #a855f7; color: rgba(168, 85, 247, 0.05); }

.markdown ol {
    list-style: decimal;
}
.markdown ul {
    list-style: circle;
}
.markdown ul li {
    margin-left: 20px;
}
.markdown h1 {
    font-weight: bold;
    margin: 17px 0;
    font-size: 1.5em;
}
.markdown h2 {
    font-weight: bold;
    margin: 10px 0;
}
@keyframes pulse-dot {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.5; transform: scale(1.5); }
    }
.animate-pulse-dot {
    animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}