.site-header+.site-content .section:first-of-type{
    padding-top: 120px !important;
}

.site-header+.site-content .hero.section:first-of-type{
    padding-top: 0px !important;
}

/* ---- Hero Kicker — Premium brand lockup ---- */
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0;
    margin-bottom: 2.5rem;
    position: relative;
}

.hero-kicker-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.9;
    filter: brightness(var(--kicker-icon-brightness, 1));
}

.hero-kicker-text {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    line-height: 1.3;
    display: inline-flex;
    gap: 0.4rem;
    color: inherit;
    text-decoration: none !important;
}

.hero-kicker-prefix {
    color: var(--slate-400, #94a3b8);
}

.hero-kicker-term {
    font-weight: 600;
    background: var(--kicker-gradient, linear-gradient(160deg, rgba(79,70,229,1) 0%, rgba(99,102,241,1) 50%, rgba(139,92,246,1) 100%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


.category-badge-prefix{
    font-size: 0.6rem;
}

.hero-pills svg,
.hero-pills svg * {
    fill: var(--blurple);
    stroke: var(--blurple);
    /* width: 24px;
    height: 24px; */
}

.hero-pills > div {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.95rem;
    background-color: var(--lightestblue);
    border-radius: 999px;
    font-size: 0.65rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--inv-bg-color) !important;
    font-weight: 800;
    border: none !important;
    opacity: 0.7;
}


/* ---- Sharper Linear-style reveals ---- */
.has-animations .reveal-from-top {
    transform: translateY(-16px);
}

.has-animations .reveal-from-bottom {
    transform: translateY(16px);
}

.has-animations.is-loaded [class*="reveal-"] {
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero.particles .particles-js-canvas-el {
    opacity: 0 !important;
}

.hero.particles h1 {
    color: var(--inv-bg-color) !important;
    font-weight: 600 !important;
    margin-bottom: 1.5rem !important;
}


.hero.particles .hero-wrapper {
    padding-top: 0px !important;
    padding-bottom: 0;
    min-height: 100vh;
}

.hero-wrapper {
    gap: 0px;
}

.hero-wrapper > .reveal-from-bottom:has(.navigator-ring) {
    padding-top: 30px;
}

@media (max-width: 850px) {
    .hero-wrapper > .reveal-from-bottom:has(.navigator-ring) {
        padding-top: 0;
    }
}

.hero-wrapper > div > .flex button,
.hero-wrapper > div > .flex a:not(.blurpleButtonAlt, .hero-btn-minimal, .hero-btn-secondary){
    width: 272px;
    justify-content: center;
    text-decoration: none;
    color: var(--white) !important;
}

.hero-btn-minimal {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--inv-bg-color) !important;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
    text-decoration: none !important;
    font-weight: 600;
    opacity: 0.9;
}

.hero-btn-minimal:hover {
    transform: scale(1.15);
    opacity: 1;
    color: var(--lightblue) !important;
}

/* ---- Hero glass CTA buttons ---- */
.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    justify-content: center;
}

.hero-glass-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.8rem;
    border-radius: 14px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--inv-bg-color) !important;
    text-decoration: none !important;
    cursor: pointer;
    overflow: hidden;
    background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent);
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 2px 16px color-mix(in srgb, var(--inv-bg-color) 4%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 4%, transparent);
    transition: border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-glass-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1.5px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--blurpleblue) 60%, transparent),
        color-mix(in srgb, var(--purple) 40%, transparent));
    opacity: 0.5;
    transition: opacity 0.4s ease;
}

.hero-glass-btn:hover {
    border-color: color-mix(in srgb, var(--purple) 20%, transparent);
    box-shadow:
        0 4px 24px color-mix(in srgb, var(--purple) 10%, transparent),
        0 12px 48px color-mix(in srgb, var(--purple) 5%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    transform: translateY(-3px);
}

.hero-glass-btn:hover::before {
    opacity: 1;
}

/* Primary CTA — elevated glowing focal point */
.hero-glass-btn.hero-glass-btn-primary {
    background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
    border-color: color-mix(in srgb, var(--purple) 18%, transparent);
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow:
        0 2px 16px color-mix(in srgb, var(--purple) 8%, transparent),
        0 8px 40px color-mix(in srgb, var(--purple) 4%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
}

.hero-glass-btn.hero-glass-btn-primary::before {
    opacity: 0.7;
    height: 1.5px;
}

.hero-glass-btn.hero-glass-btn-primary:hover {
    border-color: color-mix(in srgb, var(--purple) 30%, transparent);
    box-shadow:
        0 4px 24px color-mix(in srgb, var(--purple) 15%, transparent),
        0 16px 60px color-mix(in srgb, var(--purple) 8%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
}

/* Secondary text links — elegant minimal */
.hero-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-text-link:hover {
    color: color-mix(in srgb, var(--inv-bg-color) 85%, transparent) !important;
}

.hero-text-link-arrow {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    font-size: 0.9em;
}

.hero-text-link:hover .hero-text-link-arrow {
    transform: translateX(3px);
}

/* Primary text link — "Get Started" with slightly more presence */
.hero-text-link.hero-text-link-primary {
    color: color-mix(in srgb, var(--inv-bg-color) 75%, transparent) !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.hero-text-link.hero-text-link-primary:hover {
    color: var(--inv-bg-color) !important;
}

.hero .hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--inv-bg-color), var(--purple)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    cursor: pointer;
    transition: opacity 0.3s ease;
    text-decoration: none !important;
    font-weight: 400;
    opacity: 0.7;
    font-size: 0.85rem;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
}

.hero-btn-secondary:hover {
    opacity: 1;
    color: var(--lightblue) !important;
}

.hero-scroll-cue {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 0.3;
    animation: hero-scroll-bounce 2s ease-in-out infinite;
    color: var(--inv-bg-color);
}

@keyframes hero-scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}

.problem-section {
    background: var(--main-bg-color);
    color: var(--inv-bg-color);
    padding-top: 6rem !important;
}

.problem-section .problem-copy,
.problem-section .problem-copy p,
.problem-section .problem-copy h2,
.problem-section .problem-copy li {
    color: var(--inv-bg-color);
    text-align: left;
}

.problem-section .problem-copy p{
    font-size: 0.6rem;
}

/* ---- Problem section tag pill ---- */
.problem-tag {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--inv-bg-color);
    opacity: 0.85;
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 14%, transparent);
    background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
    margin-bottom: 2rem;
}

.problem-tag svg {
    width: 13px;
    height: 13px;
    opacity: 0.8;
    flex-shrink: 0;
}

.problem-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 78% 20%, rgba(129, 140, 248, 0.15), transparent 45%),
        radial-gradient(circle at 18% 70%, rgba(168, 85, 247, 0.12), transparent 55%);
    opacity: 0.1;
}

.problem-copy {
    background: var(--main-bg-color);
    border-radius: 32px;
    padding: 2.75rem;
    box-shadow: 0 45px 90px rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(99, 102, 241, 0.08);
    backdrop-filter: blur(26px);
    max-width: 920px;
    margin: 0 auto;
}

.share-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 30%, rgba(139, 92, 246, 0.15), transparent 45%),
        radial-gradient(circle at 82% 60%, rgba(96, 165, 250, 0.12), transparent 55%);
    opacity: 0.1;
}

.share-copy {
    background: var(--main-bg-color);
    border-radius: 32px;
    padding: 0 2rem;
    box-shadow: 0 45px 90px rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(99, 102, 241, 0.08);
    backdrop-filter: blur(26px);
    max-width: 920px;
    height: 601px !important;
    overflow: hidden !important;
    margin: 0 auto;
}

.problem-lede {
    margin-bottom: 1.25rem;
}

.problem-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.95rem;
    background-color: var(--lightestblue);
    border-radius: 999px;
    font-size: 0.65rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--inv-bg-color) !important;
    font-weight: 800;
    border: none;
    opacity: 0.7;
    margin-bottom: 1.5rem;
}

.problem-pill svg,
.problem-pill svg * {
    fill: var(--blurple);
    stroke: var(--blurple);
}

.problem-contrast {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
}

.problem-chart {
    position: relative;
    min-height: 360px;
    isolation: isolate;
    border-radius: 36px;
    padding: 0 !important;
    background: var(--main-bg-color);
    border: none;
    box-shadow: none;
    max-width: 960px;
    margin: 0 auto;
}

.problem-chart-mobile {
    display: none;
    gap: 1.5rem;
    margin-top: 2rem;
}
.proof-section {
    position: relative;
    background: var(--main-bg-color, #f8fafc);
    color: var(--inv-bg-color);
    overflow: hidden;
}
/* Epic Transition Section */
/* Minimal Transition Section */
.epic-transition-section {
    position: relative;
    background: var(--main-bg-color);

}

.epic-portal-container {
    position: relative;
    padding: 4rem 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.epic-portal-content {
    position: relative;
}

.epic-portal-title {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--inv-bg-color) !important;
    font-weight: 700;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.epic-portal-divider {
    width: 60px;
    height: 2px;
    background: var(--blurple);
    margin: 0 auto 2.5rem;
    opacity: 0.6;
}

.epic-section-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--inv-bg-color);
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.epic-section-subtitle {
    font-size: 1.125rem;
    color: var(--inv-bg-color);
    opacity: 0.7;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .epic-section-title {
        font-size: 2.5rem;
    }

    .epic-section-subtitle {
        font-size: 1rem;
    }

    .epic-portal-container {
        padding: 3rem 1.5rem;
    }
}
.solution-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    letter-spacing: 0.4em;
    font-size: 0.65rem;
    text-transform: uppercase;
    background-color: var(--lightestblue);
    color: var(--inv-bg-color) !important;
    border: none;
    opacity: 0.7;
    font-weight: 800;
}

.solution-pill svg,
.solution-pill svg * {
    fill: var(--blurple);
    stroke: var(--blurple);
}

.solution-title {
    color: var(--inv-bg-color);
}
.ai-architect-card {
    background: radial-gradient(circle at top left, color-mix(in srgb, var(--purple) 25%, transparent), transparent 50%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--blurple) 20%, transparent), transparent 50%),
        linear-gradient(135deg, color-mix(in srgb, var(--blurple) 15%, var(--main-bg-color) 85%), color-mix(in srgb, var(--purple) 20%, var(--main-bg-color) 80%));
    box-shadow: 0 25px 60px color-mix(in srgb, var(--blurple) 20%, transparent);
}
.ai-architect-card .space-y-4 {
    overflow: hidden;
}

.ai-flow-nav-buttons {
    display: flex;
    gap: 4px;
}

.ai-flow-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.ai-flow-nav-btn:hover {
    opacity: 0.85;
    background: rgba(255, 255, 255, 0.12);
}

.ai-flow-nav-btn svg {
    flex-shrink: 0;
    color: var(--white);
}

.ai-tool-label {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.ai-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--inv-bg-color);
    flex-shrink: 0;
    opacity: 0.85;
}

.ai-header-icon svg {
    width: 36px;
    height: 36px;
    fill: currentColor;
}

.ai-architect-glyph {
    display: none;
}
.template-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--inv-bg-color) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-shrink: 0;
}
.template-icon--creator {
    background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 18%, transparent), color-mix(in srgb, var(--blurple) 10%, transparent));
    border: 0.5px solid color-mix(in srgb, var(--purple) 28%, transparent);
    box-shadow:
        0 2px 12px color-mix(in srgb, var(--purple) 12%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--purple) 10%, transparent);
    color: var(--purple);
}
.template-icon--editor {
    background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 18%, transparent), color-mix(in srgb, var(--purple) 10%, transparent));
    border: 0.5px solid color-mix(in srgb, var(--blurple) 28%, transparent);
    box-shadow:
        0 2px 12px color-mix(in srgb, var(--blurple) 12%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--blurple) 10%, transparent);
    color: var(--inv-bg-color) !important;
}
.template-icon--coach {
    background: linear-gradient(135deg, color-mix(in srgb, var(--lightblue) 18%, transparent), color-mix(in srgb, var(--purple) 10%, transparent));
    border: 0.5px solid color-mix(in srgb, var(--lightblue) 28%, transparent);
    box-shadow:
        0 2px 12px color-mix(in srgb, var(--lightblue) 12%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--lightblue) 10%, transparent);
    color: var(--darkblue);
}
.ai-prompt-display {
    display: block;
    font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--inv-bg-color);
    line-height: 1.5;
    min-height: 4.5rem;
}
.ai-prompt-text {
    display: inline;
    white-space: pre-wrap;
    letter-spacing: 0.01em;
    color: inherit;
    color: var(--inv-bg-color);
}
.ai-prompt-caret {
    width: 2px;
    height: 1.3em;
    background: #c7d2fe;
    display: inline-block;
    margin-left: 0.12rem;
    vertical-align: text-bottom;
    animation: blink 1s steps(1) infinite;
}
.ai-prompt-caret.is-solid {
    animation: none;
    background: #6366f1;
}
.ai-status-message {
    font-size: 0.9rem;
    color: #bae6fd;
    margin-top: 0.85rem;
    padding-bottom: 0.35rem;
    min-height: 1.4rem;
    opacity: 0;
    transition: opacity 300ms ease;
}
.ai-status-message.is-visible {
    opacity: 1;
}
.ai-status-chip {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: all 200ms ease;
}
.ai-status-chip--idle {
    background: rgba(148, 163, 184, 0.2);
    border-color: rgba(148, 163, 184, 0.4);
    color: #e2e8f0;
}
.ai-status-chip--active {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(251, 191, 36, 0.45);
    color: #fbbf24;
}
.ai-status-chip--done {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.35);
    color: #86efac;
}
.ai-status-label {
    color: #c7d2fe;
    letter-spacing: 0.2em;
    min-height: 1.2rem;
    display: inline-flex;
    align-items: center;
    transition: color 200ms ease;
}
.ai-status-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-block: 0.35rem;
    background: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: background 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.ai-status-header[data-status-state="complete"] {
    background: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
}
.ai-stage-scroll {
    margin-top: 0;
    padding-top: 0.85rem;
    padding-bottom: 1rem;
    flex: 1;
    min-height: 240px;
    max-height: none;
    overflow-y: auto;
    padding-right: 0.35rem;
    scrollbar-width: none;
}
.ai-stage-scroll::-webkit-scrollbar {
    display: none;
}
.ai-stage-list {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 400ms ease, transform 400ms ease;
    min-height: 10rem;
    margin-top: 0;
}
.ai-stage-list.is-ready {
    opacity: 1;
    transform: translateY(0);
}
.ai-stage {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #cbd5f5;
    font-size: 0.95rem;
}
.ai-stage-label {
    color: #e2e8f0;
}
.ai-stage-indicator {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.ai-stage-spinner {
    position: absolute;
    inset: 3px;
    border-radius: 999px;
    border: 2px solid rgba(148, 163, 184, 0.2);
    border-top-color: #a5b4fc;
    opacity: 0;
}
.ai-stage-check {
    width: 1.1rem;
    height: 1.1rem;
    color: #86efac;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 250ms ease, transform 250ms ease;
}
.ai-stage.is-active .ai-stage-spinner {
    opacity: 1;
    animation: spin 1s linear infinite;
}
.ai-stage.is-complete .ai-stage-spinner {
    opacity: 0;
}
.ai-stage.is-complete .ai-stage-check {
    opacity: 1;
    transform: scale(1);
}
@keyframes confetti-fall {
    0% {
        transform: translateY(-10px) rotate(0deg);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        transform: translateY(60px) rotate(220deg);
        opacity: 0;
    }
}
@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    50.01%, 100% {
        opacity: 0;
    }
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.proof-header {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin-inline: auto;
    color: var(--inv-bg-color);
    margin-bottom: 60px !important;
}
.proof-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    font-size: 0.65rem;
    background-color: rgba(139, 92, 246, 0.15);
    color: var(--purple);
    border: 1px solid rgba(139, 92, 246, 0.3);
    opacity: 1;
    font-weight: 800;
}

.proof-pill svg,
.proof-pill svg * {
    fill: var(--purple);
    stroke: var(--purple);
}

/* Gradient Pill - matches quadrant gradient via brand variables */
.proof-pill-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.75rem;
    font-weight: 800;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%),
        linear-gradient(160deg, rgba(79,70,229,0.85) 0%, rgba(99,102,241,0.75) 50%, rgba(139,92,246,0.8) 100%),
        var(--main-bg-color);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--purple) 35%, transparent),
                0 2px 10px color-mix(in srgb, var(--blurple) 20%, transparent);
    transition: all 0.3s ease;
}

.proof-pill-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px color-mix(in srgb, var(--purple) 45%, transparent),
                0 3px 15px color-mix(in srgb, var(--blurple) 30%, transparent);
}

/* Urgency Tag - Muted & Sophisticated */
.urgency-tag {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, #dc2626, #f87171);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: 6px;
    border: 1px solid rgba(220, 38, 38, 0.3);
    box-shadow:
        0 8px 24px rgba(220, 38, 38, 0.15),
        0 2px 8px rgba(248, 113, 113, 0.1);
    animation: urgency-pulse 2s ease-in-out infinite;
}

@keyframes urgency-pulse {
    0%, 100% {
        box-shadow:
            0 8px 24px rgba(220, 38, 38, 0.15),
            0 2px 8px rgba(248, 113, 113, 0.1);
    }
    50% {
        box-shadow:
            0 10px 30px rgba(220, 38, 38, 0.2),
            0 3px 10px rgba(248, 113, 113, 0.15);
    }
}

.proof-title {
    color: var(--inv-bg-color);
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin-top: 3rem !important;
    opacity: 0.85;
    font-size: 2.6rem;
}
.proof-title-em {
    opacity: 0.5;
}
.proof-bridge-divider {
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--blurple) 50%, transparent),
        color-mix(in srgb, var(--purple) 30%, transparent));
    margin: 1.25rem auto 0;
    border-radius: 1px;
}

.proof-subhead {
    color: var(--inv-bg-color);
    opacity: 0.7;
}
.proof-visual {
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.proof-holo {
    position: relative;
    width: min(520px, 85vw);
    aspect-ratio: 1;
    /* border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.08), transparent 65%), rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(99, 102, 241, 0.18);
    box-shadow: 0 35px 80px rgba(15, 23, 42, 0.15); */
    overflow: visible;
}
.proof-holo::before,
.proof-holo::after {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    border: 1px dashed rgba(96, 165, 250, 0.4);
    animation: pulseRing 8s ease-in-out infinite;
}
.proof-holo::after {
    inset: 22%;
    border-style: solid;
    border-color: rgba(125, 211, 252, 0.35);
    animation-delay: 2s;
}
.proof-core {
    position: absolute;
    inset: 42%;
    border-radius: 32px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    text-align: center;
    box-shadow: 0 35px 55px rgba(15, 23, 42, 0.15);
    border: 1px solid rgba(15, 23, 42, 0.06);
}
.proof-core span {
    font-weight: 700;
    font-size: 1.1rem;
}
.proof-core p {
    font-size: 0.9rem;
    color: var(--inv-bg-color) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* NEW STATS GRID LAYOUT WITH GLASSMORPHISM */
.proof-grid-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

.proof-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    border-radius: 16px;
    overflow: visible;
}

.proof-stat-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    position: relative;
    background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent);
    color: var(--inv-bg-color);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 2px 16px color-mix(in srgb, var(--inv-bg-color) 4%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 4%, transparent);
    transition: border-color 0.4s ease, box-shadow 0.4s ease,
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    min-height: 172px;
}

.proof-stat-card:last-child {
    border-right: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
}

.proof-stat-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--blurple) 18%, transparent);
    box-shadow:
        0 8px 40px color-mix(in srgb, var(--blurple) 10%, transparent),
        0 2px 16px color-mix(in srgb, var(--inv-bg-color) 4%, transparent);
    z-index: 10;
}

.proof-stat-card .proof-stat-value {
    font-size: 2.325rem;
    font-weight: 800;
    margin-bottom: 0;
    line-height: 1.1;
    min-height: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stat card values - sampled from quadrant gradient stops: #4f46e5 → #6366f1 → #8b5cf6 */
.proof-stat-card:nth-child(1) .proof-stat-value {
    color: #4f46e5;
    filter: drop-shadow(0 0 20px rgba(79, 70, 229, 0.4));
}

.proof-stat-card:nth-child(2) .proof-stat-value {
    color: #5958eb;
    filter: drop-shadow(0 0 20px rgba(89, 88, 235, 0.4));
    font-size: 38px;
}

.proof-stat-card:nth-child(3) .proof-stat-value {
    color: #6366f1;
    filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.4));
    font-size: 38px;
}

.proof-stat-card:nth-child(4) .proof-stat-value {
    color: #7761f3;
    filter: drop-shadow(0 0 20px rgba(119, 97, 243, 0.4));
    font-size: 38px;
}

.proof-stat-card:nth-child(5) .proof-stat-value {
    color: #8b5cf6;
    filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.4));
    font-size: 38px;
}

.proof-stat-card .proof-stat-label {
    margin-top: 14px;
    font-size: 0.875rem;
    color: var(--inv-bg-color);
    opacity: 0.7;
    line-height: 1.5;
    max-width: 180px;
}

/* Emphasized stat card — gradient bg, white text */
.proof-stat-emphasis {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%),
        linear-gradient(160deg, rgba(79,70,229,0.85) 0%, rgba(99,102,241,0.75) 50%, rgba(139,92,246,0.8) 100%),
        var(--main-bg-color) !important;
    border-color: transparent !important;
    backdrop-filter: none !important;
    box-shadow:
        0 4px 20px color-mix(in srgb, var(--purple) 35%, transparent),
        0 2px 10px color-mix(in srgb, var(--blurple) 20%, transparent) !important;
}

.proof-stat-emphasis:hover {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%),
        linear-gradient(160deg, rgba(67,56,202,0.9) 0%, rgba(79,70,229,0.8) 50%, rgba(124,58,237,0.85) 100%),
        var(--main-bg-color) !important;
}

.proof-stat-emphasis .proof-stat-value {
    color: var(--white) !important;
    filter: none !important;
}

.proof-stat-emphasis .proof-stat-label {
    color: var(--white) !important;
    font-weight: 600;
}

/* Tablet: 3 columns */
@media (max-width: 1024px) {
    .proof-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .proof-stat-card {
        border-right: 1px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
        border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
    }
    .proof-stat-card:nth-child(3n) {
        border-right: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    }
    .proof-stat-card:nth-last-child(-n+3) {
        border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    }
}

/* Mobile: 1 column */
@media (max-width: 640px) {
    .proof-stats-grid {
        grid-template-columns: 1fr;
    }
    .proof-stat-card {
        border-right: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
        border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
    }
    .proof-stat-card:last-child {
        border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    }
}

/* OLD BUBBLE CLOUD STYLES - COMMENTED OUT */
/*.proof-orbit {
    position: absolute;
    inset: 0;
}
.proof-node {
    --node-accent-rgb: 99, 102, 241;
    --magnet-x: 0px;
    --magnet-y: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 205px;
    height: 205px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 78% 20%, rgba(var(--node-accent-rgb), 0.06), transparent 45%),
        radial-gradient(circle at 18% 70%, rgba(var(--node-accent-rgb), 0.04), transparent 55%),
        #fefefe;
    border: 1px solid rgba(var(--node-accent-rgb), 0.5);
    box-shadow:
        0 25px 50px rgba(15, 23, 42, 0.06),
        0 0 35px rgba(var(--node-accent-rgb), 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    backdrop-filter: none;
    animation: float 6s ease-in-out infinite;
    transform: translate(-50%, -50%) translate(calc(var(--offset-x, 0px) + var(--magnet-x)), calc(var(--offset-y, 0px) + var(--magnet-y)));
    padding: 1.5rem 1rem;
    position: absolute;
    overflow: visible;
    z-index: 999;
    text-shadow: none;
    transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
    will-change: transform;
}
.proof-node.is-magnetic {
    animation-play-state: paused;
}
.proof-node::before {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(var(--node-accent-rgb), 0.4), transparent 15%);
    filter: blur(18px);
    opacity: 0.45;
    z-index: -1;
}
.proof-node .proof-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: rgb(var(--node-accent-rgb));
}
.proof-node .proof-stat-label {
    font-size: 0.8rem;
    color: var(--inv-bg-color);
    opacity: 0.7;
    line-height: 1.4;
}
@keyframes pulseRing {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.3;
    }
    100% {
        transform: scale(1);
        opacity: 0.7;
    }
}
@keyframes float {
    0% {
        transform: translate(-50%, -50%) translate(calc(var(--offset-x, 0px) + var(--magnet-x)), calc(var(--offset-y, -200px) + var(--magnet-y)));
    }
    50% {
        transform: translate(-50%, -50%) translate(calc(var(--offset-x, 0px) + var(--magnet-x)), calc(var(--offset-y, -200px) - 12px + var(--magnet-y)));
    }
    100% {
        transform: translate(-50%, -50%) translate(calc(var(--offset-x, 0px) + var(--magnet-x)), calc(var(--offset-y, -200px) + var(--magnet-y)));
    }
}
.node-one {
    --offset-x: 0px;
    --offset-y: -220px;
    --node-accent-rgb: 99, 102, 241;
    animation-delay: 0s;
}
.node-two {
    --offset-x: 190px;
    --offset-y: -90px;
    --node-accent-rgb: 129, 140, 248;
    animation-delay: 1s;
}
.node-three {
    --offset-x: 150px;
    --offset-y: 160px;
    --node-accent-rgb: 109, 40, 217;
    animation-delay: 2s;
}
.node-four {
    --offset-x: -150px;
    --offset-y: 160px;
    --node-accent-rgb: 147, 51, 234;
    animation-delay: 3s;
}
.node-five {
    --offset-x: -190px;
    --offset-y: -90px;
    --node-accent-rgb: 168, 85, 247;
    animation-delay: 4s;
}
@media (max-width: 1024px) {
    .proof-node {
        width: 160px;
        height: 160px;
        padding: 1.25rem;
    }
}
@media (max-width: 640px) {
    .proof-holo {
        width: 100%;
    }
    .proof-node {
        position: static;
        transform: none !important;
        animation: none;
        width: 100%;
        height: auto;
        margin-bottom: 1rem;
    }
    .proof-orbit {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .proof-holo::before,
    .proof-holo::after,
    .proof-core {
        display: none;
    }
    .proof-visual {
        gap: 1.5rem;
    }
}
*/
/* END OLD BUBBLE CLOUD STYLES */

.problem-chart-mobile .mobile-quadrant-card {
    border-radius: 20px;
    padding: 1.75rem 1.75rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--inv-bg-color) 3%, transparent) 0%,
        color-mix(in srgb, var(--inv-bg-color) 1%, transparent) 100%);
    border: 1.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: min(100%, 520px);
    margin-inline: auto;
    position: relative;
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
}

.mobile-quadrant-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--inv-bg-color) 12%, transparent) 50%,
        transparent 100%);
    pointer-events: none;
}

.mobile-card-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--inv-bg-color);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.mobile-card-bullets {
    margin: 0;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--inv-bg-color);
    list-style: none;
}

.mobile-card-bullets > li {
    list-style-type: none;
    padding-left: 0;
}

.mobile-card-bullet-label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--inv-bg-color) !important;
    opacity: 0.5;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.mobile-card-sublist {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    font-size: 1rem;
    color: var(--inv-bg-color);
    opacity: 0.75;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    line-height: 1.5;
}

.mobile-card-sublist li {
    padding-left: 1.25rem;
    position: relative;
}

.mobile-card-sublist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--inv-bg-color);
    opacity: 0.35;
}

.mobile-quadrant-highlight {
    background: linear-gradient(135deg,
        var(--blurple) 0%,
        var(--lightblue) 100%);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
        0 8px 32px rgba(99, 102, 241, 0.35),
        0 4px 16px rgba(56, 189, 248, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: scale(1.02);
}

.mobile-quadrant-highlight::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.25) 50%,
        transparent 100%);
}

.mobile-quadrant-highlight .mobile-card-bullets,
.mobile-quadrant-highlight .mobile-card-title,
.mobile-quadrant-highlight .mobile-card-bullet-label,
.mobile-quadrant-highlight .mobile-card-sublist {
    color: #ffffff;
}

.mobile-quadrant-highlight .mobile-card-title {
    color: var(--blurple) !important;
}

.mobile-quadrant-highlight .mobile-card-bullet-label {
    opacity: 0.85;
}

.mobile-quadrant-highlight .mobile-card-sublist {
    opacity: 0.95;
}

.mobile-quadrant-highlight .mobile-card-sublist li::before {
    background: #ffffff;
    opacity: 0.75;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* Complexity Axis Color Coding */
/* Offering axis - Purple */
.mobile-card-bullets > li:first-child .mobile-card-sublist li:first-child {
    color: var(--purple);
    font-weight: 600;
}

.mobile-card-bullets > li:first-child .mobile-card-sublist li:first-child::before {
    background: var(--purple);
    opacity: 0.8;
    box-shadow: 0 0 6px rgba(168, 85, 247, 0.4);
}

/* Customer axis - Blue */
.mobile-card-bullets > li:first-child .mobile-card-sublist li:nth-child(2) {
    color: var(--lightblue);
    font-weight: 600;
}

.mobile-card-bullets > li:first-child .mobile-card-sublist li:nth-child(2)::before {
    background: var(--lightblue);
    opacity: 0.8;
    box-shadow: 0 0 6px rgba(99, 179, 237, 0.4);
}

/* Override for CustomerNode highlighted card - keep axis colors */
.mobile-quadrant-highlight .mobile-card-bullets > li:first-child .mobile-card-sublist li:first-child {
    color: var(--purple);
}

.mobile-quadrant-highlight .mobile-card-bullets > li:first-child .mobile-card-sublist li:nth-child(2) {
    color: var(--lightblue);
}

.mobile-quadrant-highlight .mobile-card-bullets > li:first-child .mobile-card-sublist li:first-child::before {
    background: var(--purple);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.7);
}

.mobile-quadrant-highlight .mobile-card-bullets > li:first-child .mobile-card-sublist li:nth-child(2)::before {
    background: var(--lightblue);
    box-shadow: 0 0 10px rgba(99, 179, 237, 0.7);
}

/* Low complexity - reduced opacity */
.mobile-card-sublist li[data-complexity="low"] {
    opacity: 0.35;
}

.mobile-card-sublist li[data-complexity="low"]::before {
    opacity: 0.3;
}

.cartesian-chart {
    --chart-node-radius: 0.75rem;
    padding: clamp(1.5rem, 3vw, 2.75rem);
}

.cartesian-chart .cartesian-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "buyer-orchestration active-zone"
        "transactional mass-custom";
    /* column-gap: clamp(0.35rem, 0.8vw, 1.15rem); */
    /* row-gap: clamp(0.35rem, 0.8vw, 1.15rem); */
    gap: 2px;
    align-items: stretch;
    min-height: 360px;
    padding: clamp(1rem, 2vw, 2.25rem);
}

.cartesian-grid.reveal-from-bottom.is-revealed {
    background: transparent !important;
    border: none !important;
}

.cartesian-chart .cartesian-grid::before,
.cartesian-chart .cartesian-grid::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 1;
}

.cartesian-chart .cartesian-grid::before {
    z-index: 0;
    top: clamp(0.5rem, 1vw, 1rem);
    bottom: clamp(0.5rem, 1vw, 1rem);
    left: 50%;
    width: 2px;
    background: linear-gradient(180deg, transparent 0%, rgba(148, 163, 184, 0.4) 30%, rgba(148, 163, 184, 0.35) 70%, transparent 100%);
    transform: translateX(-50%);
}

.cartesian-chart .cartesian-grid::after {
    z-index: 0;
    left: clamp(0.5rem, 1vw, 1rem);
    right: clamp(0.5rem, 1vw, 1rem);
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.4) 30%, rgba(148, 163, 184, 0.35) 70%, transparent 100%);
    transform: translateY(-50%);
}

.cartesian-chart .chart-axis {
    text-transform: uppercase;
    font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    font-weight: 600;
    z-index: 3;
    color: var(--inv-bg-color);
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.cartesian-chart .chart-axis span {
    white-space: nowrap;
    /* background: rgba(255, 255, 255, 0.9); */
    color: var(--inv-bg-color);
    /* padding: 0.35rem 0.9rem; */
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.axis-direction {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--inv-bg-color) !important;
    opacity: 1;
}

.axis-direction svg {
    width: 18px;
    height: 18px;
    stroke: var(--inv-bg-color) !important;
    stroke-width: 2.5;
    flex-shrink: 0;
}

/* Rotate Y-axis arrow for vertical context */
.chart-axis-y .axis-direction svg {
    transform: rotate(-90deg);
}

.cartesian-chart .chart-axis-y {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    left: clamp(-0.25rem, 0.5vw, 0.5rem);
    top: 50%;
    translate: 0 -50%;
}

#customer_complexity_svg{
    transform: rotate(180deg) !important;
}

.cartesian-chart .chart-axis-x {
    left: 50%;
    bottom: clamp(-0.25rem, 0.5vw, 0.5rem);
    transform: translateX(-50%);
}

.cartesian-chart .chart-quadrant {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    height: 100%;
    padding: clamp(0.75rem, 1vw, 1.4rem);
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    min-height: 120px;
    z-index: 1;
}

.cartesian-chart .quadrant-buyer-orchestration,
.cartesian-chart .active-quadrant {
    padding-bottom: clamp(1.5rem, 2vw, 2.5rem);
}

.chart-quadrant.quadrant-customernode.active-quadrant{
    transform: translate(15px, -15px);
    opacity: 1 !important;
}

.cartesian-chart .quadrant-transactional,
.cartesian-chart .quadrant-mass-custom {
    padding-top: clamp(1.5rem, 2vw, 2.5rem);
}

.cartesian-chart .quadrant-transactional,
.cartesian-chart .quadrant-buyer-orchestration {
    padding-right: clamp(2rem, 3vw, 3.75rem);
}

.cartesian-chart .quadrant-mass-custom,
.cartesian-chart .active-quadrant {
    padding-left: clamp(2rem, 3vw, 3.75rem);
}

.cartesian-chart .quadrant-title {
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--inv-bg-color);
    opacity: 0.65;
}

.quadrant-coords {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    font-size: 0.42rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--inv-bg-color);
}

.quadrant-coords .coord {
    white-space: nowrap;
    color: var(--inv-bg-color);
}

.chart-quadrant .quadrant-coords {
    order: 99;
    margin-top: auto;
    width: 100%;
    justify-content: space-between;
    row-gap: 0.35rem;
    padding-top: 0.75rem;
}

.cartesian-chart .active-quadrant .quadrant-coords {
    color: var(--inv-bg-color);
}

.cartesian-chart .quadrant-meta {
    font-size: 0.42rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--inv-bg-color) !important;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cartesian-chart .chart-quadrant:hover .quadrant-meta {
    opacity: 0.65;
}

.cartesian-chart .quadrant-nodes {
    margin: 0;
    padding: 0;
    display: block;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--inv-bg-color);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cartesian-chart .chart-quadrant:hover .quadrant-nodes {
    opacity: 0.9;
}

.cartesian-chart .quadrant-customernode {
    opacity: 1;
}

.cartesian-chart .active-quadrant .quadrant-meta {
    opacity: 0.9;
    color: #fff !important;
}

.cartesian-chart .active-quadrant .quadrant-nodes {
    opacity: 0.95;
    color: #fff !important;
}

.cartesian-chart .quadrant-nodes-inline {
    font-weight: 500;
    letter-spacing: 0.01em;
}

.cartesian-chart .quadrant-nodes--stacked {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cartesian-chart .quadrant-nodes--stacked .quadrant-line {
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.cartesian-chart .quadrant-transactional,
.cartesian-chart .quadrant-mass-custom,
.cartesian-chart .quadrant-buyer-orchestration {
    background: transparent;
    opacity: 0.6;
    filter: saturate(0.3);
    transition: opacity 0.4s ease, filter 0.4s ease;
}

.cartesian-chart .quadrant-transactional:hover,
.cartesian-chart .quadrant-mass-custom:hover,
.cartesian-chart .quadrant-buyer-orchestration:hover {
    opacity: 0.7;
    filter: saturate(0.6);
}

.cartesian-chart .quadrant-transactional {
    grid-area: transactional;
}

.cartesian-chart .quadrant-mass-custom {
    grid-area: mass-custom;
}

.cartesian-chart .quadrant-buyer-orchestration {
    grid-area: buyer-orchestration;
}

.cartesian-chart .active-quadrant {
    grid-area: active-zone;
}

.desc-text-hero{
    max-width: 570px !important;
    letter-spacing: 0.02em;
    color: var(--inv-bg-color) !important;
    opacity: 0.8;
}

.cartesian-chart .active-quadrant {
    border-color: transparent;
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%),
                linear-gradient(160deg, rgba(79,70,229,0.85) 0%, rgba(99,102,241,0.75) 50%, rgba(139,92,246,0.8) 100%),
                var(--main-bg-color);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border-radius: 20px;
    border: none;
    position: relative;
    color: var(--inv-bg-color);
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.15),
                0 0 80px rgba(139, 92, 246, 0.08),
                0 32px 80px rgba(15, 23, 42, 0.35),
                0 16px 40px rgba(15, 23, 42, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translate(8px, -8px) scale(1.045);
    z-index: 2;
    overflow: hidden;
}

.cartesian-chart .active-quadrant::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 128px 128px;
    opacity: 0.02;
    pointer-events: none;
    mix-blend-mode: overlay;
    border-radius: inherit;
}

