/* CSS Reset & Setup */
:root {
    --bg-dark: #10141a;
    --bg-darker: #0b0d12;
    --primary: #00d4ff;
    --primary-glow: rgba(0, 212, 255, 0.5);
    --secondary: #1852b3;
    --text-main: #f0f4f8;
    --text-muted: #8a9bb3;
    --glass-bg: rgba(20, 26, 35, 0.6);
    --glass-border: rgba(0, 212, 255, 0.15);
    --card-hover: rgba(255, 255, 255, 0.06);
    --danger: #ff4757;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 8px;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

.font-outfit { font-family: 'Outfit', sans-serif; }
.font-inter { font-family: 'Inter', sans-serif; }
.font-mono { font-family: monospace; }
.scroll-smooth { scroll-behavior: smooth; }

/* Typography */
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; text-wrap: balance; }
.title-xl { font-size: clamp(2.5rem, 5vw, 4.5rem); letter-spacing: -0.02em; }
.title-lg { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.01em; }
.text-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.glow-text { text-shadow: 0 0 20px var(--primary-glow); }
.glow-text-danger { text-shadow: 0 0 20px rgba(255, 71, 87, 0.4); }
.text-primary { color: var(--primary); }
.text-secondary { color: var(--text-muted); }
.text-danger { color: var(--danger); }
.text-white { color: var(--text-main); }

.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }

/* Utilities */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.max-w-md { max-width: 600px; }
.max-w-lg { max-width: 800px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-10 { margin-top: 2.5rem; } .mt-12 { margin-top: 3rem; } .mt-16 { margin-top: 4rem; }
.mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-10 { margin-bottom: 2.5rem; } .mb-12 { margin-bottom: 3rem; }
.ml-2 { margin-left: 0.5rem; } .mr-2 { margin-right: 0.5rem; } .ml-4 { margin-left: 1rem; } .mr-4 { margin-right: 1rem; } .mr-3 { margin-right: 0.75rem;}
.p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .p-12 { padding: 3rem; }
.pt-8 { padding-top: 2rem; } .pt-16 { padding-top: 4rem; } .pb-4 { padding-bottom: 1rem; } .pb-8 { padding-bottom: 2rem; }
.flex { display: flex; } .flex-col { flex-direction: column; } .grid { display: grid; }
.justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; }
.align-center { align-items: center; } .wrap { flex-wrap: wrap; }
.gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-12 { gap: 3rem; } .gap-16 { gap: 4rem; }
.space-x-4 > * + * { margin-left: 1rem; } .space-y-4 > * + * { margin-top: 1rem; } .space-y-2 > * + * { margin-top: 0.5rem; }
.text-center { text-align: center; }
.bg-dark { background-color: var(--bg-dark); } .bg-darker { background-color: var(--bg-darker); }
.relative { position: relative; } .absolute { position: absolute; } .inset-0 { top:0; left:0; right:0; bottom:0;} .z-10 { z-index: 10; }
.overflow-hidden { overflow: hidden; }
.rounded-full { border-radius: 9999px; } .custom-radius { border-radius: var(--radius-lg); }
.flex-grow { flex-grow: 1; } .d-block { display: block; } .inline { display: inline-block; }
.w-4 { width: 1rem; } .h-4 { height: 1rem; }

/* Grid specific */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.w-50 { width: calc(50% - 2rem); } .w-40 { width: calc(40% - 2rem); }

/* Components */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.border-primary { border-color: var(--primary); }
.border-cyan { border-color: rgba(0, 240, 255, 0.3); }
.border-highlight { border: 1px solid rgba(0, 240, 255, 0.2); box-shadow: 0 0 30px rgba(0, 240, 255, 0.05); }
.border-top-glass { border-top: 1px solid var(--glass-border); }
.border-bottom-glass { border-bottom: 1px solid var(--glass-border); }

a { text-decoration: none; color: inherit; transition: var(--transition); }
li { list-style: none; }

