/* ============================================================
   FIRST-PARTY AI™ — CATEGORY-DEFINING PAGE
   fpai-v3.css
   Premium design matching CustomerNode index v5 standards
   ============================================================ */

/* ────────────────────────────────────────
   0. TOKEN LAYER
   ──────────────────────────────────────── */
:root {
    --fpai-gradient: linear-gradient(160deg, #4f46e5 0%, #6366f1 40%, #8b5cf6 100%);
    --fpai-gradient-soft: linear-gradient(135deg, rgba(79,70,229,0.85) 0%, rgba(99,102,241,0.75) 50%, rgba(139,92,246,0.8) 100%);
    --fpai-glow: rgba(99, 102, 241, 0.2);
    --fpai-glow-strong: rgba(99, 102, 241, 0.4);
    --fpai-card-border: color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    --fpai-card-bg: var(--main-bg-color);
    --fpai-section-py: clamp(5rem, 10vw, 8rem);
    --fpai-max-w: 1200px;
    --fpai-max-w-narrow: 820px;
}

/* ────────────────────────────────────────
   1. HERO
   ──────────────────────────────────────── */
.fpai-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Footer-inspired premium base: deep indigo→black with a purple bloom off the
       top edge and a pink bloom off the bottom. The animated orbs float over it. */
    background:
        radial-gradient(120% 80% at 50% -4%, rgba(120, 115, 245, 0.15) 0%, rgba(120, 115, 245, 0.04) 34%, transparent 60%),
        radial-gradient(90% 60% at 50% 104%, rgba(212, 144, 255, 0.09) 0%, transparent 58%),
        linear-gradient(180deg, #0a0b1c 0%, #070711 55%, #06060e 100%);
    padding: 0 !important;
}

/* Footer-signature glowing purple→blue→pink hairline framing the hero's base. */
/* Fourth aurora orb (pink) via ::before, so the mesh spans purple/blue/violet/pink. */
.fpai-hero::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    bottom: 2%;
    right: 20%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 144, 255, 0.13) 0%, rgba(212, 144, 255, 0) 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 1;
    animation: fpai-orb-4 20s ease-in-out infinite alternate;
}
@keyframes fpai-orb-4 {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.9; }
    50%  { transform: translate(34px, -26px) scale(1.12); opacity: 0.7; }
    100% { transform: translate(-18px, 12px) scale(0.96); opacity: 1; }
}

/* Footer-signature hairline with a traveling light sweeping along it. */
.fpai-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background:
        linear-gradient(90deg, transparent 0%, rgba(230, 238, 255, 0.8) 50%, transparent 100%),
        linear-gradient(90deg,
            rgba(120, 115, 245, 0) 0%,
            rgba(120, 115, 245, 0.5) 24%,
            rgba(96, 165, 250, 0.55) 52%,
            rgba(212, 144, 255, 0.45) 78%,
            rgba(120, 115, 245, 0) 100%);
    background-size: 34% 100%, 100% 100%;
    background-repeat: no-repeat;
    box-shadow: 0 0 16px rgba(120, 115, 245, 0.3);
    z-index: 2;
    pointer-events: none;
    animation: fpaiHairlineSweep 7s linear infinite;
}
@keyframes fpaiHairlineSweep {
    from { background-position: -45% 0, 0 0; }
    to   { background-position: 145% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fpai-hero::before,
    .fpai-hero::after {
        animation: none;
    }
    .fpai-hero::after { background-image: linear-gradient(90deg,
        rgba(120, 115, 245, 0) 0%, rgba(120, 115, 245, 0.5) 24%,
        rgba(96, 165, 250, 0.55) 52%, rgba(212, 144, 255, 0.45) 78%,
        rgba(120, 115, 245, 0) 100%); background-size: 100% 100%; }
}

/* Glow orb – top-left (purple) */
.fpai-hero-mesh::before {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    top: -12%;
    left: -8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.16) 0%, rgba(79, 70, 229, 0) 70%);
    filter: blur(60px);
    animation: fpai-orb-1 14s ease-in-out infinite alternate;
}

/* Glow orb – right (blue) */
.fpai-hero-mesh::after {
    content: "";
    position: absolute;
    width: 550px;
    height: 550px;
    top: 10%;
    right: -6%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.16) 0%, rgba(96, 165, 250, 0) 70%);
    filter: blur(50px);
    animation: fpai-orb-2 18s ease-in-out infinite alternate;
}

.fpai-hero-mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* Third orb via a child element in the template */
.fpai-hero-orb-3 {
    position: absolute;
    width: 480px;
    height: 480px;
    bottom: -8%;
    left: 30%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.17) 0%, rgba(139, 92, 246, 0) 70%);
    filter: blur(55px);
    pointer-events: none;
    z-index: 1;
    animation: fpai-orb-3 16s ease-in-out infinite alternate;
}

@keyframes fpai-orb-1 {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    50%  { transform: translate(40px, 30px) scale(1.08); opacity: 0.75; }
    100% { transform: translate(-20px, 15px) scale(0.95); opacity: 1; }
}

@keyframes fpai-orb-2 {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    50%  { transform: translate(-35px, 20px) scale(1.05); opacity: 0.7; }
    100% { transform: translate(15px, -25px) scale(0.97); opacity: 1; }
}

@keyframes fpai-orb-3 {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    50%  { transform: translate(25px, -20px) scale(1.1); opacity: 0.65; }
    100% { transform: translate(-15px, 10px) scale(0.93); opacity: 1; }
}

/* Override particles-overlay & hero-gradient bg for FPAI dark hero */
.fpai-hero .particles-overlay,
.fpai-hero .particles-overlay.hero-gradient {
    background: transparent !important;
    background-color: transparent !important;
}

.fpai-hero-inner {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 920px;
    padding: 2rem 1.5rem;
    color: #fff;
}

/* Force all hero text white — bg is always near-black */
.fpai-hero .fpai-hero-title,
.fpai-hero .fpai-hero-sub,
.fpai-hero .fpai-btn-ghost,
.fpai-hero .fpai-hero-scroll-cue {
    color: #fff !important;
}

.fpai-hero .fpai-tm {
    -webkit-text-fill-color: rgba(255, 255, 255, 0.4);
}

.fpai-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 600;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 2.5rem;
}

/* Patent strip — centered under the journey on the FPAI page */
.fpai-patent-strip {
    text-align: center;
    margin-top: 2rem;
}

.fpai-patent-strip .fpai-hero-badge {
    margin: 0;
}

/* Mascot icon inside Get Started button */
.fpai-btn-primary svg {
    width: 20px;
    height: 20px;
}

.fpai-hero-title {
    font-size: clamp(3.25rem, 9vw, 6.5rem);
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -0.035em;
    color: var(--inv-bg-color);
    margin: 0 0 1.75rem;
}

.fpai-hero-title .fpai-gradient-text {
    background: var(--fpai-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fpai-tm {
    font-size: 0.35em;
    vertical-align: super;
    opacity: 0.4;
    letter-spacing: 0;
    -webkit-text-fill-color: var(--inv-bg-color);
}

.fpai-hero-sub {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: var(--inv-bg-color);
    opacity: 0.65;
    max-width: 640px;
    margin: 0 auto 3rem;
    line-height: 1.75;
}

.fpai-hero-ctas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.fpai-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 2rem;
    border-radius: 999px;
    background: var(--fpai-gradient-soft);
    color: #fff !important;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Premium finish: brand glow halo + a glass top-highlight and a hair of inner
       depth, so the primary button reads at the same level as the Build CTA. */
    box-shadow:
        0 6px 22px rgba(79, 70, 229, 0.32),
        0 0 34px -6px rgba(99, 102, 241, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.fpai-btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 12px 36px rgba(79, 70, 229, 0.45),
        0 0 52px -4px rgba(99, 102, 241, 0.68),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.fpai-btn-primary svg {
    width: 18px;
    height: 18px;
}

.fpai-btn-ghost {
    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;
    font-size: 0.9rem;
    opacity: 0.8;
}

.fpai-btn-ghost:hover {
    transform: scale(1.08);
    opacity: 1;
    color: var(--lightblue) !important;
}

.fpai-btn-ghost svg {
    width: 18px;
    height: 18px;
}

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

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

/* ────────────────────────────────────────
   2. SHARED SECTION STYLES
   ──────────────────────────────────────── */
.fpai-section {
    position: relative;
    padding: var(--fpai-section-py) 0;
    background: var(--main-bg-color);
    color: var(--inv-bg-color);
    overflow: hidden;
}

.fpai-section-inner {
    max-width: var(--fpai-max-w);
    margin: 0 auto;
}

.fpai-section-inner--narrow {
    max-width: var(--fpai-max-w-narrow);
}

.fpai-section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.fpai-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    font-size: 0.6rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    font-weight: 800;
    background: color-mix(in srgb, var(--purple) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--purple) 25%, transparent);
    color: var(--purple);
    margin-bottom: 1.5rem;
}

.fpai-pill svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.fpai-section-title {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--inv-bg-color);
    margin: 0 0 1rem;
}
.fpai-section-title--centered {
    text-align: center;
    margin-bottom: 2rem;
}

.fpai-section-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--inv-bg-color);
    opacity: 0.6;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

.fpai-divider {
    width: 60px;
    height: 2px;
    background: var(--blurple);
    margin: 2rem auto;
    opacity: 0.5;
}

/* ────────────────────────────────────────
   3. CRISIS / STATS SECTION
   ──────────────────────────────────────── */
.fpai-crisis {
    position: relative;
    /* Force dark — same scope as hero + introduce so they read as one block */
    --main-bg-color: #06060e;
    --inv-bg-color: #f1f5f9;
    --off-bg-color: #06060e;
    --grey-accent-color: #0f172a;
    --secondary-grey-color: #1e293b;
    color: #f1f5f9;
    background: #06060e;
}

.fpai-crisis-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 80% at 50% 60%, rgba(99, 102, 241, 0.08), transparent 70%);
    pointer-events: none;
}

.fpai-stats-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1px;
}

.fpai-stat-card {
    padding: 1.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
    border: none;
    border-right: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    border-radius: 0;
    transition: background 0.35s ease;
    flex: 1 1 200px;
    max-width: 280px;
}

.fpai-stat-card:last-child {
    border-right: none;
}

.fpai-stat-card:hover {
    background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
}

.fpai-stat-value {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
    height: 44px;
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    background: var(--fpai-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fpai-stat-label {
    font-size: 0.8rem;
    color: var(--inv-bg-color);
    opacity: 0.5;
    line-height: 1.5;
    height: 68px;
    display: flex;
    align-items: center;
    max-width: 200px;
}

.fpai-stat-source {
    font-size: 0.6rem;
    color: var(--inv-bg-color);
    opacity: 0.25;
    margin-top: auto;
    padding-top: 0.6rem;
    font-style: italic;
}

/* Compact variant (no header, tighter padding) */
.fpai-crisis--compact {
    padding-top: 3.5rem;
    padding-bottom: 0;
}

/* ────────────────────────────────────────
   3b. REASSURANCE CHIPS (reusable)
   ──────────────────────────────────────── */
.fpai-reassure-footer {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.fpai-reassure-chip {
    display: inline-block;
    padding: 0.45rem 1.2rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent);
    border-radius: 100px;
    background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
}

/* ────────────────────────────────────────
   4. THESIS / MANIFESTO
   ──────────────────────────────────────── */
.fpai-thesis {
    position: relative;
}

.fpai-thesis-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% 50%, rgba(79, 70, 229, 0.08), transparent);
    pointer-events: none;
}

.fpai-thesis-card {
    max-width: var(--fpai-max-w-narrow);
    margin: 0 auto;
    text-align: center;
    padding: 4rem 3rem;
    background: var(--fpai-card-bg);
    border: 1px solid var(--fpai-card-border);
    border-radius: 32px;
    box-shadow: 0 40px 80px rgba(15, 23, 42, 0.12);
    position: relative;
}

.fpai-thesis-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 2rem;
    color: var(--purple);
    opacity: 0.6;
}

.fpai-thesis-headline {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--inv-bg-color);
    margin: 0 0 1.5rem;
}

