/* Hero value-chain infographic (homepage)
   Story: views -> enquiries -> revenue -> repeat business -> word of mouth -> (loop) views.
   Secondary beats: one fixed investment vs long-term payback; trust 24/7.
   Glass graphite panel, cyan-teal accents, dark-hero friendly.
   JS (hero-value-infographic.js) adds .is-armed then .is-live via IntersectionObserver.
   No JS => fully static, visible final state. prefers-reduced-motion => static final state. */

.hero-value-flow {
    --hvf-cyan: #22d3ee;
    --hvf-teal: #2dd4bf;
    --hvf-ink: rgba(226, 240, 248, 0.72);
    --hvf-glass: rgba(13, 19, 27, 0.55);
    --hvf-edge: rgba(148, 210, 233, 0.16);
    width: 100%;
    max-width: 920px;
    margin: 1.9rem auto 2.1rem;
    padding: clamp(1.1rem, 2.6vw, 1.6rem) clamp(0.9rem, 2.4vw, 1.5rem) clamp(1rem, 2.2vw, 1.35rem);
    border: 1px solid var(--hvf-edge);
    border-radius: 22px;
    background:
        radial-gradient(120% 140% at 50% -20%, rgba(34, 211, 238, 0.07), transparent 55%),
        var(--hvf-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 18px 46px rgba(2, 8, 16, 0.42);
    text-align: center;
    position: relative;
}

.hero-value-flow .hvf-kicker {
    margin: 0 0 1.05rem;
    font-size: clamp(0.66rem, 1.8vw, 0.74rem);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(153, 235, 255, 0.78);
    text-shadow: 0 0 18px rgba(34, 211, 238, 0.35);
}

/* ---- Value chain ---- */
.hvf-chain {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: clamp(0.2rem, 1vw, 0.45rem);
}

.hvf-stage {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.42rem;
    padding: 0.25rem 0.1rem;
}

.hvf-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(2.4rem, 5vw, 2.9rem);
    height: clamp(2.4rem, 5vw, 2.9rem);
    border-radius: 50%;
    color: var(--hvf-cyan);
    border: 1px solid rgba(34, 211, 238, 0.32);
    background:
        radial-gradient(circle at 50% 28%, rgba(34, 211, 238, 0.16), rgba(34, 211, 238, 0.03) 68%),
        rgba(10, 16, 24, 0.6);
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
}

.hvf-icon svg {
    width: 55%;
    height: 55%;
    display: block;
}

.hvf-stage:nth-child(odd) .hvf-icon {
    color: var(--hvf-teal);
    border-color: rgba(45, 212, 191, 0.32);
}

.hvf-label {
    font-family: 'Space Grotesk', var(--font-sans, 'IBM Plex Sans', sans-serif);
    font-size: clamp(0.78rem, 1.9vw, 0.92rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
    line-height: 1.15;
}

.hvf-hint {
    font-size: clamp(0.62rem, 1.55vw, 0.74rem);
    color: var(--hvf-ink);
    line-height: 1.3;
    max-width: 11.5em;
}

/* Connector arrows between stages */
.hvf-arrow {
    flex: 0 0 clamp(1.6rem, 3.4vw, 2.6rem);
    align-self: flex-start;
    margin-top: clamp(1rem, 2.2vw, 1.25rem);
    height: 12px;
    color: rgba(34, 211, 238, 0.75);
    overflow: visible;
}

.hvf-arrow path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* Flywheel loop arc (desktop): word of mouth feeds new views */
.hvf-loop {
    margin-top: 0.35rem;
}

.hvf-loop-arc {
    display: block;
    width: min(86%, 640px);
    height: 26px;
    margin: 0 auto;
    color: rgba(45, 212, 191, 0.65);
    overflow: visible;
}

.hvf-loop-arc path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 0.035 0.02;
    vector-effect: non-scaling-stroke;
}

.hvf-loop-arc .hvf-loop-head {
    stroke-dasharray: none;
    stroke-width: 1.7;
}

.hvf-loop-label {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.28rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(45, 212, 191, 0.24);
    background: rgba(45, 212, 191, 0.08);
    font-size: clamp(0.68rem, 1.7vw, 0.76rem);
    color: rgba(196, 245, 234, 0.88);
    line-height: 1.4;
}

/* ---- Secondary beats: investment vs payback + trust ---- */
.hvf-beats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.05rem;
}

.hvf-beat {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.95rem;
    border-radius: 14px;
    border: 1px solid var(--hvf-edge);
    background: rgba(255, 255, 255, 0.025);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    text-align: left;
    max-width: 100%;
}

.hvf-beat-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    color: var(--hvf-teal);
}

.hvf-beat-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.hvf-beat--invest .hvf-beat-icon {
    color: var(--hvf-cyan);
}

.hvf-beat-copy {
    font-size: clamp(0.72rem, 1.8vw, 0.8rem);
    color: var(--hvf-ink);
    line-height: 1.45;
}