/* Buttons */
.btn {
    display: inline-flex; justify-content: center; align-items: center;
    padding: 0.75rem 1.5rem; font-weight: 600; border-radius: var(--radius-sm);
    transition: var(--transition); cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--primary); color: #000; box-shadow: 0 4px 15px var(--primary-glow); }
.btn-primary:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px var(--primary-glow); }
.btn-outline { background: transparent; color: var(--text-main); border-color: var(--glass-border); backdrop-filter: blur(5px); }
.btn-outline:hover { background: var(--glass-bg); border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1.125rem; }
.btn-xl { padding: 1.25rem 2.5rem; font-size: 1.25rem; border-radius: var(--radius-md); }

/* Badge */
.badge {
    display: inline-flex; align-items: center; padding: 0.5rem 1rem;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 100px;
}

/* Navbar */
.navbar {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 100; padding: 1rem 0;
    transition: var(--transition); border-bottom: 1px solid transparent;
}
.navbar.scrolled {
    background: rgba(5, 8, 18, 0.8); backdrop-filter: blur(20px); border-bottom-color: var(--glass-border);
}
.brand { font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; }
.nav-links { display: flex; gap: 2rem; align-items: center; font-weight: 500; font-size: 0.875rem; }
.nav-links a:hover { color: var(--primary); }

/* Main layout / Sections */
.section { padding: 8rem 0; }

/* Hero */
.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; padding-top: 5rem; }
.hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center; opacity: 0.3; z-index: 1; filter: grayscale(50%) contrast(1.2);
}
.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;
    background: radial-gradient(circle at center, transparent 0%, var(--bg-dark) 80%);
}
.hero-content { position: relative; z-index: 10; padding: 2rem; }

/* Cards */
.card { padding: 2rem; transition: var(--transition); position: relative; overflow: hidden; }
.interactive-card:hover { transform: translateY(-10px); background: var(--card-hover); border-color: rgba(0,240,255,0.2); }
.interactive-card::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(circle at 50% -20%, var(--primary-glow), transparent 60%); opacity: 0; transition: opacity 0.5s ease;
}
.interactive-card:hover::before { opacity: 1; }
.card-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border-radius: var(--radius-sm); margin-bottom: 1.5rem; }
.alert-icon { color: var(--danger); background: rgba(255, 71, 87, 0.1); border: 1px solid rgba(255, 71, 87, 0.2); }

/* Feature List */
.feature-list li { display: flex; align-items: flex-start; margin-bottom: 1.5rem; gap: 1rem; }
.list-icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(0,240,255,0.1); border-radius: 50%; color: var(--primary); }

/* Decorative Backgrounds */
.glow-bg { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: var(--primary-glow); filter: blur(150px); z-index: 0; pointer-events: none; opacity: 0.5; }
.glow-bg.top-right { top: -100px; right: -100px; }
.glow-bg.bottom-left { bottom: -100px; left: -100px; }
.radial-glow { box-shadow: inset 0 0 50px rgba(0, 240, 255, 0.05), 0 0 80px rgba(0, 240, 255, 0.05); }

/* Timeline */
.timeline { padding-left: 24px; }
.timeline-line { position: absolute; left: 40px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--primary), transparent); }
.timeline-item { position: relative; padding-left: 3rem; }
.timeline-dot { position: absolute; left: 0; top: 0; width: 32px; height: 32px; background: var(--bg-dark); border: 2px solid var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--primary); box-shadow: 0 0 15px var(--primary-glow); z-index: 2; transform: translateX(-16px); }
.timeline-content { padding: 1.5rem; border-radius: var(--radius-md); }

