/* =============================================================================
   AI AMBER THEME - dark-first "AI world" skin
   Loaded LAST on every page. Re-skins the existing dark-mode engine into a
   deep-black cosmic background with amber/orange accents, adds the WebGL hero
   layer, redesigned cards, scroll-reveal animations and the cloud architecture
   diagram. Chatbot styles are intentionally NOT touched.
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700;6..72,800&display=swap');

:root {
    /* Amber accent ramp */
    --amber-300: #fcd34d;
    --amber-400: #fbbf24;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --ember-600: #ea580c;
    --ember-700: #c2410c;

    /* Deep "space" surfaces */
    --ink-900: #07070b;
    --ink-850: #0b0b12;
    --ink-800: #101019;
    --panel: #14141d;
    --panel-2: #1b1b27;

    /* Lines / glow */
    --hairline: rgba(245, 158, 11, 0.16);
    --hairline-strong: rgba(245, 158, 11, 0.35);
    --amber-glow: 0 0 40px rgba(245, 158, 11, 0.28);

    --gradient-amber: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    --gradient-amber-soft: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #ea580c 100%);
    /* Vibrant multi-color "sunset" gradient (gold -> amber -> coral/rose, no purple) */
    --gradient-vibrant: linear-gradient(135deg, #fcd34d 0%, #f59e0b 38%, #fb7185 100%);
    --gradient-vibrant-2: linear-gradient(120deg, #fbbf24 0%, #f97316 45%, #f43f5e 100%);
}

/* -----------------------------------------------------------------------------
   Typography - bold Claude-style serif display for headings
   ----------------------------------------------------------------------------- */
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6,
.hero-title, .section-title, .blog-hero h1, .page-header h1,
.arch-node h4, .llm-copy h2, .logo-text {
    font-family: 'Newsreader', 'Tinos', Georgia, 'Times New Roman', serif !important;
    letter-spacing: -0.01em;
}
.hero-title, .section-title, .blog-hero h1, .page-header h1 {
    font-weight: 800 !important;
}
.dark-mode h3, .dark-mode h4, .arch-node h4 { font-weight: 700 !important; }
.logo-text { font-weight: 700 !important; }

/* Body stays Inter for readability, just a touch heavier */
.dark-mode body { font-weight: 400; }

/* -----------------------------------------------------------------------------
   Global cosmic canvas
   ----------------------------------------------------------------------------- */
.dark-mode body {
    background:
        radial-gradient(1200px 700px at 12% -5%, rgba(245, 158, 11, 0.12), transparent 55%),
        radial-gradient(1000px 600px at 90% 0%, rgba(234, 88, 12, 0.10), transparent 50%),
        radial-gradient(900px 700px at 50% 120%, rgba(217, 119, 6, 0.07), transparent 55%),
        #07070b !important;
    color: #e7e7ee !important;
}

/* Kill the legacy purple mesh overlay */
.dark-mode body::before {
    background:
        radial-gradient(at 40% 20%, rgba(245, 158, 11, 0.10) 0px, transparent 50%),
        radial-gradient(at 80% 0%, rgba(234, 88, 12, 0.10) 0px, transparent 50%),
        radial-gradient(at 0% 50%, rgba(217, 119, 6, 0.08) 0px, transparent 50%) !important;
    opacity: 0.5 !important;
}

/* Make content bands transparent so the cosmic field reads as one continuous scene */
.dark-mode .quick-nav-section,
.dark-mode .features,
.dark-mode .bot-selector-section,
.dark-mode .demo-section,
.dark-mode .cta,
.dark-mode .content-section,
.dark-mode .team-section,
.dark-mode .strengths-section-highlighted,
.dark-mode .contact-section,
.dark-mode .blog-posts {
    background: transparent !important;
}

/* The "innovation" band becomes a darker amber-tinted panel instead of bright purple */
.dark-mode .ai-innovation-section {
    background:
        radial-gradient(800px 400px at 20% 0%, rgba(245, 158, 11, 0.14), transparent 60%),
        radial-gradient(700px 400px at 85% 100%, rgba(234, 88, 12, 0.12), transparent 60%),
        linear-gradient(180deg, #0b0b12 0%, #101019 100%) !important;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.5);
}

/* -----------------------------------------------------------------------------
   Navigation - deep glass with amber hairline
   ----------------------------------------------------------------------------- */
.dark-mode .navbar,
.dark-mode .navbar.scrolled {
    background: #07070b !important;
    border-bottom: 1px solid var(--hairline) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}
.dark-mode .navbar.scrolled {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55) !important;
    border-bottom: 1px solid var(--hairline-strong) !important;
}
/* style.css paints `.nav-menu` with slate blue — shows as a visible strip behind links */
.dark-mode .nav-menu {
    background: transparent !important;
    border: none !important;
}
.dark-mode .nav-menu a {
    color: rgba(255, 255, 255, 0.92) !important;
}
.dark-mode .nav-menu a:hover,
.dark-mode .nav-menu a.active {
    color: var(--amber-400) !important;
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
}
@media (max-width: 768px) {
    .dark-mode .nav-menu,
    .dark-mode .nav-menu.active {
        background: rgba(7, 7, 11, 0.97) !important;
        border-bottom: 1px solid var(--hairline) !important;
    }
}
.dark-mode .logo-text,
.dark-mode .logo:hover .logo-text,
.dark-mode .nav-logo,
.dark-mode .nav-logo span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    font-family: 'Newsreader', 'Tinos', Georgia, 'Times New Roman', serif !important;
    font-weight: 700 !important;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
    white-space: nowrap;
}
.dark-mode .nav-logo {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    text-decoration: none;
}

