body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    position: relative;
    overflow-x: hidden;
}

/* Animated background gradient — blue + indigo/violet stops. Each color
   is one shade brighter than the previous palette, and overlay opacity
   bumped from 0.25 → 0.3 so the hues come through more. */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        #374151 0%,
        #7c3aed 15%,    /* violet-600 — brighter purple anchor */
        #2563eb 30%,    /* blue-600 */
        #60a5fa 45%,    /* blue-400 */
        #a78bfa 60%,    /* violet-400 — bright purple-blue */
        #3b82f6 75%,    /* blue-500 */
        #8b5cf6 90%,    /* violet-500 — distinctly purple */
        #374151 100%
    );
    background-size: 300% 300%;
    animation: gradientShift 25s ease-in-out infinite;
    z-index: -1;
    opacity: 0.3;
}

.hero-gradient {
    background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.1), transparent 40%);
}

/* Scroll-aware header surface. At scrollY=0 the header is fully transparent
   so the hero gradient + constellation canvas paint right up to the top
   edge of the viewport. JS drives --header-alpha (0 → 0.8) and
   --header-blur (0 → 4px) linearly over the first 50px of scroll, so the
   gray-800/80 backdrop fades in smoothly as the user scrolls down rather
   than snapping in via a class toggle. */
#site-header {
    --header-alpha: 0;
    --header-blur: 0px;
    background-color: rgba(31, 41, 55, var(--header-alpha));
    backdrop-filter: blur(var(--header-blur));
    -webkit-backdrop-filter: blur(var(--header-blur));
}

/* Logo trims to 75% on mobile — Tailwind's h-9/w-9 (2.25rem) felt too
   loud next to the wordmark on phones. Specificity 0,1,1 beats the
   .h-9/.w-9 utilities (0,1,0) inside the media query. */
@media (max-width: 767px) {
    #site-header .m33-mark {
        width: 1.6875rem;
        height: 1.6875rem;
    }
}

/* Hero constellation overlay — drifting nodes connected by faint lines.
   Speaks to the "network of agents" brand without being in your face. */
#hero {
    position: relative;
    overflow: hidden;
}
.hero-fx-canvas {
    position: absolute;
    inset: 0;
    /* Canvas is a "replaced element" — explicit dimensions are required;
       inset:0 alone falls back to the 300×150 default intrinsic size. */
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
#hero > .container {
    position: relative;
    z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
    .hero-fx-canvas { display: none; }
}

.chat-bubble {
    animation: pop-in 0.5s ease-out forwards;
}

@keyframes pop-in {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Scroll container with edge gradient fade */
.scroll-container-wrapper {
    position: relative;
}

@media (max-width: 768px) {
    /* Hide the browser's scrollbar */
    #brand-scroll {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    
    #brand-scroll::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    /* Dynamic scroll gradients */
    .scroll-container-wrapper::before,
    .scroll-container-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 20px;
        pointer-events: none;
        z-index: 10;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Left gradient */
    .scroll-container-wrapper::before {
        left: 0;
        background: linear-gradient(to right, rgba(31, 41, 55, 1), transparent);
    }

    /* Right gradient */
    .scroll-container-wrapper::after {
        right: 0;
        background: linear-gradient(to left, rgba(31, 41, 55, 1), transparent);
    }

    /* Show gradients based on scroll position */
    .scroll-container-wrapper.has-left-content::before {
        opacity: 1;
    }

    .scroll-container-wrapper.has-right-content::after {
        opacity: 1;
    }

}

/* Custom scroll indicator bar — mobile only.
   Scoped to <768px so it doesn't override Tailwind's md:hidden on desktop. */
@media (max-width: 767px) {
    .scroll-indicator-container {
        display: flex;
        justify-content: center;
        margin-top: 1rem;
    }
}

.scroll-indicator-track {
    width: 100px;
    height: 3px;
    background-color: rgba(75, 85, 99, 0.3);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.scroll-indicator-bar {
    height: 100%;
    background-color: rgba(96, 165, 250, 0.8);
    border-radius: 2px;
    transition: transform 0.1s ease-out;
}

/* Mobile menu styles */
#mobile-menu {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#mobile-menu nav a {
    opacity: 0;
    animation: fadeInUp 0.5s ease-out forwards;
}

#mobile-menu nav a:nth-child(1) {
    animation-delay: 0.1s;
}

