:root {
    --color-primary:     #0052CC;
    --color-primary-dk:  #003D99;
    --color-accent:      #00A3BF;
    --color-success:     #36B37E;
    --color-warning:     #FF991F;
    --color-danger:      #DE350B;
    --color-bg:          #FFFFFF;
    --color-surface:     #F4F5F7;
    --color-border:      #DFE1E6;
    --color-text-pri:    #172B4D;
    --color-text-sec:    #6B778C;
    --color-text-dis:    #97A0AF;

    --shadow-sm:  0 1px 2px rgba(9,30,66,0.08);
    --shadow-md:  0 4px 8px rgba(9,30,66,0.10), 0 0 0 1px rgba(9,30,66,0.02);
    --shadow-lg:  0 8px 16px rgba(9,30,66,0.12), 0 0 0 1px rgba(9,30,66,0.02);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 96px;
}

html {
    scroll-behavior: smooth;
}

/* FAQ accordion */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
.faq-answer.open {
    max-height: 200px;
}

/* ── Gradient blob animations ── */
@keyframes blob-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-15px, 15px) scale(0.95); }
}
@keyframes blob-drift-reverse {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-25px, 20px) scale(0.95); }
    66% { transform: translate(20px, -10px) scale(1.05); }
}
.blob-animate {
    animation: blob-drift 12s ease-in-out infinite;
}
.blob-animate-reverse {
    animation: blob-drift-reverse 14s ease-in-out infinite;
}

/* ── Phone mockup float ── */
@keyframes float-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.float-gentle {
    animation: float-gentle 5s ease-in-out infinite;
}

/* ── Pain point icon card hover ── */
.pain-card {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.pain-card:hover {
    transform: translateY(-2px);
}