/* -----------------------------------------------------------------------------
   HERO - cosmic image backdrop + WebGL canvas layer
   ----------------------------------------------------------------------------- */
.hero {
    background: #07070b !important;
    background-image:
        linear-gradient(180deg, rgba(7, 7, 11, 0.45) 0%, rgba(7, 7, 11, 0.65) 60%, #07070b 100%),
        url('../images/hero-ai.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    animation: none !important;
    padding: 12rem 0 9rem !important;
    border-bottom: 1px solid var(--hairline);
}
/* Remove the white bubbles and the light fade-out at the bottom */
.hero::before { display: none !important; }
.hero::after {
    background: linear-gradient(to top, #07070b, transparent) !important;
    height: 140px !important;
}

/* The Three.js canvas injected by ai-hero.js */
#ai-hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.9;
}
.hero .container { position: relative; z-index: 2; }
.hero-content { z-index: 2; }

/* Rotating brain backdrop behind the particle network (homepage hero) */
.hero-brain {
    position: absolute;
    top: 50%;
    right: 6%;
    transform: translateY(-50%);
    width: 540px;
    max-width: 46%;
    aspect-ratio: 1 / 1;
    z-index: 0;
    opacity: 0.42;
    pointer-events: none;
}
.hero-brain img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 0 60px rgba(245, 158, 11, 0.45));
    animation: brainSpin 48s linear infinite;
    mix-blend-mode: screen;
}
@media (max-width: 900px) {
    .hero-brain { right: 50%; transform: translate(50%, -50%); opacity: 0.24; width: 360px; }
}
@media (max-width: 600px) {
    .hero-brain { display: none; }
}

/* Logo emblem: drop its black backdrop on dark surfaces via screen blend */
.dark-mode .logo-img,
.dark-mode .footer-logo-img {
    mix-blend-mode: screen;
}