.cartesian-chart .active-quadrant::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(139,92,246,0.4), rgba(99,102,241,0.25));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.cartesian-chart .active-quadrant .quadrant-title,
.cartesian-chart .active-quadrant .chart-node {
    color: var(--inv-bg-color);
    opacity: 0.95;
}

.cartesian-chart .active-quadrant .chart-node {
    color: var(--inv-bg-color);
}

.cartesian-chart .active-quadrant .quadrant-title {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #fff;
    color: #fff;
    font-weight: 800;
}

.cartesian-chart .active-quadrant .chart-node {
    border: none;
    background: transparent;
    font-weight: 700;
    opacity: 1;
    font-size: 0.72rem;
}

.cartesian-chart .active-quadrant .chart-node::before {
    background: var(--inv-bg-color);
}

.cartesian-chart .active-quadrant .quadrant-meta {
    opacity: 0.9;
    color: #fff !important;
}

.cartesian-chart .active-quadrant .chart-node:hover {
    filter: brightness(1.05);
}

@keyframes cnPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.45);
    }

    70% {
        box-shadow: 0 0 35px 12px rgba(99, 102, 241, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }
}

.problem-chart-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(115px, 1fr));
    grid-template-areas:
        "highBuyerLowOffer highBuyerHighOffer"
        "lowBuyerLowOffer lowBuyerHighOffer";
    gap: clamp(1rem, 1.4vw, 1.5rem);
    padding: clamp(1rem, 1.8vw, 1.7rem);
    background: var(--main-bg-color);
    border-radius: 36px;
    border: none;
    box-shadow: none;
    overflow: hidden;
}

.problem-chart-grid::before,
.problem-chart-grid::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background: rgba(99, 102, 241, 0.15);
}

.problem-chart-grid::before {
    top: clamp(1rem, 3vw, 2.25rem);
    bottom: clamp(1rem, 3vw, 2.25rem);
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
}

.problem-chart-grid::after {
    left: clamp(1rem, 3vw, 2.25rem);
    right: clamp(1rem, 3vw, 2.25rem);
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.chart-axis {
    position: absolute;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.45em;
    color: var(--inv-bg-color);
    opacity: 0.8;
    font-weight: 800;
    z-index: 3;
}

.chart-axis span {
    white-space: nowrap;
}

.chart-axis-y {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    left: clamp(0.25rem, 1vw, 1rem);
    top: 50%;
    translate: 0 -50%;
}

.chart-axis-x {
    left: 50%;
    bottom: clamp(0.5rem, 1vw, 1rem);
    transform: translateX(-50%);
}

.chart-quadrant {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-height: 138px;
    padding: clamp(0.85rem, 1.2vw, 1.25rem);
    border-radius: 24px;
    border: 1px solid rgba(99, 102, 241, 0.15);
    background: var(--main-bg-color);
    opacity: 0.5;
    box-shadow: 0 22px 40px rgba(99, 102, 241, 0.15);
    backdrop-filter: blur(15px);
    transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
    z-index: 1;
}

.chart-quadrant p {
    margin: 0;
}

.chart-quadrant:hover {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 30px 60px rgba(99, 102, 241, 0.25);
    opacity: 1;
}

.chart-quadrant::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    pointer-events: none;
    transition: border-color 0.3s ease, opacity 0.3s ease;
}

.chart-quadrant:hover::after {
    border-color: rgba(129, 140, 248, 0.4);
    opacity: 0.9;
}

.chart-quadrant .quadrant-title {
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--inv-bg-color);
    opacity: 0.9;
    line-height: 1.25;
    width: min-content;
    max-width: min-content;
    text-align: left;
}

.chart-quadrant .quadrant-meta {
    font-size: 0.6rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--inv-bg-color) !important;
    opacity: 0.8;
    margin-top: -0.05rem;
    margin-bottom: 0.1rem;
}

.cartesian-chart .quadrant-transactional,
.cartesian-chart .quadrant-mass-custom,
.cartesian-chart .quadrant-buyer-orchestration,
.cartesian-chart .quadrant-customernode,
.cartesian-chart .active-quadrant {
    padding: clamp(0.85rem, 1.2vw, 1.25rem);
}

.chart-quadrant .quadrant-nodes,
.chart-quadrant .quadrant-examples {
    font-size: 0.94rem;
    line-height: 1.45;
    color: var(--inv-bg-color);
    opacity: 0.85;
    gap: 0.35rem;
}

.chart-quadrant *:not(.quadrant-coords){
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.problem-chart-grid .quadrant-transactional,
.problem-chart-grid .quadrant-mass-custom,
.problem-chart-grid .quadrant-buyer-orchestration,
.problem-chart-grid .quadrant-customernode,
.problem-chart-grid .active-quadrant {
    padding: clamp(0.95rem, 1.35vw, 1.45rem);
}

.quadrant-amazon {
    grid-area: lowBuyerLowOffer;
    background: linear-gradient(165deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.12));
}

.quadrant-vistaprint {
    grid-area: lowBuyerHighOffer;
    background: linear-gradient(165deg, rgba(244, 114, 182, 0.22), rgba(244, 114, 182, 0.12));
}

.quadrant-calendly {
    grid-area: highBuyerLowOffer;
    background: linear-gradient(165deg, rgba(165, 180, 252, 0.24), rgba(165, 180, 252, 0.12));
}

.quadrant-customernode {
    grid-area: highBuyerHighOffer;
    border-color: rgba(79, 70, 229, 0.35);
    box-shadow: 0 25px 45px rgba(79, 70, 229, 0.3);
    background: linear-gradient(130deg, #3730a3, #7c3aed, #6366f1);
    color: #f8fafc;
}

.quadrant-customernode h3,
.quadrant-customernode .quadrant-tag,
.quadrant-customernode .quadrant-examples li {
    color: var(--inv-bg-color);
}

.quadrant-customernode:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 15px 30px rgba(79, 70, 229, 0.18);
}

.chart-quadrant.quadrant-customernode.active-quadrant {
    transform: translate(15px, -15px);
    opacity: 1 !important;
}

/* Keep text untouched on CN quadrant hover — override general hover rules */
.cartesian-chart .quadrant-customernode:hover .quadrant-meta {
    opacity: 0.9;
    color: #fff !important;
}

.cartesian-chart .quadrant-customernode:hover .quadrant-nodes {
    opacity: 0.95;
    color: #fff !important;
}

.quadrant-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(15, 23, 42, 0.25);
}

.rounded-4xl {
    border-radius: 2.5rem;
}

.quadrant-examples {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.92rem;
    color: var(--inv-bg-color);
    display: grid;
    gap: 0.35rem;
    line-height: 1.4;
}

.quadrant-examples li {
    position: relative;
    padding-left: 1.25rem;
    opacity: 0.9;
}

.quadrant-examples li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65rem;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--inv-bg-color);
}

.problem-chart-grid .chart-quadrant:not(.quadrant-customernode) .quadrant-examples li::before {
    background: rgba(15, 23, 42, 0.7);
    box-shadow: 0 0 6px rgba(15, 23, 42, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.quadrant-examples-highlight li:first-child {
    font-weight: 700;
}

@media (max-width: 768px) {
    .problem-chart {
        padding-bottom: 4rem;
    }

    .chart-axis {
        letter-spacing: 0.2em;
    }

    .chart-axis-y {
        left: auto;
        right: 1rem;
    }

    .chart-axis-x {
        bottom: 0.5rem;
    }

    .problem-copy {
        padding: 2rem;
    }

    .share-copy {
        padding: 2rem;
    }

    .problem-chart-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "highBuyerLowOffer"
            "highBuyerHighOffer"
            "lowBuyerLowOffer"
            "lowBuyerHighOffer";
    }

    .cartesian-chart {
        padding-bottom: 4rem;
    }

    .cartesian-chart .cartesian-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .cartesian-chart .chart-axis-y {
        left: auto;
        right: 0.5rem;
    }

    .cartesian-chart .chart-axis span {
        font-size: 0.5rem;
        letter-spacing: 0.2em;
    }
}

@media (max-width: 800px) {
    .problem-chart {
        padding: 0.5rem;
        min-height: auto;
        margin-top: 60px;
    }

    .problem-chart-mobile {
        display: none !important;
    }

    .cartesian-chart .cartesian-grid {
        display: grid;
        min-height: auto;
        padding: 0;
        gap: 2px;
    }

    .cartesian-chart .chart-axis {
        display: flex;
    }

    .cartesian-chart .chart-axis span {
        font-size: 0.5rem;
        letter-spacing: 0.15em;
        padding: 0.2rem 0.5rem;
    }

    .cartesian-chart .chart-axis-y {
        left: -25px;
        width: fit-content;
    }

    .cartesian-chart .chart-axis-x {
        bottom: -30px;
    }

    .cartesian-chart .quadrant-title {
        font-size: 0.65rem;
        word-spacing: 100vw;
    }

    .cartesian-chart .quadrant-nodes {
        font-size: 0.45rem;
    }

    .cartesian-chart .quadrant-nodes--stacked .quadrant-line {
        font-size: 0.6rem;
        padding: 0;
    }

    .cartesian-chart .chart-quadrant {
        padding: clamp(0.6rem, 0.5vw, 0.7rem) 0.4rem;
        gap: 0.4rem;
    }

    .problem-section .problem-copy .quadrant-meta {
        font-size: 0.5rem;
    }

    .quadrant-coords {
        font-size: 0.35rem;
        justify-content: center;
        align-items: center;
    }

    .chart-quadrant.quadrant-customernode.active-quadrant {
        transform: translate(-9px, -20px) !important;
        scale: 1.2;
    }

    .navigator-ring .ring-nav-chevron,
    .navigator-ring .ring-nav-counter {
        bottom: -30px !important;
    }

    .chart-quadrant > * {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .problem-copy {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        backdrop-filter: none !important;
    }
}

@media (max-width: 640px) {
    .problem-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .problem-copy {
        padding: clamp(1.4rem, 6vw, 1.8rem);
        border-radius: 24px;
    }

    .share-copy {
        padding: clamp(1.4rem, 6vw, 1.8rem);
        border-radius: 24px;
    }

    .problem-chart {
        border-radius: 28px;
    }

    .problem-chart-grid {
        gap: 0.85rem;
        padding: 1rem;
    }

    .problem-chart-grid::before,
    .problem-chart-grid::after {
        display: none;
    }

    .cartesian-chart .cartesian-grid::before,
    .cartesian-chart .cartesian-grid::after {
        opacity: 0.3;
    }

    .cartesian-chart .cartesian-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .problem-chart-grid {
        grid-template-columns: 1fr;
    }

    .chart-quadrant {
        min-height: auto;
    }

    .chart-quadrant .quadrant-title {
        width: 100%;
        max-width: none;
    }

    .quadrant-coords {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .problem-copy {
        padding: 1.2rem;
    }

    .share-copy {
        padding: 1.2rem;
    }

    .problem-pill {
        letter-spacing: 0.3em;
    }

    .chart-quadrant .quadrant-nodes,
    .chart-quadrant .quadrant-examples {
        font-size: 0.85rem;
    }
}

@media (max-width: 500px) {
    .stage-progress-card {
        min-width: 90vw;
        padding: 20px !important;
        z-index: 1000;
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--inv-bg-color) 8%, transparent) 0%,
            color-mix(in srgb, var(--inv-bg-color) 4%, transparent) 100%) !important;
        backdrop-filter: blur(20px) saturate(1.2) !important;
        -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
        border: 1px solid color-mix(in srgb, var(--inv-bg-color) 15%, transparent) !important;
        box-shadow:
            0 12px 40px rgba(0, 0, 0, 0.15),
            0 8px 24px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        position: relative;
        transform: translateZ(50px);
    }
}

.glass {
    /* background: rgba(15, 15, 20, 0.7); */
    /* backdrop-filter: blur(12px); */
    /* border: 1px solid rgba(255, 255, 255, 0.1); */
    box-shadow: var(--headerShadow);
    background-color: var(--main-bg-color) !important;
    color: var(--inv-bg-color) !important;
}

.stage-label {
    color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent) !important;
    font-size: 9px;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}

/* Tiny horizontal stage header */
.stage-header-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    padding-bottom: 0.35rem;
    margin-bottom: 0.35rem;
    gap: 0.6rem;
    border-bottom: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
}

.currStage {
    color: var(--lightblue) !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-shadow: none;
    font-size: 11px;
    opacity: 1;
    text-transform: uppercase;
    white-space: nowrap;
    min-width: 70px;
    flex-shrink: 0;
    text-align: left;
}

.currStage.is-transitioning {
    opacity: 0;
    transform: scale(0.55);
}

/* Stage context positioned at bottom left of navigator ring */
.stage-context {
    position: absolute;
    bottom: -8px;
    left: 150px;
    color: var(--inv-bg-color);
    font-size: 8.5px;
    opacity: 0.5;
    font-weight: 500;
    letter-spacing: 0.04em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    text-transform: none;
    white-space: nowrap;
}

/* Inline subtle progress bar */
.stage-header-row .stage-progress-bar {
    display: block;
    position: relative;
    overflow: visible;
    height: 15px;
    width: 80px;
    flex-shrink: 0;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--purple) 8%, transparent);
    margin-left: auto;
    align-self: flex-start;
    margin-top: 0px;
}

.stage-header-row .stage-progress-fill {
    display: block;
    height: 100%;
    width: var(--bar-width, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--lightblue) 50%, transparent),
        color-mix(in srgb, var(--blurpleblue) 50%, transparent));
    transition: width 0.5s ease-in-out;
}

.stage-header-row .stage-progress-percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 1px));
    font-size: 10px;
    font-weight: 600;
    color: var(--inv-bg-color);
    opacity: 0.6;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

.navigator-ring svg,
.navigator-ring svg *{
    color: var(--inv-bg-color) !important ;
}


.hero.particles .hero-gradient {
    background:
        radial-gradient(ellipse 80% 40% at 50% 95%, color-mix(in srgb, var(--purple) 8%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 50% 30% at 35% 85%, color-mix(in srgb, var(--purple) 4%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 40% 25% at 65% 90%, color-mix(in srgb, var(--blurple) 3%, transparent) 0%, transparent 55%),
        linear-gradient(180deg, var(--main-bg-color) 0%, var(--main-bg-color) 50%, var(--off-bg-color) 100%);
    background-size: 100% 100%;
    animation: none;
}

.hero.particles .hero-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 128px 128px;
    opacity: 0.025;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--inv-bg-color);
    opacity: 0.65;
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent);
    margin-bottom: 1.5rem;
    text-decoration: none !important;
    cursor: pointer;
    transition: opacity 0.3s ease, border-color 0.3s ease;
}

.hero-tag:hover {
    opacity: 1;
    border-color: color-mix(in srgb, var(--purple) 30%, transparent);
}

.hero-tag-inline {
    display: none;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .hero-tag-inline {
        display: inline-flex;
    }
    .hero-tag:not(.hero-tag-inline) {
        display: none;
    }
}

.hero-tag-gradient {
    margin-left: 0.3em;
    background: linear-gradient(160deg, var(--blurpleblue), var(--blurple), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    opacity: 1;
}

a.hero-tag-gradient {
    margin-left: 0;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

a.hero-tag-gradient:hover {
    opacity: 0.8;
}

.hero-headline {
    font-family: var(--brand-font);
    font-size: 2.4rem;
    margin-bottom: 1rem;
    max-width: 20ch;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-weight: 600 !important;
    color: var(--inv-bg-color);
}

.hero .desc-text-hero {
    margin-bottom: 2rem !important;
    font-size: 0.85rem !important;
    max-width: 28rem !important;
    line-height: 1.7;
    letter-spacing: 0.015em;
    color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent) !important;
}

.hero-kicker-inline {
    text-decoration: none !important;
    color: inherit !important;
}

.hero-kicker-inline .hero-kicker-term {
    font-weight: 600;
}

.hero .hero-btn-minimal {
    font-size: 0.9rem;
}

@media (max-width: 767px) {
    .hero-headline {
        font-size: 2rem;
    }
    .hero .hero-btn-minimal[href="#problem"] {
        display: none;
    }
    .hero-scroll-cue {
        display: none;
    }
    .hero-tag {
        display: none;
    }
    .hero-text-link[href="#problem"] {
        display: inline-flex;
    }
}


/* ---- Hero text gradient shimmer ---- */
.hero h1 .bg-gradient-to-r {
    background-size: 200% 100%;
    animation: heroTextShimmer 5s ease-in-out infinite;
}

.glow-border:hover {
    border-color: #6366f1;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
}

.navigator-ring {
    --navigator-size: clamp(300px, calc(100vw - 40px), 580px);
    --node-distance: calc(var(--navigator-size) / 2 - 2px);
    width: var(--navigator-size);
    height: var(--navigator-size);
    position: relative;
    filter:
        drop-shadow(0 2px 8px color-mix(in srgb, var(--inv-bg-color) 6%, transparent))
        drop-shadow(0 0 60px color-mix(in srgb, var(--purple) 6%, transparent));
    /* transform: perspective(1000px) rotateX(18deg); */
}

/* Navigation chevrons - positioned on stage-progress-card */
.stage-progress-card {
    position: relative;
}

/* Navigation buttons positioned at bottom right of navigator ring */
.navigator-ring .ring-nav-chevron {
    position: absolute;
    bottom: -20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    border-radius: 10px;
    cursor: pointer;
    opacity: 0.3;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s ease;
    z-index: 10;
    pointer-events: auto;
}

.navigator-ring .ring-nav-chevron:hover {
    opacity: 0.6;
    background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    border-color: color-mix(in srgb, var(--inv-bg-color) 20%, transparent);
    transform: scale(1.05);
}

.navigator-ring .ring-nav-chevron svg {
    width: 20px;
    height: 20px;
    stroke: var(--inv-bg-color);
    stroke-width: 2.5;
}

.navigator-ring .ring-nav-prev {
    right: 52px;
}

.navigator-ring .ring-nav-counter {
    position: absolute;
    bottom: -20px;
    right: 46px;
    transform: translateX(50%);
    color: var(--inv-bg-color);
    font-size: 11px;
    opacity: 0.4;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.02em;
    height: 40px;
    display: flex;
    align-items: center;
}

.navigator-ring .ring-nav-next {
    right: 0px;
}

/* ---- Tick marks around the ring (watch bezel style) ---- */
.navigator-ring-ticks {
    display: none ;
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background:
        repeating-conic-gradient(
            from 0deg,
            transparent 0deg,
            transparent 2deg,
            color-mix(in srgb, var(--inv-bg-color) 15%, transparent) 2deg,
            color-mix(in srgb, var(--inv-bg-color) 15%, transparent) 3deg,
            transparent 3deg,
            transparent 6deg
        );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 12px), #000 calc(100% - 2px), transparent calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 12px), #000 calc(100% - 2px), transparent calc(100% - 2px));
    opacity: 0.3;
}

/* ---- Ecosystem connector lines — infrastructure hint ---- */
.navigator-ring-connectors {
    position: absolute;
    inset: -40px;
    pointer-events: none;
    z-index: 0;
}

.navigator-ring-connectors::before,
.navigator-ring-connectors::after,
.navigator-connector-line {
    content: "";
    position: absolute;
    width: 1px;
    height: 60px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--inv-bg-color) 8%, transparent) 0%,
        transparent 100%);
    opacity: 0.15;
}

.navigator-ring-connectors::before {
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotate(25deg);
    transform-origin: top center;
}

.navigator-ring-connectors::after {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(-35deg);
    transform-origin: bottom center;
}

.navigator-connector-line {
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(15deg);
    transform-origin: right center;
}

.navigator-ring-track {
    position: absolute;
    inset: 0;
    /* To restore spin: animation: spin 80s linear infinite; */
}

/* ---- Primary ring — segmented precision dial ---- */
.navigator-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* Render a thin (1px) ring: remove border and rely on masked conic-gradient */
    border: none;
    background: conic-gradient(
        var(--green) 0deg 0deg,
        color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 0deg 360deg
    );

    /* Mask out the center to make a 1px ring band */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px), transparent 100%);
            mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px), transparent 100%);

    box-shadow:
        0 0 4px color-mix(in srgb, var(--green) 6%, transparent),
        inset 0 0 3px color-mix(in srgb, var(--secondary-grey-color) 4%, transparent);
    /* To restore spin: animation: spin 80s linear infinite; */

    transition: background 1s cubic-bezier(0.4, 0, 0.2, 1);

    /* ensure ring paints above the inner fill */
    z-index: 2;
}

/* Stage progress classes - green fills to active node */
.navigator-ring--progress-0::before {
    background: conic-gradient(
        var(--green) 0deg 0deg,
        color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 0deg 360deg
    );
}

.navigator-ring--progress-1::before {
    background: conic-gradient(
        var(--green) 0deg,
        var(--lightblue) 60deg,
        color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 60deg 360deg
    );
}

.navigator-ring--progress-2::before {
    background: conic-gradient(
        var(--green) 0deg 40deg,
        var(--lightblue) 120deg,
        color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 120deg 360deg
    );
}

.navigator-ring--progress-3::before {
    background: conic-gradient(
        var(--green) 0deg 100deg,
        var(--lightblue) 180deg,
        color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 180deg 360deg
    );
}

.navigator-ring--progress-4::before {
    background: conic-gradient(
        var(--green) 0deg 180deg,
        var(--lightblue) 240deg,
        color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 240deg 360deg
    );
}

.navigator-ring--progress-5::before {
    background: conic-gradient(
        var(--green) 0deg 220deg,
        var(--lightblue) 300deg,
        color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 300deg 360deg
    );
}

/* 4-stage progress ring (90-degree increments) */
[data-stage-count="4"].navigator-ring--progress-0::before {
    background: conic-gradient(
        var(--green) 0deg 0deg,
        color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 0deg 360deg
    );
}

[data-stage-count="4"].navigator-ring--progress-1::before {
    background: conic-gradient(
        var(--green) 0deg,
        var(--lightblue) 90deg,
        color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 90deg 360deg
    );
}

[data-stage-count="4"].navigator-ring--progress-2::before {
    background: conic-gradient(
        var(--green) 0deg 60deg,
        var(--lightblue) 180deg,
        color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 180deg 360deg
    );
}

[data-stage-count="4"].navigator-ring--progress-3::before {
    background: conic-gradient(
        var(--green) 0deg 150deg,
        var(--lightblue) 270deg,
        color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 270deg 360deg
    );
}

/* 5-stage progress ring (72-degree increments) */
[data-stage-count="5"].navigator-ring--progress-0::before {
    background: conic-gradient(
        var(--green) 0deg 0deg,
        color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 0deg 360deg
    );
}

[data-stage-count="5"].navigator-ring--progress-1::before {
    background: conic-gradient(
        var(--green) 0deg,
        var(--lightblue) 72deg,
        color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 72deg 360deg
    );
}

[data-stage-count="5"].navigator-ring--progress-2::before {
    background: conic-gradient(
        var(--green) 0deg 50deg,
        var(--lightblue) 144deg,
        color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 144deg 360deg
    );
}

[data-stage-count="5"].navigator-ring--progress-3::before {
    background: conic-gradient(
        var(--green) 0deg 120deg,
        var(--lightblue) 216deg,
        color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 216deg 360deg
    );
}

[data-stage-count="5"].navigator-ring--progress-4::before {
    background: conic-gradient(
        var(--green) 0deg 190deg,
        var(--lightblue) 288deg,
        color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 288deg 360deg
    );
}

.navigator-ring::after {
    content: "";
    position: absolute;
    /* inset matches the 1px ring so inner fill sits flush inside */
    inset: 1px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 80% 80% at 50% 50%,
            transparent 55%,
            color-mix(in srgb, var(--purple) 4%, transparent) 75%,
            color-mix(in srgb, var(--purple) 6%, transparent) 90%,
            transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* ---- Sweeping arc light — blurple→purple scanning effect ---- */
/* .navigator-ring::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 260deg,
        color-mix(in srgb, var(--blurple) 4%, transparent) 280deg,
        color-mix(in srgb, var(--blurple) 35%, transparent) 330deg,
        color-mix(in srgb, var(--purple) 60%, transparent) 350deg,
        color-mix(in srgb, var(--blurple) 4%, transparent) 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px), #000 100%, transparent 100%);
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px), #000 100%, transparent 100%);
    animation: spin 4s linear infinite;
    filter: blur(0.5px);
} */

/* ---- Transit particles (fire on stage change, node → node) ---- */
.nav-transit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: var(--purple);
    box-shadow: 0 0 8px 3px color-mix(in srgb, var(--purple) 70%, transparent), 0 0 24px color-mix(in srgb, var(--blurple) 40%, transparent), 0 0 40px color-mix(in srgb, var(--purple) 15%, transparent);
    pointer-events: none;
    animation: navTransit 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.nav-transit:nth-child(2) { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; animation-delay: 0.08s; }
.nav-transit:nth-child(3) { width: 2px; height: 2px; margin: -1px 0 0 -1px; animation-delay: 0.16s; opacity: 0.7; }

@keyframes navTransit {
    0%   { transform: rotate(var(--from-angle)) translateY(calc(-1 * var(--node-distance))); opacity: 0; }
    12%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: rotate(var(--to-angle)) translateY(calc(-1 * var(--node-distance))); opacity: 0; }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes counter-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .navigator-ring::before,
    .navigator-ring::after {
        animation: none;
    }

    .navigator-ring-track,
    .stage-node-face {
        animation: none;
    }

    .nav-transit,
    .stage-burst {
        display: none;
    }


    .navigator-ring-arc2,
    .navigator-ring-motes {
        display: none;
    }

    .hero.particles .hero-gradient {
        animation: none;
    }

    .hero h1 .bg-gradient-to-r {
        animation: none;
    }
}

/* ---- Stage-change burst wave ---- */
.stage-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(139, 120, 248, 0.6);
    box-shadow: 0 0 15px rgba(139, 120, 248, 0.3), inset 0 0 10px rgba(139, 120, 248, 0.1);
    animation: burstExpand 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
}

@keyframes burstExpand {
    0%   { width: 100%; height: 100%; opacity: 0.8; box-shadow: 0 0 20px rgba(139, 120, 248, 0.4), inset 0 0 15px rgba(139, 120, 248, 0.15); }
    100% { width: 280%; height: 280%; opacity: 0; box-shadow: 0 0 4px rgba(139, 120, 248, 0); }
}

/* ---- Center core glow — minimal premium halo ---- */
.navigator-ring-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 55%;
    height: 55%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--blurple) 4%, transparent) 0%, color-mix(in srgb, var(--purple) 1.5%, transparent) 45%, transparent 70%);
    animation: ringCoreBreath 3.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes ringCoreBreath {
    0%, 100% { opacity: 0.12; transform: translate(-50%, -50%) scale(0.85); }
    50% { opacity: 0.3; transform: translate(-50%, -50%) scale(1.15); }
}

/* ---- Circle micro-label — centered inside ring ---- */
.navigator-ring-micro-label {
    position: absolute;
    bottom: -10px;
    left: 0;
    z-index: 2;
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--inv-bg-color);
    opacity: 0.55;
    pointer-events: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.micro-label-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    animation: microPulse 2s ease-in-out infinite;
}

@keyframes microPulse {
    0%, 100% { opacity: 0.4; box-shadow: 0 0 0 0 transparent; }
    50% { opacity: 1; box-shadow: 0 0 6px 2px color-mix(in srgb, var(--green) 40%, transparent); }
}

/* ---- Secondary sweeping arc — counter-rotating, fainter ---- */
.navigator-ring-arc2 {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: conic-gradient(
        from 180deg,
        transparent 0deg,
        transparent 290deg,
        color-mix(in srgb, var(--purple) 1%, transparent) 315deg,
        color-mix(in srgb, var(--purple) 10%, transparent) 345deg,
        color-mix(in srgb, var(--blurple) 20%, transparent) 356deg,
        color-mix(in srgb, var(--purple) 1%, transparent) 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px), #000 100%, transparent 100%);
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px), #000 100%, transparent 100%);
    /* To restore counter-spin: animation: counter-spin 6.5s linear infinite; */
    filter: blur(0.8px);
    pointer-events: none;
    z-index: 0;
}

/* ---- Completion arc — green 1px ring following active node ---- */
.navigator-ring-completion-arc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from -90deg,
        var(--green) 0%,
        var(--green) calc(var(--completion-percent, 0) * 1%),
        transparent calc(var(--completion-percent, 0) * 1%)
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px), #000 100%, transparent 100%);
            mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px), #000 100%, transparent 100%);
    pointer-events: none;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.6s ease;
}

.navigator-ring[data-completion-percent]:not([data-completion-percent="0"]) .navigator-ring-completion-arc {
    opacity: 1;
}

/* ---- Ambient orbiting motes — DISABLED for precision instrument look ---- */
.navigator-ring-motes {
    display: none; /* Removed: no sparkles/particles for category-king design */
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.navigator-ring-motes i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--mote-size, 2px);
    height: var(--mote-size, 2px);
    margin: calc(var(--mote-size, 2px) / -2) 0 0 calc(var(--mote-size, 2px) / -2);
    border-radius: 50%;
    background: color-mix(in srgb, var(--blurple) 80%, var(--purple));
    box-shadow: 0 0 6px 1px color-mix(in srgb, var(--blurple) 35%, transparent);
    animation:
        moteOrbit var(--mote-dur, 18s) linear infinite,
        motePulse var(--mote-fade, 6s) ease-in-out infinite;
    animation-delay: var(--mote-delay, 0s);
}

.navigator-ring-motes i:nth-child(1) { --mote-dur: 18s; --mote-fade: 5s; --mote-r: calc(var(--node-distance) * -0.82); --mote-size: 2px; --mote-delay: 0s; }
.navigator-ring-motes i:nth-child(2) { --mote-dur: 25s; --mote-fade: 7s; --mote-r: calc(var(--node-distance) * -1.08); --mote-size: 1.5px; --mote-delay: -5s; }
.navigator-ring-motes i:nth-child(3) { --mote-dur: 14s; --mote-fade: 4.5s; --mote-r: calc(var(--node-distance) * -0.65); --mote-size: 2.5px; --mote-delay: -9s; }
.navigator-ring-motes i:nth-child(4) { --mote-dur: 22s; --mote-fade: 8s; --mote-r: calc(var(--node-distance) * -1.15); --mote-size: 1.5px; --mote-delay: -12s; }
.navigator-ring-motes i:nth-child(5) { --mote-dur: 30s; --mote-fade: 9s; --mote-r: calc(var(--node-distance) * -0.55); --mote-size: 2px; --mote-delay: -3s; }
.navigator-ring-motes i:nth-child(6) { --mote-dur: 20s; --mote-fade: 6s; --mote-r: calc(var(--node-distance) * -0.95); --mote-size: 1px; --mote-delay: -16s; }

@keyframes moteOrbit {
    from { transform: rotate(0deg) translateY(var(--mote-r)); }
    to   { transform: rotate(360deg) translateY(var(--mote-r)); }
}

@keyframes motePulse {
    0%, 15%, 85%, 100% { opacity: 0; }
    35%, 65% { opacity: 0.6; }
    50% { opacity: 0.8; }
}

/* ---- Hero background ambient drift ---- */
@keyframes heroBgDrift {
    0%, 100% { background-position: 40% 40%, 60% 60%, 0 0; }
    33% { background-position: 60% 35%, 40% 55%, 0 0; }
    66% { background-position: 45% 60%, 55% 40%, 0 0; }
}

/* ---- Hero text gradient shimmer ---- */
@keyframes heroTextShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ---- Ring border breath ---- */
@keyframes ringBorderBreath {
    0%, 100% {
        box-shadow:
            0 0 15px rgba(99, 102, 241, 0.12),
            0 0 40px rgba(139, 92, 246, 0.06),
            inset 0 0 15px rgba(99, 102, 241, 0.06);
        border-color: rgba(99, 102, 241, 0.25);
    }
    50% {
        box-shadow:
            0 0 25px rgba(99, 102, 241, 0.22),
            0 0 60px rgba(139, 92, 246, 0.12),
            inset 0 0 25px rgba(99, 102, 241, 0.1);
        border-color: rgba(129, 120, 248, 0.38);
    }
}

.stage-node {
    --node-angle: 0deg;
    --stage-node-color: var(--inv-bg-color);
    --node-transform: translate(-50%, -50%) rotate(var(--node-angle)) translateY(calc(-1 * var(--node-distance))) rotate(calc(-1 * var(--node-angle)));
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent) !important;
    box-shadow:
        0 2px 8px color-mix(in srgb, var(--inv-bg-color) 4%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 3%, transparent) !important;
    transform: var(--node-transform);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease,
                background 0.3s ease,
                border-color 0.3s ease;
    color: var(--stage-node-color) !important;
    /* opacity: 0.6; */
    z-index: 999999;
}

.stage-node svg,
.stage-node svg * {
    color: var(--stage-node-color) !important;
    margin: 0px !important;
    width: 0.95rem;
    height: 0.95rem;
    transition: 0.3s all;
}

.stage-node-face {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* To restore counter-spin: animation: counter-spin 80s linear infinite; */
}

.stage-node-index {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--stage-node-color);
}

.stage-node.is-active {
    opacity: 1 !important;
    background: color-mix(in srgb, var(--lightblue) 4%, transparent) !important;
    border: 0.5px solid color-mix(in srgb, var(--blurple) 15%, transparent) !important;
    box-shadow:
        0 4px 16px color-mix(in srgb, var(--blurple) 8%, transparent),
        0 2px 8px color-mix(in srgb, var(--inv-bg-color) 4%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 4%, transparent) !important;
    transform: var(--node-transform) scale(1);
    animation: none;
}

@keyframes activeNodePulse {
    0%, 100% {
        box-shadow:
            0 0 30px color-mix(in srgb, var(--purple) 40%, transparent),
            0 0 60px color-mix(in srgb, var(--blurple) 25%, transparent),
            0 0 90px color-mix(in srgb, var(--purple) 10%, transparent),
            0 12px 30px color-mix(in srgb, var(--blurple) 30%, transparent),
            inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 15%, transparent),
            0 0 0 1px color-mix(in srgb, var(--blurple) 45%, transparent) !important;
    }
    50% {
        box-shadow:
            0 0 40px color-mix(in srgb, var(--purple) 55%, transparent),
            0 0 80px color-mix(in srgb, var(--blurple) 30%, transparent),
            0 0 110px color-mix(in srgb, var(--purple) 15%, transparent),
            0 12px 30px color-mix(in srgb, var(--blurple) 30%, transparent),
            inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 20%, transparent),
            0 0 0 1px color-mix(in srgb, var(--blurple) 55%, transparent) !important;
    }
}

.stage-node.is-active *{
    color: color-mix(in srgb, var(--lightblue) 50%, var(--lightblue)) !important;
}

.white{
    color: var(--white) !important;
}

/* Completed stage nodes: green check replaces icon */
.stage-node.is-complete .stage-node-index {
    opacity: 0;
    transform: scale(0);
}

.stage-node.is-complete .stage-node-face::after {
    content: "\2713";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--green) 40%, var(--green) 60%);
    line-height: 1;
}

.stage-node.is-complete{
    /* background: color-mix(in srgb, var(--main-bg-color) 98%, var(--main-bg-color) 2%) !important; */
    border: 0.5px solid color-mix(in srgb, var(--green) 8%, transparent) !important;
    opacity: 1 !important;
}

/* Default 6-stage positioning (60deg apart) */
.stage-node[data-stage-index="0"] {
    --node-angle: 0deg;
}

.stage-node[data-stage-index="1"] {
    --node-angle: 60deg;
}

.stage-node[data-stage-index="2"] {
    --node-angle: 120deg;
}

.stage-node[data-stage-index="3"] {
    --node-angle: 180deg;
}