.hvf-beat-copy strong {
    color: #ffffff;
    font-weight: 600;
}

/* Investment -> payback meter */
.hvf-meter {
    flex: 0 0 clamp(3.4rem, 9vw, 5.2rem);
    height: 6px;
    border-radius: 999px;
    background: rgba(148, 210, 233, 0.14);
    overflow: hidden;
}

.hvf-meter-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.55), var(--hvf-teal) 65%, #86efac);
    transform-origin: left center;
}

/* ---- Reveal + motion (JS-armed only) ---- */
.hero-value-flow.is-armed .hvf-stage,
.hero-value-flow.is-armed .hvf-beat,
.hero-value-flow.is-armed .hvf-loop-label {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.hero-value-flow.is-armed .hvf-arrow path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.5s ease;
}

.hero-value-flow.is-armed .hvf-loop-arc {
    opacity: 0;
    transition: opacity 0.7s ease;
}

.hero-value-flow.is-armed .hvf-meter-fill {
    transform: scaleX(0);
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-value-flow.is-live .hvf-stage,
.hero-value-flow.is-live .hvf-beat,
.hero-value-flow.is-live .hvf-loop-label {
    opacity: 1;
    transform: translateY(0);
}

.hero-value-flow.is-live .hvf-arrow path {
    stroke-dashoffset: 0;
}

.hero-value-flow.is-live .hvf-loop-arc {
    opacity: 1;
}

.hero-value-flow.is-live .hvf-meter-fill {
    transform: scaleX(1);
    transition-delay: 1.9s;
}

/* Stagger: stage i, then arrow i, then next stage */
.hero-value-flow.is-live .hvf-stage {
    transition-delay: calc(var(--hvf-i, 0) * 0.28s);
}

.hero-value-flow.is-live .hvf-arrow path {
    transition-delay: calc(var(--hvf-i, 0) * 0.28s + 0.16s);
}

.hero-value-flow.is-live .hvf-loop-arc {
    transition-delay: 1.5s;
}

.hero-value-flow.is-live .hvf-loop-label {
    transition-delay: 1.65s;
}

.hero-value-flow.is-live .hvf-beat {
    transition-delay: calc(1.8s + var(--hvf-i, 0) * 0.18s);
}

/* Idle flywheel pulse: icons glow in sequence, forever but gently */
.hero-value-flow.is-live .hvf-icon {
    animation: hvfIconPulse 7.5s linear infinite;
    animation-delay: calc(2.4s + var(--hvf-i, 0) * 1.5s);
}

@keyframes hvfIconPulse {
    0%, 14%, 100% {
        box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
    }
    5% {
        box-shadow: 0 0 22px 2px rgba(34, 211, 238, 0.35);
    }
}

/* Loop arc slow dash drift = flywheel keeps spinning */
.hero-value-flow.is-live .hvf-loop-flow {
    animation: hvfLoopDrift 6s linear infinite;
    animation-delay: 2.4s;
}

@keyframes hvfLoopDrift {
    to {
        stroke-dashoffset: -0.55;
    }
}

/* ---- Mobile: vertical flow ---- */
@media (max-width: 640px) {
    .hero-value-flow {
        padding: 1.1rem 0.95rem 1rem;
    }

    .hvf-chain {
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
    }

    .hvf-stage {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        gap: 0.75rem;
        padding: 0.3rem 0.2rem;
    }

    .hvf-stage .hvf-icon {
        flex: 0 0 auto;
    }

    .hvf-stage-text {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        min-width: 0;
    }

    .hvf-arrow {
        flex: 0 0 auto;
        align-self: flex-start;
        margin: 0.05rem 0 0.05rem calc(clamp(2.4rem, 5vw, 2.9rem) / 2 + 0.2rem);
        transform: rotate(90deg);
        transform-origin: left center;
        width: 1.4rem;
        height: 12px;
    }

    .hvf-loop-arc {
        display: none;
    }

    .hvf-beats {
        flex-direction: column;
        align-items: stretch;
    }

    .hvf-beat {
        justify-content: flex-start;
    }
}

@media (min-width: 641px) {
    .hvf-stage-text {
        display: contents;
    }
}

/* ---- Reduced motion: static, fully-drawn final state ---- */
@media (prefers-reduced-motion: reduce) {
    .hero-value-flow .hvf-stage,
    .hero-value-flow .hvf-beat,
    .hero-value-flow .hvf-loop-label,
    .hero-value-flow .hvf-loop-arc {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .hero-value-flow .hvf-arrow path {
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
        transition: none !important;
    }

    .hero-value-flow .hvf-meter-fill {
        transform: scaleX(1) !important;
        transition: none !important;
    }

    .hero-value-flow .hvf-icon,
    .hero-value-flow .hvf-loop-flow {
        animation: none !important;
    }
}