#mobile-menu nav a:nth-child(2) {
    animation-delay: 0.2s;
}

#mobile-menu nav a:nth-child(3) {
    animation-delay: 0.3s;
}

#mobile-menu nav a:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hamburger button hover effect */
#mobile-menu-button {
    transition: transform 0.2s ease;
}

#mobile-menu-button:active {
    transform: scale(0.9);
}

/* Primary button visuals (solid blue + shimmer sweep) live in components.css
   under .btn .btn-primary. The booking buttons keep .booking-button as a
   JS hook for click tracking — see index.html click handler — and pick up
   the loading-spinner state from .btn.loading in components.css. */


/* Chat bubble styles with tails */
.chat-bubble {
    position: relative;
    word-wrap: break-word;
    border-radius: 18px;
}

.chat-bubble .timestamp {
    position: absolute;
    top: 16px;
    font-size: 11px;
    opacity: 0.7;
    font-weight: 400;
    line-height: 1.25;
}

.chat-bubble.m33-message .timestamp {
    color: #6b7280;
    right: 16px;
}

.chat-bubble.user-message .timestamp {
    color: rgba(255, 255, 255, 0.8);
    right: 16px;
}

/* M33 messages (left-aligned with left tail) */
.chat-bubble.m33-message {
    background: linear-gradient(135deg, #d8e3fb 0%, #c7d6f7 100%);
    color: #374151;
    margin-right: auto;
    max-width: 85%;
    margin-left: 8px;
}

.chat-bubble.m33-message::before {
    content: '';
    position: absolute;
    left: -6px;
    bottom: 11px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-right-color: #c7d6f7;
    border-left: none;
}

/* User messages (right-aligned with right tail) */
.chat-bubble.user-message {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    margin-left: auto;
    max-width: 85%;
    margin-right: 8px;
}

.chat-bubble.user-message::before {
    content: '';
    position: absolute;
    right: -6px;
    bottom: 11px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left-color: #1d4ed8;
    border-right: none;
}

/* Desktop adjustments */
@media (min-width: 768px) {
    .chat-bubble.m33-message,
    .chat-bubble.user-message {
        max-width: 36rem;
    }
}

/* Hero headline stack — all slogans in one CSS grid cell so container
   height equals the tallest slogan. Sequential fade with slide-up:
   the outgoing slogan fades out + slides up, then the incoming one
   slides up from below + fades in. No simultaneous opacity render,
   which is friendlier on slow mobile devices. */
.hero-h1-stack {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}
.hero-h1-slot {
    grid-row: 1;
    grid-column: 1;
    margin: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}
.hero-h1-slot.hero-h1-active {
    opacity: 1;
    transform: translateY(0);
}
.hero-h1-slot.hero-h1-fade-out {
    opacity: 0;
    transform: translateY(-8px);
}

/* Example gallery cards — surface-only overrides; the chevron, cursor,
   transition, and base layout come from .card .card-clickable in
   components.css. Tailwind's hover:border-blue-500 (later in the cascade)
   takes over on hover. */
.example-card {
    border-color: rgba(255, 255, 255, 0.13);
}
.example-card::after {
    color: rgba(147, 197, 253, 0.7);
    font-size: 1.1rem;
}
.example-card:hover::after {
    color: #bfdbfe;
    transform: translate(2px, -2px);
}
.example-card:active {
    transform: scale(0.985);
    transition-duration: .05s;
}
.gallery-roi-section {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.9rem;
}
.gallery-roi-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6ee7b7;
}
.gallery-roi-value {
    color: #86efac;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.005em;
}
/* Gallery card "View example →" pill — visuals come from .btn .btn-pill
   in components.css, including the .example-card:hover .btn-pill rule
   that tints it when the parent card is hovered. The margin-top is
   applied inline in examples-loader.js. */