.stage-node[data-stage-index="4"] {
    --node-angle: 240deg;
}

.stage-node[data-stage-index="5"] {
    --node-angle: 300deg;
}

/* 4-stage positioning (90deg apart) */
[data-stage-count="4"] .stage-node[data-stage-index="0"] {
    --node-angle: 0deg;
}

[data-stage-count="4"] .stage-node[data-stage-index="1"] {
    --node-angle: 90deg;
}

[data-stage-count="4"] .stage-node[data-stage-index="2"] {
    --node-angle: 180deg;
}

[data-stage-count="4"] .stage-node[data-stage-index="3"] {
    --node-angle: 270deg;
}

/* 5-stage positioning (72deg apart) */
[data-stage-count="5"] .stage-node[data-stage-index="0"] {
    --node-angle: 0deg;
}

[data-stage-count="5"] .stage-node[data-stage-index="1"] {
    --node-angle: 72deg;
}

[data-stage-count="5"] .stage-node[data-stage-index="2"] {
    --node-angle: 144deg;
}

[data-stage-count="5"] .stage-node[data-stage-index="3"] {
    --node-angle: 216deg;
}

[data-stage-count="5"] .stage-node[data-stage-index="4"] {
    --node-angle: 288deg;
}

/* ========== STAGE NODE MICRO-PREVIEWS ========== */
.stage-node-face {
    position: relative;
    flex-direction: column;
    gap: 0;
}

.stage-node-preview {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%) scale(0.3);
    opacity: 0;
    width: 44px;
    height: 28px;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.stage-node-preview svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}


.stage-node .stage-node-index {
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.stage-node.is-active .stage-node-index {
    opacity: 0;
    transform: scale(0.5);
}

.stage-node.is-active .stage-node-preview {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0.1s;
}

/* ---- Base hidden state for all animated strokes ---- */
.disc-line, .disc-ring, .disc-cardinal,
.scope-box, .scope-line, .scope-chk,
.commit-sig,
.deploy-bar,
.collab-deploy-bar,
.success-ring, .success-chk {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.disc-dot, .disc-needle {
    opacity: 0;
}

.exp-eye {
    opacity: 0;
    transform: translateY(0);
}

.collab-deploy-text, .collab-deploy-bar-4, .collab-deploy-bar-5 {
    opacity: 0;
}


/* ---- Motion keyframes ---- */

/* Smooth stroke draw */
@keyframes pvDraw {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}

/* Dot appearance */
@keyframes pvDotIn {
    from { opacity: 0; }
    to   { opacity: 0.85; }
}

/* Experience eye shift up and fade */
@keyframes expEyeShiftUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to   {
        opacity: 0;
        transform: translateY(-8px);
    }
}

/* Experience eye reveal from below */
@keyframes expEyeReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to   {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Organic signature — variable velocity, pen-pressure feel */
@keyframes pvSig {
    0%   { stroke-dashoffset: 1; }
    30%  { stroke-dashoffset: 0.5; }
    65%  { stroke-dashoffset: 0.12; }
    100% { stroke-dashoffset: 0; }
}

/* Decisive check stroke */
@keyframes pvCheck {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}

/* Breathing dot pulse */
@keyframes pvDotPulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.6); opacity: 1; }
}

/* Deploy bars turn green on completion */
@keyframes deployGreen {
    from { stroke: currentColor; }
    to   { stroke: #10b981; }
}

/* Compass needle wobble */
@keyframes discNeedleWobble {
    0%   { transform: rotate(0deg); }
    15%  { transform: rotate(-25deg); }
    35%  { transform: rotate(20deg); }
    55%  { transform: rotate(-15deg); }
    75%  { transform: rotate(10deg); }
    90%  { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

/* Scope tuner handle slides */
@keyframes scopeTune1 {
    0%   { transform: translateY(7px); }
    35%  { transform: translateY(-9px); }
    65%  { transform: translateY(3px); }
    85%  { transform: translateY(-1px); }
    100% { transform: translateY(0); }
}
@keyframes scopeTune2 {
    0%   { transform: translateY(-8px); }
    30%  { transform: translateY(6px); }
    60%  { transform: translateY(-3px); }
    80%  { transform: translateY(1px); }
    100% { transform: translateY(0); }
}
@keyframes scopeTune3 {
    0%   { transform: translateY(6px); }
    40%  { transform: translateY(-7px); }
    70%  { transform: translateY(2px); }
    100% { transform: translateY(0); }
}

/* ---- DISCOVERY — compass with wobbling needle ---- */
.stage-node.is-active .disc-ring { animation: pvDraw 0.5s 0.08s cubic-bezier(0.16,1,0.3,1) both; }
.stage-node.is-active .disc-cardinal { animation: pvDraw 0.3s 0.35s cubic-bezier(0.16,1,0.3,1) both; }
.stage-node.is-active .disc-needle { animation: pvDotIn 0.2s 0.5s cubic-bezier(0.34,1.56,0.64,1) both, discNeedleWobble 1.2s 0.7s cubic-bezier(0.34,1.56,0.64,1) both; }

/* ---- EXPERIENCE — two-layer eye reveal ---- */
.stage-node.is-active .exp-eye-1    { animation: expEyeShiftUp 0.6s 0.08s cubic-bezier(0.16,1,0.3,1) both; }
.stage-node.is-active .exp-eye-2    { animation: expEyeReveal 0.6s 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }

/* ---- SCOPE — tuner tracks draw then handles slide into position ---- */
.stage-node.is-active .scope-box-1  { animation: pvDraw 0.3s 0.08s cubic-bezier(0.22,1,0.36,1) both; }
.stage-node.is-active .scope-line-1 { animation: pvDraw 0.3s 0.14s cubic-bezier(0.16,1,0.3,1) both, scopeTune1 0.7s 0.4s cubic-bezier(0.22,1,0.36,1) both; }
.stage-node.is-active .scope-box-2  { animation: pvDraw 0.3s 0.22s cubic-bezier(0.22,1,0.36,1) both; }
.stage-node.is-active .scope-line-2 { animation: pvDraw 0.3s 0.28s cubic-bezier(0.16,1,0.3,1) both, scopeTune2 0.7s 0.55s cubic-bezier(0.22,1,0.36,1) both; }
.stage-node.is-active .scope-box-3  { animation: pvDraw 0.3s 0.36s cubic-bezier(0.22,1,0.36,1) both; }
.stage-node.is-active .scope-line-3 { animation: pvDraw 0.3s 0.42s cubic-bezier(0.16,1,0.3,1) both, scopeTune3 0.7s 0.7s cubic-bezier(0.22,1,0.36,1) both; }

/* ---- COMMIT — organic signature flow ---- */
.stage-node.is-active .commit-sig    { animation: pvSig  0.85s 0.45s cubic-bezier(0.16,1,0.3,1)  both; }

/* ---- DEPLOY — gantt bars with spring-bounce stagger ---- */
.stage-node.is-active .deploy-bar-1 { animation: pvDraw 0.5s 0.1s  cubic-bezier(0.34,1.56,0.64,1) both; }
.stage-node.is-active .deploy-bar-2 { animation: pvDraw 0.5s 0.28s cubic-bezier(0.34,1.56,0.64,1) both; }
.stage-node.is-active .deploy-bar-3 { animation: pvDraw 0.5s 0.46s cubic-bezier(0.34,1.56,0.64,1) both; }

/* ---- COLLABORATION SPACE DEPLOY — 6-step scope removal sequence ---- */
/* Trigger these when Deploy stage is active in collab space */
.collab-deploy-viz.is-active .collab-deploy-bar-1 { animation: pvDraw 0.4s 0s cubic-bezier(0.34,1.56,0.64,1) both; }
.collab-deploy-viz.is-active .collab-deploy-bar-2 { animation: collabDeployBar2Sequence 3s 0s both; }
.collab-deploy-viz.is-active .collab-deploy-bar-3 { animation: collabDeployBar3Sequence 3s 0s both; }
.collab-deploy-viz.is-active .collab-deploy-bar-4 { animation: collabDeployBar4Appear 0.4s 1.2s cubic-bezier(0.34,1.56,0.64,1) both; }
.collab-deploy-viz.is-active .collab-deploy-bar-5 { animation: collabDeployBar5Appear 0.4s 2.5s cubic-bezier(0.34,1.56,0.64,1) both; }
.collab-deploy-viz.is-active .collab-deploy-remove-text { animation: collabDeployRemoveText 3s 0s both; }
.collab-deploy-viz.is-active .collab-deploy-schedule-text { animation: collabDeployScheduleText 3s 0s both; }

/* (1) Bar 2 draws in, (2) turns red, (3) fades out */
@keyframes collabDeployBar2Sequence {
    0% { stroke-dashoffset: 1; stroke: currentColor; opacity: 1; }
    13% { stroke-dashoffset: 0; stroke: currentColor; opacity: 1; }
    27% { stroke-dashoffset: 0; stroke: var(--alert-red-start); opacity: 1; }
    40%, 100% { stroke-dashoffset: 0; stroke: var(--alert-red-end); opacity: 0; }
}

/* (1) Bar 3 draws in, (3) moves up to position 2 (y=60), (5) moves left */
@keyframes collabDeployBar3Sequence {
    0% { stroke-dashoffset: 1; transform: translate(0, 0); }
    20% { stroke-dashoffset: 0; transform: translate(0, 0); }
    40% { stroke-dashoffset: 0; transform: translate(0, -30px); }
    73% { stroke-dashoffset: 0; transform: translate(0, -30px); }
    100% { stroke-dashoffset: 0; transform: translate(-20px, -30px); }
}

/* (3) Bar 4 appears as new bar 3 */
@keyframes collabDeployBar4Appear {
    0% { stroke-dashoffset: 1; opacity: 0; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}

/* (6) Bar 5 fills the space */
@keyframes collabDeployBar5Appear {
    0% { stroke-dashoffset: 1; opacity: 0; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}

/* (4) "Out of scope module removed" text */
@keyframes collabDeployRemoveText {
    0%, 49% { opacity: 0; }
    50%, 66% { opacity: 1; }
    67%, 100% { opacity: 0; }
}

/* (5) "Rescheduling..." text */
@keyframes collabDeployScheduleText {
    0%, 66% { opacity: 0; }
    67%, 82% { opacity: 1; }
    83%, 100% { opacity: 0; }
}

/* ---- SUCCESS — bug icon dances ---- */
.success-bug-dance {
    opacity: 0;
    transform-origin: center center;
}

.stage-node.is-active .success-bug-dance {
    animation: bugDanceIn 0.4s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes bugDanceIn {
    from { opacity: 0; transform: scale(0.3) rotate(-15deg); }
    to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Bug legs jiggle animation */
.stage-node.is-active .bug-legs {
    transform-origin: 12px 14px;
    animation: bugLegsJiggle 0.8s ease-in-out infinite;
}

.stage-node.is-active .bug-legs-top {
    animation-delay: 0.5s;
}

.stage-node.is-active .bug-legs-mid {
    animation-delay: 0.6s;
}

.stage-node.is-active .bug-legs-bot {
    animation-delay: 0.7s;
}

@keyframes bugLegsJiggle {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-2deg); }
    50%      { transform: rotate(2deg); }
    75%      { transform: rotate(-1deg); }
}

@media (prefers-reduced-motion: reduce) {
    .stage-node-preview { display: none; }
}

.stage-progress-card {
    pointer-events: none;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--inv-bg-color) 4%, transparent) 0%,
            color-mix(in srgb, var(--inv-bg-color) 2%, transparent) 100%) !important;
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent) !important;
    border-radius: 20px !important;
    box-shadow:
        0 2px 8px color-mix(in srgb, var(--inv-bg-color) 5%, transparent),
        0 8px 32px color-mix(in srgb, var(--inv-bg-color) 3%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 5%, transparent) !important;
    z-index: 5;
    width: clamp(276px, 60%, 380px) !important;
    padding: clamp(14px, 4%, 22px) !important;
    transform: scale(1);
    opacity: 1;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.25s ease;
}

.stage-progress-card.is-collapsing {
    transform: scale(0);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.55, 0, 1, 0.45),
                opacity 0.25s ease;
}

.stage-progress-card.is-expanding {
    transform: scale(1);
    opacity: 1;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.3s ease 0.05s;
}

.stage-progress-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1.5px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--blurpleblue) 50%, transparent),
        color-mix(in srgb, var(--purple) 30%, transparent));
    opacity: 0.5;
    z-index: 1;
}

.stage-progress-bar {
    display: none;
    position: relative;
    overflow: hidden;
    height: 10px;
    border-radius: 9999px;


}

.stage-progress-fill {
    display: block;
    height: 100%;
    width: var(--bar-width, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blurple), var(--purple));
    /* box-shadow: 0 0 10px rgba(120, 115, 245, 0.35); */
    transition: width 0.5s ease-in-out;
}

.stage-progress-card .rounded-full{
    margin: 20px 0 0 0 !important;
    background: none;
    border: none;
    font-size: 12px !important;
    color: var(--inv-bg-color);
    opacity: 0.8;
    height: 10px;
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
}

.stage-progress-card .rounded-full * {
    fill: var(--inv-bg-color) !important;
}

.powered-by{
    font-size: 10px !important;
    color: var(--inv-bg-color);
}

.stage-progress-card svg{
    margin-right: -5px !important;
}

.stage-participants {
    margin-top: 0.5rem;
}

.participants-label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.5;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.participants-grid {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: flex-start;
}

.participant-side {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow: visible;
}

.participant-side-label {
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.4;
    font-weight: 600;
    text-align: left;
}

.participant-chips {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
}

.participant-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 6px;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--inv-bg-color);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
    opacity: 0.75;
    box-shadow:
        0 1px 4px color-mix(in srgb, var(--inv-bg-color) 3%, transparent),
        inset 0 0.5px 0 color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.participant-chip.is-accent {
    opacity: 0.75;
}

.participant-avatar {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--inv-bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--main-bg-color);
    font-size: 4.5px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    line-height: 1;
    padding-top: 0;
}

/* Varying shades for avatars - purple, blurple, and pink */
.participant-chip[data-color-index="0"] .participant-avatar {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.7), rgba(124, 58, 237, 0.7));
    color: #fff;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.15);
}

.participant-chip[data-color-index="1"] .participant-avatar {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.7), rgba(79, 70, 229, 0.7));
    color: #fff;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.15);
}

.participant-chip[data-color-index="2"] .participant-avatar {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.7), rgba(147, 51, 234, 0.7));
    color: #fff;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.15);
}

.participant-chip[data-color-index="3"] .participant-avatar {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.7), rgba(219, 39, 119, 0.7));
    color: #fff;
    box-shadow: 0 0 8px rgba(236, 72, 153, 0.15);
}

.participant-chip[data-color-index="4"] .participant-avatar {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.7), rgba(37, 99, 235, 0.7));
    color: #fff;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.15);
}

.participant-chip[data-color-index="5"] .participant-avatar {
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.7), rgba(225, 29, 155, 0.7));
    color: #fff;
    box-shadow: 0 0 8px rgba(244, 114, 182, 0.15);
}

.participant-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.participant-name {
    font-size: 8px;
    font-weight: 500;
    color: var(--inv-bg-color);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.participant-title {
    font-size: 7px;
    color: var(--inv-bg-color);
    opacity: 0.65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.participant-chip.is-entering {
    animation: chipEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.participant-chip.is-leaving {
    animation: chipLeave 0.2s cubic-bezier(0.4, 0, 0.6, 1) both;
}

@keyframes chipEnter {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 0.75;
        transform: scale(1);
    }
}

@keyframes chipLeave {
    from {
        opacity: 0.75;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.5);
    }
}

.participant-chip.is-accent.is-entering {
    animation: chipEnterAccent 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes chipEnterAccent {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 0.75;
        transform: scale(1);
    }
}


.stage-bottom-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Collaboration Space */
.stage-collaboration {
    flex: 66;
    min-width: 0;
    overflow: hidden;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--inv-bg-color) 2%, transparent) 0%,
        color-mix(in srgb, var(--inv-bg-color) 1%, transparent) 100%);
    border-radius: 8px;
}

.collaboration-label {
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.4;
    margin-bottom: 3px !important;
    font-weight: 600;
    text-align: left;
}

.collaboration-items {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.collaboration-items:has(.scope-toggle) {
    min-height: 110px;
}

.collaboration-item:nth-child(1) { z-index: 3; }
.collaboration-item:nth-child(2) { z-index: 2; }
.collaboration-item:nth-child(3) { z-index: 1; }

.collaboration-item {
    height: 32px;
    padding: 0 10px 0 22px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    box-shadow:
        0 1px 4px color-mix(in srgb, var(--inv-bg-color) 3%, transparent),
        inset 0 0.5px 0 color-mix(in srgb, var(--inv-bg-color) 4%, transparent);
    border-radius: 6px;
    font-size: 9px;
    color: var(--inv-bg-color);
    opacity: 0.8;
    text-align: left;
    line-height: 1;
    position: relative;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                margin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.collaboration-item::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blurple), var(--purple));
    opacity: 0.6;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.collaboration-item.is-working {
    overflow: visible;
    white-space: normal;
    line-height: 1.3;
    align-items: flex-start;
    padding-top: 5px;
    padding-bottom: 4px;
    transform: translateY(-3px);
}

/* Utility: hide elements without inline .style */
.is-hidden { display: none !important; }
.is-faded { opacity: 0; transition: opacity 0.3s ease; }

/* Discovery: typing dots via JS element instead of ::before */
.collaboration-item.discovery-item::before {
    display: none;
}

.discovery-dots {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--lightblue);
    width: 20px;
    opacity: 0.3;
    transition: all 0.2s ease;
}

.collaboration-item.discovery-item.is-working .discovery-dots {
    color: var(--lightblue);
    opacity: 0.7;
}

.collaboration-item.discovery-item.is-completed .discovery-dots {
    color: #22c55e;
    opacity: 1;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    animation: checkPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.discovery-label {
    transition: opacity 0.2s ease;
}

.discovery-label.is-fading {
    opacity: 0;
}

.discovery-label.is-answered {
    opacity: 1;
    font-weight: 600;
}

/* Experience: calendar → pulsing dot → green check */
.collaboration-item.experience-meeting.is-working .meeting-icon {
    border-radius: 50%;
    background: var(--lightblue);
    box-shadow: 0 0 6px color-mix(in srgb, var(--lightblue) 60%, transparent);
    opacity: 1;
    animation: livePulse 1s ease-in-out infinite;
}

.collaboration-item.experience-meeting.is-working .meeting-icon svg {
    display: none;
}

.collaboration-item.experience-meeting.is-working::before {
    display: none;
}

.collaboration-item.experience-meeting.is-completed .meeting-icon {
    border-radius: 50%;
    background: #22c55e;
    box-shadow: none;
    opacity: 1;
    animation: none;
}

.collaboration-item.experience-meeting.is-completed .meeting-icon svg {
    display: none;
}

.collaboration-item.experience-meeting.is-completed .meeting-icon::after {
    content: '✓';
    font-size: 7px;
    font-weight: 900;
    color: #fff;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(239, 68, 68, 0.4); }
    50% { opacity: 0.5; box-shadow: 0 0 10px rgba(239, 68, 68, 0.8); }
}

/* Default spinner (fallback) */
.collaboration-item.is-working::before {
    width: 10px;
    height: 10px;
    background: none;
    border: 2px solid color-mix(in srgb, var(--lightblue) 30%, transparent);
    border-top-color: var(--lightblue);
    box-shadow: none;
    opacity: 1;
    animation: spinWork 0.6s linear infinite;
}

@keyframes spinWork {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(360deg); }
}

.collab-activity {
    position: absolute;
    left: 22px;
    top: calc(71% - 4px);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 8px;
    font-weight: 700;
    color: var(--lightblue);
    opacity: 0;
    transition: opacity 0.25s ease;
    letter-spacing: 0.02em;
    max-width: 120px;
}

.collab-activity.is-visible {
    opacity: 1;
}

.activity-text {
    transition: opacity 0.15s ease, transform 0.15s ease;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.activity-text.is-swapping {
    opacity: 0;
    transform: translateY(-2px);
}

.activity-dots::after {
    content: '...';
    display: inline-block;
    animation: typingDots 1s steps(4, end) infinite;
    width: 0;
    overflow: hidden;
    vertical-align: bottom;
}

@keyframes typingDots {
    0% { width: 0; }
    100% { width: 12px; }
}

.ai-working-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 280px;
}

.ai-working-text {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--inv-bg-color);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.collaboration-item.is-completed::before {
    content: '✓';
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: #22c55e;
    opacity: 1;
    animation: checkPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes checkPop {
    0% {
        transform: translateY(-50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translateY(-50%) scale(1.4);
        opacity: 1;
    }
    100% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }
}

.collaboration-item:hover {
    opacity: 0.9;
    border-color: color-mix(in srgb, var(--inv-bg-color) 10%, transparent);
}

.collaboration-item.is-entering {
    animation: itemEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.collaboration-item.is-leaving {
    animation: itemLeave 0.2s cubic-bezier(0.4, 0, 0.6, 1) both;
}

@keyframes itemEnter {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 0.8;
        transform: scale(1);
    }
}

/* Scope toggles in collaboration space */
.collaboration-item.scope-toggle {
    padding-left: 36px;
}

.collaboration-item.scope-toggle::before {
    display: none;
}

.scope-toggle-switch {
    width: 24px;
    height: 12px;
    background: color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    border-radius: 8px;
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    transition: background 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 20%, transparent);
}

.scope-toggle-switch::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: color-mix(in srgb, var(--inv-bg-color) 60%, transparent);
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0.5px 2px color-mix(in srgb, var(--inv-bg-color) 10%, transparent);
}

.scope-toggle-switch.is-on {
    background: linear-gradient(90deg, var(--blurple), var(--purple));
    border-color: var(--blurple);
}

.scope-toggle-switch.is-on::before {
    left: calc(100% - 8px);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.scope-toggle-label {
    font-size: 9px;
    color: var(--inv-bg-color);
    opacity: 0.8;
    flex: 1;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.collaboration-item.scope-toggle.is-fading-out {
    opacity: 0;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}

/* Scope agent suggestion */
.collaboration-item.scope-agent-suggestion {
    padding-left: 12px;
    gap: 8px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(99, 102, 241, 0.08));
    border: 1px solid rgba(139, 92, 246, 0.2);
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.collaboration-item.scope-agent-suggestion::before {
    display: none;
}

.collaboration-item.scope-agent-suggestion.is-entering {
    opacity: 1;
    transform: translateY(0);
}

.scope-agent-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scope-agent-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--blurple);
    opacity: 0.9;
}

.scope-agent-text {
    font-size: 8.5px;
    color: var(--blurple);
    font-weight: 600;
    letter-spacing: 0.02em;
    flex: 1;
}

/* Deploy three-row auto-scheduling - inherits all from .collaboration-item */

.collaboration-item.deploy-gantt {
    padding-left: 12px;
    position: relative;
}
.collaboration-item.deploy-gantt::before {
    display: none;
}

.deploy-gantt-timeline {
    width: 100%;
    height: 8px;
    background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
    border-radius: 4px;
    position: relative;
}

.deploy-gantt-bar {
    position: absolute;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--blurple), var(--lightblue));
    border-radius: 4px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Deploy bar positions */
.deploy-bar-1 { left: 0%; width: 45%; }
.deploy-bar-2 { left: 30%; width: 50%; }
.deploy-bar-3 { left: 55%; width: 25%; }
.deploy-bar-3-rescheduled { left: 25%; width: 35%; }
.deploy-bar-4 { left: 50%; width: 40%; }

.deploy-gantt-bar.is-animating {
    transform: scaleX(1);
}
.deploy-gantt-bar.is-collapsing {
    transform: scaleX(0);
    transition: transform 0.35s cubic-bezier(0.55, 0, 1, 0.45);
}
.deploy-gantt-bar.is-error {
    background: linear-gradient(90deg, var(--alert-red-start), var(--alert-red-end));
    animation: errorPulse 0.4s ease-out;
}
.deploy-gantt-bar.is-rescheduled {
    left: 45%;
    transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.deploy-gantt-relative { position: relative; }
.deploy-text-overlay {
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    z-index: 10;
}

/* Scope label fade */
.scope-toggle-label {
    transition: opacity 0.25s ease;
}
.scope-toggle-label.is-fading {
    opacity: 0;
}

/* Commit icon complete */
.commit-row-icon.is-complete {
    opacity: 1;
    color: #22c55e;
}

.commit-row-icon.is-complete svg {
    stroke: #22c55e;
}

/* Deploy sequence row (row 3) */
.collaboration-item.deploy-sequence-row {
    position: relative;
    padding: 10px 12px;
    min-height: 38px;
    display: flex;
    align-items: center;
}

.collaboration-item.deploy-sequence-row::before {
    display: none;
}

.deploy-sequence-bar {
    position: absolute;
    height: 8px;
    background: linear-gradient(90deg, var(--blurple), var(--lightblue));
    border-radius: 4px;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.deploy-sequence-bar.is-visible {
    opacity: 1;
    transform: scale(1);
}

.deploy-sequence-bar.is-error {
    background: linear-gradient(90deg, var(--alert-red-start), var(--alert-red-end));
    animation: errorPulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes errorPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

.deploy-sequence-text {
    font-size: 8px;
    color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent);
    font-weight: 500;
    text-align: center;
    width: 100%;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.deploy-sequence-text.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.deploy-sequence-text.deploy-rescheduling {
    color: var(--blurple);
    font-weight: 600;
}

/* Success: Bug resolution with state transitions */
.collaboration-item.success-resolve {
    padding-left: 4px;
}
.collaboration-item.success-resolve::before {
    display: none;
}

.success-state-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 18px;
}

.success-state {
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.success-state.is-visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.success-state.is-hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

/* Bug state */
.success-bug {
    display: flex;
    align-items: center;
    gap: 8px;
}

.success-bug svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    stroke: var(--inv-bg-color);
    opacity: 0.7;
}

.success-bug-text {
    font-size: 9px;
    color: var(--inv-bg-color);
    opacity: 0.7;
    font-weight: 500;
    white-space: nowrap;
}

/* Working state */
.success-working-state {
    display: flex;
    align-items: center;
    gap: 8px;
}

.success-resolver {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-resolver.auto-solve svg,
.success-resolver.sync svg,
.success-resolver.team-respond svg {
    width: 100%;
    height: 100%;
    stroke: var(--blurple);
    opacity: 0.7;
}

.success-resolver.team-member {
    min-width: 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), var(--blurple));
    font-size: 7px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
}

.success-status-text {
    font-size: 9px;
    color: var(--inv-bg-color);
    opacity: 0.7;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Check resolved state */
.success-check-state {
    display: flex;
    align-items: center;
    gap: 8px;
}

.success-check-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.success-check-icon svg {
    width: 100%;
    height: 100%;
    stroke: #22c55e;
    stroke-width: 2.5;
}

.success-resolved-text {
    font-size: 9px;
    color: #22c55e;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Discovery conversation with Smart Conversation agent */
.collaboration-item.discovery-convo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
}

.collaboration-item.discovery-convo::before {
    display: none;
}

.discovery-participant {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), var(--blurple));
    flex-shrink: 0;
    position: relative;
}

.discovery-participant::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    background: var(--inv-bg-color);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.discovery-participant.is-talking::after {
    opacity: 0.8;
    transform: scale(1);
    animation: pulse 1.5s ease-in-out infinite;
}

.discovery-agent {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.discovery-agent svg {
    width: 100%;
    height: 100%;
    stroke: var(--blurple);
    opacity: 0.7;
}

.discovery-agent.is-working svg {
    animation: sparkle 2s ease-in-out infinite;
}

.discovery-context {
    flex: 1;
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: flex-end;
}

.discovery-context-bar {
    width: 18%;
    height: 6px;
    background: color-mix(in srgb, var(--inv-bg-color) 10%, transparent);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.discovery-context-bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--blurple), var(--purple));
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.discovery-context-bar.is-filled::after {
    width: 100%;
}

@keyframes pulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

@keyframes sparkle {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Commit document signing with e-sign option */
/* Commit: Single document with dual signatures */
.collaboration-item.commit-document-box {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    height: auto;
    max-height: 32px;
    overflow: hidden;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--inv-bg-color) 4%, transparent),
        color-mix(in srgb, var(--inv-bg-color) 2%, transparent));
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
}

.collaboration-item.commit-document-box::before {
    display: none;
}

.commit-doc-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.commit-doc-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--inv-bg-color);
    opacity: 0.7;
}

.commit-signatures {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    overflow: hidden;
}

.commit-signature {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
}

.commit-signer-badge {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), var(--blurple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.commit-signature.seller .commit-signer-badge {
    background: linear-gradient(135deg, var(--blurple), var(--lightblue));
}

.commit-signature-line {
    flex: 1;
    height: 6px;
    background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.commit-signature-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--blurple), var(--purple));
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.commit-signature-line.is-signing::after {
    width: 100%;
}

/* ========================================
   COMMIT — Minimal Doc + Avatar + Signature
   ======================================== */

/* Row 1: Doc row */
.commit-doc-row {
    gap: 10px;
}
.commit-doc-row::before { display: none; }

.commit-row-icon {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.6;
}
.commit-row-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--inv-bg-color);
}

.commit-row-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--inv-bg-color);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.commit-row-label.is-fading {
    opacity: 0;
}

.commit-row-label.is-complete {
    opacity: 1;
    color: #22c55e;
    font-weight: 600;
}

/* Row 2 & 3: Signature rows */
.commit-sig-row {
    overflow: hidden;
}
.commit-sig-row::before { display: none; }

.commit-sig-avatar {
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--avatar-color, var(--blurple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.commit-sig-avatar.is-signed {
    background: #22c55e;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0;
}

.commit-signer-name {
    font-size: 10px;
    font-weight: 500;
    color: var(--inv-bg-color);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* Signature SVG overlay — draws over the name */
.commit-sig-overlay {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 40px);
    height: 20px;
    overflow: hidden;
    pointer-events: none;
}

.commit-sig-path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Fade name out when signing, signature draws over */
.commit-sig-row.is-signing .commit-signer-name {
    opacity: 0;
}

.commit-sig-row.is-signing .commit-sig-path {
    opacity: 1;
}

.commit-sig-path.is-drawing {
    animation: commit-sig-draw 1.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes commit-sig-draw {
    from {
        stroke-dashoffset: 1;
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    to {
        stroke-dashoffset: 0;
        opacity: 0.9;
    }
}

.commit-sig-row.is-signed .commit-sig-path {
    opacity: 0.8;
}

.commit-sig-path.is-complete {
    stroke: #22c55e;
    opacity: 1;
    transition: stroke 0.4s ease, opacity 0.3s ease;
}

/* ── Desktop typography scale for navigator ring ── */
@media (min-width: 768px) {
    /* Stage node numbers */
    .stage-node-index {
        font-size: 1.2rem;
    }

    /* Section labels — unified */
    .participant-side-label,
    .collaboration-label,
    .agents-label {
        font-size: 8px;
        letter-spacing: 0.12em;
    }

    /* Participant chips */
    .participant-chip {
        font-size: 9px;
        padding: 5px 9px;
    }
    .participant-avatar {
        font-size: 5px;
        width: 16px;
        height: 16px;
    }
    .participant-name {
        font-size: 9px;
    }

    /* Collaboration items */
    .collaboration-item {
        height: 36px;
        font-size: 10px;
        border-radius: 8px;
    }

    /* Activity indicator */
    .collab-activity {
        font-size: 9px;
    }

    /* Commit rows */
    .commit-row-label,
    .commit-signer-name {
        font-size: 11px;
    }

    /* Agent chips */
    .agent-chip-label {
        font-size: 9px;
    }

    /* Footer items */
    .stage-footer-item {
        font-size: 8.5px;
        letter-spacing: 0.1em;
    }

    /* Nav counter */
    .ring-nav-counter {
        font-size: 12px;
    }

    /* Powered-by */
    .powered-by {
        font-size: 11px;
    }

    /* Internal spacing */
    .participants-grid {
        gap: 0.75rem;
    }
    .participants-label {
        margin-bottom: 0.4rem;
    }
    .participant-side {
        gap: 0.35rem;
    }
    .participant-chips {
        gap: 3px;
    }
    .collaboration-items {
        gap: 4px;
    }
    .stage-footer {
        margin-top: 1rem;
        padding-top: 1rem;
    }
}

@keyframes itemLeave {
    from {
        opacity: 0.8;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* Experience meeting rows (same layout as Discovery) */
.collaboration-item.experience-meeting::before {
    display: none;
}

.meeting-icon {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.meeting-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--blurple);
}

/* AI Agents */
.stage-agents {
    flex: 34;
    min-width: 0;
    padding: 0rem 0.5rem 0.5rem 0.5rem;
}

.agents-label {
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.4;
    margin-bottom: 3px !important;
    font-weight: 600;
    text-align: right;
}

.agent-chips {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    margin: 0 !important;
}

.agent-chip {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: none !important;
    max-height: 26px !important;
    padding: 0 6px 0 4px !important;
    margin: 0 !important;
    background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent) !important;
    border-radius: 8px !important;
    color: var(--inv-bg-color) !important;
    opacity: 0.75;
    cursor: default;
    overflow: hidden !important;
    box-sizing: border-box !important;
    box-shadow:
        0 1px 4px color-mix(in srgb, var(--inv-bg-color) 3%, transparent),
        inset 0 0.5px 0 color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.agent-chip:hover {
    opacity: 1;
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--purple) 20%, transparent) !important;
}

.agent-chip-icon {
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0.7;
    line-height: 0 !important;
}

.agent-chip-icon svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    stroke: var(--inv-bg-color) !important;
    flex-shrink: 0 !important;
}

.agent-chip-label {
    display: block !important;
    font-size: 8px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    opacity: 0.7;
}

/* Navigate section: show icon + label on desktop, icon-only on mobile */
#navigate .agent-knowledge-bar {
    display: none !important;
}
#navigate .agent-chip {
    width: auto !important;
    max-width: none !important;
    padding: 0 6px 0 4px !important;
    gap: 5px !important;
}
#navigate .agent-chip-label {
    display: block !important;
    font-size: 8px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    opacity: 0.7;
}

/* Mobile: icon-only agent chips */
@media (max-width: 768px) {
    .agent-chip {
        width: 26px !important;
        max-width: 26px !important;
        padding: 0 !important;
        justify-content: center !important;
    }
    .agent-chip-label {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* Stage Footer */
.stage-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
}

.stage-footer-item {
    font-size: 7.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--inv-bg-color);
    opacity: 0.6;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.stage-footer-item:hover {
    opacity: 0.85;
}

.agent-knowledge-bar {
    width: 100%;
    height: 2px;
    background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    border-radius: 1px;
    margin-top: 4px;
    overflow: hidden;
}

.agent-knowledge-fill {
    height: 100%;
    width: var(--bar-width, 0%);
    background: linear-gradient(90deg, var(--blurple), var(--purple));
    border-radius: 1px;
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.agent-intel-status {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin-top: 3px;
    font-size: 8px;
    font-weight: 500;
    color: var(--inv-bg-color);
    opacity: 0;
    letter-spacing: 0.02em;
    transition: opacity 0.3s ease;
}

.agent-intel-status.is-entering {
    animation: none;
    opacity: 0.45;
}

.intel-label {
    opacity: 0.8;
}

.intel-sparkles {
    color: color-mix(in srgb, var(--blurple) 80%, var(--inv-bg-color));
    letter-spacing: 1px;
    font-size: 7px;
}

.agent-chip.is-entering {
    animation: agentEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.agent-chip.is-leaving {
    animation: agentLeave 0.2s cubic-bezier(0.4, 0, 0.6, 1) both;
}

@keyframes agentEnter {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 0.95;
        transform: scale(1);
    }
}

@keyframes agentLeave {
    from {
        opacity: 0.95;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.5);
    }
}



*,
::before,
::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */
::after,
::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
    color: var(--white);
}

::after,
::before {
    --tw-content: ''
}

:host,
html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0;
    line-height: inherit;
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
pre,
samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0
}

button,
select {
    text-transform: none
}

button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
    margin: 0
}

fieldset {
    margin: 0;
    padding: 0
}

legend {
    padding: 0
}

menu,
ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0
}

dialog {
    padding: 0
}

textarea {
    resize: vertical
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: #9ca3af
}

[role=button],
button {
    cursor: pointer
}

:disabled {
    cursor: default
}

.hero-wrapper .blurpleButtonAlt{
    border: 1px solid var(--blurple) !important;
    color: var(--blurple) !important;
    background: var(--main-bg-color) !important;
    text-decoration: none !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

}


audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
    display: block;
    vertical-align: middle
}

img,
video {
    max-width: 100%;
    height: auto
}

[hidden]:where(:not([hidden=until-found])) {
    display: none
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.inset-10 {
    inset: 2.5rem
}

.top-0 {
    top: 0px
}

.z-10 {
    z-index: 10
}

.z-50 {
    z-index: 50
}

.order-1 {
    order: 1
}

.order-2 {
    order: 2
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.mb-1 {
    margin-bottom: 0.25rem
}

.mb-10 {
    margin-bottom: 2.5rem
}

.mb-16 {
    margin-bottom: 4rem
}

.mb-2 {
    margin-bottom: 0.5rem
}

.mb-3 {
    margin-bottom: 0.75rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-6 {
    margin-bottom: 1.5rem
}

.mb-8 {
    margin-bottom: 2rem
}

.mt-4 {
    margin-top: 1rem
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.grid {
    display: grid
}

.hidden {
    display: none
}

.aspect-square {
    aspect-ratio: 1 / 1
}

.h-1\.5 {
    height: 0.375rem
}

.h-10 {
    height: 2.5rem
}

.h-12 {
    height: 3rem
}

.h-2 {
    height: 0.5rem
}

.h-20 {
    height: 5rem
}

.h-3 {
    height: 0.75rem
}

.h-4 {
    height: 1rem
}

.h-5 {
    height: 1.25rem
}

.h-8 {
    height: 2rem
}

.h-full {
    height: 100%
}

.w-1\/2 {
    width: 50%
}

.w-10 {
    width: 2.5rem
}

.w-12 {
    width: 3rem
}

.w-2\/3 {
    width: 66.666667%
}

.w-24 {
    width: 6rem
}

.w-3 {
    width: 0.75rem
}

.w-3\/4 {
    width: 75%
}

.w-4 {
    width: 1rem
}

.w-5 {
    width: 1.25rem
}

.w-64 {
    width: 16rem
}

.w-8 {
    width: 2rem
}

.w-full {
    width: 100%
}

.max-w-3xl {
    max-width: 48rem
}

.max-w-7xl {
    max-width: 80rem
}

.max-w-xl {
    max-width: 36rem
}

.flex-1 {
    flex: 1 1 0%
}

.shrink-0 {
    flex-shrink: 0
}

.translate-y-10 {
    --tw-translate-y: 2.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.translate-y-0 {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.items-center {
    align-items: center
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.gap-12 {
    gap: 3rem
}

.gap-2 {
    gap: 0.5rem
}

.gap-20 {
    gap: 5rem
}

.gap-3 {
    gap: 0.75rem
}

.gap-4 {
    gap: 1rem
}

.gap-8 {
    gap: 2rem
}

.space-y-2> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
}

.space-y-4> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}

.space-y-6> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
}

.overflow-hidden {
    overflow: hidden
}

.scroll-smooth {
    scroll-behavior: smooth
}

.rounded {
    border-radius: 0.25rem
}

.rounded-2xl {
    border-radius: 1rem
}

.rounded-3xl {
    border-radius: 1.5rem
}

.rounded-full {
    border-radius: 9999px
}

.rounded-lg {
    border-radius: 0.5rem
}

.rounded-xl {
    border-radius: 0.75rem
}

.border {
    border-width: 1px
}

.border-2 {
    border-width: 2px
}

.border-y {
    border-top-width: 1px;
    border-bottom-width: 1px
}

.border-b {
    border-bottom-width: 1px
}

.border-t {
    border-top-width: 1px
}

.border-dashed {
    border-style: dashed
}

.border-indigo-500 {
    --tw-border-opacity: 1;
    border-color: rgb(99 102 241 / var(--tw-border-opacity, 1))
}

.border-indigo-500\/20 {
    border-color: rgb(99 102 241 / 0.2)
}

.border-indigo-500\/30 {
    border-color: rgb(99 102 241 / 0.3)
}

.border-purple-500\/30 {
    border-color: rgb(168 85 247 / 0.3)
}

.border-white\/10 {
    border-color: rgb(255 255 255 / 0.1)
}

.border-white\/5 {
    border-color: rgb(255 255 255 / 0.05)
}

.border-t-transparent {
    border-top-color: transparent
}

.bg-\[\#050505\] {
    --tw-bg-opacity: 1;
    background-color: rgb(5 5 5 / var(--tw-bg-opacity, 1))
}

.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1))
}

.bg-black\/40 {
    background-color: rgb(0 0 0 / 0.4)
}

.bg-black\/50 {
    background-color: rgb(0 0 0 / 0.5)
}

.bg-indigo-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1))
}

.bg-indigo-500\/10 {
    background-color: rgb(99 102 241 / 0.1)
}

.bg-indigo-500\/20 {
    background-color: rgb(99 102 241 / 0.2)
}

.bg-indigo-600 {
    background-color: var(--purple);
}

.bg-indigo-900\/10 {
    background-color: rgb(49 46 129 / 0.1)
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.bg-white\/10 {
    background-color: rgb(255 255 255 / 0.1)
}

.bg-white\/20 {
    background-color: rgb(255 255 255 / 0.2)
}

.bg-white\/5 {
    background-color: rgb(255 255 255 / 0.05)
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops))
}

.from-indigo-400 {
    --tw-gradient-from: var(--purple) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(129 140 248 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.to-purple-400 {
    --tw-gradient-to: var(--blurple) var(--tw-gradient-to-position)
}

.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text
}

.p-2 {
    padding: 0.5rem
}

.p-3 {
    padding: 0.75rem
}

.p-4 {
    padding: 1rem
}

.p-6 {
    padding: 1.5rem
}

.p-8 {
    padding: 2rem
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem
}

.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem
}

.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem
}

.py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.pb-20 {
    padding-bottom: 5rem
}

.pt-2 {
    padding-top: 0.5rem
}

.pt-40 {
    padding-top: 10rem
}

.text-center {
    text-align: center
}

.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem
}

.text-3xl {
    font-size: 1.75rem;
    line-height: 2.5rem
}

.text-6xl {
    font-size: 3.75rem;
    line-height: 1
}

.text-\[10px\] {
    font-size: 10px
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem
}

.font-black {
    font-weight: 900
}

.font-bold {
    font-weight: 600
}

.font-extrabold {
    font-weight: 800
}

.font-medium {
    font-weight: 500
}

.uppercase {
    text-transform: uppercase
}

.italic {
    font-style: italic
}

.leading-relaxed {
    line-height: 1.625
}

.leading-tight {
    line-height: 1.25
}

.tracking-tight {
    letter-spacing: -0.025em
}

.tracking-tighter {
    letter-spacing: -0.05em
}

.tracking-widest {
    letter-spacing: 0.1em
}

.text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}

.text-blue-400 {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1))
}

.text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1))
}

.text-emerald-400 {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1))
}

.text-emerald-500 {
    --tw-text-opacity: 1;
    color: rgb(16 185 129 / var(--tw-text-opacity, 1))
}

.text-indigo-400 {
    color: var(--inv-bg-color) !important;
}

.text-indigo-500 {
    --tw-text-opacity: 1;
    color: rgb(99 102 241 / var(--tw-text-opacity, 1))
}

.text-purple-400 {
    --tw-text-opacity: 1;
    color: rgb(192 132 252 / var(--tw-text-opacity, 1))
}

.text-purple-500 {
    --tw-text-opacity: 1;
    color: rgb(168 85 247 / var(--tw-text-opacity, 1))
}

.text-slate-300 {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1))
}

.text-slate-400 {
    opacity: 0.8;
    color: var(--inv-bg-color);
}

.text-slate-500 {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1))
}

.text-slate-600 {
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1))
}

.text-transparent {
    color: transparent
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.opacity-0 {
    opacity: 0
}

.opacity-100 {
    opacity: 1
}

.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-indigo-500\/20 {
    --tw-shadow-color: rgb(99 102 241 / 0.2);
    --tw-shadow: var(--tw-shadow-colored)
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}

.transition-colors {
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}

.duration-1000 {
    transition-duration: 1000ms
}

.hoverScale105:hover{
    scale: 1.05;
}

.desc-text-hero{
    
}


.hover\:bg-indigo-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
    scale:1.05
}

.hover\:bg-white\/10:hover {
    background-color: rgb(255 255 255 / 0.1)
}

.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.md\:text-7xl{
    font-size: 3rem !important;
}

@media (min-width: 768px) {
    .md\:flex {
        display: flex
    }

    .md\:hidden {
        display: none
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .md\:flex-row {
        flex-direction: row
    }

    .md\:text-7xl {
        font-size: 3.5rem !important;
        line-height: 1
    }
}

@media (min-width: 1300px) {

    .md\:text-7xl {
        font-size: 3rem !important;
        line-height: 1
    }
}

.md\:text-5xl {
    font-size: 2.5rem !important;
    line-height: 1
}

@media (min-width:1450px) {

    .md\:text-7xl {
        font-size: 4.5rem !important;
        line-height: 1
    }

        .md\:text-5xl {
            font-size: 3rem !important;
            line-height: 1
        }
}

@media (min-width: 1024px) {

        .md\:text-5xl {
            font-size: 3rem !important;
            line-height: 1
        }

    .lg\:order-1 {
        order: 1
    }

    .lg\:order-2 {
        order: 2
    }

    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }


}


/* Stacked hero layout — mobile/tablet only */
@media (max-width: 1249px) {

    .hero.particles .hero-wrapper{
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding-top: 90px !important;
        gap: 44px !important;
    }

    .hero-pills{
        display: flex;
        justify-content: center;
    }

    h1,
    p {
        text-align: center;
    }

    .hero .reveal-from-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .flex.flex-wrap.gap-4{
        justify-content: center;
    }

    .hero-kicker {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ---- Mobile hero — vertical rhythm ---- */
    .hero h1.mb-6 {
        margin-bottom: 0.6rem !important;
    }

    .hero .hero-kicker {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        width: fit-content !important;
        background: none;
        border: none;
        padding: 0;
        box-shadow: none;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.75rem;
    }

    .hero .hero-kicker-text {
        flex-direction: row;
        align-items: baseline;
        gap: 0.35rem;
    }

    .hero .hero-kicker-icon {
        width: 18px;
        height: 18px;
        margin-right: 0;
        margin-top: 0;
        opacity: 0.85;
    }

    .hero .hero-kicker-prefix {
        font-size: 0.7rem;
        letter-spacing: 0.14em;
    }

    .hero .desc-text-hero {
        line-height: 1.7;
        letter-spacing: 0.015em;
        margin-bottom: 2rem !important;
        /* font-size: 1.05rem !important; */
    }

    .md\:text-5xl {
        font-size: 2rem !important;
    }

    .hero-wrapper .flex.gap-12 {
        justify-content: center;
        width: 100%;
        gap: 2rem;
    }

    .stage-progress-card {
        padding: 20px !important;
    }

    .py-24 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .transition-bridge {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .transition-bridge-line-top {
        font-size: clamp(1.3rem, 4.5vw, 2.8rem) !important;
        white-space: nowrap !important;
    }

    .transition-bridge-line-bottom {
        font-size: clamp(2.2rem, 6vw, 3.4rem) !important;
        white-space: nowrap !important;
    }


    .text-lg.mb-8.text-subdued {
        text-align: left !important;
        width: 100%;
        word-break: break-word;
    }

    .ai-feature-list-container {
        max-width: calc(100vw - 1.6rem) !important;
        overflow: hidden;
    }

    .ai-tool-card * {
        text-align: left !important;
    }

    .ai-tool-card {
        padding: 10px 12px !important;
    }

    .ai-tool-hint {
        padding-left: 0.8rem !important;
    }

    .px-6 {
        padding-left: 0.8rem !important;
        padding-right: 0.8rem !important;
    }

    .create-templates-section {
        border-top: none !important;
    }

    .order-2.lg\:order-1.glass {
        max-width: calc(100vw - 1.6rem) !important;
    }

    .ai-architect-card--glass {
        padding-left: 0.8rem !important;
        padding-right: 0.8rem !important;
        padding-bottom: 0.8rem !important;
    }

    [data-tool-view="default"],
    [data-tool-view="editor"],
    [data-tool-view="coach"] {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }

    .editor-prompt-bar {
        height: 220px !important;
    }

    .editor-flow-body.creator-two-col {
        height: 340px !important;
        min-height: 340px !important;
        max-height: 340px !important;
        gap: 1rem !important;
    }

    .editor-flow-body.creator-two-col .editor-circle-column {
        flex-shrink: 0 !important;
    }

    .editor-circle-chart--lg {
        width: 100px !important;
        height: 100px !important;
    }

    .editor-circle-chart--lg .editor-circle-center {
        display: none !important;
    }

    .editor-flow-body.creator-two-col .ai-process-log {
        flex: 1 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .editor-flow-body .editor-circle-chart {
        width: 100px !important;
        height: 100px !important;
    }

    .editor-flow-body .editor-circle-center {
        font-size: 0.55rem !important;
    }

    .editor-flow-body .editor-coach-btn {
        font-size: 0.6rem !important;
        padding: 0.3rem 0.6rem !important;
    }

    .editor-flow-body .editor-circle-column {
        flex-shrink: 0 !important;
    }

    .editor-flow-body {
        height: 340px !important;
        min-height: 340px !important;
        max-height: 340px !important;
        overflow: hidden !important;
    }

    .ai-process-log-status {
        display: none !important;
    }

    .coach-chat-messages {
        height: 505px !important;
        min-height: 505px !important;
        max-height: 505px !important;
        overflow-y: auto !important;
    }

    .text-xl {
        font-size: 1.1rem !important;
    }

    .text-lg {
        font-size: 1.05rem !important;
    }

    .text-xs {
        font-size: 0.6rem !important;
    }

    .md\:text-5xl {
        font-size: 1.8rem !important;
    }

    .ai-header-icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    .problem-tag {
        font-size: 0.45rem;
        letter-spacing: 0.15em;
    }

    /* Navigate Outcomes - match Create Templates mobile layout */
    #navigate > .max-w-7xl > .grid {
        gap: 2rem !important;
    }

    #navigate-visualization {
        max-width: calc(100vw - 1.6rem) !important;
        overflow: visible !important;
    }

    #navigate p {
        text-align: left !important;
    }

    .navigate-journey-card {
        padding: 10px 12px !important;
    }

    .navigate-journey-card h4 {
        font-size: 0.85rem !important;
    }

    .navigate-journey-card p {
        font-size: 0.75rem !important;
    }

    .navigate-stage-hint {
        font-size: 0.7rem !important;
    }

    .navigate-ring-container {
        width: 260px !important;
        height: 260px !important;
    }

    .hero-kicker-term {
        text-align: left !important;
        font-size: 1.5rem !important;
    }

    .hero .hero-kicker-term {
        font-size: 0.7rem !important;
    }

    .hero .hero-kicker-inline .hero-kicker-term {
        font-size: inherit !important;
    }

}

/* ── Desktop hero — side-by-side layout ── */
@media (min-width: 1250px) {
    .hero.particles .hero-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 3rem !important;
        padding-top: 0 !important;
    }
    .hero .reveal-from-top {
        text-align: left;
        align-items: flex-start;
    }
    .hero-headline {
        text-align: left;
    }
    .hero .desc-text-hero {
        text-align: left;
        font-size: 0.9rem !important;
    }
    .hero-cta-row {
        justify-content: flex-start;
    }
    .hero-tag {
        align-self: flex-start;
    }
}

@media (min-width: 1200px) and (max-width: 1290px) {
    .hero-headline {
        font-size: 2.3rem !important;
    }
}

@media (min-width: 1397px) {
    .hero-headline {
        font-size: 2.7rem !important;
    }
}

@media (min-width: 1500px) {
    .hero-headline {
        font-size: 3rem !important;
    }
}

@media (max-width: 450px){
    .hero-pills {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 20px;
        align-items: center;

    }
    .hero-pills>div{
        width: fit-content;
        margin-bottom: 0px;
    }
}



















/* ========== AI ECOSYSTEM SECTION ========== */

/* ========== AI ECOSYSTEM SECTION ========== */
.ai-ecosystem-section {
    position: relative;
    background: var(--main-bg-color);
    color: var(--inv-bg-color);
}

/* Ambient glow behind the section */
.ai-ecosystem-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.ai-ecosystem-section .hero-kicker {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--grey-accent-color);
}

.ai-ecosystem-section .hero-kicker-icon {
    width:7vh;
    height: 7vh;
    margin-right: 10px;
    margin-top: -1vh;
}

.ai-ecosystem-section .hero-kicker-text {
    font-size: 1.8rem;
    align-items: baseline;
    gap: 0px !important;
    flex-direction: column !important;
}

.ai-ecosystem-section .hero-kicker-prefix {
    font-size: 0.6rem;
}

/* AI Ecosystem — Header */
.ai-eco-kicker {
    justify-content: center;
}

.ai-eco-desc {
    color: var(--inv-bg-color);
    opacity: 0.7;
    max-width: 700px;
    margin: 0 auto;
}

.ai-eco-patent-header {
    font-size: 0.55rem;
    color: var(--inv-bg-color);
    opacity: 0.12;
    text-align: center;
    margin: 0.5rem auto 0;
    letter-spacing: 0.02em;
}

.ai-eco-cta-wrap {
    text-align: center;
    margin-top: 3rem;
}
.ai-eco-learn-more {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #fff !important;
    background: linear-gradient(135deg, var(--blurple), var(--lightblue));
    cursor: pointer;
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ai-eco-learn-more svg {
    stroke: #fff;
}
.ai-eco-learn-more:hover {
    transform: scale(1.08);
    box-shadow: 0 0 24px color-mix(in srgb, var(--blurple) 40%, transparent);
}

/* ── Example Journey Badges ── */
.ai-eco-examples {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.ai-eco-example {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: color-mix(in srgb, var(--purple) 3%, var(--main-bg-color));
}

.ai-eco-example-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--inv-bg-color);
    opacity: 0.8;
}

.ai-eco-example-meta {
    font-size: 0.65rem;
    color: var(--inv-bg-color);
    opacity: 0.35;
}

/* ── Footer Badge ── */
.ai-eco-footer-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 2rem auto 0;
    padding: 0.5rem 1.5rem;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: color-mix(in srgb, var(--purple) 5%, var(--main-bg-color));
    width: fit-content;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ai-eco-footer-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--purple);
    letter-spacing: 0.02em;
}

.ai-eco-footer-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.ai-eco-footer-patent {
    font-size: 0.7rem;
    color: var(--inv-bg-color);
    opacity: 0.4;
    letter-spacing: 0.01em;
    text-align: center;
    margin-top: 0.75rem;
}

.ai-eco-patent-name {
    font-size: 0.55rem;
    opacity: 0.7;
}

/* ── Sliding Tile Gallery ── */
.ai-eco-pillars {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    height: 280px;
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.ai-eco-pillar {
    position: relative;
    flex: 0 0 70px;
    min-width: 0;
    padding: 2rem 1.25rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: color-mix(in srgb, var(--purple) 2%, var(--main-bg-color));
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        flex 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        opacity 0.4s ease,
        background 0.4s ease;
}

/* Gradient top accent on every pillar */
.ai-eco-pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    transition: all 0.5s ease;
}

/* ── Inactive tile ── */
.ai-eco-pillar:not(.is-active) {
    opacity: 0.5;
    box-shadow: none;
}

.ai-eco-pillar:not(.is-active):hover {
    opacity: 0.75;
    border-color: rgba(255, 255, 255, 0.12);
    background: color-mix(in srgb, var(--purple) 4%, var(--main-bg-color));
}

/* ── Active tile expands ── */
.ai-eco-pillar.is-active {
    flex: 1 1 60%;
    padding: 2rem 1.75rem;
    border-color: color-mix(in srgb, var(--purple) 25%, transparent);
    background: color-mix(in srgb, var(--purple) 4%, var(--main-bg-color));
    box-shadow:
        0 24px 80px rgba(99, 102, 241, 0.1),
        0 8px 32px rgba(96, 165, 250, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Active accent line — color per pillar */
.ai-eco-pillar:nth-child(1).is-active::before {
    background: linear-gradient(90deg, transparent, #4f46e5, transparent);
}
.ai-eco-pillar:nth-child(2).is-active::before {
    background: linear-gradient(90deg, transparent, #6366f1, transparent);
}
.ai-eco-pillar:nth-child(3).is-active::before {
    background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
}

/* ── Pillar Header ── */
.ai-eco-pillar-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    white-space: nowrap;
}

.ai-eco-pillar-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--inv-bg-color);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;
    opacity: 0;
    transition: max-width 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.ai-eco-pillar.is-active .ai-eco-pillar-title {
    max-width: 200px;
    opacity: 1;
}

.ai-eco-pillar:not(.is-active) .ai-eco-pillar-head {
    justify-content: center;
}

.ai-eco-pillar-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--inv-bg-color);
    transition: all 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-eco-pillar-icon svg {
    width: 18px;
    height: 18px;
    opacity: 0.9;
    color: var(--inv-bg-color);
    overflow: visible;
}

/* ── Icon: draw in once, then shimmer gradient while active ── */
.eco-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0s;
}
.ai-eco-pillar.is-active .eco-draw {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.7s ease-out;
}
.ai-eco-pillar.is-active .eco-draw:nth-child(2)  { transition-delay: 0.08s; }
.ai-eco-pillar.is-active .eco-draw:nth-child(3)  { transition-delay: 0.16s; }
.ai-eco-pillar.is-active .eco-draw:nth-child(4)  { transition-delay: 0.22s; }
.ai-eco-pillar.is-active .eco-draw:nth-child(5)  { transition-delay: 0.28s; }
.ai-eco-pillar.is-active .eco-draw:nth-child(6)  { transition-delay: 0.34s; }
.ai-eco-pillar.is-active .eco-draw:nth-child(7)  { transition-delay: 0.4s; }
.ai-eco-pillar.is-active .eco-draw:nth-child(8)  { transition-delay: 0.46s; }
.ai-eco-pillar.is-active .eco-draw:nth-child(9)  { transition-delay: 0.52s; }
.ai-eco-pillar.is-active .eco-draw:nth-child(10) { transition-delay: 0.58s; }

/* Gradient shimmer on the icon container while active */
.ai-eco-pillar.is-active .ai-eco-pillar-icon {
    background-size: 200% 200%;
    animation: eco-icon-shimmer 3s ease-in-out infinite;
}
@keyframes eco-icon-shimmer {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

/* Per-pillar gradient backgrounds matching stage-icon / template-icon pattern */
.ai-eco-pillar:nth-child(1) .ai-eco-pillar-icon {
    background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 20%, var(--white) 80%), var(--lightestblue));
    border: 1.5px solid color-mix(in srgb, var(--blurple) 50%, transparent);
}
.ai-eco-pillar:nth-child(2) .ai-eco-pillar-icon {
    background: linear-gradient(135deg, var(--lightestblue), color-mix(in srgb, var(--purple) 20%, var(--white) 80%));
    border: 1.5px solid color-mix(in srgb, var(--blurple) 55%, transparent);
}
.ai-eco-pillar:nth-child(3) .ai-eco-pillar-icon {
    background: linear-gradient(135deg, color-mix(in srgb, var(--lightblue) 30%, var(--white) 70%), color-mix(in srgb, var(--purple) 15%, var(--white) 85%));
    border: 1.5px solid color-mix(in srgb, var(--lightblue) 40%, transparent);
}

/* ── Collapsible content ── */
.ai-eco-pillar-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transition: opacity 0.45s ease, max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1), margin 0.45s ease;
    overflow: hidden;
}

.ai-eco-pillar:not(.is-active) .ai-eco-pillar-divider {
    opacity: 0;
    max-height: 0;
    margin: 0;
}

.ai-eco-pillar.is-active .ai-eco-pillar-divider {
    opacity: 1;
    max-height: 2px;
    margin: 0.75rem 0;
}

/* ── Pillar Bullet Lists ── */
.ai-eco-pillar-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: opacity 0.45s ease, max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

.ai-eco-pillar:not(.is-active) .ai-eco-pillar-bullets {
    opacity: 0;
    max-height: 0;
}

.ai-eco-pillar.is-active .ai-eco-pillar-bullets {
    opacity: 1;
    max-height: 200px;
}

.ai-eco-pillar-bullets li {
    font-size: 0.8rem;
    color: var(--inv-bg-color);
    line-height: 1.4;
    padding-left: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.ai-eco-pillar.is-active .ai-eco-pillar-bullets li {
    opacity: 0.55;
    transform: translateY(0);
}
.ai-eco-pillar.is-active .ai-eco-pillar-bullets li:nth-child(1) { transition-delay: 0.3s; }
.ai-eco-pillar.is-active .ai-eco-pillar-bullets li:nth-child(2) { transition-delay: 0.42s; }
.ai-eco-pillar.is-active .ai-eco-pillar-bullets li:nth-child(3) { transition-delay: 0.54s; }

.ai-eco-pillar-bullets li::before {
    display: none;
}

.eco-bullet-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.3;
    margin-right: 0.5rem;
    position: relative;
    top: -1px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .ai-eco-pillars {
        flex-direction: column;
        height: auto;
        min-height: 550px;
    }

    .ai-eco-pillar:not(.is-active) {
        flex: 0 0 auto;
    }

    .ai-eco-pillar.is-active {
        flex: 0 0 auto;
    }

    .ai-eco-pillar:not(.is-active) .ai-eco-pillar-divider,
    .ai-eco-pillar:not(.is-active) .ai-eco-pillar-bullets {
        max-height: 0;
        opacity: 0;
    }

    .ai-eco-pillar-title {
        max-width: 200px;
        opacity: 1;
    }

    .ai-eco-pillar:not(.is-active) .ai-eco-pillar-head {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .ai-eco-pillars {
        gap: 0.5rem;
    }

    .ai-eco-pillar {
        padding: 1.25rem 1rem;
    }

    .ai-eco-pillar.is-active {
        padding: 1.25rem 1rem;
    }

    .ai-eco-footer-badge {
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.625rem 1.25rem;
        margin-top: 0;
    }

    .ai-eco-footer-sep {
        display: none;
    }
}

/* ========== GLOBAL AESTHETIC POLISH ========== */

/* Soft Ambient Shadows - Replace Harsh Shadows */
.glass,
.proof-stat-card,
.ai-architect-card{
    box-shadow:
        0 20px 60px rgba(99, 102, 241, 0.07),
        0 8px 24px rgba(96, 165, 250, 0.04) !important;
}

/* Consistent Border Radius */

.ai-architect-card,
.proof-stat-card:first-child {
    border-radius: 24px !important;
}

/* Consistent Subtle Borders */
.glass,
.ai-architect-card {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ========== GENERAL POLISH & STANDARDIZATION ========== */


/* Tighter proof → bridge vertical rhythm */
.proof-section {
    padding-bottom: 3rem !important;
}

/* Create templates section has transition bridge, so no top padding */
.create-templates-section {
    padding-top: 0 !important;
    padding-bottom: 6rem !important;
    border-top: none !important;
}

/* Content area within create-templates has standard padding */
.create-templates-content {
    padding-top: 0 !important;
    padding-bottom: 6rem !important;
}

/* Typography Consistency - Sub-headers */
.proof-pill,
.epic-portal-title {
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

/* ========== END GENERAL POLISH ========== */

/* Create Templates Section - Main Background Color */
.create-templates-section {
    background: var(--main-bg-color) !important;
    padding-bottom: 0px !important;
}

/* ========== TRANSITION BRIDGE - CLEAN TYPOGRAPHY ========== */
.transition-bridge {
    background: linear-gradient(180deg,
        var(--main-bg-color) 0%,
        color-mix(in srgb, var(--blurple) 3%, transparent) 45%,
        color-mix(in srgb, var(--purple) 2%, transparent) 65%,
        var(--main-bg-color) 100%);
    padding: 3.5rem 2rem;
    margin-bottom: 2rem;
    margin-top: 0;
    position: relative;
}

.transition-bridge-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.transition-bridge-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.transition-bridge-line-top {
    display: block;
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.2;
    color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent);
    letter-spacing: -0.02em;
}

.transition-bridge-line-bottom {
    display: block;
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1.2;
    color: color-mix(in srgb, var(--inv-bg-color) 90%, transparent);
    letter-spacing: -0.025em;
}

.transition-bridge-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.bridge-flow-step {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent);
}

.bridge-flow-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0;
    border-radius: 50%;
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 30%, transparent);
    color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent);
    flex-shrink: 0;
}


.bridge-flow-sep {
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--blurple) 40%, transparent),
        color-mix(in srgb, var(--purple) 30%, transparent));
    position: relative;
}

.bridge-flow-sep::after {
    content: '';
    position: absolute;
    right: -2px;
    top: -2px;
    width: 5px;
    height: 5px;
    border-top: 1px solid color-mix(in srgb, var(--purple) 40%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--purple) 40%, transparent);
    transform: rotate(45deg);
}

.create-templates-content {
    position: relative;
}

.create-templates-content > div > div > .glass{
    padding: 0px !important;
        border: none !important;
        background: none !important;
}

/* Title Styling - Sick Elevated Gradient */
.create-templates-section .epic-portal-title {
    background: linear-gradient(135deg,
        #667eea 0%,
        #764ba2 25%,
        #f093fb 50%,
        #4facfe 75%,
        #00f2fe 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-size: 200% 200% !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.4))
            drop-shadow(0 8px 24px rgba(118, 75, 162, 0.3))
            drop-shadow(0 2px 6px rgba(79, 172, 254, 0.2)) !important;
    animation: gradient-shift 8s ease infinite !important;
}

@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Main Heading - Use inverse background color */
.create-templates-section .solution-title {
    color: var(--inv-bg-color) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
}

/* Description Text - Only for right side agent list */
.create-templates-section .order-1.lg\:order-2 p :not(* .ai-tool-hint) {
    color: var(--inv-bg-color) !important;
    opacity: 0.8 !important;
}

/* Agent Card Headings - Only for right side agent list */
.create-templates-section .order-1.lg\:order-2 h4 {
    color: var(--inv-bg-color) !important;
    opacity: 0.95 !important;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

/* Agent Icons - Minimal, No Decoration */
.create-templates-section .template-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.create-templates-section .template-icon svg,
.create-templates-section .template-icon svg * {
    width: 24px;
    height: 24px;
    opacity: 0.9;
    color: var(--inv-bg-color);
    fill: var(--inv-bg-color)
}

/* AI Tool Selector - Flex Container */
.create-templates-section .ai-tool-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.create-templates-section .ai-tool-selector.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0;
    margin-bottom: 0;
}

p.ai-tool-hint {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--inv-bg-color);
    opacity: 0.6 !important;
    text-align: left;
    margin-top: 1.25rem;
    letter-spacing: 0.04em;
    margin-top: 40px !important;
    padding-left: 30px;
}

/* AI Tool Cards */
.create-templates-section .ai-tool-card {
    transition: border-color 0.4s ease, box-shadow 0.4s ease,
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.4s ease, opacity 0.4s ease;
    padding: 14px 16px;
    border-radius: 14px;
    cursor: pointer;
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    position: relative;
    align-items: center;
    background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 2px 16px color-mix(in srgb, var(--inv-bg-color) 4%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 4%, transparent);
}

.create-templates-section .ai-tool-card:hover {
    background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent);
    border-color: color-mix(in srgb, var(--blurple) 18%, transparent);
    transform: translateX(3px);
    box-shadow:
        0 8px 40px color-mix(in srgb, var(--blurple) 10%, transparent),
        0 2px 16px color-mix(in srgb, var(--inv-bg-color) 4%, transparent);
}

.create-templates-section .ai-tool-card.is-active {
    background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
    border-color: color-mix(in srgb, var(--blurple) 30%, transparent);
    box-shadow:
        0 4px 24px color-mix(in srgb, var(--blurple) 12%, transparent),
        0 2px 16px color-mix(in srgb, var(--inv-bg-color) 4%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--blurple) 8%, transparent);
}

.create-templates-section .ai-tool-card.is-active .template-icon svg,
.create-templates-section .ai-tool-card.is-active .template-icon svg * {
    opacity: 1;
}

.create-templates-section .ai-tool-card:not(.is-active) {
    opacity: 0.55;
}

.create-templates-section .ai-tool-card:not(.is-active):hover {
    opacity: 0.85;
}

/* Unified demo view height */
[data-tool-view="default"],
[data-tool-view="editor"],
[data-tool-view="coach"] {
    height: 540px;
    min-height: 540px;
    max-height: 540px;
    overflow: hidden;
}

[data-tool-view="default"] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

[data-tool-view="default"].space-y-4 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0;
}

[data-tool-view="default"] .editor-flow-body {
    flex: 1;
    min-height: 0;
}

.ai-demo-mode-hint {
    display: none;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.25);
    font-weight: 400;
    letter-spacing: 0.03em;
}

@media (max-width: 1150px) {
    .ai-demo-mode-hint {
        display: inline;
    }
}

/* ========== AI EDITOR FLOW VIEW ========== */
.editor-flow-view {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.editor-prompt-bar {
    padding: 0.75rem 0.875rem;
    border-radius: 10px;
    background: var(--main-bg-color);
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    min-height: 200px;
}

.editor-flow-body {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    min-height: 340px;
}

.editor-circle-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    overflow: hidden;
    transition: width 0.4s ease, opacity 0.4s ease;
}

.editor-flow-body .editor-circle-column.is-collapsed {
    width: 0 !important;
    opacity: 0;
    gap: 0;
}

.editor-flow-body.diff-expanded {
    gap: 0 !important;
}

.editor-coach-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.editor-coach-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.25);
}

.editor-coach-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.editor-circle-chart {
    width: 160px;
    height: 160px;
    position: relative;
    flex-shrink: 0;
}

/* Large circle for creator-only view */
.editor-circle-chart--lg {
    width: 280px;
    height: 280px;
    filter: drop-shadow(0 0 60px rgba(139, 92, 246, 0.12))
           drop-shadow(0 0 120px rgba(99, 102, 241, 0.06));
}

.editor-circle-chart--lg .editor-circle-center {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 4.5rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

.editor-circle-chart--lg .editor-circle-ring circle {
    stroke-width: 0.8 !important;
}

.editor-circle-chart--lg .editor-circle-nodes rect {
    rx: 5;
    ry: 5;
    transition: fill 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Creator two-column layout: circle left, process log right */
.creator-two-col {
    align-items: stretch;
    min-height: 0;
    flex: 1;
    gap: 1.25rem;
}

.creator-two-col .editor-circle-column {
    align-items: center;
    gap: 1.25rem;
    flex-shrink: 0;
}

/* ========== AI PROCESS LOG ========== */
.ai-process-log {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    min-width: 0;
}

.ai-process-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-process-log-title {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.85);
}

.ai-process-log-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(110, 231, 183, 0.9);
}

.ai-log-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(110, 231, 183, 0.9);
    animation: aiLogPulse 2s ease-in-out infinite;
}

@keyframes aiLogPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.4); }
    50% { opacity: 0.5; box-shadow: 0 0 8px 3px rgba(110, 231, 183, 0); }
}