.fpai-thesis-headline em {
    font-style: normal;
    background: var(--fpai-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fpai-thesis-body {
    font-size: 1.05rem;
    color: var(--inv-bg-color);
    opacity: 0.65;
    line-height: 1.75;
    max-width: 600px;
    margin: 0 auto;
}

/* ────────────────────────────────────────
   4b. INTRODUCING FIRST-PARTY AI
   ──────────────────────────────────────── */

.fpai-kicker-prefix {
    color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent);
}

.fpai-kicker-term {
    font-weight: 700;
    background: linear-gradient(160deg, #4f46e5 0%, #6366f1 50%, #8b5cf6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Introduce — force dark, premium immersive section ── */
.fpai-introduce {
    position: relative;
    /* Force dark theme — matches hero + crisis for seamless flow */
    --main-bg-color: #06060e;
    --inv-bg-color: #f1f5f9;
    --off-bg-color: #06060e;
    --grey-accent-color: #0f172a;
    --secondary-grey-color: #1e293b;
    color: #f1f5f9;
    background: #06060e;
    padding-top: 2rem;
    padding-bottom: var(--fpai-section-py);
    border-bottom: 0.5px solid rgba(129, 140, 248, 0.08);
}

.fpai-introduce-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 35%, rgba(99, 102, 241, 0.10), transparent 70%),
        radial-gradient(circle at 12% 80%, rgba(139, 92, 246, 0.09), transparent 50%),
        radial-gradient(circle at 88% 20%, rgba(96, 165, 250, 0.07), transparent 50%),
        radial-gradient(circle at 50% 100%, rgba(99, 102, 241, 0.06), transparent 60%);
    pointer-events: none;
}

.fpai-introduce-card {
    position: relative;
    max-width: 840px;
    margin: 0 auto;
    padding: 1rem 0 2.5rem;
}

.fpai-introduce-card::before {
    display: none;
}

/* ── Transition bridge — data problem → ecosystem pivot ── */
.fpai-transition-bridge {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 1rem;
}

.fpai-transition-bridge::before {
    display: none;
}

.fpai-bridge-lead {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.55;
    font-weight: 500;
    color: color-mix(in srgb, var(--inv-bg-color) 70%, transparent);
    margin: 0;
    letter-spacing: -0.01em;
}

.fpai-bridge-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 3rem 0 2.5rem;
}

.fpai-bridge-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--inv-bg-color) 25%, transparent), transparent);
}

.fpai-bridge-divider-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent);
    white-space: nowrap;
}

.fpai-transition-bridge .fpai-intro-kicker {
    margin-top: 5rem;
    margin-bottom: 0;
}

.fpai-intro-kicker--hero .fpai-kicker-brand {
    display: block;
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--inv-bg-color);
    margin-bottom: 1.5rem;
}

.fpai-intro-kicker--hero .fpai-kicker-prefix {
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.6rem;
}

.fpai-solution-group {
    text-align: center;
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
    padding: 1.5rem 2rem 1.25rem;
    margin-top: 0.75rem;
}

.fpai-solution-group .fpai-kicker-term {
    display: block;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
    background: linear-gradient(160deg, #4f46e5 0%, #6366f1 50%, #8b5cf6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.1rem;
}

.fpai-solution-group .fpai-dims {
    margin: 0.5rem 0 0;
}

.fpai-bridge-sub {
    font-size: 0.85rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent);
    margin: 0;
    max-width: 500px;
    margin-inline: auto;
}

/* ── Five Dimensions — compact rotating ── */
.fpai-dims {
    margin: 0.25rem 0 0;
}

.fpai-dims-row {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.fpai-dim-tab {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent);
    background: none;
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    border-radius: 100px;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.fpai-dim-tab:hover {
    color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent);
    border-color: color-mix(in srgb, var(--inv-bg-color) 15%, transparent);
}

