/* AdsPilot Base Styles */

/* CSS Variables */
:root {
    --fresh-teal: #0d9488;
    --fresh-teal-light: #14b8a6;
    --coral: #f97316;
    --coral-light: #fb923c;
    --cream: #fefdfb;
    --cream-dark: #f8f6f3;
    --slate: #334155;
    --slate-light: #64748b;
    --slate-lighter: #94a3b8;
}

/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Outfit', sans-serif;
    background: var(--cream);
    color: var(--slate);
    overflow-x: hidden;
}

/* Floating Blob Shapes */
.blob-1 {
    position: fixed;
    width: 600px;
    height: 600px;
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.08) 0%, rgba(20, 184, 166, 0.04) 100%);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    filter: blur(40px);
    animation: blob-float 20s ease-in-out infinite;
    z-index: 0;
}

.blob-2 {
    position: fixed;
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.06) 0%, rgba(251, 146, 60, 0.03) 100%);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    filter: blur(40px);
    animation: blob-float 25s ease-in-out infinite reverse;
    z-index: 0;
}

.blob-3 {
    position: fixed;
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.05) 0%, rgba(249, 115, 22, 0.03) 100%);
    border-radius: 50% 50% 30% 70% / 50% 70% 30% 50%;
    filter: blur(30px);
    animation: blob-float 18s ease-in-out infinite;
    z-index: 0;
}

@keyframes blob-float {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    25% { transform: translate(30px, -30px) rotate(5deg) scale(1.02); }
    50% { transform: translate(-20px, 20px) rotate(-5deg) scale(0.98); }
    75% { transform: translate(20px, 10px) rotate(3deg) scale(1.01); }
}

/* Soft Card Styles */
.soft-card {
    background: white;
    border-radius: 24px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.03),
        0 10px 20px -5px rgba(0, 0, 0, 0.04),
        0 25px 50px -12px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.soft-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 8px 12px -2px rgba(0, 0, 0, 0.04),
        0 20px 40px -8px rgba(0, 0, 0, 0.06),
        0 40px 80px -20px rgba(0, 0, 0, 0.08);
}

/* Primary Button */
.btn-primary {
    background: linear-gradient(135deg, var(--fresh-teal) 0%, var(--fresh-teal-light) 100%);
    color: white;
    padding: 16px 32px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(13, 148, 136, 0.4);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Secondary Button */
.btn-secondary {
    background: white;
    color: var(--slate);
    padding: 16px 32px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 16px;
    border: 2px solid rgba(51, 65, 85, 0.1);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-secondary:hover {
    border-color: var(--fresh-teal);
    color: var(--fresh-teal);
    transform: translateY(-2px);
}

/* Animations */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slide-right {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-fade-up {
    animation: fade-up 0.8s ease forwards;
}

.animate-fade-in {
    animation: fade-in 0.8s ease forwards;
}

.delay-1 { animation-delay: 0.1s; opacity: 0; }
.delay-2 { animation-delay: 0.2s; opacity: 0; }
.delay-3 { animation-delay: 0.3s; opacity: 0; }
.delay-4 { animation-delay: 0.4s; opacity: 0; }
.delay-5 { animation-delay: 0.5s; opacity: 0; }
.delay-6 { animation-delay: 0.6s; opacity: 0; }

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, var(--fresh-teal) 0%, var(--coral) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Navigation Glass Effect */
.nav-glass {
    background: rgba(254, 253, 251, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--cream-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--slate-lighter);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--slate-light);
}