.ai-process-log-body {
    flex: 1;
    padding: 0.5rem 0;
    overflow-y: auto;
    scrollbar-width: none;
    font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

.ai-process-log-body::-webkit-scrollbar {
    display: none;
}

.ai-log-entry {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    padding: 0.3rem 0.85rem;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.ai-log-ts {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    min-width: 2.2rem;
}

.ai-log-msg {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.5;
}

.ai-log-entry--system .ai-log-msg {
    color: rgba(200, 210, 255, 1);
    font-weight: 600;
}

.ai-log-entry--success .ai-log-msg {
    color: #86efac;
}

.ai-log-entry--success .ai-log-msg::before {
    content: "\2713  ";
    font-weight: 700;
    color: #86efac;
}

.ai-log-dots::after {
    content: '';
    animation: aiLogDots 1.5s steps(4, end) infinite;
}

@keyframes aiLogDots {
    0%  { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

/* ========== EDITOR AI STATUS CYCLING ========== */
.editor-ai-status-cycle {
    display: inline-flex;
    align-items: center;
    color: rgba(165, 180, 252, 0.8);
    transition: opacity 0.4s ease;
}

.editor-diff-panel.is-visible .editor-diff-lines:empty ~ .editor-diff-actions {
    opacity: 0.3;
    pointer-events: none;
}

.editor-circle-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.editor-circle-nodes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.editor-circle-nodes rect {
    fill: rgba(255, 255, 255, 0.1);
    transition: fill 0.4s ease, filter 0.4s ease;
    rx: 4;
    ry: 4;
}

.editor-circle-nodes rect.is-idle {
    fill: rgba(255, 255, 255, 0.1);
}

.editor-circle-nodes rect.is-target {
    fill: rgba(251, 191, 36, 1);
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));
}

.editor-circle-nodes rect.is-working {
    fill: rgba(165, 180, 252, 1);
    filter: drop-shadow(0 0 6px rgba(165, 180, 252, 0.4));
    animation: editorNodePulse 1s ease-in-out infinite;
}

.editor-circle-nodes rect.is-complete {
    fill: rgba(34, 197, 94, 1);
}

@keyframes editorNodePulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

.editor-circle-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-align: center;
    color: var(--inv-bg-color);
    opacity: 0.7;
    padding: 2rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.creator-center-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    text-decoration: none;
    pointer-events: auto;
    transition: background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
    opacity: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.creator-center-cta:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 20px rgba(139, 92, 246, 0.12);
}

.editor-diff-panel {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.75rem;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.editor-diff-panel.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.editor-diff-header {
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.65rem;
}

.editor-diff-header [data-editor-diff-title] {
    transition: opacity 0.25s ease;
    display: inline-block;
}

.editor-diff-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.72rem;
    line-height: 1.65;
}

.editor-diff-line {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.editor-diff-line.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.editor-diff-line.diff-remove {
    background: rgba(239, 68, 68, 0.1);
    color: rgba(252, 165, 165, 0.9);
    text-decoration: line-through;
    text-decoration-color: rgba(252, 165, 165, 0.3);
}

.editor-diff-line.diff-add {
    background: rgba(34, 197, 94, 0.1);
    color: rgba(134, 239, 172, 0.9);
}

.editor-diff-line.diff-context {
    color: var(--inv-bg-color);
    opacity: 0.35;
}

.editor-diff-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.editor-diff-actions.is-visible {
    opacity: 1;
}

.editor-accept-btn,
.editor-reject-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.editor-accept-btn {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: rgba(134, 239, 172, 0.9);
}

.editor-accept-btn:hover {
    background: rgba(34, 197, 94, 0.25);
    transform: translateY(-1px);
}

.editor-reject-btn {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: rgba(252, 165, 165, 0.8);
}

.editor-reject-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    transform: translateY(-1px);
}

/* ========== AI COACH CHAT VIEW ========== */
.coach-chat-view {
    display: flex;
    flex-direction: column;
}

.coach-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.coach-chat-bubble {
    max-width: 88%;
    padding: 0.625rem 0.875rem;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.coach-chat-bubble.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.coach-bubble-user {
    align-self: flex-end;
    background: rgba(78, 137, 241, 0.15);
    border: 1px solid rgba(78, 137, 241, 0.2);
    color: var(--inv-bg-color);
}

.coach-bubble-ai {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--inv-bg-color);
}

.coach-bubble-thinking {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--inv-bg-color);
    opacity: 0.85;
    font-style: italic;
    font-size: 0.75rem;
}

.coach-bubble-thinking.is-visible {
    opacity: 0.85;
}

.coach-thinking-dots {
    display: inline-flex;
    gap: 3px;
    margin-left: 4px;
}

.coach-thinking-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--inv-bg-color);
    opacity: 0.7;
    animation: coachDotPulse 1.2s infinite;
}

.coach-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.coach-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes coachDotPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Coach report card */
.coach-report-tag {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--blurple);
    opacity: 0.8;
    margin-bottom: 0.2rem;
}

.coach-report-headline {
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 0.6rem;
}

/* Coach flow pivot bars */
.coach-flow-pivot {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.5rem;
}

.coach-flow-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.coach-flow-stage {
    flex: 0 0 5.2rem;
    font-size: 0.58rem;
    font-weight: 600;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coach-flow-bar-wrap {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(78, 137, 241, 0.1);
    overflow: hidden;
}

.coach-flow-bar {
    height: 100%;
    width: var(--bar-width, 0%);
    border-radius: 3px;
    background: var(--blurple);
    opacity: 0.55;
}

.coach-flow-row.is-alert .coach-flow-bar {
    background: #ef4444;
    opacity: 0.8;
}

.coach-flow-row.is-good .coach-flow-bar {
    background: #22c55e;
    opacity: 0.7;
}

.coach-flow-pct {
    flex: 0 0 2.2rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-align: right;
    opacity: 0.85;
}

.coach-flow-row.is-alert .coach-flow-pct {
    color: #ef4444;
}

.coach-flow-row.is-good .coach-flow-pct {
    color: #22c55e;
}

.coach-flow-note {
    flex: 0 0 auto;
    font-size: 0.5rem;
    opacity: 0.5;
    font-style: italic;
    white-space: nowrap;
}

.coach-report-finding {
    font-size: 0.72rem;
    line-height: 1.45;
    opacity: 0.85;
    margin-bottom: 0.35rem;
}

.coach-report-source {
    font-size: 0.58rem;
    opacity: 0.4;
    font-style: italic;
    margin-bottom: 0.5rem;
}

.coach-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.2rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--blurple), var(--purple));
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(139, 92, 246, 0.35);
}

.coach-cta-btn:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.5);
}

.coach-chat-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    margin-top: 0.5rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.coach-input-row {
    flex: 1;
    font-size: 0.8rem;
    color: var(--inv-bg-color);
    opacity: 0.7;
    display: flex;
    align-items: center;
    min-height: 1.2em;
}

.coach-send-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(78, 137, 241, 0.2);
    border: 1px solid rgba(78, 137, 241, 0.25);
    color: var(--blurple);
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.coach-send-btn:hover {
    background: rgba(78, 137, 241, 0.35);
}

/* Glass Container Enhancement */
.create-templates-section .glass {
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    box-shadow:
        0 20px 60px rgba(139, 92, 246, 0.18),
        0 10px 30px rgba(96, 165, 250, 0.12) !important;
}

/* ========== AI ARCHITECT CARD - VISIBLE BLUE GRADIENT (OLD STYLE - KEPT FOR BACKWARDS COMPATIBILITY) ========== */
/* Background with visible blue gradient - more contrast */
.create-templates-section .ai-architect-card {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%),
        linear-gradient(160deg, rgba(79,70,229,0.85) 0%, rgba(99,102,241,0.75) 50%, rgba(139,92,246,0.8) 100%),
        var(--main-bg-color) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow:
        0 25px 70px rgba(55, 48, 163, 0.4),
        0 15px 40px rgba(99, 102, 241, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* ========== GLASSMORPHISM GRADIENT STYLE ========== */
/* Semi-transparent gradient with glassmorphism */
/* Reduce header area spacing */
.create-templates-section .ai-architect-card--glass {
    padding-top: 1.25rem !important;
}
.create-templates-section .ai-architect-card--glass > .flex.items-center.justify-between {
    margin-bottom: 1rem !important;
}

.create-templates-section .ai-architect-card--glass {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%),
        linear-gradient(160deg, rgba(79,70,229,0.85) 0%, rgba(99,102,241,0.75) 50%, rgba(139,92,246,0.8) 100%),
        var(--main-bg-color) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow:
        0 25px 70px rgba(55, 48, 163, 0.35),
        0 15px 40px rgba(99, 102, 241, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Text colors for gradient background */
.create-templates-section .ai-architect-card--glass > div > div > span {
    color: rgba(255, 255, 255, 0.98) !important;
}

/* Icon container for gradient background */
.create-templates-section .ai-architect-card--glass .ai-architect-glyph {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.create-templates-section .ai-architect-card--glass .ai-architect-glyph svg {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* AI Flow Circle Chart in Creator CTA */
.ai-flow-circle-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-flow-circle-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.06);
}

/* Creator-specific overrides (reuses editor layout classes) */


.creator-progress-panel {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.creator-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.creator-panel-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.creator-panel-scroll::-webkit-scrollbar {
    display: none;
}

.create-templates-section .ai-architect-card--glass .ai-prompt-caret {
    background: #4E89F1 !important;
    animation: blink 1s step-end infinite;
}

/* Status container for gradient card */
.create-templates-section .ai-architect-card--glass .ai-architect-status {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.create-templates-section .ai-architect-card--glass .ai-status-header {
    color: rgba(255, 255, 255, 0.9) !important;
}

.create-templates-section .ai-architect-card--glass .ai-status-label {
    color: rgba(255, 255, 255, 0.9) !important;
}

.create-templates-section .ai-architect-card--glass .ai-status-message {
    color: rgba(255, 255, 255, 0.95) !important;
}

.create-templates-section .ai-architect-card--glass .ai-stage {
    color: rgba(255, 255, 255, 0.85) !important;
}

.create-templates-section .ai-architect-card--glass .ai-stage-label {
    color: rgba(255, 255, 255, 0.95) !important;
}

.create-templates-section .ai-architect-card--glass .ai-status-chip--idle {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Vertical centering and spacing */
.create-templates-section .ai-feature-list-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.create-templates-section .ai-stage-list {
    line-height: 1.8;
}

.create-templates-section .ai-stage-list > * + * {
    margin-top: 1rem;
}

/* ========== OLD SOLID GRADIENT STYLES (FOR REFERENCE) ========== */
/* AI Creator label and text - white for gradient background */
.create-templates-section .ai-architect-card > div > div > span {
    color: rgba(255, 255, 255, 0.98) !important;
}

/* Icon container */
.create-templates-section .ai-architect-glyph {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.create-templates-section .ai-architect-glyph svg {
    color: rgba(255, 255, 255, 0.95) !important;
}


/* Status Header Text */
.create-templates-section .ai-status-header {
    color: rgba(255, 255, 255, 0.9) !important;
}

.create-templates-section .ai-status-label {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Status Chips */
.create-templates-section .ai-status-chip--idle {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.create-templates-section .ai-status-chip--active {
    background: rgba(255, 200, 0, 1) !important;
    border: 2px solid rgba(255, 220, 0, 1) !important;
    color: rgba(30, 30, 30, 1) !important;
    font-weight: 700 !important;
    box-shadow: 0 0 16px rgba(255, 200, 0, 0.8) !important;
}

.create-templates-section .ai-status-chip--done {
    background: rgba(34, 197, 94, 1) !important;
    border: 2px solid rgba(34, 197, 94, 1) !important;
    color: rgba(255, 255, 255, 1) !important;
    font-weight: 700 !important;
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.8) !important;
}

/* Status Message */
.create-templates-section .ai-status-message {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Stage Items */
.create-templates-section .ai-stage {
    color: rgba(255, 255, 255, 0.85) !important;
}

.create-templates-section .ai-stage-label {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Stage Indicators */
.create-templates-section .ai-stage-indicator {
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Stage Indicator with Check - VIBRANT GREEN BACKGROUND WITH GLOW */
.create-templates-section .ai-stage.is-complete .ai-stage-indicator {
    background: rgba(34, 197, 94, 0.9) !important;
    border: 2px solid rgba(34, 197, 94, 1) !important;
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.7) !important;
}

/* Stage Checkmarks - WHITE ON GREEN WITH BOLD STROKE */
.create-templates-section .ai-stage-check {
    color: #ffffff !important;
    stroke: #ffffff !important;
    stroke-width: 3 !important;
}

.create-templates-section .ai-stage.is-complete .ai-stage-check {
    color: #ffffff !important;
    stroke: #ffffff !important;
    stroke-width: 3 !important;
}

.create-templates-section svg.ai-stage-check {
    color: #ffffff !important;
    stroke: #ffffff !important;
    stroke-width: 3 !important;
}

.create-templates-section .ai-stage.is-complete svg.ai-stage-check {
    color: #ffffff !important;
    stroke: #ffffff !important;
    stroke-width: 3 !important;
}

/* Creator panel - gradient card overrides */
.create-templates-section .creator-panel-header {
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.create-templates-section .creator-center-cta {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    padding: 10px 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.create-templates-section .creator-center-cta:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2),
                0 0 20px rgba(139, 92, 246, 0.15) !important;
    transform: scale(1.05);
}

/* ========== EDITOR VIEW - GRADIENT CARD OVERRIDES ========== */
/* Boost contrast for editor elements on purple glass background */
.create-templates-section .editor-prompt-bar {
    background: var(--main-bg-color) !important;
    border-color: color-mix(in srgb, var(--inv-bg-color) 6%, transparent) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 14px !important;
    padding: 0.875rem 1rem !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06),
                0 0 0 1px color-mix(in srgb, var(--inv-bg-color) 4%, transparent) !important;
}

.create-templates-section .editor-prompt-bar .text-indigo-400 {
    color: #4E89F1 !important;
    opacity: 1 !important;
    font-weight: 600 !important;
}

.create-templates-section .editor-prompt-text {
    color: var(--inv-bg-color) !important;
}

.create-templates-section .editor-prompt-bar .ai-prompt-caret {
    background: #4E89F1 !important;
}

.create-templates-section .editor-diff-panel {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(6px) !important;
}

.create-templates-section .editor-diff-header span {
    color: rgba(255, 255, 255, 0.95) !important;
    opacity: 1 !important;
}

.create-templates-section .editor-diff-line.diff-remove {
    background: rgba(220, 38, 38, 0.3) !important;
    color: #fee2e2 !important;
}

.create-templates-section .editor-diff-line.diff-add {
    background: rgba(22, 163, 74, 0.3) !important;
    color: #dcfce7 !important;
}

.create-templates-section .editor-diff-line.diff-context {
    color: rgba(255, 255, 255, 0.8) !important;
    opacity: 1 !important;
}

.create-templates-section .editor-circle-center {
    color: rgba(255, 255, 255, 0.98) !important;
    opacity: 1 !important;
    /* text-shadow: 0 1px 8px rgba(0, 0, 0, 0.15),
                 0 0 20px rgba(139, 92, 246, 0.15); */
    /* background: radial-gradient(circle at center,
                rgba(139, 92, 246, 0.08) 0%,
                rgba(99, 102, 241, 0.04) 40%,
                transparent 70%); */
    border-radius: 50%;
    /* backdrop-filter: blur(4px); */
    -webkit-backdrop-filter: blur(4px);
}

.create-templates-section .editor-circle-ring circle {
    stroke: rgba(255, 255, 255, 0.12) !important;
}

.create-templates-section .editor-circle-nodes rect.is-idle {
    fill: rgba(255, 255, 255, 0.18) !important;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.08)) !important;
}

.create-templates-section .editor-circle-nodes rect.is-target {
    fill: rgba(251, 191, 36, 1) !important;
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.7))
           drop-shadow(0 0 24px rgba(251, 191, 36, 0.25)) !important;
}

.create-templates-section .editor-circle-nodes rect.is-working {
    fill: rgba(255, 255, 255, 1) !important;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6))
           drop-shadow(0 0 20px rgba(165, 180, 252, 0.3)) !important;
}

.create-templates-section .editor-circle-nodes rect.is-complete {
    fill: rgba(52, 211, 153, 1) !important;
    filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.4)) !important;
}

/* Celebration animation when all stages finish */
.editor-circle-chart.is-celebrating {
    animation: creatorCelebrate 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.editor-circle-chart.is-celebrating .editor-circle-nodes rect.is-complete {
    animation: nodeCelebratePop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.editor-circle-chart.is-celebrating .editor-circle-ring circle {
    animation: ringCelebrateGlow 1.4s ease forwards;
}

@keyframes creatorCelebrate {
    0%   { transform: scale(1); filter: drop-shadow(0 0 60px rgba(139, 92, 246, 0.12)); }
    20%  { transform: scale(1.06); filter: drop-shadow(0 0 80px rgba(52, 211, 153, 0.25)); }
    50%  { transform: scale(0.98); }
    70%  { transform: scale(1.02); }
    100% { transform: scale(1); filter: drop-shadow(0 0 60px rgba(139, 92, 246, 0.12)); }
}

@keyframes nodeCelebratePop {
    0%   { filter: drop-shadow(0 0 0 rgba(52, 211, 153, 0)); }
    35%  { filter: drop-shadow(0 0 14px rgba(52, 211, 153, 0.9))
                  drop-shadow(0 0 28px rgba(52, 211, 153, 0.3)); }
    100% { filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.4)); }
}

@keyframes ringCelebrateGlow {
    0%   { stroke: rgba(255, 255, 255, 0.12); }
    30%  { stroke: rgba(52, 211, 153, 0.5); }
    100% { stroke: rgba(255, 255, 255, 0.12); }
}

.ai-stage.is-done-pulse {
    animation: stageDonePulse 0.5s ease;
}

@keyframes stageDonePulse {
    0%   { opacity: 1; transform: translateX(0); }
    30%  { opacity: 0.7; transform: translateX(3px); }
    100% { opacity: 1; transform: translateX(0); }
}

.create-templates-section .editor-accept-btn {
    background: rgba(34, 197, 94, 0.35) !important;
    border-color: rgba(34, 197, 94, 0.55) !important;
    color: #dcfce7 !important;
}

.create-templates-section .editor-reject-btn {
    background: rgba(239, 68, 68, 0.3) !important;
    border-color: rgba(239, 68, 68, 0.45) !important;
    color: #fee2e2 !important;
}

/* ========== COACH VIEW - GRADIENT CARD OVERRIDES ========== */
/* Boost contrast for coach elements on purple glass background */
.create-templates-section .coach-bubble-user {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: rgba(255, 255, 255, 0.98) !important;
}

.create-templates-section .coach-bubble-ai {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.98) !important;
}

.create-templates-section .coach-bubble-thinking {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.create-templates-section .coach-report-tag {
    color: rgba(255, 255, 255, 0.7) !important;
    opacity: 1 !important;
}

.create-templates-section .coach-report-headline {
    color: rgba(255, 255, 255, 1) !important;
}

.create-templates-section .coach-flow-stage {
    color: rgba(255, 255, 255, 0.85) !important;
    opacity: 1 !important;
}

.create-templates-section .coach-flow-bar-wrap {
    background: rgba(255, 255, 255, 0.15) !important;
}

.create-templates-section .coach-flow-bar {
    background: rgba(255, 255, 255, 0.7) !important;
    opacity: 0.9 !important;
}

.create-templates-section .coach-flow-row.is-alert .coach-flow-bar {
    background: #fca5a5 !important;
    opacity: 1 !important;
}

.create-templates-section .coach-flow-row.is-good .coach-flow-bar {
    background: #86efac !important;
    opacity: 0.9 !important;
}

.create-templates-section .coach-flow-pct {
    color: rgba(255, 255, 255, 0.95) !important;
    opacity: 1 !important;
}

.create-templates-section .coach-flow-row.is-alert .coach-flow-pct {
    color: #fca5a5 !important;
}

.create-templates-section .coach-flow-row.is-good .coach-flow-pct {
    color: #86efac !important;
}

.create-templates-section .coach-flow-note {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1 !important;
}

.create-templates-section .coach-report-finding {
    color: rgba(255, 255, 255, 0.95) !important;
    opacity: 1 !important;
}

.create-templates-section .coach-report-source {
    color: rgba(255, 255, 255, 0.5) !important;
    opacity: 1 !important;
}

.create-templates-section .coach-cta-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
}

.create-templates-section .coach-cta-btn:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 20px rgba(139, 92, 246, 0.15) !important;
}

.create-templates-section .coach-chat-input {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
}

.create-templates-section .coach-input-row {
    color: rgba(30, 30, 30, 0.9) !important;
    opacity: 1 !important;
}

.create-templates-section .coach-input-row .ai-prompt-caret {
    background: #4E89F1 !important;
}

.create-templates-section .coach-send-btn {
    background: rgba(78, 137, 241, 0.15) !important;
    border-color: rgba(78, 137, 241, 0.3) !important;
    color: #4E89F1 !important;
}

.create-templates-section .coach-thinking-dots span {
    background: rgba(255, 255, 255, 0.9) !important;
}

/* ========== SHARE JOURNEYS SECTION ========== */

/* Section Background - Matches Problem Section Layout */
.share-journeys-section {
    background: var(--main-bg-color);
    /* background: color-mix(in srgb, var(--main-bg-color) 95%, rgba(139, 92, 246, 1) 5%); */
    color: var(--inv-bg-color);
}

.share-journeys-section .share-copy,
.share-journeys-section .share-copy p,
.share-journeys-section .share-copy h2 {
    color: var(--inv-bg-color);
    text-align: center;
}

.share-journeys-section .share-copy p {
    font-size: 1.125rem;
    opacity: 0.7;
}

.share-journeys-section .share-feature-title {
    color: var(--inv-bg-color) !important;
}

.share-journeys-section .share-feature-desc {
    color: var(--inv-bg-color) !important;
    opacity: 0.8 !important;
}

/* Feature Icons */
.share-journeys-section .share-feature-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--blurple) 20%, var(--white) 80%),
        color-mix(in srgb, var(--purple) 25%, var(--white) 75%));
    border: 1px solid color-mix(in srgb, var(--blurple) 40%, transparent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--blurple) 25%, transparent);
    transition: all 0.3s ease;
}

.share-journeys-section .share-feature-icon svg {
    color: var(--inv-bg-color) !important;
}

.share-journeys-section .share-feature-icon:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--blurple) 35%, transparent);
}

/* ========== WORKFLOW CONTAINER ========== */


.share-workflow-container {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(96, 165, 250, 0.05));
    border-radius: 16px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Workflow Step */
.workflow-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    opacity: 0;
    animation: fade-in-step 0.5s ease-out forwards;
}

.workflow-step-1 {
    animation-delay: 0.2s;
}

.workflow-step-2 {
    animation-delay: 0.4s;
}

.workflow-step-3 {
    animation-delay: 0.6s;
}

.workflow-step-4 {
    animation-delay: 0.8s;
}

/* Step Number */
.workflow-step-number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blurple), var(--purple));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    box-shadow:
        0 8px 24px rgba(139, 92, 246, 0.4),
        0 4px 12px rgba(96, 165, 250, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    z-index: 2;
    position: relative;
}

.workflow-step-number::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(96, 165, 250, 0.2));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.workflow-step:hover .workflow-step-number::after {
    opacity: 1;
}

/* Step Content */
.workflow-step-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.7)),
        radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.05), transparent 50%);
    border: 1.5px solid rgba(139, 92, 246, 0.2);
    border-radius: 14px;
    padding: 20px;
    box-shadow:
        0 4px 16px rgba(139, 92, 246, 0.12),
        0 2px 8px rgba(96, 165, 250, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.workflow-step-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
}

.workflow-step-content:hover {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85)),
        radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.08), transparent 50%);
    border-color: rgba(139, 92, 246, 0.35);
    box-shadow:
        0 8px 28px rgba(139, 92, 246, 0.2),
        0 4px 12px rgba(96, 165, 250, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateX(8px);
}

/* Step Icon */
.workflow-step-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--blurple) 20%, var(--white) 80%),
        color-mix(in srgb, var(--purple) 25%, var(--white) 75%));
    border: 1.5px solid color-mix(in srgb, var(--blurple) 40%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 6px 20px rgba(139, 92, 246, 0.2),
        0 2px 8px rgba(96, 165, 250, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.workflow-step-content:hover .workflow-step-icon {
    transform: scale(1.05);
    box-shadow:
        0 8px 24px rgba(139, 92, 246, 0.25),
        0 3px 12px rgba(96, 165, 250, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.workflow-step-icon svg {
    color: var(--inv-bg-color) !important;
    stroke: var(--blurple);
}

/* Step Text */
.workflow-step-text {
    flex: 1;
}

.workflow-step-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--darkblue);
    margin-bottom: 4px;
}

.workflow-step-desc {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.5;
}

/* Connector Line */
.workflow-connector {
    position: absolute;
    left: 23px;
    top: 48px;
    width: 2px;
    height: calc(100% + 8px);
    background: linear-gradient(180deg,
        rgba(139, 92, 246, 0.4),
        rgba(96, 165, 250, 0.3));
    z-index: 1;
}

.workflow-step-4 .workflow-connector {
    display: none;
}

/* Animations */
@keyframes fade-in-step {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .workflow-step {
        flex-direction: column;
        align-items: flex-start;
    }

    .workflow-step-number {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .workflow-connector {
        left: 19px;
        top: 40px;
    }

    .workflow-step-content {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }

    .workflow-step-icon {
        width: 48px;
        height: 48px;
    }

    .workflow-step-title {
        font-size: 16px;
    }

    .workflow-step-desc {
        font-size: 13px;
    }
}

.share-workflow-container {
    max-width: 800px;
    margin: 0 auto;
    background: color-mix(in srgb, var(--inv-bg-color) 5%, var(--main-bg-color));
    border: 2px solid color-mix(in srgb, var(--purple) 20%, transparent);
    border-radius: 32px;
    padding: 64px 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    box-shadow:
        0 30px 80px rgba(139, 92, 246, 0.15),
        0 12px 32px rgba(96, 165, 250, 0.1),
        inset 0 2px 4px color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
}

.share-workflow-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), transparent);
}

/* Step Label */
.share-step-label {
    color: var(--inv-bg-color) !important;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.5;
    position: relative;
    display: inline-block;
    width: 100%;
}

.share-step-label::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), transparent);
}

/* Common Step Styles */
.share-step {
    width: 100%;
    opacity: 0;
    animation: share-step-flow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform-origin: center;
}

.share-step-1 { animation-delay: 0.2s; }
.share-step-2 { animation-delay: 0.6s; }
.share-step-3 { animation-delay: 1.0s; }
.share-step-4 { animation-delay: 1.4s; }

/* Arrow Down */
.share-arrow-down {
    opacity: 0;
    animation: share-arrow-flow 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards,
               share-arrow-pulse 2.5s ease-in-out infinite;
    position: relative;
}

.share-arrow-down::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.2), transparent 70%);
    border-radius: 50%;
    z-index: -1;
    animation: share-arrow-glow 2.5s ease-in-out infinite;
}

.share-arrow-down:nth-of-type(2) { animation-delay: 0.4s, 0.4s; }
.share-arrow-down:nth-of-type(4) { animation-delay: 0.8s, 0.8s; }
.share-arrow-down:nth-of-type(6) { animation-delay: 1.2s, 1.2s; }

.share-arrow-down svg {
    color: var(--inv-bg-color) !important;
    stroke: var(--blurple);
    filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.25));
}

/* Step 1: Templates Grid */
.share-templates-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.share-template-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 8px;
    border-radius: 16px;
}

.share-template-item:hover {
    background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
}

.share-template-item:hover .share-template-circle {
    transform: translateY(-4px) scale(1.05);
    box-shadow:
        0 12px 32px rgba(139, 92, 246, 0.25),
        0 6px 16px rgba(96, 165, 250, 0.2);
}

.share-template-circle {
    position: relative;
    width: 110px;
    height: 110px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background:
        radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--inv-bg-color) 8%, transparent), transparent 70%),
        radial-gradient(circle, rgba(139, 92, 246, 0.08), transparent 60%);
    border-radius: 50%;
    padding: 5px;
    box-shadow:
        0 8px 24px rgba(139, 92, 246, 0.18),
        0 4px 12px rgba(96, 165, 250, 0.12),
        inset 0 2px 8px color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
}

.share-template-circle::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(96, 165, 250, 0.1));
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.share-template-item:hover .share-template-circle::before {
    opacity: 1;
}

.share-circle-chart {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 6px 16px rgba(139, 92, 246, 0.2));
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.share-template-active .share-circle-chart {
    filter: drop-shadow(0 8px 24px rgba(102, 126, 234, 0.4));
}

.share-template-item:hover .share-circle-chart {
    filter: drop-shadow(0 12px 32px rgba(139, 92, 246, 0.35));
}

/* Stage nodes */
.share-circle-chart circle[r="5"] {
    transition: all 0.3s ease;
    stroke: color-mix(in srgb, var(--main-bg-color) 90%, transparent);
    stroke-width: 2.5;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.share-template-item:hover .share-circle-chart circle[r="5"] {
    r: 7;
    stroke-width: 3;
}

.share-template-check {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--blurple), var(--purple));
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    box-shadow:
        0 4px 16px rgba(139, 92, 246, 0.5),
        0 2px 8px rgba(96, 165, 250, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    z-index: 10;
    animation: pop-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s backwards;
}

.share-template-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--inv-bg-color) !important;
    text-align: center;
}

/* Step 2: Customer Input */
.share-customer-input {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.share-input-field {
    background: color-mix(in srgb, var(--inv-bg-color) 5%, var(--main-bg-color));
    border: 1.5px solid color-mix(in srgb, var(--purple) 25%, transparent);
    border-radius: 14px;
    padding: 18px 22px;
    font-size: 16px;
    font-weight: 600;
    color: var(--inv-bg-color) !important;
    box-shadow:
        0 4px 20px rgba(139, 92, 246, 0.12),
        inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    transition: all 0.3s ease;
}

.share-input-field:hover {
    border-color: color-mix(in srgb, var(--purple) 40%, transparent);
    box-shadow:
        0 6px 24px rgba(139, 92, 246, 0.18),
        inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
}

.share-input-text {
    animation: typing 1s steps(20) 1.2s forwards;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
}

.share-crm-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(59, 130, 246, 0.15));
    border: 1.5px solid rgba(96, 165, 250, 0.3);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--inv-bg-color) !important;
    align-self: flex-start;
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.15);
    transition: all 0.3s ease;
}

.share-crm-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(96, 165, 250, 0.2);
}

.share-crm-badge svg {
    color: var(--inv-bg-color) !important;
    stroke: var(--blurple);
}

/* Step 3: Participants */
.share-participants-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.share-participant-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: color-mix(in srgb, var(--inv-bg-color) 5%, var(--main-bg-color));
    border: 1.5px solid color-mix(in srgb, var(--purple) 25%, transparent);
    border-radius: 24px;
    padding: 8px 16px 8px 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--inv-bg-color) !important;
    box-shadow:
        0 4px 16px rgba(139, 92, 246, 0.15),
        0 2px 8px rgba(96, 165, 250, 0.1),
        inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    animation: pop-in 0.4s ease-out;
    transition: all 0.3s ease;
}

.share-participant-chip:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(139, 92, 246, 0.2),
        0 3px 12px rgba(96, 165, 250, 0.15),
        inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    border-color: color-mix(in srgb, var(--purple) 35%, transparent);
}

.share-participant-chip:nth-child(1) { animation-delay: 1.5s; opacity: 0; animation-fill-mode: forwards; }
.share-participant-chip:nth-child(2) { animation-delay: 1.7s; opacity: 0; animation-fill-mode: forwards; }

.share-participant-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blurple), var(--purple));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.share-add-button {
    display: flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--inv-bg-color) 4%, var(--main-bg-color));
    border: 2px dashed color-mix(in srgb, var(--purple) 35%, transparent);
    border-radius: 24px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--inv-bg-color) !important;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
    transition: all 0.3s ease;
}

.share-add-button:hover {
    background: linear-gradient(to bottom, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.08));
    border-color: rgba(139, 92, 246, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.2);
}

.share-add-button svg {
    color: var(--inv-bg-color) !important;
    stroke: var(--blurple);
}

/* Step 4: AI Panel */
.share-ai-panel {
    position: relative;
    background: color-mix(in srgb, var(--inv-bg-color) 5%, var(--main-bg-color));
    border: 1.5px solid color-mix(in srgb, var(--purple) 25%, transparent);
    border-radius: 18px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow:
        0 12px 40px rgba(139, 92, 246, 0.18),
        0 6px 20px rgba(96, 165, 250, 0.12),
        inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.share-ai-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.1), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.share-ai-panel > * {
    position: relative;
    z-index: 1;
}

.share-ai-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--blurple), var(--purple));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow:
        0 6px 20px rgba(139, 92, 246, 0.4),
        0 2px 8px rgba(96, 165, 250, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: pulse-glow 2s ease-in-out infinite;
}

.share-ai-icon svg {
    color: #ffffff;
    filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.3));
}

.share-ai-status {
    flex: 1;
}

.share-ai-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--inv-bg-color) !important;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.share-ai-progress {
    width: 100%;
    height: 8px;
    background: color-mix(in srgb, var(--inv-bg-color) 8%, var(--main-bg-color));
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
}

.share-ai-progress::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--blurple), var(--purple));
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
    animation: progress-fill-clip 2.5s ease-out 2s forwards;
    clip-path: inset(0 100% 0 0);
}

.share-ai-progress-bar {
    display: none;
}

/* Animations */
@keyframes fade-in-step {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-arrow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pulse-arrow-down {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(8px);
    }
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

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

@keyframes pulse-glow {
    0%, 100% {
        box-shadow:
            0 6px 20px rgba(139, 92, 246, 0.4),
            0 2px 8px rgba(96, 165, 250, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow:
            0 8px 28px rgba(139, 92, 246, 0.6),
            0 4px 12px rgba(96, 165, 250, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

/* Dynamic Share Workflow Animations */
@keyframes share-step-flow {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    60% {
        opacity: 0.8;
        transform: translateY(-5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes share-arrow-flow {
    0% {
        opacity: 0;
        transform: translateY(-15px) scale(0.8);
    }
    60% {
        opacity: 0.9;
        transform: translateY(3px) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes share-arrow-pulse {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

@keyframes share-arrow-glow {
    0%, 100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3);
    }
}

@keyframes progress-fill {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .share-journeys-section {
        padding: 60px 20px;
    }

    .share-workflow-container {
        padding: 40px 24px;
        border-radius: 20px;
    }

    .share-templates-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .share-template-circle {
        width: 80px;
        height: 80px;
    }

    .share-template-name {
        font-size: 11px;
    }

    .share-participants-list {
        flex-direction: column;
        align-items: stretch;
    }

    .share-ai-panel {
        padding: 20px;
        border-radius: 16px;
    }

    .share-ai-icon {
        width: 44px;
        height: 44px;
    }

    .workflow-step-content {
        padding: 16px;
        border-radius: 12px;
    }

    .workflow-step-icon {
        width: 48px;
        height: 48px;
    }

    .workflow-step-number {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .share-journeys-section {
        padding: 40px 16px;
    }

    .share-workflow-container {
        padding: 30px 20px;
        border-radius: 18px;
    }

    .share-templates-grid {
        gap: 12px;
    }

    .share-template-circle {
        width: 70px;
        height: 70px;
    }

    .share-template-check {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }

    .share-input-field {
        padding: 14px 18px;
        font-size: 14px;
        border-radius: 12px;
    }

    .share-participant-chip {
        padding: 6px 12px 6px 6px;
        font-size: 13px;
    }

    .share-participant-avatar {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .share-ai-panel {
        padding: 16px;
        flex-direction: column;
        text-align: center;
    }

    .share-ai-icon {
        width: 40px;
        height: 40px;
    }

    .share-ai-text {
        font-size: 13px;
    }

    .workflow-step {
        gap: 12px;
    }

    .workflow-step-content {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
    }

    .workflow-step-icon {
        width: 42px;
        height: 42px;
    }

    .workflow-step-number {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .workflow-step-title {
        font-size: 16px;
    }

    .workflow-step-desc {
        font-size: 13px;
    }
}


/* ============================================
   Navigate Journeys Section (3)
   ============================================ */

/* Stage Icon Styles */
.stage-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--inv-bg-color) !important;
}

.stage-icon--discovery {
    background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 18%, transparent), color-mix(in srgb, var(--blurple) 10%, transparent));
    border: 1px solid color-mix(in srgb, var(--purple) 28%, transparent);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--purple) 12%, transparent);
}

.stage-icon--experience {
    background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 18%, transparent), color-mix(in srgb, var(--purple) 10%, transparent));
    border: 1px solid color-mix(in srgb, var(--blurple) 28%, transparent);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--blurple) 12%, transparent);
}

.stage-icon--scope {
    background: linear-gradient(135deg, color-mix(in srgb, var(--lightblue) 18%, transparent), color-mix(in srgb, var(--purple) 10%, transparent));
    border: 1px solid color-mix(in srgb, var(--lightblue) 28%, transparent);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--lightblue) 12%, transparent);
}

/* Navigate Stage Cards */
.navigate-stage-selector {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.navigate-stage-card {
    transition: all 250ms ease;
    padding: 0.75rem 0.875rem;
    cursor: pointer;
    border: none;
    border-left: 2.5px solid transparent;
    position: relative;
    align-items: center;
    background: transparent;
}

.navigate-stage-card:hover {
    background: rgba(255, 255, 255, 0.03);
}

.navigate-stage-card.is-active {
    border-left-color: var(--inv-bg-color);
    background: rgba(255, 255, 255, 0.03);
}

.navigate-stage-card.is-active .stage-icon svg {
    opacity: 1;
}

.navigate-stage-card:not(.is-active) {
    opacity: 0.5;
}

.navigate-stage-card:not(.is-active):hover {
    opacity: 0.8;
}

.navigate-stage-hint {
    font-size: 0.7rem;
    color: var(--inv-bg-color);
    opacity: 0.6 !important;
    text-align: left;
    margin-top: 1.25rem;
    letter-spacing: 0.04em;
    margin-top: 40px !important;
    padding-left: 30px;
    font-weight: 600 !important;
}

/* Navigate Journey Cards */
.navigate-journey-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 1230px) {
    .navigate-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.navigate-journey-card {
    transition: all 300ms cubic-bezier(0.22, 1, 0.36, 1);
    padding: 14px 16px;
    border-radius: 14px;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    position: relative;
    align-items: center;
    background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent);
}