.hero-title {
    color: #ffffff !important;
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.65), 0 0 30px rgba(245, 158, 11, 0.12);
}
.hero-title .accent,
.hero-subtitle .accent {
    background: var(--gradient-vibrant);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-subtitle { color: #cfcfdb !important; opacity: 1 !important; }

/* -----------------------------------------------------------------------------
   Buttons - amber primary
   ----------------------------------------------------------------------------- */
.btn-primary {
    background: var(--gradient-vibrant) !important;
    color: #1a0b03 !important;
    border-color: transparent !important;
    /* subtle dark ring so the bright CTA never visually collides with the hero glow */
    box-shadow: 0 8px 26px rgba(244, 63, 94, 0.30), inset 0 0 0 1px rgba(0, 0, 0, 0.18) !important;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 38px rgba(244, 63, 94, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.18) !important;
    filter: brightness(1.06) saturate(1.05);
}
.btn-secondary {
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
    color: var(--amber-300) !important;
    backdrop-filter: blur(8px);
}
.btn-secondary:hover {
    background: rgba(245, 158, 11, 0.16) !important;
    border-color: rgba(245, 158, 11, 0.7) !important;
    color: #fff !important;
}

/* Section titles get a subtle amber underline accent */
.section-title { position: relative; }

/* -----------------------------------------------------------------------------
   Footer
   ----------------------------------------------------------------------------- */
.dark-mode .footer {
    background: linear-gradient(to bottom, #0b0b12 0%, #050507 100%) !important;
    border-top: 1px solid var(--hairline);
}

/* -----------------------------------------------------------------------------
   Blog hero - make it cosmic dark like the rest of the site
   ----------------------------------------------------------------------------- */
.dark-mode .blog-hero {
    background:
        radial-gradient(700px 360px at 18% -10%, rgba(245, 158, 11, 0.16), transparent 60%),
        radial-gradient(600px 340px at 88% 0%, rgba(234, 88, 12, 0.13), transparent 60%),
        linear-gradient(180deg, #0b0b12 0%, #101019 100%) !important;
    border-bottom: 1px solid var(--hairline);
}
.dark-mode .blog-hero h1 {
    background: var(--gradient-amber-soft) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
.dark-mode .blog-hero p,
.dark-mode .blog-hero .blog-stats,
.dark-mode .blog-hero .blog-stat-label {
    color: #cfcfdb !important;
}
.dark-mode .blog-hero .blog-stat-number { color: var(--amber-400) !important; }

/* Respect reduced motion globally for our additions */
@media (prefers-reduced-motion: reduce) {
    #ai-hero-canvas { display: none; }
}

/* -----------------------------------------------------------------------------
   Inner-page headers - cosmic dark band (matches homepage hero language)
   ----------------------------------------------------------------------------- */
.dark-mode .page-header {
    background:
        radial-gradient(700px 360px at 18% -10%, rgba(245, 158, 11, 0.16), transparent 60%),
        radial-gradient(600px 340px at 88% 0%, rgba(234, 88, 12, 0.13), transparent 60%),
        linear-gradient(180deg, #0b0b12 0%, #101019 100%) !important;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--hairline);
    animation: none !important;
}
.page-header .container { position: relative; z-index: 2; }
.page-header #ai-hero-canvas { opacity: 0.55; }

/* -----------------------------------------------------------------------------
   Scroll reveal (driven by js/scroll-fx.js)
   ----------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
                transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
}
.reveal.reveal-in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* -----------------------------------------------------------------------------
   Cards - unified dark "glass" with amber edge glow + hover lift/tilt
   (!important is used where the original markup carries inline light styles)
   ----------------------------------------------------------------------------- */
.dark-mode .quick-nav-card,
.dark-mode .tech-card-expanded,
.dark-mode .feature-card-main,
.dark-mode .bot-selector-card,
.dark-mode .resource-card,
.dark-mode .value-card,
.dark-mode .strength-card,
.dark-mode .tech-card,
.dark-mode .cloud-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45) !important;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.35s ease, border-color 0.35s ease !important;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

/* Amber sheen sweeping the top edge */
.dark-mode .quick-nav-card::after,
.dark-mode .tech-card-expanded::after,
.dark-mode .feature-card-main::after,
.dark-mode .bot-selector-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gradient-amber-soft);
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* Glow on hover for every glass card */
.dark-mode .quick-nav-card:hover,
.dark-mode .tech-card-expanded:hover,
.dark-mode .feature-card-main:hover,
.dark-mode .bot-selector-card:hover,
.dark-mode .resource-card:hover,
.dark-mode .value-card:hover,
.dark-mode .strength-card:hover,
.dark-mode .tech-card:hover,
.dark-mode .cloud-card:hover {
    border-color: var(--hairline-strong) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(245, 158, 11, 0.25),
                0 0 50px rgba(245, 158, 11, 0.18) !important;
}
/* Non-tilted cards lift with a simple translate */
.dark-mode .resource-card:hover,
.dark-mode .value-card:hover,
.dark-mode .strength-card:hover,
.dark-mode .tech-card:hover,
.dark-mode .cloud-card:hover {
    transform: translateY(-8px) !important;
}
.dark-mode .quick-nav-card:hover::after,
.dark-mode .tech-card-expanded:hover::after,
.dark-mode .feature-card-main:hover::after,
.dark-mode .bot-selector-card:hover::after {
    opacity: 1;
}

/* Card text legibility on glass */
.dark-mode .resource-card h3,
.dark-mode .resource-card p,
.dark-mode .resource-card span {
    color: #ececf3 !important;
}
.dark-mode .resource-card span[style] { color: var(--amber-400) !important; }

/* Icons get an amber glow */
.dark-mode .card-icon,
.dark-mode .feature-icon-large,
.dark-mode .bot-icon:not(.bot-icon-text),
.dark-mode .tech-logo-large {
    filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.45));
}
.bot-icon-text {
    font-size: 1rem !important;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    padding: 0 4px;
    filter: none !important;
    background: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dark-mode .bot-icon-text {
    filter: none !important;
}
.bot-icon-logo {
    font-size: 0 !important;
    filter: none !important;
    margin-bottom: 15px;
}
.bot-icon-logo img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.dark-mode .card-arrow,
.dark-mode .bot-arrow { color: var(--amber-400) !important; }

/* Tech tags / badges */
.dark-mode .tech-tag-new,
.dark-mode .innovation-badge,
.dark-mode .highlight-tag {
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    color: var(--amber-300) !important;
}
.dark-mode .learn-more-btn-expanded {
    background: var(--gradient-amber) !important;
    color: #0a0a0f !important;
    border: none !important;
}

/* Pointer-driven 3D tilt (class added by scroll-fx.js) */
.tilt {
    transition: transform 0.18s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
    transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(var(--lift, 0px)) !important;
}

/* -----------------------------------------------------------------------------
   LLM / RAG architecture diagram
   ----------------------------------------------------------------------------- */
.arch-section { padding: 6rem 0 5rem; position: relative; overflow: hidden; }

/* -----------------------------------------------------------------------------
   Peeking AI mascot — a friendly bot that peeks in to suggest AI quietly taking
   over the busywork and making people's day easier.
   ----------------------------------------------------------------------------- */
.ai-peek {
    position: absolute;
    right: 2.2rem;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    z-index: 4;
    pointer-events: none;
}
.ai-peek-bubble {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(234, 88, 12, 0.95));
    color: #1a0b03;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.5rem 0.85rem;
    border-radius: 14px 14px 14px 4px;
    box-shadow: 0 10px 28px rgba(244, 63, 94, 0.3);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(8px) scale(0.9);
    animation: aiPeekBubble 7s ease-in-out infinite;
}
.ai-peek-spark { display: inline-block; animation: aiPeekSpark 2.2s ease-in-out infinite; }
.ai-peek-bot {
    transform: translateY(46%);
    animation: aiPeekPop 7s ease-in-out infinite;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.5));
}
.ai-peek-eyes { animation: aiPeekBlink 4s steps(1, end) infinite; transform-origin: center; }
.ai-peek-hand { transform-origin: 103px 78px; animation: aiPeekWave 7s ease-in-out infinite; }
.ai-peek-antenna { animation: aiPeekAntenna 2.4s ease-in-out infinite; transform-origin: 60px 8px; }

