/* =========================================
   BLGN Labs – Enhanced Stylesheet v2
   Top-tier agency design system
   ========================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: #00A3E0; color: white; }

/* PRELOADER */
#preloader { transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s; }
#preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-logo { animation: preloaderPulse 1.5s ease-in-out infinite; }
.preloader-fill { animation: preloaderFill 2s ease-in-out forwards; }
@keyframes preloaderPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
}
@keyframes preloaderFill { from { width: 0; } to { width: 100%; } }

/* NAVBAR */
#navbar { background: transparent; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
#navbar.scrolled {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}
#navbar.scrolled .nav-text-color { color: #0F1B2D; }
#navbar.scrolled .nav-link { color: #64748b; }
#navbar.scrolled .nav-link:hover { color: #0F1B2D; }
#navbar.scrolled #mobile-toggle { color: #0F1B2D; }
#navbar.scrolled + #mobile-menu,
#navbar.scrolled #mobile-menu { background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(24px); }
#navbar.scrolled #mobile-menu .mobile-link { color: #334155; border-color: rgba(0,0,0,0.06); }
#navbar.scrolled #mobile-menu .mobile-link:hover { color: #0F1B2D; }

/* HERO PARTICLES */
.hero-particles { pointer-events: none; }
.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: particleFloat linear infinite;
}
@keyframes particleFloat {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 0.5; }
    100% { transform: translateY(-100px) rotate(720deg); opacity: 0; }
}