.navigate-journey-card:hover {
    background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
    border-color: color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    transform: translateX(3px);
}

.navigate-journey-card.is-active {
    background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
    border-color: color-mix(in srgb, var(--blurple) 30%, transparent);
    box-shadow: 0 4px 24px color-mix(in srgb, var(--blurple) 10%, transparent);
}

.navigate-journey-card.is-active .stage-icon svg {
    opacity: 1;
}

.navigate-journey-card:not(.is-active) {
    opacity: 0.55;
}

.navigate-journey-card:not(.is-active):hover {
    opacity: 0.85;
}

.navigate-journey-selector:has(.navigate-journey-card:hover) .navigate-journey-card:not(:hover):not(.is-active) {
    opacity: 0.35;
    filter: blur(0.5px);
}

/* Navigate Journey Visualizations */
/* Override section-level overflow-hidden to allow vertical node overflow */
#navigate {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.navigate-journey-viz {
    position: relative;
    width: 100%;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.navigate-journey-viz.is-active {
    opacity: 1;
}

/* Navigate Ring Container */
.navigate-ring-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    max-width: 95%;
    max-height: 95%;
}

.navigate-ring {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.3));
}

.progress-ring {
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.stage-marker {
    transition: all 0.4s ease;
    cursor: pointer;
}

.stage-marker:hover {
    r: 10;
    opacity: 1 !important;
}

/* Collaboration Space */
.navigate-collab-space {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    max-width: 70%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.collab-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stage-name-display {
    font-size: 18px;
    font-weight: 700;
    color: var(--inv-bg-color);
    margin-bottom: 4px;
}

.stage-progress {
    font-size: 12px;
    color: var(--inv-bg-color);
    opacity: 0.6;
}

.collab-participants {
    margin-bottom: 12px;
}

.participant-group {
    margin-bottom: 8px;
}

.participant-group:last-child {
    margin-bottom: 0;
}

.group-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--inv-bg-color);
    opacity: 0.5;
    margin-bottom: 8px;
}

.participant-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.participant {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
}

.participant.accent {
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.participant-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), var(--lightblue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: white;
    margin-right: 3px;
    flex-shrink: 0;
}

.participant-info {
    flex: 1;
    min-width: 0;
}

.participant-name {
    font-size: 10px;
    font-weight: 600;
    color: var(--inv-bg-color);
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
}

.participant-title {
    font-size: 10px;
    color: var(--inv-bg-color);
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.collab-activities {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.activity-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--inv-bg-color);
    opacity: 0.5;
    margin-bottom: 8px;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.activity-item {
    font-size: 11px;
    color: var(--inv-bg-color);
    opacity: 0.8;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border-left: 2px solid rgba(139, 92, 246, 0.4);
}

/* AI Navigator Widget Animations */
#ai-navigator-widget {
    transition: all 0.3s ease;
}

#nav-probability,
#nav-confidence {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#nav-justification {
    transition: opacity 0.4s ease;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .navigate-collab-space {
        width: 240px;
        padding: 16px;
    }

    .stage-name-display {
        font-size: 16px;
    }

    .participant-name {
        font-size: 11px;
    }

    .activity-item {
        font-size: 10px;
    }
}

@media (max-width: 768px) {
    .navigate-ring-container {
        width: 300px;
        height: 300px;
    }

    .navigate-collab-space {
        width: 200px;
        padding: 12px;
    }

    .stage-name-display {
        font-size: 14px;
    }

    .collab-participants,
    .collab-activities {
        font-size: 10px;
    }
}

.stage-icon--commit {
    background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 18%, transparent), color-mix(in srgb, var(--purple) 10%, transparent));
    border: 1px solid color-mix(in srgb, var(--blurple) 28%, transparent);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--blurple) 12%, transparent);
}

.stage-icon--deploy {
    background: linear-gradient(135deg, color-mix(in srgb, var(--lightblue) 18%, transparent), color-mix(in srgb, var(--purple) 10%, transparent));
    border: 1px solid color-mix(in srgb, var(--lightblue) 28%, transparent);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--lightblue) 12%, transparent);
}

.stage-icon--success {
    background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 18%, transparent), color-mix(in srgb, var(--blurple) 10%, transparent));
    border: 1px solid color-mix(in srgb, var(--purple) 28%, transparent);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--purple) 12%, transparent);
}

/* ── Meets You Where You Are Section ── */

.meets-section {
    background: #000000;
    color: #f1f5f9;
    padding: 7rem 0;
    position: relative;
    overflow: hidden;
}

.meets-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 20%, rgba(99, 102, 241, 0.06), transparent 50%),
        radial-gradient(circle at 75% 80%, rgba(139, 92, 246, 0.04), transparent 50%);
    pointer-events: none;
}

.meets-inner {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.meets-header {
    text-align: center;
    margin-bottom: 4rem;
}

.meets-kicker {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #818cf8;
    margin-bottom: 1rem;
}

.meets-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* Mode Cards */

.meets-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.meets-mode-card {
    border-radius: 20px;
    padding: 2.25rem;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.meets-mode-card:hover {
    transform: translateY(-3px);
}

.meets-mode--lightning {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.meets-mode--lightning:hover {
    box-shadow: 0 16px 48px rgba(99, 102, 241, 0.1);
}

.meets-mode--enterprise {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.meets-mode--enterprise:hover {
    box-shadow: 0 16px 48px rgba(139, 92, 246, 0.1);
}

.meets-mode-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.meets-mode--lightning .meets-mode-icon {
    background: rgba(99, 102, 241, 0.12);
    color: #818cf8;
}

.meets-mode--enterprise .meets-mode-icon {
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
}

.meets-mode-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.6rem;
    letter-spacing: -0.01em;
}

.meets-mode-desc {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.meets-mode-detail {
    margin-bottom: 1.25rem;
}

.meets-mode-detail:last-child {
    margin-bottom: 0;
}

.meets-mode-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.meets-mode-detail-desc {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
}

.meets-mode-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.meets-mode-detail-list li {
    position: relative;
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.5;
    padding-left: 1rem;
    margin-bottom: 0.3rem;
}

.meets-mode-detail-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #818cf8;
    opacity: 0.6;
}

.meets-mode-includes {
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.55;
    margin: 0;
}

.meets-mode-footer {
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: #334155;
    margin: 0.75rem 0 0;
}

.meets-modes-note {
    text-align: center;
    font-size: 0.65rem;
    color: #64748b;
    margin: 1.75rem auto 0;
    max-width: 28rem;
    line-height: 1.5;
}

.meets-cta-wrap {
    text-align: center;
    margin-top: 1.25rem;
}

.meets-cta {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #818cf8;
    text-decoration: none !important;
    border: 1px solid rgba(129, 140, 248, 0.25);
    padding: 0.6rem 2rem;
    border-radius: 6px;
    transition: background 0.2s ease, color 0.2s ease;
}

.meets-cta:hover {
    background: rgba(129, 140, 248, 0.08);
    color: #a5b4fc;
}

/* ---- CRM Bridge Card ---- */

/* ── CRM Bridge — Premium Integration Diagram ── */

.meets-crm-bridge {
    margin-top: 2.5rem;
    border-radius: 20px;
    padding: 2.75rem 2.25rem 2.25rem;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--blurple) 5%, transparent) 0%, transparent 70%),
        color-mix(in srgb, var(--inv-bg-color) 2%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent);
    box-shadow:
        0 0 50px 10px color-mix(in srgb, var(--blurple) 2%, transparent),
        0 12px 40px -8px color-mix(in srgb, var(--blurple) 4%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 3%, transparent),
        0 0 0 0.5px color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
    position: relative;
    overflow: hidden;
}

/* Ambient atmosphere behind the bridge */
.meets-crm-bridge::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 40% 60% at 50% 50%, color-mix(in srgb, var(--blurple) 4%, transparent) 0%, transparent 70%);
    pointer-events: none;
    animation: meetsBridgeAtmosphere 8s ease-in-out infinite;
}

@keyframes meetsBridgeAtmosphere {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

.meets-bridge-inner {
    display: grid;
    grid-template-columns: 1fr auto 1.2fr auto 1fr;
    align-items: start;
    gap: 0;
    max-width: 54rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ── Nodes ── */

.meets-bridge-node {
    text-align: center;
    padding: 1.25rem 1rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.meets-bridge-node:hover {
    border-color: color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    box-shadow: 0 0 30px color-mix(in srgb, var(--blurple) 4%, transparent);
}

.meets-bridge-node--center {
    position: relative;
    background:
        radial-gradient(ellipse 80% 60% at 50% 20%, color-mix(in srgb, var(--blurple) 6%, transparent) 0%, transparent 70%),
        color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
    border-color: color-mix(in srgb, var(--blurple) 15%, transparent);
    box-shadow:
        0 0 40px 8px color-mix(in srgb, var(--blurple) 4%, transparent),
        0 8px 30px -6px color-mix(in srgb, var(--blurple) 6%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}

/* ── Icons ── */

.meets-bridge-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.85rem;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.meets-bridge-node:hover .meets-bridge-icon {
    transform: scale(1.08);
}

.meets-bridge-icon--crm {
    background: color-mix(in srgb, #3b82f6 12%, transparent);
    color: #60a5fa;
    border: 0.5px solid color-mix(in srgb, #3b82f6 15%, transparent);
}

.meets-bridge-icon--cn {
    background: color-mix(in srgb, var(--blurple) 15%, transparent);
    color: #a5b4fc;
    border: 0.5px solid color-mix(in srgb, var(--blurple) 22%, transparent);
    box-shadow:
        0 0 24px color-mix(in srgb, var(--blurple) 15%, transparent),
        0 0 60px color-mix(in srgb, var(--blurple) 6%, transparent);
}

/* Spinning arc ring around the CN icon */
.meets-bridge-icon--cn::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 18px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 290deg,
        color-mix(in srgb, var(--blurple) 10%, transparent) 330deg,
        color-mix(in srgb, var(--blurple) 30%, transparent) 355deg,
        transparent 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px), #000 100%, transparent 100%);
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px), #000 100%, transparent 100%);
    animation: aiNodeArcSpin 6s linear infinite;
    pointer-events: none;
}

.meets-bridge-icon--buyers {
    background: color-mix(in srgb, #10b981 12%, transparent);
    color: #6ee7b7;
    border: 0.5px solid color-mix(in srgb, #10b981 15%, transparent);
}

/* ── Node text ── */

.meets-bridge-node-title {
    font-size: 0.9rem;
    font-weight: 800;
    margin-bottom: 0.6rem;
    letter-spacing: -0.01em;
    color: var(--inv-bg-color);
}

.meets-bridge-node--center .meets-bridge-node-title {
    background: linear-gradient(135deg, var(--inv-bg-color) 0%, color-mix(in srgb, var(--inv-bg-color) 72%, var(--blurple)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.meets-bridge-node-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.74rem;
    font-weight: 450;
    color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent);
    line-height: 1.85;
    letter-spacing: 0.01em;
}

.meets-bridge-node-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.meets-bridge-node-list li::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    flex-shrink: 0;
}

.meets-bridge-node--center .meets-bridge-node-list li::before {
    background: color-mix(in srgb, var(--blurple) 40%, transparent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--blurple) 20%, transparent);
}

.meets-bridge-node--center .meets-bridge-node-list {
    color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent);
    font-weight: 500;
}

/* ── Arrows ── */

.meets-bridge-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 6rem;
    padding: 0 0.4rem;
    position: relative;
    align-self: center;
}

.meets-bridge-arrow-svg {
    width: 100%;
    height: 22px;
    color: color-mix(in srgb, var(--blurple) 35%, transparent);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--blurple) 10%, transparent));
    overflow: visible;
}

/* Animated pulse traveling along the arrow lines */
.meets-bridge-arrow-svg line {
    stroke-dashoffset: 0;
    animation: meetsBridgeFlow 3s linear infinite;
}

@keyframes meetsBridgeFlow {
    from { stroke-dashoffset: 14; }
    to   { stroke-dashoffset: 0; }
}

.meets-bridge-arrow-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--blurple) 70%, transparent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
    line-height: 1.3;
}

.meets-bridge-arrow-label--above {
    order: -1;
    margin-bottom: 0.25rem;
}

.meets-bridge-arrow-label--below {
    margin-top: 0.25rem;
}

/* ── Tagline ── */

.meets-bridge-tagline {
    text-align: center;
    font-size: 0.82rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--inv-bg-color) 42%, transparent);
    margin-top: 2rem;
    letter-spacing: 0.01em;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    padding-top: 1.25rem;
    border-top: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
}

.meets-mode-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.meets-tag {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.meets-tag--more {
    color: #475569;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.04);
    letter-spacing: 0.1em;
}

.meets-tag--int {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.meets-tag--int:hover {
    background: rgba(129, 140, 248, 0.08);
    border-color: rgba(129, 140, 248, 0.18);
    color: #c7d2fe;
}

.meets-tag--int.is-active {
    background: rgba(129, 140, 248, 0.14);
    border-color: rgba(129, 140, 248, 0.30);
    color: #e0e7ff;
    box-shadow: 0 0 12px rgba(129, 140, 248, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.meets-int-desc {
    margin-top: 0.85rem;
    padding: 0.7rem 1rem;
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.55;
    background: rgba(255, 255, 255, 0.02);
    border: 0.5px solid rgba(255, 255, 255, 0.05);
    border-left: 2px solid rgba(129, 140, 248, 0.35);
    border-radius: 0 6px 6px 0;
    transition: opacity 0.3s ease;
}

.meets-int-desc span {
    color: #c4b5fd;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.meets-tag--platform {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #818cf8;
    background: rgba(129, 140, 248, 0.08);
    border: 1px solid rgba(129, 140, 248, 0.15);
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
}

.meets-tag--platform svg {
    opacity: 0.5;
}

/* Integrations Grid */

.meets-integrations {
    max-width: 540px;
    margin: 0 auto 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    opacity: 0.6;
}

.meets-int-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.meets-int-row:last-of-type {
    border-bottom: none;
}

.meets-int-cat {
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
    min-width: 110px;
    flex-shrink: 0;
}

.meets-int-name {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
}

.meets-int-sep {
    color: #334155;
    font-size: 0.6rem;
}

.meets-int-more {
    text-align: center;
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #334155;
    padding-top: 1.25rem;
}

/* Footer */

.meets-footer {
    text-align: center;
    font-size: 0.95rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.65;
}

/* Responsive */

@media (max-width: 768px) {
    .meets-section {
        padding: 4rem 0;
    }

    .meets-header {
        margin-bottom: 2.5rem;
    }

    .meets-title {
        font-size: 2rem;
        letter-spacing: -0.02em;
        line-height: 1.15;
    }

    .meets-modes {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 2.5rem;
    }

    .meets-mode-card {
        padding: 1.5rem;
    }

    .meets-crm-bridge {
        padding: 1.75rem 1.25rem;
    }

    .meets-bridge-inner {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .meets-bridge-node {
        padding: 1rem 0.85rem;
    }

    .meets-bridge-arrow {
        min-width: unset;
        padding: 0.25rem 0;
    }

    .meets-bridge-arrow-svg {
        width: 20px;
        height: 36px;
        transform: rotate(90deg);
    }

    .meets-bridge-arrow-label {
        font-size: 0.58rem;
    }

    .meets-mode-desc {
        text-align: left;
    }

    .meets-int-cat {
        min-width: 100px;
        font-size: 0.6rem;
    }

    .meets-int-row {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
}

/* ── ROI Section — Light Theme ── */

.roi-section {
    background: var(--main-bg-color);
    color: var(--inv-bg-color);
    padding: 7rem 0 5rem;
    position: relative;
    overflow: hidden;
}

.roi-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 500px;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--purple) 6%, transparent) 0%, transparent 70%);
    pointer-events: none;
}

.roi-inner {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.roi-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.roi-kicker {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: 1rem;
}

.roi-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--inv-bg-color);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.roi-subtitle {
    font-size: 1.05rem;
    color: var(--inv-bg-color);
    opacity: 0.55;
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Multiplier Cards */
.roi-multiplier-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 3.5rem;
}

.roi-multiplier-card {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    background: color-mix(in srgb, var(--purple) 2%, var(--main-bg-color));
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.roi-multiplier-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--purple) 20%, transparent);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--purple) 8%, transparent);
}

.roi-card-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--purple) 10%, var(--main-bg-color));
    color: var(--purple);
}

.roi-card-body {
    flex: 1;
    min-width: 0;
}

.roi-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--inv-bg-color);
    margin-bottom: 0.35rem;
}

.roi-card-desc {
    font-size: 0.8rem;
    color: var(--inv-bg-color);
    opacity: 0.5;
    line-height: 1.6;
    margin: 0;
}

.roi-card-source {
    display: block;
    font-size: 0.6rem;
    color: var(--inv-bg-color);
    opacity: 0.25;
    font-style: italic;
    margin-top: 0.5rem;
}

/* Stats Bar */
.roi-stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 2.25rem 2.5rem 2.75rem;
    border-radius: 20px;
    background: color-mix(in srgb, var(--purple) 3%, var(--main-bg-color));
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    margin-bottom: 3.5rem;
    position: relative;
}

.roi-source-note {
    position: absolute;
    bottom: 0.6rem;
    right: 1rem;
    font-size: 0.5rem;
    color: var(--inv-bg-color);
    opacity: 0.2;
    letter-spacing: 0.02em;
}

.roi-stat {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.roi-stat-source {
    font-size: 0.5rem;
    color: var(--inv-bg-color);
    opacity: 0.2;
    font-style: italic;
    margin-top: 0.15rem;
}

.roi-stat-value {
    font-size: 2.325rem;
    font-weight: 800;
    color: var(--purple);
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.roi-stat-unit {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--purple);
    opacity: 0.8;
}

.roi-stat-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--inv-bg-color);
    opacity: 0.45;
}

.roi-stat-divider {
    width: 1px;
    height: 48px;
    background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    flex-shrink: 0;
}

/* Testimonial Carousel */
.roi-testimonials {
    text-align: center;
    margin-bottom: 1rem;
}

.roi-testimonial-track {
    position: relative;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.roi-quote {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
    margin: 0;
    padding: 0;
    border: none;
}

.roi-quote.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
}

.roi-quote p {
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--inv-bg-color);
    opacity: 0.6;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 0 0.75rem;
    font-style: italic;
}

.roi-quote cite {
    font-size: 0.7rem;
    font-weight: 600;
    font-style: normal;
    color: var(--purple);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.roi-quote-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.roi-dot {
    all: unset;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--inv-bg-color);
    opacity: 0.15;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.roi-dot:hover {
    opacity: 0.35;
}

.roi-dot.is-active {
    opacity: 0.6;
    transform: scale(1.3);
    background: var(--purple);
}

.roi-privacy-note {
    font-size: 0.65rem;
    color: var(--inv-bg-color);
    opacity: 0.25;
    margin-top: 1rem;
    letter-spacing: 0.03em;
}

/* ── Final CTA — Light Theme ── */

.final-cta-section {
    background: linear-gradient(
        180deg,
        var(--main-bg-color) 0%,
        color-mix(in srgb, var(--purple) 4%, var(--main-bg-color)) 50%,
        var(--main-bg-color) 100%
    );
    padding: 6rem 0 7rem;
    position: relative;
    overflow: hidden;
}

.final-cta-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--purple) 8%, transparent) 0%, transparent 70%);
    pointer-events: none;
}

.final-cta-inner {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}

.final-cta-title {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--inv-bg-color);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

.final-cta-subtitle {
    font-size: 1.05rem;
    color: var(--inv-bg-color);
    opacity: 0.45;
    line-height: 1.6;
    max-width: 480px;
    margin: 0 auto 2.5rem;
}

.final-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.9rem 2.5rem;
    border-radius: 12px;
    background: var(--purple);
    color: #ffffff !important;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    box-shadow: 0 4px 24px color-mix(in srgb, var(--purple) 30%, transparent);
}

.final-cta-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 40px color-mix(in srgb, var(--purple) 40%, transparent);
    background: color-mix(in srgb, var(--purple) 85%, var(--blurple));
}

.final-cta-btn svg {
    transition: transform 0.3s ease;
}

.final-cta-btn:hover svg {
    transform: translateX(3px);
}

/* ── ROI + CTA Responsive ── */

@media (max-width: 768px) {
    .roi-section {
        padding: 4rem 0 3rem;
    }

    .roi-inner {
        padding: 0 0.8rem;
    }

    .roi-header {
        margin-bottom: 2.5rem;
    }

    .roi-title {
        font-size: 1.75rem;
        letter-spacing: -0.02em;
        line-height: 1.15;
    }

    .roi-multiplier-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        margin-bottom: 2.5rem;
    }

    .roi-stats-bar {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .roi-stat-divider {
        width: 48px;
        height: 1px;
    }

    .roi-stat-value {
        font-size: 1.875rem;
    }

    .roi-card-desc {
        text-align: left;
    }

    .roi-quote p {
        font-size: 0.95rem;
    }

    .final-cta-section {
        padding: 4rem 0 5rem;
    }

    .final-cta-title {
        font-size: 1.75rem;
        letter-spacing: -0.02em;
        line-height: 1.15;
    }

    .final-cta-subtitle {
        margin-bottom: 2rem;
    }
}

@media (max-width: 480px) {
    .roi-multiplier-card {
        padding: 1.25rem;
    }

    .roi-card-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
}

/* ── Journey V2 — Start Your Journey ── */

.journey-v2 {
    background: #000000;
    color: #f1f5f9;
    padding: 7rem 0 6rem;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.journey-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 15%, rgba(99, 102, 241, 0.06) 0%, rgba(99, 102, 241, 0.03) 25%, rgba(99, 102, 241, 0) 50%),
        radial-gradient(circle at 70% 85%, rgba(139, 92, 246, 0.04) 0%, rgba(139, 92, 246, 0.02) 25%, rgba(139, 92, 246, 0) 50%);
    pointer-events: none;
}

.journey-v2-inner {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 1.5rem;
    width: 100%;
}

.journey-v2-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.journey-v2-kicker {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #818cf8;
    margin-bottom: 1rem;
}

.journey-v2-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}

.journey-v2-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.journey-v2-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 2rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.journey-v2-card:hover {
    transform: translateY(-3px);
}

.journey-v2-card--customer {
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.journey-v2-card--customer:hover {
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 16px 48px rgba(99, 102, 241, 0.08);
}

.journey-v2-card--seller {
    border: 1px solid rgba(139, 92, 246, 0.25);
}

.journey-v2-card--seller:hover {
    box-shadow: 0 16px 48px rgba(139, 92, 246, 0.1);
}

.journey-v2-card-icon {
    color: #818cf8;
    margin-bottom: 1.25rem;
    opacity: 0.7;
}

.journey-v2-card-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
}

.journey-v2-card-desc {
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0 0 1.75rem;
    max-width: 280px;
}

.journey-v2-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    transition: all 0.25s ease;
    margin-top: auto;
}

.journey-v2-cta--customer {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.journey-v2-card:hover .journey-v2-cta--customer {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.journey-v2-cta--seller {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.85), rgba(99, 102, 241, 0.85));
    color: #ffffff;
    border: 1px solid transparent;
}

.journey-v2-card:hover .journey-v2-cta--seller {
    background: linear-gradient(135deg, rgba(67, 56, 202, 0.95), rgba(79, 70, 229, 0.95));
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.25);
}

.journey-v2-cta svg {
    transition: transform 0.3s ease;
}

.journey-v2-card:hover .journey-v2-cta svg {
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .journey-v2 { padding: 4rem 0 3rem; min-height: auto; }
    .journey-v2-header { margin-bottom: 2.5rem; }
    .journey-v2-title { font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1.15; }
    .journey-v2-cards { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
}

/* ── Pricing V2 — Premium Black ── */

.pricing-v2,
.pricing {
    background: #000000 !important;
    color: #f1f5f9;
    padding: 7rem 0 6rem;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

.pricing-v2::before,
.pricing::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 15%, rgba(99, 102, 241, 0.06) 0%, rgba(99, 102, 241, 0.03) 25%, rgba(99, 102, 241, 0) 50%),
        radial-gradient(circle at 70% 85%, rgba(139, 92, 246, 0.04) 0%, rgba(139, 92, 246, 0.02) 25%, rgba(139, 92, 246, 0) 50%);
    pointer-events: none;
}

.pricing-v2-inner {
    position: relative;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header */

.pricing-v2-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.pricing-v2-kicker {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #818cf8;
    margin-bottom: 1rem;
}

.pricing-v2-title {
    font-size: 2.75rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

.pricing-v2-subtitle {
    font-size: 1rem;
    color: #94a3b8;
    line-height: 1.65;
    max-width: none;
    margin: 0 auto;
}

/* Cards Grid */

.pricing-v2-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 3rem;
}

.pricing-v2-card {
    border-radius: 16px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: rgba(255, 255, 255, 0.03);
}

.pricing-v2-card:hover {
    transform: translateY(-3px);
}

.pricing-v2-card--guest {
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.pricing-v2-card--guest:hover {
    box-shadow: 0 16px 48px rgba(148, 163, 184, 0.06);
}

.pricing-v2-card--pro {
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.pricing-v2-card--pro:hover {
    box-shadow: 0 16px 48px rgba(99, 102, 241, 0.1);
}

.pricing-v2-card--enterprise {
    border: 1px solid rgba(139, 92, 246, 0.25);
}

.pricing-v2-card--enterprise:hover {
    box-shadow: 0 16px 48px rgba(139, 92, 246, 0.1);
}

/* Card Head */

.pricing-v2-card-head {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pricing-v2-tier {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.pricing-v2-price {
    display: flex;
    align-items: baseline;
    gap: 0.1rem;
}

.pricing-v2-currency {
    font-size: 1.1rem;
    font-weight: 600;
    color: #94a3b8;
    align-self: flex-start;
    margin-top: 0.2rem;
}

.pricing-v2-amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1;
}

.pricing-v2-amount--text {
    font-size: 2rem;
}

.pricing-v2-period {
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
    margin-left: 0.1rem;
}

/* Features */

.pricing-v2-features {
    flex: 1;
    margin-bottom: 1.5rem;
}

.pricing-v2-features-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.pricing-v2-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.pricing-v2-list li {
    font-size: 0.85rem;
    color: #cbd5e1;
    line-height: 1.45;
    padding-left: 1.25rem;
    position: relative;
}

.pricing-v2-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #818cf8;
    opacity: 0.6;
}

.pricing-v2-list li strong {
    color: #fff;
    font-weight: 600;
}

/* CTA Buttons */

.pricing-v2-cta {
    display: block;
    text-align: center;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none !important;
    color: #ffffff !important;
    transition: all 0.25s ease;
    margin-top: auto;
}

.pricing-v2-cta--guest {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-v2-cta--guest:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.pricing-v2-cta--pro {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.85), rgba(99, 102, 241, 0.85));
    color: #ffffff;
    border: 1px solid transparent;
}

.pricing-v2-cta--pro:hover {
    background: linear-gradient(135deg, rgba(67, 56, 202, 0.95), rgba(79, 70, 229, 0.95));
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.25);
    color: #ffffff;
}

.pricing-v2-cta--enterprise {
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.25);
}

.pricing-v2-cta--enterprise:hover {
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
}

/* Card note */
.pricing-v2-card-note {
    text-align: center;
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: #64748b;
}

.pricing-v2-card-note a {
    color: #818cf8 !important;
    text-decoration: none !important;
    font-weight: 600;
    transition: color 0.2s ease;
}

.pricing-v2-card-note a:hover {
    color: #a5b4fc !important;
}

.pricing-v2-credits-text {
    font-size: 0.9rem;
    color: #94a3b8;
    margin: 0;
}

.pricing-v2-credits-text a {
    color: #818cf8 !important;
    text-decoration: none !important;
    font-weight: 600;
    transition: color 0.2s ease;
}

.pricing-v2-credits-text a:hover {
    color: #a5b4fc !important;
}

/* Highlights */

.pricing-v2-highlights {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.pricing-v2-highlight {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
}

.pricing-v2-highlight svg {
    color: #818cf8;
    flex-shrink: 0;
}

/* Responsive */

@media (max-width: 900px) {
    .pricing-v2-cards {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .pricing-v2 {
        padding: 4rem 0 3rem;
    }

    .pricing-v2-title {
        font-size: 2rem;
        letter-spacing: -0.02em;
        line-height: 1.15;
    }

    .pricing-v2-highlights {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
}

/* ── Documents V2 ── */

.docs-v2 {
    background: var(--main-bg-color);
    color: var(--inv-bg-color);
    padding: 7rem 0 6rem;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

.docs-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 15%, rgba(99, 102, 241, 0.06) 0%, rgba(99, 102, 241, 0.03) 25%, rgba(99, 102, 241, 0) 50%),
        radial-gradient(circle at 70% 85%, rgba(139, 92, 246, 0.04) 0%, rgba(139, 92, 246, 0.02) 25%, rgba(139, 92, 246, 0) 50%);
    pointer-events: none;
}

.docs-v2-inner {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.docs-v2-header {
    text-align: center;
    margin-bottom: 4rem;
}

.docs-v2-kicker {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: 1rem;
}

.docs-v2-subtitle {
    font-size: 1rem;
    color: var(--inv-bg-color);
    opacity: 0.6;
    line-height: 1.65;
}

/* ---- FAQ V2 ---- */
.faq-v2-section {
    background: var(--main-bg-color);
    color: var(--inv-bg-color);
    min-height: 100vh;
}

.faq .container-xs .faq-v2-kicker {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: 1rem;
    text-align: center !important;
}

.faq-v2-subtitle {
    font-size: 1rem;
    color: var(--inv-bg-color);
    opacity: 0.6;
    line-height: 1.65;
    text-align: center;
}

.faq .section-header.center-content {
    padding-bottom: 0.5rem;
}

.docs-v2-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.docs-v2-card {
    border-radius: 20px;
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
    background: var(--off-bg-color);
    border: 1px solid var(--grey-accent-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.docs-v2-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 48px rgba(99, 102, 241, 0.06);
}

.docs-v2-card-body {
    flex: 1;
    margin-bottom: 1.5rem;
}

.docs-v2-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--inv-bg-color);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.docs-v2-card-desc {
    font-size: 0.9rem;
    color: var(--inv-bg-color);
    opacity: 0.6;
    line-height: 1.55;
    margin: 0;
}

.docs-v2-cta {
    display: block;
    text-align: center;
    padding: 0.55rem 1.25rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none !important;
    transition: all 0.25s ease;
    margin-top: auto;
    background: transparent;
}

.docs-v2-cta:hover {
    transform: translateY(-1px);
}

.docs-v2-card:nth-child(4n+1) .docs-v2-cta {
    color: var(--middleBlue) !important;
    border: 1px solid var(--middleBlue);
}
.docs-v2-card:nth-child(4n+1) .docs-v2-cta:hover {
    background: var(--middleBlue);
    color: #ffffff !important;
}

.docs-v2-card:nth-child(4n+2) .docs-v2-cta {
    color: var(--purple) !important;
    border: 1px solid var(--purple);
}
.docs-v2-card:nth-child(4n+2) .docs-v2-cta:hover {
    background: var(--purple);
    color: #ffffff !important;
}

.docs-v2-card:nth-child(4n+3) .docs-v2-cta {
    color: var(--blurple) !important;
    border: 1px solid var(--blurple);
}
.docs-v2-card:nth-child(4n+3) .docs-v2-cta:hover {
    background: var(--blurple);
    color: #ffffff !important;
}

.docs-v2-card:nth-child(4n+4) .docs-v2-cta {
    color: var(--pink) !important;
    border: 1px solid var(--pink);
}
.docs-v2-card:nth-child(4n+4) .docs-v2-cta:hover {
    background: var(--pink);
    color: #ffffff !important;
}

@media (max-width: 640px) {
    .docs-v2 {
        padding: 4rem 0 3rem;
        min-height: auto;
    }

    .docs-v2-header {
        margin-bottom: 2.5rem;
    }

    .docs-v2-cards {
        grid-template-columns: 1fr;
    }
}

/* ---- Contact V2 ---- */
.contact-v2 {
    background: var(--main-bg-color);
    color: var(--inv-bg-color);
    padding: 7rem 0 6rem;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.contact-v2-inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}

.contact-v2-kicker {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: 1rem;
}

.contact-v2-headline {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--inv-bg-color);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.contact-v2-subtitle {
    font-size: 1rem;
    color: var(--inv-bg-color);
    opacity: 0.6;
    line-height: 1.65;
}

.contact-v2-header {
    margin-bottom: 3rem;
}

.contact-v2-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.contact-v2-card {
    background: var(--off-bg-color);
    border: 1px solid var(--grey-accent-color);
    border-radius: 16px;
    padding: 2.5rem 1.5rem 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.contact-v2-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.08);
}

.contact-v2-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.contact-v2-card--gmail .contact-v2-card-icon {
    background: rgba(120, 115, 245, 0.1);
    color: var(--purple);
}

.contact-v2-card--copy .contact-v2-card-icon {
    background: rgba(86, 154, 241, 0.1);
    color: var(--blurple);
}

.contact-v2-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--inv-bg-color);
    margin-bottom: 0.5rem;
}

.contact-v2-card-desc {
    font-size: 0.85rem;
    color: var(--inv-bg-color);
    opacity: 0.5;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.contact-v2-cta {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none !important;
    margin-top: auto;
    background: transparent;
    border: 1px solid;
}

.contact-v2-cta--gmail {
    color: var(--purple) !important;
    border-color: var(--purple);
}

.contact-v2-cta--gmail:hover {
    background: var(--purple);
    color: #ffffff !important;
}

.contact-v2-cta--copy {
    color: var(--blurple) !important;
    border-color: var(--blurple);
}

.contact-v2-cta--copy:hover {
    background: var(--blurple);
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .contact-v2 {
        padding: 4rem 0 3rem;
    }
    .contact-v2-header {
        margin-bottom: 2.5rem;
    }
    .contact-v2-cards {
        grid-template-columns: 1fr;
    }
}

/* ── SweetAlert2 themed overrides (shared CN style) ── */

.swal2-cn-popup {
    background: var(--main-bg-color) !important;
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    border-radius: 16px !important;
    padding: 2.25rem 2rem !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12);
}

.swal2-cn-title {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: var(--inv-bg-color) !important;
    letter-spacing: -0.01em !important;
    padding: 0 !important;
    margin: 0 0 1rem !important;
}

.swal2-cn-html {
    font-size: 0.85rem !important;
    color: var(--inv-bg-color) !important;
    opacity: 0.6;
    line-height: 1.6 !important;
    padding: 0 !important;
    margin: 0 0 0.5rem !important;
}

.swal2-cn-html b {
    color: var(--inv-bg-color);
    font-weight: 700;
    opacity: 1;
}

.swal2-cn-confirm {
    background: var(--purple) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    padding: 0.65rem 1.75rem !important;
    box-shadow: 0 4px 24px color-mix(in srgb, var(--purple) 30%, transparent) !important;
    transition: all 0.25s ease !important;
}

.swal2-cn-confirm:hover {
    background: color-mix(in srgb, var(--purple) 85%, var(--blurple)) !important;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--purple) 35%, transparent) !important;
}

.swal2-cn-cancel {
    background: none !important;
    color: var(--inv-bg-color) !important;
    opacity: 0.4;
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent) !important;
    border-radius: 10px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 0.65rem 1.75rem !important;
    transition: all 0.25s ease !important;
}

.swal2-cn-cancel:hover {
    opacity: 0.6;
    border-color: color-mix(in srgb, var(--inv-bg-color) 15%, transparent) !important;
}

.swal2-cn-input {
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent) !important;
    border-radius: 10px !important;
    background: var(--main-bg-color) !important;
    color: var(--inv-bg-color) !important;
    font-size: 0.9rem !important;
    padding: 0.75rem 1rem !important;
    box-shadow: none !important;
}

@keyframes swal2-cn-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes swal2-cn-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.96); }
}

.swal2-cn-show {
    animation: swal2-cn-in 0.25s ease-out !important;
}