/* Matrix Nodes Decoration */
.node-center { width: 60px; height: 60px; background: var(--primary); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; box-shadow: 0 0 30px var(--primary-glow); position: relative; z-index: 5; }
.node { position: absolute; }
.node-1 { top: 0; left: 20%; background: var(--glass-bg); padding: 12px; border-radius: 50%; border: 1px solid var(--primary); color: var(--primary); z-index: 5; }
.node-2 { top: 50%; right: 10%; background: var(--glass-bg); padding: 12px; border-radius: 50%; border: 1px solid var(--primary); color: var(--primary); z-index: 5; }
.node-3 { bottom: 0; left: 30%; background: var(--glass-bg); padding: 12px; border-radius: 50%; border: 1px solid var(--primary); color: var(--primary); z-index: 5; }

/* Chat Simulator UI */
.chat-simulator { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(0,240,255,0.2); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.avatar { width: 40px; height: 40px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.status-dot { width: 10px; height: 10px; background: #2ed573; border-radius: 50%; border: 2px solid var(--bg-dark); }
.pulse-dot-sm { width: 8px; height: 8px; background: #2ed573; border-radius: 50%; animation: pulse-green 2s infinite; display: inline-block; }
.chat-msg { max-width: 80%; padding: 0.8rem 1rem; border-radius: 18px; line-height: 1.4; animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; opacity: 0; transform: scale(0.9) translateY(10px); }
.msg-bot { background: rgba(255,255,255,0.05); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg-user { background: rgba(0, 240, 255, 0.1); color: var(--primary); align-self: flex-end; border-bottom-right-radius: 4px; border: 1px solid rgba(0, 240, 255, 0.2); }
.typing-indicator span { display: inline-block; width: 6px; height: 6px; background: var(--text-muted); border-radius: 50%; margin: 0 2px; animation: bounce 1.4s infinite ease-in-out both; }
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

/* Animations */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(46, 213, 115, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(46, 213, 115, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 213, 115, 0); } }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
@keyframes pop-in { to { opacity: 1; transform: scale(1) translateY(0); } }
.pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Scroll reveal classes */
.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-in { opacity: 0; transition: opacity 1s ease-out; }
.fade-in.visible { opacity: 1; }
.fade-right { opacity: 0; transform: translateX(-30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-left { opacity: 0; transform: translateX(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-right.visible, .fade-left.visible { opacity: 1; transform: translateX(0); }

.delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.2s; } .delay-3 { transition-delay: 0.3s; } .delay-4 { transition-delay: 0.4s; } .delay-5 { transition-delay: 0.5s; }

/* Language Toggle */
.lang-btn { text-decoration: none; padding: 4px 8px; font-weight: 600; transition: var(--transition); border-radius: 12px; }
.lang-btn.active { background: var(--primary); color: #000; box-shadow: 0 0 10px var(--primary-glow); }
.lang-btn:not(.active):hover { color: var(--primary); }

/* Responsive adjustments */
@media (max-width: 992px) {
    .w-50, .w-40 { width: 100%; }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .d-none-sm { display: none; }
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .section { padding: 4rem 0; }
    .hero { min-height: 80vh; padding-top: 8rem; }
    .title-xl { font-size: 2.5rem; }
    .nav-links.d-none-md { display: none; }
}

/* ====== Social Proof Marquee ====== */
@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* ====== Botpress Pulse Tooltip ====== */
.bot-tooltip {
    position: fixed;
    bottom: 35px;
    right: 90px;
    background: rgba(0, 212, 255, 0.15);
    border: 1px solid rgba(0, 212, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: white;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 9999;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.bot-tooltip:hover {
    background: rgba(0, 212, 255, 0.25);
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.4);
    transform: scale(1.05); /* slightly bigger on hover */
}

.bot-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -7px;
    margin-top: -7px;
    border-width: 7px 0 7px 7px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(0, 212, 255, 0.4);
}

.animate-bounce-horizontal {
    animation: bounce-horizontal 2.5s infinite ease-in-out;
}

@keyframes bounce-horizontal {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-15px); box-shadow: 0 0 30px rgba(0, 212, 255, 0.5); }
}

@media (max-width: 768px) {
    .bot-tooltip {
        display: none !important;
    }
}