html { scroll-behavior: smooth; }

/* ---- Reveal-on-scroll ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---- Floating orbs ---- */
@keyframes float {
    0%, 100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(24px,-30px) scale(1.06); }
}
.animate-float { animation: float 10s ease-in-out infinite; }
.animate-float-delayed { animation: float 13s ease-in-out infinite; animation-delay: 1.5s; }

/* ---- Animated gradient text ---- */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.animate-gradient { background-size: 200% 200%; animation: gradientShift 6s ease infinite; }

/* ---- Pulse glow ---- */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.35); }
    50% { box-shadow: 0 0 0 10px rgba(59,130,246,0); }
}
.animate-pulse-glow { animation: pulseGlow 2.5s ease-in-out infinite; }

/* ---- Card hover ---- */
.card-hover { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }

/* ---- Industry slider dots ---- */
.industry-dot {
    width: 8px; height: 8px; border-radius: 9999px; background: #D8DCE3; border: none; padding: 0; cursor: pointer;
    transition: width .35s ease, background-color .35s ease;
}
.industry-dot.is-active { width: 24px; background: #0F6CBD; }
@media (prefers-reduced-motion: reduce) {
    #industry-slides { transition: none !important; }
}
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -18px rgba(15,108,189,0.25); border-color: #CBD5E1; }

/* ---- Nav underline ---- */
.nav-link { position: relative; padding-bottom: 2px; }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; border-radius: 2px; background: #0F6CBD; transition: width .25s ease; }
.nav-link:hover::after { width: 100%; }
.nav-active { color: #111827; font-weight: 600; }
.nav-active::after { width: 100%; }

/* ---- Dot grid background ---- */
.dot-grid { background-image: radial-gradient(circle, rgba(15,108,189,0.18) 1px, transparent 1px); background-size: 26px 26px; }

/* ---- Quick-pick chips (contact page) ---- */
.quick-pick.is-active { border-color: #0F6CBD; background: rgba(15,108,189,0.08); color: #0F6CBD; }

/* ---- Mobile nav ---- */
.mobile-nav { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.mobile-nav.open { max-height: 400px; }

/* =====================================================
   LIGHT B2B THEME — the cyberpunk HUD/scanline/glitch layer
   is retired; these selectors stay defined (many pages still
   carry the class names) but render as quiet, professional
   surfaces: soft shadows and hairline borders, no glow/scan FX.
   ===================================================== */

/* Scanline overlay retired for the light theme — no-op */
.scanline-overlay { display: none; }

/* "corner-brackets" now just a hook for a soft resting shadow;
   the HUD bracket marks are gone. */
.corner-brackets { position: relative; box-shadow: 0 1px 2px rgba(16,24,40,0.04); }
.corner-brackets::before, .corner-brackets::after { content: none; }

/* Glitch effect retired — headline renders as plain, legible text */
.glitch::before, .glitch::after { content: none; }

/* Terminal typing cursor retired */
.typing-cursor::after { content: none; }

/* Soft brand-blue ring used sparingly on primary CTAs / featured boxes */
.neon-border { border: 1px solid rgba(15,108,189,.25); box-shadow: 0 8px 24px -12px rgba(15,108,189,.35); }

/* Simple fade-up used for accordions / dropdowns */
.accordion-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.accordion-body.open { max-height: 300px; }

/* Animated circuit-line hero background retired for the light theme;
   mountTechLines() no-ops in main.js, so .tech-lines-mount stays empty. */

/* ---- AutoMind Assistant chat widget ----
   Visibility is gated purely by Tailwind's .hidden (display:none) — no
   custom max-height/opacity toggle class, which was proving unreliable
   in some real browsers. The pop-in below is a CSS *animation*, which
   auto-plays whenever the element re-enters the render tree (i.e. every
   time .hidden is removed), so it still gets a nice open effect without
   any of the old cascade fragility. */
.chat-panel {
    position: fixed; left: 20px; bottom: 92px; width: min(320px, calc(100vw - 40px));
    background: #FFFFFF; border: 1px solid #E4E7EC; border-radius: 16px;
    box-shadow: 0 16px 40px -12px rgba(16,24,40,0.18);
    z-index: 41; animation: chatPopIn .22s ease;
}
@keyframes chatPopIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* ---- Solid primary CTA, rounded pill (used on the most prominent buttons) ---- */
.btn-gradient {
    background: #0F6CBD; border-radius: 999px;
    transition: filter .25s ease, transform .2s ease, box-shadow .25s ease;
    box-shadow: 0 8px 20px -8px rgba(15,108,189,0.45);
}
.btn-gradient:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(15,108,189,0.55); }

/* ---- Eyebrow gradient accent bar ---- */
.eyebrow-bar { display: inline-block; width: 36px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #0F6CBD, #7C3AED); margin-bottom: 10px; }

.chat-log { max-height: 260px; overflow-y: auto; }
@media (max-width: 640px) { .chat-panel { bottom: 172px; left: 12px; } }

/* ---- WhatsApp bot demo mockup (illustrative UI, not a real conversation) ---- */
.wa-demo-phone {
    width: 100%; max-width: 300px; margin: 0 auto; background: #0b141a;
    border: 8px solid #111; border-radius: 28px; overflow: hidden;
    box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
}
.wa-demo-header { background: #202c33; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
.wa-demo-body { background: #0b141a; background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 14px 14px; padding: 14px 10px; min-height: 320px; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
.wa-bubble { max-width: 82%; padding: 7px 10px; border-radius: 8px; font-size: 11.5px; line-height: 1.4; opacity: 0; transform: translateY(8px) scale(.98); animation: waBubbleIn .45s ease forwards; animation-play-state: paused; }
.wa-demo-playing .wa-bubble { animation-play-state: running; }
.wa-bubble.in { align-self: flex-start; background: #202c33; color: #e9edef; border-top-left-radius: 2px; }
.wa-bubble.out { align-self: flex-end; background: #005c4b; color: #e9edef; border-top-right-radius: 2px; }
@keyframes waBubbleIn { to { opacity: 1; transform: translateY(0) scale(1); } }