.swal2-cn-hide {
    animation: swal2-cn-out 0.2s ease-in !important;
}

/* ── CSP-compliant utility classes (moved from inline styles) ── */

.svg-nudge-up {
    transform: translateY(-1px);
}

.text-subdued {
    color: var(--inv-bg-color);
    opacity: 0.7;
}

.text-subdued-light {
    color: var(--inv-bg-color);
    opacity: 0.6;
}

.fill-purple {
    fill: var(--purple) !important;
}

.icon-scale-up {
    scale: 1.1;
}

.share-section-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.share-section-title {
    text-align: center;
}

.share-description {
    text-align: center;
    margin: 0;
    color: var(--inv-bg-color);
    opacity: 0.7;
}


/* ── JS state classes (CSP-compliant replacements for .style) ── */

.is-hidden {
    display: none !important;
}

.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.is-faded {
    opacity: 0;
}

.is-clickable {
    cursor: pointer;
}

.fade-swap {
    transition: opacity 280ms ease;
}

.fade-in-fast {
    transition: opacity 0.25s ease;
    opacity: 1;
}

.fade-in-medium {
    transition: opacity 0.4s ease;
    opacity: 1;
}

.fade-in-slow {
    transition: opacity 0.5s ease;
    opacity: 1;
}

.fade-out-fast {
    transition: opacity 0.25s ease;
    opacity: 0;
}

.fade-out-medium {
    transition: opacity 0.3s ease;
    opacity: 0;
}

.flash-accept {
    background: rgba(34, 197, 94, 0.3);
}

.completion-arc-animated {
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Data-attribute driven CSS custom properties (replaces JS style.setProperty) ── */

/* Bar widths: [data-bar-w="N"] → --bar-width: N% */
[data-bar-w="0"] { --bar-width: 0%; }
[data-bar-w="1"] { --bar-width: 1%; }
[data-bar-w="2"] { --bar-width: 2%; }
[data-bar-w="3"] { --bar-width: 3%; }
[data-bar-w="4"] { --bar-width: 4%; }
[data-bar-w="5"] { --bar-width: 5%; }
[data-bar-w="6"] { --bar-width: 6%; }
[data-bar-w="7"] { --bar-width: 7%; }
[data-bar-w="8"] { --bar-width: 8%; }
[data-bar-w="9"] { --bar-width: 9%; }
[data-bar-w="10"] { --bar-width: 10%; }
[data-bar-w="11"] { --bar-width: 11%; }
[data-bar-w="12"] { --bar-width: 12%; }
[data-bar-w="13"] { --bar-width: 13%; }
[data-bar-w="14"] { --bar-width: 14%; }
[data-bar-w="15"] { --bar-width: 15%; }
[data-bar-w="16"] { --bar-width: 16%; }
[data-bar-w="17"] { --bar-width: 17%; }
[data-bar-w="18"] { --bar-width: 18%; }
[data-bar-w="19"] { --bar-width: 19%; }
[data-bar-w="20"] { --bar-width: 20%; }
[data-bar-w="21"] { --bar-width: 21%; }
[data-bar-w="22"] { --bar-width: 22%; }
[data-bar-w="23"] { --bar-width: 23%; }
[data-bar-w="24"] { --bar-width: 24%; }
[data-bar-w="25"] { --bar-width: 25%; }
[data-bar-w="26"] { --bar-width: 26%; }
[data-bar-w="27"] { --bar-width: 27%; }
[data-bar-w="28"] { --bar-width: 28%; }
[data-bar-w="29"] { --bar-width: 29%; }
[data-bar-w="30"] { --bar-width: 30%; }
[data-bar-w="31"] { --bar-width: 31%; }
[data-bar-w="32"] { --bar-width: 32%; }
[data-bar-w="33"] { --bar-width: 33%; }
[data-bar-w="34"] { --bar-width: 34%; }
[data-bar-w="35"] { --bar-width: 35%; }
[data-bar-w="36"] { --bar-width: 36%; }
[data-bar-w="37"] { --bar-width: 37%; }
[data-bar-w="38"] { --bar-width: 38%; }
[data-bar-w="39"] { --bar-width: 39%; }
[data-bar-w="40"] { --bar-width: 40%; }
[data-bar-w="41"] { --bar-width: 41%; }
[data-bar-w="42"] { --bar-width: 42%; }
[data-bar-w="43"] { --bar-width: 43%; }
[data-bar-w="44"] { --bar-width: 44%; }
[data-bar-w="45"] { --bar-width: 45%; }
[data-bar-w="46"] { --bar-width: 46%; }
[data-bar-w="47"] { --bar-width: 47%; }
[data-bar-w="48"] { --bar-width: 48%; }
[data-bar-w="49"] { --bar-width: 49%; }
[data-bar-w="50"] { --bar-width: 50%; }
[data-bar-w="51"] { --bar-width: 51%; }
[data-bar-w="52"] { --bar-width: 52%; }
[data-bar-w="53"] { --bar-width: 53%; }
[data-bar-w="54"] { --bar-width: 54%; }
[data-bar-w="55"] { --bar-width: 55%; }
[data-bar-w="56"] { --bar-width: 56%; }
[data-bar-w="57"] { --bar-width: 57%; }
[data-bar-w="58"] { --bar-width: 58%; }
[data-bar-w="59"] { --bar-width: 59%; }
[data-bar-w="60"] { --bar-width: 60%; }
[data-bar-w="61"] { --bar-width: 61%; }
[data-bar-w="62"] { --bar-width: 62%; }
[data-bar-w="63"] { --bar-width: 63%; }
[data-bar-w="64"] { --bar-width: 64%; }
[data-bar-w="65"] { --bar-width: 65%; }
[data-bar-w="66"] { --bar-width: 66%; }
[data-bar-w="67"] { --bar-width: 67%; }
[data-bar-w="68"] { --bar-width: 68%; }
[data-bar-w="69"] { --bar-width: 69%; }
[data-bar-w="70"] { --bar-width: 70%; }
[data-bar-w="71"] { --bar-width: 71%; }
[data-bar-w="72"] { --bar-width: 72%; }
[data-bar-w="73"] { --bar-width: 73%; }
[data-bar-w="74"] { --bar-width: 74%; }
[data-bar-w="75"] { --bar-width: 75%; }
[data-bar-w="76"] { --bar-width: 76%; }
[data-bar-w="77"] { --bar-width: 77%; }
[data-bar-w="78"] { --bar-width: 78%; }
[data-bar-w="79"] { --bar-width: 79%; }
[data-bar-w="80"] { --bar-width: 80%; }
[data-bar-w="81"] { --bar-width: 81%; }
[data-bar-w="82"] { --bar-width: 82%; }
[data-bar-w="83"] { --bar-width: 83%; }
[data-bar-w="84"] { --bar-width: 84%; }
[data-bar-w="85"] { --bar-width: 85%; }
[data-bar-w="86"] { --bar-width: 86%; }
[data-bar-w="87"] { --bar-width: 87%; }
[data-bar-w="88"] { --bar-width: 88%; }
[data-bar-w="89"] { --bar-width: 89%; }
[data-bar-w="90"] { --bar-width: 90%; }
[data-bar-w="91"] { --bar-width: 91%; }
[data-bar-w="92"] { --bar-width: 92%; }
[data-bar-w="93"] { --bar-width: 93%; }
[data-bar-w="94"] { --bar-width: 94%; }
[data-bar-w="95"] { --bar-width: 95%; }
[data-bar-w="96"] { --bar-width: 96%; }
[data-bar-w="97"] { --bar-width: 97%; }
[data-bar-w="98"] { --bar-width: 98%; }
[data-bar-w="99"] { --bar-width: 99%; }
[data-bar-w="100"] { --bar-width: 100%; }

/* Transit angles: [data-from-angle] / [data-to-angle] → --from-angle / --to-angle */
/* Covers multiples of 60° (6 stages), 72° (5 stages), 90° (4 stages) up to 660° wrap */
.nav-transit[data-from-angle="0"] { --from-angle: 0deg; }
.nav-transit[data-from-angle="60"] { --from-angle: 60deg; }
.nav-transit[data-from-angle="72"] { --from-angle: 72deg; }
.nav-transit[data-from-angle="90"] { --from-angle: 90deg; }
.nav-transit[data-from-angle="120"] { --from-angle: 120deg; }
.nav-transit[data-from-angle="144"] { --from-angle: 144deg; }
.nav-transit[data-from-angle="180"] { --from-angle: 180deg; }
.nav-transit[data-from-angle="216"] { --from-angle: 216deg; }
.nav-transit[data-from-angle="240"] { --from-angle: 240deg; }
.nav-transit[data-from-angle="270"] { --from-angle: 270deg; }
.nav-transit[data-from-angle="288"] { --from-angle: 288deg; }
.nav-transit[data-from-angle="300"] { --from-angle: 300deg; }

.nav-transit[data-to-angle="60"] { --to-angle: 60deg; }
.nav-transit[data-to-angle="72"] { --to-angle: 72deg; }
.nav-transit[data-to-angle="90"] { --to-angle: 90deg; }
.nav-transit[data-to-angle="120"] { --to-angle: 120deg; }
.nav-transit[data-to-angle="144"] { --to-angle: 144deg; }
.nav-transit[data-to-angle="180"] { --to-angle: 180deg; }
.nav-transit[data-to-angle="216"] { --to-angle: 216deg; }
.nav-transit[data-to-angle="240"] { --to-angle: 240deg; }
.nav-transit[data-to-angle="270"] { --to-angle: 270deg; }
.nav-transit[data-to-angle="288"] { --to-angle: 288deg; }
.nav-transit[data-to-angle="300"] { --to-angle: 300deg; }
.nav-transit[data-to-angle="360"] { --to-angle: 360deg; }
.nav-transit[data-to-angle="420"] { --to-angle: 420deg; }
.nav-transit[data-to-angle="432"] { --to-angle: 432deg; }
.nav-transit[data-to-angle="450"] { --to-angle: 450deg; }
.nav-transit[data-to-angle="480"] { --to-angle: 480deg; }
.nav-transit[data-to-angle="504"] { --to-angle: 504deg; }
.nav-transit[data-to-angle="540"] { --to-angle: 540deg; }
.nav-transit[data-to-angle="576"] { --to-angle: 576deg; }
.nav-transit[data-to-angle="600"] { --to-angle: 600deg; }
.nav-transit[data-to-angle="630"] { --to-angle: 630deg; }
.nav-transit[data-to-angle="648"] { --to-angle: 648deg; }
.nav-transit[data-to-angle="660"] { --to-angle: 660deg; }

/* Avatar colors: driven by existing data-signer-index on parent row */
[data-signer-index="0"] .commit-sig-avatar { --avatar-color: var(--purple); }
[data-signer-index="1"] .commit-sig-avatar { --avatar-color: var(--blurple); }

/* Magnet positions: [data-magnet-x/y] → --magnet-x/y (range: -14 to 14, integer px) */
[data-magnet-x="-14"] { --magnet-x: -14px; }
[data-magnet-x="-13"] { --magnet-x: -13px; }
[data-magnet-x="-12"] { --magnet-x: -12px; }
[data-magnet-x="-11"] { --magnet-x: -11px; }
[data-magnet-x="-10"] { --magnet-x: -10px; }
[data-magnet-x="-9"] { --magnet-x: -9px; }
[data-magnet-x="-8"] { --magnet-x: -8px; }
[data-magnet-x="-7"] { --magnet-x: -7px; }
[data-magnet-x="-6"] { --magnet-x: -6px; }
[data-magnet-x="-5"] { --magnet-x: -5px; }
[data-magnet-x="-4"] { --magnet-x: -4px; }
[data-magnet-x="-3"] { --magnet-x: -3px; }
[data-magnet-x="-2"] { --magnet-x: -2px; }
[data-magnet-x="-1"] { --magnet-x: -1px; }
[data-magnet-x="0"] { --magnet-x: 0px; }
[data-magnet-x="1"] { --magnet-x: 1px; }
[data-magnet-x="2"] { --magnet-x: 2px; }
[data-magnet-x="3"] { --magnet-x: 3px; }
[data-magnet-x="4"] { --magnet-x: 4px; }
[data-magnet-x="5"] { --magnet-x: 5px; }
[data-magnet-x="6"] { --magnet-x: 6px; }
[data-magnet-x="7"] { --magnet-x: 7px; }
[data-magnet-x="8"] { --magnet-x: 8px; }
[data-magnet-x="9"] { --magnet-x: 9px; }
[data-magnet-x="10"] { --magnet-x: 10px; }
[data-magnet-x="11"] { --magnet-x: 11px; }
[data-magnet-x="12"] { --magnet-x: 12px; }
[data-magnet-x="13"] { --magnet-x: 13px; }
[data-magnet-x="14"] { --magnet-x: 14px; }

[data-magnet-y="-14"] { --magnet-y: -14px; }
[data-magnet-y="-13"] { --magnet-y: -13px; }
[data-magnet-y="-12"] { --magnet-y: -12px; }
[data-magnet-y="-11"] { --magnet-y: -11px; }
[data-magnet-y="-10"] { --magnet-y: -10px; }
[data-magnet-y="-9"] { --magnet-y: -9px; }
[data-magnet-y="-8"] { --magnet-y: -8px; }
[data-magnet-y="-7"] { --magnet-y: -7px; }
[data-magnet-y="-6"] { --magnet-y: -6px; }
[data-magnet-y="-5"] { --magnet-y: -5px; }
[data-magnet-y="-4"] { --magnet-y: -4px; }
[data-magnet-y="-3"] { --magnet-y: -3px; }
[data-magnet-y="-2"] { --magnet-y: -2px; }
[data-magnet-y="-1"] { --magnet-y: -1px; }
[data-magnet-y="0"] { --magnet-y: 0px; }
[data-magnet-y="1"] { --magnet-y: 1px; }
[data-magnet-y="2"] { --magnet-y: 2px; }
[data-magnet-y="3"] { --magnet-y: 3px; }
[data-magnet-y="4"] { --magnet-y: 4px; }
[data-magnet-y="5"] { --magnet-y: 5px; }
[data-magnet-y="6"] { --magnet-y: 6px; }
[data-magnet-y="7"] { --magnet-y: 7px; }
[data-magnet-y="8"] { --magnet-y: 8px; }
[data-magnet-y="9"] { --magnet-y: 9px; }
[data-magnet-y="10"] { --magnet-y: 10px; }
[data-magnet-y="11"] { --magnet-y: 11px; }
[data-magnet-y="12"] { --magnet-y: 12px; }
[data-magnet-y="13"] { --magnet-y: 13px; }
[data-magnet-y="14"] { --magnet-y: 14px; }

/* ============================================================
   AI IN PRACTICE SECTION
   ============================================================ */

.ai-practice-section {
    background: color-mix(in srgb, var(--main-bg-color) 97%, var(--blurple) 3%);
    position: relative;
}

.ai-practice-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 20% 0%, color-mix(in srgb, var(--blurple) 6%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 50% 30% at 80% 100%, color-mix(in srgb, var(--purple) 5%, transparent) 0%, transparent 70%);
    pointer-events: none;
}

/* Header */

.ai-practice-kicker {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--inv-bg-color);
    margin-bottom: 1rem;
}

.ai-practice-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 0.5rem;
    background: linear-gradient(160deg, rgba(79,70,229,1) 0%, rgba(99,102,241,1) 50%, rgba(139,92,246,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ai-practice-subline {
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent);
    line-height: 1.5;
    margin: 0.5rem 0 0;
    letter-spacing: 0.01em;
}

.ai-practice-stat-inline {
    font-weight: 800;
    color: var(--blurple);
    letter-spacing: -0.02em;
}

/* View Toggle */

.ai-practice-toggle-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.ai-practice-toggle {
    display: inline-flex;
    background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    border-radius: 100px;
    padding: 4px;
    gap: 2px;
}

.ai-practice-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1.05rem;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-practice-toggle-btn svg {
    opacity: 0.6;
    transition: opacity 0.25s ease;
    flex-shrink: 0;
}

.ai-practice-toggle-btn.is-active {
    background: color-mix(in srgb, var(--inv-bg-color) 10%, transparent);
    color: var(--inv-bg-color);
    box-shadow: 0 1px 6px color-mix(in srgb, var(--blurple) 20%, transparent);
}

.ai-practice-toggle-btn.is-active svg {
    opacity: 1;
}

.ai-practice-toggle-btn:hover:not(.is-active) {
    color: color-mix(in srgb, var(--inv-bg-color) 75%, transparent);
}

.ai-toggle-audience {
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent);
    margin-left: 0.15rem;
}

.ai-practice-toggle-btn.is-active .ai-toggle-audience {
    color: color-mix(in srgb, var(--blurple) 60%, transparent);
}

/* Views */

.ai-practice-view {
    display: none;
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-practice-view.is-active {
    display: block;
    opacity: 1;
}

/* ================================================================
   INTEGRATED STAGE PANEL — Nodes + Content in One Surface
   ================================================================ */

.ai-stage-ring {
    position: relative;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    border-radius: 20px;
    padding: 1.75rem 1.75rem 1.5rem;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--blurple) 6%, transparent) 0%, transparent 70%),
        color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent);
    box-shadow:
        0 0 60px 15px color-mix(in srgb, var(--blurple) 3%, transparent),
        0 16px 60px -10px color-mix(in srgb, var(--blurple) 5%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 3%, transparent),
        0 0 0 0.5px color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
    overflow: hidden;
}

/* Orbit repurposed as horizontal divider between nodes and content */
.ai-ring-orbit {
    position: relative;
    width: 100%;
    height: 1px;
    margin: 1rem 0 1.25rem;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--inv-bg-color) 6%, transparent) 15%,
        color-mix(in srgb, var(--blurple) 14%, transparent) 50%,
        color-mix(in srgb, var(--inv-bg-color) 6%, transparent) 85%,
        transparent 100%);
}

/* Sweeping light on the divider */
.ai-ring-orbit::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -30%;
    width: 30%;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--blurple) 40%, transparent),
        color-mix(in srgb, var(--blurple) 60%, transparent),
        transparent);
    border-radius: 2px;
    animation: aiDividerSweep 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    pointer-events: none;
}

@keyframes aiDividerSweep {
    0%   { left: -30%; opacity: 0; }
    10%  { opacity: 0.8; }
    90%  { opacity: 0.8; }
    100% { left: 100%; opacity: 0; }
}

/* Arc hidden in panel layout — no circular path */
.ai-ring-arc {
    display: none;
}

/* Nodes — integrated horizontal nav row */
.ai-ring-nodes {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    z-index: 1;
    padding: 0 0.5rem;
}

/* ── Progress Track — connecting line between nodes ── */

.ai-ring-track {
    position: absolute;
    top: 17px;
    left: var(--track-left, 10%);
    width: var(--track-width, 80%);
    height: 2px;
    border-radius: 1px;
    background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
    z-index: 0;
    pointer-events: none;
}

.ai-ring-track-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--track-fill, 0%);
    border-radius: 1px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--blurple) 50%, transparent),
        var(--blurple));
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 8px color-mix(in srgb, var(--blurple) 25%, transparent);
}

.ai-stage-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    flex: 1 1 0%;
}

/* Primary expanding ring on active node */
.ai-stage-node::before {
    content: '';
    position: absolute;
    top: 17px;
    left: 50%;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--blurple) 30%, transparent);
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    pointer-events: none;
}

.ai-stage-node.is-active::before {
    animation: aiRingExpand 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* Secondary expanding ring — offset timing for layered depth */
.ai-stage-node::after {
    content: '';
    position: absolute;
    top: 17px;
    left: 50%;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--blurple) 15%, transparent);
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    pointer-events: none;
}

.ai-stage-node.is-active::after {
    animation: aiRingExpand 2.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s infinite;
}

@keyframes aiRingExpand {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    80%  { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

/* Burst effect on stage select — JS-created element */
.ai-node-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--blurple) 50%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--blurple) 30%, transparent);
    animation: aiNodeBurst 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
}

@keyframes aiNodeBurst {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

.ai-stage-node-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent);
    background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: color-mix(in srgb, var(--inv-bg-color) 25%, transparent);
    transition:
        background 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Outer breathing ring — always visible on active */
.ai-stage-node-ring-outer {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--blurple) 0%, transparent);
    transition: border-color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.ai-stage-node.is-active .ai-stage-node-ring-outer {
    border-color: color-mix(in srgb, var(--blurple) 20%, transparent);
    animation: aiNodeRingBreath 3s ease-in-out infinite;
}

@keyframes aiNodeRingBreath {
    0%, 100% { transform: scale(1); opacity: 0.6; border-color: color-mix(in srgb, var(--blurple) 15%, transparent); }
    50%      { transform: scale(1.15); opacity: 1; border-color: color-mix(in srgb, var(--blurple) 30%, transparent); }
}

/* Inner conic-gradient sweep ring — spinning arc on active */
.ai-stage-node-ring-inner {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 300deg,
        color-mix(in srgb, var(--blurple) 8%, transparent) 330deg,
        color-mix(in srgb, var(--blurple) 25%, transparent) 355deg,
        transparent 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px), #000 100%, transparent 100%);
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px), #000 100%, transparent 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.ai-stage-node.is-active .ai-stage-node-ring-inner {
    opacity: 1;
    animation: aiNodeArcSpin 4s linear infinite;
}

@keyframes aiNodeArcSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.ai-stage-node-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--inv-bg-color) 22%, transparent);
    transition: color 0.5s cubic-bezier(0.22, 1, 0.36, 1), font-weight 0.3s ease;
    white-space: nowrap;
    position: relative;
}

/* Active node — 5-layer shadow stack with dramatic presence */
.ai-stage-node.is-active .ai-stage-node-dot {
    background: color-mix(in srgb, var(--blurple) 18%, transparent);
    border-color: color-mix(in srgb, var(--blurple) 50%, transparent);
    color: var(--blurple);
    transform: scale(1.3);
    box-shadow:
        0 0 0 5px color-mix(in srgb, var(--blurple) 6%, transparent),
        0 0 30px color-mix(in srgb, var(--blurple) 35%, transparent),
        0 0 60px color-mix(in srgb, var(--blurple) 15%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
        0 0 0 0.5px color-mix(in srgb, var(--blurple) 20%, transparent);
}

.ai-stage-node.is-active .ai-stage-node-label {
    color: var(--blurple);
    font-weight: 700;
}

/* Active node downward glow — connects node to content */
.ai-stage-node.is-active .ai-stage-node-label::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 40px;
    background: radial-gradient(ellipse 100% 100% at 50% 0%,
        color-mix(in srgb, var(--blurple) 12%, transparent) 0%,
        transparent 70%);
    pointer-events: none;
}

/* Past nodes — completed feel */
.ai-stage-node.is-past .ai-stage-node-dot {
    background: color-mix(in srgb, var(--blurple) 8%, transparent);
    border-color: color-mix(in srgb, var(--blurple) 20%, transparent);
    color: color-mix(in srgb, var(--blurple) 55%, transparent);
}

.ai-stage-node.is-past .ai-stage-node-label {
    color: color-mix(in srgb, var(--blurple) 40%, transparent);
}

/* Inactive nodes — subtle idle pulse (feel "alive") */
.ai-stage-node:not(.is-active):not(.is-past) .ai-stage-node-dot {
    animation: aiNodeIdlePulse 4s ease-in-out infinite;
}

@keyframes aiNodeIdlePulse {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50%      { box-shadow: 0 0 12px color-mix(in srgb, var(--inv-bg-color) 4%, transparent); }
}

/* Hover — subtle magnetism */
.ai-stage-node:hover:not(.is-active) .ai-stage-node-dot {
    background: color-mix(in srgb, var(--inv-bg-color) 7%, transparent);
    border-color: color-mix(in srgb, var(--inv-bg-color) 18%, transparent);
    color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent);
    transform: scale(1.12);
    box-shadow: 0 0 20px color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    animation: none;
}

/* Content area — below the nodes, full width */
.ai-ring-center {
    position: relative;
    text-align: center;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

/* Stage context header — counter + name inline */
.ai-stage-context-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ai-stage-counter {
    font-size: 0.55rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--blurple) 65%, transparent);
    background: color-mix(in srgb, var(--blurple) 8%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--blurple) 15%, transparent);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

.ai-stage-context-name {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0;
    line-height: 1.15;
    background: linear-gradient(135deg, var(--inv-bg-color) 0%, color-mix(in srgb, var(--inv-bg-color) 72%, var(--blurple)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: opacity 0.3s ease;
}

.ai-stage-context-desc {
    font-size: 0.62rem;
    font-weight: 400;
    color: color-mix(in srgb, var(--inv-bg-color) 38%, transparent);
    letter-spacing: 0.01em;
    margin: 0;
    line-height: 1.35;
}

/* Atmospheric glow inside ring */
.ai-ring-atmosphere {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ai-agent-panel-glow-primary {
    position: absolute;
    top: -50%;
    left: var(--glow-x, 30%);
    width: 50%;
    height: 140%;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--blurple) 7%, transparent) 0%, transparent 65%);
    pointer-events: none;
    animation: aiPanelGlowDrift 8s ease-in-out infinite;
    transition: left 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateX(-50%);
}

.ai-agent-panel-glow-secondary {
    position: absolute;
    top: -30%;
    right: 15%;
    width: 40%;
    height: 100%;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--purple) 5%, transparent) 0%, transparent 65%);
    pointer-events: none;
    animation: aiPanelGlowDrift 8s ease-in-out 4s infinite;
}

@keyframes aiPanelGlowDrift {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.6; }
    50%      { transform: translateX(15px) translateY(-10px); opacity: 1; }
}

/* Scanline — horizontal light sweep (terminal/mission-control feel) */
.ai-agent-panel-scanline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blurple) 12%, transparent), transparent);
    z-index: 2;
    pointer-events: none;
    animation: aiScanlineMove 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes aiScanlineMove {
    0%   { top: 0; opacity: 0; }
    10%  { opacity: 0.6; }
    90%  { opacity: 0.6; }
    100% { top: 100%; opacity: 0; }
}

.ai-agent-panel-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
    width: 100%;
    height: 300px;
    margin-top: 0.5rem;
    position: relative;
    z-index: 1;
    perspective: 1200px;
}

/* ================================================================
   AGENT CARDS — Premium Live Activity Cards
   ================================================================ */

.ai-agent-card {
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--inv-bg-color) 6%, transparent) 0%, color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent) 100%);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left;
    opacity: 0;
    transform: translateY(24px) scale(0.95) rotateX(4deg);
    transform-origin: center bottom;
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
    box-shadow:
        0 0 60px 10px color-mix(in srgb, var(--blurple) 3%, transparent),
        0 12px 40px -8px color-mix(in srgb, var(--blurple) 6%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent),
        0 0 0 0.5px color-mix(in srgb, var(--inv-bg-color) 8%, transparent),
        0 2px 8px rgba(0,0,0,0.35);
}

/* De-emphasize card when sibling is active */
.ai-agent-card.is-dimmed {
    opacity: 0.35;
    filter: blur(1.5px);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.ai-agent-card.is-focused {
    opacity: 1;
    filter: blur(0);
    transition:
        opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

/* Left accent bar — color-coded by buyer/seller */
.ai-agent-card-accent {
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 0;
    width: 2px;
    border-radius: 0 1px 1px 0;
    background: linear-gradient(to bottom, var(--blurple), color-mix(in srgb, var(--blurple) 20%, transparent));
    opacity: 0;
    transition: opacity 0.5s ease 0.2s;
}

.ai-agent-card[data-recommend="buyer"] .ai-agent-card-accent {
    background: linear-gradient(to bottom, #34d399, color-mix(in srgb, #10b981 20%, transparent));
}

.ai-agent-card[data-recommend="seller"] .ai-agent-card-accent {
    background: linear-gradient(to bottom, #818cf8, color-mix(in srgb, var(--blurple) 20%, transparent));
}

/* Subtle top shimmer tint per role */
.ai-agent-card[data-recommend="buyer"]::before {
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, #10b981 12%, transparent) 20%,
        color-mix(in srgb, #10b981 30%, transparent) 50%,
        color-mix(in srgb, #10b981 12%, transparent) 80%,
        transparent 100%);
}

.ai-agent-card[data-recommend="seller"]::before {
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--blurple) 15%, transparent) 20%,
        color-mix(in srgb, var(--blurple) 50%, transparent) 50%,
        color-mix(in srgb, var(--blurple) 15%, transparent) 80%,
        transparent 100%);
}

/* Buyer card status dot — green pulse */
.ai-agent-card[data-recommend="buyer"] .ai-agent-status-dot {
    background: #34d399;
    box-shadow: 0 0 10px color-mix(in srgb, #10b981 70%, transparent);
}

.ai-agent-card[data-recommend="buyer"] .ai-agent-status-ring {
    border-color: color-mix(in srgb, #10b981 25%, transparent);
}

/* Top shimmer line */
.ai-agent-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--blurple) 15%, transparent) 20%,
        color-mix(in srgb, var(--blurple) 50%, transparent) 50%,
        color-mix(in srgb, var(--blurple) 15%, transparent) 80%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* Ambient shimmer sweep across card surface */
.ai-agent-card-shimmer-track {
    position: absolute;
    top: 0;
    left: -100%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent),
        transparent);
    pointer-events: none;
    z-index: 0;
    animation: aiCardShimmerDrift 8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    animation-delay: var(--shimmer-delay, 0s);
}

@keyframes aiCardShimmerDrift {
    0%   { left: -100%; }
    40%  { left: 200%; }
    100% { left: 200%; }
}

.ai-agent-card > :not(.ai-agent-card-shimmer-track):not(.ai-agent-card-accent) {
    position: relative;
    z-index: 1;
}

.ai-agent-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
}

.ai-agent-card.is-visible .ai-agent-card-accent {
    opacity: 1;
}

.ai-agent-card.is-visible::before {
    opacity: 1;
}

/* Hover — elevated with dramatic glow increase */
.ai-agent-card:hover {
    border-color: color-mix(in srgb, var(--blurple) 28%, transparent);
    transform: translateY(-4px) scale(1.005);
    box-shadow:
        0 0 80px 15px color-mix(in srgb, var(--blurple) 6%, transparent),
        0 20px 60px -8px color-mix(in srgb, var(--blurple) 10%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent),
        0 0 0 1px color-mix(in srgb, var(--blurple) 15%, transparent),
        0 2px 8px rgba(0,0,0,0.4);
}

/* Exit — upward fade with perspective */
.ai-agent-card.is-exiting {
    opacity: 0;
    transform: translateY(-16px) scale(0.96) rotateX(-2deg);
    transition:
        opacity 0.25s cubic-bezier(0.55, 0, 1, 0.45),
        transform 0.25s cubic-bezier(0.55, 0, 1, 0.45);
}

/* Card Head */
.ai-agent-card-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.ai-agent-status-dot-wrap {
    position: relative;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}

.ai-agent-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #818cf8;
    flex-shrink: 0;
    box-shadow: 0 0 10px color-mix(in srgb, var(--blurple) 70%, transparent);
    animation: aiCardDotPulse 2.6s ease-in-out infinite;
}

@keyframes aiCardDotPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 10px color-mix(in srgb, var(--blurple) 70%, transparent); }
    50%       { opacity: 0.4; box-shadow: 0 0 16px color-mix(in srgb, var(--blurple) 40%, transparent); }
}

/* Status ring — pulsing ring around the status dot */
.ai-agent-status-ring {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--blurple) 25%, transparent);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: aiStatusRingPulse 3s ease-in-out infinite;
}

@keyframes aiStatusRingPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
    50%      { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}

.ai-agent-card-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--inv-bg-color);
    letter-spacing: -0.015em;
}

.ai-agent-card-badge {
    margin-left: auto;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
}

.ai-badge-buyer {
    color: #34d399;
    background: color-mix(in srgb, #10b981 10%, transparent);
    border: 0.5px solid color-mix(in srgb, #10b981 18%, transparent);
}

.ai-badge-seller {
    color: #818cf8;
    background: color-mix(in srgb, var(--blurple) 10%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--blurple) 18%, transparent);
}

/* Card Body — the typewriter star */
.ai-agent-card-body {
    font-size: 0.84rem;
    color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent);
    line-height: 1.6;
    min-height: 2.6em;
    margin-bottom: 1rem;
    letter-spacing: 0.005em;
}

.ai-agent-card-cursor {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    background: #818cf8;
    margin-left: 2px;
    vertical-align: text-bottom;
    border-radius: 1px;
    animation: aiCursorBlink 0.9s step-end infinite;
}

@keyframes aiCursorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Card Footer — metadata tags, pinned to bottom */
.ai-agent-card-footer {
    display: none;
}

.ai-agent-card-tag {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent);
    background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    padding: 0.2rem 0.6rem;
    border-radius: 5px;
}

.ai-agent-card-footer-sep {
    opacity: 0.35;
}

/* ── Agent Viz Types ── */

.ai-agent-viz {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ai-agent-viz::-webkit-scrollbar {
    display: none;
}

/* --- Checklist viz --- */

.ai-viz-check-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-viz-check-row.is-checked {
    opacity: 1;
    transform: translateX(0);
}

.ai-viz-check-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.ai-viz-check-row.is-checked .ai-viz-check-icon {
    border-color: color-mix(in srgb, var(--blurple) 60%, transparent);
    background: color-mix(in srgb, var(--blurple) 12%, transparent);
}

.ai-viz-check-icon::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 4.5px;
    width: 4px;
    height: 7px;
    border: solid color-mix(in srgb, var(--blurple) 80%, transparent);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ai-viz-check-row.is-checked .ai-viz-check-icon::after {
    transform: rotate(45deg) scale(1);
}

.ai-viz-check-text {
    font-size: 0.62rem;
    color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent);
    transition: color 0.3s ease;
}

.ai-viz-check-row.is-checked .ai-viz-check-text {
    color: color-mix(in srgb, var(--inv-bg-color) 75%, transparent);
}

/* --- Bars viz --- */

.ai-agent-viz--bars {
    gap: 0.45rem;
}

.ai-viz-bar-row {
    display: grid;
    grid-template-columns: 72px 1fr 32px;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0;
}

.ai-viz-bar-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-viz-bar-track {
    height: 6px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    overflow: hidden;
}

.ai-viz-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 100px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--blurple) 60%, transparent),
        var(--blurple));
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 8px color-mix(in srgb, var(--blurple) 35%, transparent);
}

.ai-viz-bar-val {
    font-size: 0.62rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent);
    text-align: right;
}

/* --- Metrics viz --- */

.ai-agent-viz--metrics {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.ai-viz-metric-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.ai-viz-metric-num {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, var(--inv-bg-color) 0%,
        color-mix(in srgb, var(--inv-bg-color) 72%, var(--blurple)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ai-viz-metric-label {
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent);
}

/* --- Chat viz --- */

.ai-agent-viz--chat {
    gap: 0.2rem;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ai-agent-viz--chat::-webkit-scrollbar {
    display: none;
}

.ai-viz-chat-msg {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-viz-chat-msg.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ai-viz-chat-user {
    display: flex;
    justify-content: flex-end;
}

.ai-viz-chat-user .ai-viz-chat-text {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--blurple) 10%, transparent),
        color-mix(in srgb, var(--blurple) 6%, transparent));
    border: 0.5px solid color-mix(in srgb, var(--blurple) 18%, transparent);
    border-radius: 8px 8px 2px 8px;
    padding: 0.25rem 0.5rem;
    font-size: 0.56rem;
    color: color-mix(in srgb, var(--inv-bg-color) 68%, transparent);
    display: inline-block;
    max-width: 88%;
}

.ai-viz-chat-ai {
    display: flex;
    justify-content: flex-start;
}

.ai-viz-chat-ai .ai-viz-chat-text {
    background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent);
    border-radius: 8px 8px 8px 2px;
    padding: 0.25rem 0.5rem;
    font-size: 0.56rem;
    color: color-mix(in srgb, var(--inv-bg-color) 58%, transparent);
    display: inline-block;
    max-width: 88%;
    line-height: 1.45;
}

/* --- Captured indicator (data flowing to journey record) --- */

.ai-viz-chat-captured {
    display: block;
    padding: 0 0.1rem;
}

