@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   VCO-1004 - Veradigm Connect public landing page
   Built to the "01 · Marketing & onboarding / Public landing page" artboard.
   Type scale, colours and spacing sampled from the comp rather than guessed.
   ========================================================================== */

.vh-page {
    --midnight: #1D173C;
    --blackberry: #2E2155;
    --indigo: #403C7E;
    --plum: #7A3578;
    --grape: #665998;
    --coral: #E6594C;
    --blueberry: #6282C1;
    --gold: #F5A800;          /* comp uses a deeper amber than brand #FAB554 */

    --page-alt: #F8F7FC;
    --line: #ECE8F3;
    --ink: #2E2155;
    --body: #5B5570;
    --muted: #8F8A9C;

    --shadow-card: 0 2px 8px rgba(46, 33, 85, .04);

    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    color: var(--body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.vh-page *,
.vh-page *::before,
.vh-page *::after { box-sizing: border-box; }

/* Full-bleed: content spans the viewport instead of a centred fixed column.
   Side padding scales with the window so it never touches the edges. The
   shell cap only bites above ~2240px, so on laptops this stays edge to edge
   exactly as before; it just stops the hero stretching on a 4K panel. */
.vh-wrap {
    width: 100%;
    max-width: var(--vd-shell-max, 2240px);
    margin: 0 auto;
    padding: 0 var(--vd-gutter, clamp(24px, 4vw, 80px));
}

.vh-page p { margin: 0; }

/* ---------- Buttons ---------- */

.vh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 53px;
    padding: 0 28px;
    border-radius: 24px;
    border: 1.5px solid transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}

.vh-btn:hover { text-decoration: none; }
.vh-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.vh-btn--gold {
    background: var(--gold);
    color: var(--midnight);
    box-shadow: 0 6px 18px rgba(245, 168, 0, .28);
}
.vh-btn--gold:hover {
    background: #ffb920;
    color: var(--midnight);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(245, 168, 0, .38);
}

.vh-btn--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .4);
}
.vh-btn--ghost:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .8);
    color: #fff;
    transform: translateY(-2px);
}

/* margin-top drops the CTA pair a little further below the lede */
.vh-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 12px; }

/* ---------- Hero ---------- */

.vh-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1D173C 0%, #2E2155 35%, #403C7E 75%, #7A3578 105%);
    color: #fff;
    padding: 72px 0 80px;
}

.vh-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 48px;
    align-items: center;
}

.vh-hero h1 {
    font-family: inherit;
    font-size: 46px;
    line-height: 1.1;
    letter-spacing: -.7px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 18px;
}

.vh-hero h1 .vh-accent { color: var(--coral); }

/* prose keeps a measure so lines stay readable on very wide screens,
   even though the container itself is full-bleed */
.vh-hero-lede {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    max-width: 34em;
    margin: 0 0 30px;
}

.vh-hero h1 { max-width: 18em; }

/* ---------- Orbit: the build cycle ----------
   Explore -> Build -> Test -> Launch -> repeat. An arc sweeps clockwise from
   9 o'clock, the active node lifts, and the centre narrates the current step.
   Auto-advances; hovering, focusing or clicking takes over. */