/* Peeks up over the edge, holds, then ducks back down */
@keyframes aiPeekPop {
    0%, 8%   { transform: translateY(118%); }
    20%, 70% { transform: translateY(8%); }
    85%, 100%{ transform: translateY(118%); }
}
@keyframes aiPeekBubble {
    0%, 22%  { opacity: 0; transform: translateY(8px) scale(0.9); }
    32%, 66% { opacity: 1; transform: translateY(0) scale(1); }
    74%, 100%{ opacity: 0; transform: translateY(8px) scale(0.9); }
}
@keyframes aiPeekBlink {
    0%, 92%, 100% { transform: scaleY(1); }
    96% { transform: scaleY(0.1); }
}
@keyframes aiPeekWave {
    0%, 28%, 58%, 100% { transform: rotate(0deg); }
    36%, 50% { transform: rotate(-22deg); }
    43% { transform: rotate(8deg); }
}
@keyframes aiPeekAntenna {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.7; }
}
@keyframes aiPeekSpark {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(18deg) scale(1.25); }
}
@media (max-width: 768px) {
    .ai-peek { right: 0.5rem; transform: scale(0.72); transform-origin: bottom right; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-peek-bot { animation: none; transform: translateY(8%); }
    .ai-peek-bubble { animation: none; opacity: 1; transform: none; }
    .ai-peek-eyes, .ai-peek-hand, .ai-peek-antenna, .ai-peek-spark { animation: none; }
}

/* -----------------------------------------------------------------------------
   AI Products section — themed badge on the product cards
   ----------------------------------------------------------------------------- */
.product-card { position: relative; }
.product-card .product-badge {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--amber-300, #fcd34d);
    letter-spacing: 0.01em;
    transition: transform 0.25s ease, color 0.25s ease;
}
.product-card:hover .product-badge {
    transform: translateX(4px);
    color: #fff;
}

.arch-flow {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    flex-wrap: nowrap;
    margin: 3.5rem auto 2.5rem;
    max-width: 1100px;
}

.arch-node {
    flex: 1 1 0;
    max-width: 240px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 1.6rem 1.1rem;
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.arch-node:hover {
    transform: translateY(-6px);
    border-color: var(--hairline-strong);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 40px rgba(245, 158, 11, 0.18);
}
.arch-node .arch-ico {
    font-size: 2.3rem;
    filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.5));
    margin-bottom: 0.6rem;
}
.arch-node h4 { color: #fff !important; font-size: 1.05rem; margin: 0.3rem 0 0.5rem; }
.arch-node p { color: #b6b6c4 !important; font-size: 0.88rem; line-height: 1.5; margin: 0; }

.arch-connector {
    flex: 0 0 46px;
    align-self: center;
    height: 2px;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.75), rgba(245, 158, 11, 0.1));
    position: relative;
    overflow: visible;
}
.arch-connector::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--amber-400);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.9);
    transform: translateY(-50%);
    animation: archPulse 2.6s linear infinite;
}
@keyframes archPulse {
    0% { left: 0%; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

.arch-cloud {
    margin-top: 1.5rem;
    text-align: center;
}
.arch-cloud-label {
    display: inline-block;
    color: var(--amber-300);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.82rem;
    margin-bottom: 1.2rem;
}
.cloud-logos {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.cloud-chip {
    background: #f7f7fa;
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 14px;
    padding: 16px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    height: 76px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cloud-chip:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 36px rgba(245, 158, 11, 0.25);
}
.cloud-chip img { height: 40px; width: auto; display: block; }

@media (max-width: 860px) {
    .arch-flow { flex-direction: column; align-items: center; }
    .arch-node { max-width: 360px; width: 100%; }
    .arch-connector {
        width: 2px;
        height: 38px;
        flex-basis: 38px;
        background: linear-gradient(180deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.75), rgba(245, 158, 11, 0.1));
    }
    .arch-connector::after { animation: archPulseV 2.6s linear infinite; }
}
@keyframes archPulseV {
    0% { top: 0%; left: 50%; opacity: 0; transform: translate(-50%, -50%); }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { top: 100%; left: 50%; opacity: 0; transform: translate(-50%, -50%); }
}

/* -----------------------------------------------------------------------------
   "Inside the Mind of an LLM" - brain visual + scroll-driven brain->AI morph
   ----------------------------------------------------------------------------- */
.llm-section { padding: 7rem 0; position: relative; overflow: hidden; }
.llm-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 3.5rem;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}

.llm-visual {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.brain-orb {
    position: relative;
    width: 440px;
    max-width: 92%;
    aspect-ratio: 1 / 1;
    will-change: transform;
    transition: transform 0.08s linear;
}
.brain-orb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 0 60px rgba(245, 158, 11, calc(0.30 + var(--ai-mix, 0) * 0.35)))
            saturate(calc(1 + var(--ai-mix, 0) * 0.5))
            brightness(calc(1 + var(--ai-mix, 0) * 0.12));
}
/* rotating amber halo behind the brain */
.brain-orb::before {
    content: '';
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(245, 158, 11, 0) 0deg,
        rgba(245, 158, 11, 0.35) 90deg,
        rgba(234, 88, 12, 0) 200deg,
        rgba(251, 191, 36, 0.3) 320deg,
        rgba(245, 158, 11, 0) 360deg);
    filter: blur(26px);
    animation: brainSpin 20s linear infinite;
    z-index: -1;
}
@keyframes brainSpin { to { transform: rotate(360deg); } }