.fpai-dim-tab.is-active {
    color: var(--inv-bg-color);
    border-color: color-mix(in srgb, #818cf8 35%, transparent);
    background: color-mix(in srgb, #818cf8 8%, transparent);
}

.fpai-dims-feed {
    position: relative;
    height: 4rem;
    margin-top: 0.75rem;
    overflow: hidden;
}

.fpai-dim-desc {
    position: absolute;
    inset: 0;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent);
    text-align: center;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.fpai-dim-desc.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.fpai-introduce-card .fpai-transition-bridge .fpai-intro-kicker {
    margin-bottom: 1rem;
}

.fpai-introduce-card .fpai-journey {
    margin-top: -50px;
    margin-bottom: 0;
}


/* ── Unified journey visualization ── */
.fpai-intro-kicker {
    text-align: center;
    margin-bottom: 2.5rem;
}

.fpai-intro-kicker .fpai-kicker-prefix {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.fpai-intro-kicker .fpai-kicker-term {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    padding-bottom: 0.1em;
    display: inline-block;
}

.fpai-journey {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 720px;
    margin: 0 auto 2.5rem;
    /* Match the navigate motion graphic's type system. The carousel was
       inheriting the Satoshi body font (--font-main), which is why its
       typography read as a "different set" next to the navigate/share
       graphics. Default to the brand display font here; metric + eyebrow
       bits switch to --v6-mono below, exactly as navigate does. */
    font-family: var(--brand-font, 'Space Grotesk', sans-serif);
}

@property --progress-deg {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@property --orbit-offset {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}

@property --stage-offset {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}

/* ── Circle journey ring — 3D stacked platform ── */
.fpai-journey-ring-wrap {
    --ring-size: 540px;
    --ring-radius: 160px;
    --node-w: 102px;
    --node-h: 34px;
    --person-radius: 244px;
    --ai-radius: 98px;
    --tilt: 36deg;
    --persp: 600px;
    position: relative;
    width: var(--ring-size);
    height: var(--ring-size);
    transform: perspective(var(--persp)) rotateX(var(--tilt));
    transform-origin: center 55%;
    transform-style: preserve-3d;
    transition: --stage-offset 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                --orbit-offset 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 3D zone fills — concentric colored bands ── */
.fpai-journey-ring-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, #a78bfa 20%, transparent) 0%,
        color-mix(in srgb, #8b5cf6 10%, transparent) 36%,
        color-mix(in srgb, #818cf8 16%, transparent) 37%,
        color-mix(in srgb, #6366f1 7%, transparent) 58%,
        color-mix(in srgb, #60a5fa 14%, transparent) 59%,
        color-mix(in srgb, #3b82f6 5%, transparent) 89%,
        transparent 90%
    );
    opacity: 0;
    transition: opacity 0.8s ease 0.3s;
    pointer-events: none;
    transform: translateZ(-2px);
}

.fpai-journey--active::before { opacity: 1; }

/* ── Ground shadow — floating disc casts a soft glow ── */
.fpai-journey-ring-wrap::after {
    content: "";
    position: absolute;
    bottom: -32px;
    left: 8%;
    right: 8%;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(ellipse,
        color-mix(in srgb, #818cf8 22%, transparent) 0%,
        color-mix(in srgb, #6366f1 10%, transparent) 40%,
        transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease 1.5s;
    transform: translateZ(-10px);
}

.fpai-journey--active::after { opacity: 1; }

/* ── Outer orbit — Context Native (people ring) — Z:0 base layer ── */
.fpai-journey-orbit-outer {
    position: absolute;
    inset: calc((var(--ring-size) - var(--person-radius) * 2) / 2);
    border-radius: 50%;
    border: 1.5px dashed color-mix(in srgb, #60a5fa 28%, transparent);
    box-shadow: 0 8px 30px color-mix(in srgb, #3b82f6 14%, transparent),
                0 0 0 10px color-mix(in srgb, #3b82f6 4%, transparent);
    transform: translateZ(0);
}

/* Outer orbit slowly counter-rotates its dash pattern */
@keyframes fpai-context-spin {
    to { transform: translateZ(0) rotate(-360deg); }
}

.fpai-journey--active .fpai-journey-orbit-outer {
    animation: fpai-context-spin 120s linear 1.5s infinite backwards;
}

/* ── Data flow — radial spokes between outer and inner rings ── */
.fpai-data-flow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease 1.5s;
    transform: translateZ(22px);
}

.fpai-journey--active .fpai-data-flow {
    opacity: 1;
}

.fpai-flow-spoke {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: rotate(calc(var(--angle) + var(--orbit-offset, 0deg)));
}
.fpai-flow-spoke:nth-child(1) { --angle:   0deg; --delay:    0s; }
.fpai-flow-spoke:nth-child(2) { --angle:  40deg; --delay: 1.1s; }
.fpai-flow-spoke:nth-child(3) { --angle:  80deg; --delay: 0.5s; }
.fpai-flow-spoke:nth-child(4) { --angle: 120deg; --delay: 1.6s; }
.fpai-flow-spoke:nth-child(5) { --angle: 160deg; --delay: 0.3s; }
.fpai-flow-spoke:nth-child(6) { --angle: 200deg; --delay: 1.9s; }
.fpai-flow-spoke:nth-child(7) { --angle: 240deg; --delay: 0.8s; }
.fpai-flow-spoke:nth-child(8) { --angle: 280deg; --delay: 1.4s; }
.fpai-flow-spoke:nth-child(9) { --angle: 320deg; --delay: 0.2s; }

/* Static spoke line — faint radial connector */
.fpai-flow-spoke::before {
    content: "";
    position: absolute;
    left: -0.5px;
    width: 1px;
    top: calc(-1 * var(--person-radius) + 14px);
    height: calc(var(--person-radius) - var(--ring-radius) - 20px);
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, #60a5fa 12%, transparent),
        color-mix(in srgb, #818cf8 18%, transparent),
        color-mix(in srgb, #818cf8 8%, transparent)
    );
    border-radius: 1px;
}

/* Animated data packet — dot travels along spoke */
.fpai-flow-spoke::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    left: -2px;
    box-shadow: 0 0 6px rgba(129, 140, 248, 0.6),
                0 0 12px rgba(99, 102, 241, 0.3);
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: var(--delay, 0s);
}

/* Inward — context data flowing to stages (blue) */
.fpai-flow-spoke--in::after {
    background: #60a5fa;
    animation-name: fpai-data-in;
}

/* Outward — AI actions flowing to people (indigo) */
.fpai-flow-spoke--out::after {
    background: #a78bfa;
    animation-name: fpai-data-out;
}

@keyframes fpai-data-in {
    0%   { top: calc(-1 * var(--person-radius) + 14px); opacity: 0; }
    12%  { opacity: 0.8; }
    50%  { opacity: 0.9; }
    88%  { opacity: 0.6; }
    100% { top: calc(-1 * var(--ring-radius) - 6px); opacity: 0; }
}

@keyframes fpai-data-out {
    0%   { top: calc(-1 * var(--ring-radius) - 6px); opacity: 0; }
    12%  { opacity: 0.7; }
    50%  { opacity: 0.8; }
    88%  { opacity: 0.5; }
    100% { top: calc(-1 * var(--person-radius) + 14px); opacity: 0; }
}

/* People carousel — orbit offset animates all personas around the ring */
.fpai-people-ring {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

/* --orbit-offset is now driven by JS (1/4 of stage rotation) */

.fpai-journey-person {
    position: absolute;
    top: 50%;
    left: 50%;
    --person-angle: calc(var(--p) * 40deg + var(--orbit-offset, 0deg));
    transform: rotate(var(--person-angle))
               translateY(calc(-1 * var(--person-radius)))
               rotate(calc(-1 * var(--person-angle)))
               translateZ(0)
               rotateX(calc(-1 * var(--tilt)));
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 0.65rem;
    margin-left: -36px;
    margin-top: -14px;
    min-width: 72px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    border-radius: 14px;
    opacity: 0;
    transition: opacity 0.5s ease;
    transition-delay: calc(0.84s + var(--p) * 0.08s);
    z-index: 1;
}

.fpai-journey-person:nth-of-type(1)  { --p: 0; }
.fpai-journey-person:nth-of-type(2)  { --p: 1; }
.fpai-journey-person:nth-of-type(3)  { --p: 2; }
.fpai-journey-person:nth-of-type(4)  { --p: 3; }
.fpai-journey-person:nth-of-type(5)  { --p: 4; }
.fpai-journey-person:nth-of-type(6)  { --p: 5; }
.fpai-journey-person:nth-of-type(7)  { --p: 6; }
.fpai-journey-person:nth-of-type(8)  { --p: 7; }
.fpai-journey-person:nth-of-type(9)  { --p: 8; }

.fpai-journey--active .fpai-journey-person { opacity: 1; }
.fpai-journey--layer-motion .fpai-journey-person { opacity: 0.7; }
.fpai-journey--layer-motion .fpai-journey-person--third { opacity: 0.4; }

/* Team colors */
.fpai-journey-person--sell {
    color: var(--purple);
    background: color-mix(in srgb, var(--purple) 8%, var(--main-bg-color));
    border: 1px solid color-mix(in srgb, var(--purple) 18%, transparent);
}

.fpai-journey-person--cust {
    color: var(--blurple);
    background: color-mix(in srgb, var(--blurple) 8%, var(--main-bg-color));
    border: 1px solid color-mix(in srgb, var(--blurple) 18%, transparent);
}

.fpai-journey-person--third {
    color: var(--inv-bg-color);
    opacity: 0;
    background: color-mix(in srgb, var(--inv-bg-color) 4%, var(--main-bg-color));
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
}

.fpai-journey--active .fpai-journey-person--third { opacity: 0.65; }



/* ── Middle orbit — Motion Native (stages) — Z:45 ── */
.fpai-journey-orbit {
    position: absolute;
    inset: calc((var(--ring-size) - var(--ring-radius) * 2) / 2);
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, #818cf8 45%, transparent);
    background: radial-gradient(circle,
        transparent 0%,
        transparent 62%,
        color-mix(in srgb, #6366f1 6%, transparent) 68%,
        color-mix(in srgb, #818cf8 12%, transparent) 85%,
        color-mix(in srgb, #818cf8 18%, transparent) 100%
    );
    box-shadow: 0 12px 40px color-mix(in srgb, #818cf8 28%, transparent),
                0 0 0 1px color-mix(in srgb, #818cf8 15%, transparent),
                inset 0 0 30px color-mix(in srgb, #818cf8 10%, transparent),
                inset 0 1px 0 color-mix(in srgb, #c4b5fd 12%, transparent);
    transform: translateZ(45px);
    opacity: 0;
    transition: opacity 0.8s ease;
}
.fpai-journey--layer-motion .fpai-journey-orbit { opacity: 1; }

/* Progress arc — fills as stages complete */
.fpai-journey-orbit::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: conic-gradient(from var(--stage-offset, 0deg),
        color-mix(in srgb, #818cf8 40%, transparent) 0deg,
        color-mix(in srgb, #60a5fa 55%, transparent) var(--progress-deg, 0deg),
        transparent var(--progress-deg, 0deg)
    );
    mask: radial-gradient(closest-side, transparent calc(100% - 3px), black calc(100% - 2px), black 100%, transparent 100%);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), black calc(100% - 2px), black 100%, transparent 100%);
    opacity: 0;
    transition: opacity 0.6s ease, --progress-deg 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.fpai-journey--layer-motion .fpai-journey-orbit::after {
    opacity: 0.75;
}

/* Stage nodes — stagger-in on scroll */
.fpai-journey-node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--node-w);
    height: var(--node-h);
    margin-left: calc(var(--node-w) / -2);
    margin-top: calc(var(--node-h) / -2);
    --node-angle: calc(var(--i) * 51.43deg + var(--stage-offset, 0deg));
    transform: rotate(var(--node-angle))
               translateY(calc(-1 * var(--ring-radius)))
               rotate(calc(-1 * var(--node-angle)))
               translateZ(60px)
               rotateX(calc(-1 * var(--tilt)));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    color: var(--inv-bg-color);
    opacity: 0;
    border-radius: 20px;
    background: color-mix(in srgb, var(--main-bg-color) 75%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, #818cf8 30%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, #818cf8 12%, transparent);
    transition: opacity 0.5s ease, color 0.35s ease, border-color 0.35s ease,
                background 0.35s ease, box-shadow 0.35s ease, scale 0.3s ease;
    transition-delay: calc(var(--i) * 0.12s);
    z-index: 4;
}
.fpai-journey-node:nth-of-type(1)  { --i: 0; }
.fpai-journey-node:nth-of-type(2)  { --i: 1; }
.fpai-journey-node:nth-of-type(3)  { --i: 2; }
.fpai-journey-node:nth-of-type(4)  { --i: 3; }
.fpai-journey-node:nth-of-type(5)  { --i: 4; }
.fpai-journey-node:nth-of-type(6)  { --i: 5; }
.fpai-journey-node:nth-of-type(7)  { --i: 6; }

.fpai-node-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Nodes appear on motion layer */
.fpai-journey--layer-motion .fpai-journey-node              { opacity: 0.9; }
.fpai-journey--layer-motion .fpai-journey-node--done        {
    opacity: 1;
    border-color: color-mix(in srgb, #818cf8 45%, transparent);
    background: color-mix(in srgb, #818cf8 10%, var(--main-bg-color));
    box-shadow: 0 0 10px color-mix(in srgb, #818cf8 15%, transparent);
}
.fpai-journey--layer-motion .fpai-journey-node--active      {
    opacity: 1 !important;
    color: var(--inv-bg-color);
    border-color: color-mix(in srgb, #60a5fa 55%, transparent);
    background: color-mix(in srgb, #60a5fa 14%, var(--main-bg-color));
    animation: fpai-stage-pulse 2.2s ease-in-out infinite;
}

@keyframes fpai-stage-pulse {
    0%, 100% { box-shadow: 0 0 14px color-mix(in srgb, #60a5fa 25%, transparent),
                            0 0 0 1px color-mix(in srgb, #60a5fa 18%, transparent); }
    50%      { box-shadow: 0 0 28px color-mix(in srgb, #60a5fa 50%, transparent),
                            0 0 0 2px color-mix(in srgb, #60a5fa 35%, transparent); }
}

/* Stage counter label — appears below active node */
.fpai-journey-node--active[data-counter]::after {
    content: attr(data-counter);
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--v6-mono, 'JetBrains Mono', 'SF Mono', ui-monospace, monospace);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent);
    white-space: nowrap;
}

/* Arrow controls */
.fpai-journey-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateZ(72px) rotateX(calc(-1 * var(--tilt)));
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, color 0.2s ease;
    z-index: 3;
    padding: 0;
}

.fpai-journey--layer-motion .fpai-journey-arrow { opacity: 1; }
.fpai-journey-arrow:hover { color: var(--inv-bg-color); }
.fpai-journey-arrow--prev { left: calc(50% - 118px); }
.fpai-journey-arrow--next { right: calc(50% - 118px); }

/* Center — AI mascot + outcome (lives on motion layer) */
.fpai-journey-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(72px) rotateX(calc(-1 * var(--tilt)));
    width: calc(var(--ai-radius) * 2 + 40px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    z-index: 1;
    background: color-mix(in srgb, var(--main-bg-color) 72%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 0.5px solid transparent;
    border-radius: 20px;
    padding: 0.85rem 1.15rem;
    box-shadow: 0 0 60px rgba(99, 102, 241, 0.15),
                0 0 120px rgba(139, 92, 246, 0.08);
}

/* The premium gradient border — same purple→blue→pink edge as the footer, the
 * chart cards and the section frame — on the motion graphic's centre card. */
.fpai-journey-center::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(130deg,
        color-mix(in srgb, var(--purple) 80%, transparent) 0%,
        color-mix(in srgb, #60a5fa 76%, transparent) 48%,
        color-mix(in srgb, #d490ff 74%, transparent) 100%);
    -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;
}

.fpai-journey-mascot {
    width: 56px;
    height: 56px;
    color: var(--blurple);
    filter: drop-shadow(0 0 24px rgba(99, 102, 241, 0.7))
            drop-shadow(0 0 48px rgba(139, 92, 246, 0.4))
            drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
    opacity: 0;
    transition: opacity 0.6s ease 0.8s;
}

.fpai-journey--layer-motion .fpai-journey-mascot {
    opacity: 1;
    animation: fpai-mascot-breathe 4s ease-in-out infinite;
}

.fpai-journey-mascot svg {
    width: 100%;
    height: auto;
    fill: url(#fpaiMascotGradient);
}

@keyframes fpai-mascot-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-4px) scale(1.06); }
}

.fpai-journey-feed {
    position: relative;
    width: 100%;
    height: 88px;
    overflow: hidden;
}

/* Outcome items — JS-driven */
.fpai-journey-outcome {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.fpai-journey-outcome--visible {
    opacity: 1;
    transform: translateY(0);
}

.fpai-journey-outcome-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #ffffff;
    line-height: 1.35;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.7),
                 0 0 40px rgba(0, 0, 0, 0.3);
}

/* AI thinking dots */
.fpai-thinking-dots {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

.fpai-thinking-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #818cf8;
    animation: fpai-dot-pulse 1s ease-in-out infinite;
}

.fpai-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.fpai-thinking-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes fpai-dot-pulse {
    0%, 100% { opacity: 0.25; transform: scale(0.8); }
    50%      { opacity: 1;    transform: scale(1.2); }
}

.fpai-journey-outcome-how {
    font-family: var(--v6-mono, 'JetBrains Mono', 'SF Mono', ui-monospace, monospace);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.5;
}

.fpai-journey-outcome-how--motion  { color: #818cf8; }
.fpai-journey-outcome-how--context { color: #60a5fa; }
.fpai-journey-outcome-how--ai      { color: #a78bfa; }


/* ── Zone annotations — inline in footer, color-coded to ring layers ── */
.fpai-zone-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border-radius: 100px;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Active glow when matching pillar fires */
.fpai-zone-label.fpai-legend-item--active.fpai-zone-label--context {
    border-color: color-mix(in srgb, #3b82f6 50%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, #3b82f6 25%, transparent);
}
.fpai-zone-label.fpai-legend-item--active.fpai-zone-label--motion {
    border-color: color-mix(in srgb, #818cf8 50%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, #818cf8 25%, transparent);
}

.fpai-zone-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.fpai-zone-dot--ai      { background: #8b5cf6; }
.fpai-zone-dot--context { background: #3b82f6; }
.fpai-zone-dot--motion  { background: #6366f1;
}

.fpai-zone-name {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--inv-bg-color);
    white-space: nowrap;
}

/* Context — blue, tied to outer orbit */
.fpai-zone-label--context {
    background: color-mix(in srgb, #3b82f6 8%, color-mix(in srgb, var(--main-bg-color) 75%, transparent));
    border: 1px solid color-mix(in srgb, #3b82f6 25%, transparent);
}

/* Motion — indigo, tied to inner orbit */
.fpai-zone-label--motion {
    background: color-mix(in srgb, #818cf8 8%, color-mix(in srgb, var(--main-bg-color) 75%, transparent));
    border: 1px solid color-mix(in srgb, #818cf8 25%, transparent);
}

/* Connector SVG — lines from pills to rings */
.fpai-connector-svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.fpai-connector-line {
    stroke-width: 1;
    stroke-dasharray: 4 3;
    opacity: 0.35;
}

.fpai-connector-line--context {
    stroke: #3b82f6;
}

.fpai-connector-line--motion {
    stroke: #818cf8;
}

/* Connector line — motion label to inner orbit */
/* AI tag on center card */
.fpai-zone-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--v6-mono, 'JetBrains Mono', 'SF Mono', ui-monospace, monospace);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--inv-bg-color);
    opacity: 0.5;
    transition: opacity 0.4s ease;
    margin-top: 0.15rem;
}

.fpai-zone-tag .fpai-zone-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.fpai-zone-tag.fpai-legend-item--active {
    opacity: 1;
}

.fpai-introduce-footer {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    width: 100%;
}

.fpai-legend-chip {
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent);
    padding: 0.2rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    border-radius: 100px;
}

/* ── Clickable zone labels + tooltip ── */
.fpai-zone-clickable {
    cursor: pointer;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease;
}

.fpai-zone-clickable:hover {
    border-color: color-mix(in srgb, var(--inv-bg-color) 20%, transparent);
}

.fpai-zone-clickable.is-open {
    border-color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
}

.fpai-zone-tag.fpai-zone-clickable {
    cursor: pointer;
}

.fpai-zone-tag.fpai-zone-clickable:hover,
.fpai-zone-tag.fpai-zone-clickable.is-open {
    opacity: 1;
}

.fpai-zone-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    max-width: 280px;
    padding: 0.65rem 0.85rem;
    font-size: 0.72rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--inv-bg-color) 70%, transparent);
    background: color-mix(in srgb, var(--main-bg-color) 85%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    border-radius: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 10;
}

.fpai-zone-tooltip.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px);
    pointer-events: auto;
}


/* ────────────────────────────────────────
   5. FOUR PILLARS
   ──────────────────────────────────────── */
.fpai-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.fpai-pillar-card {
    padding: 2.25rem 1.75rem;
    background: var(--fpai-card-bg);
    border: 1px solid var(--fpai-card-border);
    border-radius: 20px;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.fpai-pillar-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--fpai-gradient);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.fpai-pillar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 35px var(--fpai-glow);
    border-color: color-mix(in srgb, var(--blurple) 18%, transparent);
}

.fpai-pillar-card:hover::before {
    opacity: 1;
}

.fpai-pillar-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 15%, transparent), color-mix(in srgb, var(--blurple) 8%, transparent));
    border: 1px solid color-mix(in srgb, var(--purple) 20%, transparent);
    color: var(--purple);
}

.fpai-pillar-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.fpai-pillar-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--inv-bg-color);
    margin: 0 0 0.75rem;
}

.fpai-pillars-grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

.fpai-pillar-desc {
    font-size: 0.875rem;
    color: var(--inv-bg-color);
    opacity: 0.6;
    line-height: 1.65;
    margin: 0;
}

.fpai-pillar-audience {
    display: block;
    font-size: 0.65rem;
    color: var(--inv-bg-color);
    opacity: 0.25;
    font-style: italic;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--fpai-card-border);
}

/* ────────────────────────────────────────
   6. AI EXPERIENCE — INTERACTIVE SECTION
   ──────────────────────────────────────── */
.fpai-experience {
    position: relative;
}

.fpai-experience-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 30%, rgba(139, 92, 246, 0.08), transparent 45%),
        radial-gradient(circle at 82% 65%, rgba(96, 165, 250, 0.06), transparent 50%);
    pointer-events: none;
}

/* ── Pipeline Spine ── */
.fpai-pipeline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
    margin-bottom: 3rem;
    padding: 0 2rem;
}

.fpai-pipeline-wire {
    position: absolute;
    top: 50%;
    left: 15%;
    right: 15%;
    height: 2px;
    background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    transform: translateY(-50%);
    z-index: 0;
    overflow: hidden;
}

.fpai-pipeline-wire-fill {
    position: absolute;
    inset: 0;
    background: var(--fpai-gradient);
    opacity: 0.3;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.fpai-experience--booted .fpai-pipeline-wire-fill {
    transform: scaleX(1);
}

/* Ambient particles on wire */
.fpai-pipeline-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6366f1;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    filter: blur(1px);
}

.fpai-experience--booted .fpai-pipeline-particle {
    animation: fpai-wire-particle 4s linear infinite;
}

.fpai-particle-1 { animation-delay: 0s !important; }
.fpai-particle-2 { animation-delay: 1.3s !important; }
.fpai-particle-3 { animation-delay: 2.6s !important; }

@keyframes fpai-wire-particle {
    0%   { left: -2%; opacity: 0; }
    5%   { opacity: 0.6; }
    95%  { opacity: 0.6; }
    100% { left: 102%; opacity: 0; }
}

/* Pipeline nodes */
.fpai-pipeline-node {
    all: unset;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    flex: 1;
    padding: 0.75rem 0;
    transition: opacity 0.3s ease;
    opacity: 0;
    transform: scale(0.8);
}

.fpai-experience--booted .fpai-pipeline-node {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fpai-experience--booted .fpai-pipeline-node:nth-child(2) { transition-delay: 0.3s; }
.fpai-experience--booted .fpai-pipeline-node:nth-child(3) { transition-delay: 0.5s; }
.fpai-experience--booted .fpai-pipeline-node:nth-child(4) { transition-delay: 0.7s; }
.fpai-experience--booted .fpai-pipeline-node:nth-child(5) { transition-delay: 0.9s; }

.fpai-node-glow {
    position: absolute;
    width: 100%;
    height: 36px;
    border-radius: 100px;
    background: radial-gradient(ellipse, rgba(99, 102, 241, 0.2), transparent 70%);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.fpai-pipeline-node--active .fpai-node-glow {
    opacity: 1;
    animation: fpai-node-breathe 2.5s ease-in-out infinite;
}

@keyframes fpai-node-breathe {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.6; }
    50%      { transform: translateX(-50%) scale(1.15); opacity: 1; }
}

.fpai-node-count {
    padding: 0.4rem 0.9rem;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: color-mix(in srgb, var(--inv-bg-color) 65%, transparent);
    background: var(--fpai-card-bg);
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent);
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.fpai-pipeline-node--active .fpai-node-count {
    background: var(--fpai-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}

.fpai-node-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--inv-bg-color);
    opacity: 0.35;
    transition: opacity 0.3s ease;
}

.fpai-pipeline-node--active .fpai-node-label {
    opacity: 0.8;
}

.fpai-pipeline-node:hover .fpai-node-label {
    opacity: 0.65;
}

/* Transit particle (fires when switching tabs) */
.fpai-transit-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #818cf8;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    filter: blur(1px);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.6);
    pointer-events: none;
}

/* ── Key Unlock Transition ── */
.fpai-unlock {
    position: relative;
    margin: 0 -3rem 0;
    padding: 1rem 3rem;
    overflow: hidden;
}

.fpai-unlock-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, #0a0a14 85%, transparent) 25%,
        color-mix(in srgb, #0a0a14 92%, transparent) 75%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

.fpai-unlock-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.5rem 0;
}

.fpai-unlock-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 15%, transparent), color-mix(in srgb, #818cf8 8%, transparent));
    border: 0.5px solid color-mix(in srgb, var(--blurple) 22%, transparent);
    color: #818cf8;
    flex-shrink: 0;
    box-shadow: 0 0 20px color-mix(in srgb, var(--blurple) 12%, transparent);
}

.fpai-unlock-shackle {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    transform-origin: 16px 7px;
}

.fpai-unlock--open .fpai-unlock-shackle {
    transform: rotate(-25deg) translateY(-1px);
}

.fpai-unlock-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #818cf8;
    opacity: 0.7;
    margin: 0;
}

.fpai-unlock-layer-name {
    color: #c4b5fd;
    font-weight: 700;
}

.fpai-unlock-edge {
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blurple) 18%, transparent), transparent);
    pointer-events: none;
}

/* ── Viewport ── */
.fpai-viewport {
    position: relative;
    min-height: 400px;
    overflow: hidden;
}

.fpai-layer {
    display: none;
    opacity: 0;
    transform: translateY(10px);
}

.fpai-layer--active {
    display: block;
    animation: fpai-layer-enter 0.4s ease forwards;
    animation-delay: 0.1s;
}

.fpai-layer--exiting {
    display: block;
    animation: fpai-layer-exit 0.3s ease forwards;
}

@keyframes fpai-layer-enter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fpai-layer-exit {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-10px); }
}

/* Layer header */
.fpai-layer-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.fpai-layer-title {
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    font-weight: 700;
    color: var(--inv-bg-color);
    margin: 0 0 0.5rem;
}

.fpai-layer-subtitle {
    font-size: 0.9rem;
    color: var(--inv-bg-color);
    opacity: 0.5;
    margin: 0;
}

/* ── CREATE: Agent flow ── */
.fpai-create-agents {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.fpai-agent-card {
    position: relative;
    padding: 1.5rem 1.25rem;
    background: var(--fpai-card-bg);
    border: 1px solid var(--fpai-card-border);
    border-radius: 16px;
    text-align: center;
    width: 150px;
    transition: all 0.35s ease;
    opacity: 0;
    transform: translateY(12px);
}

.fpai-layer--active .fpai-agent-card {
    animation: fpai-agent-stagger 0.5s ease forwards;
}

.fpai-agent-card[data-stagger="0"] { animation-delay: 0.2s !important; }
.fpai-agent-card[data-stagger="1"] { animation-delay: 0.3s !important; }
.fpai-agent-card[data-stagger="2"] { animation-delay: 0.4s !important; }
.fpai-agent-card[data-stagger="3"] { animation-delay: 0.5s !important; }
.fpai-agent-card[data-stagger="4"] { animation-delay: 0.6s !important; }

@keyframes fpai-agent-stagger {
    to { opacity: 1; transform: translateY(0); }
}

.fpai-agent-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 25px var(--fpai-glow);
    border-color: color-mix(in srgb, var(--purple) 20%, transparent);
}

/* Agent pulse dot */
.fpai-agent-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    position: absolute;
    top: 12px;
    right: 12px;
    animation: fpai-pulse-live 2s ease-in-out infinite;
}

@keyframes fpai-pulse-live {
    0%, 100% { opacity: 0.4; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50%      { opacity: 1; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}

/* Agent icons */
.fpai-agent-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    color: var(--inv-bg-color);
}

.fpai-agent-icon svg {
    width: 20px;
    height: 20px;
}

.fpai-agent-icon--creator {
    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) 25%, transparent);
}
.fpai-agent-icon--architect {
    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) 25%, transparent);
}
.fpai-agent-icon--coach {
    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) 25%, transparent);
}
.fpai-agent-icon--edit {
    background: linear-gradient(135deg, color-mix(in srgb, var(--pink) 18%, transparent), color-mix(in srgb, var(--purple) 10%, transparent));
    border: 1px solid color-mix(in srgb, var(--pink) 25%, transparent);
}
.fpai-agent-icon--inline {
    background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 15%, transparent), color-mix(in srgb, var(--lightblue) 12%, transparent));
    border: 1px solid color-mix(in srgb, var(--blurple) 22%, transparent);
}
.fpai-agent-icon--design {
    background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 15%, transparent), color-mix(in srgb, var(--lightblue) 12%, transparent));
    border: 1px solid color-mix(in srgb, var(--purple) 22%, transparent);
}

.fpai-agent-card-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--inv-bg-color);
    margin: 0 0 0.3rem;
}