.ai-viz-captured-tag {
    display: block;
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #34d399;
    background: color-mix(in srgb, #10b981 6%, transparent);
    border-left: 2.5px solid #10b981;
    padding: 0.15rem 0.45rem;
    border-radius: 0 3px 3px 0;
}

/* --- Source indicator (media type being processed) --- */

.ai-viz-source {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.25rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
}

.ai-viz-source-icon {
    color: color-mix(in srgb, var(--blurple) 70%, transparent);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.ai-viz-source-label {
    font-size: 0.58rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent);
    letter-spacing: 0.02em;
}

/* Audio waveform indicator */
.ai-viz-source-wave {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1.5px;
    height: 14px;
}

.ai-viz-wave-bar {
    width: 2px;
    border-radius: 1px;
    background: color-mix(in srgb, var(--blurple) 55%, transparent);
    animation: aiWaveBar 1s ease-in-out infinite;
    animation-delay: calc(var(--wave-i, 0) * 0.12s);
}

@keyframes aiWaveBar {
    0%, 100% { height: 3px; }
    50%      { height: 11px; }
}

/* --- Typewriter viz (existing body/cursor) --- */

.ai-agent-viz--typewriter {
    min-height: 40px;
}

/* --- Enhanced chat: mapping tags (Discovery↔Scope) --- */

.ai-viz-mapping-tag {
    display: block;
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #a78bfa;
    background: color-mix(in srgb, #7c3aed 6%, transparent);
    border-left: 2.5px solid #7c3aed;
    padding: 0.15rem 0.45rem;
    border-radius: 0 3px 3px 0;
}

/* --- Enhanced chat: value-case tags (argument building) --- */

.ai-viz-valuecase-tag {
    display: block;
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #fbbf24;
    background: color-mix(in srgb, #f59e0b 6%, transparent);
    border-left: 2.5px solid #f59e0b;
    padding: 0.15rem 0.45rem;
    border-radius: 0 3px 3px 0;
}

/* --- Enhanced chat: action button --- */

.ai-viz-action-btn {
    display: inline-block;
    font-size: 0.52rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--blurple) 90%, transparent);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--blurple) 12%, transparent),
        color-mix(in srgb, var(--blurple) 6%, transparent));
    border: 0.5px solid color-mix(in srgb, var(--blurple) 25%, transparent);
    padding: 0.2rem 0.6rem;
    border-radius: 5px;
    cursor: default;
}

/* --- Enhanced chat: research pipeline indicators --- */

.ai-viz-chat-research {
    display: flex;
    justify-content: flex-start;
}

.ai-viz-chat-research .ai-viz-chat-text {
    background: color-mix(in srgb, var(--blurple) 4%, transparent);
    border: none;
    border-left: 2px solid color-mix(in srgb, var(--blurple) 30%, transparent);
    font-size: 0.52rem;
    font-style: italic;
    color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent);
    padding: 0.12rem 0.4rem;
    border-radius: 0 4px 4px 0;
}

/* --- Field Capture viz (Smart Conversation) --- */

.ai-agent-viz--fieldCapture {
    gap: 0.2rem;
}

/* Section icon (replaces emojis) */
.ai-viz-sec-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 0.3rem;
    color: #818cf8;
    vertical-align: middle;
    flex-shrink: 0;
}

.ai-viz-sec-icon svg {
    display: block;
}

/* Ingest viz (Think & Sync) — pipeline layout */
.ai-viz-ingest-phase {
    position: relative;
    padding-left: 1.1rem;
    padding-bottom: 0.4rem;
}

.ai-viz-ingest-phase::before {
    content: '';
    position: absolute;
    left: 0.32rem;
    top: 0.7rem;
    bottom: 0;
    width: 1px;
    background: rgba(129, 140, 248, 0.18);
    transition: background 0.4s ease;
}

.ai-viz-ingest-phase.is-active::before {
    background: rgba(129, 140, 248, 0.4);
}

.ai-viz-ingest-phase:last-child::before {
    display: none;
}

.ai-viz-ingest-phase-dot {
    position: absolute;
    left: 0.1rem;
    top: 0.15rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    border: 1.5px solid rgba(129, 140, 248, 0.35);
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.ai-viz-ingest-phase.is-active .ai-viz-ingest-phase-dot {
    background: rgba(129, 140, 248, 0.25);
    border-color: #818cf8;
    box-shadow: 0 0 6px rgba(129, 140, 248, 0.3);
}

.ai-viz-ingest-phase-label {
    font-size: 0.45rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(129, 140, 248, 0.5);
    margin-bottom: 0.25rem;
    transition: color 0.4s ease;
}

.ai-viz-ingest-phase.is-active .ai-viz-ingest-phase-label {
    color: #818cf8;
}

.ai-viz-ingest-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.ai-viz-ingest-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.4rem;
    background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
    border: 0.5px solid rgba(129, 140, 248, 0.15);
    border-radius: 20px;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-viz-ingest-chip.is-visible {
    opacity: 1;
    transform: scale(1);
}

.ai-viz-ingest-chip-label {
    font-size: 0.52rem;
    font-weight: 600;
    color: #c4b5fd;
    white-space: nowrap;
}

.ai-viz-ingest-icon {
    flex-shrink: 0;
    color: #818cf8;
    display: flex;
    align-items: center;
}

.ai-viz-ingest-processing {
    font-size: 0.5rem;
    font-weight: 500;
    color: #64748b;
    font-style: italic;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ai-viz-ingest-processing.is-visible {
    opacity: 1;
}

.ai-viz-capture-header {
    font-size: 0.48rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent);
    padding-bottom: 0.15rem;
    border-bottom: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    margin-bottom: 0.1rem;
}

.ai-viz-capture-field {
    background: color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent);
    border-left: 2.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent);
    border-radius: 0 6px 6px 0;
    padding: 0.3rem 0.45rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.4s ease,
                background 0.4s ease;
}

.ai-viz-capture-field.is-captured {
    opacity: 1;
    transform: translateX(0);
}

.ai-viz-capture-field[data-status="captured"].is-captured {
    border-left-color: #10b981;
    background: color-mix(in srgb, #10b981 3%, transparent);
}

.ai-viz-capture-field[data-status="pending"].is-captured {
    border-left-color: color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    border-left-style: dashed;
}

.ai-viz-capture-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.1rem;
}

.ai-viz-capture-label > span:first-child {
    font-size: 0.56rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent);
}

.ai-viz-capture-status {
    font-size: 0.46rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.ai-viz-capture-field[data-status="captured"] .ai-viz-capture-status {
    color: #34d399;
}

.ai-viz-capture-field[data-status="pending"] .ai-viz-capture-status {
    color: color-mix(in srgb, var(--inv-bg-color) 25%, transparent);
}

.ai-viz-capture-value {
    font-size: 0.52rem;
    color: color-mix(in srgb, var(--inv-bg-color) 48%, transparent);
    line-height: 1.4;
}

.ai-viz-capture-empty {
    font-size: 0.48rem;
    font-style: italic;
    color: color-mix(in srgb, var(--inv-bg-color) 20%, transparent);
}

/* --- Enhanced bars: owner + status columns --- */

.ai-viz-bar-row--extended {
    grid-template-columns: 68px 48px 1fr 28px 18px;
}

.ai-viz-bar-owner {
    font-size: 0.52rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-viz-bar-status {
    font-size: 0.6rem;
    text-align: center;
    line-height: 1;
}

/* --- Document viz (meeting prep, call plan) --- */

.ai-agent-viz--document {
    gap: 0.1rem;
}

.ai-viz-doc-section {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 0.25rem 0.35rem;
    border-left: 2px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    margin-left: 0.15rem;
}

.ai-viz-doc-section.is-visible {
    opacity: 1;
    transform: translateX(0);
    border-left-color: color-mix(in srgb, var(--blurple) 25%, transparent);
}

.ai-viz-doc-header {
    font-size: 0.6rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--inv-bg-color) 72%, transparent);
    margin-bottom: 0.1rem;
}

.ai-viz-doc-content {
    font-size: 0.54rem;
    color: color-mix(in srgb, var(--inv-bg-color) 48%, transparent);
    line-height: 1.45;
    white-space: pre-line;
}

.ai-viz-doc-sub {
    font-size: 0.5rem;
    color: color-mix(in srgb, var(--blurple) 65%, transparent);
    margin-top: 0.1rem;
    padding-left: 0.5rem;
    border-left: 1.5px solid color-mix(in srgb, var(--blurple) 22%, transparent);
    white-space: pre-line;
    line-height: 1.4;
}

/* --- Review viz (Think & Sync, Propose Scope) --- */

.ai-agent-viz--review {
    gap: 0.25rem;
}

.ai-viz-review-step1 {
    font-size: 0.52rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent);
    font-style: italic;
    padding: 0.2rem 0.4rem;
    background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent);
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ai-viz-review-step1.is-visible {
    opacity: 1;
}

.ai-viz-review-card {
    background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    border-radius: 6px;
    padding: 0.3rem 0.4rem;
    margin-top: 0.2rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-viz-review-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ai-viz-review-field {
    font-size: 0.58rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--inv-bg-color) 65%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.1rem;
}

.ai-viz-review-conf {
    font-size: 0.48rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--blurple) 85%, transparent);
    background: color-mix(in srgb, var(--blurple) 10%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--blurple) 15%, transparent);
    padding: 0.06rem 0.35rem;
    border-radius: 10px;
    margin-left: 0.3rem;
}

.ai-viz-review-value {
    font-size: 0.5rem;
    color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent);
    margin-bottom: 0.15rem;
    line-height: 1.35;
}

.ai-viz-review-btns {
    display: flex;
    gap: 0.3rem;
}

.ai-viz-review-btn {
    font-size: 0.46rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    cursor: default;
}

.ai-viz-review-btn--approve {
    color: #34d399;
    background: color-mix(in srgb, #10b981 8%, transparent);
    border: 0.5px solid color-mix(in srgb, #10b981 20%, transparent);
}

.ai-viz-review-btn--deny {
    color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent);
    background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent);
}

/* Status badges for review cards */
.ai-viz-review-card[data-status="included"]::before,
.ai-viz-review-card[data-status="approve"]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 2.5px;
    border-radius: 6px 0 0 6px;
    background: #10b981;
}

.ai-viz-review-card[data-status="excluded"]::before,
.ai-viz-review-card[data-status="deny"]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 2.5px;
    border-radius: 6px 0 0 6px;
    background: #ef4444;
}

.ai-viz-review-card[data-status="potential"]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 2.5px;
    border-radius: 6px 0 0 6px;
    background: #f59e0b;
}

.ai-viz-review-card[data-status] {
    position: relative;
    padding-left: 0.6rem;
}

/* --- Report viz (Execution Readiness) --- */

.ai-agent-viz--report {
    gap: 0.15rem;
}

.ai-viz-report-section {
    padding: 0.25rem 0.35rem;
    border-left: 2px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    margin-left: 0.1rem;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-viz-report-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ai-viz-report-header {
    font-size: 0.58rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--inv-bg-color) 68%, transparent);
    margin-bottom: 0.08rem;
}

.ai-viz-report-line {
    font-size: 0.52rem;
    color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent);
    line-height: 1.45;
    padding-left: 0.3rem;
}

.ai-viz-report-highlight {
    background: color-mix(in srgb, var(--blurple) 5%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--blurple) 14%, transparent);
    border-left: 2.5px solid color-mix(in srgb, var(--blurple) 50%, transparent);
    border-radius: 0 5px 5px 0;
    padding: 0.3rem 0.4rem;
    margin-left: 0;
}

.ai-viz-report-highlight .ai-viz-report-header {
    color: color-mix(in srgb, var(--blurple) 85%, var(--inv-bg-color));
}

/* --- Assignment viz (Assign Owners) --- */

.ai-agent-viz--assignment {
    gap: 0.2rem;
}

.ai-viz-assign-card {
    background: color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent);
    border-left: 2.5px solid color-mix(in srgb, var(--blurple) 30%, transparent);
    border-radius: 0 6px 6px 0;
    padding: 0.3rem 0.45rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-viz-assign-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ai-viz-assign-module {
    font-size: 0.5rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.15rem;
}

.ai-viz-assign-person {
    font-size: 0.58rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--inv-bg-color) 70%, transparent);
    margin-bottom: 0.05rem;
}

.ai-viz-assign-detail {
    font-size: 0.48rem;
    color: color-mix(in srgb, var(--inv-bg-color) 38%, transparent);
    margin-bottom: 0.15rem;
}

.ai-viz-assign-btns {
    display: flex;
    gap: 0.3rem;
}

.ai-viz-assign-btn {
    font-size: 0.46rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    color: color-mix(in srgb, var(--blurple) 85%, transparent);
    background: color-mix(in srgb, var(--blurple) 8%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--blurple) 18%, transparent);
    cursor: default;
}

.ai-viz-assign-btn--alt {
    color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent);
    background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
}

.ai-viz-assign-progress {
    font-size: 0.52rem;
    font-weight: 600;
    color: #34d399;
    text-align: center;
    padding: 0.15rem 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ai-viz-assign-progress.is-visible {
    opacity: 1;
}

/* --- Dashboard viz (Cheat Sheet) --- */

.ai-agent-viz--dashboard {
    gap: 0.15rem;
}

.ai-viz-dash-section {
    display: flex;
    flex-direction: column;
    padding: 0.2rem 0.35rem;
    background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
    border-radius: 4px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.ai-viz-dash-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ai-viz-dash-header {
    font-size: 0.58rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--inv-bg-color) 62%, transparent);
}

.ai-viz-dash-content {
    font-size: 0.5rem;
    color: color-mix(in srgb, var(--inv-bg-color) 42%, transparent);
    line-height: 1.4;
    white-space: pre-line;
    padding-left: 0.25rem;
}

/* --- Gantt viz (AI Navigator) --- */

.ai-viz-gantt-header {
    display: flex;
    justify-content: space-between;
    padding: 0 0 0.3rem 4.35rem;
}

.ai-viz-gantt-month {
    font-size: 0.42rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--inv-bg-color) 25%, transparent);
    flex: 1;
    text-align: center;
}

.ai-viz-gantt-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ai-viz-gantt-today {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.5px;
    background: #818cf8;
    z-index: 2;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-viz-gantt-today.is-visible {
    opacity: 1;
    transform: scaleY(1);
}

.ai-viz-gantt-today::before {
    content: 'Today';
    position: absolute;
    top: -0.7rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.38rem;
    font-weight: 700;
    color: #818cf8;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.ai-viz-gantt-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-viz-gantt-row.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.ai-viz-gantt-label {
    width: 4rem;
    flex-shrink: 0;
    font-size: 0.5rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-viz-gantt-track {
    flex: 1;
    height: 1.1rem;
    position: relative;
    background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
    border-radius: 3px;
    overflow: hidden;
}

.ai-viz-gantt-bar {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: var(--gantt-left, 0%);
    width: var(--gantt-width, 30%);
    border-radius: 2px;
    background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    overflow: hidden;
}

.ai-viz-gantt-bar[data-status="complete"] {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.08);
}

.ai-viz-gantt-bar[data-status="active"] {
    border-color: rgba(129, 140, 248, 0.3);
    background: rgba(129, 140, 248, 0.08);
}

.ai-viz-gantt-bar[data-status="warning"] {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.08);
}

.ai-viz-gantt-bar[data-status="upcoming"] {
    border-color: color-mix(in srgb, var(--inv-bg-color) 10%, transparent);
    background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent);
}

.ai-viz-gantt-fill {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-viz-gantt-fill.is-filled {
    width: var(--gantt-progress, 0%);
}

.ai-viz-gantt-bar[data-status="complete"] .ai-viz-gantt-fill {
    background: rgba(16, 185, 129, 0.35);
}

.ai-viz-gantt-bar[data-status="active"] .ai-viz-gantt-fill {
    background: rgba(129, 140, 248, 0.35);
}

.ai-viz-gantt-bar[data-status="warning"] .ai-viz-gantt-fill {
    background: rgba(245, 158, 11, 0.3);
}

.ai-viz-gantt-bar[data-status="upcoming"] .ai-viz-gantt-fill {
    background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
}

/* Gantt guidance callouts */

.ai-viz-gantt-guidance {
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ai-viz-gantt-guidance-line {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    font-size: 0.48rem;
    line-height: 1.35;
    color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-viz-gantt-guidance-line.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ai-viz-gantt-guidance-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    margin-top: 0.05rem;
}

.ai-viz-gantt-guidance-line[data-level="warning"] .ai-viz-gantt-guidance-icon {
    color: #f59e0b;
}

.ai-viz-gantt-guidance-line[data-level="info"] .ai-viz-gantt-guidance-icon {
    color: #818cf8;
}

.ai-viz-gantt-guidance-line[data-level="action"] .ai-viz-gantt-guidance-icon {
    color: #10b981;
}

.ai-viz-gantt-guidance-text {
    flex: 1;
}

/* Cross Journeys View — Carousel Panels */

.ai-cross-carousel {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
}

.ai-cross-slides {
    min-height: 360px;
}

.ai-cross-panel {
    padding: 1.25rem 1.5rem;
    background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.ai-cross-panel-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    color: var(--blurple);
}

.ai-cross-panel-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--inv-bg-color);
}

.ai-cross-panel-sub {
    font-size: 0.68rem;
    color: color-mix(in srgb, var(--inv-bg-color) 38%, transparent);
    margin-left: 0.25rem;
}

.ai-cross-panel-inner {
    max-width: 620px;
    margin: 0 auto;
}

.ai-cross-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.ai-cross-1col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
}

/* Carousel bullet overrides (scoped) */
.ai-cross-carousel .carousel-bullets {
    margin-top: 1rem;
    gap: 10px;
}
.ai-cross-carousel .carousel-bullet {
    width: 12px;
    height: 12px;
}
.ai-cross-carousel .carousel-bullet::before {
    width: 8px;
    height: 8px;
    left: 2px;
    top: 2px;
}

/* Carousel arrows */
.ai-cross-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent);
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    z-index: 3;
    padding: 0;
}

.ai-cross-arrow:hover {
    color: var(--blurple);
    border-color: color-mix(in srgb, var(--blurple) 30%, transparent);
    background: color-mix(in srgb, var(--blurple) 6%, transparent);
}

.ai-cross-arrow--left {
    left: -2.75rem;
}

.ai-cross-arrow--right {
    right: -2.75rem;
}

.ai-cross-arrow svg {
    width: 14px;
    height: 14px;
}

/* Nav labels */
.ai-cross-nav-labels {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent);
}

.ai-cross-nav-label {
    cursor: pointer;
    transition: color 0.25s ease;
    padding: 0.15rem 0;
}
.ai-cross-nav-label.is-active {
    color: var(--blurple);
    font-weight: 600;
}
.ai-cross-nav-sep {
    color: color-mix(in srgb, var(--inv-bg-color) 16%, transparent);
}

/* ── Hub 1: Chat Simulation ── */

.ai-cross-chat-sim {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ai-chat-sim-msg {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-chat-sim-msg.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ai-chat-sim-user {
    display: flex;
    justify-content: flex-end;
}
.ai-chat-sim-bubble-user {
    background: color-mix(in srgb, var(--blurple) 14%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--blurple) 22%, transparent);
    border-radius: 12px 12px 2px 12px;
    padding: 0.55rem 0.8rem;
    max-width: 80%;
}
.ai-chat-sim-text {
    font-size: 0.78rem;
    color: var(--inv-bg-color);
    margin: 0;
    min-height: 1.15em;
}

.ai-chat-sim-bubble-ai {
    background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent);
    border-radius: 12px 12px 12px 2px;
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.ai-chat-sim-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--blurple);
    margin: 0;
    letter-spacing: 0.02em;
}
.ai-chat-sim-insight {
    font-size: 0.74rem;
    color: color-mix(in srgb, var(--inv-bg-color) 65%, transparent);
    margin: 0;
    line-height: 1.5;
}
.ai-chat-sim-insight strong {
    color: var(--inv-bg-color);
}

/* Inline chart in chat */
.ai-chat-sim-chart {
    width: 100%;
    max-width: 240px;
    height: auto;
    display: block;
}
.ai-chat-bar {
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-chat-bar[data-bar-color="pos"] { fill: color-mix(in srgb, #10b981 60%, transparent); }
.ai-chat-bar[data-bar-color="warn"] { fill: color-mix(in srgb, #fbbf24 55%, transparent); }
.ai-chat-bar[data-bar-color="neg"] { fill: color-mix(in srgb, #f87171 55%, transparent); }
.ai-chat-bar-label {
    font-size: 8px;
    fill: color-mix(in srgb, var(--inv-bg-color) 45%, transparent);
}

/* Chat action pills */
.ai-chat-sim-actions {
    display: flex;
    gap: 0.4rem;
}
.ai-chat-sim-btn {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    border: 0.5px solid color-mix(in srgb, var(--blurple) 30%, transparent);
    background: color-mix(in srgb, var(--blurple) 8%, transparent);
    color: var(--blurple);
    cursor: default;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.ai-chat-sim-btn.is-visible { opacity: 1; }

/* Typing indicator */
.ai-chat-sim-typing {
    display: flex;
    gap: 4px;
    padding: 0 0.3rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ai-chat-sim-typing.is-visible { opacity: 1; }

.ai-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--inv-bg-color) 30%, transparent);
    animation: aiTypingPulse 1.4s infinite ease-in-out;
}
.ai-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes aiTypingPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

/* ── Hub 1: Predictive Intelligence ── */

.ai-cross-predict {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ai-predict-header {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-predict-header.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.ai-predict-journey-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--inv-bg-color);
}
.ai-predict-template {
    font-size: 0.68rem;
    color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent);
}

.ai-predict-prob {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.ai-predict-prob-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--inv-bg-color);
}

.ai-predict-duration {
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent);
    margin: 0;
}

.ai-predict-signals-title {
    font-size: 0.65rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0.3rem 0 0;
}

.ai-predict-trust {
    font-size: 0.62rem;
    color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent);
    border-top: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    padding-top: 0.5rem;
    margin: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.ai-predict-trust.is-visible {
    opacity: 1;
}

/* ── Hub 2: Data Explorer ── */

.ai-explorer-prompt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    max-width: 480px;
    width: 100%;
}
.ai-explorer-prompt-icon {
    flex-shrink: 0;
    color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent);
}
.ai-explorer-prompt-text {
    font-size: 0.78rem;
    color: var(--inv-bg-color);
    min-height: 1.2em;
}
.ai-explorer-cursor {
    width: 2px;
    height: 1em;
    background: var(--blurple);
    animation: aiCursorBlink 1s step-end infinite;
    flex-shrink: 0;
}

.ai-explorer-result-stage {
    position: relative;
    min-height: 200px;
    width: 100%;
    max-width: 480px;
}

.ai-explorer-result {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    pointer-events: none;
}
.ai-explorer-result.is-visible {
    opacity: 1;
    transform: translateY(0);
    position: relative;
    pointer-events: auto;
}

.ai-explorer-big-num {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--blurple);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ai-explorer-trend {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #10b981;
}
.ai-explorer-trend-label {
    font-size: 0.72rem;
    font-weight: 500;
}

.ai-explorer-funnel-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent);
    margin: 0 0 0.3rem;
    align-self: flex-start;
}
.ai-funnel-svg {
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block;
}
.ai-funnel-bar {
    fill: color-mix(in srgb, var(--blurple) 50%, transparent);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-funnel-label {
    font-size: 8px;
    fill: color-mix(in srgb, var(--inv-bg-color) 45%, transparent);
}

/* ── Hub 3: Success Hub ── */

.ai-success-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.ai-success-stat-card {
    text-align: center;
    padding: 0.6rem 0.4rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-success-stat-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.ai-success-stat-card:nth-child(2) { transition-delay: 0.08s; }
.ai-success-stat-card:nth-child(3) { transition-delay: 0.16s; }

.ai-success-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: block;
}
.ai-success-stat-label {
    font-size: 0.62rem;
    color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent);
}

.ai-success-stat-card[data-stat="open"] .ai-success-stat-value { color: #f87171; }
.ai-success-stat-card[data-stat="progress"] .ai-success-stat-value { color: #fbbf24; }
.ai-success-stat-card[data-stat="resolved"] .ai-success-stat-value { color: #10b981; }

.ai-success-trend-svg {
    width: 100%;
    max-width: 280px;
    height: auto;
    display: block;
}
.ai-success-trend-line {
    fill: none;
    stroke: var(--blurple);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-success-trend-line.is-drawn { stroke-dashoffset: 0; }
.ai-success-trend-base {
    stroke: color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    stroke-width: 0.5;
}

.ai-success-caption {
    font-size: 0.68rem;
    color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent);
    margin: 0.3rem 0 0;
}
.ai-success-caption strong {
    color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent);
}

/* Ticket rows inside carousel panels — animated */
.ai-cross-panel .ai-ticket-row {
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-cross-panel .ai-ticket-row.is-visible {
    opacity: 1;
    transform: translateX(0);
}
.ai-cross-panel .ai-ticket-row:nth-child(2) { transition-delay: 0.08s; }
.ai-cross-panel .ai-ticket-row:nth-child(3) { transition-delay: 0.16s; }
.ai-cross-panel .ai-ticket-row:nth-child(4) { transition-delay: 0.24s; }

.ai-cross-panel .ai-hub-integrations {
    opacity: 0;
    transition: opacity 0.5s ease 0.4s;
}
.ai-cross-panel .ai-hub-integrations.is-visible {
    opacity: 1;
}

/* Pivot table mini */

.ai-hub-pivot {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
}

.ai-pivot-row {
    display: grid;
    grid-template-columns: 1fr repeat(3, 42px);
    gap: 0;
    padding: 0.3rem 0.5rem;
    font-size: 0.68rem;
    text-align: center;
}

.ai-pivot-row:nth-child(even) {
    background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
}

.ai-pivot-header-row {
    font-weight: 600;
    color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.6rem;
    background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
}

.ai-pivot-label {
    text-align: left;
    color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent);
    font-weight: 500;
}

.ai-pivot-val {
    color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent);
    font-variant-numeric: tabular-nums;
}

.ai-pivot-pos { color: #10b981; font-weight: 600; }
.ai-pivot-neg { color: color-mix(in srgb, #f87171 80%, transparent); }

/* Ticket list mini */

.ai-hub-tickets {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ai-ticket-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.7rem;
}

.ai-ticket-badge {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ai-ticket-open     { background: #f87171; }
.ai-ticket-progress { background: #fbbf24; }
.ai-ticket-resolved { background: #10b981; }

.ai-ticket-text {
    color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-ticket-age {
    color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent);
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.ai-hub-integrations {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.ai-hub-int-label {
    font-size: 0.62rem;
    color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent);
}

.ai-hub-int-tag {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent);
    background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    border-radius: 4px;
    padding: 0.12rem 0.4rem;
}

/* Thread lines (reused inside hub cards) */

.ai-threads-svg {
    width: 100%;
    height: auto;
    display: block;
}

.ai-thread-line {
    stroke: color-mix(in srgb, var(--blurple) 35%, transparent);
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-thread-line[data-thread="1"] { transition-delay: 0.1s; }
.ai-thread-line[data-thread="2"] { transition-delay: 0.18s; }
.ai-thread-line[data-thread="3"] { transition-delay: 0.28s; }
.ai-thread-line[data-thread="4"] { transition-delay: 0.38s; }

.ai-thread-line.is-drawn { stroke-dashoffset: 0; }

.ai-thread-dot {
    fill: var(--blurple);
    opacity: 0;
    transition: opacity 0.4s ease;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--blurple) 80%, transparent));
}

.ai-thread-dot[data-thread="0"].is-visible { transition-delay: 0.7s; }
.ai-thread-dot[data-thread="1"].is-visible { transition-delay: 0.82s; }
.ai-thread-dot[data-thread="2"].is-visible { transition-delay: 0.9s; }
.ai-thread-dot[data-thread="3"].is-visible { transition-delay: 1.0s; }
.ai-thread-dot[data-thread="4"].is-visible { transition-delay: 1.1s; }
.ai-thread-dot.is-visible { opacity: 1; }

/* (thread-names, org-bubble, ml-col, ml-card removed — replaced by hub cards) */

.ai-ml-bar-track {
    height: 6px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    margin-bottom: 0.45rem;
    overflow: hidden;
}

.ai-ml-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 100px;
    background: linear-gradient(90deg, var(--blurple), color-mix(in srgb, var(--lightblue) 80%, var(--blurple)));
    transition: width 1.2s cubic-bezier(0.34, 1.0, 0.64, 1);
    box-shadow: 0 0 10px color-mix(in srgb, var(--blurple) 50%, transparent);
}

.ai-ml-bar-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--inv-bg-color);
}

.ai-shap-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ai-shap-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: 0.5rem;
}

.ai-shap-name {
    font-size: 0.68rem;
    color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent);
    white-space: nowrap;
}

.ai-shap-bar-wrap {
    height: 6px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--inv-bg-color) 7%, transparent);
    overflow: hidden;
}

.ai-shap-bar {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 100px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-shap-item[data-shap-dir="pos"] .ai-shap-bar {
    background: linear-gradient(90deg, color-mix(in srgb, #10b981 70%, transparent), #10b981);
}

.ai-shap-item[data-shap-dir="neg"] .ai-shap-bar {
    background: linear-gradient(90deg, color-mix(in srgb, #f87171 70%, transparent), #f87171);
}

.ai-shap-pct {
    font-size: 0.65rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ai-shap-item[data-shap-dir="pos"] .ai-shap-pct {
    color: #10b981;
}

.ai-shap-item[data-shap-dir="neg"] .ai-shap-pct {
    color: #f87171;
}

/* Stagger delays for SHAP bars */
.ai-shap-item:nth-child(1) .ai-shap-bar { transition-delay: 0.0s; }
.ai-shap-item:nth-child(2) .ai-shap-bar { transition-delay: 0.1s; }
.ai-shap-item:nth-child(3) .ai-shap-bar { transition-delay: 0.2s; }
.ai-shap-item:nth-child(4) .ai-shap-bar { transition-delay: 0.3s; }

/* Footer */

/* ── Footer: Tier 1 — stat hero ── */

.ai-practice-footer {
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.ai-practice-footer-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 520px;
}

.ai-practice-stat {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--blurple);
    flex-shrink: 0;
}

.ai-practice-stat-copy {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ai-practice-stat-headline {
    font-size: 0.95rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--inv-bg-color) 80%, transparent);
    margin: 0;
    line-height: 1.3;
}

.ai-practice-stat-sub {
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent);
    margin: 0;
    line-height: 1.5;
}

/* ── Footer: Tier 2 — pillars + CTA ── */

.ai-practice-footer-mid {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.ai-practice-pillars-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ai-practice-pillar-tag {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent);
}

.ai-practice-pillar-sep {
    color: color-mix(in srgb, var(--inv-bg-color) 16%, transparent);
    font-size: 0.72rem;
}

/* ── Footer: Tier 3 — legal strip ── */

.ai-practice-footer-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    max-width: 680px;
}

.ai-practice-legal-patent {
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: color-mix(in srgb, var(--inv-bg-color) 18%, transparent);
    white-space: nowrap;
}

.ai-practice-legal-divider {
    width: 0.5px;
    height: 10px;
    background: color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    flex-shrink: 0;
}

.ai-practice-legal-tech-line {
    font-size: 0.55rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--inv-bg-color) 15%, transparent);
    line-height: 1.6;
}

/* Responsive */

@media (max-width: 768px) {
    .ai-practice-kicker {
        margin-bottom: 0.6rem;
        font-size: 0.6rem;
        letter-spacing: 0.3em;
    }

    .ai-practice-title {
        font-size: 1.6rem;
    }

    .ai-practice-toggle-wrap {
        margin-bottom: 1.25rem;
    }

    .ai-practice-toggle {
        padding: 3px;
    }

    .ai-practice-toggle-btn {
        font-size: 0.65rem;
        padding: 0.35rem 0.75rem;
        gap: 0.3rem;
    }

    .ai-practice-toggle-btn svg {
        width: 12px;
        height: 12px;
    }

    .ai-stage-ring {
        padding: 1.25rem 1rem;
    }

    .ai-ring-nodes {
        gap: 0.65rem;
    }

    .ai-stage-node-label {
        font-size: 0.55rem;
    }

    .ai-agent-panel-inner {
        grid-template-columns: 1fr;
        height: 360px;
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .ai-agent-panel-inner::-webkit-scrollbar {
        display: none;
    }

    .ai-agent-card {
        padding: 0.7rem 0.85rem;
    }

    .ai-cross-2col {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .ai-cross-arrow {
        display: none;
    }

    .ai-shap-item {
        grid-template-columns: 80px 1fr auto;
        gap: 0.5rem;
    }

    .ai-practice-footer-hero {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .ai-practice-footer-mid {
        flex-direction: column;
        gap: 1rem;
    }

    .ai-practice-footer-legal {
        flex-direction: column;
        gap: 0.35rem;
        text-align: center;
    }

    .ai-practice-legal-divider {
        display: none;
    }

    .ai-practice-legal-patent {
        white-space: normal;
    }

    .ai-cross-nav-labels {
        font-size: 0.65rem;
    }

    .ai-explorer-big-num {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .ai-practice-title {
        font-size: 1.4rem;
    }

    .ai-practice-toggle-btn {
        font-size: 0.58rem;
        padding: 0.3rem 0.6rem;
    }

    .ai-stage-node-label {
        display: none;
    }

    .ai-stage-ring {
        padding: 1rem 0.75rem;
        border-radius: 16px;
    }

    .ai-ring-nodes {
        gap: 0.4rem;
    }

    .ai-stage-node-dot {
        width: 28px;
        height: 28px;
    }

    .ai-stage-node::before,
    .ai-stage-node::after {
        width: 28px;
        height: 28px;
        top: 14px;
    }

    .ai-stage-context-name {
        font-size: 0.95rem;
    }

    .ai-stage-context-desc {
        font-size: 0.58rem;
    }

}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .ai-thread-line,
    .ai-ml-bar-fill,
    .ai-shap-bar {
        transition: none !important;
    }

    .ai-ring-orbit::after {
        animation: none !important;
        display: none;
    }

    .ai-viz-check-row {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .ai-viz-bar-fill {
        transition: none !important;
    }

    .ai-viz-chat-msg {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .ai-viz-ingest-chip,
    .ai-viz-ingest-processing,
    .ai-viz-capture-field,
    .ai-viz-doc-section,
    .ai-viz-review-card,
    .ai-viz-review-step1,
    .ai-viz-report-section,
    .ai-viz-assign-card,
    .ai-viz-assign-progress,
    .ai-viz-dash-section,
    .ai-viz-gantt-row,
    .ai-viz-gantt-today,
    .ai-viz-gantt-guidance-line {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .ai-viz-gantt-fill {
        width: var(--gantt-progress, 0%) !important;
        transition: none !important;
    }

    .ai-thread-line {
        stroke-dashoffset: 0;
    }

    .ai-agent-card {
        transition: none !important;
        opacity: 1;
        transform: none;
    }

    .ai-stage-node.is-active .ai-stage-node-dot,
    .ai-stage-node.is-active::before,
    .ai-stage-node.is-active::after {
        animation: none;
    }

    .ai-stage-node::before,
    .ai-stage-node::after {
        display: none;
    }

    .ai-stage-node-ring-outer,
    .ai-stage-node-ring-inner {
        animation: none !important;
        display: none;
    }

    .ai-agent-panel-scanline {
        animation: none !important;
        display: none;
    }

    .ai-agent-card-shimmer-track {
        animation: none !important;
        display: none;
    }

    .ai-agent-panel-glow-primary,
    .ai-agent-panel-glow-secondary {
        animation: none !important;
    }

    .ai-agent-card {
        transform: none !important;
    }

    .ai-agent-status-ring {
        animation: none !important;
        display: none;
    }

    .ai-stage-node:not(.is-active):not(.is-past) .ai-stage-node-dot {
        animation: none;
    }

    .ai-agent-card-accent {
        opacity: 1;
    }

    .ai-agent-card-cursor {
        animation: none;
        opacity: 1;
    }

    .ai-agent-status-dot,
    .ai-typing-dot {
        animation: none;
    }

    .ai-explorer-cursor {
        animation: none;
        opacity: 1;
    }

    .ai-chat-sim-msg,
    .ai-predict-header,
    .ai-predict-trust,
    .ai-explorer-result,
    .ai-success-stat-card,
    .ai-cross-panel .ai-ticket-row,
    .ai-cross-panel .ai-hub-integrations,
    .ai-chat-sim-btn {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .ai-chat-sim-typing {
        display: none;
    }

    .ai-chat-bar,
    .ai-funnel-bar,
    .ai-success-trend-line {
        transition: none !important;
    }

    .ai-success-trend-line {
        stroke-dashoffset: 0;
    }

    .meets-crm-bridge::before {
        animation: none !important;
    }
}

/* ============================================================
   END AI IN PRACTICE SECTION
   ============================================================ */