.brain-pill {
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    display: inline-grid;
    place-items: center;
    background: rgba(7, 7, 11, 0.72);
    border: 1px solid var(--hairline-strong);
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.brain-pill span {
    grid-area: 1 / 1;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    transition: opacity 0.35s ease;
}
.brain-pill .t-ai {
    background: var(--gradient-amber-soft);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
}
.brain-pill .t-brain { color: #e7e7ee; }

/* Copy column */
.llm-copy .innovation-badge { margin-bottom: 1rem; }
.llm-copy h2 { font-size: 2.4rem; line-height: 1.1; color: #fff !important; margin-bottom: 0.9rem; }
.llm-copy .llm-lead { color: #c7c7d2 !important; font-size: 1.08rem; margin-bottom: 1.8rem; }

.llm-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--hairline);
}
.llm-item:last-of-type { border-bottom: none; }
.llm-item .llm-num {
    flex: 0 0 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #0a0a0f;
    background: var(--gradient-amber);
    box-shadow: 0 0 22px rgba(245, 158, 11, 0.4);
}
.llm-item h4 { color: #fff !important; font-size: 1.06rem; margin: 0.15rem 0 0.25rem; }
.llm-item p { color: #b6b6c4 !important; font-size: 0.92rem; line-height: 1.55; margin: 0; }

.llm-models {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.6rem;
}
.llm-models .model-chip {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: var(--amber-300);
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    font-size: 0.86rem;
    font-weight: 600;
}
.llm-models .model-chip.lead {
    background: var(--gradient-amber);
    color: #0a0a0f;
    border-color: transparent;
}

@media (max-width: 900px) {
    .llm-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .llm-visual { min-height: 360px; order: -1; }
    .brain-orb { width: 320px; }
}

/* =============================================================================
   CHATBOT WIDGETS - vibrant glass retheme (homepage chatbot + solutions bot)
   Overrides loaded after the chatbot CSS so these win without editing those files.
   ============================================================================= */

/* Launcher buttons: vibrant gradient + pulsing glow ring + lots of motion */
.chatbot-toggle,
.solutions-bot-toggle {
    background: var(--gradient-vibrant) !important;
    box-shadow: 0 10px 30px rgba(244, 63, 94, 0.45), 0 0 0 1px rgba(245, 158, 11, 0.3) !important;
    position: relative;
}
.chatbot-toggle::after,
.solutions-bot-toggle::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 2px solid rgba(245, 158, 11, 0.55);
    animation: botPulseRing 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes botPulseRing {
    0% { transform: scale(0.92); opacity: 0.9; }
    100% { transform: scale(1.4); opacity: 0; }
}
.chatbot-toggle:hover,
.solutions-bot-toggle:hover {
    box-shadow: 0 14px 40px rgba(244, 63, 94, 0.6), 0 0 40px rgba(245, 158, 11, 0.35) !important;
}

/* Window: translucent dark glass */
.dark-mode .chatbot-window,
.dark-mode .solutions-bot-window {
    background: rgba(14, 14, 22, 0.72) !important;
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    border: 1px solid var(--hairline-strong);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62), 0 0 70px rgba(245, 158, 11, 0.12) !important;
}

/* Header: translucent gradient sheen instead of solid purple/green */
.dark-mode .chatbot-header,
.dark-mode .solutions-bot-header {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(244, 63, 94, 0.16)) !important;
    border-bottom: 1px solid var(--hairline-strong);
    position: relative;
    overflow: hidden;
}
.dark-mode .chatbot-header::after,
.dark-mode .solutions-bot-header::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    animation: botSheen 5s ease-in-out infinite;
}
@keyframes botSheen {
    0% { left: -60%; }
    55%, 100% { left: 130%; }
}
.dark-mode .chatbot-header h3,
.dark-mode .solutions-bot-header h3 {
    background: var(--gradient-vibrant);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Avatars use the generated AI face */
.chatbot-avatar,
.solutions-bot-header .bot-avatar,
.message-avatar {
    background-image: url('../images/bot-avatar.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    font-size: 0 !important;
    border: 1px solid rgba(245, 158, 11, 0.45);
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
}

/* Messages area transparent so the glass shows through */
.dark-mode .chatbot-messages,
.dark-mode .solutions-bot-messages,
.dark-mode .chatbot-typing,
.dark-mode .bot-typing {
    background: transparent !important;
}

/* Bot bubbles = subtle glass; user bubbles = vibrant gradient */
.dark-mode .message-content {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--hairline) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}
.dark-mode .message-content p { color: #e7e7ee !important; }
.dark-mode .user-message .message-content {
    background: var(--gradient-vibrant) !important;
    border-color: transparent !important;
}
.dark-mode .user-message .message-content p { color: #1a0b03 !important; }

/* Quick actions / solution chips */
.dark-mode .quick-action-btn,
.dark-mode .solution-chip {
    background: rgba(245, 158, 11, 0.13) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    color: #fde68a !important;
    transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease !important;
}
.dark-mode .quick-action-btn:hover,
.dark-mode .solution-chip:hover {
    background: var(--gradient-vibrant) !important;
    color: #1a0b03 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(244, 63, 94, 0.4) !important;
}

/* Send buttons */
.chatbot-send-btn,
.bot-send-btn {
    background: var(--gradient-vibrant) !important;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.4) !important;
}

/* Inputs */
.dark-mode .chatbot-input,
.dark-mode .bot-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--hairline) !important;
    color: #ececf3 !important;
}
.dark-mode .chatbot-input:focus,
.dark-mode .bot-input:focus {
    border-color: var(--amber-500) !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25) !important;
}
.dark-mode .chatbot-input-container,
.dark-mode .solutions-bot-input-container {
    background: transparent !important;
    border-top: 1px solid var(--hairline) !important;
}