.fpai-agent-card-role {
    font-size: 0.65rem;
    color: var(--inv-bg-color);
    opacity: 0.45;
    line-height: 1.4;
    margin: 0;
}

/* Flow connector lines */
.fpai-create-flow-line {
    width: 28px;
    height: 2px;
    background: color-mix(in srgb, var(--blurple) 20%, transparent);
    position: relative;
    flex-shrink: 0;
}

.fpai-create-flow-line::after {
    content: "";
    position: absolute;
    right: -2px;
    top: -3px;
    width: 6px;
    height: 6px;
    border-top: 2px solid color-mix(in srgb, var(--blurple) 25%, transparent);
    border-right: 2px solid color-mix(in srgb, var(--blurple) 25%, transparent);
    transform: rotate(45deg);
}

/* ── SHARE: Split panel ── */
.fpai-share-split {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 800px;
    margin: 0 auto;
}

.fpai-share-panel {
    flex: 1;
    padding: 2rem 1.5rem;
    background: var(--fpai-card-bg);
    border: 1px solid var(--fpai-card-border);
    border-radius: 16px;
}

.fpai-share-panel--template {
    border-radius: 16px 0 0 16px;
    border-right: none;
}

.fpai-share-panel--personalized {
    border-radius: 0 16px 16px 0;
    border-left: none;
}

.fpai-share-panel-label {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--inv-bg-color);
    opacity: 0.3;
    margin-bottom: 1.25rem;
}

.fpai-share-panel-content {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.fpai-share-line {
    height: 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
}

.fpai-share-line--title {
    width: 60%;
    height: 10px;
    margin-bottom: 0.4rem;
}

.fpai-share-line--short {
    width: 70%;
}

.fpai-share-line--glow {
    background: linear-gradient(90deg, color-mix(in srgb, var(--blurple) 15%, transparent), color-mix(in srgb, var(--purple) 10%, transparent));
    position: relative;
    overflow: hidden;
}

.fpai-share-line--glow::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: fpai-shimmer 2.5s ease-in-out infinite;
}