.vh-orbit {
    position: relative;
    width: 100%;
    /* scales with the hero instead of stranding the right column at 400px */
    max-width: clamp(320px, 26vw, 560px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

.vh-orbit-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.vh-orbit-track {
    fill: none;
    stroke: rgba(255, 255, 255, .18);
    stroke-width: 1;
    stroke-dasharray: 4 6;
}

.vh-orbit-arc {
    fill: none;
    stroke: url(#vhArcGrad);
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke-dashoffset .7s cubic-bezier(.4, .1, .2, 1);
}

/* travelling head of the arc */
.vh-orbit-comet { transition: transform .7s cubic-bezier(.4, .1, .2, 1); }
.vh-orbit-comet circle { fill: #fff; }

/* lap-complete ping: an expanding, fading ring around the comet so the wrap
   back to step 1 reads as "finished a lap", not just an abrupt jump cut */
.vh-orbit-ping {
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.vh-orbit-comet--done .vh-orbit-ping {
    animation: vhOrbitPing .6s cubic-bezier(.2, .7, .3, 1);
}
@keyframes vhOrbitPing {
    from { r: 3.5; stroke-width: 2.5; opacity: .9; }
    to   { r: 15;  stroke-width: .5;  opacity: 0; }
}

/* soft glow behind the ring */
.vh-orbit::after {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .07) 0%, transparent 68%);
    pointer-events: none;
}

/* ---- centre readout ---- */

.vh-orbit-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 46%;
    text-align: center;
    z-index: 2;
    pointer-events: none;
}

.vh-core-step {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 5px;
}

.vh-core-title {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -.2px;
    margin-bottom: 6px;
}

.vh-core-desc {
    display: block;
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .68);
}

.vh-core-fade { animation: vhCoreIn .45s cubic-bezier(.2, .7, .3, 1); }

/* the "Cycle complete" beat gets its own slightly bigger pop instead of the
   usual step-to-step fade, so it reads as a distinct moment rather than
   just another step */
.vh-core-fade--done { animation: vhCoreDoneIn .5s cubic-bezier(.2, .7, .3, 1); }
@keyframes vhCoreDoneIn {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
    55%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* .vh-orbit-core centers itself with transform: translate(-50%, -50%) (its
   position is left/top: 50%). This animation runs on that same element on every
   step change, so the keyframes must carry that same offset - otherwise the
   animation's own transform overwrites the centering transform (jumping the
   text right as the animation starts) and then the base rule reasserts itself
   when the animation ends (snapping back to center). */
@keyframes vhCoreIn {
    from { opacity: 0; transform: translate(-50%, -50%) translateY(6px); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ---- nodes ---- */

.vh-node {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    z-index: 3;
}

.vh-node-dot {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 15, 46, .72);
    border: 1.5px solid rgba(255, 255, 255, .28);
    transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.vh-node-dot svg {
    width: 20px; height: 20px;
    stroke: rgba(255, 255, 255, .6);
    transition: stroke .3s ease;
}

.vh-node-label {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, .6);
    white-space: nowrap;
    transition: color .3s ease;
}

.vh-node:hover .vh-node-dot { border-color: rgba(255, 255, 255, .55); transform: scale(1.06); }
.vh-node:focus-visible { outline: none; }
.vh-node:focus-visible .vh-node-dot { outline: 3px solid var(--node); outline-offset: 4px; }

.vh-node.is-active .vh-node-dot {
    background: rgba(20, 15, 46, .9);
    border-color: var(--node);
    transform: scale(1.16);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--node) 18%, transparent),
                0 8px 26px color-mix(in srgb, var(--node) 40%, transparent);
}
.vh-node.is-active .vh-node-dot svg { stroke: var(--node); }
.vh-node.is-active .vh-node-label { color: #fff; }

/* completed steps this lap keep a subtle tint */
.vh-node.is-done .vh-node-dot { border-color: color-mix(in srgb, var(--node) 55%, transparent); }
.vh-node.is-done .vh-node-dot svg { stroke: color-mix(in srgb, var(--node) 80%, #fff); }

/* Positions round the ring. Every label sits OUTWARD from centre - the top
   and bottom ones used to point inward, which dropped them onto the dashed
   track and the edge of the ::after glow and made the text look sliced.

   The ring sits at r=78 in a 200 viewBox, so its top point is 11% down the
   box and its bottom point 89%. The calc() offsets place the 48px dot's
   centre exactly on that line, accounting for the label + 9px gap stacked
   outside it (21px label + 9px gap + 24px half-dot = 54px). */
/* Fix (VCO-1139): left/right, unlike top/bottom above, have no transform
   that recentres the whole box - left/right anchor a single flex box (dot +
   label) by ONE edge, so the box's other edge (and the dot inside it) drifts
   inward by however wide that step's label happens to be. "Launch" is wide
   enough, and the active/hovered dot's own scale(1.16) large enough, that the
   dot ends up sitting on top of the centre readout instead of at the ring
   edge. Decoupled here: the button is sized/anchored to the dot alone, and
   the label is positioned absolutely outside it, so label width no longer
   moves the dot. */
.vh-node--left, .vh-node--right { top: 50%; width: 48px; height: 48px; transform: translateY(-50%); }
.vh-node--left   { left: -2%; }
.vh-node--right  { right: -2%; }
.vh-node--left .vh-node-dot, .vh-node--right .vh-node-dot { position: absolute; inset: 0; }
.vh-node--left .vh-node-label, .vh-node--right .vh-node-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.vh-node--right .vh-node-label { left: 100%; margin-left: 9px; }
.vh-node--left  .vh-node-label { right: 100%; margin-right: 9px; }

.vh-node--top    { top: calc(11% - 54px); left: 50%; transform: translateX(-50%); flex-direction: column; }
.vh-node--bottom { top: calc(89% - 24px); left: 50%; transform: translateX(-50%); flex-direction: column-reverse; }

.vh-node--top    { --node: #6282C1; } /* Explore */
.vh-node--right  { --node: #A89FE8; } /* Build   */
.vh-node--bottom { --node: #E6594C; } /* Test    */
.vh-node--left   { --node: #F5A800; } /* Launch  */

/* ---------- How it works ---------- */

.vh-section {
    background: var(--page-alt);
    padding: 80px 0 40px;
}

.vh-eyebrow {
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.96px;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 12px;
}

.vh-page h2.vh-h2 {
    font-family: inherit;
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -.5px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 36px;
}

.vh-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.vh-step {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    padding: 24px 22px;
    min-height: 208px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.vh-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(46, 33, 85, .10);
}

.vh-step-num {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background: var(--tone);
    margin-bottom: 22px;
}

.vh-step:nth-child(1) { --tone: #6282C1; }
.vh-step:nth-child(2) { --tone: #7A3578; }
.vh-step:nth-child(3) { --tone: #403C7E; }
.vh-step:nth-child(4) { --tone: #E6594C; }

.vh-step-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
    line-height: 1.3;
}

.vh-step-desc {
    display: block;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--body);
}

/* ---------- Closing band ---------- */

.vh-cta-outer {
    background: var(--page-alt);
    padding: 24px 0 72px;
}

.vh-cta {
    background: linear-gradient(135deg, #2E2155 0%, #403C7E 55%, #7A3578 100%);
    border-radius: 18px;
    padding: 44px 48px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}

.vh-cta h2 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.4px;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.25;
}

.vh-cta p {
    font-size: 16px;
    color: rgba(255, 255, 255, .82);
}

/* ---------- Reveal ---------- */

.vh-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);
}
.vh-reveal.vh-in { opacity: 1; transform: none; }

.vh-reveal-group > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s cubic-bezier(.2,.7,.3,1), transform .5s cubic-bezier(.2,.7,.3,1);
}
.vh-reveal-group.vh-in > * { opacity: 1; transform: none; }
.vh-reveal-group.vh-in > *:nth-child(1) { transition-delay: 0s; }
.vh-reveal-group.vh-in > *:nth-child(2) { transition-delay: .07s; }
.vh-reveal-group.vh-in > *:nth-child(3) { transition-delay: .14s; }
.vh-reveal-group.vh-in > *:nth-child(4) { transition-delay: .21s; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
    .vh-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vh-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .vh-hero-lede { max-width: none; }
    .vh-orbit { max-width: 320px; }
}

@media (max-width: 640px) {
    .vh-wrap { padding: 0 20px; }
    .vh-hero { padding: 52px 0 60px; }
    .vh-hero h1 { font-size: 34px; letter-spacing: -.4px; }
    .vh-section { padding: 56px 0 32px; }
    .vh-page h2.vh-h2 { font-size: 27px; }
    .vh-steps { grid-template-columns: 1fr; }
    .vh-step { min-height: 0; }
    .vh-cta { padding: 32px 26px; }
    .vh-actions { flex-direction: column; align-items: stretch; }
    .vh-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .vh-page * { transition: none !important; }
    .vh-reveal,
    .vh-reveal-group > * { opacity: 1 !important; transform: none !important; }
}