/* Typing dots in amber */
.chatbot-typing span,
.bot-typing span { background: var(--amber-500) !important; }

/* Blog article pages use `.nav-content` in markup — mirror `.nav-wrapper` layout */
.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0;
    min-height: 70px;
    width: 100%;
}

/* -----------------------------------------------------------------------------
   Blog-post navbar logo fix.
   Blog article pages use `.nav-logo > img` (a bare <img> with no size class),
   which style.css never constrains. With the new square brand mark this made the
   logo render at full natural size and dominate the page. Constrain it to match
   the standard navbar logo height. Applies site-wide (loaded last).
   --------------------------------------------------------------------------- */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}
.nav-logo img {
    height: 46px;
    width: auto;
    max-height: 46px;
    display: block;
}
@media (max-width: 768px) {
    .nav-logo img { height: 36px; max-height: 36px; }
}

/* -----------------------------------------------------------------------------
   Blog article header contrast fix.
   dark-mode.js applies `.dark-mode` to <html>, but blog.css's light-theme rules
   are keyed with `:not(.dark-mode)` which still matches <body>, so the article
   renders on the light reading card. Meanwhile `.dark-mode .blog-title` colors
   the title LIGHT, producing light-on-white text. Force the header block dark so
   it is readable on the light reading card (the body text is already dark).
   --------------------------------------------------------------------------- */