@keyframes fpai-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Share bridge */
.fpai-share-bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 0.75rem;
    min-width: 140px;
}

.fpai-share-bridge-line {
    width: 2px;
    height: 12px;
    background: color-mix(in srgb, var(--blurple) 20%, transparent);
}

.fpai-agent-chip-inline {
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: color-mix(in srgb, var(--blurple) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--blurple) 15%, transparent);
    color: var(--inv-bg-color);
    opacity: 0.7;
    white-space: nowrap;
}

/* Share typing animation */
.fpai-share-typing {
    font-size: 0.75rem;
    color: var(--inv-bg-color);
    opacity: 0.6;
    line-height: 1.6;
    min-height: 2.4em;
    font-family: inherit;
}

.fpai-share-cursor {
    animation: fpai-blink 0.8s step-end infinite;
    color: var(--blurple);
    font-weight: 300;
}

@keyframes fpai-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* ── NAVIGATE: Dual-column stage/dashboard ── */
.fpai-nav-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
}

.fpai-nav-col {
    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: 20px;
    padding: 1.5rem 1.35rem;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    position: relative;
    overflow: hidden;
}

/* subtle top-edge highlight */
.fpai-nav-col::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blurple) 25%, transparent), transparent);
    pointer-events: none;
}

.fpai-nav-col-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-bottom: 1.15rem;
    padding-bottom: 0.75rem;
    border-bottom: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
}

.fpai-nav-col-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 18%, transparent), color-mix(in srgb, #818cf8 10%, transparent));
    border: 0.5px solid color-mix(in srgb, var(--blurple) 20%, transparent);
    color: #818cf8;
    flex-shrink: 0;
}

.fpai-nav-col-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--inv-bg-color);
    margin: 0;
    letter-spacing: 0.01em;
}

.fpai-nav-col-desc {
    width: 100%;
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--inv-bg-color);
    opacity: 0.3;
    margin: 0;
}

/* Stage rows */
.fpai-nav-stages {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fpai-nav-stage {
    padding: 0.55rem 0.7rem;
    border-radius: 11px;
    border: 0.5px solid transparent;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.fpai-nav-stage:hover:not(.fpai-nav-stage--active) {
    background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
}

.fpai-nav-stage--active {
    background: color-mix(in srgb, var(--blurple) 6%, transparent);
    border-color: color-mix(in srgb, var(--blurple) 10%, transparent);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--blurple) 6%, transparent);
}

.fpai-nav-stage-label {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--inv-bg-color);
    opacity: 0.35;
    margin-bottom: 0.25rem;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.fpai-nav-stage--active .fpai-nav-stage-label {
    opacity: 1;
    color: #818cf8;
}

.fpai-nav-actions {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    opacity: 0.25;
    transition: opacity 0.35s ease;
}

.fpai-nav-stage--active .fpai-nav-actions {
    opacity: 1;
}

.fpai-nav-action {
    font-size: 0.68rem;
    color: var(--inv-bg-color);
    opacity: 0.55;
    margin: 0;
    padding-left: 0.85rem;
    position: relative;
    line-height: 1.6;
}

.fpai-nav-action::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #818cf8;
    opacity: 0.6;
    box-shadow: 0 0 6px color-mix(in srgb, var(--blurple) 40%, transparent);
}

/* Dashboard actions */
.fpai-nav-dash-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fpai-nav-dash-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.6rem 0.7rem;
    background: color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
    border-radius: 11px;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.fpai-nav-dash-item:hover {
    background: color-mix(in srgb, var(--blurple) 5%, transparent);
    border-color: color-mix(in srgb, var(--blurple) 12%, transparent);
    transform: translateX(3px);
}

.fpai-nav-dash-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #818cf8;
    flex-shrink: 0;
    margin-top: 0.4em;
    opacity: 0.7;
    box-shadow: 0 0 6px color-mix(in srgb, var(--blurple) 35%, transparent);
}

.fpai-nav-dash-item .fpai-nav-action {
    padding-left: 0;
}

.fpai-nav-dash-item .fpai-nav-action::before {
    display: none;
}

/* ── PREDICT: Viz cards ── */
.fpai-predict-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.fpai-predict-viz-card {
    padding: 1.75rem 1.25rem;
    background: var(--fpai-card-bg);
    border: 1px solid var(--fpai-card-border);
    border-radius: 16px;
    text-align: center;
    transition: all 0.35s ease;
}

.fpai-predict-viz-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px var(--fpai-glow);
}

.fpai-predict-viz {
    margin-bottom: 1rem;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fpai-predict-svg {
    width: 100%;
    max-width: 100px;
    height: 60px;
    color: var(--inv-bg-color);
}

.fpai-predict-viz-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--inv-bg-color);
    margin: 0 0 0.4rem;
}

.fpai-predict-viz-desc {
    font-size: 0.7rem;
    color: var(--inv-bg-color);
    opacity: 0.5;
    line-height: 1.5;
    margin: 0;
}




/* ────────────────────────────────────────
   10. ARCHITECTURE — COMPACT STRIP
   ──────────────────────────────────────── */
.fpai-arch-section {
    padding-top: 3rem;
    padding-bottom: 2rem;
}

.fpai-arch-header {
    text-align: center;
    margin-bottom: 2rem;
}

.fpai-arch-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 2.5rem;
}

.fpai-arch-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    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: 10px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.fpai-arch-item:hover {
    background: color-mix(in srgb, var(--blurple) 6%, transparent);
    border-color: color-mix(in srgb, var(--blurple) 14%, transparent);
}

.fpai-arch-item-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--inv-bg-color);
    opacity: 0.85;
    white-space: nowrap;
}

.fpai-arch-item-sep {
    color: var(--inv-bg-color);
    opacity: 0.15;
    font-size: 0.65rem;
}

.fpai-arch-item-desc {
    font-size: 0.65rem;
    color: var(--inv-bg-color);
    opacity: 0.45;
    white-space: nowrap;
}

/* Inline stat */
.fpai-arch-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.25rem 2rem;
    border-top: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
}

.fpai-arch-stat-number {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    background: var(--fpai-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px var(--fpai-glow-strong));
}

.fpai-arch-stat-label {
    font-size: 0.85rem;
    color: var(--inv-bg-color);
    opacity: 0.5;
    max-width: 380px;
    line-height: 1.55;
}

/* ────────────────────────────────────────
   12. FINAL CTA
   ──────────────────────────────────────── */
.fpai-final-cta {
    text-align: center;
    position: relative;
    padding: var(--fpai-section-py) 1.5rem;
}

.fpai-final-cta-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(79, 70, 229, 0.12), transparent);
    pointer-events: none;
}

.fpai-final-cta-inner {
    position: relative;
    z-index: 2;
    max-width: 740px;
    margin: 0 auto;
}

/* — Manifesto opener — */
.fpai-manifesto {
    margin-bottom: 4rem;
}

.fpai-final-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--inv-bg-color);
    margin: 0 0 1rem;
}

.fpai-final-sub {
    font-size: 1.1rem;
    color: var(--inv-bg-color);
    opacity: 0.5;
    margin: 0 0 2.5rem;
    line-height: 1.7;
}
.fpai-final-sub-strike {
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent);
    text-decoration-thickness: 1.5px;
    opacity: 0.6;
}
.fpai-final-sub-strong {
    opacity: 1;
    font-weight: 700;
    color: var(--inv-bg-color);
}

.fpai-manifesto-lines {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fpai-manifesto-line {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--inv-bg-color);
    opacity: 0.75;
    margin: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.fpai-manifesto-line:last-child {
    opacity: 0.9;
    background: linear-gradient(135deg, #a5b4fc, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* — Closing CTA — */
.fpai-final-close {
    border-top: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    padding-top: 3rem;
}

.fpai-final-close-title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--inv-bg-color);
    margin: 0 0 2rem;
}

.fpai-final-ctas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* ────────────────────────────────────────
   13. COUNTER ANIMATION
   ──────────────────────────────────────── */
.fpai-counter[data-target] {
    transition: none;
}

/* ────────────────────────────────────────
   14. RESPONSIVE BREAKPOINTS
   ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .fpai-introduce-card {
        max-width: 720px;
        padding: 3rem 2rem 2rem;
    }
    .fpai-journey-ring-wrap {
        --ring-size: 460px;
        --ring-radius: 138px;
        --person-radius: 208px;
        --ai-radius: 82px;
        --node-w: 90px;
        --node-h: 30px;
        --tilt: 30deg;
    }
    .fpai-journey-person {
        font-size: 0.48rem;
        min-width: 60px;
        padding: 0 0.5rem;
    }
    .fpai-journey-mascot {
        width: 48px;
        height: 48px;
    }
    .fpai-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .fpai-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .fpai-pillars-grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }
    .fpai-arch-item-desc {
        white-space: normal;
    }

    /* Experience section — tablet */
    .fpai-pipeline {
        padding: 0 1rem;
    }
    .fpai-pipeline-wire {
        left: 10%;
        right: 10%;
    }
    .fpai-create-agents {
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center;
    }
    .fpai-create-flow-line {
        display: none;
    }
    .fpai-agent-card {
        width: 130px;
    }
    .fpai-nav-dual {
        gap: 1rem;
    }
    .fpai-nav-col {
        padding: 1.25rem;
    }
    .fpai-share-split {
        flex-direction: column;
    }
    .fpai-share-panel--template {
        border-radius: 16px 16px 0 0;
        border-right: 1px solid var(--fpai-card-border);
        border-bottom: none;
    }
    .fpai-share-panel--personalized {
        border-radius: 0 0 16px 16px;
        border-left: 1px solid var(--fpai-card-border);
        border-top: none;
    }
    .fpai-share-bridge {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        min-width: auto;
        padding: 0.5rem 0;
    }
    .fpai-share-bridge-line {
        width: 20px;
        height: 2px;
    }
}

