body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.bg-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background-size: 40px 40px;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}
.dark .bg-grid {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

.ambient-blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    z-index: -1;
    opacity: 0.5;
    animation: float 12s infinite ease-in-out alternate;
    pointer-events: none;
}
.dark .ambient-blob {
    opacity: 0.25;
}

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, -40px) scale(1.15); }
}

.sparkle-particle {
    position: fixed;
    font-size: 1.5rem;
    z-index: -1;
    opacity: 0;
    animation: float-up 8s infinite linear;
    pointer-events: none;
}
@keyframes float-up {
    0% { transform: translateY(100vh) scale(0.5); opacity: 0; }
    20% { opacity: 0.4; }
    80% { opacity: 0.4; }
    100% { transform: translateY(-20vh) scale(1.2); opacity: 0; }
}

.text-gradient {
    background: linear-gradient(135deg, #fe2c55 0%, #ff8a00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dark .text-gradient {
    background: linear-gradient(135deg, #fe2c55 0%, #ffc107 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.phone-mockup {
    width: 280px;
    height: 580px;
    border-radius: 40px;
    border: 12px solid #111;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(254, 44, 85, 0.2);
    background-color: #000;
}
.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 25px;
    background-color: #111;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    z-index: 10;
}

@keyframes soft-float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}
.animate-soft-float {
    animation: soft-float 6s ease-in-out infinite;
}

.smooth-transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-border-glow {
    position: relative;
}
.ai-border-glow::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 1.5rem;
    background: linear-gradient(45deg, #25f4ee, #fe2c55, #ff8a00, #25f4ee);
    background-size: 400%;
    z-index: -1;
    animation: glowing 8s linear infinite;
    opacity: 0.5;
}
@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}