/* Sangfy Clean White & Purple-Pink Gradient Aesthetic */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

[x-cloak] {
    display: none !important;
}

:root {
    --brand-primary: #7c3aed;
    --brand-pink: #ec4899;
    --brand-hover: #6d28d9;
    --brand-light: #f5f3ff;
    --slate-dark: #0f172a;
    --slate-body: #334155;
    --slate-muted: #64748b;
    --border-light: #e2e8f0;
    --bg-canvas: #ffffff;
    --bg-subtle: #f8fafc;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--slate-body);
    background-color: var(--bg-canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   SOLID CSS FALLBACKS FOR ALL BRAND BUTTONS & ACCENTS (HOSTING PROOF)
   ========================================================================== */

/* Sangfy Primary Gradient Buttons (Always visible with strong purple-to-pink gradient) */
.btn-sangfy,
a.btn-sangfy,
button.btn-sangfy,
.btn-primary {
    background-color: #7c3aed !important;
    background-image: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: none !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px -2px rgba(124, 58, 237, 0.45) !important;
    transition: all 0.25s ease !important;
}

.btn-sangfy:hover,
a.btn-sangfy:hover,
button.btn-sangfy:hover,
.btn-primary:hover {
    background-color: #6d28d9 !important;
    background-image: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #db2777 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -4px rgba(168, 85, 247, 0.5) !important;
    transform: translateY(-1px) !important;
}

.btn-sangfy *,
a.btn-sangfy *,
button.btn-sangfy * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Brand utility colors fallback if Tailwind JS script fails or config is delayed */
.bg-brand-500 { background-color: #8b5cf6 !important; }
.bg-brand-600 { background-color: #7c3aed !important; }
.bg-brand-700 { background-color: #6d28d9 !important; }
.bg-brand-800 { background-color: #5b21b6 !important; }
.bg-brand-900 { background-color: #4c1d95 !important; }
.bg-brand-50  { background-color: #f5f3ff !important; }
.bg-brand-100 { background-color: #ede9fe !important; }

.text-brand-500 { color: #8b5cf6 !important; }
.text-brand-600 { color: #7c3aed !important; }
.text-brand-700 { color: #6d28d9 !important; }
.text-brand-800 { color: #5b21b6 !important; }
.text-brand-900 { color: #4c1d95 !important; }

.border-brand-500 { border-color: #8b5cf6 !important; }
.border-brand-600 { border-color: #7c3aed !important; }
.border-brand-200 { border-color: #ddd6fe !important; }

.gradient-text {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Crisp 1px border cards with subtle hover lift */
.sangfy-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem; /* 8px low border-radius per plan */
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sangfy-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
}

/* Subtle gradient mesh background for hero */
.hero-glow-bg {
    background: radial-gradient(circle at 50% 0%, rgba(168, 85, 247, 0.08) 0%, rgba(236, 72, 153, 0.04) 35%, rgba(255, 255, 255, 0) 70%);
}

/* Phone Mockup Frame */
.mockup-device {
    border: 10px solid #0f172a;
    border-radius: 36px;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(15, 23, 42, 0.08);
    position: relative;
    background: #0f172a;
    overflow: hidden;
}

.mockup-camera-notch {
    width: 90px;
    height: 18px;
    background: #0f172a;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    z-index: 30;
}

/* Chat bubble styling inside preview */
.chat-bubble-in {
    background-color: #f1f5f9;
    color: #0f172a;
    border-radius: 12px 12px 12px 2px;
}

.chat-bubble-out {
    background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
    color: #ffffff;
    border-radius: 12px 12px 2px 12px;
}

/* Modern Thin Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(168, 85, 247, 0.6);
}
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}