html.dark-mode .blog-post-layout .blog-title {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    background: none !important;
}
html.dark-mode .blog-post-layout .blog-subtitle { color: #334155 !important; }
html.dark-mode .blog-post-layout .blog-meta,
html.dark-mode .blog-post-layout .blog-meta div { color: #475569 !important; }
html.dark-mode .blog-post-layout .blog-meta a { color: #334155 !important; }

/* The article renders on a LIGHT reading card, but style.css flips --text-dark /
   --text-medium to LIGHT values under dark-mode. That makes inline `var(--text-dark)`
   text (e.g. "Share This Article", italic callouts, accent links) invisible on the
   light card. Re-scope those variables to dark values for the reading card only.
   Self-contained dark boxes (figures, .blog-cta) use hard-coded colors, so they
   are unaffected. */
html.dark-mode .blog-post-layout {
    --text-dark: #0f172a;
    --text-medium: #334155;
    --text-light: #475569;
    --purple-accent: #b45309;
}

/* ---------------------------------------------------------------------------
   Blog reading experience: a clean, centred LIGHT reading card that floats on
   an animated AI background. This keeps the article visually consistent with
   the rest of the site (dark, amber, animated) while guaranteeing the body
   text stays high-contrast and readable on the white card.
   --------------------------------------------------------------------------- */
html.dark-mode .blog-post-layout {
    position: relative;
    z-index: 0;
    background: transparent !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto;
    padding: 48px 16px 72px;
    min-height: 100vh;
    overflow: visible;
    box-sizing: border-box;
}

/* When `.container` is also on the layout wrapper, drop the extra gutter so the
   animated background spans edge-to-edge like the rest of the site. */
html.dark-mode .blog-post-layout.container,
.blog-post-layout.container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* The white reading card lives on the inner <main>, so it paints ABOVE the
   negative-z animated background layers below. */
html.dark-mode .blog-post-layout .blog-content {
    position: relative;
    z-index: 1;
    background: #ffffff !important;
    border-radius: 22px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(245, 158, 11, 0.22);
    max-width: min(920px, 100%);
    width: 100%;
    margin: 0 auto;
    padding: 56px clamp(16px, 5vw, 60px) 64px;
    min-height: auto;
    overflow-x: clip;
    overflow-y: visible;
    box-sizing: border-box;
}

/* Animated image background that fills the viewport behind the card. Uses the
   site's AI network image with a dark amber/teal wash and a slow zoom. */
html.dark-mode .blog-post-layout::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(rgba(8, 8, 18, 0.82), rgba(8, 8, 18, 0.9)),
        url('/images/ai-network.jpg') center center / cover no-repeat;
    animation: blogBgZoom 28s ease-in-out infinite alternate;
}
/* A second drifting colour wash for subtle motion on top of the image. */
html.dark-mode .blog-post-layout::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 18% 22%, rgba(245, 158, 11, 0.20), transparent 42%),
        radial-gradient(circle at 82% 70%, rgba(34, 211, 238, 0.14), transparent 45%);
    background-size: 220% 220%;
    animation: blogBgFloat 22s ease-in-out infinite;
    pointer-events: none;
}
@keyframes blogBgZoom {
    0%   { background-position: center center, 50% 50%; background-size: cover, 100% 100%; }
    100% { background-position: center center, 50% 50%; background-size: cover, 116% 116%; }
}
@keyframes blogBgFloat {
    0%, 100% { background-position: 0% 50%, 100% 50%; }
    50%      { background-position: 100% 50%, 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    html.dark-mode .blog-post-layout::before,
    html.dark-mode .blog-post-layout::after { animation: none; }
}

/* style.css forces ALL dark-mode headings white and inline-color-less paragraphs
   light with !important. On the light reading card that makes section headings and
   body paragraphs invisible. Restore dark, readable text for EVERY element on the
   card — scoped so the dark sub-boxes (SVG figures, .blog-cta, mobile TOC) keep
   their light text. Figures/CTA headings carry an inline color, so [style*=color]
   excludes them. */
html.dark-mode .blog-post-layout .blog-content h1,
html.dark-mode .blog-post-layout .blog-content h2,
html.dark-mode .blog-post-layout .blog-body h2:not([style*="color"]) {
    color: #0f172a !important;
    text-shadow: none !important;
}
html.dark-mode .blog-post-layout .blog-body h3:not([style*="color"]) {
    color: #b45309 !important;
    text-shadow: none !important;
}
html.dark-mode .blog-post-layout .blog-content h4:not(.toc-title):not([style*="color"]) {
    color: #b45309 !important;
    text-shadow: none !important;
}
/* FAQ question headings carry inline `color: var(--purple-accent)`, which
   style.css's `.dark-mode h4 { color:#fff !important }` defeats. Force them to the
   dark amber accent so they read on the light FAQ cards. Figures use h3, so they
   are unaffected. */
html.dark-mode .blog-post-layout .blog-body h4:not(.toc-title) {
    color: #b45309 !important;
    text-shadow: none !important;
}
html.dark-mode .blog-post-layout .blog-body p:not([style*="color"]),
html.dark-mode .blog-post-layout .blog-body li:not([style*="color"]),
html.dark-mode .blog-post-layout .blog-body span:not([style*="color"]) {
    color: #1e293b !important;
}
html.dark-mode .blog-post-layout .blog-body strong,
html.dark-mode .blog-post-layout .blog-body b {
    color: #0f172a !important;
}
html.dark-mode .blog-post-layout .blog-body a:not([style*="color"]) {
    color: #b45309 !important;
}

/* Tables had no explicit cell colour, so they inherited the light dark-mode text
   and were nearly invisible on the white card. Force readable, well-defined cells. */
html.dark-mode .blog-post-layout .blog-table th,
html.dark-mode .blog-post-layout .blog-content table th {
    color: #0f172a !important;
    background: rgba(245, 158, 11, 0.12) !important;
    border-bottom: 2px solid rgba(180, 83, 9, 0.35) !important;
}
html.dark-mode .blog-post-layout .blog-table td,
html.dark-mode .blog-post-layout .blog-content table td {
    color: #1e293b !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
html.dark-mode .blog-post-layout .blog-table tr:nth-child(even) td {
    background: rgba(245, 158, 11, 0.04) !important;
}

/* The in-article Table of Contents (.mobile-toc) inherits position:sticky from
   .toc, which pins it to the viewport and makes it overlap the article as you
   scroll. It should be a normal block at the top of the post. The floating
   hamburger TOC (.toc-menu-fixed) handles on-scroll navigation instead. */
.blog-post-layout .toc.mobile-toc {
    position: static !important;
    top: auto !important;
}

/* Inline citations (superscript reference markers) and the References list. */
.blog-body .cite,
.blog-post-layout .cite {
    font-size: 0.72em;
    font-weight: 700;
    line-height: 0;
    vertical-align: super;
    margin-left: 1px;
}
.blog-body .cite a,
.blog-post-layout .cite a {
    color: #b45309 !important;
    text-decoration: none;
    border-bottom: none !important;
}
.blog-body .cite a:hover,
.blog-post-layout .cite a:hover { text-decoration: underline; }

.blog-references {
    margin: 3rem 0 1rem;
    padding: 1.75rem 1.75rem 1.25rem;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #b45309;
    border-radius: 14px;
    background: #f8fafc;
}
html.dark-mode .blog-post-layout .blog-references h2,
html.dark-mode .blog-post-layout .blog-references h3 {
    color: #0f172a !important;
    margin-top: 0;
}
.blog-references ol { margin: 0.5rem 0 0; padding-left: 1.4rem; }
html.dark-mode .blog-post-layout .blog-references li {
    color: #334155 !important;
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
    line-height: 1.55;
}
.blog-references a { color: #b45309 !important; word-break: break-word; }

/* Blog mobile: constrain tables/charts; full-width navbar */
@media (max-width: 768px) {
    html.dark-mode .blog-post-layout {
        padding: 20px 10px 48px;
    }

    html.dark-mode .blog-post-layout .blog-content {
        padding: 28px 14px 36px;
        border-radius: 16px;
    }

    html.dark-mode .blog-post-layout .overflow-x-auto {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }

    html.dark-mode .blog-post-layout .blog-content img,
    html.dark-mode .blog-post-layout .blog-content svg,
    html.dark-mode .blog-post-layout figure {
        max-width: 100%;
        width: 100%;
        height: auto;
    }
}

.dark-mode .navbar {
    width: 100%;
    max-width: 100vw;
    left: 0;
    right: 0;
}

.dark-mode .navbar > .container {
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

.dark-mode .navbar .nav-wrapper {
    width: 100%;
}