@media (max-width: 768px) {
    .fpai-introduce-card {
        padding: 2rem 1rem 1.5rem;
    }
    .fpai-journey-mascot {
        width: 40px;
        height: 40px;
    }
    .fpai-introduce-footer {
        gap: 0.4rem 0.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .fpai-legend-chip {
        font-size: 0.48rem;
        padding: 0.15rem 0.4rem;
    }
    .fpai-zone-label {
        display: inline-flex;
        padding: 0.25rem 0.5rem;
    }
    .fpai-zone-label--context {
        border-color: color-mix(in srgb, #3b82f6 35%, transparent);
    }
    .fpai-zone-label--motion {
        border-color: color-mix(in srgb, #818cf8 35%, transparent);
    }
    .fpai-zone-name {
        font-size: 0.52rem;
    }
    .fpai-zone-dot {
        width: 6px;
        height: 6px;
    }
    .fpai-dims-feed {
        height: 5.5rem;
    }
    .fpai-stats-grid,
    .fpai-pillars-grid {
        grid-template-columns: 1fr;
    }
    .fpai-arch-stat {
        flex-direction: column;
        text-align: center;
    }
    .fpai-hero-ctas {
        flex-direction: column;
        gap: 1rem;
    }
    .fpai-final-ctas {
        flex-direction: column;
        gap: 1rem;
    }
    .fpai-manifesto {
        margin-bottom: 2.5rem;
    }
    .fpai-manifesto-line {
        font-size: 1rem;
    }
    .fpai-final-close {
        padding-top: 2rem;
    }
    .fpai-final-close-title {
        margin-bottom: 1.5rem;
    }
    .fpai-thesis-card {
        padding: 2.5rem 1.5rem;
        border-radius: 20px;
    }
    .fpai-hero {
        min-height: auto;
        padding-top: 120px !important;
        padding-bottom: 80px !important;
    }

    /* Experience section — mobile */
    .fpai-pipeline {
        flex-wrap: nowrap;
        gap: 0;
        padding: 0;
        border-radius: 14px;
        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);
        overflow: hidden;
    }
    .fpai-pipeline-wire {
        display: none;
    }
    .fpai-pipeline-node {
        flex: 1 1 0;
        flex-direction: column;
        gap: 0.2rem;
        padding: 0.65rem 0.25rem;
        border-radius: 0;
        background: transparent;
        border: none;
        border-right: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    }
    .fpai-pipeline-node:last-child {
        border-right: none;
    }
    .fpai-pipeline-node--active {
        background: color-mix(in srgb, var(--blurple) 8%, transparent);
        border-color: color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    }
    .fpai-node-glow {
        display: none;
    }
    .fpai-node-count,
    .fpai-pipeline-node--active .fpai-node-count {
        padding: 0;
        font-size: 0.45rem;
        background: none;
        border: none;
        box-shadow: none;
        border-radius: 0;
        color: var(--inv-bg-color);
        letter-spacing: 0.06em;
    }
    .fpai-node-count {
        opacity: 0.4;
    }
    .fpai-pipeline-node--active .fpai-node-count {
        opacity: 0.7;
    }
    .fpai-node-label {
        font-size: 0.6rem;
    }
    .fpai-layer-header {
        margin-bottom: 1.5rem;
    }
    .fpai-layer-subtitle {
        font-size: 0.8rem;
    }
    .fpai-create-agents {
        gap: 0.5rem;
    }
    .fpai-agent-card {
        width: 100%;
        max-width: 200px;
    }
    .fpai-nav-dual {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .fpai-nav-col {
        padding: 1rem;
        border-radius: 14px;
    }
    .fpai-nav-col-header {
        padding-bottom: 0.6rem;
        margin-bottom: 0.6rem;
    }
    .fpai-nav-stage {
        padding: 0.4rem 0.55rem;
    }
    .fpai-nav-action {
        font-size: 0.58rem;
    }
    .fpai-predict-cards {
        grid-template-columns: 1fr;
    }
    .fpai-viewport {
        min-height: 300px;
    }

    /* Journey — mobile */
    .fpai-journey-ring-wrap {
        --ring-size: 360px;
        --ring-radius: 108px;
        --node-w: 76px;
        --node-h: 26px;
        --person-radius: 162px;
        --ai-radius: 62px;
        --tilt: 22deg;
        --persp: 500px;
    }
    .fpai-journey-feed {
        height: 64px;
    }
    .fpai-journey-person {
        font-size: 0.42rem;
        min-width: 50px;
        height: 24px;
        padding: 0 0.4rem;
        margin-left: -28px;
        margin-top: -12px;
    }
    .fpai-journey-node {
        font-size: 0.55rem;
    }
    .fpai-journey-outcome-text {
        font-size: 0.56rem;
    }
    .fpai-journey-arrow {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }
    .fpai-journey-arrow--prev { left: calc(50% - 80px); }
    .fpai-journey-arrow--next { right: calc(50% - 80px); }
    .fpai-journey-pillars {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
    .fpai-journey-pillar {
        text-align: center;
        flex-direction: column;
        align-items: center;
    }
    .fpai-reassure-footer {
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .fpai-node-label {
        font-size: 0.52rem;
    }
    .fpai-node-count {
        font-size: 0.4rem;
    }
}

/* ── Reduced-motion: kill orbit spins + breathing ── */
@media (prefers-reduced-motion: reduce) {
    .fpai-journey--active .fpai-journey-orbit-outer,
    .fpai-journey--active .fpai-journey-orbit::after,
    .fpai-journey--layer-motion .fpai-journey-mascot {
        animation: none;
    }
}

/* ────────────────────────────────────────
   15. UTILITY
   ──────────────────────────────────────── */
.fpai-gradient-text {
    background: var(--fpai-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fpai-text-center {
    text-align: center;
}

.fpai-mt-0 { margin-top: 0 !important; }

/* ────────────────────────────────────────
   16. AI EXPERIENCE — DARK + PREDICT READOUT
   Grounded in the product's real MLPredictionOrb + MLResults UI.
   ──────────────────────────────────────── */

/* Carry the immersive dark palette through the experience section so the
   ambient glows and the prediction orb read as intended. Mirrors the
   .fpai-crisis / .fpai-introduce local token override. */
/* Dark theme, always: force the immersive dark tokens on the hero and EVERY
   section so the whole page reads dark regardless of the visitor's light/dark
   preference. (.fpai-crisis / .fpai-introduce already self-forced dark; this
   extends it to Experience, Architecture and the Final CTA.) --fpai-card-bg/
   -border are declared at :root as var(--main-bg-color)/var(--inv-bg-color),
   so they were already substituted to the LIGHT theme there and inherit light
   regardless of the token overrides; re-set them with concrete dark values so
   nodes + cards read as elevated-on-dark, not white blocks. */
.fpai-hero,
.fpai-section {
    --main-bg-color: #06060e;
    --inv-bg-color: #f1f5f9;
    --off-bg-color: #06060e;
    --grey-accent-color: #0f172a;
    --secondary-grey-color: #1e293b;
    --fpai-card-bg: color-mix(in srgb, #f1f5f9 4%, #06060e);
    --fpai-card-border: color-mix(in srgb, #f1f5f9 9%, transparent);
    color: #f1f5f9;
}

/* ── ML prediction orb — faithful port of MLPredictionOrb: pulsing core,
   three staggered shockwaves, three orbital particle paths. ── */
.fpai-mlorb { position: relative; width: 184px; height: 184px; flex: none; }
.fpai-mlorb-halo {
    position: absolute; inset: -16%; border-radius: 50%;
    background: radial-gradient(circle at center, rgba(99,102,241,0.40) 0%, rgba(139,92,246,0.24) 42%, transparent 72%);
    filter: blur(14px); z-index: 0;
    animation: fpai-orb-halo 3.6s ease-in-out infinite;
}
.fpai-mlorb-wave {
    position: absolute; inset: 35%; border-radius: 50%;
    border: 1.5px solid rgba(99,102,241,0.65);
    box-shadow: inset 0 0 8px rgba(99,102,241,0.30), 0 0 12px rgba(139,92,246,0.30);
    opacity: 0; z-index: 2;
    animation: fpai-orb-wave 2.4s ease-out infinite;
    will-change: transform, opacity;
}
.fpai-mlorb-wave--2 { animation-delay: 0.8s; }
.fpai-mlorb-wave--3 { animation-delay: 1.6s; }
@keyframes fpai-orb-wave {
    0%   { transform: scale(0.3); opacity: 0; }
    12%  { opacity: 1; }
    100% { transform: scale(2.1); opacity: 0; }
}
.fpai-mlorb-orbit {
    position: absolute; top: 50%; left: 50%; border-radius: 50%;
    pointer-events: none; z-index: 3;
}
.fpai-mlorb-orbit::before,
.fpai-mlorb-orbit::after {
    content: ""; position: absolute; left: 50%; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.80), #6366f1 70%);
    box-shadow: 0 0 10px #6366f1, 0 0 20px rgba(139,92,246,0.70);
}
.fpai-mlorb-orbit--inner {
    --r: 55px; --pip: 9px;
    width: calc(var(--r) * 2); height: calc(var(--r) * 2);
    margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
    animation: fpai-orb-ccw 4s linear infinite;
}
.fpai-mlorb-orbit--mid {
    --r: 77px; --pip: 8px;
    width: calc(var(--r) * 2); height: calc(var(--r) * 2);
    margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
    animation: fpai-orb-cw 6s linear infinite;
}
.fpai-mlorb-orbit--outer {
    --r: 88px; --pip: 7px;
    width: calc(var(--r) * 2); height: calc(var(--r) * 2);
    margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
    animation: fpai-orb-ccw 9s linear infinite;
}
.fpai-mlorb-orbit::before { width: var(--pip); height: var(--pip); margin-left: calc(var(--pip) * -0.5); top: calc(var(--pip) * -0.5); }
.fpai-mlorb-orbit::after  { width: var(--pip); height: var(--pip); margin-left: calc(var(--pip) * -0.5); bottom: calc(var(--pip) * -0.5); }
.fpai-mlorb-orbit--mid::before,
.fpai-mlorb-orbit--mid::after {
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.75), #8b5cf6 70%);
    box-shadow: 0 0 10px #8b5cf6, 0 0 22px rgba(99,102,241,0.70);
}
.fpai-mlorb-orbit--outer::before,
.fpai-mlorb-orbit--outer::after { opacity: 0.75; }
@keyframes fpai-orb-cw  { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes fpai-orb-ccw { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
.fpai-mlorb-core {
    position: absolute; inset: 35%; border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,0.60) 0%, transparent 55%),
        radial-gradient(circle at center, color-mix(in srgb, #fff 28%, #6366f1) 0%, #6366f1 38%, #8b5cf6 100%);
    box-shadow: 0 0 24px rgba(99,102,241,0.65), 0 0 48px rgba(139,92,246,0.45), inset 0 0 20px rgba(255,255,255,0.18);
    z-index: 4;
    animation: fpai-orb-pulse 2s ease-in-out infinite;
}
.fpai-mlorb-sheen {
    position: absolute; inset: 36%; border-radius: 50%;
    background: radial-gradient(circle at 30% 22%, rgba(255,255,255,0.70) 0%, transparent 48%);
    z-index: 5; pointer-events: none;
}
@keyframes fpai-orb-halo  { 0%,100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes fpai-orb-pulse { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.06); filter: brightness(1.15); } }

/* ── Prediction composition: orb + resolving score, forecast + factors ── */
.fpai-pred {
    display: grid;
    grid-template-columns: minmax(240px, 300px) 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 880px;
    margin: 0 auto;
}
.fpai-pred-core { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.fpai-pred-score { text-align: center; }
.fpai-pred-score-num {
    font-size: 3.75rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em;
    background: var(--fpai-gradient);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 22px var(--fpai-glow-strong));
}
.fpai-pred-score-pct { font-size: 2.25rem; }
.fpai-pred-score-label {
    margin-top: 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--inv-bg-color); opacity: 0.5;
}
.fpai-pred-readout { display: flex; flex-direction: column; gap: 1.75rem; }
.fpai-pred-forecast-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.65rem; }
.fpai-pred-forecast-label {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--inv-bg-color); opacity: 0.55;
}
.fpai-pred-forecast-val { font-size: 1rem; font-weight: 700; color: var(--inv-bg-color); }
.fpai-pred-forecast-val em { font-style: normal; font-weight: 500; font-size: 0.72rem; opacity: 0.5; margin-left: 0.45rem; }
.fpai-pred-forecast-track { position: relative; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--inv-bg-color) 7%, transparent); }
.fpai-pred-forecast-band {
    position: absolute; top: 0; bottom: 0; left: 34%; width: 0; border-radius: 99px;
    background: linear-gradient(90deg, rgba(99,102,241,0.30), rgba(139,92,246,0.45));
    transition: width 1s cubic-bezier(0.22,1,0.36,1) 0.35s;
}
.fpai-pred--booted .fpai-pred-forecast-band { width: 28%; }
.fpai-pred-forecast-point {
    position: absolute; top: 50%; left: 48%; width: 12px; height: 12px; border-radius: 50%;
    background: #818cf8; box-shadow: 0 0 12px #6366f1, 0 0 22px rgba(139,92,246,0.6);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.5s cubic-bezier(0.22,1,0.36,1) 1s;
}
.fpai-pred--booted .fpai-pred-forecast-point { transform: translate(-50%, -50%) scale(1); }
.fpai-pred-factors-head {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--inv-bg-color); opacity: 0.55; margin-bottom: 1rem;
}
.fpai-pred-factor {
    display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: 0.85rem;
    margin-bottom: 0.75rem; opacity: 0; transform: translateX(-8px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.fpai-pred--booted .fpai-pred-factor { opacity: 1; transform: none; }
.fpai-pred--booted .fpai-pred-factor-list .fpai-pred-factor:nth-child(1) { transition-delay: 0.15s; }
.fpai-pred--booted .fpai-pred-factor-list .fpai-pred-factor:nth-child(2) { transition-delay: 0.30s; }
.fpai-pred--booted .fpai-pred-factor-list .fpai-pred-factor:nth-child(3) { transition-delay: 0.45s; }
.fpai-pred--booted .fpai-pred-factor-list .fpai-pred-factor:nth-child(4) { transition-delay: 0.60s; }
.fpai-pred-factor-name { font-size: 0.82rem; color: var(--inv-bg-color); opacity: 0.8; }
.fpai-pred-factor-bar {
    position: relative; height: 6px; border-radius: 99px; overflow: hidden;
    background: color-mix(in srgb, var(--inv-bg-color) 7%, transparent);
}
.fpai-pred-factor-bar i {
    position: absolute; inset: 0; display: block; width: 0; border-radius: 99px;
    background: var(--fpai-gradient);
    transition: width 0.9s cubic-bezier(0.22,1,0.36,1);
}
.fpai-pred--booted .fpai-pred-factor-bar i { width: var(--impact); }
.fpai-pred--booted .fpai-pred-factor-list .fpai-pred-factor:nth-child(1) .fpai-pred-factor-bar i { transition-delay: 0.25s; }
.fpai-pred--booted .fpai-pred-factor-list .fpai-pred-factor:nth-child(2) .fpai-pred-factor-bar i { transition-delay: 0.40s; }
.fpai-pred--booted .fpai-pred-factor-list .fpai-pred-factor:nth-child(3) .fpai-pred-factor-bar i { transition-delay: 0.55s; }
.fpai-pred--booted .fpai-pred-factor-list .fpai-pred-factor:nth-child(4) .fpai-pred-factor-bar i { transition-delay: 0.70s; }
.fpai-pred-factor[data-dir="neg"] .fpai-pred-factor-bar i { background: linear-gradient(90deg, #8b5cf6, #a78bfa); opacity: 0.65; }
.fpai-pred-factor-val { font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: #a5b4fc; }
.fpai-pred-factor[data-dir="neg"] .fpai-pred-factor-val { color: #c4b5fd; opacity: 0.75; }

/* ── Real capabilities as ground-truth chips ── */
.fpai-pred-caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; max-width: 880px; margin: 3.5rem auto 0; }
.fpai-pred-cap { padding: 1.15rem 1.25rem; background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); }
.fpai-pred-cap b {
    display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase; color: #a5b4fc; margin-bottom: 0.5rem;
}
.fpai-pred-cap span { font-size: 0.8rem; line-height: 1.55; color: var(--inv-bg-color); opacity: 0.6; }

@media (max-width: 760px) {
    .fpai-pred { grid-template-columns: 1fr; gap: 2.25rem; }
    .fpai-pred-caps { grid-template-columns: repeat(2, 1fr); }
    .fpai-pred-factor { grid-template-columns: 110px 1fr 30px; gap: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .fpai-mlorb-wave { animation: none; opacity: 0; }
    .fpai-mlorb-halo, .fpai-mlorb-core,
    .fpai-mlorb-orbit--inner, .fpai-mlorb-orbit--mid, .fpai-mlorb-orbit--outer { animation-duration: 6s; }
    .fpai-pred-factor, .fpai-pred-factor-bar i, .fpai-pred-forecast-band, .fpai-pred-forecast-point { transition-duration: 0.01ms; }
}

/* ────────────────────────────────────────
   17. PREMIUM SCROLL REVEALS — index v6 parity
   Ported from index_v6.css so this page reveals on scroll like the home page.
   Driven by the reveal observer in fpai-v3.js. .has-animations is dropped on
   this page (body_class override) so legacy scroll-reveal.js does not double-bind.
   ──────────────────────────────────────── */
:root {
    --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(6px);
    transition:
        opacity 820ms var(--ease-reveal) var(--reveal-delay, 0ms),
        transform 960ms var(--ease-reveal) var(--reveal-delay, 0ms),
        filter 720ms ease var(--reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal-card {
    opacity: 0;
    transform: translateY(40px) rotateX(6deg) scale(0.97);
    filter: blur(7px);
    transform-origin: 50% 100%;
    transition:
        opacity 880ms var(--ease-reveal) var(--reveal-delay, 0ms),
        transform 1060ms var(--ease-spring) var(--reveal-delay, 0ms),
        filter 760ms ease var(--reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}
.reveal-card.is-visible { opacity: 1; transform: translateY(0) rotateX(0) scale(1); filter: blur(0); }
.reveal-left, .reveal-right {
    opacity: 0;
    filter: blur(6px);
    transition:
        opacity 820ms var(--ease-reveal) var(--reveal-delay, 0ms),
        transform 960ms var(--ease-reveal) var(--reveal-delay, 0ms),
        filter 700ms ease var(--reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}
.reveal-left  { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal-left.is-visible, .reveal-right.is-visible { opacity: 1; transform: translateX(0); filter: blur(0); }
.reveal-stagger > *.reveal,
.reveal-stagger > *.reveal-card,
.reveal-stagger > *.reveal-left,
.reveal-stagger > *.reveal-right { --reveal-delay: calc(var(--i, 0) * 110ms); }
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-card, .reveal-left, .reveal-right { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ── "Explore First-Party AI" CTA — index First-Party AI section ──
   A gradient call placed directly under the section subline, in the same
   gradient + arrow language as the section's motion graphic. Hovering it also
   lights the ring core below, so the CTA stays tied to the graphic. */
.ai-practice-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1.6rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.005em;
    text-decoration: none;
    background: linear-gradient(100deg, #818cf8 0%, #ffffff 50%, #c084fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 12px rgba(129, 140, 248, 0.5));
    transition: filter 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
}
.ai-practice-cta svg {
    width: 18px;
    height: 18px;
    color: #a5b4fc;                 /* svg uses stroke="currentColor"; reset from the transparent text fill */
    -webkit-text-fill-color: #a5b4fc;
    filter: drop-shadow(0 0 7px rgba(129, 140, 248, 0.65));
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-practice-cta:hover,
.ai-practice-cta:focus-visible { filter: drop-shadow(0 0 20px rgba(129, 140, 248, 0.95)); }
.ai-practice-cta:hover svg,
.ai-practice-cta:focus-visible svg { transform: translateX(5px); }
/* Out-specify the global `a:not(.button)` underline (0,1,1). */
.ai-practice-header a.ai-practice-cta,
.ai-practice-header a.ai-practice-cta:hover,
.ai-practice-header a.ai-practice-cta:focus {
    text-decoration: none;
    -webkit-text-decoration: none;
}

/* Hovering the CTA lights the ring core below — keeps it tied to the graphic. */
.fpai-journey-center { transition: box-shadow 0.45s ease, border-color 0.45s ease; }
#ai-in-practice:has(.ai-practice-cta:hover) .fpai-journey-center,
#ai-in-practice:has(.ai-practice-cta:focus-visible) .fpai-journey-center {
    box-shadow: 0 0 90px rgba(99, 102, 241, 0.30), 0 0 150px rgba(139, 92, 246, 0.16);
    border-color: color-mix(in srgb, #818cf8 38%, transparent);
}

/* ══════════════════════════════════════════════════════════════════
   FLOW SYSTEM — one rhythm for the whole page.
   Spacing, narrative waypoints and reveal cadence tuned so the beats read
   as a single story, not stacked cards.
   ══════════════════════════════════════════════════════════════════ */

/* Consistent vertical rhythm. Architecture had drifted tight (~3rem) while the
   rest ran 5–8rem; unify the section cadence and the header→content gaps. */
.fpai-arch-section {
    padding-top: var(--fpai-section-py);
    padding-bottom: var(--fpai-section-py);
}
.fpai-section-title--centered { margin-bottom: 2.75rem; }
.fpai-arch-header { margin-bottom: 2.75rem; }
.fpai-layer-header { margin-bottom: 2.75rem; }

/* Narrative waypoint — one eyebrow style marking each beat of the story
   (Problem → Solution → How → Proof) so the reader always knows where they are. */
.fpai-eyebrow {
    display: block;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: #818cf8;
    opacity: 0.9;
    margin: 0 0 1rem;
}

/* The pipeline beat gets a real header so you land on "here's how it works"
   before the interactive UI, instead of dropping straight into it. */
.fpai-exp-header {
    text-align: center;
    margin-bottom: 3.5rem;
}
.fpai-exp-header .fpai-section-subtitle { margin-top: 0.25rem; }

/* New narrative beats — Solution, Why It's Yours, Close. */
.fpai-beat-header { text-align: center; margin-bottom: 3.25rem; }
.fpai-beat-header .fpai-section-subtitle { margin-top: 0.35rem; }
.fpai-moat {
    max-width: 760px;
    margin: 0 auto 3.75rem;
    text-align: center;
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--inv-bg-color);
}
.fpai-barrier-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    max-width: 760px;
    margin: 0 auto 3rem;
}
.fpai-patent-line {
    max-width: 640px;
    margin: 3rem auto 0;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.65;
    letter-spacing: 0.01em;
    color: color-mix(in srgb, var(--inv-bg-color) 52%, transparent);
}

/* ══════════════════════════════════════════════════════════════════
   INDEX-CALIBER COMPONENTS (dark) — proof cards, patent stats, nucleus CTA.
   Mirrors index_v6.css .roi-multiplier-card / .defend-stat / .cta-stage so
   the page carries the same craft as the home page.
   ══════════════════════════════════════════════════════════════════ */

/* Patent stats — big gradient numbers. */
.fpai-defend-stats {
    display: flex; align-items: center; justify-content: center;
    gap: 1.9rem; margin: 0 auto 3rem; flex-wrap: wrap;
}
.fpai-defend-stat { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.fpai-defend-stat-num {
    font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800; line-height: 1;
    letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
    background: var(--fpai-gradient); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 18px var(--fpai-glow-strong));
}
.fpai-defend-stat-label {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--inv-bg-color); opacity: 0.45;
}
.fpai-defend-stat-divider { width: 1px; height: 44px; background: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); }

/* Proof cards — icon + title + desc. */
.fpai-proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 860px; margin: 0 auto; }
.fpai-proof-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, #8b5cf6 5%, #06060e);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.fpai-proof-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, #8b5cf6 24%, transparent);
    box-shadow: 0 14px 44px color-mix(in srgb, #8b5cf6 14%, transparent);
}
.fpai-proof-icon {
    width: 40px; height: 40px; min-width: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, #8b5cf6 15%, #06060e); color: #a5b4fc;
}
.fpai-proof-icon svg { width: 19px; height: 19px; }
.fpai-proof-body { flex: 1; min-width: 0; }
.fpai-proof-title { font-size: 0.95rem; font-weight: 700; color: var(--inv-bg-color); margin: 0 0 0.35rem; }
.fpai-proof-desc { font-size: 0.82rem; color: var(--inv-bg-color); opacity: 0.55; line-height: 1.6; margin: 0; }

/* Nucleus CTA — the living-ring medallion (the JS reads .cta-nucleus + .cta-core). */
.fpai-cta-stage {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: min(460px, 84vw); height: 420px; margin: 1.5rem auto 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent; text-decoration: none;
}
.fpai-final-cta a.fpai-cta-stage,
.fpai-final-cta a.fpai-cta-stage:hover,
.fpai-final-cta a.fpai-cta-stage:focus,
.fpai-final-cta a.fpai-final-whitepaper,
.fpai-final-cta a.fpai-final-whitepaper:hover,
.fpai-final-cta a.fpai-final-whitepaper:focus { text-decoration: none; -webkit-text-decoration: none; }
.cta-nucleus { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cta-core { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.6rem; }
/* Lit nucleus core: a soft glow pooled behind the label so the medallion's centre
   reads as a glowing core, not empty space. */
.cta-core::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 320px; height: 190px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center,
        color-mix(in srgb, #6366f1 22%, transparent) 0%,
        color-mix(in srgb, #4eacf1 9%, transparent) 46%,
        transparent 72%);
    filter: blur(7px);
    z-index: -1;
    pointer-events: none;
}
.cta-core-text {
    font-size: 1.35rem; font-weight: 800; letter-spacing: 0.01em;
    background: linear-gradient(100deg, #4eacf1 0%, #ffffff 50%, #7873f5 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 0 15px color-mix(in srgb, #6366f1 70%, transparent));
    transition: filter 0.4s cubic-bezier(0.22,1,0.36,1);
}
.cta-core-arrow { color: #4eacf1; -webkit-text-fill-color: #4eacf1; filter: drop-shadow(0 0 6px color-mix(in srgb, #4eacf1 60%, transparent)); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); }
.fpai-cta-stage:hover .cta-core-text, .fpai-cta-stage:focus-visible .cta-core-text { filter: drop-shadow(0 0 16px color-mix(in srgb, #4eacf1 90%, transparent)); }
.fpai-cta-stage:hover .cta-core-arrow, .fpai-cta-stage:focus-visible .cta-core-arrow { transform: translateX(5px); }
.fpai-final-whitepaper {
    display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.25rem;
    font-size: 0.85rem; font-weight: 600; text-decoration: none;
    color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent);
    transition: color 0.3s ease;
}
.fpai-final-whitepaper:hover { color: var(--inv-bg-color); }

@media (max-width: 760px) { .fpai-proof-grid { grid-template-columns: 1fr; } }

/* ── The Compounding Machine — outcome / loop / foundation diagram ──
   Adapted from brand/linkedin-series/.../assets/whole-machine.svg for
   the dark theme. Inline so it inherits page CSS vars (theme-toggle safe). */
.fpai-machine {
    max-width: 720px;
    margin: 3rem auto 0;
}
.fpai-machine-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    font-family: inherit;
}
.fpai-machine-panel {
    fill: color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
    stroke: color-mix(in srgb, var(--inv-bg-color) 10%, transparent);
    stroke-width: 1.2px;
}
.fpai-machine-panel--foundation {
    fill: color-mix(in srgb, #8b5cf6 6%, transparent);
    stroke: color-mix(in srgb, #8b5cf6 18%, transparent);
}
.fpai-machine-node {
    fill: color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
    stroke: color-mix(in srgb, var(--inv-bg-color) 9%, transparent);
    stroke-width: 1px;
}
.fpai-machine-accent { fill: url(#fpaiMachineSeal); }
.fpai-machine-accent--sm { opacity: 0.85; }
.fpai-machine-label {
    fill: #818cf8;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
}
.fpai-machine-owner {
    fill: #a5b4fc;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 1px;
}
.fpai-machine-title { fill: var(--inv-bg-color); font-weight: 700; }
.fpai-machine-row-label { fill: var(--inv-bg-color); font-weight: 600; }
.fpai-machine-sub { fill: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); font-weight: 500; }
.fpai-machine-caption { fill: color-mix(in srgb, var(--inv-bg-color) 48%, transparent); font-weight: 600; }
.fpai-machine-icon {
    stroke: #a5b4fc;
    fill: none;
    stroke-width: 1.7px;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.fpai-machine-icon-dot { fill: #a5b4fc; }
.fpai-machine-connector, .fpai-machine-loop { stroke: #8b5cf6; stroke-width: 2px; fill: none; }
.fpai-machine-connector-head, .fpai-machine-loop-head { fill: #8b5cf6; }

@media (max-width: 640px) {
    .fpai-machine-svg { font-size: 12px; }
}

/* ── Machine reveal choreography + idle flow ──
   Tiers step in, nodes pop, connectors draw themselves, foundation rows
   cascade in, then three particles keep circling the compounding loop for
   as long as the section is on screen. Gated behind no-preference so
   reduced-motion users get the fully-formed diagram with zero animation. */
@media (prefers-reduced-motion: no-preference) {
    .fpai-machine-tier, .fpai-machine-node-anim, .fpai-machine-row-anim { opacity: 0; }
    .fpai-machine-connector, .fpai-machine-loop { stroke-dasharray: 14; stroke-dashoffset: 14; }
    .fpai-machine-loop { stroke-dasharray: 480; stroke-dashoffset: 480; }
    .fpai-machine-connector-head, .fpai-machine-loop-head { opacity: 0; }

    .fpai-machine.is-visible .fpai-machine-tier { animation: fpaiMachineTierIn 0.6s var(--ease-reveal) forwards; }
    .fpai-machine.is-visible .fpai-machine-tier--0 { animation-delay: 0s; }
    .fpai-machine.is-visible .fpai-machine-tier--1 { animation-delay: 0.35s; }
    .fpai-machine.is-visible .fpai-machine-tier--2 { animation-delay: 0.7s; }

    .fpai-machine.is-visible .fpai-machine-node-anim { animation: fpaiMachineNodeIn 0.5s var(--ease-reveal) forwards; }
    .fpai-machine.is-visible .fpai-machine-node-anim--0 { animation-delay: 0.35s; }
    .fpai-machine.is-visible .fpai-machine-node-anim--1 { animation-delay: 0.5s; }
    .fpai-machine.is-visible .fpai-machine-node-anim--2 { animation-delay: 0.65s; }

    .fpai-machine.is-visible .fpai-machine-connector { animation: fpaiMachineDraw 0.35s ease-out forwards; }
    .fpai-machine.is-visible .fpai-machine-connector--0 { animation-delay: 0.65s; }
    .fpai-machine.is-visible .fpai-machine-connector--1 { animation-delay: 0.8s; }

    .fpai-machine.is-visible .fpai-machine-connector-head { animation: fpaiMachineFadeIn 0.2s ease-out forwards; }
    .fpai-machine.is-visible .fpai-machine-connector-head--0 { animation-delay: 0.95s; }
    .fpai-machine.is-visible .fpai-machine-connector-head--1 { animation-delay: 1.1s; }

    .fpai-machine.is-visible .fpai-machine-loop {
        animation: fpaiMachineDraw 0.8s ease-out forwards;
        animation-delay: 0.85s;
    }
    .fpai-machine.is-visible .fpai-machine-loop-head {
        animation: fpaiMachineFadeIn 0.2s ease-out forwards;
        animation-delay: 1.55s;
    }

    .fpai-machine.is-visible .fpai-machine-row-anim { animation: fpaiMachineRowIn 0.4s var(--ease-reveal) forwards; }
    .fpai-machine.is-visible .fpai-machine-row-anim--0 { animation-delay: 0.7s; }
    .fpai-machine.is-visible .fpai-machine-row-anim--1 { animation-delay: 0.77s; }
    .fpai-machine.is-visible .fpai-machine-row-anim--2 { animation-delay: 0.84s; }
    .fpai-machine.is-visible .fpai-machine-row-anim--3 { animation-delay: 0.91s; }
    .fpai-machine.is-visible .fpai-machine-row-anim--4 { animation-delay: 0.98s; }
    .fpai-machine.is-visible .fpai-machine-row-anim--5 { animation-delay: 1.05s; }
    .fpai-machine.is-visible .fpai-machine-row-anim--6 { animation-delay: 1.12s; }

    @keyframes fpaiMachineTierIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fpaiMachineNodeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fpaiMachineRowIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes fpaiMachineDraw { to { stroke-dashoffset: 0; } }
    @keyframes fpaiMachineFadeIn { to { opacity: 1; } }

    /* Idle flow — a lit current perpetually circling the loop: a soft blurred
       glow layer behind a crisp bright core, no per-lap blink. pathLength="100"
       normalizes stroke-dasharray/-offset so the "lit" fraction is exact
       regardless of the curve's real geometric length. */
    .fpai-machine-loop-glow, .fpai-machine-loop-flow {
        fill: none;
        stroke-linecap: round;
        opacity: 0;
    }
    .fpai-machine-loop-glow { stroke: #a78bfa; stroke-width: 5px; stroke-dasharray: 20 80; filter: blur(2.5px); }
    .fpai-machine-loop-flow { stroke: #ede9fe; stroke-width: 1.75px; stroke-dasharray: 8 92; }

    .fpai-machine.is-visible .fpai-machine-loop-glow {
        animation: fpaiMachineFlowShowGlow 0.01s 1.6s forwards, fpaiMachineFlowTravel 2.6s linear 1.6s infinite;
    }
    .fpai-machine.is-visible .fpai-machine-loop-flow {
        animation: fpaiMachineFlowShowCore 0.01s 1.6s forwards, fpaiMachineFlowTravel 2.6s linear 1.6s infinite;
    }
    @keyframes fpaiMachineFlowShowGlow { to { opacity: 0.4; } }
    @keyframes fpaiMachineFlowShowCore { to { opacity: 0.95; } }
    @keyframes fpaiMachineFlowTravel { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
}

/* ══════════════════════════════════════════════════════════════════
   MATCH THE INDEX — exact type + spacing system (index_v6 values verbatim).
   The page was on the old fpai-v3 scale (8rem sections, 800-weight solid
   titles, a 0.62rem eyebrow). These override it to the home page's system so
   the rhythm and typography read identically.
   ══════════════════════════════════════════════════════════════════ */

/* Section rhythm — index .py-24 / .defend-section = 6rem; finale is taller. */
.fpai-section { padding: 6rem 0; }
.fpai-crisis, .fpai-crisis--compact, .fpai-introduce, .fpai-defensible { padding: 6rem 0; }
.fpai-final-cta { padding: 7.5rem 0 8.5rem; }
.fpai-section-inner { max-width: 960px; }

/* Eyebrow — index .ai-practice-kicker / .defend-eyebrow. */
.fpai-eyebrow {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #818cf8;
    opacity: 1;
    margin: 0 0 1.25rem;
}

/* Section title — index .ai-practice-title (gradient, 700, fluid clamp). */
.fpai-section-title,
.fpai-section-title--centered {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 0.5rem;
    background: linear-gradient(160deg, #4f46e5 0%, #6366f1 50%, #8b5cf6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.fpai-section-title--centered { text-align: center; }

/* Subtitle — index .ai-practice-subline. */
.fpai-section-subtitle {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
    opacity: 1;
    color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent);
    max-width: 560px;
    margin: 0.5rem auto 0;
}

/* Header → content gap — index .mb-8 = 2rem. */
.fpai-beat-header { margin-bottom: 2rem; }
.fpai-crisis .fpai-section-title--centered { margin-bottom: 2rem; }

/* Finale — index .final-cta-title (solid, 800) + .final-cta-subtitle. */
.fpai-final-title {
    font-size: clamp(2.2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--inv-bg-color);
    margin-bottom: 1.4rem;
    background: none;
    -webkit-text-fill-color: currentColor;
}
.fpai-final-sub {
    font-size: 1.12rem;
    line-height: 1.65;
    opacity: 0.6;
    color: var(--inv-bg-color);
    max-width: 500px;
    margin: 0 auto;
}

/* Ambient glow behind the Why-It's-Yours beat (index sections carry these). */
.fpai-defensible::before {
    content: "";
    position: absolute;
    top: -8%;
    left: 50%;
    transform: translateX(-50%);
    width: 760px;
    max-width: 120%;
    height: 480px;
    background: radial-gradient(ellipse, color-mix(in srgb, #8b5cf6 8%, transparent) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.fpai-defensible .fpai-section-inner { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════
   PAGE-WIDE AURORA BACKDROP — First-Party AI page only.
   Scoped via body:has(.fpai-hero); that section exists only on this page, so
   the home page (which loads this stylesheet for the shared carousel) is
   untouched. One fixed aurora sits behind the whole page and the section bases
   go transparent, so the gradient reads as a single continuous field instead
   of flat #06060e restarting at every section seam.
   ═══════════════════════════════════════════════════════════════════ */
body:has(.fpai-hero) {
    background-color: #050509 !important;
    background-image:
        radial-gradient(58% 46% at 12% 6%, rgba(120, 115, 245, 0.16) 0%, transparent 55%),
        radial-gradient(52% 42% at 88% 16%, rgba(96, 165, 250, 0.14) 0%, transparent 55%),
        radial-gradient(56% 48% at 84% 74%, rgba(212, 144, 255, 0.13) 0%, transparent 55%),
        radial-gradient(52% 48% at 14% 92%, rgba(120, 115, 245, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, #0c0d20 0%, #08091a 45%, #050509 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

body:has(.fpai-hero) .fpai-hero,
body:has(.fpai-hero) .fpai-section,
body:has(.fpai-hero) .fpai-crisis {
    background: transparent !important;
}

/* ── Brighter, cooler title text (FPAI page) ─────────────────────────
 * The brand gradient starts at dark #4f46e5, which reads muddy/low-contrast on
 * the dark surface — so the gradient titles fell flat and monochromatic-purple.
 * Lift the whole ramp (blue-indigo → indigo → light violet) so the text pops
 * with luminance and a bit more hue range. Text only; the button/icon
 * --fpai-gradient stays rich. */
.fpai-gradient-text,
.fpai-section-title--centered,
.fpai-kicker-term,
.fpai-thesis-headline em,
.fpai-stat-value {
    background-image: linear-gradient(130deg, #6d8bf5 0%, #8a8cf8 44%, #b493f6 100%) !important;
}