/* TYPEWRITER */
#typewriter-cursor {
    font-weight: 100;
    animation: blink 0.8s infinite;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ANIMATIONS */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes slideInFromBottom {
    from { opacity: 0; transform: translateY(80px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-fade-in-up { opacity: 0; animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-fade-in-left { opacity: 0; animation: fadeInLeft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-fade-in-right { opacity: 0; animation: fadeInRight 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-scale-in { opacity: 0; animation: scaleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* SCROLL REVEAL — stagger support */
.reveal-up {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up.revealed { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-60px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-left.revealed { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.85); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-scale.revealed { opacity: 1; transform: scale(1); }

/* FLOATING */
.floating-animation { animation: float 6s ease-in-out infinite; }
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* HERO enhanced */
#hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 200px;
    background: linear-gradient(to bottom, transparent, #060D18);
    z-index: 3;
    pointer-events: none;
}

/* MARQUEE */
.marquee-track { animation: marquee 20s linear infinite; width: max-content; }
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* SERVICE CARDS — enhanced */
.service-card {
    position: relative;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--card-accent, #00A3E0), transparent);
    opacity: 0;
    transition: opacity 0.5s;
}
.service-card:hover::before { opacity: 1; }
.service-card::after {
    content: '';
    position: absolute;
    bottom: -50%; right: -50%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, var(--card-accent, #00A3E0) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s;
}
.service-card:hover::after { opacity: 0.03; }
.service-card:nth-child(1) { --card-accent: #00A3E0; }
.service-card:nth-child(2) { --card-accent: #FF5722; }
.service-card:nth-child(3) { --card-accent: #7CB342; }
.service-card:nth-child(4) { --card-accent: #a855f7; }

/* MOCKUP ANIMATIONS */
.mockup-browser { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.mockup-browser:hover { transform: translateY(-4px); }

.mock-card {
    opacity: 0;
    transform: translateY(12px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.mock-card.animated { opacity: 1; transform: translateY(0); }

.mock-msg {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mock-msg.animated { opacity: 1; transform: translateY(0) scale(1); }

.mock-chart-bar {
    transition: height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.mock-bar {
    transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.cal-event {
    animation: calPulse 3s ease-in-out infinite;
}
@keyframes calPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* PROCESS */
.process-step { position: relative; }
.process-step::after {
    content: '';
    position: absolute;
    top: 40px; right: -40px;
    width: 80px; height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0.15), transparent);
    display: none;
}
@media (min-width: 1024px) {
    .process-step:not(:last-child)::after { display: block; }
}

/* COUNTER */
.counter { font-variant-numeric: tabular-nums; }

/* STAT CARDS hover */
.stat-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* CHAT WIDGET */
#chat-window.active { display: block !important; transform: scale(1); opacity: 1; }
#chat-messages::-webkit-scrollbar { width: 3px; }
#chat-messages::-webkit-scrollbar-track { background: transparent; }
#chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.chat-bubble {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.55;
    animation: chatBubble 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.chat-bubble.visitor {
    background: linear-gradient(135deg, #00A3E0, #0090c4);
    color: white;
    margin-left: auto;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 163, 224, 0.15);
}
.chat-bubble.admin, .chat-bubble.bot {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.08);
    border-bottom-left-radius: 4px;
}
@keyframes chatBubble {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.typing-indicator {
    display: flex; gap: 5px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    width: fit-content;
}
.typing-indicator span {
    width: 6px; height: 6px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: typing 1.4s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* FORM INPUT GLOW */
.hero-input:focus { box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.15); }
button[type="submit"]:active { transform: scale(0.97); }

/* CURSOR GLOW */
.cursor-glow {
    position: fixed;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,163,224,0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s;
}

/* D3 CHARTS */
#chart-growth svg, #chart-services svg { overflow: visible; }
.chart-bar { transition: opacity 0.3s; }
.chart-bar:hover { opacity: 0.8; }

/* SELECT ARROW FIX */
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
select option { background: #0F1B2D; color: white; }

/* SECTION DIVIDER */
.section-glow {
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.5;
    pointer-events: none;
}

/* ═══ RESPONSIVE ═══ */

/* Tablet (768px) */
@media (max-width: 768px) {
    #chat-window { width: calc(100vw - 32px); right: -8px; bottom: 72px; }
    #hero h1 { font-size: 2.8rem; }
    section { padding-top: 5rem; padding-bottom: 5rem; }
    #hero { min-height: 100svh; }
    .about-visual .absolute { display: none; }

    /* CRM dashboard mockup: hide pipeline on tablet, simplify */
    #mock-dashboard .grid-cols-5 { display: none; }
}

/* Mobile (640px) */
@media (max-width: 640px) {
    /* Navbar */
    #navbar .max-w-7xl { padding-left: 1rem; padding-right: 1rem; }
    #navbar img { width: 3rem; height: 3rem; }

    /* Hero */
    #hero h1 { font-size: 2.4rem; }
    #hero .max-w-5xl { padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 7rem; }
    .hero-particles { display: none; }

    /* Hero stats row — 2x2 grid on small */
    #hero .flex.items-center.justify-center.gap-6 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    #hero .flex.items-center.justify-center.gap-6 .w-px { display: none; }

    /* Form grids — stack on mobile */
    #hero-form .grid-cols-2,
    #contact-form .grid-cols-2,
    #start-project .grid-cols-2 { grid-template-columns: 1fr; }
    form .grid-cols-2 { grid-template-columns: 1fr; }

    /* Showcase phone mockup */
    .w-\[180px\] { width: 140px; }

    /* Showcase calendar + phone: stack vertically */
    #work .flex.gap-5 { flex-direction: column; align-items: center; }
    #work .flex.gap-5 .max-w-\[380px\] { max-width: 100%; }
    #work .flex.gap-5 .w-\[180px\],
    #work .flex.gap-5 .w-\[140px\] { width: 200px; margin-top: 0; }

    /* CRM dashboard stat cards: 2x2 */
    #mock-dashboard .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
    #mock-dashboard .grid-cols-5 { display: none; }

    /* Sections padding */
    section { padding-top: 4rem; padding-bottom: 4rem; }
    #start-project { padding-top: 4rem; padding-bottom: 4rem; }

    /* Section headings */
    .font-display.text-4xl { font-size: 1.875rem; }

    /* Footer */
    footer .flex-col.md\:flex-row { gap: 1.5rem; }

    /* About grid items */
    .grid-cols-2.gap-6 { gap: 1rem; }
}

/* Very small (480px) */
@media (max-width: 480px) {
    #hero h1 { font-size: 2rem; line-height: 1.1; }
    #hero .text-lg { font-size: 0.9rem; }

    /* Process step icons */
    .process-step .w-20 { width: 3.5rem; height: 3.5rem; }
    .process-step .w-8 { width: 1.5rem; height: 1.5rem; font-size: 0.65rem; }
    .process-step .text-2xl { font-size: 1.125rem; }

    /* CTAs — stack on very small */
    #hero .flex-wrap.gap-4 { flex-direction: column; align-items: stretch; }
    #hero .flex-wrap.gap-4 a { text-align: center; justify-content: center; }

    /* Chat widget positioning */
    #chat-widget { bottom: 12px; right: 12px; }
    #chat-window { bottom: 60px; }
    #chat-toggle { width: 48px; height: 48px; }
    #chat-toggle i { font-size: 14px; }

    /* Stat cards — smaller padding */
    .stat-card { padding: 1.25rem; }
    .stat-card .text-4xl { font-size: 1.75rem; }

    /* Service cards */
    .service-card { padding: 1.5rem; }

    /* Form card */
    #start-project .rounded-3xl { padding: 1.5rem; }

    /* Showcase 3 bottom cards */
    #work .grid.lg\:grid-cols-3 { gap: 1rem; }
}

/* GLASS */
.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* GRADIENT TEXT */
.gradient-text {
    background: linear-gradient(135deg, #00A3E0, #7CB342, #FF5722);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* SMOOTH MAGNETIC EFFECT */
.magnetic-area { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

/* LINE DECORATION */
.line-accent {
    position: relative;
}
.line-accent::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0;
    width: 40px; height: 3px;
    background: linear-gradient(90deg, #00A3E0, #7CB342);
    border-radius: 2px;
}