/* ================================================================
   Copious IT — AI Agents Business Automation Page
   ================================================================
   Shared stylesheet for:
     ai-agents-business-automation-vancouver.html
     ai-agents-business-automation-vancouver/index.html

   Extracted from 2 identical inline <style> blocks. Load order (head):
   Tailwind CDN → css/ai-agents.css.

   ------------------------------------------------------------------
   CHEAT SHEET — COLORS & FONTS (AI Agents page)
   ------------------------------------------------------------------
   BACKGROUNDS
     --ink        #020617   page background (near-black navy)
     --ink-2      #0f172a   scrolled nav surface

   TEXT
     --text       #ffffff   headings / emphasis
     --muted      #94a3b8   body copy, FAQ answers

   BRAND (cyan)
     --brand      #00b7e3   particles, links, hovers
     --brand-2    #1abbe6   lighter cyan

   BORDERS       rgba(51,65,85,.5)   nav/FAQ/banner hairlines
   PARTICLES     #00b7e3   2–4px dots floating in hero

   FONTS         'Inter' (Google Fonts), fallback sans-serif
   ================================================================ */

/* ------------------------------------------------------------------
   RESET — clear default margins/padding, sane box-sizing
------------------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: #020617;        /* --ink    */
    color: #fff;                /* --text   */
    overflow-x: hidden;
}

/* ------------------------------------------------------------------
   SCROLLBAR — slim cyan thumb on dark track (WebKit)
------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0f172a;        /* --ink-2  */
}
::-webkit-scrollbar-thumb {
    background: #00b7e3;        /* --brand  */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #1abbe6;        /* --brand-2 */
}

/* ------------------------------------------------------------------
   HERO — animated diagonal gradient background
------------------------------------------------------------------- */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.hero-gradient {
    background: linear-gradient(
        -45deg,
        #020617,   /* --ink    */
        #0f172a,   /* --ink-2  */
        #002040,   /* deep navy */
        #001525,   /* deepest navy */
        #0f172a,   /* --ink-2  */
        #020617    /* --ink    */
    );
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
}

/* ------------------------------------------------------------------
   FLOATING PARTICLES — small cyan dots drifting in the hero
------------------------------------------------------------------- */
@keyframes particleFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    50%      { transform: translateY(-30px) scale(1.2); opacity: 0.7; }
}
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00b7e3;        /* --brand */
    border-radius: 50%;
    animation: particleFloat 6s ease-in-out infinite;
}
.particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { top: 60%; left: 25%; animation-delay: 1s; }
.particle:nth-child(3) { top: 30%; left: 70%; animation-delay: 2s; }
.particle:nth-child(4) { top: 75%; left: 85%; animation-delay: 0.5s; }
.particle:nth-child(5) { top: 45%; left: 50%; animation-delay: 3s; }
.particle:nth-child(6) { top: 85%; left: 35%; animation-delay: 1.5s; }

/* Neural-network pulse nodes */
@keyframes pulse-node {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}
.node-pulse {
    animation: pulse-node 3s ease-in-out infinite;
}

/* ------------------------------------------------------------------
   SECTION LINE — cyan gradient hairline between sections
------------------------------------------------------------------- */
.section-line {
    height: 1px;
    background: linear-gradient(to right, transparent, #00b7e3, transparent);
    margin: 0 auto;
    max-width: 80%;
}

/* ------------------------------------------------------------------
   SCROLL-REVEAL — elements fade/slide in on scroll (.visible by JS)
------------------------------------------------------------------- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

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

/* ------------------------------------------------------------------
   CARD HOVER — lift + cyan glow
------------------------------------------------------------------- */
.card-hover {
    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.5s,
        box-shadow 0.5s;
}
.card-hover:hover {
    transform: translateY(-8px);
    border-color: rgba(0,183,227,0.3);
    box-shadow: 0 20px 60px -15px rgba(0,183,227,0.15);
}

/* Reason numbers — faint cyan gradient numerals */
.reason-number {
    background: linear-gradient(to bottom, rgba(0,183,227,0.25), rgba(0,183,227,0.05));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ------------------------------------------------------------------
   BUTTON SHINE — swept light sheen on hover
------------------------------------------------------------------- */
.btn-shine {
    position: relative;
    overflow: hidden;
}
.btn-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
    transform: rotate(30deg) translateX(-100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-shine:hover::after {
    transform: rotate(30deg) translateX(100%);
}

/* Floating icons */
@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.float-icon {
    animation: floatIcon 4s ease-in-out infinite;
}

/* ------------------------------------------------------------------
   NAV — transition to solid blurred bar once JS adds .scrolled
------------------------------------------------------------------- */
.nav-glass {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-glass.scrolled {
    background: rgba(2,6,23,0.95) !important;
    border-color: rgba(51,65,85,0.5);
}

/* ------------------------------------------------------------------
   MOBILE MENU — right-side slide-in drawer
------------------------------------------------------------------- */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    background-color: #020617 !important;   /* --ink */
}
.mobile-menu.open {
    transform: translateX(0);
}

/* ------------------------------------------------------------------
   CONTACT OVERLAY — modal dialog (dim backdrop + centered card)
------------------------------------------------------------------- */
.contact-overlay {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.contact-overlay.active {
    opacity: 1;
    visibility: visible;
}
.contact-modal {
    transform: scale(0.95) translateY(20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.contact-overlay.active .contact-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ------------------------------------------------------------------
   FAQ ACCORDION — <details>/<summary> Q&A list
------------------------------------------------------------------- */
.faq-item {
    border-bottom: 1px solid rgba(51,65,85,0.5);
}
.faq-item:last-child {
    border-bottom: none;
}
.faq-question {
    cursor: pointer;
    list-style: none;
    padding: 1.25rem 0;
    font-weight: 600;
    color: #fff;                            /* --text */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s;
}
.faq-question:hover {
    color: #00b7e3;                         /* --brand */
}
.faq-question::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    color: #00b7e3;                         /* --brand */
    transition: transform 0.3s;
    flex-shrink: 0;
    margin-left: 1rem;
}
details[open] .faq-question::after {
    content: '−';
}
.faq-answer {
    padding: 0 0 1.25rem 0;
    color: #94a3b8;                         /* --muted */
    line-height: 1.7;
    font-size: 0.95rem;
}

/* ------------------------------------------------------------------
   CONTACT BANNER — fixed bottom bar with email/phone CTA
------------------------------------------------------------------- */
#contact-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 80;
    background: linear-gradient(to right, #020617, #0f172a);
    border-top: 1px solid rgba(51,65,85,0.5);
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    font-size: 0.875rem;
}
#contact-banner img {
    width: 20px;
    height: 20px;
    opacity: 0.7;
}
#contact-banner a {
    color: #1abbe6;                         /* --brand-2 */
    text-decoration: none;
    transition: color 0.3s;
}
#contact-banner a:hover {
    color: #00b7e3;                         /* --brand */
}

/* ------------------------------------------------------------------
   USE-CASE CARD + APPROACH IMAGE — hover motion
------------------------------------------------------------------- */
.use-case-card {
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s,
        box-shadow 0.4s;
}
.use-case-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0,183,227,0.3);
    box-shadow: 0 15px 40px -10px rgba(0,183,227,0.12);
}
.approach-img {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.approach-img:hover {
    transform: scale(1.03);
    box-shadow: 0 25px 60px -15px rgba(0, 183, 227, 0.2);
}